angular2-virtual-select
Version:
A native angular 2 select and multi select component with virtual scrolling to allow thousands of options in one select component
1 lines • 12.7 kB
JSON
[{"__symbolic":"module","version":3,"metadata":{"ShSelectComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sh-select","template":"<div class=\"header\" [class.sh-select-disabled]=\"disabled\" [class.inline]=\"mode==='inline'\"\n (click)=\"show()\" [class.open]=\"isOpen\">\n <input type=\"text\"\n #inputFilter\n [hidden]=\"!isOpen\"\n (click)=\"show()\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"filter\"\n (ngModelChange)=\"updateFilter($event)\">\n <div (click)=\"show(); $event.stopPropagation()\"\n\n *ngIf=\"!isOpen\">\n {{selectedValues?.length ?\n (isMultiselect ?\n selectedValues?.length + ' Selected'\n : (selectedValues[0].name || selectedValues))\n : placeholder}}\n </div>\n <i class=\"close icon clear\"\n *ngIf=\"showClear && selectedValues.length > 0\"\n (click)=\"clear(); $event.stopPropagation()\"></i>\n</div>\n<sh-select-menu [isOpen]=\"isOpen\"\n [rows]=\"rows\"\n [selectedValues]=\"selectedValues\"\n (noToggleClick)=\"toggleSelected($event)\"></sh-select-menu>","styles":[":host{\n display: block;\n position: relative;\n width: 100%;\n padding: 0;\n margin: 0;\n font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;\n font-style: normal;\n font-weight: 300;\n font-size: 1.0rem;\n line-height: 2rem;\n letter-spacing: 0.01rem;\n color: #212121;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n}\n\n.header{\n width: 100%;\n margin: 0 !important;\n padding: 2px 30px 2px 10px;\n box-sizing: border-box;\n background-color: white;\n font-size: 1.0em;\n border-radius: 2px;\n border: 1px solid rgba(34,36,38,.15);\n vertical-align: middle;\n cursor: pointer;\n}\n\n.header.inline{\n background-color: transparent;\n width: max-content;\n border: none;\n}\n\n.header.open{\n border-radius: 2px 2px 0 0;\n box-shadow: 0 2px 3px 0 rgba(34,36,38,.15);\n border-bottom: none;\n}\n\ndiv{\n display: block;\n}\n\ninput[type=\"text\"]{\n border: none !important;\n vertical-align: middle !important;\n width: 100%;\n margin: 0 !important;\n padding: 0px !important;\n box-sizing: border-box;\n background-color: white;\n font-size: 1.0rem !important;\n line-height: 2rem !important;\n letter-spacing: 0.01rem !important;\n font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;\n font-style: normal !important;\n font-weight: 300 !important;\n -webkit-font-smoothing: antialiased !important;\n -moz-osx-font-smoothing: grayscale !important;;\n text-rendering: optimizeLegibility !important;;\n}\n\ninput[type=\"text\"] { outline: none; }\n\n\n[hidden]{\n display: none;\n}\n\ni.close.icon.clear::after { \n content: \"✕\";\n padding-right: 8px;\n font-weight: 800;\n color: gray; \n}\n\ni.close.icon.clear:hover::after {\n color: red; \n}\n\n.clear{\n position: absolute;\n right: 2px;\n padding-left: 2px;\n padding-right: 2px;\n top:3px;\n cursor: pointer;\n}\n.sh-select-disabled{\n background-color: #e3e3e3;\n color: darkgray;\n cursor: not-allowed;\n}\n\n"],"host":{"(window:mouseup)":"onDocumentClick($event)","$quoted$":["(window:mouseup)"]},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"ShSelectProvider"}},"multi":true}]}]}],"members":{"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isMultiselect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"mode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"inputFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["inputFilter"]}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onHide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onShow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"onDocumentClick":[{"__symbolic":"method"}],"updateRows":[{"__symbolic":"method"}],"updateFilter":[{"__symbolic":"method"}],"clearFilter":[{"__symbolic":"method"}],"toggleSelected":[{"__symbolic":"method"}],"selectSingle":[{"__symbolic":"method"}],"selectMultiple":[{"__symbolic":"method"}],"focusFilter":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}]}},"ShSelectProvider":{"__symbolic":"function","parameters":[],"value":{"__symbolic":"reference","name":"ShSelectComponent"}}}},{"__symbolic":"module","version":1,"metadata":{"ShSelectComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sh-select","template":"<div class=\"header\" [class.sh-select-disabled]=\"disabled\" [class.inline]=\"mode==='inline'\"\n (click)=\"show()\" [class.open]=\"isOpen\">\n <input type=\"text\"\n #inputFilter\n [hidden]=\"!isOpen\"\n (click)=\"show()\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"filter\"\n (ngModelChange)=\"updateFilter($event)\">\n <div (click)=\"show(); $event.stopPropagation()\"\n\n *ngIf=\"!isOpen\">\n {{selectedValues?.length ?\n (isMultiselect ?\n selectedValues?.length + ' Selected'\n : (selectedValues[0].name || selectedValues))\n : placeholder}}\n </div>\n <i class=\"close icon clear\"\n *ngIf=\"showClear && selectedValues.length > 0\"\n (click)=\"clear(); $event.stopPropagation()\"></i>\n</div>\n<sh-select-menu [isOpen]=\"isOpen\"\n [rows]=\"rows\"\n [selectedValues]=\"selectedValues\"\n (noToggleClick)=\"toggleSelected($event)\"></sh-select-menu>","styles":[":host{\n display: block;\n position: relative;\n width: 100%;\n padding: 0;\n margin: 0;\n font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;\n font-style: normal;\n font-weight: 300;\n font-size: 1.0rem;\n line-height: 2rem;\n letter-spacing: 0.01rem;\n color: #212121;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n}\n\n.header{\n width: 100%;\n margin: 0 !important;\n padding: 2px 30px 2px 10px;\n box-sizing: border-box;\n background-color: white;\n font-size: 1.0em;\n border-radius: 2px;\n border: 1px solid rgba(34,36,38,.15);\n vertical-align: middle;\n cursor: pointer;\n}\n\n.header.inline{\n background-color: transparent;\n width: max-content;\n border: none;\n}\n\n.header.open{\n border-radius: 2px 2px 0 0;\n box-shadow: 0 2px 3px 0 rgba(34,36,38,.15);\n border-bottom: none;\n}\n\ndiv{\n display: block;\n}\n\ninput[type=\"text\"]{\n border: none !important;\n vertical-align: middle !important;\n width: 100%;\n margin: 0 !important;\n padding: 0px !important;\n box-sizing: border-box;\n background-color: white;\n font-size: 1.0rem !important;\n line-height: 2rem !important;\n letter-spacing: 0.01rem !important;\n font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;\n font-style: normal !important;\n font-weight: 300 !important;\n -webkit-font-smoothing: antialiased !important;\n -moz-osx-font-smoothing: grayscale !important;;\n text-rendering: optimizeLegibility !important;;\n}\n\ninput[type=\"text\"] { outline: none; }\n\n\n[hidden]{\n display: none;\n}\n\ni.close.icon.clear::after { \n content: \"✕\";\n padding-right: 8px;\n font-weight: 800;\n color: gray; \n}\n\ni.close.icon.clear:hover::after {\n color: red; \n}\n\n.clear{\n position: absolute;\n right: 2px;\n padding-left: 2px;\n padding-right: 2px;\n top:3px;\n cursor: pointer;\n}\n.sh-select-disabled{\n background-color: #e3e3e3;\n color: darkgray;\n cursor: not-allowed;\n}\n\n"],"host":{"(window:mouseup)":"onDocumentClick($event)"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"ShSelectProvider"}},"multi":true}]}]}],"members":{"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isMultiselect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"mode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"inputFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["inputFilter"]}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onHide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onShow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"onDocumentClick":[{"__symbolic":"method"}],"updateRows":[{"__symbolic":"method"}],"updateFilter":[{"__symbolic":"method"}],"clearFilter":[{"__symbolic":"method"}],"toggleSelected":[{"__symbolic":"method"}],"selectSingle":[{"__symbolic":"method"}],"selectMultiple":[{"__symbolic":"method"}],"focusFilter":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}]}},"ShSelectProvider":{"__symbolic":"function","parameters":[],"value":{"__symbolic":"reference","name":"ShSelectComponent"}}}}]