@dotglitch/ngx-common
Version:
Angular components and utilities that are commonly used.
51 lines • 15.4 kB
JavaScript
import { NgTemplateOutlet } from '@angular/common';
import { Component, ContentChild, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { IconResolver } from '../icon-resolver';
import * as i0 from "@angular/core";
import * as i1 from "../filemanager.component";
import * as i2 from "@angular/material/expansion";
import * as i3 from "@angular/material/progress-bar";
export class TreeViewComponent {
get libConfig() { return this.fileManager.libConfig; }
constructor(fileManager) {
this.fileManager = fileManager;
this.click = new EventEmitter();
this.loadChildren = new EventEmitter();
this.iconResolver = new IconResolver(this.libConfig.assetPath);
}
tryLoadChildren(item, panel) {
this.loadChildren.next({
item,
cb: (children) => {
item['_children'] = children;
if (children.length == 0)
panel.close();
}
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TreeViewComponent, deps: [{ token: i1.FilemanagerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: TreeViewComponent, isStandalone: true, selector: "app-tree-view", inputs: { rowTemplateIn: ["rowTemplate", "rowTemplateIn"], data: "data" }, outputs: { click: "click", loadChildren: "loadChildren" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<mat-accordion displayMode=\"flat\" [multi]=\"true\">\n @for (item of data; track item) {\n <mat-expansion-panel\n #panel\n expanded=\"false\"\n togglePosition=\"before\"\n [class.isleaf]=\"item['_children']?.length == 0\"\n (afterExpand)=\"tryLoadChildren(item, panel)\"\n >\n <mat-expansion-panel-header>\n <div (click)=\"$event.stopPropagation(); click.next(item);\" style=\"display: flex; align-items: center;\">\n @if (panel.expanded) {\n <img\n style=\"height: 20px; margin-right: 8px\"\n [src]=\"iconResolver.resolveIcon(item)?.path.replace('.svg', '-open.svg')\"\n />\n }\n @else {\n <img\n style=\"height: 20px; margin-right: 8px\"\n [src]=\"iconResolver.resolveIcon(item)?.path\"\n />\n }\n\n {{item.name}}\n </div>\n </mat-expansion-panel-header>\n\n @if (item['_children']) {\n <app-tree-view\n [data]=\"item['_children']\"\n (click)=\"click.next(item)\"\n (loadChildren)=\"loadChildren.next($event)\"\n />\n }\n @else {\n <mat-progress-bar color=\"primary\" mode=\"query\"/>\n }\n </mat-expansion-panel>\n }\n</mat-accordion>\n", styles: [":host{display:block;color:var(--text-color)}ul{list-style:none;padding:0;margin:0}ul li>div:hover{background-color:var(--list-row-hover-background-color)}.label{top:4px;position:relative}.active ::ng-deep>.mat-expansion-panel-header>.mat-content{background-color:#494949;border-radius:7px;padding-left:12px}.active ::ng-deep>.mat-expansion-panel-header>.mat-content.label{font-weight:bolder}.isleaf ::ng-deep .mat-expansion-indicator{display:none}:host ::ng-deep .mat-expansion-panel-header,:host ::ng-deep .mat-expansion-panel-header.mat-expanded{height:32px}:host ::ng-deep .mat-expansion-panel-body{padding:0 0 0 24px}:host ::ng-deep .mat-expansion-panel{box-shadow:none!important;background:#0000}:host ::ng-deep .mat-expansion-panel .mat-content{align-items:center}:host ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator:after{transform:rotate(315deg);transition:transform .2s ease}:host ::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-indicator:after{transform:rotate(225deg)}\n"], dependencies: [{ kind: "component", type: TreeViewComponent, selector: "app-tree-view", inputs: ["rowTemplate", "data"], outputs: ["click", "loadChildren"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TreeViewComponent, decorators: [{
type: Component,
args: [{ selector: 'app-tree-view', imports: [
NgTemplateOutlet,
MatExpansionModule,
MatProgressBarModule
], standalone: true, template: "<mat-accordion displayMode=\"flat\" [multi]=\"true\">\n @for (item of data; track item) {\n <mat-expansion-panel\n #panel\n expanded=\"false\"\n togglePosition=\"before\"\n [class.isleaf]=\"item['_children']?.length == 0\"\n (afterExpand)=\"tryLoadChildren(item, panel)\"\n >\n <mat-expansion-panel-header>\n <div (click)=\"$event.stopPropagation(); click.next(item);\" style=\"display: flex; align-items: center;\">\n @if (panel.expanded) {\n <img\n style=\"height: 20px; margin-right: 8px\"\n [src]=\"iconResolver.resolveIcon(item)?.path.replace('.svg', '-open.svg')\"\n />\n }\n @else {\n <img\n style=\"height: 20px; margin-right: 8px\"\n [src]=\"iconResolver.resolveIcon(item)?.path\"\n />\n }\n\n {{item.name}}\n </div>\n </mat-expansion-panel-header>\n\n @if (item['_children']) {\n <app-tree-view\n [data]=\"item['_children']\"\n (click)=\"click.next(item)\"\n (loadChildren)=\"loadChildren.next($event)\"\n />\n }\n @else {\n <mat-progress-bar color=\"primary\" mode=\"query\"/>\n }\n </mat-expansion-panel>\n }\n</mat-accordion>\n", styles: [":host{display:block;color:var(--text-color)}ul{list-style:none;padding:0;margin:0}ul li>div:hover{background-color:var(--list-row-hover-background-color)}.label{top:4px;position:relative}.active ::ng-deep>.mat-expansion-panel-header>.mat-content{background-color:#494949;border-radius:7px;padding-left:12px}.active ::ng-deep>.mat-expansion-panel-header>.mat-content.label{font-weight:bolder}.isleaf ::ng-deep .mat-expansion-indicator{display:none}:host ::ng-deep .mat-expansion-panel-header,:host ::ng-deep .mat-expansion-panel-header.mat-expanded{height:32px}:host ::ng-deep .mat-expansion-panel-body{padding:0 0 0 24px}:host ::ng-deep .mat-expansion-panel{box-shadow:none!important;background:#0000}:host ::ng-deep .mat-expansion-panel .mat-content{align-items:center}:host ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator:after{transform:rotate(315deg);transition:transform .2s ease}:host ::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-indicator:after{transform:rotate(225deg)}\n"] }]
}], ctorParameters: () => [{ type: i1.FilemanagerComponent }], propDecorators: { rowTemplate: [{
type: ContentChild,
args: ["rowTemplate", { read: TemplateRef }]
}], rowTemplateIn: [{
type: Input,
args: ["rowTemplate"]
}], data: [{
type: Input
}], click: [{
type: Output
}], loadChildren: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJlZS12aWV3LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2NvbW1vbi9zcmMvY29tcG9uZW50cy9maWxlbWFuYWdlci90cmVlLXZpZXcvdHJlZS12aWV3LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2NvbW1vbi9zcmMvY29tcG9uZW50cy9maWxlbWFuYWdlci90cmVlLXZpZXcvdHJlZS12aWV3LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBaUIsZ0JBQWdCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUNsRSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxZQUFZLEVBQXdCLEtBQUssRUFBWSxNQUFNLEVBQUUsV0FBVyxFQUFnQyxNQUFNLGVBQWUsQ0FBQztBQUNoSyxPQUFPLEVBQUUsa0JBQWtCLEVBQXFCLE1BQU0sNkJBQTZCLENBQUM7QUFDcEYsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFDdEUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGtCQUFrQixDQUFDOzs7OztBQWNoRCxNQUFNLE9BQU8saUJBQWlCO0lBVTFCLElBQUksU0FBUyxLQUFLLE9BQU8sSUFBSSxDQUFDLFdBQVcsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDO0lBRXRELFlBQ3FCLFdBQWlDO1FBQWpDLGdCQUFXLEdBQVgsV0FBVyxDQUFzQjtRQVA1QyxVQUFLLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUMzQixpQkFBWSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFReEMsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLFlBQVksQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQ25FLENBQUM7SUFFRCxlQUFlLENBQUMsSUFBSSxFQUFFLEtBQXdCO1FBQzFDLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDO1lBQ25CLElBQUk7WUFDSixFQUFFLEVBQUUsQ0FBQyxRQUFRLEVBQUUsRUFBRTtnQkFDYixJQUFJLENBQUMsV0FBVyxDQUFDLEdBQUcsUUFBUSxDQUFDO2dCQUM3QixJQUFJLFFBQVEsQ0FBQyxNQUFNLElBQUksQ0FBQztvQkFDcEIsS0FBSyxDQUFDLEtBQUssRUFBRSxDQUFDO1lBQ3RCLENBQUM7U0FDSixDQUFDLENBQUE7SUFDTixDQUFDOzhHQTNCUSxpQkFBaUI7a0dBQWpCLGlCQUFpQixrU0FDVyxXQUFXLDZCQ25CcEQsaWxEQXlDQSxpakNEdkJhLGlCQUFpQiw4SEFMdEIsa0JBQWtCLGtpQkFDbEIsb0JBQW9COzsyRkFJZixpQkFBaUI7a0JBWDdCLFNBQVM7K0JBQ0ksZUFBZSxXQUdoQjt3QkFDTCxnQkFBZ0I7d0JBQ2hCLGtCQUFrQjt3QkFDbEIsb0JBQW9CO3FCQUN2QixjQUNXLElBQUk7eUZBR29DLFdBQVc7c0JBQTlELFlBQVk7dUJBQUMsYUFBYSxFQUFFLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRTtnQkFDNUIsYUFBYTtzQkFBbEMsS0FBSzt1QkFBQyxhQUFhO2dCQUVYLElBQUk7c0JBQVosS0FBSztnQkFFSSxLQUFLO3NCQUFkLE1BQU07Z0JBQ0csWUFBWTtzQkFBckIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nRm9yT2YsIE5nSWYsIE5nVGVtcGxhdGVPdXRsZXQgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBDb250ZW50Q2hpbGQsIEV2ZW50RW1pdHRlciwgSG9zdExpc3RlbmVyLCBJbmplY3QsIElucHV0LCBPcHRpb25hbCwgT3V0cHV0LCBUZW1wbGF0ZVJlZiwgRWxlbWVudFJlZiwgVmlld0NvbnRhaW5lclJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTWF0RXhwYW5zaW9uTW9kdWxlLCBNYXRFeHBhbnNpb25QYW5lbCB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2V4cGFuc2lvbic7XG5pbXBvcnQgeyBNYXRQcm9ncmVzc0Jhck1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3Byb2dyZXNzLWJhcic7XG5pbXBvcnQgeyBJY29uUmVzb2x2ZXIgfSBmcm9tICcuLi9pY29uLXJlc29sdmVyJztcbmltcG9ydCB7IEZpbGVtYW5hZ2VyQ29tcG9uZW50IH0gZnJvbSAnLi4vZmlsZW1hbmFnZXIuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdhcHAtdHJlZS12aWV3JyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vdHJlZS12aWV3LmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi90cmVlLXZpZXcuY29tcG9uZW50LnNjc3MnXSxcbiAgICBpbXBvcnRzOiBbXG4gICAgICAgIE5nVGVtcGxhdGVPdXRsZXQsXG4gICAgICAgIE1hdEV4cGFuc2lvbk1vZHVsZSxcbiAgICAgICAgTWF0UHJvZ3Jlc3NCYXJNb2R1bGVcbiAgICBdLFxuICAgIHN0YW5kYWxvbmU6IHRydWVcbn0pXG5leHBvcnQgY2xhc3MgVHJlZVZpZXdDb21wb25lbnQge1xuICAgIEBDb250ZW50Q2hpbGQoXCJyb3dUZW1wbGF0ZVwiLCB7IHJlYWQ6IFRlbXBsYXRlUmVmIH0pIHJvd1RlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xuICAgIEBJbnB1dChcInJvd1RlbXBsYXRlXCIpIHJvd1RlbXBsYXRlSW46IFRlbXBsYXRlUmVmPGFueT47XG5cbiAgICBASW5wdXQoKSBkYXRhOiBhbnlbXTtcblxuICAgIEBPdXRwdXQoKSBjbGljayA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgICBAT3V0cHV0KCkgbG9hZENoaWxkcmVuID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gICAgaWNvblJlc29sdmVyOiBJY29uUmVzb2x2ZXI7XG4gICAgZ2V0IGxpYkNvbmZpZygpIHsgcmV0dXJuIHRoaXMuZmlsZU1hbmFnZXIubGliQ29uZmlnOyB9XG5cbiAgICBjb25zdHJ1Y3RvcihcbiAgICAgICAgcHJpdmF0ZSByZWFkb25seSBmaWxlTWFuYWdlcjogRmlsZW1hbmFnZXJDb21wb25lbnQsXG4gICAgKSB7XG4gICAgICAgIHRoaXMuaWNvblJlc29sdmVyID0gbmV3IEljb25SZXNvbHZlcih0aGlzLmxpYkNvbmZpZy5hc3NldFBhdGgpO1xuICAgIH1cblxuICAgIHRyeUxvYWRDaGlsZHJlbihpdGVtLCBwYW5lbDogTWF0RXhwYW5zaW9uUGFuZWwpIHtcbiAgICAgICAgdGhpcy5sb2FkQ2hpbGRyZW4ubmV4dCh7XG4gICAgICAgICAgICBpdGVtLFxuICAgICAgICAgICAgY2I6IChjaGlsZHJlbikgPT4ge1xuICAgICAgICAgICAgICAgIGl0ZW1bJ19jaGlsZHJlbiddID0gY2hpbGRyZW47XG4gICAgICAgICAgICAgICAgaWYgKGNoaWxkcmVuLmxlbmd0aCA9PSAwKVxuICAgICAgICAgICAgICAgICAgICBwYW5lbC5jbG9zZSgpO1xuICAgICAgICAgICAgfVxuICAgICAgICB9KVxuICAgIH1cbn1cbiIsIjxtYXQtYWNjb3JkaW9uIGRpc3BsYXlNb2RlPVwiZmxhdFwiIFttdWx0aV09XCJ0cnVlXCI+XG4gICAgQGZvciAoaXRlbSBvZiBkYXRhOyB0cmFjayBpdGVtKSB7XG4gICAgICAgIDxtYXQtZXhwYW5zaW9uLXBhbmVsXG4gICAgICAgICAgICAjcGFuZWxcbiAgICAgICAgICAgIGV4cGFuZGVkPVwiZmFsc2VcIlxuICAgICAgICAgICAgdG9nZ2xlUG9zaXRpb249XCJiZWZvcmVcIlxuICAgICAgICAgICAgW2NsYXNzLmlzbGVhZl09XCJpdGVtWydfY2hpbGRyZW4nXT8ubGVuZ3RoID09IDBcIlxuICAgICAgICAgICAgKGFmdGVyRXhwYW5kKT1cInRyeUxvYWRDaGlsZHJlbihpdGVtLCBwYW5lbClcIlxuICAgICAgICA+XG4gICAgICAgICAgICA8bWF0LWV4cGFuc2lvbi1wYW5lbC1oZWFkZXI+XG4gICAgICAgICAgICAgICAgPGRpdiAoY2xpY2spPVwiJGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpOyBjbGljay5uZXh0KGl0ZW0pO1wiIHN0eWxlPVwiZGlzcGxheTogZmxleDsgYWxpZ24taXRlbXM6IGNlbnRlcjtcIj5cbiAgICAgICAgICAgICAgICAgICAgQGlmIChwYW5lbC5leHBhbmRlZCkge1xuICAgICAgICAgICAgICAgICAgICAgICAgPGltZ1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHN0eWxlPVwiaGVpZ2h0OiAyMHB4OyBtYXJnaW4tcmlnaHQ6IDhweFwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgW3NyY109XCJpY29uUmVzb2x2ZXIucmVzb2x2ZUljb24oaXRlbSk/LnBhdGgucmVwbGFjZSgnLnN2ZycsICctb3Blbi5zdmcnKVwiXG4gICAgICAgICAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICAgIEBlbHNlIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIDxpbWdcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBzdHlsZT1cImhlaWdodDogMjBweDsgbWFyZ2luLXJpZ2h0OiA4cHhcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtzcmNdPVwiaWNvblJlc29sdmVyLnJlc29sdmVJY29uKGl0ZW0pPy5wYXRoXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgICAgICAgICB7e2l0ZW0ubmFtZX19XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L21hdC1leHBhbnNpb24tcGFuZWwtaGVhZGVyPlxuXG4gICAgICAgICAgICBAaWYgKGl0ZW1bJ19jaGlsZHJlbiddKSB7XG4gICAgICAgICAgICAgICAgPGFwcC10cmVlLXZpZXdcbiAgICAgICAgICAgICAgICAgICAgW2RhdGFdPVwiaXRlbVsnX2NoaWxkcmVuJ11cIlxuICAgICAgICAgICAgICAgICAgICAoY2xpY2spPVwiY2xpY2submV4dChpdGVtKVwiXG4gICAgICAgICAgICAgICAgICAgIChsb2FkQ2hpbGRyZW4pPVwibG9hZENoaWxkcmVuLm5leHQoJGV2ZW50KVwiXG4gICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIEBlbHNlIHtcbiAgICAgICAgICAgICAgICA8bWF0LXByb2dyZXNzLWJhciBjb2xvcj1cInByaW1hcnlcIiBtb2RlPVwicXVlcnlcIi8+XG4gICAgICAgICAgICB9XG4gICAgICAgIDwvbWF0LWV4cGFuc2lvbi1wYW5lbD5cbiAgICB9XG48L21hdC1hY2NvcmRpb24+XG4iXX0=