ecabs-components 1.1.65 → 1.1.66

package/fesm2022/ecabs-components.mjs

@@ -8932,9 +8932,11 @@ class EcabsChipAutocompleteComponent extends EcabsElementBaseComponent {
     visibleOptions = 8.5;
     autoActiveFirstOption = true;
     noResultsText = 'No results found';
+    loadingText = 'Loading...';
     compareFn = Object.is;
     avatarTemplate;
     truncateAt = 18;
+    suppressNextTermOnRefocus = false;
     set options(value) {
         this._options.set(value);
     }
@@ -8942,14 +8944,16 @@ class EcabsChipAutocompleteComponent extends EcabsElementBaseComponent {
     termChange = new EventEmitter();
     inputControl = new FormControl('');
     normalizedTerm$ = this.inputControl.valueChanges.pipe(startWith(''), map((value) => value ?? ''), distinctUntilChanged());
+    _loading = signal(false);
     _options = signal([]);
     _values = signal([]);
+    _suppressNextTermOnRefocus = signal(false);
     _term = toSignal(this.normalizedTerm$, { initialValue: '' });
     destroyRef = inject(DestroyRef);
     overlayPanelClass = 'ecabs-chip-autocomplete-overlay-panel';
     selectedOptions = computed(() => this.setValidSelectedOptions(this._values(), this._options()));
-    filteredOptions = computed(() => this.setFilteredOptions(this._term(), this._values(), this._options()));
-    noMatchResult = computed(() => !!this._term().trim().length && !this.filteredOptions().length);
+    filteredOptions = computed(() => this._loading() ? [] : this.setFilteredOptions(this._term(), this._values(), this._options()));
+    noMatchResult = computed(() => !this._loading() && !!this._term().trim().length && !this.filteredOptions().length);
     get options() {
         return this._options();
     }
@@ -8959,9 +8963,20 @@ class EcabsChipAutocompleteComponent extends EcabsElementBaseComponent {
         this.normalizedTerm$
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((value) => {
+            if (this.suppressNextTermOnRefocus && this._suppressNextTermOnRefocus() && value === '') {
+                this._suppressNextTermOnRefocus.set(false);
+                return;
+            }
             this.termChange.emit(value);
+            this._suppressNextTermOnRefocus.set(false);
         });
     }
+    ngOnChanges(changes) {
+        const { loading } = changes ?? {};
+        if (loading) {
+            this._loading.set(this.loading);
+        }
+    }
     setOverlayHeight() {
         const panel = this.document.querySelector(`.${this.overlayPanelClass}`);
         if (!panel) {
@@ -9015,14 +9030,19 @@ class EcabsChipAutocompleteComponent extends EcabsElementBaseComponent {
     blur() {
         this.onTouched();
     }
-    onChange = () => { };
-    onTouched = () => { };
+    onChange = () => {
+    };
+    onTouched = () => {
+    };
     updateValues(values) {
         this._values.set(values);
         this.onChange(values);
         this.selectionChange.emit(values);
     }
     clearAndRefocusInput() {
+        if (this.suppressNextTermOnRefocus) {
+            this._suppressNextTermOnRefocus.set(true);
+        }
         this.inputControl.setValue('');
         this.inputRef?.nativeElement?.focus();
     }
@@ -9047,13 +9067,13 @@ class EcabsChipAutocompleteComponent extends EcabsElementBaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsChipAutocompleteComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsChipAutocompleteComponent, isStandalone: true, selector: "ecabs-chip-autocomplete", inputs: { visibleOptions: "visibleOptions", autoActiveFirstOption: "autoActiveFirstOption", noResultsText: "noResultsText", compareFn: "compareFn", avatarTemplate: "avatarTemplate", truncateAt: "truncateAt", options: "options" }, outputs: { selectionChange: "selectionChange", termChange: "termChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsChipAutocompleteComponent, isStandalone: true, selector: "ecabs-chip-autocomplete", inputs: { visibleOptions: "visibleOptions", autoActiveFirstOption: "autoActiveFirstOption", noResultsText: "noResultsText", loadingText: "loadingText", compareFn: "compareFn", avatarTemplate: "avatarTemplate", truncateAt: "truncateAt", suppressNextTermOnRefocus: "suppressNextTermOnRefocus", options: "options" }, outputs: { selectionChange: "selectionChange", termChange: "termChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => EcabsChipAutocompleteComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input matInput\r\n           [id]=\"label\"\r\n           [name]=\"label\"\r\n           class=\"form-field__input\"\r\n           [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\r\n           #inputElem\r\n           [matChipInputFor]=\"chipGrid\"\r\n           [matAutocomplete]=\"auto\"\r\n           [formControl]=\"inputControl\"\r\n           [disabled]=\"disabled\"\r\n           [placeholder]=\"placeholder\"\r\n           (blur)=\"blur()\"/>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n\r\n<mat-autocomplete #auto=\"matAutocomplete\"\r\n                  [autoActiveFirstOption]=\"autoActiveFirstOption\"\r\n                  (optionSelected)=\"setSelection($event)\"\r\n                  (opened)=\"setOverlayHeight()\"\r\n                  [class]=\"overlayPanelClass\">\r\n  <mat-option *ngFor=\"let option of filteredOptions(); trackBy: trackByFn\"\r\n              [value]=\"option\"\r\n              [disabled]=\"option.disabled ?? false\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n    {{ option.label }}\r\n  </mat-option>\r\n\r\n  <mat-option disabled *ngIf=\"noMatchResult()\">\r\n    {{ noResultsText }}\r\n  </mat-option>\r\n</mat-autocomplete>\r\n\r\n<mat-chip-grid #chipGrid\r\n               [disabled]=\"disabled\"\r\n               [class.mt-4]=\"selectedOptions().length > 0\">\r\n  <mat-chip-row *ngFor=\"let option of selectedOptions(); trackBy: trackByFn\"\r\n                [disabled]=\"disabled || option.disabled\"\r\n                (removed)=\"removeSelection(option)\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"option?.label as label\">\r\n      <span [matTooltip]=\"label\"\r\n            [matTooltipDisabled]=\"label.length <= truncateAt\">\r\n        {{ label | truncate: truncateAt }}\r\n      </span>\r\n    </ng-container>\r\n    <mat-icon matChipRemove\r\n              svgIcon=\"ph-light:x\">\r\n    </mat-icon>\r\n  </mat-chip-row>\r\n</mat-chip-grid>\r\n\r\n<ng-template #avatarContext let-option>\r\n  <ng-container *ngIf=\"avatarTemplate\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarTemplate\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: EcabsInputModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ElementWrapperModule }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "ngmodule", type: NgxPhosphorIconsLightFileModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "ngmodule", type: EcabsPipesModule }, { kind: "pipe", type: EcabsTruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElem"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input matInput\r\n           [id]=\"label\"\r\n           [name]=\"label\"\r\n           class=\"form-field__input\"\r\n           [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\r\n           #inputElem\r\n           [matChipInputFor]=\"chipGrid\"\r\n           [matAutocomplete]=\"auto\"\r\n           [formControl]=\"inputControl\"\r\n           [disabled]=\"disabled\"\r\n           [placeholder]=\"placeholder\"\r\n           (blur)=\"blur()\"/>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n\r\n<mat-autocomplete #auto=\"matAutocomplete\"\r\n                  [autoActiveFirstOption]=\"autoActiveFirstOption\"\r\n                  (optionSelected)=\"setSelection($event)\"\r\n                  (opened)=\"setOverlayHeight()\"\r\n                  [class]=\"overlayPanelClass\">\r\n  <mat-option *ngFor=\"let option of filteredOptions(); trackBy: trackByFn\"\r\n              [value]=\"option\"\r\n              [disabled]=\"option.disabled ?? false\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n    {{ option.label }}\r\n  </mat-option>\r\n\r\n  <mat-option *ngIf=\"loading\" disabled>\r\n    <div class=\"flex items-center\">\r\n      <div class=\"mr-2\">{{ loadingText }}</div>\r\n      <ecabs-loading-spinner size=\"tiny\"></ecabs-loading-spinner>\r\n    </div>\r\n  </mat-option>\r\n\r\n  <mat-option disabled *ngIf=\"noMatchResult()\">\r\n    {{ noResultsText }}\r\n  </mat-option>\r\n</mat-autocomplete>\r\n\r\n<mat-chip-grid #chipGrid\r\n               [disabled]=\"disabled\"\r\n               [class.mt-4]=\"selectedOptions().length > 0\">\r\n  <mat-chip-row *ngFor=\"let option of selectedOptions(); trackBy: trackByFn\"\r\n                [disabled]=\"disabled || option.disabled\"\r\n                (removed)=\"removeSelection(option)\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"option?.label as label\">\r\n      <span [matTooltip]=\"label\"\r\n            [matTooltipDisabled]=\"label.length <= truncateAt\">\r\n        {{ label | truncate: truncateAt }}\r\n      </span>\r\n    </ng-container>\r\n    <mat-icon matChipRemove\r\n              svgIcon=\"ph-light:x\">\r\n    </mat-icon>\r\n  </mat-chip-row>\r\n</mat-chip-grid>\r\n\r\n<ng-template #avatarContext let-option>\r\n  <ng-container *ngIf=\"avatarTemplate\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarTemplate\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: EcabsInputModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ElementWrapperModule }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "ngmodule", type: NgxPhosphorIconsLightFileModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "ngmodule", type: EcabsPipesModule }, { kind: "pipe", type: EcabsTruncatePipe, name: "truncate" }, { kind: "ngmodule", type: EcabsLoadingModule }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsChipAutocompleteComponent, decorators: [{
             type: Component,
@@ -9069,13 +9089,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         NgxPhosphorIconsLightFileModule,
                         MatTooltipModule,
                         EcabsPipesModule,
+                        EcabsLoadingModule,
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => EcabsChipAutocompleteComponent),
                             multi: true,
                         },
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input matInput\r\n           [id]=\"label\"\r\n           [name]=\"label\"\r\n           class=\"form-field__input\"\r\n           [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\r\n           #inputElem\r\n           [matChipInputFor]=\"chipGrid\"\r\n           [matAutocomplete]=\"auto\"\r\n           [formControl]=\"inputControl\"\r\n           [disabled]=\"disabled\"\r\n           [placeholder]=\"placeholder\"\r\n           (blur)=\"blur()\"/>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n\r\n<mat-autocomplete #auto=\"matAutocomplete\"\r\n                  [autoActiveFirstOption]=\"autoActiveFirstOption\"\r\n                  (optionSelected)=\"setSelection($event)\"\r\n                  (opened)=\"setOverlayHeight()\"\r\n                  [class]=\"overlayPanelClass\">\r\n  <mat-option *ngFor=\"let option of filteredOptions(); trackBy: trackByFn\"\r\n              [value]=\"option\"\r\n              [disabled]=\"option.disabled ?? false\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n    {{ option.label }}\r\n  </mat-option>\r\n\r\n  <mat-option disabled *ngIf=\"noMatchResult()\">\r\n    {{ noResultsText }}\r\n  </mat-option>\r\n</mat-autocomplete>\r\n\r\n<mat-chip-grid #chipGrid\r\n               [disabled]=\"disabled\"\r\n               [class.mt-4]=\"selectedOptions().length > 0\">\r\n  <mat-chip-row *ngFor=\"let option of selectedOptions(); trackBy: trackByFn\"\r\n                [disabled]=\"disabled || option.disabled\"\r\n                (removed)=\"removeSelection(option)\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"option?.label as label\">\r\n      <span [matTooltip]=\"label\"\r\n            [matTooltipDisabled]=\"label.length <= truncateAt\">\r\n        {{ label | truncate: truncateAt }}\r\n      </span>\r\n    </ng-container>\r\n    <mat-icon matChipRemove\r\n              svgIcon=\"ph-light:x\">\r\n    </mat-icon>\r\n  </mat-chip-row>\r\n</mat-chip-grid>\r\n\r\n<ng-template #avatarContext let-option>\r\n  <ng-container *ngIf=\"avatarTemplate\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarTemplate\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n" }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input matInput\r\n           [id]=\"label\"\r\n           [name]=\"label\"\r\n           class=\"form-field__input\"\r\n           [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\r\n           #inputElem\r\n           [matChipInputFor]=\"chipGrid\"\r\n           [matAutocomplete]=\"auto\"\r\n           [formControl]=\"inputControl\"\r\n           [disabled]=\"disabled\"\r\n           [placeholder]=\"placeholder\"\r\n           (blur)=\"blur()\"/>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n\r\n<mat-autocomplete #auto=\"matAutocomplete\"\r\n                  [autoActiveFirstOption]=\"autoActiveFirstOption\"\r\n                  (optionSelected)=\"setSelection($event)\"\r\n                  (opened)=\"setOverlayHeight()\"\r\n                  [class]=\"overlayPanelClass\">\r\n  <mat-option *ngFor=\"let option of filteredOptions(); trackBy: trackByFn\"\r\n              [value]=\"option\"\r\n              [disabled]=\"option.disabled ?? false\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n    {{ option.label }}\r\n  </mat-option>\r\n\r\n  <mat-option *ngIf=\"loading\" disabled>\r\n    <div class=\"flex items-center\">\r\n      <div class=\"mr-2\">{{ loadingText }}</div>\r\n      <ecabs-loading-spinner size=\"tiny\"></ecabs-loading-spinner>\r\n    </div>\r\n  </mat-option>\r\n\r\n  <mat-option disabled *ngIf=\"noMatchResult()\">\r\n    {{ noResultsText }}\r\n  </mat-option>\r\n</mat-autocomplete>\r\n\r\n<mat-chip-grid #chipGrid\r\n               [disabled]=\"disabled\"\r\n               [class.mt-4]=\"selectedOptions().length > 0\">\r\n  <mat-chip-row *ngFor=\"let option of selectedOptions(); trackBy: trackByFn\"\r\n                [disabled]=\"disabled || option.disabled\"\r\n                (removed)=\"removeSelection(option)\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"option?.label as label\">\r\n      <span [matTooltip]=\"label\"\r\n            [matTooltipDisabled]=\"label.length <= truncateAt\">\r\n        {{ label | truncate: truncateAt }}\r\n      </span>\r\n    </ng-container>\r\n    <mat-icon matChipRemove\r\n              svgIcon=\"ph-light:x\">\r\n    </mat-icon>\r\n  </mat-chip-row>\r\n</mat-chip-grid>\r\n\r\n<ng-template #avatarContext let-option>\r\n  <ng-container *ngIf=\"avatarTemplate\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarTemplate\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n" }]
         }], ctorParameters: function () { return [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -9088,12 +9109,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], noResultsText: [{
                 type: Input
+            }], loadingText: [{
+                type: Input
             }], compareFn: [{
                 type: Input
             }], avatarTemplate: [{
                 type: Input
             }], truncateAt: [{
                 type: Input
+            }], suppressNextTermOnRefocus: [{
+                type: Input
             }], options: [{
                 type: Input,
                 args: [{ required: true }]