2019-01-18 18:03:45 +01:00
< div class = "row multiple-auto-complete" >
2019-02-14 17:56:06 +01:00
< mat-chip-list # chipList ngDefaultControl class = "col multi-chip-list" [ disabled ] = " disabled " >
2019-01-18 18:03:45 +01:00
< mat-chip * ngFor = "let selectedItem of _chipItems()" [ disabled ] = " disabled " [ selectable ] = " selectable " [ removable ] = " removable " ( removed ) = " _removeSelectedItem ( selectedItem ) " >
{{this._displayFn(selectedItem)}}
< mat-icon matChipRemove * ngIf = "!disabled && removable" > cancel< / mat-icon >
< / mat-chip >
2019-02-14 17:56:06 +01:00
< input matInput # textInput autocomplete = "off" ( focus ) = " _onInputFocus ( ) " [ disabled ] = " disabled " [ placeholder ] = " placeholder " [ ngModel ] = " _inputValue " ( ngModelChange ) = " _inputValueChange ( $ event ) " [ matAutocomplete ] = " auto " [ matChipInputFor ] = " chipList " [ matChipInputSeparatorKeyCodes ] = " separatorKeysCodes " [ matChipInputAddOnBlur ] = " addOnBlur " ( matChipInputTokenEnd ) = " _addItem ( $ event ) " ( click ) = " _onInputClick ( $ event ) " / >
2019-01-18 18:03:45 +01:00
< / mat-chip-list >
< mat-progress-spinner mode = "indeterminate" class = "multi-loading-bar col-auto" [ class . not-loading ] = " ! loading " [ diameter ] = " 22 " > < / mat-progress-spinner >
< mat-autocomplete # auto = "matAutocomplete" [ displayWith ] = " _displayFn . bind ( this ) " ( optionSelected ) = " _optionSelected ( $ event ) " >
< span * ngIf = "_groupedItems" >
< mat-optgroup * ngFor = "let group of _groupedItems | async" [ label ] = " group . title " >
< mat-option * ngFor = "let item of group.items" [ value ] = " item " [ class . two-line-mat-option ] = " _subtitleFn ( item ) " >
< span > {{_titleFn(item)}}< / span >
< br * ngIf = "_subtitleFn(item)" >
< small * ngIf = "_subtitleFn(item)" > {{_subtitleFn(item)}}< / small >
< / mat-option >
< / mat-optgroup >
< / span >
< span * ngIf = "!_groupedItems" >
< mat-option * ngFor = "let item of _items | async" [ value ] = " item " [ class . two-line-mat-option ] = " _subtitleFn ( item ) " >
< span > {{_titleFn(item)}}< / span >
< br * ngIf = "_subtitleFn(item)" >
< small * ngIf = "_subtitleFn(item)" > {{_subtitleFn(item)}}< / small >
< / mat-option >
< / span >
< / mat-autocomplete >
< / div >