ng-select.metadata.json

{"__symbolic":"module","version":3,"metadata":{"SelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","name":"SelectComponent"},{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"SelectComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}]}]}],"members":{}},"IOption":{"__symbolic":"interface"},"SELECT_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"SelectComponent"},"multi":true},"SelectComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-select","template":"\n      <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                  &#x2715;\n              </div>\n              <div class=\"toggle\"\n                  *ngIf=\"isOpen\">\n                  &#x25B2;\n              </div>\n              <div class=\"toggle\"\n                  *ngIf=\"!isOpen\">\n                  &#x25BC;\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                      &#x2715;\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":["\n      ng-select {\n        display: inline-block;\n        margin: 0;\n        position: relative;\n        vertical-align: middle;\n        width: 100%; }\n        ng-select * {\n          -webkit-box-sizing: border-box;\n                  box-sizing: border-box; }\n        ng-select > div {\n          border: 1px solid #ddd;\n          -webkit-box-sizing: border-box;\n                  box-sizing: border-box;\n          cursor: pointer;\n          -webkit-user-select: none;\n             -moz-user-select: none;\n              -ms-user-select: none;\n                  user-select: none;\n          width: 100%; }\n          ng-select > div.disabled {\n            background-color: #eee;\n            color: #aaa;\n            cursor: default;\n            pointer-events: none; }\n          ng-select > div > div.single {\n            display: -webkit-box;\n            display: -ms-flexbox;\n            display: flex;\n            height: 30px;\n            width: 100%; }\n            ng-select > div > div.single > div.value,\n            ng-select > div > div.single > div.placeholder {\n              -webkit-box-flex: 1;\n                  -ms-flex: 1;\n                      flex: 1;\n              line-height: 30px;\n              overflow: hidden;\n              padding: 0 10px;\n              white-space: nowrap; }\n            ng-select > div > div.single > div.placeholder {\n              color: #757575; }\n            ng-select > div > div.single > div.clear,\n            ng-select > div > div.single > div.toggle {\n              color: #aaa;\n              line-height: 30px;\n              text-align: center;\n              width: 30px; }\n              ng-select > div > div.single > div.clear:hover,\n              ng-select > div > div.single > div.toggle:hover {\n                background-color: #ececec; }\n            ng-select > div > div.single > div.clear {\n              font-size: 18px; }\n            ng-select > div > div.single > div.toggle {\n              font-size: 14px; }\n          ng-select > div > div.multiple {\n            display: -webkit-box;\n            display: -ms-flexbox;\n            display: flex;\n            -webkit-box-orient: horizontal;\n            -webkit-box-direction: normal;\n                -ms-flex-flow: row wrap;\n                    flex-flow: row wrap;\n            height: 100%;\n            min-height: 30px;\n            padding: 0 10px;\n            width: 100%; }\n            ng-select > div > div.multiple > div.option {\n              background-color: #eee;\n              border: 1px solid #aaa;\n              border-radius: 4px;\n              color: #333;\n              cursor: default;\n              display: inline-block;\n              -ms-flex-negative: 0;\n                  flex-shrink: 0;\n              font-size: 14px;\n              line-height: 22px;\n              margin: 3px 5px 3px 0;\n              padding: 0 4px; }\n              ng-select > div > div.multiple > div.option span.deselect-option {\n                color: #aaa;\n                cursor: pointer;\n                font-size: 14px;\n                height: 20px;\n                line-height: 20px; }\n                ng-select > div > div.multiple > div.option span.deselect-option:hover {\n                  color: #555; }\n            ng-select > div > div.multiple input {\n              background-color: transparent;\n              border: none;\n              cursor: pointer;\n              height: 30px;\n              line-height: 30px;\n              padding: 0; }\n              ng-select > div > div.multiple input:focus {\n                outline: none; }\n        ng-select label {\n          color: rgba(0, 0, 0, 0.38);\n          display: block;\n          font-size: 13px;\n          padding: 4px 0; }\n    "],"providers":[{"__symbolic":"reference","name":"SELECT_VALUE_ACCESSOR"}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allowClear":[{"__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"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"noFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"highlightColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"highlightTextColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"notFoundMsg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"filterPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"opened":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"closed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"deselected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"blur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"noOptionsFound":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"filterInputChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selectionSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["selection"]}]}],"dropdown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dropdown"]}]}],"filterInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["filterInput"]}]}],"optionTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["optionTemplate"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onWindowBlur":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:blur"]}]}],"onWindowClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:click"]}]}],"onWindowResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"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"},"arguments":[{"selector":"select-dropdown","template":"\n      <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":["\n      select-dropdown {\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box; }\n        select-dropdown * {\n          -webkit-box-sizing: border-box;\n                  box-sizing: border-box; }\n        select-dropdown > div {\n          background-color: #fff;\n          border: 1px solid #ccc;\n          -webkit-box-sizing: border-box;\n                  box-sizing: border-box;\n          position: absolute;\n          z-index: 1; }\n          select-dropdown > div.above {\n            border-bottom: none; }\n          select-dropdown > div.below {\n            border-top: none; }\n          select-dropdown > div .filter {\n            padding: 3px;\n            width: 100%; }\n            select-dropdown > div .filter input {\n              border: 1px solid #eee;\n              -webkit-box-sizing: border-box;\n                      box-sizing: border-box;\n              padding: 4px;\n              width: 100%; }\n          select-dropdown > div .options {\n            max-height: 200px;\n            overflow-y: auto; }\n            select-dropdown > div .options ul {\n              list-style: none;\n              margin: 0;\n              padding: 0; }\n              select-dropdown > div .options ul li {\n                padding: 4px 8px;\n                cursor: pointer;\n                -webkit-user-select: none;\n                   -moz-user-select: none;\n                    -ms-user-select: none;\n                        user-select: none; }\n        select-dropdown .selected {\n          background-color: #e0e0e0; }\n          select-dropdown .selected.highlighted {\n            background-color: #2196F3;\n            color: #fff; }\n        select-dropdown .highlighted {\n          background-color: #2196F3;\n          color: #fff; }\n        select-dropdown .disabled {\n          background-color: #fff;\n          color: #9e9e9e;\n          cursor: default;\n          pointer-events: none; }\n    "],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"filterEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"highlightColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"highlightTextColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"left":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"notFoundMsg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"optionList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isBelow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"top":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"optionTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"optionClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"optionsListClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"singleFilterClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"singleFilterFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"singleFilterInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"singleFilterKeydown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"filterInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["filterInput"]}]}],"optionsList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["optionsList"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"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":"./ng-select.module","IOption":"./option.interface","SELECT_VALUE_ACCESSOR":"./select.component","SelectComponent":"./select.component","ɵa":"./select-dropdown.component"},"importAs":"ng-select"}