ngx-axis-appforge 0.0.4 → 0.0.6

package/fesm2022/ngx-axis-appforge-axis-components-design.mjs

@@ -0,0 +1,1746 @@
+import * as i0 from '@angular/core';
+import { input, output, computed, signal, inject, effect, ChangeDetectionStrategy, Component, ViewChild, model, ElementRef, ChangeDetectorRef, Injector, ViewContainerRef, HostListener } from '@angular/core';
+import * as i1$3 from 'ng-zorro-antd/splitter';
+import { NzSplitterModule } from 'ng-zorro-antd/splitter';
+import * as i2$3 from 'ng-zorro-antd/tabs';
+import { NzTabsModule } from 'ng-zorro-antd/tabs';
+import { FlatTreeControl } from '@angular/cdk/tree';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { NzHighlightPipe } from 'ng-zorro-antd/core/highlight';
+import * as i3 from 'ng-zorro-antd/icon';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import * as i2 from 'ng-zorro-antd/input';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import * as i4 from 'ng-zorro-antd/tree-view';
+import { NzTreeFlattener, NzTreeFlatDataSource, NzTreeViewModule } from 'ng-zorro-antd/tree-view';
+import { BehaviorSubject, combineLatest, auditTime, tap, map, filter, take, debounceTime, Subject, switchMap, merge, Observable, NEVER, from, of } from 'rxjs';
+import * as i3$1 from 'ng-zorro-antd/flex';
+import { NzFlexModule } from 'ng-zorro-antd/flex';
+import { SelectionModel } from '@angular/cdk/collections';
+import { FilteredTreeResult, AXIS_COMPONENTS_LOADER_TOKEN, ScopeDirective, DynamicDirective, DesignBuilder, AXIS_INJECT_DATA_TOKEN, AXIS_DESIGN_CMPLIBS_TOKEN, isEquals, ValueAccessOptions, copy, HowLongPipe, ValueAccess, AXIS_INJECT_FUNC_TOKEN, AXIS_DESIGN_SCOPE_INFOS_GETTER_TOKEN, AXIS_DESIGN_COMPONENT_INFO_FOR_SETTING_TOKEN, AXIS_DESIGN_ALL_PERMISSIONS_TOKEN, AXIS_DESIGN_OPTIONS_NODE_FOR_MENU, AXIS_DESIGN_CHOOSE_COMPONENT_FUNC_TOKEN, OptionsNode } from 'ngx-axis-appforge/core';
+import * as i6 from 'ng-zorro-antd/button';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import * as i9 from 'ng-zorro-antd/tooltip';
+import { NzTooltipModule, NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import * as i10 from 'ng-zorro-antd/empty';
+import { NzEmptyModule } from 'ng-zorro-antd/empty';
+import * as i7 from 'ng-zorro-antd/core/transition-patch';
+import * as i8 from 'ng-zorro-antd/core/wave';
+import { CommonModule } from '@angular/common';
+import * as i1$1 from 'ng-zorro-antd/collapse';
+import { NzCollapseModule } from 'ng-zorro-antd/collapse';
+import * as i2$1 from 'ng-zorro-antd/card';
+import { NzCardModule } from 'ng-zorro-antd/card';
+import * as i3$2 from 'ng-zorro-antd/grid';
+import { NzGridModule } from 'ng-zorro-antd/grid';
+import * as i7$1 from 'ng-zorro-antd/dropdown';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { toSignal, toObservable } from '@angular/core/rxjs-interop';
+import * as i12 from 'ng-zorro-antd/select';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import * as i6$1 from 'ng-zorro-antd/menu';
+import * as i6$2 from 'ng-zorro-antd/drawer';
+import { NzDrawerModule } from 'ng-zorro-antd/drawer';
+import * as i1$2 from 'ng-zorro-antd/modal';
+import { NzModalModule } from 'ng-zorro-antd/modal';
+import * as i2$2 from 'ng-zorro-antd/table';
+import { NzTableModule } from 'ng-zorro-antd/table';
+import * as i8$1 from 'ng-zorro-antd/popover';
+import { NzPopoverModule } from 'ng-zorro-antd/popover';
+import { ClipboardService } from 'ngx-clipboard';
+
+class DragDrop {
+    optionsNodes;
+    optionIdflatNodes;
+    treeControl;
+    onChange;
+    constructor(optionsNodes, optionIdflatNodes, treeControl, onChange) {
+        this.optionsNodes = optionsNodes;
+        this.optionIdflatNodes = optionIdflatNodes;
+        this.treeControl = treeControl;
+        this.onChange = onChange;
+    }
+    dragNode;
+    dropNode;
+    targetIndex;
+    element;
+    pos;
+    canDrag(nodeId) {
+        const node = this.optionsNodes.get(nodeId);
+        return !!node && !node?.isRoot && node?.canDrag;
+    }
+    onDragStart(e, nodeId) {
+        this.dragNode = this.optionsNodes.get(nodeId);
+        if (this.dragNode?.children?.length) {
+            this.treeControl.collapse(this.optionIdflatNodes.get(nodeId));
+        }
+        setTimeout(() => {
+            e.target.style.display = 'none';
+        });
+    }
+    onDragOver(e, nodeId) {
+        const node = this.optionsNodes.get(nodeId);
+        const parent = node.parentId ? this.optionsNodes.get(node.parentId) : undefined;
+        let canDropIn = this.canDrop(node);
+        let canDropSide = !!parent && this.canDrop(parent);
+        if (!canDropIn && !canDropSide) {
+            e.preventDefault();
+            return;
+        }
+        const pos = this.getPos(e, canDropIn, canDropSide);
+        const element = e.currentTarget;
+        this.updateElementStyle(element, pos);
+        if (pos == 0) {
+            this.targetIndex = node?.defaultDropIndex;
+            this.dropNode = node;
+            this.treeControl.expand(this.optionIdflatNodes.get(node.id));
+        }
+        else if (pos == -1) {
+            this.targetIndex = node.indexOfParentObj;
+            this.dropNode = parent;
+        }
+        else {
+            this.targetIndex = node.indexOfParentObj + 1;
+            this.dropNode = parent;
+        }
+    }
+    updateElementStyle(element, pos) {
+        if (element != this.element || pos != this.pos) {
+            this.element?.classList.remove("drop_in", "drop_up", "drop_down");
+            if (element) {
+                switch (pos) {
+                    case -1:
+                        element.classList.add("drop_up");
+                        break;
+                    case 0:
+                        element.classList.add("drop_in");
+                        break;
+                    default:
+                        element.classList.add("drop_down");
+                        break;
+                }
+            }
+            this.element = element;
+            this.pos = pos;
+        }
+    }
+    onDragEnd(e, nodeId) {
+        e.target.style.display = 'flex';
+        if (this.dropNode) {
+            if (this.dropNode.dropObj == this.dragNode.parentObj && this.dragNode.indexOfParentObj == this.targetIndex) {
+                this.updateElementStyle();
+                return undefined;
+            }
+            if (this.dropNode.dropObj instanceof Array && this.dropNode.dropObj == this.dragNode.parentObj && this.dragNode.indexOfParentObj < this.targetIndex) {
+                this.targetIndex--;
+            }
+            const dragObj = this.dragNode.options;
+            if (!this.dragNode.isRoot) {
+                if (this.dragNode?.parentObj instanceof Array) {
+                    this.dragNode.parentObj.splice(this.dragNode.indexOfParentObj, 1);
+                }
+                else {
+                    this.dragNode.parentObj[this.dragNode.indexOfParentObj] = null;
+                }
+            }
+            if (this.dropNode.dropObj instanceof Array) {
+                this.dropNode.dropObj.splice(this.targetIndex, 0, dragObj);
+            }
+            else {
+                this.dropNode.dropObj[this.targetIndex] = dragObj;
+            }
+            this.onChange();
+        }
+        this.dragNode = undefined;
+        this.updateElementStyle();
+    }
+    canDrop(node) {
+        if (node && node.canDrop && node.dropType == this.dragNode.dragType) {
+            return !node.dropObj[node.defaultDropIndex];
+        }
+        return false;
+    }
+    getPos(e, canDropIn, canDropSide) {
+        const element = e.target;
+        const rect = element.getBoundingClientRect();
+        const clientY = e.clientY - rect.top;
+        const height = rect.height;
+        if (canDropIn && canDropSide) {
+            return 1 - Math.floor(clientY / height * 3);
+        }
+        else if (canDropSide) {
+            return clientY < height / 2 ? -1 : 1;
+        }
+        else {
+            return 0;
+        }
+    }
+}
+
+class Tree {
+    cdRef;
+    node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
+    optionsNodes = input.required(...(ngDevMode ? [{ debugName: "optionsNodes" }] : []));
+    onChange = output();
+    onSelect = output();
+    onContextMenu = output();
+    dragdrop = computed(() => new DragDrop(this.optionsNodes(), this.optionIdflatNodes, this.treeControl, () => this.onChange.emit(undefined)), ...(ngDevMode ? [{ debugName: "dragdrop" }] : []));
+    optionIdflatNodes = new Map();
+    flatNodeMap = new Map();
+    nestedNodeMap = new Map();
+    searchValue = signal('', ...(ngDevMode ? [{ debugName: "searchValue" }] : []));
+    originData$ = new BehaviorSubject([]);
+    searchValue$ = new BehaviorSubject('');
+    selectListSelection = new SelectionModel(true);
+    design = inject(Design);
+    subs = [];
+    transformer = (node, level) => {
+        const existingNode = this.nestedNodeMap.get(node.id);
+        const currentNode = {
+            expandable: !!node.children && node.children.length > 0,
+            id: node.id,
+            title: node.name ?? "",
+            icon: node.icon,
+            level
+        };
+        let flatNode;
+        if (existingNode?.id == currentNode.id && existingNode.expandable == currentNode.expandable && existingNode.level == currentNode.level) {
+            flatNode = Object.assign(existingNode, currentNode);
+        }
+        else {
+            flatNode = currentNode;
+        }
+        this.optionIdflatNodes.set(flatNode.id, flatNode);
+        this.flatNodeMap.set(flatNode.id, node);
+        this.nestedNodeMap.set(node.id, flatNode);
+        return flatNode;
+    };
+    treeControl = new FlatTreeControl(node => node.level, node => node.expandable, {
+        trackBy: flatNode => flatNode.id
+    });
+    treeFlattener = new NzTreeFlattener(this.transformer, node => node.level, node => node.expandable, node => node.children);
+    dataSource = new NzTreeFlatDataSource(this.treeControl, this.treeFlattener);
+    filteredData$ = combineLatest([
+        this.originData$,
+        this.searchValue$.pipe(auditTime(300), tap(value => this.searchValue.set(value)))
+    ]).pipe(map(([data, value]) => (value ? filterTreeData(data, value) : new FilteredTreeResult(data, this.treeControl.expansionModel.selected.filter(id => this.optionsNodes().has(id))))));
+    constructor(cdRef) {
+        this.cdRef = cdRef;
+        effect(() => {
+            if (this.node()) {
+                this.originData$.next([this.node()]);
+            }
+            const oldlength = this.selectListSelection.selected.length;
+            this.selectListSelection.deselect(...this.selectListSelection.selected.filter(nodeid => !this.optionsNodes().has(nodeid)));
+            this.treeControl.expansionModel.deselect(...this.treeControl.expansionModel.selected.filter(id => !this.optionsNodes().has(id)));
+            if (oldlength != this.selectListSelection.selected.length) {
+                this.sendSelectEvent();
+            }
+        });
+        this.subs.push(this.filteredData$.subscribe(result => {
+            this.dataSource.setData(result.treeData);
+            this.treeControl.expansionModel.setSelection(...result.needsToExpanded);
+        }));
+        this.subs.push(this.filteredData$.pipe(filter(r => r.treeData.length > 0), take(1)).subscribe(result => {
+            this.selectOne(result.treeData[0].id, { sendEvent: true });
+        }));
+    }
+    hasChild = (_, node) => node.expandable;
+    get hasExpanded() {
+        return this.treeControl.expansionModel.selected.length > 0;
+    }
+    onNodeClick(e, node) {
+        if (e.metaKey) {
+            this.toggleSelect(node.id, { sendEvent: true });
+        }
+        else {
+            this.selectOne(node.id, { sendEvent: true });
+        }
+    }
+    select(nodeId, opt) {
+        this.selectListSelection.select(nodeId);
+        if (opt?.sendEvent) {
+            this.sendSelectEvent();
+        }
+    }
+    selectOne(nodeId, opt) {
+        this.unSelectAll();
+        this.selectListSelection.select(nodeId);
+        if (opt?.sendEvent) {
+            this.sendSelectEvent();
+        }
+    }
+    toggleSelect(nodeId, opt) {
+        this.selectListSelection.toggle(nodeId);
+        if (opt?.sendEvent) {
+            this.sendSelectEvent();
+        }
+    }
+    unSelect(nodeId, opt) {
+        this.selectListSelection.deselect(nodeId);
+        if (opt?.sendEvent) {
+            this.sendSelectEvent();
+        }
+    }
+    unSelectAll(opt) {
+        this.selectListSelection.clear();
+        if (opt?.sendEvent) {
+            this.sendSelectEvent();
+        }
+    }
+    sendSelectEvent() {
+        this.onSelect.emit(this.selectListSelection.selected);
+    }
+    selectByNodeIds(nodeIds) {
+        this.unSelectAll();
+        for (const nodeId of nodeIds) {
+            this.select(nodeId);
+            const node = this.optionIdflatNodes.get(nodeId);
+            if (node) {
+                this.treeControl.expand(node);
+            }
+        }
+        this.cdRef.markForCheck();
+    }
+    expandByNodeIds(nodeIds) {
+        for (const nodeId of nodeIds) {
+            const node = this.optionIdflatNodes.get(nodeId);
+            if (node) {
+                this.treeControl.expand(node);
+            }
+        }
+    }
+    toggleExpanded() {
+        if (this.hasExpanded) {
+            this.treeControl.collapseAll();
+        }
+        else {
+            this.treeControl.expandAll();
+        }
+    }
+    reset() {
+        this.optionIdflatNodes.clear();
+        this.flatNodeMap.clear();
+    }
+    contextMenu(e, nodeId) {
+        this.onContextMenu.emit({ event: e, nodeId });
+    }
+    removeSelected() {
+        let changed = false;
+        let next = undefined;
+        for (const nodeId of this.selectListSelection.selected) {
+            const node = this.optionsNodes().get(nodeId);
+            if (node) {
+                changed = true;
+                if (node.isRoot) {
+                    next = null;
+                }
+                else {
+                    if (Array.isArray(node.parentObj)) {
+                        node.parentObj.splice(node.parentObj.indexOf(node.options), 1);
+                    }
+                    else {
+                        node.parentObj[node.indexOfParentObj] = null;
+                    }
+                }
+            }
+        }
+        if (changed) {
+            this.onChange.emit(next);
+        }
+    }
+    addNodeForSelected(nodes, deleteSuccess = false) {
+        if (nodes.length && this.selectListSelection.selected) {
+            for (const nodeId of this.selectListSelection.selected) {
+                const parentNode = this.optionsNodes().get(nodeId);
+                if (parentNode && parentNode.canDrop && parentNode.dropType == "component") {
+                    if (Array.isArray(parentNode.dropObj)) {
+                        parentNode.dropObj.splice(parentNode.dropObj.length, 0, ...nodes.map(n => n.options));
+                        nodes.forEach(n => this.deleteNode(n));
+                    }
+                    else if (!parentNode.dropObj[parentNode.defaultDropIndex]) {
+                        const n = nodes[nodes.length - 1];
+                        parentNode.dropObj[parentNode.defaultDropIndex] = n.options;
+                        if (deleteSuccess) {
+                            this.deleteNode(n);
+                        }
+                    }
+                }
+            }
+            this.onChange.emit(undefined);
+        }
+    }
+    deleteNode(node) {
+        if (node.parentObj) {
+            if (Array.isArray(node.parentObj)) {
+                node.parentObj.splice(node.indexOfParentObj, 1);
+            }
+            else {
+                delete node.parentObj[node.indexOfParentObj];
+            }
+        }
+    }
+    addRootComponent() {
+        this.design.chooseComponent().subscribe(res => {
+            const { options, config } = res;
+            if (options && config) {
+                this.onChange.emit(options);
+            }
+        });
+    }
+    ngOnDestroy() {
+        for (let sub of this.subs) {
+            sub.unsubscribe();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: Tree, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: Tree, isStandalone: true, selector: "axis-design-tree", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, optionsNodes: { classPropertyName: "optionsNodes", publicName: "optionsNodes", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onChange: "onChange", onSelect: "onSelect", onContextMenu: "onContextMenu" }, ngImport: i0, template: "<div nz-flex [nzVertical]=\"true\" style=\"height: 100%;\">\n    <div nz-flex style=\"padding-right: 8px;\" nzGap=\"4px\" nzAlign=\"center\">\n        <input style=\"flex:1;\" type=\"text\" nz-input placeholder=\"\u641C\u7D22\" nzBorderless ngModel\n            (ngModelChange)=\"searchValue$.next($event)\" />\n        <button nz-button nzSize=\"small\" nzType=\"text\" nzShape=\"circle\" (click)=\"toggleExpanded()\">\n            <nz-icon [nzType]=\"hasExpanded?'shrink':'arrows-alt'\" nzTheme=\"outline\" />\n        </button>\n    </div>\n    @if (node() === null) {\n    <nz-empty [nzNotFoundContent]=\"contentTpl\" [nzNotFoundFooter]=\"footerTpl\">\n        <ng-template #contentTpl>\n            \u6CA1\u6709\u7EC4\u4EF6\n        </ng-template>\n        <ng-template #footerTpl>\n            <button nz-button nzType=\"dashed\" (click)=\"addRootComponent()\">\n                <nz-icon nzType=\"plus\"></nz-icon>\n                \u6DFB\u52A0\u7EC4\u4EF6\n            </button>\n        </ng-template>\n    </nz-empty>\n    }@else {\n    <nz-tree-view nzDirectoryTree [nzTreeControl]=\"treeControl\" [nzDataSource]=\"dataSource\">\n        <nz-tree-node *nzTreeNodeDef=\"let node\" nzTreeNodePadding [nzTreeNodePaddingIndent]=\"8\"\n            (contextmenu)=\"contextMenu($event, node.id)\" [draggable]=\"dragdrop().canDrag(node.id)\"\n            (dragstart)=\"dragdrop().onDragStart($event, node.id)\" (dragover)=\"dragdrop().onDragOver($event, node.id)\"\n            (dragend)=\"dragdrop().onDragEnd($event,node.id)\">\n            <nz-tree-node-toggle nzTreeNodeNoopToggle></nz-tree-node-toggle>\n            <nz-tree-node-option [nzDisabled]=\"node.disabled\" [nzSelected]=\"selectListSelection.isSelected(node.id)\"\n                (nzClick)=\"onNodeClick($event,node)\" [nz-tooltip]=\"node.id\" [nzTooltipMouseEnterDelay]=\"0.6\">\n                <i nz-icon [nzType]=\"node.icon\" style=\"margin: 4px;\"></i>\n                <span [innerHTML]=\"node.title | nzHighlight: searchValue() : 'i' : 'highlight'\"></span>\n            </nz-tree-node-option>\n        </nz-tree-node>\n        <nz-tree-node *nzTreeNodeDef=\"let node; when: hasChild\" nzTreeNodePadding [nzTreeNodePaddingIndent]=\"8\"\n            (contextmenu)=\"contextMenu($event, node.id)\" [draggable]=\"dragdrop().canDrag(node.id)\"\n            (dragstart)=\"dragdrop().onDragStart($event, node.id)\" (dragover)=\"dragdrop().onDragOver($event, node.id)\"\n            (dragend)=\"dragdrop().onDragEnd($event,node.id)\">\n            <nz-tree-node-toggle>\n                <nz-icon nzType=\"caret-down\" nzTreeNodeToggleRotateIcon />\n            </nz-tree-node-toggle>\n            <nz-tree-node-option [nzDisabled]=\"node.disabled\" [nzSelected]=\"selectListSelection.isSelected(node.id)\"\n                (nzClick)=\"onNodeClick($event,node)\" [nz-tooltip]=\"node.id\" [nzTooltipMouseEnterDelay]=\"0.6\">\n                <i nz-icon [nzType]=\"node.icon\" style=\"margin: 4px;\"></i>\n                <span [innerHTML]=\"node.title | nzHighlight: searchValue() : 'i' : 'highlight'\"></span>\n            </nz-tree-node-option>\n        </nz-tree-node>\n    </nz-tree-view>\n    }\n</div>", styles: ["::ng-deep .highlight{color:#f50}nz-tree-view{overflow:auto;flex:1}.drop_in{outline:1px solid blue}.drop_up:after{content:\"\";position:absolute;top:-1px;width:100%;height:2px;background-color:#00f}.drop_down:after{content:\"\";position:absolute;bottom:-1px;width:100%;height:2px;background-color:#00f}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i2.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzVariant", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzTreeViewModule }, { kind: "component", type: i4.NzTreeViewComponent, selector: "nz-tree-view", exportAs: ["nzTreeView"] }, { kind: "directive", type: i4.NzTreeNodeDefDirective, selector: "[nzTreeNodeDef]", inputs: ["nzTreeNodeDefWhen"] }, { kind: "component", type: i4.NzTreeNodeComponent, selector: "nz-tree-node:not([builtin])", exportAs: ["nzTreeNode"] }, { kind: "directive", type: i4.NzTreeNodeToggleDirective, selector: "nz-tree-node-toggle:not([nzTreeNodeNoopToggle]), [nzTreeNodeToggle]", inputs: ["nzTreeNodeToggleRecursive"] }, { kind: "directive", type: i4.NzTreeNodePaddingDirective, selector: "[nzTreeNodePadding]", inputs: ["nzTreeNodePadding", "nzTreeNodePaddingIndent"] }, { kind: "directive", type: i4.NzTreeNodeToggleRotateIconDirective, selector: "[nzTreeNodeToggleRotateIcon]" }, { kind: "component", type: i4.NzTreeNodeOptionComponent, selector: "nz-tree-node-option", inputs: ["nzSelected", "nzDisabled"], outputs: ["nzClick"] }, { kind: "directive", type: i4.NzTreeNodeNoopToggleDirective, selector: "nz-tree-node-toggle[nzTreeNodeNoopToggle], [nzTreeNodeNoopToggle]" }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$1.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i6.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i7.ɵNzTransitionPatchDirective, selector: "[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i8.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzTooltipModule }, { kind: "directive", type: i9.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "ngmodule", type: NzEmptyModule }, { kind: "component", type: i10.NzEmptyComponent, selector: "nz-empty", inputs: ["nzNotFoundImage", "nzNotFoundContent", "nzNotFoundFooter"], exportAs: ["nzEmpty"] }, { kind: "pipe", type: NzHighlightPipe, name: "nzHighlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: Tree, decorators: [{
+            type: Component,
+            args: [{ selector: 'axis-design-tree', imports: [FormsModule, NzInputModule, NzIconModule, NzTreeViewModule, NzFlexModule, NzHighlightPipe, NzButtonModule, NzTooltipModule, NzEmptyModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div nz-flex [nzVertical]=\"true\" style=\"height: 100%;\">\n    <div nz-flex style=\"padding-right: 8px;\" nzGap=\"4px\" nzAlign=\"center\">\n        <input style=\"flex:1;\" type=\"text\" nz-input placeholder=\"\u641C\u7D22\" nzBorderless ngModel\n            (ngModelChange)=\"searchValue$.next($event)\" />\n        <button nz-button nzSize=\"small\" nzType=\"text\" nzShape=\"circle\" (click)=\"toggleExpanded()\">\n            <nz-icon [nzType]=\"hasExpanded?'shrink':'arrows-alt'\" nzTheme=\"outline\" />\n        </button>\n    </div>\n    @if (node() === null) {\n    <nz-empty [nzNotFoundContent]=\"contentTpl\" [nzNotFoundFooter]=\"footerTpl\">\n        <ng-template #contentTpl>\n            \u6CA1\u6709\u7EC4\u4EF6\n        </ng-template>\n        <ng-template #footerTpl>\n            <button nz-button nzType=\"dashed\" (click)=\"addRootComponent()\">\n                <nz-icon nzType=\"plus\"></nz-icon>\n                \u6DFB\u52A0\u7EC4\u4EF6\n            </button>\n        </ng-template>\n    </nz-empty>\n    }@else {\n    <nz-tree-view nzDirectoryTree [nzTreeControl]=\"treeControl\" [nzDataSource]=\"dataSource\">\n        <nz-tree-node *nzTreeNodeDef=\"let node\" nzTreeNodePadding [nzTreeNodePaddingIndent]=\"8\"\n            (contextmenu)=\"contextMenu($event, node.id)\" [draggable]=\"dragdrop().canDrag(node.id)\"\n            (dragstart)=\"dragdrop().onDragStart($event, node.id)\" (dragover)=\"dragdrop().onDragOver($event, node.id)\"\n            (dragend)=\"dragdrop().onDragEnd($event,node.id)\">\n            <nz-tree-node-toggle nzTreeNodeNoopToggle></nz-tree-node-toggle>\n            <nz-tree-node-option [nzDisabled]=\"node.disabled\" [nzSelected]=\"selectListSelection.isSelected(node.id)\"\n                (nzClick)=\"onNodeClick($event,node)\" [nz-tooltip]=\"node.id\" [nzTooltipMouseEnterDelay]=\"0.6\">\n                <i nz-icon [nzType]=\"node.icon\" style=\"margin: 4px;\"></i>\n                <span [innerHTML]=\"node.title | nzHighlight: searchValue() : 'i' : 'highlight'\"></span>\n            </nz-tree-node-option>\n        </nz-tree-node>\n        <nz-tree-node *nzTreeNodeDef=\"let node; when: hasChild\" nzTreeNodePadding [nzTreeNodePaddingIndent]=\"8\"\n            (contextmenu)=\"contextMenu($event, node.id)\" [draggable]=\"dragdrop().canDrag(node.id)\"\n            (dragstart)=\"dragdrop().onDragStart($event, node.id)\" (dragover)=\"dragdrop().onDragOver($event, node.id)\"\n            (dragend)=\"dragdrop().onDragEnd($event,node.id)\">\n            <nz-tree-node-toggle>\n                <nz-icon nzType=\"caret-down\" nzTreeNodeToggleRotateIcon />\n            </nz-tree-node-toggle>\n            <nz-tree-node-option [nzDisabled]=\"node.disabled\" [nzSelected]=\"selectListSelection.isSelected(node.id)\"\n                (nzClick)=\"onNodeClick($event,node)\" [nz-tooltip]=\"node.id\" [nzTooltipMouseEnterDelay]=\"0.6\">\n                <i nz-icon [nzType]=\"node.icon\" style=\"margin: 4px;\"></i>\n                <span [innerHTML]=\"node.title | nzHighlight: searchValue() : 'i' : 'highlight'\"></span>\n            </nz-tree-node-option>\n        </nz-tree-node>\n    </nz-tree-view>\n    }\n</div>", styles: ["::ng-deep .highlight{color:#f50}nz-tree-view{overflow:auto;flex:1}.drop_in{outline:1px solid blue}.drop_up:after{content:\"\";position:absolute;top:-1px;width:100%;height:2px;background-color:#00f}.drop_down:after{content:\"\";position:absolute;bottom:-1px;width:100%;height:2px;background-color:#00f}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+function filterTreeData(data, value) {
+    const needsToExpanded = new Set();
+    const _filter = (node, result) => {
+        if (node.name?.search(value) !== -1 || node.id?.search(value) !== -1) {
+            result.push(node);
+            return result;
+        }
+        if (Array.isArray(node.children)) {
+            const nodes = node.children.reduce((a, b) => _filter(b, a), []);
+            if (nodes.length) {
+                const parentNode = node.copyWith({ children: nodes });
+                needsToExpanded.add(parentNode.id);
+                result.push(parentNode);
+            }
+        }
+        return result;
+    };
+    const treeData = data.reduce((a, b) => _filter(b, a), []);
+    return new FilteredTreeResult(treeData, [...needsToExpanded]);
+}
+
+class DropHandler {
+    dragNode;
+    dropNode;
+    elementOptionIds;
+    isHorizontal;
+    placeholder;
+    beforeElement;
+    constructor(dragNode, dropNode, elementOptionIds, isHorizontal) {
+        this.dragNode = dragNode;
+        this.dropNode = dropNode;
+        this.elementOptionIds = elementOptionIds;
+        this.isHorizontal = isHorizontal;
+        this.placeholder = dragNode.element.cloneNode(true);
+        this.placeholder.style.display = "inline";
+        this.placeholder.style.opacity = "0.5";
+    }
+    onDragEnd() {
+        this.placeholder.remove();
+    }
+    onDragOver(e) {
+        const element = this.getBeforeElement(e);
+        if (element === this.beforeElement) {
+            return;
+        }
+        this.beforeElement = element;
+        if (element) {
+            this.dropNode.dropElement.insertBefore(this.placeholder, element);
+        }
+        else {
+            this.dropNode.dropElement.appendChild(this.placeholder);
+        }
+    }
+    close() {
+        this.placeholder.remove();
+        this.beforeElement = undefined;
+    }
+    getBeforeElement(e) {
+        for (const child of this.dropNode.dropElement.children) {
+            if (this.elementOptionIds.has(child)) {
+                const rect = child.getBoundingClientRect();
+                if (this.isHorizontal) {
+                    const middle = rect.left + (rect.width / 2);
+                    if (e.clientX <= middle) {
+                        return child;
+                    }
+                }
+                else {
+                    const middle = rect.top + (rect.height / 2);
+                    if (e.clientY <= middle) {
+                        return child;
+                    }
+                }
+            }
+        }
+        return null;
+    }
+}
+
+class DragService {
+    preview;
+    constructor(preview) {
+        this.preview = preview;
+    }
+    canDropNodes = [];
+    oriDragDisplay;
+    currentDropNodes = new Map();
+    dragEn;
+    dropHandler;
+    initElement(node, en) {
+        if (!node.isRoot && node.canDrag) {
+            this.bindDragEvent(en);
+        }
+        if (node.canDrop) {
+            this.canDropNodes.push(en);
+        }
+    }
+    getOptionsNode(node) {
+        return this.preview.optionsNodes().get(node.id);
+    }
+    bindDragEvent(node) {
+        node.element.setAttribute("draggable", "true");
+        node.element.ondragstart = (e) => {
+            e.stopPropagation();
+            this.dragStart(node);
+            this.oriDragDisplay = node.element.style.display;
+            setTimeout(() => {
+                node.element.style.display = "none";
+            });
+        };
+        node.element.ondragend = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.dragEnd();
+        };
+    }
+    bindDropEvent(en) {
+        this.currentDropNodes.set(en, null);
+        setTimeout(() => {
+            const { clientWidth, clientHeight } = en.dropElement;
+            if (!clientWidth || !clientHeight) {
+                const { display, minWidth, minHeight } = en.dropElement.style;
+                this.currentDropNodes.set(en, { display, minWidth, minHeight });
+                if (!clientWidth) {
+                    en.dropElement.style.minWidth = "100px";
+                }
+                if (!clientHeight) {
+                    en.dropElement.style.minHeight = "50px";
+                }
+                en.dropElement.style.display = "block";
+            }
+        });
+        en.dropElement.ondragenter = (e) => {
+            e?.preventDefault();
+            e.stopPropagation();
+            if (this.dropHandler?.dropNode == en) {
+                return;
+            }
+            this.dropHandler?.close();
+            const node = this.getOptionsNode(en);
+            this.dropHandler = new DropHandler(this.dragEn, en, this.preview.elementOptionIds, node.childDirection == "horizontal");
+        };
+        en.dropElement.ondragover = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.dropHandler?.onDragOver?.(e);
+        };
+    }
+    dragStart(dragEn) {
+        this.dragEn = dragEn;
+        this.canDropNodes = this.canDropNodes.filter(en => this.preview.optionsNodes().has(en.id));
+        this.canDropNodes
+            .filter(dropEn => {
+            const dropNode = this.getOptionsNode(dropEn);
+            const dragNode = this.getOptionsNode(dragEn);
+            return dropNode.dropType == dragNode.dragType && !dropNode.dropObj[dropNode.defaultDropIndex] && dropEn.dropElement;
+        })
+            .forEach(node => this.bindDropEvent(node));
+        this.preview.onDragStart();
+    }
+    dragEnd() {
+        let dragId;
+        if (this.dropHandler) {
+            const dropEn = this.dropHandler.dropNode;
+            const dropNode = this.getOptionsNode(dropEn);
+            const dragNode = this.getOptionsNode(this.dragEn);
+            let targetIndex = this.dropHandler.beforeElement ? this.preview.getNodeByElement(this.dropHandler.beforeElement)?.indexOfParentObj : dropNode?.defaultDropIndex;
+            if (dropNode.dropObj == dragNode.parentObj && dragNode.indexOfParentObj == targetIndex) {
+                this.preview.onDragEnd(false);
+            }
+            else {
+                dragId = dragNode?.id;
+                if (dropNode.dropObj instanceof Array && dropNode.dropObj == dragNode.parentObj && dragNode.indexOfParentObj < targetIndex) {
+                    targetIndex--;
+                }
+                const dragObj = dragNode.options;
+                if (!dragNode.isRoot) {
+                    if (dragNode?.parentObj instanceof Array) {
+                        dragNode.parentObj.splice(dragNode.indexOfParentObj, 1);
+                    }
+                    else {
+                        dragNode.parentObj[dragNode.indexOfParentObj] = null;
+                    }
+                }
+                if (dropNode?.dropObj instanceof Array) {
+                    dropNode.dropObj.splice(targetIndex, 0, dragObj);
+                }
+                else {
+                    dropNode.dropObj[targetIndex] = dragObj;
+                }
+                this.preview.onDragEnd(true);
+            }
+            this.dropHandler.onDragEnd();
+            this.dropHandler = undefined;
+        }
+        else {
+            this.preview.onDragEnd(false);
+        }
+        this.dragEn.element.style.display = this.oriDragDisplay;
+        this.dragEn = undefined;
+        this.oriDragDisplay = undefined;
+        this.currentDropNodes.forEach((style, en) => {
+            if (style) {
+                en.dropElement.style.minWidth = style.minWidth;
+                en.dropElement.style.minHeight = style.minHeight;
+                en.dropElement.style.display = style.display;
+            }
+            en.dropElement.ondragenter = null;
+            en.dropElement.ondragover = null;
+        });
+        this.currentDropNodes.clear();
+        return dragId;
+    }
+    reset() {
+        this.dropHandler?.close();
+        this.dragEn = undefined;
+        this.dropHandler = undefined;
+    }
+}
+
+class SelectService {
+    preview;
+    hoverElements = [];
+    enable = true;
+    selectElements = new Set();
+    constructor(preview) {
+        this.preview = preview;
+    }
+    initElement(element) {
+        element.style.outlineOffset = "1px";
+        element.onclick = (e) => {
+            e.stopPropagation();
+            if (e.altKey) {
+                this.toggleSelect(element, { sendEvent: true });
+            }
+            else {
+                this.selectOne(element, { sendEvent: true });
+            }
+        };
+        element.onmouseenter = () => {
+            if (this.enable) {
+                this.addHoverElement(element);
+            }
+        };
+        element.onmouseleave = () => {
+            if (this.enable) {
+                this.popHoverElement(element);
+            }
+        };
+    }
+    enableHover() {
+        this.enable = true;
+    }
+    disableHover() {
+        this.enable = false;
+    }
+    addHoverElement(element) {
+        this.hoverElements.unshift(element);
+        this.refreshHoverElements();
+    }
+    popHoverElement(element) {
+        const i = this.hoverElements.lastIndexOf(element);
+        if (i != -1) {
+            for (const e of this.hoverElements.splice(0, i + 1)) {
+                if (!this.selectElements.has(element)) {
+                    element.style.outline = "none";
+                }
+            }
+        }
+        this.refreshHoverElements();
+    }
+    select(element, opt) {
+        this.selectElements.add(element);
+        element.style.outline = "2px dashed green";
+        if (opt?.sendEvent) {
+            this.sendSelectEvent();
+        }
+    }
+    selectOne(element, opt) {
+        this.unSelectAll();
+        this.selectElements.add(element);
+        element.style.outline = "2px dashed green";
+        if (opt?.sendEvent) {
+            this.sendSelectEvent();
+        }
+    }
+    toggleSelect(element, opt) {
+        if (this.selectElements.has(element)) {
+            this.unSelect(element);
+        }
+        else {
+            this.select(element);
+        }
+        if (opt?.sendEvent) {
+            this.sendSelectEvent();
+        }
+    }
+    unSelect(element, opt) {
+        if (this.selectElements.has(element)) {
+            this.selectElements.delete(element);
+            element.style.outline = "none";
+            if (opt?.sendEvent) {
+                this.sendSelectEvent();
+            }
+        }
+    }
+    unSelectAll(opt) {
+        for (let element of this.selectElements) {
+            this.unSelect(element);
+        }
+        if (opt?.sendEvent) {
+            this.sendSelectEvent();
+        }
+    }
+    sendSelectEvent() {
+        this.preview.onSelectChange?.(Array.from(this.selectElements));
+    }
+    refreshHoverElements() {
+        this.hoverElements = this.hoverElements.filter(e => this.preview.elementOptionIds.has(e));
+        if (this.hoverElements.length && !this.selectElements.has(this.hoverElements[0])) {
+            this.hoverElements[0].style.outline = "1.5px dashed rgb(255,0,0)";
+        }
+        if (this.hoverElements.length > 1 && !this.selectElements.has(this.hoverElements[1])) {
+            this.hoverElements[1].style.outline = "1.5px dashed rgba(255,0,0,0.4)";
+        }
+        if (this.hoverElements.length > 2) {
+            this.hoverElements.slice(2).filter(r => !this.selectElements.has(r)).forEach((e) => {
+                e.style.outline = "none";
+            });
+        }
+    }
+    reset(opt) {
+        for (const element of this.hoverElements) {
+            element.style.outline = "none";
+        }
+        for (const element of this.selectElements) {
+            element.style.outline = "none";
+        }
+        this.hoverElements = [];
+        this.selectElements.clear();
+        if (opt?.sendEvent) {
+            this.sendSelectEvent();
+        }
+    }
+    getSelectElements() {
+        return [...this.selectElements.values()];
+    }
+}
+
+class Preview {
+    constructor() {
+        effect(async () => {
+            if (this.loadAndOptions()) {
+                await this.loadAndOptions()[0];
+                this.refresh();
+            }
+        });
+    }
+    loadAndOptions = input.required(...(ngDevMode ? [{ debugName: "loadAndOptions" }] : []));
+    optionsNodes = input.required(...(ngDevMode ? [{ debugName: "optionsNodes" }] : []));
+    injectData = input.required(...(ngDevMode ? [{ debugName: "injectData" }] : []));
+    loader = inject(AXIS_COMPONENTS_LOADER_TOKEN);
+    onChange = output();
+    onSelect = output();
+    onContextMenu = output();
+    elementOptionIds = new Map();
+    elementComponentRefs = new Map();
+    optionIdElements = new Map();
+    scopeSubjects = new Map();
+    dragService = new DragService(this);
+    selectService = new SelectService(this);
+    selected = new Map();
+    dynamicDirective;
+    initScope(scope) {
+        this.getAndUpdateScopeSubject(scope.axisScope(), scope);
+    }
+    async initElement(ref, options) {
+        await this.loadAndOptions()[0];
+        if (!options?.id || !this.optionsNodes().has(options.id)) {
+            return;
+        }
+        try {
+            const element = ref.location.nativeElement;
+            ref.onDestroy(() => {
+                this.elementComponentRefs.delete(element);
+                this.elementOptionIds.delete(element);
+                if (this.optionIdElements.has(options.id)) {
+                    this.optionIdElements.set(options.id, this.optionIdElements.get(options.id).filter(e => e !== element));
+                }
+            });
+            this.elementComponentRefs.set(element, ref);
+            const { component } = options;
+            const config = await this.loader.loadComponent(`${component}/design`);
+            if (config) {
+                const binds = config.bindElementsOptionsNode?.(element, options);
+                if (binds) {
+                    for (const en of Object.entries(binds)) {
+                        const nodeId = en[0];
+                        const element = en[1].element;
+                        const node = this.optionsNodes().get(nodeId);
+                        if (node && element && !this.elementOptionIds.has(element)) {
+                            if (!this.optionIdElements.has(nodeId)) {
+                                this.optionIdElements.set(nodeId, []);
+                            }
+                            this.optionIdElements.get(nodeId)?.push(element);
+                            this.elementOptionIds.set(element, nodeId);
+                            this.selectService.initElement(element);
+                            if (node.canDrag || node.canDrop) {
+                                this.dragService.initElement(node, node.toElementNode(en[1]));
+                            }
+                            if (node.contextMenu) {
+                                element.oncontextmenu = (e) => {
+                                    this.onContextMenu.emit({ event: e, nodeId: en[0] });
+                                };
+                            }
+                            if (this.selected.has(nodeId) && this.selected.get(nodeId) == this.optionIdElements.get(nodeId).length - 1) {
+                                this.selectService.select(element);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        catch (_) {
+        }
+    }
+    getNodeByElement(element) {
+        const id = this.elementOptionIds.get(element);
+        if (id) {
+            return this.optionsNodes().get(id);
+        }
+        return undefined;
+    }
+    onSelectChange(elements) {
+        this.selected.clear();
+        for (const element of elements) {
+            const id = this.elementOptionIds.get(element);
+            if (id) {
+                const elementList = this.optionIdElements.get(id);
+                this.selected.set(id, elementList?.indexOf(element) ?? 0);
+            }
+        }
+        this.onSelect.emit(Array.from(this.selected.keys()));
+    }
+    onDragStart() {
+        this.selectService.disableHover();
+    }
+    onDragEnd(changed) {
+        if (changed) {
+            this.onChange.emit();
+        }
+        this.selectService.enableHover();
+    }
+    forceRender() {
+        this.elementOptionIds.clear();
+        this.optionIdElements.clear();
+        this.dragService.reset();
+        this.selectService.reset();
+        this.dynamicDirective?.forceRender();
+    }
+    refresh() {
+        Array.from(this.optionIdElements.keys()).forEach(id => {
+            if (!this.optionsNodes().has(id)) {
+                this.optionIdElements.get(id)?.forEach(element => {
+                    this.elementOptionIds.delete(element);
+                });
+                this.optionIdElements.delete(id);
+            }
+        });
+        setTimeout(() => {
+            this.selectService.getSelectElements().filter(e => !document.contains(e)).forEach(e => {
+                const nodeId = this.elementOptionIds.get(e);
+                this.elementComponentRefs.delete(e);
+                if (nodeId) {
+                    const elements = this.optionIdElements.get(nodeId);
+                    elements?.splice(elements.indexOf(e), 1);
+                    const res = this.getParentComponentRef(nodeId);
+                    if (res) {
+                        this.initElement(res.ref, res.options);
+                    }
+                }
+            });
+        }, 50);
+    }
+    getParentComponentRef(nodeId) {
+        const node = this.optionsNodes().get(nodeId);
+        if (node?.parentId) {
+            const parent = this.optionsNodes().get(node.parentId);
+            if (parent) {
+                const parentElement = this.optionIdElements.get(parent.id);
+                if (parentElement?.length) {
+                    const ref = this.elementComponentRefs.get(parentElement[0]);
+                    if (ref) {
+                        return { ref, options: parent.options };
+                    }
+                }
+                return this.getParentComponentRef(parent.id);
+            }
+        }
+        return undefined;
+    }
+    selectByNodeIds(nodeIds) {
+        if (nodeIds?.some(id => !this.selected.has(id))) {
+            this.selectService.unSelectAll();
+            this.selected.clear();
+            for (const nodeId of nodeIds) {
+                this.selected.set(nodeId, 0);
+                const elements = this.optionIdElements.get(nodeId);
+                if (elements?.[0]) {
+                    this.selectService.select(elements[0]);
+                }
+            }
+        }
+    }
+    getAndUpdateScopeSubject(scopeId, initScope) {
+        if (!this.scopeSubjects.has(scopeId)) {
+            this.scopeSubjects.set(scopeId, new BehaviorSubject(initScope));
+        }
+        const subject = this.scopeSubjects.get(scopeId);
+        if (initScope && initScope != subject.value) {
+            subject.next(initScope);
+        }
+        return subject;
+    }
+    updateScopeWithSelectedElement(scopeId) {
+        const elements = this.selectService.getSelectElements();
+        if (elements.length > 0) {
+            const ref = this.elementComponentRefs.get(elements[0]);
+            const scope = ref?.injector.get(ScopeDirective, null)?.findScope(scopeId);
+            if (scope) {
+                this.getAndUpdateScopeSubject(scope.axisScope(), scope);
+            }
+        }
+    }
+    dragForOuter(node) {
+        this.dragService.dragStart(node);
+    }
+    dragEndForOuter() {
+        return this.dragService.dragEnd();
+    }
+    ngOnDestroy() {
+        for (const s of this.scopeSubjects.values()) {
+            s.unsubscribe();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: Preview, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.2", type: Preview, isStandalone: true, selector: "axis-design-preview", inputs: { loadAndOptions: { classPropertyName: "loadAndOptions", publicName: "loadAndOptions", isSignal: true, isRequired: true, transformFunction: null }, optionsNodes: { classPropertyName: "optionsNodes", publicName: "optionsNodes", isSignal: true, isRequired: true, transformFunction: null }, injectData: { classPropertyName: "injectData", publicName: "injectData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onChange: "onChange", onSelect: "onSelect", onContextMenu: "onContextMenu" }, providers: [
+            {
+                provide: DesignBuilder,
+                useFactory: (preview) => {
+                    return new DesignBuilder((ref, options) => preview.initElement(ref, options), (scope) => preview.initScope(scope));
+                },
+                deps: [Preview]
+            }, {
+                provide: AXIS_INJECT_DATA_TOKEN,
+                useFactory: (preview) => {
+                    return preview.injectData();
+                },
+                deps: [Preview]
+            }
+        ], viewQueries: [{ propertyName: "dynamicDirective", first: true, predicate: ["child"], descendants: true, read: DynamicDirective }], ngImport: i0, template: "<ng-container #child [axisDynamic]=\"loadAndOptions()?.[1]\" [standalone]=\"true\" [isDesign]=\"true\"></ng-container>", styles: [":host{padding:4px}\n"], dependencies: [{ kind: "directive", type: DynamicDirective, selector: "[axisDynamic]", inputs: ["axisDynamic", "standalone", "isDesign"], exportAs: ["axisDynamic"] }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: Preview, decorators: [{
+            type: Component,
+            args: [{ selector: 'axis-design-preview', imports: [DynamicDirective, CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: DesignBuilder,
+                            useFactory: (preview) => {
+                                return new DesignBuilder((ref, options) => preview.initElement(ref, options), (scope) => preview.initScope(scope));
+                            },
+                            deps: [Preview]
+                        }, {
+                            provide: AXIS_INJECT_DATA_TOKEN,
+                            useFactory: (preview) => {
+                                return preview.injectData();
+                            },
+                            deps: [Preview]
+                        }
+                    ], template: "<ng-container #child [axisDynamic]=\"loadAndOptions()?.[1]\" [standalone]=\"true\" [isDesign]=\"true\"></ng-container>", styles: [":host{padding:4px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dynamicDirective: [{
+                type: ViewChild,
+                args: ["child", { read: DynamicDirective }]
+            }] } });
+
+class Cmplib {
+    constructor() {
+        effect(() => {
+            this.tags();
+            this.cmplib();
+            this.searchValue$.next(this.searchValue$.value);
+        });
+    }
+    cmplibs = inject(AXIS_DESIGN_CMPLIBS_TOKEN, { optional: true });
+    cmplib = model(...(ngDevMode ? [undefined, { debugName: "cmplib" }] : []));
+    dragOptions = signal(undefined, ...(ngDevMode ? [{ debugName: "dragOptions" }] : []));
+    selectMode = input.required(...(ngDevMode ? [{ debugName: "selectMode" }] : []));
+    tags = input(...(ngDevMode ? [undefined, { debugName: "tags" }] : []));
+    dragExample;
+    clickExample = output();
+    dragStart = output();
+    dragEnd = output();
+    dragElement;
+    searchValue$ = new BehaviorSubject('');
+    displayCmpLib = toSignal(this.searchValue$.pipe(auditTime(300), map(v => {
+        if (v || this.tags()?.length) {
+            v = v.toLowerCase();
+            return this.cmplib()?.map(group => ({
+                groupName: group.groupName,
+                children: group.children.filter(c => (!v || c.component.includes(v)) && (!this.tags()?.length || c.tags?.some(t => this.tags().includes(t))))
+            })).filter(group => group.children.length);
+        }
+        else {
+            return this.cmplib();
+        }
+    })));
+    ngOnInit() {
+        if (this.cmplibs?.length) {
+            this.cmplib.set(this.cmplibs[0].lib);
+        }
+    }
+    onClick(example) {
+        if (this.selectMode() == "click") {
+            this.clickExample.emit(example);
+        }
+    }
+    preloadDragElement(example) {
+        if (this.selectMode() == "drag") {
+            this.dragOptions.set(example.builder());
+            this.dragExample = example;
+        }
+    }
+    onDragStart(e) {
+        if (this.selectMode() == "drag") {
+            e.stopPropagation();
+            if (e.dataTransfer) {
+                e.dataTransfer.effectAllowed = 'move';
+            }
+            e.dataTransfer?.setDragImage(this.dragElement?.nativeElement, 0, 0);
+            setTimeout(() => {
+                this.dragStart.emit({ example: this.dragExample, element: this.dragElement?.nativeElement });
+            });
+        }
+    }
+    onDragEnd(e) {
+        if (this.selectMode() == "drag") {
+            e.stopPropagation();
+            e.preventDefault();
+            this.dragEnd.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: Cmplib, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: Cmplib, isStandalone: true, selector: "axis-cmplib", inputs: { cmplib: { classPropertyName: "cmplib", publicName: "cmplib", isSignal: true, isRequired: false, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: true, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cmplib: "cmplibChange", clickExample: "clickExample", dragStart: "dragStart", dragEnd: "dragEnd" }, viewQueries: [{ propertyName: "dragElement", first: true, predicate: ["dragElement"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div nz-flex nzAlign=\"center\">\n    <input style=\"flex:1\" type=\"text\" nz-input placeholder=\"\u641C\u7D22\" nzBorderless ngModel\n        (ngModelChange)=\"searchValue$.next($event)\" />\n    <nz-select [(ngModel)]=\"cmplib\" nzSize=\"small\" nzBorderless style=\"width: auto;\">\n        @for (lib of cmplibs; track $index) {\n        <nz-option [nzValue]=\"lib.lib\" [nzLabel]=\"lib.libName\"></nz-option>\n        }\n    </nz-select>\n</div>\n<nz-collapse nzAccordion>\n    @for (group of displayCmpLib(); track group.groupName) {\n    <nz-collapse-panel [nzHeader]=\"`${group.groupName}(${group.children.length})`\">\n        <div nz-row [nzGutter]=\"[8,8]\">\n            @for (item of group.children; track item.component) {\n            <div nz-col [nzSpan]=\"item.span\">\n                <nz-card nzSize=\"small\" nzHoverable [nzCover]=\"coverTemplate\" [nzTitle]=\"item.component\"\n                    [nzExtra]=\"item.moreExamples? more:''\" [nzBodyStyle]=\"{padding:0}\" (click)=\"onClick(item.example)\"\n                    [draggable]=\"selectMode()=='drag'\" (mouseenter)=\"preloadDragElement(item.example)\"\n                    (dragstart)=\"onDragStart($event)\" (dragend)=\"onDragEnd($event)\">\n                </nz-card>\n                <ng-template #coverTemplate>\n                    <img style=\"margin: 4px;object-fit: contain;\" [style.height.px]=\"item.height\"\n                        [src]=\"item.coverImg\" />\n                </ng-template>\n                <ng-template #more>\n                    <a nz-button nzType=\"link\" nzSize=\"small\" nz-dropdown [nzDropdownMenu]=\"examples\">\n                        <nz-icon nzType=\"ellipsis\"></nz-icon>\n                    </a>\n                    <nz-dropdown-menu #examples=\"nzDropdownMenu\">\n                        <ul nz-menu nzSelectable>\n                            @for (item of item.moreExamples; track item.name) {\n                            <li nz-menu-item (click)=\"onClick(item)\" [draggable]=\"selectMode()=='drag'\"\n                                (mouseenter)=\"preloadDragElement(item)\" (dragstart)=\"onDragStart($event)\"\n                                (dragend)=\"onDragEnd($event)\">{{item.name}}</li>\n                            }\n                        </ul>\n                    </nz-dropdown-menu>\n                </ng-template>\n            </div>\n            }\n        </div>\n    </nz-collapse-panel>\n    }\n</nz-collapse>\n<div class=\"dragElementContainer\">\n    <div #dragElement>\n        @if (dragOptions()) {\n        <ng-container [axisDynamic]=\"dragOptions()\" [standalone]=\"true\"></ng-container>\n        {{dragOptions().type}}\n        }\n    </div>\n</div>", styles: [".dragElementContainer{position:absolute;z-index:-9999;top:100px}\n"], dependencies: [{ kind: "ngmodule", type: NzCollapseModule }, { kind: "component", type: i1$1.NzCollapsePanelComponent, selector: "nz-collapse-panel", inputs: ["nzActive", "nzDisabled", "nzShowArrow", "nzExtra", "nzHeader", "nzExpandedIcon"], outputs: ["nzActiveChange"], exportAs: ["nzCollapsePanel"] }, { kind: "component", type: i1$1.NzCollapseComponent, selector: "nz-collapse", inputs: ["nzAccordion", "nzBordered", "nzGhost", "nzExpandIconPosition"], exportAs: ["nzCollapse"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i2$1.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i3$2.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i3$2.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: DynamicDirective, selector: "[axisDynamic]", inputs: ["axisDynamic", "standalone", "isDesign"], exportAs: ["axisDynamic"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i6.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i7.ɵNzTransitionPatchDirective, selector: "[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i6$1.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i6$1.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "directive", type: i7$1.NzDropDownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }, { kind: "directive", type: i7$1.NzDropDownADirective, selector: "a[nz-dropdown]" }, { kind: "component", type: i7$1.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "directive", type: i7$1.NzDropdownButtonDirective, selector: "[nz-button][nz-dropdown]" }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i2.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzVariant", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$1.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i12.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i12.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzVariant", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus", "nzOnClear"], exportAs: ["nzSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: Cmplib, decorators: [{
+            type: Component,
+            args: [{ selector: 'axis-cmplib', imports: [NzCollapseModule, NzCardModule, NzGridModule, DynamicDirective, NzButtonModule, NzDropDownModule, NzInputModule, FormsModule, NzIconModule, NzFlexModule, NzSelectModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div nz-flex nzAlign=\"center\">\n    <input style=\"flex:1\" type=\"text\" nz-input placeholder=\"\u641C\u7D22\" nzBorderless ngModel\n        (ngModelChange)=\"searchValue$.next($event)\" />\n    <nz-select [(ngModel)]=\"cmplib\" nzSize=\"small\" nzBorderless style=\"width: auto;\">\n        @for (lib of cmplibs; track $index) {\n        <nz-option [nzValue]=\"lib.lib\" [nzLabel]=\"lib.libName\"></nz-option>\n        }\n    </nz-select>\n</div>\n<nz-collapse nzAccordion>\n    @for (group of displayCmpLib(); track group.groupName) {\n    <nz-collapse-panel [nzHeader]=\"`${group.groupName}(${group.children.length})`\">\n        <div nz-row [nzGutter]=\"[8,8]\">\n            @for (item of group.children; track item.component) {\n            <div nz-col [nzSpan]=\"item.span\">\n                <nz-card nzSize=\"small\" nzHoverable [nzCover]=\"coverTemplate\" [nzTitle]=\"item.component\"\n                    [nzExtra]=\"item.moreExamples? more:''\" [nzBodyStyle]=\"{padding:0}\" (click)=\"onClick(item.example)\"\n                    [draggable]=\"selectMode()=='drag'\" (mouseenter)=\"preloadDragElement(item.example)\"\n                    (dragstart)=\"onDragStart($event)\" (dragend)=\"onDragEnd($event)\">\n                </nz-card>\n                <ng-template #coverTemplate>\n                    <img style=\"margin: 4px;object-fit: contain;\" [style.height.px]=\"item.height\"\n                        [src]=\"item.coverImg\" />\n                </ng-template>\n                <ng-template #more>\n                    <a nz-button nzType=\"link\" nzSize=\"small\" nz-dropdown [nzDropdownMenu]=\"examples\">\n                        <nz-icon nzType=\"ellipsis\"></nz-icon>\n                    </a>\n                    <nz-dropdown-menu #examples=\"nzDropdownMenu\">\n                        <ul nz-menu nzSelectable>\n                            @for (item of item.moreExamples; track item.name) {\n                            <li nz-menu-item (click)=\"onClick(item)\" [draggable]=\"selectMode()=='drag'\"\n                                (mouseenter)=\"preloadDragElement(item)\" (dragstart)=\"onDragStart($event)\"\n                                (dragend)=\"onDragEnd($event)\">{{item.name}}</li>\n                            }\n                        </ul>\n                    </nz-dropdown-menu>\n                </ng-template>\n            </div>\n            }\n        </div>\n    </nz-collapse-panel>\n    }\n</nz-collapse>\n<div class=\"dragElementContainer\">\n    <div #dragElement>\n        @if (dragOptions()) {\n        <ng-container [axisDynamic]=\"dragOptions()\" [standalone]=\"true\"></ng-container>\n        {{dragOptions().type}}\n        }\n    </div>\n</div>", styles: [".dragElementContainer{position:absolute;z-index:-9999;top:100px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dragElement: [{
+                type: ViewChild,
+                args: ["dragElement", { read: ElementRef, static: true }]
+            }] } });
+
+class ShortcutKey {
+    design;
+    constructor(design) {
+        this.design = design;
+    }
+    cutNodeIds;
+    onKeyPress(e) {
+        const isInput = e.target.matches('input:not([disabled]), textarea:not([disabled])');
+        if (isInput) {
+            return;
+        }
+        let event;
+        if (e.key == "Backspace") {
+            event = "delete";
+        }
+        else if (e.key == "z" && (e.metaKey || e.ctrlKey) && !e.shiftKey) {
+            event = "undo";
+        }
+        else if (e.key.toLowerCase() == "z" && (e.metaKey || e.ctrlKey) && e.shiftKey) {
+            event = "redo";
+        }
+        else if (e.key == "c" && e.metaKey && e.ctrlKey) {
+            event = "onlyPreview";
+        }
+        else if (e.key == "r" && e.metaKey && e.ctrlKey) {
+            event = "forceRender";
+        }
+        else if (e.key == "h" && e.metaKey && e.ctrlKey) {
+            event = "shortcutKeysInfo";
+        }
+        else if (e.key == "c" && (e.metaKey || e.ctrlKey) && !getSelection()?.toString()) {
+            event = "copy";
+        }
+        else if (e.key == "x" && (e.metaKey || e.ctrlKey)) {
+            event = "cut";
+        }
+        else if (e.key == "v" && (e.metaKey || e.ctrlKey)) {
+            event = "paste";
+        }
+        // console.log(event, e.key, "meta", e.metaKey, "ctrl", e.ctrlKey, "shift", e.shiftKey)
+        if (event) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.doEvent(event);
+        }
+    }
+    doEvent(event) {
+        switch (event) {
+            case "delete":
+                this.design.tree.removeSelected();
+                break;
+            case "undo":
+                this.design.tools.undo();
+                break;
+            case "redo":
+                this.design.tools.redo();
+                break;
+            case "onlyPreview":
+                this.onlyPreview();
+                break;
+            case "forceRender":
+                this.forceRender();
+                break;
+            case "shortcutKeysInfo":
+                this.shortcutKeysInfo();
+                break;
+            case "copy":
+                this.copy();
+                break;
+            case "cut":
+                this.cut();
+                break;
+            case "paste":
+                this.paste();
+                break;
+        }
+    }
+    onlyPreview() {
+        this.design.tools.onlyPreview.set(!this.design.tools.onlyPreview());
+    }
+    forceRender() {
+        this.design.preview.forceRender();
+    }
+    shortcutKeysInfo() {
+        this.design.tools.shortcutKeysModal.set(true);
+    }
+    copy() {
+        const { selected } = this.design.tree.selectListSelection;
+        const options = selected.map(nodeId => this.design.optionsNodes.get(nodeId)).map(node => node?.options);
+        this.design.clipboard.copy(JSON.stringify(options, null, 2));
+    }
+    cut() {
+        const { selected } = this.design.tree.selectListSelection;
+        this.cutNodeIds = selected;
+        const options = selected.map(nodeId => this.design.optionsNodes.get(nodeId)).map(node => node?.options);
+        this.design.clipboard.copy(JSON.stringify(options, null, 2));
+    }
+    async paste() {
+        try {
+            const text = await navigator.clipboard.readText();
+            if (text) {
+                const j = JSON.parse(text);
+                let objs;
+                if (Array.isArray(j)) {
+                    objs = j.filter(r => this.isComponentObj(r));
+                }
+                else if (this.isComponentObj(j)) {
+                    objs = [j];
+                }
+                if (objs?.length && this.design.tree.selectListSelection.selected.length > 0) {
+                    if (this.cutNodeIds?.length && isEquals(objs.map(r => r.id), this.cutNodeIds)) {
+                        this.design.onNodesMove(this.cutNodeIds);
+                        this.cutNodeIds = undefined;
+                    }
+                    else {
+                        const examples = objs.map(r => this.parseToExample(r));
+                        this.design.onExamplePaste(examples);
+                    }
+                }
+            }
+        }
+        catch (e) {
+            console.error(e);
+        }
+    }
+    isComponentObj(obj) {
+        return obj && obj.hasOwnProperty("id") && obj.hasOwnProperty("component");
+    }
+    parseToExample(obj) {
+        return {
+            builder: componentIdBuilder => {
+                if (componentIdBuilder) {
+                    return this.recursionParse(obj, componentIdBuilder);
+                }
+                return obj;
+            }
+        };
+    }
+    recursionParse(obj, idBuilder, components = new Map()) {
+        if (this.isComponentObj(obj)) {
+            const offset = (components.get(obj.component) ?? 0) + 1;
+            components.set(obj.component, offset);
+            obj.id = idBuilder(obj.component, offset);
+        }
+        if (obj) {
+            if (Array.isArray(obj)) {
+                for (let i = 0; i < obj.length; i++) {
+                    obj[i] = this.recursionParse(obj[i], idBuilder, components);
+                }
+            }
+            else if (typeof obj == "object") {
+                for (const en of Object.entries(obj)) {
+                    obj[en[0]] = this.recursionParse(en[1], idBuilder, components);
+                }
+            }
+        }
+        return obj;
+    }
+}
+
+class DesignOptions extends ValueAccessOptions {
+    injectData = signal({}, ...(ngDevMode ? [{ debugName: "injectData" }] : []));
+    allPermissions = signal({}, ...(ngDevMode ? [{ debugName: "allPermissions" }] : []));
+}
+
+class Toolbar {
+    design = inject(Design);
+    cdr = inject(ChangeDetectorRef);
+    onlyPreview = signal(false, ...(ngDevMode ? [{ debugName: "onlyPreview" }] : []));
+    shortcutKeysModal = model(false, ...(ngDevMode ? [{ debugName: "shortcutKeysModal" }] : []));
+    history = [];
+    historyIndex = 0;
+    putHistory(options) {
+        if (this.historyIndex > 0) {
+            this.history.splice(0, this.historyIndex);
+            this.historyIndex = 0;
+        }
+        this.history.unshift({ options: copy(options, true), time: new Date() });
+        if (this.history.length > 50) {
+            this.history.pop();
+        }
+        this.cdr.markForCheck();
+    }
+    undo() {
+        if (this.historyIndex < this.history.length - 1) {
+            this.historyIndex++;
+            this.design.onChangeOptionsConfig(copy(this.history[this.historyIndex].options, true), false);
+            this.cdr.markForCheck();
+        }
+    }
+    redo() {
+        if (this.historyIndex > 0) {
+            this.historyIndex--;
+            this.design.onChangeOptionsConfig(copy(this.history[this.historyIndex].options, true), false);
+            this.cdr.markForCheck();
+        }
+    }
+    switchHistory(index) {
+        if (index != this.historyIndex && index > -1 && index < this.history.length) {
+            this.historyIndex = index;
+            this.design.onChangeOptionsConfig(copy(this.history[this.historyIndex].options, true), false);
+            this.cdr.markForCheck();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: Toolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: Toolbar, isStandalone: true, selector: "axis-toolbar", inputs: { shortcutKeysModal: { classPropertyName: "shortcutKeysModal", publicName: "shortcutKeysModal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { shortcutKeysModal: "shortcutKeysModalChange" }, ngImport: i0, template: "<div class=\"tools\" nz-flex nzGap=\"4px\">\n    <button nz-button nzSize=\"small\" nzType=\"text\" nzShape=\"circle\" nz-tooltip=\"\u5FEB\u6377\u952E\u8BF4\u660E\"\n        (click)=\"shortcutKeysModal.set(true)\">\n        <nz-icon nzType=\"exclamation-circle\" nzTheme=\"outline\" />\n    </button>\n    <button nz-button nzSize=\"small\" nzType=\"text\" nzShape=\"circle\" nz-tooltip=\"\u7F16\u8F91\u5386\u53F2\" nz-popover\n        [nzPopoverTitle]=\"historyTitle\" nzPopoverTrigger=\"click\" [nzPopoverContent]=\"historyTemp\"\n        nzPopoverPlacement=\"bottom\" nzPopoverOverlayClassName=\"history-popover\">\n        <nz-icon nzType=\"history\" nzTheme=\"outline\" />\n    </button>\n    <button nz-button nzSize=\"small\" nzType=\"text\" nzShape=\"circle\" [nz-tooltip]=\"onlyPreview()?'\u6062\u590D':'\u653E\u5927'\"\n        (click)=\"onlyPreview.set(!onlyPreview())\">\n        <nz-icon [nzType]=\"onlyPreview()?'fullscreen-exit':'fullscreen'\" />\n    </button>\n    <button nz-button nzSize=\"small\" nzType=\"text\" nzShape=\"circle\" nz-tooltip=\"\u91CD\u65B0\u8F7D\u5165\"\n        (click)=\"design.preview.forceRender()\">\n        <nz-icon nzType=\"reload\" />\n    </button>\n</div>\n\n<ng-template #historyTitle>\n    <div nz-flex>\n        <div style=\"flex:1\">\u7F16\u8F91\u5386\u53F2</div>\n        <button nz-button nzSize=\"small\" nzType=\"link\" nzShape=\"circle\" nz-tooltip=\"\u64A4\u9500\" (click)=\"undo()\"\n            [disabled]=\"historyIndex==history.length-1\">\n            <nz-icon nzType=\"undo\" nzTheme=\"outline\" />\n        </button>\n        <button nz-button nzSize=\"small\" nzType=\"link\" nzShape=\"circle\" nz-tooltip=\"\u91CD\u505A\" (click)=\"redo()\"\n            [disabled]=\"historyIndex==0\">\n            <nz-icon nzType=\"redo\" nzTheme=\"outline\" />\n        </button>\n    </div>\n</ng-template>\n\n<ng-template #historyTemp>\n    <div nz-flex nzVertical>\n        @for (item of history; track item.time;let i=$index) {\n        <div nz-flex [class.active]=\"i == historyIndex\" class=\"history-item\" (click)=\"switchHistory(i)\">\n            <div style=\"width: 20px;\">\n                @if (i == historyIndex) {\n                <nz-icon nzType=\"aim\" nzTheme=\"outline\" />\n                }\n            </div>\n            <div>#{{history.length-i}} {{item.time | axisHowLong}}</div>\n        </div>\n        }\n    </div>\n</ng-template>\n\n<nz-modal [(nzVisible)]=\"shortcutKeysModal\" nzTitle=\"\u5FEB\u6377\u952E\u8BF4\u660E\" nzDraggable [nzOkText]=\"null\" nzCancelText=\"\u5173\u95ED\"\n    (nzOnCancel)=\"shortcutKeysModal.set(false)\">\n    <ng-container *nzModalContent>\n        <nz-table nzTemplateMode nzSize=\"small\">\n            <thead>\n                <tr>\n                    <th>\u529F\u80FD</th>\n                    <th>\u5FEB\u6377\u952E</th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr>\n                    <td>\u67E5\u770B\u5FEB\u6377\u952E\u8BF4\u660E</td>\n                    <td>Ctrl Meta H</td>\n                </tr>\n                <tr>\n                    <td>\u590D\u5236</td>\n                    <td>Ctrl C</td>\n                </tr>\n                <tr>\n                    <td>\u526A\u5207</td>\n                    <td>Ctrl X</td>\n                </tr>\n                <tr>\n                    <td>\u7C98\u8D34</td>\n                    <td>Ctrl V</td>\n                </tr>\n                <tr>\n                    <td>\u64A4\u9500</td>\n                    <td>Ctrl Z</td>\n                </tr>\n                <tr>\n                    <td>\u91CD\u505A</td>\n                    <td>Ctrl Shift Z</td>\n                </tr>\n                <tr>\n                    <td>\u9884\u89C8\u653E\u5927/\u6062\u590D</td>\n                    <td>Ctrl Meta C</td>\n                </tr>\n                <tr>\n                    <td>\u91CD\u65B0\u8F7D\u5165</td>\n                    <td>Ctrl Meta R</td>\n                </tr>\n            </tbody>\n        </nz-table>\n    </ng-container>\n</nz-modal>", styles: [".tools{position:absolute;right:20px;top:10px}::ng-deep .history-popover .ant-popover-inner-content{width:100%;padding:12px 0}.history-item{padding:0 12px;cursor:pointer}.history-item:hover{background-color:var(--ant-primary-1)}.active{color:var(--ant-primary-color);pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i1$2.NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "directive", type: i1$2.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i2$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i2$2.NzTableCellDirective, selector: "th:not(.nz-disable-th), td:not(.nz-disable-td)" }, { kind: "directive", type: i2$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i2$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i2$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i2$2.NzTrDirective, selector: "tr:not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$1.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i9.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i6.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i7.ɵNzTransitionPatchDirective, selector: "[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "ngmodule", type: NzPopoverModule }, { kind: "directive", type: i8$1.NzPopoverDirective, selector: "[nz-popover]", inputs: ["nzPopoverArrowPointAtCenter", "nzPopoverTitle", "nzPopoverTitleContext", "nzPopoverContent", "nzPopoverContentContext", "nz-popover", "nzPopoverTrigger", "nzPopoverPlacement", "nzPopoverOrigin", "nzPopoverVisible", "nzPopoverMouseEnterDelay", "nzPopoverMouseLeaveDelay", "nzPopoverOverlayClassName", "nzPopoverOverlayStyle", "nzPopoverOverlayClickable", "nzPopoverBackdrop"], outputs: ["nzPopoverVisibleChange"], exportAs: ["nzPopover"] }, { kind: "pipe", type: HowLongPipe, name: "axisHowLong" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: Toolbar, decorators: [{
+            type: Component,
+            args: [{ selector: 'axis-toolbar', imports: [NzModalModule, NzTableModule, NzFlexModule, NzIconModule, NzToolTipModule, NzButtonModule, NzPopoverModule, HowLongPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tools\" nz-flex nzGap=\"4px\">\n    <button nz-button nzSize=\"small\" nzType=\"text\" nzShape=\"circle\" nz-tooltip=\"\u5FEB\u6377\u952E\u8BF4\u660E\"\n        (click)=\"shortcutKeysModal.set(true)\">\n        <nz-icon nzType=\"exclamation-circle\" nzTheme=\"outline\" />\n    </button>\n    <button nz-button nzSize=\"small\" nzType=\"text\" nzShape=\"circle\" nz-tooltip=\"\u7F16\u8F91\u5386\u53F2\" nz-popover\n        [nzPopoverTitle]=\"historyTitle\" nzPopoverTrigger=\"click\" [nzPopoverContent]=\"historyTemp\"\n        nzPopoverPlacement=\"bottom\" nzPopoverOverlayClassName=\"history-popover\">\n        <nz-icon nzType=\"history\" nzTheme=\"outline\" />\n    </button>\n    <button nz-button nzSize=\"small\" nzType=\"text\" nzShape=\"circle\" [nz-tooltip]=\"onlyPreview()?'\u6062\u590D':'\u653E\u5927'\"\n        (click)=\"onlyPreview.set(!onlyPreview())\">\n        <nz-icon [nzType]=\"onlyPreview()?'fullscreen-exit':'fullscreen'\" />\n    </button>\n    <button nz-button nzSize=\"small\" nzType=\"text\" nzShape=\"circle\" nz-tooltip=\"\u91CD\u65B0\u8F7D\u5165\"\n        (click)=\"design.preview.forceRender()\">\n        <nz-icon nzType=\"reload\" />\n    </button>\n</div>\n\n<ng-template #historyTitle>\n    <div nz-flex>\n        <div style=\"flex:1\">\u7F16\u8F91\u5386\u53F2</div>\n        <button nz-button nzSize=\"small\" nzType=\"link\" nzShape=\"circle\" nz-tooltip=\"\u64A4\u9500\" (click)=\"undo()\"\n            [disabled]=\"historyIndex==history.length-1\">\n            <nz-icon nzType=\"undo\" nzTheme=\"outline\" />\n        </button>\n        <button nz-button nzSize=\"small\" nzType=\"link\" nzShape=\"circle\" nz-tooltip=\"\u91CD\u505A\" (click)=\"redo()\"\n            [disabled]=\"historyIndex==0\">\n            <nz-icon nzType=\"redo\" nzTheme=\"outline\" />\n        </button>\n    </div>\n</ng-template>\n\n<ng-template #historyTemp>\n    <div nz-flex nzVertical>\n        @for (item of history; track item.time;let i=$index) {\n        <div nz-flex [class.active]=\"i == historyIndex\" class=\"history-item\" (click)=\"switchHistory(i)\">\n            <div style=\"width: 20px;\">\n                @if (i == historyIndex) {\n                <nz-icon nzType=\"aim\" nzTheme=\"outline\" />\n                }\n            </div>\n            <div>#{{history.length-i}} {{item.time | axisHowLong}}</div>\n        </div>\n        }\n    </div>\n</ng-template>\n\n<nz-modal [(nzVisible)]=\"shortcutKeysModal\" nzTitle=\"\u5FEB\u6377\u952E\u8BF4\u660E\" nzDraggable [nzOkText]=\"null\" nzCancelText=\"\u5173\u95ED\"\n    (nzOnCancel)=\"shortcutKeysModal.set(false)\">\n    <ng-container *nzModalContent>\n        <nz-table nzTemplateMode nzSize=\"small\">\n            <thead>\n                <tr>\n                    <th>\u529F\u80FD</th>\n                    <th>\u5FEB\u6377\u952E</th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr>\n                    <td>\u67E5\u770B\u5FEB\u6377\u952E\u8BF4\u660E</td>\n                    <td>Ctrl Meta H</td>\n                </tr>\n                <tr>\n                    <td>\u590D\u5236</td>\n                    <td>Ctrl C</td>\n                </tr>\n                <tr>\n                    <td>\u526A\u5207</td>\n                    <td>Ctrl X</td>\n                </tr>\n                <tr>\n                    <td>\u7C98\u8D34</td>\n                    <td>Ctrl V</td>\n                </tr>\n                <tr>\n                    <td>\u64A4\u9500</td>\n                    <td>Ctrl Z</td>\n                </tr>\n                <tr>\n                    <td>\u91CD\u505A</td>\n                    <td>Ctrl Shift Z</td>\n                </tr>\n                <tr>\n                    <td>\u9884\u89C8\u653E\u5927/\u6062\u590D</td>\n                    <td>Ctrl Meta C</td>\n                </tr>\n                <tr>\n                    <td>\u91CD\u65B0\u8F7D\u5165</td>\n                    <td>Ctrl Meta R</td>\n                </tr>\n            </tbody>\n        </nz-table>\n    </ng-container>\n</nz-modal>", styles: [".tools{position:absolute;right:20px;top:10px}::ng-deep .history-popover .ant-popover-inner-content{width:100%;padding:12px 0}.history-item{padding:0 12px;cursor:pointer}.history-item:hover{background-color:var(--ant-primary-1)}.active{color:var(--ant-primary-color);pointer-events:none}\n"] }]
+        }] });
+
+class Design extends ValueAccess {
+    constructor() {
+        super();
+        this.addSubscribe(this.changeSubject
+            .pipe(debounceTime(300))
+            .subscribe((value) => this.onChangeOptionsConfig(value)));
+    }
+    options = new DesignOptions();
+    clipboard = inject(ClipboardService);
+    loader = inject(AXIS_COMPONENTS_LOADER_TOKEN);
+    injectDataObs = toObservable(this.options.injectData);
+    funcs = inject(AXIS_INJECT_FUNC_TOKEN);
+    treeNode = signal(undefined, ...(ngDevMode ? [{ debugName: "treeNode" }] : []));
+    loadAndOptions = signal(undefined, ...(ngDevMode ? [{ debugName: "loadAndOptions" }] : []));
+    menu;
+    chooseComponentVisible = model(false, ...(ngDevMode ? [{ debugName: "chooseComponentVisible" }] : []));
+    chooseComponentSubject = new Subject();
+    chooseComponentTags = signal([], ...(ngDevMode ? [{ debugName: "chooseComponentTags" }] : []));
+    cacheSized = [300, 300];
+    setting;
+    settingRef;
+    settingOptionsNodeId;
+    settingOptionsStr = model("", ...(ngDevMode ? [{ debugName: "settingOptionsStr" }] : []));
+    preview;
+    tree;
+    codeEditor;
+    tools;
+    shortcutKey = new ShortcutKey(this);
+    onKeyPress(e) {
+        this.shortcutKey.onKeyPress(e);
+    }
+    optionsNodes = new Map();
+    optionsNodeScopes = new Map();
+    scopeInfos = new Map();
+    componentsInfo = new Map;
+    componentsCounter = new Map();
+    scopInfoSubjects = new Map();
+    changeSubject = new Subject();
+    setInitValue(value) {
+        super.setInitValue(value);
+        this.tools.putHistory(value);
+        this.render(value);
+    }
+    writeValue(value) {
+        super.writeValue(value);
+        this.tools.putHistory(value);
+        this.render(value);
+    }
+    async inspect(nextInfo) {
+        if (!nextInfo.currentObject?.component) {
+            return;
+        }
+        const config = await this.loader.loadComponent(`${nextInfo.currentObject.component}/design`);
+        if (!this.componentsInfo.has(nextInfo.currentObject.component)) {
+            this.componentsInfo.set(nextInfo.currentObject.component, { component: nextInfo.currentObject.component, componentName: config.componentName, eventHandlerDescs: config.eventHandlerDescs });
+        }
+        if (!this.componentsCounter.has(nextInfo.currentObject.component)) {
+            this.componentsCounter.set(nextInfo.currentObject.component, 0);
+        }
+        this.componentsCounter.set(nextInfo.currentObject.component, this.componentsCounter.get(nextInfo.currentObject.component) + 1);
+        const res = config.buildOptionsNodes?.(nextInfo);
+        if (res) {
+            let nodes = [res.treeNode];
+            while (nodes.length) {
+                let next = [];
+                for (const node of nodes) {
+                    this.optionsNodes.set(node.id, node);
+                    if (node.children) {
+                        next = next.concat(node.children);
+                    }
+                    nodes = next;
+                }
+            }
+            if (res.treeNode.scopeId) {
+                if (!this.optionsNodeScopes.has(res.treeNode.scopeId)) {
+                    this.optionsNodeScopes.set(res.treeNode.scopeId, []);
+                }
+                this.optionsNodeScopes.get(res.treeNode.scopeId).push(res.treeNode);
+            }
+            if (res.newScopes) {
+                for (const scope of res.newScopes) {
+                    this.scopeInfos.set(scope.scopeId, scope);
+                }
+            }
+            if (res.next?.length) {
+                for (const r of res.next) {
+                    if (Array.isArray(r.parentObject)) {
+                        for (let i = 0; i < r.parentObject.length; i++) {
+                            r.indexOfParent = i;
+                            r.currentObject = r.parentObject[i];
+                            const parent = this.optionsNodes.get(r.parentId);
+                            const child = await this.inspect(r);
+                            if (child) {
+                                parent?.children?.push(child);
+                            }
+                        }
+                    }
+                    else if (r.indexOfParent != undefined) {
+                        r.currentObject = r.parentObject[r.indexOfParent];
+                        const child = await this.inspect(r);
+                        if (child) {
+                            this.optionsNodes.get(r.parentId)?.children?.push(child);
+                        }
+                    }
+                }
+            }
+        }
+        return res?.treeNode;
+    }
+    onChangeOptionsConfig(value, putHistory = true) {
+        this.reset();
+        if (value === undefined) {
+            value = this.value();
+        }
+        this.value.set(copy(value, true));
+        this.render(this.value());
+        this.loadAndOptions()?.[0].then(() => {
+            if (!putHistory && this.settingOptionsNodeId) {
+                const node = this.optionsNodes.get(this.settingOptionsNodeId);
+                if (node) {
+                    this.settingRef?.instance.writeValue(node.options);
+                }
+                this.syncToCode();
+            }
+        });
+        this.onChange?.(this.value());
+        if (putHistory) {
+            this.tools.putHistory(this.value());
+        }
+    }
+    render(value) {
+        this.loadAndOptions.set([this.inspect({ currentObject: value }).then(v => {
+                this.treeNode.set(v ?? null);
+                return v;
+            }), value]);
+    }
+    onSettingChange(settingValue) {
+        if (this.settingOptionsNodeId) {
+            const optionsNode = this.optionsNodes.get(this.settingOptionsNodeId);
+            if (optionsNode) {
+                if (optionsNode.isRoot) {
+                    Object.assign(this.value(), settingValue);
+                }
+                else {
+                    optionsNode.updateOptions(settingValue);
+                }
+                this.settingOptionsNodeId = optionsNode.id;
+                this.preview.selectByNodeIds([this.settingOptionsNodeId]);
+                this.tree.selectByNodeIds([this.settingOptionsNodeId]);
+                this.changeSubject.next(undefined);
+            }
+        }
+    }
+    onTreeSelect(nodeIds) {
+        this.preview.selectByNodeIds(nodeIds);
+        if (nodeIds.length == 1) {
+            this.updateScopeWithNodeId(nodeIds[0]);
+            this.loadSetting(nodeIds[0]);
+        }
+        else {
+            this.settingOptionsNodeId = undefined;
+            this.resetSetting();
+        }
+    }
+    onPreviewSelect(nodeIds) {
+        this.menu.clear();
+        this.tree.selectByNodeIds(nodeIds);
+        if (nodeIds.length == 1) {
+            this.updateScopeWithNodeId(nodeIds[0]);
+            this.loadSetting(nodeIds[0]);
+        }
+        else {
+            this.settingOptionsNodeId = undefined;
+            this.resetSetting();
+        }
+        let expandIds = [];
+        for (const nodeid of nodeIds) {
+            expandIds = expandIds.concat(this.getAllParentNodes(nodeid).map(n => n.id));
+        }
+        this.tree.expandByNodeIds(expandIds);
+    }
+    updateScopeWithNodeId(nodeId) {
+        let scopeId = this.optionsNodes.get(nodeId)?.scopeId;
+        while (scopeId && this.scopeInfos.has(scopeId)) {
+            this.preview.updateScopeWithSelectedElement(scopeId);
+            scopeId = this.scopeInfos.get(scopeId)?.parentScopeId;
+        }
+    }
+    loadSetting(nodeId) {
+        if (nodeId && this.optionsNodes.has(nodeId)) {
+            if (this.settingOptionsNodeId == nodeId) {
+                return;
+            }
+            else if (this.settingOptionsNodeId) {
+                const oldNode = this.optionsNodes.get(this.settingOptionsNodeId);
+                const newNode = this.optionsNodes.get(nodeId);
+                if (oldNode.parentId == newNode.parentId && oldNode.settingType == newNode.settingType) {
+                    this.settingOptionsNodeId = nodeId;
+                    this.settingOptionsStr.set(JSON.stringify(newNode.options, null, "  "));
+                    this.settingRef?.instance.writeValue(newNode.options);
+                    return;
+                }
+            }
+            this.resetSetting();
+            this.settingOptionsNodeId = nodeId;
+            const optionsNode = this.optionsNodes.get(nodeId);
+            this.settingOptionsStr.set(JSON.stringify(optionsNode.options, null, "  "));
+            if (optionsNode.settingType) {
+                const injector = Injector.create({
+                    providers: [
+                        { provide: AXIS_DESIGN_SCOPE_INFOS_GETTER_TOKEN, useValue: this.buildScopeInfosGetter(optionsNode) },
+                        { provide: AXIS_DESIGN_COMPONENT_INFO_FOR_SETTING_TOKEN, useValue: this.buildComponentInfoForSetting(optionsNode) },
+                        { provide: AXIS_DESIGN_ALL_PERMISSIONS_TOKEN, useValue: this.options.allPermissions() },
+                        { provide: AXIS_INJECT_FUNC_TOKEN, useValue: this.funcs }
+                    ]
+                });
+                this.settingRef = this.setting.createComponent(optionsNode.settingType, { injector: injector });
+                this.settingRef.instance.onChange = this.onSettingChange.bind(this);
+                this.settingRef.instance.writeValue(optionsNode.options);
+            }
+        }
+        else {
+            this.resetSetting();
+        }
+    }
+    buildScopeInfosGetter(optionsNode) {
+        const _scopeId = optionsNode.scopeId;
+        return (scopeId) => {
+            scopeId ??= _scopeId;
+            if (scopeId) {
+                if (!this.scopInfoSubjects.has(scopeId)) {
+                    this.scopInfoSubjects.set(scopeId, this.buildScopeInfoSubject(scopeId));
+                }
+                return this.scopInfoSubjects.get(scopeId);
+            }
+            return new BehaviorSubject([]);
+        };
+    }
+    buildScopeInfoSubject(scopeId) {
+        const scopeObs = [];
+        const scopeInfosOrder = [];
+        while (scopeId && this.scopeInfos.has(scopeId)) {
+            const scopeInfo = this.scopeInfos.get(scopeId);
+            scopeInfosOrder.push(scopeId);
+            const scopeSubject = this.preview.getAndUpdateScopeSubject(scopeId);
+            scopeObs.push(scopeSubject.pipe(filter(s => !!s), switchMap(s => {
+                return merge(new Observable(sub => sub.next(s.getSnapshoptAllWithScopeId(s.axisScope()))), s.getAllWithScopeId(s.axisScope()) ?? NEVER);
+            }), filter(realDs => !!realDs && this.scopeInfos.has(scopeInfo.scopeId)), map(realDs => {
+                const _scopeInfo = this.scopeInfos.get(scopeInfo.scopeId);
+                return {
+                    scopeInfo: { ..._scopeInfo, ds: { ..._scopeInfo.ds, ...realDs } },
+                    index: scopeInfosOrder.indexOf(scopeInfo.scopeId),
+                };
+            })));
+            scopeId = scopeInfo.parentScopeId;
+        }
+        const subject = new BehaviorSubject([]);
+        const res = [];
+        this.addSubscribe(merge(...scopeObs).pipe(map(row => {
+            res[row.index] = row.scopeInfo;
+            return [...res];
+        })).subscribe(subject));
+        return subject;
+    }
+    buildComponentInfoForSetting(optionsNode) {
+        const componentInfo = new Map();
+        let scopeId = optionsNode.scopeId;
+        while (scopeId) {
+            let nodes = this.optionsNodeScopes.get(scopeId);
+            if (nodes) {
+                for (const node of nodes) {
+                    const component = node.options.component;
+                    if (!componentInfo.has(component)) {
+                        const info = this.componentsInfo.get(component);
+                        componentInfo.set(component, { component: info.component, componentName: info.componentName, nodes: [], eventHandlerDescs: info.eventHandlerDescs ?? {} });
+                    }
+                    componentInfo.get(component).nodes.push(node);
+                }
+            }
+            scopeId = this.scopeInfos.get(scopeId)?.parentScopeId;
+        }
+        return Array.from(componentInfo.values());
+    }
+    onContextMenu(e, nodeId) {
+        const node = this.optionsNodes.get(nodeId);
+        if (node?.contextMenu) {
+            const parent = node.isRoot ? undefined : this.optionsNodes.get(node.parentId);
+            const injector = Injector.create({
+                providers: [
+                    { provide: AXIS_DESIGN_OPTIONS_NODE_FOR_MENU, useValue: { current: node, parent } },
+                    { provide: AXIS_DESIGN_CHOOSE_COMPONENT_FUNC_TOKEN, useValue: this.chooseComponent.bind(this) },
+                ]
+            });
+            this.menu.clear();
+            const ref = this.menu.createComponent(node.contextMenu, { injector: injector });
+            ref.instance.contextMenu(e);
+            ref.instance.onChange = (value) => {
+                this.onChangeOptionsConfig(value);
+            };
+        }
+    }
+    chooseComponent(...tags) {
+        this.chooseComponentTags.set(tags);
+        this.chooseComponentVisible.set(true);
+        const existsIds = new Set();
+        return this.chooseComponentSubject.asObservable()
+            .pipe(take(1), map((example) => example?.builder((component, offset) => this.genNewComponentId(component, offset, existsIds))), switchMap(options => options ? from(this.loader.loadComponent(`${options.component}/design`)).pipe(map(config => ({ options, config }))) : of({})));
+    }
+    genNewComponentId(component, offset = 1, existsIds) {
+        let id;
+        if (this.componentsCounter.has(component)) {
+            id = `${component}#${this.componentsCounter.get(component) + offset}`;
+        }
+        else {
+            id = `${component}#${offset}`;
+        }
+        if (existsIds?.has(id) || this.optionsNodes.has(id)) {
+            return this.genNewComponentId(component, offset + 1, existsIds);
+        }
+        existsIds?.add(id);
+        return id;
+    }
+    onCmplibDragStart(example, element) {
+        const options = example.builder((component, offset) => this.genNewComponentId(component, offset));
+        const optionsNode = new OptionsNode({
+            canDrag: true,
+            dragType: "component",
+            rootOptions: options
+        });
+        this.optionsNodes.set(optionsNode.id, optionsNode);
+        this.preview.dragForOuter(optionsNode.toElementNode({ element }));
+    }
+    async onCmplibDragEnd() {
+        const nodeId = this.preview.dragEndForOuter();
+        if (nodeId) {
+            await this.loadAndOptions()[0];
+            this.tree.selectByNodeIds([nodeId]);
+            this.preview.selectByNodeIds([nodeId]);
+            this.loadSetting(nodeId);
+        }
+    }
+    onExamplePaste(examples) {
+        const nodes = [];
+        for (const example of examples) {
+            const options = example.builder((component, offset) => this.genNewComponentId(component, offset));
+            const optionsNode = new OptionsNode({
+                canDrag: true,
+                dragType: "component",
+                rootOptions: options
+            });
+            nodes.push(optionsNode);
+            this.optionsNodes.set(optionsNode.id, optionsNode);
+        }
+        this.tree.addNodeForSelected(nodes);
+    }
+    onNodesMove(nodeIds) {
+        if (this.tree.selectListSelection.selected.length == 1) {
+            this.tree.addNodeForSelected(nodeIds.map(id => this.optionsNodes.get(id)), true);
+        }
+    }
+    onEditorChange(optionsStr) {
+        try {
+            const options = JSON.parse(optionsStr);
+            this.onSettingChange(options);
+        }
+        catch (_) { }
+    }
+    syncToSetting() {
+        if (this.settingOptionsNodeId) {
+            const optionsNode = this.optionsNodes.get(this.settingOptionsNodeId);
+            if (optionsNode) {
+                const instance = this.setting.get(0)?.context;
+                instance?.writeValue(optionsNode.options);
+            }
+        }
+    }
+    syncToCode() {
+        if (this.settingOptionsNodeId) {
+            const optionsNode = this.optionsNodes.get(this.settingOptionsNodeId);
+            if (optionsNode) {
+                this.settingOptionsStr.set(JSON.stringify(optionsNode.options, null, "  "));
+            }
+        }
+        setTimeout(() => {
+            this.layoutEditor();
+        });
+    }
+    layoutEditor(e) {
+        if (e) {
+            if (e[0] > 0) {
+                this.cacheSized[0] = e[0];
+            }
+            if (e[2] > 0) {
+                this.cacheSized[1] = e[2];
+            }
+        }
+        this.codeEditor?.onEvents?.({
+            target: "component",
+            name: "layout",
+        })?.subscribe();
+    }
+    resetSetting() {
+        this.settingOptionsNodeId = undefined;
+        this.setting.clear();
+        this.settingOptionsStr.set("");
+    }
+    reset() {
+        this.optionsNodes.clear();
+        this.componentsInfo.clear();
+        this.optionsNodeScopes.clear();
+        this.scopeInfos.clear();
+        this.componentsCounter.clear();
+    }
+    getAllParentNodes(node, parentNodes = []) {
+        if (typeof node == "string") {
+            node = this.optionsNodes.get(node);
+        }
+        if (node?.parentId) {
+            const parent = this.optionsNodes.get(node.parentId);
+            if (parent) {
+                parentNodes.push(parent);
+                this.getAllParentNodes(parent, parentNodes);
+            }
+        }
+        return parentNodes;
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        for (const s of this.scopInfoSubjects.values()) {
+            s.unsubscribe();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: Design, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: Design, isStandalone: true, selector: "axis-design", inputs: { chooseComponentVisible: { classPropertyName: "chooseComponentVisible", publicName: "chooseComponentVisible", isSignal: true, isRequired: false, transformFunction: null }, settingOptionsStr: { classPropertyName: "settingOptionsStr", publicName: "settingOptionsStr", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chooseComponentVisible: "chooseComponentVisibleChange", settingOptionsStr: "settingOptionsStrChange" }, host: { attributes: { "tabindex": "-1", "autofocus": "true" }, listeners: { "keydown": "onKeyPress($event)" } }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "setting", first: true, predicate: ["setting"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "preview", first: true, predicate: ["preview"], descendants: true, static: true }, { propertyName: "tree", first: true, predicate: ["tree"], descendants: true, static: true }, { propertyName: "codeEditor", first: true, predicate: ["codeEditor"], descendants: true }, { propertyName: "tools", first: true, predicate: ["tools"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<nz-splitter (nzResize)=\"layoutEditor($event)\">\n    <nz-splitter-panel [nzCollapsible]=\"!tools.onlyPreview()\" [nzDefaultSize]=\"cacheSized[0]\" nzMin=\"15%\" nzMax=\"40%\"\n        [nzSize]=\"tools.onlyPreview()?0:undefined\">\n        <nz-tabs nzCentered>\n            <nz-tab nzTitle=\"\u7EC4\u4EF6\u6811\">\n                <axis-design-tree #tree [node]=\"treeNode()\" [optionsNodes]=\"optionsNodes\"\n                    (onSelect)=\"onTreeSelect($event)\" (onChange)=\"onChangeOptionsConfig($event)\"\n                    (onContextMenu)=\"onContextMenu($event.event,$event.nodeId)\"></axis-design-tree>\n            </nz-tab>\n            <nz-tab nzTitle=\"\u7EC4\u4EF6\u5E93\">\n                <axis-cmplib selectMode=\"drag\" (dragStart)=\"onCmplibDragStart($event.example,$event.element)\"\n                    (dragEnd)=\"onCmplibDragEnd()\"></axis-cmplib>\n            </nz-tab>\n        </nz-tabs>\n    </nz-splitter-panel>\n    <nz-splitter-panel>\n        <div nz-flex nzVertical style=\"height: 100%;width: 100%;position: relative;\">\n            <h2 style=\"text-align: center;margin-top: 4px;\">\u9884\u89C8</h2>\n            <axis-toolbar #tools></axis-toolbar>\n            <axis-design-preview #preview style=\"flex:1;overflow: auto;\" [loadAndOptions]=\"loadAndOptions()\"\n                [optionsNodes]=\"optionsNodes\" [injectData]=\"injectDataObs\" (onChange)=\"onChangeOptionsConfig()\"\n                (onSelect)=\"onPreviewSelect($event)\"\n                (onContextMenu)=\"onContextMenu($event.event,$event.nodeId)\"></axis-design-preview>\n        </div>\n    </nz-splitter-panel>\n    <nz-splitter-panel [nzCollapsible]=\"!tools.onlyPreview()\" [nzDefaultSize]=\"cacheSized[1]\" nzMin=\"15%\" nzMax=\"40%\"\n        [nzSize]=\"tools.onlyPreview()?0:undefined\" style=\"position: relative;\">\n        <nz-tabs nzCentered style=\"height: 100%;\">\n            <nz-tab nzTitle=\"\u5C5E\u6027\u8BBE\u7F6E\" (nzClick)=\"syncToSetting()\">\n                <ng-container #setting></ng-container>\n                @if (!settingOptionsStr()){\n                <nz-empty style=\"height: 300px;\" nzNotFoundContent=\"\u8BF7\u5148\u9009\u62E9\u4E00\u4E2A\u7EC4\u4EF6\"></nz-empty>\n                }\n            </nz-tab>\n            <nz-tab nzTitle=\"\u4EE3\u7801\" nzForceRender (nzSelect)=\"syncToCode();\">\n                <ng-container #codeEditor=\"axisDynamic\"\n                    [axisDynamic]=\"{component:'axis-components/editor',inuse:true,mode:'json',readonly:!settingOptionsStr(),otherOptions:{tabSize:2}}\"\n                    [standalone]=\"true\" [(ngModel)]=\"settingOptionsStr\"\n                    (ngModelChange)=\"onEditorChange($event)\"></ng-container>\n            </nz-tab>\n        </nz-tabs>\n    </nz-splitter-panel>\n</nz-splitter>\n<ng-container #menu></ng-container>\n<nz-drawer [(nzVisible)]=\"chooseComponentVisible\" nzTitle=\"\u9009\u62E9\u7EC4\u4EF6\" [nzBodyStyle]=\"{padding:0}\"\n    (nzOnClose)=\"chooseComponentVisible.set(false);chooseComponentSubject.next(undefined)\">\n    <ng-container *nzDrawerContent>\n        <axis-cmplib selectMode=\"click\" [tags]=\"chooseComponentTags()\"\n            (clickExample)=\"chooseComponentVisible.set(false);chooseComponentSubject.next($event)\"></axis-cmplib>\n    </ng-container>\n</nz-drawer>", styles: ["nz-tabs,::ng-deep .ant-tabs-content,::ng-deep .ant-tabs-tabpane{height:100%}::ng-deep .ant-tabs-content{overflow:auto}:host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: NzSplitterModule }, { kind: "component", type: i1$3.NzSplitterComponent, selector: "nz-splitter", inputs: ["nzLayout", "nzLazy"], outputs: ["nzResizeStart", "nzResize", "nzResizeEnd"], exportAs: ["nzSplitter"] }, { kind: "component", type: i1$3.NzSplitterPanelComponent, selector: "nz-splitter-panel", inputs: ["nzDefaultSize", "nzMin", "nzMax", "nzSize", "nzCollapsible", "nzResizable"], exportAs: ["nzSplitterPanel"] }, { kind: "ngmodule", type: NzTabsModule }, { kind: "component", type: i2$3.NzTabsComponent, selector: "nz-tabs,nz-tabset", inputs: ["nzSelectedIndex", "nzTabPosition", "nzTabBarExtraContent", "nzCanDeactivate", "nzAddIcon", "nzTabBarStyle", "nzType", "nzSize", "nzAnimated", "nzTabBarGutter", "nzHideAdd", "nzCentered", "nzHideAll", "nzLinkRouter", "nzLinkExact", "nzDestroyInactiveTabPane"], outputs: ["nzSelectChange", "nzSelectedIndexChange", "nzTabListScroll", "nzClose", "nzAdd"], exportAs: ["nzTabs"] }, { kind: "component", type: i2$3.NzTabComponent, selector: "nz-tab", inputs: ["nzTitle", "nzClosable", "nzCloseIcon", "nzDisabled", "nzForceRender"], outputs: ["nzSelect", "nzDeselect", "nzClick", "nzContextmenu"], exportAs: ["nzTab"] }, { kind: "component", type: Preview, selector: "axis-design-preview", inputs: ["loadAndOptions", "optionsNodes", "injectData"], outputs: ["onChange", "onSelect", "onContextMenu"] }, { kind: "component", type: Tree, selector: "axis-design-tree", inputs: ["node", "optionsNodes"], outputs: ["onChange", "onSelect", "onContextMenu"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$1.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "component", type: Cmplib, selector: "axis-cmplib", inputs: ["cmplib", "selectMode", "tags"], outputs: ["cmplibChange", "clickExample", "dragStart", "dragEnd"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzEmptyModule }, { kind: "component", type: i10.NzEmptyComponent, selector: "nz-empty", inputs: ["nzNotFoundImage", "nzNotFoundContent", "nzNotFoundFooter"], exportAs: ["nzEmpty"] }, { kind: "directive", type: DynamicDirective, selector: "[axisDynamic]", inputs: ["axisDynamic", "standalone", "isDesign"], exportAs: ["axisDynamic"] }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i6$2.NzDrawerComponent, selector: "nz-drawer", inputs: ["nzContent", "nzCloseIcon", "nzClosable", "nzMaskClosable", "nzMask", "nzCloseOnNavigation", "nzNoAnimation", "nzKeyboard", "nzTitle", "nzExtra", "nzFooter", "nzPlacement", "nzSize", "nzMaskStyle", "nzBodyStyle", "nzWrapClassName", "nzWidth", "nzHeight", "nzZIndex", "nzOffsetX", "nzOffsetY", "nzVisible"], outputs: ["nzOnViewInit", "nzOnClose", "nzVisibleChange"], exportAs: ["nzDrawer"] }, { kind: "directive", type: i6$2.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "component", type: Toolbar, selector: "axis-toolbar", inputs: ["shortcutKeysModal"], outputs: ["shortcutKeysModalChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: Design, decorators: [{
+            type: Component,
+            args: [{ selector: 'axis-design', imports: [NzSplitterModule, NzTabsModule, Preview, Tree, NzFlexModule, Cmplib, FormsModule, NzEmptyModule, DynamicDirective, NzDrawerModule, Toolbar], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        tabindex: "-1",
+                        autofocus: "true",
+                    }, template: "<nz-splitter (nzResize)=\"layoutEditor($event)\">\n    <nz-splitter-panel [nzCollapsible]=\"!tools.onlyPreview()\" [nzDefaultSize]=\"cacheSized[0]\" nzMin=\"15%\" nzMax=\"40%\"\n        [nzSize]=\"tools.onlyPreview()?0:undefined\">\n        <nz-tabs nzCentered>\n            <nz-tab nzTitle=\"\u7EC4\u4EF6\u6811\">\n                <axis-design-tree #tree [node]=\"treeNode()\" [optionsNodes]=\"optionsNodes\"\n                    (onSelect)=\"onTreeSelect($event)\" (onChange)=\"onChangeOptionsConfig($event)\"\n                    (onContextMenu)=\"onContextMenu($event.event,$event.nodeId)\"></axis-design-tree>\n            </nz-tab>\n            <nz-tab nzTitle=\"\u7EC4\u4EF6\u5E93\">\n                <axis-cmplib selectMode=\"drag\" (dragStart)=\"onCmplibDragStart($event.example,$event.element)\"\n                    (dragEnd)=\"onCmplibDragEnd()\"></axis-cmplib>\n            </nz-tab>\n        </nz-tabs>\n    </nz-splitter-panel>\n    <nz-splitter-panel>\n        <div nz-flex nzVertical style=\"height: 100%;width: 100%;position: relative;\">\n            <h2 style=\"text-align: center;margin-top: 4px;\">\u9884\u89C8</h2>\n            <axis-toolbar #tools></axis-toolbar>\n            <axis-design-preview #preview style=\"flex:1;overflow: auto;\" [loadAndOptions]=\"loadAndOptions()\"\n                [optionsNodes]=\"optionsNodes\" [injectData]=\"injectDataObs\" (onChange)=\"onChangeOptionsConfig()\"\n                (onSelect)=\"onPreviewSelect($event)\"\n                (onContextMenu)=\"onContextMenu($event.event,$event.nodeId)\"></axis-design-preview>\n        </div>\n    </nz-splitter-panel>\n    <nz-splitter-panel [nzCollapsible]=\"!tools.onlyPreview()\" [nzDefaultSize]=\"cacheSized[1]\" nzMin=\"15%\" nzMax=\"40%\"\n        [nzSize]=\"tools.onlyPreview()?0:undefined\" style=\"position: relative;\">\n        <nz-tabs nzCentered style=\"height: 100%;\">\n            <nz-tab nzTitle=\"\u5C5E\u6027\u8BBE\u7F6E\" (nzClick)=\"syncToSetting()\">\n                <ng-container #setting></ng-container>\n                @if (!settingOptionsStr()){\n                <nz-empty style=\"height: 300px;\" nzNotFoundContent=\"\u8BF7\u5148\u9009\u62E9\u4E00\u4E2A\u7EC4\u4EF6\"></nz-empty>\n                }\n            </nz-tab>\n            <nz-tab nzTitle=\"\u4EE3\u7801\" nzForceRender (nzSelect)=\"syncToCode();\">\n                <ng-container #codeEditor=\"axisDynamic\"\n                    [axisDynamic]=\"{component:'axis-components/editor',inuse:true,mode:'json',readonly:!settingOptionsStr(),otherOptions:{tabSize:2}}\"\n                    [standalone]=\"true\" [(ngModel)]=\"settingOptionsStr\"\n                    (ngModelChange)=\"onEditorChange($event)\"></ng-container>\n            </nz-tab>\n        </nz-tabs>\n    </nz-splitter-panel>\n</nz-splitter>\n<ng-container #menu></ng-container>\n<nz-drawer [(nzVisible)]=\"chooseComponentVisible\" nzTitle=\"\u9009\u62E9\u7EC4\u4EF6\" [nzBodyStyle]=\"{padding:0}\"\n    (nzOnClose)=\"chooseComponentVisible.set(false);chooseComponentSubject.next(undefined)\">\n    <ng-container *nzDrawerContent>\n        <axis-cmplib selectMode=\"click\" [tags]=\"chooseComponentTags()\"\n            (clickExample)=\"chooseComponentVisible.set(false);chooseComponentSubject.next($event)\"></axis-cmplib>\n    </ng-container>\n</nz-drawer>", styles: ["nz-tabs,::ng-deep .ant-tabs-content,::ng-deep .ant-tabs-tabpane{height:100%}::ng-deep .ant-tabs-content{overflow:auto}:host{display:block;width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { menu: [{
+                type: ViewChild,
+                args: ["menu", { static: true, read: ViewContainerRef }]
+            }], setting: [{
+                type: ViewChild,
+                args: ["setting", { static: true, read: ViewContainerRef }]
+            }], preview: [{
+                type: ViewChild,
+                args: ["preview", { static: true }]
+            }], tree: [{
+                type: ViewChild,
+                args: ["tree", { static: true }]
+            }], codeEditor: [{
+                type: ViewChild,
+                args: ["codeEditor"]
+            }], tools: [{
+                type: ViewChild,
+                args: ["tools", { static: true }]
+            }], onKeyPress: [{
+                type: HostListener,
+                args: ["keydown", ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Design };
+//# sourceMappingURL=ngx-axis-appforge-axis-components-design.mjs.map