ets-fe-ng-sdk 19.0.20 → 19.0.22

package/fesm2022/ets-fe-ng-sdk.mjs

@@ -16272,8 +16272,11 @@ class VerticalNavComponent {
         //   if (this.autoExpandToCurrentPage()) this.expandToCurrentPage();
         // }, 500);
     }
+    toggleSideMenu() {
+        this.drawer().toggle();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: VerticalNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: VerticalNavComponent, isStandalone: true, selector: "vertical-nav", inputs: { shouldShowChildInput: { classPropertyName: "shouldShowChildInput", publicName: "shouldShowChildInput", isSignal: true, isRequired: false, transformFunction: null }, toolbarTitle: { classPropertyName: "toolbarTitle", publicName: "toolbarTitle", isSignal: true, isRequired: false, transformFunction: null }, toolbarLogo: { classPropertyName: "toolbarLogo", publicName: "toolbarLogo", isSignal: true, isRequired: false, transformFunction: null }, toolbarLogoStyle: { classPropertyName: "toolbarLogoStyle", publicName: "toolbarLogoStyle", isSignal: true, isRequired: false, transformFunction: null }, fixedTopGap: { classPropertyName: "fixedTopGap", publicName: "fixedTopGap", isSignal: true, isRequired: false, transformFunction: null }, sidenavTemplate: { classPropertyName: "sidenavTemplate", publicName: "sidenavTemplate", isSignal: true, isRequired: false, transformFunction: null }, toolbarTemplate: { classPropertyName: "toolbarTemplate", publicName: "toolbarTemplate", isSignal: true, isRequired: false, transformFunction: null }, toolbarEndTemplate: { classPropertyName: "toolbarEndTemplate", publicName: "toolbarEndTemplate", isSignal: true, isRequired: false, transformFunction: null }, bodyTemplate: { classPropertyName: "bodyTemplate", publicName: "bodyTemplate", isSignal: true, isRequired: false, transformFunction: null }, useToolbar: { classPropertyName: "useToolbar", publicName: "useToolbar", isSignal: true, isRequired: false, transformFunction: null }, showMenu: { classPropertyName: "showMenu", publicName: "showMenu", isSignal: true, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "drawer", first: true, predicate: ["snav"], descendants: true, isSignal: true }, { propertyName: "toolbarContRef", first: true, predicate: ["toolbarCont"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"vertical-nav\" [class.vertical-nav-is-mobile]=\"uS.isMobileSignal()\">\n  @if (useToolbar()) {\n    <div #toolbarCont class=\"vertical-nav-toolbar\">\n      @if (toolbarTemplate()) {\n        <ng-container *ngTemplateOutlet=\"toolbarTemplate()\" />\n      } @else {\n        <mat-toolbar color=\"primary\" class=\"bg-primary d-flex justify-content-between\">\n          <div class=\"d-flex align-items-center w-100\">\n            @if (showMenu()) {\n              <button mat-icon-button (click)=\"snav.toggle()\">\n                <mat-icon>menu</mat-icon>\n              </button>\n            }\n            @if (toolbarLogo()) {\n              <img\n                [src]=\"toolbarLogo()\"\n                [ngStyle]=\"toolbarLogoStyle()\"\n                alt=\"toolbar logo\"\n                class=\"toolbarLogo\" />\n            }\n            @if (toolbarTitle()) {\n              <h1 class=\"vertical-nav-app-name\">{{ toolbarTitle() | appTranslate | async }}</h1>\n            }\n          </div>\n          <div>\n            @if (toolbarEndTemplate()) {\n              <ng-container *ngTemplateOutlet=\"toolbarEndTemplate()\" />\n            }\n          </div>\n        </mat-toolbar>\n      }\n    </div>\n  }\n\n  <mat-sidenav-container\n    [id]=\"id()\"\n    class=\"vertical-nav-container\"\n    [style.marginTop.px]=\"\n      uS.isMobileSignal() ? fixedTopGap() || toolbarContRef()?.nativeElement?.offsetHeight : 0\n    \">\n    <mat-sidenav\n      class=\"side-w\"\n      [ngClass]=\"{ mobile: this.uS.isMobileSignal() }\"\n      #snav\n      [mode]=\"uS.isMobileSignal() ? 'over' : 'side'\"\n      [opened]=\"!uS.isMobileSignal() && showMenu()\"\n      [fixedInViewport]=\"uS.isMobileSignal()\"\n      [fixedTopGap]=\"\n        uS.isMobileSignal() ? fixedTopGap() || toolbarContRef()?.nativeElement?.offsetHeight : 0\n      \"\n      [hidden]=\"!showMenu()\">\n      <div class=\"vertical-nav-side-padding\">\n        @if (sidenavTemplate()) {\n          <ng-container *ngTemplateOutlet=\"sidenavTemplate()\" />\n        } @else {\n          <mat-tree\n            [dataSource]=\"dataSource()\"\n            [treeControl]=\"treeControl()\"\n            class=\"vertical-nav-tree\">\n            <!-- This is the tree node template for leaf nodes -->\n            <!-- This is the tree node template for expandable nodes -->\n            <mat-nested-tree-node\n              *matTreeNodeDef=\"let node; when: hasChild()\"\n              class=\"expandable-node\">\n              <div class=\"mat-tree-node\">\n                <button\n                  matTreeNodeToggle\n                  [attr.aria-label]=\"'Toggle ' + node.label\"\n                  class=\"menu-btn level{{ node.level }}\">\n                  <div class=\"row\">\n                    <div class=\"col\">\n                      <span class=\"{{ node.icon }}\"></span>\n                      {{ node.label | appTranslate | async }}\n                    </div>\n                    <div class=\"col-auto\">\n                      <span\n                        class=\"fa {{\n                          treeControl().isExpanded(node) ? 'fa-chevron-down' : 'fa-chevron-right'\n                        }} \"></span>\n                    </div>\n                  </div>\n                </button>\n              </div>\n              <div>\n                <!-- There is inline padding applied to this div using styles.\n            This padding value depends on the mat-icon-button width.  -->\n                <div\n                  [class.vertical-nav-tree-invisible]=\"!treeControl().isExpanded(node)\"\n                  role=\"group\"\n                  class=\"group\">\n                  <ng-container matTreeNodeOutlet />\n                </div>\n              </div>\n            </mat-nested-tree-node>\n            <!-- There is inline padding applied to this node using styles.\n    This padding value depends on the mat-icon-button width. -->\n            <mat-tree-node\n              *matTreeNodeDef=\"let node; when: shouldShowChild()\"\n              matTreeNodeToggle\n              class=\"single-node level{{ node.level }}\">\n              @if (node.link != null || node.queryParams) {\n                <a\n                  [routerLink]=\"node.link\"\n                  routerLinkActive=\"active\"\n                  [queryParams]=\"node.queryParams\"\n                  class=\"d-block w-100\">\n                  <span class=\"{{ node.icon }}\"></span>\n                  {{ node.label | appTranslate | async }}\n                </a>\n              } @else {\n                <a (click)=\"node.action?.(node)\" class=\"d-block w-100 pointer\">\n                  <span class=\"{{ node.icon }}\"></span>\n                  {{ node.label | appTranslate | async }}\n                </a>\n              }\n            </mat-tree-node>\n            <mat-tree-node\n              *matTreeNodeDef=\"let node\"\n              matTreeNodeToggle\n              class=\"single-node restricted level{{ node.level }}\" />\n          </mat-tree>\n        }\n      </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content class=\"vertical-nav-body\">\n      @if (bodyTemplate()) {\n        <ng-container *ngTemplateOutlet=\"bodyTemplate()\" />\n      } @else {\n        <ng-content />\n      }\n    </mat-sidenav-content>\n  </mat-sidenav-container>\n</div>\n", styles: [":host{--contentMarginLeft: var(--sideNavWidth)}.menu{background-color:#fff}.vertical-nav{display:flex;flex-direction:column;height:100%}.vertical-nav.fullScreen{position:absolute;inset:0}.toolbarLogo{--toolbarLogoDimen: 50px;height:var(--toolbarLogoDimen)}h1.vertical-nav-app-name{margin-left:8px}.vertical-nav-container{flex:1}.vertical-nav-is-mobile .vertical-nav-toolbar{position:fixed;z-index:2;width:100%}.vertical-nav-is-mobile .vertical-nav-container{flex:1 0 auto}.mat-drawer-container{background-color:unset}.mat-drawer-content{background-color:#e9e9e9}.expandable-node button{width:100%;border-radius:0;text-align:left}.single-node button{width:24px}.level0{border-bottom:1px solid rgba(141,141,141,.231372549)}.side-w{width:var(--sideNavWidth, auto);margin:var(--sideNavMargin, 10px);border-radius:16px}.side-w.mobile{width:90%;margin:0;border-radius:0}.vertical-nav-tree-invisible{display:none}.vertical-nav-tree ul,.vertical-nav-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.vertical-nav-tree div[role=group]{border-radius:var(--borderRadius);background-color:#ffffff57}.vertical-nav-tree div[role=group]>.mat-tree-node{padding:10px 20px}a{color:inherit}.restricted{display:none}mat-sidenav.mat-drawer.mat-drawer-opened.mat-drawer-side.mat-sidenav{min-width:200px;overflow-x:auto;white-space:nowrap}.menu-btn{background-color:#ffffff57;border-radius:var(--borderRadius)!important;padding:10px 20px;color:#2b2b2b;border:none}.expandable-node .group{border:1px solid rgba(0,0,0,.11)!important}.profile{position:sticky;bottom:0;right:0;left:0;background-color:var(--primary);background-image:linear-gradient(45deg,#ffffffa8,#ffffffa8);padding:10px}.vertical-nav-body{margin-left:var(--contentMarginLeft, inherit)!important}.vertical-nav-side-padding{padding:var(--space-8)}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i1$6.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i4.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i5$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i5$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i5$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i5$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i5$1.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: i5$1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: CommonModule }, { 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"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: VerticalNavComponent, isStandalone: true, selector: "vertical-nav", inputs: { shouldShowChildInput: { classPropertyName: "shouldShowChildInput", publicName: "shouldShowChildInput", isSignal: true, isRequired: false, transformFunction: null }, toolbarTitle: { classPropertyName: "toolbarTitle", publicName: "toolbarTitle", isSignal: true, isRequired: false, transformFunction: null }, toolbarLogo: { classPropertyName: "toolbarLogo", publicName: "toolbarLogo", isSignal: true, isRequired: false, transformFunction: null }, toolbarLogoStyle: { classPropertyName: "toolbarLogoStyle", publicName: "toolbarLogoStyle", isSignal: true, isRequired: false, transformFunction: null }, fixedTopGap: { classPropertyName: "fixedTopGap", publicName: "fixedTopGap", isSignal: true, isRequired: false, transformFunction: null }, sidenavTemplate: { classPropertyName: "sidenavTemplate", publicName: "sidenavTemplate", isSignal: true, isRequired: false, transformFunction: null }, toolbarTemplate: { classPropertyName: "toolbarTemplate", publicName: "toolbarTemplate", isSignal: true, isRequired: false, transformFunction: null }, toolbarEndTemplate: { classPropertyName: "toolbarEndTemplate", publicName: "toolbarEndTemplate", isSignal: true, isRequired: false, transformFunction: null }, bodyTemplate: { classPropertyName: "bodyTemplate", publicName: "bodyTemplate", isSignal: true, isRequired: false, transformFunction: null }, useToolbar: { classPropertyName: "useToolbar", publicName: "useToolbar", isSignal: true, isRequired: false, transformFunction: null }, showMenu: { classPropertyName: "showMenu", publicName: "showMenu", isSignal: true, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "drawer", first: true, predicate: ["snav"], descendants: true, isSignal: true }, { propertyName: "toolbarContRef", first: true, predicate: ["toolbarCont"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"vertical-nav\" [class.vertical-nav-is-mobile]=\"uS.isMobileSignal()\" [class.closed]=\"!snav.opened\">\n  @if (useToolbar()) {\n    <div #toolbarCont class=\"vertical-nav-toolbar\">\n      @if (toolbarTemplate()) {\n        <ng-container *ngTemplateOutlet=\"toolbarTemplate()\" />\n      } @else {\n        <mat-toolbar color=\"primary\" class=\"bg-primary d-flex justify-content-between\">\n          <div class=\"d-flex align-items-center w-100\">\n            @if (showMenu()) {\n              <button mat-icon-button (click)=\"snav.toggle()\">\n                <mat-icon>menu</mat-icon>\n              </button>\n            }\n            @if (toolbarLogo()) {\n              <img\n                [src]=\"toolbarLogo()\"\n                [ngStyle]=\"toolbarLogoStyle()\"\n                alt=\"toolbar logo\"\n                class=\"toolbarLogo\" />\n            }\n            @if (toolbarTitle()) {\n              <h1 class=\"vertical-nav-app-name\">{{ toolbarTitle() | appTranslate | async }}</h1>\n            }\n          </div>\n          <div>\n            @if (toolbarEndTemplate()) {\n              <ng-container *ngTemplateOutlet=\"toolbarEndTemplate()\" />\n            }\n          </div>\n        </mat-toolbar>\n      }\n    </div>\n  }\n\n  <mat-sidenav-container\n    [id]=\"id()\"\n    class=\"vertical-nav-container\"\n    [style.marginTop.px]=\"\n      uS.isMobileSignal() ? fixedTopGap() || toolbarContRef()?.nativeElement?.offsetHeight : 0\n    \" >\n    <mat-sidenav\n      class=\"side-w\"\n      [ngClass]=\"{ mobile: this.uS.isMobileSignal() }\"\n      #snav\n      [mode]=\"uS.isMobileSignal() ? 'over' : 'side'\"\n      [opened]=\"!uS.isMobileSignal() && showMenu()\"\n      [fixedInViewport]=\"uS.isMobileSignal()\"\n      [fixedTopGap]=\"\n        uS.isMobileSignal() ? fixedTopGap() || toolbarContRef()?.nativeElement?.offsetHeight : 0\n      \"\n      [hidden]=\"!showMenu()\">\n      <div class=\"vertical-nav-side-padding\">\n        @if (sidenavTemplate()) {\n          <ng-container *ngTemplateOutlet=\"sidenavTemplate()\" />\n        } @else {\n          <mat-tree\n            [dataSource]=\"dataSource()\"\n            [treeControl]=\"treeControl()\"\n            class=\"vertical-nav-tree\">\n            <!-- This is the tree node template for leaf nodes -->\n            <!-- This is the tree node template for expandable nodes -->\n            <mat-nested-tree-node\n              *matTreeNodeDef=\"let node; when: hasChild()\"\n              class=\"expandable-node\">\n              <div class=\"mat-tree-node\">\n                <button\n                  matTreeNodeToggle\n                  [attr.aria-label]=\"'Toggle ' + node.label\"\n                  class=\"menu-btn level{{ node.level }}\">\n                  <div class=\"row\">\n                    <div class=\"col\">\n                      <span class=\"{{ node.icon }}\"></span>\n                      {{ node.label | appTranslate | async }}\n                    </div>\n                    <div class=\"col-auto\">\n                      <span\n                        class=\"fa {{\n                          treeControl().isExpanded(node) ? 'fa-chevron-down' : 'fa-chevron-right'\n                        }} \"></span>\n                    </div>\n                  </div>\n                </button>\n              </div>\n              <div>\n                <!-- There is inline padding applied to this div using styles.\n            This padding value depends on the mat-icon-button width.  -->\n                <div\n                  [class.vertical-nav-tree-invisible]=\"!treeControl().isExpanded(node)\"\n                  role=\"group\"\n                  class=\"group\">\n                  <ng-container matTreeNodeOutlet />\n                </div>\n              </div>\n            </mat-nested-tree-node>\n            <!-- There is inline padding applied to this node using styles.\n    This padding value depends on the mat-icon-button width. -->\n            <mat-tree-node\n              *matTreeNodeDef=\"let node; when: shouldShowChild()\"\n              matTreeNodeToggle\n              class=\"single-node level{{ node.level }}\">\n              @if (node.link != null || node.queryParams) {\n                <a\n                  [routerLink]=\"node.link\"\n                  routerLinkActive=\"active\"\n                  [queryParams]=\"node.queryParams\"\n                  class=\"d-block w-100\">\n                  <span class=\"{{ node.icon }}\"></span>\n                  {{ node.label | appTranslate | async }}\n                </a>\n              } @else {\n                <a (click)=\"node.action?.(node)\" class=\"d-block w-100 pointer\">\n                  <span class=\"{{ node.icon }}\"></span>\n                  {{ node.label | appTranslate | async }}\n                </a>\n              }\n            </mat-tree-node>\n            <mat-tree-node\n              *matTreeNodeDef=\"let node\"\n              matTreeNodeToggle\n              class=\"single-node restricted level{{ node.level }}\" />\n          </mat-tree>\n        }\n      </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content class=\"vertical-nav-body\">\n      @if (bodyTemplate()) {\n        <ng-container *ngTemplateOutlet=\"bodyTemplate()\" />\n      } @else {\n        <ng-content />\n      }\n    </mat-sidenav-content>\n  </mat-sidenav-container>\n</div>\n", styles: [":host{--contentMarginLeft: var(--sideNavWidth)}.menu{background-color:#fff}.vertical-nav{display:flex;flex-direction:column;height:100%}.vertical-nav.fullScreen{position:absolute;inset:0}.toolbarLogo{--toolbarLogoDimen: 50px;height:var(--toolbarLogoDimen)}h1.vertical-nav-app-name{margin-left:8px}.vertical-nav-container{flex:1}.vertical-nav-is-mobile,.closed{--contentMarginLeft: 0}.vertical-nav-is-mobile .vertical-nav-toolbar{position:fixed;z-index:2;width:100%}.vertical-nav-is-mobile .vertical-nav-container{flex:1 0 auto}.mat-drawer-container{background-color:unset}.mat-drawer-content{background-color:#e9e9e9}.expandable-node button{width:100%;border-radius:0;text-align:left}.single-node button{width:24px}.level0{border-bottom:1px solid rgba(141,141,141,.231372549)}.side-w{width:var(--sideNavWidth, auto);margin:var(--sideNavMargin, 10px);border-radius:16px}.side-w.mobile{width:90%;margin:0;border-radius:0}.vertical-nav-tree-invisible{display:none}.vertical-nav-tree ul,.vertical-nav-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.vertical-nav-tree div[role=group]{border-radius:var(--borderRadius);background-color:#ffffff57}.vertical-nav-tree div[role=group]>.mat-tree-node{padding:10px 20px}a{color:inherit}.restricted{display:none}mat-sidenav.mat-drawer.mat-drawer-opened.mat-drawer-side.mat-sidenav{min-width:200px;overflow-x:auto;white-space:nowrap}.menu-btn{background-color:#ffffff57;border-radius:var(--borderRadius)!important;padding:10px 20px;color:#2b2b2b;border:none}.expandable-node .group{border:1px solid rgba(0,0,0,.11)!important}.profile{position:sticky;bottom:0;right:0;left:0;background-color:var(--primary);background-image:linear-gradient(45deg,#ffffffa8,#ffffffa8);padding:10px}.vertical-nav-body{margin-left:var(--contentMarginLeft, inherit)!important}.vertical-nav-side-padding{padding:var(--space-8)}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i1$6.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i4.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i5$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i5$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i5$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i5$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i5$1.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: i5$1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: CommonModule }, { 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"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: VerticalNavComponent, decorators: [{
             type: Component,
@@ -16286,10 +16289,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                         RouterLink,
                         RouterLinkActive,
                         MatMenuModule,
-                        ImageLoaderDirective,
                         CommonModule,
                         SDKTranslatePipe,
-                    ], template: "<div class=\"vertical-nav\" [class.vertical-nav-is-mobile]=\"uS.isMobileSignal()\">\n  @if (useToolbar()) {\n    <div #toolbarCont class=\"vertical-nav-toolbar\">\n      @if (toolbarTemplate()) {\n        <ng-container *ngTemplateOutlet=\"toolbarTemplate()\" />\n      } @else {\n        <mat-toolbar color=\"primary\" class=\"bg-primary d-flex justify-content-between\">\n          <div class=\"d-flex align-items-center w-100\">\n            @if (showMenu()) {\n              <button mat-icon-button (click)=\"snav.toggle()\">\n                <mat-icon>menu</mat-icon>\n              </button>\n            }\n            @if (toolbarLogo()) {\n              <img\n                [src]=\"toolbarLogo()\"\n                [ngStyle]=\"toolbarLogoStyle()\"\n                alt=\"toolbar logo\"\n                class=\"toolbarLogo\" />\n            }\n            @if (toolbarTitle()) {\n              <h1 class=\"vertical-nav-app-name\">{{ toolbarTitle() | appTranslate | async }}</h1>\n            }\n          </div>\n          <div>\n            @if (toolbarEndTemplate()) {\n              <ng-container *ngTemplateOutlet=\"toolbarEndTemplate()\" />\n            }\n          </div>\n        </mat-toolbar>\n      }\n    </div>\n  }\n\n  <mat-sidenav-container\n    [id]=\"id()\"\n    class=\"vertical-nav-container\"\n    [style.marginTop.px]=\"\n      uS.isMobileSignal() ? fixedTopGap() || toolbarContRef()?.nativeElement?.offsetHeight : 0\n    \">\n    <mat-sidenav\n      class=\"side-w\"\n      [ngClass]=\"{ mobile: this.uS.isMobileSignal() }\"\n      #snav\n      [mode]=\"uS.isMobileSignal() ? 'over' : 'side'\"\n      [opened]=\"!uS.isMobileSignal() && showMenu()\"\n      [fixedInViewport]=\"uS.isMobileSignal()\"\n      [fixedTopGap]=\"\n        uS.isMobileSignal() ? fixedTopGap() || toolbarContRef()?.nativeElement?.offsetHeight : 0\n      \"\n      [hidden]=\"!showMenu()\">\n      <div class=\"vertical-nav-side-padding\">\n        @if (sidenavTemplate()) {\n          <ng-container *ngTemplateOutlet=\"sidenavTemplate()\" />\n        } @else {\n          <mat-tree\n            [dataSource]=\"dataSource()\"\n            [treeControl]=\"treeControl()\"\n            class=\"vertical-nav-tree\">\n            <!-- This is the tree node template for leaf nodes -->\n            <!-- This is the tree node template for expandable nodes -->\n            <mat-nested-tree-node\n              *matTreeNodeDef=\"let node; when: hasChild()\"\n              class=\"expandable-node\">\n              <div class=\"mat-tree-node\">\n                <button\n                  matTreeNodeToggle\n                  [attr.aria-label]=\"'Toggle ' + node.label\"\n                  class=\"menu-btn level{{ node.level }}\">\n                  <div class=\"row\">\n                    <div class=\"col\">\n                      <span class=\"{{ node.icon }}\"></span>\n                      {{ node.label | appTranslate | async }}\n                    </div>\n                    <div class=\"col-auto\">\n                      <span\n                        class=\"fa {{\n                          treeControl().isExpanded(node) ? 'fa-chevron-down' : 'fa-chevron-right'\n                        }} \"></span>\n                    </div>\n                  </div>\n                </button>\n              </div>\n              <div>\n                <!-- There is inline padding applied to this div using styles.\n            This padding value depends on the mat-icon-button width.  -->\n                <div\n                  [class.vertical-nav-tree-invisible]=\"!treeControl().isExpanded(node)\"\n                  role=\"group\"\n                  class=\"group\">\n                  <ng-container matTreeNodeOutlet />\n                </div>\n              </div>\n            </mat-nested-tree-node>\n            <!-- There is inline padding applied to this node using styles.\n    This padding value depends on the mat-icon-button width. -->\n            <mat-tree-node\n              *matTreeNodeDef=\"let node; when: shouldShowChild()\"\n              matTreeNodeToggle\n              class=\"single-node level{{ node.level }}\">\n              @if (node.link != null || node.queryParams) {\n                <a\n                  [routerLink]=\"node.link\"\n                  routerLinkActive=\"active\"\n                  [queryParams]=\"node.queryParams\"\n                  class=\"d-block w-100\">\n                  <span class=\"{{ node.icon }}\"></span>\n                  {{ node.label | appTranslate | async }}\n                </a>\n              } @else {\n                <a (click)=\"node.action?.(node)\" class=\"d-block w-100 pointer\">\n                  <span class=\"{{ node.icon }}\"></span>\n                  {{ node.label | appTranslate | async }}\n                </a>\n              }\n            </mat-tree-node>\n            <mat-tree-node\n              *matTreeNodeDef=\"let node\"\n              matTreeNodeToggle\n              class=\"single-node restricted level{{ node.level }}\" />\n          </mat-tree>\n        }\n      </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content class=\"vertical-nav-body\">\n      @if (bodyTemplate()) {\n        <ng-container *ngTemplateOutlet=\"bodyTemplate()\" />\n      } @else {\n        <ng-content />\n      }\n    </mat-sidenav-content>\n  </mat-sidenav-container>\n</div>\n", styles: [":host{--contentMarginLeft: var(--sideNavWidth)}.menu{background-color:#fff}.vertical-nav{display:flex;flex-direction:column;height:100%}.vertical-nav.fullScreen{position:absolute;inset:0}.toolbarLogo{--toolbarLogoDimen: 50px;height:var(--toolbarLogoDimen)}h1.vertical-nav-app-name{margin-left:8px}.vertical-nav-container{flex:1}.vertical-nav-is-mobile .vertical-nav-toolbar{position:fixed;z-index:2;width:100%}.vertical-nav-is-mobile .vertical-nav-container{flex:1 0 auto}.mat-drawer-container{background-color:unset}.mat-drawer-content{background-color:#e9e9e9}.expandable-node button{width:100%;border-radius:0;text-align:left}.single-node button{width:24px}.level0{border-bottom:1px solid rgba(141,141,141,.231372549)}.side-w{width:var(--sideNavWidth, auto);margin:var(--sideNavMargin, 10px);border-radius:16px}.side-w.mobile{width:90%;margin:0;border-radius:0}.vertical-nav-tree-invisible{display:none}.vertical-nav-tree ul,.vertical-nav-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.vertical-nav-tree div[role=group]{border-radius:var(--borderRadius);background-color:#ffffff57}.vertical-nav-tree div[role=group]>.mat-tree-node{padding:10px 20px}a{color:inherit}.restricted{display:none}mat-sidenav.mat-drawer.mat-drawer-opened.mat-drawer-side.mat-sidenav{min-width:200px;overflow-x:auto;white-space:nowrap}.menu-btn{background-color:#ffffff57;border-radius:var(--borderRadius)!important;padding:10px 20px;color:#2b2b2b;border:none}.expandable-node .group{border:1px solid rgba(0,0,0,.11)!important}.profile{position:sticky;bottom:0;right:0;left:0;background-color:var(--primary);background-image:linear-gradient(45deg,#ffffffa8,#ffffffa8);padding:10px}.vertical-nav-body{margin-left:var(--contentMarginLeft, inherit)!important}.vertical-nav-side-padding{padding:var(--space-8)}\n"] }]
+                    ], template: "<div class=\"vertical-nav\" [class.vertical-nav-is-mobile]=\"uS.isMobileSignal()\" [class.closed]=\"!snav.opened\">\n  @if (useToolbar()) {\n    <div #toolbarCont class=\"vertical-nav-toolbar\">\n      @if (toolbarTemplate()) {\n        <ng-container *ngTemplateOutlet=\"toolbarTemplate()\" />\n      } @else {\n        <mat-toolbar color=\"primary\" class=\"bg-primary d-flex justify-content-between\">\n          <div class=\"d-flex align-items-center w-100\">\n            @if (showMenu()) {\n              <button mat-icon-button (click)=\"snav.toggle()\">\n                <mat-icon>menu</mat-icon>\n              </button>\n            }\n            @if (toolbarLogo()) {\n              <img\n                [src]=\"toolbarLogo()\"\n                [ngStyle]=\"toolbarLogoStyle()\"\n                alt=\"toolbar logo\"\n                class=\"toolbarLogo\" />\n            }\n            @if (toolbarTitle()) {\n              <h1 class=\"vertical-nav-app-name\">{{ toolbarTitle() | appTranslate | async }}</h1>\n            }\n          </div>\n          <div>\n            @if (toolbarEndTemplate()) {\n              <ng-container *ngTemplateOutlet=\"toolbarEndTemplate()\" />\n            }\n          </div>\n        </mat-toolbar>\n      }\n    </div>\n  }\n\n  <mat-sidenav-container\n    [id]=\"id()\"\n    class=\"vertical-nav-container\"\n    [style.marginTop.px]=\"\n      uS.isMobileSignal() ? fixedTopGap() || toolbarContRef()?.nativeElement?.offsetHeight : 0\n    \" >\n    <mat-sidenav\n      class=\"side-w\"\n      [ngClass]=\"{ mobile: this.uS.isMobileSignal() }\"\n      #snav\n      [mode]=\"uS.isMobileSignal() ? 'over' : 'side'\"\n      [opened]=\"!uS.isMobileSignal() && showMenu()\"\n      [fixedInViewport]=\"uS.isMobileSignal()\"\n      [fixedTopGap]=\"\n        uS.isMobileSignal() ? fixedTopGap() || toolbarContRef()?.nativeElement?.offsetHeight : 0\n      \"\n      [hidden]=\"!showMenu()\">\n      <div class=\"vertical-nav-side-padding\">\n        @if (sidenavTemplate()) {\n          <ng-container *ngTemplateOutlet=\"sidenavTemplate()\" />\n        } @else {\n          <mat-tree\n            [dataSource]=\"dataSource()\"\n            [treeControl]=\"treeControl()\"\n            class=\"vertical-nav-tree\">\n            <!-- This is the tree node template for leaf nodes -->\n            <!-- This is the tree node template for expandable nodes -->\n            <mat-nested-tree-node\n              *matTreeNodeDef=\"let node; when: hasChild()\"\n              class=\"expandable-node\">\n              <div class=\"mat-tree-node\">\n                <button\n                  matTreeNodeToggle\n                  [attr.aria-label]=\"'Toggle ' + node.label\"\n                  class=\"menu-btn level{{ node.level }}\">\n                  <div class=\"row\">\n                    <div class=\"col\">\n                      <span class=\"{{ node.icon }}\"></span>\n                      {{ node.label | appTranslate | async }}\n                    </div>\n                    <div class=\"col-auto\">\n                      <span\n                        class=\"fa {{\n                          treeControl().isExpanded(node) ? 'fa-chevron-down' : 'fa-chevron-right'\n                        }} \"></span>\n                    </div>\n                  </div>\n                </button>\n              </div>\n              <div>\n                <!-- There is inline padding applied to this div using styles.\n            This padding value depends on the mat-icon-button width.  -->\n                <div\n                  [class.vertical-nav-tree-invisible]=\"!treeControl().isExpanded(node)\"\n                  role=\"group\"\n                  class=\"group\">\n                  <ng-container matTreeNodeOutlet />\n                </div>\n              </div>\n            </mat-nested-tree-node>\n            <!-- There is inline padding applied to this node using styles.\n    This padding value depends on the mat-icon-button width. -->\n            <mat-tree-node\n              *matTreeNodeDef=\"let node; when: shouldShowChild()\"\n              matTreeNodeToggle\n              class=\"single-node level{{ node.level }}\">\n              @if (node.link != null || node.queryParams) {\n                <a\n                  [routerLink]=\"node.link\"\n                  routerLinkActive=\"active\"\n                  [queryParams]=\"node.queryParams\"\n                  class=\"d-block w-100\">\n                  <span class=\"{{ node.icon }}\"></span>\n                  {{ node.label | appTranslate | async }}\n                </a>\n              } @else {\n                <a (click)=\"node.action?.(node)\" class=\"d-block w-100 pointer\">\n                  <span class=\"{{ node.icon }}\"></span>\n                  {{ node.label | appTranslate | async }}\n                </a>\n              }\n            </mat-tree-node>\n            <mat-tree-node\n              *matTreeNodeDef=\"let node\"\n              matTreeNodeToggle\n              class=\"single-node restricted level{{ node.level }}\" />\n          </mat-tree>\n        }\n      </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content class=\"vertical-nav-body\">\n      @if (bodyTemplate()) {\n        <ng-container *ngTemplateOutlet=\"bodyTemplate()\" />\n      } @else {\n        <ng-content />\n      }\n    </mat-sidenav-content>\n  </mat-sidenav-container>\n</div>\n", styles: [":host{--contentMarginLeft: var(--sideNavWidth)}.menu{background-color:#fff}.vertical-nav{display:flex;flex-direction:column;height:100%}.vertical-nav.fullScreen{position:absolute;inset:0}.toolbarLogo{--toolbarLogoDimen: 50px;height:var(--toolbarLogoDimen)}h1.vertical-nav-app-name{margin-left:8px}.vertical-nav-container{flex:1}.vertical-nav-is-mobile,.closed{--contentMarginLeft: 0}.vertical-nav-is-mobile .vertical-nav-toolbar{position:fixed;z-index:2;width:100%}.vertical-nav-is-mobile .vertical-nav-container{flex:1 0 auto}.mat-drawer-container{background-color:unset}.mat-drawer-content{background-color:#e9e9e9}.expandable-node button{width:100%;border-radius:0;text-align:left}.single-node button{width:24px}.level0{border-bottom:1px solid rgba(141,141,141,.231372549)}.side-w{width:var(--sideNavWidth, auto);margin:var(--sideNavMargin, 10px);border-radius:16px}.side-w.mobile{width:90%;margin:0;border-radius:0}.vertical-nav-tree-invisible{display:none}.vertical-nav-tree ul,.vertical-nav-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.vertical-nav-tree div[role=group]{border-radius:var(--borderRadius);background-color:#ffffff57}.vertical-nav-tree div[role=group]>.mat-tree-node{padding:10px 20px}a{color:inherit}.restricted{display:none}mat-sidenav.mat-drawer.mat-drawer-opened.mat-drawer-side.mat-sidenav{min-width:200px;overflow-x:auto;white-space:nowrap}.menu-btn{background-color:#ffffff57;border-radius:var(--borderRadius)!important;padding:10px 20px;color:#2b2b2b;border:none}.expandable-node .group{border:1px solid rgba(0,0,0,.11)!important}.profile{position:sticky;bottom:0;right:0;left:0;background-color:var(--primary);background-image:linear-gradient(45deg,#ffffffa8,#ffffffa8);padding:10px}.vertical-nav-body{margin-left:var(--contentMarginLeft, inherit)!important}.vertical-nav-side-padding{padding:var(--space-8)}\n"] }]
         }], ctorParameters: () => [] });
 
 class TextAreaModalComponent {