@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
1 lines • 42.2 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"TreeModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":13,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":14,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":14,"character":26},{"__symbolic":"reference","module":"ng-devui/loading","name":"LoadingModule","line":14,"character":39},{"__symbolic":"reference","module":"ng-devui/checkbox","name":"CheckBoxModule","line":14,"character":54},{"__symbolic":"reference","module":"ng-devui/popover","name":"PopoverModule","line":14,"character":70},{"__symbolic":"reference","module":"ng-devui/utils","name":"SafePipeModule","line":14,"character":85}],"exports":[{"__symbolic":"reference","name":"TreeComponent"},{"__symbolic":"reference","name":"TreeNodesComponent"},{"__symbolic":"reference","name":"OperableTreeComponent"}],"declarations":[{"__symbolic":"reference","name":"TreeComponent"},{"__symbolic":"reference","name":"TreeNodesComponent"},{"__symbolic":"reference","name":"OperableTreeComponent"},{"__symbolic":"reference","name":"AutofocusDirective"}],"providers":[]}]}],"members":{}},"TreeComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":23,"character":1},"arguments":[{"selector":"d-tree","template":"<d-tree-nodes [treeList]=\"treeFactory.treeRoot\" [treeNodesRef]=\"treeNodesRef ? treeNodesRef : default\" [treeFactory]=\"treeFactory\">\r\n</d-tree-nodes>\r\n\r\n<ng-template #default let-treeNode=\"treeNode\" let-treeFactory=\"treeFactory\">\r\n <div class=\"devui-tree-node\" #treeNodeContent>\r\n <div\r\n class=\"devui-tree-node__content\"\r\n [class.devui-tree-node--parent]=\"(treeNode.data.children || []).length > 0\"\r\n (mouseenter)=\"addBackGround($event)\"\r\n (mouseleave)=\"removeBackGround($event)\"\r\n >\r\n <div class=\"devui-tree-node__content--value-wrapper\" [class.isMatch]=\"treeNode.data.isMatch\">\r\n <span\r\n (click)=\"toggleNode($event, treeNode)\"\r\n *ngIf=\"(treeNode.data.children || []).length > 0 || treeNode.data.isParent\"\r\n class=\"devui-tree-node__folder\"\r\n >\r\n <span *ngIf=\"iconParentClose && !treeNode.data.isOpen\" [innerHTML]=\"iconParentClose\"></span>\r\n <span *ngIf=\"iconParentOpen && treeNode.data.isOpen\" [innerHTML]=\"iconParentOpen\"></span>\r\n <span *ngIf=\"!iconParentClose && !treeNode.data.isOpen\">\r\n <svg\r\n class=\"svg-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n >\r\n <g id=\"图标\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g id=\"fold\">\r\n <rect id=\"Rectangle-175\" x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\r\n <path\r\n d=\"M14,6 L14,5 L7.58578644,5 L5.58578644,3 L2,3 L2,6 L14,6 Z M14,7 L2,7 L2,13 L14,13 L14,7 Z M1,2 L6,2 L8,4 L15,4 L15,14 L1,14 L1,2 Z\"\r\n id=\"形状\"\r\n fill-rule=\"nonzero\"\r\n />\r\n </g>\r\n </g>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"!iconParentOpen && treeNode.data.isOpen\">\r\n <svg\r\n class=\"svg-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n >\r\n <g id=\"图标\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g id=\"fold-copy-3\">\r\n <rect id=\"Rectangle-175\" x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\r\n <path\r\n d=\"M14,5 L14,4 L7.58578644,4 L5.58578644,2 L2,2 L2,5 L1,5 L1,1 L6,1 L8,3 L15,3 L15,5 L14,5 Z M1.28077641,7 L2.78077641,13 L13.2192236,13 L14.7192236,7 L1.28077641,7 Z M0,6 L16,6 L14,14 L2,14 L0,6 Z\"\r\n id=\"形状\"\r\n fill-rule=\"nonzero\"\r\n />\r\n </g>\r\n </g>\r\n </svg>\r\n </span>\r\n </span>\r\n <span class=\"devui-tree-node__leaf\" *ngIf=\"(treeNode.data.children || []).length === 0 && !treeNode.data.isParent\">\r\n <span *ngIf=\"!iconLeaf\">\r\n <svg\r\n class=\"svg-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n >\r\n <g id=\"图标\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g id=\"文件\">\r\n <rect id=\"Rectangle-175\" x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\r\n <path\r\n d=\"M13,6 L9,6 L9,2 L3,2 L3,14 L13,14 L13,6 Z M12.5857864,5 L10,2.41421356 L10,5 L12.5857864,5 Z M2,1 L10,1 L14,5 L14,15 L2,15 L2,1 Z\"\r\n id=\"形状\"\r\n fill-rule=\"nonzero\"\r\n />\r\n </g>\r\n </g>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"iconLeaf\" [innerHTML]=\"iconLeaf\"></span>\r\n </span>\r\n <span\r\n (click)=\"selectNode($event, treeNode)\"\r\n (dblclick)=\"nodeDblClick($event, treeNode)\"\r\n class=\"devui-tree-node__title\"\r\n [class.active]=\"treeNode.data.isActive\"\r\n title=\"{{ treeNode.data.title }}\"\r\n >{{ treeNode.data.title }}</span\r\n >\r\n <span dLoading [showLoading]=\"treeNode.data.loading\" [loadingTemplateRef]=\"customizedLoadingRef\"> </span>\r\n </div>\r\n </div>\r\n <div class=\"devui-tree-node__children\" *ngIf=\"treeNode.data.isOpen\">\r\n <d-tree-nodes [treeList]=\"treeNode.data.children || []\" [treeNodesRef]=\"default\" [treeFactory]=\"treeFactory\"> </d-tree-nodes>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #customizedLoadingRef>\r\n <span class=\"devui-loading-children\">{{ i18nCommonText?.loading }}</span>\r\n</ng-template>\r\n","styles":[":host{display:block}.devui-tree-node{color:#575d6c;line-height:1;white-space:nowrap;position:relative}.devui-tree-node .devui-tree-node__content{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;font-size:14px}.devui-tree-node .devui-tree-node__content--value-wrapper{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;padding:.1em;margin:.3em 0}.devui-tree-node .devui-tree-node__content--value-wrapper.isMatch{color:#5e7ce0;border:1px solid #dfe1e6;border-radius:.2em}.devui-tree-node .devui-tree-node__children{padding-left:.8em}.devui-tree-node .devui-tree-node__children:first-child{border-left-color:transparent}.devui-tree-node .devui-tree-node__children .devui-tree-node{margin-left:1.2em;content:'';position:relative}.devui-tree-node .devui-tree-node__children .devui-tree-node:last-child{border-left-color:transparent}.devui-tree-node .devui-tree-node__title{margin-left:.4em;padding:.1em;display:inline-block;border:1px dashed transparent;border-radius:2px;cursor:pointer}.devui-tree-node .devui-tree-node__title.active{background-color:#f2f5fc;color:#5e7ce0;text-decoration:none;border-color:transparent}.devui-tree-node .devui-tree-node__edit{margin-left:.4em;padding:.1em}.devui-tree-node .devui-tree-node__edit>.devui-input-sm{height:26px}.devui-tree-node .devui-tree-node__edit>.devui-input-sm.error,.devui-tree-node .devui-tree-node__edit>.devui-input-sm.error:focus,.devui-tree-node .devui-tree-node__edit>.devui-input-sm.error:hover{border-color:#f66f6a}.devui-tree-node .devui-tree-node__leaf{cursor:default}.devui-tree-node .devui-tree-node__leaf .devui-tree-node__leaf--default{color:#f2a71f}.devui-tree-node .devui-tree-node__folder{display:inline-block;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.devui-tree-node .devui-tree-node__folder .devui-tree-node__folder--default{color:#f2b806}.devui-tree-node .devui-loading-children{display:inline-block;vertical-align:middle;margin-left:.5em;margin-top:.15em;color:#5e7ce0;font-style:italic;font-size:1em;-webkit-animation-name:devui-loading-children;animation-name:devui-loading-children;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes devui-loading-children{0%,12.5%{color:#627fe1}25%{color:#617fe1}37.5%{color:#617ee1}50%,62.5%{color:#607ee0}75%{color:#5f7de0}100%,87.5%{color:#5e7ce0}}@keyframes devui-loading-children{0%,12.5%{color:#627fe1}25%{color:#617fe1}37.5%{color:#617ee1}50%,62.5%{color:#607ee0}75%{color:#5f7de0}100%,87.5%{color:#5e7ce0}}.devui-tree-node svg.svg-icon>g>g>path{fill:#575d6c}::ng-deep .devui-tree-mask{background:#f2f5fc}"]}]}],"members":{"tree":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"treeNodesRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"treeNodeIdKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"treeNodeChildrenKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"iconParentOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"iconParentClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"iconLeaf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"treeNodeTitleKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"checkboxDisabledKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"nodeSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":39,"character":3}}]}],"nodeDblClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":40,"character":3}}]}],"nodeToggled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":41,"character":3}}]}],"treeNodeContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":42,"character":3},"arguments":["treeNodeContent"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ng-devui/i18n","name":"I18nService","line":46,"character":28}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"addBackGround":[{"__symbolic":"method"}],"removeBackGround":[{"__symbolic":"method"}],"selectNode":[{"__symbolic":"method"}],"toggleNode":[{"__symbolic":"method"}],"appendTreeItems":[{"__symbolic":"method"}],"nodeDblClick":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"OperableTreeComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":22,"character":1},"arguments":[{"selector":"d-operable-tree","exportAs":"dOperableTreeComponent","template":"<d-tree\r\n #operableTree\r\n [tree]=\"tree\"\r\n [treeNodeIdKey]=\"treeNodeIdKey\"\r\n [treeNodeChildrenKey]=\"treeNodeChildrenKey\"\r\n [treeNodesRef]=\"operableTreeNodeRef\"\r\n [iconParentOpen]=\"iconParentOpen\"\r\n [iconParentClose]=\"iconParentClose\"\r\n [iconLeaf]=\"iconLeaf\"\r\n [treeNodeTitleKey]=\"treeNodeTitleKey\"\r\n [checkboxDisabledKey]=\"checkboxDisabledKey\"\r\n>\r\n</d-tree>\r\n\r\n<ng-template #operableTreeNodeRef let-treeNode=\"treeNode\" let-treeFactory=\"treeFactory\">\r\n <div\r\n class=\"devui-tree-node devui-operable-tree-node\"\r\n [style.display]=\"treeNode.data.isHide ? 'none' : ''\"\r\n [ngClass]=\"{ selected: isSelectedNode(treeNode.data) }\"\r\n #treeNodeContent\r\n >\r\n <div\r\n class=\"devui-tree-node__content\"\r\n [class.devui-tree-node--parent]=\"(treeNode.data.children || []).length > 0\"\r\n (mouseenter)=\"treeNodeHover(treeNode, 'enter')\"\r\n (mouseleave)=\"treeNodeHover(treeNode, 'leave')\"\r\n [draggable]=\"draggable && treeNode.parentId !== undefined\"\r\n (dragstart)=\"onDragstart($event, treeNode)\"\r\n (dragover)=\"onDragover($event, draggable, treeNode)\"\r\n (dragleave)=\"onDragleave($event, treeNode)\"\r\n (drop)=\"onDrop($event, treeNode)\"\r\n (mouseenter)=\"addBackGround($event)\"\r\n (mouseleave)=\"removeBackGround($event)\"\r\n >\r\n <div class=\"devui-tree-node__content--value-wrapper\" [class.isMatch]=\"treeNode.data.isMatch\">\r\n <span\r\n (click)=\"toggleNode($event, treeNode)\"\r\n *ngIf=\"(treeNode.data.children || []).length > 0 || treeNode.data.isParent\"\r\n class=\"devui-tree-node__folder\"\r\n >\r\n <span\r\n [ngStyle]=\"{\r\n display: iconParentClose && !treeNode.data.isOpen ? 'inline' : 'none'\r\n }\"\r\n [innerHTML]=\"iconParentClose | safe: 'html'\"\r\n ></span>\r\n <span\r\n [ngStyle]=\"{\r\n display: iconParentOpen && treeNode.data.isOpen ? 'inline' : 'none'\r\n }\"\r\n [innerHTML]=\"iconParentOpen | safe: 'html'\"\r\n ></span>\r\n <span\r\n [ngStyle]=\"{\r\n display: !iconParentOpen && !treeNode.data.isOpen ? 'inline' : 'none'\r\n }\"\r\n >\r\n <svg\r\n class=\"svg-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n >\r\n <g id=\"图标\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g id=\"fold\">\r\n <rect id=\"Rectangle-175\" x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\r\n <path\r\n d=\"M14,6 L14,5 L7.58578644,5 L5.58578644,3 L2,3 L2,6 L14,6 Z M14,7 L2,7 L2,13 L14,13 L14,7 Z M1,2 L6,2 L8,4 L15,4 L15,14 L1,14 L1,2 Z\"\r\n id=\"形状\"\r\n fill=\"#293040\"\r\n fill-rule=\"nonzero\"\r\n />\r\n </g>\r\n </g>\r\n </svg>\r\n </span>\r\n <span\r\n [ngStyle]=\"{\r\n display: !iconParentOpen && treeNode.data.isOpen ? 'inline' : 'none'\r\n }\"\r\n >\r\n <svg\r\n class=\"svg-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n >\r\n <g id=\"图标\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g id=\"fold-copy-3\">\r\n <rect id=\"Rectangle-175\" x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\r\n <path\r\n d=\"M14,5 L14,4 L7.58578644,4 L5.58578644,2 L2,2 L2,5 L1,5 L1,1 L6,1 L8,3 L15,3 L15,5 L14,5 Z M1.28077641,7 L2.78077641,13 L13.2192236,13 L14.7192236,7 L1.28077641,7 Z M0,6 L16,6 L14,14 L2,14 L0,6 Z\"\r\n id=\"形状\"\r\n fill=\"#293040\"\r\n fill-rule=\"nonzero\"\r\n />\r\n </g>\r\n </g>\r\n </svg>\r\n </span>\r\n </span>\r\n <span class=\"devui-tree-node__leaf\" *ngIf=\"(treeNode.data.children || []).length === 0 && !treeNode.data.isParent\">\r\n <span *ngIf=\"!iconLeaf\">\r\n <svg\r\n class=\"svg-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n >\r\n <g id=\"图标\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g id=\"文件\">\r\n <rect id=\"Rectangle-175\" x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\r\n <path\r\n d=\"M13,6 L9,6 L9,2 L3,2 L3,14 L13,14 L13,6 Z M12.5857864,5 L10,2.41421356 L10,5 L12.5857864,5 Z M2,1 L10,1 L14,5 L14,15 L2,15 L2,1 Z\"\r\n id=\"形状\"\r\n fill=\"#293040\"\r\n fill-rule=\"nonzero\"\r\n />\r\n </g>\r\n </g>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"iconLeaf\" [innerHTML]=\"iconLeaf | safe: 'html'\"></span>\r\n </span>\r\n <ng-container *ngIf=\"iconTemplate && iconTemplatePosition === 'before-checkbox'\">\r\n <ng-template [ngTemplateOutlet]=\"iconTemplate\" [ngTemplateOutletContext]=\"{ node: treeNode.data }\"> </ng-template>\r\n </ng-container>\r\n <d-checkbox\r\n *ngIf=\"checkable\"\r\n [(ngModel)]=\"treeNode.data.isChecked\"\r\n (ngModelChange)=\"checkNodeById($event, treeNode.id)\"\r\n [halfchecked]=\"treeNode.data.halfChecked\"\r\n [color]=\"checkboxInput?.color\"\r\n [cssClass]=\"'devui-tree-node__checkbox'\"\r\n [disabled]=\"treeNode.data.disabled\"\r\n >\r\n </d-checkbox>\r\n <ng-container *ngIf=\"iconTemplate && (!iconTemplatePosition || iconTemplatePosition === 'after-checkbox')\">\r\n <ng-template [ngTemplateOutlet]=\"iconTemplate\" [ngTemplateOutletContext]=\"{ node: treeNode.data }\"> </ng-template>\r\n </ng-container>\r\n <ng-container *ngIf=\"nodeTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"nodeTemplate\" [ngTemplateOutletContext]=\"{ node: treeNode.data }\"> </ng-template>\r\n </ng-container>\r\n <span\r\n *ngIf=\"!nodeTemplate && !treeNode.data?.editable\"\r\n (click)=\"selectNode($event, treeNode)\"\r\n (dblclick)=\"nodeDblClick($event, treeNode)\"\r\n class=\"devui-tree-node__title\"\r\n [class.active]=\"treeNode.data.isActive\"\r\n [class.disabled]=\"treeNode.data.disabled\"\r\n title=\"{{ treeNode.data.title }}\"\r\n >{{ treeNode.data.title }}</span\r\n >\r\n <span class=\"devui-tree-node__edit\" *ngIf=\"!nodeTemplate && treeNode.data?.editable\">\r\n <input\r\n [class.error]=\"!!treeNode.data.errTips\"\r\n class=\"devui-form-control devui-input-sm\"\r\n type=\"text\"\r\n dTreeAutoFocus\r\n [(ngModel)]=\"treeNode.data.title\"\r\n (blur)=\"onBlurEdit(treeNode)\"\r\n (keyup.enter)=\"onBlurEdit(treeNode)\"\r\n (input)=\"onInputChange($event.target.value, treeNode)\"\r\n dPopover\r\n [content]=\"treeNode.data.errTips\"\r\n [position]=\"'top'\"\r\n [appendToBody]=\"true\"\r\n [visible]=\"!!treeNode.data.errTips\"\r\n [popType]=\"'error'\"\r\n />\r\n </span>\r\n <ng-container *ngIf=\"statusTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"statusTemplate\" [ngTemplateOutletContext]=\"{ node: treeNode }\"> </ng-template>\r\n </ng-container>\r\n <span dLoading [showLoading]=\"treeNode.data.loading\" [loadingTemplateRef]=\"customizedLoadingRef\"> </span>\r\n <span\r\n class=\"devui-tree-icons\"\r\n *ngIf=\"!treeNode.data.disableAdd && (treeNode.data.isActive || treeNode.data.isHover) && addable\"\r\n (click)=\"addChildNode($event, treeNode)\"\r\n >\r\n <svg\r\n width=\"12px\"\r\n height=\"12px\"\r\n viewBox=\"0 0 12 12\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g id=\"add-plus\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g transform=\"translate(-531.000000, -168.000000)\">\r\n <g transform=\"translate(529.000000, 166.000000)\">\r\n <path d=\"M7,7 L7,2 L9,2 L9,7 L14,7 L14,9 L9,9 L9,14 L7,14 L7,9 L2,9 L2,7 L7,7 Z\" id=\"add-path\" fill=\"#293040\"></path>\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n </span>\r\n <span\r\n class=\"devui-tree-icons\"\r\n *ngIf=\"!treeNode.data.disableEdit && (treeNode.data.isActive || treeNode.data.isHover) && editable\"\r\n (click)=\"editNode($event, treeNode)\"\r\n >\r\n <svg\r\n width=\"12px\"\r\n height=\"12px\"\r\n viewBox=\"0 0 12 12\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g id=\"edit\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g transform=\"translate(-652.000000, -1070.000000)\">\r\n <g transform=\"translate(650.000000, 1068.000000)\">\r\n <path\r\n d=\"M9.48528137,3.41421356 L10.8994949,2 L13.7279221,4.82842712 L12.3137085,6.24264069 L9.48528137,3.41421356 Z M5.24264069,13.3137085 L2.41421356,13.3137085 L2.41421356,10.4852814 L8.77817459,4.12132034 L11.6066017,6.94974747 L5.24264069,13.3137085 Z\"\r\n id=\"edit-path\"\r\n fill=\"#293040\"\r\n ></path>\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n </span>\r\n <span\r\n class=\"devui-tree-icons\"\r\n *ngIf=\"!treeNode.data.disableDelete && (treeNode.data.isActive || treeNode.data.isHover) && deletable\"\r\n (click)=\"deleteNodes($event, treeNode)\"\r\n >\r\n <svg\r\n width=\"12px\"\r\n height=\"12px\"\r\n viewBox=\"0 0 12 12\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g id=\"delete\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g transform=\"translate(-1693.000000, -168.000000)\" fill=\"#3C4458\" fill-rule=\"nonzero\" id=\"delete-path\">\r\n <g transform=\"translate(1691.000000, 166.000000)\">\r\n <polygon\r\n id=\"Mask\"\r\n points=\"8 6.58578644 12.2426407 2.34314575 13.6568542 3.75735931 9.41421356 8 13.6568542 12.2426407 12.2426407 13.6568542 8 9.41421356 3.75735931 13.6568542 2.34314575 12.2426407 6.58578644 8 2.34314575 3.75735931 3.75735931 2.34314575\"\r\n ></polygon>\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n </span>\r\n <ng-container *ngIf=\"operatorTemplate && (treeNode.data.isActive || treeNode.data.isHover)\">\r\n <ng-template\r\n [ngTemplateOutlet]=\"operatorTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: this, node: treeNode, addNode: addChildNodeProxy, editNode: editNodeProxy, deleteNode: deleteNodesProxy}\"\r\n >\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"devui-tree-node__children\" *ngIf=\"treeNode.data.isOpen\">\r\n <d-tree-nodes [treeList]=\"treeNode.data.children || []\" [treeNodesRef]=\"operableTreeNodeRef\" [treeFactory]=\"treeFactory\">\r\n </d-tree-nodes>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #customizedLoadingRef>\r\n <span class=\"devui-loading-children\">{{ i18nCommonText?.loading }}</span>\r\n</ng-template>\r\n","styles":[".devui-tree-node{color:#575d6c;line-height:1;white-space:nowrap;position:relative}.devui-tree-node .devui-tree-node__content{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;font-size:14px}.devui-tree-node .devui-tree-node__content--value-wrapper{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;padding:.1em;margin:.3em 0}.devui-tree-node .devui-tree-node__content--value-wrapper.isMatch{color:#5e7ce0;border:1px solid #dfe1e6;border-radius:.2em}.devui-tree-node .devui-tree-node__children{padding-left:.8em}.devui-tree-node .devui-tree-node__children:first-child{border-left-color:transparent}.devui-tree-node .devui-tree-node__children .devui-tree-node{margin-left:1.2em;content:'';position:relative}.devui-tree-node .devui-tree-node__children .devui-tree-node:last-child{border-left-color:transparent}.devui-tree-node .devui-tree-node__title{margin-left:.4em;padding:.1em;display:inline-block;border:1px dashed transparent;border-radius:2px;cursor:pointer}.devui-tree-node .devui-tree-node__title.active{background-color:#f2f5fc;color:#5e7ce0;text-decoration:none;border-color:transparent}.devui-tree-node .devui-tree-node__edit{margin-left:.4em;padding:.1em}.devui-tree-node .devui-tree-node__edit>.devui-input-sm{height:26px}.devui-tree-node .devui-tree-node__edit>.devui-input-sm.error,.devui-tree-node .devui-tree-node__edit>.devui-input-sm.error:focus,.devui-tree-node .devui-tree-node__edit>.devui-input-sm.error:hover{border-color:#f66f6a}.devui-tree-node .devui-tree-node__leaf{cursor:default}.devui-tree-node .devui-tree-node__leaf .devui-tree-node__leaf--default{color:#f2a71f}.devui-tree-node .devui-tree-node__folder{display:inline-block;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.devui-tree-node .devui-tree-node__folder .devui-tree-node__folder--default{color:#f2b806}.devui-tree-node .devui-loading-children{display:inline-block;vertical-align:middle;margin-left:.5em;margin-top:.15em;color:#5e7ce0;font-style:italic;font-size:1em;-webkit-animation-name:devui-loading-children;animation-name:devui-loading-children;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes devui-loading-children{0%,12.5%{color:#627fe1}25%{color:#617fe1}37.5%{color:#617ee1}50%,62.5%{color:#607ee0}75%{color:#5f7de0}100%,87.5%{color:#5e7ce0}}@keyframes devui-loading-children{0%,12.5%{color:#627fe1}25%{color:#617fe1}37.5%{color:#617ee1}50%,62.5%{color:#607ee0}75%{color:#5f7de0}100%,87.5%{color:#5e7ce0}}.devui-tree-node svg.svg-icon>g>g>path{fill:#575d6c}::ng-deep .devui-tree-mask{background:#f2f5fc}:host{display:block}.disabled{opacity:.3;cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep.devui-tree-node.devui-operable-tree-node .devui-tree-node__checkbox{margin-left:.5em;margin-top:-.2em}::ng-deep.devui-tree-node.devui-operable-tree-node .devui-tree-node__checkbox .devui-checkbox-material{width:16px;height:16px}::ng-deep.devui-tree-node.devui-operable-tree-node .devui-tree-icons{margin-left:.5em;cursor:pointer}::ng-deep.devui-tree-node.devui-operable-tree-node .devui-tree-icons svg #add-path{fill:#252b3a}::ng-deep.devui-tree-node.devui-operable-tree-node .devui-tree-icons svg #edit-path{fill:#252b3a}::ng-deep.devui-tree-node.devui-operable-tree-node .devui-tree-icons svg #delete-path{fill:#252b3a}::ng-deep.devui-tree-node.devui-operable-tree-node .devui-tree-icons:hover #add-path{fill:#344899}::ng-deep.devui-tree-node.devui-operable-tree-node .devui-tree-icons:hover #edit-path{fill:#344899}::ng-deep.devui-tree-node.devui-operable-tree-node .devui-tree-icons:hover #delete-path{fill:#344899}::ng-deep.devui-tree-node.devui-operable-tree-node svg.svg-icon>g>g>path{fill:#575d6c}.devui-form-control{outline:0}"]}]}],"members":{"tree":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"treeNodeIdKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"treeNodeChildrenKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"checkboxDisabledKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"iconParentOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"iconParentClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"iconLeaf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"showLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"checkable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"deletable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"addable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"editable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"checkboxInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"beforeAddNode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"beforeDeleteNode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"beforeNodeDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"beforeEditNode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"canActivateNode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"canActivateParentNode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3}}]}],"treeNodeTitleKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"postAddNode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"iconTemplatePosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":3}}]}],"nodeSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":52,"character":3}}]}],"nodeDblClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":53,"character":3}}]}],"nodeDeleted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":3}}]}],"nodeToggled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":3}}]}],"nodeChecked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":3}}]}],"nodeEdited":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":57,"character":3}}]}],"editValueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":58,"character":3}}]}],"nodeOnDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":59,"character":3}}]}],"operableTree":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":60,"character":3},"arguments":["operableTree",{"static":true}]}]}],"iconTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":61,"character":3},"arguments":["iconTemplate",{"static":false}]}]}],"nodeTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":62,"character":3},"arguments":["nodeTemplate",{"static":false}]}]}],"operatorTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":63,"character":3},"arguments":["operatorTemplate",{"static":false}]}]}],"statusTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":64,"character":3},"arguments":["statusTemplate",{"static":false}]}]}],"treeNodeContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":70,"character":3},"arguments":["treeNodeContent"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ng-devui/i18n","name":"I18nService","line":74,"character":28}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"addBackGround":[{"__symbolic":"method"}],"removeBackGround":[{"__symbolic":"method"}],"onDragstart":[{"__symbolic":"method"}],"onDragover":[{"__symbolic":"method"}],"onDragleave":[{"__symbolic":"method"}],"onDrop":[{"__symbolic":"method"}],"selectNode":[{"__symbolic":"method"}],"toggleNode":[{"__symbolic":"method"}],"deleteNodes":[{"__symbolic":"method"}],"addChildNode":[{"__symbolic":"method"}],"editNode":[{"__symbolic":"method"}],"checkNodeById":[{"__symbolic":"method"}],"onBlurEdit":[{"__symbolic":"method"}],"onInputChange":[{"__symbolic":"method"}],"treeNodeHover":[{"__symbolic":"method"}],"isSelectedNode":[{"__symbolic":"method"}],"postEditNode":[{"__symbolic":"method"}],"appendTreeItems":[{"__symbolic":"method"}],"checkNode":[{"__symbolic":"method"}],"nodeDblClick":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ICheckboxInput":{"__symbolic":"interface"},"ITreeNodeData":{"__symbolic":"interface"},"ITreeMap":{"__symbolic":"interface"},"ITreeItem":{"__symbolic":"interface"},"ITreeInput":{"__symbolic":"interface"},"TreeNode":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[null,null,null]}]}},"TreeFactory":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}],"addNode":[{"__symbolic":"method"}],"editNodeTitle":[{"__symbolic":"method"}],"deleteNodeById":[{"__symbolic":"method"}],"toggleNodeById":[{"__symbolic":"method"}],"openNodesById":[{"__symbolic":"method"}],"closeNodesById":[{"__symbolic":"method"}],"disabledNodesById":[{"__symbolic":"method"}],"_disabledParentNodes":[{"__symbolic":"method"}],"checkNodesById":[{"__symbolic":"method"}],"checkParentNodes":[{"__symbolic":"method"}],"checkChildNodes":[{"__symbolic":"method"}],"getCheckedNodes":[{"__symbolic":"method"}],"getDisabledNodes":[{"__symbolic":"method"}],"activeNodeById":[{"__symbolic":"method"}],"getChildrenById":[{"__symbolic":"method"}],"toTree":[{"__symbolic":"method"}],"startLoading":[{"__symbolic":"method"}],"endLoading":[{"__symbolic":"method"}],"isMatchNode":[{"__symbolic":"method"}],"getNodeById":[{"__symbolic":"method"}],"hideNodeById":[{"__symbolic":"method"}],"maintainCheckedNodeList":[{"__symbolic":"method"}],"dfs":[{"__symbolic":"method"}],"addChildNode":[{"__symbolic":"method"}],"removeChildNode":[{"__symbolic":"method"}],"resetSearchResults":[{"__symbolic":"method"}],"searchTree":[{"__symbolic":"method"}],"deactivateAllNodes":[{"__symbolic":"method"}]},"statics":{"create":{"__symbolic":"function","parameters":[],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"TreeFactory"}}}}},"AutofocusDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[dTreeAutoFocus]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":7,"character":34}]}],"ngOnInit":[{"__symbolic":"method"}]}},"TreeNodesComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"d-tree-nodes","template":"<ng-template\r\n *ngFor=\"let treeNode of treeList; trackBy: trackByFn\"\r\n [ngTemplateOutlet]=\"treeNodesRef\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: this,\r\n treeNode: treeNode,\r\n treeFactory: treeFactory}\"\r\n>\r\n</ng-template>\r\n","styles":[":host{display:block}"]}]}],"members":{"treeList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"treeNodesRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"treeFactory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"trackByFn":[{"__symbolic":"method"}]}}},"origins":{"TreeModule":"./tree.module","TreeComponent":"./tree.component","OperableTreeComponent":"./operable-tree.component","ICheckboxInput":"./tree.types","ITreeNodeData":"./tree-factory.class","ITreeMap":"./tree-factory.class","ITreeItem":"./tree-factory.class","ITreeInput":"./tree-factory.class","TreeNode":"./tree-factory.class","TreeFactory":"./tree-factory.class","AutofocusDirective":"./auto-focus.directive","TreeNodesComponent":"./tree-nodes.component"},"importAs":"ng-devui/tree"}