88 lines
2.5 KiB
TypeScript
88 lines
2.5 KiB
TypeScript
import {
|
|
ChangeDetectionStrategy,
|
|
Component,
|
|
HostBinding,
|
|
input,
|
|
} from '@angular/core';
|
|
import { buttonSize, mode } from '../../../styles';
|
|
import { PiBaseButtonComponent } from '../base-button.component';
|
|
import { NgIf } from '@angular/common';
|
|
|
|
@Component({
|
|
selector: 'pi-action-button',
|
|
templateUrl: './action-button.component.html',
|
|
styleUrls: ['./action-button.component.scss'],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
imports: [NgIf],
|
|
})
|
|
export class PiActionButtonComponent extends PiBaseButtonComponent {
|
|
@HostBinding('class') get classes(): string {
|
|
return [
|
|
'pi-action-button',
|
|
this.sizeClass,
|
|
this.directionClass,
|
|
this.fontWeightClass,
|
|
].join(' ');
|
|
}
|
|
|
|
readonly previous = input(false);
|
|
override readonly size = input<buttonSize>('medium');
|
|
readonly text = input<string>();
|
|
readonly hasPadding = input(true);
|
|
readonly hasIcon = input(true);
|
|
readonly label = input<string>();
|
|
readonly buttonType = input<'default' | 'menu-item'>('default');
|
|
readonly mode = input<mode>('dark');
|
|
readonly direction = input<'back' | 'forward'>('forward');
|
|
readonly fontWeight = input<'300' | '400' | '600'>('600');
|
|
|
|
get buttonColorClass(): string | null {
|
|
const color = this.color();
|
|
return color ? `pi-color__${color}` : null;
|
|
}
|
|
|
|
get directionClass(): string | null {
|
|
const direction = this.direction();
|
|
return direction ? `pi-action-button__direction--${direction}` : null;
|
|
}
|
|
|
|
override get sizeClass(): string | null {
|
|
const size = this.size();
|
|
return size ? `pi-button__${size}` : null;
|
|
}
|
|
|
|
get textClass(): string | null {
|
|
return this.text() ? 'has-text' : null;
|
|
}
|
|
|
|
get fontWeightClass(): string | null {
|
|
const fontWeight = this.fontWeight();
|
|
return fontWeight ? `pi-action-button__font-weight--${fontWeight}` : '';
|
|
}
|
|
|
|
get hasPaddingClass(): string | null {
|
|
return this.hasPadding() ? null : 'pi-button__trimmed';
|
|
}
|
|
|
|
get hasIconClass(): string | null {
|
|
return this.hasIcon() ? null : 'has-icon';
|
|
}
|
|
|
|
override get appearanceClass(): string | null {
|
|
const appearance = this.appearance();
|
|
return appearance !== 'fill'
|
|
? `pi-button__appearance--${appearance}`
|
|
: null;
|
|
}
|
|
|
|
get buttonTypeClass(): string | null {
|
|
const buttonType = this.buttonType();
|
|
return buttonType !== 'default' ? `pi-button__type--${buttonType}` : null;
|
|
}
|
|
|
|
get modeClass(): string | null {
|
|
const modeValue = this.mode();
|
|
return modeValue && `pi-color__mode--${modeValue}`;
|
|
}
|
|
}
|