ngx-select2-ex/ngx-select2-ex.metadata.json

Angular(2+) version of the popular alternative to select inputs, Select2. Select2 classes are used in the template, so you can use any pre-existing styles for Select2 and it will look the same as the original.

{"__symbolic":"module","version":4,"metadata":{"NgxSelect2ExModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":11,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":14,"character":4}],"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵd"}],"exports":[{"__symbolic":"reference","name":"ɵa"}],"entryComponents":[{"__symbolic":"reference","name":"ɵc"}],"providers":[{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵd"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"app-ngx-select2-ex","template":"<span appNgxSelect2Ex\n  [service]=\"ngxSelect2ExService\"\n  class=\"select2 select2-container\"\n  [class.select2-container--below]=\"!disabled\"\n  [class.select2-container--open]=\"isOpen\"\n  [ngClass]=\"getContainerThemeClass()\"\n  [class.select2-container--focus]=\"isInFocus\"\n  [class.select2-container--disabled]=\"disabled\"\n  dir=\"ltr\">\n  <span class=\"selection\">\n    <span class=\"select2-selection\"\n      [class.select2-selection--single]=\"!multi\"\n      [class.select2-selection--multiple]=\"multi\"\n      role=\"combobox\"\n      aria-haspopup=\"true\"\n      [attr.aria-expanded]=\"isOpen\"\n      [tabindex]=\"multi ? -1 : 0\"\n      aria-labelledby=\"select2-container\"\n      aria-owns=\"select2-results\">\n      <span *ngIf=\"!multi\" class=\"select2-selection__rendered\" id=\"select2-selection-container\" [title]=\"getTitleTooltipText()\">\n        <span *ngIf=\"shouldShowPlaceholder()\" class=\"select2-selection__placeholder\">{{placeholder}}</span>\n        <span *ngIf=\"shouldShowClearSelectionButton()\" class=\"select2-selection__clear\" (click)=\"clearSelection()\">×</span>\n        {{selection[0]?.value}}\n      </span>\n      <span *ngIf=\"!multi\" class=\"select2-selection__arrow\" role=\"presentation\">\n        <b role=\"presentation\"></b>\n      </span>\n      <ul *ngIf=\"multi\" class=\"select2-selection__rendered\">\n        <span *ngIf=\"shouldShowClearSelectionButton()\" class=\"select2-selection__clear\" (click)=\"clearSelection()\">×</span>\n        <li *ngFor=\"let selectionItem of selection\" class=\"select2-selection__choice\" [title]=\"selectionItem.value\">\n          <span class=\"select2-selection__choice__remove\" role=\"presentation\" (click)=\"deselect(selectionItem)\">×</span>\n          {{selectionItem.value}}\n        </li>\n        <li class=\"select2-search select2-search--inline\" [ngStyle]=\"getStyleOfSearchListItem()\">\n          <input class=\"select2-search__field\"\n            type=\"search\"\n            tabindex=\"0\"\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            autocapitalize=\"off\"\n            spellcheck=\"false\"\n            role=\"textbox\"\n            aria-autocomplete=\"list\"\n            [placeholder]=\"getInlineInputPlaceholder()\"\n            [ngStyle]=\"getStyleOfInlineInput(search)\"\n            [(ngModel)]=\"search\"></li>\n      </ul>\n    </span>\n  </span>\n  <span class=\"dropdown-wrapper\" aria-hidden=\"true\"></span>\n</span>\n","styles":[".select2-container{display:block}"],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":66,"character":15},"useExisting":{"__symbolic":"reference","name":"ɵa"},"multi":true},{"__symbolic":"reference","name":"ɵb"}]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":3}}]}],"multi":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":3}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":3}}]}],"minimumResultsForSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":3}}]}],"minimumInputLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":3}}]}],"maximumInputLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":3}}]}],"language":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":3}}]}],"selectOnClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3}}]}],"closeOnSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":3}}]}],"allowClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵb"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"getContainerThemeClass":[{"__symbolic":"method"}],"getStyleOfSearchListItem":[{"__symbolic":"method"}],"getStyleOfInlineInput":[{"__symbolic":"method"}],"getInlineInputPlaceholder":[{"__symbolic":"method"}],"clearSelection":[{"__symbolic":"method"}],"shouldShowClearSelectionButton":[{"__symbolic":"method"}],"shouldShowPlaceholder":[{"__symbolic":"method"}],"getTitleTooltipText":[{"__symbolic":"method"}],"deselect":[{"__symbolic":"method"}],"subscribeToSelection":[{"__symbolic":"method"}],"subscribeToIsOpen":[{"__symbolic":"method"}],"subscribeToIsInFocus":[{"__symbolic":"method"}],"initOptions":[{"__symbolic":"method"}],"isStringList":[{"__symbolic":"method"}],"isOptionInterfaceList":[{"__symbolic":"method"}],"defaultChangeListener":[{"__symbolic":"method"}],"initStaticInputValues":[{"__symbolic":"method"}],"defaultInputSetter":[{"__symbolic":"method"}],"unsubscribe":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":9,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"getOptionsAsObservable":[{"__symbolic":"method"}],"getSelectionAsObservable":[{"__symbolic":"method"}],"getDropdownPositionAsObservable":[{"__symbolic":"method"}],"getIsOpenAsObservable":[{"__symbolic":"method"}],"getIsInFocusAsObservable":[{"__symbolic":"method"}],"getSearchAsObservable":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"deselect":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"app-ngx-select2-ex-dropdown","template":"<span class=\"select2-container\" [ngClass]=\"getContainerThemeClass()\" [class.select2-container--open]=\"true\">\n  <span id=\"select2-dropdown\" class=\"select2-dropdown select2-dropdown--below\" dir=\"ltr\">\n    <span *ngIf=\"!multi\" class=\"select2-search select2-search--dropdown\" [class.select2-search--hide]=\"shouldHideSearchBox()\">\n      <input appNgxSelect2ExDropdownSearchField\n        class=\"select2-search__field\"\n        type=\"search\" tabindex=\"0\"\n        autocomplete=\"off\"\n        autocorrect=\"off\"\n        autocapitalize=\"off\"\n        spellcheck=\"false\"\n        role=\"textbox\"\n        [(ngModel)]=\"search\">\n    </span>\n    <span class=\"select2-results\">\n      <ul class=\"select2-results__options\" role=\"tree\" id=\"select2-results\" aria-expanded=\"true\" aria-hidden=\"false\">\n        <li *ngFor=\"let option of options | ngxSelect2OptionFilter: search:minimumResultsForSearch:minimumInputLength:maximumInputLength\"\n          class=\"select2-results__option\"\n          [class.select2-results__option--highlighted]=\"option.highlighted\"\n          role=\"treeitem\"\n          [attr.aria-selected]=\"option.selected\"\n          [attr.aria-disabled]=\"option.disabled ? option.disabled : null\"\n          (mouseover)=\"onOptionHover(option)\"\n          (mousedown)=\"onOptionClick(option)\">\n          {{option.value}}\n        </li>\n        <li *ngIf=\"shouldShowNoResultsMessage()\"\n          role=\"treeitem\"\n          aria-live=\"assertive\"\n          class=\"select2-results__option select2-results__message\">\n          {{getNoResultsMessage()}}\n        </li>\n        <li *ngIf=\"shouldShowInputTooShortMessage()\"\n          role=\"treeitem\"\n          aria-live=\"assertive\"\n          class=\"select2-results__option select2-results__message\">\n          {{getInputTooShortMessage()}}\n        </li>\n        <li *ngIf=\"shouldShowInputTooLongMessage()\"\n          role=\"treeitem\"\n          aria-live=\"assertive\"\n          class=\"select2-results__option select2-results__message\">\n          {{getInputTooLongMessage()}}\n        </li>\n      </ul>\n    </span>\n  </span>\n</span>\n","styles":[".select2-container{display:block}"]}]}],"members":{"service":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":3}}]}],"multi":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":3}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":3}}]}],"minimumResultsForSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":3}}]}],"minimumInputLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":3}}]}],"maximumInputLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3}}]}],"language":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3}}]}],"display":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":70,"character":3},"arguments":["style.display"]}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":71,"character":3},"arguments":["style.position"]}]}],"top":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":72,"character":3},"arguments":["style.top"]}]}],"left":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":73,"character":3},"arguments":["style.left"]}]}],"right":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":74,"character":3},"arguments":["style.right"]}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":75,"character":3},"arguments":["style.width"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵd"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onOptionHover":[{"__symbolic":"method"}],"onOptionClick":[{"__symbolic":"method"}],"getContainerThemeClass":[{"__symbolic":"method"}],"shouldHideSearchBox":[{"__symbolic":"method"}],"getNoResultsMessage":[{"__symbolic":"method"}],"getInputTooShortMessage":[{"__symbolic":"method"}],"getInputTooLongMessage":[{"__symbolic":"method"}],"shouldShowNoResultsMessage":[{"__symbolic":"method"}],"shouldShowInputTooShortMessage":[{"__symbolic":"method"}],"shouldShowInputTooLongMessage":[{"__symbolic":"method"}],"subscribeToOptions":[{"__symbolic":"method"}],"subscribeToDropdownPositionChanges":[{"__symbolic":"method"}],"subscribeToSearchChanges":[{"__symbolic":"method"}],"initDropdownPosition":[{"__symbolic":"method"}],"selectOnClose":[{"__symbolic":"method"}],"unsubscribe":[{"__symbolic":"method"}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":4,"character":1},"arguments":[{"name":"ngxSelect2OptionFilter"}]}],"members":{"transform":[{"__symbolic":"method"}],"filterOptions":[{"__symbolic":"method"}],"rangeInputFilteringHandler":[{"__symbolic":"method"}],"minimumInputFilteringHandler":[{"__symbolic":"method"}],"maximumInputFilteringHandler":[{"__symbolic":"method"}],"isfilterTextBiggerThanMinimumInputLength":[{"__symbolic":"method"}],"isfilterTextSmallerThanMaximumInputLength":[{"__symbolic":"method"}],"doFiltering":[{"__symbolic":"method"}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":8,"character":1},"arguments":[{"selector":"[appNgxSelect2Ex]","providers":[{"__symbolic":"reference","name":"ɵf"}]}]}],"members":{"service":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":20,"character":16},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":21,"character":22},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵf"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":35,"character":3},"arguments":["document:mouseup",["$event.target"]]}]}],"resize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":79,"character":3},"arguments":["window:resize"]}]}],"openDropdown":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}],"setFocusForSearchField":[{"__symbolic":"method"}],"subscribeToSearchChanges":[{"__symbolic":"method"}],"updateDropdownPosition":[{"__symbolic":"method"}],"unsubscribe":[{"__symbolic":"method"}]}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":7,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}]}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":4,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef","line":10,"character":28},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":11,"character":38},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":12,"character":22}]}],"getRootViewContainer":[{"__symbolic":"method"}],"setRootViewContainer":[{"__symbolic":"method"}],"getComponentRootNode":[{"__symbolic":"method"}],"getRootViewContainerNode":[{"__symbolic":"method"}],"projectComponentInputs":[{"__symbolic":"method"}],"appendComponent":[{"__symbolic":"method"}]}},"ɵh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[appNgxSelect2ExDropdownSearchField]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":7,"character":26}]}],"ngOnInit":[{"__symbolic":"method"}],"setFocusForDropdownSearchField":[{"__symbolic":"method"}]}}},"origins":{"NgxSelect2ExModule":"./src/app/ngx-select2-ex/ngx-select2-ex.module","ɵa":"./src/app/ngx-select2-ex/components/ngx-select2-ex/ngx-select2-ex.component","ɵb":"./src/app/ngx-select2-ex/services/ngx-select2-ex.service","ɵc":"./src/app/ngx-select2-ex/components/ngx-select2-ex-dropdown/ngx-select2-ex-dropdown.component","ɵd":"./src/app/ngx-select2-ex/pipes/ngx-select2-option-filter.pipe","ɵe":"./src/app/ngx-select2-ex/directives/ngx-select2-ex.directive","ɵf":"./src/app/ngx-select2-ex/services/window-ref.service","ɵg":"./src/app/ngx-select2-ex/services/ngx-select2-ex-dropdown-injection.service","ɵh":"./src/app/ngx-select2-ex/directives/ngx-select2-ex-dropdown-search-field.directive"},"importAs":"ngx-select2-ex"}