@covalent/core
Version:
Core Teradata UI Platform for layouts, icons, custom components and themes. This should be added as a dependency for any project that wants to use layouts, icons and themes for Angular Material.
93 lines • 15.1 kB
JavaScript
import { Component, Input, ViewChild } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/sidenav";
import * as i2 from "@angular/cdk/scrolling";
export class TdLayoutManageListComponent {
constructor() {
/**
* mode?: 'side', 'push' or 'over'
*
* The mode or styling of the sidenav.
* Defaults to "side".
* See "MatSidenav" documentation for more info.
*
* https://github.com/angular/material2/tree/main/src/lib/sidenav
*/
this.mode = 'side';
/**
* opened?: boolean
*
* Whether or not the sidenav is opened. Use this binding to open/close the sidenav.
* Defaults to "true".
*
* See "MatSidenav" documentation for more info.
*
* https://github.com/angular/material2/tree/main/src/lib/sidenav
*/
this.opened = true;
/**
* sidenavWidth?: string
*
* Sets the "width" of the sidenav in either "px" or "%"
* Defaults to "257px".
*
* https://github.com/angular/material2/tree/main/src/lib/sidenav
*/
this.sidenavWidth = '257px';
/**
* containerAutosize?: boolean
*
* Sets "autosize" of the sidenav-container.
* Defaults to "false".
*
* See documentation for more info and potential performance risks.
*
* https://github.com/angular/material2/blob/main/src/lib/sidenav/sidenav.md#resizing-an-open-sidenav
*/
this.containerAutosize = false;
}
/**
* Checks if `ESC` should close the sidenav
* Should only close it for `push` and `over` modes
*/
get disableClose() {
return this.mode === 'side';
}
/**
* Proxy toggle method to access sidenav from outside (from td-layout template).
*/
toggle() {
return this.sidenav.toggle(!this.sidenav.opened);
}
/**
* Proxy open method to access sidenav from outside (from td-layout template).
*/
open() {
return this.sidenav.open();
}
/**
* Proxy close method to access sidenav from outside (from td-layout template).
*/
close() {
return this.sidenav.close();
}
}
TdLayoutManageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutManageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
TdLayoutManageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdLayoutManageListComponent, selector: "td-layout-manage-list", inputs: { mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth", containerAutosize: "containerAutosize" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container\n fullscreen\n [autosize]=\"containerAutosize\"\n class=\"td-layout-manage-list\"\n>\n <mat-sidenav\n #sidenav\n position=\"start\"\n [mode]=\"mode\"\n [opened]=\"opened\"\n [disableClose]=\"disableClose\"\n [style.max-width]=\"sidenavWidth\"\n [style.min-width]=\"sidenavWidth\"\n >\n <ng-content select=\"mat-toolbar[td-sidenav-content]\"></ng-content>\n <div class=\"td-layout-manage-list-sidenav\" cdkScrollable>\n <ng-content select=\"[td-sidenav-content]\"></ng-content>\n </div>\n </mat-sidenav>\n <div class=\"td-layout-manage-list-main\">\n <ng-content select=\"mat-toolbar\"></ng-content>\n <div class=\"td-layout-manage-list-content\" cdkScrollable>\n <ng-content></ng-content>\n </div>\n <ng-content select=\"td-layout-footer-inner\"></ng-content>\n </div>\n</mat-sidenav-container>\n", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.td-layout-manage-list{flex:1}:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-opened,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-opening,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-closed,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-closing{box-shadow:0 1px 3px #0003}:host .td-layout-manage-list-sidenav{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-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 .td-layout-manage-list-main .td-layout-manage-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host ::ng-deep mat-sidenav-container.td-layout-manage-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container{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-nav-list a[mat-list-item] .mat-list-item-content{font-size:14px}:host ::ng-deep .mat-toolbar{font-weight:400}\n"], components: [{ type: i1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }], directives: [{ type: i2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutManageListComponent, decorators: [{
type: Component,
args: [{ selector: 'td-layout-manage-list', template: "<mat-sidenav-container\n fullscreen\n [autosize]=\"containerAutosize\"\n class=\"td-layout-manage-list\"\n>\n <mat-sidenav\n #sidenav\n position=\"start\"\n [mode]=\"mode\"\n [opened]=\"opened\"\n [disableClose]=\"disableClose\"\n [style.max-width]=\"sidenavWidth\"\n [style.min-width]=\"sidenavWidth\"\n >\n <ng-content select=\"mat-toolbar[td-sidenav-content]\"></ng-content>\n <div class=\"td-layout-manage-list-sidenav\" cdkScrollable>\n <ng-content select=\"[td-sidenav-content]\"></ng-content>\n </div>\n </mat-sidenav>\n <div class=\"td-layout-manage-list-main\">\n <ng-content select=\"mat-toolbar\"></ng-content>\n <div class=\"td-layout-manage-list-content\" cdkScrollable>\n <ng-content></ng-content>\n </div>\n <ng-content select=\"td-layout-footer-inner\"></ng-content>\n </div>\n</mat-sidenav-container>\n", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.td-layout-manage-list{flex:1}:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-opened,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-opening,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-closed,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-closing{box-shadow:0 1px 3px #0003}:host .td-layout-manage-list-sidenav{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-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 .td-layout-manage-list-main .td-layout-manage-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host ::ng-deep mat-sidenav-container.td-layout-manage-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container{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-nav-list a[mat-list-item] .mat-list-item-content{font-size:14px}:host ::ng-deep .mat-toolbar{font-weight:400}\n"] }]
}], propDecorators: { sidenav: [{
type: ViewChild,
args: [MatSidenav, { static: true }]
}], mode: [{
type: Input
}], opened: [{
type: Input
}], sidenavWidth: [{
type: Input
}], containerAutosize: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGF5b3V0LW1hbmFnZS1saXN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci9sYXlvdXQvc3JjL2xheW91dC1tYW5hZ2UtbGlzdC9sYXlvdXQtbWFuYWdlLWxpc3QuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9hbmd1bGFyL2xheW91dC9zcmMvbGF5b3V0LW1hbmFnZS1saXN0L2xheW91dC1tYW5hZ2UtbGlzdC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFNUQsT0FBTyxFQUFFLFVBQVUsRUFBeUIsTUFBTSwyQkFBMkIsQ0FBQzs7OztBQVM5RSxNQUFNLE9BQU8sMkJBQTJCO0lBTHhDO1FBUUU7Ozs7Ozs7O1dBUUc7UUFDTSxTQUFJLEdBQTZCLE1BQU0sQ0FBQztRQUVqRDs7Ozs7Ozs7O1dBU0c7UUFDTSxXQUFNLEdBQUcsSUFBSSxDQUFDO1FBRXZCOzs7Ozs7O1dBT0c7UUFDTSxpQkFBWSxHQUFHLE9BQU8sQ0FBQztRQUVoQzs7Ozs7Ozs7O1dBU0c7UUFDTSxzQkFBaUIsR0FBRyxLQUFLLENBQUM7S0E4QnBDO0lBNUJDOzs7T0FHRztJQUNILElBQUksWUFBWTtRQUNkLE9BQU8sSUFBSSxDQUFDLElBQUksS0FBSyxNQUFNLENBQUM7SUFDOUIsQ0FBQztJQUVEOztPQUVHO0lBQ0ksTUFBTTtRQUNYLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQ25ELENBQUM7SUFFRDs7T0FFRztJQUNJLElBQUk7UUFDVCxPQUFPLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDN0IsQ0FBQztJQUVEOztPQUVHO0lBQ0ksS0FBSztRQUNWLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUM5QixDQUFDOzt3SEEzRVUsMkJBQTJCOzRHQUEzQiwyQkFBMkIsd05BQzNCLFVBQVUsOERDWnZCLGkzQkEyQkE7MkZEaEJhLDJCQUEyQjtrQkFMdkMsU0FBUzsrQkFDRSx1QkFBdUI7OEJBS1EsT0FBTztzQkFBL0MsU0FBUzt1QkFBQyxVQUFVLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFO2dCQVc5QixJQUFJO3NCQUFaLEtBQUs7Z0JBWUcsTUFBTTtzQkFBZCxLQUFLO2dCQVVHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBWUcsaUJBQWlCO3NCQUF6QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgVmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IE1hdFNpZGVuYXYsIE1hdERyYXdlclRvZ2dsZVJlc3VsdCB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3NpZGVuYXYnO1xuXG5pbXBvcnQgeyBJTGF5b3V0VG9nZ2xhYmxlIH0gZnJvbSAnLi4vbGF5b3V0LXRvZ2dsZS5jbGFzcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3RkLWxheW91dC1tYW5hZ2UtbGlzdCcsXG4gIHN0eWxlVXJsczogWycuL2xheW91dC1tYW5hZ2UtbGlzdC5jb21wb25lbnQuc2NzcyddLFxuICB0ZW1wbGF0ZVVybDogJy4vbGF5b3V0LW1hbmFnZS1saXN0LmNvbXBvbmVudC5odG1sJyxcbn0pXG5leHBvcnQgY2xhc3MgVGRMYXlvdXRNYW5hZ2VMaXN0Q29tcG9uZW50IGltcGxlbWVudHMgSUxheW91dFRvZ2dsYWJsZSB7XG4gIEBWaWV3Q2hpbGQoTWF0U2lkZW5hdiwgeyBzdGF0aWM6IHRydWUgfSkgc2lkZW5hdiE6IE1hdFNpZGVuYXY7XG5cbiAgLyoqXG4gICAqIG1vZGU/OiAnc2lkZScsICdwdXNoJyBvciAnb3ZlcidcbiAgICpcbiAgICogVGhlIG1vZGUgb3Igc3R5bGluZyBvZiB0aGUgc2lkZW5hdi5cbiAgICogRGVmYXVsdHMgdG8gXCJzaWRlXCIuXG4gICAqIFNlZSBcIk1hdFNpZGVuYXZcIiBkb2N1bWVudGF0aW9uIGZvciBtb3JlIGluZm8uXG4gICAqXG4gICAqIGh0dHBzOi8vZ2l0aHViLmNvbS9hbmd1bGFyL21hdGVyaWFsMi90cmVlL21haW4vc3JjL2xpYi9zaWRlbmF2XG4gICAqL1xuICBASW5wdXQoKSBtb2RlOiAnc2lkZScgfCAncHVzaCcgfCAnb3ZlcicgPSAnc2lkZSc7XG5cbiAgLyoqXG4gICAqIG9wZW5lZD86IGJvb2xlYW5cbiAgICpcbiAgICogV2hldGhlciBvciBub3QgdGhlIHNpZGVuYXYgaXMgb3BlbmVkLiBVc2UgdGhpcyBiaW5kaW5nIHRvIG9wZW4vY2xvc2UgdGhlIHNpZGVuYXYuXG4gICAqIERlZmF1bHRzIHRvIFwidHJ1ZVwiLlxuICAgKlxuICAgKiBTZWUgXCJNYXRTaWRlbmF2XCIgZG9jdW1lbnRhdGlvbiBmb3IgbW9yZSBpbmZvLlxuICAgKlxuICAgKiBodHRwczovL2dpdGh1Yi5jb20vYW5ndWxhci9tYXRlcmlhbDIvdHJlZS9tYWluL3NyYy9saWIvc2lkZW5hdlxuICAgKi9cbiAgQElucHV0KCkgb3BlbmVkID0gdHJ1ZTtcblxuICAvKipcbiAgICogc2lkZW5hdldpZHRoPzogc3RyaW5nXG4gICAqXG4gICAqIFNldHMgdGhlIFwid2lkdGhcIiBvZiB0aGUgc2lkZW5hdiBpbiBlaXRoZXIgXCJweFwiIG9yIFwiJVwiXG4gICAqIERlZmF1bHRzIHRvIFwiMjU3cHhcIi5cbiAgICpcbiAgICogaHR0cHM6Ly9naXRodWIuY29tL2FuZ3VsYXIvbWF0ZXJpYWwyL3RyZWUvbWFpbi9zcmMvbGliL3NpZGVuYXZcbiAgICovXG4gIEBJbnB1dCgpIHNpZGVuYXZXaWR0aCA9ICcyNTdweCc7XG5cbiAgLyoqXG4gICAqIGNvbnRhaW5lckF1dG9zaXplPzogYm9vbGVhblxuICAgKlxuICAgKiBTZXRzIFwiYXV0b3NpemVcIiBvZiB0aGUgc2lkZW5hdi1jb250YWluZXIuXG4gICAqIERlZmF1bHRzIHRvIFwiZmFsc2VcIi5cbiAgICpcbiAgICogU2VlIGRvY3VtZW50YXRpb24gZm9yIG1vcmUgaW5mbyBhbmQgcG90ZW50aWFsIHBlcmZvcm1hbmNlIHJpc2tzLlxuICAgKlxuICAgKiBodHRwczovL2dpdGh1Yi5jb20vYW5ndWxhci9tYXRlcmlhbDIvYmxvYi9tYWluL3NyYy9saWIvc2lkZW5hdi9zaWRlbmF2Lm1kI3Jlc2l6aW5nLWFuLW9wZW4tc2lkZW5hdlxuICAgKi9cbiAgQElucHV0KCkgY29udGFpbmVyQXV0b3NpemUgPSBmYWxzZTtcblxuICAvKipcbiAgICogQ2hlY2tzIGlmIGBFU0NgIHNob3VsZCBjbG9zZSB0aGUgc2lkZW5hdlxuICAgKiBTaG91bGQgb25seSBjbG9zZSBpdCBmb3IgYHB1c2hgIGFuZCBgb3ZlcmAgbW9kZXNcbiAgICovXG4gIGdldCBkaXNhYmxlQ2xvc2UoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMubW9kZSA9PT0gJ3NpZGUnO1xuICB9XG5cbiAgLyoqXG4gICAqIFByb3h5IHRvZ2dsZSBtZXRob2QgdG8gYWNjZXNzIHNpZGVuYXYgZnJvbSBvdXRzaWRlIChmcm9tIHRkLWxheW91dCB0ZW1wbGF0ZSkuXG4gICAqL1xuICBwdWJsaWMgdG9nZ2xlKCk6IFByb21pc2U8TWF0RHJhd2VyVG9nZ2xlUmVzdWx0PiB7XG4gICAgcmV0dXJuIHRoaXMuc2lkZW5hdi50b2dnbGUoIXRoaXMuc2lkZW5hdi5vcGVuZWQpO1xuICB9XG5cbiAgLyoqXG4gICAqIFByb3h5IG9wZW4gbWV0aG9kIHRvIGFjY2VzcyBzaWRlbmF2IGZyb20gb3V0c2lkZSAoZnJvbSB0ZC1sYXlvdXQgdGVtcGxhdGUpLlxuICAgKi9cbiAgcHVibGljIG9wZW4oKTogUHJvbWlzZTxNYXREcmF3ZXJUb2dnbGVSZXN1bHQ+IHtcbiAgICByZXR1cm4gdGhpcy5zaWRlbmF2Lm9wZW4oKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBQcm94eSBjbG9zZSBtZXRob2QgdG8gYWNjZXNzIHNpZGVuYXYgZnJvbSBvdXRzaWRlIChmcm9tIHRkLWxheW91dCB0ZW1wbGF0ZSkuXG4gICAqL1xuICBwdWJsaWMgY2xvc2UoKTogUHJvbWlzZTxNYXREcmF3ZXJUb2dnbGVSZXN1bHQ+IHtcbiAgICByZXR1cm4gdGhpcy5zaWRlbmF2LmNsb3NlKCk7XG4gIH1cbn1cbiIsIjxtYXQtc2lkZW5hdi1jb250YWluZXJcbiAgZnVsbHNjcmVlblxuICBbYXV0b3NpemVdPVwiY29udGFpbmVyQXV0b3NpemVcIlxuICBjbGFzcz1cInRkLWxheW91dC1tYW5hZ2UtbGlzdFwiXG4+XG4gIDxtYXQtc2lkZW5hdlxuICAgICNzaWRlbmF2XG4gICAgcG9zaXRpb249XCJzdGFydFwiXG4gICAgW21vZGVdPVwibW9kZVwiXG4gICAgW29wZW5lZF09XCJvcGVuZWRcIlxuICAgIFtkaXNhYmxlQ2xvc2VdPVwiZGlzYWJsZUNsb3NlXCJcbiAgICBbc3R5bGUubWF4LXdpZHRoXT1cInNpZGVuYXZXaWR0aFwiXG4gICAgW3N0eWxlLm1pbi13aWR0aF09XCJzaWRlbmF2V2lkdGhcIlxuICA+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwibWF0LXRvb2xiYXJbdGQtc2lkZW5hdi1jb250ZW50XVwiPjwvbmctY29udGVudD5cbiAgICA8ZGl2IGNsYXNzPVwidGQtbGF5b3V0LW1hbmFnZS1saXN0LXNpZGVuYXZcIiBjZGtTY3JvbGxhYmxlPlxuICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW3RkLXNpZGVuYXYtY29udGVudF1cIj48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG4gIDwvbWF0LXNpZGVuYXY+XG4gIDxkaXYgY2xhc3M9XCJ0ZC1sYXlvdXQtbWFuYWdlLWxpc3QtbWFpblwiPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIm1hdC10b29sYmFyXCI+PC9uZy1jb250ZW50PlxuICAgIDxkaXYgY2xhc3M9XCJ0ZC1sYXlvdXQtbWFuYWdlLWxpc3QtY29udGVudFwiIGNka1Njcm9sbGFibGU+XG4gICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwidGQtbGF5b3V0LWZvb3Rlci1pbm5lclwiPjwvbmctY29udGVudD5cbiAgPC9kaXY+XG48L21hdC1zaWRlbmF2LWNvbnRhaW5lcj5cbiJdfQ==