coer-elements 2.0.65 → 2.0.68

package/fesm2022/coer-elements-components.mjs

@@ -777,11 +777,11 @@ class CoerModal {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerModal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerModal, isStandalone: false, selector: "coer-modal", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, verticalPosition: { classPropertyName: "verticalPosition", publicName: "verticalPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpen: "onOpen", onClose: "onClose" }, queries: [{ propertyName: "contentRef", predicate: CoerRefDirective, isSignal: true }], ngImport: i0, template: "<aside title='' [id]=\"_id\" class=\"modal fade\" data-bs-backdrop=\"static\" tabindex=\"-1\">\r\n    <div [ngClass]=\"{\r\n        'modal-dialog': true,\r\n        'modal-dialog-scrollable': true, \r\n        'modal-dialog-top'       : verticalPosition() == 'top',\r\n        'modal-dialog-middle'    : verticalPosition() == 'middle',\r\n        'modal-dialog-bottom'    : verticalPosition() == 'bottom',\r\n    }\" \r\n        [ngStyle]=\"{ 'max-width': _width() }\">\r\n        <div class=\"modal-content\">\r\n            @if(IsNull(_header()) || (IsNotNull(_header()) && _header()?.show())) {\r\n                <header class=\"modal-header\">\r\n                    <h6 class=\"modal-title\">\r\n                        <i [class]=\"_icon()\"></i>\r\n                        <span [ngClass]=\"{ 'ms-1': _icon().length > 0 }\"> {{ _title() }} </span>\r\n                    </h6>\r\n\r\n                    @if(showCloseButton()) {\r\n                        <button [id]=\"_id + '-button-close'\" type=\"button\" class=\"btn-close\" (click)=\"Close()\"></button>\r\n                    }\r\n                </header>\r\n            }\r\n\r\n            <section class=\"modal-body\" [ngStyle]=\"{ 'height': height(), 'max-height': maxHeight() }\">\r\n                @if(IsNotNull(_body()) && _body()?.show()) {\r\n                    <ng-container [ngTemplateOutlet]=\"_body()!.template\"></ng-container>\r\n                }\r\n\r\n                @else {\r\n                    <ng-content></ng-content>\r\n                }\r\n            </section>\r\n\r\n            @if(IsNotNull(_footer())) {\r\n                <footer class=\"modal-footer\">\r\n                    @if(_footer()?.show()) {\r\n                        <ng-container [ngTemplateOutlet]=\"_footer()!.template\"></ng-container>\r\n                    }\r\n                </footer>\r\n            }\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n</aside>", styles: ["aside.modal div.backdrop{min-width:100vw;min-height:100vh;position:fixed;inset:0;background-color:#0000005b;z-index:1500}aside.modal .modal-dialog{margin:auto!important;height:auto!important;min-height:100vh!important;display:flex!important}aside.modal .modal-dialog div.modal-content{z-index:1501;overflow:unset!important;margin:15px!important}aside.modal .modal-dialog div.modal-content .modal-header{padding:8px 16px!important}aside.modal .modal-dialog div.modal-content .modal-header .modal-title{font-weight:700!important;font-size:17px!important}aside.modal .modal-dialog div.modal-content .modal-header .btn-close:focus{box-shadow:none!important}aside.modal .modal-dialog div.modal-content .modal-body{padding-top:16px!important;padding-bottom:0!important;min-width:60px!important;overflow:visible!important}aside.modal .modal-dialog div.modal-content .modal-footer{border:none!important;display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;max-height:64px!important;min-height:64px!important;gap:10px!important}aside.modal .modal-dialog-top{align-items:flex-start!important}aside.modal .modal-dialog-middle{align-items:center!important}aside.modal .modal-dialog-bottom{align-items:flex-end!important}div.modal-backdrop{z-index:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerModal, isStandalone: false, selector: "coer-modal", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, verticalPosition: { classPropertyName: "verticalPosition", publicName: "verticalPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpen: "onOpen", onClose: "onClose" }, queries: [{ propertyName: "contentRef", predicate: CoerRefDirective, isSignal: true }], ngImport: i0, template: "<aside title='' [id]=\"_id\" class=\"modal fade\" data-bs-backdrop=\"static\" tabindex=\"-1\">\r\n    <div [ngClass]=\"{\r\n        'modal-dialog': true,\r\n        'modal-dialog-scrollable': true, \r\n        'modal-dialog-top'       : verticalPosition() == 'top',\r\n        'modal-dialog-middle'    : verticalPosition() == 'middle',\r\n        'modal-dialog-bottom'    : verticalPosition() == 'bottom',\r\n    }\" \r\n        [ngStyle]=\"{ 'max-width': _width() }\">\r\n        <div class=\"modal-content\">\r\n            @if(IsNull(_header()) || (IsNotNull(_header()) && _header()?.show())) {\r\n                <header class=\"modal-header\">\r\n                    <h6 class=\"modal-title\">\r\n                        <i [class]=\"_icon()\"></i>\r\n                        <span [ngClass]=\"{ 'ms-1': _icon().length > 0 }\"> {{ _title() }} </span>\r\n                    </h6>\r\n\r\n                    @if(showCloseButton()) {\r\n                        <button [id]=\"_id + '-button-close'\" type=\"button\" class=\"btn-close\" (click)=\"Close()\"></button>\r\n                    }\r\n                </header>\r\n            }\r\n\r\n            <section class=\"modal-body\" [ngStyle]=\"{ 'height': height(), 'max-height': maxHeight() }\">\r\n                @if(IsNotNull(_body()) && _body()?.show()) {\r\n                    <ng-container [ngTemplateOutlet]=\"_body()!.template\"></ng-container>\r\n                }\r\n\r\n                @else {\r\n                    <ng-content></ng-content>\r\n                }\r\n            </section>\r\n\r\n            @if(IsNotNull(_footer())) {\r\n                <footer class=\"modal-footer\">\r\n                    @if(_footer()?.show()) {\r\n                        <ng-container [ngTemplateOutlet]=\"_footer()!.template\"></ng-container>\r\n                    }\r\n                </footer>\r\n            }\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n</aside>", styles: ["aside.modal div.backdrop{min-width:100vw;min-height:100vh;position:fixed;inset:0;background-color:#0000005b;z-index:1500}aside.modal .modal-dialog{margin:auto!important;height:auto!important;min-height:100vh!important;display:flex!important}aside.modal .modal-dialog div.modal-content{z-index:1501;overflow:unset!important}aside.modal .modal-dialog div.modal-content .modal-header{padding:8px 16px!important}aside.modal .modal-dialog div.modal-content .modal-header .modal-title{font-weight:700!important;font-size:17px!important}aside.modal .modal-dialog div.modal-content .modal-header .btn-close:focus{box-shadow:none!important}aside.modal .modal-dialog div.modal-content .modal-body{padding-top:16px!important;padding-bottom:0!important;min-width:60px!important;overflow:visible!important}aside.modal .modal-dialog div.modal-content .modal-footer{border:none!important;display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;max-height:64px!important;min-height:64px!important;gap:10px!important}aside.modal .modal-dialog-top{align-items:flex-start!important}aside.modal .modal-dialog-middle{align-items:center!important}aside.modal .modal-dialog-bottom{align-items:flex-end!important}div.modal-backdrop{z-index:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerModal, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-modal', standalone: false, template: "<aside title='' [id]=\"_id\" class=\"modal fade\" data-bs-backdrop=\"static\" tabindex=\"-1\">\r\n    <div [ngClass]=\"{\r\n        'modal-dialog': true,\r\n        'modal-dialog-scrollable': true, \r\n        'modal-dialog-top'       : verticalPosition() == 'top',\r\n        'modal-dialog-middle'    : verticalPosition() == 'middle',\r\n        'modal-dialog-bottom'    : verticalPosition() == 'bottom',\r\n    }\" \r\n        [ngStyle]=\"{ 'max-width': _width() }\">\r\n        <div class=\"modal-content\">\r\n            @if(IsNull(_header()) || (IsNotNull(_header()) && _header()?.show())) {\r\n                <header class=\"modal-header\">\r\n                    <h6 class=\"modal-title\">\r\n                        <i [class]=\"_icon()\"></i>\r\n                        <span [ngClass]=\"{ 'ms-1': _icon().length > 0 }\"> {{ _title() }} </span>\r\n                    </h6>\r\n\r\n                    @if(showCloseButton()) {\r\n                        <button [id]=\"_id + '-button-close'\" type=\"button\" class=\"btn-close\" (click)=\"Close()\"></button>\r\n                    }\r\n                </header>\r\n            }\r\n\r\n            <section class=\"modal-body\" [ngStyle]=\"{ 'height': height(), 'max-height': maxHeight() }\">\r\n                @if(IsNotNull(_body()) && _body()?.show()) {\r\n                    <ng-container [ngTemplateOutlet]=\"_body()!.template\"></ng-container>\r\n                }\r\n\r\n                @else {\r\n                    <ng-content></ng-content>\r\n                }\r\n            </section>\r\n\r\n            @if(IsNotNull(_footer())) {\r\n                <footer class=\"modal-footer\">\r\n                    @if(_footer()?.show()) {\r\n                        <ng-container [ngTemplateOutlet]=\"_footer()!.template\"></ng-container>\r\n                    }\r\n                </footer>\r\n            }\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n</aside>", styles: ["aside.modal div.backdrop{min-width:100vw;min-height:100vh;position:fixed;inset:0;background-color:#0000005b;z-index:1500}aside.modal .modal-dialog{margin:auto!important;height:auto!important;min-height:100vh!important;display:flex!important}aside.modal .modal-dialog div.modal-content{z-index:1501;overflow:unset!important;margin:15px!important}aside.modal .modal-dialog div.modal-content .modal-header{padding:8px 16px!important}aside.modal .modal-dialog div.modal-content .modal-header .modal-title{font-weight:700!important;font-size:17px!important}aside.modal .modal-dialog div.modal-content .modal-header .btn-close:focus{box-shadow:none!important}aside.modal .modal-dialog div.modal-content .modal-body{padding-top:16px!important;padding-bottom:0!important;min-width:60px!important;overflow:visible!important}aside.modal .modal-dialog div.modal-content .modal-footer{border:none!important;display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;max-height:64px!important;min-height:64px!important;gap:10px!important}aside.modal .modal-dialog-top{align-items:flex-start!important}aside.modal .modal-dialog-middle{align-items:center!important}aside.modal .modal-dialog-bottom{align-items:flex-end!important}div.modal-backdrop{z-index:0!important}\n"] }]
+            args: [{ selector: 'coer-modal', standalone: false, template: "<aside title='' [id]=\"_id\" class=\"modal fade\" data-bs-backdrop=\"static\" tabindex=\"-1\">\r\n    <div [ngClass]=\"{\r\n        'modal-dialog': true,\r\n        'modal-dialog-scrollable': true, \r\n        'modal-dialog-top'       : verticalPosition() == 'top',\r\n        'modal-dialog-middle'    : verticalPosition() == 'middle',\r\n        'modal-dialog-bottom'    : verticalPosition() == 'bottom',\r\n    }\" \r\n        [ngStyle]=\"{ 'max-width': _width() }\">\r\n        <div class=\"modal-content\">\r\n            @if(IsNull(_header()) || (IsNotNull(_header()) && _header()?.show())) {\r\n                <header class=\"modal-header\">\r\n                    <h6 class=\"modal-title\">\r\n                        <i [class]=\"_icon()\"></i>\r\n                        <span [ngClass]=\"{ 'ms-1': _icon().length > 0 }\"> {{ _title() }} </span>\r\n                    </h6>\r\n\r\n                    @if(showCloseButton()) {\r\n                        <button [id]=\"_id + '-button-close'\" type=\"button\" class=\"btn-close\" (click)=\"Close()\"></button>\r\n                    }\r\n                </header>\r\n            }\r\n\r\n            <section class=\"modal-body\" [ngStyle]=\"{ 'height': height(), 'max-height': maxHeight() }\">\r\n                @if(IsNotNull(_body()) && _body()?.show()) {\r\n                    <ng-container [ngTemplateOutlet]=\"_body()!.template\"></ng-container>\r\n                }\r\n\r\n                @else {\r\n                    <ng-content></ng-content>\r\n                }\r\n            </section>\r\n\r\n            @if(IsNotNull(_footer())) {\r\n                <footer class=\"modal-footer\">\r\n                    @if(_footer()?.show()) {\r\n                        <ng-container [ngTemplateOutlet]=\"_footer()!.template\"></ng-container>\r\n                    }\r\n                </footer>\r\n            }\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n</aside>", styles: ["aside.modal div.backdrop{min-width:100vw;min-height:100vh;position:fixed;inset:0;background-color:#0000005b;z-index:1500}aside.modal .modal-dialog{margin:auto!important;height:auto!important;min-height:100vh!important;display:flex!important}aside.modal .modal-dialog div.modal-content{z-index:1501;overflow:unset!important}aside.modal .modal-dialog div.modal-content .modal-header{padding:8px 16px!important}aside.modal .modal-dialog div.modal-content .modal-header .modal-title{font-weight:700!important;font-size:17px!important}aside.modal .modal-dialog div.modal-content .modal-header .btn-close:focus{box-shadow:none!important}aside.modal .modal-dialog div.modal-content .modal-body{padding-top:16px!important;padding-bottom:0!important;min-width:60px!important;overflow:visible!important}aside.modal .modal-dialog div.modal-content .modal-footer{border:none!important;display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;max-height:64px!important;min-height:64px!important;gap:10px!important}aside.modal .modal-dialog-top{align-items:flex-start!important}aside.modal .modal-dialog-middle{align-items:center!important}aside.modal .modal-dialog-bottom{align-items:flex-end!important}div.modal-backdrop{z-index:0!important}\n"] }]
         }] });
 
 class CoerFileboxImage {
@@ -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 {
@@ -3347,6 +3352,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
 
 class CoerList {
     constructor() {
+        //Elements
+        this._listHeader = null;
+        this._listGrandFather = null;
+        this._list = null;
         //Variables
         this._id = Tools.GetGuid('coer-List');
         //Inputs
@@ -3354,9 +3363,9 @@ class CoerList {
         this.propDisplay = input('name');
         this.header = input('');
         this.headerIcon = input('');
-        this.showDeleteButtonByRow = input(false);
         this.showGoButtonByRow = input(false);
         this.showBackButton = input(false);
+        this.buttonsConfig = input({});
         this.isLoading = input(false);
         this.isDraggable = input(false);
         this.showSearch = input(false);
@@ -3381,9 +3390,7 @@ class CoerList {
         this.onClickBack = output();
         //computed
         this._dataSource = computed(() => {
-            let index = 0;
-            return Tools.BreakReference(this.dataSource())
-                .map((item) => Object.assign(item, { index: index++ }));
+            return [...this.dataSource()].map((item, index) => Object.assign(item, { index }));
         });
         //computed
         this._isDraggable = computed(() => {
@@ -3406,38 +3413,46 @@ class CoerList {
             return item['index'];
         };
         /** */
-        this._showBackButton = () => {
-            return this.showBackButton()
-                && !this.isLoading();
+        this._buttonConfig = (item, property) => {
+            return !this.isLoading()
+                && Tools.HasProperty(this.buttonsConfig(), property)
+                && (Tools.IsBooleanTrue(this.buttonsConfig()[property])
+                    || (Tools.IsFunction(this.buttonsConfig()[property])
+                        && this.buttonsConfig()[property]({
+                            index: item.index,
+                            item
+                        })));
         };
         /** */
-        this._showDeleteButtonByRow = (item) => {
-            const showButton = this.showDeleteButtonByRow();
-            return (typeof showButton === 'boolean')
-                ? showButton && !this.isLoading()
-                : showButton(item, item.index) === true && !this.isLoading();
-        };
+        this._ButtonByRowColorDelete = computed(() => {
+            return Tools.IsNotOnlyWhiteSpace(this.buttonsConfig()?.deleteButtonColor)
+                ? this.buttonsConfig()?.deleteButtonColor
+                : 'danger';
+        });
         /** */
-        this._showGoButtonByRow = (item) => {
-            const showButton = this.showGoButtonByRow();
-            return (typeof showButton === 'boolean')
-                ? showButton && !this.isLoading()
-                : showButton(item, item.index) === true && !this.isLoading();
-        };
+        this._ButtonByRowColorGo = computed(() => {
+            return Tools.IsNotOnlyWhiteSpace(this.buttonsConfig()?.goButtonColor)
+                ? this.buttonsConfig()?.goButtonColor
+                : 'navigation';
+        });
+    }
+    //AfterViewInit
+    ngAfterViewInit() {
+        Tools.Sleep().then(_ => {
+            this._list = HTMLElements.GetElement(`#${this._id}`);
+            this._listGrandFather = HTMLElements.GetGrandfather(this._list);
+            this._listHeader = HTMLElements.GetElement(`#${this._id}-header`);
+        });
     }
     //getter
     get _height() {
-        let height = this.height();
-        if (height == 'full') {
-            const TOOLBAR = 45;
-            const PAGE_HEADER = 70;
-            const LIST_HEADER = document.getElementById(`${this._id}-header`);
-            const HEADER = (LIST_HEADER && LIST_HEADER.children.length > 0) ? 50 : 0;
-            const MARGIN = 50;
-            const PADDING = 50;
-            height = (Screen.WINDOW_HEIGHT - TOOLBAR - PAGE_HEADER - MARGIN - HEADER - PADDING) + 'px';
-        }
-        return height;
+        return (this.height() == 'full')
+            ? (Screen.WINDOW_HEIGHT - (45 + 15 //Toolbar && Margin
+                + HTMLElements.GetOffsetTop(this._list)
+                + Number(HTMLElements.GetCssValue(this._listGrandFather, 'padding-top').split('px')[0])
+                + Number(HTMLElements.GetCssValue(this._listGrandFather, 'padding-bottom').split('px')[0])
+                + Number(HTMLElements.GetElementHeight(this._listHeader).split('px')[0]))) + 'px'
+            : this.height();
     }
     /** */
     _GetTemplate(item) {
@@ -3454,11 +3469,11 @@ class CoerList {
         this.onDrop.emit(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerList, isStandalone: false, selector: "coer-list", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, propDisplay: { classPropertyName: "propDisplay", publicName: "propDisplay", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, showDeleteButtonByRow: { classPropertyName: "showDeleteButtonByRow", publicName: "showDeleteButtonByRow", isSignal: true, isRequired: false, transformFunction: null }, showGoButtonByRow: { classPropertyName: "showGoButtonByRow", publicName: "showGoButtonByRow", isSignal: true, isRequired: false, transformFunction: null }, showBackButton: { classPropertyName: "showBackButton", publicName: "showBackButton", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDraggable: { classPropertyName: "isDraggable", publicName: "isDraggable", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", 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 }, 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 } }, outputs: { onDrop: "onDrop", onSort: "onSort", onClick: "onClick", onDoubleClick: "onDoubleClick", onClickDelete: "onClickDelete", onClickGo: "onClickGo", onClickBack: "onClickBack" }, ngImport: i0, template: "<div [id]=\"_id\" class=\"coer-list\" [ngStyle]=\"{ \r\n  'margin-top': marginTop(), \r\n  'margin-right': marginRight(), \r\n  'margin-bottom': marginBottom(), \r\n  'margin-left': marginLeft(), \r\n  }\">\r\n\r\n  @if(isLoading()) {\r\n    <!-- Grid Message -->\r\n    <div class=\"loading\">\r\n        <i class=\"spinner-border\"></i>\r\n        <span class=\"fa-fade\">Loading</span>\r\n    </div>\r\n  }\r\n\r\n  @else if(dataSource().length <= 0) {\r\n    <div class=\"no-data\"> No Data </div>\r\n  }\r\n\r\n  <header [id]=\"_id + '-header'\" class=\"row\"> \r\n    @if(header().length > 0 || headerIcon().length > 0) {\r\n      <div class=\"col-auto me-auto\">\r\n        <h6>\r\n          @if(headerIcon().length > 0) {\r\n            <i [class]=\"headerIcon()\"></i> \r\n          }\r\n\r\n          @if(header().length > 0) {\r\n            <span>{{ header() }}</span> \r\n          }\r\n        </h6>        \r\n      </div>\r\n    }\r\n\r\n    @if(_showBackButton()) {\r\n      <div class=\"col-auto ps-2 pe-0\">         \r\n        <coer-button\r\n            type=\"icon-outline\"\r\n            color=\"secondary\"\r\n            icon=\"back\"\r\n            tooltip=\"Back\" \r\n            (onClick)=\"onClickBack.emit()\"\r\n        ></coer-button>       \r\n      </div>\r\n    }\r\n    \r\n    <!-- Search -->\r\n    @if(showSearch() && dataSource().length > 0) {\r\n      <div class=\"col-auto pe-0\">\r\n          <coer-textbox\r\n              #inputSearch \r\n              placeholder=\"Search\"\r\n              [isDisabled]=\"isLoading()\"\r\n              [selectOnFocus]=\"true\"\r\n              width=\"250px\"\r\n              marginTop=\"5px\"\r\n              marginBottom=\"5px\"\r\n              [showSearchIcon]=\"true\"\r\n              [showClearIcon]=\"true\"\r\n          ></coer-textbox>\r\n      </div>\r\n    }\r\n  </header>\r\n\r\n  <div [ngStyle]=\"{ \r\n    'width': width(), \r\n    'min-Width': MinWidth(), \r\n    'max-Width': MaxWidth(), \r\n    }\">\r\n    <ul cdkDropList (cdkDropListDropped)=\"_Drop($event)\" class='list-group coer-list'\r\n        [ngStyle]=\"{ \r\n          'height': _height, \r\n          'min-height': minHeight(), \r\n          'max-height': maxHeight(), \r\n          'd-none': dataSource().length <= 0  \r\n          }\">\r\n      \r\n      @for (item of _dataSource(); track _GetIndexRow(item)) {\r\n        <li cdkDrag \r\n          class=\"list-group-item coer-list-box\" \r\n          cdkDragBoundary=\"ul.coer-list\"\r\n          (click)=\"onClick.emit(item)\" \r\n          (dblclick)=\"onDoubleClick.emit(item)\">\r\n  \r\n          <div *cdkDragPlaceholder class=\"coer-list-placeholder cursor-grabbing\"></div>\r\n          <div class=\"coer-list-content\"> \r\n            @if(_hasTemplate()) {\r\n              <div [innerHTML]=\"_GetTemplate(item) | html\" class=\"template\"></div>\r\n            }\r\n  \r\n            @else {\r\n              <div> {{ _GetDisplay(item) }} </div> \r\n            }            \r\n            \r\n            <div>\r\n              @if(_showDeleteButtonByRow(item)) {\r\n                <coer-button\r\n                  type=\"icon-no-border\"\r\n                  color=\"secondary\"\r\n                  icon=\"delete\"      \r\n                  (onClick)=\"onClickDelete.emit(item)\"\r\n                ></coer-button>\r\n              } \r\n  \r\n              @if(_showGoButtonByRow(item)) {\r\n                <coer-button\r\n                  type=\"icon-no-border\"\r\n                  color=\"secondary\"\r\n                  icon=\"go\"   \r\n                  marginLeft=\"5px\"   \r\n                  (onClick)=\"onClickGo.emit(item)\"\r\n                ></coer-button>\r\n              } \r\n               \r\n              <i cdkDragHandle [ngClass]=\"{ \r\n                'fa-solid fa-grip-vertical text-secondary ps-2': true,\r\n                'cursor-grab': true, \r\n                'cursor-grabbing': false, \r\n                'd-none': !_isDraggable()\r\n              }\"></i>               \r\n            </div>           \r\n          </div>  \r\n        </li> \r\n      } \r\n    </ul>\r\n  </div>\r\n</div>", styles: ["div.coer-list header{align-items:center;justify-content:flex-end;padding-right:10px;margin:0}div.coer-list header h6{display:flex;align-items:center;gap:10px;min-height:40px;max-height:40px;margin-top:5px;margin-bottom:5px}div.coer-list header>div{display:flex;align-items:baseline;position:relative;z-index:1}div.coer-list ul.coer-list{width:100%;border:solid 1px #ccc;display:block;background:var(--white);border-radius:4px;overflow:auto}div.coer-list li.coer-list-box{padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:var(--white);font-size:14px}div.coer-list li.coer-list-box div.coer-list-content{width:100%;display:flex;align-items:center;justify-content:space-between}div.coer-list .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}div.coer-list .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list .coer-list-box:last-child{border:none}div.coer-list .coer-list.cdk-drop-list-dragging .coer-list-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.coer-list-placeholder{background:#ccc;border:dotted 3px #999;min-height:40px;transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.cdk-drag-placeholder,div.coer-list ul.cdk-drop-list-dragging,div.coer-list ul.cdk-drop-list-dragging *{cursor:grabbing}div.coer-list div.loading,div.coer-list div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:var(--gray);z-index:1}div.coer-list div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important}div.coer-list div.loading span.fa-fade{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$6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$6.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i2$6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }, { 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: CoerList, isStandalone: false, selector: "coer-list", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, propDisplay: { classPropertyName: "propDisplay", publicName: "propDisplay", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, showGoButtonByRow: { classPropertyName: "showGoButtonByRow", publicName: "showGoButtonByRow", isSignal: true, isRequired: false, transformFunction: null }, showBackButton: { classPropertyName: "showBackButton", publicName: "showBackButton", isSignal: true, isRequired: false, transformFunction: null }, buttonsConfig: { classPropertyName: "buttonsConfig", publicName: "buttonsConfig", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDraggable: { classPropertyName: "isDraggable", publicName: "isDraggable", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", 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 }, 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 } }, outputs: { onDrop: "onDrop", onSort: "onSort", onClick: "onClick", onDoubleClick: "onDoubleClick", onClickDelete: "onClickDelete", onClickGo: "onClickGo", onClickBack: "onClickBack" }, ngImport: i0, template: "<div [id]=\"_id\" class=\"coer-list\" [ngStyle]=\"{ \r\n    'margin-top': marginTop(), \r\n    'margin-right': marginRight(), \r\n    'margin-bottom': marginBottom(), \r\n    'margin-left': marginLeft(), \r\n    }\">\r\n\r\n    <!-- Message -->\r\n    @if(isLoading()) {\r\n        <div class=\"loading\">\r\n            <i class=\"spinner-border\"></i>\r\n            <span class=\"fa-fade\">Loading</span>\r\n        </div>\r\n    }\r\n\r\n    @else if(dataSource().length <= 0) {\r\n        <div class=\"no-data\"> No Data </div>\r\n    }\r\n\r\n    <header [id]=\"_id + '-header'\" class=\"row\"> \r\n        @if(header().length > 0 || headerIcon().length > 0) {\r\n            <div class=\"col-auto me-auto\">\r\n                <h6>\r\n                    @if(headerIcon().length > 0) {\r\n                        <i [class]=\"headerIcon()\"></i> \r\n                    }\r\n\r\n                    @if(header().length > 0) {\r\n                        <span>{{ header() }}</span> \r\n                    }\r\n                </h6>        \r\n            </div>\r\n        }\r\n\r\n        @if(_buttonConfig(null, 'showBackButton')) {\r\n            <div class=\"col-auto padding-left-5px padding-right-0px padding-y-5px\">         \r\n                <coer-button\r\n                    type=\"icon-outline\"\r\n                    color=\"secondary\"\r\n                    icon=\"back\"\r\n                    tooltip=\"Back\" \r\n                    (onClick)=\"onClickBack.emit()\"\r\n                ></coer-button>       \r\n            </div>\r\n        }\r\n    \r\n        <!-- Search -->\r\n        @if(showSearch() && dataSource().length > 0) {\r\n            <div class=\"col-auto padding-right-0px padding-y-5px\">\r\n                <coer-textbox\r\n                    #inputSearch \r\n                    placeholder=\"Search\"\r\n                    [isDisabled]=\"isLoading()\"\r\n                    [selectOnFocus]=\"true\"\r\n                    width=\"250px\"\r\n                    marginTop=\"5px\"\r\n                    marginBottom=\"5px\"\r\n                    [showSearchIcon]=\"true\"\r\n                    [showClearIcon]=\"true\"\r\n                ></coer-textbox>\r\n            </div>\r\n        }\r\n    </header>\r\n\r\n    <div [ngStyle]=\"{ \r\n        'width': width(), \r\n        'min-Width': MinWidth(), \r\n        'max-Width': MaxWidth(), \r\n    }\">\r\n        <ul cdkDropList (cdkDropListDropped)=\"_Drop($event)\" class='list-group coer-list'\r\n            [ngStyle]=\"{ \r\n                'height': _height, \r\n                'min-height': minHeight(), \r\n                'max-height': maxHeight(), \r\n                'display-none': dataSource().length <= 0  \r\n            }\">\r\n\r\n            @for (item of _dataSource(); track _GetIndexRow(item)) {\r\n                <li cdkDrag \r\n                    class=\"list-group-item coer-list-item\" \r\n                    cdkDragBoundary=\"ul.coer-list\"\r\n                    (click)=\"onClick.emit(item)\" \r\n                    (dblclick)=\"onDoubleClick.emit(item)\">\r\n                \r\n                    <div *cdkDragPlaceholder class=\"coer-list-placeholder cursor-grabbing\"></div>\r\n\r\n                    <div class=\"coer-list-content\"> \r\n                        @if(_hasTemplate()) {\r\n                            <div [innerHTML]=\"_GetTemplate(item) | html\" class=\"template\"></div>\r\n                        }\r\n                    \r\n                        @else {\r\n                            <div> {{ _GetDisplay(item) }} </div> \r\n                        }            \r\n\r\n                        <div class=\"coer-list-actions\">\r\n                            @if(_buttonConfig(item, 'showDeleteButtonByRow')) {\r\n                                <coer-button\r\n                                    type=\"icon-no-border\"\r\n                                    [color]=\"_ButtonByRowColorDelete()\"\r\n                                    icon=\"delete\"      \r\n                                    (onClick)=\"onClickDelete.emit(item)\"\r\n                                ></coer-button>\r\n                            } \r\n                        \r\n                            @if(_buttonConfig(item, 'showGoButtonByRow')) {\r\n                                <coer-button\r\n                                    type=\"icon-no-border\"\r\n                                    [color]=\"_ButtonByRowColorGo()\"\r\n                                    icon=\"go\"   \r\n                                    marginLeft=\"5px\"   \r\n                                    (onClick)=\"onClickGo.emit(item)\"\r\n                                ></coer-button>\r\n                            } \r\n\r\n                            <i cdkDragHandle [ngClass]=\"{ \r\n                                'icon-grip-vertical': true,\r\n                                'cursor-grab'       : true, \r\n                                'cursor-grabbing'   : false, \r\n                                'display-none'      : !_isDraggable()\r\n                            }\"></i>               \r\n                        </div>           \r\n                    </div>  \r\n                </li> \r\n            } \r\n        </ul>\r\n    </div>\r\n</div>", styles: ["div.coer-list header{align-items:center;justify-content:flex-end;padding-right:10px;margin:0}div.coer-list header h6{display:flex;align-items:center;gap:10px;min-height:40px;max-height:40px;margin-top:5px;margin-bottom:5px}div.coer-list header>div{display:flex;align-items:baseline;position:relative;z-index:1}div.coer-list ul.coer-list{width:100%;border:solid 1px #ccc;display:block;background:var(--white);border-radius:4px;overflow:auto}div.coer-list ul.coer-list li.coer-list-item{padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:var(--white);font-size:14px}div.coer-list ul.coer-list li.coer-list-item div.coer-list-content{width:100%;display:flex;align-items:center;justify-content:space-between}div.coer-list ul.coer-list li.coer-list-item div.coer-list-content div.coer-list-actions{display:inherit;align-items:center}div.coer-list ul.coer-list li.coer-list-item div.coer-list-content div.coer-list-actions i.icon-grip-vertical{color:var(--gray)!important;margin-left:6px!important}div.coer-list ul.coer-list .coer-list-item:last-child{border:none}div.coer-list .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}div.coer-list .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list .coer-list.cdk-drop-list-dragging .coer-list-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.coer-list-placeholder{background:#ccc;border:dotted 3px #999;min-height:40px;transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.cdk-drag-placeholder,div.coer-list ul.cdk-drop-list-dragging,div.coer-list ul.cdk-drop-list-dragging *{cursor:grabbing}div.coer-list div.loading,div.coer-list div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:var(--gray);z-index:1}div.coer-list div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important}div.coer-list div.loading span.fa-fade{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$6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$6.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i2$6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }, { 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: CoerList, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-list', standalone: false, template: "<div [id]=\"_id\" class=\"coer-list\" [ngStyle]=\"{ \r\n  'margin-top': marginTop(), \r\n  'margin-right': marginRight(), \r\n  'margin-bottom': marginBottom(), \r\n  'margin-left': marginLeft(), \r\n  }\">\r\n\r\n  @if(isLoading()) {\r\n    <!-- Grid Message -->\r\n    <div class=\"loading\">\r\n        <i class=\"spinner-border\"></i>\r\n        <span class=\"fa-fade\">Loading</span>\r\n    </div>\r\n  }\r\n\r\n  @else if(dataSource().length <= 0) {\r\n    <div class=\"no-data\"> No Data </div>\r\n  }\r\n\r\n  <header [id]=\"_id + '-header'\" class=\"row\"> \r\n    @if(header().length > 0 || headerIcon().length > 0) {\r\n      <div class=\"col-auto me-auto\">\r\n        <h6>\r\n          @if(headerIcon().length > 0) {\r\n            <i [class]=\"headerIcon()\"></i> \r\n          }\r\n\r\n          @if(header().length > 0) {\r\n            <span>{{ header() }}</span> \r\n          }\r\n        </h6>        \r\n      </div>\r\n    }\r\n\r\n    @if(_showBackButton()) {\r\n      <div class=\"col-auto ps-2 pe-0\">         \r\n        <coer-button\r\n            type=\"icon-outline\"\r\n            color=\"secondary\"\r\n            icon=\"back\"\r\n            tooltip=\"Back\" \r\n            (onClick)=\"onClickBack.emit()\"\r\n        ></coer-button>       \r\n      </div>\r\n    }\r\n    \r\n    <!-- Search -->\r\n    @if(showSearch() && dataSource().length > 0) {\r\n      <div class=\"col-auto pe-0\">\r\n          <coer-textbox\r\n              #inputSearch \r\n              placeholder=\"Search\"\r\n              [isDisabled]=\"isLoading()\"\r\n              [selectOnFocus]=\"true\"\r\n              width=\"250px\"\r\n              marginTop=\"5px\"\r\n              marginBottom=\"5px\"\r\n              [showSearchIcon]=\"true\"\r\n              [showClearIcon]=\"true\"\r\n          ></coer-textbox>\r\n      </div>\r\n    }\r\n  </header>\r\n\r\n  <div [ngStyle]=\"{ \r\n    'width': width(), \r\n    'min-Width': MinWidth(), \r\n    'max-Width': MaxWidth(), \r\n    }\">\r\n    <ul cdkDropList (cdkDropListDropped)=\"_Drop($event)\" class='list-group coer-list'\r\n        [ngStyle]=\"{ \r\n          'height': _height, \r\n          'min-height': minHeight(), \r\n          'max-height': maxHeight(), \r\n          'd-none': dataSource().length <= 0  \r\n          }\">\r\n      \r\n      @for (item of _dataSource(); track _GetIndexRow(item)) {\r\n        <li cdkDrag \r\n          class=\"list-group-item coer-list-box\" \r\n          cdkDragBoundary=\"ul.coer-list\"\r\n          (click)=\"onClick.emit(item)\" \r\n          (dblclick)=\"onDoubleClick.emit(item)\">\r\n  \r\n          <div *cdkDragPlaceholder class=\"coer-list-placeholder cursor-grabbing\"></div>\r\n          <div class=\"coer-list-content\"> \r\n            @if(_hasTemplate()) {\r\n              <div [innerHTML]=\"_GetTemplate(item) | html\" class=\"template\"></div>\r\n            }\r\n  \r\n            @else {\r\n              <div> {{ _GetDisplay(item) }} </div> \r\n            }            \r\n            \r\n            <div>\r\n              @if(_showDeleteButtonByRow(item)) {\r\n                <coer-button\r\n                  type=\"icon-no-border\"\r\n                  color=\"secondary\"\r\n                  icon=\"delete\"      \r\n                  (onClick)=\"onClickDelete.emit(item)\"\r\n                ></coer-button>\r\n              } \r\n  \r\n              @if(_showGoButtonByRow(item)) {\r\n                <coer-button\r\n                  type=\"icon-no-border\"\r\n                  color=\"secondary\"\r\n                  icon=\"go\"   \r\n                  marginLeft=\"5px\"   \r\n                  (onClick)=\"onClickGo.emit(item)\"\r\n                ></coer-button>\r\n              } \r\n               \r\n              <i cdkDragHandle [ngClass]=\"{ \r\n                'fa-solid fa-grip-vertical text-secondary ps-2': true,\r\n                'cursor-grab': true, \r\n                'cursor-grabbing': false, \r\n                'd-none': !_isDraggable()\r\n              }\"></i>               \r\n            </div>           \r\n          </div>  \r\n        </li> \r\n      } \r\n    </ul>\r\n  </div>\r\n</div>", styles: ["div.coer-list header{align-items:center;justify-content:flex-end;padding-right:10px;margin:0}div.coer-list header h6{display:flex;align-items:center;gap:10px;min-height:40px;max-height:40px;margin-top:5px;margin-bottom:5px}div.coer-list header>div{display:flex;align-items:baseline;position:relative;z-index:1}div.coer-list ul.coer-list{width:100%;border:solid 1px #ccc;display:block;background:var(--white);border-radius:4px;overflow:auto}div.coer-list li.coer-list-box{padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:var(--white);font-size:14px}div.coer-list li.coer-list-box div.coer-list-content{width:100%;display:flex;align-items:center;justify-content:space-between}div.coer-list .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}div.coer-list .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list .coer-list-box:last-child{border:none}div.coer-list .coer-list.cdk-drop-list-dragging .coer-list-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.coer-list-placeholder{background:#ccc;border:dotted 3px #999;min-height:40px;transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.cdk-drag-placeholder,div.coer-list ul.cdk-drop-list-dragging,div.coer-list ul.cdk-drop-list-dragging *{cursor:grabbing}div.coer-list div.loading,div.coer-list div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:var(--gray);z-index:1}div.coer-list div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important}div.coer-list div.loading span.fa-fade{position:relative!important}\n"] }]
+            args: [{ selector: 'coer-list', standalone: false, template: "<div [id]=\"_id\" class=\"coer-list\" [ngStyle]=\"{ \r\n    'margin-top': marginTop(), \r\n    'margin-right': marginRight(), \r\n    'margin-bottom': marginBottom(), \r\n    'margin-left': marginLeft(), \r\n    }\">\r\n\r\n    <!-- Message -->\r\n    @if(isLoading()) {\r\n        <div class=\"loading\">\r\n            <i class=\"spinner-border\"></i>\r\n            <span class=\"fa-fade\">Loading</span>\r\n        </div>\r\n    }\r\n\r\n    @else if(dataSource().length <= 0) {\r\n        <div class=\"no-data\"> No Data </div>\r\n    }\r\n\r\n    <header [id]=\"_id + '-header'\" class=\"row\"> \r\n        @if(header().length > 0 || headerIcon().length > 0) {\r\n            <div class=\"col-auto me-auto\">\r\n                <h6>\r\n                    @if(headerIcon().length > 0) {\r\n                        <i [class]=\"headerIcon()\"></i> \r\n                    }\r\n\r\n                    @if(header().length > 0) {\r\n                        <span>{{ header() }}</span> \r\n                    }\r\n                </h6>        \r\n            </div>\r\n        }\r\n\r\n        @if(_buttonConfig(null, 'showBackButton')) {\r\n            <div class=\"col-auto padding-left-5px padding-right-0px padding-y-5px\">         \r\n                <coer-button\r\n                    type=\"icon-outline\"\r\n                    color=\"secondary\"\r\n                    icon=\"back\"\r\n                    tooltip=\"Back\" \r\n                    (onClick)=\"onClickBack.emit()\"\r\n                ></coer-button>       \r\n            </div>\r\n        }\r\n    \r\n        <!-- Search -->\r\n        @if(showSearch() && dataSource().length > 0) {\r\n            <div class=\"col-auto padding-right-0px padding-y-5px\">\r\n                <coer-textbox\r\n                    #inputSearch \r\n                    placeholder=\"Search\"\r\n                    [isDisabled]=\"isLoading()\"\r\n                    [selectOnFocus]=\"true\"\r\n                    width=\"250px\"\r\n                    marginTop=\"5px\"\r\n                    marginBottom=\"5px\"\r\n                    [showSearchIcon]=\"true\"\r\n                    [showClearIcon]=\"true\"\r\n                ></coer-textbox>\r\n            </div>\r\n        }\r\n    </header>\r\n\r\n    <div [ngStyle]=\"{ \r\n        'width': width(), \r\n        'min-Width': MinWidth(), \r\n        'max-Width': MaxWidth(), \r\n    }\">\r\n        <ul cdkDropList (cdkDropListDropped)=\"_Drop($event)\" class='list-group coer-list'\r\n            [ngStyle]=\"{ \r\n                'height': _height, \r\n                'min-height': minHeight(), \r\n                'max-height': maxHeight(), \r\n                'display-none': dataSource().length <= 0  \r\n            }\">\r\n\r\n            @for (item of _dataSource(); track _GetIndexRow(item)) {\r\n                <li cdkDrag \r\n                    class=\"list-group-item coer-list-item\" \r\n                    cdkDragBoundary=\"ul.coer-list\"\r\n                    (click)=\"onClick.emit(item)\" \r\n                    (dblclick)=\"onDoubleClick.emit(item)\">\r\n                \r\n                    <div *cdkDragPlaceholder class=\"coer-list-placeholder cursor-grabbing\"></div>\r\n\r\n                    <div class=\"coer-list-content\"> \r\n                        @if(_hasTemplate()) {\r\n                            <div [innerHTML]=\"_GetTemplate(item) | html\" class=\"template\"></div>\r\n                        }\r\n                    \r\n                        @else {\r\n                            <div> {{ _GetDisplay(item) }} </div> \r\n                        }            \r\n\r\n                        <div class=\"coer-list-actions\">\r\n                            @if(_buttonConfig(item, 'showDeleteButtonByRow')) {\r\n                                <coer-button\r\n                                    type=\"icon-no-border\"\r\n                                    [color]=\"_ButtonByRowColorDelete()\"\r\n                                    icon=\"delete\"      \r\n                                    (onClick)=\"onClickDelete.emit(item)\"\r\n                                ></coer-button>\r\n                            } \r\n                        \r\n                            @if(_buttonConfig(item, 'showGoButtonByRow')) {\r\n                                <coer-button\r\n                                    type=\"icon-no-border\"\r\n                                    [color]=\"_ButtonByRowColorGo()\"\r\n                                    icon=\"go\"   \r\n                                    marginLeft=\"5px\"   \r\n                                    (onClick)=\"onClickGo.emit(item)\"\r\n                                ></coer-button>\r\n                            } \r\n\r\n                            <i cdkDragHandle [ngClass]=\"{ \r\n                                'icon-grip-vertical': true,\r\n                                'cursor-grab'       : true, \r\n                                'cursor-grabbing'   : false, \r\n                                'display-none'      : !_isDraggable()\r\n                            }\"></i>               \r\n                        </div>           \r\n                    </div>  \r\n                </li> \r\n            } \r\n        </ul>\r\n    </div>\r\n</div>", styles: ["div.coer-list header{align-items:center;justify-content:flex-end;padding-right:10px;margin:0}div.coer-list header h6{display:flex;align-items:center;gap:10px;min-height:40px;max-height:40px;margin-top:5px;margin-bottom:5px}div.coer-list header>div{display:flex;align-items:baseline;position:relative;z-index:1}div.coer-list ul.coer-list{width:100%;border:solid 1px #ccc;display:block;background:var(--white);border-radius:4px;overflow:auto}div.coer-list ul.coer-list li.coer-list-item{padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:var(--white);font-size:14px}div.coer-list ul.coer-list li.coer-list-item div.coer-list-content{width:100%;display:flex;align-items:center;justify-content:space-between}div.coer-list ul.coer-list li.coer-list-item div.coer-list-content div.coer-list-actions{display:inherit;align-items:center}div.coer-list ul.coer-list li.coer-list-item div.coer-list-content div.coer-list-actions i.icon-grip-vertical{color:var(--gray)!important;margin-left:6px!important}div.coer-list ul.coer-list .coer-list-item:last-child{border:none}div.coer-list .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}div.coer-list .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list .coer-list.cdk-drop-list-dragging .coer-list-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.coer-list-placeholder{background:#ccc;border:dotted 3px #999;min-height:40px;transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.cdk-drag-placeholder,div.coer-list ul.cdk-drop-list-dragging,div.coer-list ul.cdk-drop-list-dragging *{cursor:grabbing}div.coer-list div.loading,div.coer-list div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:var(--gray);z-index:1}div.coer-list div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important}div.coer-list div.loading span.fa-fade{position:relative!important}\n"] }]
         }] });
 
 class CoerMenuOption {
@@ -4138,11 +4153,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;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;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 {