ng-select
Version:
Select component for angular.
1 lines • 21.4 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"SelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"SelectComponent"},{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"SelectComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":19,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":20,"character":8}]}]}],"members":{}},"IOption":{"__symbolic":"interface"},"SELECT_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":8,"character":13},"useExisting":{"__symbolic":"reference","name":"SelectComponent"},"multi":true},"SelectComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"ng-select","providers":[{"__symbolic":"reference","name":"SELECT_VALUE_ACCESSOR"}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":18,"character":19},"member":"None"},"template":"<label\n *ngIf=\"label !== ''\">\n {{label}}\n</label>\n<div\n #selection\n [attr.tabindex]=\"disabled ? null : 0\"\n [ngClass]=\"{'open': isOpen, 'focus': hasFocus, 'below': isBelow, 'above': !isBelow, 'disabled': disabled}\"\n (click)=\"onSelectContainerClick($event)\"\n (focus)=\"onSelectContainerFocus()\"\n (keydown)=\"onSelectContainerKeydown($event)\">\n\n <div class=\"single\"\n *ngIf=\"!multiple\">\n <div class=\"value\"\n *ngIf=\"optionList.hasSelected\">\n <ng-container *ngTemplateOutlet=\"optionTemplate; context:{option: optionList.selection[0].wrappedOption, onDeselectOptionClick: onDeselectOptionClick}\"></ng-container>\n <span *ngIf=\"!optionTemplate\">{{optionList.selection[0].label}}</span>\n </div>\n <div class=\"placeholder\"\n *ngIf=\"!optionList.hasSelected\">\n {{placeholderView}}\n </div>\n <div class=\"clear\"\n *ngIf=\"allowClear && optionList.hasSelected\"\n (click)=\"onClearSelectionClick($event)\">\n ✕\n </div>\n <div class=\"toggle\"\n *ngIf=\"isOpen\">\n ▲\n </div>\n <div class=\"toggle\"\n *ngIf=\"!isOpen\">\n ▼\n </div>\n </div>\n\n <div class=\"multiple\"\n *ngIf=\"multiple\">\n <div class=\"option\"\n *ngFor=\"let option of optionList.selection\">\n <span class=\"deselect-option\"\n (click)=onDeselectOptionClick(option)>\n ✕\n </span>\n {{option.label}}\n </div>\n <div class=\"placeholder\"\n *ngIf=\"!filterEnabled && !optionList.hasSelected\">\n {{placeholderView}}\n </div>\n <input\n *ngIf=\"filterEnabled\"\n #filterInput\n autocomplete=\"off\"\n tabindex=\"-1\"\n [placeholder]=\"placeholderView\"\n [ngStyle]=\"{'width.px': filterInputWidth}\"\n (input)=\"onFilterInput($event.target.value)\"\n (keydown)=\"onMultipleFilterKeydown($event)\"\n (focus)=\"onMultipleFilterFocus()\"/>\n </div>\n\n</div>\n<select-dropdown\n *ngIf=\"isOpen\"\n #dropdown\n [multiple]=\"multiple\"\n [optionList]=\"optionList\"\n [notFoundMsg]=\"notFoundMsg\"\n [highlightColor]=\"highlightColor\"\n [highlightTextColor]=\"highlightTextColor\"\n [filterEnabled]=\"filterEnabled\"\n [placeholder]=\"filterPlaceholder\"\n [isBelow]=\"isBelow\"\n [width]=\"width\"\n [top]=\"top\"\n [left]=\"left\"\n [optionTemplate]=\"optionTemplate\"\n (optionClicked)=\"onDropdownOptionClicked($event)\"\n (optionsListClick)=\"onOptionsListClick()\"\n (singleFilterClick)=\"onSingleFilterClick()\"\n (singleFilterFocus)=\"onSingleFilterFocus()\"\n (singleFilterInput)=\"onFilterInput($event)\"\n (singleFilterKeydown)=\"onSingleFilterKeydown($event)\">\n</select-dropdown>\n","styles":["ng-select{display:inline-block;margin:0;position:relative;vertical-align:middle;width:100%}ng-select *{box-sizing:border-box}ng-select>div{border:1px solid #ddd;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}ng-select>div.disabled{background-color:#eee;color:#aaa;cursor:default;pointer-events:none}ng-select>div>div.single{display:flex;height:30px;width:100%}ng-select>div>div.single>div.placeholder,ng-select>div>div.single>div.value{flex:1;line-height:30px;overflow:hidden;padding:0 10px;white-space:nowrap}ng-select>div>div.single>div.placeholder{color:#757575}ng-select>div>div.single>div.clear,ng-select>div>div.single>div.toggle{color:#aaa;line-height:30px;text-align:center;width:30px}ng-select>div>div.single>div.clear:hover,ng-select>div>div.single>div.toggle:hover{background-color:#ececec}ng-select>div>div.single>div.clear{font-size:18px}ng-select>div>div.single>div.toggle{font-size:14px}ng-select>div>div.multiple{display:flex;flex-flow:row wrap;height:100%;min-height:30px;padding:0 10px;width:100%}ng-select>div>div.multiple>div.option{background-color:#eee;border:1px solid #aaa;border-radius:4px;color:#333;cursor:default;display:inline-block;flex-shrink:0;font-size:14px;line-height:22px;margin:3px 5px 3px 0;padding:0 4px}ng-select>div>div.multiple>div.option span.deselect-option{color:#aaa;cursor:pointer;font-size:14px;height:20px;line-height:20px}ng-select>div>div.multiple>div.option span.deselect-option:hover{color:#555}ng-select>div>div.multiple input{background-color:transparent;border:none;cursor:pointer;height:30px;line-height:30px;padding:0}ng-select>div>div.multiple input:focus{outline:0}ng-select label{color:rgba(0,0,0,.38);display:block;font-size:13px;padding:4px 0}"]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":5}}]}],"allowClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":5}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"noFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"highlightColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"highlightTextColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"notFoundMsg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"filterPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"opened":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":43,"character":5}}]}],"closed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":44,"character":5}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":45,"character":5}}]}],"deselected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":46,"character":5}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":5}}]}],"blur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":48,"character":5}}]}],"noOptionsFound":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":49,"character":5}}]}],"filterInputChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":50,"character":5}}]}],"selectionSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":52,"character":5},"arguments":["selection",{"static":true}]}]}],"dropdown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":53,"character":5},"arguments":["dropdown",{"static":false}]}]}],"filterInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":54,"character":5},"arguments":["filterInput",{"static":false}]}]}],"optionTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":56,"character":5},"arguments":["optionTemplate",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":85,"character":29}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onWindowBlur":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":102,"character":5},"arguments":["window:blur"]}]}],"onWindowClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":107,"character":5},"arguments":["window:click"]}]}],"onWindowResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":122,"character":5},"arguments":["window:resize"]}]}],"onSelectContainerClick":[{"__symbolic":"method"}],"onSelectContainerFocus":[{"__symbolic":"method"}],"onSelectContainerKeydown":[{"__symbolic":"method"}],"onOptionsListClick":[{"__symbolic":"method"}],"onDropdownOptionClicked":[{"__symbolic":"method"}],"onSingleFilterClick":[{"__symbolic":"method"}],"onSingleFilterFocus":[{"__symbolic":"method"}],"onFilterInput":[{"__symbolic":"method"}],"onSingleFilterKeydown":[{"__symbolic":"method"}],"onMultipleFilterKeydown":[{"__symbolic":"method"}],"onMultipleFilterFocus":[{"__symbolic":"method"}],"onClearSelectionClick":[{"__symbolic":"method"}],"onDeselectOptionClick":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"handleInputChanges":[{"__symbolic":"method"}],"updateOptionList":[{"__symbolic":"method"}],"updateFilterEnabled":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}],"updateState":[{"__symbolic":"method"}],"selectOption":[{"__symbolic":"method"}],"deselectOption":[{"__symbolic":"method"}],"clearSelection":[{"__symbolic":"method"}],"toggleSelectOption":[{"__symbolic":"method"}],"selectHighlightedOption":[{"__symbolic":"method"}],"deselectLast":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}],"filter":[{"__symbolic":"method"}],"clearFilterInput":[{"__symbolic":"method"}],"setMultipleFilterInput":[{"__symbolic":"method"}],"handleSelectContainerKeydown":[{"__symbolic":"method"}],"handleMultipleFilterKeydown":[{"__symbolic":"method"}],"handleSingleFilterKeydown":[{"__symbolic":"method"}],"_blur":[{"__symbolic":"method"}],"_focus":[{"__symbolic":"method"}],"_focusSelectContainer":[{"__symbolic":"method"}],"updateWidth":[{"__symbolic":"method"}],"updatePosition":[{"__symbolic":"method"}],"updateFilterWidth":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"select-dropdown","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":8,"character":19},"member":"None"},"template":"<div\n [ngClass]=\"{'below': isBelow, 'above': !isBelow}\"\n [ngStyle]=\"{'top.px': top, 'left.px': left, 'width.px': width}\">\n\n <div class=\"filter\"\n *ngIf=\"!multiple && filterEnabled\">\n <input\n #filterInput\n autocomplete=\"off\"\n [placeholder]=\"placeholder\"\n (click)=\"onSingleFilterClick()\"\n (input)=\"onSingleFilterInput($event)\"\n (keydown)=\"onSingleFilterKeydown($event)\"\n (focus)=\"onSingleFilterFocus()\">\n </div>\n\n <div class=\"options\"\n (click)=\"onOptionsListClick()\"\n #optionsList>\n <ul\n (wheel)=\"onOptionsWheel($event)\">\n <li *ngFor=\"let option of optionList.filtered\"\n [ngClass]=\"{'highlighted': option.highlighted, 'selected': option.selected, 'disabled': option.disabled}\"\n [ngStyle]=\"getOptionStyle(option)\"\n (click)=\"onOptionClick(option)\"\n (mouseover)=\"onOptionMouseover(option)\">\n <ng-container *ngTemplateOutlet=\"optionTemplate; context:{option: option.wrappedOption}\"></ng-container>\n <span *ngIf=\"!optionTemplate\">{{option.label}}</span>\n </li>\n <li\n *ngIf=\"!optionList.hasShown\"\n class=\"message\">\n {{notFoundMsg}}\n </li>\n </ul>\n </div>\n</div>\n","styles":["select-dropdown,select-dropdown *{box-sizing:border-box}select-dropdown>div{background-color:#fff;border:1px solid #ccc;box-sizing:border-box;position:absolute;z-index:1}select-dropdown>div.above{border-bottom:none}select-dropdown>div.below{border-top:none}select-dropdown>div .filter{padding:3px;width:100%}select-dropdown>div .filter input{border:1px solid #eee;box-sizing:border-box;padding:4px;width:100%}select-dropdown>div .options{max-height:200px;overflow-y:auto}select-dropdown>div .options ul{list-style:none;margin:0;padding:0}select-dropdown>div .options ul li{padding:4px 8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}select-dropdown .selected{background-color:#e0e0e0}select-dropdown .highlighted,select-dropdown .selected.highlighted{background-color:#2196f3;color:#fff}select-dropdown .disabled{background-color:#fff;color:#9e9e9e;cursor:default;pointer-events:none}"]}]}],"members":{"filterEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":5}}]}],"highlightColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":5}}]}],"highlightTextColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":5}}]}],"left":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":5}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":5}}]}],"notFoundMsg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"optionList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"isBelow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":5}}]}],"top":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":5}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":5}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":5}}]}],"optionTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":5}}]}],"optionClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":27,"character":5}}]}],"optionsListClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":28,"character":5}}]}],"singleFilterClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":29,"character":5}}]}],"singleFilterFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":30,"character":5}}]}],"singleFilterInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":31,"character":5}}]}],"singleFilterKeydown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":32,"character":5}}]}],"filterInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":34,"character":5},"arguments":["filterInput",{"static":false}]}]}],"optionsList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":35,"character":5},"arguments":["optionsList",{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":41,"character":28}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onOptionsListClick":[{"__symbolic":"method"}],"onSingleFilterClick":[{"__symbolic":"method"}],"onSingleFilterInput":[{"__symbolic":"method"}],"onSingleFilterKeydown":[{"__symbolic":"method"}],"onSingleFilterFocus":[{"__symbolic":"method"}],"onOptionsWheel":[{"__symbolic":"method"}],"onOptionMouseover":[{"__symbolic":"method"}],"onOptionClick":[{"__symbolic":"method"}],"optionsReset":[{"__symbolic":"method"}],"getOptionStyle":[{"__symbolic":"method"}],"moveHighlightedIntoView":[{"__symbolic":"method"}],"handleOptionsWheel":[{"__symbolic":"method"}]}}},"origins":{"SelectModule":"./lib/ng-select.module","IOption":"./lib/option.interface","SELECT_VALUE_ACCESSOR":"./lib/select.component","SelectComponent":"./lib/select.component","ɵa":"./lib/select-dropdown.component"},"importAs":"ng-select"}