51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
|
|
import { NgClass } from '@angular/common';
|
|
|
|
export type IconButtonVariant =
|
|
| 'user'
|
|
| 'trash'
|
|
| 'angle-right'
|
|
| 'angle-left'
|
|
| 'angle-up'
|
|
| 'angle-down'
|
|
| 'copy'
|
|
| 'download'
|
|
| 'share'
|
|
| 'bars';
|
|
|
|
@Component({
|
|
selector: 'app-icon-button',
|
|
imports: [NgClass],
|
|
templateUrl: './icon-button.component.html',
|
|
styleUrl: './icon-button.component.scss',
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
})
|
|
export class IconButtonComponent {
|
|
readonly variant = input.required<IconButtonVariant>();
|
|
readonly disabled = input(false);
|
|
readonly ariaLabel = input<string>('');
|
|
readonly ariaExpanded = input<boolean | null>(null);
|
|
readonly ariaControls = input<string | null>(null);
|
|
readonly clicked = output<MouseEvent>();
|
|
|
|
protected readonly iconClass = computed(() => {
|
|
const classes: Record<IconButtonVariant, string> = {
|
|
user: 'fa-regular fa-circle-user',
|
|
trash: 'fa-solid fa-trash',
|
|
'angle-right': 'fa-solid fa-angle-right',
|
|
'angle-left': 'fa-solid fa-angle-left',
|
|
'angle-up': 'fa-solid fa-angle-up',
|
|
'angle-down': 'fa-solid fa-angle-down',
|
|
copy: 'fa-solid fa-copy',
|
|
download: 'fa-solid fa-download',
|
|
share: 'fa-solid fa-share-nodes',
|
|
bars: 'fa-solid fa-bars',
|
|
};
|
|
return classes[this.variant()];
|
|
});
|
|
|
|
protected readonly buttonClasses = computed(() => {
|
|
return ['icon-btn', `icon-btn--${this.variant()}`];
|
|
});
|
|
}
|