ngx-type-ahead
Version:
Typeahead multi-select dropdown component for angular
1 lines • 7.71 kB
JSON
[{"__symbolic":"module","version":4,"metadata":{"ɵ0":{"__symbolic":"error","message":"Lambda not supported","line":22,"character":23},"TypeaheadComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":31,"character":1},"arguments":[{"selector":"type-ahead","styles":["\n :host {\n height: auto;\n min-height: 1em;\n position: relative;\n display: inline-flex;\n flex-wrap: wrap;\n -webkit-appearance: textfield;\n -moz-appearance: textfield-multiline;\n -webkit-rtl-ordering: logical;\n user-select: text;\n cursor: auto;\n }\n :host[disabled] {\n cursor: not-allowed;\n }\n :host[disabled] input {\n background-color: inherit;\n }\n :host .type-ahead-badge {\n white-space: nowrap;\n cursor: pointer;\n }\n :host input {\n border: none;\n outline: 0;\n line-height: 1;\n flex: 1;\n }\n :host [role=\"menuitem\"] {\n cursor: pointer;\n }\n :host [role=\"menuitem\"][disabled] {\n cursor: not-allowed;\n }\n "],"template":"\n <!-- default options item template -->\n <ng-template #taItemTemplate let-value=\"item\">\n {{ complex ? value[nameField] : value }}\n </ng-template>\n\n <span [ngClass]=\"settings.tagClass\" class=\"type-ahead-badge\" *ngFor=\"let value of values; let i = index\">\n <ng-template [ngTemplateOutlet]=\"itemTemplate || taItemTemplate\"\n [ngTemplateOutletContext]=\"{ item: value, index: i, complex: complex, nameField: nameField }\"></ng-template>\n <span *ngIf=\"!isDisabled\" aria-hidden=\"true\" (click)=\"removeValue(value)\"\n [ngClass]=\"settings.tagRemoveIconClass\">×</span>\n </span>\n <input *ngIf=\"!isDisabled || !multi || !values.length\" \n [disabled]=\"isDisabled || null\"\n placeholder=\"{{(isDisabled || values.length) ? '' : placeholder}}\"\n type=\"text\" autocomplete=\"off\"\n (keyup)=\"handleInput($event)\"\n (keydown)=\"handleInput($event)\"\n (paste)=\"handleInput($event)\"\n (click)=\"toggleDropdown(true)\"\n (change)=\"handleInputChange($event)\">\n <i *ngIf=\"!isDisabled\" (click)=\"toggleDropdown()\" tabindex=\"-1\"\n [ngClass]=\"settings.dropdownToggleClass\"></i>\n <div role=\"menu\" [attr.class]=\"dropDownClass\" *ngIf=\"matches.length || !custom\">\n <button *ngFor=\"let match of matches; let i = index\" type=\"button\" role=\"menuitem\" tabindex=\"-1\"\n [ngClass]=\"settings.dropdownMenuItemClass\"\n (mouseup)=\"handleButton($event, match)\"\n (keydown)=\"handleButton($event, match)\"\n (keyup)=\"handleButton($event, match)\">\n <ng-template [ngTemplateOutlet]=\"itemTemplate || taItemTemplate\"\n [ngTemplateOutletContext]=\"{ item: match, index: i, complex: complex, nameField: nameField }\"></ng-template>\n </button>\n <button role=\"menuitem\" *ngIf=\"!matches.length && !custom\" tabindex=\"-1\" aria-disabled=\"true\" disabled=\"disabled\"\n [ngClass]=\"settings.dropdownMenuItemClass\">\n {{ settings.noMatchesText }}\n </button>\n </div>\n ","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":107,"character":25},"useExisting":{"__symbolic":"reference","name":"TypeaheadComponent"},"multi":true}]}]}],"members":{"suggestions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":3}}]}],"itemTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":116,"character":3}}]}],"nameField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":118,"character":3}}]}],"idField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":3}}]}],"custom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":122,"character":3}}]}],"multi":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":3}}]}],"complex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":126,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":3}}]}],"settings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":131,"character":3}}]}],"multiBinding":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":141,"character":3},"arguments":["class.multi"]}]}],"disabledBinding":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":142,"character":3},"arguments":["attr.disabled"]}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":145,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":188,"character":15},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":188,"character":22}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":188,"character":67},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":188,"character":74}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":188,"character":54},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":188,"character":103}]}],"focusOutHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":191,"character":3},"arguments":["focusout",["$event"]]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"suggestionsInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"handleInputChange":[{"__symbolic":"method"}],"handleInput":[{"__symbolic":"method"}],"handleButton":[{"__symbolic":"method"}],"setValue":[{"__symbolic":"method"}],"removeValue":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"filterSuggestion":[{"__symbolic":"method"}],"hasMatch":[{"__symbolic":"method"}],"extractNameById":[{"__symbolic":"method"}],"parseObjectById":[{"__symbolic":"method"}],"extractIdentifier":[{"__symbolic":"method"}],"extractName":[{"__symbolic":"method"}]}}}}]