coer-elements 2.0.65 → 2.0.66

package/components/lib/coer-grid/coer-grid-cell/coer-grid-cell.component.d.ts

@@ -32,6 +32,8 @@ export declare class CoerGridCell<T> {
     /** */
     protected _GetTextBreak: import("@angular/core").Signal<"break-word" | "keep-all">;
     /** */
+    protected _GetSpaceBreak: import("@angular/core").Signal<"nowrap" | "normal">;
+    /** */
     protected _GetHeight: import("@angular/core").Signal<string>;
     /** */
     protected _GetTextColor: import("@angular/core").Signal<string>;

package/components/lib/coer-modal/coer-modal.component.d.ts

@@ -13,7 +13,7 @@ export declare class CoerModal implements AfterViewInit {
     title: import("@angular/core").InputSignal<string>;
     icon: import("@angular/core").InputSignal<string>;
     showCloseButton: import("@angular/core").InputSignal<boolean>;
-    width: import("@angular/core").InputSignal<"auto" | "full" | "small">;
+    width: import("@angular/core").InputSignal<"auto" | "small" | "full">;
     height: import("@angular/core").InputSignal<string>;
     maxHeight: import("@angular/core").InputSignal<string>;
     verticalPosition: import("@angular/core").InputSignal<"top" | "middle" | "bottom">;

package/fesm2022/coer-elements-components.mjs

@@ -2560,6 +2560,11 @@ class CoerGridCell {
                 ? 'keep-all' : 'break-word';
         });
         /** */
+        this._GetSpaceBreak = computed(() => {
+            return Tools.IsNull(this.header().config?.textBreak) || this.header().config?.textBreak === false
+                ? 'nowrap' : 'normal';
+        });
+        /** */
         this._GetHeight = computed(() => {
             return Tools.IsNull(this.header().config?.height)
                 ? 'auto' : this.header().config?.height;
@@ -2695,11 +2700,11 @@ class CoerGridCell {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGridCell, isStandalone: false, selector: "coer-grid-cell", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, checkOnRow: { classPropertyName: "checkOnRow", publicName: "checkOnRow", isSignal: true, isRequired: true, transformFunction: null }, enableInputs: { classPropertyName: "enableInputs", publicName: "enableInputs", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onClickRow: "onClickRow", onDoubleClickRow: "onDoubleClickRow", onSwitchChange: "onSwitchChange", onTextboxChange: "onTextboxChange", onNumberboxChange: "onNumberboxChange", onSelectboxChange: "onSelectboxChange", onKeyupEnter: "onKeyupEnter" }, viewQueries: [{ propertyName: "coerSwitch", first: true, predicate: ["coerSwitch"], descendants: true, isSignal: true }, { propertyName: "coerTextbox", first: true, predicate: ["coerTextbox"], descendants: true, isSignal: true }, { propertyName: "coerNumberbox", first: true, predicate: ["coerNumberbox"], descendants: true, isSignal: true }, { propertyName: "coerSelectbox", first: true, predicate: ["coerSelectbox"], descendants: true, isSignal: true }, { propertyName: "coerDatebox", first: true, predicate: ["coerDatebox"], descendants: true, isSignal: true }], ngImport: i0, template: "@switch(input) {\r\n    @case ('coer-switch') {\r\n        <coer-switch\r\n            #coerSwitch\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\"\r\n            [isDisabled]=\"_switchAttributes()?.isDisabled || false\" \r\n            [tooltip]=\"_switchAttributes()?.tooltip || ''\"\r\n            [tooltipPosition]=\"_switchAttributes()?.tooltipPosition || 'left'\"\r\n            marginLeft=\"auto\"\r\n            marginRight=\"auto\"\r\n            (onChange)=\"onSwitchChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            })\"\r\n        ></coer-switch> \r\n    }\r\n\r\n    @case ('coer-textbox') {\r\n        <coer-textbox\r\n            #coerTextbox\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\"\r\n            [isDisabled]=\"_textboxAttributes()?.isDisabled || false\"\r\n            [isValid]=\"_textboxAttributes()?.isValid || false\"\r\n            [isInvalid]=\"_textboxAttributes()?.isInvalid || false\"\r\n            [placeholder]=\"_textboxAttributes()?.placeholder || ('type ' + header().columnName.toLowerCase() + '...')\"\r\n            [selectOnFocus]=\"_textboxAttributes()?.selectOnFocus || true\"\r\n            [textPosition]=\"_textboxAttributes()?.textPosition || 'left'\"\r\n            [minLength]=\"_textboxAttributes()?.minLength || 0\"\r\n            [maxLength]=\"_textboxAttributes()?.maxLength || 50\"\r\n            (onInput)=\"onTextboxChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            })\"\r\n            (onKeyupEnter)=\"onKeyupEnter.emit({ \r\n                id: id(),\r\n                input: input, \r\n                row: row(), \r\n                value: $event\r\n            })\"\r\n         ></coer-textbox> \r\n    }\r\n\r\n    @case ('coer-numberbox') {\r\n        <coer-numberbox\r\n            #coerNumberbox\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\"\r\n            [isDisabled]=\"_numberboxAttributes()?.isDisabled || false\"\r\n            [isValid]=\"_numberboxAttributes()?.isValid || false\"\r\n            [isInvalid]=\"_numberboxAttributes()?.isInvalid || false\"\r\n            [placeholder]=\"_numberboxAttributes()?.placeholder || '#'\"\r\n            [selectOnFocus]=\"_numberboxAttributes()?.selectOnFocus || true\"\r\n            [textPosition]=\"_numberboxAttributes()?.textPosition || 'right'\"\r\n            [min]=\"_numberboxAttributes()?.min || 0\"\r\n            [max]=\"_numberboxAttributes()?.max || 2147483647\"            \r\n            [decimals]=\"_numberboxAttributes()?.decimals || 0\"\r\n            (onInput)=\"onTextboxChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            })\"\r\n            (onKeyupEnter)=\"onKeyupEnter.emit({ \r\n                id: id(),\r\n                input: input, \r\n                row: row(), \r\n                value: $event\r\n            })\"\r\n        ></coer-numberbox>\r\n    }\r\n\r\n    @case ('coer-selectbox') {\r\n        <coer-selectbox\r\n            #coerSelectbox\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\" \r\n            [isDisabled]=\"_selectboxAttributes()?.isDisabled || false\"\r\n            [isValid]=\"_selectboxAttributes()?.isValid || false\"\r\n            [isInvalid]=\"_selectboxAttributes()?.isInvalid || false\"\r\n            [dataSource]=\"_selectboxAttributes()?.dataSource || []\"\r\n            [placeholder]=\"_selectboxAttributes()?.placeholder || '-- Select --'\"\r\n            [displayProperty]=\"_selectboxAttributes()?.displayProperty || 'name'\" \r\n            (onSelected)=\"onTextboxChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            }); onKeyupEnter.emit({ \r\n                id: id(),\r\n                input: input, \r\n                row: row(), \r\n                value: $event\r\n            })\"\r\n            (onUnselect)=\"onTextboxChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            })\" \r\n        ></coer-selectbox>\r\n    }\r\n\r\n\r\n    @case ('coer-datebox') {\r\n        <coer-datebox\r\n            #coerDatebox\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\"  \r\n        ></coer-datebox>\r\n    }\r\n\r\n    @default {\r\n        <div class=\"display-flex min-height-20px padding-5px\" \r\n            [ngStyle]=\"{ \r\n                'height'         : _GetHeight(),\r\n                'align-items'    : _GetTextAlignY(),\r\n                'justify-content': _GetTextAlignX(),\r\n                'color'          : _GetTextColor(),\r\n                'word-break'     : _GetTextBreak(),\r\n                'cursor'         : checkOnRow() ? 'pointer' : 'default' \r\n            }\"\r\n            (click)=\"onClickRow.emit(row())\"\r\n            (dblclick)=\"onDoubleClickRow.emit(row())\">  \r\n            <div [innerHTML]=\"_GetCellValue() | html\" class=\"display-flex\"></div>          \r\n        </div>\r\n    }\r\n}", dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CoerDateBox, selector: "coer-datebox", inputs: ["id", "value", "label", "placeholder", "textPosition", "isWritable", "isInvalid", "isValid", "externalButton", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onOpen", "onClose", "onChangeValue", "onClickExternalButton"] }, { kind: "component", type: CoerNumberBox, selector: "coer-numberbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "min", "max", "isInvalid", "isValid", "externalButton", "selectOnFocus", "decimals", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickExternalButton"] }, { kind: "component", type: CoerSelectbox, selector: "coer-selectbox", inputs: ["id", "value", "label", "placeholder", "isInvalid", "isValid", "externalButton", "dataSource", "displayProperty", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onSelected", "onUnselect", "onClickExternalButton"] }, { kind: "component", type: CoerSwitch, selector: "coer-switch", inputs: ["id", "value", "label", "labelPosition", "isLoading", "isDisabled", "isReadonly", "isInvisible", "tooltip", "tooltipPosition", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onChange"] }, { kind: "component", type: CoerTextBox, selector: "coer-textbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickSearch", "onClickExternalButton"] }, { kind: "pipe", type: i5.HtmlPipe, name: "html" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGridCell, isStandalone: false, selector: "coer-grid-cell", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, checkOnRow: { classPropertyName: "checkOnRow", publicName: "checkOnRow", isSignal: true, isRequired: true, transformFunction: null }, enableInputs: { classPropertyName: "enableInputs", publicName: "enableInputs", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onClickRow: "onClickRow", onDoubleClickRow: "onDoubleClickRow", onSwitchChange: "onSwitchChange", onTextboxChange: "onTextboxChange", onNumberboxChange: "onNumberboxChange", onSelectboxChange: "onSelectboxChange", onKeyupEnter: "onKeyupEnter" }, viewQueries: [{ propertyName: "coerSwitch", first: true, predicate: ["coerSwitch"], descendants: true, isSignal: true }, { propertyName: "coerTextbox", first: true, predicate: ["coerTextbox"], descendants: true, isSignal: true }, { propertyName: "coerNumberbox", first: true, predicate: ["coerNumberbox"], descendants: true, isSignal: true }, { propertyName: "coerSelectbox", first: true, predicate: ["coerSelectbox"], descendants: true, isSignal: true }, { propertyName: "coerDatebox", first: true, predicate: ["coerDatebox"], descendants: true, isSignal: true }], ngImport: i0, template: "@switch(input) {\r\n    @case ('coer-switch') {\r\n        <coer-switch\r\n            #coerSwitch\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\"\r\n            [isDisabled]=\"_switchAttributes()?.isDisabled || false\" \r\n            [tooltip]=\"_switchAttributes()?.tooltip || ''\"\r\n            [tooltipPosition]=\"_switchAttributes()?.tooltipPosition || 'left'\"\r\n            marginLeft=\"auto\"\r\n            marginRight=\"auto\"\r\n            (onChange)=\"onSwitchChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            })\"\r\n        ></coer-switch> \r\n    }\r\n\r\n    @case ('coer-textbox') {\r\n        <coer-textbox\r\n            #coerTextbox\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\"\r\n            [isDisabled]=\"_textboxAttributes()?.isDisabled || false\"\r\n            [isValid]=\"_textboxAttributes()?.isValid || false\"\r\n            [isInvalid]=\"_textboxAttributes()?.isInvalid || false\"\r\n            [placeholder]=\"_textboxAttributes()?.placeholder || ('type ' + header().columnName.toLowerCase() + '...')\"\r\n            [selectOnFocus]=\"_textboxAttributes()?.selectOnFocus || true\"\r\n            [textPosition]=\"_textboxAttributes()?.textPosition || 'left'\"\r\n            [minLength]=\"_textboxAttributes()?.minLength || 0\"\r\n            [maxLength]=\"_textboxAttributes()?.maxLength || 50\"\r\n            (onInput)=\"onTextboxChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            })\"\r\n            (onKeyupEnter)=\"onKeyupEnter.emit({ \r\n                id: id(),\r\n                input: input, \r\n                row: row(), \r\n                value: $event\r\n            })\"\r\n         ></coer-textbox> \r\n    }\r\n\r\n    @case ('coer-numberbox') {\r\n        <coer-numberbox\r\n            #coerNumberbox\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\"\r\n            [isDisabled]=\"_numberboxAttributes()?.isDisabled || false\"\r\n            [isValid]=\"_numberboxAttributes()?.isValid || false\"\r\n            [isInvalid]=\"_numberboxAttributes()?.isInvalid || false\"\r\n            [placeholder]=\"_numberboxAttributes()?.placeholder || '#'\"\r\n            [selectOnFocus]=\"_numberboxAttributes()?.selectOnFocus || true\"\r\n            [textPosition]=\"_numberboxAttributes()?.textPosition || 'right'\"\r\n            [min]=\"_numberboxAttributes()?.min || 0\"\r\n            [max]=\"_numberboxAttributes()?.max || 2147483647\"            \r\n            [decimals]=\"_numberboxAttributes()?.decimals || 0\"\r\n            (onInput)=\"onTextboxChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            })\"\r\n            (onKeyupEnter)=\"onKeyupEnter.emit({ \r\n                id: id(),\r\n                input: input, \r\n                row: row(), \r\n                value: $event\r\n            })\"\r\n        ></coer-numberbox>\r\n    }\r\n\r\n    @case ('coer-selectbox') {\r\n        <coer-selectbox\r\n            #coerSelectbox\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\" \r\n            [isDisabled]=\"_selectboxAttributes()?.isDisabled || false\"\r\n            [isValid]=\"_selectboxAttributes()?.isValid || false\"\r\n            [isInvalid]=\"_selectboxAttributes()?.isInvalid || false\"\r\n            [dataSource]=\"_selectboxAttributes()?.dataSource || []\"\r\n            [placeholder]=\"_selectboxAttributes()?.placeholder || '-- Select --'\"\r\n            [displayProperty]=\"_selectboxAttributes()?.displayProperty || 'name'\" \r\n            (onSelected)=\"onTextboxChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            }); onKeyupEnter.emit({ \r\n                id: id(),\r\n                input: input, \r\n                row: row(), \r\n                value: $event\r\n            })\"\r\n            (onUnselect)=\"onTextboxChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            })\" \r\n        ></coer-selectbox>\r\n    }\r\n\r\n\r\n    @case ('coer-datebox') {\r\n        <coer-datebox\r\n            #coerDatebox\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\"  \r\n        ></coer-datebox>\r\n    }\r\n\r\n    @default {\r\n        <div class=\"display-flex min-height-20px padding-5px\" \r\n            [ngStyle]=\"{ \r\n                'height'         : _GetHeight(),\r\n                'align-items'    : _GetTextAlignY(),\r\n                'justify-content': _GetTextAlignX(),\r\n                'color'          : _GetTextColor(),\r\n                'word-break'     : _GetTextBreak(),\r\n                'white-space'    : _GetSpaceBreak(),\r\n                'cursor'         : checkOnRow() ? 'pointer' : 'default' \r\n            }\"\r\n            (click)=\"onClickRow.emit(row())\"\r\n            (dblclick)=\"onDoubleClickRow.emit(row())\">  \r\n            <div [innerHTML]=\"_GetCellValue() | html\" class=\"display-flex\"></div>          \r\n        </div>\r\n    }\r\n}", dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CoerDateBox, selector: "coer-datebox", inputs: ["id", "value", "label", "placeholder", "textPosition", "isWritable", "isInvalid", "isValid", "externalButton", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onOpen", "onClose", "onChangeValue", "onClickExternalButton"] }, { kind: "component", type: CoerNumberBox, selector: "coer-numberbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "min", "max", "isInvalid", "isValid", "externalButton", "selectOnFocus", "decimals", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickExternalButton"] }, { kind: "component", type: CoerSelectbox, selector: "coer-selectbox", inputs: ["id", "value", "label", "placeholder", "isInvalid", "isValid", "externalButton", "dataSource", "displayProperty", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onSelected", "onUnselect", "onClickExternalButton"] }, { kind: "component", type: CoerSwitch, selector: "coer-switch", inputs: ["id", "value", "label", "labelPosition", "isLoading", "isDisabled", "isReadonly", "isInvisible", "tooltip", "tooltipPosition", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onChange"] }, { kind: "component", type: CoerTextBox, selector: "coer-textbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickSearch", "onClickExternalButton"] }, { kind: "pipe", type: i5.HtmlPipe, name: "html" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridCell, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-grid-cell', standalone: false, template: "@switch(input) {\r\n    @case ('coer-switch') {\r\n        <coer-switch\r\n            #coerSwitch\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\"\r\n            [isDisabled]=\"_switchAttributes()?.isDisabled || false\" \r\n            [tooltip]=\"_switchAttributes()?.tooltip || ''\"\r\n            [tooltipPosition]=\"_switchAttributes()?.tooltipPosition || 'left'\"\r\n            marginLeft=\"auto\"\r\n            marginRight=\"auto\"\r\n            (onChange)=\"onSwitchChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            })\"\r\n        ></coer-switch> \r\n    }\r\n\r\n    @case ('coer-textbox') {\r\n        <coer-textbox\r\n            #coerTextbox\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\"\r\n            [isDisabled]=\"_textboxAttributes()?.isDisabled || false\"\r\n            [isValid]=\"_textboxAttributes()?.isValid || false\"\r\n            [isInvalid]=\"_textboxAttributes()?.isInvalid || false\"\r\n            [placeholder]=\"_textboxAttributes()?.placeholder || ('type ' + header().columnName.toLowerCase() + '...')\"\r\n            [selectOnFocus]=\"_textboxAttributes()?.selectOnFocus || true\"\r\n            [textPosition]=\"_textboxAttributes()?.textPosition || 'left'\"\r\n            [minLength]=\"_textboxAttributes()?.minLength || 0\"\r\n            [maxLength]=\"_textboxAttributes()?.maxLength || 50\"\r\n            (onInput)=\"onTextboxChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            })\"\r\n            (onKeyupEnter)=\"onKeyupEnter.emit({ \r\n                id: id(),\r\n                input: input, \r\n                row: row(), \r\n                value: $event\r\n            })\"\r\n         ></coer-textbox> \r\n    }\r\n\r\n    @case ('coer-numberbox') {\r\n        <coer-numberbox\r\n            #coerNumberbox\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\"\r\n            [isDisabled]=\"_numberboxAttributes()?.isDisabled || false\"\r\n            [isValid]=\"_numberboxAttributes()?.isValid || false\"\r\n            [isInvalid]=\"_numberboxAttributes()?.isInvalid || false\"\r\n            [placeholder]=\"_numberboxAttributes()?.placeholder || '#'\"\r\n            [selectOnFocus]=\"_numberboxAttributes()?.selectOnFocus || true\"\r\n            [textPosition]=\"_numberboxAttributes()?.textPosition || 'right'\"\r\n            [min]=\"_numberboxAttributes()?.min || 0\"\r\n            [max]=\"_numberboxAttributes()?.max || 2147483647\"            \r\n            [decimals]=\"_numberboxAttributes()?.decimals || 0\"\r\n            (onInput)=\"onTextboxChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            })\"\r\n            (onKeyupEnter)=\"onKeyupEnter.emit({ \r\n                id: id(),\r\n                input: input, \r\n                row: row(), \r\n                value: $event\r\n            })\"\r\n        ></coer-numberbox>\r\n    }\r\n\r\n    @case ('coer-selectbox') {\r\n        <coer-selectbox\r\n            #coerSelectbox\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\" \r\n            [isDisabled]=\"_selectboxAttributes()?.isDisabled || false\"\r\n            [isValid]=\"_selectboxAttributes()?.isValid || false\"\r\n            [isInvalid]=\"_selectboxAttributes()?.isInvalid || false\"\r\n            [dataSource]=\"_selectboxAttributes()?.dataSource || []\"\r\n            [placeholder]=\"_selectboxAttributes()?.placeholder || '-- Select --'\"\r\n            [displayProperty]=\"_selectboxAttributes()?.displayProperty || 'name'\" \r\n            (onSelected)=\"onTextboxChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            }); onKeyupEnter.emit({ \r\n                id: id(),\r\n                input: input, \r\n                row: row(), \r\n                value: $event\r\n            })\"\r\n            (onUnselect)=\"onTextboxChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            })\" \r\n        ></coer-selectbox>\r\n    }\r\n\r\n\r\n    @case ('coer-datebox') {\r\n        <coer-datebox\r\n            #coerDatebox\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\"  \r\n        ></coer-datebox>\r\n    }\r\n\r\n    @default {\r\n        <div class=\"display-flex min-height-20px padding-5px\" \r\n            [ngStyle]=\"{ \r\n                'height'         : _GetHeight(),\r\n                'align-items'    : _GetTextAlignY(),\r\n                'justify-content': _GetTextAlignX(),\r\n                'color'          : _GetTextColor(),\r\n                'word-break'     : _GetTextBreak(),\r\n                'cursor'         : checkOnRow() ? 'pointer' : 'default' \r\n            }\"\r\n            (click)=\"onClickRow.emit(row())\"\r\n            (dblclick)=\"onDoubleClickRow.emit(row())\">  \r\n            <div [innerHTML]=\"_GetCellValue() | html\" class=\"display-flex\"></div>          \r\n        </div>\r\n    }\r\n}" }]
+            args: [{ selector: 'coer-grid-cell', standalone: false, template: "@switch(input) {\r\n    @case ('coer-switch') {\r\n        <coer-switch\r\n            #coerSwitch\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\"\r\n            [isDisabled]=\"_switchAttributes()?.isDisabled || false\" \r\n            [tooltip]=\"_switchAttributes()?.tooltip || ''\"\r\n            [tooltipPosition]=\"_switchAttributes()?.tooltipPosition || 'left'\"\r\n            marginLeft=\"auto\"\r\n            marginRight=\"auto\"\r\n            (onChange)=\"onSwitchChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            })\"\r\n        ></coer-switch> \r\n    }\r\n\r\n    @case ('coer-textbox') {\r\n        <coer-textbox\r\n            #coerTextbox\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\"\r\n            [isDisabled]=\"_textboxAttributes()?.isDisabled || false\"\r\n            [isValid]=\"_textboxAttributes()?.isValid || false\"\r\n            [isInvalid]=\"_textboxAttributes()?.isInvalid || false\"\r\n            [placeholder]=\"_textboxAttributes()?.placeholder || ('type ' + header().columnName.toLowerCase() + '...')\"\r\n            [selectOnFocus]=\"_textboxAttributes()?.selectOnFocus || true\"\r\n            [textPosition]=\"_textboxAttributes()?.textPosition || 'left'\"\r\n            [minLength]=\"_textboxAttributes()?.minLength || 0\"\r\n            [maxLength]=\"_textboxAttributes()?.maxLength || 50\"\r\n            (onInput)=\"onTextboxChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            })\"\r\n            (onKeyupEnter)=\"onKeyupEnter.emit({ \r\n                id: id(),\r\n                input: input, \r\n                row: row(), \r\n                value: $event\r\n            })\"\r\n         ></coer-textbox> \r\n    }\r\n\r\n    @case ('coer-numberbox') {\r\n        <coer-numberbox\r\n            #coerNumberbox\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\"\r\n            [isDisabled]=\"_numberboxAttributes()?.isDisabled || false\"\r\n            [isValid]=\"_numberboxAttributes()?.isValid || false\"\r\n            [isInvalid]=\"_numberboxAttributes()?.isInvalid || false\"\r\n            [placeholder]=\"_numberboxAttributes()?.placeholder || '#'\"\r\n            [selectOnFocus]=\"_numberboxAttributes()?.selectOnFocus || true\"\r\n            [textPosition]=\"_numberboxAttributes()?.textPosition || 'right'\"\r\n            [min]=\"_numberboxAttributes()?.min || 0\"\r\n            [max]=\"_numberboxAttributes()?.max || 2147483647\"            \r\n            [decimals]=\"_numberboxAttributes()?.decimals || 0\"\r\n            (onInput)=\"onTextboxChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            })\"\r\n            (onKeyupEnter)=\"onKeyupEnter.emit({ \r\n                id: id(),\r\n                input: input, \r\n                row: row(), \r\n                value: $event\r\n            })\"\r\n        ></coer-numberbox>\r\n    }\r\n\r\n    @case ('coer-selectbox') {\r\n        <coer-selectbox\r\n            #coerSelectbox\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\" \r\n            [isDisabled]=\"_selectboxAttributes()?.isDisabled || false\"\r\n            [isValid]=\"_selectboxAttributes()?.isValid || false\"\r\n            [isInvalid]=\"_selectboxAttributes()?.isInvalid || false\"\r\n            [dataSource]=\"_selectboxAttributes()?.dataSource || []\"\r\n            [placeholder]=\"_selectboxAttributes()?.placeholder || '-- Select --'\"\r\n            [displayProperty]=\"_selectboxAttributes()?.displayProperty || 'name'\" \r\n            (onSelected)=\"onTextboxChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            }); onKeyupEnter.emit({ \r\n                id: id(),\r\n                input: input, \r\n                row: row(), \r\n                value: $event\r\n            })\"\r\n            (onUnselect)=\"onTextboxChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            })\" \r\n        ></coer-selectbox>\r\n    }\r\n\r\n\r\n    @case ('coer-datebox') {\r\n        <coer-datebox\r\n            #coerDatebox\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\"  \r\n        ></coer-datebox>\r\n    }\r\n\r\n    @default {\r\n        <div class=\"display-flex min-height-20px padding-5px\" \r\n            [ngStyle]=\"{ \r\n                'height'         : _GetHeight(),\r\n                'align-items'    : _GetTextAlignY(),\r\n                'justify-content': _GetTextAlignX(),\r\n                'color'          : _GetTextColor(),\r\n                'word-break'     : _GetTextBreak(),\r\n                'white-space'    : _GetSpaceBreak(),\r\n                'cursor'         : checkOnRow() ? 'pointer' : 'default' \r\n            }\"\r\n            (click)=\"onClickRow.emit(row())\"\r\n            (dblclick)=\"onDoubleClickRow.emit(row())\">  \r\n            <div [innerHTML]=\"_GetCellValue() | html\" class=\"display-flex\"></div>          \r\n        </div>\r\n    }\r\n}" }]
         }] });
 
 class CoerGridBody {
@@ -4138,11 +4143,11 @@ class CoerSidenav {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSidenav, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSidenav, isStandalone: false, selector: "coer-sidenav", outputs: { onMenuSelected: "onMenuSelected" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["matSidenav"], descendants: true, isSignal: true }, { propertyName: "menuList", predicate: CoerTreeAccordion, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-drawer-container [hasBackdrop]=\"_backdrop()\">\r\n    <mat-drawer \r\n        #matSidenav\r\n        [opened]=\"_isOpen()\"\r\n        (opened)=\"_Open()\"\r\n        (closed)=\"_Close()\"\r\n        [mode]=\"_mode()\">\r\n\r\n        @if(!_isLoading()) {\r\n            @if(_navigation().length > 0) {                \r\n                @for(item of _navigation(); track item.id) {\r\n                    \r\n                    <!-- Menu -->                     \r\n                    @if(_IsMenu(item)) {\r\n                        @if(_IsGrid(item)) {\r\n                            <coer-menu-option\r\n                                [label]=\"item.label\"\r\n                                [icon]=\"_GetIcon(item)\"\r\n                                path=\"menu\"\r\n                                (onClickMenuOption)=\"_ShowGridMenu($event, item)\"\r\n                            ></coer-menu-option>\r\n                        }\r\n    \r\n                        @else {\r\n                            <coer-tree-accordion\r\n                                [item]=\"item\"\r\n                                (showGridMenu)=\"_NavigateTo($event)\"\r\n                                (onClickMenuOption)=\"_NavigateTo($event)\"\r\n                                (clickMenu)=\"_MenuSelected($event)\"\r\n                            ></coer-tree-accordion>\r\n                        }\r\n                    }\r\n                             \r\n                    <!-- Option Menu -->\r\n                    @else {\r\n                        <coer-menu-option\r\n                            [label]=\"item.label\"\r\n                            [icon]=\"item?.icon\"\r\n                            [path]=\"item?.path\"\r\n                            (onClickMenuOption)=\"_NavigateTo($event)\"\r\n                        ></coer-menu-option>\r\n                    }\r\n                     \r\n        \r\n                    <div class=\"separator\"></div> \r\n                }\r\n            }\r\n\r\n            @else {\r\n                <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n            }\r\n        }\r\n\r\n        @else {\r\n            <coer-menu-option\r\n                label=\"LOADING\"\r\n                icon=\"icon-arrows-sync animation-spin\"\r\n            ></coer-menu-option>\r\n        }\r\n\r\n        <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n    </mat-drawer>\r\n\r\n    <!-- Main Screen -->\r\n    <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!_isOpen() && _showAsideMenu()) }\">\r\n        <aside [ngClass]=\"{ 'side-nav scrollbar-invisible': true, 'display-none': !_showAsideMenu() }\" (click)=\"Open($event)\">\r\n            @if(_isLoading()) {\r\n                <span class=\"icon-container\">\r\n                    <i class=\"icon-arrows-sync animation-spin\"></i>\r\n                </span>\r\n            }\r\n\r\n            @else {\r\n                @for (item of _navigation(); track item.id) {\r\n                    <div (click)=\"Open($event, item)\">\r\n                        <span [class]=\"'icon-container ' + _SetIdentityClass(item.label)\">\r\n                            <i [class]=\"_GetIcon(item)\"></i>\r\n                        </span>\r\n                    </div>\r\n                } \r\n            }\r\n\r\n            <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n        </aside> \r\n        <ng-content></ng-content>\r\n    </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;z-index:3;background-color:var(--sidenav-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar{width:1px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb{background-color:var(--secondary-inner)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--background-inner)!important}mat-drawer-container mat-drawer i{font-size:16px!important}mat-drawer-container mat-drawer div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-drawer-container mat-drawer-content{margin-right:0!important;background-color:var(--background-inner)!important}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--sidenav-inner)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!important;overflow-y:auto!important;cursor:pointer!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container{width:100%!important;height:49.6px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;border-bottom:1px solid rgba(245,245,245,.041)!important;color:var(--sidenav-text-inner)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--sidenav-active-inner)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$8.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i2$8.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i2$8.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: CoerMenuOption, selector: "coer-menu-option", inputs: ["level", "label", "icon", "path", "tree"], outputs: ["onClickMenuOption"] }, { kind: "component", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: ["level", "item", "tree", "showTree"], outputs: ["showGridMenu", "onClickMenuOption", "clickMenu"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSidenav, isStandalone: false, selector: "coer-sidenav", outputs: { onMenuSelected: "onMenuSelected" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["matSidenav"], descendants: true, isSignal: true }, { propertyName: "menuList", predicate: CoerTreeAccordion, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-drawer-container [hasBackdrop]=\"_backdrop()\">\r\n    <mat-drawer \r\n        #matSidenav\r\n        [opened]=\"_isOpen()\"\r\n        (opened)=\"_Open()\"\r\n        (closed)=\"_Close()\"\r\n        [mode]=\"_mode()\"\r\n        [class]=\"_isModalOpen() ? 'z-index-1' : 'z-index-3'\">\r\n\r\n        @if(!_isLoading()) {\r\n            @if(_navigation().length > 0) {                \r\n                @for(item of _navigation(); track item.id) {\r\n                    \r\n                    <!-- Menu -->                     \r\n                    @if(_IsMenu(item)) {\r\n                        @if(_IsGrid(item)) {\r\n                            <coer-menu-option\r\n                                [label]=\"item.label\"\r\n                                [icon]=\"_GetIcon(item)\"\r\n                                path=\"menu\"\r\n                                (onClickMenuOption)=\"_ShowGridMenu($event, item)\"\r\n                            ></coer-menu-option>\r\n                        }\r\n    \r\n                        @else {\r\n                            <coer-tree-accordion\r\n                                [item]=\"item\"\r\n                                (showGridMenu)=\"_NavigateTo($event)\"\r\n                                (onClickMenuOption)=\"_NavigateTo($event)\"\r\n                                (clickMenu)=\"_MenuSelected($event)\"\r\n                            ></coer-tree-accordion>\r\n                        }\r\n                    }\r\n                             \r\n                    <!-- Option Menu -->\r\n                    @else {\r\n                        <coer-menu-option\r\n                            [label]=\"item.label\"\r\n                            [icon]=\"item?.icon\"\r\n                            [path]=\"item?.path\"\r\n                            (onClickMenuOption)=\"_NavigateTo($event)\"\r\n                        ></coer-menu-option>\r\n                    }\r\n                     \r\n        \r\n                    <div class=\"separator\"></div> \r\n                }\r\n            }\r\n\r\n            @else {\r\n                <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n            }\r\n        }\r\n\r\n        @else {\r\n            <coer-menu-option\r\n                label=\"LOADING\"\r\n                icon=\"icon-arrows-sync animation-spin\"\r\n            ></coer-menu-option>\r\n        }\r\n\r\n        <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n    </mat-drawer>\r\n\r\n    <!-- Main Screen -->\r\n    <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!_isOpen() && _showAsideMenu()) }\">\r\n        <aside [ngClass]=\"{ 'side-nav scrollbar-invisible': true, 'display-none': !_showAsideMenu() }\" (click)=\"Open($event)\">\r\n            @if(_isLoading()) {\r\n                <span class=\"icon-container\">\r\n                    <i class=\"icon-arrows-sync animation-spin\"></i>\r\n                </span>\r\n            }\r\n\r\n            @else {\r\n                @for (item of _navigation(); track item.id) {\r\n                    <div (click)=\"Open($event, item)\">\r\n                        <span [class]=\"'icon-container ' + _SetIdentityClass(item.label)\">\r\n                            <i [class]=\"_GetIcon(item)\"></i>\r\n                        </span>\r\n                    </div>\r\n                } \r\n            }\r\n\r\n            <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n        </aside> \r\n        <ng-content></ng-content>\r\n    </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;z-index:3;background-color:var(--sidenav-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar{width:1px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb{background-color:var(--secondary-inner)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--background-inner)!important}mat-drawer-container mat-drawer i{font-size:16px!important}mat-drawer-container mat-drawer div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-drawer-container mat-drawer-content{margin-right:0!important;background-color:var(--background-inner)!important}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--sidenav-inner)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!important;overflow-y:auto!important;cursor:pointer!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container{width:100%!important;height:49.6px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;border-bottom:1px solid rgba(245,245,245,.041)!important;color:var(--sidenav-text-inner)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--sidenav-active-inner)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$8.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i2$8.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i2$8.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: CoerMenuOption, selector: "coer-menu-option", inputs: ["level", "label", "icon", "path", "tree"], outputs: ["onClickMenuOption"] }, { kind: "component", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: ["level", "item", "tree", "showTree"], outputs: ["showGridMenu", "onClickMenuOption", "clickMenu"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSidenav, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-sidenav', standalone: false, template: "<mat-drawer-container [hasBackdrop]=\"_backdrop()\">\r\n    <mat-drawer \r\n        #matSidenav\r\n        [opened]=\"_isOpen()\"\r\n        (opened)=\"_Open()\"\r\n        (closed)=\"_Close()\"\r\n        [mode]=\"_mode()\">\r\n\r\n        @if(!_isLoading()) {\r\n            @if(_navigation().length > 0) {                \r\n                @for(item of _navigation(); track item.id) {\r\n                    \r\n                    <!-- Menu -->                     \r\n                    @if(_IsMenu(item)) {\r\n                        @if(_IsGrid(item)) {\r\n                            <coer-menu-option\r\n                                [label]=\"item.label\"\r\n                                [icon]=\"_GetIcon(item)\"\r\n                                path=\"menu\"\r\n                                (onClickMenuOption)=\"_ShowGridMenu($event, item)\"\r\n                            ></coer-menu-option>\r\n                        }\r\n    \r\n                        @else {\r\n                            <coer-tree-accordion\r\n                                [item]=\"item\"\r\n                                (showGridMenu)=\"_NavigateTo($event)\"\r\n                                (onClickMenuOption)=\"_NavigateTo($event)\"\r\n                                (clickMenu)=\"_MenuSelected($event)\"\r\n                            ></coer-tree-accordion>\r\n                        }\r\n                    }\r\n                             \r\n                    <!-- Option Menu -->\r\n                    @else {\r\n                        <coer-menu-option\r\n                            [label]=\"item.label\"\r\n                            [icon]=\"item?.icon\"\r\n                            [path]=\"item?.path\"\r\n                            (onClickMenuOption)=\"_NavigateTo($event)\"\r\n                        ></coer-menu-option>\r\n                    }\r\n                     \r\n        \r\n                    <div class=\"separator\"></div> \r\n                }\r\n            }\r\n\r\n            @else {\r\n                <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n            }\r\n        }\r\n\r\n        @else {\r\n            <coer-menu-option\r\n                label=\"LOADING\"\r\n                icon=\"icon-arrows-sync animation-spin\"\r\n            ></coer-menu-option>\r\n        }\r\n\r\n        <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n    </mat-drawer>\r\n\r\n    <!-- Main Screen -->\r\n    <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!_isOpen() && _showAsideMenu()) }\">\r\n        <aside [ngClass]=\"{ 'side-nav scrollbar-invisible': true, 'display-none': !_showAsideMenu() }\" (click)=\"Open($event)\">\r\n            @if(_isLoading()) {\r\n                <span class=\"icon-container\">\r\n                    <i class=\"icon-arrows-sync animation-spin\"></i>\r\n                </span>\r\n            }\r\n\r\n            @else {\r\n                @for (item of _navigation(); track item.id) {\r\n                    <div (click)=\"Open($event, item)\">\r\n                        <span [class]=\"'icon-container ' + _SetIdentityClass(item.label)\">\r\n                            <i [class]=\"_GetIcon(item)\"></i>\r\n                        </span>\r\n                    </div>\r\n                } \r\n            }\r\n\r\n            <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n        </aside> \r\n        <ng-content></ng-content>\r\n    </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;z-index:3;background-color:var(--sidenav-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar{width:1px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb{background-color:var(--secondary-inner)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--background-inner)!important}mat-drawer-container mat-drawer i{font-size:16px!important}mat-drawer-container mat-drawer div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-drawer-container mat-drawer-content{margin-right:0!important;background-color:var(--background-inner)!important}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--sidenav-inner)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!important;overflow-y:auto!important;cursor:pointer!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container{width:100%!important;height:49.6px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;border-bottom:1px solid rgba(245,245,245,.041)!important;color:var(--sidenav-text-inner)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--sidenav-active-inner)!important}\n"] }]
+            args: [{ selector: 'coer-sidenav', standalone: false, template: "<mat-drawer-container [hasBackdrop]=\"_backdrop()\">\r\n    <mat-drawer \r\n        #matSidenav\r\n        [opened]=\"_isOpen()\"\r\n        (opened)=\"_Open()\"\r\n        (closed)=\"_Close()\"\r\n        [mode]=\"_mode()\"\r\n        [class]=\"_isModalOpen() ? 'z-index-1' : 'z-index-3'\">\r\n\r\n        @if(!_isLoading()) {\r\n            @if(_navigation().length > 0) {                \r\n                @for(item of _navigation(); track item.id) {\r\n                    \r\n                    <!-- Menu -->                     \r\n                    @if(_IsMenu(item)) {\r\n                        @if(_IsGrid(item)) {\r\n                            <coer-menu-option\r\n                                [label]=\"item.label\"\r\n                                [icon]=\"_GetIcon(item)\"\r\n                                path=\"menu\"\r\n                                (onClickMenuOption)=\"_ShowGridMenu($event, item)\"\r\n                            ></coer-menu-option>\r\n                        }\r\n    \r\n                        @else {\r\n                            <coer-tree-accordion\r\n                                [item]=\"item\"\r\n                                (showGridMenu)=\"_NavigateTo($event)\"\r\n                                (onClickMenuOption)=\"_NavigateTo($event)\"\r\n                                (clickMenu)=\"_MenuSelected($event)\"\r\n                            ></coer-tree-accordion>\r\n                        }\r\n                    }\r\n                             \r\n                    <!-- Option Menu -->\r\n                    @else {\r\n                        <coer-menu-option\r\n                            [label]=\"item.label\"\r\n                            [icon]=\"item?.icon\"\r\n                            [path]=\"item?.path\"\r\n                            (onClickMenuOption)=\"_NavigateTo($event)\"\r\n                        ></coer-menu-option>\r\n                    }\r\n                     \r\n        \r\n                    <div class=\"separator\"></div> \r\n                }\r\n            }\r\n\r\n            @else {\r\n                <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n            }\r\n        }\r\n\r\n        @else {\r\n            <coer-menu-option\r\n                label=\"LOADING\"\r\n                icon=\"icon-arrows-sync animation-spin\"\r\n            ></coer-menu-option>\r\n        }\r\n\r\n        <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n    </mat-drawer>\r\n\r\n    <!-- Main Screen -->\r\n    <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!_isOpen() && _showAsideMenu()) }\">\r\n        <aside [ngClass]=\"{ 'side-nav scrollbar-invisible': true, 'display-none': !_showAsideMenu() }\" (click)=\"Open($event)\">\r\n            @if(_isLoading()) {\r\n                <span class=\"icon-container\">\r\n                    <i class=\"icon-arrows-sync animation-spin\"></i>\r\n                </span>\r\n            }\r\n\r\n            @else {\r\n                @for (item of _navigation(); track item.id) {\r\n                    <div (click)=\"Open($event, item)\">\r\n                        <span [class]=\"'icon-container ' + _SetIdentityClass(item.label)\">\r\n                            <i [class]=\"_GetIcon(item)\"></i>\r\n                        </span>\r\n                    </div>\r\n                } \r\n            }\r\n\r\n            <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n        </aside> \r\n        <ng-content></ng-content>\r\n    </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;z-index:3;background-color:var(--sidenav-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar{width:1px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb{background-color:var(--secondary-inner)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--background-inner)!important}mat-drawer-container mat-drawer i{font-size:16px!important}mat-drawer-container mat-drawer div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-drawer-container mat-drawer-content{margin-right:0!important;background-color:var(--background-inner)!important}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--sidenav-inner)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!important;overflow-y:auto!important;cursor:pointer!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container{width:100%!important;height:49.6px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;border-bottom:1px solid rgba(245,245,245,.041)!important;color:var(--sidenav-text-inner)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--sidenav-active-inner)!important}\n"] }]
         }], ctorParameters: () => [] });
 
 class CoerDropdown extends ControlValue {