migrate buttons to signal inputs
This commit is contained in:
Dan Percic
parent
76771023c2
commit
0738d8c4ef
@ -1,6 +1,8 @@
|
||||
<button [class.overlay]="showDot" [class.primary]="primary" [disabled]="disabled" [id]="buttonId" mat-button>
|
||||
<span>{{ label }}</span>
|
||||
<button [class.overlay]="showDot()" [class.primary]="primary()" [disabled]="disabled()" [id]="buttonId()" mat-button>
|
||||
<span>{{ label() }}</span>
|
||||
<mat-icon class="chevron-icon" iconPositionEnd svgIcon="iqser:arrow-down"></mat-icon>
|
||||
</button>
|
||||
|
||||
<div *ngIf="showDot" class="dot"></div>
|
||||
@if (showDot()) {
|
||||
<div class="dot"></div>
|
||||
}
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
|
||||
import { randomString } from '../../utils';
|
||||
import { NgIf } from '@angular/common';
|
||||
import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { randomString } from '../../utils';
|
||||
|
||||
@Component({
|
||||
selector: 'iqser-chevron-button',
|
||||
@ -10,12 +9,12 @@ import { MatIconModule } from '@angular/material/icon';
|
||||
styleUrls: ['./chevron-button.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone: true,
|
||||
imports: [NgIf, MatIconModule, MatButtonModule],
|
||||
imports: [MatIconModule, MatButtonModule],
|
||||
})
|
||||
export class ChevronButtonComponent {
|
||||
@Input({ required: true }) label!: string;
|
||||
@Input() showDot = false;
|
||||
@Input() primary = false;
|
||||
@Input() disabled = false;
|
||||
@Input() buttonId = `${randomString()}-chevron-button`;
|
||||
readonly label = input.required<string>();
|
||||
readonly showDot = input(false, { transform: booleanAttribute });
|
||||
readonly primary = input(false, { transform: booleanAttribute });
|
||||
readonly disabled = input(false, { transform: booleanAttribute });
|
||||
readonly buttonId = input(`${randomString()}-chevron-button`);
|
||||
}
|
||||
|
||||
@ -1,21 +1,25 @@
|
||||
<div [matTooltipClass]="tooltipClass || ''" [matTooltipPosition]="tooltipPosition" [matTooltip]="tooltip || ''">
|
||||
<div [matTooltipClass]="tooltipClass()" [matTooltipPosition]="tooltipPosition()" [matTooltip]="tooltip()">
|
||||
<button
|
||||
(click)="performAction($event)"
|
||||
[class.dark-bg]="type === _circleButtonTypes.dark"
|
||||
[class.grey-selected]="greySelected"
|
||||
[class.overlay]="showDot"
|
||||
[class.primary]="type === _circleButtonTypes.primary"
|
||||
[class.warn]="type === _circleButtonTypes.warn"
|
||||
[disabled]="disabled"
|
||||
[id]="buttonId"
|
||||
[class.dark-bg]="type() === _circleButtonTypes.dark"
|
||||
[class.grey-selected]="greySelected()"
|
||||
[class.overlay]="showDot()"
|
||||
[class.primary]="type() === _circleButtonTypes.primary"
|
||||
[class.warn]="type() === _circleButtonTypes.warn"
|
||||
[disabled]="disabled()"
|
||||
[id]="buttonId()"
|
||||
[iqserStopPropagation]="action.observed && !_hasRouterLink"
|
||||
[type]="isSubmit ? 'submit' : 'button'"
|
||||
[type]="isSubmit() ? 'submit' : 'button'"
|
||||
mat-icon-button
|
||||
>
|
||||
<mat-icon [svgIcon]="icon"></mat-icon>
|
||||
<mat-icon [svgIcon]="icon()"></mat-icon>
|
||||
</button>
|
||||
|
||||
<div *ngIf="showDot" class="dot"></div>
|
||||
@if (showDot()) {
|
||||
<div class="dot"></div>
|
||||
}
|
||||
|
||||
<div *ngIf="dropdownButton" [class.disabled]="disabled" class="arrow-down"></div>
|
||||
@if (dropdownButton()) {
|
||||
<div [class.disabled]="disabled()" class="arrow-down"></div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
import { NgIf } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, inject, Input, OnInit, Output, ViewChild } from '@angular/core';
|
||||
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';
|
||||
@ -14,37 +25,39 @@ import { CircleButtonType, CircleButtonTypes } from '../types/circle-button.type
|
||||
styleUrls: ['./circle-button.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone: true,
|
||||
imports: [MatTooltipModule, MatIconModule, NgIf, MatButtonModule, StopPropagationDirective],
|
||||
imports: [MatTooltipModule, MatIconModule, MatButtonModule, StopPropagationDirective],
|
||||
})
|
||||
export class CircleButtonComponent implements OnInit {
|
||||
export class CircleButtonComponent {
|
||||
readonly #elementRef = inject(ElementRef<HTMLElement>);
|
||||
@ViewChild(MatTooltip) private readonly _matTooltip!: MatTooltip;
|
||||
protected readonly _matTooltip = viewChild.required(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;
|
||||
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>();
|
||||
|
||||
ngOnInit() {
|
||||
this.#elementRef.nativeElement.style.setProperty('--circle-button-size', `${this.size}px`);
|
||||
this.#elementRef.nativeElement.style.setProperty('--circle-button-icon-size', `${this.iconSize}px`);
|
||||
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();
|
||||
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));
|
||||
|
||||
@ -1,14 +1,19 @@
|
||||
<button
|
||||
(click)="!disabled && action.emit($event)"
|
||||
[disabled]="disabled"
|
||||
[id]="buttonId"
|
||||
(click)="!disabled() && action.emit($event)"
|
||||
[disabled]="disabled()"
|
||||
[id]="buttonId()"
|
||||
[iqserStopPropagation]="action.observed && !_hasRouterLink"
|
||||
[ngClass]="classes"
|
||||
[type]="submit ? 'submit' : 'button'"
|
||||
[ngClass]="_classes()"
|
||||
[type]="submit() ? 'submit' : 'button'"
|
||||
mat-button
|
||||
>
|
||||
<mat-icon *ngIf="icon" [svgIcon]="icon"></mat-icon>
|
||||
<span>{{ label }}</span>
|
||||
@if (icon(); as icon) {
|
||||
<mat-icon [svgIcon]="icon"></mat-icon>
|
||||
}
|
||||
|
||||
<span>{{ label() }}</span>
|
||||
</button>
|
||||
|
||||
<div *ngIf="showDot" class="dot"></div>
|
||||
@if (showDot()) {
|
||||
<div class="dot"></div>
|
||||
}
|
||||
|
||||
@ -1,37 +1,36 @@
|
||||
import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, Output } from '@angular/core';
|
||||
import { IconButtonType, IconButtonTypes } from '../types/icon-button.type';
|
||||
import { randomString } from '../../utils';
|
||||
import { NgClass, NgIf } from '@angular/common';
|
||||
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 { StopPropagationDirective } from '../../directives';
|
||||
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,
|
||||
standalone: true,
|
||||
imports: [NgClass, MatButtonModule, NgIf, MatIconModule, StopPropagationDirective],
|
||||
imports: [NgClass, MatButtonModule, MatIconModule, StopPropagationDirective],
|
||||
})
|
||||
export class IconButtonComponent {
|
||||
@Input({ required: true }) label!: string;
|
||||
@Input() buttonId = `${randomString()}-icon-button`;
|
||||
@Input() icon?: string;
|
||||
@Input() showDot = false;
|
||||
@Input() active = false;
|
||||
@Input() disabled = false;
|
||||
@Input() submit = false;
|
||||
@Input() type: IconButtonType = IconButtonTypes.default;
|
||||
@Output() readonly action = new EventEmitter<MouseEvent>();
|
||||
protected readonly _hasRouterLink = !!inject(RouterLink, { optional: true, host: true });
|
||||
|
||||
get classes(): Record<string, boolean> {
|
||||
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,
|
||||
overlay: this.showDot(),
|
||||
[this.type()]: true,
|
||||
'has-icon': !!this.icon(),
|
||||
active: this.active(),
|
||||
};
|
||||
}
|
||||
});
|
||||
@Output() readonly action = new EventEmitter<MouseEvent>();
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user