Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | 2x 2x 2x 2x 2x 2x 42x 42x 42x 42x 42x 42x 42x 47x 6x 2x 2x 3x 2x 2x | import { NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { RouterLink } from '@angular/router';
export type ButtonVariant = 'filled' | 'outlined' | 'text';
export type ButtonAccent = 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
export type ButtonType = 'button' | 'submit' | 'reset';
@Component({
selector: 'ui-button',
imports: [NgTemplateOutlet, RouterLink, MatButtonModule, MatProgressSpinnerModule],
templateUrl: './button.component.html',
styleUrl: './button.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'(click)': 'onHostClick($event)',
},
})
export class ButtonComponent {
variant = input<ButtonVariant>('filled');
accent = input<ButtonAccent>('secondary');
type = input<ButtonType>('button');
disabled = input<boolean>(false);
loading = input<boolean>(false);
fullWidth = input<boolean>(false);
link = input<string | undefined>(undefined);
protected readonly accentClass = computed(() => `accent-${this.accent()}`);
// Level 1: blocks consumer (click) handlers on host
protected onHostClick(event: MouseEvent): void {
if (this.disabled() || this.loading()) {
event.stopImmediatePropagation();
event.preventDefault();
}
}
// Level 2: blocks RouterLink navigation on <a> before event bubbles to host
protected onLinkClick(event: MouseEvent): void {
if (this.disabled() || this.loading()) {
event.preventDefault();
event.stopPropagation();
}
}
}
|