36 lines
1.0 KiB
TypeScript
36 lines
1.0 KiB
TypeScript
import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
|
|
import { NgClass } from '@angular/common';
|
|
|
|
export type ButtonVariant =
|
|
| 'primary'
|
|
| 'secondary'
|
|
| 'danger'
|
|
| 'danger-secondary'
|
|
| 'cancel';
|
|
|
|
@Component({
|
|
selector: 'app-button',
|
|
imports: [NgClass],
|
|
templateUrl: './button.component.html',
|
|
styleUrl: './button.component.scss',
|
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
})
|
|
export class ButtonComponent {
|
|
readonly variant = input<ButtonVariant>('primary');
|
|
readonly type = input<'button' | 'submit' | 'reset'>('button');
|
|
readonly disabled = input(false);
|
|
readonly buttonClass = input<string>('');
|
|
|
|
protected readonly buttonClasses = computed(() => {
|
|
const variants: Record<ButtonVariant, string> = {
|
|
primary: 'btn-primary',
|
|
secondary: 'btn-outline-primary',
|
|
danger: 'btn-danger',
|
|
'danger-secondary': 'btn-outline-danger',
|
|
cancel: 'btn-secondary'
|
|
};
|
|
|
|
return ['btn', variants[this.variant()], this.buttonClass()];
|
|
});
|
|
}
|