All files / components/button button.component.html

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<ng-template #buttonContent>
    @if (loading()) {
        <mat-spinner diameter="20" />
    }
    <span [class.loading]="loading()">
        <ng-content />
    </span>
</ng-template>
 
@if (link()) {
    @switch (variant()) {
        @case ('filled') {
            <a
                mat-flat-button
                [class]="accentClass()"
                [routerLink]="link()"
                [class.full-width]="fullWidth()"
                [class.disabled]="disabled() || loading()"
                [attr.aria-disabled]="disabled() || loading() || null"
                (click)="onLinkClick($event)"
            >
                <ng-container *ngTemplateOutlet="buttonContent" />
            </a>
        }
        @case ('outlined') {
            <a
                mat-stroked-button
                [class]="accentClass()"
                [routerLink]="link()"
                [class.full-width]="fullWidth()"
                [class.disabled]="disabled() || loading()"
                [attr.aria-disabled]="disabled() || loading() || null"
                (click)="onLinkClick($event)"
            >
                <ng-container *ngTemplateOutlet="buttonContent" />
            </a>
        }
        @default {
            <a
                mat-button
                [class]="accentClass()"
                [routerLink]="link()"
                [class.full-width]="fullWidth()"
                [class.disabled]="disabled() || loading()"
                [attr.aria-disabled]="disabled() || loading() || null"
                (click)="onLinkClick($event)"
            >
                <ng-container *ngTemplateOutlet="buttonContent" />
            </a>
        }
    }
} @else {
    @switch (variant()) {
        @case ('filled') {
            <button
                mat-flat-button
                [class]="accentClass()"
                [type]="type()"
                [disabled]="disabled() || loading()"
                [class.full-width]="fullWidth()"
            >
                <ng-container *ngTemplateOutlet="buttonContent" />
            </button>
        }
        @case ('outlined') {
            <button
                mat-stroked-button
                [class]="accentClass()"
                [type]="type()"
                [disabled]="disabled() || loading()"
                [class.full-width]="fullWidth()"
            >
                <ng-container *ngTemplateOutlet="buttonContent" />
            </button>
        }
        @default {
            <button
                mat-button
                [class]="accentClass()"
                [type]="type()"
                [disabled]="disabled() || loading()"
                [class.full-width]="fullWidth()"
            >
                <ng-container *ngTemplateOutlet="buttonContent" />
            </button>
        }
    }
}