ngx-dropdown-menu-search/ngx-dropdown-menu-search.metadata.json

A simple Angular 6 dropdown menu with search.

{"__symbolic":"module","version":4,"metadata":{"NgxDropdownMenuSearchComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"ngx-dropdown-menu-search","template":"<div class=\"ht0 dropdown relative\" (window:mouseup)=\"autoCloseDropdown($event)\">\n\t<div [ngStyle]=\"heightAndLineHeight\" *ngIf=\"!config?.searchEnabled || (config?.searchEnabled && !optionsVisible)\" [ngClass]=\"{'disabled' : config?.isDisabled, 'cursorClass' : !config?.isDisabled, 'gray-border-darker' : !errorVisible, 'red-border-light' : errorVisible}\"  (click)=\"dropdownClick()\" class=\"dropdown-label setBorder border-radius in-block setPadding\">\n\t\t<span class=\"in-block setMargin ellipsis\">{{selectedOption}}</span>\n\t\t<span [style.line-height]=\"config?.lineHeight\" class=\"chevron-down-icon ft-size18\"></span>\n\t</div>\n\n\t<input [ngStyle]=\"heightAndLineHeight\" [(ngModel)]=\"searchTerm\" *ngIf=\"optionsVisible && config?.searchEnabled\" (click)=\"optionsVisible = true\" class=\"dropdown setPadding setWidth100 border-radius gray-border-darker setBorder\" type=\"text\" placeholder=\"Search\">\n\n\t<div *ngIf=\"optionsVisible\" style=\"width: 100%\" [ngClass]=\"{'bottom0' : config?.flow === 'up'}\" class=\"setMaxHeight scrollable mgn-bottom text-left shadow absolute z white-bg setZ border mgn-bottom50 gray-border-darker border-radius setPaddingTopBottom\" id=\"{{config?.scrollbarVisible ? 'scrollbar-style' : null}}\">\n\t\t<ul *ngFor=\"let option of options | searchFilter:searchTerm; let i = index\">\n\t\t\t<li [ngClass]=\"{'gray-bg' : option.name === element?.id}\" (mouseup)=\"onOptionClick(option, option.name)\" id=\"{{option.name}}\"  class=\"option cursorClass\">{{option.name}}<i *ngIf=\"option.name === selectedOption\" class=\"fa fa-check mgn-left10\" aria-hidden=\"true\"></i></li>\n\t\t</ul>\n\t</div>\n\t<input *ngIf=\"optionsVisible\" #hiddenSearchInput type=\"text\" class=\"hidden-search\" (keyup)=\"onInputChange($event, hiddenSearchInput.value)\">\n</div>","styles":["input:focus{outline:0}.dropdown-label{background-color:#fff;width:100%;position:relative}.bottom0{bottom:0}.chevron-down-icon{display:inline-block;width:8px;height:8px;border-bottom:1px solid #98999a;border-right:1px solid #98999a;position:absolute;right:.625em;top:50%;-webkit-transform:translateY(-50%) rotate(45deg);transform:translateY(-50%) rotate(45deg)}.gray-border-darker{border-color:#bbc0c3}.cursorClass{cursor:pointer}.hidden-search{position:absolute;width:50%;left:0;top:35px}.ft-size18{font-size:1.125rem}.absolute{position:absolute}.setPaddingTopBottom{padding-top:.063rem;padding-bottom:.063rem}.right10{right:.625rem;top:.5rem}.ellipsis{width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.setPadding{padding-left:.5rem;padding-right:.5rem}.shadow{box-shadow:0 .125em .313em 0 rgba(0,0,0,.16),0 .125em .625em 0 rgba(0,0,0,.12)}.z{z-index:99}.white-bg{background-color:#fff}.setMargin{margin:0}.scrollable{overflow-y:scroll;overflow-x:hidden;-webkit-overflow-scrolling:touch}#scrollbar-style::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#f6f8f8}#scrollbar-style::-webkit-scrollbar{width:5px;background-color:#f6f8f8}#scrollbar-style::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#d6d9db}.mgn-bottom50{margin-bottom:3.125rem}.text-left{text-align:left}.setMaxHeight{max-height:14rem}.setLeft90{left:90%}.setWidth100{width:100%}.mgn-left10{margin-left:.625rem}.relative{position:relative}.border-radius{border-radius:.25em}.in-block{display:inline-block}.setPaddingLeft{padding-left:60px!important}.setPaddingLeft26{padding-left:26px!important}.option:hover{background-color:#e6e8e9}.setWidth50{width:50%}ul{padding-left:0;margin:0}ul li{padding-left:.5rem;padding-top:.2rem;padding-bottom:.2rem}.setBorder{border-width:1px;border-style:solid}.setZ{z-index:300}"]}]}],"members":{"errorVisible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":5}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":5}}]}],"selectedOption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":5}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"onDropdownClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":29,"character":5}}]}],"onOptionSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":30,"character":5}}]}],"hiddenSearchInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":32,"character":5},"arguments":["hiddenSearchInput"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"dropdownClick":[{"__symbolic":"method"}],"onInputChange":[{"__symbolic":"method"}],"onOptionClick":[{"__symbolic":"method"}],"autoCloseDropdown":[{"__symbolic":"method"}],"includes":[{"__symbolic":"method"}],"scrollToFoundOption":[{"__symbolic":"method"}],"selectOptionOnEnterClick":[{"__symbolic":"method"}]}},"NgxDropdownMenuSearchModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":10,"character":4}],"declarations":[{"__symbolic":"reference","name":"NgxDropdownMenuSearchComponent"},{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"NgxDropdownMenuSearchComponent"},{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"IConfig":{"__symbolic":"interface"},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"searchFilter","pure":false}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"transform":[{"__symbolic":"method"}],"includes":[{"__symbolic":"method"}]}}},"origins":{"NgxDropdownMenuSearchComponent":"./lib/ngx-dropdown-menu-search.component","NgxDropdownMenuSearchModule":"./lib/ngx-dropdown-menu-search.module","IConfig":"./lib/config.models","ɵa":"./lib/search-filter.pipe"},"importAs":"ngx-dropdown-menu-search"}