ngx-material-navigation 0.0.1

package/fesm2015/ngx-material-navigation.mjs

@@ -0,0 +1,551 @@
+import * as i0 from '@angular/core';
+import { Component, ViewChild, Input, HostListener, NgModule } from '@angular/core';
+import * as i1$1 from '@angular/platform-browser';
+import * as i2$1 from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i1 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i4 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i4$1 from '@angular/material/sidenav';
+import { MatSidenavModule } from '@angular/material/sidenav';
+
+// eslint-disable-next-line jsdoc/require-jsdoc
+class BaseNavElement {
+}
+
+/**
+ * The base abstract definition for internal and external links.
+ */
+class NavLink extends BaseNavElement {
+}
+;
+
+/**
+ * Contains HelperMethods around handling Navigation.
+ */
+class NavUtilities {
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    static asTitle(element) {
+        return element;
+    }
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    static asAngularRoute(route) {
+        return route;
+    }
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    static asStringRoute(route) {
+        return route;
+    }
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    static asInternalLink(element) {
+        return element;
+    }
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    static asExternalLink(element) {
+        return element;
+    }
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    static asMenu(element) {
+        return element;
+    }
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    static asButton(element) {
+        return element;
+    }
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    static asImage(element) {
+        return element;
+    }
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    static asImageWithInternalLink(element) {
+        return element;
+    }
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    static asImageWithExternalLink(element) {
+        return element;
+    }
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    static asTitleWithInternalLink(element) {
+        return element;
+    }
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    static asTitleWithExternalLink(element) {
+        return element;
+    }
+    /**
+     * Checks if the provided element is a NavInternalLink.
+     *
+     * @param element - The element to check.
+     * @returns Whether or not the given element is a NavInternalLink.
+     */
+    static isInternalLink(element) {
+        if (element.route) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Checks if the provided element is a NavMenu.
+     *
+     * @param element - The element to check.
+     * @returns Whether or not the given element is a NavMenu.
+     */
+    static isMenu(element) {
+        if (element.elements) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Checks if the provided value is an angular route.
+     *
+     * @param route - The value to check.
+     * @returns Whether or not the given value is an angular route.
+     */
+    static isAngularRoute(route) {
+        if (route.path) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Checks if the provided element is a NavElement.
+     *
+     * @param value - The element to check.
+     * @returns Whether or not the given element is a NavElement.
+     */
+    static isNavElement(value) {
+        if (value.type) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Gets the angular routes.
+     * Extracts them from the navbarRows and adds any additional routes provided in additionalRoutes.
+     *
+     * @param navbarRows - The NavbarRows used as a configuration for the navbar element.
+     * @param additionalRoutes - Any additional routes that aren't included in the NavbarRows.
+     * @returns All found angular routes.
+     */
+    static getAngularRoutes(navbarRows = [], additionalRoutes = []) {
+        let allRoutes = [];
+        allRoutes = allRoutes.concat(NavUtilities.getRoutesFromNavbar(navbarRows));
+        allRoutes = allRoutes.concat(additionalRoutes);
+        // Filters to only contain unique paths
+        const uniquePaths = [];
+        const res = [];
+        for (const route of allRoutes) {
+            if (!uniquePaths.find(r => r === route.path)) {
+                res.push(route);
+            }
+        }
+        return res;
+    }
+    static getRoutesFromNavbar(navbarRows) {
+        let res = [];
+        for (const row of navbarRows) {
+            res = res.concat(NavUtilities.getRoutesFromElements(row.elements));
+        }
+        ;
+        return res;
+    }
+    static getRoutesFromElements(elements) {
+        let res = [];
+        const internalLinks = elements.filter(e => NavUtilities.isInternalLink(e));
+        const angularRoutes = internalLinks.filter(l => NavUtilities.isAngularRoute(l.route)).map(l => l.route);
+        res = res.concat(angularRoutes);
+        const menus = elements.filter(e => NavUtilities.isMenu(e));
+        for (const menu of menus) {
+            res = res.concat(NavUtilities.getRoutesFromElements(menu.elements));
+        }
+        return res;
+    }
+    /**
+     * Get all elements at the provided position with the provided screenWidth from the given elements.
+     *
+     * @param position - The position for which to get the elements.
+     * @param screenWidth - The current screen width. Is needed to hide elements that are already collapsed into the sidenav.
+     * @param rows - The rows to get the elements from.
+     * @returns All Elements for the provided input.
+     */
+    static getNavbarElements(position, screenWidth, rows) {
+        if (!rows || !rows.length) {
+            return [];
+        }
+        let res = [];
+        for (const row of rows) {
+            res = res.concat(row.elements);
+        }
+        if (position === 'left') {
+            res = res.filter(e => !e.position || e.position === position);
+        }
+        else {
+            res = res.filter(e => e.position === position);
+        }
+        switch (screenWidth) {
+            case 'lg':
+                return res.filter(e => e.collapse !== 'always' && e.collapse !== 'lg');
+            case 'md':
+                return res.filter(e => e.collapse !== 'always' && e.collapse !== 'lg' && e.collapse !== 'md');
+            case 'sm':
+                return res.filter(e => e.collapse !== 'always' && e.collapse !== 'lg' && e.collapse !== 'md' && e.collapse !== 'sm');
+        }
+    }
+    /**
+     * Gets all the elements to display in the sidenav.
+     *
+     * @param screenWidth - The current screen width.
+     * @param rows - The rows to get the elements from.
+     * @returns The NavElements to display in the sidenav.
+     */
+    static getSidenavElements(screenWidth, rows) {
+        if (!rows || !rows.length) {
+            return [];
+        }
+        let res = [];
+        for (const row of rows) {
+            res = res.concat(row.elements);
+        }
+        switch (screenWidth) {
+            case 'lg':
+                return res.filter(e => e.collapse === 'always' || e.collapse === 'lg');
+            case 'md':
+                return res.filter(e => e.collapse === 'always' || e.collapse === 'lg' || e.collapse === 'md');
+            case 'sm':
+                return res.filter(e => e.collapse === 'always' || e.collapse === 'lg' || e.collapse === 'md' || e.collapse === 'sm');
+        }
+    }
+}
+
+/**
+ * Displays a menu based on the provided NavMenu data.
+ */
+class NavMenuComponent {
+    constructor() {
+        this.NavUtilities = NavUtilities;
+    }
+    ngAfterContentChecked() {
+        if (this.nestedMenuButton) {
+            this.nestedMenuWidth = this.getMenuWidth();
+        }
+    }
+    /**
+     * Updates the width of the nestedMenu.
+     */
+    onResize() {
+        if (this.nestedMenuButton) {
+            this.nestedMenuWidth = this.getMenuWidth();
+        }
+    }
+    getMenuWidth() {
+        return this.nestedMenuButton._elementRef.nativeElement.offsetWidth;
+    }
+    /**
+     * Defines if the sidenav should be closed when the given element is clicked.
+     *
+     * @param element - The element that has been clicked.
+     */
+    clickSidenavElement(element) {
+        if (this.sidenav) {
+            switch (element.type) {
+                case 'image':
+                case 'title':
+                case 'menu':
+                    return;
+                default:
+                    this.sidenav.close();
+                    return;
+            }
+        }
+    }
+}
+NavMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NavMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NavMenuComponent, selector: "ngx-mat-navigation-menu", inputs: { navMenu: "navMenu", sidenav: "sidenav", menuWidth: "menuWidth" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, static: true }, { propertyName: "nestedMenuButton", first: true, predicate: ["nestedMenuButton"], descendants: true }], ngImport: i0, template: "<mat-menu #menu=\"matMenu\" [overlapTrigger]=\"false\">\r\n    <div *ngFor=\"let element of navMenu.elements\" [style.min-width.px]=\"menuWidth\">\r\n        <div [ngSwitch]=\"element.type\">\r\n            <!-- Internal Link -->\r\n            <a mat-button *ngSwitchCase=\"'internalLink'\"\r\n                (click)=\"clickSidenavElement(element)\"\r\n                [routerLink]=\"\r\n                    NavUtilities.asAngularRoute(NavUtilities.asInternalLink(element).route).path\r\n                    ? NavUtilities.asAngularRoute(NavUtilities.asInternalLink(element).route).path\r\n                    : NavUtilities.asStringRoute(NavUtilities.asInternalLink(element).route)\"\r\n                [target]=\"NavUtilities.asInternalLink(element).openInNewTab ? '_blank' : '_self'\"\r\n                [rel]=\"NavUtilities.asInternalLink(element).openInNewTab ? 'noreferrer noopener' : undefined\"\r\n            >\r\n                <i *ngIf=\"NavUtilities.asInternalLink(element).icon\" [class]=\"NavUtilities.asInternalLink(element).icon\"></i> \r\n                {{NavUtilities.asInternalLink(element).name}}\r\n            </a>\r\n            <!-- External Link -->\r\n            <span *ngSwitchCase=\"'externalLink'\">\r\n                <a mat-button\r\n                    (click)=\"clickSidenavElement(element)\"\r\n                    [href]=\"NavUtilities.asExternalLink(element).url\"\r\n                    [target]=\"NavUtilities.asExternalLink(element).openInNewTab ? '_blank' : '_self'\"\r\n                    [rel]=\"NavUtilities.asExternalLink(element).openInNewTab ? 'noreferrer noopener' : undefined\"\r\n                >\r\n                    <i *ngIf=\"NavUtilities.asExternalLink(element).icon\" [class]=\"NavUtilities.asExternalLink(element).icon\"></i>\r\n                    {{NavUtilities.asExternalLink(element).name}}\r\n                </a>\r\n            </span>\r\n            <!-- Nested Menu -->\r\n            <button #nestedMenuButton id=\"menu-button\" *ngSwitchCase=\"'menu'\" mat-menu-item [matMenuTriggerFor]=\"internalMenu.menu\">\r\n                <i *ngIf=\"NavUtilities.asMenu(element).icon\" [class]=\"NavUtilities.asMenu(element).icon\"></i>\r\n                {{NavUtilities.asMenu(element).name}}\r\n            </button>\r\n            <ngx-mat-navigation-menu #internalMenu [navMenu]=\"NavUtilities.asMenu(element)\" [sidenav]=\"sidenav\" [menuWidth]=\"nestedMenuWidth\">\r\n            </ngx-mat-navigation-menu>\r\n        </div>\r\n    </div>\r\n</mat-menu>", styles: ["a{width:100%}\n"], components: [{ type: i1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: NavMenuComponent, selector: "ngx-mat-navigation-menu", inputs: ["navMenu", "sidenav", "menuWidth"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-mat-navigation-menu', template: "<mat-menu #menu=\"matMenu\" [overlapTrigger]=\"false\">\r\n    <div *ngFor=\"let element of navMenu.elements\" [style.min-width.px]=\"menuWidth\">\r\n        <div [ngSwitch]=\"element.type\">\r\n            <!-- Internal Link -->\r\n            <a mat-button *ngSwitchCase=\"'internalLink'\"\r\n                (click)=\"clickSidenavElement(element)\"\r\n                [routerLink]=\"\r\n                    NavUtilities.asAngularRoute(NavUtilities.asInternalLink(element).route).path\r\n                    ? NavUtilities.asAngularRoute(NavUtilities.asInternalLink(element).route).path\r\n                    : NavUtilities.asStringRoute(NavUtilities.asInternalLink(element).route)\"\r\n                [target]=\"NavUtilities.asInternalLink(element).openInNewTab ? '_blank' : '_self'\"\r\n                [rel]=\"NavUtilities.asInternalLink(element).openInNewTab ? 'noreferrer noopener' : undefined\"\r\n            >\r\n                <i *ngIf=\"NavUtilities.asInternalLink(element).icon\" [class]=\"NavUtilities.asInternalLink(element).icon\"></i> \r\n                {{NavUtilities.asInternalLink(element).name}}\r\n            </a>\r\n            <!-- External Link -->\r\n            <span *ngSwitchCase=\"'externalLink'\">\r\n                <a mat-button\r\n                    (click)=\"clickSidenavElement(element)\"\r\n                    [href]=\"NavUtilities.asExternalLink(element).url\"\r\n                    [target]=\"NavUtilities.asExternalLink(element).openInNewTab ? '_blank' : '_self'\"\r\n                    [rel]=\"NavUtilities.asExternalLink(element).openInNewTab ? 'noreferrer noopener' : undefined\"\r\n                >\r\n                    <i *ngIf=\"NavUtilities.asExternalLink(element).icon\" [class]=\"NavUtilities.asExternalLink(element).icon\"></i>\r\n                    {{NavUtilities.asExternalLink(element).name}}\r\n                </a>\r\n            </span>\r\n            <!-- Nested Menu -->\r\n            <button #nestedMenuButton id=\"menu-button\" *ngSwitchCase=\"'menu'\" mat-menu-item [matMenuTriggerFor]=\"internalMenu.menu\">\r\n                <i *ngIf=\"NavUtilities.asMenu(element).icon\" [class]=\"NavUtilities.asMenu(element).icon\"></i>\r\n                {{NavUtilities.asMenu(element).name}}\r\n            </button>\r\n            <ngx-mat-navigation-menu #internalMenu [navMenu]=\"NavUtilities.asMenu(element)\" [sidenav]=\"sidenav\" [menuWidth]=\"nestedMenuWidth\">\r\n            </ngx-mat-navigation-menu>\r\n        </div>\r\n    </div>\r\n</mat-menu>", styles: ["a{width:100%}\n"] }]
+        }], propDecorators: { menu: [{
+                type: ViewChild,
+                args: ['menu', { static: true }]
+            }], navMenu: [{
+                type: Input
+            }], sidenav: [{
+                type: Input
+            }], menuWidth: [{
+                type: Input
+            }], nestedMenuButton: [{
+                type: ViewChild,
+                args: ['nestedMenuButton']
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
+/**
+ * Displays a single Navigation Element.
+ */
+class NavElementComponent {
+    constructor() {
+        this.NavUtilities = NavUtilities;
+    }
+    ngAfterContentChecked() {
+        if (this.menuButton) {
+            this.menuWidth = this.getMenuWidth();
+        }
+    }
+    /**
+     * Updates the width of the menu to the value of its button.
+     */
+    onResize() {
+        if (this.menuButton) {
+            this.menuWidth = this.getMenuWidth();
+        }
+    }
+    getMenuWidth() {
+        return this.menuButton._elementRef.nativeElement.offsetWidth;
+    }
+}
+NavElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NavElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NavElementComponent, selector: "ngx-mat-navigation-element", inputs: { element: "element", sidenav: "sidenav", sidenavElement: "sidenavElement" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "menuButton", first: true, predicate: ["menuButton"], descendants: true }], ngImport: i0, template: "<span [ngSwitch]=\"element.type\">\r\n    <!-- Title -->\r\n    <h1 mat-menu-item disabled *ngSwitchCase=\"'title'\" [class.sidenavElement]=\"sidenavElement\">\r\n        <i *ngIf=\"NavUtilities.asTitle(element).icon\" [class]=\"NavUtilities.asTitle(element).icon\"></i>\r\n        {{NavUtilities.asTitle(element).title}}\r\n    </h1>\r\n    <!-- Title with internal link -->\r\n    <a id=\"title-link\" disableRipple mat-menu-item *ngSwitchCase=\"'titleWithInternalLink'\"\r\n        [routerLink]=\"      \r\n            NavUtilities.asAngularRoute(NavUtilities.asTitleWithInternalLink(element).link.route).path !== undefined\r\n            ? NavUtilities.asAngularRoute(NavUtilities.asTitleWithInternalLink(element).link.route).path\r\n            : NavUtilities.asStringRoute(NavUtilities.asTitleWithInternalLink(element).link.route)\"\r\n        [target]=\"NavUtilities.asTitleWithInternalLink(element).link.openInNewTab ? '_blank' : '_self'\"\r\n        [rel]=\"NavUtilities.asTitleWithInternalLink(element).link.openInNewTab ? 'noreferrer noopener' : undefined\"\r\n        [class.sidenavElement]=\"sidenavElement\"\r\n    >\r\n        <h1>\r\n            <i *ngIf=\"NavUtilities.asTitle(element).icon\" [class]=\"NavUtilities.asTitle(element).icon\"></i>\r\n            {{NavUtilities.asTitle(element).title}}\r\n        </h1>\r\n    </a>\r\n    <!-- Title with external link -->\r\n    <a class=\"title-link\" disableRipple mat-menu-item *ngSwitchCase=\"'titleWithExternalLink'\"\r\n        [href]=\"NavUtilities.asTitleWithExternalLink(element).link.url\"\r\n        [target]=\"NavUtilities.asTitleWithExternalLink(element).link.openInNewTab ? '_blank' : '_self'\"\r\n        [rel]=\"NavUtilities.asTitleWithExternalLink(element).link.openInNewTab ? 'noreferrer noopener' : undefined\"\r\n        [class.sidenavElement]=\"sidenavElement\"\r\n    >\r\n        <h1>\r\n            <i *ngIf=\"NavUtilities.asTitle(element).icon\" [class]=\"NavUtilities.asTitle(element).icon\"></i>\r\n            {{NavUtilities.asTitle(element).title}}\r\n        </h1>\r\n    </a>\r\n    <!-- Image -->\r\n    <img mat-menu-item disabled *ngSwitchCase=\"'image'\"\r\n        [class.sidenavElement]=\"sidenavElement\"\r\n        [src]=\"NavUtilities.asImage(element).url\"\r\n    >\r\n    <!-- Image with internal link -->\r\n    <a id=\"image-link\" disableRipple mat-menu-item *ngSwitchCase=\"'imageWithInternalLink'\"\r\n        [routerLink]=\"\r\n            NavUtilities.asAngularRoute(NavUtilities.asImageWithInternalLink(element).link.route).path !== undefined\r\n            ? NavUtilities.asAngularRoute(NavUtilities.asImageWithInternalLink(element).link.route).path\r\n            : NavUtilities.asStringRoute(NavUtilities.asImageWithInternalLink(element).link.route)\"\r\n        [target]=\"NavUtilities.asImageWithInternalLink(element).link.openInNewTab ? '_blank' : '_self'\"\r\n        [rel]=\"NavUtilities.asImageWithInternalLink(element).link.openInNewTab ? 'noreferrer noopener' : undefined\"\r\n        [class.sidenavElement]=\"sidenavElement\"\r\n    >\r\n        <img [src]=\"NavUtilities.asImageWithInternalLink(element).url\">\r\n    </a>\r\n    <!-- Image with external link -->\r\n    <a id=\"image-link\" disableRipple mat-menu-item *ngSwitchCase=\"'imageWithExternalLink'\"\r\n        [href]=\"NavUtilities.asImageWithExternalLink(element).link.url\"\r\n        [target]=\"NavUtilities.asImageWithExternalLink(element).link.openInNewTab ? '_blank' : '_self'\"\r\n        [rel]=\"NavUtilities.asImageWithExternalLink(element).link.openInNewTab ? 'noreferrer noopener' : undefined\"\r\n        [class.sidenavElement]=\"sidenavElement\"\r\n    >\r\n        <img [src]=\"NavUtilities.asImageWithExternalLink(element).url\">\r\n    </a>\r\n    <!-- Button -->\r\n    <button *ngSwitchCase=\"'button'\"\r\n        mat-raised-button\r\n        (click)=\"NavUtilities.asButton(element).action()\"\r\n        [class.sidenavElementButton]=\"sidenavElement\"\r\n    >\r\n        <i *ngIf=\"NavUtilities.asButton(element).icon\" [class]=\"NavUtilities.asButton(element).icon\"></i>\r\n        {{NavUtilities.asButton(element).name}}\r\n    </button>\r\n    <!-- Internal Link -->\r\n    <a mat-button *ngSwitchCase=\"'internalLink'\"\r\n        [routerLink]=\"\r\n            NavUtilities.asAngularRoute(NavUtilities.asInternalLink(element).route).path !== undefined\r\n            ? NavUtilities.asAngularRoute(NavUtilities.asInternalLink(element).route).path\r\n            : NavUtilities.asStringRoute(NavUtilities.asInternalLink(element).route)\"\r\n        [target]=\"NavUtilities.asInternalLink(element).openInNewTab ? '_blank' : '_self'\"\r\n        [rel]=\"NavUtilities.asInternalLink(element).openInNewTab ? 'noreferrer noopener' : undefined\"\r\n        [class.sidenavElement]=\"sidenavElement\"\r\n    >\r\n        <i *ngIf=\"NavUtilities.asInternalLink(element).icon\" [class]=\"NavUtilities.asInternalLink(element).icon\"></i> \r\n        {{NavUtilities.asInternalLink(element).name}}\r\n    </a>\r\n    <!-- External Link -->\r\n    <span *ngSwitchCase=\"'externalLink'\">\r\n        <a mat-button\r\n            [href]=\"NavUtilities.asExternalLink(element).url\"\r\n            [target]=\"NavUtilities.asExternalLink(element).openInNewTab ? '_blank' : '_self'\"\r\n            [rel]=\"NavUtilities.asExternalLink(element).openInNewTab ? 'noreferrer noopener' : undefined\"\r\n            [class.sidenavElement]=\"sidenavElement\"\r\n        >\r\n            <i *ngIf=\"NavUtilities.asExternalLink(element).icon\" [class]=\"NavUtilities.asExternalLink(element).icon\"></i>\r\n            {{NavUtilities.asExternalLink(element).name}}\r\n        </a>\r\n    </span>\r\n    <!-- Menu -->\r\n    <button #menuButton *ngSwitchCase=\"'menu'\" mat-button [matMenuTriggerFor]=\"menu.menu\" [class.sidenavElement]=\"sidenavElement\">\r\n        <i *ngIf=\"NavUtilities.asMenu(element).icon\" [class]=\"NavUtilities.asMenu(element).icon\"></i>\r\n        {{NavUtilities.asMenu(element).name}}\r\n    </button>\r\n    <ngx-mat-navigation-menu #menu\r\n        [navMenu]=\"NavUtilities.asMenu(element)\"\r\n        [sidenav]=\"sidenav\"\r\n        [menuWidth]=\"menuWidth\">\r\n    </ngx-mat-navigation-menu>\r\n    \r\n</span>", styles: ["#title-link{display:flex;align-items:center;justify-content:center;color:inherit}#image-link{display:flex;align-items:center;padding:0}#image-link img{max-height:100%;max-width:100%}#image-link:hover,#title-link:hover{cursor:pointer;background-color:transparent}.sidenavElement{display:inline-block;width:100%;text-align:left}.sidenavElementButton{display:inline-block;width:100%}mat-menu{display:none}.mat-menu-panel{min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;max-height:calc(100vh - 48px);border-radius:4px;outline:0;min-height:64px}.mat-menu-panel.ng-animating{pointer-events:none}.cdk-high-contrast-active .mat-menu-panel{outline:solid 1px}.mat-menu-content:not(:empty){padding-top:8px;padding-bottom:8px}.mat-menu-item{-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:48px;height:48px;padding:0 16px;text-align:left;text-decoration:none;max-width:100%;position:relative}.mat-menu-item::-moz-focus-inner{border:0}.mat-menu-item[disabled]{cursor:default}[dir=rtl] .mat-menu-item{text-align:right}.mat-menu-item .mat-icon{margin-right:16px;vertical-align:middle}.mat-menu-item .mat-icon svg{vertical-align:top}[dir=rtl] .mat-menu-item .mat-icon{margin-left:16px;margin-right:0}.mat-menu-item[disabled]:before{display:block;position:absolute;content:\"\";top:0;left:0;bottom:0;right:0}.cdk-high-contrast-active .mat-menu-item{margin-top:1px}.cdk-high-contrast-active .mat-menu-item.cdk-program-focused,.cdk-high-contrast-active .mat-menu-item.cdk-keyboard-focused,.cdk-high-contrast-active .mat-menu-item-highlighted{outline:dotted 1px}.mat-menu-item-submenu-trigger{padding-right:32px}[dir=rtl] .mat-menu-item-submenu-trigger{padding-right:16px;padding-left:32px}.mat-menu-submenu-icon{position:absolute;top:50%;right:16px;transform:translateY(-50%);width:5px;height:10px;fill:currentColor}[dir=rtl] .mat-menu-submenu-icon{right:auto;left:16px;transform:translateY(-50%) scaleX(-1)}.cdk-high-contrast-active .mat-menu-submenu-icon{fill:CanvasText}button.mat-menu-item{width:100%}.mat-menu-item .mat-menu-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}\n"], components: [{ type: i1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: NavMenuComponent, selector: "ngx-mat-navigation-menu", inputs: ["navMenu", "sidenav", "menuWidth"] }], directives: [{ type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-mat-navigation-element', template: "<span [ngSwitch]=\"element.type\">\r\n    <!-- Title -->\r\n    <h1 mat-menu-item disabled *ngSwitchCase=\"'title'\" [class.sidenavElement]=\"sidenavElement\">\r\n        <i *ngIf=\"NavUtilities.asTitle(element).icon\" [class]=\"NavUtilities.asTitle(element).icon\"></i>\r\n        {{NavUtilities.asTitle(element).title}}\r\n    </h1>\r\n    <!-- Title with internal link -->\r\n    <a id=\"title-link\" disableRipple mat-menu-item *ngSwitchCase=\"'titleWithInternalLink'\"\r\n        [routerLink]=\"      \r\n            NavUtilities.asAngularRoute(NavUtilities.asTitleWithInternalLink(element).link.route).path !== undefined\r\n            ? NavUtilities.asAngularRoute(NavUtilities.asTitleWithInternalLink(element).link.route).path\r\n            : NavUtilities.asStringRoute(NavUtilities.asTitleWithInternalLink(element).link.route)\"\r\n        [target]=\"NavUtilities.asTitleWithInternalLink(element).link.openInNewTab ? '_blank' : '_self'\"\r\n        [rel]=\"NavUtilities.asTitleWithInternalLink(element).link.openInNewTab ? 'noreferrer noopener' : undefined\"\r\n        [class.sidenavElement]=\"sidenavElement\"\r\n    >\r\n        <h1>\r\n            <i *ngIf=\"NavUtilities.asTitle(element).icon\" [class]=\"NavUtilities.asTitle(element).icon\"></i>\r\n            {{NavUtilities.asTitle(element).title}}\r\n        </h1>\r\n    </a>\r\n    <!-- Title with external link -->\r\n    <a class=\"title-link\" disableRipple mat-menu-item *ngSwitchCase=\"'titleWithExternalLink'\"\r\n        [href]=\"NavUtilities.asTitleWithExternalLink(element).link.url\"\r\n        [target]=\"NavUtilities.asTitleWithExternalLink(element).link.openInNewTab ? '_blank' : '_self'\"\r\n        [rel]=\"NavUtilities.asTitleWithExternalLink(element).link.openInNewTab ? 'noreferrer noopener' : undefined\"\r\n        [class.sidenavElement]=\"sidenavElement\"\r\n    >\r\n        <h1>\r\n            <i *ngIf=\"NavUtilities.asTitle(element).icon\" [class]=\"NavUtilities.asTitle(element).icon\"></i>\r\n            {{NavUtilities.asTitle(element).title}}\r\n        </h1>\r\n    </a>\r\n    <!-- Image -->\r\n    <img mat-menu-item disabled *ngSwitchCase=\"'image'\"\r\n        [class.sidenavElement]=\"sidenavElement\"\r\n        [src]=\"NavUtilities.asImage(element).url\"\r\n    >\r\n    <!-- Image with internal link -->\r\n    <a id=\"image-link\" disableRipple mat-menu-item *ngSwitchCase=\"'imageWithInternalLink'\"\r\n        [routerLink]=\"\r\n            NavUtilities.asAngularRoute(NavUtilities.asImageWithInternalLink(element).link.route).path !== undefined\r\n            ? NavUtilities.asAngularRoute(NavUtilities.asImageWithInternalLink(element).link.route).path\r\n            : NavUtilities.asStringRoute(NavUtilities.asImageWithInternalLink(element).link.route)\"\r\n        [target]=\"NavUtilities.asImageWithInternalLink(element).link.openInNewTab ? '_blank' : '_self'\"\r\n        [rel]=\"NavUtilities.asImageWithInternalLink(element).link.openInNewTab ? 'noreferrer noopener' : undefined\"\r\n        [class.sidenavElement]=\"sidenavElement\"\r\n    >\r\n        <img [src]=\"NavUtilities.asImageWithInternalLink(element).url\">\r\n    </a>\r\n    <!-- Image with external link -->\r\n    <a id=\"image-link\" disableRipple mat-menu-item *ngSwitchCase=\"'imageWithExternalLink'\"\r\n        [href]=\"NavUtilities.asImageWithExternalLink(element).link.url\"\r\n        [target]=\"NavUtilities.asImageWithExternalLink(element).link.openInNewTab ? '_blank' : '_self'\"\r\n        [rel]=\"NavUtilities.asImageWithExternalLink(element).link.openInNewTab ? 'noreferrer noopener' : undefined\"\r\n        [class.sidenavElement]=\"sidenavElement\"\r\n    >\r\n        <img [src]=\"NavUtilities.asImageWithExternalLink(element).url\">\r\n    </a>\r\n    <!-- Button -->\r\n    <button *ngSwitchCase=\"'button'\"\r\n        mat-raised-button\r\n        (click)=\"NavUtilities.asButton(element).action()\"\r\n        [class.sidenavElementButton]=\"sidenavElement\"\r\n    >\r\n        <i *ngIf=\"NavUtilities.asButton(element).icon\" [class]=\"NavUtilities.asButton(element).icon\"></i>\r\n        {{NavUtilities.asButton(element).name}}\r\n    </button>\r\n    <!-- Internal Link -->\r\n    <a mat-button *ngSwitchCase=\"'internalLink'\"\r\n        [routerLink]=\"\r\n            NavUtilities.asAngularRoute(NavUtilities.asInternalLink(element).route).path !== undefined\r\n            ? NavUtilities.asAngularRoute(NavUtilities.asInternalLink(element).route).path\r\n            : NavUtilities.asStringRoute(NavUtilities.asInternalLink(element).route)\"\r\n        [target]=\"NavUtilities.asInternalLink(element).openInNewTab ? '_blank' : '_self'\"\r\n        [rel]=\"NavUtilities.asInternalLink(element).openInNewTab ? 'noreferrer noopener' : undefined\"\r\n        [class.sidenavElement]=\"sidenavElement\"\r\n    >\r\n        <i *ngIf=\"NavUtilities.asInternalLink(element).icon\" [class]=\"NavUtilities.asInternalLink(element).icon\"></i> \r\n        {{NavUtilities.asInternalLink(element).name}}\r\n    </a>\r\n    <!-- External Link -->\r\n    <span *ngSwitchCase=\"'externalLink'\">\r\n        <a mat-button\r\n            [href]=\"NavUtilities.asExternalLink(element).url\"\r\n            [target]=\"NavUtilities.asExternalLink(element).openInNewTab ? '_blank' : '_self'\"\r\n            [rel]=\"NavUtilities.asExternalLink(element).openInNewTab ? 'noreferrer noopener' : undefined\"\r\n            [class.sidenavElement]=\"sidenavElement\"\r\n        >\r\n            <i *ngIf=\"NavUtilities.asExternalLink(element).icon\" [class]=\"NavUtilities.asExternalLink(element).icon\"></i>\r\n            {{NavUtilities.asExternalLink(element).name}}\r\n        </a>\r\n    </span>\r\n    <!-- Menu -->\r\n    <button #menuButton *ngSwitchCase=\"'menu'\" mat-button [matMenuTriggerFor]=\"menu.menu\" [class.sidenavElement]=\"sidenavElement\">\r\n        <i *ngIf=\"NavUtilities.asMenu(element).icon\" [class]=\"NavUtilities.asMenu(element).icon\"></i>\r\n        {{NavUtilities.asMenu(element).name}}\r\n    </button>\r\n    <ngx-mat-navigation-menu #menu\r\n        [navMenu]=\"NavUtilities.asMenu(element)\"\r\n        [sidenav]=\"sidenav\"\r\n        [menuWidth]=\"menuWidth\">\r\n    </ngx-mat-navigation-menu>\r\n    \r\n</span>", styles: ["#title-link{display:flex;align-items:center;justify-content:center;color:inherit}#image-link{display:flex;align-items:center;padding:0}#image-link img{max-height:100%;max-width:100%}#image-link:hover,#title-link:hover{cursor:pointer;background-color:transparent}.sidenavElement{display:inline-block;width:100%;text-align:left}.sidenavElementButton{display:inline-block;width:100%}mat-menu{display:none}.mat-menu-panel{min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;max-height:calc(100vh - 48px);border-radius:4px;outline:0;min-height:64px}.mat-menu-panel.ng-animating{pointer-events:none}.cdk-high-contrast-active .mat-menu-panel{outline:solid 1px}.mat-menu-content:not(:empty){padding-top:8px;padding-bottom:8px}.mat-menu-item{-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:48px;height:48px;padding:0 16px;text-align:left;text-decoration:none;max-width:100%;position:relative}.mat-menu-item::-moz-focus-inner{border:0}.mat-menu-item[disabled]{cursor:default}[dir=rtl] .mat-menu-item{text-align:right}.mat-menu-item .mat-icon{margin-right:16px;vertical-align:middle}.mat-menu-item .mat-icon svg{vertical-align:top}[dir=rtl] .mat-menu-item .mat-icon{margin-left:16px;margin-right:0}.mat-menu-item[disabled]:before{display:block;position:absolute;content:\"\";top:0;left:0;bottom:0;right:0}.cdk-high-contrast-active .mat-menu-item{margin-top:1px}.cdk-high-contrast-active .mat-menu-item.cdk-program-focused,.cdk-high-contrast-active .mat-menu-item.cdk-keyboard-focused,.cdk-high-contrast-active .mat-menu-item-highlighted{outline:dotted 1px}.mat-menu-item-submenu-trigger{padding-right:32px}[dir=rtl] .mat-menu-item-submenu-trigger{padding-right:16px;padding-left:32px}.mat-menu-submenu-icon{position:absolute;top:50%;right:16px;transform:translateY(-50%);width:5px;height:10px;fill:currentColor}[dir=rtl] .mat-menu-submenu-icon{right:auto;left:16px;transform:translateY(-50%) scaleX(-1)}.cdk-high-contrast-active .mat-menu-submenu-icon{fill:CanvasText}button.mat-menu-item{width:100%}.mat-menu-item .mat-menu-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}\n"] }]
+        }], propDecorators: { element: [{
+                type: Input
+            }], sidenav: [{
+                type: Input
+            }], sidenavElement: [{
+                type: Input
+            }], menuButton: [{
+                type: ViewChild,
+                args: ['menuButton']
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
+/**
+ * The navbar component.
+ * Takes in your configuration and builds a toolbar as well as a sidenav accordingly.
+ * Also handles responsiveness.
+ */
+class NavbarComponent {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+        this.NavUtilities = NavUtilities;
+        this.sidenavElements = [];
+        this.burgerMenu = {
+            type: 'button',
+            name: '',
+            icon: 'fas fa-bars',
+            action: () => this.sidenav.toggle(),
+            collapse: 'never'
+        };
+    }
+    ngOnInit() {
+        if (!this.minHeight || typeof this.minHeight !== 'number'
+            || !this.minHeightOtherElements || typeof this.minHeightOtherElements !== 'number') {
+            throw new Error('Incorrect input data');
+        }
+        else {
+            this.sanitizedMinHeight = this.sanitizer.bypassSecurityTrustStyle(`calc(100vh - ${this.minHeight + this.minHeightOtherElements}px)`);
+            this.screenWidth = window.innerWidth;
+            this.screenWidthName = this.getCurrentScreenWidth();
+            this.sidenavElements = NavUtilities.getSidenavElements(this.screenWidthName, this.navbarRows);
+        }
+    }
+    /**
+     * Updates the current screen width and filters the sidenav elements accordingly.
+     */
+    onResize() {
+        this.screenWidth = window.innerWidth;
+        this.screenWidthName = this.getCurrentScreenWidth();
+        this.sidenavElements = NavUtilities.getSidenavElements(this.screenWidthName, this.navbarRows);
+        if (!this.sidenavElements.length && this.sidenav.opened) {
+            this.sidenav.close();
+        }
+    }
+    /**
+     * Defines if the sidenav should be closed when the given element is clicked.
+     *
+     * @param element - The element that has been clicked.
+     */
+    clickSidenavElement(element) {
+        switch (element.type) {
+            case 'image':
+            case 'title':
+            case 'menu':
+                return;
+            default:
+                this.sidenav.close();
+        }
+    }
+    getCurrentScreenWidth() {
+        if (this.screenWidth < 768) {
+            return 'sm';
+        }
+        else if (this.screenWidth < 992) {
+            return 'md';
+        }
+        else {
+            return 'lg';
+        }
+    }
+}
+NavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NavbarComponent, selector: "ngx-mat-navigation-navbar", inputs: { navbarRows: "navbarRows", minHeight: "minHeight", minHeightOtherElements: "minHeightOtherElements", minSidenavWidth: "minSidenavWidth" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true }], ngImport: i0, template: "<mat-toolbar class=\"mat-elevation-z8\" [style.min-height.px]=\"minHeight\">\r\n    <div *ngIf=\"navbarRows.length>1\" class=\"container\">\r\n        <mat-toolbar-row class=\"toolbar-row\" *ngFor=\"let row of navbarRows\">\r\n            <span class=\"toolbar-row\">\r\n                <span class=\"left\">\r\n                    <span *ngFor=\"let element of NavUtilities.getNavbarElements('left', screenWidthName, navbarRows)\">\r\n                        <ngx-mat-navigation-element [element]=\"element\"></ngx-mat-navigation-element>\r\n                    </span>\r\n                </span>\r\n                <span class=\"center\">\r\n                    <span *ngFor=\"let element of NavUtilities.getNavbarElements('center', screenWidthName, navbarRows)\">\r\n                        <ngx-mat-navigation-element [element]=\"element\"></ngx-mat-navigation-element>\r\n                    </span>\r\n                </span>\r\n                <span class=\"right\">\r\n                    <span *ngFor=\"let element of NavUtilities.getNavbarElements('right', screenWidthName, navbarRows)\">\r\n                        <ngx-mat-navigation-element [element]=\"element\"></ngx-mat-navigation-element>\r\n                    </span>\r\n                    <span *ngIf=\"sidenavElements.length && (navbarRows.indexOf(row) === 0)\" style=\"margin-left: 10px;\">\r\n                        <ngx-mat-navigation-element [element]=\"burgerMenu\"></ngx-mat-navigation-element>\r\n                    </span>\r\n                </span>\r\n            </span>\r\n        </mat-toolbar-row>\r\n    </div>\r\n    <div *ngIf=\"!(navbarRows.length>1)\" class=\"container\">\r\n        <span class=\"toolbar-row\">\r\n            <span *ngFor=\"let element of NavUtilities.getNavbarElements('left', screenWidthName, navbarRows)\">\r\n                <ngx-mat-navigation-element [element]=\"element\"></ngx-mat-navigation-element>\r\n            </span>\r\n            <span class=\"center\">\r\n                <span *ngFor=\"let element of NavUtilities.getNavbarElements('center', screenWidthName, navbarRows)\">\r\n                    <ngx-mat-navigation-element [element]=\"element\"></ngx-mat-navigation-element>\r\n                </span>\r\n            </span>\r\n            <span class=\"right\">\r\n                <span *ngFor=\"let element of NavUtilities.getNavbarElements('right', screenWidthName, navbarRows)\">\r\n                    <ngx-mat-navigation-element [element]=\"element\"></ngx-mat-navigation-element>\r\n                </span>\r\n                <span *ngIf=\"sidenavElements.length\" style=\"margin-left: 10px;\">\r\n                    <ngx-mat-navigation-element [element]=\"burgerMenu\"></ngx-mat-navigation-element>\r\n                </span>\r\n            </span>\r\n        </span>\r\n    </div>\r\n</mat-toolbar>\r\n\r\n<mat-sidenav-container style=\"background-color: transparent; padding-top: 40px;\"\r\n    [style.min-height]=\"sanitizedMinHeight\">\r\n    <mat-sidenav #sidenav position=\"end\" style=\"padding: 20px;\" [style.min-width]=\"minSidenavWidth\" [autoFocus]=\"false\">\r\n        <p *ngFor=\"let element of sidenavElements\">\r\n            <ngx-mat-navigation-element (click)=\"clickSidenavElement(element)\" style=\"display: inline-block; width: 100%;\" [sidenav]=\"sidenav\" [sidenavElement]=\"true\" [element]=\"element\"></ngx-mat-navigation-element>\r\n        </p>\r\n    </mat-sidenav>\r\n    <mat-sidenav-content style=\"padding-bottom: 40px;\">\r\n        <div class=\"container\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </mat-sidenav-content>\r\n</mat-sidenav-container>", styles: [".toolbar-row{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap}.center{margin-left:auto;margin-right:auto}.right{margin-left:auto}\n"], components: [{ type: i2$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: NavElementComponent, selector: "ngx-mat-navigation-element", inputs: ["element", "sidenav", "sidenavElement"] }, { type: i4$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i4$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i4$1.MatSidenavContent, selector: "mat-sidenav-content" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-mat-navigation-navbar', template: "<mat-toolbar class=\"mat-elevation-z8\" [style.min-height.px]=\"minHeight\">\r\n    <div *ngIf=\"navbarRows.length>1\" class=\"container\">\r\n        <mat-toolbar-row class=\"toolbar-row\" *ngFor=\"let row of navbarRows\">\r\n            <span class=\"toolbar-row\">\r\n                <span class=\"left\">\r\n                    <span *ngFor=\"let element of NavUtilities.getNavbarElements('left', screenWidthName, navbarRows)\">\r\n                        <ngx-mat-navigation-element [element]=\"element\"></ngx-mat-navigation-element>\r\n                    </span>\r\n                </span>\r\n                <span class=\"center\">\r\n                    <span *ngFor=\"let element of NavUtilities.getNavbarElements('center', screenWidthName, navbarRows)\">\r\n                        <ngx-mat-navigation-element [element]=\"element\"></ngx-mat-navigation-element>\r\n                    </span>\r\n                </span>\r\n                <span class=\"right\">\r\n                    <span *ngFor=\"let element of NavUtilities.getNavbarElements('right', screenWidthName, navbarRows)\">\r\n                        <ngx-mat-navigation-element [element]=\"element\"></ngx-mat-navigation-element>\r\n                    </span>\r\n                    <span *ngIf=\"sidenavElements.length && (navbarRows.indexOf(row) === 0)\" style=\"margin-left: 10px;\">\r\n                        <ngx-mat-navigation-element [element]=\"burgerMenu\"></ngx-mat-navigation-element>\r\n                    </span>\r\n                </span>\r\n            </span>\r\n        </mat-toolbar-row>\r\n    </div>\r\n    <div *ngIf=\"!(navbarRows.length>1)\" class=\"container\">\r\n        <span class=\"toolbar-row\">\r\n            <span *ngFor=\"let element of NavUtilities.getNavbarElements('left', screenWidthName, navbarRows)\">\r\n                <ngx-mat-navigation-element [element]=\"element\"></ngx-mat-navigation-element>\r\n            </span>\r\n            <span class=\"center\">\r\n                <span *ngFor=\"let element of NavUtilities.getNavbarElements('center', screenWidthName, navbarRows)\">\r\n                    <ngx-mat-navigation-element [element]=\"element\"></ngx-mat-navigation-element>\r\n                </span>\r\n            </span>\r\n            <span class=\"right\">\r\n                <span *ngFor=\"let element of NavUtilities.getNavbarElements('right', screenWidthName, navbarRows)\">\r\n                    <ngx-mat-navigation-element [element]=\"element\"></ngx-mat-navigation-element>\r\n                </span>\r\n                <span *ngIf=\"sidenavElements.length\" style=\"margin-left: 10px;\">\r\n                    <ngx-mat-navigation-element [element]=\"burgerMenu\"></ngx-mat-navigation-element>\r\n                </span>\r\n            </span>\r\n        </span>\r\n    </div>\r\n</mat-toolbar>\r\n\r\n<mat-sidenav-container style=\"background-color: transparent; padding-top: 40px;\"\r\n    [style.min-height]=\"sanitizedMinHeight\">\r\n    <mat-sidenav #sidenav position=\"end\" style=\"padding: 20px;\" [style.min-width]=\"minSidenavWidth\" [autoFocus]=\"false\">\r\n        <p *ngFor=\"let element of sidenavElements\">\r\n            <ngx-mat-navigation-element (click)=\"clickSidenavElement(element)\" style=\"display: inline-block; width: 100%;\" [sidenav]=\"sidenav\" [sidenavElement]=\"true\" [element]=\"element\"></ngx-mat-navigation-element>\r\n        </p>\r\n    </mat-sidenav>\r\n    <mat-sidenav-content style=\"padding-bottom: 40px;\">\r\n        <div class=\"container\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </mat-sidenav-content>\r\n</mat-sidenav-container>", styles: [".toolbar-row{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap}.center{margin-left:auto;margin-right:auto}.right{margin-left:auto}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { navbarRows: [{
+                type: Input
+            }], minHeight: [{
+                type: Input
+            }], minHeightOtherElements: [{
+                type: Input
+            }], minSidenavWidth: [{
+                type: Input
+            }], sidenav: [{
+                type: ViewChild,
+                args: ['sidenav']
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
+class NavMenuModule {
+}
+NavMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NavMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavMenuModule, declarations: [NavMenuComponent], imports: [CommonModule,
+        MatMenuModule,
+        RouterModule,
+        MatButtonModule], exports: [NavMenuComponent] });
+NavMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavMenuModule, imports: [[
+            CommonModule,
+            MatMenuModule,
+            RouterModule,
+            MatButtonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        MatMenuModule,
+                        RouterModule,
+                        MatButtonModule
+                    ],
+                    declarations: [NavMenuComponent],
+                    exports: [NavMenuComponent]
+                }]
+        }] });
+
+class NavElementModule {
+}
+NavElementModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavElementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NavElementModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavElementModule, declarations: [NavElementComponent], imports: [CommonModule,
+        NavMenuModule,
+        RouterModule,
+        MatMenuModule,
+        MatButtonModule,
+        MatSidenavModule], exports: [NavElementComponent] });
+NavElementModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavElementModule, imports: [[
+            CommonModule,
+            NavMenuModule,
+            RouterModule,
+            MatMenuModule,
+            MatButtonModule,
+            MatSidenavModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavElementModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        NavMenuModule,
+                        RouterModule,
+                        MatMenuModule,
+                        MatButtonModule,
+                        MatSidenavModule
+                    ],
+                    declarations: [NavElementComponent],
+                    exports: [NavElementComponent]
+                }]
+        }] });
+
+class NgxMatNavigationNavbarModule {
+}
+NgxMatNavigationNavbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatNavigationNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxMatNavigationNavbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatNavigationNavbarModule, declarations: [NavbarComponent], imports: [CommonModule,
+        MatToolbarModule,
+        NavElementModule,
+        MatSidenavModule], exports: [NavbarComponent] });
+NgxMatNavigationNavbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatNavigationNavbarModule, imports: [[
+            CommonModule,
+            MatToolbarModule,
+            NavElementModule,
+            MatSidenavModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatNavigationNavbarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NavbarComponent],
+                    imports: [
+                        CommonModule,
+                        MatToolbarModule,
+                        NavElementModule,
+                        MatSidenavModule
+                    ],
+                    exports: [NavbarComponent]
+                }]
+        }] });
+
+/**
+ * Displays a footer based on the provided input data.
+ */
+class FooterComponent {
+    constructor() { }
+}
+FooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FooterComponent, selector: "ngx-mat-navigation-footer", inputs: { minHeight: "minHeight" }, ngImport: i0, template: "<div class=\"mat-elevation-z8\" [style.minHeight.px]=\"minHeight\" style=\"background-color: #F5F5F5;\">\r\n\r\n</div>", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-mat-navigation-footer', template: "<div class=\"mat-elevation-z8\" [style.minHeight.px]=\"minHeight\" style=\"background-color: #F5F5F5;\">\r\n\r\n</div>", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { minHeight: [{
+                type: Input
+            }] } });
+
+class NgxMatNavigationFooterModule {
+}
+NgxMatNavigationFooterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatNavigationFooterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxMatNavigationFooterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatNavigationFooterModule, declarations: [FooterComponent], imports: [CommonModule], exports: [FooterComponent] });
+NgxMatNavigationFooterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatNavigationFooterModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatNavigationFooterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule
+                    ],
+                    declarations: [FooterComponent],
+                    exports: [FooterComponent]
+                }]
+        }] });
+
+/*
+ * Public API Surface of ngx-material-navigation
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BaseNavElement, FooterComponent, NavLink, NavUtilities, NavbarComponent, NgxMatNavigationFooterModule, NgxMatNavigationNavbarModule };
+//# sourceMappingURL=ngx-material-navigation.mjs.map