@duoduo-oba/ng-devui/tree-select/ng-devui-tree-select.metadata.json

DevUI components based on Angular

{"__symbolic":"module","version":4,"metadata":{"TreeSelectComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":25,"character":1},"arguments":[{"selector":"d-tree-select","exportAs":"select","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":32,"character":15},"useExisting":{"__symbolic":"reference","name":"TreeSelectComponent"},"multi":true}],"template":"<div class=\"devui-tree-select\">\r\n  <popper-component [(open)]=\"isOpen\" [fluidPopper]=\"!width\" (openChange)=\"responsePopperChange($event)\" [appendTo]=\"appendTo\" #popper>\r\n    <input\r\n      #selectHost\r\n      class=\"devui-select-input devui-input devui-form-control devui-tree-select-input\"\r\n      (click)=\"toggle()\"\r\n      [placeholder]=\"placeholder\"\r\n      autocomplete=\"off\"\r\n      [disabled]=\"disabled\"\r\n      readonly\r\n      popper-activator\r\n    />\r\n    <div popper-prepend class=\"devui-tree-select devui-search-container\" *ngIf=\"searchable\">\r\n      <input class=\"devui-input\" [(ngModel)]=\"searchString\" #searchInputModel=\"ngModel\" #searchInput />\r\n    </div>\r\n    <div class=\"devui-tree-select devui-options-container\" #optionsContainer popper-container [ngStyle]=\"{ width: width }\">\r\n      <d-operable-tree\r\n        #tree\r\n        [style.display]=\"treeData && treeData.length > 0 && !noRecord ? 'block' : 'none'\"\r\n        [tree]=\"treeData\"\r\n        [treeNodeIdKey]=\"treeNodeIdKey\"\r\n        [treeNodeChildrenKey]=\"treeNodeChildrenKey\"\r\n        [checkboxDisabledKey]=\"disabledKey\"\r\n        [checkboxInput]=\"checkboxInput\"\r\n        [checkable]=\"multiple\"\r\n        [canActivateNode]=\"!multiple\"\r\n        [canActivateParentNode]=\"!leafOnly\"\r\n        (nodeChecked)=\"onOperableNodeChecked($event)\"\r\n        (nodeSelected)=\"onOperableNodeSelected($event)\"\r\n        (nodeToggled)=\"onNodeToggled()\"\r\n        [iconParentOpen]=\"iconParentOpen\"\r\n        [iconParentClose]=\"iconParentClose\"\r\n        [iconLeaf]=\"iconLeaf\"\r\n        [treeNodeTitleKey]=\"treeNodeTitleKey\"\r\n        [iconTemplatePosition]=\"iconTemplatePosition\"\r\n        class=\"devui-tree\"\r\n      >\r\n        <ng-template *ngIf=\"iconTemplateInput || iconTemplatePassThrough\" #iconTemplate let-node=\"node\">\r\n          <ng-template [ngTemplateOutlet]=\"iconTemplateInput || iconTemplatePassThrough\" [ngTemplateOutletContext]=\"{ node: node }\">\r\n          </ng-template>\r\n        </ng-template>\r\n      </d-operable-tree>\r\n      <div *ngIf=\"!treeData || treeData.length <= 0\" class=\"devui-no-data-tip\">\r\n        {{ i18nCommonText?.noData }}\r\n      </div>\r\n      <div *ngIf=\"noRecord\" class=\"devui-no-data-tip\">\r\n        {{ i18nCommonText?.noRecordsFound }}\r\n      </div>\r\n    </div>\r\n  </popper-component>\r\n  <div\r\n    [ngClass]=\"{ disabled: disabled, clear: allowClear }\"\r\n    (click)=\"$event.stopPropagation(); $event.preventDefault(); clearValue()\"\r\n  ></div>\r\n  <span class=\"devui-select-chevron-icon\" [class.open]=\"isOpen\" [ngClass]=\"{ disabled: disabled, clear: allowClear }\">\r\n    <svg width=\"14px\" height=\"14px\" viewBox=\"0 0 16 16\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <g id=\"chevron_down\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n        <polygon id=\"chevron_down\" points=\"4.5 5 8 8.76923077 11.5 5 13 6.61538462 8 12 3 6.61538462\"></polygon>\r\n      </g>\r\n    </svg>\r\n  </span>\r\n</div>\r\n","styles":[".devui-tree-select{position:relative;width:100%}.devui-tree-select input.devui-select-input{cursor:pointer;display:inline-block;width:100%;color:#252b3a;text-overflow:ellipsis}.devui-tree-select input.devui-select-input.devui-tree-select-input{padding:5px 2em 5px 10px}.devui-tree-select:hover .clear{position:absolute;height:14px;width:14px;right:12px;top:calc((100% - 14px)/ 2);cursor:pointer}.devui-tree-select:hover .clear::after,.devui-tree-select:hover .clear::before{position:absolute;content:'';height:14px;width:1px;background-color:#252b3a;left:50%}.devui-tree-select:hover .clear::before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.devui-tree-select:hover .clear::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.devui-tree-select:hover .clear:hover::after,.devui-tree-select:hover .clear:hover::before{background-color:#252b3a}.devui-tree-select .devui-select-chevron-icon{right:12px;top:calc((100% - 14px)/ 2);position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.devui-tree-select .devui-select-chevron-icon svg{-webkit-transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.devui-tree-select .devui-select-chevron-icon.open svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.devui-tree-select .devui-select-chevron-icon.clear{opacity:0}.devui-tree-select .devui-select-chevron-icon.disabled{opacity:.3}.devui-tree-select .devui-select-chevron-icon ::ng-deep g{fill:#252b3a}.devui-tree-select:not(:hover) .devui-select-chevron-icon:not(.disabled){opacity:1;-webkit-transition:opacity .1s linear;transition:opacity .1s linear}.devui-tree-select.devui-options-container{width:100%;color:#252b3a;padding:5px 0}.devui-tree-select.devui-options-container .devui-tree ::ng-deep .devui-tree-node.devui-operable-tree-node .devui-tree-node__content{margin-left:10px}.devui-tree-select.devui-options-container .devui-tree ::ng-deep .devui-tree-node.devui-operable-tree-node .active{background-color:transparent}.devui-tree-select.devui-options-container .devui-tree ::ng-deep .devui-tree-node.devui-operable-tree-node.selected{position:relative;-webkit-width:-webkit-fit-content;-moz-width:-moz-fit-content;width:fit-content;min-width:calc(100% - 1.2em)}.devui-tree-select.devui-options-container .devui-tree ::ng-deep .devui-tree-node.devui-operable-tree-node.selected::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#f2f5fc;z-index:-1}.devui-tree-select.devui-options-container .devui-no-data-tip{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:not-allowed;padding:5px 12px;opacity:.3}.devui-tree-select.devui-search-container{padding:5px}:host{display:inline-block;width:100%}"]}]}],"members":{"allowClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"treeData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":69,"character":24},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":70,"character":33},{"__symbolic":"reference","module":"ng-devui/i18n","name":"I18nService","line":71,"character":18}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":3}}]}],"expandTree":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":3}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":3}}]}],"treeNodeIdKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":3}}]}],"treeNodeChildrenKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":3}}]}],"disabledKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":3}}]}],"leafOnly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":3}}]}],"delimiter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":3}}]}],"iconParentOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3}}]}],"iconParentClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":3}}]}],"iconLeaf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":3}}]}],"closeOnNodeSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":3}}]}],"searchable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":3}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":3}}]}],"treeNodeTitleKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":3}}]}],"allowUnselect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":3}}]}],"iconTemplatePosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":3}}]}],"iconTemplateInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":94,"character":3}}]}],"selectHost":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":95,"character":3},"arguments":["selectHost",{"static":true}]}]}],"optionsContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":96,"character":3},"arguments":["optionsContainer",{"static":true}]}]}],"tree":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":97,"character":3},"arguments":["tree",{"static":true}]}]}],"searchInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":98,"character":3},"arguments":["searchInput",{"static":false}]}]}],"searchInputModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":99,"character":3},"arguments":["searchInputModel",{"static":false}]}]}],"popper":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":100,"character":3},"arguments":["popper",{"static":true}]}]}],"iconTemplatePassThrough":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":101,"character":3},"arguments":["iconTemplate",{"static":false}]}]}],"valueChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":103,"character":3}}]}],"readyEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":117,"character":3}}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"setI18nText":[{"__symbolic":"method"}],"expandAllNodes":[{"__symbolic":"method"}],"prepareTree":[{"__symbolic":"method"}],"nodeSelected":[{"__symbolic":"method"}],"resolveParentNode":[{"__symbolic":"method"}],"refreshTree":[{"__symbolic":"method"}],"onOperableNodeChecked":[{"__symbolic":"method"}],"onOperableNodeSelected":[{"__symbolic":"method"}],"emitEvents":[{"__symbolic":"method"}],"visualizeSelectedItems":[{"__symbolic":"method"}],"visualizeMultipleValue":[{"__symbolic":"method"}],"visualizeSingleValue":[{"__symbolic":"method"}],"emptyInput":[{"__symbolic":"method"}],"selectedValue":[{"__symbolic":"method"}],"responsePopperChange":[{"__symbolic":"method"}],"focusSearchInput":[{"__symbolic":"method"}],"search":[{"__symbolic":"method"}],"registerSearchListener":[{"__symbolic":"method"}],"scrollToSelected":[{"__symbolic":"method"}],"clearValue":[{"__symbolic":"method"}],"onNodeToggled":[{"__symbolic":"method"}]}},"TreeSelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":12,"character":4},{"__symbolic":"reference","module":"ng-devui/checkbox","name":"CheckBoxModule","line":13,"character":4},{"__symbolic":"reference","module":"ng-devui/loading","name":"LoadingModule","line":14,"character":4},{"__symbolic":"reference","module":"ng-devui/tree","name":"TreeModule","line":15,"character":4},{"__symbolic":"reference","module":"ng-devui/utils","name":"PopperModule","line":16,"character":4}],"exports":[{"__symbolic":"reference","name":"TreeSelectComponent"}],"declarations":[{"__symbolic":"reference","name":"TreeSelectComponent"}],"providers":[]}]}],"members":{}},"DefaultIcons":{"iconParentClose":"\n    <span style=\"width: 14px; display: inline-block; content: '';\">\n      <svg\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <path\n            d=\"M3,2 L13,2 C13.5522847,2 14,2.44771525 14,3 L14,13 C14,13.5522847 13.5522847,14 13,14 L3,14 C2.44771525,14 2,13.5522847 2,\n            13 L2,3 C2,2.44771525 2.44771525,2 3,2 Z M7,7 L4,7 L4,9 L7,9 L7,12 L9,12 L9,9 L12,9 L12,7 L9,7 L9,4 L7,4 L7,7 Z\"\n            fill=\"#5E6678\"\n            fill-rule=\"nonzero\"\n          ></path>\n        </g>\n      </svg>\n    </span>\n  ","iconParentOpen":"\n    <span style=\"width: 14px; display: inline-block; content: '';\">\n      <svg\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <path\n            d=\"M3,2 L13,2 C13.5522847,2 14,2.44771525 14,3 L14,13 C14,13.5522847 13.5522847,14 13,14 L3,14 C2.44771525,14 2,13.5522847 2,\n            13 L2,3 C2,2.44771525 2.44771525,2 3,2 Z M12,7 L4,7 L4,9 L12,9 L12,7 Z\"\n            fill=\"#5E6678\"\n            fill-rule=\"nonzero\"\n          ></path>\n        </g>\n      </svg>\n    </span>\n  ","iconLeaf":"\n    <span style=\"width: 14px; display: inline-block; content: '';\"></span>\n  "}},"origins":{"TreeSelectComponent":"./tree-select.component","TreeSelectModule":"./tree-select.module","DefaultIcons":"./tree-default-icons"},"importAs":"ng-devui/tree-select"}