@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.
92 lines • 14.9 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/cdk/scrolling";
import * as i2 from "@angular/material/sidenav";
export class TdLayoutManageListComponent {
sidenav;
/**
* 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
*/
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
*/
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
*/
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
*/
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();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdLayoutManageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.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"], dependencies: [{ kind: "directive", type: i1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGF5b3V0LW1hbmFnZS1saXN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci9sYXlvdXQvc3JjL2xheW91dC1tYW5hZ2UtbGlzdC9sYXlvdXQtbWFuYWdlLWxpc3QuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9hbmd1bGFyL2xheW91dC9zcmMvbGF5b3V0LW1hbmFnZS1saXN0L2xheW91dC1tYW5hZ2UtbGlzdC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFNUQsT0FBTyxFQUFFLFVBQVUsRUFBeUIsTUFBTSwyQkFBMkIsQ0FBQzs7OztBQVM5RSxNQUFNLE9BQU8sMkJBQTJCO0lBQ0csT0FBTyxDQUFjO0lBRTlEOzs7Ozs7OztPQVFHO0lBQ00sSUFBSSxHQUE2QixNQUFNLENBQUM7SUFFakQ7Ozs7Ozs7OztPQVNHO0lBQ00sTUFBTSxHQUFHLElBQUksQ0FBQztJQUV2Qjs7Ozs7OztPQU9HO0lBQ00sWUFBWSxHQUFHLE9BQU8sQ0FBQztJQUVoQzs7Ozs7Ozs7O09BU0c7SUFDTSxpQkFBaUIsR0FBRyxLQUFLLENBQUM7SUFFbkM7OztPQUdHO0lBQ0gsSUFBSSxZQUFZO1FBQ2QsT0FBTyxJQUFJLENBQUMsSUFBSSxLQUFLLE1BQU0sQ0FBQztJQUM5QixDQUFDO0lBRUQ7O09BRUc7SUFDSSxNQUFNO1FBQ1gsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDbkQsQ0FBQztJQUVEOztPQUVHO0lBQ0ksSUFBSTtRQUNULE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUM3QixDQUFDO0lBRUQ7O09BRUc7SUFDSSxLQUFLO1FBQ1YsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQzlCLENBQUM7dUdBM0VVLDJCQUEyQjsyRkFBM0IsMkJBQTJCLHdOQUMzQixVQUFVLDhEQ1p2QixpM0JBMkJBOzsyRkRoQmEsMkJBQTJCO2tCQUx2QyxTQUFTOytCQUNFLHVCQUF1Qjs4QkFLUSxPQUFPO3NCQUEvQyxTQUFTO3VCQUFDLFVBQVUsRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUU7Z0JBVzlCLElBQUk7c0JBQVosS0FBSztnQkFZRyxNQUFNO3NCQUFkLEtBQUs7Z0JBVUcsWUFBWTtzQkFBcEIsS0FBSztnQkFZRyxpQkFBaUI7c0JBQXpCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgTWF0U2lkZW5hdiwgTWF0RHJhd2VyVG9nZ2xlUmVzdWx0IH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvc2lkZW5hdic7XG5cbmltcG9ydCB7IElMYXlvdXRUb2dnbGFibGUgfSBmcm9tICcuLi9sYXlvdXQtdG9nZ2xlLmNsYXNzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndGQtbGF5b3V0LW1hbmFnZS1saXN0JyxcbiAgc3R5bGVVcmxzOiBbJy4vbGF5b3V0LW1hbmFnZS1saXN0LmNvbXBvbmVudC5zY3NzJ10sXG4gIHRlbXBsYXRlVXJsOiAnLi9sYXlvdXQtbWFuYWdlLWxpc3QuY29tcG9uZW50Lmh0bWwnLFxufSlcbmV4cG9ydCBjbGFzcyBUZExheW91dE1hbmFnZUxpc3RDb21wb25lbnQgaW1wbGVtZW50cyBJTGF5b3V0VG9nZ2xhYmxlIHtcbiAgQFZpZXdDaGlsZChNYXRTaWRlbmF2LCB7IHN0YXRpYzogdHJ1ZSB9KSBzaWRlbmF2ITogTWF0U2lkZW5hdjtcblxuICAvKipcbiAgICogbW9kZT86ICdzaWRlJywgJ3B1c2gnIG9yICdvdmVyJ1xuICAgKlxuICAgKiBUaGUgbW9kZSBvciBzdHlsaW5nIG9mIHRoZSBzaWRlbmF2LlxuICAgKiBEZWZhdWx0cyB0byBcInNpZGVcIi5cbiAgICogU2VlIFwiTWF0U2lkZW5hdlwiIGRvY3VtZW50YXRpb24gZm9yIG1vcmUgaW5mby5cbiAgICpcbiAgICogaHR0cHM6Ly9naXRodWIuY29tL2FuZ3VsYXIvbWF0ZXJpYWwyL3RyZWUvbWFpbi9zcmMvbGliL3NpZGVuYXZcbiAgICovXG4gIEBJbnB1dCgpIG1vZGU6ICdzaWRlJyB8ICdwdXNoJyB8ICdvdmVyJyA9ICdzaWRlJztcblxuICAvKipcbiAgICogb3BlbmVkPzogYm9vbGVhblxuICAgKlxuICAgKiBXaGV0aGVyIG9yIG5vdCB0aGUgc2lkZW5hdiBpcyBvcGVuZWQuIFVzZSB0aGlzIGJpbmRpbmcgdG8gb3Blbi9jbG9zZSB0aGUgc2lkZW5hdi5cbiAgICogRGVmYXVsdHMgdG8gXCJ0cnVlXCIuXG4gICAqXG4gICAqIFNlZSBcIk1hdFNpZGVuYXZcIiBkb2N1bWVudGF0aW9uIGZvciBtb3JlIGluZm8uXG4gICAqXG4gICAqIGh0dHBzOi8vZ2l0aHViLmNvbS9hbmd1bGFyL21hdGVyaWFsMi90cmVlL21haW4vc3JjL2xpYi9zaWRlbmF2XG4gICAqL1xuICBASW5wdXQoKSBvcGVuZWQgPSB0cnVlO1xuXG4gIC8qKlxuICAgKiBzaWRlbmF2V2lkdGg/OiBzdHJpbmdcbiAgICpcbiAgICogU2V0cyB0aGUgXCJ3aWR0aFwiIG9mIHRoZSBzaWRlbmF2IGluIGVpdGhlciBcInB4XCIgb3IgXCIlXCJcbiAgICogRGVmYXVsdHMgdG8gXCIyNTdweFwiLlxuICAgKlxuICAgKiBodHRwczovL2dpdGh1Yi5jb20vYW5ndWxhci9tYXRlcmlhbDIvdHJlZS9tYWluL3NyYy9saWIvc2lkZW5hdlxuICAgKi9cbiAgQElucHV0KCkgc2lkZW5hdldpZHRoID0gJzI1N3B4JztcblxuICAvKipcbiAgICogY29udGFpbmVyQXV0b3NpemU/OiBib29sZWFuXG4gICAqXG4gICAqIFNldHMgXCJhdXRvc2l6ZVwiIG9mIHRoZSBzaWRlbmF2LWNvbnRhaW5lci5cbiAgICogRGVmYXVsdHMgdG8gXCJmYWxzZVwiLlxuICAgKlxuICAgKiBTZWUgZG9jdW1lbnRhdGlvbiBmb3IgbW9yZSBpbmZvIGFuZCBwb3RlbnRpYWwgcGVyZm9ybWFuY2Ugcmlza3MuXG4gICAqXG4gICAqIGh0dHBzOi8vZ2l0aHViLmNvbS9hbmd1bGFyL21hdGVyaWFsMi9ibG9iL21haW4vc3JjL2xpYi9zaWRlbmF2L3NpZGVuYXYubWQjcmVzaXppbmctYW4tb3Blbi1zaWRlbmF2XG4gICAqL1xuICBASW5wdXQoKSBjb250YWluZXJBdXRvc2l6ZSA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBDaGVja3MgaWYgYEVTQ2Agc2hvdWxkIGNsb3NlIHRoZSBzaWRlbmF2XG4gICAqIFNob3VsZCBvbmx5IGNsb3NlIGl0IGZvciBgcHVzaGAgYW5kIGBvdmVyYCBtb2Rlc1xuICAgKi9cbiAgZ2V0IGRpc2FibGVDbG9zZSgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5tb2RlID09PSAnc2lkZSc7XG4gIH1cblxuICAvKipcbiAgICogUHJveHkgdG9nZ2xlIG1ldGhvZCB0byBhY2Nlc3Mgc2lkZW5hdiBmcm9tIG91dHNpZGUgKGZyb20gdGQtbGF5b3V0IHRlbXBsYXRlKS5cbiAgICovXG4gIHB1YmxpYyB0b2dnbGUoKTogUHJvbWlzZTxNYXREcmF3ZXJUb2dnbGVSZXN1bHQ+IHtcbiAgICByZXR1cm4gdGhpcy5zaWRlbmF2LnRvZ2dsZSghdGhpcy5zaWRlbmF2Lm9wZW5lZCk7XG4gIH1cblxuICAvKipcbiAgICogUHJveHkgb3BlbiBtZXRob2QgdG8gYWNjZXNzIHNpZGVuYXYgZnJvbSBvdXRzaWRlIChmcm9tIHRkLWxheW91dCB0ZW1wbGF0ZSkuXG4gICAqL1xuICBwdWJsaWMgb3BlbigpOiBQcm9taXNlPE1hdERyYXdlclRvZ2dsZVJlc3VsdD4ge1xuICAgIHJldHVybiB0aGlzLnNpZGVuYXYub3BlbigpO1xuICB9XG5cbiAgLyoqXG4gICAqIFByb3h5IGNsb3NlIG1ldGhvZCB0byBhY2Nlc3Mgc2lkZW5hdiBmcm9tIG91dHNpZGUgKGZyb20gdGQtbGF5b3V0IHRlbXBsYXRlKS5cbiAgICovXG4gIHB1YmxpYyBjbG9zZSgpOiBQcm9taXNlPE1hdERyYXdlclRvZ2dsZVJlc3VsdD4ge1xuICAgIHJldHVybiB0aGlzLnNpZGVuYXYuY2xvc2UoKTtcbiAgfVxufVxuIiwiPG1hdC1zaWRlbmF2LWNvbnRhaW5lclxuICBmdWxsc2NyZWVuXG4gIFthdXRvc2l6ZV09XCJjb250YWluZXJBdXRvc2l6ZVwiXG4gIGNsYXNzPVwidGQtbGF5b3V0LW1hbmFnZS1saXN0XCJcbj5cbiAgPG1hdC1zaWRlbmF2XG4gICAgI3NpZGVuYXZcbiAgICBwb3NpdGlvbj1cInN0YXJ0XCJcbiAgICBbbW9kZV09XCJtb2RlXCJcbiAgICBbb3BlbmVkXT1cIm9wZW5lZFwiXG4gICAgW2Rpc2FibGVDbG9zZV09XCJkaXNhYmxlQ2xvc2VcIlxuICAgIFtzdHlsZS5tYXgtd2lkdGhdPVwic2lkZW5hdldpZHRoXCJcbiAgICBbc3R5bGUubWluLXdpZHRoXT1cInNpZGVuYXZXaWR0aFwiXG4gID5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJtYXQtdG9vbGJhclt0ZC1zaWRlbmF2LWNvbnRlbnRdXCI+PC9uZy1jb250ZW50PlxuICAgIDxkaXYgY2xhc3M9XCJ0ZC1sYXlvdXQtbWFuYWdlLWxpc3Qtc2lkZW5hdlwiIGNka1Njcm9sbGFibGU+XG4gICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbdGQtc2lkZW5hdi1jb250ZW50XVwiPjwvbmctY29udGVudD5cbiAgICA8L2Rpdj5cbiAgPC9tYXQtc2lkZW5hdj5cbiAgPGRpdiBjbGFzcz1cInRkLWxheW91dC1tYW5hZ2UtbGlzdC1tYWluXCI+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwibWF0LXRvb2xiYXJcIj48L25nLWNvbnRlbnQ+XG4gICAgPGRpdiBjbGFzcz1cInRkLWxheW91dC1tYW5hZ2UtbGlzdC1jb250ZW50XCIgY2RrU2Nyb2xsYWJsZT5cbiAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICA8L2Rpdj5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJ0ZC1sYXlvdXQtZm9vdGVyLWlubmVyXCI+PC9uZy1jb250ZW50PlxuICA8L2Rpdj5cbjwvbWF0LXNpZGVuYXYtY29udGFpbmVyPlxuIl19