ets-fe-ng-sdk 19.0.21 → 19.0.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -16191,6 +16191,8 @@ class VerticalNavComponent {
|
|
|
16191
16191
|
// readonly autoExpandToCurrentPageMatcher = input<(menuItem: IMenuItem) => boolean>();
|
|
16192
16192
|
this.shouldShowChild = computed(() => this.shouldShowChildInput() || (() => true));
|
|
16193
16193
|
this.toolbarTitle = input();
|
|
16194
|
+
this.drawerMode = input();
|
|
16195
|
+
this.opened = input();
|
|
16194
16196
|
this.toolbarLogo = input();
|
|
16195
16197
|
this.toolbarLogoStyle = input();
|
|
16196
16198
|
this.fixedTopGap = input();
|
|
@@ -16210,6 +16212,11 @@ class VerticalNavComponent {
|
|
|
16210
16212
|
ds.data = menu;
|
|
16211
16213
|
return ds;
|
|
16212
16214
|
});
|
|
16215
|
+
this.computedDrawerMode = computed(() => this.drawerMode() || (this.uS.isMobileSignal() ? 'over' : 'side'));
|
|
16216
|
+
this.computedOpened = computed(() => {
|
|
16217
|
+
const opened = this.opened();
|
|
16218
|
+
return opened != null ? opened : !this.uS.isMobileSignal() && this.showMenu();
|
|
16219
|
+
});
|
|
16213
16220
|
this.id = signal('matSideNav' + this.uS.genRandomID);
|
|
16214
16221
|
this.treeControl = signal(new NestedTreeControl((node) => node.subs));
|
|
16215
16222
|
this.drawer = viewChild('snav');
|
|
@@ -16276,7 +16283,7 @@ class VerticalNavComponent {
|
|
|
16276
16283
|
this.drawer().toggle();
|
|
16277
16284
|
}
|
|
16278
16285
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: VerticalNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16279
|
-
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" }] }); }
|
|
16286
|
+
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 }, drawerMode: { classPropertyName: "drawerMode", publicName: "drawerMode", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", 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]=\"computedDrawerMode()\"\n [opened]=\"computedOpened()\"\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" }] }); }
|
|
16280
16287
|
}
|
|
16281
16288
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: VerticalNavComponent, decorators: [{
|
|
16282
16289
|
type: Component,
|
|
@@ -16291,7 +16298,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
|
|
|
16291
16298
|
MatMenuModule,
|
|
16292
16299
|
CommonModule,
|
|
16293
16300
|
SDKTranslatePipe,
|
|
16294
|
-
], 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]=\"
|
|
16301
|
+
], 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]=\"computedDrawerMode()\"\n [opened]=\"computedOpened()\"\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"] }]
|
|
16295
16302
|
}], ctorParameters: () => [] });
|
|
16296
16303
|
|
|
16297
16304
|
class TextAreaModalComponent {
|