UNPKG

xui

Version:

xUI Components for Angular

48 lines • 12.1 kB

JavaScript

import { __decorate, __metadata } from "tslib"; import { ChangeDetectionStrategy, Component, Input, ViewContainerRef } from '@angular/core'; import { TemplatePortal } from '@angular/cdk/portal'; import { InputBoolean } from '../utils'; import * as i0 from "@angular/core"; import * as i1 from "@angular/common"; import * as i2 from "@angular/cdk/portal"; import * as i3 from "../icon/icon.component"; export class DrawerComponent { constructor(viewContainerRef) { this.viewContainerRef = viewContainerRef; this.mode = 'push'; this.expanded = true; } ngOnInit() { if (this.footerTemplate) { this.footerPortal = new TemplatePortal(this.footerTemplate, this.viewContainerRef); } if (this.headerTemplate) { this.headerPortal = new TemplatePortal(this.headerTemplate, this.viewContainerRef); } } clickGroup(item) { if (item.children) { for (const x of this.items) { x.expanded = false; } item.expanded = true; } } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: DrawerComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: DrawerComponent, selector: "xui-drawer", inputs: { mode: "mode", expanded: "expanded", items: "items" }, ngImport: i0, template: "<div class=\"x-drawer\" [class.x-drawer-expanded]=\"expanded\">\n <div class=\"x-drawer-header\" *ngIf=\"headerTemplate\">\n <ng-template [cdkPortalOutlet]=\"headerPortal\"></ng-template>\n <div class=\"x-drawer-divider\"></div>\n </div>\n\n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n <ng-container *ngTemplateOutlet=\"menuRef; context: { items }\"></ng-container>\n\n <ng-template #menuRef let-items=\"items\">\n <ng-container *ngFor=\"let item of items\">\n <div\n class=\"x-drawer-item\"\n [class.x-drawer-active]=\"item.children && item.expanded\"\n [class.x-drawer-group]=\"item.children\"\n (click)=\"clickGroup(item)\"\n >\n <xui-icon>{{ item.icon }}</xui-icon>\n {{ item.label }}\n </div>\n\n <ng-container *ngTemplateOutlet=\"menuRef; context: { items: item.children }\"></ng-container>\n </ng-container>\n </ng-template>\n\n <div class=\"x-drawer-footer\" *ngIf=\"footerTemplate\">\n <div class=\"x-drawer-divider\"></div>\n <ng-template [cdkPortalOutlet]=\"footerPortal\"></ng-template>\n </div>\n</div>\n", 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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i3.IconComponent, selector: "xui-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); } } __decorate([ InputBoolean(), __metadata("design:type", Object) ], DrawerComponent.prototype, "expanded", void 0); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: DrawerComponent, decorators: [{ type: Component, args: [{ selector: 'xui-drawer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-drawer\" [class.x-drawer-expanded]=\"expanded\">\n <div class=\"x-drawer-header\" *ngIf=\"headerTemplate\">\n <ng-template [cdkPortalOutlet]=\"headerPortal\"></ng-template>\n <div class=\"x-drawer-divider\"></div>\n </div>\n\n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n <ng-container *ngTemplateOutlet=\"menuRef; context: { items }\"></ng-container>\n\n <ng-template #menuRef let-items=\"items\">\n <ng-container *ngFor=\"let item of items\">\n <div\n class=\"x-drawer-item\"\n [class.x-drawer-active]=\"item.children && item.expanded\"\n [class.x-drawer-group]=\"item.children\"\n (click)=\"clickGroup(item)\"\n >\n <xui-icon>{{ item.icon }}</xui-icon>\n {{ item.label }}\n </div>\n\n <ng-container *ngTemplateOutlet=\"menuRef; context: { items: item.children }\"></ng-container>\n </ng-container>\n </ng-template>\n\n <div class=\"x-drawer-footer\" *ngIf=\"footerTemplate\">\n <div class=\"x-drawer-divider\"></div>\n <ng-template [cdkPortalOutlet]=\"footerPortal\"></ng-template>\n </div>\n</div>\n" }] }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { mode: [{ type: Input }], expanded: [{ type: Input }], items: [{ type: Input }] } }); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhd2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMveHVpL3NyYy9kcmF3ZXIvZHJhd2VyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL2xpYnMveHVpL3NyYy9kcmF3ZXIvZHJhd2VyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBZSxnQkFBZ0IsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUV6RyxPQUFPLEVBQVUsY0FBYyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDN0QsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLFVBQVUsQ0FBQzs7Ozs7QUFPeEMsTUFBTSxPQUFPLGVBQWU7SUFZMUIsWUFBb0IsZ0JBQWtDO1FBQWxDLHFCQUFnQixHQUFoQixnQkFBZ0IsQ0FBa0I7UUFKN0MsU0FBSSxHQUFlLE1BQU0sQ0FBQztRQUNWLGFBQVEsR0FBRyxJQUFJLENBQUM7SUFHZ0IsQ0FBQztJQUUxRCxRQUFRO1FBQ04sSUFBSSxJQUFJLENBQUMsY0FBYyxFQUFFO1lBQ3ZCLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxjQUFjLENBQUMsSUFBSSxDQUFDLGNBQWMsRUFBRSxJQUFJLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztTQUNwRjtRQUVELElBQUksSUFBSSxDQUFDLGNBQWMsRUFBRTtZQUN2QixJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksY0FBYyxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUUsSUFBSSxDQUFDLGdCQUFnQixDQUFDLENBQUM7U0FDcEY7SUFDSCxDQUFDO0lBRUQsVUFBVSxDQUFDLElBQWdCO1FBQ3pCLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNqQixLQUFLLE1BQU0sQ0FBQyxJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUU7Z0JBQzFCLENBQUMsQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDO2FBQ3BCO1lBRUQsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUM7U0FDdEI7SUFDSCxDQUFDOzhHQWhDVSxlQUFlO2tHQUFmLGVBQWUsa0hDVjVCLHF1REFxREE7O0FEbEMyQjtJQUFmLFlBQVksRUFBRTs7aURBQWlCOzJGQVQ5QixlQUFlO2tCQUwzQixTQUFTOytCQUNFLFlBQVksbUJBRUwsdUJBQXVCLENBQUMsTUFBTTt1R0FVdEMsSUFBSTtzQkFBWixLQUFLO2dCQUNtQixRQUFRO3NCQUFoQyxLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0LCBUZW1wbGF0ZVJlZiwgVmlld0NvbnRhaW5lclJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRHJhd2VySXRlbSwgRHJhd2VyTW9kZSB9IGZyb20gJy4vZHJhd2VyLnR5cGVzJztcbmltcG9ydCB7IFBvcnRhbCwgVGVtcGxhdGVQb3J0YWwgfSBmcm9tICdAYW5ndWxhci9jZGsvcG9ydGFsJztcbmltcG9ydCB7IElucHV0Qm9vbGVhbiB9IGZyb20gJy4uL3V0aWxzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAneHVpLWRyYXdlcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9kcmF3ZXIuY29tcG9uZW50Lmh0bWwnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxufSlcbmV4cG9ydCBjbGFzcyBEcmF3ZXJDb21wb25lbnQge1xuICBpdGVtVGVtcGxhdGU/OiBUZW1wbGF0ZVJlZjx1bmtub3duPjtcbiAgaGVhZGVyVGVtcGxhdGU/OiBUZW1wbGF0ZVJlZjx1bmtub3duPjtcbiAgZm9vdGVyVGVtcGxhdGU/OiBUZW1wbGF0ZVJlZjx1bmtub3duPjtcblxuICBmb290ZXJQb3J0YWw/OiBQb3J0YWw8dW5rbm93bj47XG4gIGhlYWRlclBvcnRhbD86IFBvcnRhbDx1bmtub3duPjtcblxuICBASW5wdXQoKSBtb2RlOiBEcmF3ZXJNb2RlID0gJ3B1c2gnO1xuICBASW5wdXQoKSBASW5wdXRCb29sZWFuKCkgZXhwYW5kZWQgPSB0cnVlO1xuICBASW5wdXQoKSBpdGVtcyE6IERyYXdlckl0ZW1bXTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHZpZXdDb250YWluZXJSZWY6IFZpZXdDb250YWluZXJSZWYpIHt9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgaWYgKHRoaXMuZm9vdGVyVGVtcGxhdGUpIHtcbiAgICAgIHRoaXMuZm9vdGVyUG9ydGFsID0gbmV3IFRlbXBsYXRlUG9ydGFsKHRoaXMuZm9vdGVyVGVtcGxhdGUsIHRoaXMudmlld0NvbnRhaW5lclJlZik7XG4gICAgfVxuXG4gICAgaWYgKHRoaXMuaGVhZGVyVGVtcGxhdGUpIHtcbiAgICAgIHRoaXMuaGVhZGVyUG9ydGFsID0gbmV3IFRlbXBsYXRlUG9ydGFsKHRoaXMuaGVhZGVyVGVtcGxhdGUsIHRoaXMudmlld0NvbnRhaW5lclJlZik7XG4gICAgfVxuICB9XG5cbiAgY2xpY2tHcm91cChpdGVtOiBEcmF3ZXJJdGVtKSB7XG4gICAgaWYgKGl0ZW0uY2hpbGRyZW4pIHtcbiAgICAgIGZvciAoY29uc3QgeCBvZiB0aGlzLml0ZW1zKSB7XG4gICAgICAgIHguZXhwYW5kZWQgPSBmYWxzZTtcbiAgICAgIH1cblxuICAgICAgaXRlbS5leHBhbmRlZCA9IHRydWU7XG4gICAgfVxuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwieC1kcmF3ZXJcIiBbY2xhc3MueC1kcmF3ZXItZXhwYW5kZWRdPVwiZXhwYW5kZWRcIj5cbiAgPGRpdiBjbGFzcz1cIngtZHJhd2VyLWhlYWRlclwiICpuZ0lmPVwiaGVhZGVyVGVtcGxhdGVcIj5cbiAgICA8bmctdGVtcGxhdGUgW2Nka1BvcnRhbE91dGxldF09XCJoZWFkZXJQb3J0YWxcIj48L25nLXRlbXBsYXRlPlxuICAgIDxkaXYgY2xhc3M9XCJ4LWRyYXdlci1kaXZpZGVyXCI+PC9kaXY+XG4gIDwvZGl2PlxuXG4gIDwhLS0gIDxkaXYgY2xhc3M9XCJ4LWRyYXdlci1pdGVtIHgtZHJhd2VyLWdyb3VwIHgtZHJhd2VyLWFjdGl2ZVwiPi0tPlxuICA8IS0tICAgIDx4dWktaWNvbj5tZW51PC94dWktaWNvbj4tLT5cbiAgPCEtLSAgICBNZW51LS0+XG4gIDwhLS0gIDwvZGl2Pi0tPlxuXG4gIDwhLS0gIDxkaXYgY2xhc3M9XCJ4LWRyYXdlci1pdGVtIHgtZHJhd2VyLWFjdGl2ZVwiPi0tPlxuICA8IS0tICAgIDx4dWktaWNvbj5tZW51PC94dWktaWNvbj4tLT5cbiAgPCEtLSAgICBNZW51LS0+XG4gIDwhLS0gIDwvZGl2Pi0tPlxuICA8IS0tICA8ZGl2IGNsYXNzPVwieC1kcmF3ZXItaXRlbSB4LWRyYXdlci1zZWxlY3RlZFwiPi0tPlxuICA8IS0tICAgIDx4dWktaWNvbj5tZW51PC94dWktaWNvbj4tLT5cbiAgPCEtLSAgICBNZW51LS0+XG4gIDwhLS0gIDwvZGl2Pi0tPlxuXG4gIDwhLS0gIDxkaXYgY2xhc3M9XCJ4LWRyYXdlci1pdGVtIHgtZHJhd2VyLWdyb3VwXCI+LS0+XG4gIDwhLS0gICAgPHh1aS1pY29uPm1lbnU8L3h1aS1pY29uPi0tPlxuICA8IS0tICAgIE1lbnUtLT5cbiAgPCEtLSAgPC9kaXY+LS0+XG5cbiAgPCEtLSAgPGRpdiBjbGFzcz1cIngtZHJhd2VyLWl0ZW0geC1kcmF3ZXItZ3JvdXBcIj4tLT5cbiAgPCEtLSAgICA8eHVpLWljb24+bWVudTwveHVpLWljb24+LS0+XG4gIDwhLS0gICAgTWVudS0tPlxuICA8IS0tICA8L2Rpdj4tLT5cblxuICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwibWVudVJlZjsgY29udGV4dDogeyBpdGVtcyB9XCI+PC9uZy1jb250YWluZXI+XG5cbiAgPG5nLXRlbXBsYXRlICNtZW51UmVmIGxldC1pdGVtcz1cIml0ZW1zXCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgaXRlbSBvZiBpdGVtc1wiPlxuICAgICAgPGRpdlxuICAgICAgICBjbGFzcz1cIngtZHJhd2VyLWl0ZW1cIlxuICAgICAgICBbY2xhc3MueC1kcmF3ZXItYWN0aXZlXT1cIml0ZW0uY2hpbGRyZW4gJiYgaXRlbS5leHBhbmRlZFwiXG4gICAgICAgIFtjbGFzcy54LWRyYXdlci1ncm91cF09XCJpdGVtLmNoaWxkcmVuXCJcbiAgICAgICAgKGNsaWNrKT1cImNsaWNrR3JvdXAoaXRlbSlcIlxuICAgICAgPlxuICAgICAgICA8eHVpLWljb24+e3sgaXRlbS5pY29uIH19PC94dWktaWNvbj5cbiAgICAgICAge3sgaXRlbS5sYWJlbCB9fVxuICAgICAgPC9kaXY+XG5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJtZW51UmVmOyBjb250ZXh0OiB7IGl0ZW1zOiBpdGVtLmNoaWxkcmVuIH1cIj48L25nLWNvbnRhaW5lcj5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgPC9uZy10ZW1wbGF0ZT5cblxuICA8ZGl2IGNsYXNzPVwieC1kcmF3ZXItZm9vdGVyXCIgKm5nSWY9XCJmb290ZXJUZW1wbGF0ZVwiPlxuICAgIDxkaXYgY2xhc3M9XCJ4LWRyYXdlci1kaXZpZGVyXCI+PC9kaXY+XG4gICAgPG5nLXRlbXBsYXRlIFtjZGtQb3J0YWxPdXRsZXRdPVwiZm9vdGVyUG9ydGFsXCI+PC9uZy10ZW1wbGF0ZT5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==