@xui/components
Version:
xUI Components for Angular
40 lines • 9.81 kB
JavaScript
import { booleanAttribute, ChangeDetectionStrategy, Component, input, ViewContainerRef } from '@angular/core';
import { TemplatePortal } from '@angular/cdk/portal';
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";
export class XuiDrawer {
constructor(viewContainerRef) {
this.viewContainerRef = viewContainerRef;
this.mode = input('push');
this.expanded = input(true, { transform: booleanAttribute });
this.items = input([]);
}
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: "18.0.1", ngImport: i0, type: XuiDrawer, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XuiDrawer, selector: "xui-drawer", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.x-drawer-expanded": "expanded()" }, classAttribute: "x-drawer" }, ngImport: i0, template: "<div class=\"x-drawer-header\" *ngIf=\"_headerTemplate\">\n <ng-template [cdkPortalOutlet]=\"_headerPortal\" />\n <div class=\"x-drawer-divider\"></div>\n</div>\n\n<ng-container *ngTemplateOutlet=\"menuRef; context: { items: items() }\" />\n\n<ng-template #menuRef let-items=\"items\">\n @for (item of items; track item.label) {\n <ng-container>\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 [icon]=\"item.icon\"></xui-icon>\n {{ item.label }}\n </div>\n\n <ng-container *ngTemplateOutlet=\"menuRef; context: { items: item.children }\" />\n </ng-container>\n }\n</ng-template>\n\n<div class=\"x-drawer-footer\" *ngIf=\"_footerTemplate\">\n <div class=\"x-drawer-divider\"></div>\n <ng-template [cdkPortalOutlet]=\"_footerPortal\" />\n</div>\n", dependencies: [{ 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.XuiIcon, selector: "xui-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "icon"], exportAs: ["xuiIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XuiDrawer, decorators: [{
type: Component,
args: [{ selector: 'xui-drawer', changeDetection: ChangeDetectionStrategy.OnPush, host: {
class: 'x-drawer',
'[class.x-drawer-expanded]': 'expanded()'
}, template: "<div class=\"x-drawer-header\" *ngIf=\"_headerTemplate\">\n <ng-template [cdkPortalOutlet]=\"_headerPortal\" />\n <div class=\"x-drawer-divider\"></div>\n</div>\n\n<ng-container *ngTemplateOutlet=\"menuRef; context: { items: items() }\" />\n\n<ng-template #menuRef let-items=\"items\">\n @for (item of items; track item.label) {\n <ng-container>\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 [icon]=\"item.icon\"></xui-icon>\n {{ item.label }}\n </div>\n\n <ng-container *ngTemplateOutlet=\"menuRef; context: { items: item.children }\" />\n </ng-container>\n }\n</ng-template>\n\n<div class=\"x-drawer-footer\" *ngIf=\"_footerTemplate\">\n <div class=\"x-drawer-divider\"></div>\n <ng-template [cdkPortalOutlet]=\"_footerPortal\" />\n</div>\n" }]
}], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhd2VyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy94dWkvc3JjL2RyYXdlci9kcmF3ZXIudHMiLCIuLi8uLi8uLi8uLi8uLi9saWJzL3h1aS9zcmMvZHJhd2VyL2RyYXdlci5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxnQkFBZ0IsRUFDaEIsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxLQUFLLEVBR0wsZ0JBQWdCLEVBQ2pCLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBVSxjQUFjLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQzs7Ozs7QUFXN0QsTUFBTSxPQUFPLFNBQVM7SUFZcEIsWUFBb0IsZ0JBQWtDO1FBQWxDLHFCQUFnQixHQUFoQixnQkFBZ0IsQ0FBa0I7UUFKdEQsU0FBSSxHQUFHLEtBQUssQ0FBYSxNQUFNLENBQUMsQ0FBQztRQUNqQyxhQUFRLEdBQUcsS0FBSyxDQUFDLElBQUksRUFBRSxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRSxDQUFDLENBQUM7UUFDeEQsVUFBSyxHQUFHLEtBQUssQ0FBZSxFQUFFLENBQUMsQ0FBQztJQUV5QixDQUFDO0lBRTFELFFBQVE7UUFDTixJQUFJLElBQUksQ0FBQyxlQUFlLEVBQUUsQ0FBQztZQUN6QixJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksY0FBYyxDQUFDLElBQUksQ0FBQyxlQUFlLEVBQUUsSUFBSSxDQUFDLGdCQUFnQixDQUFDLENBQUM7UUFDdkYsQ0FBQztRQUVELElBQUksSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1lBQ3pCLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxjQUFjLENBQUMsSUFBSSxDQUFDLGVBQWUsRUFBRSxJQUFJLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztRQUN2RixDQUFDO0lBQ0gsQ0FBQztJQUVELFVBQVUsQ0FBQyxJQUFnQjtRQUN6QixJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUNsQixLQUFLLE1BQU0sQ0FBQyxJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDO2dCQUM3QixDQUFDLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQztZQUNyQixDQUFDO1lBRUQsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUM7UUFDdkIsQ0FBQztJQUNILENBQUM7OEdBaENVLFNBQVM7a0dBQVQsU0FBUywyZ0JDckJ0Qiw0N0JBNkJBOzsyRkRSYSxTQUFTO2tCQVRyQixTQUFTOytCQUNFLFlBQVksbUJBRUwsdUJBQXVCLENBQUMsTUFBTSxRQUN6Qzt3QkFDSixLQUFLLEVBQUUsVUFBVTt3QkFDakIsMkJBQTJCLEVBQUUsWUFBWTtxQkFDMUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBib29sZWFuQXR0cmlidXRlLFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBpbnB1dCxcbiAgT25Jbml0LFxuICBUZW1wbGF0ZVJlZixcbiAgVmlld0NvbnRhaW5lclJlZlxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IERyYXdlckl0ZW0sIERyYXdlck1vZGUgfSBmcm9tICcuL2RyYXdlci50eXBlcyc7XG5pbXBvcnQgeyBQb3J0YWwsIFRlbXBsYXRlUG9ydGFsIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL3BvcnRhbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3h1aS1kcmF3ZXInLFxuICB0ZW1wbGF0ZVVybDogJ2RyYXdlci5odG1sJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIGhvc3Q6IHtcbiAgICBjbGFzczogJ3gtZHJhd2VyJyxcbiAgICAnW2NsYXNzLngtZHJhd2VyLWV4cGFuZGVkXSc6ICdleHBhbmRlZCgpJ1xuICB9XG59KVxuZXhwb3J0IGNsYXNzIFh1aURyYXdlciBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIF9pdGVtVGVtcGxhdGU/OiBUZW1wbGF0ZVJlZjx1bmtub3duPjtcbiAgX2hlYWRlclRlbXBsYXRlPzogVGVtcGxhdGVSZWY8dW5rbm93bj47XG4gIF9mb290ZXJUZW1wbGF0ZT86IFRlbXBsYXRlUmVmPHVua25vd24+O1xuXG4gIF9mb290ZXJQb3J0YWw/OiBQb3J0YWw8dW5rbm93bj47XG4gIF9oZWFkZXJQb3J0YWw/OiBQb3J0YWw8dW5rbm93bj47XG5cbiAgbW9kZSA9IGlucHV0PERyYXdlck1vZGU+KCdwdXNoJyk7XG4gIGV4cGFuZGVkID0gaW5wdXQodHJ1ZSwgeyB0cmFuc2Zvcm06IGJvb2xlYW5BdHRyaWJ1dGUgfSk7XG4gIGl0ZW1zID0gaW5wdXQ8RHJhd2VySXRlbVtdPihbXSk7XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSB2aWV3Q29udGFpbmVyUmVmOiBWaWV3Q29udGFpbmVyUmVmKSB7fVxuXG4gIG5nT25Jbml0KCkge1xuICAgIGlmICh0aGlzLl9mb290ZXJUZW1wbGF0ZSkge1xuICAgICAgdGhpcy5fZm9vdGVyUG9ydGFsID0gbmV3IFRlbXBsYXRlUG9ydGFsKHRoaXMuX2Zvb3RlclRlbXBsYXRlLCB0aGlzLnZpZXdDb250YWluZXJSZWYpO1xuICAgIH1cblxuICAgIGlmICh0aGlzLl9oZWFkZXJUZW1wbGF0ZSkge1xuICAgICAgdGhpcy5faGVhZGVyUG9ydGFsID0gbmV3IFRlbXBsYXRlUG9ydGFsKHRoaXMuX2hlYWRlclRlbXBsYXRlLCB0aGlzLnZpZXdDb250YWluZXJSZWYpO1xuICAgIH1cbiAgfVxuXG4gIGNsaWNrR3JvdXAoaXRlbTogRHJhd2VySXRlbSkge1xuICAgIGlmIChpdGVtLmNoaWxkcmVuKSB7XG4gICAgICBmb3IgKGNvbnN0IHggb2YgdGhpcy5pdGVtcygpKSB7XG4gICAgICAgIHguZXhwYW5kZWQgPSBmYWxzZTtcbiAgICAgIH1cblxuICAgICAgaXRlbS5leHBhbmRlZCA9IHRydWU7XG4gICAgfVxuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwieC1kcmF3ZXItaGVhZGVyXCIgKm5nSWY9XCJfaGVhZGVyVGVtcGxhdGVcIj5cbiAgPG5nLXRlbXBsYXRlIFtjZGtQb3J0YWxPdXRsZXRdPVwiX2hlYWRlclBvcnRhbFwiIC8+XG4gIDxkaXYgY2xhc3M9XCJ4LWRyYXdlci1kaXZpZGVyXCI+PC9kaXY+XG48L2Rpdj5cblxuPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cIm1lbnVSZWY7IGNvbnRleHQ6IHsgaXRlbXM6IGl0ZW1zKCkgfVwiIC8+XG5cbjxuZy10ZW1wbGF0ZSAjbWVudVJlZiBsZXQtaXRlbXM9XCJpdGVtc1wiPlxuICBAZm9yIChpdGVtIG9mIGl0ZW1zOyB0cmFjayBpdGVtLmxhYmVsKSB7XG4gICAgPG5nLWNvbnRhaW5lcj5cbiAgICAgIDxkaXZcbiAgICAgICAgY2xhc3M9XCJ4LWRyYXdlci1pdGVtXCJcbiAgICAgICAgW2NsYXNzLngtZHJhd2VyLWFjdGl2ZV09XCJpdGVtLmNoaWxkcmVuICYmIGl0ZW0uZXhwYW5kZWRcIlxuICAgICAgICBbY2xhc3MueC1kcmF3ZXItZ3JvdXBdPVwiaXRlbS5jaGlsZHJlblwiXG4gICAgICAgIChjbGljayk9XCJjbGlja0dyb3VwKGl0ZW0pXCJcbiAgICAgID5cbiAgICAgICAgPHh1aS1pY29uIFtpY29uXT1cIml0ZW0uaWNvblwiPjwveHVpLWljb24+XG4gICAgICAgIHt7IGl0ZW0ubGFiZWwgfX1cbiAgICAgIDwvZGl2PlxuXG4gICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwibWVudVJlZjsgY29udGV4dDogeyBpdGVtczogaXRlbS5jaGlsZHJlbiB9XCIgLz5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgfVxuPC9uZy10ZW1wbGF0ZT5cblxuPGRpdiBjbGFzcz1cIngtZHJhd2VyLWZvb3RlclwiICpuZ0lmPVwiX2Zvb3RlclRlbXBsYXRlXCI+XG4gIDxkaXYgY2xhc3M9XCJ4LWRyYXdlci1kaXZpZGVyXCI+PC9kaXY+XG4gIDxuZy10ZW1wbGF0ZSBbY2RrUG9ydGFsT3V0bGV0XT1cIl9mb290ZXJQb3J0YWxcIiAvPlxuPC9kaXY+XG4iXX0=