ng2-dropdown-treeview-multilevel-fork/src/dropdown-treeview.component.metadata.json

An Angular2 clickable dropdown accordian/treeview component with multiple selection

[{"__symbolic":"module","version":3,"metadata":{"DefaultConfig":{"isShowAllCheckBox":true,"isShowFilter":false,"isShowCollapseExpand":false,"headerText":"All","allText":"All","noSelectText":"Select options","moreSelectText":" selected"},"DropdownTreeviewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"leo-dropdown-treeview","template":"\n<div class=\"dropdown\" [class.open]=\"isOpen\">\n    <button class=\"btn btn-secondary dropdown-toggle\" #dropdownButton type=\"button\" (click)=\"toggleOpen()\"\n    aria-haspopup=\"true\" aria-expanded=\"false\">\n        {{text}}\n    </button>\n    <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuButton\" (click)=\"$event.stopPropagation()\" [ngSwitch]=\"hasItems\">\n        <div *ngSwitchCase=\"true\">\n            <div *ngIf=\"config.isShowFilter\" class=\"row\">\n                <div class=\"col-xs-12\">\n                    <input class=\"form-control\" type=\"text\" placeholder=\"Filter\"\n                    [ngModel]=\"filterText\" (ngModelChange)=\"onFilterTextChange($event)\" />\n                </div>\n            </div>\n            <div *ngIf=\"hasFilterItems\">\n                <div *ngIf=\"config.isShowAllCheckBox || config.isShowCollapseExpand\" class=\"row\">\n                    <div class=\"col-xs-12\">\n                        <label *ngIf=\"config.isShowAllCheckBox\" class=\"form-check-label dropdown-item-all\">\n                            <input type=\"checkbox\" class=\"form-check-input\"\n                            [(ngModel)]=\"allItem.checked\" (ngModelChange)=\"onAllCheckedChange($event)\" />\n                            {{allItem.text}}\n                        </label>\n                        <label *ngIf=\"config.isShowCollapseExpand\" class=\"form-check-label pull-right dropdown-item-collapse-expand\">\n                            <i (click)=\"toggleCollapseExpand()\" [title]=\"allItem.collapsed ? 'Expand' : 'Collapse'\" aria-hidden=\"true\"\n                                class=\"fa\" [class.fa-expand]=\"allItem.collapsed\" [class.fa-compress]=\"!allItem.collapsed\"></i>\n                        </label>\n                    </div>\n                </div>\n                <div *ngIf=\"config.isShowFilter || config.isShowAllCheckBox || config.isShowCollapseExpand\" class=\"dropdown-divider\"></div>\n                <div class=\"treeview-container\">\n                    <div *ngFor=\"let item of filterItems\">\n                        <leo-treeview [item]=\"item\" (checkedChange)=\"onItemCheckedChange(item, $event)\"></leo-treeview>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"!hasFilterItems\" class=\"dropdown-item\">\n                No items found\n            </div>\n        </div>\n        <div *ngSwitchCase=\"false\" class=\"dropdown-item\">\n            No items\n        </div>\n    </div>\n</div>\n    ","styles":["\n.dropdown {\n    width: 100%;\n    display: inline-block;\n}\n\n.dropdown button {\n    width: 100%;\n    text-align: left;\n}\n\n.dropdown button::after {\n    position: absolute;\n    right: 0.6rem;\n    margin-top: 0.6rem;\n}\n\n.dropdown .dropdown-menu .row {\n    padding: 2px 10px;\n}\n\n.dropdown .dropdown-menu .dropdown-item-collapse-expand {\n    padding: 0;\n}\n\n.dropdown .dropdown-menu .treeview-container {\n    padding-left: 5px;\n    padding-right: 5px;\n    max-height: 500px;\n    overflow-y: auto;\n}\n    "]}]}],"members":{"dropdownButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dropdownButton"]}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selectedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"keyupEsc":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keyup.esc"]}]}],"onDocumentClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click",["$event"]]}]}],"ngOnChanges":[{"__symbolic":"method"}],"toggleOpen":[{"__symbolic":"method"}],"documentClick":[{"__symbolic":"method"}],"toggleCollapseExpand":[{"__symbolic":"method"}],"onFilterTextChange":[{"__symbolic":"method"}],"onAllCheckedChange":[{"__symbolic":"method"}],"onItemCheckedChange":[{"__symbolic":"method"}],"getCheckedItems":[{"__symbolic":"method"}],"onAfterSelectedChange":[{"__symbolic":"method"}],"updateFilterItems":[{"__symbolic":"method"}],"filterItem":[{"__symbolic":"method"}],"updateCheckBoxAll":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DefaultConfig":{"isShowAllCheckBox":true,"isShowFilter":false,"isShowCollapseExpand":false,"headerText":"All","allText":"All","noSelectText":"Select options","moreSelectText":" selected"},"DropdownTreeviewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"leo-dropdown-treeview","template":"\n<div class=\"dropdown\" [class.open]=\"isOpen\">\n    <button class=\"btn btn-secondary dropdown-toggle\" #dropdownButton type=\"button\" (click)=\"toggleOpen()\"\n    aria-haspopup=\"true\" aria-expanded=\"false\">\n        {{text}}\n    </button>\n    <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuButton\" (click)=\"$event.stopPropagation()\" [ngSwitch]=\"hasItems\">\n        <div *ngSwitchCase=\"true\">\n            <div *ngIf=\"config.isShowFilter\" class=\"row\">\n                <div class=\"col-xs-12\">\n                    <input class=\"form-control\" type=\"text\" placeholder=\"Filter\"\n                    [ngModel]=\"filterText\" (ngModelChange)=\"onFilterTextChange($event)\" />\n                </div>\n            </div>\n            <div *ngIf=\"hasFilterItems\">\n                <div *ngIf=\"config.isShowAllCheckBox || config.isShowCollapseExpand\" class=\"row\">\n                    <div class=\"col-xs-12\">\n                        <label *ngIf=\"config.isShowAllCheckBox\" class=\"form-check-label dropdown-item-all\">\n                            <input type=\"checkbox\" class=\"form-check-input\"\n                            [(ngModel)]=\"allItem.checked\" (ngModelChange)=\"onAllCheckedChange($event)\" />\n                            {{allItem.text}}\n                        </label>\n                        <label *ngIf=\"config.isShowCollapseExpand\" class=\"form-check-label pull-right dropdown-item-collapse-expand\">\n                            <i (click)=\"toggleCollapseExpand()\" [title]=\"allItem.collapsed ? 'Expand' : 'Collapse'\" aria-hidden=\"true\"\n                                class=\"fa\" [class.fa-expand]=\"allItem.collapsed\" [class.fa-compress]=\"!allItem.collapsed\"></i>\n                        </label>\n                    </div>\n                </div>\n                <div *ngIf=\"config.isShowFilter || config.isShowAllCheckBox || config.isShowCollapseExpand\" class=\"dropdown-divider\"></div>\n                <div class=\"treeview-container\">\n                    <div *ngFor=\"let item of filterItems\">\n                        <leo-treeview [item]=\"item\" (checkedChange)=\"onItemCheckedChange(item, $event)\"></leo-treeview>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"!hasFilterItems\" class=\"dropdown-item\">\n                No items found\n            </div>\n        </div>\n        <div *ngSwitchCase=\"false\" class=\"dropdown-item\">\n            No items\n        </div>\n    </div>\n</div>\n    ","styles":["\n.dropdown {\n    width: 100%;\n    display: inline-block;\n}\n\n.dropdown button {\n    width: 100%;\n    text-align: left;\n}\n\n.dropdown button::after {\n    position: absolute;\n    right: 0.6rem;\n    margin-top: 0.6rem;\n}\n\n.dropdown .dropdown-menu .row {\n    padding: 2px 10px;\n}\n\n.dropdown .dropdown-menu .dropdown-item-collapse-expand {\n    padding: 0;\n}\n\n.dropdown .dropdown-menu .treeview-container {\n    padding-left: 5px;\n    padding-right: 5px;\n    max-height: 500px;\n    overflow-y: auto;\n}\n    "]}]}],"members":{"dropdownButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dropdownButton"]}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selectedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"keyupEsc":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keyup.esc"]}]}],"onDocumentClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click",["$event"]]}]}],"ngOnChanges":[{"__symbolic":"method"}],"toggleOpen":[{"__symbolic":"method"}],"documentClick":[{"__symbolic":"method"}],"toggleCollapseExpand":[{"__symbolic":"method"}],"onFilterTextChange":[{"__symbolic":"method"}],"onAllCheckedChange":[{"__symbolic":"method"}],"onItemCheckedChange":[{"__symbolic":"method"}],"getCheckedItems":[{"__symbolic":"method"}],"onAfterSelectedChange":[{"__symbolic":"method"}],"updateFilterItems":[{"__symbolic":"method"}],"filterItem":[{"__symbolic":"method"}],"updateCheckBoxAll":[{"__symbolic":"method"}]}}}}]