igniteui-webcomponents 7.2.3 → 7.3.0-beta.0

package/components/list/themes/item.d.ts

@@ -1,2 +1,2 @@
-import type { Themes } from '../../../theming/types.js';
+import type { Themes } from '#theming/types.js';
 export declare const all: Themes;

package/components/list/themes/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../../src/components/list/themes/item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAEzE,MAAM,KAAK,GAAG;IACZ,SAAS,EAAE,GAAG,CAAA;MACV,SAAS;GACZ;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,GAAG,CAAA;MACV,SAAS;GACZ;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '../../../theming/types.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/item/list-item.bootstrap.css.js';\nimport { styles as fluent } from './shared/item/list-item.fluent.css.js';\nimport { styles as indigo } from './shared/item/list-item.indigo.css.js';\n\nconst light = {\n  bootstrap: css`\n    ${bootstrap}\n  `,\n  fluent: css`\n    ${fluent}\n  `,\n  indigo: css`\n    ${indigo}\n  `,\n};\n\nconst dark = {\n  bootstrap: css`\n    ${bootstrap}\n  `,\n  fluent: css`\n    ${fluent}\n  `,\n  indigo: css`\n    ${indigo}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}
+{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../../src/components/list/themes/item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAEzE,MAAM,KAAK,GAAG;IACZ,SAAS,EAAE,GAAG,CAAA;MACV,SAAS;GACZ;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,GAAG,CAAA;MACV,SAAS;GACZ;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '#theming/types.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/item/list-item.bootstrap.css.js';\nimport { styles as fluent } from './shared/item/list-item.fluent.css.js';\nimport { styles as indigo } from './shared/item/list-item.indigo.css.js';\n\nconst light = {\n  bootstrap: css`\n    ${bootstrap}\n  `,\n  fluent: css`\n    ${fluent}\n  `,\n  indigo: css`\n    ${indigo}\n  `,\n};\n\nconst dark = {\n  bootstrap: css`\n    ${bootstrap}\n  `,\n  fluent: css`\n    ${fluent}\n  `,\n  indigo: css`\n    ${indigo}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}

package/components/mask-input/mask-history.d.ts

@@ -0,0 +1,99 @@
+/** A snapshot of the editor state as it was *before* an edit was applied. */
+type MaskHistoryState = {
+    value: string;
+    start: number;
+    end: number;
+};
+/**
+ * The granularity an edit contributes to the history.
+ *
+ * The three granular kinds coalesce, so a run of typed characters or of deletions
+ * collapses into a single step. Everything else - paste, drop, cut, composition,
+ * auto-fill, spinning a date part, `setRangeText` - is `atomic` and gets its own step.
+ */
+type MaskEditKind = 'insert' | 'delete-backward' | 'delete-forward' | 'atomic';
+/** Resolves the identity of the mask pattern the snapshots were taken against. */
+type MaskSignature = () => string;
+/**
+ * The undo/redo history of a masked editor.
+ *
+ * Masked text is rendered through `.value=${live(...)}`, so every edit reassigns the
+ * native input's value - which wipes the browser's own undo stack. This replaces it.
+ *
+ * It holds no timers: a run is coalesced purely from the caret geometry, so the same
+ * sequence of edits always produces the same sequence of steps.
+ *
+ * The history is self-invalidating rather than instrumented. Anything that moves the
+ * masked text without going through it - a programmatic `value`, `clear()`, a form reset -
+ * is caught by comparing against the text it last observed, and a changed mask pattern is
+ * caught by the signature. That is why no call site has to announce those changes.
+ *
+ * @hidden
+ */
+declare class MaskHistory {
+    private readonly _signature;
+    private readonly _undoStack;
+    private readonly _redoStack;
+    private _lastKind;
+    private _lastCaret;
+    private _lastValue;
+    private _pattern;
+    /**
+     * The state the most recent traversal restored.
+     *
+     * Holding `Ctrl + Z` fires faster than the caret can be written back to the DOM, so the
+     * live selection is not a trustworthy counterpart entry for the opposite stack. The
+     * state we know we just restored is.
+     */
+    private _lastRestored;
+    constructor(signature: MaskSignature);
+    get canUndo(): boolean;
+    get canRedo(): boolean;
+    /**
+     * A run continues only while the caret stays where the previous edit left it, which is
+     * what makes a click or an arrow key break it without any extra hook. Replacing a
+     * selection is always a deliberate edit of its own.
+     */
+    private _shouldCoalesce;
+    private _clear;
+    /**
+     * Drops everything the history holds when the mask pattern changed or the text moved
+     * behind our back. Returns whether the snapshots are still usable.
+     */
+    private _validate;
+    /**
+     * Records the state an edit is about to overwrite. Must be called *before* the mask is
+     * mutated, and only once the edit is known to change something.
+     */
+    record(kind: MaskEditKind, state: MaskHistoryState): void;
+    /**
+     * Reports the state an edit settled on, so that the next {@link record} can tell
+     * whether it continues the run.
+     */
+    settle(value: string, caret: number): void;
+    /**
+     * Reconciles the history with the editor's current text, typically on focus where a
+     * date editor swaps the display format back for the input format. An unchanged
+     * document keeps its history, a changed one drops it, and either way the run ends.
+     */
+    resync(value: string): void;
+    /** Steps one edit back, handing `current` to the redo stack. */
+    undo(current: MaskHistoryState): MaskHistoryState | null;
+    /** Steps one edit forward, handing `current` back to the undo stack. */
+    redo(current: MaskHistoryState): MaskHistoryState | null;
+    private _step;
+}
+/**
+ * Creates a {@link MaskHistory} for a masked editor.
+ *
+ * @param signature - resolves the identity of the mask pattern the snapshots are taken
+ * against. A callback rather than a value because the history is created by the mask
+ * behavior mixin, whose fields initialize *before* the parser of the concrete component.
+ *
+ * @example
+ * ```ts
+ * const history = createMaskHistory(() => `${parser.mask} ${parser.prompt}`);
+ * ```
+ */
+export declare function createMaskHistory(signature: MaskSignature): MaskHistory;
+export type { MaskEditKind, MaskHistory, MaskHistoryState, MaskSignature };

package/components/mask-input/mask-history.js

@@ -0,0 +1,95 @@
+const MAX_HISTORY_SIZE = 100;
+class MaskHistory {
+    constructor(signature) {
+        this._undoStack = [];
+        this._redoStack = [];
+        this._lastKind = null;
+        this._lastCaret = -1;
+        this._lastValue = '';
+        this._pattern = '';
+        this._lastRestored = null;
+        this._signature = signature;
+    }
+    get canUndo() {
+        return this._undoStack.length > 0;
+    }
+    get canRedo() {
+        return this._redoStack.length > 0;
+    }
+    _shouldCoalesce(kind, state) {
+        if (kind === 'atomic' ||
+            kind !== this._lastKind ||
+            !this.canUndo ||
+            state.start !== state.end) {
+            return false;
+        }
+        return kind === 'insert'
+            ? state.start === this._lastCaret
+            : state.end === this._lastCaret;
+    }
+    _clear() {
+        this._undoStack.length = 0;
+        this._redoStack.length = 0;
+        this._lastKind = null;
+        this._lastCaret = -1;
+        this._lastRestored = null;
+    }
+    _validate(value) {
+        const pattern = this._signature();
+        const stale = pattern !== this._pattern || (this.canUndo && value !== this._lastValue);
+        if (stale) {
+            this._pattern = pattern;
+            this._clear();
+            this._lastValue = value;
+        }
+        return !stale;
+    }
+    record(kind, state) {
+        this._validate(state.value);
+        this._redoStack.length = 0;
+        this._lastRestored = null;
+        if (!this._shouldCoalesce(kind, state)) {
+            this._undoStack.push({ ...state });
+            if (this._undoStack.length > MAX_HISTORY_SIZE) {
+                this._undoStack.shift();
+            }
+        }
+        this._lastKind = kind;
+    }
+    settle(value, caret) {
+        this._lastValue = value;
+        this._lastCaret = caret;
+    }
+    resync(value) {
+        this._validate(value);
+        this._lastValue = value;
+        this._lastKind = null;
+        this._lastCaret = -1;
+        this._lastRestored = null;
+    }
+    undo(current) {
+        return this._step(this._undoStack, this._redoStack, current);
+    }
+    redo(current) {
+        return this._step(this._redoStack, this._undoStack, current);
+    }
+    _step(from, to, current) {
+        if (!this._validate(current.value)) {
+            return null;
+        }
+        const state = from.pop();
+        if (!state) {
+            return null;
+        }
+        to.push(this._lastRestored ?? { ...current });
+        this._lastKind = null;
+        this._lastValue = state.value;
+        this._lastCaret = state.start;
+        this._lastRestored = { ...state };
+        return state;
+    }
+}
+export function createMaskHistory(signature) {
+    return new MaskHistory(signature);
+}
+//# sourceMappingURL=mask-history.js.map

package/components/mask-input/mask-history.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mask-history.js","sourceRoot":"","sources":["../../../src/components/mask-input/mask-history.ts"],"names":[],"mappings":"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","sourcesContent":["/** A snapshot of the editor state as it was *before* an edit was applied. */\ntype MaskHistoryState = {\n  value: string;\n  start: number;\n  end: number;\n};\n\n/**\n * The granularity an edit contributes to the history.\n *\n * The three granular kinds coalesce, so a run of typed characters or of deletions\n * collapses into a single step. Everything else - paste, drop, cut, composition,\n * auto-fill, spinning a date part, `setRangeText` - is `atomic` and gets its own step.\n */\ntype MaskEditKind = 'insert' | 'delete-backward' | 'delete-forward' | 'atomic';\n\n/** Resolves the identity of the mask pattern the snapshots were taken against. */\ntype MaskSignature = () => string;\n\nconst MAX_HISTORY_SIZE = 100;\n\n/**\n * The undo/redo history of a masked editor.\n *\n * Masked text is rendered through `.value=${live(...)}`, so every edit reassigns the\n * native input's value - which wipes the browser's own undo stack. This replaces it.\n *\n * It holds no timers: a run is coalesced purely from the caret geometry, so the same\n * sequence of edits always produces the same sequence of steps.\n *\n * The history is self-invalidating rather than instrumented. Anything that moves the\n * masked text without going through it - a programmatic `value`, `clear()`, a form reset -\n * is caught by comparing against the text it last observed, and a changed mask pattern is\n * caught by the signature. That is why no call site has to announce those changes.\n *\n * @hidden\n */\nclass MaskHistory {\n  private readonly _signature: MaskSignature;\n  private readonly _undoStack: MaskHistoryState[] = [];\n  private readonly _redoStack: MaskHistoryState[] = [];\n\n  private _lastKind: MaskEditKind | null = null;\n  private _lastCaret = -1;\n  private _lastValue = '';\n  private _pattern = '';\n\n  /**\n   * The state the most recent traversal restored.\n   *\n   * Holding `Ctrl + Z` fires faster than the caret can be written back to the DOM, so the\n   * live selection is not a trustworthy counterpart entry for the opposite stack. The\n   * state we know we just restored is.\n   */\n  private _lastRestored: MaskHistoryState | null = null;\n\n  constructor(signature: MaskSignature) {\n    this._signature = signature;\n  }\n\n  public get canUndo(): boolean {\n    return this._undoStack.length > 0;\n  }\n\n  public get canRedo(): boolean {\n    return this._redoStack.length > 0;\n  }\n\n  /**\n   * A run continues only while the caret stays where the previous edit left it, which is\n   * what makes a click or an arrow key break it without any extra hook. Replacing a\n   * selection is always a deliberate edit of its own.\n   */\n  private _shouldCoalesce(\n    kind: MaskEditKind,\n    state: MaskHistoryState\n  ): boolean {\n    if (\n      kind === 'atomic' ||\n      kind !== this._lastKind ||\n      !this.canUndo ||\n      state.start !== state.end\n    ) {\n      return false;\n    }\n\n    return kind === 'insert'\n      ? state.start === this._lastCaret\n      : state.end === this._lastCaret;\n  }\n\n  private _clear(): void {\n    this._undoStack.length = 0;\n    this._redoStack.length = 0;\n    this._lastKind = null;\n    this._lastCaret = -1;\n    this._lastRestored = null;\n  }\n\n  /**\n   * Drops everything the history holds when the mask pattern changed or the text moved\n   * behind our back. Returns whether the snapshots are still usable.\n   */\n  private _validate(value: string): boolean {\n    const pattern = this._signature();\n    const stale =\n      pattern !== this._pattern || (this.canUndo && value !== this._lastValue);\n\n    if (stale) {\n      this._pattern = pattern;\n      this._clear();\n      this._lastValue = value;\n    }\n\n    return !stale;\n  }\n\n  /**\n   * Records the state an edit is about to overwrite. Must be called *before* the mask is\n   * mutated, and only once the edit is known to change something.\n   */\n  public record(kind: MaskEditKind, state: MaskHistoryState): void {\n    this._validate(state.value);\n    this._redoStack.length = 0;\n    this._lastRestored = null;\n\n    if (!this._shouldCoalesce(kind, state)) {\n      this._undoStack.push({ ...state });\n\n      if (this._undoStack.length > MAX_HISTORY_SIZE) {\n        this._undoStack.shift();\n      }\n    }\n\n    this._lastKind = kind;\n  }\n\n  /**\n   * Reports the state an edit settled on, so that the next {@link record} can tell\n   * whether it continues the run.\n   */\n  public settle(value: string, caret: number): void {\n    this._lastValue = value;\n    this._lastCaret = caret;\n  }\n\n  /**\n   * Reconciles the history with the editor's current text, typically on focus where a\n   * date editor swaps the display format back for the input format. An unchanged\n   * document keeps its history, a changed one drops it, and either way the run ends.\n   */\n  public resync(value: string): void {\n    this._validate(value);\n\n    this._lastValue = value;\n    this._lastKind = null;\n    this._lastCaret = -1;\n    this._lastRestored = null;\n  }\n\n  /** Steps one edit back, handing `current` to the redo stack. */\n  public undo(current: MaskHistoryState): MaskHistoryState | null {\n    return this._step(this._undoStack, this._redoStack, current);\n  }\n\n  /** Steps one edit forward, handing `current` back to the undo stack. */\n  public redo(current: MaskHistoryState): MaskHistoryState | null {\n    return this._step(this._redoStack, this._undoStack, current);\n  }\n\n  private _step(\n    from: MaskHistoryState[],\n    to: MaskHistoryState[],\n    current: MaskHistoryState\n  ): MaskHistoryState | null {\n    // Traversing a history whose document has moved on would restore text belonging to a\n    // value the component no longer holds.\n    if (!this._validate(current.value)) {\n      return null;\n    }\n\n    const state = from.pop();\n\n    if (!state) {\n      return null;\n    }\n\n    to.push(this._lastRestored ?? { ...current });\n\n    // Typing after an undo must not extend the step that was just restored.\n    this._lastKind = null;\n    this._lastValue = state.value;\n    this._lastCaret = state.start;\n    this._lastRestored = { ...state };\n\n    return state;\n  }\n}\n\n/**\n * Creates a {@link MaskHistory} for a masked editor.\n *\n * @param signature - resolves the identity of the mask pattern the snapshots are taken\n * against. A callback rather than a value because the history is created by the mask\n * behavior mixin, whose fields initialize *before* the parser of the concrete component.\n *\n * @example\n * ```ts\n * const history = createMaskHistory(() => `${parser.mask} ${parser.prompt}`);\n * ```\n */\nexport function createMaskHistory(signature: MaskSignature): MaskHistory {\n  return new MaskHistory(signature);\n}\n\nexport type { MaskEditKind, MaskHistory, MaskHistoryState, MaskSignature };\n"]}

package/components/mask-input/mask-input.d.ts

@@ -1,9 +1,9 @@
-import { type MaskSelection } from '../common/mixins/mask-behavior.js';
+import { type MaskSelection } from '#internals/mixins/mask-behavior.js';
 import { IgcInputBaseComponent } from '../input/input-base.js';
 import type { MaskInputValueMode } from '../types.js';
 import { MaskParser } from './mask-parser.js';
 export type { MaskSelection };
-declare const IgcMaskInputComponent_base: import("../common/mixins/constructor.js").AbstractConstructor<import("../common/mixins/mask-behavior.js").MaskBehaviorElementInterface> & typeof IgcInputBaseComponent;
+declare const IgcMaskInputComponent_base: import("../../internals/mixins/constructor.js").AbstractConstructor<import("#internals/mixins/mask-behavior.js").MaskBehaviorElementInterface> & typeof IgcInputBaseComponent;
 /**
  * A masked input is an input field where a developer can control user input and format the visible value,
  * based on configurable rules
@@ -33,10 +33,10 @@ export default class IgcMaskInputComponent extends IgcMaskInputComponent_base {
     static styles: import("lit").CSSResult[];
     static register(): void;
     protected readonly _parser: MaskParser;
-    protected get __validators(): import("../common/validators.js").Validator<IgcMaskInputComponent>[];
-    protected readonly _themes: import("../../theming/theming-controller.js").ThemingController;
-    protected readonly _slots: import("../common/controllers/slot.js").SlotController<"invalid" | "prefix" | "[default]" | "helper-text" | "suffix" | "value-missing" | "custom-error" | "bad-input">;
-    protected readonly _formValue: import("../common/mixins/forms/form-value.js").FormValue<string>;
+    protected get __validators(): import("../../internals/validators.js").Validator<IgcMaskInputComponent>[];
+    protected readonly _themes: import("#theming/theming-controller.js").ThemingController;
+    protected readonly _slots: import("#internals/controllers/slot.js").SlotController<"invalid" | "prefix" | "[default]" | "suffix" | "helper-text" | "value-missing" | "custom-error" | "bad-input">;
+    protected readonly _formValue: import("#internals/mixins/forms/form-value.js").FormValue<string>;
     protected get _isRawMode(): boolean;
     /**
      * Dictates the behavior when retrieving the value of the control:
@@ -52,7 +52,7 @@ export default class IgcMaskInputComponent extends IgcMaskInputComponent_base {
     /**
      * The value of the input.
      *
-     * Regardless of the currently set `value-mode`, an empty value will return an empty string.
+     * Regardless of the currently set `value-mode`, an empty value returns an empty string.
      *
      * @attr
      */
@@ -79,8 +79,13 @@ export default class IgcMaskInputComponent extends IgcMaskInputComponent_base {
     protected _handleFocus(): Promise<void>;
     protected _handleBlur(): void;
     protected _handleChange(): void;
-    protected _restoreDefaultValue(): void;
-    protected _updateInput(text: string, { start, end }: MaskSelection): Promise<void>;
+    /**
+     * Commits straight to the form value instead of going through the `value` setter: the
+     * setter re-applies the parser, and `apply(parse(x))` left-packs the text - a mask with
+     * an interior hole such as `1_2-___` would collapse to `12_-___`.
+     */
+    protected _commitMaskedValue(value: string): void;
+    protected _emitInputEvent(): void;
     protected _syncValueFromMask(): void;
     private _updateMaskedValue;
     /** Returns whether the current masked input is valid according to the mask pattern. */

package/components/mask-input/mask-input.js

@@ -5,12 +5,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { property } from 'lit/decorators.js';
-import { addThemingController } from '../../theming/theming-controller.js';
-import { addSlotController, setSlots } from '../common/controllers/slot.js';
-import { registerComponent } from '../common/definitions/register.js';
-import { createFormValueState } from '../common/mixins/forms/form-value.js';
-import { MaskBehaviorMixin, } from '../common/mixins/mask-behavior.js';
-import { renderMaskedNativeInput } from '../common/templates/masked-input.js';
+import { addSlotController, setSlots } from '#internals/controllers/slot.js';
+import { registerComponent } from '#internals/definitions/register.js';
+import { createFormValueState } from '#internals/mixins/forms/form-value.js';
+import { MaskBehaviorMixin, } from '#internals/mixins/mask-behavior.js';
+import { renderMaskedNativeInput } from '#internals/templates/masked-input.js';
+import { addThemingController } from '#theming/theming-controller.js';
 import { IgcInputBaseComponent } from '../input/input-base.js';
 import { styles } from '../input/themes/input.base.css.js';
 import { styles as shared } from '../input/themes/shared/input.common.css.js';
@@ -94,9 +94,12 @@ export default class IgcMaskInputComponent extends MaskBehaviorMixin(IgcInputBas
         }
         if (!this._formValue.value) {
             this._maskedValue = this._parser.emptyMask;
+            this._historyResync();
             await this.updateComplete;
             this.select();
+            return;
         }
+        this._historyResync();
     }
     _handleBlur() {
         this._focused = false;
@@ -107,22 +110,16 @@ export default class IgcMaskInputComponent extends MaskBehaviorMixin(IgcInputBas
         this._setTouchedState();
         this.emitEvent('igcChange', { detail: this.value });
     }
-    _restoreDefaultValue() {
-        const value = this.defaultValue;
-        this._maskedValue = this._parser.apply(value);
-        this._updateMaskedValue();
-        this._formValue.setValueAndFormState(value);
-    }
-    async _updateInput(text, { start, end }) {
-        const result = this._parser.replace(this._maskedValue, text, start, end);
-        this._maskedValue = result.value;
-        this._formValue.setValueAndFormState(this._parser.parse(this._maskedValue));
-        this.requestUpdate();
-        if (start !== this.mask.length) {
-            this.emitEvent('igcInput', { detail: this.value });
+    _commitMaskedValue(value) {
+        this._maskedValue = value;
+        this._formValue.setValueAndFormState(this._parser.parse(value));
+        if (!this._focused) {
+            this._updateMaskedValue();
         }
-        await this.updateComplete;
-        this._input?.setSelectionRange(result.end, result.end);
+    }
+    _emitInputEvent() {
+        this._setTouchedState();
+        this.emitEvent('igcInput', { detail: this.value });
     }
     _syncValueFromMask() {
         this.value = this._parser.parse(this._maskedValue);
@@ -137,7 +134,6 @@ export default class IgcMaskInputComponent extends MaskBehaviorMixin(IgcInputBas
     }
     _renderInput() {
         const hasNegativeTabIndex = this.getAttribute('tabindex') === '-1';
-        const hasHelperText = this._slots.hasAssignedElements('helper-text');
         return renderMaskedNativeInput({
             id: this._inputId,
             partNames: this._resolvePartNames('input'),
@@ -149,8 +145,9 @@ export default class IgcMaskInputComponent extends MaskBehaviorMixin(IgcInputBas
             autofocus: this.autofocus,
             inputMode: this.inputMode,
             tabindex: hasNegativeTabIndex ? -1 : undefined,
-            ariaDescribedBy: hasHelperText ? 'helper-text' : undefined,
+            aria: this._ariaTarget.resolveBindings(),
             onInput: this._handleInput,
+            onBeforeInput: this._handleBeforeInput,
             onFocus: this._handleFocus,
             onBlur: this._handleBlur,
             onClick: this._handleClick,

package/components/mask-input/mask-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"mask-input.js","sourceRoot":"","sources":["../../../src/components/mask-input/mask-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from 'lit/decorators.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { createFormValueState } from '../common/mixins/forms/form-value.js';\nimport {\n  MaskBehaviorMixin,\n  type MaskSelection,\n} from '../common/mixins/mask-behavior.js';\nimport { renderMaskedNativeInput } from '../common/templates/masked-input.js';\nimport { IgcInputBaseComponent } from '../input/input-base.js';\nimport { styles } from '../input/themes/input.base.css.js';\nimport { styles as shared } from '../input/themes/shared/input.common.css.js';\nimport { all } from '../input/themes/themes.js';\nimport type { MaskInputValueMode } from '../types.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport { MaskParser } from './mask-parser.js';\nimport { maskValidators } from './validators.js';\n\nexport type { MaskSelection };\n\nconst Slots = setSlots(\n  'prefix',\n  'suffix',\n  'helper-text',\n  'value-missing',\n  'bad-input',\n  'custom-error',\n  'invalid'\n);\n\n/* blazorSupportsVisualChildren */\n/* blazorIndirectRender */\n/**\n * A masked input is an input field where a developer can control user input and format the visible value,\n * based on configurable rules\n *\n * @element igc-mask-input\n *\n * @slot prefix - Renders content before the input\n * @slot suffix - Renders content after the input\n * @slot helper-text - Renders content below the input\n * @slot value-missing - Renders content when the required validation fails.\n * @slot bad-input - Renders content when a required mask pattern validation fails.\n * @slot custom-error - Renders content when setCustomValidity(message) is set.\n * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).\n *\n * @fires igcInput - Emitted when the control receives user input\n * @fires igcChange - Emitted when an alteration of the control's value is committed by the user\n *\n * @csspart container - The main wrapper that holds all main input elements\n * @csspart input - The native input element\n * @csspart label - The native label element\n * @csspart prefix - The prefix wrapper\n * @csspart suffix - The suffix wrapper\n * @csspart helper-text - The helper text wrapper\n */\n\nexport default class IgcMaskInputComponent extends MaskBehaviorMixin(\n  IgcInputBaseComponent\n) {\n  public static readonly tagName = 'igc-mask-input';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcMaskInputComponent, IgcValidationContainerComponent);\n  }\n\n  //#region Internal attributes and properties\n\n  protected override readonly _parser = new MaskParser();\n\n  protected override get __validators() {\n    return maskValidators;\n  }\n\n  protected override readonly _themes = addThemingController(this, all);\n\n  protected override readonly _slots = addSlotController(this, {\n    slots: Slots,\n  });\n\n  protected override readonly _formValue = createFormValueState(this, {\n    initialValue: '',\n    transformers: {\n      setFormValue: (value) =>\n        this._isRawMode ? value || null : this._maskedValue || null,\n    },\n  });\n\n  protected get _isRawMode(): boolean {\n    return this.valueMode === 'raw';\n  }\n\n  //#endregion\n\n  //#region Public attributes and properties\n\n  /**\n   * Dictates the behavior when retrieving the value of the control:\n   *\n   * - `raw`: Returns clean input (e.g. \"5551234567\")\n   * - `withFormatting`: Returns with mask formatting (e.g. \"(555) 123-4567\")\n   *\n   * Empty values always return an empty string, regardless of the value mode.\n   * @attr value-mode\n   * @default 'raw'\n   */\n  @property({ attribute: 'value-mode' })\n  public valueMode: MaskInputValueMode = 'raw';\n\n  /* @tsTwoWayProperty(true, \"igcChange\", \"detail\", false) */\n  /**\n   * The value of the input.\n   *\n   * Regardless of the currently set `value-mode`, an empty value will return an empty string.\n   *\n   * @attr\n   */\n  @property()\n  public set value(string: string) {\n    const value = string ?? '';\n    this._maskedValue = this._parser.apply(value);\n    this._updateMaskedValue();\n    this._formValue.setValueAndFormState(value);\n  }\n\n  public get value(): string {\n    const value = this._formValue.value;\n\n    if (this._isRawMode) {\n      return value;\n    }\n    return value ? this._maskedValue : value;\n  }\n\n  /**\n   * The masked pattern of the component.\n   *\n   * @attr\n   * @default 'CCCCCCCCCC'\n   */\n  @property()\n  public override set mask(value: string) {\n    super.mask = value;\n    if (this.value) {\n      this._maskedValue = this._parser.apply(this._formValue.value);\n    }\n  }\n\n  public override get mask(): string {\n    return super.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 override set prompt(value: string) {\n    super.prompt = value;\n    if (this.value) {\n      this._maskedValue = this._parser.apply(this._formValue.value);\n    }\n  }\n\n  public override get prompt(): string {\n    return super.prompt;\n  }\n\n  //#endregion\n\n  //#region Event handlers\n\n  protected _handleDragEnter(): void {\n    if (!this._focused && !this._formValue.value) {\n      this._maskedValue = this._parser.emptyMask;\n    }\n  }\n\n  protected _handleDragLeave(): void {\n    if (!this._focused) {\n      this._updateMaskedValue();\n    }\n  }\n\n  protected async _handleFocus(): Promise<void> {\n    this._focused = true;\n\n    if (this.readOnly) {\n      return;\n    }\n\n    if (!this._formValue.value) {\n      // In case of empty value, select the whole mask\n      this._maskedValue = this._parser.emptyMask;\n\n      await this.updateComplete;\n      this.select();\n    }\n  }\n\n  protected override _handleBlur(): void {\n    this._focused = false;\n    this._updateMaskedValue();\n    super._handleBlur();\n  }\n\n  protected _handleChange(): void {\n    this._setTouchedState();\n    this.emitEvent('igcChange', { detail: this.value });\n  }\n\n  //#endregion\n\n  //#region Internal methods\n\n  protected override _restoreDefaultValue(): void {\n    const value = this.defaultValue as string;\n\n    this._maskedValue = this._parser.apply(value);\n    this._updateMaskedValue();\n    this._formValue.setValueAndFormState(value);\n  }\n\n  protected override async _updateInput(\n    text: string,\n    { start, end }: MaskSelection\n  ): Promise<void> {\n    const result = this._parser.replace(this._maskedValue, text, start, end);\n\n    this._maskedValue = result.value;\n    this._formValue.setValueAndFormState(this._parser.parse(this._maskedValue));\n    this.requestUpdate();\n\n    if (start !== this.mask.length) {\n      this.emitEvent('igcInput', { detail: this.value });\n    }\n\n    await this.updateComplete;\n    this._input?.setSelectionRange(result.end, result.end);\n  }\n\n  protected override _syncValueFromMask(): void {\n    this.value = this._parser.parse(this._maskedValue);\n  }\n\n  private _updateMaskedValue(): void {\n    if (this._isEmptyMask) {\n      this._maskedValue = '';\n    }\n  }\n\n  //#endregion\n\n  //#region Public methods\n\n  /* blazorSuppress */\n  /** Returns whether the current masked input is valid according to the mask pattern. */\n  public isValidMaskPattern(): boolean {\n    return this._parser.isValidString(this._maskedValue);\n  }\n\n  //#endregion\n\n  protected override _renderInput() {\n    const hasNegativeTabIndex = this.getAttribute('tabindex') === '-1';\n    const hasHelperText = this._slots.hasAssignedElements('helper-text');\n\n    return renderMaskedNativeInput({\n      id: this._inputId,\n      partNames: this._resolvePartNames('input'),\n      name: this.name,\n      value: this._maskedValue,\n      placeholder: this.placeholder ?? this._parser.escapedMask,\n      readOnly: this.readOnly,\n      disabled: this.disabled,\n      autofocus: this.autofocus,\n      inputMode: this.inputMode,\n      tabindex: hasNegativeTabIndex ? -1 : undefined,\n      ariaDescribedBy: hasHelperText ? 'helper-text' : undefined,\n      onInput: this._handleInput,\n      onFocus: this._handleFocus,\n      onBlur: this._handleBlur,\n      onClick: this._handleClick,\n      onSetMaskSelection: this._setMaskSelection,\n      onCompositionStart: this._handleCompositionStart,\n      onCompositionEnd: this._handleCompositionEnd,\n      onChange: this._handleChange,\n      onDragEnter: this._handleDragEnter,\n      onDragLeave: this._handleDragLeave,\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-mask-input': IgcMaskInputComponent;\n  }\n}\n"]}
+{"version":3,"file":"mask-input.js","sourceRoot":"","sources":["../../../src/components/mask-input/mask-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from 'lit/decorators.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { createFormValueState } from '#internals/mixins/forms/form-value.js';\nimport {\n  MaskBehaviorMixin,\n  type MaskSelection,\n} from '#internals/mixins/mask-behavior.js';\nimport { renderMaskedNativeInput } from '#internals/templates/masked-input.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport { IgcInputBaseComponent } from '../input/input-base.js';\nimport { styles } from '../input/themes/input.base.css.js';\nimport { styles as shared } from '../input/themes/shared/input.common.css.js';\nimport { all } from '../input/themes/themes.js';\nimport type { MaskInputValueMode } from '../types.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport { MaskParser } from './mask-parser.js';\nimport { maskValidators } from './validators.js';\n\nexport type { MaskSelection };\n\nconst Slots = setSlots(\n  'prefix',\n  'suffix',\n  'helper-text',\n  'value-missing',\n  'bad-input',\n  'custom-error',\n  'invalid'\n);\n\n/* blazorSupportsVisualChildren */\n/* blazorIndirectRender */\n/**\n * A masked input is an input field where a developer can control user input and format the visible value,\n * based on configurable rules\n *\n * @element igc-mask-input\n *\n * @slot prefix - Renders content before the input\n * @slot suffix - Renders content after the input\n * @slot helper-text - Renders content below the input\n * @slot value-missing - Renders content when the required validation fails.\n * @slot bad-input - Renders content when a required mask pattern validation fails.\n * @slot custom-error - Renders content when setCustomValidity(message) is set.\n * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).\n *\n * @fires igcInput - Emitted when the control receives user input\n * @fires igcChange - Emitted when an alteration of the control's value is committed by the user\n *\n * @csspart container - The main wrapper that holds all main input elements\n * @csspart input - The native input element\n * @csspart label - The native label element\n * @csspart prefix - The prefix wrapper\n * @csspart suffix - The suffix wrapper\n * @csspart helper-text - The helper text wrapper\n */\n\nexport default class IgcMaskInputComponent extends MaskBehaviorMixin(\n  IgcInputBaseComponent\n) {\n  public static readonly tagName = 'igc-mask-input';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcMaskInputComponent, IgcValidationContainerComponent);\n  }\n\n  //#region Internal attributes and properties\n\n  protected override readonly _parser = new MaskParser();\n\n  protected override get __validators() {\n    return maskValidators;\n  }\n\n  protected override readonly _themes = addThemingController(this, all);\n\n  protected override readonly _slots = addSlotController(this, {\n    slots: Slots,\n  });\n\n  protected override readonly _formValue = createFormValueState(this, {\n    initialValue: '',\n    transformers: {\n      setFormValue: (value) =>\n        this._isRawMode ? value || null : this._maskedValue || null,\n    },\n  });\n\n  protected get _isRawMode(): boolean {\n    return this.valueMode === 'raw';\n  }\n\n  //#endregion\n\n  //#region Public attributes and properties\n\n  /**\n   * Dictates the behavior when retrieving the value of the control:\n   *\n   * - `raw`: Returns clean input (e.g. \"5551234567\")\n   * - `withFormatting`: Returns with mask formatting (e.g. \"(555) 123-4567\")\n   *\n   * Empty values always return an empty string, regardless of the value mode.\n   * @attr value-mode\n   * @default 'raw'\n   */\n  @property({ attribute: 'value-mode' })\n  public valueMode: MaskInputValueMode = 'raw';\n\n  /* @tsTwoWayProperty(true, \"igcChange\", \"detail\", false) */\n  /**\n   * The value of the input.\n   *\n   * Regardless of the currently set `value-mode`, an empty value returns an empty string.\n   *\n   * @attr\n   */\n  @property()\n  public set value(string: string) {\n    const value = string ?? '';\n    this._maskedValue = this._parser.apply(value);\n    this._updateMaskedValue();\n    this._formValue.setValueAndFormState(value);\n  }\n\n  public get value(): string {\n    const value = this._formValue.value;\n\n    if (this._isRawMode) {\n      return value;\n    }\n    return value ? this._maskedValue : value;\n  }\n\n  /**\n   * The masked pattern of the component.\n   *\n   * @attr\n   * @default 'CCCCCCCCCC'\n   */\n  @property()\n  public override set mask(value: string) {\n    super.mask = value;\n    if (this.value) {\n      this._maskedValue = this._parser.apply(this._formValue.value);\n    }\n  }\n\n  public override get mask(): string {\n    return super.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 override set prompt(value: string) {\n    super.prompt = value;\n    if (this.value) {\n      this._maskedValue = this._parser.apply(this._formValue.value);\n    }\n  }\n\n  public override get prompt(): string {\n    return super.prompt;\n  }\n\n  //#endregion\n\n  //#region Event handlers\n\n  protected _handleDragEnter(): void {\n    if (!this._focused && !this._formValue.value) {\n      this._maskedValue = this._parser.emptyMask;\n    }\n  }\n\n  protected _handleDragLeave(): void {\n    if (!this._focused) {\n      this._updateMaskedValue();\n    }\n  }\n\n  protected async _handleFocus(): Promise<void> {\n    this._focused = true;\n\n    if (this.readOnly) {\n      return;\n    }\n\n    if (!this._formValue.value) {\n      // In case of empty value, select the whole mask\n      this._maskedValue = this._parser.emptyMask;\n      this._historyResync();\n\n      await this.updateComplete;\n      this.select();\n      return;\n    }\n\n    this._historyResync();\n  }\n\n  protected override _handleBlur(): void {\n    this._focused = false;\n    this._updateMaskedValue();\n    super._handleBlur();\n  }\n\n  protected _handleChange(): void {\n    this._setTouchedState();\n    this.emitEvent('igcChange', { detail: this.value });\n  }\n\n  //#endregion\n\n  //#region Internal methods\n\n  /**\n   * Commits straight to the form value instead of going through the `value` setter: the\n   * setter re-applies the parser, and `apply(parse(x))` left-packs the text - a mask with\n   * an interior hole such as `1_2-___` would collapse to `12_-___`.\n   */\n  protected override _commitMaskedValue(value: string): void {\n    this._maskedValue = value;\n    this._formValue.setValueAndFormState(this._parser.parse(value));\n\n    // Reachable unfocused only through `setRangeText`, where an emptied mask must read\n    // as an empty document - as it does after a blur - rather than a row of prompts.\n    if (!this._focused) {\n      this._updateMaskedValue();\n    }\n  }\n\n  protected override _emitInputEvent(): void {\n    this._setTouchedState();\n    this.emitEvent('igcInput', { detail: this.value });\n  }\n\n  protected override _syncValueFromMask(): void {\n    this.value = this._parser.parse(this._maskedValue);\n  }\n\n  private _updateMaskedValue(): void {\n    if (this._isEmptyMask) {\n      this._maskedValue = '';\n    }\n  }\n\n  //#endregion\n\n  //#region Public methods\n\n  /* blazorSuppress */\n  /** Returns whether the current masked input is valid according to the mask pattern. */\n  public isValidMaskPattern(): boolean {\n    return this._parser.isValidString(this._maskedValue);\n  }\n\n  //#endregion\n\n  protected override _renderInput() {\n    const hasNegativeTabIndex = this.getAttribute('tabindex') === '-1';\n\n    return renderMaskedNativeInput({\n      id: this._inputId,\n      partNames: this._resolvePartNames('input'),\n      name: this.name,\n      value: this._maskedValue,\n      placeholder: this.placeholder ?? this._parser.escapedMask,\n      readOnly: this.readOnly,\n      disabled: this.disabled,\n      autofocus: this.autofocus,\n      inputMode: this.inputMode,\n      tabindex: hasNegativeTabIndex ? -1 : undefined,\n      aria: this._ariaTarget.resolveBindings(),\n      onInput: this._handleInput,\n      onBeforeInput: this._handleBeforeInput,\n      onFocus: this._handleFocus,\n      onBlur: this._handleBlur,\n      onClick: this._handleClick,\n      onSetMaskSelection: this._setMaskSelection,\n      onCompositionStart: this._handleCompositionStart,\n      onCompositionEnd: this._handleCompositionEnd,\n      onChange: this._handleChange,\n      onDragEnter: this._handleDragEnter,\n      onDragLeave: this._handleDragLeave,\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-mask-input': IgcMaskInputComponent;\n  }\n}\n"]}

package/components/mask-input/mask-parser.d.ts

@@ -1,5 +1,5 @@
 /** Options for the {@link MaskParser} */
-interface MaskOptions {
+export interface MaskOptions {
     /**
      * The mask format string (e.g., '00/00/0000' for dates, 'AAA-000' for custom IDs).
      *
@@ -11,7 +11,9 @@ interface MaskOptions {
     format?: string;
     /**
      * The character used to prompt for input in unfilled mask positions.
-     * Must be a single character.
+     *
+     * Only the first character is used, and a mask flag is rejected in favor of the
+     * default - the same rules the `prompt` accessor applies.
      * @default '_'
      */
     promptCharacter?: string;
@@ -43,6 +45,12 @@ export declare class MaskParser {
     protected _escapedMask: string;
     /** Cached array of required non-literal positions for validation */
     protected _requiredPositions: number[];
+    /**
+     * Declared without an initializer on purpose. With `useDefineForClassFields: false`
+     * nothing is emitted for it, so {@link _invalidate} can safely run from the
+     * constructor - before subclass fields exist.
+     */
+    private _emptyMask?;
     /**
      * Returns a set of the all the literal positions in the mask.
      * These positions are fixed characters that are not part of the input.
@@ -78,6 +86,16 @@ export declare class MaskParser {
     set prompt(value: string);
     constructor(options?: MaskOptions);
     private _isEscapedFlag;
+    /**
+     * The pattern the literal parser consumes. Subclasses whose public format is not itself
+     * a mask pattern - date formats, for instance - translate it here.
+     */
+    protected _toMaskFormat(format: string): string;
+    /**
+     * Drops everything derived from the mask. Runs on every mask *and* prompt change, and
+     * from the constructor, so overrides must not touch fields with initializers.
+     */
+    protected _invalidate(): void;
     /**
      * Parses the mask format string to identify literal characters and
      * create the escaped mask. This method is called whenever the mask format changes.

package/components/mask-input/mask-parser.js

@@ -28,6 +28,10 @@ const UNICODE_DIGIT_TO_ASCII = new Map(DIGIT_ZERO_CODEPOINTS.flatMap((zeroCodePo
     zeroCodePoint + i,
     String.fromCharCode(ASCII_ZERO + i),
 ])));
+function normalizePrompt(value, current) {
+    const char = value ? value.substring(0, 1) : current;
+    return MASK_FLAGS.has(char) ? current : char;
+}
 function replaceUnicodeNumbers(text) {
     const matcher = /\p{Nd}/gu;
     return text.replace(matcher, (digit) => {
@@ -48,10 +52,6 @@ const MASK_PATTERNS = new Map([
 function validate(char, flag) {
     return MASK_PATTERNS.get(flag)?.test(char) ?? false;
 }
-const MaskDefaultOptions = {
-    format: DEFAULT_FORMAT,
-    promptCharacter: DEFAULT_PROMPT,
-};
 export class MaskParser {
     get literalPositions() {
         return this._literalPositions;
@@ -60,7 +60,8 @@ export class MaskParser {
         return this._escapedMask;
     }
     get emptyMask() {
-        return this.apply();
+        this._emptyMask ??= this.apply();
+        return this._emptyMask;
     }
     get mask() {
         return this._options.format;
@@ -73,25 +74,31 @@ export class MaskParser {
         return this._options.promptCharacter;
     }
     set prompt(value) {
-        const char = value ? value.substring(0, 1) : this._options.promptCharacter;
-        if (MASK_FLAGS.has(char)) {
-            return;
-        }
-        this._options.promptCharacter = char;
+        this._options.promptCharacter = normalizePrompt(value, this._options.promptCharacter);
+        this._invalidate();
     }
     constructor(options) {
         this._literals = new Map();
         this._literalPositions = new Set();
         this._escapedMask = '';
         this._requiredPositions = [];
-        this._options = { ...MaskDefaultOptions, ...options };
+        this._options = {
+            format: options?.format || DEFAULT_FORMAT,
+            promptCharacter: normalizePrompt(options?.promptCharacter, DEFAULT_PROMPT),
+        };
         this._parseMaskLiterals();
     }
     _isEscapedFlag(char, nextChar) {
         return char === ESCAPE_CHAR && MASK_FLAGS.has(nextChar);
     }
+    _toMaskFormat(format) {
+        return format;
+    }
+    _invalidate() {
+        this._emptyMask = undefined;
+    }
     _parseMaskLiterals() {
-        const mask = this.mask;
+        const mask = this._toMaskFormat(this._options.format);
         const length = mask.length;
         const escapedMaskChars = [];
         let currentPos = 0;
@@ -115,6 +122,7 @@ export class MaskParser {
         this._escapedMask = escapedMaskChars.join('');
         this._literalPositions = new Set(this._literals.keys());
         this._requiredPositions = this._computeRequiredPositions();
+        this._invalidate();
     }
     _computeRequiredPositions() {
         const literalPositions = this._literalPositions;
@@ -154,7 +162,7 @@ export class MaskParser {
         const length = escapedMask.length;
         const prompt = this.prompt;
         const endBoundary = Math.min(end, length);
-        const maskedChars = maskString ? [...maskString] : [...this.apply('')];
+        const maskedChars = maskString ? [...maskString] : [...this.emptyMask];
         const inputChars = Array.from(replaceUnicodeNumbers(value));
         const inputLength = inputChars.length;
         for (let i = start; i < endBoundary; i++) {