igniteui-webcomponents 7.2.4 → 7.3.0-beta.1

package/{components/common → internals}/mixins/forms/form-transformers.js

@@ -1,5 +1,5 @@
-import { convertToDate, convertToDateRange, getDateFormValue, } from '../../../calendar/helpers.js';
-import { asNumber } from '../../util.js';
+import { convertToDate, convertToDateRange, getDateFormValue, } from '../../date/converters.js';
+import { asNumber } from '../../utils/math.js';
 export const FormValueDefaultTransformers = {
     setValue: (value) => value || '',
     getValue: (value) => value,

package/internals/mixins/forms/form-transformers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-transformers.js","sourceRoot":"","sources":["../../../../src/internals/mixins/forms/form-transformers.ts"],"names":[],"mappings":"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","sourcesContent":["import type { DateRangeValue } from '../../../components/types.js';\nimport {\n  convertToDate,\n  convertToDateRange,\n  getDateFormValue,\n} from '../../date/converters.js';\nimport { asNumber } from '../../utils/math.js';\nimport type { FormValueType, IgcFormControl } from './types.js';\n\nexport type FormValueTransformers<T> = {\n  setValue: (value: T) => T;\n  getValue: (value: T) => T;\n  setDefaultValue: (value: T) => T;\n  getDefaultValue: (value: T) => T;\n  setFormValue: (value: T, host: IgcFormControl) => FormValueType;\n};\n\nexport type FormValueConfig<T> = {\n  initialValue: T;\n  initialDefaultValue?: T;\n  transformers?: Partial<FormValueTransformers<T>>;\n};\n\n// Transformers\n\nexport const FormValueDefaultTransformers: FormValueTransformers<string> = {\n  setValue: (value) => value || '',\n  getValue: (value) => value,\n  setDefaultValue: (value) => value || '',\n  getDefaultValue: (value) => value,\n  setFormValue: (value, _) => value || null,\n};\n\nexport const FormValueBooleanTransformers: Partial<\n  FormValueTransformers<boolean>\n> = {\n  setValue: Boolean,\n  setDefaultValue: Boolean,\n  setFormValue: (checked, host) =>\n    checked && 'value' in host ? (host.value as string) || 'on' : null,\n};\n\nexport const FormValueNumberTransformers: Partial<\n  FormValueTransformers<number>\n> = {\n  setValue: asNumber,\n  setDefaultValue: asNumber,\n  setFormValue: (value) => value.toString(),\n};\n\nexport const FormValueDateTimeTransformers: Partial<\n  FormValueTransformers<Date | null>\n> = {\n  setValue: convertToDate,\n  setDefaultValue: convertToDate,\n  setFormValue: getDateFormValue,\n};\n\nexport const FormValueDateRangeTransformers: Partial<\n  FormValueTransformers<DateRangeValue | null>\n> = {\n  setValue: convertToDateRange,\n  setDefaultValue: convertToDateRange,\n  setFormValue: (value, host) => {\n    if (!host.name) {\n      return null;\n    }\n    const start = value?.start?.toISOString();\n    const end = value?.end?.toISOString();\n\n    const formData = new FormData();\n\n    if (start) {\n      formData.append(`${host.name}-start`, start);\n    }\n    if (end) {\n      formData.append(`${host.name}-end`, end);\n    }\n\n    return formData;\n  },\n};\n\n/* blazorSuppress */\nexport const FormValueFileListTransformers: FormValueTransformers<FileList | null> =\n  {\n    setValue: (value) => value || null,\n    getValue: (value) => value,\n    setDefaultValue: (value) => value || null,\n    getDefaultValue: (value) => value,\n    setFormValue: (files, host) => {\n      if (!(host.name && files)) {\n        return null;\n      }\n\n      const formData = new FormData();\n      for (const file of files) {\n        formData.append(host.name, file);\n      }\n\n      return formData;\n    },\n  };\n\nexport const FormValueSelectTransformers: Partial<\n  FormValueTransformers<string | undefined>\n> = {\n  setValue: (value) => value || undefined,\n  setDefaultValue: (value) => value || undefined,\n};\n"]}

package/internals/mixins/forms/form-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-value.js","sourceRoot":"","sources":["../../../../src/internals/mixins/forms/form-value.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,4BAA4B,GAE7B,MAAM,wBAAwB,CAAC;AAIhC,MAAM,OAAO,SAAS;aACI,oBAAe,GAAG,eAAwB,CAAC;IASnE,YAAY,IAAoB,EAAE,MAA0B;QAC1D,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,YAAY,CAAC;QAClC,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,mBAAmB,IAAI,IAAI,CAAC,MAAM,CAAC;QAC/D,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;QAErD,IAAI,CAAC,aAAa,GAAG;YACnB,GAAG,4BAA4B;YAC/B,GAAG,MAAM,CAAC,YAAY;SACK,CAAC;IAChC,CAAC;IAEM,oBAAoB,CAAC,KAAQ;QAClC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,aAAa,CAAC,IAAI,CACrB,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CACxD,CAAC;IACJ,CAAC;IAED,IAAW,YAAY,CAAC,KAAQ;QAC9B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;IACjE,CAAC;IAED,IAAW,YAAY;QACrB,OAAO,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAChE,CAAC;IAED,IAAW,KAAK,CAAC,KAAQ;QACvB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACnD,CAAC;IAED,IAAW,KAAK;QACd,OAAO,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAClD,CAAC;;AAGH,MAAM,UAAU,oBAAoB,CAClC,IAAgB,EAChB,MAA0B;IAE1B,OAAO,IAAI,SAAS,CAAC,IAAsB,EAAE,MAAM,CAAC,CAAC;AACvD,CAAC","sourcesContent":["import type { LitElement } from 'lit';\nimport {\n  type FormValueConfig,\n  FormValueDefaultTransformers,\n  type FormValueTransformers,\n} from './form-transformers.js';\nimport type { IgcFormControl } from './types.js';\n\n/* blazorSuppress */\nexport class FormValue<T> {\n  private static readonly setFormValueKey = '_setFormValue' as const;\n\n  private readonly _host: IgcFormControl;\n  private readonly _transformers: FormValueTransformers<T>;\n  private readonly _setFormValue: IgcFormControl[typeof FormValue.setFormValueKey];\n\n  private _value: T;\n  private _defaultValue: T;\n\n  constructor(host: IgcFormControl, config: FormValueConfig<T>) {\n    this._host = host;\n    this._value = config.initialValue;\n    this._defaultValue = config.initialDefaultValue ?? this._value;\n    this._setFormValue = host[FormValue.setFormValueKey];\n\n    this._transformers = {\n      ...FormValueDefaultTransformers,\n      ...config.transformers,\n    } as FormValueTransformers<T>;\n  }\n\n  public setValueAndFormState(value: T): void {\n    this.value = value;\n    this._setFormValue.call(\n      this._host,\n      this._transformers.setFormValue(this.value, this._host)\n    );\n  }\n\n  public set defaultValue(value: T) {\n    this._defaultValue = this._transformers.setDefaultValue(value);\n  }\n\n  public get defaultValue(): T {\n    return this._transformers.getDefaultValue(this._defaultValue);\n  }\n\n  public set value(value: T) {\n    this._value = this._transformers.setValue(value);\n  }\n\n  public get value(): T {\n    return this._transformers.getValue(this._value);\n  }\n}\n\nexport function createFormValueState<T>(\n  host: LitElement,\n  config: FormValueConfig<T>\n): FormValue<T> {\n  return new FormValue(host as IgcFormControl, config);\n}\n"]}

package/{components/common → internals}/mixins/forms/types.d.ts

@@ -1,10 +1,11 @@
-import type { LitElement } from 'lit';
+import type { LitElement, TemplateResult } from 'lit';
+import type { ValidationContainerConfig } from '../../../components/validation-container/validation-container.js';
 import type { ElementInternalsController } from '../../controllers/internals.js';
 import type { Validator } from '../../validators.js';
 export type FormRestoreMode = 'autocomplete' | 'restore';
 export type FormValueType = string | File | FormData | null;
 export type IgcFormControl = LitElement & (FormAssociatedElementInterface | FormAssociatedCheckboxElementInterface);
-declare class BaseFormAssociatedElement {
+export declare class BaseFormAssociatedElement {
     static readonly formAssociated: boolean;
     protected readonly _internals: ElementInternalsController;
     protected readonly _formValue: unknown;
@@ -25,7 +26,7 @@ declare class BaseFormAssociatedElement {
      */
     invalid: boolean;
     /**
-     * The name attribute of the control.
+     * The name of the control, submitted with the form data.
      * @attr
      */
     name: string;
@@ -62,9 +63,21 @@ declare class BaseFormAssociatedElement {
      * regards to its value.
      */
     protected _setTouchedState(): void;
+    /**
+     * Sets the **touched** state of the component and emits `eventName` - the pair every
+     * user-interaction handler must apply when it responds to input.
+     *
+     * The host must compose the event-emitter mixin somewhere in its heritage.
+     */
+    protected _emitTouchedEvent(eventName: string, init?: CustomEventInit): boolean;
+    /**
+     * Renders a validation container bound to the component, projecting its helper-text
+     * and validation message slots.
+     */
+    protected _renderValidationContainer(config?: ValidationContainerConfig): TemplateResult;
     /**
      * Sets the default value of the component.
-     * Called in `attributeChangedCallback`(i.e. when the `value` attribute of the control is set).
+     * Called in `attributeChangedCallback` (i.e. when the `value` attribute of the control is set).
      */
     protected _setDefaultValue(current: string | null): void;
     /**
@@ -108,9 +121,9 @@ declare class BaseFormAssociatedElement {
      * This is not implemented currently.
      */
     protected formStateRestoreCallback(state: FormValueType, mode: FormRestoreMode): void;
-    /** Checks for validity of the control and emits the invalid event if it invalid. */
+    /** Checks for validity of the control and emits the invalid event if it's invalid. */
     checkValidity(): boolean;
-    /** Checks for validity of the control and shows the browser message if it invalid. */
+    /** Checks for validity of the control and shows the browser message if it's invalid. */
     reportValidity(): boolean;
     /**
      * Sets a custom validation message for the control.
@@ -122,6 +135,12 @@ export declare class FormAssociatedElementInterface extends BaseFormAssociatedEl
     /** The initial value of the component. */
     set defaultValue(value: unknown);
     get defaultValue(): unknown;
+    /**
+     * Commits a user-initiated value change: sets the **touched** state **before** assigning
+     * to the public `value` setter, so the validation cycle the setter runs applies invalid
+     * styling in the same pass, then emits `eventName` with the coerced value as `detail`.
+     */
+    protected _commitValue(value: unknown, eventName: string): boolean;
 }
 export declare class FormAssociatedCheckboxElementInterface extends BaseFormAssociatedElement {
     /** The initial checked state of the component. */
@@ -140,4 +159,3 @@ export declare class FormRequiredInterface {
 }
 export declare const InternalInvalidEvent = "igc-form-internal-invalid";
 export declare const InternalResetEvent = "igc-form-internal-reset";
-export {};

package/internals/mixins/forms/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/internals/mixins/forms/types.ts"],"names":[],"mappings":"AAkNA,MAAM,CAAC,MAAM,oBAAoB,GAAG,2BAA2B,CAAC;AAChE,MAAM,CAAC,MAAM,kBAAkB,GAAG,yBAAyB,CAAC","sourcesContent":["import type { LitElement, TemplateResult } from 'lit';\nimport type { ValidationContainerConfig } from '../../../components/validation-container/validation-container.js';\nimport type { ElementInternalsController } from '../../controllers/internals.js';\nimport type { Validator } from '../../validators.js';\n\nexport type FormRestoreMode = 'autocomplete' | 'restore';\nexport type FormValueType = string | File | FormData | null;\nexport type IgcFormControl = LitElement &\n  (FormAssociatedElementInterface | FormAssociatedCheckboxElementInterface);\n\nexport declare class BaseFormAssociatedElement {\n  public static readonly formAssociated: boolean;\n\n  //#region Properties\n\n  protected readonly _internals: ElementInternalsController;\n  protected readonly _formValue: unknown;\n\n  protected _pristine: boolean;\n  protected _disabled: boolean;\n  protected _invalid: boolean;\n\n  protected get __validators(): Validator[];\n\n  /**\n   * The disabled state of the component.\n   * @attr\n   * @default false\n   */\n  public disabled: boolean;\n\n  /**\n   * Sets the control into invalid state (visual state only).\n   * @attr\n   * @default false\n   */\n  public invalid: boolean;\n\n  /**\n   * The name of the control, submitted with the form data.\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  //#endregion\n\n  //#region Methods\n\n  /**\n   * Default implementation for handling the `Enter` key press on the component.\n   * Checks if the component is inside a form and if so, submits it.\n   */\n  protected _handleEnterKeydown(event: KeyboardEvent): void;\n\n  /**\n   * Sets the **touched** state of the component and invokes {@link BaseFormAssociatedElement._validate | `_validate()`} method.\n   *\n   * As the naming of the method suggests, this should be invoked either on **blur** or **focusout**, depending\n   * on the DOM structure and how focus state is managed by the component.\n   */\n  protected _handleBlur(): void;\n\n  /**\n   * Sets the **touched** state of the component and **DOES NOT** invoke {@link BaseFormAssociatedElement._validate | `_validate()`} method.\n   *\n   * This should be called whenever a user interaction triggers a response, usually an event, from the component in\n   * regards to its value.\n   */\n  protected _setTouchedState(): void;\n\n  /**\n   * Sets the **touched** state of the component and emits `eventName` - the pair every\n   * user-interaction handler must apply when it responds to input.\n   *\n   * The host must compose the event-emitter mixin somewhere in its heritage.\n   */\n  protected _emitTouchedEvent(\n    eventName: string,\n    init?: CustomEventInit\n  ): boolean;\n\n  /**\n   * Renders a validation container bound to the component, projecting its helper-text\n   * and validation message slots.\n   */\n  protected _renderValidationContainer(\n    config?: ValidationContainerConfig\n  ): TemplateResult;\n\n  /**\n   * Sets the default value of the component.\n   * Called in `attributeChangedCallback` (i.e. when the `value` attribute of the control is set).\n   */\n  protected _setDefaultValue(current: string | null): void;\n\n  /**\n   * Called when the associated parent form is reset.\n   */\n  protected _restoreDefaultValue(): void;\n\n  /**\n   * Executes the component validators and updates the internal validity state.\n   */\n  protected _validate(message?: string): void;\n\n  /**\n   * Sets the component's submission value and state.\n   */\n  protected _setFormValue(value: FormValueType, state?: FormValueType): void;\n\n  /**\n   * Called by the browser when it associates/disassociates the component with/from a given form element.\n   * Receives the form element as a parameter.\n   *\n   * @remarks\n   * This is not implemented currently.\n   */\n  protected formAssociatedCallback(form: HTMLFormElement): void;\n\n  /**\n   * Called whenever the component or a parent `fieldset` elements are disabled.\n   * Receives the current disabled state.\n   */\n  protected formDisabledCallback(state: boolean): void;\n\n  /**\n   * Called when the form is reset.\n   * Resets the component value/checked state to the default one, internal state and validation.\n   *\n   * @remarks\n   * The default implementation calls {@link BaseFormAssociatedElement._restoreDefaultValue | `_restoreDefaultValue`}.\n   * If additional customization is needed, it is better to override that method instead of this callback.\n   */\n  protected formResetCallback(): void;\n\n  /**\n   * Called when the browser attempts to automatically fill out the component.\n   *\n   * @remarks\n   * This is not implemented currently.\n   */\n  protected formStateRestoreCallback(\n    state: FormValueType,\n    mode: FormRestoreMode\n  ): void;\n\n  /** Checks for validity of the control and emits the invalid event if it's invalid. */\n  public checkValidity(): boolean;\n\n  /** Checks for validity of the control and shows the browser message if it's 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  //#endregion\n}\n\nexport declare class FormAssociatedElementInterface extends BaseFormAssociatedElement {\n  /** The initial value of the component. */\n  public set defaultValue(value: unknown);\n  public get defaultValue(): unknown;\n\n  /**\n   * Commits a user-initiated value change: sets the **touched** state **before** assigning\n   * to the public `value` setter, so the validation cycle the setter runs applies invalid\n   * styling in the same pass, then emits `eventName` with the coerced value as `detail`.\n   */\n  protected _commitValue(value: unknown, eventName: string): boolean;\n}\n\nexport declare class FormAssociatedCheckboxElementInterface extends BaseFormAssociatedElement {\n  /** The initial checked state of the component. */\n  public set defaultChecked(value: boolean);\n  public get defaultChecked(): boolean;\n}\n\nexport declare class FormRequiredInterface {\n  protected _required: boolean;\n\n  /**\n   * When set, makes the component a required field for validation.\n   * @attr\n   * @default false\n   */\n  public set required(value: boolean);\n  public get required(): boolean;\n}\n\nexport const InternalInvalidEvent = 'igc-form-internal-invalid';\nexport const InternalResetEvent = 'igc-form-internal-reset';\n"]}

package/internals/mixins/i18n.d.ts

@@ -0,0 +1,31 @@
+import type { LitElement } from 'lit';
+import { type I18nController, type I18nControllerConfig } from '../i18n/i18n-controller.js';
+import type { AbstractConstructor } from './constructor.js';
+export declare class I18nInterface<T extends object, TGet extends T = Required<T>> {
+    protected readonly _i18nController: I18nController<T>;
+    set locale(value: string);
+    get locale(): string;
+    set resourceStrings(value: T);
+    get resourceStrings(): TGet;
+}
+/**
+ * Mixes in the localization surface of a component - the `locale` and
+ * `resourceStrings` reactive properties forwarding to an i18n controller
+ * created with the passed configuration.
+ *
+ * The controller is exposed as the protected `_i18nController` for hosts
+ * that need direct access.
+ *
+ * `TGet` is the type of the resolved strings. It defaults to `Required<T>`,
+ * because the controller merges the full `defaultEN` set under any overrides,
+ * so every key resolves even though the resource interfaces declare them
+ * optional. Components that still accept a deprecated component-specific
+ * resource shape override it: `T` is the union of the two shapes accepted,
+ * `TGet` their intersection.
+ *
+ * The base class must be the first argument - the manifest analyzer resolves
+ * the superclass of an `extends Mixin(...)` clause from the first argument,
+ * and a leading config object would sever the inheritance chain in the
+ * manifest (dropping every inherited public member from the docs).
+ */
+export declare function I18nMixin<T extends object, B extends AbstractConstructor<LitElement>, TGet extends T = Required<T>>(superClass: B, config: I18nControllerConfig<T>): AbstractConstructor<I18nInterface<T, TGet>> & B;

package/internals/mixins/i18n.js

@@ -0,0 +1,36 @@
+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 { property } from 'lit/decorators.js';
+import { addI18nController, } from '../i18n/i18n-controller.js';
+export function I18nMixin(superClass, config) {
+    class I18nElement extends superClass {
+        constructor() {
+            super(...arguments);
+            this._i18nController = addI18nController(this, config);
+        }
+        set locale(value) {
+            this._i18nController.locale = value;
+        }
+        get locale() {
+            return this._i18nController.locale;
+        }
+        set resourceStrings(value) {
+            this._i18nController.resourceStrings = value;
+        }
+        get resourceStrings() {
+            return this._i18nController.resourceStrings;
+        }
+    }
+    __decorate([
+        property()
+    ], I18nElement.prototype, "locale", null);
+    __decorate([
+        property({ attribute: false })
+    ], I18nElement.prototype, "resourceStrings", null);
+    return I18nElement;
+}
+//# sourceMappingURL=i18n.js.map

package/internals/mixins/i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.js","sourceRoot":"","sources":["../../../src/internals/mixins/i18n.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EACL,iBAAiB,GAGlB,MAAM,4BAA4B,CAAC;AAkCpC,MAAM,UAAU,SAAS,CAIvB,UAAa,EAAE,MAA+B;IAC9C,MAAe,WAAY,SAAQ,UAAU;QAA7C;;YACqB,oBAAe,GAAG,iBAAiB,CAAI,IAAI,EAAE,MAAM,CAAC,CAAC;QA2B1E,CAAC;QAnBC,IAAW,MAAM,CAAC,KAAa;YAC7B,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,KAAK,CAAC;QACtC,CAAC;QAED,IAAW,MAAM;YACf,OAAO,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC;QACrC,CAAC;QAMD,IAAW,eAAe,CAAC,KAAQ;YACjC,IAAI,CAAC,eAAe,CAAC,eAAe,GAAG,KAAK,CAAC;QAC/C,CAAC;QAED,IAAW,eAAe;YACxB,OAAO,IAAI,CAAC,eAAe,CAAC,eAAuB,CAAC;QACtD,CAAC;KACF;IAnBC;QADC,QAAQ,EAAE;6CAGV;IAUD;QADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;sDAG9B;IAMH,OAAO,WACJ,CAAC;AACN,CAAC","sourcesContent":["import type { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport {\n  addI18nController,\n  type I18nController,\n  type I18nControllerConfig,\n} from '../i18n/i18n-controller.js';\nimport type { AbstractConstructor } from './constructor.js';\n\nexport declare class I18nInterface<\n  T extends object,\n  TGet extends T = Required<T>,\n> {\n  protected readonly _i18nController: I18nController<T>;\n  public set locale(value: string);\n  public get locale(): string;\n  public set resourceStrings(value: T);\n  public get resourceStrings(): TGet;\n}\n\n/**\n * Mixes in the localization surface of a component - the `locale` and\n * `resourceStrings` reactive properties forwarding to an i18n controller\n * created with the passed configuration.\n *\n * The controller is exposed as the protected `_i18nController` for hosts\n * that need direct access.\n *\n * `TGet` is the type of the resolved strings. It defaults to `Required<T>`,\n * because the controller merges the full `defaultEN` set under any overrides,\n * so every key resolves even though the resource interfaces declare them\n * optional. Components that still accept a deprecated component-specific\n * resource shape override it: `T` is the union of the two shapes accepted,\n * `TGet` their intersection.\n *\n * The base class must be the first argument - the manifest analyzer resolves\n * the superclass of an `extends Mixin(...)` clause from the first argument,\n * and a leading config object would sever the inheritance chain in the\n * manifest (dropping every inherited public member from the docs).\n */\nexport function I18nMixin<\n  T extends object,\n  B extends AbstractConstructor<LitElement>,\n  TGet extends T = Required<T>,\n>(superClass: B, config: I18nControllerConfig<T>) {\n  abstract class I18nElement extends superClass {\n    protected readonly _i18nController = addI18nController<T>(this, config);\n\n    /**\n     * The locale used to resolve the component's resource strings.\n     * Falls back to the global locale when not set.\n     * @attr locale\n     */\n    @property()\n    public set locale(value: string) {\n      this._i18nController.locale = value;\n    }\n\n    public get locale(): string {\n      return this._i18nController.locale;\n    }\n\n    /**\n     * The resource strings for localization.\n     */\n    @property({ attribute: false })\n    public set resourceStrings(value: T) {\n      this._i18nController.resourceStrings = value;\n    }\n\n    public get resourceStrings(): TGet {\n      return this._i18nController.resourceStrings as TGet;\n    }\n  }\n  return I18nElement as unknown as AbstractConstructor<I18nInterface<T, TGet>> &\n    B;\n}\n"]}

package/{components/common → internals}/mixins/mask-behavior.d.ts

@@ -1,6 +1,7 @@
 import type { LitElement } from 'lit';
-import type { MaskParser } from '../../mask-input/mask-parser.js';
-import type { RangeTextSelectMode, SelectionRangeDirection } from '../../types.js';
+import { type MaskEditKind, type MaskHistory } from '../../components/mask-input/mask-history.js';
+import type { MaskParser } from '../../components/mask-input/mask-parser.js';
+import type { RangeTextSelectMode, SelectionRangeDirection } from '../../components/types.js';
 import type { AbstractConstructor } from './constructor.js';
 export type MaskSelection = {
     start: number;
@@ -22,8 +23,10 @@ export declare class MaskBehaviorElementInterface {
     protected _compositionStart: number;
     protected _focused: boolean;
     protected _maskedValue: string;
+    protected readonly _history: MaskHistory;
     protected get _inputSelection(): MaskSelection;
     protected get _isEmptyMask(): boolean;
+    protected get _historyText(): string;
     /**
      * Makes the control a readonly field.
      * @attr readonly
@@ -44,12 +47,17 @@ export declare class MaskBehaviorElementInterface {
     get prompt(): string;
     set prompt(value: string);
     protected _handleInput(event: InputEvent): Promise<void>;
+    protected _handleBeforeInput(event: InputEvent): void;
     protected _updateInput(text: string, range: MaskSelection): Promise<void>;
+    protected _commitMaskedValue(value: string): void;
     protected _emitInputEvent(): void;
     protected _setMaskSelection(event: Event): void;
     protected _handleCompositionStart(): void;
     protected _handleCompositionEnd(event: CompositionEvent): void;
     protected _handleClick(): void;
+    protected _recordHistory(kind: MaskEditKind, next: string, caret: number, selection?: MaskSelection): void;
+    protected _historyStep(direction: 'undo' | 'redo'): Promise<void>;
+    protected _historyResync(): void;
     /** Sets the text selection range of the control. */
     setSelectionRange(start?: number, end?: number, direction?: SelectionRangeDirection): void;
     /** Replaces the selected text in the control and re-applies the mask. */
@@ -60,14 +68,15 @@ export declare class MaskBehaviorElementInterface {
  * composition handling, range text replacement) to a LitElement-derived class.
  *
  * The host class is expected to provide:
- * - `_input`            – the native `<input>` element (typically via `@query('input')`).
- * - `_parser`           – a {@link MaskParser} (or subclass) instance.
- * - `_setTouchedState`  – from `FormAssociatedMixin`.
- * - `emitEvent`         – from `EventEmitterMixin`.
- * - `select`            – from the host base.
+ * - `_input`            - the native `<input>` element (typically via `@query('input')`).
+ * - `_parser`           - a {@link MaskParser} (or subclass) instance.
+ * - `_setTouchedState`  - from `FormAssociatedMixin`.
+ * - `_emitTouchedEvent` - from `FormAssociatedMixin`.
+ * - `emitEvent`         - from `EventEmitterMixin`.
+ * - `select`            - from the host base.
  *
  * The host class must implement `_syncValueFromMask` to bridge the masked
  * text back into its public `value`. It is called by the default
- * `_updateInput` implementation and by `setRangeText`.
+ * `_commitMaskedValue` implementation.
  */
 export declare function MaskBehaviorMixin<T extends AbstractConstructor<LitElement>>(superClass: T): AbstractConstructor<MaskBehaviorElementInterface> & T;

package/{components/common → internals}/mixins/mask-behavior.js

@@ -5,16 +5,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { property, state } from 'lit/decorators.js';
+import { createMaskHistory, } from '../../components/mask-input/mask-history.js';
+import { addKeybindings, ctrlKey, metaKey, shiftKey, } from '../controllers/key-bindings.js';
+const MaskEditKinds = new Map([
+    ['insertText', 'insert'],
+    ['deleteContentBackward', 'delete-backward'],
+    ['deleteContentForward', 'delete-forward'],
+    ['deleteByCut', 'atomic'],
+    ['insertFromPaste', 'atomic'],
+    ['insertFromDrop', 'atomic'],
+    ['', 'atomic'],
+]);
 export function MaskBehaviorMixin(superClass) {
     class MaskBehaviorElement extends superClass {
-        constructor() {
-            super(...arguments);
-            this._maskSelection = { start: 0, end: 0 };
-            this._compositionStart = 0;
-            this._focused = false;
-            this._maskedValue = '';
-            this.readOnly = false;
-        }
         get _inputSelection() {
             return {
                 start: this._input?.selectionStart || 0,
@@ -24,6 +27,32 @@ export function MaskBehaviorMixin(superClass) {
         get _isEmptyMask() {
             return this._maskedValue === this._parser.emptyMask;
         }
+        get _historyText() {
+            return this._maskedValue || this._parser.emptyMask;
+        }
+        constructor(...args) {
+            super(...args);
+            this._maskSelection = { start: 0, end: 0 };
+            this._compositionStart = 0;
+            this._history = createMaskHistory(() => `${this._parser.mask} ${this._parser.prompt}`);
+            this._focused = false;
+            this._maskedValue = '';
+            this.readOnly = false;
+            const step = (direction) => (event) => {
+                if (!event.isComposing) {
+                    this._historyStep(direction);
+                }
+            };
+            addKeybindings(this, {
+                skip: () => this.readOnly,
+                bindingDefaults: { repeat: true },
+            })
+                .set([ctrlKey, 'z'], step('undo'))
+                .set([metaKey, 'z'], step('undo'))
+                .set([ctrlKey, 'y'], step('redo'))
+                .set([ctrlKey, shiftKey, 'z'], step('redo'))
+                .set([metaKey, shiftKey, 'z'], step('redo'));
+        }
         set mask(value) {
             this._parser.mask = value;
         }
@@ -40,42 +69,58 @@ export function MaskBehaviorMixin(superClass) {
             const value = this._input?.value ?? '';
             const { start, end } = this._maskSelection;
             const deletePosition = this._parser.getNextNonLiteralPosition(end) + 1;
+            if (inputType === 'historyUndo' || inputType === 'historyRedo') {
+                return this._historyStep(inputType === 'historyUndo' ? 'undo' : 'redo');
+            }
+            if (inputType === 'deleteContentBackward' && isComposing) {
+                return;
+            }
+            const kind = MaskEditKinds.get(inputType ?? '');
+            if (kind === undefined) {
+                if (!isComposing) {
+                    this.requestUpdate();
+                }
+                return;
+            }
             this._setTouchedState();
             switch (inputType) {
-                case 'deleteContentForward':
-                    this._updateInput('', { start, end: deletePosition });
-                    await this.updateComplete;
-                    return this._input?.setSelectionRange(deletePosition, deletePosition);
+                case 'deleteContentForward': {
+                    await this._updateInput('', { start, end: deletePosition }, kind);
+                    this._input?.setSelectionRange(deletePosition, deletePosition);
+                    this._history.settle(this._historyText, deletePosition);
+                    return;
+                }
                 case 'deleteContentBackward':
-                    if (isComposing)
-                        return;
                     return this._updateInput('', {
                         start: this._parser.getPreviousNonLiteralPosition(this._inputSelection.start + 1),
                         end,
-                    });
+                    }, kind);
                 case 'deleteByCut':
-                    return this._updateInput('', this._maskSelection);
+                    return this._updateInput('', this._maskSelection, kind);
                 case 'insertText':
-                    return this._updateInput(value.substring(start, this._inputSelection.end), this._maskSelection);
+                    return this._updateInput(value.substring(start, this._inputSelection.end), this._maskSelection, kind);
                 case 'insertFromPaste':
                     return this._updateInput(value.substring(start, this._inputSelection.end), {
                         start,
                         end: this._inputSelection.start,
-                    });
+                    }, kind);
                 case 'insertFromDrop':
-                    return this._updateInput(value.substring(this._inputSelection.start, this._inputSelection.end), { ...this._inputSelection });
+                    return this._updateInput(value.substring(this._inputSelection.start, this._inputSelection.end), { ...this._inputSelection }, kind, {
+                        start: this._inputSelection.start,
+                        end: this._inputSelection.start,
+                    });
                 case undefined:
                 case '':
                     return this._updateInput(this._parser.parse(value.substring(start, this._inputSelection.end)), {
                         start,
                         end: this._inputSelection.end,
-                    });
+                    }, kind, { start, end: start });
             }
         }
-        async _updateInput(text, range) {
+        async _updateInput(text, range, kind = 'atomic', caretBefore) {
             const { value, end } = this._parser.replace(this._maskedValue, text, range.start, range.end);
-            this._maskedValue = value;
-            this._syncValueFromMask();
+            this._recordHistory(kind, value, end, caretBefore ?? this._maskSelection);
+            this._commitMaskedValue(value);
             this.requestUpdate();
             if (range.start !== this._parser.mask.length) {
                 this._emitInputEvent();
@@ -83,9 +128,12 @@ export function MaskBehaviorMixin(superClass) {
             await this.updateComplete;
             this._input?.setSelectionRange(end, end);
         }
+        _commitMaskedValue(value) {
+            this._maskedValue = value;
+            this._syncValueFromMask();
+        }
         _emitInputEvent() {
-            this._setTouchedState();
-            this.emitEvent('igcInput', { detail: this._maskedValue });
+            this._emitTouchedEvent('igcInput', { detail: this._maskedValue });
         }
         _setMaskSelection(event) {
             this._maskSelection = this._inputSelection;
@@ -97,10 +145,7 @@ export function MaskBehaviorMixin(superClass) {
             this._compositionStart = this._inputSelection.start;
         }
         _handleCompositionEnd({ data }) {
-            this._updateInput(data, {
-                start: this._compositionStart,
-                end: this._inputSelection.end,
-            });
+            this._updateInput(data, { start: this._compositionStart, end: this._inputSelection.end }, 'atomic', { start: this._compositionStart, end: this._compositionStart });
         }
         _handleClick() {
             const { selectionStart: start, selectionEnd: end } = this._input ?? {
@@ -111,6 +156,47 @@ export function MaskBehaviorMixin(superClass) {
                 this.select();
             }
         }
+        _handleBeforeInput(event) {
+            const { inputType } = event;
+            if (inputType !== 'historyUndo' && inputType !== 'historyRedo') {
+                return;
+            }
+            event.preventDefault();
+            if (!this.readOnly) {
+                this._historyStep(inputType === 'historyUndo' ? 'undo' : 'redo');
+            }
+        }
+        _recordHistory(kind, next, caret, selection = this._inputSelection) {
+            const previous = this._historyText;
+            if (next !== previous) {
+                this._history.record(kind, { value: previous, ...selection });
+            }
+            this._history.settle(next, caret);
+        }
+        _historyResync() {
+            this._history.resync(this._historyText);
+        }
+        async _historyStep(direction) {
+            if (this.readOnly) {
+                return;
+            }
+            const current = {
+                value: this._historyText,
+                ...this._inputSelection,
+            };
+            const state = direction === 'undo'
+                ? this._history.undo(current)
+                : this._history.redo(current);
+            if (!state) {
+                return;
+            }
+            this._setTouchedState();
+            this._commitMaskedValue(state.value);
+            this.requestUpdate();
+            this._emitInputEvent();
+            await this.updateComplete;
+            this.setSelectionRange(state.start, state.end);
+        }
         setSelectionRange(start, end, direction = 'none') {
             this._input?.setSelectionRange(start ?? null, end ?? null, direction);
             this._maskSelection = { start: start ?? 0, end: end ?? 0 };
@@ -120,8 +206,9 @@ export function MaskBehaviorMixin(superClass) {
             const _start = start ?? current.start;
             const _end = end ?? current.end;
             const result = this._parser.replace(this._maskedValue || this._parser.emptyMask, replacement, _start, _end);
-            this._maskedValue = this._parser.apply(this._parser.parse(result.value));
-            this._syncValueFromMask();
+            const next = this._parser.apply(this._parser.parse(result.value));
+            this._recordHistory('atomic', next, _start, current);
+            this._commitMaskedValue(next);
             this.updateComplete.then(() => {
                 switch (selectMode) {
                     case 'select':

package/internals/mixins/mask-behavior.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mask-behavior.js","sourceRoot":"","sources":["../../../src/internals/mixins/mask-behavior.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EACL,iBAAiB,GAIlB,MAAM,6CAA6C,CAAC;AAMrD,OAAO,EACL,cAAc,EACd,OAAO,EACP,OAAO,EACP,QAAQ,GACT,MAAM,gCAAgC,CAAC;AAcxC,MAAM,aAAa,GAAG,IAAI,GAAG,CAAuB;IAClD,CAAC,YAAY,EAAE,QAAQ,CAAC;IACxB,CAAC,uBAAuB,EAAE,iBAAiB,CAAC;IAC5C,CAAC,sBAAsB,EAAE,gBAAgB,CAAC;IAC1C,CAAC,aAAa,EAAE,QAAQ,CAAC;IACzB,CAAC,iBAAiB,EAAE,QAAQ,CAAC;IAC7B,CAAC,gBAAgB,EAAE,QAAQ,CAAC;IAC5B,CAAC,EAAE,EAAE,QAAQ,CAAC;CACf,CAAC,CAAC;AA6HH,MAAM,UAAU,iBAAiB,CAC/B,UAAa;IAEb,MAAe,mBAAoB,SAAQ,UAAU;QAsCnD,IAAc,eAAe;YAC3B,OAAO;gBACL,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,cAAc,IAAI,CAAC;gBACvC,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,YAAY,IAAI,CAAC;aACpC,CAAC;QACJ,CAAC;QAGD,IAAc,YAAY;YACxB,OAAO,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC;QACtD,CAAC;QAOD,IAAc,YAAY;YACxB,OAAO,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC;QACrD,CAAC;QAMD,YAAY,GAAG,IAAW;YACxB,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;YA5CP,mBAAc,GAAkB,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC;YACrD,sBAAiB,GAAG,CAAC,CAAC;YAOb,aAAQ,GAAG,iBAAiB,CAC7C,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CACpD,CAAC;YAGQ,aAAQ,GAAG,KAAK,CAAC;YAGjB,iBAAY,GAAG,EAAE,CAAC;YA+DrB,aAAQ,GAAG,KAAK,CAAC;YA9BtB,MAAM,IAAI,GACR,CAAC,SAA0B,EAAE,EAAE,CAC/B,CAAC,KAAoB,EAAQ,EAAE;gBAC7B,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;oBACvB,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;gBAC/B,CAAC;YACH,CAAC,CAAC;YAEJ,cAAc,CAAC,IAAI,EAAE;gBACnB,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ;gBACzB,eAAe,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;aAClC,CAAC;iBACC,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;iBACjC,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;iBACjC,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;iBACjC,GAAG,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;iBAC3C,GAAG,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;QACjD,CAAC;QAqBD,IAAW,IAAI,CAAC,KAAa;YAC3B,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC;QAC5B,CAAC;QAED,IAAW,IAAI;YACb,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;QAC3B,CAAC;QASD,IAAW,MAAM,CAAC,KAAa;YAC7B,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,KAAK,CAAC;QAC9B,CAAC;QAED,IAAW,MAAM;YACf,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;QAC7B,CAAC;QAMS,KAAK,CAAC,YAAY,CAAC,EAC3B,SAAS,EACT,WAAW,GACA;YACX,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,KAAK,IAAI,EAAE,CAAC;YACvC,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC;YAC3C,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,yBAAyB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YAIvE,IAAI,SAAS,KAAK,aAAa,IAAI,SAAS,KAAK,aAAa,EAAE,CAAC;gBAC/D,OAAO,IAAI,CAAC,YAAY,CAAC,SAAS,KAAK,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YAC1E,CAAC;YAGD,IAAI,SAAS,KAAK,uBAAuB,IAAI,WAAW,EAAE,CAAC;gBACzD,OAAO;YACT,CAAC;YAED,MAAM,IAAI,GAAG,aAAa,CAAC,GAAG,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC;YAEhD,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;gBAKvB,IAAI,CAAC,WAAW,EAAE,CAAC;oBACjB,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,CAAC;gBACD,OAAO;YACT,CAAC;YAED,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAExB,QAAQ,SAAS,EAAE,CAAC;gBAClB,KAAK,sBAAsB,CAAC,CAAC,CAAC;oBAC5B,MAAM,IAAI,CAAC,YAAY,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,cAAc,EAAE,EAAE,IAAI,CAAC,CAAC;oBAClE,IAAI,CAAC,MAAM,EAAE,iBAAiB,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;oBAG/D,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;oBACxD,OAAO;gBACT,CAAC;gBAED,KAAK,uBAAuB;oBAC1B,OAAO,IAAI,CAAC,YAAY,CACtB,EAAE,EACF;wBACE,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,6BAA6B,CAC/C,IAAI,CAAC,eAAe,CAAC,KAAK,GAAG,CAAC,CAC/B;wBACD,GAAG;qBACJ,EACD,IAAI,CACL,CAAC;gBAEJ,KAAK,aAAa;oBAChB,OAAO,IAAI,CAAC,YAAY,CAAC,EAAE,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;gBAE1D,KAAK,YAAY;oBACf,OAAO,IAAI,CAAC,YAAY,CACtB,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,EAChD,IAAI,CAAC,cAAc,EACnB,IAAI,CACL,CAAC;gBAEJ,KAAK,iBAAiB;oBACpB,OAAO,IAAI,CAAC,YAAY,CACtB,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,EAChD;wBACE,KAAK;wBACL,GAAG,EAAE,IAAI,CAAC,eAAe,CAAC,KAAK;qBAChC,EACD,IAAI,CACL,CAAC;gBAEJ,KAAK,gBAAgB;oBAEnB,OAAO,IAAI,CAAC,YAAY,CACtB,KAAK,CAAC,SAAS,CACb,IAAI,CAAC,eAAe,CAAC,KAAK,EAC1B,IAAI,CAAC,eAAe,CAAC,GAAG,CACzB,EACD,EAAE,GAAG,IAAI,CAAC,eAAe,EAAE,EAC3B,IAAI,EACJ;wBACE,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,KAAK;wBACjC,GAAG,EAAE,IAAI,CAAC,eAAe,CAAC,KAAK;qBAChC,CACF,CAAC;gBAGJ,KAAK,SAAS,CAAC;gBACf,KAAK,EAAE;oBACL,OAAO,IAAI,CAAC,YAAY,CACtB,IAAI,CAAC,OAAO,CAAC,KAAK,CAChB,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CACjD,EACD;wBACE,KAAK;wBACL,GAAG,EAAE,IAAI,CAAC,eAAe,CAAC,GAAG;qBAC9B,EACD,IAAI,EACJ,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,CACtB,CAAC;YACN,CAAC;QACH,CAAC;QAOS,KAAK,CAAC,YAAY,CAC1B,IAAY,EACZ,KAAoB,EACpB,OAAqB,QAAQ,EAC7B,WAA2B;YAE3B,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CACzC,IAAI,CAAC,YAAY,EACjB,IAAI,EACJ,KAAK,CAAC,KAAK,EACX,KAAK,CAAC,GAAG,CACV,CAAC;YAEF,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,WAAW,IAAI,IAAI,CAAC,cAAc,CAAC,CAAC;YAC1E,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;YAC/B,IAAI,CAAC,aAAa,EAAE,CAAC;YAErB,IAAI,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;gBAC7C,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,CAAC;YAED,MAAM,IAAI,CAAC,cAAc,CAAC;YAC1B,IAAI,CAAC,MAAM,EAAE,iBAAiB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;QAC3C,CAAC;QASS,kBAAkB,CAAC,KAAa;YACxC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;YAC1B,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC;QAMS,eAAe;YACvB,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;QACpE,CAAC;QAES,iBAAiB,CAAC,KAAY;YACtC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC;YAC3C,IAAI,KAAK,YAAY,aAAa,EAAE,CAAC;gBACnC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;YAClC,CAAC;QACH,CAAC;QAES,uBAAuB;YAC/B,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC;QACtD,CAAC;QAES,qBAAqB,CAAC,EAAE,IAAI,EAAoB;YAExD,IAAI,CAAC,YAAY,CACf,IAAI,EACJ,EAAE,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,GAAG,EAAE,IAAI,CAAC,eAAe,CAAC,GAAG,EAAE,EAChE,QAAQ,EACR,EAAE,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,GAAG,EAAE,IAAI,CAAC,iBAAiB,EAAE,CAC/D,CAAC;QACJ,CAAC;QAES,YAAY;YACpB,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;gBAClE,cAAc,EAAE,CAAC;gBACjB,YAAY,EAAE,CAAC;aAChB,CAAC;YAGF,IAAI,KAAK,KAAK,GAAG,IAAI,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC;gBACxD,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,CAAC;QACH,CAAC;QAQS,kBAAkB,CAAC,KAAiB;YAC5C,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;YAE5B,IAAI,SAAS,KAAK,aAAa,IAAI,SAAS,KAAK,aAAa,EAAE,CAAC;gBAC/D,OAAO;YACT,CAAC;YAED,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,YAAY,CAAC,SAAS,KAAK,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YACnE,CAAC;QACH,CAAC;QAcS,cAAc,CACtB,IAAkB,EAClB,IAAY,EACZ,KAAa,EACb,YAA2B,IAAI,CAAC,eAAe;YAE/C,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC;YAEnC,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;gBACtB,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,CAAC,CAAC;YAChE,CAAC;YAED,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACpC,CAAC;QAGS,cAAc;YACtB,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC1C,CAAC;QAGS,KAAK,CAAC,YAAY,CAAC,SAA0B;YACrD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YAED,MAAM,OAAO,GAAqB;gBAChC,KAAK,EAAE,IAAI,CAAC,YAAY;gBACxB,GAAG,IAAI,CAAC,eAAe;aACxB,CAAC;YAEF,MAAM,KAAK,GACT,SAAS,KAAK,MAAM;gBAClB,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;gBAC7B,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAElC,IAAI,CAAC,KAAK,EAAE,CAAC;gBACX,OAAO;YACT,CAAC;YAED,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YACrC,IAAI,CAAC,aAAa,EAAE,CAAC;YAIrB,IAAI,CAAC,eAAe,EAAE,CAAC;YAEvB,MAAM,IAAI,CAAC,cAAc,CAAC;YAI1B,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;QACjD,CAAC;QAQM,iBAAiB,CACtB,KAAc,EACd,GAAY,EACZ,YAAqC,MAAM;YAE3C,IAAI,CAAC,MAAM,EAAE,iBAAiB,CAAC,KAAK,IAAI,IAAI,EAAE,GAAG,IAAI,IAAI,EAAE,SAAS,CAAC,CAAC;YACtE,IAAI,CAAC,cAAc,GAAG,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;QAC7D,CAAC;QAIM,YAAY,CACjB,WAAmB,EACnB,KAAc,EACd,GAAY,EACZ,UAAgC;YAEhC,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC;YACrC,MAAM,MAAM,GAAG,KAAK,IAAI,OAAO,CAAC,KAAK,CAAC;YACtC,MAAM,IAAI,GAAG,GAAG,IAAI,OAAO,CAAC,GAAG,CAAC;YAEhC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CACjC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,EAC3C,WAAW,EACX,MAAM,EACN,IAAI,CACL,CAAC;YACF,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;YAElE,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;YACrD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;YAE9B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;gBAC5B,QAAQ,UAAU,EAAE,CAAC;oBACnB,KAAK,QAAQ;wBACX,IAAI,CAAC,iBAAiB,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;wBACrC,MAAM;oBACR,KAAK,OAAO;wBACV,IAAI,CAAC,iBAAiB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;wBACvC,MAAM;oBACR,KAAK,KAAK;wBACR,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;wBACnC,MAAM;oBACR;wBACE,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;gBACvD,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;KAGF;IAnbW;QADT,KAAK,EAAE;yDACmB;IAGjB;QADT,KAAK,EAAE;6DACoB;IA+DrB;QADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDACnB;IAQxB;QADC,QAAQ,EAAE;mDAGV;IAaD;QADC,QAAQ,EAAE;qDAGV;IA0VH,OAAO,mBACJ,CAAC;AACN,CAAC","sourcesContent":["import type { LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport {\n  createMaskHistory,\n  type MaskEditKind,\n  type MaskHistory,\n  type MaskHistoryState,\n} from '../../components/mask-input/mask-history.js';\nimport type { MaskParser } from '../../components/mask-input/mask-parser.js';\nimport type {\n  RangeTextSelectMode,\n  SelectionRangeDirection,\n} from '../../components/types.js';\nimport {\n  addKeybindings,\n  ctrlKey,\n  metaKey,\n  shiftKey,\n} from '../controllers/key-bindings.js';\nimport type { AbstractConstructor } from './constructor.js';\n\nexport type MaskSelection = {\n  start: number;\n  end: number;\n};\n\n/**\n * The `inputType` values the mask editor models, mapped to their undo granularity.\n *\n * Anything absent is a native mutation we do not model - auto-fill is the empty-string\n * entry, `deleteWordBackward` and friends are simply not handled.\n */\nconst MaskEditKinds = new Map<string, MaskEditKind>([\n  ['insertText', 'insert'],\n  ['deleteContentBackward', 'delete-backward'],\n  ['deleteContentForward', 'delete-forward'],\n  ['deleteByCut', 'atomic'],\n  ['insertFromPaste', 'atomic'],\n  ['insertFromDrop', 'atomic'],\n  ['', 'atomic'],\n]);\n\n/**\n * Public + protected interface contributed by {@link MaskBehaviorMixin}.\n * Declared as a `declare class` so consumers can see protected members through\n * the cast return type (mirrors the pattern used by the form-associated mixins).\n */\nexport declare class MaskBehaviorElementInterface {\n  //#region Required from host\n\n  protected readonly _input?: HTMLInputElement;\n  protected readonly _parser: MaskParser;\n\n  /** Reflects the current parser state into the host's public value. */\n  protected _syncValueFromMask(): void;\n\n  /** Delegates Enter-key handling to the form-associated base. */\n  protected _handleEnterKeydown(event: KeyboardEvent): void;\n\n  //#endregion\n\n  //#region Internal state\n\n  protected _maskSelection: MaskSelection;\n  protected _compositionStart: number;\n  protected _focused: boolean;\n  protected _maskedValue: string;\n  protected readonly _history: MaskHistory;\n\n  protected get _inputSelection(): MaskSelection;\n  protected get _isEmptyMask(): boolean;\n  protected get _historyText(): string;\n\n  //#endregion\n\n  //#region Public attributes and properties\n\n  /**\n   * Makes the control a readonly field.\n   * @attr readonly\n   * @default false\n   */\n  public readOnly: boolean;\n\n  /**\n   * The mask pattern of the component.\n   * @attr\n   */\n  public get mask(): string;\n  public set mask(value: string);\n\n  /**\n   * The prompt symbol to use for unfilled parts of the mask pattern.\n   * @attr\n   * @default '_'\n   */\n  public get prompt(): string;\n  public set prompt(value: string);\n\n  //#endregion\n\n  //#region Event handlers\n\n  protected _handleInput(event: InputEvent): Promise<void>;\n  protected _handleBeforeInput(event: InputEvent): void;\n  protected _updateInput(text: string, range: MaskSelection): Promise<void>;\n  protected _commitMaskedValue(value: string): void;\n  protected _emitInputEvent(): void;\n  protected _setMaskSelection(event: Event): void;\n  protected _handleCompositionStart(): void;\n  protected _handleCompositionEnd(event: CompositionEvent): void;\n  protected _handleClick(): void;\n\n  //#endregion\n\n  //#region Undo/redo\n\n  protected _recordHistory(\n    kind: MaskEditKind,\n    next: string,\n    caret: number,\n    selection?: MaskSelection\n  ): void;\n\n  protected _historyStep(direction: 'undo' | 'redo'): Promise<void>;\n  protected _historyResync(): void;\n\n  //#endregion\n\n  //#region Public methods\n\n  /** Sets the text selection range of the control. */\n  public setSelectionRange(\n    start?: number,\n    end?: number,\n    direction?: SelectionRangeDirection\n  ): void;\n\n  /** Replaces the selected text in the control and re-applies the mask. */\n  public setRangeText(\n    replacement: string,\n    start?: number,\n    end?: number,\n    selectMode?: RangeTextSelectMode\n  ): void;\n\n  //#endregion\n}\n\n/**\n * Adds masked-input behavior (parser-driven editing, selection tracking,\n * composition handling, range text replacement) to a LitElement-derived class.\n *\n * The host class is expected to provide:\n * - `_input`            - the native `<input>` element (typically via `@query('input')`).\n * - `_parser`           - a {@link MaskParser} (or subclass) instance.\n * - `_setTouchedState`  - from `FormAssociatedMixin`.\n * - `_emitTouchedEvent` - from `FormAssociatedMixin`.\n * - `emitEvent`         - from `EventEmitterMixin`.\n * - `select`            - from the host base.\n *\n * The host class must implement `_syncValueFromMask` to bridge the masked\n * text back into its public `value`. It is called by the default\n * `_commitMaskedValue` implementation.\n */\nexport function MaskBehaviorMixin<T extends AbstractConstructor<LitElement>>(\n  superClass: T\n): AbstractConstructor<MaskBehaviorElementInterface> & T {\n  abstract class MaskBehaviorElement extends superClass {\n    //#region Required from host\n\n    protected abstract readonly _input?: HTMLInputElement;\n    protected abstract readonly _parser: MaskParser;\n    protected abstract _setTouchedState(): void;\n    protected abstract _emitTouchedEvent(\n      eventName: string,\n      init?: CustomEventInit\n    ): boolean;\n    public abstract select(): void;\n    public abstract emitEvent(name: string, init?: CustomEventInit): boolean;\n\n    protected abstract _syncValueFromMask(): void;\n    protected abstract _handleEnterKeydown(event: KeyboardEvent): void;\n\n    //#endregion\n\n    //#region Internal state\n\n    protected _maskSelection: MaskSelection = { start: 0, end: 0 };\n    protected _compositionStart = 0;\n\n    /**\n     * The signature is the source pattern rather than the escaped one: the date parsers\n     * convert a date format into mask flags, so `MM/dd/yyyy` and `dd/MM/yyyy` share an\n     * escaped mask of `00/00/0000` while meaning entirely different things.\n     */\n    protected readonly _history = createMaskHistory(\n      () => `${this._parser.mask} ${this._parser.prompt}`\n    );\n\n    @state()\n    protected _focused = false;\n\n    @state()\n    protected _maskedValue = '';\n\n    protected get _inputSelection(): MaskSelection {\n      return {\n        start: this._input?.selectionStart || 0,\n        end: this._input?.selectionEnd || 0,\n      };\n    }\n\n    /** Indicates whether the current mask value is empty. */\n    protected get _isEmptyMask(): boolean {\n      return this._maskedValue === this._parser.emptyMask;\n    }\n\n    /**\n     * The masked text as the undo history sees it. `igc-mask-input` blanks it on blur and\n     * restores the empty mask on focus; both spell the same empty document, so without\n     * this normalization every focus of an empty editor would look like a foreign change.\n     */\n    protected get _historyText(): string {\n      return this._maskedValue || this._parser.emptyMask;\n    }\n\n    //#endregion\n\n    //#region Lifecycle\n\n    constructor(...args: any[]) {\n      super(...args);\n\n      // Assigning `input.value` - which every masked edit does - clears the browser's\n      // own undo stack, so the standard shortcuts have to be served from `_history`.\n      // The IME owns the text until `compositionend`, hence the `isComposing` guard.\n      const step =\n        (direction: 'undo' | 'redo') =>\n        (event: KeyboardEvent): void => {\n          if (!event.isComposing) {\n            this._historyStep(direction);\n          }\n        };\n\n      addKeybindings(this, {\n        skip: () => this.readOnly,\n        bindingDefaults: { repeat: true },\n      })\n        .set([ctrlKey, 'z'], step('undo'))\n        .set([metaKey, 'z'], step('undo'))\n        .set([ctrlKey, 'y'], step('redo'))\n        .set([ctrlKey, shiftKey, 'z'], step('redo'))\n        .set([metaKey, shiftKey, 'z'], step('redo'));\n    }\n\n    //#endregion\n\n    //#region Public attributes and properties\n\n    /**\n     * Makes the control a readonly field.\n     *\n     * @attr readonly\n     * @default false\n     */\n    @property({ type: Boolean, reflect: true })\n    public readOnly = false;\n\n    /**\n     * The mask pattern of the component.\n     *\n     * @attr\n     */\n    @property()\n    public set mask(value: string) {\n      this._parser.mask = value;\n    }\n\n    public get mask(): string {\n      return this._parser.mask;\n    }\n\n    /**\n     * The prompt symbol to use for unfilled parts of the mask pattern.\n     *\n     * @attr\n     * @default '_'\n     */\n    @property()\n    public set prompt(value: string) {\n      this._parser.prompt = value;\n    }\n\n    public get prompt(): string {\n      return this._parser.prompt;\n    }\n\n    //#endregion\n\n    //#region Event handlers\n\n    protected async _handleInput({\n      inputType,\n      isComposing,\n    }: InputEvent): Promise<void> {\n      const value = this._input?.value ?? '';\n      const { start, end } = this._maskSelection;\n      const deletePosition = this._parser.getNextNonLiteralPosition(end) + 1;\n\n      // Reachable only where `beforeinput` is not cancelable - normally the browser's\n      // history commands are intercepted before they ever mutate the input.\n      if (inputType === 'historyUndo' || inputType === 'historyRedo') {\n        return this._historyStep(inputType === 'historyUndo' ? 'undo' : 'redo');\n      }\n\n      // A composing backspace is handled by the composition events instead.\n      if (inputType === 'deleteContentBackward' && isComposing) {\n        return;\n      }\n\n      const kind = MaskEditKinds.get(inputType ?? '');\n\n      if (kind === undefined) {\n        // A non-modeled mutation has already changed the input's DOM value, so re-render\n        // to let the `live()` binding roll it back to the masked text. Never mid-IME\n        // though - `insertCompositionText` fires repeatedly there and resetting the value\n        // underneath the browser breaks composition outright.\n        if (!isComposing) {\n          this.requestUpdate();\n        }\n        return;\n      }\n\n      this._setTouchedState();\n\n      switch (inputType) {\n        case 'deleteContentForward': {\n          await this._updateInput('', { start, end: deletePosition }, kind);\n          this._input?.setSelectionRange(deletePosition, deletePosition);\n          // `_updateInput` settled on the parser's cursor, but the caret actually ends up\n          // past the deleted character - record that so a run of deletes coalesces.\n          this._history.settle(this._historyText, deletePosition);\n          return;\n        }\n\n        case 'deleteContentBackward':\n          return this._updateInput(\n            '',\n            {\n              start: this._parser.getPreviousNonLiteralPosition(\n                this._inputSelection.start + 1\n              ),\n              end,\n            },\n            kind\n          );\n\n        case 'deleteByCut':\n          return this._updateInput('', this._maskSelection, kind);\n\n        case 'insertText':\n          return this._updateInput(\n            value.substring(start, this._inputSelection.end),\n            this._maskSelection,\n            kind\n          );\n\n        case 'insertFromPaste':\n          return this._updateInput(\n            value.substring(start, this._inputSelection.end),\n            {\n              start,\n              end: this._inputSelection.start,\n            },\n            kind\n          );\n\n        case 'insertFromDrop':\n          // An external drop is preceded by no `dragstart`, so `_maskSelection` is stale.\n          return this._updateInput(\n            value.substring(\n              this._inputSelection.start,\n              this._inputSelection.end\n            ),\n            { ...this._inputSelection },\n            kind,\n            {\n              start: this._inputSelection.start,\n              end: this._inputSelection.start,\n            }\n          );\n\n        // Potential browser auto-fill behavior\n        case undefined:\n        case '':\n          return this._updateInput(\n            this._parser.parse(\n              value.substring(start, this._inputSelection.end)\n            ),\n            {\n              start,\n              end: this._inputSelection.end,\n            },\n            kind,\n            { start, end: start }\n          );\n      }\n    }\n\n    /**\n     * Default mask-update routine. Re-applies the parser, commits the result through\n     * {@link MaskBehaviorElementInterface._commitMaskedValue} and emits an input event\n     * when the edit is not at the trailing mask boundary.\n     */\n    protected async _updateInput(\n      text: string,\n      range: MaskSelection,\n      kind: MaskEditKind = 'atomic',\n      caretBefore?: MaskSelection\n    ): Promise<void> {\n      const { value, end } = this._parser.replace(\n        this._maskedValue,\n        text,\n        range.start,\n        range.end\n      );\n\n      this._recordHistory(kind, value, end, caretBefore ?? this._maskSelection);\n      this._commitMaskedValue(value);\n      this.requestUpdate();\n\n      if (range.start !== this._parser.mask.length) {\n        this._emitInputEvent();\n      }\n\n      await this.updateComplete;\n      this._input?.setSelectionRange(end, end);\n    }\n\n    /**\n     * Writes a fully-formed masked text into the component's value pipeline.\n     *\n     * This is the one step where the leaves genuinely differ - `igc-mask-input` commits\n     * straight to its form value, while the date editors keep the text as a draft until\n     * blur - so it is also the only thing undo/redo has to delegate.\n     */\n    protected _commitMaskedValue(value: string): void {\n      this._maskedValue = value;\n      this._syncValueFromMask();\n    }\n\n    /**\n     * Emits an `igcInput` event with the current masked value as detail.\n     * Override to emit a different payload (e.g. the parsed value).\n     */\n    protected _emitInputEvent(): void {\n      this._emitTouchedEvent('igcInput', { detail: this._maskedValue });\n    }\n\n    protected _setMaskSelection(event: Event): void {\n      this._maskSelection = this._inputSelection;\n      if (event instanceof KeyboardEvent) {\n        this._handleEnterKeydown(event);\n      }\n    }\n\n    protected _handleCompositionStart(): void {\n      this._compositionStart = this._inputSelection.start;\n    }\n\n    protected _handleCompositionEnd({ data }: CompositionEvent): void {\n      // The whole composed sequence is one undo step, anchored where it began.\n      this._updateInput(\n        data,\n        { start: this._compositionStart, end: this._inputSelection.end },\n        'atomic',\n        { start: this._compositionStart, end: this._compositionStart }\n      );\n    }\n\n    protected _handleClick(): void {\n      const { selectionStart: start, selectionEnd: end } = this._input ?? {\n        selectionStart: 0,\n        selectionEnd: 0,\n      };\n\n      // Clicking at the end of the input field will select the entire mask\n      if (start === end && start === this._maskedValue.length) {\n        this.select();\n      }\n    }\n\n    /**\n     * Intercepts the browser's own history commands - the Edit and context menus, and\n     * the software keyboard on mobile - which never reach the key bindings. The native\n     * stack is empty anyway, so letting one through would only de-sync the input's DOM\n     * value from the masked text.\n     */\n    protected _handleBeforeInput(event: InputEvent): void {\n      const { inputType } = event;\n\n      if (inputType !== 'historyUndo' && inputType !== 'historyRedo') {\n        return;\n      }\n\n      event.preventDefault();\n\n      if (!this.readOnly) {\n        this._historyStep(inputType === 'historyUndo' ? 'undo' : 'redo');\n      }\n    }\n\n    //#endregion\n\n    //#region Undo/redo\n\n    /**\n     * Snapshots the current masked text before `next` replaces it, then reports where the\n     * caret ends up. Must be called *before* the text is committed.\n     *\n     * Only a real change earns an undo step: a character the mask rejects, a backspace at\n     * position zero or a spin that hit a boundary would otherwise leave behind a step\n     * that appears to do nothing when undone.\n     */\n    protected _recordHistory(\n      kind: MaskEditKind,\n      next: string,\n      caret: number,\n      selection: MaskSelection = this._inputSelection\n    ): void {\n      const previous = this._historyText;\n\n      if (next !== previous) {\n        this._history.record(kind, { value: previous, ...selection });\n      }\n\n      this._history.settle(next, caret);\n    }\n\n    /** Reconciles the history with the current masked text. */\n    protected _historyResync(): void {\n      this._history.resync(this._historyText);\n    }\n\n    /** Restores the neighboring history state in the given direction. */\n    protected async _historyStep(direction: 'undo' | 'redo'): Promise<void> {\n      if (this.readOnly) {\n        return;\n      }\n\n      const current: MaskHistoryState = {\n        value: this._historyText,\n        ...this._inputSelection,\n      };\n\n      const state =\n        direction === 'undo'\n          ? this._history.undo(current)\n          : this._history.redo(current);\n\n      if (!state) {\n        return;\n      }\n\n      this._setTouchedState();\n      this._commitMaskedValue(state.value);\n      this.requestUpdate();\n\n      // Native inputs announce an undo as an `input` event, and the composite hosts\n      // (`igc-date-picker`, `igc-date-range-picker`) read the draft value from ours.\n      this._emitInputEvent();\n\n      await this.updateComplete;\n\n      // Through the mixin method, since the input's own keydown handler has already\n      // overwritten `_maskSelection` with the caret as it was before the restore.\n      this.setSelectionRange(state.start, state.end);\n    }\n\n    //#endregion\n\n    //#region Public methods\n\n    /* blazorSuppress */\n    /** Sets the text selection range of the control */\n    public setSelectionRange(\n      start?: number,\n      end?: number,\n      direction: SelectionRangeDirection = 'none'\n    ): void {\n      this._input?.setSelectionRange(start ?? null, end ?? null, direction);\n      this._maskSelection = { start: start ?? 0, end: end ?? 0 };\n    }\n\n    /* blazorSuppress */\n    /** Replaces the selected text in the control and re-applies the mask */\n    public setRangeText(\n      replacement: string,\n      start?: number,\n      end?: number,\n      selectMode?: RangeTextSelectMode\n    ): void {\n      const current = this._inputSelection;\n      const _start = start ?? current.start;\n      const _end = end ?? current.end;\n\n      const result = this._parser.replace(\n        this._maskedValue || this._parser.emptyMask,\n        replacement,\n        _start,\n        _end\n      );\n      const next = this._parser.apply(this._parser.parse(result.value));\n\n      this._recordHistory('atomic', next, _start, current);\n      this._commitMaskedValue(next);\n\n      this.updateComplete.then(() => {\n        switch (selectMode) {\n          case 'select':\n            this.setSelectionRange(_start, _end);\n            break;\n          case 'start':\n            this.setSelectionRange(_start, _start);\n            break;\n          case 'end':\n            this.setSelectionRange(_end, _end);\n            break;\n          default:\n            this.setSelectionRange(current.start, current.end);\n        }\n      });\n    }\n\n    //#endregion\n  }\n\n  return MaskBehaviorElement as unknown as AbstractConstructor<MaskBehaviorElementInterface> &\n    T;\n}\n"]}

package/{components/common → internals}/mixins/option.d.ts

@@ -33,7 +33,5 @@ export declare abstract class IgcBaseOptionLikeComponent extends LitElement {
      */
     set value(value: string);
     get value(): string;
-    /** @internal */
-    connectedCallback(): void;
     protected render(): import("lit-html").TemplateResult<1>;
 }

package/{components/common → internals}/mixins/option.js

@@ -12,6 +12,11 @@ export class IgcBaseOptionLikeComponent extends LitElement {
         super(...arguments);
         this._internals = addInternalsController(this, {
             initialARIA: { role: 'option' },
+            reflectRole: true,
+            aria: () => ({
+                ariaDisabled: `${this.disabled}`,
+                ariaSelected: `${this.selected}`,
+            }),
         });
         this._active = false;
         this._disabled = false;
@@ -28,14 +33,12 @@ export class IgcBaseOptionLikeComponent extends LitElement {
     }
     set disabled(value) {
         this._disabled = Boolean(value);
-        this._internals.setARIA({ ariaDisabled: `${this.disabled}` });
     }
     get disabled() {
         return this._disabled;
     }
     set selected(value) {
         this._selected = Boolean(value);
-        this._internals.setARIA({ ariaSelected: `${this._selected}` });
         this.active = this.selected;
     }
     get selected() {
@@ -47,10 +50,6 @@ export class IgcBaseOptionLikeComponent extends LitElement {
     get value() {
         return this._value ? this._value : this._contentSlotText;
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.role = 'option';
-    }
     render() {
         return html `
       <section part="prefix">

package/internals/mixins/option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option.js","sourceRoot":"","sources":["../../../src/internals/mixins/option.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAGrE,MAAM,OAAgB,0BAA2B,SAAQ,UAAU;IAAnE;;QACqB,eAAU,GAAG,sBAAsB,CAAC,IAAI,EAAE;YAC3D,WAAW,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC/B,WAAW,EAAE,IAAI;YACjB,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;gBACX,YAAY,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE;gBAChC,YAAY,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE;aACjC,CAAC;SACH,CAAC,CAAC;QAEO,YAAO,GAAG,KAAK,CAAC;QAChB,cAAS,GAAG,KAAK,CAAC;QAClB,cAAS,GAAG,KAAK,CAAC;IA8E9B,CAAC;IAxEC,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;IAOD,IAAW,MAAM,CAAC,KAAc;QAC9B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC;IAED,IAAW,MAAM;QACf,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAOD,IAAW,QAAQ,CAAC,KAAc;QAChC,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC;IAED,IAAW,QAAQ;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAOD,IAAW,QAAQ,CAAC,KAAc;QAChC,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;QAChC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC;IAC9B,CAAC;IAED,IAAW,QAAQ;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IASD,IAAW,KAAK,CAAC,KAAa;QAC5B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACtB,CAAC;IAED,IAAW,KAAK;QACd,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC;IAC3D,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;;;;;;KAUV,CAAC;IACJ,CAAC;CACF;AA1EoB;IADlB,kBAAkB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4DACO;AAW7C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDAG1C;AAWD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DAG1C;AAWD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DAI1C;AAaD;IADC,QAAQ,EAAE;uDAGV","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, queryAssignedNodes } from 'lit/decorators.js';\nimport { addInternalsController } from '../controllers/internals.js';\n\n/* omitModule */\nexport abstract class IgcBaseOptionLikeComponent extends LitElement {\n  protected readonly _internals = addInternalsController(this, {\n    initialARIA: { role: 'option' },\n    reflectRole: true,\n    aria: () => ({\n      ariaDisabled: `${this.disabled}`,\n      ariaSelected: `${this.selected}`,\n    }),\n  });\n\n  protected _active = false;\n  protected _disabled = false;\n  protected _selected = false;\n  protected _value!: string;\n\n  @queryAssignedNodes({ flatten: true })\n  protected readonly _content!: Array<Element>;\n\n  protected get _contentSlotText(): string {\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 set active(value: boolean) {\n    this._active = Boolean(value);\n  }\n\n  public get active(): boolean {\n    return this._active;\n  }\n\n  /**\n   * Whether the item is disabled.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public set disabled(value: boolean) {\n    this._disabled = Boolean(value);\n  }\n\n  public get disabled(): boolean {\n    return this._disabled;\n  }\n\n  /**\n   * Whether the item is selected.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public set selected(value: boolean) {\n    this._selected = Boolean(value);\n    this.active = this.selected;\n  }\n\n  public get selected(): boolean {\n    return this._selected;\n  }\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 set value(value: string) {\n    this._value = value;\n  }\n\n  public get value(): string {\n    return this._value ? this._value : this._contentSlotText;\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/internals/part-map.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"part-map.js","sourceRoot":"","sources":["../../src/internals/part-map.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAC/B,OAAO,EAEL,SAAS,EAET,SAAS,EAET,QAAQ,GACT,MAAM,kBAAkB,CAAC;AAM1B,MAAM,gBAAiB,SAAQ,SAAS;IAGtC,YAAY,QAAkB;QAC5B,KAAK,CAAC,QAAQ,CAAC,CAAC;QAEhB,IACE,QAAQ,CAAC,IAAI,KAAK,QAAQ,CAAC,SAAS;YACpC,QAAQ,CAAC,IAAI,KAAK,MAAM;YACvB,QAAQ,CAAC,OAAO,EAAE,MAAiB,GAAG,CAAC,EACxC,CAAC;YACD,MAAM,IAAI,KAAK,CACb,iGAAiG,CAClG,CAAC;QACJ,CAAC;IACH,CAAC;IAEe,MAAM,CAAC,WAAwB;QAC7C,OAAO,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;aAC5B,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;aACjC,IAAI,CAAC,GAAG,CAAC,CAAC;IACf,CAAC;IAEe,MAAM,CACpB,IAAmB,EACnB,CAAC,WAAW,CAA4B;QAExC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;QAEnC,IAAI,IAAI,CAAC,cAAc,KAAK,SAAS,EAAE,CAAC;YACtC,IAAI,CAAC,cAAc,GAAG,IAAI,GAAG,EAAE,CAAC;YAEhC,KAAK,MAAM,IAAI,IAAI,WAAW,EAAE,CAAC;gBAC/B,IAAI,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;oBACtB,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;oBACnB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBAChC,CAAC;YACH,CAAC;YAED,OAAO,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;QAClC,CAAC;QAED,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACvC,IAAI,CAAC,CAAC,IAAI,IAAI,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;gBACjD,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;gBACtB,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;YACnC,CAAC;QACH,CAAC;QAED,KAAK,MAAM,IAAI,IAAI,WAAW,EAAE,CAAC;YAC/B,MAAM,KAAK,GAAG,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YAClC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC5C,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBACnB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YAChC,CAAC;QACH,CAAC;QAED,OAAO,QAAQ,CAAC;IAClB,CAAC;CACF;AAMD,MAAM,CAAC,MAAM,OAAO,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["import { noChange } from 'lit';\nimport {\n  type AttributePart,\n  Directive,\n  type DirectiveParameters,\n  directive,\n  type PartInfo,\n  PartType,\n} from 'lit/directive.js';\n\nexport interface PartMapInfo {\n  readonly [name: string]: boolean | null | undefined;\n}\n\nclass PartMapDirective extends Directive {\n  private _previousParts?: Set<string>;\n\n  constructor(partInfo: PartInfo) {\n    super(partInfo);\n\n    if (\n      partInfo.type !== PartType.ATTRIBUTE ||\n      partInfo.name !== 'part' ||\n      (partInfo.strings?.length as number) > 0\n    ) {\n      throw new Error(\n        '`partMap() can only be used in the `part` attribute and must be the only part in the attribute.'\n      );\n    }\n  }\n\n  public override render(partMapInfo: PartMapInfo): string {\n    return Object.keys(partMapInfo)\n      .filter((key) => partMapInfo[key])\n      .join(' ');\n  }\n\n  public override update(\n    part: AttributePart,\n    [partMapInfo]: DirectiveParameters<this>\n  ) {\n    const partList = part.element.part;\n\n    if (this._previousParts === undefined) {\n      this._previousParts = new Set();\n\n      for (const name in partMapInfo) {\n        if (partMapInfo[name]) {\n          partList.add(name);\n          this._previousParts.add(name);\n        }\n      }\n\n      return this.render(partMapInfo);\n    }\n\n    for (const name of this._previousParts) {\n      if (!(name in partMapInfo) || !partMapInfo[name]) {\n        partList.remove(name);\n        this._previousParts.delete(name);\n      }\n    }\n\n    for (const name in partMapInfo) {\n      const value = !!partMapInfo[name];\n      if (value && !this._previousParts.has(name)) {\n        partList.add(name);\n        this._previousParts.add(name);\n      }\n    }\n\n    return noChange;\n  }\n}\n\n/**\n * Similar to Lit's {@link https://lit.dev/docs/templates/directives/#classmap | `classMap`} and\n * {@link https://lit.dev/docs/templates/directives/#stylemap | `styleMap`} but for `part` attributes.\n */\nexport const partMap = directive(PartMapDirective);\nexport type { PartMapDirective };\n"]}