igniteui-webcomponents 7.2.3 → 7.3.0-beta.0

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,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,oBAAoB,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,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;IAoCD;QACE,KAAK,EAAE,CAAC;QAnCO,eAAU,GAAG,sBAAsB,CAAC,IAAI,EAAE;YACzD,WAAW,EAAE;gBACX,IAAI,EAAE,QAAQ;gBACd,YAAY,EAAE,OAAO;aACtB;SACF,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;IAGe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;IACvB,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;;AA9DM;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 { addThemingController } from '../../theming/theming-controller.js';\nimport IgcCheckboxComponent from '../checkbox/checkbox.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport { registerComponent } from '../common/definitions/register.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  });\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  /** @internal */\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.role = 'option';\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,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"]}

package/components/combo/combo.d.ts

@@ -1,10 +1,10 @@
 import { type IComboResourceStrings } from 'igniteui-i18n-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
-import { IgcBaseComboBoxComponent } from '../common/mixins/combo-box.js';
-import type { AbstractConstructor } from '../common/mixins/constructor.js';
-import type { Validator } from '../common/validators.js';
+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("../common/mixins/constructor.js").Constructor<import("../common/mixins/forms/types.js").FormRequiredInterface & import("../common/mixins/forms/types.js").FormAssociatedElementInterface> & import("../common/mixins/constructor.js").Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcComboComponentEventMap>> & AbstractConstructor<IgcBaseComboBoxComponent>;
+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>;
 /**
  * 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,
@@ -61,11 +61,12 @@ export default class IgcComboComponent<T extends object = any> extends IgcComboC
     static register(): void;
     protected get __validators(): Validator<IgcComboComponent<T>>[];
     private readonly _slots;
-    protected readonly _rootClickController: import("../common/controllers/root-click.js").RootClickController;
-    protected readonly _i18nController: import("../common/i18n/i18n-controller.js").I18nController<IComboResourceStrings>;
-    protected readonly _formValue: import("../common/mixins/forms/form-value.js").FormValue<ComboValue<T>[]>;
+    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;
+    private readonly _helperText;
     /** The search input of the combo component. */
     private readonly _searchRef;
     /** The combo virtualized dropdown list. */
@@ -73,6 +74,8 @@ export default class IgcComboComponent<T extends object = any> extends IgcComboC
     private readonly _state;
     private readonly _navigation;
     private _data;
+    private _index?;
+    private _indexSize;
     private _valueKey?;
     private _displayKey?;
     private _placeholderSearch?;
@@ -84,14 +87,20 @@ export default class IgcComboComponent<T extends object = any> extends IgcComboC
     private get _activeIndex();
     private set _searchTerm(value);
     private get _searchTerm();
-    private _activeDescendant?;
     private _displayValue;
+    /** The DOM id of the option rendered at `index` in the current data state. */
+    private _itemId;
+    /**
+     * Derived from {@link _activeIndex} rather than tracked separately, so that it
+     * cannot go stale and does not have to be assigned while rendering an item.
+     */
+    private get _activeDescendant();
     private get _mainAriaLabel();
     /** The data source used to generate the list of options. */
     set data(value: T[]);
     get data(): T[];
     /**
-     * The outlined attribute of the control.
+     * Whether the control has an outlined appearance.
      * @attr outlined
      * @default false
      */
@@ -104,7 +113,7 @@ export default class IgcComboComponent<T extends object = any> extends IgcComboC
     set singleSelect(value: boolean);
     get singleSelect(): boolean;
     /**
-     * The autofocus attribute of the control.
+     * Whether the control should receive focus automatically.
      * @attr autofocus
      */
     autofocus: boolean;
@@ -121,17 +130,17 @@ export default class IgcComboComponent<T extends object = any> extends IgcComboC
     set locale(value: string);
     get locale(): string;
     /**
-     * The label attribute of the control.
+     * The label of the control.
      * @attr label
      */
     label?: string;
     /**
-     * The placeholder attribute of the control.
+     * The placeholder text of the control.
      * @attr placeholder
      */
     placeholder?: string;
     /**
-     * The placeholder attribute of the search input.
+     * The placeholder text of the search input.
      * @attr placeholder-search
      */
     set placeholderSearch(value: string | undefined);
@@ -202,8 +211,8 @@ export default class IgcComboComponent<T extends object = any> extends IgcComboC
     groupHeaderTemplate: ComboItemTemplate<T>;
     /**
      * Sets the value (selected items). The passed value must be a valid JSON array.
-     * If the data source is an array of complex objects, the `valueKey` attribute must be set.
-     * Note that when `displayKey` is not explicitly set, it will fall back to the value of `valueKey`.
+     * If the data source is an array of complex objects, the `valueKey` must be set.
+     * Note that when `displayKey` is not explicitly set, it falls back to the value of `valueKey`.
      *
      * @attr value
      *
@@ -238,14 +247,39 @@ export default class IgcComboComponent<T extends object = any> extends IgcComboC
     get selection(): T[];
     constructor();
     protected willUpdate(props: PropertyValues<this>): void;
-    protected _restoreDefaultValue(): void;
+    /**
+     * Runs `callback`, restoring the pristine flag afterwards.
+     *
+     * Re-syncing the form value in reaction to a configuration change (as opposed
+     * to user interaction) must not count as the control having been dirtied.
+     */
+    private _withPristine;
     protected _setDefaultValue(current: string | null): void;
     protected _show(emitEvent?: boolean): Promise<boolean>;
     protected _hide(emitEvent?: boolean): Promise<boolean>;
     private _setSingleSelectionDisplayValue;
+    /**
+     * Maps every value representation in the data source to the positions of the
+     * records carrying it. Built on demand and dropped whenever `data` or
+     * `valueKey` changes.
+     *
+     * Positions (rather than records) are stored so that resolution can hand back
+     * matches in data-source order, and duplicate value keys keep resolving to
+     * every record that carries them.
+     *
+     * The size comparison picks up in-place growth or shrink (push/splice) of the
+     * same array. Replacing elements without changing the length is not detectable
+     * here and still requires reassigning `data`.
+     */
+    private get _dataIndex();
     /**
      * Resolves user-provided items (value keys or object references)
-     * to actual objects from the data source in a single pass.
+     * to actual objects from the data source, in data-source order.
+     *
+     * @remarks
+     * Repeating the same value in `items` resolves it once - a record cannot be
+     * selected twice, and duplicates would otherwise reach the change event
+     * payload.
      */
     private _resolveItems;
     /**
@@ -254,24 +288,48 @@ export default class IgcComboComponent<T extends object = any> extends IgcComboC
      */
     private _resolveItemValue;
     /**
-     * Maps data items to their value representations using the given key.
-     * When key is undefined, returns the items themselves.
+     * Maps data records to their value representations - the `valueKey` property
+     * of each, or the record itself when no `valueKey` is set.
      */
-    private _getValues;
+    private _toValues;
+    /**
+     * Recomputes {@link _displayValue} from the current selection and returns its
+     * value representation, walking the selection once for both projections.
+     */
+    private _projectSelection;
     private _emitSelectionChange;
-    private _selectItems;
-    private _deselectItems;
+    /**
+     * Builds the value the component would have if `resolved` were applied to the
+     * current selection. Used as the `newValue` payload of the change event.
+     */
+    private _previewValue;
+    /**
+     * Adds the given `items` to, or removes them from, the current selection.
+     *
+     * An empty collection is a "select all" / "deselect all" request. Single
+     * selection has no "select all" - it only resets the current selection.
+     *
+     * When `emit` is set, the cancellable `igcChange` event is fired *before* any
+     * mutation takes place, so cancelling it leaves the selection untouched.
+     *
+     * @returns Whether the change was committed.
+     */
+    private _updateSelection;
     /**
      * Syncs the internal `_selected` set from the current `_formValue`.
      * This is a one-way sync: source of truth (_formValue) → view (_selected).
      */
     private _syncSelectionFromValue;
+    protected _syncValueFromSelection(): void;
     /**
-     * Finds an item in the data array by its value (or value key).
-     * Returns undefined if the item is not found.
+     * The data record rendered at `index`, or undefined when that position holds
+     * a group header instead of a selectable option.
+     *
+     * Guarding on this matters: an unresolvable record would reach
+     * {@link _updateSelection} as an empty collection, which reads as
+     * "select everything".
      */
-    private _findItemByValue;
-    protected _syncValueFromSelection(initial?: boolean): void;
+    private _recordAt;
     private _toggleSelection;
     private _selectByIndex;
     private _clearSelection;