coer-elements 2.0.18 → 2.0.20

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

@@ -10,8 +10,10 @@ declare global {
         toTitle(): string;
         /** Removes the last character */
         removeLastChar(): string;
-        /** Removes accents and special characters */
-        removeAccents(onlyAlphaNumeric?: boolean): string;
+        /** Removes accents */
+        removeAccents(except?: string[]): string;
+        /** Removes special characters */
+        onlyAlphaNumeric(): string;
         /** Validates if both strings are equal */
         equals(value: string | number | null | undefined, sensitive?: boolean): boolean;
         /** Returns true if the value is null or undefined or contains only whitespace, false otherwise */

package/fesm2022/coer-elements-components.mjs

@@ -117,11 +117,11 @@ class CoerAccordion {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerAccordion, isStandalone: false, selector: "coer-accordion", 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 }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, scrollOnOpen: { classPropertyName: "scrollOnOpen", publicName: "scrollOnOpen", 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 } }, outputs: { onOpen: "onOpen", onClose: "onClose" }, viewQueries: [{ propertyName: "_expansionPanel", first: true, predicate: ["coerAccordion"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-expansion-panel\r\n    [id]=\"_id\" \r\n    #coerAccordion \r\n    title=\"\" \r\n    class=\"coer-accordion\"\r\n    [disabled]=\"_isDisabled\" \r\n    [expanded]=\"expanded()\" \r\n    (opened)=\"Open()\" \r\n    (closed)=\"Close()\">\r\n    \r\n    <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n            @if(_IsNotOnlyWhiteSpace(icon())) {\r\n                <i [class]=\"icon()\"></i>\r\n            }\r\n            <span>{{ title() }}</span>\r\n        </mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n\r\n    <div [ngClass]=\"{ 'd-none': isCollapsed }\"\r\n        [ngStyle]=\"{\r\n            'height': height(),\r\n            'min-height': minHeight()\r\n        }\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</mat-expansion-panel>", styles: ["mat-expansion-panel.coer-accordion{overflow:visible!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header{height:35px!important;background-color:var(--smoke)!important;padding-left:12px!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header span{color:var(--black)!important;font-size:16px!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header mat-panel-title{display:flex;align-items:center;gap:5px}mat-expansion-panel.coer-accordion div.mat-expansion-panel-body{padding:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2.MatExpansionPanelTitle, selector: "mat-panel-title" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerAccordion, isStandalone: false, selector: "coer-accordion", 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 }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, scrollOnOpen: { classPropertyName: "scrollOnOpen", publicName: "scrollOnOpen", 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 } }, outputs: { onOpen: "onOpen", onClose: "onClose" }, viewQueries: [{ propertyName: "_expansionPanel", first: true, predicate: ["coerAccordion"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-expansion-panel\r\n    [id]=\"_id\" \r\n    #coerAccordion \r\n    title=\"\" \r\n    class=\"coer-accordion\"\r\n    [disabled]=\"_isDisabled\" \r\n    [expanded]=\"expanded()\" \r\n    (opened)=\"Open()\" \r\n    (closed)=\"Close()\">\r\n    \r\n    <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n            @if(_IsNotOnlyWhiteSpace(icon())) {\r\n                <i [class]=\"icon()\"></i>\r\n            }\r\n            <span>{{ title() }}</span>\r\n        </mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n\r\n    <div [ngClass]=\"{ 'd-none': isCollapsed }\"\r\n        [ngStyle]=\"{\r\n            'height': height(),\r\n            'min-height': minHeight()\r\n        }\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</mat-expansion-panel>", styles: ["mat-expansion-panel.coer-accordion{overflow:visible!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header{height:35px!important;background-color:var(--smoke)!important;padding-left:12px!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header span{color:var(--black)!important;font-size:16px!important;white-space:nowrap!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header mat-panel-title{display:flex;align-items:center;gap:5px}mat-expansion-panel.coer-accordion div.mat-expansion-panel-body{padding:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2.MatExpansionPanelTitle, selector: "mat-panel-title" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerAccordion, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-accordion', standalone: false, template: "<mat-expansion-panel\r\n    [id]=\"_id\" \r\n    #coerAccordion \r\n    title=\"\" \r\n    class=\"coer-accordion\"\r\n    [disabled]=\"_isDisabled\" \r\n    [expanded]=\"expanded()\" \r\n    (opened)=\"Open()\" \r\n    (closed)=\"Close()\">\r\n    \r\n    <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n            @if(_IsNotOnlyWhiteSpace(icon())) {\r\n                <i [class]=\"icon()\"></i>\r\n            }\r\n            <span>{{ title() }}</span>\r\n        </mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n\r\n    <div [ngClass]=\"{ 'd-none': isCollapsed }\"\r\n        [ngStyle]=\"{\r\n            'height': height(),\r\n            'min-height': minHeight()\r\n        }\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</mat-expansion-panel>", styles: ["mat-expansion-panel.coer-accordion{overflow:visible!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header{height:35px!important;background-color:var(--smoke)!important;padding-left:12px!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header span{color:var(--black)!important;font-size:16px!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header mat-panel-title{display:flex;align-items:center;gap:5px}mat-expansion-panel.coer-accordion div.mat-expansion-panel-body{padding:0!important}\n"] }]
+            args: [{ selector: 'coer-accordion', standalone: false, template: "<mat-expansion-panel\r\n    [id]=\"_id\" \r\n    #coerAccordion \r\n    title=\"\" \r\n    class=\"coer-accordion\"\r\n    [disabled]=\"_isDisabled\" \r\n    [expanded]=\"expanded()\" \r\n    (opened)=\"Open()\" \r\n    (closed)=\"Close()\">\r\n    \r\n    <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n            @if(_IsNotOnlyWhiteSpace(icon())) {\r\n                <i [class]=\"icon()\"></i>\r\n            }\r\n            <span>{{ title() }}</span>\r\n        </mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n\r\n    <div [ngClass]=\"{ 'd-none': isCollapsed }\"\r\n        [ngStyle]=\"{\r\n            'height': height(),\r\n            'min-height': minHeight()\r\n        }\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</mat-expansion-panel>", styles: ["mat-expansion-panel.coer-accordion{overflow:visible!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header{height:35px!important;background-color:var(--smoke)!important;padding-left:12px!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header span{color:var(--black)!important;font-size:16px!important;white-space:nowrap!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header mat-panel-title{display:flex;align-items:center;gap:5px}mat-expansion-panel.coer-accordion div.mat-expansion-panel-body{padding:0!important}\n"] }]
         }] });
 
 class CoerButton {
@@ -2924,11 +2924,11 @@ class CoerMenuOption {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerMenuOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: CoerMenuOption, isStandalone: false, selector: "coer-menu-option", inputs: { level: "level", label: "label", icon: "icon", path: "path", tree: "tree" }, outputs: { clickMenuOption: "clickMenuOption" }, ngImport: i0, template: "<mat-nav-list class=\"coer-menu-option\" (click)=\"ClickMenuOption('')\">\r\n    <mat-list-item>\r\n        <span [class]=\"'icon-container ' + identityClass\" [ngStyle]=\"{ 'margin-left': marginLeft }\">\r\n            <i [class]=\"_icon\"></i>\r\n        </span>\r\n\r\n        <span [class]=\"'label-container ' + identityClass\">\r\n            {{ label }}\r\n        </span>\r\n    </mat-list-item>\r\n</mat-nav-list>", styles: ["mat-nav-list.coer-menu-option{padding:0!important}mat-nav-list.coer-menu-option div,mat-nav-list.coer-menu-option span{font-size:16px!important;font-family:sans-serif!important;font-weight:700}mat-nav-list.coer-menu-option mat-list-item{padding:0 35px 0 10px!important;display:inline-flex!important;height:48px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.icon-container{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:48px!important;min-width:20px!important;max-width:20px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.icon-container i{min-height:16px!important}mat-nav-list.coer-menu-option mat-list-item span.label-container{justify-content:flex-start!important;display:inline-flex!important;height:auto!important;margin-left:10px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.icon-container.active-link,mat-nav-list.coer-menu-option mat-list-item span.label-container.active-link{color:var(--sidenav-active-inner)!important}mat-nav-list.coer-menu-option mat-list-item:hover,mat-nav-list.coer-menu-option mat-list-item.mdc-list-item:hover:before{background-color:color-mix(in srgb,var(--app-sidenav),white 5%)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$7.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$7.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: CoerMenuOption, isStandalone: false, selector: "coer-menu-option", inputs: { level: "level", label: "label", icon: "icon", path: "path", tree: "tree" }, outputs: { clickMenuOption: "clickMenuOption" }, ngImport: i0, template: "<mat-nav-list class=\"coer-menu-option\" (click)=\"ClickMenuOption('')\">\r\n    <mat-list-item>\r\n        <span [class]=\"'icon-container ' + identityClass\" [ngStyle]=\"{ 'margin-left': marginLeft }\">\r\n            <i [class]=\"_icon\"></i>\r\n        </span>\r\n\r\n        <span [class]=\"'label-container ' + identityClass\">\r\n            {{ label }}\r\n        </span>\r\n    </mat-list-item>\r\n</mat-nav-list>", styles: ["mat-nav-list.coer-menu-option{padding:0!important}mat-nav-list.coer-menu-option div,mat-nav-list.coer-menu-option span{font-size:16px!important;font-family:sans-serif!important;font-weight:700}mat-nav-list.coer-menu-option mat-list-item{padding:0 35px 0 10px!important;display:inline-flex!important;height:48px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.icon-container{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:48px!important;min-width:20px!important;max-width:20px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.icon-container i{min-height:16px!important}mat-nav-list.coer-menu-option mat-list-item span.label-container{justify-content:flex-start!important;display:inline-flex!important;height:auto!important;margin-left:10px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.icon-container.active-link,mat-nav-list.coer-menu-option mat-list-item span.label-container.active-link{color:var(--sidenav-active-inner)!important}mat-nav-list.coer-menu-option mat-list-item:hover,mat-nav-list.coer-menu-option mat-list-item.mdc-list-item:hover:before{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$7.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$7.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerMenuOption, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-menu-option', standalone: false, template: "<mat-nav-list class=\"coer-menu-option\" (click)=\"ClickMenuOption('')\">\r\n    <mat-list-item>\r\n        <span [class]=\"'icon-container ' + identityClass\" [ngStyle]=\"{ 'margin-left': marginLeft }\">\r\n            <i [class]=\"_icon\"></i>\r\n        </span>\r\n\r\n        <span [class]=\"'label-container ' + identityClass\">\r\n            {{ label }}\r\n        </span>\r\n    </mat-list-item>\r\n</mat-nav-list>", styles: ["mat-nav-list.coer-menu-option{padding:0!important}mat-nav-list.coer-menu-option div,mat-nav-list.coer-menu-option span{font-size:16px!important;font-family:sans-serif!important;font-weight:700}mat-nav-list.coer-menu-option mat-list-item{padding:0 35px 0 10px!important;display:inline-flex!important;height:48px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.icon-container{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:48px!important;min-width:20px!important;max-width:20px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.icon-container i{min-height:16px!important}mat-nav-list.coer-menu-option mat-list-item span.label-container{justify-content:flex-start!important;display:inline-flex!important;height:auto!important;margin-left:10px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.icon-container.active-link,mat-nav-list.coer-menu-option mat-list-item span.label-container.active-link{color:var(--sidenav-active-inner)!important}mat-nav-list.coer-menu-option mat-list-item:hover,mat-nav-list.coer-menu-option mat-list-item.mdc-list-item:hover:before{background-color:color-mix(in srgb,var(--app-sidenav),white 5%)!important}\n"] }]
+            args: [{ selector: 'coer-menu-option', standalone: false, template: "<mat-nav-list class=\"coer-menu-option\" (click)=\"ClickMenuOption('')\">\r\n    <mat-list-item>\r\n        <span [class]=\"'icon-container ' + identityClass\" [ngStyle]=\"{ 'margin-left': marginLeft }\">\r\n            <i [class]=\"_icon\"></i>\r\n        </span>\r\n\r\n        <span [class]=\"'label-container ' + identityClass\">\r\n            {{ label }}\r\n        </span>\r\n    </mat-list-item>\r\n</mat-nav-list>", styles: ["mat-nav-list.coer-menu-option{padding:0!important}mat-nav-list.coer-menu-option div,mat-nav-list.coer-menu-option span{font-size:16px!important;font-family:sans-serif!important;font-weight:700}mat-nav-list.coer-menu-option mat-list-item{padding:0 35px 0 10px!important;display:inline-flex!important;height:48px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.icon-container{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:48px!important;min-width:20px!important;max-width:20px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.icon-container i{min-height:16px!important}mat-nav-list.coer-menu-option mat-list-item span.label-container{justify-content:flex-start!important;display:inline-flex!important;height:auto!important;margin-left:10px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.icon-container.active-link,mat-nav-list.coer-menu-option mat-list-item span.label-container.active-link{color:var(--sidenav-active-inner)!important}mat-nav-list.coer-menu-option mat-list-item:hover,mat-nav-list.coer-menu-option mat-list-item.mdc-list-item:hover:before{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}\n"] }]
         }], propDecorators: { level: [{
                 type: Input
             }], label: [{
@@ -3264,11 +3264,11 @@ class CoerTreeAccordion {
         this.ClickMenuOption(menuOption, true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTreeAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTreeAccordion, isStandalone: false, selector: "coer-tree-accordion", inputs: { level: "level", item: "item", tree: "tree", showTree: "showTree" }, outputs: { showGridMenu: "showGridMenu", clickMenuOption: "clickMenuOption", clickMenu: "clickMenu" }, viewQueries: [{ propertyName: "expansionPanel", first: true, predicate: ["expansionPanel"], descendants: true }, { propertyName: "menuList", predicate: CoerTreeAccordion, descendants: true }], ngImport: i0, template: "<mat-accordion class=\"coer-tree-accordion\">\r\n    <mat-expansion-panel #expansionPanel [class]=\"'coer-tree-accordion-' + identityClass\">\r\n\r\n        <!-- Header -->\r\n        <mat-expansion-panel-header (click)=\"Toggle()\"\r\n            [class]=\"identityClass\"\r\n            [ngClass]=\"{\r\n                'background-navigation': (isExpanded && level == 1),\r\n                'text-app-sidenav-active': IsActive(iconContainer)\r\n            }\">\r\n            <mat-panel-description>\r\n                <span #iconContainer\r\n                    [ngStyle]=\"{ 'margin-left': marginLeft }\"\r\n                    [class]=\"identityClass\"\r\n                    [ngClass]=\"{\r\n                        'icon-container': true,\r\n                        'text-app-sidenav-active': IsActive(iconContainer)\r\n                    }\"> <i [class]=\"_icon\"></i> </span>\r\n\r\n                <span #labelContainer\r\n                    [class]=\"identityClass\"\r\n                    [ngClass]=\"{\r\n                        'label-container': true,\r\n                        'text-app-sidenav-active': IsActive(labelContainer)\r\n                    }\"> {{ item.label }} </span>\r\n            </mat-panel-description>\r\n        </mat-expansion-panel-header>\r\n\r\n\r\n        @if(showTree) { \r\n            <div *ngFor=\"let subItem of item.items\">\r\n                <!-- Sub Menu -->\r\n                <div *ngIf=\"IsMenu(subItem); else isOption\"> \r\n                    @if(IsGrid(subItem)) {\r\n                        <coer-menu-option\r\n                            [label]=\"subItem.label\"\r\n                            [icon]=\"GetGridIcon(subItem!.icon)\"\r\n                            path='menu'\r\n                            [level]=\"level + 1\"\r\n                            [tree]=\"_tree\"\r\n                            (clickMenuOption)=\"ShowGridMenu($event, subItem)\"\r\n                        ></coer-menu-option>\r\n                    }\r\n\r\n                    @else {\r\n                        <coer-tree-accordion\r\n                            [level]=\"level + 1\"\r\n                            [item]=\"subItem\"\r\n                            [tree]=\"_tree\"\r\n                            (clickMenuOption)=\"ClickMenuOption($event)\"\r\n                            (clickMenu)=\"ClickMenu($event)\"\r\n                        ></coer-tree-accordion> \r\n                    }\r\n                </div>\r\n\r\n                <!-- Option Menu -->\r\n                <ng-template #isOption>\r\n                    <coer-menu-option\r\n                        [label]=\"subItem.label\"\r\n                        [icon]=\"subItem?.icon\"\r\n                        [path]=\"subItem?.path\"\r\n                        [level]=\"level + 1\"\r\n                        [tree]=\"_tree\"\r\n                        (clickMenuOption)=\"ClickMenuOption($event)\"\r\n                    ></coer-menu-option>\r\n                </ng-template>\r\n\r\n                <div class=\"separator\"></div>\r\n            </div>\r\n        }\r\n    </mat-expansion-panel>\r\n</mat-accordion>", styles: ["mat-accordion.coer-tree-accordion div,mat-accordion.coer-tree-accordion span{font-size:16px!important;font-family:sans-serif!important;font-weight:700}mat-accordion.coer-tree-accordion mat-expansion-panel{background-color:var(--sidenav-inner)!important;box-shadow:none!important;border-radius:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.mat-expansion-panel-body{padding:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-accordion.coer-tree-accordion mat-expansion-panel span::selection{background-color:transparent!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header{padding:0 10px;height:48px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description{margin-right:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description span.icon-container{height:48px!important;min-width:20px!important;max-width:20px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--sidenav-text-inner)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description span.label-container{height:48px!important;margin-left:10px!important;display:flex!important;align-items:center!important;color:var(--sidenav-text-inner)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator{width:10px!important;margin-left:15px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator:after{color:var(--sidenav-text-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.text-app-sidenav-active span.mat-expansion-indicator:after{color:var(--sidenav-active-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.cdk-focused{background-color:var(--sidenav-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.mat-expanded{background-color:var(--sidenav-active-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.background-navigation:hover{background-color:color-mix(in srgb,var(--sidenav-active-inner),white 5%)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel mat-expansion-panel-header.mat-expanded{background-color:var(--sidenav-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover,mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover{background-color:color-mix(in srgb,var(--app-sidenav),white 5%)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: CoerMenuOption, selector: "coer-menu-option", inputs: ["level", "label", "icon", "path", "tree"], outputs: ["clickMenuOption"] }, { kind: "component", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: ["level", "item", "tree", "showTree"], outputs: ["showGridMenu", "clickMenuOption", "clickMenu"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTreeAccordion, isStandalone: false, selector: "coer-tree-accordion", inputs: { level: "level", item: "item", tree: "tree", showTree: "showTree" }, outputs: { showGridMenu: "showGridMenu", clickMenuOption: "clickMenuOption", clickMenu: "clickMenu" }, viewQueries: [{ propertyName: "expansionPanel", first: true, predicate: ["expansionPanel"], descendants: true }, { propertyName: "menuList", predicate: CoerTreeAccordion, descendants: true }], ngImport: i0, template: "<mat-accordion class=\"coer-tree-accordion\">\r\n    <mat-expansion-panel #expansionPanel [class]=\"'coer-tree-accordion-' + identityClass\">\r\n\r\n        <!-- Header -->\r\n        <mat-expansion-panel-header (click)=\"Toggle()\"\r\n            [class]=\"identityClass\"\r\n            [ngClass]=\"{\r\n                'background-navigation': (isExpanded && level == 1),\r\n                'text-sidenav-active': IsActive(iconContainer)\r\n            }\">\r\n            <mat-panel-description>\r\n                <span #iconContainer\r\n                    [ngStyle]=\"{ 'margin-left': marginLeft }\"\r\n                    [class]=\"identityClass\"\r\n                    [ngClass]=\"{\r\n                        'icon-container': true,\r\n                        'text-sidenav-active': IsActive(iconContainer)\r\n                    }\"> <i [class]=\"_icon\"></i> </span>\r\n\r\n                <span #labelContainer\r\n                    [class]=\"identityClass\"\r\n                    [ngClass]=\"{\r\n                        'label-container': true,\r\n                        'text-sidenav-active': IsActive(labelContainer)\r\n                    }\"> {{ item.label }} </span>\r\n            </mat-panel-description>\r\n        </mat-expansion-panel-header>\r\n\r\n\r\n        @if(showTree) { \r\n            <div *ngFor=\"let subItem of item.items\">\r\n                <!-- Sub Menu -->\r\n                <div *ngIf=\"IsMenu(subItem); else isOption\"> \r\n                    @if(IsGrid(subItem)) {\r\n                        <coer-menu-option\r\n                            [label]=\"subItem.label\"\r\n                            [icon]=\"GetGridIcon(subItem!.icon)\"\r\n                            path='menu'\r\n                            [level]=\"level + 1\"\r\n                            [tree]=\"_tree\"\r\n                            (clickMenuOption)=\"ShowGridMenu($event, subItem)\"\r\n                        ></coer-menu-option>\r\n                    }\r\n\r\n                    @else {\r\n                        <coer-tree-accordion\r\n                            [level]=\"level + 1\"\r\n                            [item]=\"subItem\"\r\n                            [tree]=\"_tree\"\r\n                            (clickMenuOption)=\"ClickMenuOption($event)\"\r\n                            (clickMenu)=\"ClickMenu($event)\"\r\n                        ></coer-tree-accordion> \r\n                    }\r\n                </div>\r\n\r\n                <!-- Option Menu -->\r\n                <ng-template #isOption>\r\n                    <coer-menu-option\r\n                        [label]=\"subItem.label\"\r\n                        [icon]=\"subItem?.icon\"\r\n                        [path]=\"subItem?.path\"\r\n                        [level]=\"level + 1\"\r\n                        [tree]=\"_tree\"\r\n                        (clickMenuOption)=\"ClickMenuOption($event)\"\r\n                    ></coer-menu-option>\r\n                </ng-template>\r\n\r\n                <div class=\"separator\"></div>\r\n            </div>\r\n        }\r\n    </mat-expansion-panel>\r\n</mat-accordion>", styles: ["mat-accordion.coer-tree-accordion div,mat-accordion.coer-tree-accordion span{font-size:16px!important;font-family:sans-serif!important;font-weight:700}mat-accordion.coer-tree-accordion mat-expansion-panel{background-color:var(--sidenav-inner)!important;box-shadow:none!important;border-radius:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.mat-expansion-panel-body{padding:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-accordion.coer-tree-accordion mat-expansion-panel span::selection{background-color:transparent!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header{padding:0 10px;height:48px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description{margin-right:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description span.icon-container{height:48px!important;min-width:20px!important;max-width:20px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--sidenav-text-inner)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description span.label-container{height:48px!important;margin-left:10px!important;display:flex!important;align-items:center!important;color:var(--sidenav-text-inner)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator{width:10px!important;margin-left:15px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator:after{color:var(--sidenav-text-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.text-sidenav-active span.mat-expansion-indicator:after{color:var(--sidenav-active-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.cdk-focused{background-color:var(--sidenav-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.mat-expanded{background-color:var(--sidenav-active-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.background-navigation:hover{background-color:color-mix(in srgb,var(--sidenav-active-inner),white 5%)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel mat-expansion-panel-header.mat-expanded{background-color:var(--sidenav-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover,mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: CoerMenuOption, selector: "coer-menu-option", inputs: ["level", "label", "icon", "path", "tree"], outputs: ["clickMenuOption"] }, { kind: "component", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: ["level", "item", "tree", "showTree"], outputs: ["showGridMenu", "clickMenuOption", "clickMenu"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTreeAccordion, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-tree-accordion', standalone: false, template: "<mat-accordion class=\"coer-tree-accordion\">\r\n    <mat-expansion-panel #expansionPanel [class]=\"'coer-tree-accordion-' + identityClass\">\r\n\r\n        <!-- Header -->\r\n        <mat-expansion-panel-header (click)=\"Toggle()\"\r\n            [class]=\"identityClass\"\r\n            [ngClass]=\"{\r\n                'background-navigation': (isExpanded && level == 1),\r\n                'text-app-sidenav-active': IsActive(iconContainer)\r\n            }\">\r\n            <mat-panel-description>\r\n                <span #iconContainer\r\n                    [ngStyle]=\"{ 'margin-left': marginLeft }\"\r\n                    [class]=\"identityClass\"\r\n                    [ngClass]=\"{\r\n                        'icon-container': true,\r\n                        'text-app-sidenav-active': IsActive(iconContainer)\r\n                    }\"> <i [class]=\"_icon\"></i> </span>\r\n\r\n                <span #labelContainer\r\n                    [class]=\"identityClass\"\r\n                    [ngClass]=\"{\r\n                        'label-container': true,\r\n                        'text-app-sidenav-active': IsActive(labelContainer)\r\n                    }\"> {{ item.label }} </span>\r\n            </mat-panel-description>\r\n        </mat-expansion-panel-header>\r\n\r\n\r\n        @if(showTree) { \r\n            <div *ngFor=\"let subItem of item.items\">\r\n                <!-- Sub Menu -->\r\n                <div *ngIf=\"IsMenu(subItem); else isOption\"> \r\n                    @if(IsGrid(subItem)) {\r\n                        <coer-menu-option\r\n                            [label]=\"subItem.label\"\r\n                            [icon]=\"GetGridIcon(subItem!.icon)\"\r\n                            path='menu'\r\n                            [level]=\"level + 1\"\r\n                            [tree]=\"_tree\"\r\n                            (clickMenuOption)=\"ShowGridMenu($event, subItem)\"\r\n                        ></coer-menu-option>\r\n                    }\r\n\r\n                    @else {\r\n                        <coer-tree-accordion\r\n                            [level]=\"level + 1\"\r\n                            [item]=\"subItem\"\r\n                            [tree]=\"_tree\"\r\n                            (clickMenuOption)=\"ClickMenuOption($event)\"\r\n                            (clickMenu)=\"ClickMenu($event)\"\r\n                        ></coer-tree-accordion> \r\n                    }\r\n                </div>\r\n\r\n                <!-- Option Menu -->\r\n                <ng-template #isOption>\r\n                    <coer-menu-option\r\n                        [label]=\"subItem.label\"\r\n                        [icon]=\"subItem?.icon\"\r\n                        [path]=\"subItem?.path\"\r\n                        [level]=\"level + 1\"\r\n                        [tree]=\"_tree\"\r\n                        (clickMenuOption)=\"ClickMenuOption($event)\"\r\n                    ></coer-menu-option>\r\n                </ng-template>\r\n\r\n                <div class=\"separator\"></div>\r\n            </div>\r\n        }\r\n    </mat-expansion-panel>\r\n</mat-accordion>", styles: ["mat-accordion.coer-tree-accordion div,mat-accordion.coer-tree-accordion span{font-size:16px!important;font-family:sans-serif!important;font-weight:700}mat-accordion.coer-tree-accordion mat-expansion-panel{background-color:var(--sidenav-inner)!important;box-shadow:none!important;border-radius:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.mat-expansion-panel-body{padding:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-accordion.coer-tree-accordion mat-expansion-panel span::selection{background-color:transparent!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header{padding:0 10px;height:48px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description{margin-right:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description span.icon-container{height:48px!important;min-width:20px!important;max-width:20px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--sidenav-text-inner)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description span.label-container{height:48px!important;margin-left:10px!important;display:flex!important;align-items:center!important;color:var(--sidenav-text-inner)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator{width:10px!important;margin-left:15px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator:after{color:var(--sidenav-text-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.text-app-sidenav-active span.mat-expansion-indicator:after{color:var(--sidenav-active-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.cdk-focused{background-color:var(--sidenav-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.mat-expanded{background-color:var(--sidenav-active-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.background-navigation:hover{background-color:color-mix(in srgb,var(--sidenav-active-inner),white 5%)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel mat-expansion-panel-header.mat-expanded{background-color:var(--sidenav-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover,mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover{background-color:color-mix(in srgb,var(--app-sidenav),white 5%)!important}\n"] }]
+            args: [{ selector: 'coer-tree-accordion', standalone: false, template: "<mat-accordion class=\"coer-tree-accordion\">\r\n    <mat-expansion-panel #expansionPanel [class]=\"'coer-tree-accordion-' + identityClass\">\r\n\r\n        <!-- Header -->\r\n        <mat-expansion-panel-header (click)=\"Toggle()\"\r\n            [class]=\"identityClass\"\r\n            [ngClass]=\"{\r\n                'background-navigation': (isExpanded && level == 1),\r\n                'text-sidenav-active': IsActive(iconContainer)\r\n            }\">\r\n            <mat-panel-description>\r\n                <span #iconContainer\r\n                    [ngStyle]=\"{ 'margin-left': marginLeft }\"\r\n                    [class]=\"identityClass\"\r\n                    [ngClass]=\"{\r\n                        'icon-container': true,\r\n                        'text-sidenav-active': IsActive(iconContainer)\r\n                    }\"> <i [class]=\"_icon\"></i> </span>\r\n\r\n                <span #labelContainer\r\n                    [class]=\"identityClass\"\r\n                    [ngClass]=\"{\r\n                        'label-container': true,\r\n                        'text-sidenav-active': IsActive(labelContainer)\r\n                    }\"> {{ item.label }} </span>\r\n            </mat-panel-description>\r\n        </mat-expansion-panel-header>\r\n\r\n\r\n        @if(showTree) { \r\n            <div *ngFor=\"let subItem of item.items\">\r\n                <!-- Sub Menu -->\r\n                <div *ngIf=\"IsMenu(subItem); else isOption\"> \r\n                    @if(IsGrid(subItem)) {\r\n                        <coer-menu-option\r\n                            [label]=\"subItem.label\"\r\n                            [icon]=\"GetGridIcon(subItem!.icon)\"\r\n                            path='menu'\r\n                            [level]=\"level + 1\"\r\n                            [tree]=\"_tree\"\r\n                            (clickMenuOption)=\"ShowGridMenu($event, subItem)\"\r\n                        ></coer-menu-option>\r\n                    }\r\n\r\n                    @else {\r\n                        <coer-tree-accordion\r\n                            [level]=\"level + 1\"\r\n                            [item]=\"subItem\"\r\n                            [tree]=\"_tree\"\r\n                            (clickMenuOption)=\"ClickMenuOption($event)\"\r\n                            (clickMenu)=\"ClickMenu($event)\"\r\n                        ></coer-tree-accordion> \r\n                    }\r\n                </div>\r\n\r\n                <!-- Option Menu -->\r\n                <ng-template #isOption>\r\n                    <coer-menu-option\r\n                        [label]=\"subItem.label\"\r\n                        [icon]=\"subItem?.icon\"\r\n                        [path]=\"subItem?.path\"\r\n                        [level]=\"level + 1\"\r\n                        [tree]=\"_tree\"\r\n                        (clickMenuOption)=\"ClickMenuOption($event)\"\r\n                    ></coer-menu-option>\r\n                </ng-template>\r\n\r\n                <div class=\"separator\"></div>\r\n            </div>\r\n        }\r\n    </mat-expansion-panel>\r\n</mat-accordion>", styles: ["mat-accordion.coer-tree-accordion div,mat-accordion.coer-tree-accordion span{font-size:16px!important;font-family:sans-serif!important;font-weight:700}mat-accordion.coer-tree-accordion mat-expansion-panel{background-color:var(--sidenav-inner)!important;box-shadow:none!important;border-radius:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.mat-expansion-panel-body{padding:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-accordion.coer-tree-accordion mat-expansion-panel span::selection{background-color:transparent!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header{padding:0 10px;height:48px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description{margin-right:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description span.icon-container{height:48px!important;min-width:20px!important;max-width:20px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--sidenav-text-inner)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description span.label-container{height:48px!important;margin-left:10px!important;display:flex!important;align-items:center!important;color:var(--sidenav-text-inner)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator{width:10px!important;margin-left:15px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator:after{color:var(--sidenav-text-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.text-sidenav-active span.mat-expansion-indicator:after{color:var(--sidenav-active-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.cdk-focused{background-color:var(--sidenav-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.mat-expanded{background-color:var(--sidenav-active-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.background-navigation:hover{background-color:color-mix(in srgb,var(--sidenav-active-inner),white 5%)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel mat-expansion-panel-header.mat-expanded{background-color:var(--sidenav-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover,mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}\n"] }]
         }], propDecorators: { expansionPanel: [{
                 type: ViewChild,
                 args: ['expansionPanel']
@@ -3491,11 +3491,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)=\"isOpen.set(true)\"\r\n        (closed)=\"isOpen.set(false)\"\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                <div *ngFor=\"let item of _navigation()\">\r\n                    <!-- Menu -->\r\n                    <div *ngIf=\"_IsMenu(item); else OptionMenu\">\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                                (clickMenuOption)=\"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, true)\"\r\n                                (clickMenuOption)=\"NavigateTo($event, false)\"\r\n                                (clickMenu)=\"MenuSelected($event)\"\r\n                            ></coer-tree-accordion>\r\n                        }\r\n                    </div>\r\n        \r\n                    <!-- Option Menu -->\r\n                    <ng-template #OptionMenu>\r\n                        <coer-menu-option\r\n                            [label]=\"item.label\"\r\n                            [icon]=\"item?.icon\"\r\n                            [path]=\"item?.path\"\r\n                            (clickMenuOption)=\"NavigateTo($event)\"\r\n                        ></coer-menu-option>\r\n                    </ng-template>\r\n        \r\n                    <div class=\"separator\"></div>\r\n                </div>\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=\"fa-solid fa-sync fa-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': true, 'd-none': !showAsideMenu }\" (click)=\"Open($event)\">\r\n            @if(_isLoading()) {\r\n                <span class=\"icon-container\">\r\n                    <i class=\"fa-solid fa-sync fa-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;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(--app-sidenav),white 5%)!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--sidenav-active-inner)!important}mat-drawer-container div.backdrop{position:absolute!important;inset:0!important;background-color:#0000005b!important;z-index:1500!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ["clickMenuOption"] }, { kind: "component", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: ["level", "item", "tree", "showTree"], outputs: ["showGridMenu", "clickMenuOption", "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)=\"isOpen.set(true)\"\r\n        (closed)=\"isOpen.set(false)\"\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                <div *ngFor=\"let item of _navigation()\">\r\n                    <!-- Menu -->\r\n                    <div *ngIf=\"_IsMenu(item); else OptionMenu\">\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                                (clickMenuOption)=\"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, true)\"\r\n                                (clickMenuOption)=\"NavigateTo($event, false)\"\r\n                                (clickMenu)=\"MenuSelected($event)\"\r\n                            ></coer-tree-accordion>\r\n                        }\r\n                    </div>\r\n        \r\n                    <!-- Option Menu -->\r\n                    <ng-template #OptionMenu>\r\n                        <coer-menu-option\r\n                            [label]=\"item.label\"\r\n                            [icon]=\"item?.icon\"\r\n                            [path]=\"item?.path\"\r\n                            (clickMenuOption)=\"NavigateTo($event)\"\r\n                        ></coer-menu-option>\r\n                    </ng-template>\r\n        \r\n                    <div class=\"separator\"></div>\r\n                </div>\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=\"fa-solid fa-sync fa-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': true, 'd-none': !showAsideMenu }\" (click)=\"Open($event)\">\r\n            @if(_isLoading()) {\r\n                <span class=\"icon-container\">\r\n                    <i class=\"fa-solid fa-sync fa-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;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}mat-drawer-container div.backdrop{position:absolute!important;inset:0!important;background-color:#0000005b!important;z-index:1500!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ["clickMenuOption"] }, { kind: "component", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: ["level", "item", "tree", "showTree"], outputs: ["showGridMenu", "clickMenuOption", "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)=\"isOpen.set(true)\"\r\n        (closed)=\"isOpen.set(false)\"\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                <div *ngFor=\"let item of _navigation()\">\r\n                    <!-- Menu -->\r\n                    <div *ngIf=\"_IsMenu(item); else OptionMenu\">\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                                (clickMenuOption)=\"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, true)\"\r\n                                (clickMenuOption)=\"NavigateTo($event, false)\"\r\n                                (clickMenu)=\"MenuSelected($event)\"\r\n                            ></coer-tree-accordion>\r\n                        }\r\n                    </div>\r\n        \r\n                    <!-- Option Menu -->\r\n                    <ng-template #OptionMenu>\r\n                        <coer-menu-option\r\n                            [label]=\"item.label\"\r\n                            [icon]=\"item?.icon\"\r\n                            [path]=\"item?.path\"\r\n                            (clickMenuOption)=\"NavigateTo($event)\"\r\n                        ></coer-menu-option>\r\n                    </ng-template>\r\n        \r\n                    <div class=\"separator\"></div>\r\n                </div>\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=\"fa-solid fa-sync fa-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': true, 'd-none': !showAsideMenu }\" (click)=\"Open($event)\">\r\n            @if(_isLoading()) {\r\n                <span class=\"icon-container\">\r\n                    <i class=\"fa-solid fa-sync fa-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;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(--app-sidenav),white 5%)!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--sidenav-active-inner)!important}mat-drawer-container div.backdrop{position:absolute!important;inset:0!important;background-color:#0000005b!important;z-index:1500!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)=\"isOpen.set(true)\"\r\n        (closed)=\"isOpen.set(false)\"\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                <div *ngFor=\"let item of _navigation()\">\r\n                    <!-- Menu -->\r\n                    <div *ngIf=\"_IsMenu(item); else OptionMenu\">\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                                (clickMenuOption)=\"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, true)\"\r\n                                (clickMenuOption)=\"NavigateTo($event, false)\"\r\n                                (clickMenu)=\"MenuSelected($event)\"\r\n                            ></coer-tree-accordion>\r\n                        }\r\n                    </div>\r\n        \r\n                    <!-- Option Menu -->\r\n                    <ng-template #OptionMenu>\r\n                        <coer-menu-option\r\n                            [label]=\"item.label\"\r\n                            [icon]=\"item?.icon\"\r\n                            [path]=\"item?.path\"\r\n                            (clickMenuOption)=\"NavigateTo($event)\"\r\n                        ></coer-menu-option>\r\n                    </ng-template>\r\n        \r\n                    <div class=\"separator\"></div>\r\n                </div>\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=\"fa-solid fa-sync fa-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': true, 'd-none': !showAsideMenu }\" (click)=\"Open($event)\">\r\n            @if(_isLoading()) {\r\n                <span class=\"icon-container\">\r\n                    <i class=\"fa-solid fa-sync fa-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;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}mat-drawer-container div.backdrop{position:absolute!important;inset:0!important;background-color:#0000005b!important;z-index:1500!important}\n"] }]
         }], ctorParameters: () => [] });
 
 class CoerDropdown extends ControlValue {
@@ -3816,11 +3816,11 @@ class CoerTab {
             this._tooltipList.splice(index, 1);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTab, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTab, isStandalone: false, selector: "coer-tab", inputs: { 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 }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: false, isRequired: false, transformFunction: null }, alignTabs: { classPropertyName: "alignTabs", publicName: "alignTabs", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSelectedTab: "onSelectedTab" }, queries: [{ propertyName: "contentRef", predicate: CoerRefDirective }], viewQueries: [{ propertyName: "_matTabGroup", first: true, predicate: ["matTabGroup"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"coer-tab\">\r\n    <mat-tab-group #matTabGroup\r\n        mat-stretch-tabs=\"false\"\r\n        [selectedIndex]=\"_selectedIndex()\"\r\n        (selectedIndexChange)=\"_SelectedIndexChange($event)\">\r\n\r\n        @for(tab of _contentList; track tab.coerRef()) {\r\n            @if(tab.show()) {\r\n                <mat-tab [label]=\"tab.coerRef()\" [disabled]=\"tab.isDisabled()\">\r\n                    <ng-template mat-tab-label>\r\n                        <span [id]=\"_SetToolTip(tab)\" class=\"tab\" lifeCycle (onDestroy)=\"_RemoveTooltip($event)\">\r\n                            <i [class]=\"_GetIcon(tab)\"></i>\r\n                            <span [class]=\"_GetIcon(tab).length > 0 ? 'ms-2' : ''\">\r\n                                {{ _GetTitle(tab) }}\r\n                            </span>\r\n                        </span>\r\n                    </ng-template>\r\n\r\n                    <ng-template matTabContent>\r\n                        <div class=\"tab-content\"\r\n                            [ngStyle]=\"{\r\n                                'height': height(),\r\n                                'min-height': minHeight(),\r\n                                'max-height': maxHeight()\r\n                            }\">\r\n\r\n                            <ng-container [ngTemplateOutlet]=\"tab.template\"></ng-container>\r\n                        </div>\r\n                    </ng-template>\r\n                </mat-tab>\r\n            }\r\n        }\r\n    </mat-tab-group>\r\n</div>  ", styles: ["div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header{background-color:#f5f5f562!important;border-bottom:1px solid var(--smoke)!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab.mat-mdc-tab{padding:0!important;height:35px!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab--active.mdc-tab-indicator--active *{color:var(--primary-inner)!important;border-color:var(--primary-inner)!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header span.tab{padding:10px 20px!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper{overflow:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body{overflow:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content{width:auto!important;overflow-x:auto!important;overflow-y:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content div.tab-content{padding:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$9.MatTabContent, selector: "[matTabContent]" }, { kind: "directive", type: i2$9.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i2$9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i2$9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i3$3.LifeCycleDirective, selector: "[lifeCycle]", outputs: ["onInit", "afterViewInit", "onReady", "onDestroy"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTab, isStandalone: false, selector: "coer-tab", inputs: { 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 }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: false, isRequired: false, transformFunction: null }, alignTabs: { classPropertyName: "alignTabs", publicName: "alignTabs", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSelectedTab: "onSelectedTab" }, queries: [{ propertyName: "contentRef", predicate: CoerRefDirective }], viewQueries: [{ propertyName: "_matTabGroup", first: true, predicate: ["matTabGroup"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"coer-tab\">\r\n    <mat-tab-group #matTabGroup\r\n        mat-stretch-tabs=\"false\"\r\n        [selectedIndex]=\"_selectedIndex()\"\r\n        (selectedIndexChange)=\"_SelectedIndexChange($event)\">\r\n\r\n        @for(tab of _contentList; track tab.coerRef()) {\r\n            @if(tab.show()) {\r\n                <mat-tab [label]=\"tab.coerRef()\" [disabled]=\"tab.isDisabled()\">\r\n                    <ng-template mat-tab-label>\r\n                        <span [id]=\"_SetToolTip(tab)\" class=\"tab\" lifeCycle (onDestroy)=\"_RemoveTooltip($event)\">\r\n                            <i [class]=\"_GetIcon(tab)\"></i>\r\n                            <span [class]=\"_GetIcon(tab).length > 0 ? 'ms-2' : ''\">\r\n                                {{ _GetTitle(tab) }}\r\n                            </span>\r\n                        </span>\r\n                    </ng-template>\r\n\r\n                    <ng-template matTabContent>\r\n                        <div class=\"tab-content\"\r\n                            [ngStyle]=\"{\r\n                                'height': height(),\r\n                                'min-height': minHeight(),\r\n                                'max-height': maxHeight()\r\n                            }\">\r\n\r\n                            <ng-container [ngTemplateOutlet]=\"tab.template\"></ng-container>\r\n                        </div>\r\n                    </ng-template>\r\n                </mat-tab>\r\n            }\r\n        }\r\n    </mat-tab-group>\r\n</div>  ", styles: ["div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header{background-color:#f5f5f562!important;border-bottom:1px solid var(--smoke)!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab.mat-mdc-tab{padding:0!important;height:35px!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab--active.mdc-tab-indicator--active *{color:var(--navigation-inner)!important;border-color:var(--navigation-inner)!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header span.tab{padding:10px 20px!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper{overflow:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body{overflow:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content{width:auto!important;overflow-x:auto!important;overflow-y:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content div.tab-content{padding:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$9.MatTabContent, selector: "[matTabContent]" }, { kind: "directive", type: i2$9.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i2$9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i2$9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i3$3.LifeCycleDirective, selector: "[lifeCycle]", outputs: ["onInit", "afterViewInit", "onReady", "onDestroy"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTab, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-tab', standalone: false, template: "<div class=\"coer-tab\">\r\n    <mat-tab-group #matTabGroup\r\n        mat-stretch-tabs=\"false\"\r\n        [selectedIndex]=\"_selectedIndex()\"\r\n        (selectedIndexChange)=\"_SelectedIndexChange($event)\">\r\n\r\n        @for(tab of _contentList; track tab.coerRef()) {\r\n            @if(tab.show()) {\r\n                <mat-tab [label]=\"tab.coerRef()\" [disabled]=\"tab.isDisabled()\">\r\n                    <ng-template mat-tab-label>\r\n                        <span [id]=\"_SetToolTip(tab)\" class=\"tab\" lifeCycle (onDestroy)=\"_RemoveTooltip($event)\">\r\n                            <i [class]=\"_GetIcon(tab)\"></i>\r\n                            <span [class]=\"_GetIcon(tab).length > 0 ? 'ms-2' : ''\">\r\n                                {{ _GetTitle(tab) }}\r\n                            </span>\r\n                        </span>\r\n                    </ng-template>\r\n\r\n                    <ng-template matTabContent>\r\n                        <div class=\"tab-content\"\r\n                            [ngStyle]=\"{\r\n                                'height': height(),\r\n                                'min-height': minHeight(),\r\n                                'max-height': maxHeight()\r\n                            }\">\r\n\r\n                            <ng-container [ngTemplateOutlet]=\"tab.template\"></ng-container>\r\n                        </div>\r\n                    </ng-template>\r\n                </mat-tab>\r\n            }\r\n        }\r\n    </mat-tab-group>\r\n</div>  ", styles: ["div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header{background-color:#f5f5f562!important;border-bottom:1px solid var(--smoke)!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab.mat-mdc-tab{padding:0!important;height:35px!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab--active.mdc-tab-indicator--active *{color:var(--primary-inner)!important;border-color:var(--primary-inner)!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header span.tab{padding:10px 20px!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper{overflow:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body{overflow:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content{width:auto!important;overflow-x:auto!important;overflow-y:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content div.tab-content{padding:5px}\n"] }]
+            args: [{ selector: 'coer-tab', standalone: false, template: "<div class=\"coer-tab\">\r\n    <mat-tab-group #matTabGroup\r\n        mat-stretch-tabs=\"false\"\r\n        [selectedIndex]=\"_selectedIndex()\"\r\n        (selectedIndexChange)=\"_SelectedIndexChange($event)\">\r\n\r\n        @for(tab of _contentList; track tab.coerRef()) {\r\n            @if(tab.show()) {\r\n                <mat-tab [label]=\"tab.coerRef()\" [disabled]=\"tab.isDisabled()\">\r\n                    <ng-template mat-tab-label>\r\n                        <span [id]=\"_SetToolTip(tab)\" class=\"tab\" lifeCycle (onDestroy)=\"_RemoveTooltip($event)\">\r\n                            <i [class]=\"_GetIcon(tab)\"></i>\r\n                            <span [class]=\"_GetIcon(tab).length > 0 ? 'ms-2' : ''\">\r\n                                {{ _GetTitle(tab) }}\r\n                            </span>\r\n                        </span>\r\n                    </ng-template>\r\n\r\n                    <ng-template matTabContent>\r\n                        <div class=\"tab-content\"\r\n                            [ngStyle]=\"{\r\n                                'height': height(),\r\n                                'min-height': minHeight(),\r\n                                'max-height': maxHeight()\r\n                            }\">\r\n\r\n                            <ng-container [ngTemplateOutlet]=\"tab.template\"></ng-container>\r\n                        </div>\r\n                    </ng-template>\r\n                </mat-tab>\r\n            }\r\n        }\r\n    </mat-tab-group>\r\n</div>  ", styles: ["div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header{background-color:#f5f5f562!important;border-bottom:1px solid var(--smoke)!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab.mat-mdc-tab{padding:0!important;height:35px!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab--active.mdc-tab-indicator--active *{color:var(--navigation-inner)!important;border-color:var(--navigation-inner)!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header span.tab{padding:10px 20px!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper{overflow:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body{overflow:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content{width:auto!important;overflow-x:auto!important;overflow-y:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content div.tab-content{padding:5px}\n"] }]
         }], propDecorators: { contentRef: [{
                 type: ContentChildren,
                 args: [CoerRefDirective]