igniteui-webcomponents 7.3.0-beta.0 → 7.3.0-beta.1

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

@@ -1 +1 @@
-{"version":3,"file":"file-input.js","sourceRoot":"","sources":["../../../src/components/file-input/file-input.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  FileInputResourceStringsEN,\n  type IFileInputResourceStrings,\n} from 'igniteui-i18n-core';\nimport { html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ariaBindings } from '#internals/controllers/aria-projection.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { addI18nController } from '#internals/i18n/i18n-controller.js';\nimport type { AbstractConstructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { FormValueFileListTransformers } from '#internals/mixins/forms/form-transformers.js';\nimport { createFormValueState } from '#internals/mixins/forms/form-value.js';\nimport { partMap } from '#internals/part-map.js';\nimport { hasFiles } from '#internals/utils/dom.js';\nimport { bindIf } from '#internals/utils/lit.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcButtonComponent from '../button/button.js';\nimport {\n  IgcInputBaseComponent,\n  type IgcInputComponentEventMap,\n} from '../input/input-base.js';\nimport { styles as baseStyle } from '../input/themes/input.base.css.js';\nimport { styles as shared } from '../input/themes/shared/input.common.css.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport { styles } from './themes/file-input.base.css.js';\nimport { all } from './themes/themes.js';\nimport { fileValidators } from './validators.js';\n\n/* blazorSuppress */\nexport interface IgcFileInputComponentEventMap extends Omit<\n  IgcInputComponentEventMap,\n  'igcChange' | 'igcInput'\n> {\n  igcCancel: CustomEvent<FileList>;\n  igcChange: CustomEvent<FileList>;\n}\n\nconst Slots = setSlots(\n  'prefix',\n  'suffix',\n  'helper-text',\n  'file-selector-text',\n  'file-missing-text',\n  'value-missing',\n  'custom-error',\n  'invalid'\n);\n\n/* blazorSuppress */\n/**\n * @element igc-file-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 file-selector-text - Renders content for the browse button when input type is file.\n * @slot file-missing-text - Renders content when input type is file and no file is chosen.\n * @slot value-missing - Renders content when the required 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 igcChange - Emitted when the control's checked state changes.\n * @fires igcCancel - Emitted when the control's file picker dialog is canceled.\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 file-names - The file names wrapper when input type is 'file'.\n * @csspart file-selector-button - The browse button when input type is 'file'.\n * @csspart prefix - The prefix wrapper.\n * @csspart suffix - The suffix wrapper.\n * @csspart helper-text - The helper text wrapper.\n */\nexport default class IgcFileInputComponent extends EventEmitterMixin<\n  IgcFileInputComponentEventMap,\n  AbstractConstructor<IgcInputBaseComponent>\n>(IgcInputBaseComponent) {\n  public static readonly tagName = 'igc-file-input';\n  public static styles = [baseStyle, shared, styles];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(\n      IgcFileInputComponent,\n      IgcValidationContainerComponent,\n      IgcButtonComponent\n    );\n  }\n\n  //#region Internal attributes and properties\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: null,\n    transformers: FormValueFileListTransformers,\n  });\n\n  protected readonly _i18nController = addI18nController(this, {\n    defaultEN: FileInputResourceStringsEN,\n  });\n\n  protected override get __validators() {\n    return fileValidators;\n  }\n\n  private get _fileNames(): string | null {\n    if (!hasFiles(this)) {\n      return null;\n    }\n\n    return Array.from(this.files)\n      .map((file) => file.name || 'unnamed')\n      .join(', ');\n  }\n\n  /**\n   * Indicates whether the file picker dialog is currently active.\n   * Used to manage validation on blur.\n   */\n  @state()\n  private _filePickerActive = false;\n\n  //#endregion\n\n  //#region Public attributes and properties\n\n  /* @tsTwoWayProperty(true, \"igcChange\", \"detail\", false) */\n  /**\n   * The value of the control.\n   * Similar to native file input, this property is read-only and cannot be set programmatically.\n   * @attr\n   */\n  @property()\n  public set value(value: string) {\n    if (value === '' && this._input) {\n      this._input.value = value;\n    }\n  }\n\n  public get value(): string {\n    return this._input?.value ?? '';\n  }\n\n  /**\n   * The resource strings for localization.\n   */\n  @property({ attribute: false })\n  public set resourceStrings(value: IFileInputResourceStrings) {\n    this._i18nController.resourceStrings = value;\n  }\n\n  public get resourceStrings(): IFileInputResourceStrings {\n    return this._i18nController.resourceStrings;\n  }\n\n  /**\n   * Gets/Sets the locale used for getting language, affecting resource strings.\n   * @attr locale\n   */\n  @property()\n  public set locale(value: string) {\n    this._i18nController.locale = value;\n  }\n\n  public get locale(): string {\n    return this._i18nController.locale;\n  }\n\n  /**\n   * Whether the control allows the user to select more than one file.\n   *\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public multiple = false;\n\n  /**\n   * The file types the control accepts, as a comma-separated list.\n   * @attr\n   */\n  @property()\n  public accept = '';\n\n  /**\n   * Whether the control should receive focus automatically.\n   * @attr\n   */\n  @property({ type: Boolean })\n  public override autofocus!: boolean;\n\n  /** Returns the list of selected files. */\n  public get files(): FileList {\n    return this._input?.files ?? new DataTransfer().files;\n  }\n\n  //#endregion\n\n  //#region Internal methods\n\n  /**\n   * A file input cannot have a default file list, so the `value` attribute\n   * never contributes a default - otherwise its string would be stored as the\n   * FileList default and submitted character-by-character after a form reset.\n   */\n  protected override _setDefaultValue(): void {\n    this._formValue.defaultValue = null;\n  }\n\n  /**\n   * Restores directly instead of through the `value` setter: the setter is\n   * deliberately inert (read-only semantics) and never updates the form state.\n   */\n  protected override _restoreDefaultValue(): void {\n    if (this._input) {\n      this._input.value = '';\n    }\n    this._formValue.setValueAndFormState(this._formValue.defaultValue);\n    this.requestUpdate();\n  }\n\n  //#endregion\n\n  //#region Event Handlers\n\n  private _handleChange(): void {\n    this._filePickerActive = false;\n    this._setTouchedState();\n    this._formValue.setValueAndFormState(this.files);\n\n    this.requestUpdate();\n    this.emitEvent('igcChange', { detail: this.files });\n  }\n\n  private _handleCancel(): void {\n    this._filePickerActive = false;\n    this._setTouchedState();\n    this._validate();\n\n    this.emitEvent('igcCancel', { detail: this.files });\n  }\n\n  protected override _handleBlur(): void {\n    this._filePickerActive ? this._validate() : super._handleBlur();\n  }\n\n  /* c8 ignore next 3 */\n  protected _handleClick(): void {\n    this._filePickerActive = true;\n  }\n\n  //#endregion\n\n  protected override _renderFileParts() {\n    const emptyText =\n      this.placeholder ?? this.resourceStrings.file_input_placeholder;\n\n    return html`\n      <div part=\"file-parts\">\n        <div part=\"file-selector-button\">\n          <igc-button variant=\"flat\" ?disabled=${this.disabled} tabindex=\"-1\">\n            <slot name=\"file-selector-text\"\n              >${this.resourceStrings.file_input_upload_button}</slot\n            >\n          </igc-button>\n        </div>\n        <div part=\"file-names\">\n          <span>\n            ${\n              this._fileNames ??\n              html`<slot name=\"file-missing-text\">${emptyText}</slot>`\n            }\n          </span>\n        </div>\n      </div>\n    `;\n  }\n\n  protected override _renderInput() {\n    const hasNegativeTabIndex = this.getAttribute('tabindex') === '-1';\n\n    return html`\n      <input\n        ${ariaBindings(this._ariaTarget.resolveBindings())}\n        id=${this._inputId}\n        part=${partMap(this._resolvePartNames('input'))}\n        type=\"file\"\n        ?disabled=${this.disabled}\n        ?required=${this.required}\n        ?autofocus=${this.autofocus}\n        ?multiple=${this.multiple}\n        tabindex=${bindIf(hasNegativeTabIndex, -1)}\n        accept=${bindIf(this.accept, this.accept)}\n        @click=${this._handleClick}\n        @change=${this._handleChange}\n        @cancel=${this._handleCancel}\n        @blur=${this._handleBlur}\n      />\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-file-input': IgcFileInputComponent;\n  }\n}\n"]}
+{"version":3,"file":"file-input.js","sourceRoot":"","sources":["../../../src/components/file-input/file-input.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  FileInputResourceStringsEN,\n  type IFileInputResourceStrings,\n} from 'igniteui-i18n-core';\nimport { html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ariaBindings } from '#internals/controllers/aria-projection.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport type { I18nControllerConfig } from '#internals/i18n/i18n-controller.js';\nimport type { AbstractConstructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { FormValueFileListTransformers } from '#internals/mixins/forms/form-transformers.js';\nimport { createFormValueState } from '#internals/mixins/forms/form-value.js';\nimport { I18nMixin } from '#internals/mixins/i18n.js';\nimport { partMap } from '#internals/part-map.js';\nimport { hasFiles } from '#internals/utils/dom.js';\nimport { bindIf } from '#internals/utils/lit.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcButtonComponent from '../button/button.js';\nimport {\n  IgcInputBaseComponent,\n  type IgcInputComponentEventMap,\n} from '../input/input-base.js';\nimport { styles as baseStyle } from '../input/themes/input.base.css.js';\nimport { styles as shared } from '../input/themes/shared/input.common.css.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport { styles } from './themes/file-input.base.css.js';\nimport { all } from './themes/themes.js';\nimport { fileValidators } from './validators.js';\n\n/* blazorSuppress */\nexport interface IgcFileInputComponentEventMap extends Omit<\n  IgcInputComponentEventMap,\n  'igcChange' | 'igcInput'\n> {\n  igcCancel: CustomEvent<FileList>;\n  igcChange: CustomEvent<FileList>;\n}\n\nconst Slots = setSlots(\n  'prefix',\n  'suffix',\n  'helper-text',\n  'file-selector-text',\n  'file-missing-text',\n  'value-missing',\n  'custom-error',\n  'invalid'\n);\n\nconst i18n: I18nControllerConfig<IFileInputResourceStrings> = {\n  defaultEN: FileInputResourceStringsEN,\n};\n\n/* blazorSuppress */\n/**\n * @element igc-file-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 file-selector-text - Renders content for the browse button when input type is file.\n * @slot file-missing-text - Renders content when input type is file and no file is chosen.\n * @slot value-missing - Renders content when the required 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 igcChange - Emitted when the control's checked state changes.\n * @fires igcCancel - Emitted when the control's file picker dialog is canceled.\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 file-names - The file names wrapper when input type is 'file'.\n * @csspart file-selector-button - The browse button when input type is 'file'.\n * @csspart prefix - The prefix wrapper.\n * @csspart suffix - The suffix wrapper.\n * @csspart helper-text - The helper text wrapper.\n */\nexport default class IgcFileInputComponent extends I18nMixin(\n  EventEmitterMixin<\n    IgcFileInputComponentEventMap,\n    AbstractConstructor<IgcInputBaseComponent>\n  >(IgcInputBaseComponent),\n  i18n\n) {\n  public static readonly tagName = 'igc-file-input';\n  public static styles = [baseStyle, shared, styles];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(\n      IgcFileInputComponent,\n      IgcValidationContainerComponent,\n      IgcButtonComponent\n    );\n  }\n\n  //#region Internal attributes and properties\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: null,\n    transformers: FormValueFileListTransformers,\n  });\n\n  protected override get __validators() {\n    return fileValidators;\n  }\n\n  private get _fileNames(): string | null {\n    if (!hasFiles(this)) {\n      return null;\n    }\n\n    return Array.from(this.files)\n      .map((file) => file.name || 'unnamed')\n      .join(', ');\n  }\n\n  /**\n   * Indicates whether the file picker dialog is currently active.\n   * Used to manage validation on blur.\n   */\n  @state()\n  private _filePickerActive = false;\n\n  //#endregion\n\n  //#region Public attributes and properties\n\n  /* @tsTwoWayProperty(true, \"igcChange\", \"detail\", false) */\n  /**\n   * The value of the control.\n   * Similar to native file input, this property is read-only and cannot be set programmatically.\n   * @attr\n   */\n  @property()\n  public set value(value: string) {\n    if (value === '' && this._input) {\n      this._input.value = value;\n    }\n  }\n\n  public get value(): string {\n    return this._input?.value ?? '';\n  }\n\n  /**\n   * Whether the control allows the user to select more than one file.\n   *\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public multiple = false;\n\n  /**\n   * The file types the control accepts, as a comma-separated list.\n   * @attr\n   */\n  @property()\n  public accept = '';\n\n  /**\n   * Whether the control should receive focus automatically.\n   * @attr\n   */\n  @property({ type: Boolean })\n  public override autofocus!: boolean;\n\n  /** Returns the list of selected files. */\n  public get files(): FileList {\n    return this._input?.files ?? new DataTransfer().files;\n  }\n\n  //#endregion\n\n  //#region Internal methods\n\n  /**\n   * A file input cannot have a default file list, so the `value` attribute\n   * never contributes a default - otherwise its string would be stored as the\n   * FileList default and submitted character-by-character after a form reset.\n   */\n  protected override _setDefaultValue(): void {\n    this._formValue.defaultValue = null;\n  }\n\n  /**\n   * Restores directly instead of through the `value` setter: the setter is\n   * deliberately inert (read-only semantics) and never updates the form state.\n   */\n  protected override _restoreDefaultValue(): void {\n    if (this._input) {\n      this._input.value = '';\n    }\n    this._formValue.setValueAndFormState(this._formValue.defaultValue);\n    this.requestUpdate();\n  }\n\n  //#endregion\n\n  //#region Event Handlers\n\n  private _handleChange(): void {\n    this._filePickerActive = false;\n    this._setTouchedState();\n    this._formValue.setValueAndFormState(this.files);\n\n    this.requestUpdate();\n    this.emitEvent('igcChange', { detail: this.files });\n  }\n\n  private _handleCancel(): void {\n    this._filePickerActive = false;\n    this._setTouchedState();\n    this._validate();\n\n    this.emitEvent('igcCancel', { detail: this.files });\n  }\n\n  protected override _handleBlur(): void {\n    this._filePickerActive ? this._validate() : super._handleBlur();\n  }\n\n  /* c8 ignore next 3 */\n  protected _handleClick(): void {\n    this._filePickerActive = true;\n  }\n\n  //#endregion\n\n  protected override _renderFileParts() {\n    const emptyText =\n      this.placeholder ?? this.resourceStrings.file_input_placeholder;\n\n    return html`\n      <div part=\"file-parts\">\n        <div part=\"file-selector-button\">\n          <igc-button variant=\"flat\" ?disabled=${this.disabled} tabindex=\"-1\">\n            <slot name=\"file-selector-text\"\n              >${this.resourceStrings.file_input_upload_button}</slot\n            >\n          </igc-button>\n        </div>\n        <div part=\"file-names\">\n          <span>\n            ${\n              this._fileNames ??\n              html`<slot name=\"file-missing-text\">${emptyText}</slot>`\n            }\n          </span>\n        </div>\n      </div>\n    `;\n  }\n\n  protected override _renderInput() {\n    const hasNegativeTabIndex = this.getAttribute('tabindex') === '-1';\n\n    return html`\n      <input\n        ${ariaBindings(this._ariaTarget.resolveBindings())}\n        id=${this._inputId}\n        part=${partMap(this._resolvePartNames('input'))}\n        type=\"file\"\n        ?disabled=${this.disabled}\n        ?required=${this.required}\n        ?autofocus=${this.autofocus}\n        ?multiple=${this.multiple}\n        tabindex=${bindIf(hasNegativeTabIndex, -1)}\n        accept=${bindIf(this.accept, this.accept)}\n        @click=${this._handleClick}\n        @change=${this._handleChange}\n        @cancel=${this._handleCancel}\n        @blur=${this._handleBlur}\n      />\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-file-input': IgcFileInputComponent;\n  }\n}\n"]}

package/components/highlight/highlight.d.ts

@@ -18,7 +18,7 @@ import { type HighlightNavigation } from './service.js';
  * @cssproperty --background-active - The background color for the active highlighted text node.
  *
  * @example
- * Basic usage — wrap your text and set the `search-text` attribute:
+ * Basic usage - wrap your text and set the `search-text` attribute:
  * ```html
  * <igc-highlight search-text="world">
  *   <p>Hello, world! The world is a wonderful place.</p>
@@ -29,7 +29,7 @@ import { type HighlightNavigation } from './service.js';
  * Case-sensitive search:
  * ```html
  * <igc-highlight search-text="Hello" case-sensitive>
- *   <p>Hello hello HELLO — only the first one matches.</p>
+ *   <p>Hello hello HELLO - only the first one matches.</p>
  * </igc-highlight>
  * ```
  *
@@ -67,8 +67,8 @@ export default class IgcHighlightComponent extends LitElement {
     static styles: import("lit").CSSResult[];
     static register(): void;
     private readonly _service;
-    private _caseSensitive;
-    private _searchText;
+    /** Shared config for the properties that trigger a new search when changed. */
+    private static readonly _search;
     /**
      * Whether to match the searched text with case sensitivity in mind.
      * When `true`, only exact-case occurrences of `searchText` are highlighted.
@@ -76,8 +76,7 @@ export default class IgcHighlightComponent extends LitElement {
      * @attr case-sensitive
      * @default false
      */
-    set caseSensitive(value: boolean);
-    get caseSensitive(): boolean;
+    caseSensitive: boolean;
     /**
      * The string to search and highlight in the DOM content of the component.
      * Setting this property triggers a new search automatically.
@@ -85,8 +84,7 @@ export default class IgcHighlightComponent extends LitElement {
      *
      * @attr search-text
      */
-    set searchText(value: string);
-    get searchText(): string;
+    searchText: string;
     /** The total number of matches found for the current `searchText`. Returns `0` when there are no matches or `searchText` is empty. */
     get size(): number;
     /** The zero-based index of the currently active (focused) match. Returns `0` when there are no matches. */

package/components/highlight/highlight.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
+import { coercedProperty, } from '#internals/decorators/coerced-property.js';
 import { registerComponent } from '#internals/definitions/register.js';
 import { addThemingController } from '#theming/theming-controller.js';
 import { createHighlightController, } from './service.js';
@@ -17,20 +18,9 @@ export default class IgcHighlightComponent extends LitElement {
     static register() {
         registerComponent(IgcHighlightComponent);
     }
-    set caseSensitive(value) {
-        this._caseSensitive = value;
-        this.search();
-    }
-    get caseSensitive() {
-        return this._caseSensitive;
-    }
-    set searchText(value) {
-        this._searchText = value;
-        this.search();
-    }
-    get searchText() {
-        return this._searchText;
-    }
+    static { this._search = {
+        onChange: ({ host }) => host.search(),
+    }; }
     get size() {
         return this._service.size;
     }
@@ -40,8 +30,8 @@ export default class IgcHighlightComponent extends LitElement {
     constructor() {
         super();
         this._service = createHighlightController(this);
-        this._caseSensitive = false;
-        this._searchText = '';
+        this.caseSensitive = false;
+        this.searchText = '';
         addThemingController(this, all, {
             themeChange: this._addStylesheet,
         });
@@ -69,9 +59,11 @@ export default class IgcHighlightComponent extends LitElement {
     }
 }
 __decorate([
-    property({ type: Boolean, reflect: true, attribute: 'case-sensitive' })
-], IgcHighlightComponent.prototype, "caseSensitive", null);
+    property({ type: Boolean, reflect: true, attribute: 'case-sensitive' }),
+    coercedProperty(IgcHighlightComponent._search)
+], IgcHighlightComponent.prototype, "caseSensitive", void 0);
 __decorate([
-    property({ attribute: 'search-text' })
-], IgcHighlightComponent.prototype, "searchText", null);
+    property({ attribute: 'search-text' }),
+    coercedProperty(IgcHighlightComponent._search)
+], IgcHighlightComponent.prototype, "searchText", void 0);
 //# sourceMappingURL=highlight.js.map

package/components/highlight/highlight.js.map

@@ -1 +1 @@
-{"version":3,"file":"highlight.js","sourceRoot":"","sources":["../../../src/components/highlight/highlight.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EACL,yBAAyB,GAE1B,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAgEzC,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,UAAU;aACpC,YAAO,GAAG,eAAe,AAAlB,CAAmB;aAC1B,WAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;IAGlC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;IAC3C,CAAC;IAqBD,IAAW,aAAa,CAAC,KAAc;QACrC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC5B,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,IAAW,aAAa;QACtB,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAUD,IAAW,UAAU,CAAC,KAAa;QACjC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,IAAW,UAAU;QACnB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAGD,IAAW,IAAI;QACb,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC5B,CAAC;IAGD,IAAW,OAAO;QAChB,OAAO,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;IAC/B,CAAC;IAID;QACE,KAAK,EAAE,CAAC;QAxDO,aAAQ,GAAG,yBAAyB,CAAC,IAAI,CAAC,CAAC;QAEpD,mBAAc,GAAG,KAAK,CAAC;QACvB,gBAAW,GAAG,EAAE,CAAC;QAuDvB,oBAAoB,CAAC,IAAI,EAAE,GAAG,EAAE;YAC9B,WAAW,EAAE,IAAI,CAAC,cAAc;SACjC,CAAC,CAAC;IACL,CAAC;IAIO,cAAc;QACpB,IAAI,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC;IACnC,CAAC;IAYM,IAAI,CAAC,OAA6B;QACvC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAQM,QAAQ,CAAC,OAA6B;QAC3C,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IAClC,CAAC;IAQM,SAAS,CAAC,KAAa,EAAE,OAA6B;QAC3D,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAC1C,CAAC;IAQM,MAAM;QACX,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;YACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACtC,CAAC;IACH,CAAC;IAIkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAvGD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;0DAIvE;AAcD;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;uDAItC","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport {\n  createHighlightController,\n  type HighlightNavigation,\n} from './service.js';\nimport { styles as shared } from './themes/shared/highlight.common.css.js';\nimport { all } from './themes/themes.js';\n\n/**\n * The highlight component provides efficient searching and highlighting of text\n * projected into it via its default slot. It uses the native CSS Custom Highlight API\n * to apply highlight styles to matched text nodes without modifying the DOM.\n *\n * The component supports case-sensitive matching, programmatic navigation between\n * matches, and automatic scroll-into-view of the active match.\n *\n * @element igc-highlight\n *\n * @slot - The default slot. Place the text content you want to search and highlight here.\n *\n * @cssproperty --foreground - The text color for a highlighted text node.\n * @cssproperty --background - The background color for a highlighted text node.\n * @cssproperty --foreground-active - The text color for the active highlighted text node.\n * @cssproperty --background-active - The background color for the active highlighted text node.\n *\n * @example\n * Basic usage — wrap your text and set the `search-text` attribute:\n * ```html\n * <igc-highlight search-text=\"world\">\n *   <p>Hello, world! The world is a wonderful place.</p>\n * </igc-highlight>\n * ```\n *\n * @example\n * Case-sensitive search:\n * ```html\n * <igc-highlight search-text=\"Hello\" case-sensitive>\n *   <p>Hello hello HELLO — only the first one matches.</p>\n * </igc-highlight>\n * ```\n *\n * @example\n * Navigating between matches programmatically:\n * ```typescript\n * const highlight = document.querySelector('igc-highlight');\n *\n * highlight.searchText = 'world';\n * console.log(highlight.size);    // total number of matches\n * console.log(highlight.current); // index of the active match (0-based)\n *\n * highlight.next();               // move to the next match\n * highlight.previous();           // move to the previous match\n * highlight.setActive(2);         // jump to a specific match by index\n * ```\n *\n * @example\n * Prevent scroll-into-view when navigating:\n * ```typescript\n * const highlight = document.querySelector('igc-highlight');\n * highlight.next({ preventScroll: true });\n * ```\n *\n * @example\n * Re-run search after dynamic content changes (e.g. lazy-loaded text):\n * ```typescript\n * const highlight = document.querySelector('igc-highlight');\n * // After slotted content has been updated:\n * highlight.search();\n * ```\n */\nexport default class IgcHighlightComponent extends LitElement {\n  public static readonly tagName = 'igc-highlight';\n  public static override styles = [shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcHighlightComponent);\n  }\n\n  //#region Internal properties and state\n\n  private readonly _service = createHighlightController(this);\n\n  private _caseSensitive = false;\n  private _searchText = '';\n\n  //#endregion\n\n  //#region Public properties and attributes\n\n  /**\n   * Whether to match the searched text with case sensitivity in mind.\n   * When `true`, only exact-case occurrences of `searchText` are highlighted.\n   *\n   * @attr case-sensitive\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'case-sensitive' })\n  public set caseSensitive(value: boolean) {\n    this._caseSensitive = value;\n    this.search();\n  }\n\n  public get caseSensitive(): boolean {\n    return this._caseSensitive;\n  }\n\n  /**\n   * The string to search and highlight in the DOM content of the component.\n   * Setting this property triggers a new search automatically.\n   * An empty string clears all highlights.\n   *\n   * @attr search-text\n   */\n  @property({ attribute: 'search-text' })\n  public set searchText(value: string) {\n    this._searchText = value;\n    this.search();\n  }\n\n  public get searchText(): string {\n    return this._searchText;\n  }\n\n  /** The total number of matches found for the current `searchText`. Returns `0` when there are no matches or `searchText` is empty. */\n  public get size(): number {\n    return this._service.size;\n  }\n\n  /** The zero-based index of the currently active (focused) match. Returns `0` when there are no matches. */\n  public get current(): number {\n    return this._service.current;\n  }\n\n  //#endregion\n\n  constructor() {\n    super();\n\n    addThemingController(this, all, {\n      themeChange: this._addStylesheet,\n    });\n  }\n\n  //#region Internal methods\n\n  private _addStylesheet(): void {\n    this._service.attachStylesheet();\n  }\n\n  //#endregion\n\n  //#region Public methods\n\n  /**\n   * Moves the active highlight to the next match.\n   * Wraps around to the first match after the last one.\n   *\n   * @param options - Optional navigation options (e.g. `preventScroll`).\n   */\n  public next(options?: HighlightNavigation): void {\n    this._service.next(options);\n  }\n\n  /**\n   * Moves the active highlight to the previous match.\n   * Wraps around to the last match when going back from the first one.\n   *\n   * @param options - Optional navigation options (e.g. `preventScroll`).\n   */\n  public previous(options?: HighlightNavigation): void {\n    this._service.previous(options);\n  }\n\n  /**\n   * Moves the active highlight to the match at the specified zero-based index.\n   *\n   * @param index - The zero-based index of the match to activate.\n   * @param options - Optional navigation options (e.g. `preventScroll`).\n   */\n  public setActive(index: number, options?: HighlightNavigation): void {\n    this._service.setActive(index, options);\n  }\n\n  /**\n   * Re-runs the highlight search based on the current `searchText` and `caseSensitive` values.\n   *\n   * Call this method after the slotted content changes dynamically (e.g. after lazy loading\n   * or programmatic DOM mutations) to ensure all matches are up to date.\n   */\n  public search(): void {\n    if (this.hasUpdated) {\n      this._service.clear();\n      this._service.find(this.searchText);\n    }\n  }\n\n  //#endregion\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-highlight': IgcHighlightComponent;\n  }\n}\n"]}
+{"version":3,"file":"highlight.js","sourceRoot":"","sources":["../../../src/components/highlight/highlight.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EACL,eAAe,GAEhB,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EACL,yBAAyB,GAE1B,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAgEzC,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,UAAU;aACpC,YAAO,GAAG,eAAe,AAAlB,CAAmB;aAC1B,WAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;IAGlC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;IAC3C,CAAC;aAOuB,YAAO,GAG3B;QACF,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE;KACtC,AAL8B,CAK7B;IA6BF,IAAW,IAAI;QACb,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC5B,CAAC;IAGD,IAAW,OAAO;QAChB,OAAO,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;IAC/B,CAAC;IAID;QACE,KAAK,EAAE,CAAC;QAjDO,aAAQ,GAAG,yBAAyB,CAAC,IAAI,CAAC,CAAC;QAuBrD,kBAAa,GAAG,KAAK,CAAC;QAWtB,eAAU,GAAG,EAAE,CAAC;QAiBrB,oBAAoB,CAAC,IAAI,EAAE,GAAG,EAAE;YAC9B,WAAW,EAAE,IAAI,CAAC,cAAc;SACjC,CAAC,CAAC;IACL,CAAC;IAIO,cAAc;QACpB,IAAI,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC;IACnC,CAAC;IAYM,IAAI,CAAC,OAA6B;QACvC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAQM,QAAQ,CAAC,OAA6B;QAC3C,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IAClC,CAAC;IAQM,SAAS,CAAC,KAAa,EAAE,OAA6B;QAC3D,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAC1C,CAAC;IAQM,MAAM;QACX,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;YACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACtC,CAAC;IACH,CAAC;IAIkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AA1FM;IAFN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;IACvE,eAAe,CAAC,qBAAqB,CAAC,OAAO,CAAC;4DAClB;AAWtB;IAFN,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;IACtC,eAAe,CAAC,qBAAqB,CAAC,OAAO,CAAC;yDACxB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport {\n  coercedProperty,\n  type CoercedPropertyConfig,\n} from '#internals/decorators/coerced-property.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport {\n  createHighlightController,\n  type HighlightNavigation,\n} from './service.js';\nimport { styles as shared } from './themes/shared/highlight.common.css.js';\nimport { all } from './themes/themes.js';\n\n/**\n * The highlight component provides efficient searching and highlighting of text\n * projected into it via its default slot. It uses the native CSS Custom Highlight API\n * to apply highlight styles to matched text nodes without modifying the DOM.\n *\n * The component supports case-sensitive matching, programmatic navigation between\n * matches, and automatic scroll-into-view of the active match.\n *\n * @element igc-highlight\n *\n * @slot - The default slot. Place the text content you want to search and highlight here.\n *\n * @cssproperty --foreground - The text color for a highlighted text node.\n * @cssproperty --background - The background color for a highlighted text node.\n * @cssproperty --foreground-active - The text color for the active highlighted text node.\n * @cssproperty --background-active - The background color for the active highlighted text node.\n *\n * @example\n * Basic usage - wrap your text and set the `search-text` attribute:\n * ```html\n * <igc-highlight search-text=\"world\">\n *   <p>Hello, world! The world is a wonderful place.</p>\n * </igc-highlight>\n * ```\n *\n * @example\n * Case-sensitive search:\n * ```html\n * <igc-highlight search-text=\"Hello\" case-sensitive>\n *   <p>Hello hello HELLO - only the first one matches.</p>\n * </igc-highlight>\n * ```\n *\n * @example\n * Navigating between matches programmatically:\n * ```typescript\n * const highlight = document.querySelector('igc-highlight');\n *\n * highlight.searchText = 'world';\n * console.log(highlight.size);    // total number of matches\n * console.log(highlight.current); // index of the active match (0-based)\n *\n * highlight.next();               // move to the next match\n * highlight.previous();           // move to the previous match\n * highlight.setActive(2);         // jump to a specific match by index\n * ```\n *\n * @example\n * Prevent scroll-into-view when navigating:\n * ```typescript\n * const highlight = document.querySelector('igc-highlight');\n * highlight.next({ preventScroll: true });\n * ```\n *\n * @example\n * Re-run search after dynamic content changes (e.g. lazy-loaded text):\n * ```typescript\n * const highlight = document.querySelector('igc-highlight');\n * // After slotted content has been updated:\n * highlight.search();\n * ```\n */\nexport default class IgcHighlightComponent extends LitElement {\n  public static readonly tagName = 'igc-highlight';\n  public static override styles = [shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcHighlightComponent);\n  }\n\n  //#region Internal properties and state\n\n  private readonly _service = createHighlightController(this);\n\n  /** Shared config for the properties that trigger a new search when changed. */\n  private static readonly _search: CoercedPropertyConfig<\n    unknown,\n    IgcHighlightComponent\n  > = {\n    onChange: ({ host }) => host.search(),\n  };\n\n  //#endregion\n\n  //#region Public properties and attributes\n\n  /**\n   * Whether to match the searched text with case sensitivity in mind.\n   * When `true`, only exact-case occurrences of `searchText` are highlighted.\n   *\n   * @attr case-sensitive\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'case-sensitive' })\n  @coercedProperty(IgcHighlightComponent._search)\n  public caseSensitive = false;\n\n  /**\n   * The string to search and highlight in the DOM content of the component.\n   * Setting this property triggers a new search automatically.\n   * An empty string clears all highlights.\n   *\n   * @attr search-text\n   */\n  @property({ attribute: 'search-text' })\n  @coercedProperty(IgcHighlightComponent._search)\n  public searchText = '';\n\n  /** The total number of matches found for the current `searchText`. Returns `0` when there are no matches or `searchText` is empty. */\n  public get size(): number {\n    return this._service.size;\n  }\n\n  /** The zero-based index of the currently active (focused) match. Returns `0` when there are no matches. */\n  public get current(): number {\n    return this._service.current;\n  }\n\n  //#endregion\n\n  constructor() {\n    super();\n\n    addThemingController(this, all, {\n      themeChange: this._addStylesheet,\n    });\n  }\n\n  //#region Internal methods\n\n  private _addStylesheet(): void {\n    this._service.attachStylesheet();\n  }\n\n  //#endregion\n\n  //#region Public methods\n\n  /**\n   * Moves the active highlight to the next match.\n   * Wraps around to the first match after the last one.\n   *\n   * @param options - Optional navigation options (e.g. `preventScroll`).\n   */\n  public next(options?: HighlightNavigation): void {\n    this._service.next(options);\n  }\n\n  /**\n   * Moves the active highlight to the previous match.\n   * Wraps around to the last match when going back from the first one.\n   *\n   * @param options - Optional navigation options (e.g. `preventScroll`).\n   */\n  public previous(options?: HighlightNavigation): void {\n    this._service.previous(options);\n  }\n\n  /**\n   * Moves the active highlight to the match at the specified zero-based index.\n   *\n   * @param index - The zero-based index of the match to activate.\n   * @param options - Optional navigation options (e.g. `preventScroll`).\n   */\n  public setActive(index: number, options?: HighlightNavigation): void {\n    this._service.setActive(index, options);\n  }\n\n  /**\n   * Re-runs the highlight search based on the current `searchText` and `caseSensitive` values.\n   *\n   * Call this method after the slotted content changes dynamically (e.g. after lazy loading\n   * or programmatic DOM mutations) to ensure all matches are up to date.\n   */\n  public search(): void {\n    if (this.hasUpdated) {\n      this._service.clear();\n      this._service.find(this.searchText);\n    }\n  }\n\n  //#endregion\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-highlight': IgcHighlightComponent;\n  }\n}\n"]}

package/components/icon/icon.d.ts

@@ -96,7 +96,7 @@ export default class IgcIconComponent extends LitElement {
     protected update(props: PropertyValues<this>): void;
     protected firstUpdated(): void;
     private _getIcon;
-    protected render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    protected render(): typeof nothing | import("lit-html").TemplateResult<1>;
     protected registerIcon(name: string, url: string, collection?: string, stripMeta?: boolean): Promise<void>;
     protected registerIconFromText(name: string, iconText: string, collection?: string, stripMeta?: boolean): void;
     protected setIconRef(name: string, collection: string, icon: IconMeta): void;

package/components/icon/registry/types.d.ts

@@ -59,7 +59,7 @@ export interface RegisterIconOptions {
      *
      * @remarks
      * SVG `<title>` elements cause the browser to display a native tooltip when
-     * the user hovers over the icon — an undesirable side-effect when using icon
+     * the user hovers over the icon - an undesirable side-effect when using icon
      * packs such as `@igniteui/material-icons-extended` that embed accessible
      * metadata inside every icon.
      *

package/components/icon/registry/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/icon/registry/types.ts"],"names":[],"mappings":"AAsBA,MAAM,CAAN,IAAY,UAIX;AAJD,WAAY,UAAU;IACpB,qDAAa,CAAA;IACb,2DAAgB,CAAA;IAChB,yEAAuB,CAAA;AACzB,CAAC,EAJW,UAAU,KAAV,UAAU,QAIrB","sourcesContent":["import type { Theme } from '#theming/types.js';\n\n// Exported internal types\n\n/** Icons or references organized by collection, then by name. */\nexport type IconsCollection<V> = Map<string, Map<string, V>>;\n\n/** Notified when the icon registry changes. Subscribers re-resolve their own state. */\nexport type IconCallback = () => void;\nexport type IconThemeKey = Theme | 'default';\n\nexport type SvgIcon = {\n  svg: string;\n  title?: string;\n};\n\nexport type IconReferencePair = {\n  alias: IconMeta;\n  target: IconMeta;\n  overwrite: boolean;\n};\n\nexport enum ActionType {\n  SyncState = 0,\n  RegisterIcon = 1,\n  UpdateIconReference = 2,\n}\n\n/** @hidden */\nexport interface BroadcastIconsChangeMessage {\n  actionType: ActionType;\n  collections?: IconsCollection<SvgIcon>;\n  references?: IconsCollection<IconMeta>;\n  origin?: string;\n}\n\n// Exported public types\n\n/** Identifies a registered icon by its name and the collection it belongs to. */\nexport interface IconMeta {\n  /** The name identifier of the icon in the collection. */\n  name: string;\n  /** The name of the collection the icon is registered in. */\n  collection: string;\n  /** @internal Internal use only. */\n  external?: boolean;\n}\n\n/**\n * Options for registering an SVG icon.\n *\n * @remarks\n * Can be passed as the third argument to `registerIcon` or `registerIconFromText`\n * in place of a plain collection string, giving you control over both the\n * target collection and SVG metadata stripping in a single, named-parameter call.\n *\n * @example:\n * ```typescript\n * registerIconFromText('home', svg, { collection: 'my-collection', stripMeta: true });\n * ```\n */\nexport interface RegisterIconOptions {\n  /**\n   * The collection to register the icon in.\n   * @default 'default'\n   */\n  collection?: string;\n\n  /**\n   * Whether to strip SVG meta elements (`<title>` and `<desc>`) from the icon\n   * before storing it.\n   *\n   * @remarks\n   * SVG `<title>` elements cause the browser to display a native tooltip when\n   * the user hovers over the icon — an undesirable side-effect when using icon\n   * packs such as `@igniteui/material-icons-extended` that embed accessible\n   * metadata inside every icon.\n   *\n   * When `stripMeta` is `true`:\n   * - The `<title>` and `<desc>` child elements are removed from the stored SVG.\n   * - Any `aria-labelledby` / `aria-describedby` references on the root\n   *   `<svg>` element that pointed to the stripped elements' IDs are cleaned up\n   *   so the resulting markup contains no dangling ARIA references.\n   * - The **title text** is still captured and stored as `SvgIcon.title`, which\n   *   the icon component continues to expose as its host `aria-label`.\n   *   Accessibility is therefore preserved at the component level while the\n   *   browser tooltip is suppressed at the SVG level.\n   *\n   * @default false\n   */\n  stripMeta?: boolean;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/icon/registry/types.ts"],"names":[],"mappings":"AAsBA,MAAM,CAAN,IAAY,UAIX;AAJD,WAAY,UAAU;IACpB,qDAAa,CAAA;IACb,2DAAgB,CAAA;IAChB,yEAAuB,CAAA;AACzB,CAAC,EAJW,UAAU,KAAV,UAAU,QAIrB","sourcesContent":["import type { Theme } from '#theming/types.js';\n\n// Exported internal types\n\n/** Icons or references organized by collection, then by name. */\nexport type IconsCollection<V> = Map<string, Map<string, V>>;\n\n/** Notified when the icon registry changes. Subscribers re-resolve their own state. */\nexport type IconCallback = () => void;\nexport type IconThemeKey = Theme | 'default';\n\nexport type SvgIcon = {\n  svg: string;\n  title?: string;\n};\n\nexport type IconReferencePair = {\n  alias: IconMeta;\n  target: IconMeta;\n  overwrite: boolean;\n};\n\nexport enum ActionType {\n  SyncState = 0,\n  RegisterIcon = 1,\n  UpdateIconReference = 2,\n}\n\n/** @hidden */\nexport interface BroadcastIconsChangeMessage {\n  actionType: ActionType;\n  collections?: IconsCollection<SvgIcon>;\n  references?: IconsCollection<IconMeta>;\n  origin?: string;\n}\n\n// Exported public types\n\n/** Identifies a registered icon by its name and the collection it belongs to. */\nexport interface IconMeta {\n  /** The name identifier of the icon in the collection. */\n  name: string;\n  /** The name of the collection the icon is registered in. */\n  collection: string;\n  /** @internal Internal use only. */\n  external?: boolean;\n}\n\n/**\n * Options for registering an SVG icon.\n *\n * @remarks\n * Can be passed as the third argument to `registerIcon` or `registerIconFromText`\n * in place of a plain collection string, giving you control over both the\n * target collection and SVG metadata stripping in a single, named-parameter call.\n *\n * @example:\n * ```typescript\n * registerIconFromText('home', svg, { collection: 'my-collection', stripMeta: true });\n * ```\n */\nexport interface RegisterIconOptions {\n  /**\n   * The collection to register the icon in.\n   * @default 'default'\n   */\n  collection?: string;\n\n  /**\n   * Whether to strip SVG meta elements (`<title>` and `<desc>`) from the icon\n   * before storing it.\n   *\n   * @remarks\n   * SVG `<title>` elements cause the browser to display a native tooltip when\n   * the user hovers over the icon - an undesirable side-effect when using icon\n   * packs such as `@igniteui/material-icons-extended` that embed accessible\n   * metadata inside every icon.\n   *\n   * When `stripMeta` is `true`:\n   * - The `<title>` and `<desc>` child elements are removed from the stored SVG.\n   * - Any `aria-labelledby` / `aria-describedby` references on the root\n   *   `<svg>` element that pointed to the stripped elements' IDs are cleaned up\n   *   so the resulting markup contains no dangling ARIA references.\n   * - The **title text** is still captured and stored as `SvgIcon.title`, which\n   *   the icon component continues to expose as its host `aria-label`.\n   *   Accessibility is therefore preserved at the component level while the\n   *   browser tooltip is suppressed at the SVG level.\n   *\n   * @default false\n   */\n  stripMeta?: boolean;\n}\n"]}

package/components/input/input.d.ts

@@ -33,17 +33,13 @@ import { IgcInputBaseComponent } from './input-base.js';
 export default class IgcInputComponent extends IgcInputBaseComponent {
     static readonly tagName = "igc-input";
     static styles: import("lit").CSSResult[];
+    /** Shared config for the constraint properties - a change revalidates. */
+    private static readonly _revalidate;
     static register(): void;
     protected readonly _themes: import("#theming/theming-controller.js").ThemingController;
-    protected readonly _slots: import("#internals/controllers/slot.js").SlotController<"invalid" | "prefix" | "[default]" | "suffix" | "helper-text" | "value-missing" | "too-long" | "too-short" | "custom-error" | "range-overflow" | "range-underflow" | "type-mismatch" | "pattern-mismatch" | "step-mismatch">;
+    protected readonly _slots: import("#internals/controllers/slot.js").SlotController<"invalid" | "prefix" | "helper-text" | "[default]" | "suffix" | "value-missing" | "too-long" | "too-short" | "custom-error" | "range-overflow" | "range-underflow" | "type-mismatch" | "pattern-mismatch" | "step-mismatch">;
     protected readonly _formValue: import("#internals/mixins/forms/form-value.js").FormValue<string>;
     protected get __validators(): import("../../internals/validators.js").Validator<IgcInputComponent>[];
-    private _min?;
-    private _max?;
-    private _minLength?;
-    private _maxLength?;
-    private _pattern?;
-    private _step?;
     /**
      * The value of the control.
      * @attr
@@ -72,38 +68,32 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
      * The regular expression the value is validated against.
      * @attr
      */
-    set pattern(value: string | undefined);
-    get pattern(): string | undefined;
+    pattern?: string;
     /**
      * The minimum string length required by the control.
      * @attr minlength
      */
-    set minLength(value: number | undefined);
-    get minLength(): number | undefined;
+    minLength?: number;
     /**
      * The maximum string length of the control.
      * @attr maxlength
      */
-    set maxLength(value: number | undefined);
-    get maxLength(): number | undefined;
+    maxLength?: number;
     /**
      * The minimum value the control accepts.
      * @attr
      */
-    set min(value: number | undefined);
-    get min(): number | undefined;
+    min?: number;
     /**
      * The maximum value the control accepts.
      * @attr
      */
-    set max(value: number | undefined);
-    get max(): number | undefined;
+    max?: number;
     /**
      * The granularity the value must adhere to.
      * @attr
      */
-    set step(value: number | undefined);
-    get step(): number | undefined;
+    step?: number;
     /**
      * Whether the control should receive focus automatically.
      * @attr

package/components/input/input.js

@@ -10,6 +10,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { ariaBindings } from '#internals/controllers/aria-projection.js';
 import { addSlotController, setSlots } from '#internals/controllers/slot.js';
+import { coercedProperty, } from '#internals/decorators/coerced-property.js';
 import { registerComponent } from '#internals/definitions/register.js';
 import { createFormValueState } from '#internals/mixins/forms/form-value.js';
 import { partMap } from '#internals/part-map.js';
@@ -34,10 +35,19 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
         });
         this.type = 'text';
         this.readOnly = false;
+        this.pattern = undefined;
+        this.minLength = undefined;
+        this.maxLength = undefined;
+        this.min = undefined;
+        this.max = undefined;
+        this.step = undefined;
         this.validateOnly = false;
     }
     static { this.tagName = 'igc-input'; }
     static { this.styles = [styles, shared]; }
+    static { this._revalidate = {
+        onChange: ({ host }) => host._validate(),
+    }; }
     static register() {
         registerComponent(IgcInputComponent, IgcValidationContainerComponent);
     }
@@ -50,48 +60,6 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
     get value() {
         return this._formValue.value;
     }
-    set pattern(value) {
-        this._pattern = value;
-        this._validate();
-    }
-    get pattern() {
-        return this._pattern;
-    }
-    set minLength(value) {
-        this._minLength = value;
-        this._validate();
-    }
-    get minLength() {
-        return this._minLength;
-    }
-    set maxLength(value) {
-        this._maxLength = value;
-        this._validate();
-    }
-    get maxLength() {
-        return this._maxLength;
-    }
-    set min(value) {
-        this._min = value;
-        this._validate();
-    }
-    get min() {
-        return this._min;
-    }
-    set max(value) {
-        this._max = value;
-        this._validate();
-    }
-    get max() {
-        return this._max;
-    }
-    set step(value) {
-        this._step = value;
-        this._validate();
-    }
-    get step() {
-        return this._step;
-    }
     setRangeText(replacement, start, end, selectMode = 'preserve') {
         this._input?.setRangeText(replacement, start, end, selectMode);
         this.value = this._input?.value ?? '';
@@ -108,14 +76,10 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
         this.value = this._input?.value ?? '';
     }
     _handleInput() {
-        this._setTouchedState();
-        this.value = this._input?.value ?? '';
-        this.emitEvent('igcInput', { detail: this.value });
+        this._commitValue(this._input?.value ?? '', 'igcInput');
     }
     _handleChange() {
-        this._setTouchedState();
-        this.value = this._input?.value ?? '';
-        this.emitEvent('igcChange', { detail: this.value });
+        this._commitValue(this._input?.value ?? '', 'igcChange');
     }
     _renderInput() {
         const hasNegativeTabIndex = this.getAttribute('tabindex') === '-1';
@@ -162,23 +126,29 @@ __decorate([
     property({ attribute: 'inputmode' })
 ], IgcInputComponent.prototype, "inputMode", void 0);
 __decorate([
-    property()
-], IgcInputComponent.prototype, "pattern", null);
+    property(),
+    coercedProperty(IgcInputComponent._revalidate)
+], IgcInputComponent.prototype, "pattern", void 0);
 __decorate([
-    property({ type: Number, attribute: 'minlength' })
-], IgcInputComponent.prototype, "minLength", null);
+    property({ type: Number, attribute: 'minlength' }),
+    coercedProperty(IgcInputComponent._revalidate)
+], IgcInputComponent.prototype, "minLength", void 0);
 __decorate([
-    property({ type: Number, attribute: 'maxlength' })
-], IgcInputComponent.prototype, "maxLength", null);
+    property({ type: Number, attribute: 'maxlength' }),
+    coercedProperty(IgcInputComponent._revalidate)
+], IgcInputComponent.prototype, "maxLength", void 0);
 __decorate([
-    property({ type: Number })
-], IgcInputComponent.prototype, "min", null);
+    property({ type: Number }),
+    coercedProperty(IgcInputComponent._revalidate)
+], IgcInputComponent.prototype, "min", void 0);
 __decorate([
-    property({ type: Number })
-], IgcInputComponent.prototype, "max", null);
+    property({ type: Number }),
+    coercedProperty(IgcInputComponent._revalidate)
+], IgcInputComponent.prototype, "max", void 0);
 __decorate([
-    property({ type: Number })
-], IgcInputComponent.prototype, "step", null);
+    property({ type: Number }),
+    coercedProperty(IgcInputComponent._revalidate)
+], IgcInputComponent.prototype, "step", void 0);
 __decorate([
     property({ type: Boolean })
 ], IgcInputComponent.prototype, "autofocus", 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';\nimport { ariaBindings } from '#internals/controllers/aria-projection.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { createFormValueState } from '#internals/mixins/forms/form-value.js';\nimport { partMap } from '#internals/part-map.js';\nimport { bindIf } from '#internals/utils/lit.js';\nimport { addThemingController } from '#theming/theming-controller.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 * A highly customizable single-line text field for entering and editing data,\n * with support for prefix/suffix content, helper text, form integration, and built-in validation.\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 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   * A hint to the browser for which virtual keyboard layout to display.\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 regular expression the value is validated against.\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 minimum value the control accepts.\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 maximum value the control accepts.\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 granularity the value must adhere to.\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   * Whether the control should receive focus automatically.\n   * @attr\n   */\n  @property({ type: Boolean })\n  public override autofocus!: boolean;\n\n  /**\n   * A hint for the browser on how to autofill 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\n    return html`\n      <input\n        ${ariaBindings(this._ariaTarget.resolveBindings())}\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        @keydown=${this._handleEnterKeydown}\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 { ariaBindings } from '#internals/controllers/aria-projection.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport {\n  coercedProperty,\n  type CoercedPropertyConfig,\n} from '#internals/decorators/coerced-property.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { createFormValueState } from '#internals/mixins/forms/form-value.js';\nimport { partMap } from '#internals/part-map.js';\nimport { bindIf } from '#internals/utils/lit.js';\nimport { addThemingController } from '#theming/theming-controller.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 * A highly customizable single-line text field for entering and editing data,\n * with support for prefix/suffix content, helper text, form integration, and built-in validation.\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  /** Shared config for the constraint properties - a change revalidates. */\n  private static readonly _revalidate: CoercedPropertyConfig<\n    unknown,\n    IgcInputComponent\n  > = {\n    onChange: ({ host }) => host._validate(),\n  };\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  /* @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 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   * A hint to the browser for which virtual keyboard layout to display.\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 regular expression the value is validated against.\n   * @attr\n   */\n  @property()\n  @coercedProperty(IgcInputComponent._revalidate)\n  public pattern?: string = undefined;\n\n  /**\n   * The minimum string length required by the control.\n   * @attr minlength\n   */\n  @property({ type: Number, attribute: 'minlength' })\n  @coercedProperty(IgcInputComponent._revalidate)\n  public minLength?: number = undefined;\n\n  /**\n   * The maximum string length of the control.\n   * @attr maxlength\n   */\n  @property({ type: Number, attribute: 'maxlength' })\n  @coercedProperty(IgcInputComponent._revalidate)\n  public maxLength?: number = undefined;\n\n  /**\n   * The minimum value the control accepts.\n   * @attr\n   */\n  @property({ type: Number })\n  @coercedProperty(IgcInputComponent._revalidate)\n  public min?: number = undefined;\n\n  /**\n   * The maximum value the control accepts.\n   * @attr\n   */\n  @property({ type: Number })\n  @coercedProperty(IgcInputComponent._revalidate)\n  public max?: number = undefined;\n\n  /**\n   * The granularity the value must adhere to.\n   * @attr\n   */\n  @property({ type: Number })\n  @coercedProperty(IgcInputComponent._revalidate)\n  public step?: number = undefined;\n\n  /**\n   * Whether the control should receive focus automatically.\n   * @attr\n   */\n  @property({ type: Boolean })\n  public override autofocus!: boolean;\n\n  /**\n   * A hint for the browser on how to autofill 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._commitValue(this._input?.value ?? '', 'igcInput');\n  }\n\n  private _handleChange(): void {\n    this._commitValue(this._input?.value ?? '', 'igcChange');\n  }\n\n  protected _renderInput() {\n    const hasNegativeTabIndex = this.getAttribute('tabindex') === '-1';\n\n    return html`\n      <input\n        ${ariaBindings(this._ariaTarget.resolveBindings())}\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        @keydown=${this._handleEnterKeydown}\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.d.ts

@@ -35,7 +35,7 @@ export default class IgcMaskInputComponent extends IgcMaskInputComponent_base {
     protected readonly _parser: MaskParser;
     protected get __validators(): import("../../internals/validators.js").Validator<IgcMaskInputComponent>[];
     protected readonly _themes: import("#theming/theming-controller.js").ThemingController;
-    protected readonly _slots: import("#internals/controllers/slot.js").SlotController<"invalid" | "prefix" | "[default]" | "suffix" | "helper-text" | "value-missing" | "custom-error" | "bad-input">;
+    protected readonly _slots: import("#internals/controllers/slot.js").SlotController<"invalid" | "prefix" | "helper-text" | "[default]" | "suffix" | "value-missing" | "custom-error" | "bad-input">;
     protected readonly _formValue: import("#internals/mixins/forms/form-value.js").FormValue<string>;
     protected get _isRawMode(): boolean;
     /**

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

@@ -107,8 +107,7 @@ export default class IgcMaskInputComponent extends MaskBehaviorMixin(IgcInputBas
         super._handleBlur();
     }
     _handleChange() {
-        this._setTouchedState();
-        this.emitEvent('igcChange', { detail: this.value });
+        this._emitTouchedEvent('igcChange', { detail: this.value });
     }
     _commitMaskedValue(value) {
         this._maskedValue = value;
@@ -118,8 +117,7 @@ export default class IgcMaskInputComponent extends MaskBehaviorMixin(IgcInputBas
         }
     }
     _emitInputEvent() {
-        this._setTouchedState();
-        this.emitEvent('igcInput', { detail: this.value });
+        this._emitTouchedEvent('igcInput', { detail: this.value });
     }
     _syncValueFromMask() {
         this.value = this._parser.parse(this._maskedValue);