npm - igniteui-webcomponents - Versions diffs - 6.4.0-alpha.4 → 6.5.0 - Mend

igniteui-webcomponents 6.4.0-alpha.4 → 6.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (431) hide show

package/components/list/themes/light/container/list.fluent.css.js CHANGED Viewed

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--border-color: var(--ig-list-border-color, var(--ig-gray-200));--border-width: var(--ig-list-border-width, 0.0625rem);--ig-theme: fluent}`;
+export const styles = css `:host{--header-text-color: var(--ig-list-header-text-color, var(--ig-secondary-700));--border-color: var(--ig-list-border-color, var(--ig-gray-200));--border-width: var(--ig-list-border-width, 0.0625rem);--ig-theme: fluent}`;
 //# sourceMappingURL=list.fluent.css.js.map

package/components/list/themes/light/container/list.fluent.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"list.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/list/themes/light/container/list.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,~~kJAAkJ~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--border-color: var(--ig-list-border-color, var(--ig-gray-200));--border-width: var(--ig-list-border-width, 0.0625rem);--ig-theme: fluent}`;\n"]}
1	+ {"version":3,"file":"list.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/list/themes/light/container/list.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,iOAAiO,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--header-text-color: var(--ig-list-header-text-color, var(--ig-secondary-700));--border-color: var(--ig-list-border-color, var(--ig-gray-200));--border-width: var(--ig-list-border-width, 0.0625rem);--ig-theme: fluent}`;\n"]}

package/components/list/themes/shared/item/list-item.common.css.js CHANGED Viewed

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{border-radius:var(--item-border-radius);color:var(--item-text-color);background:var(--item-background);border-bottom:var(--border-width) solid var(--border-color)}:host(:last-of-type){border-bottom:none}[part=title]{color:var(--item-title-color)}[part=subtitle]{color:var(--item-subtitle-color)}[part=start]{color:var(--item-thumbnail-color)}[part=end]{color:var(--item-action-color)}:host([selected]){color:var(--item-text-color-selected);background:var(--item-background-selected)}:host([selected]) [part=title]{color:var(--item-title-color-selected)}:host([selected]) [part=subtitle]{color:var(--item-subtitle-color-selected)}:host([selected]) [part=start]{color:var(--item-thumbnail-color-selected)}:host([selected]) [part=end]{color:var(--item-action-color-selected)}:host(:hover),:host(:focus-within){background:var(--item-background-hover);color:var(--item-text-color-hover)}:host(:hover) [part=title],:host(:focus-within) [part=title]{color:var(--item-title-color-hover)}:host(:hover) [part=subtitle],:host(:focus-within) [part=subtitle]{color:var(--item-subtitle-color-hover)}:host(:hover) [part=start],:host(:focus-within) [part=start]{color:var(--item-thumbnail-color-hover)}:host(:hover) [part=end],:host(:focus-within) [part=end]{color:var(--item-action-color-hover)}:host(:active){color:var(--item-text-color-active);background:var(--item-background-active)}:host(:active) [part=title]{color:var(--item-title-color-active)}:host(:active) [part=subtitle]{color:var(--item-subtitle-color-active)}:host(:active) [part=start]{color:var(--item-thumbnail-color-active)}:host(:active) [part=end]{color:var(--item-action-color-active)}`;
+export const styles = css `:host{border-radius:var(--item-border-radius);color:var(--item-text-color);background:var(--item-background);border-bottom:var(--border-width) solid var(--border-color)}:host(:last-of-type){border-bottom:none}[part=title]{color:var(--item-title-color)}[part=subtitle]{color:var(--item-subtitle-color)}[part=start]{color:var(--item-thumbnail-color)}[part=start] ::slotted(igc-avatar){--icon-color: var(--item-thumbnail-color)}[part=end]{color:var(--item-action-color)}:host(:hover),:host(:focus-within){background:var(--item-background-hover);color:var(--item-text-color-hover)}:host(:hover) [part=title],:host(:focus-within) [part=title]{color:var(--item-title-color-hover)}:host(:hover) [part=subtitle],:host(:focus-within) [part=subtitle]{color:var(--item-subtitle-color-hover)}:host(:hover) [part=start],:host(:focus-within) [part=start]{color:var(--item-thumbnail-color-hover)}:host(:hover) [part=start] ::slotted(igc-avatar),:host(:focus-within) [part=start] ::slotted(igc-avatar){--icon-color: var(--item-thumbnail-color-hover)}:host(:hover) [part=end],:host(:focus-within) [part=end]{color:var(--item-action-color-hover)}:host(:active){color:var(--item-text-color-active);background:var(--item-background-active)}:host(:active) [part=title]{color:var(--item-title-color-active)}:host(:active) [part=subtitle]{color:var(--item-subtitle-color-active)}:host(:active) [part=start]{color:var(--item-thumbnail-color-active)}:host(:active) [part=start] ::slotted(igc-avatar){--icon-color: var(--item-thumbnail-color-active)}:host(:active) [part=end]{color:var(--item-action-color-active)}:host([selected]){color:var(--item-text-color-selected);background:var(--item-background-selected)}:host([selected]) [part=title]{color:var(--item-title-color-selected)}:host([selected]) [part=subtitle]{color:var(--item-subtitle-color-selected)}:host([selected]) [part=start]{color:var(--item-thumbnail-color-selected)}:host([selected]) [part=start] ::slotted(igc-avatar){--icon-color: var(--item-thumbnail-color-selected)}:host([selected]) [part=end]{color:var(--item-action-color-selected)}`;
 //# sourceMappingURL=list-item.common.css.js.map

package/components/list/themes/shared/item/list-item.common.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"list-item.common.css.js","sourceRoot":"","sources":["../../../../../../src/components/list/themes/shared/item/list-item.common.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,~~inDAAinD~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{border-radius:var(--item-border-radius);color:var(--item-text-color);background:var(--item-background);border-bottom:var(--border-width) solid var(--border-color)}:host(:last-of-type){border-bottom:none}[part=title]{color:var(--item-title-color)}[part=subtitle]{color:var(--item-subtitle-color)}[part=start]{color:var(--item-thumbnail-color)}[part=~~end~~]{color:var(--item-~~action~~-color)}~~:host(~~[~~selected~~]){color:var(--item-~~text~~-color-~~selected~~);background:var(--item-background-~~selected~~)}:host([~~selected~~]) [part=title]{color:var(--item-title-color-~~selected~~)}:host([~~selected~~]) [part=subtitle]{color:var(--item-subtitle-color-~~selected~~)}:host([~~selected~~]) [part=start]{color:var(--item-thumbnail-color-~~selected~~)}:host([~~selected~~]) [part=~~end~~]{color:var(--item-~~action~~-color-~~selected~~)}:host(:hover),:host(:focus-within){~~background~~:var(--item-~~background~~-hover);color:var(--item-text-color-~~hover~~)}:~~host~~(:~~hover) [part=title],:~~host(:~~focus-within~~) [part=title]{color:var(--item-title-color-~~hover~~)}:host(:~~hover~~) [part=subtitle],:host(:~~focus-within~~) [part=~~subtitle~~]{color:var(--item-~~subtitle~~-color-~~hover~~)}:host(:~~hover~~) [part=start]~~,:host~~(~~:focus~~-~~within~~) ~~[part=start]~~{color:var(--item-thumbnail-color-~~hover~~)}:host(:~~hover~~) [part=end]~~,:host(:focus-within) [part=end]~~{color:var(--item-action-color-~~hover~~)}:host(~~:active~~){color:var(--item-text-color-~~active~~);background:var(--item-background-~~active~~)}:host(~~:active~~) [part=title]{color:var(--item-title-color-~~active~~)}:host(~~:active~~) [part=subtitle]{color:var(--item-subtitle-color-~~active~~)}:host(~~:active~~) [part=start]{color:var(--item-thumbnail-color-~~active~~)}:host(:~~active~~) [part=end]{color:var(--item-action-color-~~active~~)}`;\n"]}
1	+ {"version":3,"file":"list-item.common.css.js","sourceRoot":"","sources":["../../../../../../src/components/list/themes/shared/item/list-item.common.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,kiEAAkiE,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{border-radius:var(--item-border-radius);color:var(--item-text-color);background:var(--item-background);border-bottom:var(--border-width) solid var(--border-color)}:host(:last-of-type){border-bottom:none}[part=title]{color:var(--item-title-color)}[part=subtitle]{color:var(--item-subtitle-color)}[part=start]{color:var(--item-thumbnail-color)}[part=start] ::slotted(igc-avatar){--icon-color: var(--item-thumbnail-color)}[part=end]{color:var(--item-action-color)}:host(:hover),:host(:focus-within){background:var(--item-background-hover);color:var(--item-text-color-hover)}:host(:hover) [part=title],:host(:focus-within) [part=title]{color:var(--item-title-color-hover)}:host(:hover) [part=subtitle],:host(:focus-within) [part=subtitle]{color:var(--item-subtitle-color-hover)}:host(:hover) [part=start],:host(:focus-within) [part=start]{color:var(--item-thumbnail-color-hover)}:host(:hover) [part=start] ::slotted(igc-avatar),:host(:focus-within) [part=start] ::slotted(igc-avatar){--icon-color: var(--item-thumbnail-color-hover)}:host(:hover) [part=end],:host(:focus-within) [part=end]{color:var(--item-action-color-hover)}:host(:active){color:var(--item-text-color-active);background:var(--item-background-active)}:host(:active) [part=title]{color:var(--item-title-color-active)}:host(:active) [part=subtitle]{color:var(--item-subtitle-color-active)}:host(:active) [part=start]{color:var(--item-thumbnail-color-active)}:host(:active) [part=start] ::slotted(igc-avatar){--icon-color: var(--item-thumbnail-color-active)}:host(:active) [part=end]{color:var(--item-action-color-active)}:host([selected]){color:var(--item-text-color-selected);background:var(--item-background-selected)}:host([selected]) [part=title]{color:var(--item-title-color-selected)}:host([selected]) [part=subtitle]{color:var(--item-subtitle-color-selected)}:host([selected]) [part=start]{color:var(--item-thumbnail-color-selected)}:host([selected]) [part=start] ::slotted(igc-avatar){--icon-color: var(--item-thumbnail-color-selected)}:host([selected]) [part=end]{color:var(--item-action-color-selected)}`;\n"]}

package/components/list/themes/shared/item/list-item.indigo.css.js CHANGED Viewed

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{padding-inline:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));gap:.5rem}:host ::slotted(igc-avatar){--ig-size: 2}[part=title]{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom)}[part=end]{gap:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem))}`;
+export const styles = css `:host{padding-inline:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));gap:.5rem}:host ::slotted(igc-button),:host ::slotted(igc-icon-button),:host ::slotted(igc-icon),:host ::slotted(igc-avatar){--ig-size: 2}[part=title]{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom)}[part=end]{gap:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem))}`;
 //# sourceMappingURL=list-item.indigo.css.js.map

package/components/list/themes/shared/item/list-item.indigo.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"list-item.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/list/themes/shared/item/list-item.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,~~g3CAAg3C~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{padding-inline:max(var(--is-large, 1)max(1rem, -1 1rem)var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)max(0.75rem, -1 * 0.75rem)var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)max(0.5rem, -1 * 0.5rem)var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block:max(var(--is-large, 1)max(0.5rem, -1 * 0.5rem)var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)max(0.375rem, -1 * 0.375rem)var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)max(0.25rem, -1 * 0.25rem)var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));gap:.5rem}:host ::slotted(igc-avatar){--ig-size: 2}[part=title]{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom)}[part=end]{gap:max(var(--is-large, 1)max(0.5rem, -1 * 0.5rem),var(--is-medium, 1)max(0.375rem, -1 0.375rem),var(--is-small, 1)max(0.25rem, -1 0.25rem))}`;\n"]}
1	+ {"version":3,"file":"list-item.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/list/themes/shared/item/list-item.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,u8CAAu8C,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{padding-inline:max(var(--is-large, 1)max(1rem, -1 1rem)var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)max(0.75rem, -1 * 0.75rem)var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)max(0.5rem, -1 * 0.5rem)var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block:max(var(--is-large, 1)max(0.5rem, -1 * 0.5rem)var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)max(0.375rem, -1 * 0.375rem)var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)max(0.25rem, -1 * 0.25rem)var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));gap:.5rem}:host ::slotted(igc-button),:host ::slotted(igc-icon-button),:host ::slotted(igc-icon),:host ::slotted(igc-avatar){--ig-size: 2}[part=title]{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom)}[part=end]{gap:max(var(--is-large, 1)max(0.5rem, -1 * 0.5rem),var(--is-medium, 1)max(0.375rem, -1 0.375rem),var(--is-small, 1)max(0.25rem, -1 0.25rem))}`;\n"]}

package/components/mask-input/mask-input-base.d.ts CHANGED Viewed

@@ -8,10 +8,17 @@ export type MaskSelection = {
 export declare abstract class IgcMaskInputBaseComponent extends IgcInputBaseComponent {
     protected readonly _parser: MaskParser;
     protected _maskSelection: MaskSelection;
-    protected compositionStart: number;
+    protected _compositionStart: number;
     protected _focused: boolean;
     protected _maskedValue: string;
     protected get _inputSelection(): MaskSelection;
+    /**
+     * Makes the control a readonly field.
+     *
+     * @attr readonly
+     * @default false
+     */
+    readOnly: boolean;
     /**
      * The masked pattern of the component.
      *
@@ -35,9 +42,8 @@ export declare abstract class IgcMaskInputBaseComponent extends IgcInputBaseComp
     protected _handleClick(): void;
     protected abstract _updateSetRangeTextValue(): void;
     protected abstract _updateInput(text: string, range: MaskSelection): void;
-    /** Selects all text within the input. */
-    select(): void;
-    setSelectionRange(start: number, end: number, direction?: SelectionRangeDirection): 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 */
     setRangeText(replacement: string, start?: number, end?: number, selectMode?: RangeTextSelectMode): void;
 }

package/components/mask-input/mask-input-base.js CHANGED Viewed

@@ -13,14 +13,15 @@ let IgcMaskInputBaseComponent = class IgcMaskInputBaseComponent extends IgcInput
         super(...arguments);
         this._parser = new MaskParser();
         this._maskSelection = { start: 0, end: 0 };
-        this.compositionStart = 0;
+        this._compositionStart = 0;
         this._focused = false;
         this._maskedValue = '';
+        this.readOnly = false;
     }
     get _inputSelection() {
         return {
-            start: this.input.selectionStart || 0,
-            end: this.input.selectionEnd || 0,
+            start: this._input?.selectionStart || 0,
+            end: this._input?.selectionEnd || 0,
         };
     }
     set mask(value) {
@@ -36,7 +37,7 @@ let IgcMaskInputBaseComponent = class IgcMaskInputBaseComponent extends IgcInput
         return this._parser.prompt;
     }
     async _handleInput({ inputType, isComposing, }) {
-        const value = this.input.value;
+        const value = this._input?.value ?? '';
         const { start, end } = this._maskSelection;
         const deletePosition = this._parser.getNextNonLiteralPosition(end) + 1;
         this._setTouchedState();
@@ -44,12 +45,12 @@ let IgcMaskInputBaseComponent = class IgcMaskInputBaseComponent extends IgcInput
             case 'deleteContentForward':
                 this._updateInput('', { start, end: deletePosition });
                 await this.updateComplete;
-                return this.input.setSelectionRange(deletePosition, deletePosition);
+                return this._input?.setSelectionRange(deletePosition, deletePosition);
             case 'deleteContentBackward':
                 if (isComposing)
                     return;
                 return this._updateInput('', {
-                    start: this._parser.getPreviousNonLiteralPosition(this._inputSelection.start),
+                    start: this._parser.getPreviousNonLiteralPosition(this._inputSelection.start + 1),
                     end,
                 });
             case 'deleteByCut':
@@ -64,7 +65,8 @@ let IgcMaskInputBaseComponent = class IgcMaskInputBaseComponent extends IgcInput
             case 'insertFromDrop':
                 return this._updateInput(value.substring(this._inputSelection.start, this._inputSelection.end), { ...this._inputSelection });
             case undefined:
-                return this._updateInput(value.substring(start, this._inputSelection.end), {
+            case '':
+                return this._updateInput(this._parser.parse(value.substring(start, this._inputSelection.end)), {
                     start,
                     end: this._inputSelection.end,
                 });
@@ -74,26 +76,26 @@ let IgcMaskInputBaseComponent = class IgcMaskInputBaseComponent extends IgcInput
         this._maskSelection = this._inputSelection;
     }
     _handleCompositionStart() {
-        this.compositionStart = this._inputSelection.start;
+        this._compositionStart = this._inputSelection.start;
     }
     _handleCompositionEnd({ data }) {
         this._updateInput(data, {
-            start: this.compositionStart,
+            start: this._compositionStart,
             end: this._inputSelection.end,
         });
     }
     _handleClick() {
-        const { selectionStart: start, selectionEnd: end } = this.input;
+        const { selectionStart: start, selectionEnd: end } = this._input ?? {
+            selectionStart: 0,
+            selectionEnd: 0,
+        };
         if (start === end && start === this._maskedValue.length) {
             this.select();
         }
     }
-    select() {
-        this.input.select();
-    }
-    setSelectionRange(start, end, direction) {
-        super.setSelectionRange(start, end, direction);
-        this._maskSelection = { start, end };
+    setSelectionRange(start, end, direction = 'none') {
+        this._input?.setSelectionRange(start ?? null, end ?? null, direction);
+        this._maskSelection = { start: start ?? 0, end: end ?? 0 };
     }
     setRangeText(replacement, start, end, selectMode) {
         const current = this._inputSelection;
@@ -125,6 +127,9 @@ __decorate([
 __decorate([
     state()
 ], IgcMaskInputBaseComponent.prototype, "_maskedValue", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IgcMaskInputBaseComponent.prototype, "readOnly", void 0);
 __decorate([
     property()
 ], IgcMaskInputBaseComponent.prototype, "mask", null);

package/components/mask-input/mask-input-base.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mask-input-base.js","sourceRoot":"","sources":["../../../src/components/mask-input/mask-input-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { property, state } from 'lit/decorators.js';\nimport { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';\nimport { IgcInputBaseComponent } from '../input/input-base.js';\nimport type { RangeTextSelectMode, SelectionRangeDirection } from '../types.js';\nimport { MaskParser } from './mask-parser.js';\n\nexport type MaskSelection = {\n start: number;\n end: number;\n};\n\n@blazorDeepImport\nexport abstract class IgcMaskInputBaseComponent extends IgcInputBaseComponent {\n //#region Internal state and properties\n\n protected readonly _parser = new MaskParser();\n\n protected _maskSelection: MaskSelection = { start: 0, end: 0 };\n protected compositionStart = 0;\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 //#endregion\n\n //#region Public attributes and properties\n\n /*\n The masked pattern of the component.\n \n @attr\n * @default 'CCCCCCCCCC'\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 this._setTouchedState();\n\n switch (inputType) {\n case 'deleteContentForward':\n this._updateInput('', { start, end: deletePosition });\n await this.updateComplete;\n return this.input.setSelectionRange(deletePosition, deletePosition);\n\n case 'deleteContentBackward':\n if (isComposing) return;\n return this._updateInput('', {\n start: this._parser.getPreviousNonLiteralPosition(\n this._inputSelection.start\n ),\n end,\n });\n\n case 'deleteByCut':\n return this._updateInput('', this._maskSelection);\n\n case 'insertText':\n return this._updateInput(\n value.substring(start, this._inputSelection.end),\n this._maskSelection\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 );\n\n case 'insertFromDrop':\n return this._updateInput(\n value.substring(this._inputSelection.start, this._inputSelection.end),\n { ...this._inputSelection }\n );\n\n // Potential browser auto-fill behavior\n case undefined:\n return this._updateInput(\n value.substring(start, this._inputSelection.end),\n {\n start,\n end: this._inputSelection.end,\n }\n );\n }\n }\n\n protected _setMaskSelection(): void {\n this._maskSelection = this._inputSelection;\n }\n\n protected _handleCompositionStart(): void {\n this.compositionStart = this._inputSelection.start;\n }\n\n protected _handleCompositionEnd({ data }: CompositionEvent): void {\n this._updateInput(data, {\n start: this.compositionStart,\n end: this._inputSelection.end,\n });\n }\n\n protected _handleClick(): void {\n const { selectionStart: start, selectionEnd: end } = this.input;\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 //#endregion\n\n //#region Internal methods\n\n protected abstract _updateSetRangeTextValue(): void;\n protected abstract _updateInput(text: string, range: MaskSelection): void;\n\n //#endregion\n\n //#region Public methods\n\n /* Selects all text within the input. /\n public select(): void {\n this.input.select();\n }\n\n / blazorSuppress /\n public override setSelectionRange(\n start: number,\n end: number,\n direction?: SelectionRangeDirection\n ): void {\n super.setSelectionRange(start, end, direction);\n this._maskSelection = { start, end };\n }\n\n / blazorSuppress /\n /* Replaces the selected text in the control and re-applies the mask */\n public override setRangeText(\n replacement: string,\n start?: number,\n end?: number,\n selectMode?: RangeTextSelectMode\n ) {\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 this._maskedValue = this._parser.apply(this._parser.parse(result.value));\n this._updateSetRangeTextValue();\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"]}
1	+ {"version":3,"file":"mask-input-base.js","sourceRoot":"","sources":["../../../src/components/mask-input/mask-input-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { property, state } from 'lit/decorators.js';\nimport { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';\nimport { IgcInputBaseComponent } from '../input/input-base.js';\nimport type { RangeTextSelectMode, SelectionRangeDirection } from '../types.js';\nimport { MaskParser } from './mask-parser.js';\n\nexport type MaskSelection = {\n start: number;\n end: number;\n};\n\n@blazorDeepImport\nexport abstract class IgcMaskInputBaseComponent extends IgcInputBaseComponent {\n //#region Internal state and properties\n\n protected readonly _parser = new MaskParser();\n\n protected _maskSelection: MaskSelection = { start: 0, end: 0 };\n protected _compositionStart = 0;\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 //#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 masked pattern of the component.\n \n @attr\n * @default 'CCCCCCCCCC'\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 this._setTouchedState();\n\n switch (inputType) {\n case 'deleteContentForward':\n this._updateInput('', { start, end: deletePosition });\n await this.updateComplete;\n return this._input?.setSelectionRange(deletePosition, deletePosition);\n\n case 'deleteContentBackward':\n if (isComposing) return;\n return this._updateInput('', {\n start: this._parser.getPreviousNonLiteralPosition(\n this._inputSelection.start + 1\n ),\n end,\n });\n\n case 'deleteByCut':\n return this._updateInput('', this._maskSelection);\n\n case 'insertText':\n return this._updateInput(\n value.substring(start, this._inputSelection.end),\n this._maskSelection\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 );\n\n case 'insertFromDrop':\n return this._updateInput(\n value.substring(this._inputSelection.start, this._inputSelection.end),\n { ...this._inputSelection }\n );\n\n // Potential browser auto-fill behavior\n case undefined:\n case '':\n return this._updateInput(\n this._parser.parse(value.substring(start, this._inputSelection.end)),\n {\n start,\n end: this._inputSelection.end,\n }\n );\n }\n }\n\n protected _setMaskSelection(): void {\n this._maskSelection = this._inputSelection;\n }\n\n protected _handleCompositionStart(): void {\n this._compositionStart = this._inputSelection.start;\n }\n\n protected _handleCompositionEnd({ data }: CompositionEvent): void {\n this._updateInput(data, {\n start: this._compositionStart,\n end: this._inputSelection.end,\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 //#endregion\n\n //#region Internal methods\n\n protected abstract _updateSetRangeTextValue(): void;\n protected abstract _updateInput(text: string, range: MaskSelection): void;\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 this._maskedValue = this._parser.apply(this._parser.parse(result.value));\n this._updateSetRangeTextValue();\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"]}

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

@@ -26,16 +26,20 @@ import { IgcMaskInputBaseComponent, type MaskSelection } from './mask-input-base
  */
 export default class IgcMaskInputComponent extends IgcMaskInputBaseComponent {
     static readonly tagName = "igc-mask-input";
+    static styles: import("lit").CSSResult[];
     static register(): void;
     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 _isRawMode(): boolean;
     /**
      * Dictates the behavior when retrieving the value of the control:
      *
-     * - `raw` will return the clean user input.
-     * - `withFormatting` will return the value with all literals and prompts.
+     * - `raw`: Returns clean input (e.g. "5551234567")
+     * - `withFormatting`: Returns with mask formatting (e.g. "(555) 123-4567")
      *
+     * Empty values always return an empty string, regardless of the value mode.
      * @attr value-mode
      * @default 'raw'
      */
@@ -74,7 +78,9 @@ export default class IgcMaskInputComponent extends IgcMaskInputBaseComponent {
     protected _updateInput(text: string, { start, end }: MaskSelection): Promise<void>;
     protected _updateSetRangeTextValue(): void;
     private _updateMaskedValue;
-    protected renderInput(): import("lit-html").TemplateResult<1>;
+    /** Returns whether the current masked input is valid according to the mask pattern. */
+    isValidMaskPattern(): boolean;
+    protected _renderInput(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -4,20 +4,30 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, nothing } from 'lit';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.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 { partMap } from '../common/part-map.js';
-import { isEmpty } from '../common/util.js';
+import { bindIf } from '../common/util.js';
+import { styles } from '../input/themes/input.base.css.js';
+import { styles as shared } from '../input/themes/shared/input.common.css.js';
+import { all } from '../input/themes/themes.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import { IgcMaskInputBaseComponent, } from './mask-input-base.js';
 import { maskValidators } from './validators.js';
+const Slots = setSlots('prefix', 'suffix', 'helper-text', 'value-missing', 'bad-input', 'custom-error', 'invalid');
 export default class IgcMaskInputComponent extends IgcMaskInputBaseComponent {
     constructor() {
         super(...arguments);
+        this._themes = addThemingController(this, all);
+        this._slots = addSlotController(this, {
+            slots: Slots,
+        });
         this._formValue = createFormValueState(this, {
             initialValue: '',
             transformers: {
@@ -27,6 +37,7 @@ export default class IgcMaskInputComponent extends IgcMaskInputBaseComponent {
         this.valueMode = 'raw';
     }
     static { this.tagName = 'igc-mask-input'; }
+    static { this.styles = [styles, shared]; }
     static register() {
         registerComponent(IgcMaskInputComponent, IgcValidationContainerComponent);
     }
@@ -112,7 +123,7 @@ export default class IgcMaskInputComponent extends IgcMaskInputBaseComponent {
             this.emitEvent('igcInput', { detail: this.value });
         }
         await this.updateComplete;
-        this.input.setSelectionRange(result.end, result.end);
+        this._input?.setSelectionRange(result.end, result.end);
     }
     _updateSetRangeTextValue() {
         this.value = this._parser.parse(this._maskedValue);
@@ -122,16 +133,26 @@ export default class IgcMaskInputComponent extends IgcMaskInputBaseComponent {
             this._maskedValue = '';
         }
     }
-    renderInput() {
+    isValidMaskPattern() {
+        return this._parser.isValidString(this._maskedValue);
+    }
+    _renderInput() {
+        const hasNegativeTabIndex = this.getAttribute('tabindex') === '-1';
+        const hasHelperText = this._slots.hasAssignedElements('helper-text');
         return html `
       <input
+        id=${this._inputId}
         type="text"
-        part=${partMap(this.resolvePartNames('input'))}
+        part=${partMap(this._resolvePartNames('input'))}
         name=${ifDefined(this.name)}
         .value=${live(this._maskedValue)}
         .placeholder=${this.placeholder ?? this._parser.escapedMask}
         ?readonly=${this.readOnly}
         ?disabled=${this.disabled}
+        ?autofocus=${this.autofocus}
+        inputmode=${ifDefined(this.inputMode)}
+        tabindex=${bindIf(hasNegativeTabIndex, -1)}
+        aria-describedby=${bindIf(hasHelperText, 'helper-text')}
         @dragenter=${this._handleDragEnter}
         @dragleave=${this._handleDragLeave}
         @dragstart=${this._setMaskSelection}
@@ -143,7 +164,6 @@ export default class IgcMaskInputComponent extends IgcMaskInputBaseComponent {
         @compositionstart=${this._handleCompositionStart}
         @compositionend=${this._handleCompositionEnd}
         @input=${this._handleInput}
-        aria-describedby=${ifDefined(isEmpty(this._helperText) ? nothing : 'helper-text')}
         @keydown=${this._setMaskSelection}
       />
     `;

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

	@@ -1 +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 { html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { createFormValueState } from '../common/mixins/forms/form-value.js';\nimport { partMap } from '../common/part-map.js';\nimport { isEmpty } from '../common/util.js';\nimport type { MaskInputValueMode } from '../types.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport {\n IgcMaskInputBaseComponent,\n type MaskSelection,\n} from './mask-input-base.js';\nimport { maskValidators } from './validators.js';\n\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 /\nexport default class IgcMaskInputComponent extends IgcMaskInputBaseComponent {\n public static readonly tagName = 'igc-mask-input';\n\n / blazorSuppress /\n public static register(): void {\n registerComponent(IgcMaskInputComponent, IgcValidationContainerComponent);\n }\n\n //#region Internal attributes and properties\n\n protected override get __validators() {\n return maskValidators;\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` will return the clean user input.\n * - `withFormatting` will return the value with all literals and prompts.\n \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 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 _updateSetRangeTextValue(): void {\n this.value = this._parser.parse(this._maskedValue);\n }\n\n private _updateMaskedValue(): void {\n if (this._maskedValue === this._parser.emptyMask) {\n this._maskedValue = '';\n }\n }\n\n //#endregion\n\n protected override renderInput() {\n return html`\n <input\n type=\"text\"\n part=${partMap(this.resolvePartNames('input'))}\n name=${ifDefined(this.name)}\n .value=${live(this._maskedValue)}\n .placeholder=${this.placeholder ?? this._parser.escapedMask}\n ?readonly=${this.readOnly}\n ?disabled=${this.disabled}\n @dragenter=${this._handleDragEnter}\n @dragleave=${this._handleDragLeave}\n @dragstart=${this._setMaskSelection}\n @blur=${this._handleBlur}\n @focus=${this._handleFocus}\n @cut=${this._setMaskSelection}\n @change=${this._handleChange}\n @click=${this._handleClick}\n @compositionstart=${this._handleCompositionStart}\n @compositionend=${this._handleCompositionEnd}\n @input=${this._handleInput}\n aria-describedby=${ifDefined(\n isEmpty(this._helperText) ? nothing : 'helper-text'\n )}\n @keydown=${this._setMaskSelection}\n />\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-mask-input': IgcMaskInputComponent;\n }\n}\n"]}
1	+ {"version":3,"file":"mask-input.js","sourceRoot":"","sources":["../../../src/components/mask-input/mask-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.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 { partMap } from '../common/part-map.js';\nimport { bindIf } from '../common/util.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 {\n IgcMaskInputBaseComponent,\n type MaskSelection,\n} from './mask-input-base.js';\nimport { maskValidators } from './validators.js';\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/*\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 /\nexport default class IgcMaskInputComponent extends IgcMaskInputBaseComponent {\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 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 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 _updateSetRangeTextValue(): void {\n this.value = this._parser.parse(this._maskedValue);\n }\n\n private _updateMaskedValue(): void {\n if (this._maskedValue === this._parser.emptyMask) {\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 html`\n <input\n id=${this._inputId}\n type=\"text\"\n part=${partMap(this._resolvePartNames('input'))}\n name=${ifDefined(this.name)}\n .value=${live(this._maskedValue)}\n .placeholder=${this.placeholder ?? this._parser.escapedMask}\n ?readonly=${this.readOnly}\n ?disabled=${this.disabled}\n ?autofocus=${this.autofocus}\n inputmode=${ifDefined(this.inputMode)}\n tabindex=${bindIf(hasNegativeTabIndex, -1)}\n aria-describedby=${bindIf(hasHelperText, 'helper-text')}\n @dragenter=${this._handleDragEnter}\n @dragleave=${this._handleDragLeave}\n @dragstart=${this._setMaskSelection}\n @blur=${this._handleBlur}\n @focus=${this._handleFocus}\n @cut=${this._setMaskSelection}\n @change=${this._handleChange}\n @click=${this._handleClick}\n @compositionstart=${this._handleCompositionStart}\n @compositionend=${this._handleCompositionEnd}\n @input=${this._handleInput}\n @keydown=${this._setMaskSelection}\n />\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 CHANGED Viewed

@@ -8,12 +8,17 @@ interface MaskOptions {
      * Use `'\'` to escape a flag character if it should be treated as a literal.
      * @default 'CCCCCCCCCC'
      */
-    format: string;
+    format?: string;
     /**
      * The character used to prompt for input in unfilled mask positions.
      * Must be a single character.
      * @default '_'
      */
+    promptCharacter?: string;
+}
+/** Internal options with all required fields */
+interface MaskOptionsInternal {
+    format: string;
     promptCharacter: string;
 }
 /**
@@ -29,18 +34,20 @@ type MaskReplaceResult = {
  * It handles mask definitions, literals, character validation, and cursor positioning.
  */
 export declare class MaskParser {
-    protected readonly _options: MaskOptions;
+    protected readonly _options: MaskOptionsInternal;
     /** Stores literal characters and their original positions in the mask (e.g., '(', ')', '-'). */
     protected readonly _literals: Map<number, string>;
     /** A Set of positions where literals occur in the `_escapedMask`. */
     protected _literalPositions: Set<number>;
     /** The mask format after processing escape characters */
     protected _escapedMask: string;
+    /** Cached array of required non-literal positions for validation */
+    protected _requiredPositions: number[];
     /**
      * Returns a set of the all the literal positions in the mask.
      * These positions are fixed characters that are not part of the input.
      */
-    get literalPositions(): Set<number>;
+    get literalPositions(): ReadonlySet<number>;
     /**
      * Returns the escaped mask string.
      * This is the mask after processing any escape sequences.
@@ -66,27 +73,29 @@ export declare class MaskParser {
     get prompt(): string;
     /**
      * Sets the prompt character. Only the first character of the provided string is used.
+     * @remarks The prompt character cannot be a mask flag character.
      */
     set prompt(value: string);
     constructor(options?: MaskOptions);
+    private _isEscapedFlag;
     /**
      * Parses the mask format string to identify literal characters and
      * create the escaped mask. This method is called whenever the mask format changes.
      */
     protected _parseMaskLiterals(): void;
     /**
-     * Gets an array of positions in the escaped mask that correspond to
+     * Computes an array of positions in the escaped mask that correspond to
      * required input flags (e.g., '0', 'L') and are not literal characters.
      *
      * These positions must be filled for the masked string to be valid.
      */
-    protected _getRequiredNonLiteralPositions(): number[];
+    protected _computeRequiredPositions(): number[];
     /**
      * Finds the closest non-literal position in the mask *before* the given start position.
      * Useful for backward navigation (e.g., backspace).
      *
      * @remarks
-     * If no non-literal is found before `start`, return `start`.
+     * If no non-literal is found before `start`, return 0.
      */
     getPreviousNonLiteralPosition(start: number): number;
     /**
@@ -94,12 +103,20 @@ export declare class MaskParser {
      * Useful for forward navigation (e.g., arrow keys, delete key or initial cursor placement).
      *
      * @remarks
-     * If no non-literal is found after `start`, return `start`.
+     * If no non-literal is found after `start`, return the mask length.
      */
     getNextNonLiteralPosition(start: number): number;
     /**
      * Replaces a segment of the masked string with new input, simulating typing or pasting.
      * It handles clearing the selected range and inserting new characters according to the mask.
+     *
+     * @example
+     * ```ts
+     * const parser = new MaskParser({ format: '00/00/0000' });
+     * const current = '__/__/____';
+     * const result = parser.replace(current, '12', 0, 0);
+     * // result.value = '12/__/____', result.end = 2
+     * ```
      */
     replace(maskString: string, value: string, start: number, end: number): MaskReplaceResult;
     /**
@@ -116,6 +133,12 @@ export declare class MaskParser {
      * Applies the mask format to an input string. This attempts to fit the input
      * into the mask from left to right, filling valid positions and skipping invalid
      * input characters.
+     *
+     * @example
+     * ```ts
+     * const parser = new MaskParser({ format: '00/00/0000' });
+     * parser.apply('12252023'); // Returns '12/25/2023'
+     * ```
      */
     apply(input?: string): string;
 }