2024-01-29 13:39:20 +01:00
< div class = "row multiple-auto-complete" ng-form >
2024-01-25 19:55:42 +01:00
< mat-chip-grid # chipList ngDefaultControl class = "chip-list" >
< ng-container * ngIf = "value as values;" >
2024-03-20 17:06:05 +01:00
< mat-chip-row * ngFor = "let value of values" [ disabled ] = " disabled " [ selectable ] = " selectable " [ removable ] = " removable " [ ngClass ] = " computeClass ( value ) " class = "chip-row" >
2024-01-29 13:39:20 +01:00
< ng-container * ngIf = "getSelectedItem(value) as selectedItem;" >
2024-01-25 19:55:42 +01:00
< ng-template # cellTemplate * ngIf = "_selectedValueTemplate(selectedItem)" [ ngTemplateOutlet ] = " _selectedValueTemplate ( selectedItem ) " [ ngTemplateOutletContext ] = " {
item: selectedItem
}" />
< span * ngIf = "!_selectedValueTemplate(selectedItem)" class = "chip-text" [ title ] = " _displayFn ( selectedItem ) " > {{_displayFn(selectedItem)}}< / span >
< / ng-container >
< button matChipRemove * ngIf = "!disabled && removable" ( click ) = " _removeSelectedItem ( _selectedItems . get ( stringify ( value ) ) , $ event ) " >
< mat-icon > cancel< / mat-icon >
< / button >
< / mat-chip-row >
< / ng-container >
2023-10-25 19:53:47 +02:00
< / mat-chip-grid >
2024-01-29 13:39:20 +01:00
< input matInput # autocompleteInput class = "col" [ name ] = " id " autocomplete = "nope" # autocompleteTrigger = "matAutocompleteTrigger" autocomplete = "off" [ placeholder ] = " placeholder " [ matAutocomplete ] = " autocomplete " [ value ] = " inputValue " ( keyup ) = " onKeyUp ( $ event ) " [ disabled ] = " disabled " ( focus ) = " _onInputFocus ( ) " ( blur ) = " onBlur ( $ event ) " [ matChipInputFor ] = " chipList " [ matChipInputSeparatorKeyCodes ] = " separatorKeysCodes " [ matChipInputAddOnBlur ] = " autoSelectFirstOptionOnBlur " ( matChipInputTokenEnd ) = " _addItem ( $ event ) " >
2024-01-25 19:55:42 +01:00
< mat-icon * ngIf = "!disabled" class = "align-arrow-right" matSuffix > arrow_drop_down< / mat-icon >
2019-12-11 15:51:03 +01:00
< mat-autocomplete # autocomplete = "matAutocomplete" [ displayWith ] = " _displayFn . bind ( this ) " ( optionSelected ) = " _optionSelected ( $ event ) " >
2019-01-18 18:03:45 +01:00
< span * ngIf = "_groupedItems" >
< mat-optgroup * ngFor = "let group of _groupedItems | async" [ label ] = " group . title " >
2024-01-29 13:39:20 +01:00
< mat-option * ngFor = "let item of group.items" [ value ] = " item " class = "option" [ class . two-line-mat-option ] = " _subtitleFn ( item ) & & ! _optionTemplate ( item ) & & ! _optionComponent ( item ) " >
2019-12-11 15:51:03 +01:00
<!-- <img style="vertical - align:middle;" aria - hidden src="{{state.flag}}" height="25" /> -->
2024-01-29 13:39:20 +01:00
< ng-container * ngIf = "_optionComponent(item)" >
< ng-container * ngComponentOutlet = "_optionComponent(item); inputs: { item };" / >
< / ng-container >
< ng-template # cellTemplate * ngIf = "_optionTemplate(item) && !_optionComponent(item)" [ ngTemplateOutlet ] = " _optionTemplate ( item ) " [ ngTemplateOutletContext ] = " {
2019-12-11 15:51:03 +01:00
item: item
}">< / ng-template >
2020-10-20 12:00:02 +02:00
< div * ngIf = "!_optionTemplate(item)" class = "d-flex" >
2021-11-09 13:14:19 +01:00
< div class = "title-subtitle-fn" >
< div class = "title-fn" >
< div class = "title-fn-inner" >
< span * ngIf = "!_optionTemplate(item)" > {{_titleFn(item)}}< / span >
< / div >
< / div >
< div * ngIf = "_subtitleFn(item)" class = "subtitle-fn" >
< div class = "subtitle-fn-inner" >
< small [ innerHTML ] = " _subtitleFn ( item ) " > < / small >
< / div >
< / div >
2020-10-20 12:00:02 +02:00
< / div >
< span * ngIf = "popupItemActionIcon" class = "option-icon" ( click ) = " _optionActionClick ( item , $ event ) " > < mat-icon > {{popupItemActionIcon}}< / mat-icon > < / span >
2019-12-11 15:51:03 +01:00
< / div >
2019-01-18 18:03:45 +01:00
< / mat-option >
< / mat-optgroup >
< / span >
< span * ngIf = "!_groupedItems" >
2024-01-25 19:55:42 +01:00
< div * ngIf = "_items | async as autocompleteItems; else loading" >
< ng-container * ngIf = "autocompleteItems.length; else noItems" >
< mat-option * ngFor = "let item of autocompleteItems" class = "option" [ value ] = " item " [ class . two-line-mat-option ] = " _subtitleFn ( item ) & & ! _optionTemplate ( item ) & & ! _optionComponent ( item ) " >
<!-- <img style="vertical - align:middle;" aria - hidden src="{{state.flag}}" height="25" /> -->
< ng-container * ngIf = "_optionComponent(item)" >
< ng-container * ngComponentOutlet = "_optionComponent(item); inputs: { item };" / >
< / ng-container >
< ng-template # cellTemplate * ngIf = "_optionTemplate(item) && !_optionComponent(item)" [ ngTemplateOutlet ] = " _optionTemplate ( item ) " [ ngTemplateOutletContext ] = " {
item: item
}">< / ng-template >
< div * ngIf = "!_optionTemplate(item) && !_optionComponent(item)" >
< span > {{_titleFn(item)}}< / span >
< br * ngIf = "_subtitleFn(item)" >
< small * ngIf = "_subtitleFn(item)" > {{_subtitleFn(item)}}< / small >
< span * ngIf = "popupItemActionIcon" class = "option-icon" ( click ) = " _optionActionClick ( item , $ event ) " > < mat-icon > {{popupItemActionIcon}}< / mat-icon > < / span >
< / div >
< / mat-option >
< / ng-container >
< ng-template # noItems >
< mat-option disabled = "true" > No results found!< / mat-option >
< / ng-template >
< / div >
< ng-template # loading >
< mat-option disabled = "true" > loading...< / mat-option >
< / ng-template >
2019-01-18 18:03:45 +01:00
< / span >
< / mat-autocomplete >
2024-01-25 19:55:42 +01:00
< / div >