ngx-tree-select
Version:
Angular component for select with tree items.
1 lines • 12.7 kB
JSON
{"__symbolic":"module","version":3,"metadata":{"TreeSelectDefaultOptions":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{}},"ɵa":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"TreeSelectComponent"},"multi":true},"TreeSelectComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"tree-select","providers":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"template":"<div tabindex=\"0\" class=\"dropdown open show\" [off-click]=\"clickedOutside\">\n\n <!-- Control display -->\n <div [class.disabled]=\"disabled\">\n <span tabindex=\"-1\" class=\"btn btn-default btn-secondary form-control\" [class.selected-container-text]=\"!multiple\" [class.selected-container-item]=\"multiple\"\n (click)=\"toggle($event)\">\n <span *ngIf=\"selection.length <= 0\" class=\"ui-select-placeholder text-muted\">{{placeholder}}</span>\n <span *ngFor=\"let itm of selection; let idx=index\">\n <span *ngIf=\"moreLoaded || maxVisibleItemCount == 0 || idx<maxVisibleItemCount\" class=\"pull-left\" [class.selected-item-text]=\"!multiple\"\n [class.selected-item-item]=\"multiple\" [class.btn]=\"multiple\" [class.btn-default]=\"multiple\" [class.btn-xs]=\"multiple\">\n {{itm.text}}\n <a *ngIf=\"multiple && !disabled\" class=\"close\" (click)=\"removeItem($event, itm)\">x</a>\n </span>\n </span>\n\n </span>\n\n </div>\n <div class=\"enabled\">\n <span class=\"pull-right more-items-icon\" (click)=\"loadMore($event)\" *ngIf=\"showMoreLink\">(...)</span>\n <i class=\"caret pull-right\" (click)=\"toggle($event)\"></i>\n </div>\n\n <!-- options template -->\n <ul *ngIf=\"!disabled && isOpen && internalItems && internalItems.length > 0\" class=\"dropdown-menu\" role=\"menu\">\n <input name=\"filterText\" *ngIf=\"allowFilter\" type=\"text\" [(ngModel)]=\"filter\" (click)=\"setInputFocus()\" (blur)=\"setInputFocusOut()\"\n class=\"form-control\" placeholder=\"{{filterPlaceholder}}\" [ngModelOptions]=\"{standalone: true}\" autocomplete=\"off\" />\n <li *ngFor=\"let o of internalItems | itemPipe:filter\" role=\"menuitem\">\n <tree-select-item [item]=\"o\" [onTouchedCallBack]=\"onTouchedCallback\"></tree-select-item>\n </li>\n </ul>\n</div>\n","styles":[":host.ng-invalid:not(.ng-pristine) span.form-control,\n:host.ng-invalid:not(.ng-untouched) span.form-control {\n border-color: #a94442; }\n\n.input-group > .dropdown {\n position: static; }\n\n.disabled > span {\n background-color: #eceeef;\n cursor: not-allowed; }\n\n.disabled .btn {\n border-color: #ccc; }\n\n.enabled > span {\n cursor: context-menu; }\n\nul {\n height: auto;\n list-style-type: none;\n margin-top: 0;\n max-height: 200px;\n overflow-x: hidden;\n width: 100%; }\n\n.selected-container-text {\n padding-left: 7px; }\n\n.selected-container-item {\n padding-left: 2px; }\n\n.selected-item-text {\n font-size: 14px;\n margin: 3px; }\n\n.selected-item-item {\n font-size: 14px;\n margin: 2px;\n outline: 0; }\n\n.more-items-icon {\n bottom: 23px;\n height: 10px;\n opacity: .5;\n position: absolute;\n right: 20px;\n z-index: 100; }\n\n.close {\n font-size: 18px;\n line-height: .75;\n margin-left: 5px;\n padding-top: 3px;\n position: absolute;\n z-index: 50; }\n\n.caret {\n height: 10px;\n margin-top: -2px;\n position: absolute;\n right: 10px;\n top: 50%; }\n\n.btn {\n display: table;\n padding-right: 20px; }\n"]}]}],"members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"filterPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allowFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"idField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"textField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allowParentSelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"restructureWhenChildSameName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childrenField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"filterCaseSensitive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"expandMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxVisibleItemCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"TreeSelectDefaultOptions"}]}],"keyUp":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"clickedOutside":[{"__symbolic":"method"}],"onTouched":[{"__symbolic":"method"}],"setInputFocus":[{"__symbolic":"method"}],"setInputFocusOut":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"loadMore":[{"__symbolic":"method"}],"ProcessMatchFilterTreeItem":[{"__symbolic":"method"}]}},"ItemPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe"},"arguments":[{"name":"itemPipe"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"NgxTreeSelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"declarations":[{"__symbolic":"reference","name":"TreeSelectComponent"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ItemPipe"}],"exports":[{"__symbolic":"reference","name":"TreeSelectComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["options"],"value":{"ngModule":{"__symbolic":"reference","name":"NgxTreeSelectModule"},"providers":[{"provide":{"__symbolic":"reference","name":"TreeSelectDefaultOptions"},"useValue":{"__symbolic":"reference","name":"options"}}]}}}},"ExpandMode":{"__symbolic":"class","members":{},"statics":{"None":"None","Selection":"Selection","All":"All"}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"close":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"toggleOpen":[{"__symbolic":"method"}],"setItems":[{"__symbolic":"method"}],"getInternalItems":[{"__symbolic":"method"}],"setSelection":[{"__symbolic":"method"}],"setSelectedItemOrChild":[{"__symbolic":"method"}],"getSelection":[{"__symbolic":"method"}],"getInternalSelection":[{"__symbolic":"method"}],"toggleItemSelection":[{"__symbolic":"method"}],"setAllUnselected":[{"__symbolic":"method"}],"setConfiguration":[{"__symbolic":"method"}],"setExpand":[{"__symbolic":"method"}],"setExpandForList":[{"__symbolic":"method"}],"toSelectableItems":[{"__symbolic":"method"}],"getSelectedItems":[{"__symbolic":"method"}],"reconfigure":[{"__symbolic":"method"}],"checkConfig":[{"__symbolic":"method"}],"getModel":[{"__symbolic":"method"}],"getItemForModel":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"tree-select-item","template":"<div class='item' (click)=\"select($event)\">\n <div class=\"item\" [class.active]=\"item.selected && !needCheckBox\">\n <a href=\"javascript:void(0)\" (click)=\"toggleOpen($event)\">\n <span>\n <i class=\"fa\"\n [class.fa-plus-square-o]=\"haveChildren && !isOpen\"\n [class.fa-minus-square-o]=\"haveChildren && isOpen\"></i>\n </span>\n <i class=\"fa\" *ngIf=\"needCheckBox\" [class.fa-check-square-o]=\"item.checked === true\" [class.fa-square-o]=\"item.checked === false\"\n [class.fa-square]=\"item.checked === null\" (click)=\"select($event)\"></i>\n <span *ngIf=\"allowParentSelection\" (click)=\"select($event)\"> {{item.text}}</span>\n <span *ngIf=\"!allowParentSelection\"> {{item.text}}</span>\n </a>\n </div>\n <ul *ngIf=\"haveChildren && isOpen\" class=\"ui-select-choices\" role=\"menu\">\n <li *ngFor=\"let o of item.children | itemPipe:filter\" role=\"menuitem\">\n <tree-select-item [item]=\"o\" [onTouchedCallBack]=\"onTouchedCallBack\"></tree-select-item>\n </li>\n </ul>\n</div>\n","styles":[".item {\n color: #333; }\n .item ul {\n list-style-type: none; }\n .item > a {\n clear: both;\n color: inherit;\n display: block;\n font-weight: 400;\n line-height: 1.42857143;\n padding: 3px 20px;\n padding-left: 10px;\n text-decoration: none;\n white-space: nowrap; }\n .item > a:hover {\n background-color: #357ebd;\n color: #fff;\n outline: 0;\n text-decoration: none; }\n .item.active {\n background-color: #428bca;\n color: #fff;\n outline: 0;\n text-decoration: none; }\n"]}]}],"members":{"onTouchedCallBack":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵb"}]}],"toggleOpen":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[off-click]"}]}],"members":{"offClickHandler":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["off-click"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID"}]}]],"parameters":[{"__symbolic":"reference","name":"string"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}},"origins":{"TreeSelectDefaultOptions":"./models/tree-select-default-options","ɵa":"./components/tree-select.component","TreeSelectComponent":"./components/tree-select.component","ItemPipe":"./pipes/item.pipe","NgxTreeSelectModule":"./module","ExpandMode":"./models/expand-mode","ɵb":"./services/select.service","ɵc":"./components/tree-select-item.component","ɵd":"./directives/off-click.directive"},"importAs":"ngx-tree-select"}