igniteui-webcomponents 3.1.0 → 3.3.0

package/components/list/themes/light/list.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.base.css.js","sourceRoot":"","sources":["../../../../../src/components/list/themes/light/list.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,u9CAAu9C,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column nowrap;flex-flow:column nowrap;font-family:var(--igc-font-family);overflow:hidden;background:hsla(var(--igc-surface-500), var(--igc-surface-a))}:host([size=small]) ::slotted(igc-list-item),:host([size=small]) ::slotted(igc-list-header){padding:var(--igc-spacing-small) calc(var(--igc-spacing-small)*2)}:host([size=medium]) ::slotted(igc-list-item),:host([size=medium]) ::slotted(igc-list-header){padding:var(--igc-spacing-medium) calc(var(--igc-spacing-medium)*2)}:host([size=large]) ::slotted(igc-list-item),:host([size=large]) ::slotted(igc-list-header){padding:var(--igc-spacing-large) calc(var(--igc-spacing-large)*2)}`;\n"]}
+{"version":3,"file":"list.base.css.js","sourceRoot":"","sources":["../../../../../src/components/list/themes/light/list.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,w+CAAw+C,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column nowrap;flex-flow:column nowrap;font-family:var(--igc-font-family);overflow:hidden auto;height:auto;background:hsla(var(--igc-surface-500), var(--igc-surface-a))}:host([size=small]) ::slotted(igc-list-item),:host([size=small]) ::slotted(igc-list-header){padding:var(--igc-spacing-small) calc(var(--igc-spacing-small)*2)}:host([size=medium]) ::slotted(igc-list-item),:host([size=medium]) ::slotted(igc-list-header){padding:var(--igc-spacing-medium) calc(var(--igc-spacing-medium)*2)}:host([size=large]) ::slotted(igc-list-item),:host([size=large]) ::slotted(igc-list-header){padding:var(--igc-spacing-large) calc(var(--igc-spacing-large)*2)}`;\n"]}

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

@@ -0,0 +1,38 @@
+import { IgcInputBaseComponent } from '../input/input-base.js';
+import { MaskParser } from './mask-parser.js';
+interface MaskSelection {
+    start: number;
+    end: number;
+}
+export declare abstract class IgcMaskInputBaseComponent extends IgcInputBaseComponent {
+    protected parser: MaskParser;
+    protected selection: MaskSelection;
+    protected compositionStart: number;
+    protected hasFocus: boolean;
+    protected maskedValue: string;
+    protected _mask: string;
+    /** The prompt symbol to use for unfilled parts of the mask. */
+    prompt: string;
+    /** Controls the validity of the control. */
+    invalid: boolean;
+    protected get inputSelection(): MaskSelection;
+    protected get emptyMask(): string;
+    connectedCallback(): void;
+    /**
+     * Sets a custom validation message for the control.
+     * As long as `message` is not empty, the control is considered invalid.
+     */
+    setCustomValidity(message: string): void;
+    /** Selects all text within the input. */
+    select(): void;
+    protected handleInput({ inputType, isComposing }: InputEvent): void | Promise<void>;
+    protected handleKeydown(e: KeyboardEvent): void;
+    protected handleCut(): void;
+    protected handleDragStart(): void;
+    protected handleCompositionStart(): void;
+    protected handleCompositionEnd({ data }: CompositionEvent): void;
+    protected handleInvalid(): void;
+    setSelectionRange(start: number, end: number, direction?: 'backward' | 'forward' | 'none'): void;
+    protected abstract updateInput(part: string, start: number, finish: number): void;
+}
+export {};

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

@@ -0,0 +1,110 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { property, state } from 'lit/decorators.js';
+import { blazorSuppress } from '../common/decorators/blazorSuppress.js';
+import { IgcInputBaseComponent } from '../input/input-base.js';
+import { MaskParser } from './mask-parser.js';
+export class IgcMaskInputBaseComponent extends IgcInputBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.parser = new MaskParser();
+        this.selection = { start: 0, end: 0 };
+        this.compositionStart = 0;
+        this.hasFocus = false;
+        this.maskedValue = '';
+        this._mask = '';
+        this.invalid = false;
+    }
+    get inputSelection() {
+        return {
+            start: this.input.selectionStart || 0,
+            end: this.input.selectionEnd || 0,
+        };
+    }
+    get emptyMask() {
+        return this.parser.apply();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._mask = this._mask || this.parser.mask;
+        this.prompt = this.prompt || this.parser.prompt;
+    }
+    setCustomValidity(message) {
+        this.input.setCustomValidity(message);
+        this.invalid = !this.input.checkValidity();
+    }
+    select() {
+        this.input.select();
+    }
+    handleInput({ inputType, isComposing }) {
+        const value = this.input.value;
+        const start = this.selection.start;
+        let end = this.selection.end;
+        switch (inputType) {
+            case 'deleteContentForward':
+                this.updateInput('', start, (end = start === end ? ++end : end));
+                return this.updateComplete.then(() => this.input.setSelectionRange(end, end));
+            case 'deleteContentBackward':
+                if (isComposing)
+                    return;
+                return this.updateInput('', this.inputSelection.start, end);
+            case 'deleteByCut':
+                return this.updateInput('', start, end);
+            case 'insertText':
+                return this.updateInput(value.substring(start, this.inputSelection.end), start, end);
+            case 'insertFromPaste':
+                return this.updateInput(value.substring(start, this.inputSelection.end), start, this.inputSelection.start);
+            case 'insertFromDrop':
+                return this.updateInput(value.substring(this.inputSelection.start, this.inputSelection.end), this.inputSelection.start, this.inputSelection.end);
+        }
+    }
+    handleKeydown(e) {
+        if (!e.key) {
+            return;
+        }
+        this.selection = this.inputSelection;
+    }
+    handleCut() {
+        this.selection = this.inputSelection;
+    }
+    handleDragStart() {
+        this.selection = this.inputSelection;
+    }
+    handleCompositionStart() {
+        this.compositionStart = this.inputSelection.start;
+    }
+    handleCompositionEnd({ data }) {
+        const start = this.compositionStart, end = this.inputSelection.end;
+        this.updateInput(data, start, end);
+    }
+    handleInvalid() {
+        this.invalid = true;
+    }
+    setSelectionRange(start, end, direction) {
+        super.setSelectionRange(start, end, direction);
+        this.selection = { start, end };
+    }
+}
+__decorate([
+    state()
+], IgcMaskInputBaseComponent.prototype, "hasFocus", void 0);
+__decorate([
+    state()
+], IgcMaskInputBaseComponent.prototype, "maskedValue", void 0);
+__decorate([
+    state()
+], IgcMaskInputBaseComponent.prototype, "_mask", void 0);
+__decorate([
+    property()
+], IgcMaskInputBaseComponent.prototype, "prompt", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], IgcMaskInputBaseComponent.prototype, "invalid", void 0);
+__decorate([
+    blazorSuppress()
+], IgcMaskInputBaseComponent.prototype, "setSelectionRange", null);
+//# sourceMappingURL=mask-input-base.js.map

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

@@ -0,0 +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 { blazorSuppress } from '../common/decorators/blazorSuppress.js';\nimport { IgcInputBaseComponent } from '../input/input-base.js';\nimport { MaskParser } from './mask-parser.js';\ninterface MaskSelection {\n  start: number;\n  end: number;\n}\n\nexport abstract class IgcMaskInputBaseComponent extends IgcInputBaseComponent {\n  protected parser = new MaskParser();\n  protected selection: MaskSelection = { start: 0, end: 0 };\n  protected compositionStart = 0;\n\n  @state()\n  protected hasFocus = false;\n\n  @state()\n  protected maskedValue = '';\n\n  @state()\n  protected _mask = '';\n\n  /** The prompt symbol to use for unfilled parts of the mask. */\n  @property()\n  public prompt!: string;\n\n  /** Controls the validity of the control. */\n  @property({ reflect: true, type: Boolean })\n  public invalid = false;\n\n  protected get inputSelection(): MaskSelection {\n    return {\n      start: this.input.selectionStart || 0,\n      end: this.input.selectionEnd || 0,\n    };\n  }\n\n  protected get emptyMask(): string {\n    return this.parser.apply();\n  }\n\n  public override connectedCallback() {\n    super.connectedCallback();\n\n    this._mask = this._mask || this.parser.mask;\n    this.prompt = this.prompt || this.parser.prompt;\n  }\n\n  /**\n   * Sets a custom validation message for the control.\n   * As long as `message` is not empty, the control is considered invalid.\n   */\n  public setCustomValidity(message: string) {\n    this.input.setCustomValidity(message);\n    this.invalid = !this.input.checkValidity();\n  }\n\n  /** Selects all text within the input. */\n  public select() {\n    this.input.select();\n  }\n\n  protected handleInput({ inputType, isComposing }: InputEvent) {\n    const value = this.input.value;\n    const start = this.selection.start;\n    let end = this.selection.end;\n\n    switch (inputType) {\n      case 'deleteContentForward':\n        this.updateInput('', start, (end = start === end ? ++end : end));\n        return this.updateComplete.then(() =>\n          this.input.setSelectionRange(end, end)\n        );\n\n      case 'deleteContentBackward':\n        if (isComposing) return;\n        return this.updateInput('', this.inputSelection.start, end);\n\n      case 'deleteByCut':\n        return this.updateInput('', start, end);\n\n      case 'insertText':\n        return this.updateInput(\n          value.substring(start, this.inputSelection.end),\n          start,\n          end\n        );\n\n      case 'insertFromPaste':\n        return this.updateInput(\n          value.substring(start, this.inputSelection.end),\n          start,\n          this.inputSelection.start\n        );\n\n      case 'insertFromDrop':\n        return this.updateInput(\n          value.substring(this.inputSelection.start, this.inputSelection.end),\n          this.inputSelection.start,\n          this.inputSelection.end\n        );\n    }\n  }\n\n  protected handleKeydown(e: KeyboardEvent) {\n    if (!e.key) {\n      return;\n    }\n    this.selection = this.inputSelection;\n  }\n\n  protected handleCut() {\n    this.selection = this.inputSelection;\n  }\n\n  protected handleDragStart() {\n    this.selection = this.inputSelection;\n  }\n\n  protected handleCompositionStart() {\n    this.compositionStart = this.inputSelection.start;\n  }\n\n  protected handleCompositionEnd({ data }: CompositionEvent) {\n    const start = this.compositionStart,\n      end = this.inputSelection.end;\n    this.updateInput(data, start, end);\n  }\n\n  protected handleInvalid() {\n    this.invalid = true;\n  }\n\n  @blazorSuppress()\n  public override setSelectionRange(\n    start: number,\n    end: number,\n    direction?: 'backward' | 'forward' | 'none'\n  ): void {\n    super.setSelectionRange(start, end, direction);\n    this.selection = { start, end };\n  }\n\n  protected abstract updateInput(\n    part: string,\n    start: number,\n    finish: number\n  ): void;\n}\n"]}

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

@@ -0,0 +1,71 @@
+import { IgcMaskInputBaseComponent } from './mask-input-base.js';
+/**
+ * A masked input is an input field where a developer can control user input and format the visible value,
+ * based on configurable rules
+ *
+ * @element igc-mask-input
+ *
+ * @slot prefix - Renders content before the input
+ * @slot suffix - Renders content after the input
+ * @slot helper-text - Renders content below the input
+ *
+ * @fires igcInput - Emitted when the control receives user input
+ * @fires igcChange - Emitted when an alteration of the control's value is committed by the user
+ * @fires igcFocus - Emitted when the control gains focus
+ * @fires igcBlur - Emitted when the control loses focus
+ *
+ * @csspart container - The main wrapper that holds all main input elements
+ * @csspart input - The native input element
+ * @csspart label - The native label element
+ * @csspart prefix - The prefix wrapper
+ * @csspart suffix - The suffix wrapper
+ * @csspart helper-text - The helper text wrapper
+ */
+export default class IgcMaskInputComponent extends IgcMaskInputBaseComponent {
+    static readonly tagName = "igc-mask-input";
+    protected _value: string;
+    /**
+     * 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.
+     *
+     */
+    valueMode: 'raw' | 'withFormatting';
+    /**
+     * The value of the input.
+     *
+     * Regardless of the currently set `value-mode`, an empty value will return an empty string.
+     *
+     */
+    get value(): string;
+    set value(string: string);
+    /** The mask pattern to apply on the input. */
+    get mask(): string;
+    /** The mask pattern to apply on the input. */
+    set mask(val: string);
+    protected promptChange(): void;
+    protected maskChange(): void;
+    protected handleInvalidState(): void;
+    connectedCallback(): void;
+    protected updateInput(part: string, start: number, finish: number): void;
+    protected handleDragEnter(): void;
+    protected handleDragLeave(): void;
+    protected handleFocus(): void;
+    protected handleBlur(): void;
+    protected handleChange(): void;
+    protected handleClick(): void;
+    protected updateMaskedValue(): void;
+    /** Replaces the selected text in the control and re-applies the mask */
+    setRangeText(replacement: string, start: number, end: number, _selectMode?: 'select' | 'start' | 'end' | 'preserve'): void;
+    /** Checks for validity of the control and shows the browser message if it's invalid. */
+    reportValidity(): boolean;
+    /** Check for validity of the control */
+    checkValidity(): boolean;
+    protected renderInput(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-mask-input': IgcMaskInputComponent;
+    }
+}

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

@@ -0,0 +1,182 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { 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 { watch } from '../common/decorators/watch.js';
+import { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js';
+import { partNameMap } from '../common/util.js';
+import { IgcMaskInputBaseComponent } from './mask-input-base.js';
+export default class IgcMaskInputComponent extends IgcMaskInputBaseComponent {
+    constructor() {
+        super(...arguments);
+        this._value = '';
+        this.valueMode = 'raw';
+    }
+    get value() {
+        return this._value
+            ? this.valueMode !== 'raw'
+                ? this.maskedValue
+                : this._value
+            : this._value;
+    }
+    set value(string) {
+        this._value = string !== null && string !== void 0 ? string : '';
+        this.maskedValue = this.parser.apply(this._value);
+    }
+    get mask() {
+        return this._mask;
+    }
+    set mask(val) {
+        this._mask = val;
+    }
+    promptChange() {
+        this.parser.prompt = this.prompt;
+        if (this.value) {
+            this.maskedValue = this.parser.apply(this._value);
+        }
+    }
+    maskChange() {
+        this.parser.mask = this.mask;
+        if (this.value) {
+            this.maskedValue = this.parser.apply(this._value);
+        }
+    }
+    handleInvalidState() {
+        this.updateComplete.then(() => (this.invalid = !this.checkValidity()));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.mask = this.mask || this.parser.mask;
+        this.prompt = this.prompt || this.parser.prompt;
+    }
+    updateInput(part, start, finish) {
+        const { value, end } = this.parser.replace(this.maskedValue, part, start, finish);
+        this.maskedValue = value;
+        this._value = this.parser.parse(value);
+        this.requestUpdate();
+        if (start !== this.mask.length) {
+            this.emitEvent('igcInput', { detail: this.value });
+        }
+        this.updateComplete.then(() => this.input.setSelectionRange(end, end));
+    }
+    handleDragEnter() {
+        if (!this.hasFocus && !this._value) {
+            this.maskedValue = this.parser.apply();
+        }
+    }
+    handleDragLeave() {
+        if (!this.hasFocus) {
+            this.updateMaskedValue();
+        }
+    }
+    handleFocus() {
+        this.hasFocus = true;
+        super.handleFocus();
+        if (this.readonly) {
+            return;
+        }
+        if (!this._value) {
+            this.maskedValue = this.parser.apply();
+            this.updateComplete.then(() => this.select());
+        }
+    }
+    handleBlur() {
+        this.hasFocus = false;
+        this.updateMaskedValue();
+        super.handleBlur();
+    }
+    handleChange() {
+        this.emitEvent('igcChange', { detail: this.value });
+        this.invalid = !this.checkValidity();
+    }
+    handleClick() {
+        if (this.input.selectionStart === this.input.selectionEnd &&
+            this.input.selectionStart === this.maskedValue.length) {
+            this.select();
+        }
+    }
+    updateMaskedValue() {
+        if (this.maskedValue === this.parser.apply()) {
+            this.maskedValue = '';
+        }
+    }
+    setRangeText(replacement, start, end, _selectMode = 'preserve') {
+        this.input.value = this.parser.replace(this.input.value, replacement, start, end).value;
+        this.maskedValue = this.parser.apply(this.parser.parse(this.input.value));
+        this._value = this.parser.parse(this.maskedValue);
+    }
+    reportValidity() {
+        const state = this._value
+            ? this.parser.isValidString(this.input.value)
+            : this.input.reportValidity();
+        this.invalid = !state;
+        return state;
+    }
+    checkValidity() {
+        if (this.disabled) {
+            return this.input.checkValidity();
+        }
+        if (!this._value) {
+            return !this.required;
+        }
+        return (this.input.checkValidity() && this.parser.isValidString(this.input.value));
+    }
+    renderInput() {
+        var _a;
+        return html `
+      <input
+        type="text"
+        part=${partNameMap(this.resolvePartNames('input'))}
+        name=${ifDefined(this.name)}
+        .value=${live(this.maskedValue)}
+        .placeholder=${live((_a = this.placeholder) !== null && _a !== void 0 ? _a : this.parser.escapedMask)}
+        ?readonly=${this.readonly}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        @dragenter=${this.handleDragEnter}
+        @dragleave=${this.handleDragLeave}
+        @dragstart=${this.handleDragStart}
+        @blur=${this.handleBlur}
+        @focus=${this.handleFocus}
+        @cut=${this.handleCut}
+        @change=${this.handleChange}
+        @click=${this.handleClick}
+        @compositionstart=${this.handleCompositionStart}
+        @compositionend=${this.handleCompositionEnd}
+        @input=${this.handleInput}
+        aria-invalid="${this.invalid ? 'true' : 'false'}"
+        @invalid="${this.handleInvalid}"
+        @keydown=${this.handleKeydown}
+      />
+    `;
+    }
+}
+IgcMaskInputComponent.tagName = 'igc-mask-input';
+__decorate([
+    property({ attribute: 'value-mode' })
+], IgcMaskInputComponent.prototype, "valueMode", void 0);
+__decorate([
+    property(),
+    blazorTwoWayBind('igcChange', 'detail')
+], IgcMaskInputComponent.prototype, "value", null);
+__decorate([
+    property()
+], IgcMaskInputComponent.prototype, "mask", null);
+__decorate([
+    watch('prompt')
+], IgcMaskInputComponent.prototype, "promptChange", null);
+__decorate([
+    watch('_mask')
+], IgcMaskInputComponent.prototype, "maskChange", null);
+__decorate([
+    watch('required', { waitUntilFirstUpdate: true }),
+    watch('disabled', { waitUntilFirstUpdate: true }),
+    watch('value', { waitUntilFirstUpdate: true })
+], IgcMaskInputComponent.prototype, "handleInvalidState", null);
+//# sourceMappingURL=mask-input.js.map

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

@@ -0,0 +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 { watch } from '../common/decorators/watch.js';\nimport { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js';\nimport { partNameMap } from '../common/util.js';\nimport { IgcMaskInputBaseComponent } from './mask-input-base.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 *\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 * @fires igcFocus - Emitted when the control gains focus\n * @fires igcBlur - Emitted when the control loses focus\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  protected _value = '';\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   */\n  @property({ attribute: 'value-mode' })\n  public valueMode: 'raw' | 'withFormatting' = 'raw';\n\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   */\n  @property()\n  @blazorTwoWayBind('igcChange', 'detail')\n  public get value() {\n    return this._value\n      ? this.valueMode !== 'raw'\n        ? this.maskedValue\n        : this._value\n      : this._value;\n  }\n\n  public set value(string: string) {\n    this._value = string ?? '';\n    this.maskedValue = this.parser.apply(this._value);\n  }\n\n  /** The mask pattern to apply on the input. */\n  @property()\n  public get mask() {\n    return this._mask;\n  }\n\n  /** The mask pattern to apply on the input. */\n  public set mask(val: string) {\n    this._mask = val;\n  }\n\n  @watch('prompt')\n  protected promptChange() {\n    this.parser.prompt = this.prompt;\n    if (this.value) {\n      this.maskedValue = this.parser.apply(this._value);\n    }\n  }\n\n  @watch('_mask')\n  protected maskChange() {\n    this.parser.mask = this.mask;\n    if (this.value) {\n      this.maskedValue = this.parser.apply(this._value);\n    }\n  }\n\n  @watch('required', { waitUntilFirstUpdate: true })\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  @watch('value', { waitUntilFirstUpdate: true })\n  protected handleInvalidState() {\n    this.updateComplete.then(() => (this.invalid = !this.checkValidity()));\n  }\n\n  public override connectedCallback() {\n    super.connectedCallback();\n\n    this.mask = this.mask || this.parser.mask;\n    this.prompt = this.prompt || this.parser.prompt;\n  }\n\n  protected updateInput(part: string, start: number, finish: number) {\n    const { value, end } = this.parser.replace(\n      this.maskedValue,\n      part,\n      start,\n      finish\n    );\n    this.maskedValue = value;\n    this._value = this.parser.parse(value);\n\n    this.requestUpdate();\n    if (start !== this.mask.length) {\n      this.emitEvent('igcInput', { detail: this.value });\n    }\n    this.updateComplete.then(() => this.input.setSelectionRange(end, end));\n  }\n\n  protected handleDragEnter() {\n    if (!this.hasFocus && !this._value) {\n      this.maskedValue = this.parser.apply();\n    }\n  }\n\n  protected handleDragLeave() {\n    if (!this.hasFocus) {\n      this.updateMaskedValue();\n    }\n  }\n\n  protected override handleFocus() {\n    this.hasFocus = true;\n    super.handleFocus();\n\n    if (this.readonly) {\n      return;\n    }\n\n    if (!this._value) {\n      this.maskedValue = this.parser.apply();\n      // In case of empty value, select the whole mask\n      this.updateComplete.then(() => this.select());\n    }\n  }\n\n  protected override handleBlur() {\n    this.hasFocus = false;\n    this.updateMaskedValue();\n    super.handleBlur();\n  }\n\n  protected handleChange() {\n    this.emitEvent('igcChange', { detail: this.value });\n    this.invalid = !this.checkValidity();\n  }\n\n  protected handleClick() {\n    // Clicking at the end of the input field will select the entire mask\n    if (\n      this.input.selectionStart === this.input.selectionEnd &&\n      this.input.selectionStart === this.maskedValue.length\n    ) {\n      this.select();\n    }\n  }\n\n  protected updateMaskedValue() {\n    if (this.maskedValue === this.parser.apply()) {\n      this.maskedValue = '';\n    }\n  }\n\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: 'select' | 'start' | 'end' | 'preserve' = 'preserve'\n  ) {\n    this.input.value = this.parser.replace(\n      this.input.value,\n      replacement,\n      start,\n      end\n    ).value;\n    this.maskedValue = this.parser.apply(this.parser.parse(this.input.value));\n    this._value = this.parser.parse(this.maskedValue);\n  }\n\n  /** Checks for validity of the control and shows the browser message if it's invalid. */\n  public reportValidity() {\n    const state = this._value\n      ? this.parser.isValidString(this.input.value)\n      : this.input.reportValidity();\n    this.invalid = !state;\n    return state;\n  }\n\n  /** Check for validity of the control */\n  public checkValidity() {\n    if (this.disabled) {\n      return this.input.checkValidity();\n    }\n\n    if (!this._value) {\n      return !this.required;\n    }\n\n    return (\n      this.input.checkValidity() && this.parser.isValidString(this.input.value)\n    );\n  }\n\n  protected override renderInput() {\n    return html`\n      <input\n        type=\"text\"\n        part=${partNameMap(this.resolvePartNames('input'))}\n        name=${ifDefined(this.name)}\n        .value=${live(this.maskedValue)}\n        .placeholder=${live(this.placeholder ?? this.parser.escapedMask)}\n        ?readonly=${this.readonly}\n        ?disabled=${this.disabled}\n        ?required=${this.required}\n        @dragenter=${this.handleDragEnter}\n        @dragleave=${this.handleDragLeave}\n        @dragstart=${this.handleDragStart}\n        @blur=${this.handleBlur}\n        @focus=${this.handleFocus}\n        @cut=${this.handleCut}\n        @change=${this.handleChange}\n        @click=${this.handleClick}\n        @compositionstart=${this.handleCompositionStart}\n        @compositionend=${this.handleCompositionEnd}\n        @input=${this.handleInput}\n        aria-invalid=\"${this.invalid ? 'true' : 'false'}\"\n        @invalid=\"${this.handleInvalid}\"\n        @keydown=${this.handleKeydown}\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

@@ -0,0 +1,30 @@
+interface MaskOptions {
+    format: string;
+    promptCharacter: string;
+}
+export declare class MaskParser {
+    protected options: MaskOptions;
+    constructor(options?: MaskOptions);
+    protected literals: Map<number, string>;
+    protected _escapedMask: string;
+    protected get literalPositions(): number[];
+    get escapedMask(): string;
+    get mask(): string;
+    set mask(value: string);
+    get prompt(): string;
+    set prompt(value: string);
+    protected getMaskLiterals(): void;
+    protected isPromptChar(char: string): boolean;
+    protected replaceCharAt(string: string, pos: number, char: string): string;
+    protected validate(char: string, maskedChar: string): boolean;
+    protected getNonLiteralPositions(mask?: string): number[];
+    protected getRequiredNonLiteralPositions(mask: string): number[];
+    replace(masked: string | undefined, value: string, start: number, end: number): {
+        value: string;
+        end: number;
+    };
+    parse(masked?: string): string;
+    isValidString(input?: string): boolean;
+    apply(input?: string): string;
+}
+export {};

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

@@ -0,0 +1,167 @@
+const FLAGS = new Set('aACL09#&?');
+const REGEX = new Map([
+    ['C', /(?!^$)/u],
+    ['&', /[^\p{Separator}]/u],
+    ['a', /[\p{Letter}\d\p{Separator}]/u],
+    ['A', /[\p{Letter}\d]/u],
+    ['?', /[\p{Letter}\p{Separator}]/u],
+    ['L', /\p{Letter}/u],
+    ['0', /\d/],
+    ['9', /[\d\p{Separator}]/u],
+    ['#', /[\d\-+]/],
+]);
+const REQUIRED = new Set('0#LA&');
+const replaceIMENumbers = (string) => {
+    return string.replace(/[０１２３４５６７８９]/g, (num) => ({
+        '１': '1',
+        '２': '2',
+        '３': '3',
+        '４': '4',
+        '５': '5',
+        '６': '6',
+        '７': '7',
+        '８': '8',
+        '９': '9',
+        '０': '0',
+    }[num]));
+};
+export class MaskParser {
+    constructor(options = { format: 'CCCCCCCCCC', promptCharacter: '_' }) {
+        this.literals = new Map();
+        this.options = options;
+    }
+    get literalPositions() {
+        this.getMaskLiterals();
+        return Array.from(this.literals.keys());
+    }
+    get escapedMask() {
+        this.getMaskLiterals();
+        return this._escapedMask;
+    }
+    get mask() {
+        return this.options.format;
+    }
+    set mask(value) {
+        this.options.format = value || this.options.format;
+        this.getMaskLiterals();
+    }
+    get prompt() {
+        return this.options.promptCharacter;
+    }
+    set prompt(value) {
+        this.options.promptCharacter = value
+            ? value.substring(0, 1)
+            : this.options.promptCharacter;
+    }
+    getMaskLiterals() {
+        this.literals.clear();
+        this._escapedMask = this.mask;
+        for (let i = 0, j = 0; i < this.mask.length; i++, j++) {
+            const [current, next] = [this.mask.charAt(i), this.mask.charAt(i + 1)];
+            if (current === '\\' && FLAGS.has(next)) {
+                this._escapedMask = this.replaceCharAt(this._escapedMask, j, '');
+                this.literals.set(j, next);
+                i++;
+            }
+            else {
+                if (!FLAGS.has(current)) {
+                    this.literals.set(j, current);
+                }
+            }
+        }
+    }
+    isPromptChar(char) {
+        return char === this.prompt;
+    }
+    replaceCharAt(string, pos, char) {
+        return `${string.substring(0, pos)}${char}${string.substring(pos + 1)}`;
+    }
+    validate(char, maskedChar) {
+        const regex = REGEX.get(maskedChar);
+        return regex ? regex.test(char) : false;
+    }
+    getNonLiteralPositions(mask = '') {
+        const positions = this.literalPositions;
+        return Array.from(mask)
+            .map((_, pos) => (!positions.includes(pos) ? pos : -1))
+            .filter((pos) => pos > -1);
+    }
+    getRequiredNonLiteralPositions(mask) {
+        const positions = this.literalPositions;
+        return Array.from(mask)
+            .map((char, pos) => REQUIRED.has(char) && !positions.includes(pos) ? pos : -1)
+            .filter((pos) => pos > -1);
+    }
+    replace(masked = '', value, start, end) {
+        const chars = Array.from(replaceIMENumbers(value));
+        const positions = this.literalPositions;
+        end = Math.min(end, masked.length);
+        let cursor = start;
+        for (let i = start; i < end || (chars.length && i < masked.length); i++) {
+            if (positions.includes(i)) {
+                if (chars[0] === masked[i]) {
+                    cursor = i + 1;
+                    chars.shift();
+                }
+                continue;
+            }
+            if (chars[0] &&
+                !this.validate(chars[0], this._escapedMask[i]) &&
+                !this.isPromptChar(chars[0])) {
+                break;
+            }
+            let char = this.prompt;
+            if (chars.length) {
+                cursor = i + 1;
+                char = chars.shift();
+            }
+            masked = this.replaceCharAt(masked, i, char);
+        }
+        return { value: masked, end: cursor };
+    }
+    parse(masked = '') {
+        return Array.from(masked).reduce((prev, char, pos) => {
+            return `${prev}${!this.literalPositions.includes(pos) && !this.isPromptChar(char)
+                ? char
+                : ''}`;
+        }, '');
+    }
+    isValidString(input = '') {
+        const required = this.getRequiredNonLiteralPositions(this._escapedMask);
+        if (required.length > this.parse(input).length) {
+            return false;
+        }
+        return required.every((pos) => {
+            const char = input.charAt(pos);
+            return (char !== undefined &&
+                this.validate(char, this._escapedMask.charAt(pos)) &&
+                !this.isPromptChar(char));
+        });
+    }
+    apply(input = '') {
+        const nonLiteralPositions = this.getNonLiteralPositions(this._escapedMask);
+        let output = new Array(this._escapedMask.length).fill(this.prompt).join('');
+        this.literals.forEach((char, pos) => {
+            output = this.replaceCharAt(output, pos, char);
+        });
+        if (!input) {
+            return output;
+        }
+        const values = nonLiteralPositions.map((pos, index) => {
+            const char = input.charAt(index);
+            return !this.validate(char, this._escapedMask.charAt(pos)) &&
+                !this.isPromptChar(char)
+                ? this.prompt
+                : char;
+        });
+        if (values.length > nonLiteralPositions.length) {
+            values.splice(nonLiteralPositions.length);
+        }
+        let pos = 0;
+        for (const each of values) {
+            output = this.replaceCharAt(output, nonLiteralPositions[pos++], each);
+        }
+        return output;
+    }
+}
+//# sourceMappingURL=mask-parser.js.map