56 lines
2.5 KiB
TypeScript
56 lines
2.5 KiB
TypeScript
import { NgIf } from '@angular/common';
|
|
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, inject, Input, OnInit, 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,
|
|
standalone: true,
|
|
imports: [MatTooltipModule, MatIconModule, NgIf, MatButtonModule, StopPropagationDirective],
|
|
})
|
|
export class CircleButtonComponent implements OnInit {
|
|
readonly #elementRef = inject(ElementRef<HTMLElement>);
|
|
@ViewChild(MatTooltip) private readonly _matTooltip!: MatTooltip;
|
|
protected readonly _circleButtonTypes = CircleButtonTypes;
|
|
protected readonly _hasRouterLink = !!inject(RouterLink, { optional: true, host: true });
|
|
@Input() buttonId = `${randomString()}-circle-button`;
|
|
@Input({ required: true }) icon!: string;
|
|
@Input() tooltip?: string;
|
|
@Input() tooltipClass?: string;
|
|
@Input() showDot = false;
|
|
@Input() tooltipPosition: IqserTooltipPosition = IqserTooltipPositions.above;
|
|
@Input() disabled = false;
|
|
@Input() type: CircleButtonType = CircleButtonTypes.default;
|
|
@Input() greySelected = false;
|
|
@Input() removeTooltip = false;
|
|
@Input() isSubmit = false;
|
|
@Input() dropdownButton = false;
|
|
@Input() size = 34;
|
|
@Input() iconSize = 14;
|
|
@Output() readonly action = new EventEmitter<MouseEvent>();
|
|
|
|
ngOnInit() {
|
|
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);
|
|
}
|
|
}
|
|
}
|