igniteui-webcomponents 6.4.0 → 6.5.0

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

@@ -1 +1 @@
-{"version":3,"file":"input-base.js","sourceRoot":"","sources":["../../../src/components/input/input-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, type TemplateResult } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';\nimport { shadowOptions } from '../common/decorators/shadow-options.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { FormAssociatedRequiredMixin } from '../common/mixins/forms/associated-required.js';\nimport { partMap } from '../common/part-map.js';\nimport { createCounter } from '../common/util.js';\nimport type { RangeTextSelectMode, SelectionRangeDirection } from '../types.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport { styles } from './themes/input.base.css.js';\nimport { styles as shared } from './themes/shared/input.common.css.js';\nimport { all } from './themes/themes.js';\n\nexport interface IgcInputComponentEventMap {\n  /* alternateName: inputOcurred */\n  igcInput: CustomEvent<string>;\n  /* blazorSuppress */\n  igcChange: CustomEvent<string>;\n  // For analyzer meta only:\n  /* skipWCPrefix */\n  focus: FocusEvent;\n  /* skipWCPrefix */\n  blur: FocusEvent;\n}\n\n@blazorDeepImport\n@shadowOptions({ delegatesFocus: true })\nexport abstract class IgcInputBaseComponent extends FormAssociatedRequiredMixin(\n  EventEmitterMixin<IgcInputComponentEventMap, Constructor<LitElement>>(\n    LitElement\n  )\n) {\n  public static styles = [styles, shared];\n  private static readonly increment = createCounter();\n\n  protected readonly _themes = addThemingController(this, all);\n\n  protected inputId = `input-${IgcInputBaseComponent.increment()}`;\n\n  /* blazorSuppress */\n  /** The value attribute of the control. */\n  public abstract value: string | Date | null;\n\n  @query('input')\n  protected input!: HTMLInputElement;\n\n  @queryAssignedElements({ slot: 'helper-text' })\n  protected _helperText!: Array<HTMLElement>;\n\n  @queryAssignedElements({\n    slot: 'prefix',\n    selector: '[slot=\"prefix\"]:not([hidden])',\n  })\n  protected prefixes!: Array<HTMLElement>;\n\n  @queryAssignedElements({\n    slot: 'suffix',\n    selector: '[slot=\"suffix\"]:not([hidden])',\n  })\n  protected suffixes!: Array<HTMLElement>;\n\n  /**\n   * Whether the control will have outlined appearance.\n   * @attr\n   */\n  @property({ reflect: true, type: Boolean })\n  public outlined = false;\n\n  /**\n   * Makes the control a readonly field.\n   * @attr readonly\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'readonly' })\n  public readOnly = false;\n\n  /**\n   * The placeholder attribute of the control.\n   * @attr\n   */\n  @property()\n  public placeholder!: string;\n\n  /**\n   * The label for the control.\n   * @attr\n   */\n  @property()\n  public label!: string;\n\n  protected override createRenderRoot() {\n    const root = super.createRenderRoot();\n    root.addEventListener('slotchange', () => this.requestUpdate());\n    return root;\n  }\n\n  /* alternateName: focusComponent */\n  /** Sets focus on the control. */\n  public override focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /* alternateName: blurComponent */\n  /** Removes focus from the control. */\n  public override blur() {\n    this.input.blur();\n  }\n\n  protected abstract renderInput(): TemplateResult;\n\n  protected renderValidatorContainer(): TemplateResult {\n    return IgcValidationContainerComponent.create(this);\n  }\n\n  protected resolvePartNames(base: string) {\n    return {\n      [base]: true,\n      prefixed: this.prefixes.length > 0,\n      suffixed: this.suffixes.length > 0,\n      filled: !!this.value,\n    };\n  }\n\n  protected renderFileParts(): TemplateResult | typeof nothing {\n    return nothing;\n  }\n\n  /** Sets the text selection range of the control */\n  public setSelectionRange(\n    start: number,\n    end: number,\n    direction: SelectionRangeDirection = 'none'\n  ) {\n    this.input.setSelectionRange(start, end, direction);\n  }\n\n  /** Replaces the selected text in the input. */\n  public setRangeText(\n    replacement: string,\n    start: number,\n    end: number,\n    selectMode: RangeTextSelectMode = 'preserve'\n  ) {\n    this.input.setRangeText(replacement, start, end, selectMode);\n  }\n\n  private renderPrefix() {\n    return html`<div part=\"prefix\">\n      <slot name=\"prefix\"></slot>\n    </div>`;\n  }\n\n  private renderSuffix() {\n    return html`<div part=\"suffix\">\n      <slot name=\"suffix\"></slot>\n    </div>`;\n  }\n\n  private renderLabel() {\n    return this.label\n      ? html`<label part=\"label\" for=${this.inputId}> ${this.label} </label>`\n      : nothing;\n  }\n\n  private renderMaterial() {\n    return html`\n      <div\n        part=${partMap({\n          ...this.resolvePartNames('container'),\n          labelled: !!this.label,\n        })}\n      >\n        <div part=\"start\">${this.renderPrefix()}</div>\n        ${this.renderInput()} ${this.renderFileParts()}\n        <div part=\"notch\">${this.renderLabel()}</div>\n        <div part=\"filler\"></div>\n        <div part=\"end\">${this.renderSuffix()}</div>\n      </div>\n      ${this.renderValidatorContainer()}\n    `;\n  }\n\n  private renderStandard() {\n    return html`${this.renderLabel()}\n      <div part=${partMap(this.resolvePartNames('container'))}>\n        ${this.renderPrefix()} ${this.renderFileParts()} ${this.renderInput()}\n        ${this.renderSuffix()}\n      </div>\n      ${this.renderValidatorContainer()}`;\n  }\n\n  protected override render() {\n    return this._themes.theme === 'material'\n      ? this.renderMaterial()\n      : this.renderStandard();\n  }\n}\n"]}
+{"version":3,"file":"input-base.js","sourceRoot":"","sources":["../../../src/components/input/input-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, type TemplateResult } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport type { ThemingController } from '../../theming/theming-controller.js';\nimport type { SlotController } from '../common/controllers/slot.js';\nimport { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';\nimport { shadowOptions } from '../common/decorators/shadow-options.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { FormAssociatedRequiredMixin } from '../common/mixins/forms/associated-required.js';\nimport { partMap } from '../common/part-map.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\n\nexport interface IgcInputComponentEventMap {\n  /* alternateName: inputOcurred */\n  igcInput: CustomEvent<string>;\n  /* blazorSuppress */\n  igcChange: CustomEvent<string>;\n  // For analyzer meta only:\n  /* skipWCPrefix */\n  focus: FocusEvent;\n  /* skipWCPrefix */\n  blur: FocusEvent;\n}\n\nlet nextId = 1;\n\n@blazorDeepImport\n@shadowOptions({ delegatesFocus: true })\nexport abstract class IgcInputBaseComponent extends FormAssociatedRequiredMixin(\n  EventEmitterMixin<IgcInputComponentEventMap, Constructor<LitElement>>(\n    LitElement\n  )\n) {\n  protected abstract readonly _themes: ThemingController;\n  protected abstract readonly _slots: SlotController<any>;\n\n  protected readonly _inputId = `input-${nextId++}`;\n\n  @query('input')\n  protected readonly _input?: HTMLInputElement;\n\n  /* blazorSuppress */\n  /** The value attribute of the control.\n   * Type varies based on the input type and can be string, Date or null.\n   */\n  public abstract value: string | Date | null;\n\n  /**\n   * Whether the control will have outlined appearance.\n   *\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public outlined = false;\n\n  /**\n   * The placeholder attribute of the control.\n   * @attr\n   */\n  @property()\n  public placeholder!: string;\n\n  /**\n   * The label for the control.\n   * @attr\n   */\n  @property()\n  public label!: string;\n\n  /**\n   * Resolves the part names for the container based on the current state.\n   * Used to apply conditional styling via CSS parts.\n   */\n  protected _resolvePartNames(base: string) {\n    return {\n      [base]: true,\n      prefixed: this._slots.hasAssignedElements('prefix', {\n        selector: '[slot=\"prefix\"]:not([hidden])',\n      }),\n      suffixed: this._slots.hasAssignedElements('suffix', {\n        selector: '[slot=\"suffix\"]:not([hidden])',\n      }),\n      filled: !!this.value,\n    };\n  }\n\n  /** Selects all the text inside the input. */\n  public select(): void {\n    this._input?.select();\n  }\n\n  /* alternateName: focusComponent */\n  /** Sets focus on the control. */\n  public override focus(options?: FocusOptions): void {\n    this._input?.focus(options);\n  }\n\n  /* alternateName: blurComponent */\n  /** Removes focus from the control. */\n  public override blur(): void {\n    this._input?.blur();\n  }\n\n  protected abstract _renderInput(): TemplateResult;\n\n  protected _renderFileParts(): TemplateResult | typeof nothing {\n    return nothing;\n  }\n\n  private _renderValidatorContainer(): TemplateResult {\n    return IgcValidationContainerComponent.create(this);\n  }\n\n  private _renderPrefix() {\n    return html`\n      <div part=\"prefix\">\n        <slot name=\"prefix\"></slot>\n      </div>\n    `;\n  }\n\n  private _renderSuffix() {\n    return html`\n      <div part=\"suffix\">\n        <slot name=\"suffix\"></slot>\n      </div>\n    `;\n  }\n\n  private _renderLabel() {\n    return this.label\n      ? html`<label part=\"label\" for=${this._inputId}>${this.label}</label>`\n      : nothing;\n  }\n\n  private _renderMaterial() {\n    return html`\n      <div\n        part=${partMap({\n          ...this._resolvePartNames('container'),\n          labelled: !!this.label,\n        })}\n      >\n        <div part=\"start\">${this._renderPrefix()}</div>\n        ${this._renderInput()} ${this._renderFileParts()}\n        <div part=\"notch\">${this._renderLabel()}</div>\n        <div part=\"filler\"></div>\n        <div part=\"end\">${this._renderSuffix()}</div>\n      </div>\n      ${this._renderValidatorContainer()}\n    `;\n  }\n\n  private _renderStandard() {\n    return html`\n      ${this._renderLabel()}\n      <div part=${partMap(this._resolvePartNames('container'))}>\n        ${this._renderPrefix()}${this._renderFileParts()}\n        ${this._renderInput()}${this._renderSuffix()}\n      </div>\n      ${this._renderValidatorContainer()}\n    `;\n  }\n\n  protected override render() {\n    return cache(\n      this._themes.theme === 'material'\n        ? this._renderMaterial()\n        : this._renderStandard()\n    );\n  }\n}\n"]}

package/components/input/input.d.ts

@@ -1,4 +1,4 @@
-import type { InputType, RangeTextSelectMode } from '../types.js';
+import type { InputType, RangeTextSelectMode, SelectionRangeDirection } from '../types.js';
 import { IgcInputBaseComponent } from './input-base.js';
 /**
  * @element igc-input
@@ -29,7 +29,10 @@ import { IgcInputBaseComponent } from './input-base.js';
  */
 export default class IgcInputComponent extends IgcInputBaseComponent {
     static readonly tagName = "igc-input";
+    static styles: import("lit").CSSResult[];
     static register(): void;
+    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" | "range-overflow" | "range-underflow" | "custom-error" | "type-mismatch" | "pattern-mismatch" | "too-long" | "too-short" | "step-mismatch">;
     protected readonly _formValue: import("../common/mixins/forms/form-value.js").FormValue<string>;
     protected get __validators(): import("../common/validators.js").Validator<IgcInputComponent>[];
     private _min?;
@@ -49,6 +52,13 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
      * @attr
      */
     type: InputType;
+    /**
+     * Makes the control a readonly field.
+     *
+     * @attr readonly
+     * @default false
+     */
+    readOnly: boolean;
     /**
      * The input mode attribute of the control.
      * See [relevant MDN article](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)
@@ -106,19 +116,20 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
      * string-type inputs or allows spin buttons to exceed the predefined `min/max` limits for number-type inputs.
      *
      * @attr validate-only
+     * @default false
      */
     validateOnly: boolean;
     /** Replaces the selected text in the input. */
-    setRangeText(replacement: string, start: number, end: number, selectMode?: RangeTextSelectMode): void;
-    /** Selects all text within the input. */
-    select(): void;
+    setRangeText(replacement: string, start?: number, end?: number, selectMode?: RangeTextSelectMode): void;
+    /** Sets the text selection range of the control */
+    setSelectionRange(start?: number, end?: number, direction?: SelectionRangeDirection): void;
     /** Increments the numeric value of the input by one or more steps. */
     stepUp(n?: number): void;
     /** Decrements the numeric value of the input by one or more steps. */
     stepDown(n?: number): void;
-    private handleInput;
-    private handleChange;
-    protected renderInput(): import("lit-html").TemplateResult<1>;
+    private _handleInput;
+    private _handleChange;
+    protected _renderInput(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/input/input.js

@@ -8,23 +8,35 @@ 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 { bindIf, isEmpty } from '../common/util.js';
+import { bindIf } from '../common/util.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import { IgcInputBaseComponent } from './input-base.js';
+import { styles } from './themes/input.base.css.js';
+import { styles as shared } from './themes/shared/input.common.css.js';
+import { all } from './themes/themes.js';
 import { numberValidators, stringValidators } from './validators.js';
+const Slots = setSlots('prefix', 'suffix', 'helper-text', 'value-missing', 'type-mismatch', 'pattern-mismatch', 'too-long', 'too-short', 'range-overflow', 'range-underflow', 'step-mismatch', 'custom-error', 'invalid');
 export default class IgcInputComponent extends IgcInputBaseComponent {
     constructor() {
         super(...arguments);
+        this._themes = addThemingController(this, all);
+        this._slots = addSlotController(this, {
+            slots: Slots,
+        });
         this._formValue = createFormValueState(this, {
             initialValue: '',
         });
         this.type = 'text';
+        this.readOnly = false;
         this.validateOnly = false;
     }
     static { this.tagName = 'igc-input'; }
+    static { this.styles = [styles, shared]; }
     static register() {
         registerComponent(IgcInputComponent, IgcValidationContainerComponent);
     }
@@ -80,37 +92,37 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
         return this._step;
     }
     setRangeText(replacement, start, end, selectMode = 'preserve') {
-        super.setRangeText(replacement, start, end, selectMode);
-        this.value = this.input.value;
+        this._input?.setRangeText(replacement, start, end, selectMode);
+        this.value = this._input?.value ?? '';
     }
-    select() {
-        return this.input.select();
+    setSelectionRange(start, end, direction = 'none') {
+        this._input?.setSelectionRange(start ?? null, end ?? null, direction);
     }
     stepUp(n) {
-        this.input.stepUp(n);
-        this.value = this.input.value;
+        this._input?.stepUp(n);
+        this.value = this._input?.value ?? '';
     }
     stepDown(n) {
-        this.input.stepDown(n);
-        this.value = this.input.value;
+        this._input?.stepDown(n);
+        this.value = this._input?.value ?? '';
     }
-    handleInput() {
+    _handleInput() {
         this._setTouchedState();
-        this.value = this.input.value;
+        this.value = this._input?.value ?? '';
         this.emitEvent('igcInput', { detail: this.value });
     }
-    handleChange() {
+    _handleChange() {
         this._setTouchedState();
-        this.value = this.input.value;
+        this.value = this._input?.value ?? '';
         this.emitEvent('igcChange', { detail: this.value });
     }
-    renderInput() {
+    _renderInput() {
         const hasNegativeTabIndex = this.getAttribute('tabindex') === '-1';
-        const hasHelperText = !isEmpty(this._helperText);
+        const hasHelperText = this._slots.hasAssignedElements('helper-text');
         return html `
       <input
-        id=${this.inputId}
-        part=${partMap(this.resolvePartNames('input'))}
+        id=${this._inputId}
+        part=${partMap(this._resolvePartNames('input'))}
         name=${ifDefined(this.name)}
         type=${ifDefined(this.type)}
         pattern=${ifDefined(this.pattern)}
@@ -129,8 +141,8 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
         maxlength=${bindIf(!this.validateOnly, this.maxLength)}
         step=${ifDefined(this.step)}
         aria-describedby=${bindIf(hasHelperText, 'helper-text')}
-        @change=${this.handleChange}
-        @input=${this.handleInput}
+        @change=${this._handleChange}
+        @input=${this._handleInput}
         @blur=${this._handleBlur}
       />
     `;
@@ -142,6 +154,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], IgcInputComponent.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IgcInputComponent.prototype, "readOnly", void 0);
 __decorate([
     property({ attribute: 'inputmode' })
 ], IgcInputComponent.prototype, "inputMode", void 0);

package/components/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/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';\n\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, isEmpty } from '../common/util.js';\nimport type { InputType, RangeTextSelectMode } from '../types.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport { IgcInputBaseComponent } from './input-base.js';\nimport { numberValidators, stringValidators } from './validators.js';\n\n/**\n * @element igc-input\n *\n * @slot prefix - Renders content before the input.\n * @slot suffix - Renders content after input.\n * @slot helper-text - Renders content below the input.\n * @slot value-missing - Renders content when the required validation fails.\n * @slot type-mismatch - Renders content when the a type url/email input pattern validation fails.\n * @slot pattern-mismatch - Renders content when the pattern validation fails.\n * @slot too-long - Renders content when the maxlength validation fails.\n * @slot too-short - Renders content when the minlength validation fails.\n * @slot range-overflow - Renders content when the max validation fails.\n * @slot range-underflow - Renders content when the min validation fails.\n * @slot step-mismatch - Renders content when the step 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 input receives user input.\n * @fires igcChange - Emitted when the control's checked state changes.\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 IgcInputComponent extends IgcInputBaseComponent {\n  public static readonly tagName = 'igc-input';\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcInputComponent, IgcValidationContainerComponent);\n  }\n\n  protected override readonly _formValue = createFormValueState(this, {\n    initialValue: '',\n  });\n\n  protected override get __validators() {\n    return this.type !== 'number' ? stringValidators : numberValidators;\n  }\n\n  private _min?: number;\n  private _max?: number;\n  private _minLength?: number;\n  private _maxLength?: number;\n  private _pattern?: string;\n  private _step?: number;\n\n  /* @tsTwoWayProperty(true, \"igcChange\", \"detail\", false) */\n  /**\n   * The value of the control.\n   * @attr\n   */\n  @property()\n  public set value(value: string) {\n    this._formValue.setValueAndFormState(value);\n  }\n\n  public get value(): string {\n    return this._formValue.value;\n  }\n\n  /* alternateName: displayType */\n  /**\n   * The type attribute of the control.\n   * @attr\n   */\n  @property({ reflect: true })\n  public type: InputType = 'text';\n\n  /**\n   * The input mode attribute of the control.\n   * See [relevant MDN article](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)\n   * @attr inputmode\n   */\n  @property({ attribute: 'inputmode' })\n  public override inputMode!: string;\n\n  /**\n   * The pattern attribute of the control.\n   * @attr\n   */\n  @property()\n  public set pattern(value: string | undefined) {\n    this._pattern = value;\n    this._validate();\n  }\n\n  public get pattern(): string | undefined {\n    return this._pattern;\n  }\n\n  /**\n   * The minimum string length required by the control.\n   * @attr minlength\n   */\n  @property({ type: Number, attribute: 'minlength' })\n  public set minLength(value: number | undefined) {\n    this._minLength = value;\n    this._validate();\n  }\n\n  public get minLength(): number | undefined {\n    return this._minLength;\n  }\n\n  /**\n   * The maximum string length of the control.\n   * @attr maxlength\n   */\n  @property({ type: Number, attribute: 'maxlength' })\n  public set maxLength(value: number | undefined) {\n    this._maxLength = value;\n    this._validate();\n  }\n\n  public get maxLength(): number | undefined {\n    return this._maxLength;\n  }\n\n  /**\n   * The min attribute of the control.\n   * @attr\n   */\n  @property({ type: Number })\n  public set min(value: number | undefined) {\n    this._min = value;\n    this._validate();\n  }\n\n  public get min(): number | undefined {\n    return this._min;\n  }\n\n  /**\n   * The max attribute of the control.\n   * @attr\n   */\n  @property({ type: Number })\n  public set max(value: number | undefined) {\n    this._max = value;\n    this._validate();\n  }\n\n  public get max(): number | undefined {\n    return this._max;\n  }\n\n  /**\n   * The step attribute of the control.\n   * @attr\n   */\n  @property({ type: Number })\n  public set step(value: number | undefined) {\n    this._step = value;\n    this._validate();\n  }\n\n  public get step(): number | undefined {\n    return this._step;\n  }\n\n  /**\n   * The autofocus attribute of the control.\n   * @attr\n   */\n  @property({ type: Boolean })\n  public override autofocus!: boolean;\n\n  /**\n   * The autocomplete attribute of the control.\n   * @attr\n   */\n  @property()\n  public autocomplete!: string;\n\n  /**\n   * Enables validation rules to be evaluated without restricting user input. This applies to the `maxLength` property for\n   * string-type inputs or allows spin buttons to exceed the predefined `min/max` limits for number-type inputs.\n   *\n   * @attr validate-only\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'validate-only' })\n  public validateOnly = false;\n\n  /* blazorSuppress */\n  /** Replaces the selected text in the input. */\n  public override setRangeText(\n    replacement: string,\n    start: number,\n    end: number,\n    selectMode: RangeTextSelectMode = 'preserve'\n  ) {\n    super.setRangeText(replacement, start, end, selectMode);\n    this.value = this.input.value;\n  }\n\n  /** Selects all text within the input. */\n  public select() {\n    return this.input.select();\n  }\n\n  /** Increments the numeric value of the input by one or more steps. */\n  public stepUp(n?: number) {\n    this.input.stepUp(n);\n    this.value = this.input.value;\n  }\n\n  /** Decrements the numeric value of the input by one or more steps. */\n  public stepDown(n?: number) {\n    this.input.stepDown(n);\n    this.value = this.input.value;\n  }\n\n  private handleInput() {\n    this._setTouchedState();\n    this.value = this.input.value;\n    this.emitEvent('igcInput', { detail: this.value });\n  }\n\n  private handleChange() {\n    this._setTouchedState();\n    this.value = this.input.value;\n    this.emitEvent('igcChange', { detail: this.value });\n  }\n\n  protected renderInput() {\n    const hasNegativeTabIndex = this.getAttribute('tabindex') === '-1';\n    const hasHelperText = !isEmpty(this._helperText);\n\n    return html`\n      <input\n        id=${this.inputId}\n        part=${partMap(this.resolvePartNames('input'))}\n        name=${ifDefined(this.name)}\n        type=${ifDefined(this.type)}\n        pattern=${ifDefined(this.pattern)}\n        placeholder=${ifDefined(this.placeholder)}\n        .value=${live(this.value)}\n        ?readonly=${this.readOnly}\n        ?disabled=${this.disabled}\n        ?required=${this.required}\n        ?autofocus=${this.autofocus}\n        tabindex=${bindIf(hasNegativeTabIndex, -1)}\n        autocomplete=${ifDefined(this.autocomplete as any)}\n        inputmode=${ifDefined(this.inputMode)}\n        min=${bindIf(!this.validateOnly, this.min)}\n        max=${bindIf(!this.validateOnly, this.max)}\n        minlength=${ifDefined(this.minLength)}\n        maxlength=${bindIf(!this.validateOnly, this.maxLength)}\n        step=${ifDefined(this.step)}\n        aria-describedby=${bindIf(hasHelperText, 'helper-text')}\n        @change=${this.handleChange}\n        @input=${this.handleInput}\n        @blur=${this._handleBlur}\n      />\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-input': IgcInputComponent;\n  }\n}\n"]}
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/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 type {\n  InputType,\n  RangeTextSelectMode,\n  SelectionRangeDirection,\n} from '../types.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport { IgcInputBaseComponent } from './input-base.js';\nimport { styles } from './themes/input.base.css.js';\nimport { styles as shared } from './themes/shared/input.common.css.js';\nimport { all } from './themes/themes.js';\nimport { numberValidators, stringValidators } from './validators.js';\n\nconst Slots = setSlots(\n  'prefix',\n  'suffix',\n  'helper-text',\n  'value-missing',\n  'type-mismatch',\n  'pattern-mismatch',\n  'too-long',\n  'too-short',\n  'range-overflow',\n  'range-underflow',\n  'step-mismatch',\n  'custom-error',\n  'invalid'\n);\n\n/**\n * @element igc-input\n *\n * @slot prefix - Renders content before the input.\n * @slot suffix - Renders content after input.\n * @slot helper-text - Renders content below the input.\n * @slot value-missing - Renders content when the required validation fails.\n * @slot type-mismatch - Renders content when the a type url/email input pattern validation fails.\n * @slot pattern-mismatch - Renders content when the pattern validation fails.\n * @slot too-long - Renders content when the maxlength validation fails.\n * @slot too-short - Renders content when the minlength validation fails.\n * @slot range-overflow - Renders content when the max validation fails.\n * @slot range-underflow - Renders content when the min validation fails.\n * @slot step-mismatch - Renders content when the step 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 input receives user input.\n * @fires igcChange - Emitted when the control's checked state changes.\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 IgcInputComponent extends IgcInputBaseComponent {\n  public static readonly tagName = 'igc-input';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcInputComponent, IgcValidationContainerComponent);\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  });\n\n  protected override get __validators() {\n    return this.type !== 'number' ? stringValidators : numberValidators;\n  }\n\n  private _min?: number;\n  private _max?: number;\n  private _minLength?: number;\n  private _maxLength?: number;\n  private _pattern?: string;\n  private _step?: number;\n\n  /* @tsTwoWayProperty(true, \"igcChange\", \"detail\", false) */\n  /**\n   * The value of the control.\n   * @attr\n   */\n  @property()\n  public set value(value: string) {\n    this._formValue.setValueAndFormState(value);\n  }\n\n  public get value(): string {\n    return this._formValue.value;\n  }\n\n  /* alternateName: displayType */\n  /**\n   * The type attribute of the control.\n   * @attr\n   */\n  @property({ reflect: true })\n  public type: InputType = 'text';\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 input mode attribute of the control.\n   * See [relevant MDN article](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)\n   * @attr inputmode\n   */\n  @property({ attribute: 'inputmode' })\n  public override inputMode!: string;\n\n  /**\n   * The pattern attribute of the control.\n   * @attr\n   */\n  @property()\n  public set pattern(value: string | undefined) {\n    this._pattern = value;\n    this._validate();\n  }\n\n  public get pattern(): string | undefined {\n    return this._pattern;\n  }\n\n  /**\n   * The minimum string length required by the control.\n   * @attr minlength\n   */\n  @property({ type: Number, attribute: 'minlength' })\n  public set minLength(value: number | undefined) {\n    this._minLength = value;\n    this._validate();\n  }\n\n  public get minLength(): number | undefined {\n    return this._minLength;\n  }\n\n  /**\n   * The maximum string length of the control.\n   * @attr maxlength\n   */\n  @property({ type: Number, attribute: 'maxlength' })\n  public set maxLength(value: number | undefined) {\n    this._maxLength = value;\n    this._validate();\n  }\n\n  public get maxLength(): number | undefined {\n    return this._maxLength;\n  }\n\n  /**\n   * The min attribute of the control.\n   * @attr\n   */\n  @property({ type: Number })\n  public set min(value: number | undefined) {\n    this._min = value;\n    this._validate();\n  }\n\n  public get min(): number | undefined {\n    return this._min;\n  }\n\n  /**\n   * The max attribute of the control.\n   * @attr\n   */\n  @property({ type: Number })\n  public set max(value: number | undefined) {\n    this._max = value;\n    this._validate();\n  }\n\n  public get max(): number | undefined {\n    return this._max;\n  }\n\n  /**\n   * The step attribute of the control.\n   * @attr\n   */\n  @property({ type: Number })\n  public set step(value: number | undefined) {\n    this._step = value;\n    this._validate();\n  }\n\n  public get step(): number | undefined {\n    return this._step;\n  }\n\n  /**\n   * The autofocus attribute of the control.\n   * @attr\n   */\n  @property({ type: Boolean })\n  public override autofocus!: boolean;\n\n  /**\n   * The autocomplete attribute of the control.\n   * @attr\n   */\n  @property()\n  public autocomplete!: string;\n\n  /**\n   * Enables validation rules to be evaluated without restricting user input. This applies to the `maxLength` property for\n   * string-type inputs or allows spin buttons to exceed the predefined `min/max` limits for number-type inputs.\n   *\n   * @attr validate-only\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'validate-only' })\n  public validateOnly = false;\n\n  /* blazorSuppress */\n  /** Replaces the selected text in the input. */\n  public setRangeText(\n    replacement: string,\n    start?: number,\n    end?: number,\n    selectMode: RangeTextSelectMode = 'preserve'\n  ): void {\n    this._input?.setRangeText(replacement, start!, end!, selectMode);\n    this.value = this._input?.value ?? '';\n  }\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  }\n\n  /** Increments the numeric value of the input by one or more steps. */\n  public stepUp(n?: number): void {\n    this._input?.stepUp(n);\n    this.value = this._input?.value ?? '';\n  }\n\n  /** Decrements the numeric value of the input by one or more steps. */\n  public stepDown(n?: number): void {\n    this._input?.stepDown(n);\n    this.value = this._input?.value ?? '';\n  }\n\n  private _handleInput(): void {\n    this._setTouchedState();\n    this.value = this._input?.value ?? '';\n    this.emitEvent('igcInput', { detail: this.value });\n  }\n\n  private _handleChange(): void {\n    this._setTouchedState();\n    this.value = this._input?.value ?? '';\n    this.emitEvent('igcChange', { detail: this.value });\n  }\n\n  protected _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        part=${partMap(this._resolvePartNames('input'))}\n        name=${ifDefined(this.name)}\n        type=${ifDefined(this.type)}\n        pattern=${ifDefined(this.pattern)}\n        placeholder=${ifDefined(this.placeholder)}\n        .value=${live(this.value)}\n        ?readonly=${this.readOnly}\n        ?disabled=${this.disabled}\n        ?required=${this.required}\n        ?autofocus=${this.autofocus}\n        tabindex=${bindIf(hasNegativeTabIndex, -1)}\n        autocomplete=${ifDefined(this.autocomplete as any)}\n        inputmode=${ifDefined(this.inputMode)}\n        min=${bindIf(!this.validateOnly, this.min)}\n        max=${bindIf(!this.validateOnly, this.max)}\n        minlength=${ifDefined(this.minLength)}\n        maxlength=${bindIf(!this.validateOnly, this.maxLength)}\n        step=${ifDefined(this.step)}\n        aria-describedby=${bindIf(hasHelperText, 'helper-text')}\n        @change=${this._handleChange}\n        @input=${this._handleInput}\n        @blur=${this._handleBlur}\n      />\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-input': IgcInputComponent;\n  }\n}\n"]}

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

@@ -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

@@ -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,7 +45,7 @@ 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;
@@ -75,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;
@@ -126,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

@@ -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 + 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\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"]}
+{"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

@@ -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

@@ -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}
       />
     `;