@messaia/cdk 15.0.0-rc53 → 15.0.0-rc54

package/esm2020/lib/layout/layout-manage-list/layout-manage-list.component.mjs

@@ -101,7 +101,7 @@ export class VdLayoutManageListComponent {
     close() { return this.sidenav.close(); }
 }
 /** @nocollapse */ VdLayoutManageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: VdLayoutManageListComponent, deps: [{ token: i1.VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdLayoutManageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: VdLayoutManageListComponent, selector: "vd-layout-manage-list", inputs: { title: "title", closable: "closable", menuItems: "menuItems", mode: "mode", sideGt: "sideGt", opened: "opened", openedGt: "openedGt", sidenavWidth: "sidenavWidth", sidenavGtXsWidth: "sidenavGtXsWidth" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container fullscreen class=\"vd-layout-manage-list\">\r\n\t<!-- #region Side nav -->\r\n\t<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\">\r\n\t\t<!-- #region Nav list toolbar -->\r\n\t\t<mat-toolbar dense *ngIf=\"title\">\r\n\t\t\t<span>{{title}}</span>\r\n\t\t\t<span flex></span>\r\n\t\t\t<button mat-icon-button (click)=\"close()\" *ngIf=\"closable\">\r\n\t\t\t\t<mat-icon>menu_open</mat-icon>\r\n\t\t\t</button>\r\n\t\t</mat-toolbar>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom title toolbar -->\r\n\t\t<ng-content select=\"mat-toolbar[vd-sidenav-content]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<div class=\"vd-layout-manage-list-sidenav\" cdkScrollable>\r\n\t\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t\t\t<ng-content select=\"vd-menu\"></ng-content>\r\n\t\t\t<vd-menu [items]=\"menuItems\" *ngIf=\"menuItems\"></vd-menu>\r\n\t\t</div>\r\n\t</mat-sidenav>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Main content -->\r\n\t<div class=\"vd-layout-manage-list-main\">\r\n\t\t<!-- #region Toolbar projection -->\r\n\t\t<ng-content select=\"mat-toolbar\"></ng-content>\r\n\t\t<ng-content select=\"vd-list-toolbar\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Scrollable content -->\r\n\t\t<div class=\"vd-layout-manage-list-content\" cdkScrollable>\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</div>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Footer content -->\r\n\t\t<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\t</div>\r\n\t<!-- #endregion -->\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list{flex:1}:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opened,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opening,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closed,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closing{box-shadow:0 1px 3px #0003}:host mat-sidenav-container.vd-layout-manage-list ::ng-deep .mat-drawer-inner-container{overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list ::ng-deep .mat-drawer-inner-container .mat-mdc-list-item .mat-mdc-list-item-title{overflow:hidden;text-overflow:ellipsis;display:inline}:host .vd-layout-manage-list-sidenav{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-manage-list-main{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;flex-direction:column;box-sizing:border-box;display:flex}:host .vd-layout-manage-list-main .vd-layout-manage-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>mat-sidenav{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}:host ::ng-deep .mat-toolbar{font-weight:400;display:flex;align-items:center}:host ::ng-deep .mat-toolbar *{overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .mat-toolbar>.mdc-icon-button{margin-right:-2px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { 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: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.VdMenuComponent, selector: "vd-menu", inputs: ["items", "activeExact", "avatar"], outputs: ["click"] }] });
+/** @nocollapse */ VdLayoutManageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: VdLayoutManageListComponent, selector: "vd-layout-manage-list", inputs: { title: "title", closable: "closable", menuItems: "menuItems", mode: "mode", sideGt: "sideGt", opened: "opened", openedGt: "openedGt", sidenavWidth: "sidenavWidth", sidenavGtXsWidth: "sidenavGtXsWidth" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container fullscreen class=\"vd-layout-manage-list\">\r\n\t<!-- #region Side nav -->\r\n\t<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\">\r\n\t\t<!-- #region Nav list toolbar -->\r\n\t\t<mat-toolbar dense *ngIf=\"title\">\r\n\t\t\t<span>{{title}}</span>\r\n\t\t\t<span flex></span>\r\n\t\t\t<button mat-icon-button (click)=\"close()\" *ngIf=\"closable\">\r\n\t\t\t\t<mat-icon>menu_open</mat-icon>\r\n\t\t\t</button>\r\n\t\t</mat-toolbar>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom title toolbar -->\r\n\t\t<ng-content select=\"mat-toolbar[vd-sidenav-content]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<div class=\"vd-layout-manage-list-sidenav\" cdkScrollable>\r\n\t\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t\t\t<ng-content select=\"vd-menu\"></ng-content>\r\n\t\t\t<vd-menu [items]=\"menuItems\" *ngIf=\"menuItems\"></vd-menu>\r\n\t\t</div>\r\n\t</mat-sidenav>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Main content -->\r\n\t<div class=\"vd-layout-manage-list-main\">\r\n\t\t<!-- #region Toolbar projection -->\r\n\t\t<ng-content select=\"mat-toolbar\"></ng-content>\r\n\t\t<ng-content select=\"vd-list-toolbar\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Scrollable content -->\r\n\t\t<div class=\"vd-layout-manage-list-content\" cdkScrollable>\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</div>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Footer content -->\r\n\t\t<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\t</div>\r\n\t<!-- #endregion -->\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list{flex:1}:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opened,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opening,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closed,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closing{box-shadow:0 1px 3px #0003}:host mat-sidenav-container.vd-layout-manage-list ::ng-deep .mat-drawer-inner-container{overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list ::ng-deep .mat-drawer-inner-container .mat-mdc-list-item .mat-mdc-list-item-title{overflow:hidden;text-overflow:ellipsis;display:inline}:host .vd-layout-manage-list-sidenav{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-manage-list-main{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;flex-direction:column;box-sizing:border-box;display:flex}:host .vd-layout-manage-list-main .vd-layout-manage-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>mat-sidenav{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}:host ::ng-deep .mat-toolbar{font-weight:400;display:flex;align-items:center}:host ::ng-deep .mat-toolbar *{overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .mat-toolbar>.mdc-icon-button{margin-right:-2px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { 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: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.VdMenuComponent, selector: "vd-menu", inputs: ["items", "activeExact", "fontSet", "avatar"], outputs: ["click"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: VdLayoutManageListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-layout-manage-list', template: "<mat-sidenav-container fullscreen class=\"vd-layout-manage-list\">\r\n\t<!-- #region Side nav -->\r\n\t<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\">\r\n\t\t<!-- #region Nav list toolbar -->\r\n\t\t<mat-toolbar dense *ngIf=\"title\">\r\n\t\t\t<span>{{title}}</span>\r\n\t\t\t<span flex></span>\r\n\t\t\t<button mat-icon-button (click)=\"close()\" *ngIf=\"closable\">\r\n\t\t\t\t<mat-icon>menu_open</mat-icon>\r\n\t\t\t</button>\r\n\t\t</mat-toolbar>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom title toolbar -->\r\n\t\t<ng-content select=\"mat-toolbar[vd-sidenav-content]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<div class=\"vd-layout-manage-list-sidenav\" cdkScrollable>\r\n\t\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t\t\t<ng-content select=\"vd-menu\"></ng-content>\r\n\t\t\t<vd-menu [items]=\"menuItems\" *ngIf=\"menuItems\"></vd-menu>\r\n\t\t</div>\r\n\t</mat-sidenav>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Main content -->\r\n\t<div class=\"vd-layout-manage-list-main\">\r\n\t\t<!-- #region Toolbar projection -->\r\n\t\t<ng-content select=\"mat-toolbar\"></ng-content>\r\n\t\t<ng-content select=\"vd-list-toolbar\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Scrollable content -->\r\n\t\t<div class=\"vd-layout-manage-list-content\" cdkScrollable>\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</div>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Footer content -->\r\n\t\t<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\t</div>\r\n\t<!-- #endregion -->\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list{flex:1}:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opened,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opening,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closed,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closing{box-shadow:0 1px 3px #0003}:host mat-sidenav-container.vd-layout-manage-list ::ng-deep .mat-drawer-inner-container{overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list ::ng-deep .mat-drawer-inner-container .mat-mdc-list-item .mat-mdc-list-item-title{overflow:hidden;text-overflow:ellipsis;display:inline}:host .vd-layout-manage-list-sidenav{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-manage-list-main{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;flex-direction:column;box-sizing:border-box;display:flex}:host .vd-layout-manage-list-main .vd-layout-manage-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>mat-sidenav{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}:host ::ng-deep .mat-toolbar{font-weight:400;display:flex;align-items:center}:host ::ng-deep .mat-toolbar *{overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .mat-toolbar>.mdc-icon-button{margin-right:-2px}\n"] }]

package/esm2020/lib/menu/components/menu.component.mjs

@@ -15,6 +15,10 @@ export class VdMenuComponent {
          * This will add the classes only when the url matches the link exactly.
          */
         this.activeExact = false;
+        /**
+         * Icons font set
+         */
+        this.fontSet = 'material-icons-outlined';
         /**
         * click?: function
         * Event emitted when a menu item is clicked.
@@ -34,18 +38,20 @@ export class VdMenuComponent {
     }
 }
 /** @nocollapse */ VdMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: VdMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: VdMenuComponent, selector: "vd-menu", inputs: { items: "items", activeExact: "activeExact", avatar: "avatar" }, outputs: { onClick: "click" }, ngImport: i0, template: "<mat-nav-list>\r\n\t<ng-template let-item let-last=\"last\" ngFor [ngForOf]=\"items\">\r\n\t\t<a mat-list-item *ngIf=\"item.enabled\" [routerLink]=\"item.path\" [routerLinkActive]=\"['active']\" [routerLinkActiveOptions]=\"{exact:item.activeExact}\" (click)=\"itemClicked(item.event?item.event:$event)\">\r\n\t\t\t<mat-icon *ngIf=\"!avatar\" matListItemIcon>{{item.icon}}</mat-icon>\r\n\t\t\t<span *ngIf=\"!avatar\" matListItemTitle>{{item.title}}</span>\r\n\t\t\t<mat-icon *ngIf=\"avatar\" matListAvatar>{{item.icon}}</mat-icon>\r\n\t\t\t<h3 *ngIf=\"avatar\" matLine>{{item.title}}</h3>\r\n\t\t\t<p *ngIf=\"avatar && item.description\" matLine> {{item.description}} </p>\r\n\t\t</a>\r\n\t\t<mat-divider *ngIf=\"item.divider && !avatar\"></mat-divider>\r\n\t\t<mat-divider [inset]=\"avatar\" *ngIf=\"!item.divider && avatar && !last\"></mat-divider>\r\n\t</ng-template>\r\n</mat-nav-list>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i4.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4.MatListItemTitle, selector: "[matListItemTitle]" }] });
+/** @nocollapse */ VdMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: VdMenuComponent, selector: "vd-menu", inputs: { items: "items", activeExact: "activeExact", fontSet: "fontSet", avatar: "avatar" }, outputs: { onClick: "click" }, ngImport: i0, template: "<mat-nav-list>\r\n\t<ng-template let-item let-last=\"last\" ngFor [ngForOf]=\"items\">\r\n\t\t<a mat-list-item *ngIf=\"item.enabled\" [routerLink]=\"item.path\" [routerLinkActive]=\"['active']\" [routerLinkActiveOptions]=\"{exact:item.activeExact}\" (click)=\"itemClicked(item.event?item.event:$event)\">\r\n\t\t\t<mat-icon [fontSet]=\"fontSet\" *ngIf=\"!avatar\" matListItemIcon>{{item.icon}}</mat-icon>\r\n\t\t\t<span *ngIf=\"!avatar\" matListItemTitle>{{item.title}}</span>\r\n\t\t\t<mat-icon [fontSet]=\"fontSet\" *ngIf=\"avatar\" matListAvatar>{{item.icon}}</mat-icon>\r\n\t\t\t<h3 *ngIf=\"avatar\" matLine>{{item.title}}</h3>\r\n\t\t\t<p *ngIf=\"avatar && item.description\" matLine> {{item.description}} </p>\r\n\t\t</a>\r\n\t\t<mat-divider *ngIf=\"item.divider && !avatar\"></mat-divider>\r\n\t\t<mat-divider [inset]=\"avatar\" *ngIf=\"!item.divider && avatar && !last\"></mat-divider>\r\n\t</ng-template>\r\n</mat-nav-list>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i4.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4.MatListItemTitle, selector: "[matListItemTitle]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: VdMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vd-menu', template: "<mat-nav-list>\r\n\t<ng-template let-item let-last=\"last\" ngFor [ngForOf]=\"items\">\r\n\t\t<a mat-list-item *ngIf=\"item.enabled\" [routerLink]=\"item.path\" [routerLinkActive]=\"['active']\" [routerLinkActiveOptions]=\"{exact:item.activeExact}\" (click)=\"itemClicked(item.event?item.event:$event)\">\r\n\t\t\t<mat-icon *ngIf=\"!avatar\" matListItemIcon>{{item.icon}}</mat-icon>\r\n\t\t\t<span *ngIf=\"!avatar\" matListItemTitle>{{item.title}}</span>\r\n\t\t\t<mat-icon *ngIf=\"avatar\" matListAvatar>{{item.icon}}</mat-icon>\r\n\t\t\t<h3 *ngIf=\"avatar\" matLine>{{item.title}}</h3>\r\n\t\t\t<p *ngIf=\"avatar && item.description\" matLine> {{item.description}} </p>\r\n\t\t</a>\r\n\t\t<mat-divider *ngIf=\"item.divider && !avatar\"></mat-divider>\r\n\t\t<mat-divider [inset]=\"avatar\" *ngIf=\"!item.divider && avatar && !last\"></mat-divider>\r\n\t</ng-template>\r\n</mat-nav-list>" }]
+            args: [{ selector: 'vd-menu', template: "<mat-nav-list>\r\n\t<ng-template let-item let-last=\"last\" ngFor [ngForOf]=\"items\">\r\n\t\t<a mat-list-item *ngIf=\"item.enabled\" [routerLink]=\"item.path\" [routerLinkActive]=\"['active']\" [routerLinkActiveOptions]=\"{exact:item.activeExact}\" (click)=\"itemClicked(item.event?item.event:$event)\">\r\n\t\t\t<mat-icon [fontSet]=\"fontSet\" *ngIf=\"!avatar\" matListItemIcon>{{item.icon}}</mat-icon>\r\n\t\t\t<span *ngIf=\"!avatar\" matListItemTitle>{{item.title}}</span>\r\n\t\t\t<mat-icon [fontSet]=\"fontSet\" *ngIf=\"avatar\" matListAvatar>{{item.icon}}</mat-icon>\r\n\t\t\t<h3 *ngIf=\"avatar\" matLine>{{item.title}}</h3>\r\n\t\t\t<p *ngIf=\"avatar && item.description\" matLine> {{item.description}} </p>\r\n\t\t</a>\r\n\t\t<mat-divider *ngIf=\"item.divider && !avatar\"></mat-divider>\r\n\t\t<mat-divider [inset]=\"avatar\" *ngIf=\"!item.divider && avatar && !last\"></mat-divider>\r\n\t</ng-template>\r\n</mat-nav-list>" }]
         }], propDecorators: { items: [{
                 type: Input
             }], activeExact: [{
                 type: Input
+            }], fontSet: [{
+                type: Input
             }], avatar: [{
                 type: Input
             }], onClick: [{
                 type: Output,
                 args: ['click']
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jZGsvc3JjL2xpYi9tZW51L2NvbXBvbmVudHMvbWVudS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jZGsvc3JjL2xpYi9tZW51L2NvbXBvbmVudHMvbWVudS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7O0FBUXZFLE1BQU0sT0FBTyxlQUFlO0lBTDVCO1FBT0M7O1dBRUc7UUFDTSxVQUFLLEdBQWUsRUFBRSxDQUFDO1FBRWhDOztXQUVHO1FBQ00sZ0JBQVcsR0FBWSxLQUFLLENBQUM7UUFPdEM7OztVQUdFO1FBQ2UsWUFBTyxHQUFzQixJQUFJLFlBQVksRUFBTyxDQUFDO0tBWXRFO0lBVkE7O09BRUc7SUFDSSxXQUFXLENBQUMsTUFBTTtRQUN4QixJQUFJLE1BQU0sWUFBWSxZQUFZLEVBQUU7WUFDbkMsTUFBTSxDQUFDLElBQUksRUFBRSxDQUFDO1NBQ2Q7YUFBTTtZQUNOLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFBO1NBQ3pCO0lBQ0YsQ0FBQzs7K0hBaENXLGVBQWU7bUhBQWYsZUFBZSx3SkNSNUIsMDNCQVllOzJGREpGLGVBQWU7a0JBTDNCLFNBQVM7K0JBQ0MsU0FBUzs4QkFTVixLQUFLO3NCQUFiLEtBQUs7Z0JBS0csV0FBVztzQkFBbkIsS0FBSztnQkFLRyxNQUFNO3NCQUFkLEtBQUs7Z0JBTVcsT0FBTztzQkFBdkIsTUFBTTt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTWVudUl0ZW0gfSBmcm9tICcuLi9tb2RlbHMvbWVudS1pdGVtJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG5cdHNlbGVjdG9yOiAndmQtbWVudScsXHJcblx0dGVtcGxhdGVVcmw6ICcuL21lbnUuY29tcG9uZW50Lmh0bWwnLFxyXG5cdHN0eWxlVXJsczogWycuL21lbnUuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgVmRNZW51Q29tcG9uZW50IHtcclxuXHJcblx0LyoqXHJcblx0ICogTWVudSBpdGVtc1xyXG5cdCAqL1xyXG5cdEBJbnB1dCgpIGl0ZW1zOiBNZW51SXRlbVtdID0gW107XHJcblxyXG5cdC8qKlxyXG5cdCAqIFRoaXMgd2lsbCBhZGQgdGhlIGNsYXNzZXMgb25seSB3aGVuIHRoZSB1cmwgbWF0Y2hlcyB0aGUgbGluayBleGFjdGx5LlxyXG5cdCAqL1xyXG5cdEBJbnB1dCgpIGFjdGl2ZUV4YWN0OiBib29sZWFuID0gZmFsc2U7XHJcblxyXG5cdC8qKlxyXG5cdCAqIEl0ZW1zIHdpdGggYXZhdGFyc1xyXG5cdCAqL1xyXG5cdEBJbnB1dCgpIGF2YXRhcjogYm9vbGVhbjtcclxuXHJcblx0LyoqXHJcblx0KiBjbGljaz86IGZ1bmN0aW9uXHJcblx0KiBFdmVudCBlbWl0dGVkIHdoZW4gYSBtZW51IGl0ZW0gaXMgY2xpY2tlZC5cclxuXHQqL1xyXG5cdEBPdXRwdXQoJ2NsaWNrJykgb25DbGljazogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcclxuXHJcblx0LyoqXHJcblx0ICogRXZlbnQgZW1pdHRlZCB3aGVuIGEgbWVuaSBpdGVtIGlzIGNsaWNrZWQuXHJcblx0ICovXHJcblx0cHVibGljIGl0ZW1DbGlja2VkKCRldmVudCk6IHZvaWQge1xyXG5cdFx0aWYgKCRldmVudCBpbnN0YW5jZW9mIEV2ZW50RW1pdHRlcikge1xyXG5cdFx0XHQkZXZlbnQuZW1pdCgpO1xyXG5cdFx0fSBlbHNlIHtcclxuXHRcdFx0dGhpcy5vbkNsaWNrLmVtaXQoJGV2ZW50KVxyXG5cdFx0fVxyXG5cdH1cclxufSIsIjxtYXQtbmF2LWxpc3Q+XHJcblx0PG5nLXRlbXBsYXRlIGxldC1pdGVtIGxldC1sYXN0PVwibGFzdFwiIG5nRm9yIFtuZ0Zvck9mXT1cIml0ZW1zXCI+XHJcblx0XHQ8YSBtYXQtbGlzdC1pdGVtICpuZ0lmPVwiaXRlbS5lbmFibGVkXCIgW3JvdXRlckxpbmtdPVwiaXRlbS5wYXRoXCIgW3JvdXRlckxpbmtBY3RpdmVdPVwiWydhY3RpdmUnXVwiIFtyb3V0ZXJMaW5rQWN0aXZlT3B0aW9uc109XCJ7ZXhhY3Q6aXRlbS5hY3RpdmVFeGFjdH1cIiAoY2xpY2spPVwiaXRlbUNsaWNrZWQoaXRlbS5ldmVudD9pdGVtLmV2ZW50OiRldmVudClcIj5cclxuXHRcdFx0PG1hdC1pY29uICpuZ0lmPVwiIWF2YXRhclwiIG1hdExpc3RJdGVtSWNvbj57e2l0ZW0uaWNvbn19PC9tYXQtaWNvbj5cclxuXHRcdFx0PHNwYW4gKm5nSWY9XCIhYXZhdGFyXCIgbWF0TGlzdEl0ZW1UaXRsZT57e2l0ZW0udGl0bGV9fTwvc3Bhbj5cclxuXHRcdFx0PG1hdC1pY29uICpuZ0lmPVwiYXZhdGFyXCIgbWF0TGlzdEF2YXRhcj57e2l0ZW0uaWNvbn19PC9tYXQtaWNvbj5cclxuXHRcdFx0PGgzICpuZ0lmPVwiYXZhdGFyXCIgbWF0TGluZT57e2l0ZW0udGl0bGV9fTwvaDM+XHJcblx0XHRcdDxwICpuZ0lmPVwiYXZhdGFyICYmIGl0ZW0uZGVzY3JpcHRpb25cIiBtYXRMaW5lPiB7e2l0ZW0uZGVzY3JpcHRpb259fSA8L3A+XHJcblx0XHQ8L2E+XHJcblx0XHQ8bWF0LWRpdmlkZXIgKm5nSWY9XCJpdGVtLmRpdmlkZXIgJiYgIWF2YXRhclwiPjwvbWF0LWRpdmlkZXI+XHJcblx0XHQ8bWF0LWRpdmlkZXIgW2luc2V0XT1cImF2YXRhclwiICpuZ0lmPVwiIWl0ZW0uZGl2aWRlciAmJiBhdmF0YXIgJiYgIWxhc3RcIj48L21hdC1kaXZpZGVyPlxyXG5cdDwvbmctdGVtcGxhdGU+XHJcbjwvbWF0LW5hdi1saXN0PiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jZGsvc3JjL2xpYi9tZW51L2NvbXBvbmVudHMvbWVudS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jZGsvc3JjL2xpYi9tZW51L2NvbXBvbmVudHMvbWVudS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7O0FBUXZFLE1BQU0sT0FBTyxlQUFlO0lBTDVCO1FBT0M7O1dBRUc7UUFFSSxVQUFLLEdBQWUsRUFBRSxDQUFDO1FBRTlCOztXQUVHO1FBRUksZ0JBQVcsR0FBWSxLQUFLLENBQUM7UUFFcEM7O1dBRUc7UUFFSSxZQUFPLEdBQVcseUJBQXlCLENBQUM7UUFRbkQ7OztVQUdFO1FBRUssWUFBTyxHQUFzQixJQUFJLFlBQVksRUFBTyxDQUFDO0tBWTVEO0lBVkE7O09BRUc7SUFDSSxXQUFXLENBQUMsTUFBTTtRQUN4QixJQUFJLE1BQU0sWUFBWSxZQUFZLEVBQUU7WUFDbkMsTUFBTSxDQUFDLElBQUksRUFBRSxDQUFDO1NBQ2Q7YUFBTTtZQUNOLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFBO1NBQ3pCO0lBQ0YsQ0FBQzs7K0hBMUNXLGVBQWU7bUhBQWYsZUFBZSw0S0NSNUIsczZCQVllOzJGREpGLGVBQWU7a0JBTDNCLFNBQVM7K0JBQ0MsU0FBUzs4QkFVWixLQUFLO3NCQURYLEtBQUs7Z0JBT0MsV0FBVztzQkFEakIsS0FBSztnQkFPQyxPQUFPO3NCQURiLEtBQUs7Z0JBT0MsTUFBTTtzQkFEWixLQUFLO2dCQVFDLE9BQU87c0JBRGIsTUFBTTt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTWVudUl0ZW0gfSBmcm9tICcuLi9tb2RlbHMvbWVudS1pdGVtJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG5cdHNlbGVjdG9yOiAndmQtbWVudScsXHJcblx0dGVtcGxhdGVVcmw6ICcuL21lbnUuY29tcG9uZW50Lmh0bWwnLFxyXG5cdHN0eWxlVXJsczogWycuL21lbnUuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgVmRNZW51Q29tcG9uZW50IHtcclxuXHJcblx0LyoqXHJcblx0ICogTWVudSBpdGVtc1xyXG5cdCAqL1xyXG5cdEBJbnB1dCgpXHJcblx0cHVibGljIGl0ZW1zOiBNZW51SXRlbVtdID0gW107XHJcblxyXG5cdC8qKlxyXG5cdCAqIFRoaXMgd2lsbCBhZGQgdGhlIGNsYXNzZXMgb25seSB3aGVuIHRoZSB1cmwgbWF0Y2hlcyB0aGUgbGluayBleGFjdGx5LlxyXG5cdCAqL1xyXG5cdEBJbnB1dCgpXHJcblx0cHVibGljIGFjdGl2ZUV4YWN0OiBib29sZWFuID0gZmFsc2U7XHJcblxyXG5cdC8qKlxyXG5cdCAqIEljb25zIGZvbnQgc2V0XHJcblx0ICovXHJcblx0QElucHV0KClcclxuXHRwdWJsaWMgZm9udFNldDogc3RyaW5nID0gJ21hdGVyaWFsLWljb25zLW91dGxpbmVkJztcclxuXHJcblx0LyoqXHJcblx0ICogSXRlbXMgd2l0aCBhdmF0YXJzXHJcblx0ICovXHJcblx0QElucHV0KClcclxuXHRwdWJsaWMgYXZhdGFyOiBib29sZWFuO1xyXG5cclxuXHQvKipcclxuXHQqIGNsaWNrPzogZnVuY3Rpb25cclxuXHQqIEV2ZW50IGVtaXR0ZWQgd2hlbiBhIG1lbnUgaXRlbSBpcyBjbGlja2VkLlxyXG5cdCovXHJcblx0QE91dHB1dCgnY2xpY2snKVxyXG5cdHB1YmxpYyBvbkNsaWNrOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xyXG5cclxuXHQvKipcclxuXHQgKiBFdmVudCBlbWl0dGVkIHdoZW4gYSBtZW5pIGl0ZW0gaXMgY2xpY2tlZC5cclxuXHQgKi9cclxuXHRwdWJsaWMgaXRlbUNsaWNrZWQoJGV2ZW50KTogdm9pZCB7XHJcblx0XHRpZiAoJGV2ZW50IGluc3RhbmNlb2YgRXZlbnRFbWl0dGVyKSB7XHJcblx0XHRcdCRldmVudC5lbWl0KCk7XHJcblx0XHR9IGVsc2Uge1xyXG5cdFx0XHR0aGlzLm9uQ2xpY2suZW1pdCgkZXZlbnQpXHJcblx0XHR9XHJcblx0fVxyXG59IiwiPG1hdC1uYXYtbGlzdD5cclxuXHQ8bmctdGVtcGxhdGUgbGV0LWl0ZW0gbGV0LWxhc3Q9XCJsYXN0XCIgbmdGb3IgW25nRm9yT2ZdPVwiaXRlbXNcIj5cclxuXHRcdDxhIG1hdC1saXN0LWl0ZW0gKm5nSWY9XCJpdGVtLmVuYWJsZWRcIiBbcm91dGVyTGlua109XCJpdGVtLnBhdGhcIiBbcm91dGVyTGlua0FjdGl2ZV09XCJbJ2FjdGl2ZSddXCIgW3JvdXRlckxpbmtBY3RpdmVPcHRpb25zXT1cIntleGFjdDppdGVtLmFjdGl2ZUV4YWN0fVwiIChjbGljayk9XCJpdGVtQ2xpY2tlZChpdGVtLmV2ZW50P2l0ZW0uZXZlbnQ6JGV2ZW50KVwiPlxyXG5cdFx0XHQ8bWF0LWljb24gW2ZvbnRTZXRdPVwiZm9udFNldFwiICpuZ0lmPVwiIWF2YXRhclwiIG1hdExpc3RJdGVtSWNvbj57e2l0ZW0uaWNvbn19PC9tYXQtaWNvbj5cclxuXHRcdFx0PHNwYW4gKm5nSWY9XCIhYXZhdGFyXCIgbWF0TGlzdEl0ZW1UaXRsZT57e2l0ZW0udGl0bGV9fTwvc3Bhbj5cclxuXHRcdFx0PG1hdC1pY29uIFtmb250U2V0XT1cImZvbnRTZXRcIiAqbmdJZj1cImF2YXRhclwiIG1hdExpc3RBdmF0YXI+e3tpdGVtLmljb259fTwvbWF0LWljb24+XHJcblx0XHRcdDxoMyAqbmdJZj1cImF2YXRhclwiIG1hdExpbmU+e3tpdGVtLnRpdGxlfX08L2gzPlxyXG5cdFx0XHQ8cCAqbmdJZj1cImF2YXRhciAmJiBpdGVtLmRlc2NyaXB0aW9uXCIgbWF0TGluZT4ge3tpdGVtLmRlc2NyaXB0aW9ufX0gPC9wPlxyXG5cdFx0PC9hPlxyXG5cdFx0PG1hdC1kaXZpZGVyICpuZ0lmPVwiaXRlbS5kaXZpZGVyICYmICFhdmF0YXJcIj48L21hdC1kaXZpZGVyPlxyXG5cdFx0PG1hdC1kaXZpZGVyIFtpbnNldF09XCJhdmF0YXJcIiAqbmdJZj1cIiFpdGVtLmRpdmlkZXIgJiYgYXZhdGFyICYmICFsYXN0XCI+PC9tYXQtZGl2aWRlcj5cclxuXHQ8L25nLXRlbXBsYXRlPlxyXG48L21hdC1uYXYtbGlzdD4iXX0=

package/fesm2015/messaia-cdk.mjs

@@ -2364,6 +2364,10 @@ class VdMenuComponent {
          * This will add the classes only when the url matches the link exactly.
          */
         this.activeExact = false;
+        /**
+         * Icons font set
+         */
+        this.fontSet = 'material-icons-outlined';
         /**
         * click?: function
         * Event emitted when a menu item is clicked.
@@ -2383,14 +2387,16 @@ class VdMenuComponent {
     }
 }
 /** @nocollapse */ VdMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: VdMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: VdMenuComponent, selector: "vd-menu", inputs: { items: "items", activeExact: "activeExact", avatar: "avatar" }, outputs: { onClick: "click" }, ngImport: i0, template: "<mat-nav-list>\r\n\t<ng-template let-item let-last=\"last\" ngFor [ngForOf]=\"items\">\r\n\t\t<a mat-list-item *ngIf=\"item.enabled\" [routerLink]=\"item.path\" [routerLinkActive]=\"['active']\" [routerLinkActiveOptions]=\"{exact:item.activeExact}\" (click)=\"itemClicked(item.event?item.event:$event)\">\r\n\t\t\t<mat-icon *ngIf=\"!avatar\" matListItemIcon>{{item.icon}}</mat-icon>\r\n\t\t\t<span *ngIf=\"!avatar\" matListItemTitle>{{item.title}}</span>\r\n\t\t\t<mat-icon *ngIf=\"avatar\" matListAvatar>{{item.icon}}</mat-icon>\r\n\t\t\t<h3 *ngIf=\"avatar\" matLine>{{item.title}}</h3>\r\n\t\t\t<p *ngIf=\"avatar && item.description\" matLine> {{item.description}} </p>\r\n\t\t</a>\r\n\t\t<mat-divider *ngIf=\"item.divider && !avatar\"></mat-divider>\r\n\t\t<mat-divider [inset]=\"avatar\" *ngIf=\"!item.divider && avatar && !last\"></mat-divider>\r\n\t</ng-template>\r\n</mat-nav-list>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i4.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4.MatListItemTitle, selector: "[matListItemTitle]" }] });
+/** @nocollapse */ VdMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: VdMenuComponent, selector: "vd-menu", inputs: { items: "items", activeExact: "activeExact", fontSet: "fontSet", avatar: "avatar" }, outputs: { onClick: "click" }, ngImport: i0, template: "<mat-nav-list>\r\n\t<ng-template let-item let-last=\"last\" ngFor [ngForOf]=\"items\">\r\n\t\t<a mat-list-item *ngIf=\"item.enabled\" [routerLink]=\"item.path\" [routerLinkActive]=\"['active']\" [routerLinkActiveOptions]=\"{exact:item.activeExact}\" (click)=\"itemClicked(item.event?item.event:$event)\">\r\n\t\t\t<mat-icon [fontSet]=\"fontSet\" *ngIf=\"!avatar\" matListItemIcon>{{item.icon}}</mat-icon>\r\n\t\t\t<span *ngIf=\"!avatar\" matListItemTitle>{{item.title}}</span>\r\n\t\t\t<mat-icon [fontSet]=\"fontSet\" *ngIf=\"avatar\" matListAvatar>{{item.icon}}</mat-icon>\r\n\t\t\t<h3 *ngIf=\"avatar\" matLine>{{item.title}}</h3>\r\n\t\t\t<p *ngIf=\"avatar && item.description\" matLine> {{item.description}} </p>\r\n\t\t</a>\r\n\t\t<mat-divider *ngIf=\"item.divider && !avatar\"></mat-divider>\r\n\t\t<mat-divider [inset]=\"avatar\" *ngIf=\"!item.divider && avatar && !last\"></mat-divider>\r\n\t</ng-template>\r\n</mat-nav-list>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i4.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4.MatListItemTitle, selector: "[matListItemTitle]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: VdMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vd-menu', template: "<mat-nav-list>\r\n\t<ng-template let-item let-last=\"last\" ngFor [ngForOf]=\"items\">\r\n\t\t<a mat-list-item *ngIf=\"item.enabled\" [routerLink]=\"item.path\" [routerLinkActive]=\"['active']\" [routerLinkActiveOptions]=\"{exact:item.activeExact}\" (click)=\"itemClicked(item.event?item.event:$event)\">\r\n\t\t\t<mat-icon *ngIf=\"!avatar\" matListItemIcon>{{item.icon}}</mat-icon>\r\n\t\t\t<span *ngIf=\"!avatar\" matListItemTitle>{{item.title}}</span>\r\n\t\t\t<mat-icon *ngIf=\"avatar\" matListAvatar>{{item.icon}}</mat-icon>\r\n\t\t\t<h3 *ngIf=\"avatar\" matLine>{{item.title}}</h3>\r\n\t\t\t<p *ngIf=\"avatar && item.description\" matLine> {{item.description}} </p>\r\n\t\t</a>\r\n\t\t<mat-divider *ngIf=\"item.divider && !avatar\"></mat-divider>\r\n\t\t<mat-divider [inset]=\"avatar\" *ngIf=\"!item.divider && avatar && !last\"></mat-divider>\r\n\t</ng-template>\r\n</mat-nav-list>" }]
+            args: [{ selector: 'vd-menu', template: "<mat-nav-list>\r\n\t<ng-template let-item let-last=\"last\" ngFor [ngForOf]=\"items\">\r\n\t\t<a mat-list-item *ngIf=\"item.enabled\" [routerLink]=\"item.path\" [routerLinkActive]=\"['active']\" [routerLinkActiveOptions]=\"{exact:item.activeExact}\" (click)=\"itemClicked(item.event?item.event:$event)\">\r\n\t\t\t<mat-icon [fontSet]=\"fontSet\" *ngIf=\"!avatar\" matListItemIcon>{{item.icon}}</mat-icon>\r\n\t\t\t<span *ngIf=\"!avatar\" matListItemTitle>{{item.title}}</span>\r\n\t\t\t<mat-icon [fontSet]=\"fontSet\" *ngIf=\"avatar\" matListAvatar>{{item.icon}}</mat-icon>\r\n\t\t\t<h3 *ngIf=\"avatar\" matLine>{{item.title}}</h3>\r\n\t\t\t<p *ngIf=\"avatar && item.description\" matLine> {{item.description}} </p>\r\n\t\t</a>\r\n\t\t<mat-divider *ngIf=\"item.divider && !avatar\"></mat-divider>\r\n\t\t<mat-divider [inset]=\"avatar\" *ngIf=\"!item.divider && avatar && !last\"></mat-divider>\r\n\t</ng-template>\r\n</mat-nav-list>" }]
         }], propDecorators: { items: [{
                 type: Input
             }], activeExact: [{
                 type: Input
+            }], fontSet: [{
+                type: Input
             }], avatar: [{
                 type: Input
             }], onClick: [{
@@ -7494,7 +7500,7 @@ class VdLayoutManageListComponent {
     close() { return this.sidenav.close(); }
 }
 /** @nocollapse */ VdLayoutManageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: VdLayoutManageListComponent, deps: [{ token: VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdLayoutManageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: VdLayoutManageListComponent, selector: "vd-layout-manage-list", inputs: { title: "title", closable: "closable", menuItems: "menuItems", mode: "mode", sideGt: "sideGt", opened: "opened", openedGt: "openedGt", sidenavWidth: "sidenavWidth", sidenavGtXsWidth: "sidenavGtXsWidth" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container fullscreen class=\"vd-layout-manage-list\">\r\n\t<!-- #region Side nav -->\r\n\t<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\">\r\n\t\t<!-- #region Nav list toolbar -->\r\n\t\t<mat-toolbar dense *ngIf=\"title\">\r\n\t\t\t<span>{{title}}</span>\r\n\t\t\t<span flex></span>\r\n\t\t\t<button mat-icon-button (click)=\"close()\" *ngIf=\"closable\">\r\n\t\t\t\t<mat-icon>menu_open</mat-icon>\r\n\t\t\t</button>\r\n\t\t</mat-toolbar>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom title toolbar -->\r\n\t\t<ng-content select=\"mat-toolbar[vd-sidenav-content]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<div class=\"vd-layout-manage-list-sidenav\" cdkScrollable>\r\n\t\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t\t\t<ng-content select=\"vd-menu\"></ng-content>\r\n\t\t\t<vd-menu [items]=\"menuItems\" *ngIf=\"menuItems\"></vd-menu>\r\n\t\t</div>\r\n\t</mat-sidenav>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Main content -->\r\n\t<div class=\"vd-layout-manage-list-main\">\r\n\t\t<!-- #region Toolbar projection -->\r\n\t\t<ng-content select=\"mat-toolbar\"></ng-content>\r\n\t\t<ng-content select=\"vd-list-toolbar\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Scrollable content -->\r\n\t\t<div class=\"vd-layout-manage-list-content\" cdkScrollable>\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</div>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Footer content -->\r\n\t\t<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\t</div>\r\n\t<!-- #endregion -->\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list{flex:1}:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opened,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opening,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closed,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closing{box-shadow:0 1px 3px #0003}:host mat-sidenav-container.vd-layout-manage-list ::ng-deep .mat-drawer-inner-container{overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list ::ng-deep .mat-drawer-inner-container .mat-mdc-list-item .mat-mdc-list-item-title{overflow:hidden;text-overflow:ellipsis;display:inline}:host .vd-layout-manage-list-sidenav{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-manage-list-main{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;flex-direction:column;box-sizing:border-box;display:flex}:host .vd-layout-manage-list-main .vd-layout-manage-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>mat-sidenav{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}:host ::ng-deep .mat-toolbar{font-weight:400;display:flex;align-items:center}:host ::ng-deep .mat-toolbar *{overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .mat-toolbar>.mdc-icon-button{margin-right:-2px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i4$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i4$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i5$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: VdMenuComponent, selector: "vd-menu", inputs: ["items", "activeExact", "avatar"], outputs: ["click"] }] });
+/** @nocollapse */ VdLayoutManageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: VdLayoutManageListComponent, selector: "vd-layout-manage-list", inputs: { title: "title", closable: "closable", menuItems: "menuItems", mode: "mode", sideGt: "sideGt", opened: "opened", openedGt: "openedGt", sidenavWidth: "sidenavWidth", sidenavGtXsWidth: "sidenavGtXsWidth" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container fullscreen class=\"vd-layout-manage-list\">\r\n\t<!-- #region Side nav -->\r\n\t<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\">\r\n\t\t<!-- #region Nav list toolbar -->\r\n\t\t<mat-toolbar dense *ngIf=\"title\">\r\n\t\t\t<span>{{title}}</span>\r\n\t\t\t<span flex></span>\r\n\t\t\t<button mat-icon-button (click)=\"close()\" *ngIf=\"closable\">\r\n\t\t\t\t<mat-icon>menu_open</mat-icon>\r\n\t\t\t</button>\r\n\t\t</mat-toolbar>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom title toolbar -->\r\n\t\t<ng-content select=\"mat-toolbar[vd-sidenav-content]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<div class=\"vd-layout-manage-list-sidenav\" cdkScrollable>\r\n\t\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t\t\t<ng-content select=\"vd-menu\"></ng-content>\r\n\t\t\t<vd-menu [items]=\"menuItems\" *ngIf=\"menuItems\"></vd-menu>\r\n\t\t</div>\r\n\t</mat-sidenav>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Main content -->\r\n\t<div class=\"vd-layout-manage-list-main\">\r\n\t\t<!-- #region Toolbar projection -->\r\n\t\t<ng-content select=\"mat-toolbar\"></ng-content>\r\n\t\t<ng-content select=\"vd-list-toolbar\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Scrollable content -->\r\n\t\t<div class=\"vd-layout-manage-list-content\" cdkScrollable>\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</div>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Footer content -->\r\n\t\t<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\t</div>\r\n\t<!-- #endregion -->\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list{flex:1}:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opened,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opening,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closed,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closing{box-shadow:0 1px 3px #0003}:host mat-sidenav-container.vd-layout-manage-list ::ng-deep .mat-drawer-inner-container{overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list ::ng-deep .mat-drawer-inner-container .mat-mdc-list-item .mat-mdc-list-item-title{overflow:hidden;text-overflow:ellipsis;display:inline}:host .vd-layout-manage-list-sidenav{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-manage-list-main{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;flex-direction:column;box-sizing:border-box;display:flex}:host .vd-layout-manage-list-main .vd-layout-manage-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>mat-sidenav{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}:host ::ng-deep .mat-toolbar{font-weight:400;display:flex;align-items:center}:host ::ng-deep .mat-toolbar *{overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .mat-toolbar>.mdc-icon-button{margin-right:-2px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i4$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i4$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i5$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: VdMenuComponent, selector: "vd-menu", inputs: ["items", "activeExact", "fontSet", "avatar"], outputs: ["click"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: VdLayoutManageListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-layout-manage-list', template: "<mat-sidenav-container fullscreen class=\"vd-layout-manage-list\">\r\n\t<!-- #region Side nav -->\r\n\t<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\">\r\n\t\t<!-- #region Nav list toolbar -->\r\n\t\t<mat-toolbar dense *ngIf=\"title\">\r\n\t\t\t<span>{{title}}</span>\r\n\t\t\t<span flex></span>\r\n\t\t\t<button mat-icon-button (click)=\"close()\" *ngIf=\"closable\">\r\n\t\t\t\t<mat-icon>menu_open</mat-icon>\r\n\t\t\t</button>\r\n\t\t</mat-toolbar>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom title toolbar -->\r\n\t\t<ng-content select=\"mat-toolbar[vd-sidenav-content]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<div class=\"vd-layout-manage-list-sidenav\" cdkScrollable>\r\n\t\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t\t\t<ng-content select=\"vd-menu\"></ng-content>\r\n\t\t\t<vd-menu [items]=\"menuItems\" *ngIf=\"menuItems\"></vd-menu>\r\n\t\t</div>\r\n\t</mat-sidenav>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Main content -->\r\n\t<div class=\"vd-layout-manage-list-main\">\r\n\t\t<!-- #region Toolbar projection -->\r\n\t\t<ng-content select=\"mat-toolbar\"></ng-content>\r\n\t\t<ng-content select=\"vd-list-toolbar\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Scrollable content -->\r\n\t\t<div class=\"vd-layout-manage-list-content\" cdkScrollable>\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</div>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Footer content -->\r\n\t\t<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\t</div>\r\n\t<!-- #endregion -->\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list{flex:1}:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opened,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opening,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closed,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closing{box-shadow:0 1px 3px #0003}:host mat-sidenav-container.vd-layout-manage-list ::ng-deep .mat-drawer-inner-container{overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list ::ng-deep .mat-drawer-inner-container .mat-mdc-list-item .mat-mdc-list-item-title{overflow:hidden;text-overflow:ellipsis;display:inline}:host .vd-layout-manage-list-sidenav{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-manage-list-main{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;flex-direction:column;box-sizing:border-box;display:flex}:host .vd-layout-manage-list-main .vd-layout-manage-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>mat-sidenav{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}:host ::ng-deep .mat-toolbar{font-weight:400;display:flex;align-items:center}:host ::ng-deep .mat-toolbar *{overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .mat-toolbar>.mdc-icon-button{margin-right:-2px}\n"] }]