68 lines
2.9 KiB
TypeScript
68 lines
2.9 KiB
TypeScript
import {
|
|
booleanAttribute,
|
|
ChangeDetectionStrategy,
|
|
Component,
|
|
effect,
|
|
ElementRef,
|
|
EventEmitter,
|
|
inject,
|
|
input,
|
|
numberAttribute,
|
|
Output,
|
|
viewChild,
|
|
} from '@angular/core';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { MatIconModule } from '@angular/material/icon';
|
|
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
|
|
import { RouterLink } from '@angular/router';
|
|
import { StopPropagationDirective } from '../../directives';
|
|
import { IqserTooltipPosition, IqserTooltipPositions, randomString } from '../../utils';
|
|
import { CircleButtonType, CircleButtonTypes } from '../types/circle-button.type';
|
|
|
|
@Component({
|
|
selector: 'iqser-circle-button',
|
|
templateUrl: './circle-button.component.html',
|
|
styleUrls: ['./circle-button.component.scss'],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
imports: [MatTooltipModule, MatIconModule, MatButtonModule, StopPropagationDirective],
|
|
})
|
|
export class CircleButtonComponent {
|
|
readonly #elementRef = inject(ElementRef<HTMLElement>);
|
|
protected readonly _matTooltip = viewChild.required(MatTooltip);
|
|
protected readonly _circleButtonTypes = CircleButtonTypes;
|
|
protected readonly _hasRouterLink = !!inject(RouterLink, { optional: true, host: true });
|
|
readonly buttonId = input(`${randomString()}-circle-button`);
|
|
readonly icon = input.required<string>();
|
|
readonly tooltip = input('');
|
|
readonly tooltipClass = input('');
|
|
readonly showDot = input(false, { transform: booleanAttribute });
|
|
readonly tooltipPosition = input<IqserTooltipPosition>(IqserTooltipPositions.above);
|
|
readonly disabled = input(false, { transform: booleanAttribute });
|
|
readonly type = input<CircleButtonType>(CircleButtonTypes.default);
|
|
readonly greySelected = input(false, { transform: booleanAttribute });
|
|
readonly removeTooltip = input(false, { transform: booleanAttribute });
|
|
readonly isSubmit = input(false, { transform: booleanAttribute });
|
|
readonly dropdownButton = input(false, { transform: booleanAttribute });
|
|
readonly size = input(34, { transform: numberAttribute });
|
|
readonly iconSize = input(14, { transform: numberAttribute });
|
|
@Output() readonly action = new EventEmitter<MouseEvent>();
|
|
|
|
constructor() {
|
|
effect(() => {
|
|
this.#elementRef.nativeElement.style.setProperty('--circle-button-size', `${this.size()}px`);
|
|
this.#elementRef.nativeElement.style.setProperty('--circle-button-icon-size', `${this.iconSize()}px`);
|
|
});
|
|
}
|
|
|
|
performAction($event: MouseEvent) {
|
|
if (this.removeTooltip()) {
|
|
this._matTooltip().hide();
|
|
// Timeout to allow tooltip to disappear first,
|
|
// useful when removing an item from the list without a confirmation dialog
|
|
setTimeout(() => this.action.emit($event));
|
|
} else {
|
|
this.action.emit($event);
|
|
}
|
|
}
|
|
}
|