59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
|
|
import { NgClass } from '@angular/common';
|
|
|
|
export type ButtonVariant =
|
|
| 'primary'
|
|
| 'secondary'
|
|
| 'neutral-outline'
|
|
| 'borderless'
|
|
| 'danger'
|
|
| 'danger-secondary'
|
|
| 'cancel';
|
|
|
|
@Component({
|
|
selector: 'app-button',
|
|
imports: [NgClass],
|
|
templateUrl: './button.component.html',
|
|
styleUrl: './button.component.scss',
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
host: {
|
|
'[class]': 'hostClasses()',
|
|
'[attr.aria-disabled]': 'disabled()',
|
|
'(click)': 'onHostClick($event)'
|
|
}
|
|
})
|
|
export class ButtonComponent {
|
|
readonly variant = input<ButtonVariant>('primary');
|
|
readonly type = input<'button' | 'submit' | 'reset'>('button');
|
|
readonly disabled = input(false);
|
|
readonly hostClass = input<string>('');
|
|
readonly buttonClass = input<string>('');
|
|
protected readonly hostClasses = computed(() =>
|
|
[this.hostClass(), this.disabled() ? 'app-button--disabled' : ''].filter(Boolean).join(' ')
|
|
);
|
|
|
|
protected readonly buttonClasses = computed(() => {
|
|
const variants: Record<ButtonVariant, string> = {
|
|
primary: 'btn-primary',
|
|
secondary: 'btn-outline-primary',
|
|
'neutral-outline': 'btn-outline-neutral',
|
|
borderless: 'btn-borderless',
|
|
danger: 'btn-danger',
|
|
'danger-secondary': 'btn-outline-danger',
|
|
cancel: 'btn-secondary'
|
|
};
|
|
|
|
return ['btn', variants[this.variant()], this.buttonClass()];
|
|
});
|
|
|
|
protected onHostClick(event: Event): void {
|
|
if (!this.disabled()) {
|
|
return;
|
|
}
|
|
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
event.stopImmediatePropagation();
|
|
}
|
|
}
|