@netgrif/components
Version:
Netgrif Application Engine frontend Angular components
24 lines • 15.1 kB
JavaScript
import { Component } from '@angular/core';
import { AbstractNavigationTreeComponent } from '@netgrif/components-core';
import * as i0 from "@angular/core";
import * as i1 from "@netgrif/components-core";
import * as i2 from "@angular/router";
import * as i3 from "@angular/common";
import * as i4 from "@ngbracket/ngx-layout";
import * as i5 from "@angular/material/button";
import * as i6 from "@angular/material/icon";
import * as i7 from "@angular/material/core";
import * as i8 from "@angular/material/tree";
import * as i9 from "@ngx-translate/core";
export class NavigationTreeComponent extends AbstractNavigationTreeComponent {
constructor(config, router, log, userService, accessService, activeGroupService, taskResourceService, languageService, navigationRouteProvider) {
super(config, router, log, userService, accessService, activeGroupService, taskResourceService, languageService, navigationRouteProvider);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavigationTreeComponent, deps: [{ token: i1.ConfigurationService }, { token: i2.Router }, { token: i1.LoggerService }, { token: i1.UserService }, { token: i1.AccessService }, { token: i1.ActiveGroupService }, { token: i1.TaskResourceService }, { token: i1.LanguageService }, { token: i1.DynamicNavigationRouteProviderService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NavigationTreeComponent, selector: "nc-navigation-tree", usesInheritance: true, ngImport: i0, template: "<mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.width.px]=\"width\">\n\n <!-- This is the tree node template for leaf nodes -->\n <mat-tree-node *matTreeNodeDef=\"let node\" [routerLink]=\"node.url\" routerLinkActive=\"active-navigation-route\"\n matTreeNodeToggle matRipple class=\"tree-node\">\n <button *ngIf=\"node.level >= 1\" mat-icon-button disabled class=\"margin-component\"></button>\n <button *ngIf=\"node.level >= 2\" mat-icon-button disabled class=\"margin-component\"></button>\n <mat-icon color=\"primary\" class=\"tree-node-icon\">{{node.icon}}</mat-icon>\n {{node.translate ? (node.name | translate) : node.name}}\n </mat-tree-node>\n\n <!-- This is the tree node template for expandable nodes -->\n <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\">\n <div class=\"mat-tree-node tree-node\" matTreeNodeToggle matRipple\n [class.bottom-shadow]=\"treeControl.isExpanded(node)\">\n <button *ngIf=\"node.level >= 1\" mat-icon-button disabled class=\"margin-component\"></button>\n <button *ngIf=\"node.level >= 2\" mat-icon-button disabled class=\"margin-component\"></button>\n\n <mat-icon color=\"primary\" class=\"tree-node-icon\">{{node.icon}}</mat-icon>\n {{node.translate ? (node.name | translate) : node.name}}\n\n <div fxFlex></div>\n <button mat-icon-button class=\"nested-tree-expansion-icon\">\n <mat-icon>\n {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\n </mat-icon>\n </button>\n </div>\n <div [class.nested-tree-invisible]=\"!treeControl.isExpanded(node)\" class=\"darker-background\">\n <ng-container matTreeNodeOutlet></ng-container>\n </div>\n </mat-nested-tree-node>\n</mat-tree>\n", styles: [".navigation-tree{outline:none!important}.nested-tree-invisible{display:none}.darker-background{background-color:#0000000d}.bottom-shadow{-webkit-box-shadow:0 2px 4px -4px rgba(0,0,0,.2),0px 4px 5px -3px rgba(0,0,0,.14),0px 6px 10px -5px rgba(0,0,0,.12);box-shadow:0 2px 4px -4px #0003,0 4px 5px -3px #00000024,0 6px 10px -5px #0000001f}.tree-node{outline:none!important;cursor:pointer;padding:4px 12px}.tree-node mat-icon.tree-node-icon{line-height:40px;height:40px;width:24px;margin-right:4px}.tree-node .margin-component{width:8px;margin-right:4px}.nested-tree-expansion-icon{width:24px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i4.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i8.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i8.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i8.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i8.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i8.MatTreeNode, selector: "mat-tree-node", inputs: ["disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "directive", type: i8.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavigationTreeComponent, decorators: [{
type: Component,
args: [{ selector: 'nc-navigation-tree', template: "<mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.width.px]=\"width\">\n\n <!-- This is the tree node template for leaf nodes -->\n <mat-tree-node *matTreeNodeDef=\"let node\" [routerLink]=\"node.url\" routerLinkActive=\"active-navigation-route\"\n matTreeNodeToggle matRipple class=\"tree-node\">\n <button *ngIf=\"node.level >= 1\" mat-icon-button disabled class=\"margin-component\"></button>\n <button *ngIf=\"node.level >= 2\" mat-icon-button disabled class=\"margin-component\"></button>\n <mat-icon color=\"primary\" class=\"tree-node-icon\">{{node.icon}}</mat-icon>\n {{node.translate ? (node.name | translate) : node.name}}\n </mat-tree-node>\n\n <!-- This is the tree node template for expandable nodes -->\n <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\">\n <div class=\"mat-tree-node tree-node\" matTreeNodeToggle matRipple\n [class.bottom-shadow]=\"treeControl.isExpanded(node)\">\n <button *ngIf=\"node.level >= 1\" mat-icon-button disabled class=\"margin-component\"></button>\n <button *ngIf=\"node.level >= 2\" mat-icon-button disabled class=\"margin-component\"></button>\n\n <mat-icon color=\"primary\" class=\"tree-node-icon\">{{node.icon}}</mat-icon>\n {{node.translate ? (node.name | translate) : node.name}}\n\n <div fxFlex></div>\n <button mat-icon-button class=\"nested-tree-expansion-icon\">\n <mat-icon>\n {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\n </mat-icon>\n </button>\n </div>\n <div [class.nested-tree-invisible]=\"!treeControl.isExpanded(node)\" class=\"darker-background\">\n <ng-container matTreeNodeOutlet></ng-container>\n </div>\n </mat-nested-tree-node>\n</mat-tree>\n", styles: [".navigation-tree{outline:none!important}.nested-tree-invisible{display:none}.darker-background{background-color:#0000000d}.bottom-shadow{-webkit-box-shadow:0 2px 4px -4px rgba(0,0,0,.2),0px 4px 5px -3px rgba(0,0,0,.14),0px 6px 10px -5px rgba(0,0,0,.12);box-shadow:0 2px 4px -4px #0003,0 4px 5px -3px #00000024,0 6px 10px -5px #0000001f}.tree-node{outline:none!important;cursor:pointer;padding:4px 12px}.tree-node mat-icon.tree-node-icon{line-height:40px;height:40px;width:24px;margin-right:4px}.tree-node .margin-component{width:8px;margin-right:4px}.nested-tree-expansion-icon{width:24px}\n"] }]
}], ctorParameters: () => [{ type: i1.ConfigurationService }, { type: i2.Router }, { type: i1.LoggerService }, { type: i1.UserService }, { type: i1.AccessService }, { type: i1.ActiveGroupService }, { type: i1.TaskResourceService }, { type: i1.LanguageService }, { type: i1.DynamicNavigationRouteProviderService }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2aWdhdGlvbi10cmVlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25ldGdyaWYtY29tcG9uZW50cy9zcmMvbGliL25hdmlnYXRpb24vbmF2aWdhdGlvbi10cmVlL25hdmlnYXRpb24tdHJlZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZXRncmlmLWNvbXBvbmVudHMvc3JjL2xpYi9uYXZpZ2F0aW9uL25hdmlnYXRpb24tdHJlZS9uYXZpZ2F0aW9uLXRyZWUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUV4QyxPQUFPLEVBQ0gsK0JBQStCLEVBUWxDLE1BQU0sMEJBQTBCLENBQUM7Ozs7Ozs7Ozs7O0FBT2xDLE1BQU0sT0FBTyx1QkFBd0IsU0FBUSwrQkFBK0I7SUFFeEUsWUFBWSxNQUE0QixFQUM1QixNQUFjLEVBQ2QsR0FBa0IsRUFDbEIsV0FBd0IsRUFDeEIsYUFBNEIsRUFDNUIsa0JBQXNDLEVBQ3RDLG1CQUF3QyxFQUN4QyxlQUFnQyxFQUNoQyx1QkFBOEQ7UUFDdEUsS0FBSyxDQUNELE1BQU0sRUFDTixNQUFNLEVBQ04sR0FBRyxFQUNILFdBQVcsRUFDWCxhQUFhLEVBQ2Isa0JBQWtCLEVBQ2xCLG1CQUFtQixFQUNuQixlQUFlLEVBQ2YsdUJBQXVCLENBQzFCLENBQUM7SUFDTixDQUFDO3dHQXRCUSx1QkFBdUI7NEZBQXZCLHVCQUF1QixpRkNsQnBDLGs0REFpQ0E7OzRGRGZhLHVCQUF1QjtrQkFMbkMsU0FBUzsrQkFDSSxvQkFBb0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1JvdXRlcn0gZnJvbSAnQGFuZ3VsYXIvcm91dGVyJztcbmltcG9ydCB7XG4gICAgQWJzdHJhY3ROYXZpZ2F0aW9uVHJlZUNvbXBvbmVudCwgQWNjZXNzU2VydmljZSxcbiAgICBBY3RpdmVHcm91cFNlcnZpY2UsXG4gICAgQ29uZmlndXJhdGlvblNlcnZpY2UsXG4gICAgRHluYW1pY05hdmlnYXRpb25Sb3V0ZVByb3ZpZGVyU2VydmljZSxcbiAgICBMYW5ndWFnZVNlcnZpY2UsXG4gICAgTG9nZ2VyU2VydmljZSxcbiAgICBUYXNrUmVzb3VyY2VTZXJ2aWNlLFxuICAgIFVzZXJTZXJ2aWNlXG59IGZyb20gJ0BuZXRncmlmL2NvbXBvbmVudHMtY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnbmMtbmF2aWdhdGlvbi10cmVlJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vbmF2aWdhdGlvbi10cmVlLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9uYXZpZ2F0aW9uLXRyZWUuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBOYXZpZ2F0aW9uVHJlZUNvbXBvbmVudCBleHRlbmRzIEFic3RyYWN0TmF2aWdhdGlvblRyZWVDb21wb25lbnQge1xuXG4gICAgY29uc3RydWN0b3IoY29uZmlnOiBDb25maWd1cmF0aW9uU2VydmljZSxcbiAgICAgICAgICAgICAgICByb3V0ZXI6IFJvdXRlcixcbiAgICAgICAgICAgICAgICBsb2c6IExvZ2dlclNlcnZpY2UsXG4gICAgICAgICAgICAgICAgdXNlclNlcnZpY2U6IFVzZXJTZXJ2aWNlLFxuICAgICAgICAgICAgICAgIGFjY2Vzc1NlcnZpY2U6IEFjY2Vzc1NlcnZpY2UsXG4gICAgICAgICAgICAgICAgYWN0aXZlR3JvdXBTZXJ2aWNlOiBBY3RpdmVHcm91cFNlcnZpY2UsXG4gICAgICAgICAgICAgICAgdGFza1Jlc291cmNlU2VydmljZTogVGFza1Jlc291cmNlU2VydmljZSxcbiAgICAgICAgICAgICAgICBsYW5ndWFnZVNlcnZpY2U6IExhbmd1YWdlU2VydmljZSxcbiAgICAgICAgICAgICAgICBuYXZpZ2F0aW9uUm91dGVQcm92aWRlcjogRHluYW1pY05hdmlnYXRpb25Sb3V0ZVByb3ZpZGVyU2VydmljZSkge1xuICAgICAgICBzdXBlcihcbiAgICAgICAgICAgIGNvbmZpZyxcbiAgICAgICAgICAgIHJvdXRlcixcbiAgICAgICAgICAgIGxvZyxcbiAgICAgICAgICAgIHVzZXJTZXJ2aWNlLFxuICAgICAgICAgICAgYWNjZXNzU2VydmljZSxcbiAgICAgICAgICAgIGFjdGl2ZUdyb3VwU2VydmljZSxcbiAgICAgICAgICAgIHRhc2tSZXNvdXJjZVNlcnZpY2UsXG4gICAgICAgICAgICBsYW5ndWFnZVNlcnZpY2UsXG4gICAgICAgICAgICBuYXZpZ2F0aW9uUm91dGVQcm92aWRlclxuICAgICAgICApO1xuICAgIH1cbn1cbiIsIjxtYXQtdHJlZSBbZGF0YVNvdXJjZV09XCJkYXRhU291cmNlXCIgW3RyZWVDb250cm9sXT1cInRyZWVDb250cm9sXCIgW3N0eWxlLndpZHRoLnB4XT1cIndpZHRoXCI+XG5cbiAgICA8IS0tIFRoaXMgaXMgdGhlIHRyZWUgbm9kZSB0ZW1wbGF0ZSBmb3IgbGVhZiBub2RlcyAtLT5cbiAgICA8bWF0LXRyZWUtbm9kZSAqbWF0VHJlZU5vZGVEZWY9XCJsZXQgbm9kZVwiIFtyb3V0ZXJMaW5rXT1cIm5vZGUudXJsXCIgcm91dGVyTGlua0FjdGl2ZT1cImFjdGl2ZS1uYXZpZ2F0aW9uLXJvdXRlXCJcbiAgICAgICAgICAgICAgICAgICBtYXRUcmVlTm9kZVRvZ2dsZSBtYXRSaXBwbGUgY2xhc3M9XCJ0cmVlLW5vZGVcIj5cbiAgICAgICAgPGJ1dHRvbiAqbmdJZj1cIm5vZGUubGV2ZWwgPj0gMVwiIG1hdC1pY29uLWJ1dHRvbiBkaXNhYmxlZCBjbGFzcz1cIm1hcmdpbi1jb21wb25lbnRcIj48L2J1dHRvbj5cbiAgICAgICAgPGJ1dHRvbiAqbmdJZj1cIm5vZGUubGV2ZWwgPj0gMlwiIG1hdC1pY29uLWJ1dHRvbiBkaXNhYmxlZCBjbGFzcz1cIm1hcmdpbi1jb21wb25lbnRcIj48L2J1dHRvbj5cbiAgICAgICAgPG1hdC1pY29uIGNvbG9yPVwicHJpbWFyeVwiIGNsYXNzPVwidHJlZS1ub2RlLWljb25cIj57e25vZGUuaWNvbn19PC9tYXQtaWNvbj5cbiAgICAgICAge3tub2RlLnRyYW5zbGF0ZSA/IChub2RlLm5hbWUgfCB0cmFuc2xhdGUpIDogbm9kZS5uYW1lfX1cbiAgICA8L21hdC10cmVlLW5vZGU+XG5cbiAgICA8IS0tIFRoaXMgaXMgdGhlIHRyZWUgbm9kZSB0ZW1wbGF0ZSBmb3IgZXhwYW5kYWJsZSBub2RlcyAtLT5cbiAgICA8bWF0LW5lc3RlZC10cmVlLW5vZGUgKm1hdFRyZWVOb2RlRGVmPVwibGV0IG5vZGU7IHdoZW46IGhhc0NoaWxkXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJtYXQtdHJlZS1ub2RlIHRyZWUtbm9kZVwiIG1hdFRyZWVOb2RlVG9nZ2xlIG1hdFJpcHBsZVxuICAgICAgICAgICAgIFtjbGFzcy5ib3R0b20tc2hhZG93XT1cInRyZWVDb250cm9sLmlzRXhwYW5kZWQobm9kZSlcIj5cbiAgICAgICAgICAgIDxidXR0b24gKm5nSWY9XCJub2RlLmxldmVsID49IDFcIiBtYXQtaWNvbi1idXR0b24gZGlzYWJsZWQgY2xhc3M9XCJtYXJnaW4tY29tcG9uZW50XCI+PC9idXR0b24+XG4gICAgICAgICAgICA8YnV0dG9uICpuZ0lmPVwibm9kZS5sZXZlbCA+PSAyXCIgbWF0LWljb24tYnV0dG9uIGRpc2FibGVkIGNsYXNzPVwibWFyZ2luLWNvbXBvbmVudFwiPjwvYnV0dG9uPlxuXG4gICAgICAgICAgICA8bWF0LWljb24gY29sb3I9XCJwcmltYXJ5XCIgY2xhc3M9XCJ0cmVlLW5vZGUtaWNvblwiPnt7bm9kZS5pY29ufX08L21hdC1pY29uPlxuICAgICAgICAgICAge3tub2RlLnRyYW5zbGF0ZSA/IChub2RlLm5hbWUgfCB0cmFuc2xhdGUpIDogbm9kZS5uYW1lfX1cblxuICAgICAgICAgICAgPGRpdiBmeEZsZXg+PC9kaXY+XG4gICAgICAgICAgICA8YnV0dG9uIG1hdC1pY29uLWJ1dHRvbiBjbGFzcz1cIm5lc3RlZC10cmVlLWV4cGFuc2lvbi1pY29uXCI+XG4gICAgICAgICAgICAgICAgPG1hdC1pY29uPlxuICAgICAgICAgICAgICAgICAgICB7e3RyZWVDb250cm9sLmlzRXhwYW5kZWQobm9kZSkgPyAnZXhwYW5kX21vcmUnIDogJ2NoZXZyb25fcmlnaHQnfX1cbiAgICAgICAgICAgICAgICA8L21hdC1pY29uPlxuICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IFtjbGFzcy5uZXN0ZWQtdHJlZS1pbnZpc2libGVdPVwiIXRyZWVDb250cm9sLmlzRXhwYW5kZWQobm9kZSlcIiBjbGFzcz1cImRhcmtlci1iYWNrZ3JvdW5kXCI+XG4gICAgICAgICAgICA8bmctY29udGFpbmVyIG1hdFRyZWVOb2RlT3V0bGV0PjwvbmctY29udGFpbmVyPlxuICAgICAgICA8L2Rpdj5cbiAgICA8L21hdC1uZXN0ZWQtdHJlZS1ub2RlPlxuPC9tYXQtdHJlZT5cbiJdfQ==