igniteui-angular 21.0.3 → 21.1.0-alpha.1

package/fesm2022/igniteui-angular-combo.mjs

@@ -6,7 +6,7 @@ import { Injectable, inject, booleanAttribute, Input, HostBinding, Component, Di
 import * as i1 from '@angular/forms';
 import { NgControl, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { IgxForOfDirective, IgxToggleDirective, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
-import { rem, IgxSelectionAPIService, getCurrentResourceStrings, ComboResourceStringsEN, SortingDirection, AutoPositionStrategy, AbsoluteScrollStrategy, cloneArray } from 'igniteui-angular/core';
+import { rem, IgxSelectionAPIService, getCurrentResourceStrings, ComboResourceStringsEN, SortingDirection, onResourceChangeHandle, AutoPositionStrategy, AbsoluteScrollStrategy, cloneArray } from 'igniteui-angular/core';
 import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
 import { IgxDropDownItemComponent, Navigate, IgxDropDownComponent, DropDownActionKey, IGX_DROPDOWN_BASE, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down';
 import { caseSensitive } from '@igniteui/material-icons-extended';
@@ -397,359 +397,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
 const IGX_COMBO_COMPONENT = /*@__PURE__*/ new InjectionToken('IgxComboComponentToken');
 let NEXT_ID = 0;
 class IgxComboBaseDirective {
-    constructor() {
-        this.elementRef = inject(ElementRef);
-        this.cdr = inject(ChangeDetectorRef);
-        this.selectionService = inject(IgxSelectionAPIService);
-        this.comboAPI = inject(IgxComboAPIService);
-        this.document = inject(DOCUMENT);
-        this._inputGroupType = inject(IGX_INPUT_GROUP_TYPE, { optional: true });
-        this._injector = inject(Injector, { optional: true });
-        this._iconService = inject(IgxIconService, { optional: true });
-        /**
-         * Defines whether the caseSensitive icon should be shown in the search input
-         *
-         * ```typescript
-         * // get
-         * let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon;
-         * ```
-         *
-         * ```html
-         * <!--set-->
-         * <igx-combo [showSearchCaseIcon]='true'></igx-combo>
-         * ```
-         */
-        this.showSearchCaseIcon = false;
-        /**
-         * Set custom overlay settings that control how the combo's list of items is displayed.
-         * Set:
-         * ```html
-         * <igx-combo [overlaySettings]="customOverlaySettings"></igx-combo>
-         * ```
-         *
-         * ```typescript
-         *  const customSettings = { positionStrategy: { settings: { target: myTarget } } };
-         *  combo.overlaySettings = customSettings;
-         * ```
-         * Get any custom overlay settings used by the combo:
-         * ```typescript
-         *  const comboOverlaySettings: OverlaySettings = myCombo.overlaySettings;
-         * ```
-         */
-        this.overlaySettings = null;
-        /**
-         * Controls whether custom values can be added to the collection
-         *
-         * ```typescript
-         * // get
-         * let comboAllowsCustomValues = this.combo.allowCustomValues;
-         * ```
-         *
-         * ```html
-         * <!--set-->
-         * <igx-combo [allowCustomValues]='true'></igx-combo>
-         * ```
-         */
-        this.allowCustomValues = false;
-        /**
-         * Determines which column in the data source is used to determine the value.
-         *
-         * ```typescript
-         * // get
-         * let myComboValueKey = this.combo.valueKey;
-         * ```
-         *
-         * ```html
-         * <!--set-->
-         * <igx-combo [valueKey]='myKey'></igx-combo>
-         * ```
-         */
-        this.valueKey = null;
-        /** @hidden @internal */
-        this.cssClass = 'igx-combo'; // Independent of display density for the time being
-        /**
-         * Disables the combo. The default is `false`.
-         * ```html
-         * <igx-combo [disabled]="'true'">
-         * ```
-         */
-        this.disabled = false;
-        /**
-         * Emitted before the dropdown is opened
-         *
-         * ```html
-         * <igx-combo opening='handleOpening($event)'></igx-combo>
-         * ```
-         */
-        this.opening = new EventEmitter();
-        /**
-         * Emitted after the dropdown is opened
-         *
-         * ```html
-         * <igx-combo (opened)='handleOpened($event)'></igx-combo>
-         * ```
-         */
-        this.opened = new EventEmitter();
-        /**
-         * Emitted before the dropdown is closed
-         *
-         * ```html
-         * <igx-combo (closing)='handleClosing($event)'></igx-combo>
-         * ```
-         */
-        this.closing = new EventEmitter();
-        /**
-         * Emitted after the dropdown is closed
-         *
-         * ```html
-         * <igx-combo (closed)='handleClosed($event)'></igx-combo>
-         * ```
-         */
-        this.closed = new EventEmitter();
-        /**
-         * Emitted when an item is being added to the data collection
-         *
-         * ```html
-         * <igx-combo (addition)='handleAdditionEvent($event)'></igx-combo>
-         * ```
-         */
-        this.addition = new EventEmitter();
-        /**
-         * Emitted when the value of the search input changes (e.g. typing, pasting, clear, etc.)
-         *
-         * ```html
-         * <igx-combo (searchInputUpdate)='handleSearchInputEvent($event)'></igx-combo>
-         * ```
-         */
-        this.searchInputUpdate = new EventEmitter();
-        /**
-         * Emitted when new chunk of data is loaded from the virtualization
-         *
-         * ```html
-         * <igx-combo (dataPreLoad)='handleDataPreloadEvent($event)'></igx-combo>
-         * ```
-         */
-        this.dataPreLoad = new EventEmitter();
-        /**
-         * The custom template, if any, that should be used when rendering ITEMS in the combo list
-         *
-         * ```typescript
-         * // Set in typescript
-         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-         * myComponent.combo.itemTemplate = myCustomTemplate;
-         * ```
-         * ```html
-         * <!-- Set in markup -->
-         *  <igx-combo #combo>
-         *      ...
-         *      <ng-template igxComboItem let-item let-key="valueKey">
-         *          <div class="custom-item">
-         *              <div class="custom-item__name">{{ item[key] }}</div>
-         *              <div class="custom-item__cost">{{ item.cost }}</div>
-         *          </div>
-         *      </ng-template>
-         *  </igx-combo>
-         * ```
-         */
-        this.itemTemplate = null;
-        /**
-         * The custom template, if any, that should be used when rendering the HEADER for the combo items list
-         *
-         * ```typescript
-         * // Set in typescript
-         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-         * myComponent.combo.headerTemplate = myCustomTemplate;
-         * ```
-         * ```html
-         * <!-- Set in markup -->
-         *  <igx-combo #combo>
-         *      ...
-         *      <ng-template igxComboHeader>
-         *          <div class="combo__header">
-         *              This is a custom header
-         *          </div>
-         *      </ng-template>
-         *  </igx-combo>
-         * ```
-         */
-        this.headerTemplate = null;
-        /**
-         * The custom template, if any, that should be used when rendering the FOOTER for the combo items list
-         *
-         * ```typescript
-         * // Set in typescript
-         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-         * myComponent.combo.footerTemplate = myCustomTemplate;
-         * ```
-         * ```html
-         * <!-- Set in markup -->
-         *  <igx-combo #combo>
-         *      ...
-         *      <ng-template igxComboFooter>
-         *          <div class="combo__footer">
-         *              This is a custom footer
-         *          </div>
-         *      </ng-template>
-         *  </igx-combo>
-         * ```
-         */
-        this.footerTemplate = null;
-        /**
-         * The custom template, if any, that should be used when rendering HEADER ITEMS for groups in the combo list
-         *
-         * ```typescript
-         * // Set in typescript
-         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-         * myComponent.combo.headerItemTemplate = myCustomTemplate;
-         * ```
-         * ```html
-         * <!-- Set in markup -->
-         *  <igx-combo #combo>
-         *      ...
-         *      <ng-template igxComboHeaderItem let-item let-key="groupKey">
-         *          <div class="custom-item--group">Group header for {{ item[key] }}</div>
-         *      </ng-template>
-         *  </igx-combo>
-         * ```
-         */
-        this.headerItemTemplate = null;
-        /**
-         * The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down
-         *
-         * ```typescript
-         * // Set in typescript
-         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-         * myComponent.combo.addItemTemplate = myCustomTemplate;
-         * ```
-         * ```html
-         * <!-- Set in markup -->
-         *  <igx-combo #combo>
-         *      ...
-         *      <ng-template igxComboAddItem>
-         *          <button type="button" igxButton="contained" class="combo__add-button">
-         *              Click to add item
-         *          </button>
-         *      </ng-template>
-         *  </igx-combo>
-         * ```
-         */
-        this.addItemTemplate = null;
-        /**
-         * The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down
-         *
-         * ```typescript
-         * // Set in typescript
-         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-         * myComponent.combo.emptyTemplate = myCustomTemplate;
-         * ```
-         * ```html
-         * <!-- Set in markup -->
-         *  <igx-combo #combo>
-         *      ...
-         *      <ng-template igxComboEmpty>
-         *          <div class="combo--empty">
-         *              There are no items to display
-         *          </div>
-         *      </ng-template>
-         *  </igx-combo>
-         * ```
-         */
-        this.emptyTemplate = null;
-        /**
-         * The custom template, if any, that should be used when rendering the combo TOGGLE(open/close) button
-         *
-         * ```typescript
-         * // Set in typescript
-         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-         * myComponent.combo.toggleIconTemplate = myCustomTemplate;
-         * ```
-         * ```html
-         * <!-- Set in markup -->
-         *  <igx-combo #combo>
-         *      ...
-         *      <ng-template igxComboToggleIcon let-collapsed>
-         *          <igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon>
-         *      </ng-template>
-         *  </igx-combo>
-         * ```
-         */
-        this.toggleIconTemplate = null;
-        /**
-         * The custom template, if any, that should be used when rendering the combo CLEAR button
-         *
-         * ```typescript
-         * // Set in typescript
-         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-         * myComponent.combo.clearIconTemplate = myCustomTemplate;
-         * ```
-         * ```html
-         * <!-- Set in markup -->
-         *  <igx-combo #combo>
-         *      ...
-         *      <ng-template igxComboClearIcon>
-         *          <igx-icon>clear</igx-icon>
-         *      </ng-template>
-         *  </igx-combo>
-         * ```
-         */
-        this.clearIconTemplate = null;
-        /** @hidden @internal */
-        this.searchInput = null;
-        this.dropdownContainer = null;
-        /** @hidden @internal */
-        this.customValueFlag = true;
-        /** @hidden @internal */
-        this.filterValue = '';
-        /** @hidden @internal */
-        this.defaultFallbackGroup = 'Other';
-        /** @hidden @internal */
-        this.activeDescendant = '';
-        this.containerSize = undefined;
-        this.itemSize = undefined;
-        this._data = [];
-        this._value = [];
-        this._displayValue = '';
-        this._groupKey = '';
-        this._searchValue = '';
-        this._filteredData = [];
-        this._remoteSelection = {};
-        this._resourceStrings = getCurrentResourceStrings(ComboResourceStringsEN);
-        this._valid = IgxInputState.INITIAL;
-        this.ngControl = null;
-        this.destroy$ = new Subject();
-        this._onTouchedCallback = noop;
-        this._onChangeCallback = noop;
-        this.compareCollator = new Intl.Collator();
-        this._id = `igx-combo-${NEXT_ID++}`;
-        this._disableFiltering = false;
-        this._type = null;
-        this._dataType = '';
-        this._itemHeight = undefined;
-        this._itemsMaxHeight = null;
-        this._groupSortingDirection = SortingDirection.Asc;
-        this._defaultFilteringOptions = { caseSensitive: false };
-        this.itemsInContainer = 10;
-        this.onStatusChanged = () => {
-            if (this.ngControl && this.isTouchedOrDirty && !this.disabled) {
-                if (this.hasValidators && (!this.collapsed || this.inputGroup.isFocused)) {
-                    this.valid = this.ngControl.valid ? IgxInputState.VALID : IgxInputState.INVALID;
-                }
-                else {
-                    this.valid = this.ngControl.valid ? IgxInputState.INITIAL : IgxInputState.INVALID;
-                }
-            }
-            else {
-                // B.P. 18 May 2021: IgxDatePicker does not reset its state upon resetForm #9526
-                this.valid = IgxInputState.INITIAL;
-            }
-            this.manageRequiredAsterisk();
-        };
-        this.findMatch = (element) => {
-            const value = this.displayKey ? element[this.displayKey] : element;
-            const searchValue = this.searchValue || this.comboInput?.value;
-            return value?.toString().trim().toLowerCase() === searchValue.trim().toLowerCase();
-        };
-    }
     /**
     * Enables/disables filtering in the list. The default is `false`.
     */
@@ -935,7 +582,7 @@ class IgxComboBaseDirective {
      * By default it uses EN resources.
      */
     get resourceStrings() {
-        return this._resourceStrings;
+        return this._resourceStrings || this._defaultResourceStrings;
     }
     set resourceStrings(value) {
         this._resourceStrings = Object.assign({}, this._resourceStrings, value);
@@ -1090,6 +737,363 @@ class IgxComboBaseDirective {
     set filteringOptions(value) {
         this._filteringOptions = value;
     }
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.cdr = inject(ChangeDetectorRef);
+        this.selectionService = inject(IgxSelectionAPIService);
+        this.comboAPI = inject(IgxComboAPIService);
+        this.document = inject(DOCUMENT);
+        this._inputGroupType = inject(IGX_INPUT_GROUP_TYPE, { optional: true });
+        this._injector = inject(Injector, { optional: true });
+        this._iconService = inject(IgxIconService, { optional: true });
+        /**
+         * Defines whether the caseSensitive icon should be shown in the search input
+         *
+         * ```typescript
+         * // get
+         * let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon;
+         * ```
+         *
+         * ```html
+         * <!--set-->
+         * <igx-combo [showSearchCaseIcon]='true'></igx-combo>
+         * ```
+         */
+        this.showSearchCaseIcon = false;
+        /**
+         * Set custom overlay settings that control how the combo's list of items is displayed.
+         * Set:
+         * ```html
+         * <igx-combo [overlaySettings]="customOverlaySettings"></igx-combo>
+         * ```
+         *
+         * ```typescript
+         *  const customSettings = { positionStrategy: { settings: { target: myTarget } } };
+         *  combo.overlaySettings = customSettings;
+         * ```
+         * Get any custom overlay settings used by the combo:
+         * ```typescript
+         *  const comboOverlaySettings: OverlaySettings = myCombo.overlaySettings;
+         * ```
+         */
+        this.overlaySettings = null;
+        /**
+         * Controls whether custom values can be added to the collection
+         *
+         * ```typescript
+         * // get
+         * let comboAllowsCustomValues = this.combo.allowCustomValues;
+         * ```
+         *
+         * ```html
+         * <!--set-->
+         * <igx-combo [allowCustomValues]='true'></igx-combo>
+         * ```
+         */
+        this.allowCustomValues = false;
+        /**
+         * Determines which column in the data source is used to determine the value.
+         *
+         * ```typescript
+         * // get
+         * let myComboValueKey = this.combo.valueKey;
+         * ```
+         *
+         * ```html
+         * <!--set-->
+         * <igx-combo [valueKey]='myKey'></igx-combo>
+         * ```
+         */
+        this.valueKey = null;
+        /** @hidden @internal */
+        this.cssClass = 'igx-combo'; // Independent of display density for the time being
+        /**
+         * Disables the combo. The default is `false`.
+         * ```html
+         * <igx-combo [disabled]="'true'">
+         * ```
+         */
+        this.disabled = false;
+        /**
+         * Emitted before the dropdown is opened
+         *
+         * ```html
+         * <igx-combo opening='handleOpening($event)'></igx-combo>
+         * ```
+         */
+        this.opening = new EventEmitter();
+        /**
+         * Emitted after the dropdown is opened
+         *
+         * ```html
+         * <igx-combo (opened)='handleOpened($event)'></igx-combo>
+         * ```
+         */
+        this.opened = new EventEmitter();
+        /**
+         * Emitted before the dropdown is closed
+         *
+         * ```html
+         * <igx-combo (closing)='handleClosing($event)'></igx-combo>
+         * ```
+         */
+        this.closing = new EventEmitter();
+        /**
+         * Emitted after the dropdown is closed
+         *
+         * ```html
+         * <igx-combo (closed)='handleClosed($event)'></igx-combo>
+         * ```
+         */
+        this.closed = new EventEmitter();
+        /**
+         * Emitted when an item is being added to the data collection
+         *
+         * ```html
+         * <igx-combo (addition)='handleAdditionEvent($event)'></igx-combo>
+         * ```
+         */
+        this.addition = new EventEmitter();
+        /**
+         * Emitted when the value of the search input changes (e.g. typing, pasting, clear, etc.)
+         *
+         * ```html
+         * <igx-combo (searchInputUpdate)='handleSearchInputEvent($event)'></igx-combo>
+         * ```
+         */
+        this.searchInputUpdate = new EventEmitter();
+        /**
+         * Emitted when new chunk of data is loaded from the virtualization
+         *
+         * ```html
+         * <igx-combo (dataPreLoad)='handleDataPreloadEvent($event)'></igx-combo>
+         * ```
+         */
+        this.dataPreLoad = new EventEmitter();
+        /**
+         * The custom template, if any, that should be used when rendering ITEMS in the combo list
+         *
+         * ```typescript
+         * // Set in typescript
+         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
+         * myComponent.combo.itemTemplate = myCustomTemplate;
+         * ```
+         * ```html
+         * <!-- Set in markup -->
+         *  <igx-combo #combo>
+         *      ...
+         *      <ng-template igxComboItem let-item let-key="valueKey">
+         *          <div class="custom-item">
+         *              <div class="custom-item__name">{{ item[key] }}</div>
+         *              <div class="custom-item__cost">{{ item.cost }}</div>
+         *          </div>
+         *      </ng-template>
+         *  </igx-combo>
+         * ```
+         */
+        this.itemTemplate = null;
+        /**
+         * The custom template, if any, that should be used when rendering the HEADER for the combo items list
+         *
+         * ```typescript
+         * // Set in typescript
+         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
+         * myComponent.combo.headerTemplate = myCustomTemplate;
+         * ```
+         * ```html
+         * <!-- Set in markup -->
+         *  <igx-combo #combo>
+         *      ...
+         *      <ng-template igxComboHeader>
+         *          <div class="combo__header">
+         *              This is a custom header
+         *          </div>
+         *      </ng-template>
+         *  </igx-combo>
+         * ```
+         */
+        this.headerTemplate = null;
+        /**
+         * The custom template, if any, that should be used when rendering the FOOTER for the combo items list
+         *
+         * ```typescript
+         * // Set in typescript
+         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
+         * myComponent.combo.footerTemplate = myCustomTemplate;
+         * ```
+         * ```html
+         * <!-- Set in markup -->
+         *  <igx-combo #combo>
+         *      ...
+         *      <ng-template igxComboFooter>
+         *          <div class="combo__footer">
+         *              This is a custom footer
+         *          </div>
+         *      </ng-template>
+         *  </igx-combo>
+         * ```
+         */
+        this.footerTemplate = null;
+        /**
+         * The custom template, if any, that should be used when rendering HEADER ITEMS for groups in the combo list
+         *
+         * ```typescript
+         * // Set in typescript
+         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
+         * myComponent.combo.headerItemTemplate = myCustomTemplate;
+         * ```
+         * ```html
+         * <!-- Set in markup -->
+         *  <igx-combo #combo>
+         *      ...
+         *      <ng-template igxComboHeaderItem let-item let-key="groupKey">
+         *          <div class="custom-item--group">Group header for {{ item[key] }}</div>
+         *      </ng-template>
+         *  </igx-combo>
+         * ```
+         */
+        this.headerItemTemplate = null;
+        /**
+         * The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down
+         *
+         * ```typescript
+         * // Set in typescript
+         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
+         * myComponent.combo.addItemTemplate = myCustomTemplate;
+         * ```
+         * ```html
+         * <!-- Set in markup -->
+         *  <igx-combo #combo>
+         *      ...
+         *      <ng-template igxComboAddItem>
+         *          <button type="button" igxButton="contained" class="combo__add-button">
+         *              Click to add item
+         *          </button>
+         *      </ng-template>
+         *  </igx-combo>
+         * ```
+         */
+        this.addItemTemplate = null;
+        /**
+         * The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down
+         *
+         * ```typescript
+         * // Set in typescript
+         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
+         * myComponent.combo.emptyTemplate = myCustomTemplate;
+         * ```
+         * ```html
+         * <!-- Set in markup -->
+         *  <igx-combo #combo>
+         *      ...
+         *      <ng-template igxComboEmpty>
+         *          <div class="combo--empty">
+         *              There are no items to display
+         *          </div>
+         *      </ng-template>
+         *  </igx-combo>
+         * ```
+         */
+        this.emptyTemplate = null;
+        /**
+         * The custom template, if any, that should be used when rendering the combo TOGGLE(open/close) button
+         *
+         * ```typescript
+         * // Set in typescript
+         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
+         * myComponent.combo.toggleIconTemplate = myCustomTemplate;
+         * ```
+         * ```html
+         * <!-- Set in markup -->
+         *  <igx-combo #combo>
+         *      ...
+         *      <ng-template igxComboToggleIcon let-collapsed>
+         *          <igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon>
+         *      </ng-template>
+         *  </igx-combo>
+         * ```
+         */
+        this.toggleIconTemplate = null;
+        /**
+         * The custom template, if any, that should be used when rendering the combo CLEAR button
+         *
+         * ```typescript
+         * // Set in typescript
+         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
+         * myComponent.combo.clearIconTemplate = myCustomTemplate;
+         * ```
+         * ```html
+         * <!-- Set in markup -->
+         *  <igx-combo #combo>
+         *      ...
+         *      <ng-template igxComboClearIcon>
+         *          <igx-icon>clear</igx-icon>
+         *      </ng-template>
+         *  </igx-combo>
+         * ```
+         */
+        this.clearIconTemplate = null;
+        /** @hidden @internal */
+        this.searchInput = null;
+        this.dropdownContainer = null;
+        /** @hidden @internal */
+        this.customValueFlag = true;
+        /** @hidden @internal */
+        this.filterValue = '';
+        /** @hidden @internal */
+        this.defaultFallbackGroup = 'Other';
+        /** @hidden @internal */
+        this.activeDescendant = '';
+        this.containerSize = undefined;
+        this.itemSize = undefined;
+        this._data = [];
+        this._value = [];
+        this._displayValue = '';
+        this._groupKey = '';
+        this._searchValue = '';
+        this._filteredData = [];
+        this._remoteSelection = {};
+        this._resourceStrings = null;
+        this._defaultResourceStrings = getCurrentResourceStrings(ComboResourceStringsEN);
+        this._valid = IgxInputState.INITIAL;
+        this.ngControl = null;
+        this.destroy$ = new Subject();
+        this._onTouchedCallback = noop;
+        this._onChangeCallback = noop;
+        this.compareCollator = new Intl.Collator();
+        this._id = `igx-combo-${NEXT_ID++}`;
+        this._disableFiltering = false;
+        this._type = null;
+        this._dataType = '';
+        this._itemHeight = undefined;
+        this._itemsMaxHeight = null;
+        this._groupSortingDirection = SortingDirection.Asc;
+        this._defaultFilteringOptions = { caseSensitive: false };
+        this.itemsInContainer = 10;
+        this.onStatusChanged = () => {
+            if (this.ngControl && this.isTouchedOrDirty && !this.disabled) {
+                if (this.hasValidators && (!this.collapsed || this.inputGroup.isFocused)) {
+                    this.valid = this.ngControl.valid ? IgxInputState.VALID : IgxInputState.INVALID;
+                }
+                else {
+                    this.valid = this.ngControl.valid ? IgxInputState.INITIAL : IgxInputState.INVALID;
+                }
+            }
+            else {
+                // B.P. 18 May 2021: IgxDatePicker does not reset its state upon resetForm #9526
+                this.valid = IgxInputState.INITIAL;
+            }
+            this.manageRequiredAsterisk();
+        };
+        this.findMatch = (element) => {
+            const value = this.displayKey ? element[this.displayKey] : element;
+            const searchValue = this.searchValue || this.comboInput?.value;
+            return value?.toString().trim().toLowerCase() === searchValue.trim().toLowerCase();
+        };
+        onResourceChangeHandle(this.destroy$, () => {
+            this._defaultResourceStrings = getCurrentResourceStrings(ComboResourceStringsEN, false);
+        }, this);
+    }
     ngAfterViewChecked() {
         const targetElement = this.inputGroup.element.nativeElement.querySelector('.igx-input-group__bundle');
         this._overlaySettings = {
@@ -1451,7 +1455,7 @@ class IgxComboBaseDirective {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboBaseDirective, decorators: [{
             type: Directive
-        }], propDecorators: { showSearchCaseIcon: [{
+        }], ctorParameters: () => [], propDecorators: { showSearchCaseIcon: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], disableFiltering: [{