@netgrif/components/esm2022/lib/navigation/navigation-drawer/navigation-drawer.component.mjs

Netgrif Application Engine frontend Angular components

import { Component } from '@angular/core';
import 'hammerjs';
import { AbstractNavigationDrawerComponent } from '@netgrif/components-core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/cdk/layout";
import * as i2 from "@netgrif/components-core";
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/divider";
import * as i7 from "@angular/material/icon";
import * as i8 from "@angular/material/sidenav";
import * as i9 from "../quick-panel/components/quick-panel.component";
import * as i10 from "../../user/user-card/user-card.component";
import * as i11 from "angular-resizable-element";
import * as i12 from "../navigation-tree/navigation-tree.component";
export class NavigationDrawerComponent extends AbstractNavigationDrawerComponent {
    breakpoint;
    _log;
    userPreferenceService;
    constructor(breakpoint, _log, userPreferenceService) {
        super(breakpoint, _log, userPreferenceService);
        this.breakpoint = breakpoint;
        this._log = _log;
        this.userPreferenceService = userPreferenceService;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavigationDrawerComponent, deps: [{ token: i1.BreakpointObserver }, { token: i2.LoggerService }, { token: i2.UserPreferenceService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NavigationDrawerComponent, selector: "nc-navigation-drawer", usesInheritance: true, ngImport: i0, template: "<mat-sidenav-container class=\"drawer-container\" (panright)=\"swipeRight()\" (panleft)=\"swipeLeft()\" autosize>\n    <mat-sidenav #sidenav [mode]=\"config.mode\" [(opened)]=\"opened\" position=\"start\"\n                 [disableClose]=\"config.disableClose\" class=\"drawer-content mat-elevation-z10\"\n                 mwlResizable\n                 [style.width.px]=\"width\"\n                 (resizing)=\"onResizeEvent($event)\">\n        <div class=\"sidenav-wrapper\">\n            <button\n                class=\"sidenav-close-button\"\n                type=\"button\"\n                aria-label=\"Toggle sidenav\"\n                mat-icon-button\n                *ngIf=\"!fixed\"\n                (click)=\"close()\">\n                <mat-icon aria-label=\"Side nav toggle icon\">close</mat-icon>\n            </button>\n            <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex>\n                <nc-user-card *ngIf=\"showUser\" [user]=\"user\" mode=\"full\" [contentWidth]=\"contentWidth\"></nc-user-card>\n                <mat-divider *ngIf=\"showUser\" class=\"drawer-divider\"></mat-divider>\n                <nc-quick-panel *ngIf=\"showQuickPanel\" [items]=\"quickPanelItems\"\n                                [contentWidth]=\"contentWidth\"></nc-quick-panel>\n                <mat-divider *ngIf=\"showQuickPanel\" class=\"drawer-divider\"></mat-divider>\n                <nc-navigation-tree *ngIf=\"navigation\" [contentWidth]=\"contentWidth\"></nc-navigation-tree>\n            </div>\n        </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <div class=\"content-wrapper\" fxLayout=\"row\" fxLayoutAlign=\"space-between none\">\n            <button\n                type=\"button\"\n                aria-label=\"Toggle sidenav\"\n                mat-icon-button\n                (click)=\"open()\"\n                *ngIf=\"!sidenav.opened\">\n                <mat-icon aria-label=\"Side nav toggle icon\">menu</mat-icon>\n            </button>\n            <div fxFlex=\"100\">\n                <ng-content></ng-content>\n            </div>\n        </div>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [".drawer-container{height:100%}.drawer-content{min-width:200px;outline:none!important}.mat-mdc-drawer-side{border-right:0}mat-divider.drawer-divider{width:90%}.sidenav-wrapper{overflow-x:hidden!important}.sidenav-close-button{position:absolute;right:0;z-index:100}.content-wrapper{height:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i4.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { 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.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i8.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i8.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i9.QuickPanelComponent, selector: "nc-quick-panel" }, { kind: "component", type: i10.UserCardComponent, selector: "nc-user-card" }, { kind: "directive", type: i11.ResizableDirective, selector: "[mwlResizable]", inputs: ["validateResize", "enableGhostResize", "resizeSnapGrid", "resizeCursors", "ghostElementPositioning", "allowNegativeResizes", "mouseMoveThrottleMS"], outputs: ["resizeStart", "resizing", "resizeEnd"], exportAs: ["mwlResizable"] }, { kind: "component", type: i12.NavigationTreeComponent, selector: "nc-navigation-tree" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavigationDrawerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nc-navigation-drawer', template: "<mat-sidenav-container class=\"drawer-container\" (panright)=\"swipeRight()\" (panleft)=\"swipeLeft()\" autosize>\n    <mat-sidenav #sidenav [mode]=\"config.mode\" [(opened)]=\"opened\" position=\"start\"\n                 [disableClose]=\"config.disableClose\" class=\"drawer-content mat-elevation-z10\"\n                 mwlResizable\n                 [style.width.px]=\"width\"\n                 (resizing)=\"onResizeEvent($event)\">\n        <div class=\"sidenav-wrapper\">\n            <button\n                class=\"sidenav-close-button\"\n                type=\"button\"\n                aria-label=\"Toggle sidenav\"\n                mat-icon-button\n                *ngIf=\"!fixed\"\n                (click)=\"close()\">\n                <mat-icon aria-label=\"Side nav toggle icon\">close</mat-icon>\n            </button>\n            <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex>\n                <nc-user-card *ngIf=\"showUser\" [user]=\"user\" mode=\"full\" [contentWidth]=\"contentWidth\"></nc-user-card>\n                <mat-divider *ngIf=\"showUser\" class=\"drawer-divider\"></mat-divider>\n                <nc-quick-panel *ngIf=\"showQuickPanel\" [items]=\"quickPanelItems\"\n                                [contentWidth]=\"contentWidth\"></nc-quick-panel>\n                <mat-divider *ngIf=\"showQuickPanel\" class=\"drawer-divider\"></mat-divider>\n                <nc-navigation-tree *ngIf=\"navigation\" [contentWidth]=\"contentWidth\"></nc-navigation-tree>\n            </div>\n        </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <div class=\"content-wrapper\" fxLayout=\"row\" fxLayoutAlign=\"space-between none\">\n            <button\n                type=\"button\"\n                aria-label=\"Toggle sidenav\"\n                mat-icon-button\n                (click)=\"open()\"\n                *ngIf=\"!sidenav.opened\">\n                <mat-icon aria-label=\"Side nav toggle icon\">menu</mat-icon>\n            </button>\n            <div fxFlex=\"100\">\n                <ng-content></ng-content>\n            </div>\n        </div>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [".drawer-container{height:100%}.drawer-content{min-width:200px;outline:none!important}.mat-mdc-drawer-side{border-right:0}mat-divider.drawer-divider{width:90%}.sidenav-wrapper{overflow-x:hidden!important}.sidenav-close-button{position:absolute;right:0;z-index:100}.content-wrapper{height:100%}\n"] }]
        }], ctorParameters: () => [{ type: i1.BreakpointObserver }, { type: i2.LoggerService }, { type: i2.UserPreferenceService }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2aWdhdGlvbi1kcmF3ZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmV0Z3JpZi1jb21wb25lbnRzL3NyYy9saWIvbmF2aWdhdGlvbi9uYXZpZ2F0aW9uLWRyYXdlci9uYXZpZ2F0aW9uLWRyYXdlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZXRncmlmLWNvbXBvbmVudHMvc3JjL2xpYi9uYXZpZ2F0aW9uL25hdmlnYXRpb24tZHJhd2VyL25hdmlnYXRpb24tZHJhd2VyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDeEMsT0FBTyxVQUFVLENBQUM7QUFFbEIsT0FBTyxFQUFDLGlDQUFpQyxFQUF1QyxNQUFNLDBCQUEwQixDQUFDOzs7Ozs7Ozs7Ozs7OztBQU9qSCxNQUFNLE9BQU8seUJBQTBCLFNBQVEsaUNBQWlDO0lBRXREO0lBQ0E7SUFDQTtJQUZ0QixZQUFzQixVQUE4QixFQUM5QixJQUFtQixFQUNuQixxQkFBNEM7UUFDOUQsS0FBSyxDQUFDLFVBQVUsRUFBRSxJQUFJLEVBQUUscUJBQXFCLENBQUMsQ0FBQztRQUg3QixlQUFVLEdBQVYsVUFBVSxDQUFvQjtRQUM5QixTQUFJLEdBQUosSUFBSSxDQUFlO1FBQ25CLDBCQUFxQixHQUFyQixxQkFBcUIsQ0FBdUI7SUFFbEUsQ0FBQzt3R0FOUSx5QkFBeUI7NEZBQXpCLHlCQUF5QixtRkNWdEMsMm5FQTJDQTs7NEZEakNhLHlCQUF5QjtrQkFMckMsU0FBUzsrQkFDSSxzQkFBc0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgJ2hhbW1lcmpzJztcbmltcG9ydCB7QnJlYWtwb2ludE9ic2VydmVyfSBmcm9tICdAYW5ndWxhci9jZGsvbGF5b3V0JztcbmltcG9ydCB7QWJzdHJhY3ROYXZpZ2F0aW9uRHJhd2VyQ29tcG9uZW50LCBMb2dnZXJTZXJ2aWNlLCBVc2VyUHJlZmVyZW5jZVNlcnZpY2V9IGZyb20gJ0BuZXRncmlmL2NvbXBvbmVudHMtY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnbmMtbmF2aWdhdGlvbi1kcmF3ZXInLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9uYXZpZ2F0aW9uLWRyYXdlci5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vbmF2aWdhdGlvbi1kcmF3ZXIuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBOYXZpZ2F0aW9uRHJhd2VyQ29tcG9uZW50IGV4dGVuZHMgQWJzdHJhY3ROYXZpZ2F0aW9uRHJhd2VyQ29tcG9uZW50IHtcblxuICAgIGNvbnN0cnVjdG9yKHByb3RlY3RlZCBicmVha3BvaW50OiBCcmVha3BvaW50T2JzZXJ2ZXIsXG4gICAgICAgICAgICAgICAgcHJvdGVjdGVkIF9sb2c6IExvZ2dlclNlcnZpY2UsXG4gICAgICAgICAgICAgICAgcHJvdGVjdGVkIHVzZXJQcmVmZXJlbmNlU2VydmljZTogVXNlclByZWZlcmVuY2VTZXJ2aWNlKSB7XG4gICAgICAgIHN1cGVyKGJyZWFrcG9pbnQsIF9sb2csIHVzZXJQcmVmZXJlbmNlU2VydmljZSk7XG4gICAgfVxufVxuIiwiPG1hdC1zaWRlbmF2LWNvbnRhaW5lciBjbGFzcz1cImRyYXdlci1jb250YWluZXJcIiAocGFucmlnaHQpPVwic3dpcGVSaWdodCgpXCIgKHBhbmxlZnQpPVwic3dpcGVMZWZ0KClcIiBhdXRvc2l6ZT5cbiAgICA8bWF0LXNpZGVuYXYgI3NpZGVuYXYgW21vZGVdPVwiY29uZmlnLm1vZGVcIiBbKG9wZW5lZCldPVwib3BlbmVkXCIgcG9zaXRpb249XCJzdGFydFwiXG4gICAgICAgICAgICAgICAgIFtkaXNhYmxlQ2xvc2VdPVwiY29uZmlnLmRpc2FibGVDbG9zZVwiIGNsYXNzPVwiZHJhd2VyLWNvbnRlbnQgbWF0LWVsZXZhdGlvbi16MTBcIlxuICAgICAgICAgICAgICAgICBtd2xSZXNpemFibGVcbiAgICAgICAgICAgICAgICAgW3N0eWxlLndpZHRoLnB4XT1cIndpZHRoXCJcbiAgICAgICAgICAgICAgICAgKHJlc2l6aW5nKT1cIm9uUmVzaXplRXZlbnQoJGV2ZW50KVwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwic2lkZW5hdi13cmFwcGVyXCI+XG4gICAgICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICAgICAgY2xhc3M9XCJzaWRlbmF2LWNsb3NlLWJ1dHRvblwiXG4gICAgICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgICAgICAgYXJpYS1sYWJlbD1cIlRvZ2dsZSBzaWRlbmF2XCJcbiAgICAgICAgICAgICAgICBtYXQtaWNvbi1idXR0b25cbiAgICAgICAgICAgICAgICAqbmdJZj1cIiFmaXhlZFwiXG4gICAgICAgICAgICAgICAgKGNsaWNrKT1cImNsb3NlKClcIj5cbiAgICAgICAgICAgICAgICA8bWF0LWljb24gYXJpYS1sYWJlbD1cIlNpZGUgbmF2IHRvZ2dsZSBpY29uXCI+Y2xvc2U8L21hdC1pY29uPlxuICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgICAgICA8ZGl2IGZ4TGF5b3V0PVwiY29sdW1uXCIgZnhMYXlvdXRBbGlnbj1cInN0YXJ0IGNlbnRlclwiIGZ4RmxleD5cbiAgICAgICAgICAgICAgICA8bmMtdXNlci1jYXJkICpuZ0lmPVwic2hvd1VzZXJcIiBbdXNlcl09XCJ1c2VyXCIgbW9kZT1cImZ1bGxcIiBbY29udGVudFdpZHRoXT1cImNvbnRlbnRXaWR0aFwiPjwvbmMtdXNlci1jYXJkPlxuICAgICAgICAgICAgICAgIDxtYXQtZGl2aWRlciAqbmdJZj1cInNob3dVc2VyXCIgY2xhc3M9XCJkcmF3ZXItZGl2aWRlclwiPjwvbWF0LWRpdmlkZXI+XG4gICAgICAgICAgICAgICAgPG5jLXF1aWNrLXBhbmVsICpuZ0lmPVwic2hvd1F1aWNrUGFuZWxcIiBbaXRlbXNdPVwicXVpY2tQYW5lbEl0ZW1zXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgW2NvbnRlbnRXaWR0aF09XCJjb250ZW50V2lkdGhcIj48L25jLXF1aWNrLXBhbmVsPlxuICAgICAgICAgICAgICAgIDxtYXQtZGl2aWRlciAqbmdJZj1cInNob3dRdWlja1BhbmVsXCIgY2xhc3M9XCJkcmF3ZXItZGl2aWRlclwiPjwvbWF0LWRpdmlkZXI+XG4gICAgICAgICAgICAgICAgPG5jLW5hdmlnYXRpb24tdHJlZSAqbmdJZj1cIm5hdmlnYXRpb25cIiBbY29udGVudFdpZHRoXT1cImNvbnRlbnRXaWR0aFwiPjwvbmMtbmF2aWdhdGlvbi10cmVlPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvbWF0LXNpZGVuYXY+XG5cbiAgICA8bWF0LXNpZGVuYXYtY29udGVudD5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNvbnRlbnQtd3JhcHBlclwiIGZ4TGF5b3V0PVwicm93XCIgZnhMYXlvdXRBbGlnbj1cInNwYWNlLWJldHdlZW4gbm9uZVwiPlxuICAgICAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAgICAgICAgIGFyaWEtbGFiZWw9XCJUb2dnbGUgc2lkZW5hdlwiXG4gICAgICAgICAgICAgICAgbWF0LWljb24tYnV0dG9uXG4gICAgICAgICAgICAgICAgKGNsaWNrKT1cIm9wZW4oKVwiXG4gICAgICAgICAgICAgICAgKm5nSWY9XCIhc2lkZW5hdi5vcGVuZWRcIj5cbiAgICAgICAgICAgICAgICA8bWF0LWljb24gYXJpYS1sYWJlbD1cIlNpZGUgbmF2IHRvZ2dsZSBpY29uXCI+bWVudTwvbWF0LWljb24+XG4gICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICAgIDxkaXYgZnhGbGV4PVwiMTAwXCI+XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvbWF0LXNpZGVuYXYtY29udGVudD5cbjwvbWF0LXNpZGVuYXYtY29udGFpbmVyPlxuIl19