coer-elements 2.0.82 → 2.0.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/components/lib/coer-datebox/coer-datebox.component.d.ts +1 -1
- package/components/lib/coer-grid/coer-grid-cell/coer-grid-cell.component.d.ts +2 -2
- package/components/lib/coer-numberbox/coer-numberbox.component.d.ts +1 -1
- package/components/lib/coer-secretbox/coer-secretbox.component.d.ts +1 -1
- package/components/lib/coer-textarea/coer-textarea.component.d.ts +1 -1
- package/components/lib/coer-textbox/coer-textbox.component.d.ts +1 -1
- package/fesm2022/coer-elements-components.mjs +52 -53
- package/fesm2022/coer-elements-components.mjs.map +1 -1
- package/fesm2022/coer-elements-tools.mjs +6 -0
- package/fesm2022/coer-elements-tools.mjs.map +1 -1
- package/interfaces/lib/coer-grid/grid-column.interface.d.ts +6 -6
- package/package.json +3 -3
- package/tools/lib/tools.d.ts +2 -0
|
@@ -22,7 +22,7 @@ export declare class CoerDateBox extends ControlValue implements AfterViewInit,
|
|
|
22
22
|
value: import("@angular/core").InputSignal<string | Date | null | undefined>;
|
|
23
23
|
label: import("@angular/core").InputSignal<string>;
|
|
24
24
|
placeholder: import("@angular/core").InputSignal<string>;
|
|
25
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
25
|
+
textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
|
|
26
26
|
isWritable: import("@angular/core").InputSignal<boolean>;
|
|
27
27
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
28
28
|
isValid: import("@angular/core").InputSignal<boolean>;
|
|
@@ -26,9 +26,9 @@ export declare class CoerGridCell<T> {
|
|
|
26
26
|
/** */
|
|
27
27
|
protected _GetCellValue: import("@angular/core").Signal<string>;
|
|
28
28
|
/** */
|
|
29
|
-
protected _GetTextAlignX: import("@angular/core").Signal<"
|
|
29
|
+
protected _GetTextAlignX: import("@angular/core").Signal<"flex-start" | "center" | "flex-end">;
|
|
30
30
|
/** */
|
|
31
|
-
protected _GetTextAlignY: import("@angular/core").Signal<"
|
|
31
|
+
protected _GetTextAlignY: import("@angular/core").Signal<"flex-start" | "center" | "flex-end">;
|
|
32
32
|
/** */
|
|
33
33
|
protected _GetTextBreak: import("@angular/core").Signal<"break-word" | "keep-all">;
|
|
34
34
|
/** */
|
|
@@ -16,7 +16,7 @@ export declare class CoerNumberBox extends ControlValue implements AfterViewInit
|
|
|
16
16
|
value: import("@angular/core").InputSignal<string | number | null | undefined>;
|
|
17
17
|
label: import("@angular/core").InputSignal<string>;
|
|
18
18
|
placeholder: import("@angular/core").InputSignal<string>;
|
|
19
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
19
|
+
textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
|
|
20
20
|
min: import("@angular/core").InputSignal<number>;
|
|
21
21
|
max: import("@angular/core").InputSignal<number>;
|
|
22
22
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
@@ -17,7 +17,7 @@ export declare class CoerSecretBox extends ControlValue implements AfterViewInit
|
|
|
17
17
|
value: import("@angular/core").InputSignal<string | number | null | undefined>;
|
|
18
18
|
label: import("@angular/core").InputSignal<string>;
|
|
19
19
|
placeholder: import("@angular/core").InputSignal<string>;
|
|
20
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
20
|
+
textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
|
|
21
21
|
minLength: import("@angular/core").InputSignal<string | number>;
|
|
22
22
|
maxLength: import("@angular/core").InputSignal<string | number>;
|
|
23
23
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
@@ -12,7 +12,7 @@ export declare class CoerTextarea extends ControlValue implements AfterViewInit,
|
|
|
12
12
|
value: import("@angular/core").InputSignal<string | number | null | undefined>;
|
|
13
13
|
label: import("@angular/core").InputSignal<string>;
|
|
14
14
|
placeholder: import("@angular/core").InputSignal<string>;
|
|
15
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
15
|
+
textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
|
|
16
16
|
minLength: import("@angular/core").InputSignal<string | number>;
|
|
17
17
|
maxLength: import("@angular/core").InputSignal<string | number>;
|
|
18
18
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
@@ -16,7 +16,7 @@ export declare class CoerTextBox extends ControlValue implements AfterViewInit,
|
|
|
16
16
|
value: import("@angular/core").InputSignal<string | number | null | undefined>;
|
|
17
17
|
label: import("@angular/core").InputSignal<string>;
|
|
18
18
|
placeholder: import("@angular/core").InputSignal<string>;
|
|
19
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
19
|
+
textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
|
|
20
20
|
minLength: import("@angular/core").InputSignal<string | number>;
|
|
21
21
|
maxLength: import("@angular/core").InputSignal<string | number>;
|
|
22
22
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
@@ -303,11 +303,11 @@ class CoerButton {
|
|
|
303
303
|
});
|
|
304
304
|
}
|
|
305
305
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
306
|
-
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: true, 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 }, typeBreakpoint: { classPropertyName: "typeBreakpoint", publicName: "typeBreakpoint", 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 }, 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 }, isHidde: { classPropertyName: "isHidde", publicName: "isHidde", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, widthBreakpoint: { classPropertyName: "widthBreakpoint", publicName: "widthBreakpoint", 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 }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div [ngClass]=\"{ 'coer-button': true, 'display-contents': !isHidde(), 'display-none': isHidde() }\">\r\n <a [routerLink]=\"(path().length > 0 && _isEnable()) ? path() : null\"\r\n [matTooltip]=\"_tooltip()\"\r\n [matTooltipPosition]=\"_tooltipPosition()\"\r\n [matTooltipDisabled]=\"!_isEnable()\"\r\n [matTooltipHideDelay]=\"0\"\r\n [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible': isInvisible() || isReadonly()\r\n }\"\r\n [ngStyle]=\"{ \r\n 'margin-top' : marginTop(), \r\n 'margin-right' : marginRight(), \r\n 'margin-bottom': marginBottom(), \r\n 'margin-left' : marginLeft(),\r\n 'width' : _showButtonIcon() ? 'auto' : _buttonBreakpointSizeWidth(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(), \r\n }\"> \r\n \r\n <div [class]=\"_showButton() ? '' : 'display-none'\">\r\n <button mat-button type=\"button\" \r\n [id]=\"_id + '-inner-button'\"\r\n (click)=\"_Click()\"\r\n [class]=\"_buttonType()\"\r\n [ngStyle]=\"{ \r\n 'height' : height(),\r\n 'min-height': minHeight()\r\n }\">\r\n\r\n @if(!isLoading()) {\r\n <span class=\"slot\">\r\n @if(iconPosition() == 'left') { \r\n <i [class]=\"_icon()\"></i> \r\n }\r\n \r\n <span [ngClass]=\"{ \r\n 'ms-2': (iconPosition() == 'left' && _icon().length > 0), \r\n 'me-2': (iconPosition() == 'right' && _icon().length > 0) \r\n }\">\r\n <ng-content>Click</ng-content>\r\n </span>\r\n \r\n @if(iconPosition() == 'right') {\r\n <i [class]=\"_icon()\"></i>\r\n }\r\n </span>\r\n }\r\n\r\n @else {\r\n <span class=\"slot animation-appear\">\r\n <span class=\"me-2\"> Loading </span>\r\n <i class=\"icon-circle-notch animation-spin\"></i>\r\n </span> \r\n }\r\n </button>\r\n </div> \r\n\r\n \r\n <div [class]=\"_showButtonIcon() ? 'flex-middle-center' : 'display-none'\">\r\n <button mat-icon-button\r\n [id]=\"_id + '-inner-button-icon'\"\r\n type=\"button\"\r\n (click)=\"_Click()\"\r\n [class]=\"_buttonType()\">\r\n <i [class]=\"_icon()\"></i>\r\n </button>\r\n </div>\r\n </a>\r\n</div> ", styles: ["coer-button{display:contents!important}div.coer-button a{display:inline-block!important;height:fit-content!important;text-decoration:none!important;color:var(--black)}div.coer-button button{font-size:17px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%}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.default-filled{color:var(--black)!important;background-color:transparent!important}div.coer-button button.default-outline{color:var(--black)!important;border:1px solid var(--black)!important;background-color:transparent!important}div.coer-button button.default-filled:not(.readonly):focus,div.coer-button button.default-outline:not(.readonly):focus{box-shadow:0 0 20px transparent!important}div.coer-button button.default-filled:not(.readonly):hover,div.coer-button button.default-filled:not(.readonly):focus,div.coer-button button.default-outline:not(.readonly):hover,div.coer-button button.default-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.primary-filled{color:var(--white)!important;background-color:var(--primary-inner)!important}div.coer-button button.primary-outline{color:var(--primary-inner)!important;border:1px solid var(--primary-inner)!important;background-color:transparent!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(--primary-inner)!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{filter:brightness(1.1)!important}div.coer-button button.secondary-filled{color:var(--white)!important;background-color:var(--secondary-inner)!important}div.coer-button button.secondary-outline{color:var(--secondary-inner)!important;border:1px solid var(--secondary-inner)!important;background-color:transparent!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(--secondary-inner)!important}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{filter:brightness(1.1)!important}div.coer-button button.success-filled{color:var(--white)!important;background-color:var(--success-inner)!important}div.coer-button button.success-outline{color:var(--success-inner)!important;border:1px solid var(--success-inner)!important;background-color:transparent!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(--success-inner)!important}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{filter:brightness(1.1)!important}div.coer-button button.warning-filled{color:var(--black)!important;background-color:var(--warning-inner)!important}div.coer-button button.warning-outline{color:var(--warning-inner)!important;border:1px solid var(--warning-inner)!important;background-color:transparent!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(--warning-inner)!important}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{filter:brightness(1.1)!important}div.coer-button button.danger-filled{color:var(--white)!important;background-color:var(--danger-inner)!important}div.coer-button button.danger-outline{color:var(--danger-inner)!important;border:1px solid var(--danger-inner)!important;background-color:transparent!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(--danger-inner)!important}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{filter:brightness(1.1)!important}div.coer-button button.navigation-filled{color:var(--white)!important;background-color:var(--navigation-inner)!important}div.coer-button button.navigation-outline{color:var(--navigation-inner)!important;border:1px solid var(--navigation-inner)!important;background-color:transparent!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(--navigation-inner)!important}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{filter:brightness(1.1)!important}div.coer-button button.information-filled{color:var(--white)!important;background-color:var(--information-inner)!important}div.coer-button button.information-outline{color:var(--information-inner)!important;border:1px solid var(--information-inner)!important;background-color:transparent!important}div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):focus{box-shadow:0 0 20px var(--information-inner)!important}div.coer-button button.information-filled:not(.readonly):hover,div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):hover,div.coer-button button.information-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.dark-filled{color:var(--white)!important;background-color:var(--black)!important}div.coer-button button.dark-outline{color:var(--black)!important;border:1px solid var(--black)!important;background-color:transparent!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.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.light-filled{color:var(--black)!important;background-color:var(--white)!important}div.coer-button button.light-outline{color:var(--white)!important;border:1px solid var(--white)!important;background-color:transparent!important}div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):focus{box-shadow:0 0 20px var(--white)!important}div.coer-button button.light-filled:not(.readonly):hover,div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):hover,div.coer-button button.light-outline:not(.readonly):focus{filter:brightness(1.1)!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:var(--white)!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border.readonly{color:#dfdede!important}div.coer-button a.loading{cursor:wait!important}div.coer-button i{display:flex!important;align-items:center!important;justify-content:center!important}div.coer-button span{font-weight:700!important}div.coer-button .mat-mdc-button-touch-target{width:0px!important;height:0px!important}div.coer-button .mat-mdc-icon-button .mat-mdc-button-ripple,div.coer-button .mat-mdc-icon-button .mat-mdc-button-persistent-ripple,div.coer-button .mat-mdc-icon-button .mat-mdc-button-persistent-ripple:before{position:relative!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
306
|
+
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: true, 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 }, typeBreakpoint: { classPropertyName: "typeBreakpoint", publicName: "typeBreakpoint", 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 }, 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 }, isHidde: { classPropertyName: "isHidde", publicName: "isHidde", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, widthBreakpoint: { classPropertyName: "widthBreakpoint", publicName: "widthBreakpoint", 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 }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div [ngClass]=\"{ 'coer-button': true, 'display-contents': !isHidde() && !isReadonly(), 'display-none': isHidde() || isReadonly() }\">\r\n <a [routerLink]=\"(path().length > 0 && _isEnable()) ? path() : null\"\r\n [matTooltip]=\"_tooltip()\"\r\n [matTooltipPosition]=\"_tooltipPosition()\"\r\n [matTooltipDisabled]=\"!_isEnable()\"\r\n [matTooltipHideDelay]=\"0\"\r\n [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible': isInvisible()\r\n }\"\r\n [ngStyle]=\"{ \r\n 'margin-top' : marginTop(), \r\n 'margin-right' : marginRight(), \r\n 'margin-bottom': marginBottom(), \r\n 'margin-left' : marginLeft(),\r\n 'width' : _showButtonIcon() ? 'auto' : _buttonBreakpointSizeWidth(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(), \r\n }\"> \r\n \r\n <div [class]=\"_showButton() ? '' : 'display-none'\">\r\n <button mat-button type=\"button\" \r\n [id]=\"_id + '-inner-button'\"\r\n (click)=\"_Click()\"\r\n [class]=\"_buttonType()\"\r\n [ngStyle]=\"{ \r\n 'height' : height(),\r\n 'min-height': minHeight()\r\n }\">\r\n\r\n @if(!isLoading()) {\r\n <span class=\"slot\">\r\n @if(iconPosition() == 'left') { \r\n <i [class]=\"_icon()\"></i> \r\n }\r\n \r\n <span [ngClass]=\"{ \r\n 'ms-2': (iconPosition() == 'left' && _icon().length > 0), \r\n 'me-2': (iconPosition() == 'right' && _icon().length > 0) \r\n }\">\r\n <ng-content>Click</ng-content>\r\n </span>\r\n \r\n @if(iconPosition() == 'right') {\r\n <i [class]=\"_icon()\"></i>\r\n }\r\n </span>\r\n }\r\n\r\n @else {\r\n <span class=\"slot animation-appear\">\r\n <span class=\"me-2\"> Loading </span>\r\n <i class=\"icon-circle-notch animation-spin\"></i>\r\n </span> \r\n }\r\n </button>\r\n </div> \r\n\r\n \r\n <div [class]=\"_showButtonIcon() ? 'flex-middle-center' : 'display-none'\">\r\n <button mat-icon-button\r\n [id]=\"_id + '-inner-button-icon'\"\r\n type=\"button\"\r\n (click)=\"_Click()\"\r\n [class]=\"_buttonType()\">\r\n <i [class]=\"_icon()\"></i>\r\n </button>\r\n </div>\r\n </a>\r\n</div> ", styles: ["coer-button{display:contents!important}div.coer-button a{display:inline-block!important;height:fit-content!important;text-decoration:none!important;color:var(--black)}div.coer-button button{font-size:17px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%}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.default-filled{color:var(--black)!important;background-color:transparent!important}div.coer-button button.default-outline{color:var(--black)!important;border:1px solid var(--black)!important;background-color:transparent!important}div.coer-button button.default-filled:not(.readonly):focus,div.coer-button button.default-outline:not(.readonly):focus{box-shadow:0 0 20px transparent!important}div.coer-button button.default-filled:not(.readonly):hover,div.coer-button button.default-filled:not(.readonly):focus,div.coer-button button.default-outline:not(.readonly):hover,div.coer-button button.default-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.primary-filled{color:var(--white)!important;background-color:var(--primary-inner)!important}div.coer-button button.primary-outline{color:var(--primary-inner)!important;border:1px solid var(--primary-inner)!important;background-color:transparent!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(--primary-inner)!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{filter:brightness(1.1)!important}div.coer-button button.secondary-filled{color:var(--white)!important;background-color:var(--secondary-inner)!important}div.coer-button button.secondary-outline{color:var(--secondary-inner)!important;border:1px solid var(--secondary-inner)!important;background-color:transparent!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(--secondary-inner)!important}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{filter:brightness(1.1)!important}div.coer-button button.success-filled{color:var(--white)!important;background-color:var(--success-inner)!important}div.coer-button button.success-outline{color:var(--success-inner)!important;border:1px solid var(--success-inner)!important;background-color:transparent!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(--success-inner)!important}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{filter:brightness(1.1)!important}div.coer-button button.warning-filled{color:var(--black)!important;background-color:var(--warning-inner)!important}div.coer-button button.warning-outline{color:var(--warning-inner)!important;border:1px solid var(--warning-inner)!important;background-color:transparent!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(--warning-inner)!important}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{filter:brightness(1.1)!important}div.coer-button button.danger-filled{color:var(--white)!important;background-color:var(--danger-inner)!important}div.coer-button button.danger-outline{color:var(--danger-inner)!important;border:1px solid var(--danger-inner)!important;background-color:transparent!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(--danger-inner)!important}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{filter:brightness(1.1)!important}div.coer-button button.navigation-filled{color:var(--white)!important;background-color:var(--navigation-inner)!important}div.coer-button button.navigation-outline{color:var(--navigation-inner)!important;border:1px solid var(--navigation-inner)!important;background-color:transparent!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(--navigation-inner)!important}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{filter:brightness(1.1)!important}div.coer-button button.information-filled{color:var(--white)!important;background-color:var(--information-inner)!important}div.coer-button button.information-outline{color:var(--information-inner)!important;border:1px solid var(--information-inner)!important;background-color:transparent!important}div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):focus{box-shadow:0 0 20px var(--information-inner)!important}div.coer-button button.information-filled:not(.readonly):hover,div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):hover,div.coer-button button.information-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.dark-filled{color:var(--white)!important;background-color:var(--black)!important}div.coer-button button.dark-outline{color:var(--black)!important;border:1px solid var(--black)!important;background-color:transparent!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.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.light-filled{color:var(--black)!important;background-color:var(--white)!important}div.coer-button button.light-outline{color:var(--white)!important;border:1px solid var(--white)!important;background-color:transparent!important}div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):focus{box-shadow:0 0 20px var(--white)!important}div.coer-button button.light-filled:not(.readonly):hover,div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):hover,div.coer-button button.light-outline:not(.readonly):focus{filter:brightness(1.1)!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:var(--white)!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border.readonly{color:#dfdede!important}div.coer-button a.loading{cursor:wait!important}div.coer-button i{display:flex!important;align-items:center!important;justify-content:center!important}div.coer-button span{font-weight:700!important}div.coer-button .mat-mdc-button-touch-target{width:0px!important;height:0px!important}div.coer-button .mat-mdc-icon-button .mat-mdc-button-ripple,div.coer-button .mat-mdc-icon-button .mat-mdc-button-persistent-ripple,div.coer-button .mat-mdc-icon-button .mat-mdc-button-persistent-ripple:before{position:relative!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
307
307
|
}
|
|
308
308
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerButton, decorators: [{
|
|
309
309
|
type: Component,
|
|
310
|
-
args: [{ selector: 'coer-button', standalone: false, template: "<div [ngClass]=\"{ 'coer-button': true, 'display-contents': !isHidde(), 'display-none': isHidde() }\">\r\n <a [routerLink]=\"(path().length > 0 && _isEnable()) ? path() : null\"\r\n [matTooltip]=\"_tooltip()\"\r\n [matTooltipPosition]=\"_tooltipPosition()\"\r\n [matTooltipDisabled]=\"!_isEnable()\"\r\n [matTooltipHideDelay]=\"0\"\r\n [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible': isInvisible() || isReadonly()\r\n }\"\r\n [ngStyle]=\"{ \r\n 'margin-top' : marginTop(), \r\n 'margin-right' : marginRight(), \r\n 'margin-bottom': marginBottom(), \r\n 'margin-left' : marginLeft(),\r\n 'width' : _showButtonIcon() ? 'auto' : _buttonBreakpointSizeWidth(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(), \r\n }\"> \r\n \r\n <div [class]=\"_showButton() ? '' : 'display-none'\">\r\n <button mat-button type=\"button\" \r\n [id]=\"_id + '-inner-button'\"\r\n (click)=\"_Click()\"\r\n [class]=\"_buttonType()\"\r\n [ngStyle]=\"{ \r\n 'height' : height(),\r\n 'min-height': minHeight()\r\n }\">\r\n\r\n @if(!isLoading()) {\r\n <span class=\"slot\">\r\n @if(iconPosition() == 'left') { \r\n <i [class]=\"_icon()\"></i> \r\n }\r\n \r\n <span [ngClass]=\"{ \r\n 'ms-2': (iconPosition() == 'left' && _icon().length > 0), \r\n 'me-2': (iconPosition() == 'right' && _icon().length > 0) \r\n }\">\r\n <ng-content>Click</ng-content>\r\n </span>\r\n \r\n @if(iconPosition() == 'right') {\r\n <i [class]=\"_icon()\"></i>\r\n }\r\n </span>\r\n }\r\n\r\n @else {\r\n <span class=\"slot animation-appear\">\r\n <span class=\"me-2\"> Loading </span>\r\n <i class=\"icon-circle-notch animation-spin\"></i>\r\n </span> \r\n }\r\n </button>\r\n </div> \r\n\r\n \r\n <div [class]=\"_showButtonIcon() ? 'flex-middle-center' : 'display-none'\">\r\n <button mat-icon-button\r\n [id]=\"_id + '-inner-button-icon'\"\r\n type=\"button\"\r\n (click)=\"_Click()\"\r\n [class]=\"_buttonType()\">\r\n <i [class]=\"_icon()\"></i>\r\n </button>\r\n </div>\r\n </a>\r\n</div> ", styles: ["coer-button{display:contents!important}div.coer-button a{display:inline-block!important;height:fit-content!important;text-decoration:none!important;color:var(--black)}div.coer-button button{font-size:17px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%}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.default-filled{color:var(--black)!important;background-color:transparent!important}div.coer-button button.default-outline{color:var(--black)!important;border:1px solid var(--black)!important;background-color:transparent!important}div.coer-button button.default-filled:not(.readonly):focus,div.coer-button button.default-outline:not(.readonly):focus{box-shadow:0 0 20px transparent!important}div.coer-button button.default-filled:not(.readonly):hover,div.coer-button button.default-filled:not(.readonly):focus,div.coer-button button.default-outline:not(.readonly):hover,div.coer-button button.default-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.primary-filled{color:var(--white)!important;background-color:var(--primary-inner)!important}div.coer-button button.primary-outline{color:var(--primary-inner)!important;border:1px solid var(--primary-inner)!important;background-color:transparent!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(--primary-inner)!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{filter:brightness(1.1)!important}div.coer-button button.secondary-filled{color:var(--white)!important;background-color:var(--secondary-inner)!important}div.coer-button button.secondary-outline{color:var(--secondary-inner)!important;border:1px solid var(--secondary-inner)!important;background-color:transparent!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(--secondary-inner)!important}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{filter:brightness(1.1)!important}div.coer-button button.success-filled{color:var(--white)!important;background-color:var(--success-inner)!important}div.coer-button button.success-outline{color:var(--success-inner)!important;border:1px solid var(--success-inner)!important;background-color:transparent!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(--success-inner)!important}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{filter:brightness(1.1)!important}div.coer-button button.warning-filled{color:var(--black)!important;background-color:var(--warning-inner)!important}div.coer-button button.warning-outline{color:var(--warning-inner)!important;border:1px solid var(--warning-inner)!important;background-color:transparent!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(--warning-inner)!important}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{filter:brightness(1.1)!important}div.coer-button button.danger-filled{color:var(--white)!important;background-color:var(--danger-inner)!important}div.coer-button button.danger-outline{color:var(--danger-inner)!important;border:1px solid var(--danger-inner)!important;background-color:transparent!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(--danger-inner)!important}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{filter:brightness(1.1)!important}div.coer-button button.navigation-filled{color:var(--white)!important;background-color:var(--navigation-inner)!important}div.coer-button button.navigation-outline{color:var(--navigation-inner)!important;border:1px solid var(--navigation-inner)!important;background-color:transparent!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(--navigation-inner)!important}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{filter:brightness(1.1)!important}div.coer-button button.information-filled{color:var(--white)!important;background-color:var(--information-inner)!important}div.coer-button button.information-outline{color:var(--information-inner)!important;border:1px solid var(--information-inner)!important;background-color:transparent!important}div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):focus{box-shadow:0 0 20px var(--information-inner)!important}div.coer-button button.information-filled:not(.readonly):hover,div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):hover,div.coer-button button.information-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.dark-filled{color:var(--white)!important;background-color:var(--black)!important}div.coer-button button.dark-outline{color:var(--black)!important;border:1px solid var(--black)!important;background-color:transparent!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.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.light-filled{color:var(--black)!important;background-color:var(--white)!important}div.coer-button button.light-outline{color:var(--white)!important;border:1px solid var(--white)!important;background-color:transparent!important}div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):focus{box-shadow:0 0 20px var(--white)!important}div.coer-button button.light-filled:not(.readonly):hover,div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):hover,div.coer-button button.light-outline:not(.readonly):focus{filter:brightness(1.1)!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:var(--white)!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border.readonly{color:#dfdede!important}div.coer-button a.loading{cursor:wait!important}div.coer-button i{display:flex!important;align-items:center!important;justify-content:center!important}div.coer-button span{font-weight:700!important}div.coer-button .mat-mdc-button-touch-target{width:0px!important;height:0px!important}div.coer-button .mat-mdc-icon-button .mat-mdc-button-ripple,div.coer-button .mat-mdc-icon-button .mat-mdc-button-persistent-ripple,div.coer-button .mat-mdc-icon-button .mat-mdc-button-persistent-ripple:before{position:relative!important}\n"] }]
|
|
310
|
+
args: [{ selector: 'coer-button', standalone: false, template: "<div [ngClass]=\"{ 'coer-button': true, 'display-contents': !isHidde() && !isReadonly(), 'display-none': isHidde() || isReadonly() }\">\r\n <a [routerLink]=\"(path().length > 0 && _isEnable()) ? path() : null\"\r\n [matTooltip]=\"_tooltip()\"\r\n [matTooltipPosition]=\"_tooltipPosition()\"\r\n [matTooltipDisabled]=\"!_isEnable()\"\r\n [matTooltipHideDelay]=\"0\"\r\n [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible': isInvisible()\r\n }\"\r\n [ngStyle]=\"{ \r\n 'margin-top' : marginTop(), \r\n 'margin-right' : marginRight(), \r\n 'margin-bottom': marginBottom(), \r\n 'margin-left' : marginLeft(),\r\n 'width' : _showButtonIcon() ? 'auto' : _buttonBreakpointSizeWidth(),\r\n 'min-width' : minWidth(),\r\n 'max-width' : maxWidth(), \r\n }\"> \r\n \r\n <div [class]=\"_showButton() ? '' : 'display-none'\">\r\n <button mat-button type=\"button\" \r\n [id]=\"_id + '-inner-button'\"\r\n (click)=\"_Click()\"\r\n [class]=\"_buttonType()\"\r\n [ngStyle]=\"{ \r\n 'height' : height(),\r\n 'min-height': minHeight()\r\n }\">\r\n\r\n @if(!isLoading()) {\r\n <span class=\"slot\">\r\n @if(iconPosition() == 'left') { \r\n <i [class]=\"_icon()\"></i> \r\n }\r\n \r\n <span [ngClass]=\"{ \r\n 'ms-2': (iconPosition() == 'left' && _icon().length > 0), \r\n 'me-2': (iconPosition() == 'right' && _icon().length > 0) \r\n }\">\r\n <ng-content>Click</ng-content>\r\n </span>\r\n \r\n @if(iconPosition() == 'right') {\r\n <i [class]=\"_icon()\"></i>\r\n }\r\n </span>\r\n }\r\n\r\n @else {\r\n <span class=\"slot animation-appear\">\r\n <span class=\"me-2\"> Loading </span>\r\n <i class=\"icon-circle-notch animation-spin\"></i>\r\n </span> \r\n }\r\n </button>\r\n </div> \r\n\r\n \r\n <div [class]=\"_showButtonIcon() ? 'flex-middle-center' : 'display-none'\">\r\n <button mat-icon-button\r\n [id]=\"_id + '-inner-button-icon'\"\r\n type=\"button\"\r\n (click)=\"_Click()\"\r\n [class]=\"_buttonType()\">\r\n <i [class]=\"_icon()\"></i>\r\n </button>\r\n </div>\r\n </a>\r\n</div> ", styles: ["coer-button{display:contents!important}div.coer-button a{display:inline-block!important;height:fit-content!important;text-decoration:none!important;color:var(--black)}div.coer-button button{font-size:17px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%}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.default-filled{color:var(--black)!important;background-color:transparent!important}div.coer-button button.default-outline{color:var(--black)!important;border:1px solid var(--black)!important;background-color:transparent!important}div.coer-button button.default-filled:not(.readonly):focus,div.coer-button button.default-outline:not(.readonly):focus{box-shadow:0 0 20px transparent!important}div.coer-button button.default-filled:not(.readonly):hover,div.coer-button button.default-filled:not(.readonly):focus,div.coer-button button.default-outline:not(.readonly):hover,div.coer-button button.default-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.primary-filled{color:var(--white)!important;background-color:var(--primary-inner)!important}div.coer-button button.primary-outline{color:var(--primary-inner)!important;border:1px solid var(--primary-inner)!important;background-color:transparent!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(--primary-inner)!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{filter:brightness(1.1)!important}div.coer-button button.secondary-filled{color:var(--white)!important;background-color:var(--secondary-inner)!important}div.coer-button button.secondary-outline{color:var(--secondary-inner)!important;border:1px solid var(--secondary-inner)!important;background-color:transparent!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(--secondary-inner)!important}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{filter:brightness(1.1)!important}div.coer-button button.success-filled{color:var(--white)!important;background-color:var(--success-inner)!important}div.coer-button button.success-outline{color:var(--success-inner)!important;border:1px solid var(--success-inner)!important;background-color:transparent!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(--success-inner)!important}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{filter:brightness(1.1)!important}div.coer-button button.warning-filled{color:var(--black)!important;background-color:var(--warning-inner)!important}div.coer-button button.warning-outline{color:var(--warning-inner)!important;border:1px solid var(--warning-inner)!important;background-color:transparent!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(--warning-inner)!important}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{filter:brightness(1.1)!important}div.coer-button button.danger-filled{color:var(--white)!important;background-color:var(--danger-inner)!important}div.coer-button button.danger-outline{color:var(--danger-inner)!important;border:1px solid var(--danger-inner)!important;background-color:transparent!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(--danger-inner)!important}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{filter:brightness(1.1)!important}div.coer-button button.navigation-filled{color:var(--white)!important;background-color:var(--navigation-inner)!important}div.coer-button button.navigation-outline{color:var(--navigation-inner)!important;border:1px solid var(--navigation-inner)!important;background-color:transparent!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(--navigation-inner)!important}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{filter:brightness(1.1)!important}div.coer-button button.information-filled{color:var(--white)!important;background-color:var(--information-inner)!important}div.coer-button button.information-outline{color:var(--information-inner)!important;border:1px solid var(--information-inner)!important;background-color:transparent!important}div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):focus{box-shadow:0 0 20px var(--information-inner)!important}div.coer-button button.information-filled:not(.readonly):hover,div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):hover,div.coer-button button.information-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.dark-filled{color:var(--white)!important;background-color:var(--black)!important}div.coer-button button.dark-outline{color:var(--black)!important;border:1px solid var(--black)!important;background-color:transparent!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.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.light-filled{color:var(--black)!important;background-color:var(--white)!important}div.coer-button button.light-outline{color:var(--white)!important;border:1px solid var(--white)!important;background-color:transparent!important}div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):focus{box-shadow:0 0 20px var(--white)!important}div.coer-button button.light-filled:not(.readonly):hover,div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):hover,div.coer-button button.light-outline:not(.readonly):focus{filter:brightness(1.1)!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:var(--white)!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border.readonly{color:#dfdede!important}div.coer-button a.loading{cursor:wait!important}div.coer-button i{display:flex!important;align-items:center!important;justify-content:center!important}div.coer-button span{font-weight:700!important}div.coer-button .mat-mdc-button-touch-target{width:0px!important;height:0px!important}div.coer-button .mat-mdc-icon-button .mat-mdc-button-ripple,div.coer-button .mat-mdc-icon-button .mat-mdc-button-persistent-ripple,div.coer-button .mat-mdc-icon-button .mat-mdc-button-persistent-ripple:before{position:relative!important}\n"] }]
|
|
311
311
|
}] });
|
|
312
312
|
|
|
313
313
|
class CoerCard {
|
|
@@ -845,12 +845,12 @@ class CoerFileboxImage {
|
|
|
845
845
|
this._isEnable = computed(() => {
|
|
846
846
|
return !this._isLoading()
|
|
847
847
|
&& !this.isDisabled()
|
|
848
|
+
&& !this.isReadonly()
|
|
848
849
|
&& !this.isInvisible();
|
|
849
850
|
});
|
|
850
851
|
//computed
|
|
851
852
|
this._showTrashButton = computed(() => {
|
|
852
|
-
return
|
|
853
|
-
&& this._isEnable()
|
|
853
|
+
return this._isEnable()
|
|
854
854
|
&& this.IsNotNull(this._image())
|
|
855
855
|
&& this.IsNotNull(this._image().value)
|
|
856
856
|
&& this.IsNotOnlyWhiteSpace(this._base64())
|
|
@@ -935,11 +935,11 @@ class CoerFileboxImage {
|
|
|
935
935
|
this._modal().Open();
|
|
936
936
|
}
|
|
937
937
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFileboxImage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
938
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerFileboxImage, isStandalone: false, selector: "coer-filebox-image", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", 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 } }, outputs: { onSelected: "onSelected", onDeleteImage: "onDeleteImage" }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "_modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"coer-filebox-image\"> \r\n <figure (click)=\"
|
|
938
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerFileboxImage, isStandalone: false, selector: "coer-filebox-image", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", 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 } }, outputs: { onSelected: "onSelected", onDeleteImage: "onDeleteImage" }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "_modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"coer-filebox-image\"> \r\n <figure (click)=\"_isEnable() ? _ClickImage(input) : null\" \r\n [ngClass]=\"{ \r\n 'cursor-pointer' : _isEnable(),\r\n 'dashed' : _figureDashed(),\r\n 'display-none' : isInvisible()\r\n }\"\r\n [ngStyle]=\"{\r\n 'width' : _image()?.width || '40px',\r\n 'min-width' : _image()?.maxWidth || '40px',\r\n 'max-width' : _image()?.maxWidth || '',\r\n 'height' : _image()?.height || '40px',\r\n 'min-height' : _image()?.maxHeight || '40px',\r\n 'max-height' : _image()?.maxHeight || '',\r\n 'margin-top' : _image()?.marginTop || '0px',\r\n 'margin-right' : _image()?.marginRight || '0px',\r\n 'margin-bottom': _image()?.marginBottom || '0px',\r\n 'margin-left' : _image()?.marginLeft || '0px',\r\n }\"> \r\n \r\n <div class=\"img\" [ngStyle]=\"{ 'background-image': 'url(' + (_base64() | noImage:image()?.noImage || 'IMAGE') + ')' }\"></div>\r\n \r\n <input #input\r\n type=\"file\"\r\n [accept]=\"_accept\"\r\n (change)=\"_SelectImages($event)\"\r\n (cancel)=\"_isLoadingInner.set(false)\"\r\n [multiple]=\"multiple()\">\r\n \r\n @if(_showTrashButton() || _showExpandButton()) {\r\n <div class=\"icon-container\">\r\n @if(_showTrashButton()) {\r\n <i class=\"icon-trash-can icon-fill\" (click)=\"_DeleteImage($event)\"></i>\r\n }\r\n \r\n @if(_showExpandButton()) {\r\n <i class=\"icon-expand\" (click)=\"_ExpandImage($event)\"></i>\r\n }\r\n </div>\r\n } \r\n\r\n <!-- Loading / Empty -->\r\n @if(_isLoading()) {\r\n <div class=\"loading\">\r\n <div class=\"loading-content\">\r\n <i class=\"icon-circle-notch animation-spin text-primary\"></i> \r\n </div>\r\n </div> \r\n } \r\n </figure>\r\n \r\n <!-- Modal -->\r\n <coer-modal #modal [title]=\"_image()?.name || ''\" height=\"90vh\" width=\"full\">\r\n <div class=\"modal-image\" [ngStyle]=\"{ 'background-image': 'url(' + _base64() + ')' }\"></div>\r\n </coer-modal>\r\n</div> ", styles: ["div.coer-filebox-image figure{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:3px!important;overflow:hidden!important}div.coer-filebox-image figure div.img{width:100%!important;height:100%!important;min-width:inherit!important;min-height:inherit!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important}div.coer-filebox-image figure div.icon-container{position:absolute;bottom:5px;right:5px;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:7px}div.coer-filebox-image figure div.icon-container i{color:var(--gray);font-size:20px;position:relative}div.coer-filebox-image figure div.icon-container i:hover{zoom:1.1}div.coer-filebox-image figure div.loading{position:absolute!important;inset:0!important;z-index:100!important;display:flex!important;align-items:center!important;justify-content:center!important}div.coer-filebox-image figure div.loading div.loading-content{display:inherit!important;justify-content:inherit!important;align-items:inherit!important;font-size:30px!important;color:var(--gray)!important}div.coer-filebox-image figure div.loading div.loading-content::selection,div.coer-filebox-image figure div.loading div.empty-data-content::selection{background-color:transparent!important}div.coer-filebox-image .dashed{border:1px dashed var(--gray)!important;background-color:transparent!important}div.coer-filebox-image div.modal-image{width:100%;height:100%;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background-size:contain;background-repeat:no-repeat;background-position:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CoerModal, selector: "coer-modal", inputs: ["id", "title", "icon", "showCloseButton", "width", "height", "maxHeight", "verticalPosition"], outputs: ["onOpen", "onClose"] }, { kind: "pipe", type: i5.NoImagePipe, name: "noImage" }] }); }
|
|
939
939
|
}
|
|
940
940
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFileboxImage, decorators: [{
|
|
941
941
|
type: Component,
|
|
942
|
-
args: [{ selector: 'coer-filebox-image', standalone: false, template: "<div class=\"coer-filebox-image\"> \r\n <figure (click)=\"
|
|
942
|
+
args: [{ selector: 'coer-filebox-image', standalone: false, template: "<div class=\"coer-filebox-image\"> \r\n <figure (click)=\"_isEnable() ? _ClickImage(input) : null\" \r\n [ngClass]=\"{ \r\n 'cursor-pointer' : _isEnable(),\r\n 'dashed' : _figureDashed(),\r\n 'display-none' : isInvisible()\r\n }\"\r\n [ngStyle]=\"{\r\n 'width' : _image()?.width || '40px',\r\n 'min-width' : _image()?.maxWidth || '40px',\r\n 'max-width' : _image()?.maxWidth || '',\r\n 'height' : _image()?.height || '40px',\r\n 'min-height' : _image()?.maxHeight || '40px',\r\n 'max-height' : _image()?.maxHeight || '',\r\n 'margin-top' : _image()?.marginTop || '0px',\r\n 'margin-right' : _image()?.marginRight || '0px',\r\n 'margin-bottom': _image()?.marginBottom || '0px',\r\n 'margin-left' : _image()?.marginLeft || '0px',\r\n }\"> \r\n \r\n <div class=\"img\" [ngStyle]=\"{ 'background-image': 'url(' + (_base64() | noImage:image()?.noImage || 'IMAGE') + ')' }\"></div>\r\n \r\n <input #input\r\n type=\"file\"\r\n [accept]=\"_accept\"\r\n (change)=\"_SelectImages($event)\"\r\n (cancel)=\"_isLoadingInner.set(false)\"\r\n [multiple]=\"multiple()\">\r\n \r\n @if(_showTrashButton() || _showExpandButton()) {\r\n <div class=\"icon-container\">\r\n @if(_showTrashButton()) {\r\n <i class=\"icon-trash-can icon-fill\" (click)=\"_DeleteImage($event)\"></i>\r\n }\r\n \r\n @if(_showExpandButton()) {\r\n <i class=\"icon-expand\" (click)=\"_ExpandImage($event)\"></i>\r\n }\r\n </div>\r\n } \r\n\r\n <!-- Loading / Empty -->\r\n @if(_isLoading()) {\r\n <div class=\"loading\">\r\n <div class=\"loading-content\">\r\n <i class=\"icon-circle-notch animation-spin text-primary\"></i> \r\n </div>\r\n </div> \r\n } \r\n </figure>\r\n \r\n <!-- Modal -->\r\n <coer-modal #modal [title]=\"_image()?.name || ''\" height=\"90vh\" width=\"full\">\r\n <div class=\"modal-image\" [ngStyle]=\"{ 'background-image': 'url(' + _base64() + ')' }\"></div>\r\n </coer-modal>\r\n</div> ", styles: ["div.coer-filebox-image figure{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:3px!important;overflow:hidden!important}div.coer-filebox-image figure div.img{width:100%!important;height:100%!important;min-width:inherit!important;min-height:inherit!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important}div.coer-filebox-image figure div.icon-container{position:absolute;bottom:5px;right:5px;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:7px}div.coer-filebox-image figure div.icon-container i{color:var(--gray);font-size:20px;position:relative}div.coer-filebox-image figure div.icon-container i:hover{zoom:1.1}div.coer-filebox-image figure div.loading{position:absolute!important;inset:0!important;z-index:100!important;display:flex!important;align-items:center!important;justify-content:center!important}div.coer-filebox-image figure div.loading div.loading-content{display:inherit!important;justify-content:inherit!important;align-items:inherit!important;font-size:30px!important;color:var(--gray)!important}div.coer-filebox-image figure div.loading div.loading-content::selection,div.coer-filebox-image figure div.loading div.empty-data-content::selection{background-color:transparent!important}div.coer-filebox-image .dashed{border:1px dashed var(--gray)!important;background-color:transparent!important}div.coer-filebox-image div.modal-image{width:100%;height:100%;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background-size:contain;background-repeat:no-repeat;background-position:center}\n"] }]
|
|
943
943
|
}], ctorParameters: () => [] });
|
|
944
944
|
|
|
945
945
|
class CoerFilebox {
|
|
@@ -1256,7 +1256,7 @@ class CoerGridExtension extends ControlValue {
|
|
|
1256
1256
|
_SetHeight() {
|
|
1257
1257
|
this._height = (this.height() == 'full')
|
|
1258
1258
|
? (Screen.WINDOW_HEIGHT - (45 //Toolbar
|
|
1259
|
-
+ 15
|
|
1259
|
+
+ Screen.BREAKPOINT == 'mv' ? 5 : 15
|
|
1260
1260
|
+ (this._coerGridHeader()?.heigth || 0)
|
|
1261
1261
|
+ (this._coerGridFooter()?.heigth || 0)
|
|
1262
1262
|
+ HTMLElements.GetOffsetTop(this._grid)
|
|
@@ -2430,7 +2430,7 @@ class CoerSwitch extends ControlValue {
|
|
|
2430
2430
|
});
|
|
2431
2431
|
//computed
|
|
2432
2432
|
this._isEnable = computed(() => {
|
|
2433
|
-
return !this.isLoading() && !this.isDisabled() && !this.isInvisible();
|
|
2433
|
+
return !this.isLoading() && !this.isReadonly() && !this.isDisabled() && !this.isInvisible();
|
|
2434
2434
|
});
|
|
2435
2435
|
this._effectValue = effect(() => {
|
|
2436
2436
|
Tools.Sleep().then(() => {
|
|
@@ -2488,72 +2488,71 @@ class CoerGridCell {
|
|
|
2488
2488
|
this.onKeyupEnter = output();
|
|
2489
2489
|
/** */
|
|
2490
2490
|
this._GetCellValue = computed(() => {
|
|
2491
|
+
let value = this.row()[Strings.FirstCharToLower(this.header().property)];
|
|
2491
2492
|
//Template
|
|
2492
2493
|
if (Tools.IsNotNull(this.header().config?.template)) {
|
|
2493
|
-
if (
|
|
2494
|
-
|
|
2494
|
+
if (Tools.IsString(this.header()?.config?.template)) {
|
|
2495
|
+
value = this.header()?.config?.template;
|
|
2495
2496
|
}
|
|
2496
|
-
else if (
|
|
2497
|
-
|
|
2497
|
+
else if (Tools.IsFunction(this.header()?.config?.template)) {
|
|
2498
|
+
value = this.header()?.config?.template({
|
|
2498
2499
|
indexRow: this.row().indexRow,
|
|
2499
2500
|
property: this.header()?.config?.property,
|
|
2500
2501
|
row: { ...this.row() },
|
|
2501
|
-
value:
|
|
2502
|
+
value: value
|
|
2502
2503
|
});
|
|
2503
2504
|
}
|
|
2504
2505
|
}
|
|
2505
2506
|
//Currency
|
|
2506
2507
|
else if (Tools.IsNotNull(this.header().config?.typeCurrency)) {
|
|
2507
|
-
|
|
2508
|
-
|
|
2508
|
+
value = Tools.IsBooleanTrue(this.header()?.config?.typeCurrency) ||
|
|
2509
|
+
Tools.IsFunction(this.header()?.config?.typeCurrency) && this.header()?.config?.typeCurrency({
|
|
2509
2510
|
indexRow: this.row().indexRow,
|
|
2510
2511
|
property: this.header()?.config?.property,
|
|
2511
2512
|
row: { ...this.row() },
|
|
2512
|
-
value:
|
|
2513
|
-
}) ? Numbers.GetCurrencyFormat(
|
|
2513
|
+
value: value
|
|
2514
|
+
}) ? Numbers.GetCurrencyFormat(value) : value;
|
|
2514
2515
|
}
|
|
2515
2516
|
//Number
|
|
2516
2517
|
else if (Tools.IsNotNull(this.header().config?.typeNumber)) {
|
|
2517
|
-
|
|
2518
|
-
|
|
2518
|
+
value = Tools.IsBooleanTrue(this.header()?.config?.typeNumber) ||
|
|
2519
|
+
Tools.IsFunction(this.header()?.config?.typeNumber) && this.header()?.config?.typeNumber({
|
|
2519
2520
|
indexRow: this.row().indexRow,
|
|
2520
2521
|
property: this.header()?.config?.property,
|
|
2521
2522
|
row: { ...this.row() },
|
|
2522
|
-
value:
|
|
2523
|
-
}) ? Numbers.GetNumericFormat(
|
|
2523
|
+
value: value
|
|
2524
|
+
}) ? Numbers.GetNumericFormat(value) : value;
|
|
2524
2525
|
}
|
|
2525
2526
|
//Date - Time
|
|
2526
2527
|
else if (Tools.IsNotNull(this.header().config?.typeDate) || Tools.IsNotNull(this.header().config?.typeDateTime)) {
|
|
2527
|
-
|
|
2528
|
-
|
|
2529
|
-
(
|
|
2530
|
-
typeof this.header()?.config?.toLocalZone === 'function' && this.header()?.config?.toLocalZone({
|
|
2528
|
+
value = Tools.IsNull(this.header()?.config?.toLocalZone) ||
|
|
2529
|
+
Tools.IsBooleanTrue(this.header()?.config?.toLocalZone) ||
|
|
2530
|
+
Tools.IsFunction(this.header()?.config?.toLocalZone) && this.header()?.config?.toLocalZone({
|
|
2531
2531
|
indexRow: this.row().indexRow,
|
|
2532
2532
|
property: this.header()?.config?.property,
|
|
2533
2533
|
row: { ...this.row() },
|
|
2534
|
-
value:
|
|
2535
|
-
}) ? Dates.ToLocalZone(
|
|
2534
|
+
value: value
|
|
2535
|
+
}) ? Dates.ToLocalZone(value) : value;
|
|
2536
2536
|
if (Tools.IsNotNull(this.header().config?.typeDateTime)) {
|
|
2537
|
-
|
|
2538
|
-
|
|
2537
|
+
value = Tools.IsBooleanTrue(this.header()?.config?.typeDateTime) ||
|
|
2538
|
+
Tools.IsFunction(this.header()?.config?.typeDateTime) && this.header()?.config?.typeDateTime({
|
|
2539
2539
|
indexRow: this.row().indexRow,
|
|
2540
2540
|
property: this.header()?.config?.property,
|
|
2541
2541
|
row: { ...this.row() },
|
|
2542
|
-
value:
|
|
2543
|
-
}) ? Dates.ToFormatDateTime(
|
|
2542
|
+
value: value
|
|
2543
|
+
}) ? Dates.ToFormatDateTime(value) : value;
|
|
2544
2544
|
}
|
|
2545
|
-
if (Tools.IsNotNull(this.header().config?.typeDate)) {
|
|
2546
|
-
|
|
2547
|
-
|
|
2545
|
+
else if (Tools.IsNotNull(this.header().config?.typeDate)) {
|
|
2546
|
+
value = Tools.IsBooleanTrue(this.header()?.config?.typeDate) ||
|
|
2547
|
+
Tools.IsFunction(this.header()?.config?.typeDate) && this.header()?.config?.typeDate({
|
|
2548
2548
|
indexRow: this.row().indexRow,
|
|
2549
2549
|
property: this.header()?.config?.property,
|
|
2550
2550
|
row: { ...this.row() },
|
|
2551
|
-
value:
|
|
2552
|
-
}) ? Dates.ToFormatDate(
|
|
2551
|
+
value: value
|
|
2552
|
+
}) ? Dates.ToFormatDate(value) : value;
|
|
2553
2553
|
}
|
|
2554
|
-
return response;
|
|
2555
2554
|
}
|
|
2556
|
-
return
|
|
2555
|
+
return Tools.IsOnlyWhiteSpace(value) ? '' : `${value}`;
|
|
2557
2556
|
});
|
|
2558
2557
|
/** */
|
|
2559
2558
|
this._GetTextAlignX = computed(() => {
|
|
@@ -2606,7 +2605,7 @@ class CoerGridCell {
|
|
|
2606
2605
|
});
|
|
2607
2606
|
/** */
|
|
2608
2607
|
this._switchAttributes = () => {
|
|
2609
|
-
return
|
|
2608
|
+
return Tools.IsFunction(this.header()?.config?.coerSwitch)
|
|
2610
2609
|
? this.header()?.config?.coerSwitch({
|
|
2611
2610
|
indexRow: this.row().indexRow,
|
|
2612
2611
|
property: this.header()?.property,
|
|
@@ -2616,7 +2615,7 @@ class CoerGridCell {
|
|
|
2616
2615
|
};
|
|
2617
2616
|
/** */
|
|
2618
2617
|
this._textboxAttributes = () => {
|
|
2619
|
-
return
|
|
2618
|
+
return Tools.IsFunction(this.header()?.config?.coerTextbox)
|
|
2620
2619
|
? this.header()?.config?.coerTextbox({
|
|
2621
2620
|
indexRow: this.row().indexRow,
|
|
2622
2621
|
property: this.header()?.property,
|
|
@@ -2626,7 +2625,7 @@ class CoerGridCell {
|
|
|
2626
2625
|
};
|
|
2627
2626
|
/** */
|
|
2628
2627
|
this._numberboxAttributes = () => {
|
|
2629
|
-
return
|
|
2628
|
+
return Tools.IsFunction(this.header()?.config?.coerNumberbox)
|
|
2630
2629
|
? this.header()?.config?.coerNumberbox({
|
|
2631
2630
|
indexRow: this.row().indexRow,
|
|
2632
2631
|
property: this.header()?.property,
|
|
@@ -2636,7 +2635,7 @@ class CoerGridCell {
|
|
|
2636
2635
|
};
|
|
2637
2636
|
/** */
|
|
2638
2637
|
this._selectboxAttributes = () => {
|
|
2639
|
-
return
|
|
2638
|
+
return Tools.IsFunction(this.header()?.config?.coerSelectbox)
|
|
2640
2639
|
? this.header()?.config?.coerSelectbox({
|
|
2641
2640
|
indexRow: this.row().indexRow,
|
|
2642
2641
|
property: this.header()?.property,
|
|
@@ -2646,7 +2645,7 @@ class CoerGridCell {
|
|
|
2646
2645
|
};
|
|
2647
2646
|
/** */
|
|
2648
2647
|
this._dateboxAttributes = () => {
|
|
2649
|
-
return
|
|
2648
|
+
return Tools.IsFunction(this.header()?.config?.coerDatebox)
|
|
2650
2649
|
? this.header()?.config?.coerDatebox({
|
|
2651
2650
|
indexRow: this.row().indexRow,
|
|
2652
2651
|
property: this.header()?.property,
|
|
@@ -2657,20 +2656,20 @@ class CoerGridCell {
|
|
|
2657
2656
|
}
|
|
2658
2657
|
/** */
|
|
2659
2658
|
get input() {
|
|
2660
|
-
if (this.enableInputs()) {
|
|
2659
|
+
if (this.enableInputs() && Tools.IsNull(this.header().config?.template)) {
|
|
2661
2660
|
if (this._switchAttributes()?.showInput) {
|
|
2662
2661
|
return 'coer-switch';
|
|
2663
2662
|
}
|
|
2664
|
-
if (this._textboxAttributes()?.showInput) {
|
|
2663
|
+
else if (this._textboxAttributes()?.showInput) {
|
|
2665
2664
|
return 'coer-textbox';
|
|
2666
2665
|
}
|
|
2667
|
-
if (this._numberboxAttributes()?.showInput) {
|
|
2666
|
+
else if (this._numberboxAttributes()?.showInput) {
|
|
2668
2667
|
return 'coer-numberbox';
|
|
2669
2668
|
}
|
|
2670
|
-
if (this._selectboxAttributes()?.showInput) {
|
|
2669
|
+
else if (this._selectboxAttributes()?.showInput) {
|
|
2671
2670
|
return 'coer-selectbox';
|
|
2672
2671
|
}
|
|
2673
|
-
if (this._dateboxAttributes()?.showInput) {
|
|
2672
|
+
else if (this._dateboxAttributes()?.showInput) {
|
|
2674
2673
|
return 'coer-datebox';
|
|
2675
2674
|
}
|
|
2676
2675
|
}
|
|
@@ -2678,20 +2677,20 @@ class CoerGridCell {
|
|
|
2678
2677
|
}
|
|
2679
2678
|
/** */
|
|
2680
2679
|
get isInvalid() {
|
|
2681
|
-
if (this.enableInputs()) {
|
|
2680
|
+
if (this.enableInputs() && Tools.IsNull(this.header().config?.template)) {
|
|
2682
2681
|
if (this._switchAttributes()?.showInput) {
|
|
2683
2682
|
return this._switchAttributes()?.isInvalid || false;
|
|
2684
2683
|
}
|
|
2685
|
-
if (this._textboxAttributes()?.showInput) {
|
|
2684
|
+
else if (this._textboxAttributes()?.showInput) {
|
|
2686
2685
|
return this._textboxAttributes()?.isInvalid || false;
|
|
2687
2686
|
}
|
|
2688
|
-
if (this._numberboxAttributes()?.showInput) {
|
|
2687
|
+
else if (this._numberboxAttributes()?.showInput) {
|
|
2689
2688
|
return this._numberboxAttributes()?.isInvalid || false;
|
|
2690
2689
|
}
|
|
2691
|
-
if (this._selectboxAttributes()?.showInput) {
|
|
2690
|
+
else if (this._selectboxAttributes()?.showInput) {
|
|
2692
2691
|
return this._selectboxAttributes()?.isInvalid || false;
|
|
2693
2692
|
}
|
|
2694
|
-
if (this._dateboxAttributes()?.showInput) {
|
|
2693
|
+
else if (this._dateboxAttributes()?.showInput) {
|
|
2695
2694
|
return this._dateboxAttributes()?.isInvalid || false;
|
|
2696
2695
|
}
|
|
2697
2696
|
}
|