igniteui-webcomponents 4.5.0-beta.1 → 4.6.0

package/components/common/mixins/form-associated.js

@@ -4,32 +4,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
 import { property } from 'lit/decorators.js';
 export function FormAssociatedMixin(superClass) {
-    var _FormAssociatedElement_internals;
     class FormAssociatedElement extends superClass {
         get form() {
-            return __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").form;
+            return this.__internals.form;
         }
         get validity() {
-            return __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").validity;
+            return this.__internals.validity;
         }
         get validationMessage() {
-            return __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").validationMessage;
+            return this.__internals.validationMessage;
         }
         get willValidate() {
-            return __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").willValidate;
+            return this.__internals.willValidate;
         }
         get disabled() {
             return this._disabled;
@@ -51,7 +39,6 @@ export function FormAssociatedMixin(superClass) {
         }
         constructor(...args) {
             super(args);
-            _FormAssociatedElement_internals.set(this, void 0);
             this.validators = [];
             this._disabled = false;
             this._invalid = false;
@@ -60,7 +47,7 @@ export function FormAssociatedMixin(superClass) {
                 event.preventDefault();
                 this.invalid = true;
             };
-            __classPrivateFieldSet(this, _FormAssociatedElement_internals, this.attachInternals(), "f");
+            this.__internals = this.attachInternals();
             this.addEventListener('invalid', this.handleInvalid);
         }
         connectedCallback() {
@@ -85,10 +72,10 @@ export function FormAssociatedMixin(superClass) {
             }
         }
         setFormValue(value, state) {
-            __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").setFormValue(value, state || value);
+            this.__internals.setFormValue(value, state || value);
         }
         setValidity(flags, message, anchor) {
-            __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").setValidity(flags, message, anchor);
+            this.__internals.setValidity(flags, message, anchor);
         }
         formResetCallback() {
             this.restoreDefaultValue();
@@ -117,7 +104,7 @@ export function FormAssociatedMixin(superClass) {
                 validity.customError = true;
                 validationMessage = message;
             }
-            __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").setValidity(validity, validationMessage);
+            this.__internals.setValidity(validity, validationMessage);
         }
         setInvalidState() {
             if (this.hasUpdated || this._dirty) {
@@ -125,17 +112,16 @@ export function FormAssociatedMixin(superClass) {
             }
         }
         reportValidity() {
-            return __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").reportValidity();
+            return this.__internals.reportValidity();
         }
         checkValidity() {
-            return __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").checkValidity();
+            return this.__internals.checkValidity();
         }
         setCustomValidity(message) {
             this.updateValidity(message);
             this.invalid = !this.checkValidity();
         }
     }
-    _FormAssociatedElement_internals = new WeakMap();
     FormAssociatedElement.formAssociated = true;
     __decorate([
         property({ reflect: true })

package/components/common/mixins/form-associated.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-associated.js","sourceRoot":"","sources":["../../../../src/components/common/mixins/form-associated.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport type { Constructor } from './constructor';\nimport type { Validator } from '../validators.js';\n\nexport declare class FormAssociatedElementInterface {\n  public static readonly formAssociated: boolean;\n\n  #internals: ElementInternals;\n  protected validators: Validator[];\n  protected _disabled: boolean;\n  protected _invalid: boolean;\n  protected _dirty: boolean;\n\n  /**\n   * The default value of the control at \"creation\" time.\n   *\n   * @remarks\n   * This is set by default on `connectedCallback` through the `setDefaultValue` call.\n   * It expects the component to have either a `checked` or a `value` property and binds it to the initial value of the\n   * respective property.\n   *\n   * In use-cases where additional customization is required, make sure to override the `setDefaultValue` method.\n   */\n  protected _defaultValue: unknown;\n\n  /**\n   * Applies the {@link FormAssociatedElementInterface.invalid | `invalid`} attribute on the control and the associated styles\n   * if the element has completed the first update cycle or it has been interacted with by the user.\n   *\n   * Usually, it should be called after {@link FormAssociatedElementInterface.updateValidity | `updateValidity()`}\n   */\n  protected setInvalidState(): void;\n\n  /**\n   * Executes the component validators and updates the internal validity state.\n   */\n  protected updateValidity(message?: string): void;\n\n  /**\n   * Saves the initial value/checked state of the control.\n   *\n   * Called on connectedCallback.\n   */\n  protected setDefaultValue(): void;\n\n  /**\n   * Called when the parent form is reset.\n   *\n   * Restores the initially bound value/checked state of the control.\n   */\n  protected restoreDefaultValue(): void;\n\n  protected setFormValue(\n    value: string | File | FormData | null,\n    state?: string | File | FormData | null | undefined\n  ): void;\n  protected setValidity(\n    flags?: ValidityStateFlags | undefined,\n    message?: string | undefined,\n    anchor?: HTMLElement | undefined\n  ): void;\n\n  protected formResetCallback(): void;\n  protected formDisabledCallback(state: boolean): void;\n  protected formStateRestoreCallback(\n    state: string | FormData | File,\n    mode: 'autocomplete' | 'restore'\n  ): void;\n\n  /**\n   * The disabled state of the component\n   * @attr [disabled=false]\n   */\n  public disabled: boolean;\n\n  /**\n   * Control the validity of the control.\n   * @attr\n   */\n  public invalid: boolean;\n\n  /**\n   * The name attribute of the control.\n   * @attr\n   */\n  public name: string;\n\n  /** Returns the HTMLFormElement associated with this element. */\n  public get form(): HTMLFormElement | null;\n\n  /**\n   * Returns a ValidityState object which represents the different validity states\n   * the element can be in, with respect to constraint validation.\n   */\n  public get validity(): ValidityState;\n\n  /** A string containing the validation message of this element. */\n  public get validationMessage(): string;\n\n  /**\n   * A boolean value which returns true if the element is a submittable element\n   * that is a candidate for constraint validation.\n   */\n  public get willValidate(): boolean;\n\n  /** Checks for validity of the control and emits the invalid event if it invalid. */\n  public checkValidity(): boolean;\n\n  /** Checks for validity of the control and shows the browser message if it invalid. */\n  public reportValidity(): boolean;\n\n  /**\n   * Sets a custom validation message for the control.\n   * As long as `message` is not empty, the control is considered invalid.\n   */\n  public setCustomValidity(message: string): void;\n}\n\n/**\n * Turns the passed class element into a Form Associated Custom Element.\n */\nexport function FormAssociatedMixin<T extends Constructor<LitElement>>(\n  superClass: T\n) {\n  class FormAssociatedElement extends superClass {\n    public static readonly formAssociated = true;\n\n    #internals: ElementInternals;\n    protected validators: Validator[] = [];\n    protected _disabled = false;\n    protected _invalid = false;\n    protected _dirty = false;\n\n    /**\n     * The default value of the control at \"creation\" time.\n     *\n     * @remarks\n     * This is set by default on `connectedCallback` through the `setDefaultValue` call.\n     * It expects the component to have either a `checked` or a `value` property and binds it to the initial value of the\n     * respective property.\n     *\n     * In use-cases where additional customization is required, make sure to override the `setDefaultValue` method.\n     */\n    protected _defaultValue: unknown;\n\n    /**\n     * The name attribute of the control.\n     * @attr\n     */\n    @property({ reflect: true })\n    public name!: string;\n\n    /** Returns the HTMLFormElement associated with this element. */\n    public get form() {\n      return this.#internals.form;\n    }\n\n    /**\n     * Returns a ValidityState object which represents the different validity states\n     * the element can be in, with respect to constraint validation.\n     */\n    public get validity() {\n      return this.#internals.validity;\n    }\n\n    /** A string containing the validation message of this element. */\n    public get validationMessage() {\n      return this.#internals.validationMessage;\n    }\n\n    /**\n     * A boolean value which returns true if the element is a submittable element\n     * that is a candidate for constraint validation.\n     */\n    public get willValidate() {\n      return this.#internals.willValidate;\n    }\n\n    /**\n     * The disabled state of the component\n     * @attr [disabled=false]\n     */\n    @property({ type: Boolean, reflect: true })\n    public get disabled() {\n      return this._disabled;\n    }\n\n    public set disabled(value: boolean) {\n      const prev = this._disabled;\n      this._disabled = value;\n      this.toggleAttribute('disabled', Boolean(this._disabled));\n      this.requestUpdate('disabled', prev);\n    }\n\n    /**\n     * Control the validity of the control.\n     * @attr [invalid=false]\n     */\n    @property({ type: Boolean, reflect: true })\n    public get invalid() {\n      return this._invalid;\n    }\n\n    public set invalid(value: boolean) {\n      const prev = this._invalid;\n      this._invalid = value;\n      this.toggleAttribute('invalid', Boolean(this._invalid));\n      this.requestUpdate('invalid', prev);\n    }\n\n    constructor(...args: any[]) {\n      super(args);\n      this.#internals = this.attachInternals();\n      this.addEventListener('invalid', this.handleInvalid);\n    }\n\n    public override connectedCallback(): void {\n      super.connectedCallback();\n      this._dirty = false;\n      this.setDefaultValue();\n    }\n\n    /**\n     * Saves the initial value/checked state of the control.\n     *\n     * Called on connectedCallback.\n     */\n    protected setDefaultValue() {\n      if ('checked' in this) {\n        this._defaultValue = this.checked;\n      } else if ('value' in this) {\n        this._defaultValue = this.value;\n      }\n    }\n\n    /**\n     * Called when the parent form is reset.\n     *\n     * Restores the initially bound value/checked state of the control.\n     */\n    protected restoreDefaultValue() {\n      if ('checked' in this) {\n        this.checked = this._defaultValue;\n      } else if ('value' in this) {\n        this.value = this._defaultValue;\n      }\n    }\n\n    protected handleInvalid = (event: Event) => {\n      event.preventDefault();\n      this.invalid = true;\n    };\n\n    protected setFormValue(\n      value: string | File | FormData | null,\n      state?: string | File | FormData | null | undefined\n    ) {\n      this.#internals.setFormValue(value, state || value);\n    }\n\n    protected setValidity(\n      flags?: ValidityStateFlags | undefined,\n      message?: string | undefined,\n      anchor?: HTMLElement | undefined\n    ) {\n      this.#internals.setValidity(flags, message, anchor);\n    }\n\n    protected formResetCallback() {\n      this.restoreDefaultValue();\n      this._dirty = false;\n\n      // Apply any changes happening during form reset synchronously\n      this.performUpdate();\n\n      this.invalid = false;\n    }\n\n    protected formDisabledCallback(state: boolean) {\n      this._disabled = state;\n      this.requestUpdate();\n    }\n\n    /**\n     * Executes the component validators and updates the internal validity state.\n     */\n    protected updateValidity(message?: string) {\n      const validity: ValidityStateFlags = {};\n      let validationMessage = '';\n\n      for (const validator of this.validators) {\n        const isValid = validator.isValid(this);\n\n        validity[validator.key] = !isValid;\n\n        if (!isValid) {\n          validationMessage =\n            typeof validator.message === 'function'\n              ? validator.message(this)\n              : validator.message;\n        }\n      }\n\n      if (message) {\n        validity.customError = true;\n        validationMessage = message;\n      }\n\n      this.#internals.setValidity(validity, validationMessage);\n    }\n\n    /**\n     * Applies the {@link FormAssociatedElementInterface.invalid | `invalid`} attribute on the control and the associated styles\n     * if the element has completed the first update cycle or it has been interacted with by the user.\n     *\n     * Usually, it should be called after {@link FormAssociatedElementInterface.updateValidity | `updateValidity()`}\n     */\n    protected setInvalidState() {\n      if (this.hasUpdated || this._dirty) {\n        this.invalid = !this.checkValidity();\n      }\n    }\n\n    /** Checks for validity of the control and shows the browser message if it invalid. */\n    public reportValidity() {\n      return this.#internals.reportValidity();\n    }\n\n    /** Checks for validity of the control and emits the invalid event if it invalid. */\n    public checkValidity() {\n      return this.#internals.checkValidity();\n    }\n\n    /**\n     * Sets a custom validation message for the control.\n     * As long as `message` is not empty, the control is considered invalid.\n     */\n    public setCustomValidity(message: string) {\n      this.updateValidity(message);\n      this.invalid = !this.checkValidity();\n    }\n  }\n\n  return FormAssociatedElement as unknown as Constructor<FormAssociatedElementInterface> &\n    T;\n}\n"]}
+{"version":3,"file":"form-associated.js","sourceRoot":"","sources":["../../../../src/components/common/mixins/form-associated.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport type { Constructor } from './constructor';\nimport type { Validator } from '../validators.js';\n\nexport declare class FormAssociatedElementInterface {\n  public static readonly formAssociated: boolean;\n\n  private __internals: ElementInternals;\n  protected validators: Validator[];\n  protected _disabled: boolean;\n  protected _invalid: boolean;\n  protected _dirty: boolean;\n\n  /**\n   * The default value of the control at \"creation\" time.\n   *\n   * @remarks\n   * This is set by default on `connectedCallback` through the `setDefaultValue` call.\n   * It expects the component to have either a `checked` or a `value` property and binds it to the initial value of the\n   * respective property.\n   *\n   * In use-cases where additional customization is required, make sure to override the `setDefaultValue` method.\n   */\n  protected _defaultValue: unknown;\n\n  /**\n   * Applies the {@link FormAssociatedElementInterface.invalid | `invalid`} attribute on the control and the associated styles\n   * if the element has completed the first update cycle or it has been interacted with by the user.\n   *\n   * Usually, it should be called after {@link FormAssociatedElementInterface.updateValidity | `updateValidity()`}\n   */\n  protected setInvalidState(): void;\n\n  /**\n   * Executes the component validators and updates the internal validity state.\n   */\n  protected updateValidity(message?: string): void;\n\n  /**\n   * Saves the initial value/checked state of the control.\n   *\n   * Called on connectedCallback.\n   */\n  protected setDefaultValue(): void;\n\n  /**\n   * Called when the parent form is reset.\n   *\n   * Restores the initially bound value/checked state of the control.\n   */\n  protected restoreDefaultValue(): void;\n\n  protected setFormValue(\n    value: string | File | FormData | null,\n    state?: string | File | FormData | null | undefined\n  ): void;\n  protected setValidity(\n    flags?: ValidityStateFlags | undefined,\n    message?: string | undefined,\n    anchor?: HTMLElement | undefined\n  ): void;\n\n  protected formResetCallback(): void;\n  protected formDisabledCallback(state: boolean): void;\n  protected formStateRestoreCallback(\n    state: string | FormData | File,\n    mode: 'autocomplete' | 'restore'\n  ): void;\n\n  /**\n   * The disabled state of the component\n   * @attr [disabled=false]\n   */\n  public disabled: boolean;\n\n  /**\n   * Control the validity of the control.\n   * @attr\n   */\n  public invalid: boolean;\n\n  /**\n   * The name attribute of the control.\n   * @attr\n   */\n  public name: string;\n\n  /** Returns the HTMLFormElement associated with this element. */\n  public get form(): HTMLFormElement | null;\n\n  /**\n   * Returns a ValidityState object which represents the different validity states\n   * the element can be in, with respect to constraint validation.\n   */\n  public get validity(): ValidityState;\n\n  /** A string containing the validation message of this element. */\n  public get validationMessage(): string;\n\n  /**\n   * A boolean value which returns true if the element is a submittable element\n   * that is a candidate for constraint validation.\n   */\n  public get willValidate(): boolean;\n\n  /** Checks for validity of the control and emits the invalid event if it invalid. */\n  public checkValidity(): boolean;\n\n  /** Checks for validity of the control and shows the browser message if it invalid. */\n  public reportValidity(): boolean;\n\n  /**\n   * Sets a custom validation message for the control.\n   * As long as `message` is not empty, the control is considered invalid.\n   */\n  public setCustomValidity(message: string): void;\n}\n\n/**\n * Turns the passed class element into a Form Associated Custom Element.\n */\nexport function FormAssociatedMixin<T extends Constructor<LitElement>>(\n  superClass: T\n) {\n  class FormAssociatedElement extends superClass {\n    public static readonly formAssociated = true;\n\n    private __internals: ElementInternals;\n    protected validators: Validator[] = [];\n    protected _disabled = false;\n    protected _invalid = false;\n    protected _dirty = false;\n\n    /**\n     * The default value of the control at \"creation\" time.\n     *\n     * @remarks\n     * This is set by default on `connectedCallback` through the `setDefaultValue` call.\n     * It expects the component to have either a `checked` or a `value` property and binds it to the initial value of the\n     * respective property.\n     *\n     * In use-cases where additional customization is required, make sure to override the `setDefaultValue` method.\n     */\n    protected _defaultValue: unknown;\n\n    /**\n     * The name attribute of the control.\n     * @attr\n     */\n    @property({ reflect: true })\n    public name!: string;\n\n    /** Returns the HTMLFormElement associated with this element. */\n    public get form(): HTMLFormElement | null {\n      return this.__internals.form;\n    }\n\n    /**\n     * Returns a ValidityState object which represents the different validity states\n     * the element can be in, with respect to constraint validation.\n     */\n    public get validity(): ValidityState {\n      return this.__internals.validity;\n    }\n\n    /** A string containing the validation message of this element. */\n    public get validationMessage(): string {\n      return this.__internals.validationMessage;\n    }\n\n    /**\n     * A boolean value which returns true if the element is a submittable element\n     * that is a candidate for constraint validation.\n     */\n    public get willValidate(): boolean {\n      return this.__internals.willValidate;\n    }\n\n    /**\n     * The disabled state of the component\n     * @attr [disabled=false]\n     */\n    @property({ type: Boolean, reflect: true })\n    public get disabled(): boolean {\n      return this._disabled;\n    }\n\n    public set disabled(value: boolean) {\n      const prev = this._disabled;\n      this._disabled = value;\n      this.toggleAttribute('disabled', Boolean(this._disabled));\n      this.requestUpdate('disabled', prev);\n    }\n\n    /**\n     * Control the validity of the control.\n     * @attr [invalid=false]\n     */\n    @property({ type: Boolean, reflect: true })\n    public get invalid(): boolean {\n      return this._invalid;\n    }\n\n    public set invalid(value: boolean) {\n      const prev = this._invalid;\n      this._invalid = value;\n      this.toggleAttribute('invalid', Boolean(this._invalid));\n      this.requestUpdate('invalid', prev);\n    }\n\n    constructor(...args: any[]) {\n      super(args);\n      this.__internals = this.attachInternals();\n      this.addEventListener('invalid', this.handleInvalid);\n    }\n\n    public override connectedCallback(): void {\n      super.connectedCallback();\n      this._dirty = false;\n      this.setDefaultValue();\n    }\n\n    /**\n     * Saves the initial value/checked state of the control.\n     *\n     * Called on connectedCallback.\n     */\n    protected setDefaultValue() {\n      if ('checked' in this) {\n        this._defaultValue = this.checked;\n      } else if ('value' in this) {\n        this._defaultValue = this.value;\n      }\n    }\n\n    /**\n     * Called when the parent form is reset.\n     *\n     * Restores the initially bound value/checked state of the control.\n     */\n    protected restoreDefaultValue() {\n      if ('checked' in this) {\n        this.checked = this._defaultValue;\n      } else if ('value' in this) {\n        this.value = this._defaultValue;\n      }\n    }\n\n    protected handleInvalid = (event: Event) => {\n      event.preventDefault();\n      this.invalid = true;\n    };\n\n    protected setFormValue(\n      value: string | File | FormData | null,\n      state?: string | File | FormData | null | undefined\n    ) {\n      this.__internals.setFormValue(value, state || value);\n    }\n\n    protected setValidity(\n      flags?: ValidityStateFlags | undefined,\n      message?: string | undefined,\n      anchor?: HTMLElement | undefined\n    ) {\n      this.__internals.setValidity(flags, message, anchor);\n    }\n\n    protected formResetCallback() {\n      this.restoreDefaultValue();\n      this._dirty = false;\n\n      // Apply any changes happening during form reset synchronously\n      this.performUpdate();\n\n      this.invalid = false;\n    }\n\n    protected formDisabledCallback(state: boolean) {\n      this._disabled = state;\n      this.requestUpdate();\n    }\n\n    /**\n     * Executes the component validators and updates the internal validity state.\n     */\n    protected updateValidity(message?: string) {\n      const validity: ValidityStateFlags = {};\n      let validationMessage = '';\n\n      for (const validator of this.validators) {\n        const isValid = validator.isValid(this);\n\n        validity[validator.key] = !isValid;\n\n        if (!isValid) {\n          validationMessage =\n            typeof validator.message === 'function'\n              ? validator.message(this)\n              : validator.message;\n        }\n      }\n\n      if (message) {\n        validity.customError = true;\n        validationMessage = message;\n      }\n\n      this.__internals.setValidity(validity, validationMessage);\n    }\n\n    /**\n     * Applies the {@link FormAssociatedElementInterface.invalid | `invalid`} attribute on the control and the associated styles\n     * if the element has completed the first update cycle or it has been interacted with by the user.\n     *\n     * Usually, it should be called after {@link FormAssociatedElementInterface.updateValidity | `updateValidity()`}\n     */\n    protected setInvalidState() {\n      if (this.hasUpdated || this._dirty) {\n        this.invalid = !this.checkValidity();\n      }\n    }\n\n    /** Checks for validity of the control and shows the browser message if it invalid. */\n    public reportValidity() {\n      return this.__internals.reportValidity();\n    }\n\n    /** Checks for validity of the control and emits the invalid event if it invalid. */\n    public checkValidity() {\n      return this.__internals.checkValidity();\n    }\n\n    /**\n     * Sets a custom validation message for the control.\n     * As long as `message` is not empty, the control is considered invalid.\n     */\n    public setCustomValidity(message: string) {\n      this.updateValidity(message);\n      this.invalid = !this.checkValidity();\n    }\n  }\n\n  return FormAssociatedElement as unknown as Constructor<FormAssociatedElementInterface> &\n    T;\n}\n"]}

package/components/common/mixins/option.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+export declare abstract class IgcBaseOptionLikeComponent extends LitElement {
+    protected _internals: ElementInternals;
+    protected _value: string;
+    protected _content: Array<Element>;
+    protected get _contentSlotText(): string;
+    /**
+     * Whether the item is active.
+     * @attr
+     */
+    active: boolean;
+    /**
+     * Whether the item is disabled.
+     * @attr
+     */
+    disabled: boolean;
+    /**
+     * Whether the item is selected.
+     * @attr
+     */
+    selected: boolean;
+    /**
+     * The current value of the item.
+     * If not specified, the element's text content is used.
+     *
+     * @attr
+     */
+    get value(): string;
+    set value(value: string);
+    protected disabledChange(): void;
+    protected selectedChange(): void;
+    constructor();
+    connectedCallback(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}

package/components/common/mixins/option.js

@@ -0,0 +1,76 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { property, queryAssignedNodes } from 'lit/decorators.js';
+import { watch } from '../decorators/watch.js';
+export class IgcBaseOptionLikeComponent extends LitElement {
+    get _contentSlotText() {
+        return this._content.map((node) => node.textContent).join('');
+    }
+    get value() {
+        return this._value ? this._value : this._contentSlotText;
+    }
+    set value(value) {
+        const old = this._value;
+        this._value = value;
+        this.requestUpdate('value', old);
+    }
+    disabledChange() {
+        this._internals.ariaDisabled = `${this.disabled}`;
+    }
+    selectedChange() {
+        this._internals.ariaSelected = `${this.selected}`;
+        this.active = this.selected;
+    }
+    constructor() {
+        super();
+        this.active = false;
+        this.disabled = false;
+        this.selected = false;
+        this._internals = this.attachInternals();
+        this._internals.role = 'option';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.role = 'option';
+    }
+    render() {
+        return html `
+      <section part="prefix">
+        <slot name="prefix"></slot>
+      </section>
+      <section part="content">
+        <slot></slot>
+      </section>
+      <section part="suffix">
+        <slot name="suffix"></slot>
+      </section>
+    `;
+    }
+}
+__decorate([
+    queryAssignedNodes({ flatten: true })
+], IgcBaseOptionLikeComponent.prototype, "_content", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IgcBaseOptionLikeComponent.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IgcBaseOptionLikeComponent.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IgcBaseOptionLikeComponent.prototype, "selected", void 0);
+__decorate([
+    property()
+], IgcBaseOptionLikeComponent.prototype, "value", null);
+__decorate([
+    watch('disabled')
+], IgcBaseOptionLikeComponent.prototype, "disabledChange", null);
+__decorate([
+    watch('selected')
+], IgcBaseOptionLikeComponent.prototype, "selectedChange", null);
+//# sourceMappingURL=option.js.map

package/components/common/mixins/option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option.js","sourceRoot":"","sources":["../../../../src/components/common/mixins/option.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAE/C,MAAM,OAAgB,0BAA2B,SAAQ,UAAU;IAOjE,IAAc,gBAAgB;QAC5B,OAAO,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAChE,CAAC;IA8BD,IAAW,KAAK;QACd,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC;IAC3D,CAAC;IAED,IAAW,KAAK,CAAC,KAAa;QAC5B,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC;QACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;IACnC,CAAC;IAGS,cAAc;QACtB,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IACpD,CAAC;IAGS,cAAc;QACtB,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC;IAC9B,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QA7CH,WAAM,GAAG,KAAK,CAAC;QAOf,aAAQ,GAAG,KAAK,CAAC;QAOjB,aAAQ,GAAG,KAAK,CAAC;QAgCtB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACzC,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,QAAQ,CAAC;IAClC,CAAC;IAEe,iBAAiB;QAG/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;IACvB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;;;;;;KAUV,CAAC;IACJ,CAAC;CACF;AAjFW;IADT,kBAAkB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4DACF;AAW7B;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DACrB;AAOf;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4DACnB;AAOjB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4DACnB;AASxB;IADC,QAAQ,EAAE;uDAGV;AASS;IADT,KAAK,CAAC,UAAU,CAAC;gEAGjB;AAGS;IADT,KAAK,CAAC,UAAU,CAAC;gEAIjB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, queryAssignedNodes } from 'lit/decorators.js';\n\nimport { watch } from '../decorators/watch.js';\n\nexport abstract class IgcBaseOptionLikeComponent extends LitElement {\n  protected _internals: ElementInternals;\n  protected _value!: string;\n\n  @queryAssignedNodes({ flatten: true })\n  protected _content!: Array<Element>;\n\n  protected get _contentSlotText() {\n    return this._content.map((node) => node.textContent).join('');\n  }\n\n  /**\n   * Whether the item is active.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public active = false;\n\n  /**\n   * Whether the item is disabled.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /**\n   * Whether the item is selected.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public selected = false;\n\n  /**\n   * The current value of the item.\n   * If not specified, the element's text content is used.\n   *\n   * @attr\n   */\n  @property()\n  public get value(): string {\n    return this._value ? this._value : this._contentSlotText;\n  }\n\n  public set value(value: string) {\n    const old = this._value;\n    this._value = value;\n    this.requestUpdate('value', old);\n  }\n\n  @watch('disabled')\n  protected disabledChange() {\n    this._internals.ariaDisabled = `${this.disabled}`;\n  }\n\n  @watch('selected')\n  protected selectedChange() {\n    this._internals.ariaSelected = `${this.selected}`;\n    this.active = this.selected;\n  }\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n    this._internals.role = 'option';\n  }\n\n  public override connectedCallback(): void {\n    // R.K. Workaround for Axe accessibility unit tests.\n    // I guess it does not support ElementInternals ARIAMixin state yet\n    super.connectedCallback();\n    this.role = 'option';\n  }\n\n  protected override render() {\n    return html`\n      <section part=\"prefix\">\n        <slot name=\"prefix\"></slot>\n      </section>\n      <section part=\"content\">\n        <slot></slot>\n      </section>\n      <section part=\"suffix\">\n        <slot name=\"suffix\"></slot>\n      </section>\n    `;\n  }\n}\n"]}

package/components/common/mixins/sizable.js.map

@@ -1 +1 @@
-{"version":3,"file":"sizable.js","sourceRoot":"","sources":["../../../../src/components/common/mixins/sizable.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAa/C,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,UAAa,EACb,EAAE;IACF,MAAM,cAAe,SAAQ,UAAU;QAAvC;;YASS,SAAI,GAAiC,OAAO,CAAC;QAStD,CAAC;QANW,UAAU;YAClB,IAAI,CAAC,KAAK,CAAC,WAAW,CACpB,kBAAkB,EAClB,gCAAgC,IAAI,CAAC,IAAI,IAAI,CAC9C,CAAC;QACJ,CAAC;KACF;IATQ;QADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACwB;IAG1C;QADT,KAAK,CAAC,MAAM,CAAC;oDAMb;IAEH,OAAO,cAAmD,CAAC;AAC7D,CAAC,CAAC","sourcesContent":["import { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport type { Constructor } from './constructor';\nimport { watch } from '../decorators/watch.js';\n\nexport declare class SizableInterface {\n  /**\n   * Determines the size of the component.\n   * @attr\n   * @type {\"small\" | \"medium\" | \"large\"}\n   *\n   * @deprecated - since v4.5.0. Use the `--ig-size` CSS custom property instead.\n   */\n  public size: 'small' | 'medium' | 'large';\n}\n\nexport const SizableMixin = <T extends Constructor<LitElement>>(\n  superClass: T\n) => {\n  class SizableElement extends superClass {\n    /**\n     * Determines the size of the component.\n     * @attr\n     * @type {\"small\" | \"medium\" | \"large\"}\n     *\n     * @deprecated - since v4.5.0. Use the `--ig-size` CSS custom property instead.\n     */\n    @property({ reflect: true })\n    public size: 'small' | 'medium' | 'large' = 'large';\n\n    @watch('size')\n    protected updateSize() {\n      this.style.setProperty(\n        '--component-size',\n        `var(--ig-size, var(--ig-size-${this.size}))`\n      );\n    }\n  }\n  return SizableElement as Constructor<SizableInterface> & T;\n};\n"]}
+{"version":3,"file":"sizable.js","sourceRoot":"","sources":["../../../../src/components/common/mixins/sizable.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG7C,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAa/C,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,UAAa,EACb,EAAE;IACF,MAAM,cAAe,SAAQ,UAAU;QAAvC;;YASS,SAAI,GAAiC,OAAO,CAAC;QAStD,CAAC;QANW,UAAU;YAClB,IAAI,CAAC,KAAK,CAAC,WAAW,CACpB,kBAAkB,EAClB,gCAAgC,IAAI,CAAC,IAAI,IAAI,CAC9C,CAAC;QACJ,CAAC;KACF;IATQ;QADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACwB;IAG1C;QADT,KAAK,CAAC,MAAM,CAAC;oDAMb;IAEH,OAAO,cAAmD,CAAC;AAC7D,CAAC,CAAC","sourcesContent":["import { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport type { Constructor } from './constructor';\nimport { watch } from '../decorators/watch.js';\n\nexport declare class SizableInterface {\n  /**\n   * Determines the size of the component.\n   * @attr\n   * @type {\"small\" | \"medium\" | \"large\"}\n   *\n   * @deprecated - since v4.5.0. Use the `--ig-size` CSS custom property instead.\n   */\n  public size: 'small' | 'medium' | 'large';\n}\n\nexport const SizableMixin = <T extends Constructor<LitElement>>(\n  superClass: T\n) => {\n  class SizableElement extends superClass {\n    /**\n     * Determines the size of the component.\n     * @attr\n     * @type {\"small\" | \"medium\" | \"large\"}\n     *\n     * @deprecated - since v4.5.0. Use the `--ig-size` CSS custom property instead.\n     */\n    @property({ reflect: true })\n    public size: 'small' | 'medium' | 'large' = 'large';\n\n    @watch('size')\n    protected updateSize() {\n      this.style.setProperty(\n        '--component-size',\n        `var(--ig-size, var(--ig-size-${this.size}))`\n      );\n    }\n  }\n  return SizableElement as Constructor<SizableInterface> & T;\n};\n"]}

package/components/common/util.d.ts

@@ -23,6 +23,7 @@ export declare function getOffset(element: HTMLElement, parent: HTMLElement): {
 };
 export declare function createCounter(): () => number;
 export declare function isLTR(element: HTMLElement): boolean;
+export declare function extractText<T extends Node>(arr: T[]): string[];
 /**
  * Builds a string from format specifiers and replacement parameters.
  *
@@ -59,5 +60,6 @@ export declare function asNumber(value: unknown, fallback?: number): number;
  */
 export declare function wrap(min: number, max: number, value: number): number;
 export declare function isDefined<T = unknown>(value: T): boolean;
-/** Convenient wrapper for `Array.some` */
-export declare function any<T>(arr: T[], predicate: keyof T | ((item: T, idx: number, array: T[]) => boolean)): boolean;
+export declare function iterNodes<T = Node>(root: Node, whatToShow?: keyof typeof NodeFilter, filter?: (node: T) => boolean): Generator<T>;
+export declare function getElementByIdFromRoot(root: HTMLElement, id: string): HTMLElement | null;
+export declare function groupBy<T>(array: T[], key: keyof T | ((item: T) => any)): Record<string, T[]>;

package/components/common/util.js

@@ -25,6 +25,15 @@ export function createCounter() {
 export function isLTR(element) {
     return getComputedStyle(element).getPropertyValue('direction') === 'ltr';
 }
+export function extractText(arr) {
+    return arr.reduce((agg, item) => {
+        const text = item.textContent?.trim();
+        if (text) {
+            agg.push(text);
+        }
+        return agg;
+    }, []);
+}
 export function format(template, ...params) {
     return template.replace(/{(\d+)}/g, function (match, index) {
         if (index >= params.length) {
@@ -53,10 +62,32 @@ export function wrap(min, max, value) {
 export function isDefined(value) {
     return value !== undefined;
 }
-export function any(arr, predicate) {
-    if (predicate instanceof Function) {
-        return arr.some(predicate);
+export function* iterNodes(root, whatToShow, filter) {
+    const iter = document.createTreeWalker(root, NodeFilter[whatToShow ?? 'SHOW_ALL']);
+    let node = iter.nextNode();
+    while (node) {
+        if (filter) {
+            if (filter(node)) {
+                yield node;
+            }
+        }
+        else {
+            yield node;
+        }
+        node = iter.nextNode();
+    }
+}
+export function getElementByIdFromRoot(root, id) {
+    return root.getRootNode().getElementById(id);
+}
+export function groupBy(array, key) {
+    const result = {};
+    const _get = typeof key === 'function' ? key : (item) => item[key];
+    for (const item of array) {
+        const category = _get(item);
+        const group = result[category];
+        Array.isArray(group) ? group.push(item) : (result[category] = [item]);
     }
-    return arr.some((item) => Boolean(item[predicate]));
+    return result;
 }
 //# sourceMappingURL=util.js.map

package/components/common/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sourceRoot":"","sources":["../../../src/components/common/util.ts"],"names":[],"mappings":"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","sourcesContent":["export interface PartNameInfo {\n  readonly [name: string]: string | boolean | number;\n}\n\nexport const partNameMap = (partNameInfo: PartNameInfo) => {\n  return Object.keys(partNameInfo)\n    .filter((key) => partNameInfo[key])\n    .join(' ');\n};\n\nexport const asPercent = (part: number, whole: number) => (part / whole) * 100;\n\nexport const clamp = (number: number, min: number, max: number) =>\n  Math.max(min, Math.min(number, max));\n\n/**\n *\n * Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the\n * parent doesn't have to be positioned relative or absolute.\n *\n * Work around for the following issues in Chromium based browsers:\n *\n * https://bugs.chromium.org/p/chromium/issues/detail?id=1330819\n * https://bugs.chromium.org/p/chromium/issues/detail?id=1334556\n *\n */\nexport function getOffset(element: HTMLElement, parent: HTMLElement) {\n  const { top, left, bottom, right } = element.getBoundingClientRect();\n  const {\n    top: pTop,\n    left: pLeft,\n    bottom: pBottom,\n    right: pRight,\n  } = parent.getBoundingClientRect();\n\n  return {\n    top: Math.round(top - pTop),\n    left: Math.round(left - pLeft),\n    right: Math.round(right - pRight),\n    bottom: Math.round(bottom - pBottom),\n  };\n}\n\nexport function createCounter() {\n  let i = 0;\n  return function () {\n    i++;\n    return i;\n  };\n}\n\nexport function isLTR(element: HTMLElement) {\n  return getComputedStyle(element).getPropertyValue('direction') === 'ltr';\n}\n\n/**\n * Builds a string from format specifiers and replacement parameters.\n *\n * @example\n * ```typescript\n * format('{0} says \"{1}\".', 'John', 'Hello'); // 'John says \"Hello\".'\n * ```\n */\nexport function format(template: string, ...params: string[]): string {\n  return template.replace(/{(\\d+)}/g, function (match: string, index: number) {\n    if (index >= params.length) {\n      return match;\n    }\n\n    const value: string = params[index];\n    if (typeof value !== 'number' && !value) {\n      return '';\n    }\n    return value;\n  });\n}\n\n/**\n * Parse the passed `value` as a number or return the `fallback` if it can't be done.\n *\n * @example\n * ```typescript\n * asNumber('5'); // 5\n * asNumber('3.14'); // 3.14\n * asNumber('five'); // 0\n * asNUmber('five', 5); // 5\n * ```\n */\nexport function asNumber(value: unknown, fallback = 0) {\n  const parsed = parseFloat(value as string);\n  return isNaN(parsed) ? fallback : parsed;\n}\n\n/**\n * Returns the value wrapped between the min and max bounds.\n *\n * If the value is greater than max, returns the min and vice-versa.\n * If the value is between the bounds, it is returned unchanged.\n *\n * @example\n * ```typescript\n * wrap(1, 4, 2); // 2\n * wrap(1, 4, 5); // 1\n * wrap(1, 4, -1); // 4\n * ```\n */\nexport function wrap(min: number, max: number, value: number) {\n  if (value < min) {\n    return max;\n  } else if (value > max) {\n    return min;\n  }\n\n  return value;\n}\n\nexport function isDefined<T = unknown>(value: T) {\n  return value !== undefined;\n}\n\n/** Convenient wrapper for `Array.some` */\nexport function any<T>(\n  arr: T[],\n  predicate: keyof T | ((item: T, idx: number, array: T[]) => boolean)\n) {\n  if (predicate instanceof Function) {\n    return arr.some(predicate);\n  }\n  return arr.some((item) => Boolean(item[predicate]));\n}\n"]}
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../../../src/components/common/util.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,YAA0B,EAAE,EAAE;IACxD,OAAO,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC;SAC7B,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;SAClC,IAAI,CAAC,GAAG,CAAC,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,IAAY,EAAE,KAAa,EAAE,EAAE,CAAC,CAAC,IAAI,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC;AAE/E,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,MAAc,EAAE,GAAW,EAAE,GAAW,EAAE,EAAE,CAChE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;AAavC,MAAM,UAAU,SAAS,CAAC,OAAoB,EAAE,MAAmB;IACjE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IACrE,MAAM,EACJ,GAAG,EAAE,IAAI,EACT,IAAI,EAAE,KAAK,EACX,MAAM,EAAE,OAAO,EACf,KAAK,EAAE,MAAM,GACd,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;IAEnC,OAAO;QACL,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC;QAC3B,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC;QAC9B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;QACjC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,OAAO,CAAC;KACrC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,aAAa;IAC3B,IAAI,CAAC,GAAG,CAAC,CAAC;IACV,OAAO;QACL,CAAC,EAAE,CAAC;QACJ,OAAO,CAAC,CAAC;IACX,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,KAAK,CAAC,OAAoB;IACxC,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,WAAW,CAAC,KAAK,KAAK,CAAC;AAC3E,CAAC;AAED,MAAM,UAAU,WAAW,CAAiB,GAAQ;IAClD,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC,GAAa,EAAE,IAAO,EAAE,EAAE;QAC3C,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;QACtC,IAAI,IAAI,EAAE;YACR,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAChB;QACD,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC;AAUD,MAAM,UAAU,MAAM,CAAC,QAAgB,EAAE,GAAG,MAAgB;IAC1D,OAAO,QAAQ,CAAC,OAAO,CAAC,UAAU,EAAE,UAAU,KAAa,EAAE,KAAa;QACxE,IAAI,KAAK,IAAI,MAAM,CAAC,MAAM,EAAE;YAC1B,OAAO,KAAK,CAAC;SACd;QAED,MAAM,KAAK,GAAW,MAAM,CAAC,KAAK,CAAC,CAAC;QACpC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,KAAK,EAAE;YACvC,OAAO,EAAE,CAAC;SACX;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;AACL,CAAC;AAaD,MAAM,UAAU,QAAQ,CAAC,KAAc,EAAE,QAAQ,GAAG,CAAC;IACnD,MAAM,MAAM,GAAG,UAAU,CAAC,KAAe,CAAC,CAAC;IAC3C,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;AAC3C,CAAC;AAeD,MAAM,UAAU,IAAI,CAAC,GAAW,EAAE,GAAW,EAAE,KAAa;IAC1D,IAAI,KAAK,GAAG,GAAG,EAAE;QACf,OAAO,GAAG,CAAC;KACZ;SAAM,IAAI,KAAK,GAAG,GAAG,EAAE;QACtB,OAAO,GAAG,CAAC;KACZ;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,SAAS,CAAc,KAAQ;IAC7C,OAAO,KAAK,KAAK,SAAS,CAAC;AAC7B,CAAC;AAED,MAAM,SAAS,CAAC,CAAC,SAAS,CACxB,IAAU,EACV,UAAoC,EACpC,MAA6B;IAE7B,MAAM,IAAI,GAAG,QAAQ,CAAC,gBAAgB,CACpC,IAAI,EACJ,UAAU,CAAC,UAAU,IAAI,UAAU,CAAC,CACrC,CAAC;IACF,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAO,CAAC;IAEhC,OAAO,IAAI,EAAE;QACX,IAAI,MAAM,EAAE;YACV,IAAI,MAAM,CAAC,IAAI,CAAC,EAAE;gBAChB,MAAM,IAAI,CAAC;aACZ;SACF;aAAM;YACL,MAAM,IAAI,CAAC;SACZ;QAED,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAO,CAAC;KAC7B;AACH,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAC,IAAiB,EAAE,EAAU;IAClE,OAAQ,IAAI,CAAC,WAAW,EAA4B,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;AAC1E,CAAC;AAED,MAAM,UAAU,OAAO,CAAI,KAAU,EAAE,GAAiC;IACtE,MAAM,MAAM,GAAwB,EAAE,CAAC;IACvC,MAAM,IAAI,GAAG,OAAO,GAAG,KAAK,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAO,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEtE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;QACxB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5B,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;QAE/B,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;KACvE;IAED,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["export interface PartNameInfo {\n  readonly [name: string]: string | boolean | number;\n}\n\nexport const partNameMap = (partNameInfo: PartNameInfo) => {\n  return Object.keys(partNameInfo)\n    .filter((key) => partNameInfo[key])\n    .join(' ');\n};\n\nexport const asPercent = (part: number, whole: number) => (part / whole) * 100;\n\nexport const clamp = (number: number, min: number, max: number) =>\n  Math.max(min, Math.min(number, max));\n\n/**\n *\n * Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the\n * parent doesn't have to be positioned relative or absolute.\n *\n * Work around for the following issues in Chromium based browsers:\n *\n * https://bugs.chromium.org/p/chromium/issues/detail?id=1330819\n * https://bugs.chromium.org/p/chromium/issues/detail?id=1334556\n *\n */\nexport function getOffset(element: HTMLElement, parent: HTMLElement) {\n  const { top, left, bottom, right } = element.getBoundingClientRect();\n  const {\n    top: pTop,\n    left: pLeft,\n    bottom: pBottom,\n    right: pRight,\n  } = parent.getBoundingClientRect();\n\n  return {\n    top: Math.round(top - pTop),\n    left: Math.round(left - pLeft),\n    right: Math.round(right - pRight),\n    bottom: Math.round(bottom - pBottom),\n  };\n}\n\nexport function createCounter() {\n  let i = 0;\n  return function () {\n    i++;\n    return i;\n  };\n}\n\nexport function isLTR(element: HTMLElement) {\n  return getComputedStyle(element).getPropertyValue('direction') === 'ltr';\n}\n\nexport function extractText<T extends Node>(arr: T[]) {\n  return arr.reduce((agg: string[], item: T) => {\n    const text = item.textContent?.trim();\n    if (text) {\n      agg.push(text);\n    }\n    return agg;\n  }, []);\n}\n\n/**\n * Builds a string from format specifiers and replacement parameters.\n *\n * @example\n * ```typescript\n * format('{0} says \"{1}\".', 'John', 'Hello'); // 'John says \"Hello\".'\n * ```\n */\nexport function format(template: string, ...params: string[]): string {\n  return template.replace(/{(\\d+)}/g, function (match: string, index: number) {\n    if (index >= params.length) {\n      return match;\n    }\n\n    const value: string = params[index];\n    if (typeof value !== 'number' && !value) {\n      return '';\n    }\n    return value;\n  });\n}\n\n/**\n * Parse the passed `value` as a number or return the `fallback` if it can't be done.\n *\n * @example\n * ```typescript\n * asNumber('5'); // 5\n * asNumber('3.14'); // 3.14\n * asNumber('five'); // 0\n * asNUmber('five', 5); // 5\n * ```\n */\nexport function asNumber(value: unknown, fallback = 0) {\n  const parsed = parseFloat(value as string);\n  return isNaN(parsed) ? fallback : parsed;\n}\n\n/**\n * Returns the value wrapped between the min and max bounds.\n *\n * If the value is greater than max, returns the min and vice-versa.\n * If the value is between the bounds, it is returned unchanged.\n *\n * @example\n * ```typescript\n * wrap(1, 4, 2); // 2\n * wrap(1, 4, 5); // 1\n * wrap(1, 4, -1); // 4\n * ```\n */\nexport function wrap(min: number, max: number, value: number) {\n  if (value < min) {\n    return max;\n  } else if (value > max) {\n    return min;\n  }\n\n  return value;\n}\n\nexport function isDefined<T = unknown>(value: T) {\n  return value !== undefined;\n}\n\nexport function* iterNodes<T = Node>(\n  root: Node,\n  whatToShow?: keyof typeof NodeFilter,\n  filter?: (node: T) => boolean\n): Generator<T> {\n  const iter = document.createTreeWalker(\n    root,\n    NodeFilter[whatToShow ?? 'SHOW_ALL']\n  );\n  let node = iter.nextNode() as T;\n\n  while (node) {\n    if (filter) {\n      if (filter(node)) {\n        yield node;\n      }\n    } else {\n      yield node;\n    }\n\n    node = iter.nextNode() as T;\n  }\n}\n\nexport function getElementByIdFromRoot(root: HTMLElement, id: string) {\n  return (root.getRootNode() as Document | ShadowRoot).getElementById(id);\n}\n\nexport function groupBy<T>(array: T[], key: keyof T | ((item: T) => any)) {\n  const result: Record<string, T[]> = {};\n  const _get = typeof key === 'function' ? key : (item: T) => item[key];\n\n  for (const item of array) {\n    const category = _get(item);\n    const group = result[category];\n\n    Array.isArray(group) ? group.push(item) : (result[category] = [item]);\n  }\n\n  return result;\n}\n"]}

package/components/date-time-input/date-time-input.d.ts

@@ -1,8 +1,8 @@
-import { DatePartDeltas, DatePart } from './date-util.js';
-import { IgcMaskInputBaseComponent, MaskRange } from '../mask-input/mask-input-base.js';
-import { IgcInputEventMap } from '../input/input-base.js';
+import { DatePart, DatePartDeltas } from './date-util.js';
 import { AbstractConstructor } from '../common/mixins/constructor.js';
 import { Validator } from '../common/validators.js';
+import { IgcInputEventMap } from '../input/input-base.js';
+import { IgcMaskInputBaseComponent, MaskRange } from '../mask-input/mask-input-base.js';
 export interface IgcDateTimeInputEventMap extends Omit<IgcInputEventMap, 'igcChange'> {
     igcChange: CustomEvent<Date | null>;
 }
@@ -31,6 +31,7 @@ declare const IgcDateTimeInputComponent_base: AbstractConstructor<import("../com
  */
 export default class IgcDateTimeInputComponent extends IgcDateTimeInputComponent_base {
     static readonly tagName = "igc-date-time-input";
+    static register(): void;
     protected validators: Validator<this>[];
     protected _defaultMask: string;
     protected _value: Date | null;
@@ -108,6 +109,7 @@ export default class IgcDateTimeInputComponent extends IgcDateTimeInputComponent
     private get hasTimeParts();
     private get targetDatePart();
     private get datePartDeltas();
+    constructor();
     connectedCallback(): void;
     /** Increments a date/time portion. */
     stepUp(datePart?: DatePart, delta?: number): void;
@@ -133,11 +135,8 @@ export default class IgcDateTimeInputComponent extends IgcDateTimeInputComponent
     private getNewPosition;
     protected handleFocus(): Promise<void>;
     protected handleBlur(): void;
-    protected handleHorizontalArrows(event: KeyboardEvent): void;
-    protected handleVerticalArrows(event: KeyboardEvent): Promise<void>;
-    protected handleSemicolon(event: KeyboardEvent): void;
-    protected keyMap: Map<string, ((event: KeyboardEvent) => void) | ((event: KeyboardEvent) => Promise<void>) | ((event: KeyboardEvent) => void)>;
-    protected handleKeydown(e: KeyboardEvent): Promise<void>;
+    protected navigateParts(delta: number): void;
+    protected keyboardSpin(direction: 'up' | 'down'): Promise<void>;
     protected renderInput(): import("lit-html").TemplateResult<1>;
 }
 declare global {