igniteui-webcomponents 7.3.0-beta.0 → 7.3.0-beta.1

package/components/combo/combo-item.d.ts

@@ -1,9 +1,8 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { LitElement } from 'lit';
 export default class IgcComboItemComponent extends LitElement {
     static readonly tagName = "igc-combo-item";
     static styles: import("lit").CSSResult[];
     static register(): void;
-    private readonly _internals;
     index: number;
     /**
      * Determines whether the item is selected.
@@ -24,7 +23,6 @@ export default class IgcComboItemComponent extends LitElement {
      */
     hideCheckbox: boolean;
     constructor();
-    protected willUpdate(props: PropertyValues<this>): void;
     private _renderCheckbox;
     protected render(): import("lit-html").TemplateResult<1>;
 }

package/components/combo/combo-item.js

@@ -22,22 +22,15 @@ export default class IgcComboItemComponent extends LitElement {
     }
     constructor() {
         super();
-        this._internals = addInternalsController(this, {
-            initialARIA: {
-                role: 'option',
-                ariaSelected: 'false',
-            },
-            reflectRole: true,
-        });
         this.selected = false;
         this.active = false;
         this.hideCheckbox = false;
         addThemingController(this, all);
-    }
-    willUpdate(props) {
-        if (props.has('selected')) {
-            this._internals.setARIA({ ariaSelected: this.selected.toString() });
-        }
+        addInternalsController(this, {
+            initialARIA: { role: 'option' },
+            reflectRole: true,
+            aria: () => ({ ariaSelected: `${this.selected}` }),
+        });
     }
     _renderCheckbox() {
         return html `

package/components/combo/combo-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"combo-item.js","sourceRoot":"","sources":["../../../src/components/combo/combo-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,oBAAoB,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,GAAG,EAAE,MAAM,4BAA4B,CAAC;AACjD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4DAA4D,CAAC;AAC9F,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAGzD,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,UAAU;aACpC,YAAO,GAAG,gBAAgB,AAAnB,CAAoB;aAC3B,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,qBAAqB,EAAE,oBAAoB,CAAC,CAAC;IACjE,CAAC;IAqCD;QACE,KAAK,EAAE,CAAC;QApCO,eAAU,GAAG,sBAAsB,CAAC,IAAI,EAAE;YACzD,WAAW,EAAE;gBACX,IAAI,EAAE,QAAQ;gBACd,YAAY,EAAE,OAAO;aACtB;YACD,WAAW,EAAE,IAAI;SAClB,CAAC,CAAC;QAWI,aAAQ,GAAG,KAAK,CAAC;QAQjB,WAAM,GAAG,KAAK,CAAC;QAQf,iBAAY,GAAG,KAAK,CAAC;QAI1B,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,UAAU,CAAC,KAA2B;QACvD,IAAI,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QACtE,CAAC;IACH,CAAC;IAEO,eAAe;QACrB,OAAO,IAAI,CAAA;;;mBAGI,IAAI;qBACF,IAAI,CAAC,QAAQ;;;;KAI7B,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;QACP,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;;;;KAI9D,CAAC;IACJ,CAAC;;AAxDM;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;oDACT;AAQf;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACnB;AAQjB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDACrB;AAQf;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;2DAC5B","sourcesContent":["import { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { addInternalsController } from '#internals/controllers/internals.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcCheckboxComponent from '../checkbox/checkbox.js';\nimport { all } from '../dropdown/themes/item.js';\nimport { styles as shared } from '../dropdown/themes/shared/item/dropdown-item.common.css.js';\nimport { styles } from './themes/combo-item.base.css.js';\n\n/* blazorSuppress */\nexport default class IgcComboItemComponent extends LitElement {\n  public static readonly tagName = 'igc-combo-item';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcComboItemComponent, IgcCheckboxComponent);\n  }\n\n  private readonly _internals = addInternalsController(this, {\n    initialARIA: {\n      role: 'option',\n      ariaSelected: 'false',\n    },\n    reflectRole: true,\n  });\n\n  @property({ attribute: false })\n  public index!: number;\n\n  /**\n   * Determines whether the item is selected.\n   * @attr selected\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public selected = false;\n\n  /**\n   * Determines whether the item is active.\n   * @attr active\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public active = false;\n\n  /**\n   * Determines whether the item is active.\n   * @attr hide-checkbox\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'hide-checkbox' })\n  public hideCheckbox = false;\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override willUpdate(props: PropertyValues<this>): void {\n    if (props.has('selected')) {\n      this._internals.setARIA({ ariaSelected: this.selected.toString() });\n    }\n  }\n\n  private _renderCheckbox() {\n    return html`\n      <section part=\"prefix\">\n        <igc-checkbox\n          .inert=${true}\n          ?checked=${this.selected}\n          exportparts=\"control: checkbox, indicator: checkbox-indicator, checked\"\n        ></igc-checkbox>\n      </section>\n    `;\n  }\n\n  protected override render() {\n    return html`\n      ${cache(this.hideCheckbox ? nothing : this._renderCheckbox())}\n      <section id=\"content\" part=\"content\">\n        <slot></slot>\n      </section>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-combo-item': IgcComboItemComponent;\n  }\n}\n"]}
+{"version":3,"file":"combo-item.js","sourceRoot":"","sources":["../../../src/components/combo/combo-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,oBAAoB,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,GAAG,EAAE,MAAM,4BAA4B,CAAC;AACjD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4DAA4D,CAAC;AAC9F,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAGzD,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,UAAU;aACpC,YAAO,GAAG,gBAAgB,AAAnB,CAAoB;aAC3B,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,qBAAqB,EAAE,oBAAoB,CAAC,CAAC;IACjE,CAAC;IA6BD;QACE,KAAK,EAAE,CAAC;QAnBH,aAAQ,GAAG,KAAK,CAAC;QAQjB,WAAM,GAAG,KAAK,CAAC;QAQf,iBAAY,GAAG,KAAK,CAAC;QAI1B,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAEhC,sBAAsB,CAAC,IAAI,EAAE;YAC3B,WAAW,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC/B,WAAW,EAAE,IAAI;YACjB,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;SACnD,CAAC,CAAC;IACL,CAAC;IAEO,eAAe;QACrB,OAAO,IAAI,CAAA;;;mBAGI,IAAI;qBACF,IAAI,CAAC,QAAQ;;;;KAI7B,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;QACP,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;;;;KAI9D,CAAC;IACJ,CAAC;;AAxDM;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;oDACT;AAQf;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACnB;AAQjB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDACrB;AAQf;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;2DAC5B","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { addInternalsController } from '#internals/controllers/internals.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcCheckboxComponent from '../checkbox/checkbox.js';\nimport { all } from '../dropdown/themes/item.js';\nimport { styles as shared } from '../dropdown/themes/shared/item/dropdown-item.common.css.js';\nimport { styles } from './themes/combo-item.base.css.js';\n\n/* blazorSuppress */\nexport default class IgcComboItemComponent extends LitElement {\n  public static readonly tagName = 'igc-combo-item';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcComboItemComponent, IgcCheckboxComponent);\n  }\n\n  @property({ attribute: false })\n  public index!: number;\n\n  /**\n   * Determines whether the item is selected.\n   * @attr selected\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public selected = false;\n\n  /**\n   * Determines whether the item is active.\n   * @attr active\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public active = false;\n\n  /**\n   * Determines whether the item is active.\n   * @attr hide-checkbox\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'hide-checkbox' })\n  public hideCheckbox = false;\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n\n    addInternalsController(this, {\n      initialARIA: { role: 'option' },\n      reflectRole: true,\n      aria: () => ({ ariaSelected: `${this.selected}` }),\n    });\n  }\n\n  private _renderCheckbox() {\n    return html`\n      <section part=\"prefix\">\n        <igc-checkbox\n          .inert=${true}\n          ?checked=${this.selected}\n          exportparts=\"control: checkbox, indicator: checkbox-indicator, checked\"\n        ></igc-checkbox>\n      </section>\n    `;\n  }\n\n  protected override render() {\n    return html`\n      ${cache(this.hideCheckbox ? nothing : this._renderCheckbox())}\n      <section id=\"content\" part=\"content\">\n        <slot></slot>\n      </section>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-combo-item': IgcComboItemComponent;\n  }\n}\n"]}

package/components/combo/combo.d.ts

@@ -4,7 +4,7 @@ import { IgcBaseComboBoxComponent } from '#internals/mixins/combo-box.js';
 import type { AbstractConstructor } from '#internals/mixins/constructor.js';
 import type { Validator } from '#internals/validators.js';
 import type { ComboItemTemplate, ComboRenderFunction, ComboValue, FilteringOptions, GroupingDirection, IgcComboComponentEventMap, Item, Keys } from './types.js';
-declare const IgcComboComponent_base: import("#internals/mixins/constructor.js").Constructor<import("../../internals/mixins/forms/types.js").FormRequiredInterface & import("../../internals/mixins/forms/types.js").FormAssociatedElementInterface> & import("#internals/mixins/constructor.js").Constructor<import("#internals/mixins/event-emitter.js").EventEmitterInterface<IgcComboComponentEventMap>> & AbstractConstructor<IgcBaseComboBoxComponent>;
+declare const IgcComboComponent_base: AbstractConstructor<import("#internals/mixins/i18n.js").I18nInterface<IComboResourceStrings, Required<IComboResourceStrings>>> & import("#internals/mixins/constructor.js").Constructor<import("../../internals/mixins/forms/types.js").FormRequiredInterface & import("../../internals/mixins/forms/types.js").FormAssociatedElementInterface> & import("#internals/mixins/constructor.js").Constructor<import("#internals/mixins/event-emitter.js").EventEmitterInterface<IgcComboComponentEventMap>> & AbstractConstructor<IgcBaseComboBoxComponent>;
 /**
  * The Combo component is similar to the Select component in that it provides a list of options from which the user can make a selection.
  * In contrast to the Select component, the Combo component displays all options in a virtualized list of items,
@@ -62,7 +62,6 @@ export default class IgcComboComponent<T extends object = any> extends IgcComboC
     protected get __validators(): Validator<IgcComboComponent<T>>[];
     private readonly _slots;
     protected readonly _rootClickController: import("#internals/controllers/root-click.js").RootClickController;
-    protected readonly _i18nController: import("#internals/i18n/i18n-controller.js").I18nController<IComboResourceStrings>;
     protected readonly _formValue: import("#internals/mixins/forms/form-value.js").FormValue<ComboValue<T>[]>;
     /** The primary input of the combo component. */
     private readonly _inputRef;
@@ -73,14 +72,10 @@ export default class IgcComboComponent<T extends object = any> extends IgcComboC
     private readonly _listRef;
     private readonly _state;
     private readonly _navigation;
-    private _data;
     private _index?;
     private _indexSize;
-    private _valueKey?;
     private _displayKey?;
     private _placeholderSearch?;
-    private _disableFiltering;
-    private _singleSelect;
     private _selected;
     private _filteringOptions;
     private set _activeIndex(value);
@@ -97,8 +92,7 @@ export default class IgcComboComponent<T extends object = any> extends IgcComboC
     private get _activeDescendant();
     private get _mainAriaLabel();
     /** The data source used to generate the list of options. */
-    set data(value: T[]);
-    get data(): T[];
+    data: T[];
     /**
      * Whether the control has an outlined appearance.
      * @attr outlined
@@ -110,8 +104,7 @@ export default class IgcComboComponent<T extends object = any> extends IgcComboC
      * @attr single-select
      * @default false
      */
-    set singleSelect(value: boolean);
-    get singleSelect(): boolean;
+    singleSelect: boolean;
     /**
      * Whether the control should receive focus automatically.
      * @attr autofocus
@@ -124,7 +117,8 @@ export default class IgcComboComponent<T extends object = any> extends IgcComboC
      */
     autofocusList: boolean;
     /**
-     * Gets/Sets the locale used for getting language, affecting resource strings.
+     * The locale used to resolve the component's resource strings.
+     * Falls back to the global locale when not set.
      * @attr locale
      */
     set locale(value: string);
@@ -145,17 +139,11 @@ export default class IgcComboComponent<T extends object = any> extends IgcComboC
      */
     set placeholderSearch(value: string | undefined);
     get placeholderSearch(): string;
-    /**
-     * The resource strings for localization.
-     */
-    set resourceStrings(value: IComboResourceStrings);
-    get resourceStrings(): IComboResourceStrings;
     /**
      * The key in the data source used when selecting items.
      * @attr value-key
      */
-    set valueKey(value: Keys<T> | undefined);
-    get valueKey(): Keys<T> | undefined;
+    valueKey?: Keys<T>;
     /**
      * The key in the data source used to display items in the list.
      * @attr display-key
@@ -191,8 +179,7 @@ export default class IgcComboComponent<T extends object = any> extends IgcComboC
      * @attr disable-filtering
      * @default false
      */
-    set disableFiltering(value: boolean);
-    get disableFiltering(): boolean;
+    disableFiltering: boolean;
     /**
      * Hides the clear button.
      * @attr disable-clear

package/components/combo/combo.js

@@ -15,14 +15,16 @@ import { addRootClickController } from '#internals/controllers/root-click.js';
 import { addSlotController, setSlots } from '#internals/controllers/slot.js';
 import { blazorAdditionalDependencies } from '#internals/decorators/blazorAdditionalDependencies.js';
 import { blazorIndirectRender } from '#internals/decorators/blazorIndirectRender.js';
+import { coercedProperty } from '#internals/decorators/coerced-property.js';
 import { shadowOptions } from '#internals/decorators/shadow-options.js';
 import { registerComponent } from '#internals/definitions/register.js';
-import { addI18nController } from '#internals/i18n/i18n-controller.js';
 import { IgcBaseComboBoxComponent } from '#internals/mixins/combo-box.js';
 import { EventEmitterMixin } from '#internals/mixins/event-emitter.js';
 import { FormAssociatedRequiredMixin } from '#internals/mixins/forms/associated-required.js';
 import { createFormValueState } from '#internals/mixins/forms/form-value.js';
+import { I18nMixin } from '#internals/mixins/i18n.js';
 import { partMap } from '#internals/part-map.js';
+import { renderSlottedIcon } from '#internals/templates/slotted-icon.js';
 import { asArray, firstOf, isEmpty } from '#internals/utils/arrays.js';
 import { addSafeEventListener, getElementFromPath, stopPropagation, } from '#internals/utils/events.js';
 import { bindIf } from '#internals/utils/lit.js';
@@ -41,7 +43,10 @@ import { styles as shared } from './themes/shared/combo.common.css.js';
 import { all } from './themes/themes.js';
 import { comboValidators } from './validators.js';
 const SLOTS = setSlots('prefix', 'suffix', 'header', 'footer', 'empty', 'helper-text', 'toggle-icon', 'clear-icon', 'value-missing', 'custom-error', 'invalid');
-let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMixin(EventEmitterMixin(IgcBaseComboBoxComponent)) {
+const i18n = {
+    defaultEN: ComboResourceStringsEN,
+};
+let IgcComboComponent = class IgcComboComponent extends I18nMixin(FormAssociatedRequiredMixin(EventEmitterMixin(IgcBaseComboBoxComponent)), i18n) {
     static { IgcComboComponent_1 = this; }
     static { this.tagName = 'igc-combo'; }
     static { this.styles = [styles, shared]; }
@@ -76,55 +81,19 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
             ? this.resourceStrings.combo_aria_label_no_options
             : this.resourceStrings.combo_aria_label_options;
     }
-    set data(value) {
-        this._data = asArray(value);
-        this._index = undefined;
-    }
-    get data() {
-        return this._data;
-    }
-    set singleSelect(value) {
-        this._singleSelect = Boolean(value);
-        this._syncSelectionFromValue();
-        if (this.hasUpdated) {
-            this._withPristine(() => {
-                this._activeIndex = -1;
-                this._searchTerm = '';
-                this._formValue.setValueAndFormState(this.value);
-            });
-        }
-    }
-    get singleSelect() {
-        return this._singleSelect;
-    }
     set locale(value) {
-        this._i18nController.locale = value;
+        super.locale = value;
         this._state.updateLocale(value);
     }
     get locale() {
-        return this._i18nController.locale;
+        return super.locale;
     }
     set placeholderSearch(value) {
         this._placeholderSearch = value;
     }
     get placeholderSearch() {
         return (this._placeholderSearch ??
-            this.resourceStrings.combo_filter_search_placeholder ??
-            'Search');
-    }
-    set resourceStrings(value) {
-        this._i18nController.resourceStrings = value;
-    }
-    get resourceStrings() {
-        return this._i18nController.resourceStrings;
-    }
-    set valueKey(value) {
-        this._valueKey = value;
-        this._displayKey = this._displayKey ?? this._valueKey;
-        this._index = undefined;
-    }
-    get valueKey() {
-        return this._valueKey;
+            this.resourceStrings.combo_filter_search_placeholder);
     }
     set displayKey(value) {
         this._displayKey = value;
@@ -133,7 +102,7 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
         }
     }
     get displayKey() {
-        return this._displayKey ?? this._valueKey;
+        return this._displayKey ?? this.valueKey;
     }
     set filteringOptions(value) {
         this._filteringOptions = { ...this._filteringOptions, ...value };
@@ -141,13 +110,6 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
     get filteringOptions() {
         return this._filteringOptions;
     }
-    set disableFiltering(value) {
-        this._disableFiltering = value;
-        this._searchTerm = '';
-    }
-    get disableFiltering() {
-        return this._disableFiltering;
-    }
     set value(items) {
         this._formValue.setValueAndFormState(items);
         this._syncSelectionFromValue();
@@ -167,9 +129,6 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
         this._rootClickController = addRootClickController(this, {
             onHide: this._handleClosing,
         });
-        this._i18nController = addI18nController(this, {
-            defaultEN: ComboResourceStringsEN,
-        });
         this._formValue = createFormValueState(this, {
             initialValue: [],
             transformers: {
@@ -206,10 +165,7 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
                 clearSelection: () => this._clearSelection(),
             },
         });
-        this._data = [];
         this._indexSize = 0;
-        this._disableFiltering = false;
-        this._singleSelect = false;
         this._selected = new Set();
         this._filteringOptions = {
             filterKey: undefined,
@@ -217,10 +173,14 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
             matchDiacritics: false,
         };
         this._displayValue = '';
+        this.data = [];
         this.outlined = false;
+        this.singleSelect = false;
         this.autofocusList = false;
+        this.valueKey = undefined;
         this.groupSorting = 'asc';
         this.caseSensitiveIcon = false;
+        this.disableFiltering = false;
         this.disableClear = false;
         this.itemTemplate = ({ item }) => html `${this.displayKey ? item[this.displayKey] : item}`;
         this.groupHeaderTemplate = ({ item }) => html `${this.groupKey && item[this.groupKey]}`;
@@ -571,13 +531,10 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
             filled: !isEmpty(this.value),
         })}
       >
-        <slot name="toggle-icon">
-          <igc-icon
-            name=${this.open ? 'input_collapse' : 'input_expand'}
-            collection="default"
-            aria-hidden="true"
-          ></igc-icon>
-        </slot>
+        ${renderSlottedIcon({
+            slot: 'toggle-icon',
+            icon: this.open ? 'input_collapse' : 'input_expand',
+        })}
       </span>
     `;
     }
@@ -591,13 +548,7 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
         ?hidden=${this.disableClear || isEmpty(this._selected)}
         aria-label=${ifDefined(this.resourceStrings.combo_clearItems_placeholder)}
       >
-        <slot name="clear-icon">
-          <igc-icon
-            name="input_clear"
-            collection="default"
-            aria-hidden="true"
-          ></igc-icon>
-        </slot>
+        ${renderSlottedIcon({ slot: 'clear-icon', icon: 'input_clear' })}
       </span>
     `;
     }
@@ -700,7 +651,7 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
     `;
     }
     _renderHelperText() {
-        return IgcValidationContainerComponent.create(this, {
+        return this._renderValidationContainer({
             id: 'combo-helper-text',
             hasHelperText: true,
         });
@@ -727,14 +678,33 @@ __decorate([
     state()
 ], IgcComboComponent.prototype, "_displayValue", void 0);
 __decorate([
-    property({ attribute: false })
-], IgcComboComponent.prototype, "data", null);
+    property({ attribute: false }),
+    coercedProperty({
+        transform: ({ value }) => asArray(value),
+        onChange: ({ host }) => {
+            host._index = undefined;
+        },
+    })
+], IgcComboComponent.prototype, "data", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcComboComponent.prototype, "outlined", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true, attribute: 'single-select' })
-], IgcComboComponent.prototype, "singleSelect", null);
+    property({ type: Boolean, reflect: true, attribute: 'single-select' }),
+    coercedProperty({
+        transform: ({ value }) => Boolean(value),
+        onChange: ({ host }) => {
+            host._syncSelectionFromValue();
+            if (host.hasUpdated) {
+                host._withPristine(() => {
+                    host._activeIndex = -1;
+                    host._searchTerm = '';
+                    host._formValue.setValueAndFormState(host.value);
+                });
+            }
+        },
+    })
+], IgcComboComponent.prototype, "singleSelect", void 0);
 __decorate([
     property({ type: Boolean })
 ], IgcComboComponent.prototype, "autofocus", void 0);
@@ -754,11 +724,14 @@ __decorate([
     property({ attribute: 'placeholder-search' })
 ], IgcComboComponent.prototype, "placeholderSearch", null);
 __decorate([
-    property({ attribute: false })
-], IgcComboComponent.prototype, "resourceStrings", null);
-__decorate([
-    property({ attribute: 'value-key' })
-], IgcComboComponent.prototype, "valueKey", null);
+    property({ attribute: 'value-key' }),
+    coercedProperty({
+        onChange: ({ value, host }) => {
+            host._displayKey = host._displayKey ?? value;
+            host._index = undefined;
+        },
+    })
+], IgcComboComponent.prototype, "valueKey", void 0);
 __decorate([
     property({ attribute: 'display-key' })
 ], IgcComboComponent.prototype, "displayKey", null);
@@ -775,8 +748,13 @@ __decorate([
     property({ type: Boolean, attribute: 'case-sensitive-icon' })
 ], IgcComboComponent.prototype, "caseSensitiveIcon", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'disable-filtering' })
-], IgcComboComponent.prototype, "disableFiltering", null);
+    property({ type: Boolean, attribute: 'disable-filtering' }),
+    coercedProperty({
+        onChange: ({ host }) => {
+            host._searchTerm = '';
+        },
+    })
+], IgcComboComponent.prototype, "disableFiltering", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'disable-clear' })
 ], IgcComboComponent.prototype, "disableClear", void 0);