ecabs-components 1.1.84 → 1.1.85
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -1
- package/esm2022/lib/base/consts/buttons.consts.mjs +1 -1
- package/esm2022/lib/ecabs-buttons-v2/ecabs-buttons-v2.component.mjs +21 -17
- package/esm2022/lib/ecabs-loading/spinner/spinner.component.mjs +3 -3
- package/fesm2022/ecabs-components.mjs +21 -17
- package/fesm2022/ecabs-components.mjs.map +1 -1
- package/lib/base/consts/buttons.consts.d.ts +2 -0
- package/lib/ecabs-buttons-v2/ecabs-buttons-v2.component.d.ts +8 -9
- package/package.json +1 -1
- package/src/assets/styles/material/overrides/_button.scss +155 -134
- package/src/assets/styles/scss/modules/_button.scss +281 -272
- package/src/assets/styles/scss/utilities/_mixins.scss +97 -65
package/README.md
CHANGED
|
@@ -25,6 +25,8 @@ To get more help on the Angular CLI use `ng help` or go check out the [Angular C
|
|
|
25
25
|
|
|
26
26
|
## Version History
|
|
27
27
|
|
|
28
|
+
- **v1.1.85** — `EcabsButtonsV2`: add `loadingStyle` input (`spinner-only` | `spinner-label`).
|
|
29
|
+
- `EcabsLoadingSpinner`: replace the thick, fixed-color spinner with a thin tapered ring. Color is now themable via `--ecabs-spinner-color`, defaulting to a soft grey (`--color-gray-400`) so standalone spinners read well; inside a button it adopts the button's text color (e.g. white on a primary button).
|
|
28
30
|
- **v1.1.84** — Add `name` to the Places field mask in both `ecabs-place-autocomplete` and `ecabs-place-autocomplete-v2` so consumers can fall back to it.
|
|
29
31
|
- **v1.1.83** — Support locality-based fallback resolution for history suggestions without `place_id`.
|
|
30
32
|
- **v1.1.82** — Disable browser autocomplete on place autocomplete input.
|
|
@@ -140,7 +142,7 @@ To get more help on the Angular CLI use `ng help` or go check out the [Angular C
|
|
|
140
142
|
- Fix placeholder text of `EcabsSelect`.
|
|
141
143
|
- **v1.0.81** — Fix font size of `EcabsSelect`.
|
|
142
144
|
- **v1.0.80** — Allow custom button options for `Confirm` and `Cancel` buttons on `EcabsDialog`.
|
|
143
|
-
- **v1.0.79** — feat(CU-11266): Update `MatDialog` to `MDC`.
|
|
145
|
+
- **v1.0.79** — feat (CU-11266): Update `MatDialog` to `MDC`.
|
|
144
146
|
- Fix button height issue on anchor tags marked as `mat-button`.
|
|
145
147
|
- Update default font family.
|
|
146
148
|
- Rename `NoteComponent` to `EcabsNoteComponent`.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9ucy5jb25zdHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9lY2Ficy1jb21wb25lbnRzL3NyYy9saWIvYmFzZS9jb25zdHMvYnV0dG9ucy5jb25zdHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBkZWNsYXJlIHR5cGUgQnV0dG9uU3R5bGUgPVxyXG4gIHwgJ2Jhc2ljJ1xyXG4gIHwgJ3JhaXNlZCdcclxuICB8ICdmbGF0J1xyXG4gIHwgJ3N0cm9rZWQnXHJcbiAgfCB1bmRlZmluZWQ7XHJcblxyXG5leHBvcnQgZGVjbGFyZSB0eXBlIEJ1dHRvbkxvYWRpbmdTdHlsZSA9ICdzcGlubmVyLW9ubHknIHwgJ3NwaW5uZXItbGFiZWwnO1xyXG5cclxuZXhwb3J0IGRlY2xhcmUgdHlwZSBCdXR0b25TaXplID0gJ3NtYWxsJyB8ICdtZWRpdW0nIHwgJ2xhcmdlJztcclxuIl19
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, HostBinding, Input, } from '@angular/core';
|
|
1
|
+
import { ChangeDetectionStrategy, Component, HostBinding, Input, } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
import * as i1 from "@angular/common";
|
|
4
4
|
import * as i2 from "@angular/material/button";
|
|
@@ -6,42 +6,46 @@ import * as i3 from "../ecabs-loading/spinner/spinner.component";
|
|
|
6
6
|
export class ButtonsV2Component {
|
|
7
7
|
disabled = false;
|
|
8
8
|
loading = false;
|
|
9
|
+
loadingStyle = 'spinner-label';
|
|
9
10
|
size = 'medium';
|
|
10
11
|
type = 'button';
|
|
11
12
|
style = 'flat';
|
|
12
13
|
color = 'primary';
|
|
13
14
|
fullWidth = false;
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
ngOnChanges(changes) {
|
|
17
|
-
const disableInteraction = this.disabled || this.loading;
|
|
18
|
-
this.classAttr = disableInteraction ? 'pointer-events-none' : '';
|
|
19
|
-
if (changes['fullWidth']) {
|
|
20
|
-
this.updateHostWidth();
|
|
21
|
-
}
|
|
15
|
+
get isDisabled() {
|
|
16
|
+
return this.disabled || this.loading;
|
|
22
17
|
}
|
|
23
|
-
|
|
24
|
-
|
|
18
|
+
get hostWidth() {
|
|
19
|
+
return this.fullWidth ? '100%' : '';
|
|
25
20
|
}
|
|
26
21
|
get sizeClass() {
|
|
27
22
|
return `ecabs-button-v2--${this.size}`;
|
|
28
23
|
}
|
|
24
|
+
get matColor() {
|
|
25
|
+
return this.color === 'success' ? undefined : (this.color ?? undefined);
|
|
26
|
+
}
|
|
27
|
+
get showLabel() {
|
|
28
|
+
return !this.loading || this.loadingStyle === 'spinner-label';
|
|
29
|
+
}
|
|
29
30
|
get buttonClasses() {
|
|
30
31
|
return {
|
|
31
32
|
'!w-full': this.fullWidth,
|
|
32
33
|
'loading !leading-none': this.loading,
|
|
34
|
+
'mat-success': this.color === 'success',
|
|
33
35
|
};
|
|
34
36
|
}
|
|
35
37
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonsV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
36
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonsV2Component, selector: "ecabs-buttons-v2", inputs: { disabled: "disabled", loading: "loading", size: "size", type: "type", style: "style", color: "color", fullWidth: "fullWidth" }, host: { properties: { "
|
|
38
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonsV2Component, selector: "ecabs-buttons-v2", inputs: { disabled: "disabled", loading: "loading", loadingStyle: "loadingStyle", size: "size", type: "type", style: "style", color: "color", fullWidth: "fullWidth" }, host: { properties: { "class.pointer-events-none": "this.isDisabled", "style.width": "this.hostWidth" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"style\">\r\n <button\r\n mat-flat-button\r\n *ngSwitchCase=\"'flat'\"\r\n [ngClass]=\"buttonClasses\"\r\n [class]=\"sizeClass\"\r\n [color]=\"matColor\"\r\n [disabled]=\"disabled || loading\"\r\n [attr.aria-busy]=\"loading || null\"\r\n [type]=\"type\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n </button>\r\n <button\r\n mat-stroked-button\r\n *ngSwitchCase=\"'stroked'\"\r\n [ngClass]=\"buttonClasses\"\r\n [class]=\"sizeClass\"\r\n [color]=\"matColor\"\r\n [disabled]=\"disabled || loading\"\r\n [attr.aria-busy]=\"loading || null\"\r\n [type]=\"type\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n </button>\r\n <button\r\n mat-raised-button\r\n *ngSwitchCase=\"'raised'\"\r\n [ngClass]=\"buttonClasses\"\r\n [class]=\"sizeClass\"\r\n [color]=\"matColor\"\r\n [disabled]=\"disabled || loading\"\r\n [attr.aria-busy]=\"loading || null\"\r\n [type]=\"type\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n </button>\r\n <button\r\n mat-button\r\n *ngSwitchCase=\"'basic'\"\r\n [color]=\"matColor\"\r\n [ngClass]=\"buttonClasses\"\r\n [class]=\"sizeClass\"\r\n [disabled]=\"disabled || loading\"\r\n [attr.aria-busy]=\"loading || null\"\r\n [type]=\"type\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n </button>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n <ecabs-loading-spinner\r\n size=\"tiny\"\r\n *ngIf=\"loading\"\r\n >\r\n </ecabs-loading-spinner>\r\n <ng-container *ngIf=\"!loading\">\r\n <ng-content select=\"mat-icon\"></ng-content>\r\n </ng-container>\r\n <ng-container *ngIf=\"showLabel\">\r\n <ng-content></ng-content>\r\n </ng-container>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
37
39
|
}
|
|
38
40
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonsV2Component, decorators: [{
|
|
39
41
|
type: Component,
|
|
40
|
-
args: [{ selector: 'ecabs-buttons-v2', template: "<ng-container [ngSwitch]=\"style\">\n <button\n mat-flat-button\n *ngSwitchCase=\"'flat'\"\n [ngClass]=\"buttonClasses\"\n [class]=\"sizeClass\"\n [color]=\"
|
|
42
|
+
args: [{ selector: 'ecabs-buttons-v2', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"style\">\r\n <button\r\n mat-flat-button\r\n *ngSwitchCase=\"'flat'\"\r\n [ngClass]=\"buttonClasses\"\r\n [class]=\"sizeClass\"\r\n [color]=\"matColor\"\r\n [disabled]=\"disabled || loading\"\r\n [attr.aria-busy]=\"loading || null\"\r\n [type]=\"type\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n </button>\r\n <button\r\n mat-stroked-button\r\n *ngSwitchCase=\"'stroked'\"\r\n [ngClass]=\"buttonClasses\"\r\n [class]=\"sizeClass\"\r\n [color]=\"matColor\"\r\n [disabled]=\"disabled || loading\"\r\n [attr.aria-busy]=\"loading || null\"\r\n [type]=\"type\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n </button>\r\n <button\r\n mat-raised-button\r\n *ngSwitchCase=\"'raised'\"\r\n [ngClass]=\"buttonClasses\"\r\n [class]=\"sizeClass\"\r\n [color]=\"matColor\"\r\n [disabled]=\"disabled || loading\"\r\n [attr.aria-busy]=\"loading || null\"\r\n [type]=\"type\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n </button>\r\n <button\r\n mat-button\r\n *ngSwitchCase=\"'basic'\"\r\n [color]=\"matColor\"\r\n [ngClass]=\"buttonClasses\"\r\n [class]=\"sizeClass\"\r\n [disabled]=\"disabled || loading\"\r\n [attr.aria-busy]=\"loading || null\"\r\n [type]=\"type\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n </button>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n <ecabs-loading-spinner\r\n size=\"tiny\"\r\n *ngIf=\"loading\"\r\n >\r\n </ecabs-loading-spinner>\r\n <ng-container *ngIf=\"!loading\">\r\n <ng-content select=\"mat-icon\"></ng-content>\r\n </ng-container>\r\n <ng-container *ngIf=\"showLabel\">\r\n <ng-content></ng-content>\r\n </ng-container>\r\n</ng-template>\r\n" }]
|
|
41
43
|
}], propDecorators: { disabled: [{
|
|
42
44
|
type: Input
|
|
43
45
|
}], loading: [{
|
|
44
46
|
type: Input
|
|
47
|
+
}], loadingStyle: [{
|
|
48
|
+
type: Input
|
|
45
49
|
}], size: [{
|
|
46
50
|
type: Input
|
|
47
51
|
}], type: [{
|
|
@@ -52,11 +56,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
52
56
|
type: Input
|
|
53
57
|
}], fullWidth: [{
|
|
54
58
|
type: Input
|
|
59
|
+
}], isDisabled: [{
|
|
60
|
+
type: HostBinding,
|
|
61
|
+
args: ['class.pointer-events-none']
|
|
55
62
|
}], hostWidth: [{
|
|
56
63
|
type: HostBinding,
|
|
57
64
|
args: ['style.width']
|
|
58
|
-
}], classAttr: [{
|
|
59
|
-
type: HostBinding,
|
|
60
|
-
args: ['class']
|
|
61
65
|
}] } });
|
|
62
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
66
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWNhYnMtYnV0dG9ucy12Mi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9lY2Ficy1jb21wb25lbnRzL3NyYy9saWIvZWNhYnMtYnV0dG9ucy12Mi9lY2Ficy1idXR0b25zLXYyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2VjYWJzLWNvbXBvbmVudHMvc3JjL2xpYi9lY2Ficy1idXR0b25zLXYyL2VjYWJzLWJ1dHRvbnMtdjIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsV0FBVyxFQUNYLEtBQUssR0FDTixNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFjdkIsTUFBTSxPQUFPLGtCQUFrQjtJQUU3QixRQUFRLEdBQUcsS0FBSyxDQUFDO0lBR2pCLE9BQU8sR0FBRyxLQUFLLENBQUM7SUFHaEIsWUFBWSxHQUF1QixlQUFlLENBQUM7SUFHbkQsSUFBSSxHQUFlLFFBQVEsQ0FBQztJQUc1QixJQUFJLEdBQXdCLFFBQVEsQ0FBQztJQUdyQyxLQUFLLEdBQWdCLE1BQU0sQ0FBQztJQUc1QixLQUFLLEdBQW9DLFNBQVMsQ0FBQztJQUduRCxTQUFTLEdBQUcsS0FBSyxDQUFDO0lBRWxCLElBQ0ksVUFBVTtRQUNaLE9BQU8sSUFBSSxDQUFDLFFBQVEsSUFBSSxJQUFJLENBQUMsT0FBTyxDQUFDO0lBQ3ZDLENBQUM7SUFFRCxJQUNJLFNBQVM7UUFDWCxPQUFPLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO0lBQ3RDLENBQUM7SUFFRCxJQUFJLFNBQVM7UUFDWCxPQUFPLG9CQUFvQixJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDekMsQ0FBQztJQUVELElBQUksUUFBUTtRQUNWLE9BQU8sSUFBSSxDQUFDLEtBQUssS0FBSyxTQUFTLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxJQUFJLFNBQVMsQ0FBQyxDQUFDO0lBQzFFLENBQUM7SUFFRCxJQUFJLFNBQVM7UUFDWCxPQUFPLENBQUMsSUFBSSxDQUFDLE9BQU8sSUFBSSxJQUFJLENBQUMsWUFBWSxLQUFLLGVBQWUsQ0FBQztJQUNoRSxDQUFDO0lBRUQsSUFBSSxhQUFhO1FBQ2YsT0FBTztZQUNMLFNBQVMsRUFBRSxJQUFJLENBQUMsU0FBUztZQUN6Qix1QkFBdUIsRUFBRSxJQUFJLENBQUMsT0FBTztZQUNyQyxhQUFhLEVBQUUsSUFBSSxDQUFDLEtBQUssS0FBSyxTQUFTO1NBQ3hDLENBQUM7SUFDSixDQUFDO3dHQXJEVSxrQkFBa0I7NEZBQWxCLGtCQUFrQiwyVUNuQi9CLDQwREFnRUE7OzRGRDdDYSxrQkFBa0I7a0JBTjlCLFNBQVM7K0JBQ0Usa0JBQWtCLG1CQUdYLHVCQUF1QixDQUFDLE1BQU07OEJBSS9DLFFBQVE7c0JBRFAsS0FBSztnQkFJTixPQUFPO3NCQUROLEtBQUs7Z0JBSU4sWUFBWTtzQkFEWCxLQUFLO2dCQUlOLElBQUk7c0JBREgsS0FBSztnQkFJTixJQUFJO3NCQURILEtBQUs7Z0JBSU4sS0FBSztzQkFESixLQUFLO2dCQUlOLEtBQUs7c0JBREosS0FBSztnQkFJTixTQUFTO3NCQURSLEtBQUs7Z0JBSUYsVUFBVTtzQkFEYixXQUFXO3VCQUFDLDJCQUEyQjtnQkFNcEMsU0FBUztzQkFEWixXQUFXO3VCQUFDLGFBQWEiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xyXG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxyXG4gIENvbXBvbmVudCxcclxuICBIb3N0QmluZGluZyxcclxuICBJbnB1dCxcclxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgVGhlbWVQYWxldHRlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvY29yZSc7XHJcbmltcG9ydCB7XHJcbiAgQnV0dG9uTG9hZGluZ1N0eWxlLFxyXG4gIEJ1dHRvblNpemUsXHJcbiAgQnV0dG9uU3R5bGUsXHJcbn0gZnJvbSAnLi4vYmFzZS9jb25zdHMvYnV0dG9ucy5jb25zdHMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdlY2Ficy1idXR0b25zLXYyJyxcclxuICBzdHlsZVVybHM6IFsnLi9lY2Ficy1idXR0b25zLXYyLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2VjYWJzLWJ1dHRvbnMtdjIuY29tcG9uZW50Lmh0bWwnLFxyXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgQnV0dG9uc1YyQ29tcG9uZW50IHtcclxuICBASW5wdXQoKVxyXG4gIGRpc2FibGVkID0gZmFsc2U7XHJcblxyXG4gIEBJbnB1dCgpXHJcbiAgbG9hZGluZyA9IGZhbHNlO1xyXG5cclxuICBASW5wdXQoKVxyXG4gIGxvYWRpbmdTdHlsZTogQnV0dG9uTG9hZGluZ1N0eWxlID0gJ3NwaW5uZXItbGFiZWwnO1xyXG5cclxuICBASW5wdXQoKVxyXG4gIHNpemU6IEJ1dHRvblNpemUgPSAnbWVkaXVtJztcclxuXHJcbiAgQElucHV0KClcclxuICB0eXBlOiAnYnV0dG9uJyB8ICdzdWJtaXQnID0gJ2J1dHRvbic7XHJcblxyXG4gIEBJbnB1dCgpXHJcbiAgc3R5bGU6IEJ1dHRvblN0eWxlID0gJ2ZsYXQnO1xyXG5cclxuICBASW5wdXQoKVxyXG4gIGNvbG9yOiBUaGVtZVBhbGV0dGUgfCAnc3VjY2VzcycgfCBudWxsID0gJ3ByaW1hcnknO1xyXG5cclxuICBASW5wdXQoKVxyXG4gIGZ1bGxXaWR0aCA9IGZhbHNlO1xyXG5cclxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLnBvaW50ZXItZXZlbnRzLW5vbmUnKVxyXG4gIGdldCBpc0Rpc2FibGVkKCk6IGJvb2xlYW4ge1xyXG4gICAgcmV0dXJuIHRoaXMuZGlzYWJsZWQgfHwgdGhpcy5sb2FkaW5nO1xyXG4gIH1cclxuXHJcbiAgQEhvc3RCaW5kaW5nKCdzdHlsZS53aWR0aCcpXHJcbiAgZ2V0IGhvc3RXaWR0aCgpOiBzdHJpbmcge1xyXG4gICAgcmV0dXJuIHRoaXMuZnVsbFdpZHRoID8gJzEwMCUnIDogJyc7XHJcbiAgfVxyXG5cclxuICBnZXQgc2l6ZUNsYXNzKCk6IHN0cmluZyB7XHJcbiAgICByZXR1cm4gYGVjYWJzLWJ1dHRvbi12Mi0tJHt0aGlzLnNpemV9YDtcclxuICB9XHJcblxyXG4gIGdldCBtYXRDb2xvcigpOiBUaGVtZVBhbGV0dGUge1xyXG4gICAgcmV0dXJuIHRoaXMuY29sb3IgPT09ICdzdWNjZXNzJyA/IHVuZGVmaW5lZCA6ICh0aGlzLmNvbG9yID8/IHVuZGVmaW5lZCk7XHJcbiAgfVxyXG5cclxuICBnZXQgc2hvd0xhYmVsKCk6IGJvb2xlYW4ge1xyXG4gICAgcmV0dXJuICF0aGlzLmxvYWRpbmcgfHwgdGhpcy5sb2FkaW5nU3R5bGUgPT09ICdzcGlubmVyLWxhYmVsJztcclxuICB9XHJcblxyXG4gIGdldCBidXR0b25DbGFzc2VzKCk6IHsgW2tleTogc3RyaW5nXTogYm9vbGVhbiB9IHtcclxuICAgIHJldHVybiB7XHJcbiAgICAgICchdy1mdWxsJzogdGhpcy5mdWxsV2lkdGgsXHJcbiAgICAgICdsb2FkaW5nICFsZWFkaW5nLW5vbmUnOiB0aGlzLmxvYWRpbmcsXHJcbiAgICAgICdtYXQtc3VjY2Vzcyc6IHRoaXMuY29sb3IgPT09ICdzdWNjZXNzJyxcclxuICAgIH07XHJcbiAgfVxyXG59XHJcbiIsIjxuZy1jb250YWluZXIgW25nU3dpdGNoXT1cInN0eWxlXCI+XHJcbiAgPGJ1dHRvblxyXG4gICAgbWF0LWZsYXQtYnV0dG9uXHJcbiAgICAqbmdTd2l0Y2hDYXNlPVwiJ2ZsYXQnXCJcclxuICAgIFtuZ0NsYXNzXT1cImJ1dHRvbkNsYXNzZXNcIlxyXG4gICAgW2NsYXNzXT1cInNpemVDbGFzc1wiXHJcbiAgICBbY29sb3JdPVwibWF0Q29sb3JcIlxyXG4gICAgW2Rpc2FibGVkXT1cImRpc2FibGVkIHx8IGxvYWRpbmdcIlxyXG4gICAgW2F0dHIuYXJpYS1idXN5XT1cImxvYWRpbmcgfHwgbnVsbFwiXHJcbiAgICBbdHlwZV09XCJ0eXBlXCJcclxuICA+XHJcbiAgICA8bmctY29udGFpbmVyIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImNvbnRlbnRcIj48L25nLWNvbnRhaW5lcj5cclxuICA8L2J1dHRvbj5cclxuICA8YnV0dG9uXHJcbiAgICBtYXQtc3Ryb2tlZC1idXR0b25cclxuICAgICpuZ1N3aXRjaENhc2U9XCInc3Ryb2tlZCdcIlxyXG4gICAgW25nQ2xhc3NdPVwiYnV0dG9uQ2xhc3Nlc1wiXHJcbiAgICBbY2xhc3NdPVwic2l6ZUNsYXNzXCJcclxuICAgIFtjb2xvcl09XCJtYXRDb2xvclwiXHJcbiAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWQgfHwgbG9hZGluZ1wiXHJcbiAgICBbYXR0ci5hcmlhLWJ1c3ldPVwibG9hZGluZyB8fCBudWxsXCJcclxuICAgIFt0eXBlXT1cInR5cGVcIlxyXG4gID5cclxuICAgIDxuZy1jb250YWluZXIgW25nVGVtcGxhdGVPdXRsZXRdPVwiY29udGVudFwiPjwvbmctY29udGFpbmVyPlxyXG4gIDwvYnV0dG9uPlxyXG4gIDxidXR0b25cclxuICAgIG1hdC1yYWlzZWQtYnV0dG9uXHJcbiAgICAqbmdTd2l0Y2hDYXNlPVwiJ3JhaXNlZCdcIlxyXG4gICAgW25nQ2xhc3NdPVwiYnV0dG9uQ2xhc3Nlc1wiXHJcbiAgICBbY2xhc3NdPVwic2l6ZUNsYXNzXCJcclxuICAgIFtjb2xvcl09XCJtYXRDb2xvclwiXHJcbiAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWQgfHwgbG9hZGluZ1wiXHJcbiAgICBbYXR0ci5hcmlhLWJ1c3ldPVwibG9hZGluZyB8fCBudWxsXCJcclxuICAgIFt0eXBlXT1cInR5cGVcIlxyXG4gID5cclxuICAgIDxuZy1jb250YWluZXIgW25nVGVtcGxhdGVPdXRsZXRdPVwiY29udGVudFwiPjwvbmctY29udGFpbmVyPlxyXG4gIDwvYnV0dG9uPlxyXG4gIDxidXR0b25cclxuICAgIG1hdC1idXR0b25cclxuICAgICpuZ1N3aXRjaENhc2U9XCInYmFzaWMnXCJcclxuICAgIFtjb2xvcl09XCJtYXRDb2xvclwiXHJcbiAgICBbbmdDbGFzc109XCJidXR0b25DbGFzc2VzXCJcclxuICAgIFtjbGFzc109XCJzaXplQ2xhc3NcIlxyXG4gICAgW2Rpc2FibGVkXT1cImRpc2FibGVkIHx8IGxvYWRpbmdcIlxyXG4gICAgW2F0dHIuYXJpYS1idXN5XT1cImxvYWRpbmcgfHwgbnVsbFwiXHJcbiAgICBbdHlwZV09XCJ0eXBlXCJcclxuICA+XHJcbiAgICA8bmctY29udGFpbmVyIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImNvbnRlbnRcIj48L25nLWNvbnRhaW5lcj5cclxuICA8L2J1dHRvbj5cclxuPC9uZy1jb250YWluZXI+XHJcblxyXG48bmctdGVtcGxhdGUgI2NvbnRlbnQ+XHJcbiAgPGVjYWJzLWxvYWRpbmctc3Bpbm5lclxyXG4gICAgc2l6ZT1cInRpbnlcIlxyXG4gICAgKm5nSWY9XCJsb2FkaW5nXCJcclxuICA+XHJcbiAgPC9lY2Ficy1sb2FkaW5nLXNwaW5uZXI+XHJcbiAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFsb2FkaW5nXCI+XHJcbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJtYXQtaWNvblwiPjwvbmctY29udGVudD5cclxuICA8L25nLWNvbnRhaW5lcj5cclxuICA8bmctY29udGFpbmVyICpuZ0lmPVwic2hvd0xhYmVsXCI+XHJcbiAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XHJcbiAgPC9uZy1jb250YWluZXI+XHJcbjwvbmctdGVtcGxhdGU+XHJcbiJdfQ==
|
|
@@ -3,12 +3,12 @@ import * as i0 from "@angular/core";
|
|
|
3
3
|
export class EcabsSpinnerComponent {
|
|
4
4
|
size = 'medium';
|
|
5
5
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: { size: "size" }, ngImport: i0, template: "<
|
|
6
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: { size: "size" }, ngImport: i0, template: "<span\r\n class=\"ecabs-spinner-rotate {{ size }}\"\r\n role=\"status\"\r\n aria-label=\"Loading\"\r\n></span>\r\n", styles: [":host{display:inline-block;line-height:0;--ecabs-spinner-color: var(--color-gray-400)}@keyframes ecabs-spinner-rotate{to{transform:rotate(360deg)}}.ecabs-spinner-rotate{box-sizing:border-box;display:inline-block;border-radius:50%;background:conic-gradient(from 90deg,transparent,var(--ecabs-spinner-color));mask:radial-gradient(farthest-side,transparent calc(100% - var(--ecabs-spinner-thickness)),#000 calc(100% - var(--ecabs-spinner-thickness)));animation:ecabs-spinner-rotate .8s linear infinite}.ecabs-spinner-rotate.tiny{width:18px;height:18px;--ecabs-spinner-thickness: 2px}.ecabs-spinner-rotate.medium{width:32px;height:32px;--ecabs-spinner-thickness: 3px}.ecabs-spinner-rotate.large{width:52px;height:52px;--ecabs-spinner-thickness: 4px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7
7
|
}
|
|
8
8
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSpinnerComponent, decorators: [{
|
|
9
9
|
type: Component,
|
|
10
|
-
args: [{ selector: 'ecabs-loading-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<
|
|
10
|
+
args: [{ selector: 'ecabs-loading-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\r\n class=\"ecabs-spinner-rotate {{ size }}\"\r\n role=\"status\"\r\n aria-label=\"Loading\"\r\n></span>\r\n", styles: [":host{display:inline-block;line-height:0;--ecabs-spinner-color: var(--color-gray-400)}@keyframes ecabs-spinner-rotate{to{transform:rotate(360deg)}}.ecabs-spinner-rotate{box-sizing:border-box;display:inline-block;border-radius:50%;background:conic-gradient(from 90deg,transparent,var(--ecabs-spinner-color));mask:radial-gradient(farthest-side,transparent calc(100% - var(--ecabs-spinner-thickness)),#000 calc(100% - var(--ecabs-spinner-thickness)));animation:ecabs-spinner-rotate .8s linear infinite}.ecabs-spinner-rotate.tiny{width:18px;height:18px;--ecabs-spinner-thickness: 2px}.ecabs-spinner-rotate.medium{width:32px;height:32px;--ecabs-spinner-thickness: 3px}.ecabs-spinner-rotate.large{width:52px;height:52px;--ecabs-spinner-thickness: 4px}\n"] }]
|
|
11
11
|
}], propDecorators: { size: [{
|
|
12
12
|
type: Input
|
|
13
13
|
}] } });
|
|
14
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
14
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bpbm5lci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9lY2Ficy1jb21wb25lbnRzL3NyYy9saWIvZWNhYnMtbG9hZGluZy9zcGlubmVyL3NwaW5uZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZWNhYnMtY29tcG9uZW50cy9zcmMvbGliL2VjYWJzLWxvYWRpbmcvc3Bpbm5lci9zcGlubmVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQVExRSxNQUFNLE9BQU8scUJBQXFCO0lBQ3ZCLElBQUksR0FBZ0MsUUFBUSxDQUFDO3dHQUQzQyxxQkFBcUI7NEZBQXJCLHFCQUFxQix1RkNSbEMsdUhBS0E7OzRGREdhLHFCQUFxQjtrQkFOakMsU0FBUzsrQkFDRSx1QkFBdUIsbUJBR2hCLHVCQUF1QixDQUFDLE1BQU07OEJBR3RDLElBQUk7c0JBQVosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2VjYWJzLWxvYWRpbmctc3Bpbm5lcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9zcGlubmVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vc3Bpbm5lci5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgRWNhYnNTcGlubmVyQ29tcG9uZW50IHtcbiAgQElucHV0KCkgc2l6ZTogJ2xhcmdlJyB8ICdtZWRpdW0nIHwgJ3RpbnknID0gJ21lZGl1bSc7XG59XG4iLCI8c3BhblxyXG4gIGNsYXNzPVwiZWNhYnMtc3Bpbm5lci1yb3RhdGUge3sgc2l6ZSB9fVwiXHJcbiAgcm9sZT1cInN0YXR1c1wiXHJcbiAgYXJpYS1sYWJlbD1cIkxvYWRpbmdcIlxyXG4+PC9zcGFuPlxyXG4iXX0=
|
|
@@ -75,11 +75,11 @@ import { MatListModule } from '@angular/material/list';
|
|
|
75
75
|
class EcabsSpinnerComponent {
|
|
76
76
|
size = 'medium';
|
|
77
77
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
78
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: { size: "size" }, ngImport: i0, template: "<
|
|
78
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: { size: "size" }, ngImport: i0, template: "<span\r\n class=\"ecabs-spinner-rotate {{ size }}\"\r\n role=\"status\"\r\n aria-label=\"Loading\"\r\n></span>\r\n", styles: [":host{display:inline-block;line-height:0;--ecabs-spinner-color: var(--color-gray-400)}@keyframes ecabs-spinner-rotate{to{transform:rotate(360deg)}}.ecabs-spinner-rotate{box-sizing:border-box;display:inline-block;border-radius:50%;background:conic-gradient(from 90deg,transparent,var(--ecabs-spinner-color));mask:radial-gradient(farthest-side,transparent calc(100% - var(--ecabs-spinner-thickness)),#000 calc(100% - var(--ecabs-spinner-thickness)));animation:ecabs-spinner-rotate .8s linear infinite}.ecabs-spinner-rotate.tiny{width:18px;height:18px;--ecabs-spinner-thickness: 2px}.ecabs-spinner-rotate.medium{width:32px;height:32px;--ecabs-spinner-thickness: 3px}.ecabs-spinner-rotate.large{width:52px;height:52px;--ecabs-spinner-thickness: 4px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
79
79
|
}
|
|
80
80
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSpinnerComponent, decorators: [{
|
|
81
81
|
type: Component,
|
|
82
|
-
args: [{ selector: 'ecabs-loading-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<
|
|
82
|
+
args: [{ selector: 'ecabs-loading-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\r\n class=\"ecabs-spinner-rotate {{ size }}\"\r\n role=\"status\"\r\n aria-label=\"Loading\"\r\n></span>\r\n", styles: [":host{display:inline-block;line-height:0;--ecabs-spinner-color: var(--color-gray-400)}@keyframes ecabs-spinner-rotate{to{transform:rotate(360deg)}}.ecabs-spinner-rotate{box-sizing:border-box;display:inline-block;border-radius:50%;background:conic-gradient(from 90deg,transparent,var(--ecabs-spinner-color));mask:radial-gradient(farthest-side,transparent calc(100% - var(--ecabs-spinner-thickness)),#000 calc(100% - var(--ecabs-spinner-thickness)));animation:ecabs-spinner-rotate .8s linear infinite}.ecabs-spinner-rotate.tiny{width:18px;height:18px;--ecabs-spinner-thickness: 2px}.ecabs-spinner-rotate.medium{width:32px;height:32px;--ecabs-spinner-thickness: 3px}.ecabs-spinner-rotate.large{width:52px;height:52px;--ecabs-spinner-thickness: 4px}\n"] }]
|
|
83
83
|
}], propDecorators: { size: [{
|
|
84
84
|
type: Input
|
|
85
85
|
}] } });
|
|
@@ -194,42 +194,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
194
194
|
class ButtonsV2Component {
|
|
195
195
|
disabled = false;
|
|
196
196
|
loading = false;
|
|
197
|
+
loadingStyle = 'spinner-label';
|
|
197
198
|
size = 'medium';
|
|
198
199
|
type = 'button';
|
|
199
200
|
style = 'flat';
|
|
200
201
|
color = 'primary';
|
|
201
202
|
fullWidth = false;
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
ngOnChanges(changes) {
|
|
205
|
-
const disableInteraction = this.disabled || this.loading;
|
|
206
|
-
this.classAttr = disableInteraction ? 'pointer-events-none' : '';
|
|
207
|
-
if (changes['fullWidth']) {
|
|
208
|
-
this.updateHostWidth();
|
|
209
|
-
}
|
|
203
|
+
get isDisabled() {
|
|
204
|
+
return this.disabled || this.loading;
|
|
210
205
|
}
|
|
211
|
-
|
|
212
|
-
|
|
206
|
+
get hostWidth() {
|
|
207
|
+
return this.fullWidth ? '100%' : '';
|
|
213
208
|
}
|
|
214
209
|
get sizeClass() {
|
|
215
210
|
return `ecabs-button-v2--${this.size}`;
|
|
216
211
|
}
|
|
212
|
+
get matColor() {
|
|
213
|
+
return this.color === 'success' ? undefined : (this.color ?? undefined);
|
|
214
|
+
}
|
|
215
|
+
get showLabel() {
|
|
216
|
+
return !this.loading || this.loadingStyle === 'spinner-label';
|
|
217
|
+
}
|
|
217
218
|
get buttonClasses() {
|
|
218
219
|
return {
|
|
219
220
|
'!w-full': this.fullWidth,
|
|
220
221
|
'loading !leading-none': this.loading,
|
|
222
|
+
'mat-success': this.color === 'success',
|
|
221
223
|
};
|
|
222
224
|
}
|
|
223
225
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonsV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
224
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonsV2Component, selector: "ecabs-buttons-v2", inputs: { disabled: "disabled", loading: "loading", size: "size", type: "type", style: "style", color: "color", fullWidth: "fullWidth" }, host: { properties: { "
|
|
226
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonsV2Component, selector: "ecabs-buttons-v2", inputs: { disabled: "disabled", loading: "loading", loadingStyle: "loadingStyle", size: "size", type: "type", style: "style", color: "color", fullWidth: "fullWidth" }, host: { properties: { "class.pointer-events-none": "this.isDisabled", "style.width": "this.hostWidth" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"style\">\r\n <button\r\n mat-flat-button\r\n *ngSwitchCase=\"'flat'\"\r\n [ngClass]=\"buttonClasses\"\r\n [class]=\"sizeClass\"\r\n [color]=\"matColor\"\r\n [disabled]=\"disabled || loading\"\r\n [attr.aria-busy]=\"loading || null\"\r\n [type]=\"type\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n </button>\r\n <button\r\n mat-stroked-button\r\n *ngSwitchCase=\"'stroked'\"\r\n [ngClass]=\"buttonClasses\"\r\n [class]=\"sizeClass\"\r\n [color]=\"matColor\"\r\n [disabled]=\"disabled || loading\"\r\n [attr.aria-busy]=\"loading || null\"\r\n [type]=\"type\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n </button>\r\n <button\r\n mat-raised-button\r\n *ngSwitchCase=\"'raised'\"\r\n [ngClass]=\"buttonClasses\"\r\n [class]=\"sizeClass\"\r\n [color]=\"matColor\"\r\n [disabled]=\"disabled || loading\"\r\n [attr.aria-busy]=\"loading || null\"\r\n [type]=\"type\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n </button>\r\n <button\r\n mat-button\r\n *ngSwitchCase=\"'basic'\"\r\n [color]=\"matColor\"\r\n [ngClass]=\"buttonClasses\"\r\n [class]=\"sizeClass\"\r\n [disabled]=\"disabled || loading\"\r\n [attr.aria-busy]=\"loading || null\"\r\n [type]=\"type\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n </button>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n <ecabs-loading-spinner\r\n size=\"tiny\"\r\n *ngIf=\"loading\"\r\n >\r\n </ecabs-loading-spinner>\r\n <ng-container *ngIf=\"!loading\">\r\n <ng-content select=\"mat-icon\"></ng-content>\r\n </ng-container>\r\n <ng-container *ngIf=\"showLabel\">\r\n <ng-content></ng-content>\r\n </ng-container>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
225
227
|
}
|
|
226
228
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonsV2Component, decorators: [{
|
|
227
229
|
type: Component,
|
|
228
|
-
args: [{ selector: 'ecabs-buttons-v2', template: "<ng-container [ngSwitch]=\"style\">\n <button\n mat-flat-button\n *ngSwitchCase=\"'flat'\"\n [ngClass]=\"buttonClasses\"\n [class]=\"sizeClass\"\n [color]=\"
|
|
230
|
+
args: [{ selector: 'ecabs-buttons-v2', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"style\">\r\n <button\r\n mat-flat-button\r\n *ngSwitchCase=\"'flat'\"\r\n [ngClass]=\"buttonClasses\"\r\n [class]=\"sizeClass\"\r\n [color]=\"matColor\"\r\n [disabled]=\"disabled || loading\"\r\n [attr.aria-busy]=\"loading || null\"\r\n [type]=\"type\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n </button>\r\n <button\r\n mat-stroked-button\r\n *ngSwitchCase=\"'stroked'\"\r\n [ngClass]=\"buttonClasses\"\r\n [class]=\"sizeClass\"\r\n [color]=\"matColor\"\r\n [disabled]=\"disabled || loading\"\r\n [attr.aria-busy]=\"loading || null\"\r\n [type]=\"type\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n </button>\r\n <button\r\n mat-raised-button\r\n *ngSwitchCase=\"'raised'\"\r\n [ngClass]=\"buttonClasses\"\r\n [class]=\"sizeClass\"\r\n [color]=\"matColor\"\r\n [disabled]=\"disabled || loading\"\r\n [attr.aria-busy]=\"loading || null\"\r\n [type]=\"type\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n </button>\r\n <button\r\n mat-button\r\n *ngSwitchCase=\"'basic'\"\r\n [color]=\"matColor\"\r\n [ngClass]=\"buttonClasses\"\r\n [class]=\"sizeClass\"\r\n [disabled]=\"disabled || loading\"\r\n [attr.aria-busy]=\"loading || null\"\r\n [type]=\"type\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n </button>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n <ecabs-loading-spinner\r\n size=\"tiny\"\r\n *ngIf=\"loading\"\r\n >\r\n </ecabs-loading-spinner>\r\n <ng-container *ngIf=\"!loading\">\r\n <ng-content select=\"mat-icon\"></ng-content>\r\n </ng-container>\r\n <ng-container *ngIf=\"showLabel\">\r\n <ng-content></ng-content>\r\n </ng-container>\r\n</ng-template>\r\n" }]
|
|
229
231
|
}], propDecorators: { disabled: [{
|
|
230
232
|
type: Input
|
|
231
233
|
}], loading: [{
|
|
232
234
|
type: Input
|
|
235
|
+
}], loadingStyle: [{
|
|
236
|
+
type: Input
|
|
233
237
|
}], size: [{
|
|
234
238
|
type: Input
|
|
235
239
|
}], type: [{
|
|
@@ -240,12 +244,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
240
244
|
type: Input
|
|
241
245
|
}], fullWidth: [{
|
|
242
246
|
type: Input
|
|
247
|
+
}], isDisabled: [{
|
|
248
|
+
type: HostBinding,
|
|
249
|
+
args: ['class.pointer-events-none']
|
|
243
250
|
}], hostWidth: [{
|
|
244
251
|
type: HostBinding,
|
|
245
252
|
args: ['style.width']
|
|
246
|
-
}], classAttr: [{
|
|
247
|
-
type: HostBinding,
|
|
248
|
-
args: ['class']
|
|
249
253
|
}] } });
|
|
250
254
|
|
|
251
255
|
class EcabsButtonsV2Module {
|