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

Netgrif Application Engine frontend Angular components

import { Component } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { AbstractNavigationRailComponent } from '@netgrif/components-core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@ngbracket/ngx-layout";
import * as i3 from "@angular/material/icon";
import * as i4 from "@angular/material/sidenav";
const railAnimation = trigger('transform', [
    state('expand', style({
        width: '184px',
        'min-width': '184px',
        padding: '8px'
    })),
    state('collapse', style({
        width: '48px',
        'min-width': '48px',
        padding: '4px'
    })),
    transition('expand <=> collapse', animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)'))
]);
const railContentAnimation = trigger('transformContent', [
    state('shrink', style({
        'margin-left': '185px'
    })),
    state('grow', style({
        'margin-left': '49px'
    })),
    transition('shrink <=> grow', animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)'))
]);
export class NavigationRailComponent extends AbstractNavigationRailComponent {
    constructor() {
        super();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavigationRailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NavigationRailComponent, selector: "nc-navigation-rail", usesInheritance: true, ngImport: i0, template: "<mat-sidenav-container class=\"drawer-container\">\n    <mat-sidenav #sideRail mode=\"side\" opened=\"true\" position=\"start\" disableClose=\"true\"\n                 class=\"drawer-content mat-elevation-z16\"\n                 (mouseenter)=\"expandOnHover && open()\"\n                 (mouseleave)=\"expandOnHover && close()\">\n\n        <div [@transform]=\"expanded ? 'expand' : 'collapse'\">\n\n            <div fxLayout=\"column\" fxLayoutAlign=\"start start\" fxFlex>\n                <div fxLayout=\"row\">\n                    <mat-icon>account_circle</mat-icon>\n                    <span *ngIf=\"expanded\" class=\"margin-left-default\">User</span>\n                </div>\n                <div fxLayout=\"row\">\n                    <mat-icon>assignment</mat-icon>\n                    <span *ngIf=\"expanded\" class=\"margin-left-default\">Report</span>\n                </div>\n                <div fxLayout=\"row\">\n                    <mat-icon>bug_report</mat-icon>\n                    <span *ngIf=\"expanded\" class=\"margin-left-default\">Bugs</span>\n                </div>\n                <div fxLayout=\"row\">\n                    <mat-icon>fingerprint</mat-icon>\n                    <span *ngIf=\"expanded\" class=\"margin-left-default\">Security</span>\n                </div>\n            </div>\n\n        </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content [@transformContent]=\"expanded ? 'shrink' : 'grow'\">\n        <ng-content></ng-content>\n    </mat-sidenav-content>\n\n</mat-sidenav-container>\n", styles: [".margin-left-default{margin-left:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.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: i2.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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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" }], animations: [railAnimation, railContentAnimation] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavigationRailComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nc-navigation-rail', animations: [railAnimation, railContentAnimation], template: "<mat-sidenav-container class=\"drawer-container\">\n    <mat-sidenav #sideRail mode=\"side\" opened=\"true\" position=\"start\" disableClose=\"true\"\n                 class=\"drawer-content mat-elevation-z16\"\n                 (mouseenter)=\"expandOnHover && open()\"\n                 (mouseleave)=\"expandOnHover && close()\">\n\n        <div [@transform]=\"expanded ? 'expand' : 'collapse'\">\n\n            <div fxLayout=\"column\" fxLayoutAlign=\"start start\" fxFlex>\n                <div fxLayout=\"row\">\n                    <mat-icon>account_circle</mat-icon>\n                    <span *ngIf=\"expanded\" class=\"margin-left-default\">User</span>\n                </div>\n                <div fxLayout=\"row\">\n                    <mat-icon>assignment</mat-icon>\n                    <span *ngIf=\"expanded\" class=\"margin-left-default\">Report</span>\n                </div>\n                <div fxLayout=\"row\">\n                    <mat-icon>bug_report</mat-icon>\n                    <span *ngIf=\"expanded\" class=\"margin-left-default\">Bugs</span>\n                </div>\n                <div fxLayout=\"row\">\n                    <mat-icon>fingerprint</mat-icon>\n                    <span *ngIf=\"expanded\" class=\"margin-left-default\">Security</span>\n                </div>\n            </div>\n\n        </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content [@transformContent]=\"expanded ? 'shrink' : 'grow'\">\n        <ng-content></ng-content>\n    </mat-sidenav-content>\n\n</mat-sidenav-container>\n", styles: [".margin-left-default{margin-left:8px}\n"] }]
        }], ctorParameters: () => [] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2aWdhdGlvbi1yYWlsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25ldGdyaWYtY29tcG9uZW50cy9zcmMvbGliL25hdmlnYXRpb24vbmF2aWdhdGlvbi1yYWlsL25hdmlnYXRpb24tcmFpbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZXRncmlmLWNvbXBvbmVudHMvc3JjL2xpYi9uYXZpZ2F0aW9uL25hdmlnYXRpb24tcmFpbC9uYXZpZ2F0aW9uLXJhaWwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN4QyxPQUFPLEVBQUMsT0FBTyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLE9BQU8sRUFBQyxNQUFNLHFCQUFxQixDQUFDO0FBQy9FLE9BQU8sRUFBQywrQkFBK0IsRUFBQyxNQUFNLDBCQUEwQixDQUFDOzs7Ozs7QUFFekUsTUFBTSxhQUFhLEdBQUcsT0FBTyxDQUFDLFdBQVcsRUFBRTtJQUN2QyxLQUFLLENBQUMsUUFBUSxFQUFFLEtBQUssQ0FBQztRQUNsQixLQUFLLEVBQUUsT0FBTztRQUNkLFdBQVcsRUFBRSxPQUFPO1FBQ3BCLE9BQU8sRUFBRSxLQUFLO0tBQ2pCLENBQUMsQ0FBQztJQUNILEtBQUssQ0FBQyxVQUFVLEVBQUUsS0FBSyxDQUFDO1FBQ3BCLEtBQUssRUFBRSxNQUFNO1FBQ2IsV0FBVyxFQUFFLE1BQU07UUFDbkIsT0FBTyxFQUFFLEtBQUs7S0FDakIsQ0FBQyxDQUFDO0lBQ0gsVUFBVSxDQUFDLHFCQUFxQixFQUFFLE9BQU8sQ0FBQyx3Q0FBd0MsQ0FBQyxDQUFDO0NBQ3ZGLENBQUMsQ0FBQztBQUVILE1BQU0sb0JBQW9CLEdBQUcsT0FBTyxDQUFDLGtCQUFrQixFQUFFO0lBQ3JELEtBQUssQ0FBQyxRQUFRLEVBQUUsS0FBSyxDQUFDO1FBQ2xCLGFBQWEsRUFBRSxPQUFPO0tBQ3pCLENBQUMsQ0FBQztJQUNILEtBQUssQ0FBQyxNQUFNLEVBQUUsS0FBSyxDQUFDO1FBQ2hCLGFBQWEsRUFBRSxNQUFNO0tBQ3hCLENBQUMsQ0FBQztJQUNILFVBQVUsQ0FBQyxpQkFBaUIsRUFBRSxPQUFPLENBQUMsd0NBQXdDLENBQUMsQ0FBQztDQUNuRixDQUFDLENBQUM7QUFRSCxNQUFNLE9BQU8sdUJBQXdCLFNBQVEsK0JBQStCO0lBQ3hFO1FBQ0ksS0FBSyxFQUFFLENBQUM7SUFDWixDQUFDO3dHQUhRLHVCQUF1Qjs0RkFBdkIsdUJBQXVCLGlGQ2xDcEMscWdEQW1DQSxrM0VESGdCLENBQUMsYUFBYSxFQUFFLG9CQUFvQixDQUFDOzs0RkFFeEMsdUJBQXVCO2tCQU5uQyxTQUFTOytCQUNJLG9CQUFvQixjQUdsQixDQUFDLGFBQWEsRUFBRSxvQkFBb0IsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7YW5pbWF0ZSwgc3RhdGUsIHN0eWxlLCB0cmFuc2l0aW9uLCB0cmlnZ2VyfSBmcm9tICdAYW5ndWxhci9hbmltYXRpb25zJztcbmltcG9ydCB7QWJzdHJhY3ROYXZpZ2F0aW9uUmFpbENvbXBvbmVudH0gZnJvbSAnQG5ldGdyaWYvY29tcG9uZW50cy1jb3JlJztcblxuY29uc3QgcmFpbEFuaW1hdGlvbiA9IHRyaWdnZXIoJ3RyYW5zZm9ybScsIFtcbiAgICBzdGF0ZSgnZXhwYW5kJywgc3R5bGUoe1xuICAgICAgICB3aWR0aDogJzE4NHB4JyxcbiAgICAgICAgJ21pbi13aWR0aCc6ICcxODRweCcsXG4gICAgICAgIHBhZGRpbmc6ICc4cHgnXG4gICAgfSkpLFxuICAgIHN0YXRlKCdjb2xsYXBzZScsIHN0eWxlKHtcbiAgICAgICAgd2lkdGg6ICc0OHB4JyxcbiAgICAgICAgJ21pbi13aWR0aCc6ICc0OHB4JyxcbiAgICAgICAgcGFkZGluZzogJzRweCdcbiAgICB9KSksXG4gICAgdHJhbnNpdGlvbignZXhwYW5kIDw9PiBjb2xsYXBzZScsIGFuaW1hdGUoJzQwMG1zIGN1YmljLWJlemllcigwLjI1LCAwLjgsIDAuMjUsIDEpJykpXG5dKTtcblxuY29uc3QgcmFpbENvbnRlbnRBbmltYXRpb24gPSB0cmlnZ2VyKCd0cmFuc2Zvcm1Db250ZW50JywgW1xuICAgIHN0YXRlKCdzaHJpbmsnLCBzdHlsZSh7XG4gICAgICAgICdtYXJnaW4tbGVmdCc6ICcxODVweCdcbiAgICB9KSksXG4gICAgc3RhdGUoJ2dyb3cnLCBzdHlsZSh7XG4gICAgICAgICdtYXJnaW4tbGVmdCc6ICc0OXB4J1xuICAgIH0pKSxcbiAgICB0cmFuc2l0aW9uKCdzaHJpbmsgPD0+IGdyb3cnLCBhbmltYXRlKCc0MDBtcyBjdWJpYy1iZXppZXIoMC4yNSwgMC44LCAwLjI1LCAxKScpKVxuXSk7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnbmMtbmF2aWdhdGlvbi1yYWlsJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vbmF2aWdhdGlvbi1yYWlsLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9uYXZpZ2F0aW9uLXJhaWwuY29tcG9uZW50LnNjc3MnXSxcbiAgICBhbmltYXRpb25zOiBbcmFpbEFuaW1hdGlvbiwgcmFpbENvbnRlbnRBbmltYXRpb25dXG59KVxuZXhwb3J0IGNsYXNzIE5hdmlnYXRpb25SYWlsQ29tcG9uZW50IGV4dGVuZHMgQWJzdHJhY3ROYXZpZ2F0aW9uUmFpbENvbXBvbmVudCB7XG4gICAgY29uc3RydWN0b3IoKSB7XG4gICAgICAgIHN1cGVyKCk7XG4gICAgfVxufVxuIiwiPG1hdC1zaWRlbmF2LWNvbnRhaW5lciBjbGFzcz1cImRyYXdlci1jb250YWluZXJcIj5cbiAgICA8bWF0LXNpZGVuYXYgI3NpZGVSYWlsIG1vZGU9XCJzaWRlXCIgb3BlbmVkPVwidHJ1ZVwiIHBvc2l0aW9uPVwic3RhcnRcIiBkaXNhYmxlQ2xvc2U9XCJ0cnVlXCJcbiAgICAgICAgICAgICAgICAgY2xhc3M9XCJkcmF3ZXItY29udGVudCBtYXQtZWxldmF0aW9uLXoxNlwiXG4gICAgICAgICAgICAgICAgIChtb3VzZWVudGVyKT1cImV4cGFuZE9uSG92ZXIgJiYgb3BlbigpXCJcbiAgICAgICAgICAgICAgICAgKG1vdXNlbGVhdmUpPVwiZXhwYW5kT25Ib3ZlciAmJiBjbG9zZSgpXCI+XG5cbiAgICAgICAgPGRpdiBbQHRyYW5zZm9ybV09XCJleHBhbmRlZCA/ICdleHBhbmQnIDogJ2NvbGxhcHNlJ1wiPlxuXG4gICAgICAgICAgICA8ZGl2IGZ4TGF5b3V0PVwiY29sdW1uXCIgZnhMYXlvdXRBbGlnbj1cInN0YXJ0IHN0YXJ0XCIgZnhGbGV4PlxuICAgICAgICAgICAgICAgIDxkaXYgZnhMYXlvdXQ9XCJyb3dcIj5cbiAgICAgICAgICAgICAgICAgICAgPG1hdC1pY29uPmFjY291bnRfY2lyY2xlPC9tYXQtaWNvbj5cbiAgICAgICAgICAgICAgICAgICAgPHNwYW4gKm5nSWY9XCJleHBhbmRlZFwiIGNsYXNzPVwibWFyZ2luLWxlZnQtZGVmYXVsdFwiPlVzZXI8L3NwYW4+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgPGRpdiBmeExheW91dD1cInJvd1wiPlxuICAgICAgICAgICAgICAgICAgICA8bWF0LWljb24+YXNzaWdubWVudDwvbWF0LWljb24+XG4gICAgICAgICAgICAgICAgICAgIDxzcGFuICpuZ0lmPVwiZXhwYW5kZWRcIiBjbGFzcz1cIm1hcmdpbi1sZWZ0LWRlZmF1bHRcIj5SZXBvcnQ8L3NwYW4+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgPGRpdiBmeExheW91dD1cInJvd1wiPlxuICAgICAgICAgICAgICAgICAgICA8bWF0LWljb24+YnVnX3JlcG9ydDwvbWF0LWljb24+XG4gICAgICAgICAgICAgICAgICAgIDxzcGFuICpuZ0lmPVwiZXhwYW5kZWRcIiBjbGFzcz1cIm1hcmdpbi1sZWZ0LWRlZmF1bHRcIj5CdWdzPC9zcGFuPlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIDxkaXYgZnhMYXlvdXQ9XCJyb3dcIj5cbiAgICAgICAgICAgICAgICAgICAgPG1hdC1pY29uPmZpbmdlcnByaW50PC9tYXQtaWNvbj5cbiAgICAgICAgICAgICAgICAgICAgPHNwYW4gKm5nSWY9XCJleHBhbmRlZFwiIGNsYXNzPVwibWFyZ2luLWxlZnQtZGVmYXVsdFwiPlNlY3VyaXR5PC9zcGFuPlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgPC9kaXY+XG4gICAgPC9tYXQtc2lkZW5hdj5cblxuICAgIDxtYXQtc2lkZW5hdi1jb250ZW50IFtAdHJhbnNmb3JtQ29udGVudF09XCJleHBhbmRlZCA/ICdzaHJpbmsnIDogJ2dyb3cnXCI+XG4gICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICA8L21hdC1zaWRlbmF2LWNvbnRlbnQ+XG5cbjwvbWF0LXNpZGVuYXYtY29udGFpbmVyPlxuIl19