ng-custom-select/ng-custom-select.metadata.json

Create customizable Angular2+ dropdown/datalist with your own styles

{"__symbolic":"module","version":4,"metadata":{"NgSelectComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"ng-select","template":"<div class=\"ng-dropdown-wrapper\" [class]=\"styleGuide?.selectBoxClass\" tabindex=\"0\" (click)=\"active=!active\" [ngClass]=\"{'active':active, 'disabled': disable}\">\n    <input type=\"text\" name=\"searchTerm\" tabindex=\"-1\" [formControl]=\"searchTerm\" [readonly]=\"!isDatalist\" #searchInput>\n    <span [class]=\"styleGuide?.caretClass\" id=\"caret\" [ngStyle]=\"{'right':positionRight}\" [ngClass]=\"{'icon':!styleGuide?.caretClass}\"></span>\n    <ul [ngClass]=\"{'ng-dropdown-menu' : true}\" [class]=\"styleGuide?.selectMenuClass\">\n        <li *ngFor=\"let option of filterOptions\" (click)=\"changeValue(option)\" [class]=\"styleGuide?.optionsClass\">\n            <span>{{option[displayKey] || option}}</span>\n        </li>\n    </ul>\n</div>","styles":["@charset \"UTF-8\";.ng-dropdown-wrapper{display:inline-block;position:relative}.ng-dropdown-wrapper input[type=text]{width:90%;border:none;outline:0;text-transform:capitalize}.ng-dropdown-wrapper #caret{position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:999}.ng-dropdown-wrapper .icon::after{content:\"▼\";text-align:center;pointer-events:none}.ng-dropdown-wrapper .ng-dropdown-menu{display:none;position:absolute;top:102%;left:0;right:0;list-style:none;overflow:auto;z-index:9999}.ng-dropdown-wrapper .ng-dropdown-menu li span{text-transform:capitalize;transition:all .3s ease-out}.ng-dropdown-wrapper.active #caret{-webkit-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)}.ng-dropdown-wrapper.active .ng-dropdown-menu{display:block}.disabled{cursor:not-allowed;pointer-events:none;opacity:.7;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}"],"host":{"(document:click)":"closeDropdown($event)","$quoted$":["(document:click)"]},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":23,"character":15},"useExisting":{"__symbolic":"reference","name":"NgSelectComponent"},"multi":true},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALIDATORS","line":28,"character":15},"useExisting":{"__symbolic":"reference","name":"NgSelectComponent"},"multi":true}]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"displayKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"styleGuide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"isDatalist":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"disable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"searchKeys":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"searchInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":54,"character":3},"arguments":["searchInput"]}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":66,"character":29}]}],"writeValue":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"initSearch":[{"__symbolic":"method"}],"changeValue":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}],"getCaretPosition":[{"__symbolic":"method"}]}},"NgSelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":8,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":9,"character":4}],"declarations":[{"__symbolic":"reference","name":"NgSelectComponent"}],"exports":[{"__symbolic":"reference","name":"NgSelectComponent"}]}]}],"members":{}}},"origins":{"NgSelectComponent":"./lib/ng-select.component","NgSelectModule":"./lib/ng-select.module"},"importAs":"ng-custom-select"}