coer-elements 2.0.81 → 2.0.83

package/components/lib/coer-grid/coer-grid.extension.d.ts

@@ -1,11 +1,11 @@
 import { IGridButtonByRow, IGridColumn, IGridImport, IGridHeaderButton, IGridHeaderExportButton, IGridKeyupEnter, IGridSearch, IGridInput, IGridCheckbox, IGridInputCheckbox, IGridHeaderImportButton, IGridDataSource, IGridHeader, IGridFooter } from "coer-elements/interfaces";
-import { AfterViewInit } from "@angular/core";
+import { AfterContentChecked, AfterViewInit } from "@angular/core";
 import { ControlValue } from 'coer-elements/tools';
 import { CoerGridHeader } from "./coer-grid-header/coer-grid-header.component";
 import { CoerGridBody } from "./coer-grid-body/coer-grid-body.component";
 import { CoerGridfooter } from "./coer-grid-footer/coer-grid-footer.component";
 import * as i0 from "@angular/core";
-export declare class CoerGridExtension<T> extends ControlValue implements AfterViewInit {
+export declare class CoerGridExtension<T> extends ControlValue implements AfterViewInit, AfterContentChecked {
     protected readonly _coerGridHeader: import("@angular/core").Signal<CoerGridHeader<T> | undefined>;
     protected readonly _coerGridBody: import("@angular/core").Signal<CoerGridBody<T> | undefined>;
     protected readonly _coerGridFooter: import("@angular/core").Signal<CoerGridfooter<T> | undefined>;
@@ -16,6 +16,7 @@ export declare class CoerGridExtension<T> extends ControlValue implements AfterV
     protected readonly _id: string;
     protected readonly _searchInner: import("@angular/core").WritableSignal<string | number>;
     protected readonly _isLoadingInner: import("@angular/core").WritableSignal<boolean>;
+    protected _height: string;
     columns: import("@angular/core").InputSignal<IGridColumn<T>[]>;
     cleanColumnName: import("@angular/core").InputSignal<boolean>;
     search: IGridSearch;
@@ -62,8 +63,10 @@ export declare class CoerGridExtension<T> extends ControlValue implements AfterV
     protected onNumberboxChange: import("@angular/core").OutputEmitterRef<IGridInput<T>>;
     protected onSelectboxChange: import("@angular/core").OutputEmitterRef<IGridInput<T>>;
     ngAfterViewInit(): void;
+    ngAfterContentChecked(): void;
     SetValue(value: T[]): void;
-    writeValue(value: T[]): void;
+    /** */
+    protected _SetHeight(): void;
     protected _SetValueInput(row: IGridInput<T>, input: 'coer-switch' | 'coer-textbox' | 'coer-numberbox' | 'coer-selectbox'): void;
     protected _columns: import("@angular/core").Signal<IGridHeader<T>[]>;
     /** */
@@ -81,7 +84,6 @@ export declare class CoerGridExtension<T> extends ControlValue implements AfterV
     protected _Import(value: IGridImport<T>): void;
     /** */
     protected _buildRow<T>(data: any): T;
-    protected get _height(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<CoerGridExtension<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CoerGridExtension<any>, "coer-grid-extension", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "cleanColumnName": { "alias": "cleanColumnName"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; }; "exportButton": { "alias": "exportButton"; "required": false; }; "importButton": { "alias": "importButton"; "required": false; }; "addButton": { "alias": "addButton"; "required": false; }; "saveButton": { "alias": "saveButton"; "required": false; }; "checkbox": { "alias": "checkbox"; "required": false; }; "buttonByRow": { "alias": "buttonByRow"; "required": false; }; "footer": { "alias": "footer"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "isReadonly": { "alias": "isReadonly"; "required": false; "isSignal": true; }; "isInvisible": { "alias": "isInvisible"; "required": false; "isSignal": true; }; "rowsByPage": { "alias": "rowsByPage"; "required": false; "isSignal": true; }; "tooltipByRow": { "alias": "tooltipByRow"; "required": false; "isSignal": true; }; "enableSort": { "alias": "enableSort"; "required": false; "isSignal": true; }; "enableFocusNext": { "alias": "enableFocusNext"; "required": false; "isSignal": true; }; "enableFocusRow": { "alias": "enableFocusRow"; "required": false; "isSignal": true; }; "enableHoverRow": { "alias": "enableHoverRow"; "required": false; "isSignal": true; }; "isStriped": { "alias": "isStriped"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "MinWidth": { "alias": "MinWidth"; "required": false; "isSignal": true; }; "MaxWidth": { "alias": "MaxWidth"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "margin": { "alias": "margin"; "required": false; "isSignal": true; }; }, { "onClickExport": "onClickExport"; "onClickImport": "onClickImport"; "onClickAdd": "onClickAdd"; "onClickSave": "onClickSave"; "onClickRow": "onClickRow"; "onDoubleClickRow": "onDoubleClickRow"; "onCheckboxChange": "onCheckboxChange"; "onClickDeleteRow": "onClickDeleteRow"; "onClickEditRow": "onClickEditRow"; "onClickModalRow": "onClickModalRow"; "onClickGoRow": "onClickGoRow"; "onKeyupEnter": "onKeyupEnter"; "onKeyupEnterLast": "onKeyupEnterLast"; "onSwitchChange": "onSwitchChange"; "onTextboxChange": "onTextboxChange"; "onNumberboxChange": "onNumberboxChange"; "onSelectboxChange": "onSelectboxChange"; }, never, never, true, never>;
 }

package/extensions/lib/array.extension.d.ts

@@ -1,9 +1,9 @@
 declare global {
     interface Array<T> {
         /** */
-        Distinct(): T[];
+        distinct(): T[];
         /** */
-        Except(exceptions: T[]): T[];
+        except(exceptions: T[]): T[];
     }
 }
 export {};

package/extensions/lib/date.extension.d.ts

@@ -0,0 +1,61 @@
+declare global {
+    interface Date {
+        /** */
+        getOffset(): number;
+        /** */
+        getLastDay(): number;
+        /** */
+        isValidDate(): boolean;
+        /** */
+        getCurrentDate(): Date;
+        /** Convert UTC Date to Local Zone */
+        toLocalZone(): Date;
+        /** Convert Local Zone Date to UTC */
+        toUTC(): Date;
+        /** YYYY-MM-DD HH:mm:ss */
+        toFormatDB(): string;
+        /** */
+        toFormatDate(format?: 'MDY' | 'DMY' | 'YMD'): string;
+        /** */
+        toFormatDateTime(ampm?: boolean, format?: 'MDY' | 'DMY' | 'YMD'): string;
+        /** */
+        addMilliseconds(milliseconds: number): Date;
+        /** */
+        addSeconds(seconds: number): Date;
+        /** */
+        addMinutes(minutes: number): Date;
+        /** */
+        addHours(hours: number): Date;
+        /** */
+        addDays(days: number): Date;
+        /** */
+        addWeeks(weeks: number): Date;
+        /** */
+        addMonths(months: number): Date;
+        /** */
+        addYears(years: number): Date;
+        /** */
+        setMillisecond(millisecond?: number): Date;
+        /** */
+        setSecond(second?: number): Date;
+        /** */
+        setMinute(minute?: number): Date;
+        /** */
+        setHour(hour?: number): Date;
+        /** */
+        setFirstHour(): Date;
+        /** */
+        setLastHour(): Date;
+        /** */
+        setDay(day?: number): Date;
+        /** */
+        setFirstDay(): Date;
+        /** */
+        setLastDay(): Date;
+        /** */
+        getDiffNow(unit?: 'milliseconds' | 'seconds' | 'minutes' | 'hours' | 'days'): number;
+        /** */
+        getDiff(date: string | Date, unit?: 'milliseconds' | 'seconds' | 'minutes' | 'hours' | 'days'): number;
+    }
+}
+export {};

package/extensions/lib/string.extension.d.ts

@@ -8,6 +8,8 @@ declare global {
         cleanUpBlanks(): string;
         /** Apply title formatting */
         toTitle(): string;
+        /** Remove whitespaces */
+        removeWhiteSpaces(): string;
         /** Removes the last character */
         removeLastChar(): string;
         /** Removes accents */

package/extensions/public-api.d.ts

@@ -1,3 +1,4 @@
 import './lib/array.extension';
+import './lib/date.extension';
 import './lib/object.extension';
 import './lib/string.extension';

package/fesm2022/coer-elements-components.mjs

@@ -303,11 +303,11 @@ class CoerButton {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerButton, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }] });
 
 class CoerCard {
@@ -415,7 +415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
 
 class DATE_ADAPTER extends NativeDateAdapter {
     format(date) {
-        return Dates.GetFormatDate(date);
+        return Dates.ToFormatDate(date);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: DATE_ADAPTER, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: DATE_ADAPTER }); }
@@ -585,7 +585,7 @@ class CoerDateBox extends ControlValue {
     //ControlValueAccessor
     SetValue(value) {
         this._value = Tools.IsNotOnlyWhiteSpace(value) && Dates.IsValidDate(value)
-            ? Dates.GetFormatDB(value) : null;
+            ? Dates.ToFormatDB(value) : null;
         if (typeof this._UpdateValue === 'function') {
             this._UpdateValue(this._value);
             this.onChangeValue.emit(this._value);
@@ -1091,6 +1091,7 @@ class CoerGridExtension extends ControlValue {
         this._id = Tools.GetGuid('coer-grid');
         this._searchInner = signal('');
         this._isLoadingInner = signal(true);
+        this._height = '0px';
         // protected _expandedGroups: string[] = [];   
         //Inputs
         this.columns = input([]);
@@ -1237,6 +1238,10 @@ class CoerGridExtension extends ControlValue {
             this._isLoadingInner.set(false);
         });
     }
+    //AfterViewChecked
+    ngAfterContentChecked() {
+        this._SetHeight();
+    }
     //ControlValueAccessor
     SetValue(value) {
         if (Tools.IsNull(value))
@@ -1247,9 +1252,17 @@ class CoerGridExtension extends ControlValue {
         }
         this._valueSignal.set(this._value);
     }
-    //ControlValueAccessor
-    writeValue(value) {
-        this.SetValue(value);
+    /** */
+    _SetHeight() {
+        this._height = (this.height() == 'full')
+            ? (Screen.WINDOW_HEIGHT - (45 //Toolbar
+                + Screen.BREAKPOINT == 'mv' ? 5 : 15
+                + (this._coerGridHeader()?.heigth || 0)
+                + (this._coerGridFooter()?.heigth || 0)
+                + HTMLElements.GetOffsetTop(this._grid)
+                + Number(HTMLElements.GetCssValue(this._gridGrandFather, 'padding-top').split('px')[0])
+                + Number(HTMLElements.GetCssValue(this._gridGrandFather, 'padding-bottom').split('px')[0]))) + 'px'
+            : this.height();
     }
     //ControlValueAccessor
     _SetValueInput(row, input) {
@@ -1297,17 +1310,6 @@ class CoerGridExtension extends ControlValue {
         }
         return { ...row };
     }
-    //getter
-    get _height() {
-        return (this.height() == 'full')
-            ? (Screen.WINDOW_HEIGHT - (45 //Toolbar
-                + (this._coerGridHeader()?.heigth || 0)
-                + (this._coerGridFooter()?.heigth || 0)
-                + HTMLElements.GetOffsetTop(this._grid)
-                + Number(HTMLElements.GetCssValue(this._gridGrandFather, 'padding-top').split('px')[0])
-                + Number(HTMLElements.GetCssValue(this._gridGrandFather, 'padding-bottom').split('px')[0]))) + 'px'
-            : this.height();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridExtension, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.1", type: CoerGridExtension, isStandalone: true, selector: "coer-grid-extension", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, cleanColumnName: { classPropertyName: "cleanColumnName", publicName: "cleanColumnName", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: false, isRequired: false, transformFunction: null }, exportButton: { classPropertyName: "exportButton", publicName: "exportButton", isSignal: false, isRequired: false, transformFunction: null }, importButton: { classPropertyName: "importButton", publicName: "importButton", isSignal: false, isRequired: false, transformFunction: null }, addButton: { classPropertyName: "addButton", publicName: "addButton", isSignal: false, isRequired: false, transformFunction: null }, saveButton: { classPropertyName: "saveButton", publicName: "saveButton", isSignal: false, isRequired: false, transformFunction: null }, checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: false, isRequired: false, transformFunction: null }, buttonByRow: { classPropertyName: "buttonByRow", publicName: "buttonByRow", isSignal: false, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: false, 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 }, rowsByPage: { classPropertyName: "rowsByPage", publicName: "rowsByPage", isSignal: true, isRequired: false, transformFunction: null }, tooltipByRow: { classPropertyName: "tooltipByRow", publicName: "tooltipByRow", isSignal: true, isRequired: false, transformFunction: null }, enableSort: { classPropertyName: "enableSort", publicName: "enableSort", isSignal: true, isRequired: false, transformFunction: null }, enableFocusNext: { classPropertyName: "enableFocusNext", publicName: "enableFocusNext", isSignal: true, isRequired: false, transformFunction: null }, enableFocusRow: { classPropertyName: "enableFocusRow", publicName: "enableFocusRow", isSignal: true, isRequired: false, transformFunction: null }, enableHoverRow: { classPropertyName: "enableHoverRow", publicName: "enableHoverRow", isSignal: true, isRequired: false, transformFunction: null }, isStriped: { classPropertyName: "isStriped", publicName: "isStriped", 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 }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickExport: "onClickExport", onClickImport: "onClickImport", onClickAdd: "onClickAdd", onClickSave: "onClickSave", onClickRow: "onClickRow", onDoubleClickRow: "onDoubleClickRow", onCheckboxChange: "onCheckboxChange", onClickDeleteRow: "onClickDeleteRow", onClickEditRow: "onClickEditRow", onClickModalRow: "onClickModalRow", onClickGoRow: "onClickGoRow", onKeyupEnter: "onKeyupEnter", onKeyupEnterLast: "onKeyupEnterLast", onSwitchChange: "onSwitchChange", onTextboxChange: "onTextboxChange", onNumberboxChange: "onNumberboxChange", onSelectboxChange: "onSelectboxChange" }, viewQueries: [{ propertyName: "_coerGridHeader", first: true, predicate: ["coerGridHeader"], descendants: true, isSignal: true }, { propertyName: "_coerGridBody", first: true, predicate: ["coerGridBody"], descendants: true, isSignal: true }, { propertyName: "_coerGridFooter", first: true, predicate: ["coerGridFooter"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
@@ -1660,7 +1662,7 @@ class CoerGridHeader {
         };
     }
     ngAfterViewInit() {
-        Tools.Sleep(1000).then(_ => {
+        Tools.Sleep().then(_ => {
             this._header = HTMLElements.GetElement(`#${this.GetIdCalculated()(-1, -1, 'header')}`);
             this._headerSlots = HTMLElements.GetElement(`#${this.GetIdCalculated()(-1, -1, 'header-slots')}`);
             this._headerButtons = HTMLElements.GetElement(`#${this.GetIdCalculated()(-1, -1, 'header-buttons')}`);
@@ -2428,7 +2430,7 @@ class CoerSwitch extends ControlValue {
         });
         //computed
         this._isEnable = computed(() => {
-            return !this.isLoading() && !this.isDisabled() && !this.isInvisible();
+            return !this.isLoading() && !this.isReadonly() && !this.isDisabled() && !this.isInvisible();
         });
         this._effectValue = effect(() => {
             Tools.Sleep().then(() => {
@@ -2486,72 +2488,71 @@ class CoerGridCell {
         this.onKeyupEnter = output();
         /** */
         this._GetCellValue = computed(() => {
+            let value = this.row()[Strings.FirstCharToLower(this.header().property)];
             //Template
             if (Tools.IsNotNull(this.header().config?.template)) {
                 if (typeof this.header()?.config?.template === 'string') {
-                    return this.header()?.config?.template;
+                    value = this.header()?.config?.template;
                 }
-                else if (typeof this.header()?.config?.template === 'function') {
-                    return this.header()?.config?.template({
+                else if (Tools.IsFunction(this.header()?.config?.template)) {
+                    value = this.header()?.config?.template({
                         indexRow: this.row().indexRow,
                         property: this.header()?.config?.property,
                         row: { ...this.row() },
-                        value: this.row()[Strings.FirstCharToLower(this.header().property)]
+                        value: value
                     });
                 }
             }
             //Currency
             else if (Tools.IsNotNull(this.header().config?.typeCurrency)) {
-                return (typeof this.header()?.config?.typeCurrency === 'boolean' && this.header()?.config?.typeCurrency === true) ||
-                    typeof this.header()?.config?.typeCurrency === 'function' && this.header()?.config?.typeCurrency({
+                value = Tools.IsBooleanTrue(this.header()?.config?.typeCurrency) ||
+                    Tools.IsFunction(this.header()?.config?.typeCurrency) && this.header()?.config?.typeCurrency({
                         indexRow: this.row().indexRow,
                         property: this.header()?.config?.property,
                         row: { ...this.row() },
-                        value: this.row()[Strings.FirstCharToLower(this.header().property)]
-                    }) ? Numbers.GetCurrencyFormat(this.row()[Strings.FirstCharToLower(this.header().property)]) : this.row()[Strings.FirstCharToLower(this.header().property)];
+                        value: value
+                    }) ? Numbers.GetCurrencyFormat(value) : value;
             }
             //Number
             else if (Tools.IsNotNull(this.header().config?.typeNumber)) {
-                return (typeof this.header()?.config?.typeNumber === 'boolean' && this.header()?.config?.typeNumber === true) ||
-                    typeof this.header()?.config?.typeNumber === 'function' && this.header()?.config?.typeNumber({
+                value = Tools.IsBooleanTrue(this.header()?.config?.typeNumber) ||
+                    Tools.IsFunction(this.header()?.config?.typeNumber) && this.header()?.config?.typeNumber({
                         indexRow: this.row().indexRow,
                         property: this.header()?.config?.property,
                         row: { ...this.row() },
-                        value: this.row()[Strings.FirstCharToLower(this.header().property)]
-                    }) ? Numbers.GetNumericFormat(this.row()[Strings.FirstCharToLower(this.header().property)]) : this.row()[Strings.FirstCharToLower(this.header().property)];
+                        value: value
+                    }) ? Numbers.GetNumericFormat(value) : value;
             }
             //Date - Time
             else if (Tools.IsNotNull(this.header().config?.typeDate) || Tools.IsNotNull(this.header().config?.typeDateTime)) {
-                let response = this.row()[Strings.FirstCharToLower(this.header().property)];
-                response = Tools.IsNull(this.header()?.config?.toLocalZone) ||
-                    (typeof this.header()?.config?.toLocalZone === 'boolean' && this.header()?.config?.toLocalZone === true) ||
-                    typeof this.header()?.config?.toLocalZone === 'function' && this.header()?.config?.toLocalZone({
+                value = Tools.IsNull(this.header()?.config?.toLocalZone) ||
+                    Tools.IsBooleanTrue(this.header()?.config?.toLocalZone) ||
+                    Tools.IsFunction(this.header()?.config?.toLocalZone) && this.header()?.config?.toLocalZone({
                         indexRow: this.row().indexRow,
                         property: this.header()?.config?.property,
                         row: { ...this.row() },
-                        value: this.row()[Strings.FirstCharToLower(this.header().property)]
-                    }) ? Dates.ToLocalZone(response) : response;
+                        value: value
+                    }) ? Dates.ToLocalZone(value) : value;
                 if (Tools.IsNotNull(this.header().config?.typeDateTime)) {
-                    response = (typeof this.header()?.config?.typeDateTime === 'boolean' && this.header()?.config?.typeDateTime === true) ||
-                        typeof this.header()?.config?.typeDateTime === 'function' && this.header()?.config?.typeDateTime({
+                    value = Tools.IsBooleanTrue(this.header()?.config?.typeDateTime) ||
+                        Tools.IsFunction(this.header()?.config?.typeDateTime) && this.header()?.config?.typeDateTime({
                             indexRow: this.row().indexRow,
                             property: this.header()?.config?.property,
                             row: { ...this.row() },
-                            value: this.row()[Strings.FirstCharToLower(this.header().property)]
-                        }) ? Dates.GetFormatDateTime(response) : response;
+                            value: value
+                        }) ? Dates.ToFormatDateTime(value) : value;
                 }
-                if (Tools.IsNotNull(this.header().config?.typeDate)) {
-                    response = (typeof this.header()?.config?.typeDate === 'boolean' && this.header()?.config?.typeDate === true) ||
-                        typeof this.header()?.config?.typeDate === 'function' && this.header()?.config?.typeDate({
+                else if (Tools.IsNotNull(this.header().config?.typeDate)) {
+                    value = Tools.IsBooleanTrue(this.header()?.config?.typeDate) ||
+                        Tools.IsFunction(this.header()?.config?.typeDate) && this.header()?.config?.typeDate({
                             indexRow: this.row().indexRow,
                             property: this.header()?.config?.property,
                             row: { ...this.row() },
-                            value: this.row()[Strings.FirstCharToLower(this.header().property)]
-                        }) ? Dates.GetFormatDate(response) : response;
+                            value: value
+                        }) ? Dates.ToFormatDate(value) : value;
                 }
-                return response;
             }
-            return this.row()[Strings.FirstCharToLower(this.header().property)];
+            return Tools.IsOnlyWhiteSpace(value) ? '' : `${value}`;
         });
         /** */
         this._GetTextAlignX = computed(() => {
@@ -3207,7 +3208,7 @@ class CoerGridfooter {
         this.isLoadingInner = input(true);
     }
     ngAfterViewInit() {
-        Tools.Sleep(1000).then(_ => {
+        Tools.Sleep().then(_ => {
             this._footer = HTMLElements.GetElement(`#${this.GetIdCalculated()(-1, -1, 'footer')}`);
         });
     }
@@ -3216,11 +3217,11 @@ class CoerGridfooter {
         return Number(HTMLElements.GetElementHeight(this._footer).split('px')[0]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridfooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGridfooter, isStandalone: false, selector: "coer-grid-footer", inputs: { GetIdCalculated: { classPropertyName: "GetIdCalculated", publicName: "GetIdCalculated", isSignal: true, isRequired: true, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, dataSourceFiltered: { classPropertyName: "dataSourceFiltered", publicName: "dataSourceFiltered", isSignal: true, isRequired: false, transformFunction: null }, dataSourceSelected: { classPropertyName: "dataSourceSelected", publicName: "dataSourceSelected", isSignal: true, isRequired: false, transformFunction: null }, isLoadingInner: { classPropertyName: "isLoadingInner", publicName: "isLoadingInner", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(footer().show) {\r\n    <footer [id]=\"GetIdCalculated()(-1, -1, 'footer')\" class=\"flex-middle-between padding-top-5px\">\r\n        <span>\r\n            @if(isLoadingInner()) {\r\n                <span class=\"animation-fade\"> Loading </span>\r\n            }\r\n\r\n            @else if(dataSourceSelected().length > 0) {\r\n                <span class=\"margin-left-5px text-gray\">\r\n                    <i class=\"bi bi-check2-square\"></i>\r\n                    {{ dataSourceSelected().length | numericFormat }}\r\n                </span>\r\n            }\r\n        </span>\r\n\r\n        @if(dataSource().length > 0) {\r\n            <span class=\"margin-right-5px text-gray\"> {{ dataSource().length | numericFormat }} Rows </span>\r\n        } \r\n    </footer>\r\n}", dependencies: [{ kind: "pipe", type: i5.NumericFormatPipe, name: "numericFormat" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGridfooter, isStandalone: false, selector: "coer-grid-footer", inputs: { GetIdCalculated: { classPropertyName: "GetIdCalculated", publicName: "GetIdCalculated", isSignal: true, isRequired: true, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, dataSourceFiltered: { classPropertyName: "dataSourceFiltered", publicName: "dataSourceFiltered", isSignal: true, isRequired: false, transformFunction: null }, dataSourceSelected: { classPropertyName: "dataSourceSelected", publicName: "dataSourceSelected", isSignal: true, isRequired: false, transformFunction: null }, isLoadingInner: { classPropertyName: "isLoadingInner", publicName: "isLoadingInner", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(footer().show) {\r\n    <footer [id]=\"GetIdCalculated()(-1, -1, 'footer')\" class=\"flex-middle-between padding-top-5px\">\r\n        <span>\r\n            @if(isLoadingInner()) {\r\n                <span class=\"animation-fade\"> Loading </span>\r\n            }\r\n\r\n            @else if(dataSourceSelected().length > 0) {\r\n                <span class=\"margin-left-5px text-gray\">\r\n                    <i class=\"bi bi-check2-square\"></i>\r\n                    {{ dataSourceSelected().length | numericFormat }}\r\n                </span>\r\n            }\r\n        </span>\r\n\r\n        @if(dataSource().length > 0) {\r\n            <span class=\"margin-right-5px text-gray\"> {{ dataSource().length | numericFormat }} Rows </span>\r\n        } \r\n    </footer>\r\n} ", dependencies: [{ kind: "pipe", type: i5.NumericFormatPipe, name: "numericFormat" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridfooter, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-grid-footer', standalone: false, template: "@if(footer().show) {\r\n    <footer [id]=\"GetIdCalculated()(-1, -1, 'footer')\" class=\"flex-middle-between padding-top-5px\">\r\n        <span>\r\n            @if(isLoadingInner()) {\r\n                <span class=\"animation-fade\"> Loading </span>\r\n            }\r\n\r\n            @else if(dataSourceSelected().length > 0) {\r\n                <span class=\"margin-left-5px text-gray\">\r\n                    <i class=\"bi bi-check2-square\"></i>\r\n                    {{ dataSourceSelected().length | numericFormat }}\r\n                </span>\r\n            }\r\n        </span>\r\n\r\n        @if(dataSource().length > 0) {\r\n            <span class=\"margin-right-5px text-gray\"> {{ dataSource().length | numericFormat }} Rows </span>\r\n        } \r\n    </footer>\r\n}" }]
+            args: [{ selector: 'coer-grid-footer', standalone: false, template: "@if(footer().show) {\r\n    <footer [id]=\"GetIdCalculated()(-1, -1, 'footer')\" class=\"flex-middle-between padding-top-5px\">\r\n        <span>\r\n            @if(isLoadingInner()) {\r\n                <span class=\"animation-fade\"> Loading </span>\r\n            }\r\n\r\n            @else if(dataSourceSelected().length > 0) {\r\n                <span class=\"margin-left-5px text-gray\">\r\n                    <i class=\"bi bi-check2-square\"></i>\r\n                    {{ dataSourceSelected().length | numericFormat }}\r\n                </span>\r\n            }\r\n        </span>\r\n\r\n        @if(dataSource().length > 0) {\r\n            <span class=\"margin-right-5px text-gray\"> {{ dataSource().length | numericFormat }} Rows </span>\r\n        } \r\n    </footer>\r\n} " }]
         }] });
 
 class CoerGrid extends CoerGridExtension {