[{"__symbolic":"module","version":3,"metadata":{"SearchableDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"searchable-dropdown","styles":["div.btn-group { width: 100%; } .dropdown-menu { left: 0px !important; } .toggle-container { width: 100%; display: inline-flex; } .toggle-container .value { flex-grow: 1; } .dropdown-toggle { box-shadow: none !important; } "],"template":"<div class=\"btn-group\" #dropdown=\"bs-dropdown\" dropdown keyboardNav=\"true\"> <!-- there is no dropdownToggle since it is handled manually see: onInputFocus and onInputBlur in ts --> <div class=\"toggle-container\"> <input *ngIf=\"dropdown.isOpen; else valueDisplayTemplate\" #filterInput class=\"value\" attr.data-path=\"{{pathString}}\" [placeholder]=\"placeholder\" [(ngModel)]=\"expression\" (keyup.enter)=\"onEnterKeyUp()\" (blur)=\"onInputBlur($event)\"> <i class=\"fa fa-caret-down\" (click)=\"showDropdown()\"></i> </div> <ul class=\"dropdown-menu\" *dropdownMenu role=\"menu\"> <li *ngFor=\"let displayValue of displayValues | filterByExpression:expression\" role=\"menuitem\"> <!-- href is needed for keyboard navigation --> <a class=\"dropdown-item\" href=\"javascript:void(0)\" (click)=\"onItemClick(displayValue)\">{{displayValue}}</a> </li> </ul> </div> <ng-template #valueDisplayTemplate> <span class=\"value\" [tabindex]=\"tabIndex\" (focus)=\"showDropdown()\">{{biDisplayValueMap.getValue(value)}}</span> </ng-template>","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"shortcutMap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"displayValueMap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pathString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tabIndex":[{"__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"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"filterInputElRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["filterInput"]}]}],"dropdown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dropdown"]}]}],"ngOnChanges":[{"__symbolic":"method"}],"onItemClick":[{"__symbolic":"method"}],"onEnterKeyUp":[{"__symbolic":"method"}],"showDropdown":[{"__symbolic":"method"}],"onInputBlur":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SearchableDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"searchable-dropdown","styles":["div.btn-group { width: 100%; } .dropdown-menu { left: 0px !important; } .toggle-container { width: 100%; display: inline-flex; } .toggle-container .value { flex-grow: 1; } .dropdown-toggle { box-shadow: none !important; } "],"template":"<div class=\"btn-group\" #dropdown=\"bs-dropdown\" dropdown keyboardNav=\"true\"> <!-- there is no dropdownToggle since it is handled manually see: onInputFocus and onInputBlur in ts --> <div class=\"toggle-container\"> <input *ngIf=\"dropdown.isOpen; else valueDisplayTemplate\" #filterInput class=\"value\" attr.data-path=\"{{pathString}}\" [placeholder]=\"placeholder\" [(ngModel)]=\"expression\" (keyup.enter)=\"onEnterKeyUp()\" (blur)=\"onInputBlur($event)\"> <i class=\"fa fa-caret-down\" (click)=\"showDropdown()\"></i> </div> <ul class=\"dropdown-menu\" *dropdownMenu role=\"menu\"> <li *ngFor=\"let displayValue of displayValues | filterByExpression:expression\" role=\"menuitem\"> <!-- href is needed for keyboard navigation --> <a class=\"dropdown-item\" href=\"javascript:void(0)\" (click)=\"onItemClick(displayValue)\">{{displayValue}}</a> </li> </ul> </div> <ng-template #valueDisplayTemplate> <span class=\"value\" [tabindex]=\"tabIndex\" (focus)=\"showDropdown()\">{{biDisplayValueMap.getValue(value)}}</span> </ng-template>","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"shortcutMap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"displayValueMap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pathString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tabIndex":[{"__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"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"filterInputElRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["filterInput"]}]}],"dropdown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dropdown"]}]}],"ngOnChanges":[{"__symbolic":"method"}],"onItemClick":[{"__symbolic":"method"}],"onEnterKeyUp":[{"__symbolic":"method"}],"showDropdown":[{"__symbolic":"method"}],"onInputBlur":[{"__symbolic":"method"}]}}}}]