{"__symbolic":"module","version":4,"metadata":{"TreeviewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":49,"character":1},"arguments":[{"selector":"rs-dropdown-tree","template":"<ng-template #defaultItemTemplate let-item=\"item\" let-onCollapseExpand=\"onCollapseExpand\"\n  let-onCheckedChange=\"onCheckedChange\">\n  <div class=\"form-inline row-item\">\n    <i *ngIf=\"item.children\" (click)=\"onCollapseExpand()\" aria-hidden=\"true\" class=\"fa\"\n      [class.fa-caret-right]=\"item.collapsed\" [class.fa-caret-down]=\"!item.collapsed\"></i>\n    <div class=\"form-check\">\n      <input type=\"checkbox\" class=\"form-check-input\" [(ngModel)]=\"item.checked\" (ngModelChange)=\"onCheckedChange()\"\n        [disabled]=\"item.disabled\" [indeterminate]=\"item.indeterminate\" />\n      <label class=\"form-check-label\" (click)=\"item.checked = !item.checked; onCheckedChange()\">\n        {{item.text}}\n      </label>\n    </div>\n  </div>\n</ng-template>\n<ng-template #defaultHeaderTemplate let-config=\"config\" let-item=\"item\" let-onCollapseExpand=\"onCollapseExpand\"\n  let-onCheckedChange=\"onCheckedChange\" let-onFilterTextChange=\"onFilterTextChange\">\n  <div *ngIf=\"config.hasFilter\" class=\"row row-filter\">\n    <div class=\"col-12\">\n      <input class=\"form-control\" type=\"text\" [placeholder]=\"i18n.getFilterPlaceholder()\" [(ngModel)]=\"filterText\"\n        (ngModelChange)=\"onFilterTextChange($event)\" />\n    </div>\n  </div>\n  <div *ngIf=\"hasFilterItems\">\n    <div *ngIf=\"config.hasAllCheckBox || config.hasCollapseExpand\" class=\"row row-all\">\n      <div class=\"col-12\">\n        <div class=\"form-check form-check-inline\" *ngIf=\"config.hasAllCheckBox\">\n          <input type=\"checkbox\" class=\"form-check-input\" [(ngModel)]=\"item.checked\" (ngModelChange)=\"onCheckedChange()\"\n            [indeterminate]=\"item.indeterminate\" />\n          <label class=\"form-check-label\" (click)=\"item.checked = !item.checked; onCheckedChange()\">\n            {{i18n.getAllCheckboxText()}}\n          </label>\n        </div>\n        <label *ngIf=\"config.hasCollapseExpand\" class=\"form-check-label\" (click)=\"onCollapseExpand()\">\n          <i [title]=\"i18n.getTooltipCollapseExpandText(item.collapsed)\" aria-hidden=\"true\" class=\"fa\"\n            [class.fa-expand]=\"item.collapsed\" [class.fa-compress]=\"!item.collapsed\" [style.marginLeft]=\"'-10px'\"></i>\n        </label>\n      </div>\n    </div>\n    <div *ngIf=\"config.hasDivider\" class=\"dropdown-divider\"></div>\n  </div>\n</ng-template>\n<div class=\"treeview-header\">\n  <ng-template [ngTemplateOutlet]=\"headerTemplate || defaultHeaderTemplate\"\n    [ngTemplateOutletContext]=\"headerTemplateContext\">\n  </ng-template>\n</div>\n<div [ngSwitch]=\"hasFilterItems\">\n  <div *ngSwitchCase=\"true\" class=\"treeview-container\" [style.max-height.px]=\"maxHeight\">\n    <rs-dropdown-tree-item *ngFor=\"let item of filterItems\" [config]=\"config\" [item]=\"item\"\n      [template]=\"itemTemplate || defaultItemTemplate\" (checkedChange)=\"onItemCheckedChange(item, $event)\">\n    </rs-dropdown-tree-item>\n  </div>\n  <div *ngSwitchCase=\"false\" class=\"treeview-text\">\n    {{i18n.getFilterNoItemsFoundText()}}\n  </div>\n</div>","styles":[":host::deep .treeview-header .row-filter{margin-bottom:.5rem}:host::deep .treeview-header .row-all .fa{cursor:pointer}:host::deep .treeview-container .row-item{margin-bottom:.3rem;flex-wrap:nowrap}:host::deep .treeview-container .row-item .fa{width:.8rem;cursor:pointer;margin-right:.3rem}.treeview-container{overflow-y:auto;padding-right:.3rem}.treeview-text{padding:.3rem 0;white-space:nowrap}.form-check-label{position:absolute;top:-30px;right:26px;cursor:pointer}"]}]}],"members":{"headerTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":5}}]}],"itemTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":5}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":5}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5}}]}],"selectedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":59,"character":5}}]}],"filterChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":60,"character":5}}]}],"treeviewItemComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":63,"character":5},"arguments":[{"__symbolic":"reference","name":"ɵa"},{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"TreeviewConfig"},{"__symbolic":"reference","name":"ɵd"}]}],"ngOnChanges":[{"__symbolic":"method"}],"onAllCollapseExpand":[{"__symbolic":"method"}],"onFilterTextChange":[{"__symbolic":"method"}],"onAllCheckedChange":[{"__symbolic":"method"}],"onItemCheckedChange":[{"__symbolic":"method"}],"deselectCheckedFromOther":[{"__symbolic":"method"}],"raiseSelectedChange":[{"__symbolic":"method"}],"createHeaderTemplateContext":[{"__symbolic":"method"}],"generateSelection":[{"__symbolic":"method"}],"updateFilterItems":[{"__symbolic":"method"}],"filterItem":[{"__symbolic":"method"}],"updateCheckedOfAll":[{"__symbolic":"method"}],"updateCollapsedOfAll":[{"__symbolic":"method"}]}},"RSTreeviewModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":14,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":16,"character":8},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":17,"character":8}],"declarations":[{"__symbolic":"reference","name":"TreeviewComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵj"}],"exports":[{"__symbolic":"reference","name":"TreeviewComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵj"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"RSTreeviewModule"},"providers":[{"__symbolic":"reference","name":"TreeviewConfig"},{"provide":{"__symbolic":"reference","name":"ɵb"},"useClass":{"__symbolic":"reference","name":"ɵc"}},{"provide":{"__symbolic":"reference","name":"ɵd"},"useClass":{"__symbolic":"reference","name":"ɵe"}}]}}}},"TreeviewSelection":{"__symbolic":"interface"},"TreeItem":{"__symbolic":"interface"},"TreeviewItem":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"},null]}],"setCheckedRecursive":[{"__symbolic":"method"}],"setCollapsedRecursive":[{"__symbolic":"method"}],"getSelection":[{"__symbolic":"method"}],"correctChecked":[{"__symbolic":"method"}],"getCorrectChecked":[{"__symbolic":"method"}]}},"TreeviewConfig":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1}}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"rs-dropdown-tree-item","template":"<div *ngIf=\"item\" class=\"treeview-item\">\n    <ng-template [ngTemplateOutlet]=\"template\"\n        [ngTemplateOutletContext]=\"{item: item, onCollapseExpand: onCollapseExpand, onCheckedChange: onCheckedChange, onLabelClick: onLabelClick}\">\n    </ng-template>\n    <div *ngIf=\"!item.collapsed\">\n        <rs-dropdown-tree-item [config]=\"config\" *ngFor=\"let child of item.children\" [item]=\"child\"\n            [template]=\"template\" (checkedChange)=\"onChildCheckedChange(child, $event)\">\n        </rs-dropdown-tree-item>\n    </div>\n</div>","styles":[":host{display:block}:host .treeview-item{white-space:nowrap}:host .treeview-item .treeview-item{margin-left:2rem}"]}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":5}}]}],"template":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":5}}]}],"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":5}}]}],"checkedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":15,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TreeviewConfig"}]}],"triggerItemChange":[{"__symbolic":"method"}],"onLabelClick":[{"__symbolic":"method"}],"onChildCheckedChange":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1}}],"members":{"getText":[{"__symbolic":"method"}],"getAllCheckboxText":[{"__symbolic":"method"}],"getFilterPlaceholder":[{"__symbolic":"method"}],"getFilterNoItemsFoundText":[{"__symbolic":"method"}],"getTooltipCollapseExpandText":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ɵb"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":12,"character":1}}],"members":{"getText":[{"__symbolic":"method"}],"getAllCheckboxText":[{"__symbolic":"method"}],"getFilterPlaceholder":[{"__symbolic":"method"}],"getFilterNoItemsFoundText":[{"__symbolic":"method"}],"getTooltipCollapseExpandText":[{"__symbolic":"method"}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":5,"character":1}}],"members":{"getSelectedChange":[{"__symbolic":"method"}]}},"ɵe":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ɵd"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":10,"character":1}}],"members":{"getSelectedChange":[{"__symbolic":"method"}]}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":4,"character":1},"arguments":[{"name":"rsTreeview"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":3,"character":1},"arguments":[{"selector":"[rsDropdown]","exportAs":"rsDropdown"}]}],"members":{"internalOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":5},"arguments":["open"]}]}],"openChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":11,"character":5}}]}],"isOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":13,"character":5},"arguments":["class.show"]}]}],"onKeyupEsc":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":17,"character":5},"arguments":["keyup.esc"]}]}],"onDocumentClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":22,"character":5},"arguments":["document:click",["$event"]]}]}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"isEventFromToggle":[{"__symbolic":"method"}]}},"ɵh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":3,"character":1},"arguments":[{"selector":"[rsDropdownMenu]"}]}],"members":{"dropdownMenu":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":7,"character":5},"arguments":["class.dropdown-menu"]}]}],"isOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":8,"character":5},"arguments":["class.show"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵg"}]}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":3,"character":1},"arguments":[{"selector":"[rsDropdownToggle]"}]}],"members":{"classes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":7,"character":5},"arguments":["class.dropdown-toggle"]}]}],"hasPopup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":8,"character":5},"arguments":["attr.aria-haspopup"]}]}],"expanded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":9,"character":5},"arguments":["attr.aria-expanded"]}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":10,"character":5},"arguments":["click"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":16,"character":20}]}]}},"ɵj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"rs-dropdown-treeview","template":"<div class=\"dropdown\" rsDropdown>\n  <!-- <button class=\"btn\" [ngClass]=\"buttonClass\" type=\"button\" role=\"button\" rsDropdownToggle>\n    {{getText()}}\n  </button> -->\n  <button class=\"btn\" [ngClass]=\"buttonClass\" type=\"button\" role=\"button\" rsDropdownToggle>\n    <span *ngIf=\"getSelection()?.length <= 0\">-- Select --</span>\n\n    <span *ngFor=\"let itm of getSelection() | slice:0:5; let idx=index\">\n      <span class=\"btn btn-default btn-xs pull-left border sel-item\">\n        {{itm.text}}\n        <a class=\"close pull-right\" (click)=\"removeItem($event, itm)\">&times;</a>\n      </span>\n    </span>\n\n    <span *ngIf=\"getSelection()?.length > 5\" class=\"pull-right\">{{getSelection().length - 5}} more...</span>\n  </button>\n  <div rsDropdownMenu aria-labelledby=\"dropdownMenu\" (click)=\"$event.stopPropagation()\">\n    <div class=\"dropdown-container\">\n      <rs-dropdown-tree [config]=\"config\" [headerTemplate]=\"headerTemplate\" [items]=\"items\"\n        [itemTemplate]=\"itemTemplate\" (selectedChange)=\"onSelectedChange($event)\"\n        (filterChange)=\"onFilterChange($event)\">\n      </rs-dropdown-tree>\n    </div>\n  </div>\n</div>","styles":[".dropdown{width:100%;display:inline-block}.dropdown button{width:100%;margin-right:.9rem;text-align:left;overflow:hidden;text-overflow:ellipsis;padding:3px}.dropdown button::after{position:absolute;right:.6rem;margin-top:.6rem}.dropdown button .btn.btn-default:hover{color:inherit!important;background:inherit!important;border-color:inherit!important}.dropdown .sel-item{width:-webkit-max-content;width:-moz-max-content;width:max-content;height:25px;font-size:12px;line-height:1;margin:3px;padding:4px 6px}.dropdown .sel-item .close{margin-left:6px;padding-top:2px;float:right;font-size:.8rem;line-height:1;border-radius:100%;color:#fff;background-color:#000;width:16px;height:16px}.dropdown .dropdown-menu{width:100%;z-index:9}.dropdown .dropdown-menu .dropdown-container{padding:0 .6rem}"]}]}],"members":{"buttonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":5}}]}],"headerTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":5}}]}],"itemTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":5}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"selectedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":5}}]}],"filterChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":5}}]}],"treeviewComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":23,"character":5},"arguments":[{"__symbolic":"reference","name":"TreeviewComponent"},{"static":true}]}]}],"dropdownDirective":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":24,"character":5},"arguments":[{"__symbolic":"reference","name":"ɵg"},{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"TreeviewConfig"}]}],"getText":[{"__symbolic":"method"}],"getSelection":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"onSelectedChange":[{"__symbolic":"method"}],"onFilterChange":[{"__symbolic":"method"}]}}},"origins":{"TreeviewComponent":"./lib/treeview.component","RSTreeviewModule":"./lib/treeview.module","TreeviewSelection":"./lib/treeview-item","TreeItem":"./lib/treeview-item","TreeviewItem":"./lib/treeview-item","TreeviewConfig":"./lib/treeview-config","ɵa":"./lib/treeview-item.component","ɵb":"./lib/treeview-i18n","ɵc":"./lib/treeview-i18n","ɵd":"./lib/treeview-event-parser","ɵe":"./lib/treeview-event-parser","ɵf":"./lib/treeview.pipe","ɵg":"./lib/dropdown.directive","ɵh":"./lib/dropdown-menu.directive","ɵi":"./lib/dropdown-toggle.directive","ɵj":"./lib/dropdown-treeview.component"},"importAs":"rs-dropdown-tree"}