coer-elements 2.0.66 → 2.0.68

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

@@ -6,7 +6,7 @@ export declare class CoerButton implements AfterViewInit {
     protected _innerButton: HTMLElement;
     protected _innerButtonIcon: HTMLElement;
     id: import("@angular/core").InputSignal<string>;
-    color: import("@angular/core").InputSignal<"default" | "primary" | "secondary" | "success" | "warning" | "danger" | "navigation" | "information" | "dark" | "light">;
+    color: import("@angular/core").InputSignal<"primary" | "secondary" | "success" | "warning" | "danger" | "navigation" | "information" | "dark" | "default" | "light">;
     type: import("@angular/core").InputSignal<"filled" | "outline" | "icon" | "icon-outline" | "icon-no-border">;
     typeBreakpoint: import("@angular/core").InputSignal<IButtonType>;
     icon: import("@angular/core").InputSignal<string | null | undefined>;

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

@@ -23,7 +23,7 @@ export declare class CoerDateBox extends ControlValue implements AfterViewInit,
     value: import("@angular/core").InputSignal<string | null | undefined>;
     label: import("@angular/core").InputSignal<string>;
     placeholder: import("@angular/core").InputSignal<string>;
-    textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
+    textPosition: import("@angular/core").InputSignal<"left" | "center" | "right">;
     isWritable: import("@angular/core").InputSignal<boolean>;
     isInvalid: import("@angular/core").InputSignal<boolean>;
     isValid: import("@angular/core").InputSignal<boolean>;

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

@@ -14,7 +14,7 @@ export declare class CoerDropdown<T> extends ControlValue implements AfterViewIn
     id: import("@angular/core").InputSignal<string>;
     value: import("@angular/core").InputSignal<string | null | undefined>;
     label: import("@angular/core").InputSignal<string>;
-    color: import("@angular/core").InputSignal<"default" | "primary" | "secondary" | "success" | "warning" | "danger" | "navigation" | "information" | "dark" | "light">;
+    color: import("@angular/core").InputSignal<"primary" | "secondary" | "success" | "warning" | "danger" | "navigation" | "information" | "dark" | "default" | "light">;
     type: import("@angular/core").InputSignal<"filled" | "outline">;
     dataSource: import("@angular/core").InputSignal<T[]>;
     propDisplay: import("@angular/core").InputSignal<string>;

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

@@ -26,9 +26,9 @@ export declare class CoerGridCell<T> {
     /** */
     protected _GetCellValue: import("@angular/core").Signal<string>;
     /** */
-    protected _GetTextAlignX: import("@angular/core").Signal<"flex-start" | "center" | "flex-end">;
+    protected _GetTextAlignX: import("@angular/core").Signal<"center" | "flex-start" | "flex-end">;
     /** */
-    protected _GetTextAlignY: import("@angular/core").Signal<"flex-start" | "center" | "flex-end">;
+    protected _GetTextAlignY: import("@angular/core").Signal<"center" | "flex-start" | "flex-end">;
     /** */
     protected _GetTextBreak: import("@angular/core").Signal<"break-word" | "keep-all">;
     /** */

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

@@ -43,7 +43,7 @@ export declare class CoerGridHeader<T> implements AfterViewInit {
     /** */
     protected _GetPath: (button: IGridHeaderExportButton) => string | (string | number)[];
     /** */
-    protected _ColorButton: (button: IGridHeaderButton | IGridHeaderImportButton | IGridHeaderExportButton) => "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "navigation" | "information" | "dark" | "light";
+    protected _ColorButton: (button: IGridHeaderButton | IGridHeaderImportButton | IGridHeaderExportButton) => "primary" | "secondary" | "success" | "warning" | "danger" | "navigation" | "information" | "dark" | "default" | "light";
     /** */
     protected _TooltipButton: (button: IGridHeaderButton | IGridHeaderImportButton | IGridHeaderExportButton, tooltip: string) => string;
     /** */

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

@@ -1,14 +1,19 @@
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import { AfterViewInit } from '@angular/core';
+import { IListButton } from 'coer-elements/interfaces';
 import * as i0 from "@angular/core";
-export declare class CoerList<T> {
+export declare class CoerList<T> implements AfterViewInit {
+    protected _listHeader: HTMLElement | null;
+    protected _listGrandFather: HTMLElement | null;
+    protected _list: HTMLElement | null;
     protected readonly _id: string;
     dataSource: import("@angular/core").InputSignal<T[]>;
     propDisplay: import("@angular/core").InputSignal<string>;
     header: import("@angular/core").InputSignal<string>;
     headerIcon: import("@angular/core").InputSignal<string>;
-    showDeleteButtonByRow: import("@angular/core").InputSignal<boolean | ((item: T, index: number) => boolean)>;
     showGoButtonByRow: import("@angular/core").InputSignal<boolean | ((item: T, index: number) => boolean)>;
     showBackButton: import("@angular/core").InputSignal<boolean>;
+    buttonsConfig: import("@angular/core").InputSignal<IListButton<T>>;
     isLoading: import("@angular/core").InputSignal<boolean>;
     isDraggable: import("@angular/core").InputSignal<boolean>;
     showSearch: import("@angular/core").InputSignal<boolean>;
@@ -30,6 +35,7 @@ export declare class CoerList<T> {
     onClickDelete: import("@angular/core").OutputEmitterRef<T>;
     onClickGo: import("@angular/core").OutputEmitterRef<T>;
     onClickBack: import("@angular/core").OutputEmitterRef<void>;
+    ngAfterViewInit(): void;
     protected _dataSource: import("@angular/core").Signal<T[]>;
     protected _isDraggable: import("@angular/core").Signal<boolean>;
     protected _hasTemplate: import("@angular/core").Signal<boolean>;
@@ -42,13 +48,13 @@ export declare class CoerList<T> {
     /** */
     protected _GetTemplate(item: any): string;
     /** */
-    protected _showBackButton: () => boolean;
+    protected _buttonConfig: (item: any, property: "showBackButton" | "showDeleteButtonByRow" | "showGoButtonByRow") => boolean;
     /** */
-    protected _showDeleteButtonByRow: (item: any) => boolean;
+    protected _Drop(event: CdkDragDrop<T[]>): void;
     /** */
-    protected _showGoButtonByRow: (item: any) => boolean;
+    protected _ButtonByRowColorDelete: import("@angular/core").Signal<"primary" | "secondary" | "success" | "warning" | "danger" | "navigation" | "information" | "dark">;
     /** */
-    protected _Drop(event: CdkDragDrop<T[]>): void;
+    protected _ButtonByRowColorGo: import("@angular/core").Signal<"primary" | "secondary" | "success" | "warning" | "danger" | "navigation" | "information" | "dark">;
     static ɵfac: i0.ɵɵFactoryDeclaration<CoerList<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CoerList<any>, "coer-list", never, { "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "propDisplay": { "alias": "propDisplay"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "headerIcon": { "alias": "headerIcon"; "required": false; "isSignal": true; }; "showDeleteButtonByRow": { "alias": "showDeleteButtonByRow"; "required": false; "isSignal": true; }; "showGoButtonByRow": { "alias": "showGoButtonByRow"; "required": false; "isSignal": true; }; "showBackButton": { "alias": "showBackButton"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isDraggable": { "alias": "isDraggable"; "required": false; "isSignal": true; }; "showSearch": { "alias": "showSearch"; "required": false; "isSignal": true; }; "template": { "alias": "template"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "MinWidth": { "alias": "MinWidth"; "required": false; "isSignal": true; }; "MaxWidth": { "alias": "MaxWidth"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "marginTop": { "alias": "marginTop"; "required": false; "isSignal": true; }; "marginRight": { "alias": "marginRight"; "required": false; "isSignal": true; }; "marginBottom": { "alias": "marginBottom"; "required": false; "isSignal": true; }; "marginLeft": { "alias": "marginLeft"; "required": false; "isSignal": true; }; }, { "onDrop": "onDrop"; "onSort": "onSort"; "onClick": "onClick"; "onDoubleClick": "onDoubleClick"; "onClickDelete": "onClickDelete"; "onClickGo": "onClickGo"; "onClickBack": "onClickBack"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CoerList<any>, "coer-list", never, { "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "propDisplay": { "alias": "propDisplay"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "headerIcon": { "alias": "headerIcon"; "required": false; "isSignal": true; }; "showGoButtonByRow": { "alias": "showGoButtonByRow"; "required": false; "isSignal": true; }; "showBackButton": { "alias": "showBackButton"; "required": false; "isSignal": true; }; "buttonsConfig": { "alias": "buttonsConfig"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isDraggable": { "alias": "isDraggable"; "required": false; "isSignal": true; }; "showSearch": { "alias": "showSearch"; "required": false; "isSignal": true; }; "template": { "alias": "template"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "MinWidth": { "alias": "MinWidth"; "required": false; "isSignal": true; }; "MaxWidth": { "alias": "MaxWidth"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "marginTop": { "alias": "marginTop"; "required": false; "isSignal": true; }; "marginRight": { "alias": "marginRight"; "required": false; "isSignal": true; }; "marginBottom": { "alias": "marginBottom"; "required": false; "isSignal": true; }; "marginLeft": { "alias": "marginLeft"; "required": false; "isSignal": true; }; }, { "onDrop": "onDrop"; "onSort": "onSort"; "onClick": "onClick"; "onDoubleClick": "onDoubleClick"; "onClickDelete": "onClickDelete"; "onClickGo": "onClickGo"; "onClickBack": "onClickBack"; }, never, never, false, never>;
 }

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

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

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

@@ -16,7 +16,7 @@ export declare class CoerNumberBox extends ControlValue implements AfterViewInit
     value: import("@angular/core").InputSignal<string | number | null | undefined>;
     label: import("@angular/core").InputSignal<string>;
     placeholder: import("@angular/core").InputSignal<string>;
-    textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
+    textPosition: import("@angular/core").InputSignal<"left" | "center" | "right">;
     min: import("@angular/core").InputSignal<number>;
     max: import("@angular/core").InputSignal<number>;
     isInvalid: import("@angular/core").InputSignal<boolean>;

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

@@ -17,7 +17,7 @@ export declare class CoerSecretBox extends ControlValue implements AfterViewInit
     value: import("@angular/core").InputSignal<string | number | null | undefined>;
     label: import("@angular/core").InputSignal<string>;
     placeholder: import("@angular/core").InputSignal<string>;
-    textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
+    textPosition: import("@angular/core").InputSignal<"left" | "center" | "right">;
     minLength: import("@angular/core").InputSignal<string | number>;
     maxLength: import("@angular/core").InputSignal<string | number>;
     isInvalid: import("@angular/core").InputSignal<boolean>;

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

@@ -12,7 +12,7 @@ export declare class CoerTextarea extends ControlValue implements AfterViewInit,
     value: import("@angular/core").InputSignal<string | number | null | undefined>;
     label: import("@angular/core").InputSignal<string>;
     placeholder: import("@angular/core").InputSignal<string>;
-    textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
+    textPosition: import("@angular/core").InputSignal<"left" | "center" | "right">;
     minLength: import("@angular/core").InputSignal<string | number>;
     maxLength: import("@angular/core").InputSignal<string | number>;
     isInvalid: import("@angular/core").InputSignal<boolean>;

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

@@ -16,7 +16,7 @@ export declare class CoerTextBox extends ControlValue implements AfterViewInit,
     value: import("@angular/core").InputSignal<string | number | null | undefined>;
     label: import("@angular/core").InputSignal<string>;
     placeholder: import("@angular/core").InputSignal<string>;
-    textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
+    textPosition: import("@angular/core").InputSignal<"left" | "center" | "right">;
     minLength: import("@angular/core").InputSignal<string | number>;
     maxLength: import("@angular/core").InputSignal<string | number>;
     isInvalid: import("@angular/core").InputSignal<boolean>;

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 {
@@ -3352,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
@@ -3359,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);
@@ -3386,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(() => {
@@ -3411,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) {
@@ -3459,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 {
@@ -4143,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        [class]=\"_isModalOpen() ? 'z-index-1' : 'z-index-3'\">\r\n\r\n        @if(!_isLoading()) {\r\n            @if(_navigation().length > 0) {                \r\n                @for(item of _navigation(); track item.id) {\r\n                    \r\n                    <!-- Menu -->                     \r\n                    @if(_IsMenu(item)) {\r\n                        @if(_IsGrid(item)) {\r\n                            <coer-menu-option\r\n                                [label]=\"item.label\"\r\n                                [icon]=\"_GetIcon(item)\"\r\n                                path=\"menu\"\r\n                                (onClickMenuOption)=\"_ShowGridMenu($event, item)\"\r\n                            ></coer-menu-option>\r\n                        }\r\n    \r\n                        @else {\r\n                            <coer-tree-accordion\r\n                                [item]=\"item\"\r\n                                (showGridMenu)=\"_NavigateTo($event)\"\r\n                                (onClickMenuOption)=\"_NavigateTo($event)\"\r\n                                (clickMenu)=\"_MenuSelected($event)\"\r\n                            ></coer-tree-accordion>\r\n                        }\r\n                    }\r\n                             \r\n                    <!-- Option Menu -->\r\n                    @else {\r\n                        <coer-menu-option\r\n                            [label]=\"item.label\"\r\n                            [icon]=\"item?.icon\"\r\n                            [path]=\"item?.path\"\r\n                            (onClickMenuOption)=\"_NavigateTo($event)\"\r\n                        ></coer-menu-option>\r\n                    }\r\n                     \r\n        \r\n                    <div class=\"separator\"></div> \r\n                }\r\n            }\r\n\r\n            @else {\r\n                <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n            }\r\n        }\r\n\r\n        @else {\r\n            <coer-menu-option\r\n                label=\"LOADING\"\r\n                icon=\"icon-arrows-sync animation-spin\"\r\n            ></coer-menu-option>\r\n        }\r\n\r\n        <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n    </mat-drawer>\r\n\r\n    <!-- Main Screen -->\r\n    <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!_isOpen() && _showAsideMenu()) }\">\r\n        <aside [ngClass]=\"{ 'side-nav scrollbar-invisible': true, 'display-none': !_showAsideMenu() }\" (click)=\"Open($event)\">\r\n            @if(_isLoading()) {\r\n                <span class=\"icon-container\">\r\n                    <i class=\"icon-arrows-sync animation-spin\"></i>\r\n                </span>\r\n            }\r\n\r\n            @else {\r\n                @for (item of _navigation(); track item.id) {\r\n                    <div (click)=\"Open($event, item)\">\r\n                        <span [class]=\"'icon-container ' + _SetIdentityClass(item.label)\">\r\n                            <i [class]=\"_GetIcon(item)\"></i>\r\n                        </span>\r\n                    </div>\r\n                } \r\n            }\r\n\r\n            <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n        </aside> \r\n        <ng-content></ng-content>\r\n    </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;z-index:3;background-color:var(--sidenav-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar{width:1px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb{background-color:var(--secondary-inner)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--background-inner)!important}mat-drawer-container mat-drawer i{font-size:16px!important}mat-drawer-container mat-drawer div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-drawer-container mat-drawer-content{margin-right:0!important;background-color:var(--background-inner)!important}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--sidenav-inner)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!important;overflow-y:auto!important;cursor:pointer!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container{width:100%!important;height:49.6px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;border-bottom:1px solid rgba(245,245,245,.041)!important;color:var(--sidenav-text-inner)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--sidenav-active-inner)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$8.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i2$8.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i2$8.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: CoerMenuOption, selector: "coer-menu-option", inputs: ["level", "label", "icon", "path", "tree"], outputs: ["onClickMenuOption"] }, { kind: "component", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: ["level", "item", "tree", "showTree"], outputs: ["showGridMenu", "onClickMenuOption", "clickMenu"] }] }); }
+    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        [class]=\"_isModalOpen() ? 'z-index-1' : 'z-index-3'\">\r\n\r\n        @if(!_isLoading()) {\r\n            @if(_navigation().length > 0) {                \r\n                @for(item of _navigation(); track item.id) {\r\n                    \r\n                    <!-- Menu -->                     \r\n                    @if(_IsMenu(item)) {\r\n                        @if(_IsGrid(item)) {\r\n                            <coer-menu-option\r\n                                [label]=\"item.label\"\r\n                                [icon]=\"_GetIcon(item)\"\r\n                                path=\"menu\"\r\n                                (onClickMenuOption)=\"_ShowGridMenu($event, item)\"\r\n                            ></coer-menu-option>\r\n                        }\r\n    \r\n                        @else {\r\n                            <coer-tree-accordion\r\n                                [item]=\"item\"\r\n                                (showGridMenu)=\"_NavigateTo($event)\"\r\n                                (onClickMenuOption)=\"_NavigateTo($event)\"\r\n                                (clickMenu)=\"_MenuSelected($event)\"\r\n                            ></coer-tree-accordion>\r\n                        }\r\n                    }\r\n                             \r\n                    <!-- Option Menu -->\r\n                    @else {\r\n                        <coer-menu-option\r\n                            [label]=\"item.label\"\r\n                            [icon]=\"item?.icon\"\r\n                            [path]=\"item?.path\"\r\n                            (onClickMenuOption)=\"_NavigateTo($event)\"\r\n                        ></coer-menu-option>\r\n                    }\r\n                     \r\n        \r\n                    <div class=\"separator\"></div> \r\n                }\r\n            }\r\n\r\n            @else {\r\n                <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n            }\r\n        }\r\n\r\n        @else {\r\n            <coer-menu-option\r\n                label=\"LOADING\"\r\n                icon=\"icon-arrows-sync animation-spin\"\r\n            ></coer-menu-option>\r\n        }\r\n\r\n        <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n    </mat-drawer>\r\n\r\n    <!-- Main Screen -->\r\n    <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!_isOpen() && _showAsideMenu()) }\">\r\n        <aside [ngClass]=\"{ 'side-nav scrollbar-invisible': true, 'display-none': !_showAsideMenu() }\" (click)=\"Open($event)\">\r\n            @if(_isLoading()) {\r\n                <span class=\"icon-container\">\r\n                    <i class=\"icon-arrows-sync animation-spin\"></i>\r\n                </span>\r\n            }\r\n\r\n            @else {\r\n                @for (item of _navigation(); track item.id) {\r\n                    <div (click)=\"Open($event, item)\">\r\n                        <span [class]=\"'icon-container ' + _SetIdentityClass(item.label)\">\r\n                            <i [class]=\"_GetIcon(item)\"></i>\r\n                        </span>\r\n                    </div>\r\n                } \r\n            }\r\n\r\n            <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n        </aside> \r\n        <ng-content></ng-content>\r\n    </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;z-index:3;background-color:var(--sidenav-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar{width:1px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb{background-color:var(--secondary-inner)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--background-inner)!important}mat-drawer-container mat-drawer i{font-size:16px!important}mat-drawer-container mat-drawer div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-drawer-container mat-drawer-content{margin-right:0!important;background-color:var(--background-inner)!important}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--sidenav-inner)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!important;overflow-y:auto!important;cursor:pointer!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container{width:100%!important;height:49.6px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;border-bottom:1px solid rgba(245,245,245,.041)!important;color:var(--sidenav-text-inner)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--sidenav-active-inner)!important}\n"] }]
+            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 {