43 lines
1.9 KiB
TypeScript
43 lines
1.9 KiB
TypeScript
import { NgClass } from '@angular/common';
|
|
import { booleanAttribute, ChangeDetectionStrategy, Component, computed, EventEmitter, inject, input, Output } from '@angular/core';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { MatIconModule } from '@angular/material/icon';
|
|
import { RouterLink } from '@angular/router';
|
|
import { StopPropagationDirective } from '../../directives';
|
|
import { randomString } from '../../utils';
|
|
import { IconButtonType, IconButtonTypes } from '../types/icon-button.type';
|
|
|
|
@Component({
|
|
selector: 'iqser-icon-button',
|
|
templateUrl: './icon-button.component.html',
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
imports: [NgClass, MatButtonModule, MatIconModule, StopPropagationDirective],
|
|
})
|
|
export class IconButtonComponent {
|
|
protected readonly _hasRouterLink = !!inject(RouterLink, { optional: true, host: true });
|
|
readonly label = input.required<string>();
|
|
readonly buttonId = input(`${randomString()}-icon-button`);
|
|
readonly icon = input<string>();
|
|
readonly showDot = input(false, { transform: booleanAttribute });
|
|
readonly active = input(false, { transform: booleanAttribute });
|
|
readonly disabled = input(false, { transform: booleanAttribute });
|
|
readonly submit = input(false, { transform: booleanAttribute });
|
|
readonly type = input<IconButtonType>(IconButtonTypes.default);
|
|
protected readonly _classes = computed(() => {
|
|
return {
|
|
overlay: this.showDot(),
|
|
[this.type()]: true,
|
|
'has-icon': !!this.icon(),
|
|
active: this.active(),
|
|
};
|
|
});
|
|
@Output() readonly action = new EventEmitter<MouseEvent>();
|
|
|
|
emitAction($event: MouseEvent) {
|
|
const activeElement = document.activeElement as HTMLElement;
|
|
if (activeElement.tagName?.toLowerCase() === 'button') {
|
|
this.action.emit($event);
|
|
}
|
|
}
|
|
}
|