coer-elements 0.0.138 → 0.0.140
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -1,20 +1,26 @@
|
|
|
1
|
+
import { AfterViewInit } from '@angular/core';
|
|
1
2
|
import * as i0 from "@angular/core";
|
|
2
|
-
export declare class CoerAccordion {
|
|
3
|
+
export declare class CoerAccordion implements AfterViewInit {
|
|
3
4
|
protected _id: string;
|
|
4
5
|
private _expansionPanel;
|
|
6
|
+
private _htmlElement;
|
|
5
7
|
id: string;
|
|
6
8
|
title: import("@angular/core").InputSignal<string>;
|
|
7
9
|
icon: import("@angular/core").InputSignal<string>;
|
|
8
10
|
expanded: import("@angular/core").InputSignal<boolean>;
|
|
11
|
+
scrollOnOpen: import("@angular/core").InputSignal<boolean>;
|
|
9
12
|
onOpen: import("@angular/core").OutputEmitterRef<void>;
|
|
10
13
|
onClose: import("@angular/core").OutputEmitterRef<void>;
|
|
11
14
|
protected IsNotOnlyWhiteSpace: (value: any) => boolean;
|
|
15
|
+
ngAfterViewInit(): void;
|
|
12
16
|
get isExpanded(): boolean;
|
|
13
17
|
get isCollapsed(): boolean;
|
|
14
18
|
/** */
|
|
15
19
|
Open(): void;
|
|
16
20
|
/** */
|
|
17
21
|
Close(): void;
|
|
22
|
+
/** */
|
|
23
|
+
ScrollToAccordion(): void;
|
|
18
24
|
static ɵfac: i0.ɵɵFactoryDeclaration<CoerAccordion, never>;
|
|
19
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<CoerAccordion, "coer-accordion", never, { "id": { "alias": "id"; "required": false; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "onOpen": "onOpen"; "onClose": "onClose"; }, never, ["*"], false, never>;
|
|
25
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<CoerAccordion, "coer-accordion", never, { "id": { "alias": "id"; "required": false; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "scrollOnOpen": { "alias": "scrollOnOpen"; "required": false; "isSignal": true; }; }, { "onOpen": "onOpen"; "onClose": "onClose"; }, never, ["*"], false, never>;
|
|
20
26
|
}
|
|
@@ -50,12 +50,18 @@ class CoerAccordion {
|
|
|
50
50
|
this.title = input('');
|
|
51
51
|
this.icon = input('');
|
|
52
52
|
this.expanded = input(true);
|
|
53
|
+
this.scrollOnOpen = input(false);
|
|
53
54
|
//Outputs
|
|
54
55
|
this.onOpen = output();
|
|
55
56
|
this.onClose = output();
|
|
56
57
|
//Generic Tools
|
|
57
58
|
this.IsNotOnlyWhiteSpace = Tools.IsNotOnlyWhiteSpace;
|
|
58
59
|
}
|
|
60
|
+
ngAfterViewInit() {
|
|
61
|
+
Tools.Sleep().then(() => {
|
|
62
|
+
this._htmlElement = document.getElementById(this._id);
|
|
63
|
+
});
|
|
64
|
+
}
|
|
59
65
|
//getter
|
|
60
66
|
get isExpanded() {
|
|
61
67
|
return Tools.IsNotNull(this._expansionPanel())
|
|
@@ -74,6 +80,10 @@ class CoerAccordion {
|
|
|
74
80
|
if (this.isCollapsed) {
|
|
75
81
|
this._expansionPanel()?.open();
|
|
76
82
|
}
|
|
83
|
+
if (this.scrollOnOpen() && Tools.IsNotNull(this._htmlElement)) {
|
|
84
|
+
Tools.Sleep().then(_ => this._htmlElement.scrollIntoView({ behavior: 'smooth' }));
|
|
85
|
+
}
|
|
86
|
+
this.onOpen.emit();
|
|
77
87
|
}
|
|
78
88
|
}
|
|
79
89
|
/** */
|
|
@@ -82,14 +92,21 @@ class CoerAccordion {
|
|
|
82
92
|
if (this.isExpanded) {
|
|
83
93
|
this._expansionPanel()?.close();
|
|
84
94
|
}
|
|
95
|
+
this.onClose.emit();
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
/** */
|
|
99
|
+
ScrollToAccordion() {
|
|
100
|
+
if (Tools.IsNotNull(this._expansionPanel())) {
|
|
101
|
+
Tools.Sleep().then(_ => this._htmlElement.scrollIntoView({ behavior: 'smooth' }));
|
|
85
102
|
}
|
|
86
103
|
}
|
|
87
104
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
88
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerAccordion, isStandalone: false, selector: "coer-accordion", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpen: "onOpen", onClose: "onClose" }, viewQueries: [{ propertyName: "_expansionPanel", first: true, predicate: ["coerAccordion"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-expansion-panel #coerAccordion class=\"coer-accordion\" [expanded]=\"expanded()\" title=\"\" (opened)=\"
|
|
105
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerAccordion, isStandalone: false, selector: "coer-accordion", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, scrollOnOpen: { classPropertyName: "scrollOnOpen", publicName: "scrollOnOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpen: "onOpen", onClose: "onClose" }, viewQueries: [{ propertyName: "_expansionPanel", first: true, predicate: ["coerAccordion"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-expansion-panel [id]=\"_id\" #coerAccordion class=\"coer-accordion\" [expanded]=\"expanded()\" title=\"\" (opened)=\"Open()\" (closed)=\"Close()\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n @if(IsNotOnlyWhiteSpace(icon())) {\r\n <i [class]=\"icon()\"></i>\r\n }\r\n <span>{{ title() }}</span>\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n\r\n <div>\r\n <ng-content></ng-content>\r\n </div>\r\n</mat-expansion-panel>", styles: ["mat-expansion-panel.coer-accordion{overflow:visible!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header{height:35px!important;background-color:#f5f5f5!important;padding-left:12px!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header span{font-size:16px!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header mat-panel-title{display:flex;align-items:center;gap:5px}mat-expansion-panel.coer-accordion div.mat-expansion-panel-body{padding:0!important}\n"], dependencies: [{ kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2.MatExpansionPanelTitle, selector: "mat-panel-title" }] }); }
|
|
89
106
|
}
|
|
90
107
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerAccordion, decorators: [{
|
|
91
108
|
type: Component,
|
|
92
|
-
args: [{ selector: 'coer-accordion', standalone: false, template: "<mat-expansion-panel #coerAccordion class=\"coer-accordion\" [expanded]=\"expanded()\" title=\"\" (opened)=\"
|
|
109
|
+
args: [{ selector: 'coer-accordion', standalone: false, template: "<mat-expansion-panel [id]=\"_id\" #coerAccordion class=\"coer-accordion\" [expanded]=\"expanded()\" title=\"\" (opened)=\"Open()\" (closed)=\"Close()\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n @if(IsNotOnlyWhiteSpace(icon())) {\r\n <i [class]=\"icon()\"></i>\r\n }\r\n <span>{{ title() }}</span>\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n\r\n <div>\r\n <ng-content></ng-content>\r\n </div>\r\n</mat-expansion-panel>", styles: ["mat-expansion-panel.coer-accordion{overflow:visible!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header{height:35px!important;background-color:#f5f5f5!important;padding-left:12px!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header span{font-size:16px!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header mat-panel-title{display:flex;align-items:center;gap:5px}mat-expansion-panel.coer-accordion div.mat-expansion-panel-body{padding:0!important}\n"] }]
|
|
93
110
|
}], propDecorators: { id: [{
|
|
94
111
|
type: Input
|
|
95
112
|
}] } });
|
|
@@ -216,11 +233,11 @@ class CoerButton {
|
|
|
216
233
|
});
|
|
217
234
|
}
|
|
218
235
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
219
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerButton, isStandalone: false, selector: "coer-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div [ngClass]=\"{ 'coer-button': true }\">\r\n <a [id]=\"_id + '-container'\"\r\n [routerLink]=\"(path().length > 0 && _isEnable()) ? path() : null\"\r\n [ngClass]=\"{ 'loading': isLoading(), 'animate__animated animate__zoomIn': true, 'animate__disabled': !animation(), 'invisible': isInvisible() || isReadonly() }\"\r\n [ngStyle]=\"{ 'margin-top': marginTop(), 'margin-right': marginRight(), 'margin-bottom': marginBottom(), 'margin-left': marginLeft() }\">\r\n @if(type() =='filled' || type() == 'outline') {\r\n <button mat-button\r\n [id]=\"_id + '-inner-button'\"\r\n type=\"button\"\r\n (click)=\"Click($event)\"\r\n [ngClass]=\"{\r\n 'primary-filled' : (color() == 'primary' && type() =='filled'),\r\n 'secondary-filled' : (color() == 'secondary' && type() =='filled'),\r\n 'success-filled' : (color() == 'success' && type() =='filled'),\r\n 'warning-filled' : (color() == 'warning' && type() =='filled'),\r\n 'danger-filled' : (color() == 'danger' && type() =='filled'),\r\n 'navigation-filled' : (color() == 'navigation' && type() =='filled'),\r\n 'dark-filled' : (color() == 'dark' && type() =='filled'),\r\n 'primary-outline' : (color() == 'primary' && type() =='outline'),\r\n 'secondary-outline' : (color() == 'secondary' && type() =='outline'),\r\n 'success-outline' : (color() == 'success' && type() =='outline'),\r\n 'warning-outline' : (color() == 'warning' && type() =='outline'),\r\n 'danger-outline' : (color() == 'danger' && type() =='outline'),\r\n 'navigation-outline': (color() == 'navigation' && type() =='outline'),\r\n 'dark-outline' : (color() == 'dark' && type() =='outline'),\r\n 'readonly': isDisabled(),\r\n 'cursor-wait': isLoading()\r\n }\"\r\n [ngStyle]=\"{\r\n 'width' : width(),\r\n 'min-width' : minWidth(),\r\n 'height' : height(),\r\n 'min-height': minHeight()\r\n }\">\r\n <span class=\"slot\" *ngIf=\"!isLoading(); else loading\" >\r\n <span *ngIf=\"(iconPosition() == 'left')\">\r\n <i [class]=\"_icon()\"></i>\r\n </span>\r\n\r\n <span [ngClass]=\"{ 'ms-2': (iconPosition() == 'left'), 'me-2': (iconPosition() == 'right') }\">\r\n <ng-content></ng-content>\r\n </span>\r\n\r\n <span *ngIf=\"(iconPosition() == 'right')\">\r\n <i [class]=\"_icon()\"></i>\r\n </span>\r\n </span>\r\n\r\n <ng-template #loading>\r\n <span class=\"slot fa-fade\">\r\n <span class=\"me-2\"> Loading </span>\r\n <i class=\"spinner-border\"></i>\r\n </span>\r\n </ng-template>\r\n </button>\r\n }\r\n\r\n @else {\r\n @if (type() == 'icon') {\r\n <button mat-icon-button\r\n [id]=\"_id + '-inner-button'\"\r\n (click)=\"Click($event)\"\r\n [ngClass]=\"{\r\n 'primary-filled' : (color() == 'primary'),\r\n 'secondary-filled' : (color() == 'secondary'),\r\n 'success-filled' : (color() == 'success'),\r\n 'warning-filled' : (color() == 'warning'),\r\n 'danger-filled' : (color() == 'danger'),\r\n 'navigation-filled': (color() == 'navigation'),\r\n 'dark-filled' : (color() == 'dark'),\r\n 'readonly' : (isDisabled() || isLoading()),\r\n 'cursor-wait' : isLoading()\r\n }\">\r\n <i [class]=\"_icon()\"></i>\r\n </button>\r\n }\r\n\r\n @else if (type() == 'icon-outline') {\r\n <button mat-icon-button\r\n [id]=\"_id + '-inner-button'\"\r\n (click)=\"Click($event)\"\r\n [ngClass]=\"{\r\n 'primary-outline' : (color() == 'primary'),\r\n 'secondary-outline' : (color() == 'secondary'),\r\n 'success-outline' : (color() == 'success'),\r\n 'warning-outline' : (color() == 'warning'),\r\n 'danger-outline' : (color() == 'danger'),\r\n 'navigation-outline': (color() == 'navigation'),\r\n 'dark-outline' : (color() == 'dark'),\r\n 'readonly' : (isDisabled() || isLoading()),\r\n 'cursor-wait' : isLoading()\r\n }\">\r\n <i [class]=\"_icon()\"></i>\r\n </button>\r\n }\r\n\r\n @else if (type() == 'icon-no-border') {\r\n <button mat-icon-button\r\n [id]=\"_id + '-inner-button'\"\r\n (click)=\"Click($event)\"\r\n [ngClass]=\"{\r\n 'primary-outline' : (color() == 'primary'),\r\n 'secondary-outline' : (color() == 'secondary'),\r\n 'success-outline' : (color() == 'success'),\r\n 'warning-outline' : (color() == 'warning'),\r\n 'danger-outline' : (color() == 'danger'),\r\n 'navigation-outline': (color() == 'navigation'),\r\n 'dark-outline' : (color() == 'dark'),\r\n 'readonly' : (isDisabled() || isLoading()),\r\n 'icon-no-border' : true\r\n }\">\r\n <i [class]=\"_icon()\"></i>\r\n </button>\r\n }\r\n }\r\n </a>\r\n</div>", styles: [":root{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031;--purple: #a615bc}.text-blue{color:var(--blue)!important}.text-blue-bold{color:var(--blue)!important;font-weight:700!important}.background-blue{background-color:var(--blue)!important}.background-border-blue{background-color:var(--blue)!important;border-color:var(--blue)!important}.border-blue{border-color:var(--blue)!important}.text-gray{color:var(--gray)!important}.text-gray-bold{color:var(--gray)!important;font-weight:700!important}.background-gray{background-color:var(--gray)!important}.background-border-gray{background-color:var(--gray)!important;border-color:var(--gray)!important}.border-gray{border-color:var(--gray)!important}.text-green{color:var(--green)!important}.text-green-bold{color:var(--green)!important;font-weight:700!important}.background-green{background-color:var(--green)!important}.background-border-green{background-color:var(--green)!important;border-color:var(--green)!important}.border-green{border-color:var(--green)!important}.text-yellow{color:var(--yellow)!important}.text-yellow-bold{color:var(--yellow)!important;font-weight:700!important}.background-yellow{background-color:var(--yellow)!important}.background-border-yellow{background-color:var(--yellow)!important;border-color:var(--yellow)!important}.border-yellow{border-color:var(--yellow)!important}.text-red{color:var(--red)!important}.text-red-bold{color:var(--red)!important;font-weight:700!important}.background-red{background-color:var(--red)!important}.background-border-red{background-color:var(--red)!important;border-color:var(--red)!important}.border-red{border-color:var(--red)!important}.text-white{color:var(--white)!important}.text-white-bold{color:var(--white)!important;font-weight:700!important}.background-white{background-color:var(--white)!important}.background-border-white{background-color:var(--white)!important;border-color:var(--white)!important}.border-white{border-color:var(--white)!important}.text-black{color:var(--black)!important}.text-black-bold{color:var(--black)!important;font-weight:700!important}.background-black{background-color:var(--black)!important}.background-border-black{background-color:var(--black)!important;border-color:var(--black)!important}.border-black{border-color:var(--black)!important}.text-orange{color:var(--orange)!important}.text-orange-bold{color:var(--orange)!important;font-weight:700!important}.background-orange{background-color:var(--orange)!important}.background-border-orange{background-color:var(--orange)!important;border-color:var(--orange)!important}.border-orange{border-color:var(--orange)!important}.text-transparent{color:transparent!important}.background-transparent{background-color:transparent!important}.border-transparent{border-color:transparent!important}coer-button{display:contents!important}div.coer-button{display:contents!important}div.coer-button a{display:inline-block!important;height:fit-content!important}div.coer-button a.animate__disabled{animation-duration:0s!important}div.coer-button button{font-size:17px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}div.coer-button .slot{width:100px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}div.coer-button button.primary-filled{background-color:var(--blue)!important;color:var(--white)!important}div.coer-button button.secondary-filled{background-color:var(--gray)!important;color:var(--white)!important}div.coer-button button.success-filled{background-color:var(--green)!important;color:var(--white)!important}div.coer-button button.warning-filled{background-color:var(--yellow)!important;color:var(--black)!important}div.coer-button button.danger-filled{background-color:var(--red)!important;color:var(--white)!important}div.coer-button button.navigation-filled{background-color:var(--orange)!important;color:var(--white)!important}div.coer-button button.dark-filled{background-color:var(--black)!important;color:var(--white)!important}div.coer-button button.primary-outline{background-color:#fff!important;border:1px solid var(--blue)!important;color:var(--blue)!important}div.coer-button button.secondary-outline{background-color:#fff!important;border:1px solid var(--gray)!important;color:var(--gray)!important}div.coer-button button.success-outline{background-color:#fff!important;border:1px solid var(--green)!important;color:var(--green)!important}div.coer-button button.warning-outline{background-color:#fff!important;border:1px solid var(--yellow)!important;color:var(--yellow)!important}div.coer-button button.danger-outline{background-color:#fff!important;border:1px solid var(--red)!important;color:var(--red)!important}div.coer-button button.navigation-outline{background-color:#fff!important;border:1px solid var(--orange)!important;color:var(--orange)!important}div.coer-button button.dark-outline{background-color:#fff!important;border:1px solid var(--black)!important;color:var(--black)!important}div.coer-button button.primary-filled:not(.readonly):hover,div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):hover,div.coer-button button.primary-outline:not(.readonly):focus,div.coer-button button.secondary-filled:not(.readonly):hover,div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):hover,div.coer-button button.secondary-outline:not(.readonly):focus,div.coer-button button.success-filled:not(.readonly):hover,div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):hover,div.coer-button button.success-outline:not(.readonly):focus,div.coer-button button.warning-filled:not(.readonly):hover,div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):hover,div.coer-button button.warning-outline:not(.readonly):focus,div.coer-button button.danger-filled:not(.readonly):hover,div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):hover,div.coer-button button.danger-outline:not(.readonly):focus,div.coer-button button.navigation-filled:not(.readonly):hover,div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):hover,div.coer-button button.navigation-outline:not(.readonly):focus,div.coer-button button.dark-filled:not(.readonly):hover,div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):hover,div.coer-button button.dark-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--blue)!important}div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--gray)!important}div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):focus{box-shadow:0 0 20px var(--green)!important}div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):focus{box-shadow:0 0 20px var(--yellow)!important}div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):focus{box-shadow:0 0 20px var(--red)!important}div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):focus{box-shadow:0 0 20px var(--orange)!important}div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):focus{box-shadow:0 0 20px var(--black)!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button{width:40px!important;height:40px!important;padding:0!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border{width:25px!important;height:25px!important;background-color:transparent!important;border:none!important;overflow:visible!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border *{font-size:medium!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-left,div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-in-right{font-size:20px!important}div.coer-button button.readonly,div.coer-button button.readonly:hover,div.coer-button button.readonly:focus{background-color:#dfdede!important;border-color:#dfdede!important;color:#fff!important}div.coer-button coer-button[ishidden=true],div.coer-button coer-button[ng-reflect-invisible=true]{position:relative!important;top:10000vh;left:10000vw}div.coer-button a.loading{cursor:wait!important}div.coer-button i{vertical-align:middle!important}div.coer-button i.spinner-border{width:15px!important;height:15px!important;font-size:16px!important}div.coer-button span{font-weight:700!important}div.coer-button .mat-mdc-button-touch-target{width:0px!important;height:0px!important}\n"], 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
|
|
236
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerButton, isStandalone: false, selector: "coer-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div [ngClass]=\"{ 'coer-button': true }\">\r\n <a [id]=\"_id + '-container'\"\r\n [routerLink]=\"(path().length > 0 && _isEnable()) ? path() : null\"\r\n [ngClass]=\"{ 'loading': isLoading(), 'animate__animated animate__zoomIn': true, 'animate__disabled': !animation(), 'invisible': isInvisible() || isReadonly() }\"\r\n [ngStyle]=\"{ 'margin-top': marginTop(), 'margin-right': marginRight(), 'margin-bottom': marginBottom(), 'margin-left': marginLeft() }\">\r\n @if(type() =='filled' || type() == 'outline') {\r\n <button mat-button\r\n [id]=\"_id + '-inner-button'\"\r\n type=\"button\"\r\n (click)=\"Click($event)\"\r\n [ngClass]=\"{\r\n 'primary-filled' : (color() == 'primary' && type() =='filled'),\r\n 'secondary-filled' : (color() == 'secondary' && type() =='filled'),\r\n 'success-filled' : (color() == 'success' && type() =='filled'),\r\n 'warning-filled' : (color() == 'warning' && type() =='filled'),\r\n 'danger-filled' : (color() == 'danger' && type() =='filled'),\r\n 'navigation-filled' : (color() == 'navigation' && type() =='filled'),\r\n 'dark-filled' : (color() == 'dark' && type() =='filled'),\r\n 'primary-outline' : (color() == 'primary' && type() =='outline'),\r\n 'secondary-outline' : (color() == 'secondary' && type() =='outline'),\r\n 'success-outline' : (color() == 'success' && type() =='outline'),\r\n 'warning-outline' : (color() == 'warning' && type() =='outline'),\r\n 'danger-outline' : (color() == 'danger' && type() =='outline'),\r\n 'navigation-outline': (color() == 'navigation' && type() =='outline'),\r\n 'dark-outline' : (color() == 'dark' && type() =='outline'),\r\n 'readonly': isDisabled(),\r\n 'cursor-wait': isLoading()\r\n }\"\r\n [ngStyle]=\"{\r\n 'width' : width(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(),\r\n 'height' : height(),\r\n 'min-height': minHeight()\r\n }\">\r\n <span class=\"slot\" *ngIf=\"!isLoading(); else loading\" >\r\n <span *ngIf=\"(iconPosition() == 'left')\">\r\n <i [class]=\"_icon()\"></i>\r\n </span>\r\n\r\n <span [ngClass]=\"{ 'ms-2': (iconPosition() == 'left'), 'me-2': (iconPosition() == 'right') }\">\r\n <ng-content></ng-content>\r\n </span>\r\n\r\n <span *ngIf=\"(iconPosition() == 'right')\">\r\n <i [class]=\"_icon()\"></i>\r\n </span>\r\n </span>\r\n\r\n <ng-template #loading>\r\n <span class=\"slot fa-fade\">\r\n <span class=\"me-2\"> Loading </span>\r\n <i class=\"spinner-border\"></i>\r\n </span>\r\n </ng-template>\r\n </button>\r\n }\r\n\r\n @else {\r\n @if (type() == 'icon') {\r\n <button mat-icon-button\r\n [id]=\"_id + '-inner-button'\"\r\n (click)=\"Click($event)\"\r\n [ngClass]=\"{\r\n 'primary-filled' : (color() == 'primary'),\r\n 'secondary-filled' : (color() == 'secondary'),\r\n 'success-filled' : (color() == 'success'),\r\n 'warning-filled' : (color() == 'warning'),\r\n 'danger-filled' : (color() == 'danger'),\r\n 'navigation-filled': (color() == 'navigation'),\r\n 'dark-filled' : (color() == 'dark'),\r\n 'readonly' : (isDisabled() || isLoading()),\r\n 'cursor-wait' : isLoading()\r\n }\">\r\n <i [class]=\"_icon()\"></i>\r\n </button>\r\n }\r\n\r\n @else if (type() == 'icon-outline') {\r\n <button mat-icon-button\r\n [id]=\"_id + '-inner-button'\"\r\n (click)=\"Click($event)\"\r\n [ngClass]=\"{\r\n 'primary-outline' : (color() == 'primary'),\r\n 'secondary-outline' : (color() == 'secondary'),\r\n 'success-outline' : (color() == 'success'),\r\n 'warning-outline' : (color() == 'warning'),\r\n 'danger-outline' : (color() == 'danger'),\r\n 'navigation-outline': (color() == 'navigation'),\r\n 'dark-outline' : (color() == 'dark'),\r\n 'readonly' : (isDisabled() || isLoading()),\r\n 'cursor-wait' : isLoading()\r\n }\">\r\n <i [class]=\"_icon()\"></i>\r\n </button>\r\n }\r\n\r\n @else if (type() == 'icon-no-border') {\r\n <button mat-icon-button\r\n [id]=\"_id + '-inner-button'\"\r\n (click)=\"Click($event)\"\r\n [ngClass]=\"{\r\n 'primary-outline' : (color() == 'primary'),\r\n 'secondary-outline' : (color() == 'secondary'),\r\n 'success-outline' : (color() == 'success'),\r\n 'warning-outline' : (color() == 'warning'),\r\n 'danger-outline' : (color() == 'danger'),\r\n 'navigation-outline': (color() == 'navigation'),\r\n 'dark-outline' : (color() == 'dark'),\r\n 'readonly' : (isDisabled() || isLoading()),\r\n 'icon-no-border' : true\r\n }\">\r\n <i [class]=\"_icon()\"></i>\r\n </button>\r\n }\r\n }\r\n </a>\r\n</div>", styles: [":root{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031;--purple: #a615bc}.text-blue{color:var(--blue)!important}.text-blue-bold{color:var(--blue)!important;font-weight:700!important}.background-blue{background-color:var(--blue)!important}.background-border-blue{background-color:var(--blue)!important;border-color:var(--blue)!important}.border-blue{border-color:var(--blue)!important}.text-gray{color:var(--gray)!important}.text-gray-bold{color:var(--gray)!important;font-weight:700!important}.background-gray{background-color:var(--gray)!important}.background-border-gray{background-color:var(--gray)!important;border-color:var(--gray)!important}.border-gray{border-color:var(--gray)!important}.text-green{color:var(--green)!important}.text-green-bold{color:var(--green)!important;font-weight:700!important}.background-green{background-color:var(--green)!important}.background-border-green{background-color:var(--green)!important;border-color:var(--green)!important}.border-green{border-color:var(--green)!important}.text-yellow{color:var(--yellow)!important}.text-yellow-bold{color:var(--yellow)!important;font-weight:700!important}.background-yellow{background-color:var(--yellow)!important}.background-border-yellow{background-color:var(--yellow)!important;border-color:var(--yellow)!important}.border-yellow{border-color:var(--yellow)!important}.text-red{color:var(--red)!important}.text-red-bold{color:var(--red)!important;font-weight:700!important}.background-red{background-color:var(--red)!important}.background-border-red{background-color:var(--red)!important;border-color:var(--red)!important}.border-red{border-color:var(--red)!important}.text-white{color:var(--white)!important}.text-white-bold{color:var(--white)!important;font-weight:700!important}.background-white{background-color:var(--white)!important}.background-border-white{background-color:var(--white)!important;border-color:var(--white)!important}.border-white{border-color:var(--white)!important}.text-black{color:var(--black)!important}.text-black-bold{color:var(--black)!important;font-weight:700!important}.background-black{background-color:var(--black)!important}.background-border-black{background-color:var(--black)!important;border-color:var(--black)!important}.border-black{border-color:var(--black)!important}.text-orange{color:var(--orange)!important}.text-orange-bold{color:var(--orange)!important;font-weight:700!important}.background-orange{background-color:var(--orange)!important}.background-border-orange{background-color:var(--orange)!important;border-color:var(--orange)!important}.border-orange{border-color:var(--orange)!important}.text-transparent{color:transparent!important}.background-transparent{background-color:transparent!important}.border-transparent{border-color:transparent!important}coer-button{display:contents!important}div.coer-button{display:contents!important}div.coer-button a{display:inline-block!important;height:fit-content!important}div.coer-button a.animate__disabled{animation-duration:0s!important}div.coer-button button{font-size:17px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}div.coer-button .slot{width:100px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}div.coer-button button.primary-filled{background-color:var(--blue)!important;color:var(--white)!important}div.coer-button button.secondary-filled{background-color:var(--gray)!important;color:var(--white)!important}div.coer-button button.success-filled{background-color:var(--green)!important;color:var(--white)!important}div.coer-button button.warning-filled{background-color:var(--yellow)!important;color:var(--black)!important}div.coer-button button.danger-filled{background-color:var(--red)!important;color:var(--white)!important}div.coer-button button.navigation-filled{background-color:var(--orange)!important;color:var(--white)!important}div.coer-button button.dark-filled{background-color:var(--black)!important;color:var(--white)!important}div.coer-button button.primary-outline{background-color:#fff!important;border:1px solid var(--blue)!important;color:var(--blue)!important}div.coer-button button.secondary-outline{background-color:#fff!important;border:1px solid var(--gray)!important;color:var(--gray)!important}div.coer-button button.success-outline{background-color:#fff!important;border:1px solid var(--green)!important;color:var(--green)!important}div.coer-button button.warning-outline{background-color:#fff!important;border:1px solid var(--yellow)!important;color:var(--yellow)!important}div.coer-button button.danger-outline{background-color:#fff!important;border:1px solid var(--red)!important;color:var(--red)!important}div.coer-button button.navigation-outline{background-color:#fff!important;border:1px solid var(--orange)!important;color:var(--orange)!important}div.coer-button button.dark-outline{background-color:#fff!important;border:1px solid var(--black)!important;color:var(--black)!important}div.coer-button button.primary-filled:not(.readonly):hover,div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):hover,div.coer-button button.primary-outline:not(.readonly):focus,div.coer-button button.secondary-filled:not(.readonly):hover,div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):hover,div.coer-button button.secondary-outline:not(.readonly):focus,div.coer-button button.success-filled:not(.readonly):hover,div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):hover,div.coer-button button.success-outline:not(.readonly):focus,div.coer-button button.warning-filled:not(.readonly):hover,div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):hover,div.coer-button button.warning-outline:not(.readonly):focus,div.coer-button button.danger-filled:not(.readonly):hover,div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):hover,div.coer-button button.danger-outline:not(.readonly):focus,div.coer-button button.navigation-filled:not(.readonly):hover,div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):hover,div.coer-button button.navigation-outline:not(.readonly):focus,div.coer-button button.dark-filled:not(.readonly):hover,div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):hover,div.coer-button button.dark-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--blue)!important}div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--gray)!important}div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):focus{box-shadow:0 0 20px var(--green)!important}div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):focus{box-shadow:0 0 20px var(--yellow)!important}div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):focus{box-shadow:0 0 20px var(--red)!important}div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):focus{box-shadow:0 0 20px var(--orange)!important}div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):focus{box-shadow:0 0 20px var(--black)!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button{width:40px!important;height:40px!important;padding:0!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border{width:25px!important;height:25px!important;background-color:transparent!important;border:none!important;overflow:visible!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border *{font-size:medium!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-left,div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-in-right{font-size:20px!important}div.coer-button button.readonly,div.coer-button button.readonly:hover,div.coer-button button.readonly:focus{background-color:#dfdede!important;border-color:#dfdede!important;color:#fff!important}div.coer-button coer-button[ishidden=true],div.coer-button coer-button[ng-reflect-invisible=true]{position:relative!important;top:10000vh;left:10000vw}div.coer-button a.loading{cursor:wait!important}div.coer-button i{vertical-align:middle!important}div.coer-button i.spinner-border{width:15px!important;height:15px!important;font-size:16px!important}div.coer-button span{font-weight:700!important}div.coer-button .mat-mdc-button-touch-target{width:0px!important;height:0px!important}\n"], 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
|
|
220
237
|
}
|
|
221
238
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerButton, decorators: [{
|
|
222
239
|
type: Component,
|
|
223
|
-
args: [{ selector: 'coer-button', standalone: false, template: "<div [ngClass]=\"{ 'coer-button': true }\">\r\n <a [id]=\"_id + '-container'\"\r\n [routerLink]=\"(path().length > 0 && _isEnable()) ? path() : null\"\r\n [ngClass]=\"{ 'loading': isLoading(), 'animate__animated animate__zoomIn': true, 'animate__disabled': !animation(), 'invisible': isInvisible() || isReadonly() }\"\r\n [ngStyle]=\"{ 'margin-top': marginTop(), 'margin-right': marginRight(), 'margin-bottom': marginBottom(), 'margin-left': marginLeft() }\">\r\n @if(type() =='filled' || type() == 'outline') {\r\n <button mat-button\r\n [id]=\"_id + '-inner-button'\"\r\n type=\"button\"\r\n (click)=\"Click($event)\"\r\n [ngClass]=\"{\r\n 'primary-filled' : (color() == 'primary' && type() =='filled'),\r\n 'secondary-filled' : (color() == 'secondary' && type() =='filled'),\r\n 'success-filled' : (color() == 'success' && type() =='filled'),\r\n 'warning-filled' : (color() == 'warning' && type() =='filled'),\r\n 'danger-filled' : (color() == 'danger' && type() =='filled'),\r\n 'navigation-filled' : (color() == 'navigation' && type() =='filled'),\r\n 'dark-filled' : (color() == 'dark' && type() =='filled'),\r\n 'primary-outline' : (color() == 'primary' && type() =='outline'),\r\n 'secondary-outline' : (color() == 'secondary' && type() =='outline'),\r\n 'success-outline' : (color() == 'success' && type() =='outline'),\r\n 'warning-outline' : (color() == 'warning' && type() =='outline'),\r\n 'danger-outline' : (color() == 'danger' && type() =='outline'),\r\n 'navigation-outline': (color() == 'navigation' && type() =='outline'),\r\n 'dark-outline' : (color() == 'dark' && type() =='outline'),\r\n 'readonly': isDisabled(),\r\n 'cursor-wait': isLoading()\r\n }\"\r\n [ngStyle]=\"{\r\n 'width' : width(),\r\n 'min-width' : minWidth(),\r\n 'height' : height(),\r\n 'min-height': minHeight()\r\n }\">\r\n <span class=\"slot\" *ngIf=\"!isLoading(); else loading\" >\r\n <span *ngIf=\"(iconPosition() == 'left')\">\r\n <i [class]=\"_icon()\"></i>\r\n </span>\r\n\r\n <span [ngClass]=\"{ 'ms-2': (iconPosition() == 'left'), 'me-2': (iconPosition() == 'right') }\">\r\n <ng-content></ng-content>\r\n </span>\r\n\r\n <span *ngIf=\"(iconPosition() == 'right')\">\r\n <i [class]=\"_icon()\"></i>\r\n </span>\r\n </span>\r\n\r\n <ng-template #loading>\r\n <span class=\"slot fa-fade\">\r\n <span class=\"me-2\"> Loading </span>\r\n <i class=\"spinner-border\"></i>\r\n </span>\r\n </ng-template>\r\n </button>\r\n }\r\n\r\n @else {\r\n @if (type() == 'icon') {\r\n <button mat-icon-button\r\n [id]=\"_id + '-inner-button'\"\r\n (click)=\"Click($event)\"\r\n [ngClass]=\"{\r\n 'primary-filled' : (color() == 'primary'),\r\n 'secondary-filled' : (color() == 'secondary'),\r\n 'success-filled' : (color() == 'success'),\r\n 'warning-filled' : (color() == 'warning'),\r\n 'danger-filled' : (color() == 'danger'),\r\n 'navigation-filled': (color() == 'navigation'),\r\n 'dark-filled' : (color() == 'dark'),\r\n 'readonly' : (isDisabled() || isLoading()),\r\n 'cursor-wait' : isLoading()\r\n }\">\r\n <i [class]=\"_icon()\"></i>\r\n </button>\r\n }\r\n\r\n @else if (type() == 'icon-outline') {\r\n <button mat-icon-button\r\n [id]=\"_id + '-inner-button'\"\r\n (click)=\"Click($event)\"\r\n [ngClass]=\"{\r\n 'primary-outline' : (color() == 'primary'),\r\n 'secondary-outline' : (color() == 'secondary'),\r\n 'success-outline' : (color() == 'success'),\r\n 'warning-outline' : (color() == 'warning'),\r\n 'danger-outline' : (color() == 'danger'),\r\n 'navigation-outline': (color() == 'navigation'),\r\n 'dark-outline' : (color() == 'dark'),\r\n 'readonly' : (isDisabled() || isLoading()),\r\n 'cursor-wait' : isLoading()\r\n }\">\r\n <i [class]=\"_icon()\"></i>\r\n </button>\r\n }\r\n\r\n @else if (type() == 'icon-no-border') {\r\n <button mat-icon-button\r\n [id]=\"_id + '-inner-button'\"\r\n (click)=\"Click($event)\"\r\n [ngClass]=\"{\r\n 'primary-outline' : (color() == 'primary'),\r\n 'secondary-outline' : (color() == 'secondary'),\r\n 'success-outline' : (color() == 'success'),\r\n 'warning-outline' : (color() == 'warning'),\r\n 'danger-outline' : (color() == 'danger'),\r\n 'navigation-outline': (color() == 'navigation'),\r\n 'dark-outline' : (color() == 'dark'),\r\n 'readonly' : (isDisabled() || isLoading()),\r\n 'icon-no-border' : true\r\n }\">\r\n <i [class]=\"_icon()\"></i>\r\n </button>\r\n }\r\n }\r\n </a>\r\n</div>", styles: [":root{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031;--purple: #a615bc}.text-blue{color:var(--blue)!important}.text-blue-bold{color:var(--blue)!important;font-weight:700!important}.background-blue{background-color:var(--blue)!important}.background-border-blue{background-color:var(--blue)!important;border-color:var(--blue)!important}.border-blue{border-color:var(--blue)!important}.text-gray{color:var(--gray)!important}.text-gray-bold{color:var(--gray)!important;font-weight:700!important}.background-gray{background-color:var(--gray)!important}.background-border-gray{background-color:var(--gray)!important;border-color:var(--gray)!important}.border-gray{border-color:var(--gray)!important}.text-green{color:var(--green)!important}.text-green-bold{color:var(--green)!important;font-weight:700!important}.background-green{background-color:var(--green)!important}.background-border-green{background-color:var(--green)!important;border-color:var(--green)!important}.border-green{border-color:var(--green)!important}.text-yellow{color:var(--yellow)!important}.text-yellow-bold{color:var(--yellow)!important;font-weight:700!important}.background-yellow{background-color:var(--yellow)!important}.background-border-yellow{background-color:var(--yellow)!important;border-color:var(--yellow)!important}.border-yellow{border-color:var(--yellow)!important}.text-red{color:var(--red)!important}.text-red-bold{color:var(--red)!important;font-weight:700!important}.background-red{background-color:var(--red)!important}.background-border-red{background-color:var(--red)!important;border-color:var(--red)!important}.border-red{border-color:var(--red)!important}.text-white{color:var(--white)!important}.text-white-bold{color:var(--white)!important;font-weight:700!important}.background-white{background-color:var(--white)!important}.background-border-white{background-color:var(--white)!important;border-color:var(--white)!important}.border-white{border-color:var(--white)!important}.text-black{color:var(--black)!important}.text-black-bold{color:var(--black)!important;font-weight:700!important}.background-black{background-color:var(--black)!important}.background-border-black{background-color:var(--black)!important;border-color:var(--black)!important}.border-black{border-color:var(--black)!important}.text-orange{color:var(--orange)!important}.text-orange-bold{color:var(--orange)!important;font-weight:700!important}.background-orange{background-color:var(--orange)!important}.background-border-orange{background-color:var(--orange)!important;border-color:var(--orange)!important}.border-orange{border-color:var(--orange)!important}.text-transparent{color:transparent!important}.background-transparent{background-color:transparent!important}.border-transparent{border-color:transparent!important}coer-button{display:contents!important}div.coer-button{display:contents!important}div.coer-button a{display:inline-block!important;height:fit-content!important}div.coer-button a.animate__disabled{animation-duration:0s!important}div.coer-button button{font-size:17px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}div.coer-button .slot{width:100px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}div.coer-button button.primary-filled{background-color:var(--blue)!important;color:var(--white)!important}div.coer-button button.secondary-filled{background-color:var(--gray)!important;color:var(--white)!important}div.coer-button button.success-filled{background-color:var(--green)!important;color:var(--white)!important}div.coer-button button.warning-filled{background-color:var(--yellow)!important;color:var(--black)!important}div.coer-button button.danger-filled{background-color:var(--red)!important;color:var(--white)!important}div.coer-button button.navigation-filled{background-color:var(--orange)!important;color:var(--white)!important}div.coer-button button.dark-filled{background-color:var(--black)!important;color:var(--white)!important}div.coer-button button.primary-outline{background-color:#fff!important;border:1px solid var(--blue)!important;color:var(--blue)!important}div.coer-button button.secondary-outline{background-color:#fff!important;border:1px solid var(--gray)!important;color:var(--gray)!important}div.coer-button button.success-outline{background-color:#fff!important;border:1px solid var(--green)!important;color:var(--green)!important}div.coer-button button.warning-outline{background-color:#fff!important;border:1px solid var(--yellow)!important;color:var(--yellow)!important}div.coer-button button.danger-outline{background-color:#fff!important;border:1px solid var(--red)!important;color:var(--red)!important}div.coer-button button.navigation-outline{background-color:#fff!important;border:1px solid var(--orange)!important;color:var(--orange)!important}div.coer-button button.dark-outline{background-color:#fff!important;border:1px solid var(--black)!important;color:var(--black)!important}div.coer-button button.primary-filled:not(.readonly):hover,div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):hover,div.coer-button button.primary-outline:not(.readonly):focus,div.coer-button button.secondary-filled:not(.readonly):hover,div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):hover,div.coer-button button.secondary-outline:not(.readonly):focus,div.coer-button button.success-filled:not(.readonly):hover,div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):hover,div.coer-button button.success-outline:not(.readonly):focus,div.coer-button button.warning-filled:not(.readonly):hover,div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):hover,div.coer-button button.warning-outline:not(.readonly):focus,div.coer-button button.danger-filled:not(.readonly):hover,div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):hover,div.coer-button button.danger-outline:not(.readonly):focus,div.coer-button button.navigation-filled:not(.readonly):hover,div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):hover,div.coer-button button.navigation-outline:not(.readonly):focus,div.coer-button button.dark-filled:not(.readonly):hover,div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):hover,div.coer-button button.dark-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--blue)!important}div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--gray)!important}div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):focus{box-shadow:0 0 20px var(--green)!important}div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):focus{box-shadow:0 0 20px var(--yellow)!important}div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):focus{box-shadow:0 0 20px var(--red)!important}div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):focus{box-shadow:0 0 20px var(--orange)!important}div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):focus{box-shadow:0 0 20px var(--black)!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button{width:40px!important;height:40px!important;padding:0!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border{width:25px!important;height:25px!important;background-color:transparent!important;border:none!important;overflow:visible!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border *{font-size:medium!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-left,div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-in-right{font-size:20px!important}div.coer-button button.readonly,div.coer-button button.readonly:hover,div.coer-button button.readonly:focus{background-color:#dfdede!important;border-color:#dfdede!important;color:#fff!important}div.coer-button coer-button[ishidden=true],div.coer-button coer-button[ng-reflect-invisible=true]{position:relative!important;top:10000vh;left:10000vw}div.coer-button a.loading{cursor:wait!important}div.coer-button i{vertical-align:middle!important}div.coer-button i.spinner-border{width:15px!important;height:15px!important;font-size:16px!important}div.coer-button span{font-weight:700!important}div.coer-button .mat-mdc-button-touch-target{width:0px!important;height:0px!important}\n"] }]
|
|
240
|
+
args: [{ selector: 'coer-button', standalone: false, template: "<div [ngClass]=\"{ 'coer-button': true }\">\r\n <a [id]=\"_id + '-container'\"\r\n [routerLink]=\"(path().length > 0 && _isEnable()) ? path() : null\"\r\n [ngClass]=\"{ 'loading': isLoading(), 'animate__animated animate__zoomIn': true, 'animate__disabled': !animation(), 'invisible': isInvisible() || isReadonly() }\"\r\n [ngStyle]=\"{ 'margin-top': marginTop(), 'margin-right': marginRight(), 'margin-bottom': marginBottom(), 'margin-left': marginLeft() }\">\r\n @if(type() =='filled' || type() == 'outline') {\r\n <button mat-button\r\n [id]=\"_id + '-inner-button'\"\r\n type=\"button\"\r\n (click)=\"Click($event)\"\r\n [ngClass]=\"{\r\n 'primary-filled' : (color() == 'primary' && type() =='filled'),\r\n 'secondary-filled' : (color() == 'secondary' && type() =='filled'),\r\n 'success-filled' : (color() == 'success' && type() =='filled'),\r\n 'warning-filled' : (color() == 'warning' && type() =='filled'),\r\n 'danger-filled' : (color() == 'danger' && type() =='filled'),\r\n 'navigation-filled' : (color() == 'navigation' && type() =='filled'),\r\n 'dark-filled' : (color() == 'dark' && type() =='filled'),\r\n 'primary-outline' : (color() == 'primary' && type() =='outline'),\r\n 'secondary-outline' : (color() == 'secondary' && type() =='outline'),\r\n 'success-outline' : (color() == 'success' && type() =='outline'),\r\n 'warning-outline' : (color() == 'warning' && type() =='outline'),\r\n 'danger-outline' : (color() == 'danger' && type() =='outline'),\r\n 'navigation-outline': (color() == 'navigation' && type() =='outline'),\r\n 'dark-outline' : (color() == 'dark' && type() =='outline'),\r\n 'readonly': isDisabled(),\r\n 'cursor-wait': isLoading()\r\n }\"\r\n [ngStyle]=\"{\r\n 'width' : width(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(),\r\n 'height' : height(),\r\n 'min-height': minHeight()\r\n }\">\r\n <span class=\"slot\" *ngIf=\"!isLoading(); else loading\" >\r\n <span *ngIf=\"(iconPosition() == 'left')\">\r\n <i [class]=\"_icon()\"></i>\r\n </span>\r\n\r\n <span [ngClass]=\"{ 'ms-2': (iconPosition() == 'left'), 'me-2': (iconPosition() == 'right') }\">\r\n <ng-content></ng-content>\r\n </span>\r\n\r\n <span *ngIf=\"(iconPosition() == 'right')\">\r\n <i [class]=\"_icon()\"></i>\r\n </span>\r\n </span>\r\n\r\n <ng-template #loading>\r\n <span class=\"slot fa-fade\">\r\n <span class=\"me-2\"> Loading </span>\r\n <i class=\"spinner-border\"></i>\r\n </span>\r\n </ng-template>\r\n </button>\r\n }\r\n\r\n @else {\r\n @if (type() == 'icon') {\r\n <button mat-icon-button\r\n [id]=\"_id + '-inner-button'\"\r\n (click)=\"Click($event)\"\r\n [ngClass]=\"{\r\n 'primary-filled' : (color() == 'primary'),\r\n 'secondary-filled' : (color() == 'secondary'),\r\n 'success-filled' : (color() == 'success'),\r\n 'warning-filled' : (color() == 'warning'),\r\n 'danger-filled' : (color() == 'danger'),\r\n 'navigation-filled': (color() == 'navigation'),\r\n 'dark-filled' : (color() == 'dark'),\r\n 'readonly' : (isDisabled() || isLoading()),\r\n 'cursor-wait' : isLoading()\r\n }\">\r\n <i [class]=\"_icon()\"></i>\r\n </button>\r\n }\r\n\r\n @else if (type() == 'icon-outline') {\r\n <button mat-icon-button\r\n [id]=\"_id + '-inner-button'\"\r\n (click)=\"Click($event)\"\r\n [ngClass]=\"{\r\n 'primary-outline' : (color() == 'primary'),\r\n 'secondary-outline' : (color() == 'secondary'),\r\n 'success-outline' : (color() == 'success'),\r\n 'warning-outline' : (color() == 'warning'),\r\n 'danger-outline' : (color() == 'danger'),\r\n 'navigation-outline': (color() == 'navigation'),\r\n 'dark-outline' : (color() == 'dark'),\r\n 'readonly' : (isDisabled() || isLoading()),\r\n 'cursor-wait' : isLoading()\r\n }\">\r\n <i [class]=\"_icon()\"></i>\r\n </button>\r\n }\r\n\r\n @else if (type() == 'icon-no-border') {\r\n <button mat-icon-button\r\n [id]=\"_id + '-inner-button'\"\r\n (click)=\"Click($event)\"\r\n [ngClass]=\"{\r\n 'primary-outline' : (color() == 'primary'),\r\n 'secondary-outline' : (color() == 'secondary'),\r\n 'success-outline' : (color() == 'success'),\r\n 'warning-outline' : (color() == 'warning'),\r\n 'danger-outline' : (color() == 'danger'),\r\n 'navigation-outline': (color() == 'navigation'),\r\n 'dark-outline' : (color() == 'dark'),\r\n 'readonly' : (isDisabled() || isLoading()),\r\n 'icon-no-border' : true\r\n }\">\r\n <i [class]=\"_icon()\"></i>\r\n </button>\r\n }\r\n }\r\n </a>\r\n</div>", styles: [":root{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031;--purple: #a615bc}.text-blue{color:var(--blue)!important}.text-blue-bold{color:var(--blue)!important;font-weight:700!important}.background-blue{background-color:var(--blue)!important}.background-border-blue{background-color:var(--blue)!important;border-color:var(--blue)!important}.border-blue{border-color:var(--blue)!important}.text-gray{color:var(--gray)!important}.text-gray-bold{color:var(--gray)!important;font-weight:700!important}.background-gray{background-color:var(--gray)!important}.background-border-gray{background-color:var(--gray)!important;border-color:var(--gray)!important}.border-gray{border-color:var(--gray)!important}.text-green{color:var(--green)!important}.text-green-bold{color:var(--green)!important;font-weight:700!important}.background-green{background-color:var(--green)!important}.background-border-green{background-color:var(--green)!important;border-color:var(--green)!important}.border-green{border-color:var(--green)!important}.text-yellow{color:var(--yellow)!important}.text-yellow-bold{color:var(--yellow)!important;font-weight:700!important}.background-yellow{background-color:var(--yellow)!important}.background-border-yellow{background-color:var(--yellow)!important;border-color:var(--yellow)!important}.border-yellow{border-color:var(--yellow)!important}.text-red{color:var(--red)!important}.text-red-bold{color:var(--red)!important;font-weight:700!important}.background-red{background-color:var(--red)!important}.background-border-red{background-color:var(--red)!important;border-color:var(--red)!important}.border-red{border-color:var(--red)!important}.text-white{color:var(--white)!important}.text-white-bold{color:var(--white)!important;font-weight:700!important}.background-white{background-color:var(--white)!important}.background-border-white{background-color:var(--white)!important;border-color:var(--white)!important}.border-white{border-color:var(--white)!important}.text-black{color:var(--black)!important}.text-black-bold{color:var(--black)!important;font-weight:700!important}.background-black{background-color:var(--black)!important}.background-border-black{background-color:var(--black)!important;border-color:var(--black)!important}.border-black{border-color:var(--black)!important}.text-orange{color:var(--orange)!important}.text-orange-bold{color:var(--orange)!important;font-weight:700!important}.background-orange{background-color:var(--orange)!important}.background-border-orange{background-color:var(--orange)!important;border-color:var(--orange)!important}.border-orange{border-color:var(--orange)!important}.text-transparent{color:transparent!important}.background-transparent{background-color:transparent!important}.border-transparent{border-color:transparent!important}coer-button{display:contents!important}div.coer-button{display:contents!important}div.coer-button a{display:inline-block!important;height:fit-content!important}div.coer-button a.animate__disabled{animation-duration:0s!important}div.coer-button button{font-size:17px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}div.coer-button .slot{width:100px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}div.coer-button button.primary-filled{background-color:var(--blue)!important;color:var(--white)!important}div.coer-button button.secondary-filled{background-color:var(--gray)!important;color:var(--white)!important}div.coer-button button.success-filled{background-color:var(--green)!important;color:var(--white)!important}div.coer-button button.warning-filled{background-color:var(--yellow)!important;color:var(--black)!important}div.coer-button button.danger-filled{background-color:var(--red)!important;color:var(--white)!important}div.coer-button button.navigation-filled{background-color:var(--orange)!important;color:var(--white)!important}div.coer-button button.dark-filled{background-color:var(--black)!important;color:var(--white)!important}div.coer-button button.primary-outline{background-color:#fff!important;border:1px solid var(--blue)!important;color:var(--blue)!important}div.coer-button button.secondary-outline{background-color:#fff!important;border:1px solid var(--gray)!important;color:var(--gray)!important}div.coer-button button.success-outline{background-color:#fff!important;border:1px solid var(--green)!important;color:var(--green)!important}div.coer-button button.warning-outline{background-color:#fff!important;border:1px solid var(--yellow)!important;color:var(--yellow)!important}div.coer-button button.danger-outline{background-color:#fff!important;border:1px solid var(--red)!important;color:var(--red)!important}div.coer-button button.navigation-outline{background-color:#fff!important;border:1px solid var(--orange)!important;color:var(--orange)!important}div.coer-button button.dark-outline{background-color:#fff!important;border:1px solid var(--black)!important;color:var(--black)!important}div.coer-button button.primary-filled:not(.readonly):hover,div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):hover,div.coer-button button.primary-outline:not(.readonly):focus,div.coer-button button.secondary-filled:not(.readonly):hover,div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):hover,div.coer-button button.secondary-outline:not(.readonly):focus,div.coer-button button.success-filled:not(.readonly):hover,div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):hover,div.coer-button button.success-outline:not(.readonly):focus,div.coer-button button.warning-filled:not(.readonly):hover,div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):hover,div.coer-button button.warning-outline:not(.readonly):focus,div.coer-button button.danger-filled:not(.readonly):hover,div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):hover,div.coer-button button.danger-outline:not(.readonly):focus,div.coer-button button.navigation-filled:not(.readonly):hover,div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):hover,div.coer-button button.navigation-outline:not(.readonly):focus,div.coer-button button.dark-filled:not(.readonly):hover,div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):hover,div.coer-button button.dark-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--blue)!important}div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--gray)!important}div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):focus{box-shadow:0 0 20px var(--green)!important}div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):focus{box-shadow:0 0 20px var(--yellow)!important}div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):focus{box-shadow:0 0 20px var(--red)!important}div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):focus{box-shadow:0 0 20px var(--orange)!important}div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):focus{box-shadow:0 0 20px var(--black)!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button{width:40px!important;height:40px!important;padding:0!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border{width:25px!important;height:25px!important;background-color:transparent!important;border:none!important;overflow:visible!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border *{font-size:medium!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-left,div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-in-right{font-size:20px!important}div.coer-button button.readonly,div.coer-button button.readonly:hover,div.coer-button button.readonly:focus{background-color:#dfdede!important;border-color:#dfdede!important;color:#fff!important}div.coer-button coer-button[ishidden=true],div.coer-button coer-button[ng-reflect-invisible=true]{position:relative!important;top:10000vh;left:10000vw}div.coer-button a.loading{cursor:wait!important}div.coer-button i{vertical-align:middle!important}div.coer-button i.spinner-border{width:15px!important;height:15px!important;font-size:16px!important}div.coer-button span{font-weight:700!important}div.coer-button .mat-mdc-button-touch-target{width:0px!important;height:0px!important}\n"] }]
|
|
224
241
|
}], propDecorators: { id: [{
|
|
225
242
|
type: Input
|
|
226
243
|
}], tooltip: [{
|