@ng-nest/ui 12.0.11 → 13.0.3

package/fesm2020/ng-nest-ui-transfer.mjs

@@ -0,0 +1,269 @@
+import * as i0 from '@angular/core';
+import { Component, Input, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { __decorate } from 'tslib';
+import * as i1 from '@ng-nest/ui/core';
+import { XDataConvert, XWithConfig, XInputBoolean, XIsChange, XIsEmpty, XSetData } from '@ng-nest/ui/core';
+import { XControlValueAccessor, XValueAccessor, XBaseFormModule } from '@ng-nest/ui/base-form';
+import { Subject, of } from 'rxjs';
+import { delay, takeUntil } from 'rxjs/operators';
+import * as i4 from '@angular/cdk/drag-drop';
+import { transferArrayItem, moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i2 from '@ng-nest/ui/button';
+import { XButtonModule } from '@ng-nest/ui/button';
+import * as i3 from '@ng-nest/ui/checkbox';
+import { XCheckboxModule } from '@ng-nest/ui/checkbox';
+import * as i5 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i6 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i7 from '@ng-nest/ui/outlet';
+import { XOutletModule } from '@ng-nest/ui/outlet';
+import { XInputModule } from '@ng-nest/ui/input';
+
+/**
+ * Transfer
+ * @selector x-transfer
+ * @decorator component
+ */
+const XTransferPrefix = 'x-transfer';
+const X_CONFIG_NAME = 'transfer';
+/**
+ * Transfer Property
+ */
+class XTransferProperty extends XControlValueAccessor {
+    constructor() {
+        super(...arguments);
+        /**
+         * @zh_CN 数据对象
+         * @en_US Data object
+         */
+        this.data = [];
+    }
+}
+/** @nocollapse */ /** @nocollapse */ XTransferProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTransferProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XTransferProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: XTransferProperty, selector: "ng-component", inputs: { data: "data", titles: "titles", drag: "drag", search: "search", nodeTpl: "nodeTpl", titleTpl: "titleTpl" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+__decorate([
+    XDataConvert()
+], XTransferProperty.prototype, "data", void 0);
+__decorate([
+    XWithConfig(X_CONFIG_NAME)
+], XTransferProperty.prototype, "titles", void 0);
+__decorate([
+    XWithConfig(X_CONFIG_NAME),
+    XInputBoolean()
+], XTransferProperty.prototype, "drag", void 0);
+__decorate([
+    XInputBoolean()
+], XTransferProperty.prototype, "search", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTransferProperty, decorators: [{
+            type: Component,
+            args: [{ template: '' }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], titles: [{
+                type: Input
+            }], drag: [{
+                type: Input
+            }], search: [{
+                type: Input
+            }], nodeTpl: [{
+                type: Input
+            }], titleTpl: [{
+                type: Input
+            }] } });
+
+class XTransferComponent extends XTransferProperty {
+    constructor(renderer, elementRef, cdr, configService) {
+        super();
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.configService = configService;
+        this.nodes = [];
+        this.left = {
+            list: [],
+            searchList: [],
+            checkedCount: 0,
+            disabledButton: true
+        };
+        this.right = {
+            list: [],
+            searchList: [],
+            checkedCount: 0,
+            disabledButton: true
+        };
+        this.searchInput = '';
+        this._titles = ['List', 'Selected'];
+        this._unSubject = new Subject();
+    }
+    writeValue(value) {
+        this.value = value;
+        this.setList();
+    }
+    ngOnInit() {
+        this.setTitles();
+    }
+    ngOnChanges(changes) {
+        const { data } = changes;
+        XIsChange(data) && this.setData();
+    }
+    ngOnDestroy() {
+        this._unSubject.next();
+        this._unSubject.unsubscribe();
+    }
+    searchInputChange(source) {
+        source.list = source.searchList?.filter((x) => x.label.indexOf(source.searchInput) >= 0);
+        this.cdr.detectChanges();
+    }
+    checkedAllChange($event, source) {
+        let list = source.list?.filter((x) => !x.disabled).map((x) => {
+            x.checked = $event;
+            return x;
+        });
+        source.checkedCount = $event ? list.length : 0;
+        source.indeterminate = $event;
+        this.setButtonDisabled(source);
+        this.cdr.detectChanges();
+    }
+    checkedChange($event, source) {
+        if (!$event)
+            source.checkedCount--;
+        else
+            source.checkedCount++;
+        this.setCheckedAll(source);
+        this.setButtonDisabled(source);
+        this.cdr.detectChanges();
+    }
+    move(from, to) {
+        if (from.disabledButton)
+            return;
+        let checkedItems = from.list?.filter((x) => !XIsEmpty(x.checked));
+        let j = 0;
+        checkedItems.forEach((x) => {
+            const index = from.list?.indexOf(x);
+            x.checked = false;
+            transferArrayItem(from.list, to.list, index, j);
+            j++;
+        });
+        from.checkedAll = false;
+        from.checkedCount = 0;
+        from.indeterminate = false;
+        from.disabledButton = true;
+        this.setSearchList(from, to);
+        this.setValue();
+        this.cdr.detectChanges();
+    }
+    dropCdk(event) {
+        const ev = event;
+        if (ev.previousContainer === ev.container) {
+            moveItemInArray(ev.container.data, ev.previousIndex, ev.currentIndex);
+        }
+        else {
+            transferArrayItem(ev.previousContainer.data, ev.container.data, ev.previousIndex, ev.currentIndex);
+            this.setCheckedCount(this.left, this.right);
+            this.setCheckedAll(this.left, this.right);
+            this.setButtonDisabled(this.left, this.right);
+        }
+        this.setSearchList(this.left, this.right);
+        this.setValue();
+        this.cdr.detectChanges();
+    }
+    predicate(item) {
+        return !item.data.disabled;
+    }
+    trackByNode(_index, item) {
+        return item.id;
+    }
+    setCheckedAll(...sources) {
+        for (let source of sources) {
+            if (source.checkedCount > 0) {
+                if (source.checkedCount === source.list?.filter((x) => !x.disabled).length) {
+                    source.checkedAll = true;
+                }
+                else {
+                    source.checkedAll = false;
+                    source.indeterminate = true;
+                }
+            }
+            else {
+                source.indeterminate = false;
+            }
+        }
+    }
+    setCheckedCount(...sources) {
+        for (let source of sources)
+            source.checkedCount = source.list?.filter((x) => !XIsEmpty(x.checked)).length;
+    }
+    setButtonDisabled(...sources) {
+        for (let source of sources)
+            source.disabledButton = source.checkedCount === 0;
+    }
+    setValue() {
+        this.value = this.right.list?.map((x) => x.id);
+        this.onChange(this.value);
+    }
+    setSearchList(...sources) {
+        if (this.search) {
+            for (let source of sources) {
+                if (XIsEmpty(source.searchInput)) {
+                    source.searchList = [...source.list];
+                }
+            }
+        }
+    }
+    setData() {
+        XSetData(this.data, this._unSubject).subscribe((x) => {
+            this.nodes = x;
+        });
+    }
+    setList() {
+        if (!XIsEmpty(this.value)) {
+            this.left.list = this.nodes.filter((x) => this.value.indexOf(x.id) < 0);
+            this.right.list = this.nodes.filter((x) => this.value.indexOf(x.id) >= 0);
+        }
+        else {
+            this.left.list = this.nodes;
+        }
+        this.setSearchList(this.left, this.right);
+        // ToDo: x-checkbox error. Attempt to use a destroyed view: detectChanges
+        of(true)
+            .pipe(delay(0), takeUntil(this._unSubject))
+            .subscribe(() => this.cdr.detectChanges());
+    }
+    setTitles() {
+        if (XIsEmpty(this.titles)) {
+            this.titles = this._titles;
+        }
+        this.left.title = this.titles[0];
+        if (this.titles.length > 1)
+            this.right.title = this.titles[1];
+        this.cdr.detectChanges();
+    }
+}
+/** @nocollapse */ /** @nocollapse */ XTransferComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTransferComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XTransferComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: XTransferComponent, selector: "x-transfer", providers: [XValueAccessor(XTransferComponent)], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #transfer class=\"x-transfer\" cdkDropListGroup [ngClass]=\"classMap\">\r\n  <div class=\"x-transfer-box\">\r\n    <ng-container *ngTemplateOutlet=\"sourceTitleTpl; context: { source: left }\"></ng-container>\r\n    <ul\r\n      class=\"x-transfer-list\"\r\n      cdkDropList\r\n      (cdkDropListDropped)=\"dropCdk($event)\"\r\n      [cdkDropListData]=\"left.list\"\r\n      [cdkDropListDisabled]=\"!drag\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      <li class=\"x-transfer-item\" *ngFor=\"let node of left.list; trackBy: trackByNode\" cdkDrag [cdkDragData]=\"node\">\r\n        <ng-container *ngTemplateOutlet=\"sourceNodeTpl; context: { node: node, source: left }\"></ng-container>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n  <div class=\"x-transfer-buttons\">\r\n    <x-button type=\"primary\" icon=\"fto-chevron-right\" [disabled]=\"left.disabledButton\" (click)=\"move(left, right)\"></x-button>\r\n    <x-button type=\"primary\" icon=\"fto-chevron-left\" [disabled]=\"right.disabledButton\" (click)=\"move(right, left)\"></x-button>\r\n  </div>\r\n  <div class=\"x-transfer-box\">\r\n    <ng-container *ngTemplateOutlet=\"sourceTitleTpl; context: { source: right }\"></ng-container>\r\n    <ul\r\n      class=\"x-transfer-list\"\r\n      cdkDropList\r\n      (cdkDropListDropped)=\"dropCdk($event)\"\r\n      [cdkDropListData]=\"right.list\"\r\n      [cdkDropListDisabled]=\"!drag\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      <li class=\"x-transfer-item\" *ngFor=\"let node of right.list; trackBy: trackByNode\" cdkDrag [cdkDragData]=\"node\">\r\n        <ng-container *ngTemplateOutlet=\"sourceNodeTpl; context: { node: node, source: right }\"></ng-container>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #sourceTitleTpl let-source=\"source\">\r\n  <div class=\"x-transfer-title\">\r\n    <x-checkbox\r\n      [data]=\"[titleTpl ? '' : source.title]\"\r\n      [(ngModel)]=\"source.checkedAll\"\r\n      (ngModelChange)=\"checkedAllChange($event, source)\"\r\n      [indeterminate]=\"source.indeterminate\"\r\n    ></x-checkbox>\r\n    <ng-container *xOutlet=\"titleTpl; context: { $title: source.title, $checkedCount: source.checkedCount, $count: source.list.length }\"\r\n      ><span>{{ source.checkedCount }} / {{ source.list.length }}</span></ng-container\r\n    >\r\n  </div>\r\n  <!-- <div class=\"x-transfer-search\" *ngIf=\"search\">\r\n    <x-input\r\n      icon=\"fto-search\"\r\n      [(ngModel)]=\"source.searchInput\"\r\n      (ngModelChange)=\"searchInputChange(source)\"\r\n      clearable\r\n    ></x-input>\r\n  </div> -->\r\n</ng-template>\r\n\r\n<ng-template #sourceNodeTpl let-node=\"node\" let-source=\"source\">\r\n  <x-checkbox\r\n    [data]=\"[{ id: node.id, label: nodeTpl ? nodeTpl : node.label, node: node }]\"\r\n    [disabled]=\"node.disabled\"\r\n    [(ngModel)]=\"node.checked\"\r\n    (ngModelChange)=\"checkedChange($event, source)\"\r\n  ></x-checkbox>\r\n</ng-template>\r\n", styles: [".x-transfer{margin:0;padding:0;display:inline-flex;align-items:center}.x-transfer-box{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);width:12rem}.x-transfer-title{padding:.25rem .5625rem;display:flex;align-items:center;justify-content:space-between;border-bottom:.0625rem solid var(--x-border);background-color:var(--x-background);color:var(--x-text-300)}.x-transfer-title>span{margin-left:.325rem}.x-transfer-list{display:flex;flex-direction:column;padding:.25rem;height:18rem;overflow-y:auto}.x-transfer-list>li{padding:.125rem .25rem;border-radius:var(--x-border-radius);display:flex;align-items:center;border:.0625rem dashed transparent;transition:border-color var(--x-animation-duration-base),background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-transfer-list.cdk-drop-list-dragging>li:hover{background-color:transparent}.x-transfer-list.cdk-drop-list-dragging>li.cdk-drag-placeholder{border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.9}.x-transfer-list.cdk-drop-list-dragging>li:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}.x-transfer-buttons{margin:0 1rem;display:flex;flex-direction:column}.x-transfer-buttons>x-button:not(:first-child){margin-top:.5rem}.x-transfer-search{padding:.5rem;border-bottom:.0625rem solid var(--x-border)}body>li.x-transfer-item.cdk-drag-preview{padding:.125rem .25rem;border-radius:var(--x-border-radius);display:flex;align-items:center;border:.0625rem dashed transparent;border-color:var(--x-primary);color:var(--x-primary);background-color:var(--x-background);opacity:.8}body>li.x-transfer-item.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"], components: [{ type: i2.XButtonComponent, selector: "x-button" }, { type: i3.XCheckboxComponent, selector: "x-checkbox" }], directives: [{ type: i4.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTransferComponent, decorators: [{
+            type: Component,
+            args: [{ selector: `${XTransferPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XTransferComponent)], template: "<div #transfer class=\"x-transfer\" cdkDropListGroup [ngClass]=\"classMap\">\r\n  <div class=\"x-transfer-box\">\r\n    <ng-container *ngTemplateOutlet=\"sourceTitleTpl; context: { source: left }\"></ng-container>\r\n    <ul\r\n      class=\"x-transfer-list\"\r\n      cdkDropList\r\n      (cdkDropListDropped)=\"dropCdk($event)\"\r\n      [cdkDropListData]=\"left.list\"\r\n      [cdkDropListDisabled]=\"!drag\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      <li class=\"x-transfer-item\" *ngFor=\"let node of left.list; trackBy: trackByNode\" cdkDrag [cdkDragData]=\"node\">\r\n        <ng-container *ngTemplateOutlet=\"sourceNodeTpl; context: { node: node, source: left }\"></ng-container>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n  <div class=\"x-transfer-buttons\">\r\n    <x-button type=\"primary\" icon=\"fto-chevron-right\" [disabled]=\"left.disabledButton\" (click)=\"move(left, right)\"></x-button>\r\n    <x-button type=\"primary\" icon=\"fto-chevron-left\" [disabled]=\"right.disabledButton\" (click)=\"move(right, left)\"></x-button>\r\n  </div>\r\n  <div class=\"x-transfer-box\">\r\n    <ng-container *ngTemplateOutlet=\"sourceTitleTpl; context: { source: right }\"></ng-container>\r\n    <ul\r\n      class=\"x-transfer-list\"\r\n      cdkDropList\r\n      (cdkDropListDropped)=\"dropCdk($event)\"\r\n      [cdkDropListData]=\"right.list\"\r\n      [cdkDropListDisabled]=\"!drag\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      <li class=\"x-transfer-item\" *ngFor=\"let node of right.list; trackBy: trackByNode\" cdkDrag [cdkDragData]=\"node\">\r\n        <ng-container *ngTemplateOutlet=\"sourceNodeTpl; context: { node: node, source: right }\"></ng-container>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #sourceTitleTpl let-source=\"source\">\r\n  <div class=\"x-transfer-title\">\r\n    <x-checkbox\r\n      [data]=\"[titleTpl ? '' : source.title]\"\r\n      [(ngModel)]=\"source.checkedAll\"\r\n      (ngModelChange)=\"checkedAllChange($event, source)\"\r\n      [indeterminate]=\"source.indeterminate\"\r\n    ></x-checkbox>\r\n    <ng-container *xOutlet=\"titleTpl; context: { $title: source.title, $checkedCount: source.checkedCount, $count: source.list.length }\"\r\n      ><span>{{ source.checkedCount }} / {{ source.list.length }}</span></ng-container\r\n    >\r\n  </div>\r\n  <!-- <div class=\"x-transfer-search\" *ngIf=\"search\">\r\n    <x-input\r\n      icon=\"fto-search\"\r\n      [(ngModel)]=\"source.searchInput\"\r\n      (ngModelChange)=\"searchInputChange(source)\"\r\n      clearable\r\n    ></x-input>\r\n  </div> -->\r\n</ng-template>\r\n\r\n<ng-template #sourceNodeTpl let-node=\"node\" let-source=\"source\">\r\n  <x-checkbox\r\n    [data]=\"[{ id: node.id, label: nodeTpl ? nodeTpl : node.label, node: node }]\"\r\n    [disabled]=\"node.disabled\"\r\n    [(ngModel)]=\"node.checked\"\r\n    (ngModelChange)=\"checkedChange($event, source)\"\r\n  ></x-checkbox>\r\n</ng-template>\r\n", styles: [".x-transfer{margin:0;padding:0;display:inline-flex;align-items:center}.x-transfer-box{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);width:12rem}.x-transfer-title{padding:.25rem .5625rem;display:flex;align-items:center;justify-content:space-between;border-bottom:.0625rem solid var(--x-border);background-color:var(--x-background);color:var(--x-text-300)}.x-transfer-title>span{margin-left:.325rem}.x-transfer-list{display:flex;flex-direction:column;padding:.25rem;height:18rem;overflow-y:auto}.x-transfer-list>li{padding:.125rem .25rem;border-radius:var(--x-border-radius);display:flex;align-items:center;border:.0625rem dashed transparent;transition:border-color var(--x-animation-duration-base),background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-transfer-list.cdk-drop-list-dragging>li:hover{background-color:transparent}.x-transfer-list.cdk-drop-list-dragging>li.cdk-drag-placeholder{border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.9}.x-transfer-list.cdk-drop-list-dragging>li:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}.x-transfer-buttons{margin:0 1rem;display:flex;flex-direction:column}.x-transfer-buttons>x-button:not(:first-child){margin-top:.5rem}.x-transfer-search{padding:.5rem;border-bottom:.0625rem solid var(--x-border)}body>li.x-transfer-item.cdk-drag-preview{padding:.125rem .25rem;border-radius:var(--x-border-radius);display:flex;align-items:center;border:.0625rem dashed transparent;border-color:var(--x-primary);color:var(--x-primary);background-color:var(--x-background);opacity:.8}body>li.x-transfer-item.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XConfigService }]; } });
+
+class XTransferModule {
+}
+/** @nocollapse */ /** @nocollapse */ XTransferModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTransferModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ XTransferModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTransferModule, declarations: [XTransferComponent, XTransferProperty], imports: [CommonModule, FormsModule, DragDropModule, XOutletModule, XCheckboxModule, XButtonModule, XInputModule, XBaseFormModule], exports: [XTransferComponent] });
+/** @nocollapse */ /** @nocollapse */ XTransferModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTransferModule, imports: [[CommonModule, FormsModule, DragDropModule, XOutletModule, XCheckboxModule, XButtonModule, XInputModule, XBaseFormModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTransferModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [XTransferComponent, XTransferProperty],
+                    exports: [XTransferComponent],
+                    imports: [CommonModule, FormsModule, DragDropModule, XOutletModule, XCheckboxModule, XButtonModule, XInputModule, XBaseFormModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { XTransferComponent, XTransferModule, XTransferPrefix, XTransferProperty };
+//# sourceMappingURL=ng-nest-ui-transfer.mjs.map

package/fesm2020/ng-nest-ui-transfer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-nest-ui-transfer.mjs","sources":["../../../../lib/ng-nest/ui/transfer/transfer.property.ts","../../../../lib/ng-nest/ui/transfer/transfer.component.ts","../../../../lib/ng-nest/ui/transfer/transfer.component.html","../../../../lib/ng-nest/ui/transfer/transfer.module.ts","../../../../lib/ng-nest/ui/transfer/ng-nest-ui-transfer.ts"],"sourcesContent":["import {\r\n  XData,\r\n  XDataConvert,\r\n  XInputBoolean,\r\n  XParentIdentityProperty,\r\n  XBoolean,\r\n  XWithConfig\r\n} from '@ng-nest/ui/core';\r\nimport { TemplateRef, Input, Component } from '@angular/core';\r\nimport { XControlValueAccessor } from '@ng-nest/ui/base-form';\r\n\r\n/**\r\n * Transfer\r\n * @selector x-transfer\r\n * @decorator component\r\n */\r\nexport const XTransferPrefix = 'x-transfer';\r\n\r\nconst X_CONFIG_NAME = 'transfer';\r\n\r\n/**\r\n * Transfer Property\r\n */\r\n@Component({ template: '' })\r\nexport class XTransferProperty extends XControlValueAccessor<any[]> {\r\n  /**\r\n   * @zh_CN 数据对象\r\n   * @en_US Data object\r\n   */\r\n  @Input() @XDataConvert() data: XData<XTransferNode> = [];\r\n  /**\r\n   * @zh_CN 标题\r\n   * @en_US Title\r\n   */\r\n  @Input() @XWithConfig<string[]>(X_CONFIG_NAME) titles!: string[];\r\n  /**\r\n   * @zh_CN 是否能拖动\r\n   * @en_US Can drag\r\n   */\r\n  @Input() @XWithConfig<XBoolean>(X_CONFIG_NAME) @XInputBoolean() drag?: XBoolean;\r\n  /**\r\n   * @zh_CN 是否显示搜索（暂未实现）\r\n   * @en_US Whether to display search (not implemented yet)\r\n   */\r\n  @Input() @XInputBoolean() search?: XBoolean;\r\n  /**\r\n   * @zh_CN 数据自定义模板\r\n   * @en_US Data customization template\r\n   */\r\n  @Input() nodeTpl?: TemplateRef<any>;\r\n  /**\r\n   * @zh_CN 标题自定义模板\r\n   * @en_US Title custom template\r\n   */\r\n  @Input() titleTpl?: TemplateRef<any>;\r\n}\r\n\r\n/**\r\n * Transfer Node\r\n */\r\nexport interface XTransferNode extends XParentIdentityProperty<XTransferNode> {\r\n  /**\r\n   * @zh_CN checkbox 是否选中\r\n   * @en_US whether checkbox is selected\r\n   */\r\n  checked?: boolean;\r\n  /**\r\n   * @zh_CN 序号\r\n   * @en_US Serial number\r\n   */\r\n  index?: number;\r\n}\r\n\r\n/**\r\n * Transfer Source\r\n */\r\nexport interface XTransferSource {\r\n  /**\r\n   * @zh_CN 标题\r\n   * @en_US Title\r\n   */\r\n  title?: string;\r\n  /**\r\n   * @zh_CN 搜索的数据\r\n   * @en_US Searched data\r\n   */\r\n  searchInput?: string;\r\n  /**\r\n   * @zh_CN 全选\r\n   * @en_US Select all\r\n   */\r\n  checkedAll?: boolean;\r\n  /**\r\n   * @zh_CN 选中的数量\r\n   * @en_US Selected quantity\r\n   */\r\n  checkedCount?: number;\r\n  /**\r\n   * @zh_CN 不确定状态的样式\r\n   * @en_US Uncertain state style\r\n   */\r\n  indeterminate?: boolean;\r\n  /**\r\n   * @zh_CN 列表数据\r\n   * @en_US List data\r\n   */\r\n  list?: XTransferNode[];\r\n  /**\r\n   * @zh_CN 搜索数据，用来还原\r\n   * @en_US Search data to restore\r\n   */\r\n  searchList?: XTransferNode[];\r\n  /**\r\n   * @zh_CN 按钮禁用\r\n   * @en_US Button disabled\r\n   */\r\n  disabledButton?: boolean;\r\n}\r\n","import {\r\n  Component,\r\n  OnInit,\r\n  ViewEncapsulation,\r\n  Renderer2,\r\n  ElementRef,\r\n  ChangeDetectorRef,\r\n  ChangeDetectionStrategy,\r\n  SimpleChanges,\r\n  OnChanges,\r\n  OnDestroy\r\n} from '@angular/core';\r\nimport { XTransferPrefix, XTransferNode, XTransferSource, XTransferProperty } from './transfer.property';\r\nimport { XIsChange, XIsEmpty, XSetData, XConfigService } from '@ng-nest/ui/core';\r\nimport { of, Subject } from 'rxjs';\r\nimport { delay, takeUntil } from 'rxjs/operators';\r\nimport { transferArrayItem, moveItemInArray, CdkDragDrop, CdkDrag } from '@angular/cdk/drag-drop';\r\nimport { XValueAccessor } from '@ng-nest/ui/base-form';\r\n\r\n@Component({\r\n  selector: `${XTransferPrefix}`,\r\n  templateUrl: './transfer.component.html',\r\n  styleUrls: ['./transfer.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  providers: [XValueAccessor(XTransferComponent)]\r\n})\r\nexport class XTransferComponent extends XTransferProperty implements OnInit, OnChanges, OnDestroy {\r\n  nodes: XTransferNode[] = [];\r\n  left: XTransferSource = {\r\n    list: [],\r\n    searchList: [],\r\n    checkedCount: 0,\r\n    disabledButton: true\r\n  };\r\n  right: XTransferSource = {\r\n    list: [],\r\n    searchList: [],\r\n    checkedCount: 0,\r\n    disabledButton: true\r\n  };\r\n  searchInput: string = '';\r\n  private _titles = ['List', 'Selected'];\r\n  private _unSubject = new Subject<void>();\r\n\r\n  override writeValue(value: any): void {\r\n    this.value = value;\r\n    this.setList();\r\n  }\r\n\r\n  constructor(\r\n    public renderer: Renderer2,\r\n    public elementRef: ElementRef,\r\n    public cdr: ChangeDetectorRef,\r\n    public configService: XConfigService\r\n  ) {\r\n    super();\r\n  }\r\n\r\n  ngOnInit() {\r\n    this.setTitles();\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges) {\r\n    const { data } = changes;\r\n    XIsChange(data) && this.setData();\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this._unSubject.next();\r\n    this._unSubject.unsubscribe();\r\n  }\r\n\r\n  searchInputChange(source: XTransferSource) {\r\n    source.list = source.searchList?.filter((x) => x.label.indexOf(source.searchInput) >= 0);\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  checkedAllChange($event: boolean, source: XTransferSource) {\r\n    let list = (source.list?.filter((x) => !x.disabled) as XTransferNode[]).map((x) => {\r\n      x.checked = $event;\r\n      return x;\r\n    });\r\n    source.checkedCount = $event ? list.length : 0;\r\n    source.indeterminate = $event;\r\n    this.setButtonDisabled(source);\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  checkedChange($event: boolean, source: XTransferSource) {\r\n    if (!$event) (source.checkedCount as number)--;\r\n    else (source.checkedCount as number)++;\r\n    this.setCheckedAll(source);\r\n    this.setButtonDisabled(source);\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  move(from: XTransferSource, to: XTransferSource) {\r\n    if (from.disabledButton) return;\r\n    let checkedItems = from.list?.filter((x) => !XIsEmpty(x.checked)) as XTransferNode[];\r\n    let j = 0;\r\n    checkedItems.forEach((x) => {\r\n      const index = from.list?.indexOf(x) as number;\r\n      x.checked = false;\r\n      transferArrayItem(from.list as XTransferNode[], to.list as XTransferNode[], index, j);\r\n      j++;\r\n    });\r\n    from.checkedAll = false;\r\n    from.checkedCount = 0;\r\n    from.indeterminate = false;\r\n    from.disabledButton = true;\r\n    this.setSearchList(from, to);\r\n    this.setValue();\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  dropCdk(event: CdkDragDrop<XTransferNode[] | undefined, any>) {\r\n    const ev = event as CdkDragDrop<XTransferNode[]>;\r\n    if (ev.previousContainer === ev.container) {\r\n      moveItemInArray(ev.container.data, ev.previousIndex, ev.currentIndex);\r\n    } else {\r\n      transferArrayItem(ev.previousContainer.data, ev.container.data, ev.previousIndex, ev.currentIndex);\r\n      this.setCheckedCount(this.left, this.right);\r\n      this.setCheckedAll(this.left, this.right);\r\n      this.setButtonDisabled(this.left, this.right);\r\n    }\r\n    this.setSearchList(this.left, this.right);\r\n    this.setValue();\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  predicate(item: CdkDrag<XTransferNode>) {\r\n    return !item.data.disabled;\r\n  }\r\n\r\n  trackByNode(_index: number, item: XTransferNode) {\r\n    return item.id;\r\n  }\r\n\r\n  private setCheckedAll(...sources: XTransferSource[]) {\r\n    for (let source of sources) {\r\n      if ((source.checkedCount as number) > 0) {\r\n        if (source.checkedCount === source.list?.filter((x) => !x.disabled).length) {\r\n          source.checkedAll = true;\r\n        } else {\r\n          source.checkedAll = false;\r\n          source.indeterminate = true;\r\n        }\r\n      } else {\r\n        source.indeterminate = false;\r\n      }\r\n    }\r\n  }\r\n\r\n  private setCheckedCount(...sources: XTransferSource[]) {\r\n    for (let source of sources) source.checkedCount = source.list?.filter((x) => !XIsEmpty(x.checked)).length;\r\n  }\r\n\r\n  private setButtonDisabled(...sources: XTransferSource[]) {\r\n    for (let source of sources) source.disabledButton = source.checkedCount === 0;\r\n  }\r\n\r\n  private setValue() {\r\n    this.value = this.right.list?.map((x) => x.id) as any[];\r\n    this.onChange(this.value);\r\n  }\r\n\r\n  private setSearchList(...sources: XTransferSource[]) {\r\n    if (this.search) {\r\n      for (let source of sources) {\r\n        if (XIsEmpty(source.searchInput)) {\r\n          source.searchList = [...(source.list as XTransferNode[])];\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  private setData() {\r\n    XSetData<XTransferNode>(this.data, this._unSubject).subscribe((x) => {\r\n      this.nodes = x;\r\n    });\r\n  }\r\n\r\n  private setList() {\r\n    if (!XIsEmpty(this.value)) {\r\n      this.left.list = this.nodes.filter((x) => this.value.indexOf(x.id) < 0);\r\n      this.right.list = this.nodes.filter((x) => this.value.indexOf(x.id) >= 0);\r\n    } else {\r\n      this.left.list = this.nodes;\r\n    }\r\n    this.setSearchList(this.left, this.right);\r\n    // ToDo: x-checkbox error. Attempt to use a destroyed view: detectChanges\r\n    of(true)\r\n      .pipe(delay(0), takeUntil(this._unSubject))\r\n      .subscribe(() => this.cdr.detectChanges());\r\n  }\r\n\r\n  private setTitles() {\r\n    if (XIsEmpty(this.titles)) {\r\n      this.titles = this._titles;\r\n    }\r\n    this.left.title = this.titles[0];\r\n    if (this.titles.length > 1) this.right.title = this.titles[1];\r\n    this.cdr.detectChanges();\r\n  }\r\n}\r\n","<div #transfer class=\"x-transfer\" cdkDropListGroup [ngClass]=\"classMap\">\r\n  <div class=\"x-transfer-box\">\r\n    <ng-container *ngTemplateOutlet=\"sourceTitleTpl; context: { source: left }\"></ng-container>\r\n    <ul\r\n      class=\"x-transfer-list\"\r\n      cdkDropList\r\n      (cdkDropListDropped)=\"dropCdk($event)\"\r\n      [cdkDropListData]=\"left.list\"\r\n      [cdkDropListDisabled]=\"!drag\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      <li class=\"x-transfer-item\" *ngFor=\"let node of left.list; trackBy: trackByNode\" cdkDrag [cdkDragData]=\"node\">\r\n        <ng-container *ngTemplateOutlet=\"sourceNodeTpl; context: { node: node, source: left }\"></ng-container>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n  <div class=\"x-transfer-buttons\">\r\n    <x-button type=\"primary\" icon=\"fto-chevron-right\" [disabled]=\"left.disabledButton\" (click)=\"move(left, right)\"></x-button>\r\n    <x-button type=\"primary\" icon=\"fto-chevron-left\" [disabled]=\"right.disabledButton\" (click)=\"move(right, left)\"></x-button>\r\n  </div>\r\n  <div class=\"x-transfer-box\">\r\n    <ng-container *ngTemplateOutlet=\"sourceTitleTpl; context: { source: right }\"></ng-container>\r\n    <ul\r\n      class=\"x-transfer-list\"\r\n      cdkDropList\r\n      (cdkDropListDropped)=\"dropCdk($event)\"\r\n      [cdkDropListData]=\"right.list\"\r\n      [cdkDropListDisabled]=\"!drag\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      <li class=\"x-transfer-item\" *ngFor=\"let node of right.list; trackBy: trackByNode\" cdkDrag [cdkDragData]=\"node\">\r\n        <ng-container *ngTemplateOutlet=\"sourceNodeTpl; context: { node: node, source: right }\"></ng-container>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #sourceTitleTpl let-source=\"source\">\r\n  <div class=\"x-transfer-title\">\r\n    <x-checkbox\r\n      [data]=\"[titleTpl ? '' : source.title]\"\r\n      [(ngModel)]=\"source.checkedAll\"\r\n      (ngModelChange)=\"checkedAllChange($event, source)\"\r\n      [indeterminate]=\"source.indeterminate\"\r\n    ></x-checkbox>\r\n    <ng-container *xOutlet=\"titleTpl; context: { $title: source.title, $checkedCount: source.checkedCount, $count: source.list.length }\"\r\n      ><span>{{ source.checkedCount }} / {{ source.list.length }}</span></ng-container\r\n    >\r\n  </div>\r\n  <!-- <div class=\"x-transfer-search\" *ngIf=\"search\">\r\n    <x-input\r\n      icon=\"fto-search\"\r\n      [(ngModel)]=\"source.searchInput\"\r\n      (ngModelChange)=\"searchInputChange(source)\"\r\n      clearable\r\n    ></x-input>\r\n  </div> -->\r\n</ng-template>\r\n\r\n<ng-template #sourceNodeTpl let-node=\"node\" let-source=\"source\">\r\n  <x-checkbox\r\n    [data]=\"[{ id: node.id, label: nodeTpl ? nodeTpl : node.label, node: node }]\"\r\n    [disabled]=\"node.disabled\"\r\n    [(ngModel)]=\"node.checked\"\r\n    (ngModelChange)=\"checkedChange($event, source)\"\r\n  ></x-checkbox>\r\n</ng-template>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { XTransferComponent } from './transfer.component';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { XCheckboxModule } from '@ng-nest/ui/checkbox';\r\nimport { XButtonModule } from '@ng-nest/ui/button';\r\nimport { DragDropModule } from '@angular/cdk/drag-drop';\r\nimport { XInputModule } from '@ng-nest/ui/input';\r\nimport { XOutletModule } from '@ng-nest/ui/outlet';\r\nimport { XTransferProperty } from './transfer.property';\r\nimport { XBaseFormModule } from '@ng-nest/ui/base-form';\r\n\r\n@NgModule({\r\n  declarations: [XTransferComponent, XTransferProperty],\r\n  exports: [XTransferComponent],\r\n  imports: [CommonModule, FormsModule, DragDropModule, XOutletModule, XCheckboxModule, XButtonModule, XInputModule, XBaseFormModule]\r\n})\r\nexport class XTransferModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2020/ng-nest-ui-tree-file.mjs

@@ -0,0 +1,230 @@
+import * as i0 from '@angular/core';
+import { Component, Input, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { __decorate } from 'tslib';
+import * as i2 from '@ng-nest/ui/core';
+import { XDataConvert, XInputBoolean, XWithConfig, XInputNumber, XIsEmpty } from '@ng-nest/ui/core';
+import * as i3 from '@ng-nest/ui/tree';
+import { XTreeProperty, XTreeModule } from '@ng-nest/ui/tree';
+import { delay } from 'rxjs/operators';
+import * as i1 from '@angular/common/http';
+import { HttpClientModule } from '@angular/common/http';
+import * as i4 from '@ng-nest/ui/loading';
+import { XLoadingModule } from '@ng-nest/ui/loading';
+import * as i5 from '@ng-nest/ui/link';
+import { XLinkModule } from '@ng-nest/ui/link';
+import * as i6 from '@ng-nest/ui/crumb';
+import { XCrumbModule } from '@ng-nest/ui/crumb';
+import * as i7 from '@ng-nest/ui/icon';
+import { XIconModule } from '@ng-nest/ui/icon';
+import * as i8 from '@ng-nest/ui/highlight';
+import { XHighlightModule } from '@ng-nest/ui/highlight';
+import * as i9 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+/**
+ * TreeFile
+ * @selector x-tree-file
+ * @decorator component
+ */
+const XTreeFilePrefix = 'x-tree-file';
+const X_CONFIG_NAME = 'treeFile';
+/**
+ * TreeFile Property
+ */
+class XTreeFileProperty extends XTreeProperty {
+    constructor() {
+        super(...arguments);
+        /**
+         * @zh_CN 节点数据
+         * @en_US Node data
+         */
+        this.data = [];
+        /**
+         * @zh_CN 文件绝对路径地址前缀，为空表示取当前运行的地址
+         * @en_US File absolute path address prefix, empty means to take the address of the current operation
+         */
+        this.domain = '';
+        /**
+         * @zh_CN 切换状态
+         * @en_US Switch state
+         */
+        this.toggle = true;
+        /**
+         * @zh_CN 显示切换按钮
+         * @en_US Show toggle button
+         */
+        this.showToggle = true;
+        /**
+         * @zh_CN 显示树，为 true 的时候隐藏切换按钮
+         * @en_US Show the tree, hide the toggle button when true
+         */
+        this.showTree = true;
+        /**
+         * @zh_CN 显示面包屑
+         * @en_US Show breadcrumbs
+         */
+        this.showCrumb = true;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ XTreeFileProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTreeFileProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XTreeFileProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: XTreeFileProperty, selector: "ng-component", inputs: { data: "data", domain: "domain", toggle: "toggle", showToggle: "showToggle", showTree: "showTree", showCrumb: "showCrumb", maxHeight: "maxHeight", spacing: "spacing" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+__decorate([
+    XDataConvert()
+], XTreeFileProperty.prototype, "data", void 0);
+__decorate([
+    XInputBoolean()
+], XTreeFileProperty.prototype, "toggle", void 0);
+__decorate([
+    XInputBoolean()
+], XTreeFileProperty.prototype, "showToggle", void 0);
+__decorate([
+    XInputBoolean()
+], XTreeFileProperty.prototype, "showTree", void 0);
+__decorate([
+    XInputBoolean()
+], XTreeFileProperty.prototype, "showCrumb", void 0);
+__decorate([
+    XWithConfig(X_CONFIG_NAME, 37.5),
+    XInputNumber()
+], XTreeFileProperty.prototype, "maxHeight", void 0);
+__decorate([
+    XWithConfig(X_CONFIG_NAME, 0.5),
+    XInputNumber()
+], XTreeFileProperty.prototype, "spacing", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTreeFileProperty, decorators: [{
+            type: Component,
+            args: [{ template: '' }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], domain: [{
+                type: Input
+            }], toggle: [{
+                type: Input
+            }], showToggle: [{
+                type: Input
+            }], showTree: [{
+                type: Input
+            }], showCrumb: [{
+                type: Input
+            }], maxHeight: [{
+                type: Input
+            }], spacing: [{
+                type: Input
+            }] } });
+/**
+ * @zh_CN 支持显示的图片格式
+ * @en_US Supported picture format
+ */
+const XTreeFileImgs = ['webp', 'png', 'jpg', 'gif', 'jpeg', 'ico'];
+
+class XTreeFileComponent extends XTreeFileProperty {
+    constructor(renderer, elementRef, cdr, http, configService) {
+        super();
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.http = http;
+        this.configService = configService;
+        this.loading = false;
+        this.timeout = 200;
+    }
+    get catalogHeight() {
+        return Number(this.maxHeight);
+    }
+    get codeHeight() {
+        return Number(this.maxHeight) - (Boolean(this.showCrumb) ? 1.5 : 0);
+    }
+    get getCrumbData() {
+        return this.activatedNode?.crumbData;
+    }
+    get getHighlightLines() {
+        return this.activatedNode?.highlightLines;
+    }
+    ngOnInit() {
+        if (!this.showTree && this.activatedId) {
+            this.catalogChange(this.data.find((x) => x.id == this.activatedId));
+        }
+    }
+    catalogChange(node) {
+        if (node?.leaf)
+            return;
+        if (node.url && !node.contentLoaded) {
+            this.time = new Date().getTime();
+            this.loading = true;
+            this.cdr.detectChanges();
+            this.activatedNode = node;
+            node.fileType = XTreeFileImgs.indexOf(node.type.toLowerCase()) !== -1 ? 'img' : 'code';
+            node.crumbData = this.setCurmbData(node);
+            node.url = node.url?.indexOf(this.domain) === 0 ? node.url : `${this.domain}/${node.url}`;
+            switch (node.fileType) {
+                case 'code':
+                    this.http
+                        .get(node.url, { responseType: 'text' })
+                        .pipe(delay(new Date().getTime() - this.time > this.timeout ? 0 : this.timeout - new Date().getTime() + this.time))
+                        .subscribe((x) => {
+                        node.content = x;
+                        node.contentLoaded = true;
+                        this.loading = false;
+                        this.cdr.detectChanges();
+                    });
+                    break;
+                case 'img':
+                    this.cdr.detectChanges();
+                    break;
+            }
+        }
+        else {
+            this.activatedNode = node;
+            this.cdr.detectChanges();
+        }
+    }
+    imgOnload() {
+        this.loading = false;
+        this.cdr.detectChanges();
+    }
+    setCurmbData(node) {
+        let crumbData = [{ id: node.id, label: node.label }];
+        const getParent = (child) => {
+            if (XIsEmpty(child.pid))
+                return;
+            const parent = this.data.find((x) => x.id === child.pid);
+            if (!XIsEmpty(parent)) {
+                crumbData = [{ id: parent.id, label: parent.label }, ...crumbData];
+                getParent(parent);
+            }
+        };
+        getParent(node);
+        return crumbData;
+    }
+    menuToggle() {
+        this.toggle = !this.toggle;
+        this.cdr.detectChanges();
+    }
+}
+/** @nocollapse */ /** @nocollapse */ XTreeFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTreeFileComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.HttpClient }, { token: i2.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XTreeFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: XTreeFileComponent, selector: "x-tree-file", usesInheritance: true, ngImport: i0, template: "<div #treeFile class=\"x-tree-file\" [ngClass]=\"classMap\" [class.x-tree-file-toggle]=\"toggle\">\r\n  <div class=\"x-tree-file-catalog\" [style.max-height.rem]=\"catalogHeight\" *ngIf=\"showTree\">\r\n    <x-tree\r\n      [data]=\"data\"\r\n      (activatedChange)=\"catalogChange($event)\"\r\n      nodeOpen\r\n      [expandedAll]=\"expandedAll\"\r\n      [expandedLevel]=\"expandedLevel\"\r\n      [expanded]=\"expanded\"\r\n      [spacing]=\"spacing\"\r\n      [activatedId]=\"activatedId\"\r\n    ></x-tree>\r\n  </div>\r\n  <div class=\"x-tree-file-body\" [x-loading]=\"loading\">\r\n    <div class=\"x-tree-file-crumb\" *ngIf=\"showCrumb\">\r\n      <x-link icon=\"fto-menu\" *ngIf=\"showToggle && showTree\" (click)=\"menuToggle()\"></x-link>\r\n      <x-crumb [data]=\"getCrumbData\" [separator]=\"separatorTpl\"></x-crumb>\r\n      <ng-template #separatorTpl>\r\n        <x-icon type=\"fto-chevron-right\"></x-icon>\r\n      </ng-template>\r\n    </div>\r\n    <div class=\"x-tree-file-content\" [style.max-height.rem]=\"codeHeight\" [ngSwitch]=\"activatedNode?.fileType\">\r\n      <div *ngSwitchCase=\"'img'\" class=\"x-tree-file-img\"><img [src]=\"activatedNode?.url\" (load)=\"imgOnload()\"/></div>\r\n      <x-highlight\r\n        *ngSwitchCase=\"'code'\"\r\n        [type]=\"activatedNode?.type\"\r\n        [data]=\"activatedNode?.content\"\r\n        [highlightLines]=\"getHighlightLines\"\r\n      ></x-highlight>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".x-tree-file{margin:0;padding:0;display:flex;background-color:var(--x-background);border-radius:var(--x-border-radius);border:var(--x-border-width) var(--x-border-style) var(--x-border);color:var(--x-text)}.x-tree-file-catalog{width:0;overflow:auto;opacity:0;font-size:.8125rem;transition:var(--x-animation-duration-slow)}.x-tree-file-catalog .x-tree{padding:.5rem}.x-tree-file-catalog .x-tree-node-content{height:1.375rem}.x-tree-file-catalog .x-tree-node-content:hover{background-color:var(--x-border)}.x-tree-file-catalog .x-tree-node-content.x-activated{background-color:var(--x-border)}.x-tree-file-body{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.x-tree-file-crumb{background-color:var(--x-background);display:flex}.x-tree-file-crumb>x-link{line-height:1.5rem;height:1.5rem;transition:var(--x-animation-duration-base)}.x-tree-file-crumb>x-link>a{padding:0 .5rem}.x-tree-file-crumb>x-crumb{flex:1}.x-tree-file-crumb>x-crumb>.x-crumb{padding:0 .5rem;color:var(--x-text-300)}.x-tree-file-crumb>x-crumb>.x-crumb .x-crumb-separator{margin:0 .125rem}.x-tree-file-content{flex:1;overflow:auto;transition:var(--x-animation-duration-slow);display:flex;min-height:3rem}.x-tree-file-content>x-highlight{border:none}.x-tree-file-content>x-highlight>pre{overflow:inherit}.x-tree-file-content>.x-tree-file-img{margin:auto;padding:1.5rem;display:flex;align-items:center}.x-tree-file-content>.x-tree-file-img>img{max-width:100%;height:auto;margin:auto;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);border-radius:var(--x-border-radius);background-color:var(--x-background-a100)}.x-tree-file-toggle>.x-tree-file-catalog{width:16rem;opacity:1;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}\n"], components: [{ type: i3.XTreeComponent, selector: "x-tree" }, { type: i4.XLoadingComponent, selector: "x-loading, [x-loading]" }, { type: i5.XLinkComponent, selector: "x-link" }, { type: i6.XCrumbComponent, selector: "x-crumb" }, { type: i7.XIconComponent, selector: "x-icon" }, { type: i8.XHighlightComponent, selector: "x-highlight" }], directives: [{ type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i9.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTreeFileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: `${XTreeFilePrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #treeFile class=\"x-tree-file\" [ngClass]=\"classMap\" [class.x-tree-file-toggle]=\"toggle\">\r\n  <div class=\"x-tree-file-catalog\" [style.max-height.rem]=\"catalogHeight\" *ngIf=\"showTree\">\r\n    <x-tree\r\n      [data]=\"data\"\r\n      (activatedChange)=\"catalogChange($event)\"\r\n      nodeOpen\r\n      [expandedAll]=\"expandedAll\"\r\n      [expandedLevel]=\"expandedLevel\"\r\n      [expanded]=\"expanded\"\r\n      [spacing]=\"spacing\"\r\n      [activatedId]=\"activatedId\"\r\n    ></x-tree>\r\n  </div>\r\n  <div class=\"x-tree-file-body\" [x-loading]=\"loading\">\r\n    <div class=\"x-tree-file-crumb\" *ngIf=\"showCrumb\">\r\n      <x-link icon=\"fto-menu\" *ngIf=\"showToggle && showTree\" (click)=\"menuToggle()\"></x-link>\r\n      <x-crumb [data]=\"getCrumbData\" [separator]=\"separatorTpl\"></x-crumb>\r\n      <ng-template #separatorTpl>\r\n        <x-icon type=\"fto-chevron-right\"></x-icon>\r\n      </ng-template>\r\n    </div>\r\n    <div class=\"x-tree-file-content\" [style.max-height.rem]=\"codeHeight\" [ngSwitch]=\"activatedNode?.fileType\">\r\n      <div *ngSwitchCase=\"'img'\" class=\"x-tree-file-img\"><img [src]=\"activatedNode?.url\" (load)=\"imgOnload()\"/></div>\r\n      <x-highlight\r\n        *ngSwitchCase=\"'code'\"\r\n        [type]=\"activatedNode?.type\"\r\n        [data]=\"activatedNode?.content\"\r\n        [highlightLines]=\"getHighlightLines\"\r\n      ></x-highlight>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".x-tree-file{margin:0;padding:0;display:flex;background-color:var(--x-background);border-radius:var(--x-border-radius);border:var(--x-border-width) var(--x-border-style) var(--x-border);color:var(--x-text)}.x-tree-file-catalog{width:0;overflow:auto;opacity:0;font-size:.8125rem;transition:var(--x-animation-duration-slow)}.x-tree-file-catalog .x-tree{padding:.5rem}.x-tree-file-catalog .x-tree-node-content{height:1.375rem}.x-tree-file-catalog .x-tree-node-content:hover{background-color:var(--x-border)}.x-tree-file-catalog .x-tree-node-content.x-activated{background-color:var(--x-border)}.x-tree-file-body{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.x-tree-file-crumb{background-color:var(--x-background);display:flex}.x-tree-file-crumb>x-link{line-height:1.5rem;height:1.5rem;transition:var(--x-animation-duration-base)}.x-tree-file-crumb>x-link>a{padding:0 .5rem}.x-tree-file-crumb>x-crumb{flex:1}.x-tree-file-crumb>x-crumb>.x-crumb{padding:0 .5rem;color:var(--x-text-300)}.x-tree-file-crumb>x-crumb>.x-crumb .x-crumb-separator{margin:0 .125rem}.x-tree-file-content{flex:1;overflow:auto;transition:var(--x-animation-duration-slow);display:flex;min-height:3rem}.x-tree-file-content>x-highlight{border:none}.x-tree-file-content>x-highlight>pre{overflow:inherit}.x-tree-file-content>.x-tree-file-img{margin:auto;padding:1.5rem;display:flex;align-items:center}.x-tree-file-content>.x-tree-file-img>img{max-width:100%;height:auto;margin:auto;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);border-radius:var(--x-border-radius);background-color:var(--x-background-a100)}.x-tree-file-toggle>.x-tree-file-catalog{width:16rem;opacity:1;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.HttpClient }, { type: i2.XConfigService }]; } });
+
+class XTreeFileModule {
+}
+/** @nocollapse */ /** @nocollapse */ XTreeFileModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTreeFileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ XTreeFileModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTreeFileModule, declarations: [XTreeFileComponent, XTreeFileProperty], imports: [CommonModule, HttpClientModule, XTreeModule, XLinkModule, XCrumbModule, XIconModule, XLoadingModule, XHighlightModule], exports: [XTreeFileComponent] });
+/** @nocollapse */ /** @nocollapse */ XTreeFileModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTreeFileModule, imports: [[CommonModule, HttpClientModule, XTreeModule, XLinkModule, XCrumbModule, XIconModule, XLoadingModule, XHighlightModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTreeFileModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [XTreeFileComponent, XTreeFileProperty],
+                    exports: [XTreeFileComponent],
+                    imports: [CommonModule, HttpClientModule, XTreeModule, XLinkModule, XCrumbModule, XIconModule, XLoadingModule, XHighlightModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { XTreeFileComponent, XTreeFileImgs, XTreeFileModule, XTreeFilePrefix, XTreeFileProperty };
+//# sourceMappingURL=ng-nest-ui-tree-file.mjs.map

package/fesm2020/ng-nest-ui-tree-file.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-nest-ui-tree-file.mjs","sources":["../../../../lib/ng-nest/ui/tree-file/tree-file.property.ts","../../../../lib/ng-nest/ui/tree-file/tree-file.component.ts","../../../../lib/ng-nest/ui/tree-file/tree-file.component.html","../../../../lib/ng-nest/ui/tree-file/tree-file.module.ts","../../../../lib/ng-nest/ui/tree-file/ng-nest-ui-tree-file.ts"],"sourcesContent":["import { XDataConvert, XData, XInputBoolean, XBoolean, XInputNumber, XNumber, XWithConfig } from '@ng-nest/ui/core';\r\nimport { Component, Input } from '@angular/core';\r\nimport { XTreeNode, XTreeProperty } from '@ng-nest/ui/tree';\r\nimport { XCrumbNode } from '@ng-nest/ui/crumb';\r\nimport { XHighlightLines } from '@ng-nest/ui/highlight';\r\n\r\n/**\r\n * TreeFile\r\n * @selector x-tree-file\r\n * @decorator component\r\n */\r\nexport const XTreeFilePrefix = 'x-tree-file';\r\nconst X_CONFIG_NAME = 'treeFile';\r\n\r\n/**\r\n * TreeFile Property\r\n */\r\n@Component({ template: '' })\r\nexport class XTreeFileProperty extends XTreeProperty {\r\n  /**\r\n   * @zh_CN 节点数据\r\n   * @en_US Node data\r\n   */\r\n  @Input() @XDataConvert() override data: XData<XTreeFileNode> = [];\r\n  /**\r\n   * @zh_CN 文件绝对路径地址前缀，为空表示取当前运行的地址\r\n   * @en_US File absolute path address prefix, empty means to take the address of the current operation\r\n   */\r\n  @Input() domain: string = '';\r\n  /**\r\n   * @zh_CN 切换状态\r\n   * @en_US Switch state\r\n   */\r\n  @Input() @XInputBoolean() toggle: XBoolean = true;\r\n  /**\r\n   * @zh_CN 显示切换按钮\r\n   * @en_US Show toggle button\r\n   */\r\n  @Input() @XInputBoolean() showToggle: XBoolean = true;\r\n  /**\r\n   * @zh_CN 显示树，为 true 的时候隐藏切换按钮\r\n   * @en_US Show the tree, hide the toggle button when true\r\n   */\r\n  @Input() @XInputBoolean() showTree: XBoolean = true;\r\n  /**\r\n   * @zh_CN 显示面包屑\r\n   * @en_US Show breadcrumbs\r\n   */\r\n  @Input() @XInputBoolean() showCrumb: XBoolean = true;\r\n  /**\r\n   * @zh_CN 最大高度，单位 rem\r\n   * @en_US Maximum height, unit rem\r\n   */\r\n  @Input() @XWithConfig<XNumber>(X_CONFIG_NAME, 37.5) @XInputNumber() maxHeight?: XNumber;\r\n  /**\r\n   * @zh_CN 单位间距，这个与层级的乘积算出节点的左边距，单位 rem\r\n   * @en_US Unit spacing, the product of this and the level calculates the left margin of the node, the unit is rem\r\n   */\r\n  @Input() @XWithConfig<XNumber>(X_CONFIG_NAME, 0.5) @XInputNumber() override spacing?: XNumber;\r\n}\r\n\r\n/**\r\n * @zh_CN TreeFile 数据对象\r\n * @en_US TreeFile data object\r\n */\r\nexport interface XTreeFileNode extends XTreeNode {\r\n  /**\r\n   * @zh_CN 子节点\r\n   * @en_US Child node\r\n   */\r\n  children?: XTreeFileNode[];\r\n  /**\r\n   * @zh_CN 文件内容\r\n   * @en_US Document content\r\n   */\r\n  content?: string;\r\n  /**\r\n   * @zh_CN 文件类型\r\n   * @en_US File type\r\n   */\r\n  type?: string;\r\n  /**\r\n   * @zh_CN 文件分类\r\n   * @en_US File classification\r\n   */\r\n  fileType?: XTreeFileType;\r\n  /**\r\n   * @zh_CN 文件地址，配置了地址将从 url 中加载文件内容\r\n   * @en_US File address, the configured address will load the file content from url\r\n   */\r\n  url?: string;\r\n  /**\r\n   * @zh_CN 文件的面包屑数据\r\n   * @en_US Breadcrumb data\r\n   */\r\n  crumbData?: XCrumbNode[];\r\n  /**\r\n   * @zh_CN 文件内容已经加载过\r\n   * @en_US File content has been loaded\r\n   */\r\n  contentLoaded?: boolean;\r\n  /**\r\n   * @zh_CN 行高亮着色\r\n   * @en_US Line highlight coloring\r\n   */\r\n  highlightLines?: XHighlightLines;\r\n}\r\n\r\n/**\r\n * @zh_CN 文件分类\r\n * @en_US File classification\r\n */\r\nexport type XTreeFileType = 'code' | 'img';\r\n\r\n/**\r\n * @zh_CN 支持显示的图片格式\r\n * @en_US Supported picture format\r\n */\r\nexport const XTreeFileImgs = ['webp', 'png', 'jpg', 'gif', 'jpeg', 'ico'];\r\n","import { Component, ViewEncapsulation, Renderer2, ElementRef, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';\r\nimport { XTreeFilePrefix, XTreeFileProperty, XTreeFileNode, XTreeFileImgs } from './tree-file.property';\r\nimport { HttpClient } from '@angular/common/http';\r\nimport { XIsEmpty, XConfigService } from '@ng-nest/ui/core';\r\nimport { XCrumbNode } from '@ng-nest/ui/crumb';\r\nimport { delay } from 'rxjs/operators';\r\nimport { XHighlightLines } from '@ng-nest/ui/highlight';\r\n\r\n@Component({\r\n  selector: `${XTreeFilePrefix}`,\r\n  templateUrl: './tree-file.component.html',\r\n  styleUrls: ['./tree-file.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XTreeFileComponent extends XTreeFileProperty {\r\n  activatedNode!: XTreeFileNode;\r\n  loading: boolean = false;\r\n  time!: number;\r\n  timeout: number = 200;\r\n\r\n  get catalogHeight() {\r\n    return Number(this.maxHeight);\r\n  }\r\n\r\n  get codeHeight() {\r\n    return Number(this.maxHeight) - (Boolean(this.showCrumb) ? 1.5 : 0);\r\n  }\r\n\r\n  get getCrumbData() {\r\n    return this.activatedNode?.crumbData as XCrumbNode[];\r\n  }\r\n\r\n  get getHighlightLines() {\r\n    return this.activatedNode?.highlightLines as XHighlightLines;\r\n  }\r\n\r\n  constructor(\r\n    public renderer: Renderer2,\r\n    public elementRef: ElementRef,\r\n    public cdr: ChangeDetectorRef,\r\n    public http: HttpClient,\r\n    public configService: XConfigService\r\n  ) {\r\n    super();\r\n  }\r\n\r\n  ngOnInit() {\r\n    if (!this.showTree && this.activatedId) {\r\n      this.catalogChange((this.data as XTreeFileNode[]).find((x) => x.id == this.activatedId) as XTreeFileNode);\r\n    }\r\n  }\r\n\r\n  catalogChange(node: XTreeFileNode) {\r\n    if (node?.leaf) return;\r\n    if (node.url && !node.contentLoaded) {\r\n      this.time = new Date().getTime();\r\n      this.loading = true;\r\n      this.cdr.detectChanges();\r\n      this.activatedNode = node;\r\n      node.fileType = XTreeFileImgs.indexOf((node.type as string).toLowerCase()) !== -1 ? 'img' : 'code';\r\n      node.crumbData = this.setCurmbData(node);\r\n      node.url = node.url?.indexOf(this.domain) === 0 ? node.url : `${this.domain}/${node.url}`;\r\n      switch (node.fileType) {\r\n        case 'code':\r\n          this.http\r\n            .get(node.url, { responseType: 'text' })\r\n            .pipe(delay(new Date().getTime() - this.time > this.timeout ? 0 : this.timeout - new Date().getTime() + this.time))\r\n            .subscribe((x) => {\r\n              node.content = x;\r\n              node.contentLoaded = true;\r\n              this.loading = false;\r\n              this.cdr.detectChanges();\r\n            });\r\n          break;\r\n        case 'img':\r\n          this.cdr.detectChanges();\r\n          break;\r\n      }\r\n    } else {\r\n      this.activatedNode = node;\r\n      this.cdr.detectChanges();\r\n    }\r\n  }\r\n\r\n  imgOnload() {\r\n    this.loading = false;\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  setCurmbData(node: XTreeFileNode) {\r\n    let crumbData: XCrumbNode[] = [{ id: node.id, label: node.label }];\r\n    const getParent = (child: XTreeFileNode) => {\r\n      if (XIsEmpty(child.pid)) return;\r\n      const parent = (this.data as XTreeFileNode[]).find((x) => x.id === child.pid) as XTreeFileNode;\r\n      if (!XIsEmpty(parent)) {\r\n        crumbData = [{ id: parent.id, label: parent.label }, ...crumbData];\r\n        getParent(parent);\r\n      }\r\n    };\r\n    getParent(node);\r\n\r\n    return crumbData;\r\n  }\r\n\r\n  menuToggle() {\r\n    this.toggle = !this.toggle;\r\n    this.cdr.detectChanges();\r\n  }\r\n}\r\n","<div #treeFile class=\"x-tree-file\" [ngClass]=\"classMap\" [class.x-tree-file-toggle]=\"toggle\">\r\n  <div class=\"x-tree-file-catalog\" [style.max-height.rem]=\"catalogHeight\" *ngIf=\"showTree\">\r\n    <x-tree\r\n      [data]=\"data\"\r\n      (activatedChange)=\"catalogChange($event)\"\r\n      nodeOpen\r\n      [expandedAll]=\"expandedAll\"\r\n      [expandedLevel]=\"expandedLevel\"\r\n      [expanded]=\"expanded\"\r\n      [spacing]=\"spacing\"\r\n      [activatedId]=\"activatedId\"\r\n    ></x-tree>\r\n  </div>\r\n  <div class=\"x-tree-file-body\" [x-loading]=\"loading\">\r\n    <div class=\"x-tree-file-crumb\" *ngIf=\"showCrumb\">\r\n      <x-link icon=\"fto-menu\" *ngIf=\"showToggle && showTree\" (click)=\"menuToggle()\"></x-link>\r\n      <x-crumb [data]=\"getCrumbData\" [separator]=\"separatorTpl\"></x-crumb>\r\n      <ng-template #separatorTpl>\r\n        <x-icon type=\"fto-chevron-right\"></x-icon>\r\n      </ng-template>\r\n    </div>\r\n    <div class=\"x-tree-file-content\" [style.max-height.rem]=\"codeHeight\" [ngSwitch]=\"activatedNode?.fileType\">\r\n      <div *ngSwitchCase=\"'img'\" class=\"x-tree-file-img\"><img [src]=\"activatedNode?.url\" (load)=\"imgOnload()\"/></div>\r\n      <x-highlight\r\n        *ngSwitchCase=\"'code'\"\r\n        [type]=\"activatedNode?.type\"\r\n        [data]=\"activatedNode?.content\"\r\n        [highlightLines]=\"getHighlightLines\"\r\n      ></x-highlight>\r\n    </div>\r\n  </div>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { HttpClientModule } from '@angular/common/http';\r\nimport { XTreeFileComponent } from './tree-file.component';\r\nimport { XTreeFileProperty } from './tree-file.property';\r\nimport { XTreeModule } from '@ng-nest/ui/tree';\r\nimport { XHighlightModule } from '@ng-nest/ui/highlight';\r\nimport { XCrumbModule } from '@ng-nest/ui/crumb';\r\nimport { XIconModule } from '@ng-nest/ui/icon';\r\nimport { XLinkModule } from '@ng-nest/ui/link';\r\nimport { XLoadingModule } from '@ng-nest/ui/loading';\r\n\r\n@NgModule({\r\n  declarations: [XTreeFileComponent, XTreeFileProperty],\r\n  exports: [XTreeFileComponent],\r\n  imports: [CommonModule, HttpClientModule, XTreeModule, XLinkModule, XCrumbModule, XIconModule, XLoadingModule, XHighlightModule]\r\n})\r\nexport class XTreeFileModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}