igniteui-webcomponents 4.11.0 → 5.0.0-rc.0

package/components/icon/registry/default-map.d.ts

@@ -0,0 +1,12 @@
+export declare class DefaultMap<T, U> {
+    private _defaultValue;
+    private _map;
+    constructor(defaultValue: () => U);
+    getOrCreate(key: T): U;
+    get(key: T): U | undefined;
+    set(key: T, value: U): void;
+    has(key: T): boolean;
+    toMap(): Map<T, U>;
+    entries(): IterableIterator<[T, U]>;
+}
+export declare function createIconDefaultMap<T, U>(): DefaultMap<T, Map<T, U>>;

package/components/icon/registry/default-map.js

@@ -0,0 +1,31 @@
+export class DefaultMap {
+    constructor(defaultValue) {
+        this._map = new Map();
+        this._defaultValue = defaultValue;
+    }
+    getOrCreate(key) {
+        if (!this._map.has(key)) {
+            this._map.set(key, this._defaultValue());
+        }
+        return this._map.get(key);
+    }
+    get(key) {
+        return this._map.get(key);
+    }
+    set(key, value) {
+        this._map.set(key, value);
+    }
+    has(key) {
+        return this._map.has(key);
+    }
+    toMap() {
+        return this._map;
+    }
+    entries() {
+        return this._map.entries();
+    }
+}
+export function createIconDefaultMap() {
+    return new DefaultMap(() => new Map());
+}
+//# sourceMappingURL=default-map.js.map

package/components/icon/registry/default-map.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-map.js","sourceRoot":"","sources":["../../../../src/components/icon/registry/default-map.ts"],"names":[],"mappings":"AACA,MAAM,OAAO,UAAU;IAIrB,YAAY,YAAqB;QAFzB,SAAI,GAAG,IAAI,GAAG,EAAQ,CAAC;QAG7B,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC;IACpC,CAAC;IAEM,WAAW,CAAC,GAAM;QACvB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;QAC3C,CAAC;QAED,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAM,CAAC;IACjC,CAAC;IAEM,GAAG,CAAC,GAAM;QACf,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC5B,CAAC;IAEM,GAAG,CAAC,GAAM,EAAE,KAAQ;QACzB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEM,GAAG,CAAC,GAAM;QACf,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC5B,CAAC;IAEM,KAAK;QACV,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAEM,OAAO;QACZ,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;IAC7B,CAAC;CACF;AAED,MAAM,UAAU,oBAAoB;IAClC,OAAO,IAAI,UAAU,CAAe,GAAG,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC;AACvD,CAAC","sourcesContent":["/* blazorSuppress */\nexport class DefaultMap<T, U> {\n  private _defaultValue: () => U;\n  private _map = new Map<T, U>();\n\n  constructor(defaultValue: () => U) {\n    this._defaultValue = defaultValue;\n  }\n\n  public getOrCreate(key: T) {\n    if (!this._map.has(key)) {\n      this._map.set(key, this._defaultValue());\n    }\n\n    return this._map.get(key) as U;\n  }\n\n  public get(key: T) {\n    return this._map.get(key);\n  }\n\n  public set(key: T, value: U) {\n    this._map.set(key, value);\n  }\n\n  public has(key: T) {\n    return this._map.has(key);\n  }\n\n  public toMap() {\n    return this._map;\n  }\n\n  public entries() {\n    return this._map.entries();\n  }\n}\n\nexport function createIconDefaultMap<T, U>() {\n  return new DefaultMap<T, Map<T, U>>(() => new Map());\n}\n"]}

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

@@ -0,0 +1,6 @@
+import type { SvgIcon } from './types.js';
+export declare class SvgIconParser {
+    private _parser;
+    constructor();
+    parse(svgString: string): SvgIcon;
+}

package/components/icon/registry/parser.js

@@ -0,0 +1,21 @@
+export class SvgIconParser {
+    constructor() {
+        this._parser = new DOMParser();
+    }
+    parse(svgString) {
+        const root = this._parser.parseFromString(svgString, 'image/svg+xml');
+        const svg = root.querySelector('svg');
+        const error = root.querySelector('parsererror');
+        if (error || !svg) {
+            throw new Error('SVG element not found or malformed SVG string.');
+        }
+        const title = svg.querySelector('title')?.textContent ?? '';
+        svg.setAttribute('fit', '');
+        svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+        return {
+            svg: svg.outerHTML,
+            title,
+        };
+    }
+}
+//# sourceMappingURL=parser.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"parser.js","sourceRoot":"","sources":["../../../../src/components/icon/registry/parser.ts"],"names":[],"mappings":"AAGA,MAAM,OAAO,aAAa;IAGxB;QACE,IAAI,CAAC,OAAO,GAAG,IAAI,SAAS,EAAE,CAAC;IACjC,CAAC;IAEM,KAAK,CAAC,SAAiB;QAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;QACtE,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACtC,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QAEhD,IAAI,KAAK,IAAI,CAAC,GAAG,EAAE,CAAC;YAClB,MAAM,IAAI,KAAK,CAAC,gDAAgD,CAAC,CAAC;QACpE,CAAC;QAED,MAAM,KAAK,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,WAAW,IAAI,EAAE,CAAC;QAE5D,GAAG,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QAC5B,GAAG,CAAC,YAAY,CAAC,qBAAqB,EAAE,eAAe,CAAC,CAAC;QAEzD,OAAO;YACL,GAAG,EAAE,GAAG,CAAC,SAAS;YAClB,KAAK;SACN,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { SvgIcon } from './types.js';\n\n/* blazorSuppress */\nexport class SvgIconParser {\n  private _parser: DOMParser;\n\n  constructor() {\n    this._parser = new DOMParser();\n  }\n\n  public parse(svgString: string): SvgIcon {\n    const root = this._parser.parseFromString(svgString, 'image/svg+xml');\n    const svg = root.querySelector('svg');\n    const error = root.querySelector('parsererror');\n\n    if (error || !svg) {\n      throw new Error('SVG element not found or malformed SVG string.');\n    }\n\n    const title = svg.querySelector('title')?.textContent ?? '';\n\n    svg.setAttribute('fit', '');\n    svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');\n\n    return {\n      svg: svg.outerHTML,\n      title,\n    };\n  }\n}\n"]}

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

@@ -0,0 +1,34 @@
+import type { Theme } from '../../../theming/types.js';
+import type { DefaultMap } from './default-map.js';
+export type IconsCollection<T> = DefaultMap<string, Map<string, T>>;
+export type IconCallback = (name: string, collection: string) => void;
+export type IconThemeKey = Theme | 'default';
+export type SvgIcon = {
+    svg: string;
+    title?: string;
+};
+export type IconReference = {
+    alias: IconMeta;
+    target: Map<IconThemeKey, IconMeta>;
+};
+export type IconReferencePair = {
+    alias: IconMeta;
+    target: IconMeta;
+    overwrite: boolean;
+};
+export declare enum ActionType {
+    SyncState = 0,
+    RegisterIcon = 1,
+    UpdateIconReference = 2
+}
+/** @ignore */
+export interface BroadcastIconsChangeMessage {
+    actionType: ActionType;
+    collections?: Map<string, Map<string, SvgIcon>>;
+    references?: Map<string, Map<string, IconMeta>>;
+}
+export interface IconMeta {
+    name: string;
+    collection: string;
+    external?: boolean;
+}

package/components/icon/registry/types.js

@@ -0,0 +1,7 @@
+export var ActionType;
+(function (ActionType) {
+    ActionType[ActionType["SyncState"] = 0] = "SyncState";
+    ActionType[ActionType["RegisterIcon"] = 1] = "RegisterIcon";
+    ActionType[ActionType["UpdateIconReference"] = 2] = "UpdateIconReference";
+})(ActionType || (ActionType = {}));
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/icon/registry/types.ts"],"names":[],"mappings":"AA0BA,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';\nimport type { DefaultMap } from './default-map.js';\n\n// Exported internal types\n\nexport type IconsCollection<T> = DefaultMap<string, Map<string, T>>;\n\nexport type IconCallback = (name: string, collection: string) => void;\nexport type IconThemeKey = Theme | 'default';\n\nexport type SvgIcon = {\n  svg: string;\n  title?: string;\n};\n\nexport type IconReference = {\n  alias: IconMeta;\n  target: Map<IconThemeKey, IconMeta>;\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/** @ignore */\nexport interface BroadcastIconsChangeMessage {\n  actionType: ActionType;\n  collections?: Map<string, Map<string, SvgIcon>>;\n  references?: Map<string, Map<string, IconMeta>>;\n}\n\n// Exported public types\n\nexport interface IconMeta {\n  name: string;\n  collection: string;\n  external?: boolean;\n}\n"]}

package/components/icon/themes/icon.base.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size);scrollbar-color:var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background)}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size);height:var(--ig-scrollbar-size);background:var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background)}:host([hidden]),[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}igc-icon,svg{width:1em;height:1em}:host([mirrored]){-webkit-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scaleX(-1)}`;
+export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size);scrollbar-color:var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size);height:var(--ig-scrollbar-size);background:var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background)}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}igc-icon,svg{width:1em;height:1em}:host([mirrored]){-webkit-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scaleX(-1)}`;
 //# sourceMappingURL=icon.base.css.js.map

package/components/icon/themes/icon.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.base.css.js","sourceRoot":"","sources":["../../../../src/components/icon/themes/icon.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,msCAAmsC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size);scrollbar-color:var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background)}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size);height:var(--ig-scrollbar-size);background:var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background)}:host([hidden]),[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}igc-icon,svg{width:1em;height:1em}:host([mirrored]){-webkit-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scaleX(-1)}`;\n"]}
+{"version":3,"file":"icon.base.css.js","sourceRoot":"","sources":["../../../../src/components/icon/themes/icon.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,msCAAmsC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size);scrollbar-color:var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size);height:var(--ig-scrollbar-size);background:var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background)}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}igc-icon,svg{width:1em;height:1em}:host([mirrored]){-webkit-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scaleX(-1)}`;\n"]}

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

@@ -1,15 +1,14 @@
 import { LitElement, type TemplateResult } from 'lit';
-import { themeSymbol } from '../../theming/theming-decorator.js';
 import type { Constructor } from '../common/mixins/constructor.js';
+import type { RangeTextSelectMode, SelectionRangeDirection } from '../types.js';
 export interface IgcInputEventMap {
     igcInput: CustomEvent<string>;
     igcChange: CustomEvent<string>;
-    igcFocus: CustomEvent<void>;
-    igcBlur: CustomEvent<void>;
+    focus: FocusEvent;
+    blur: FocusEvent;
 }
-declare const IgcInputBaseComponent_base: Constructor<import("../common/mixins/form-associated-required.js").FormRequiredInterface & import("../common/mixins/form-associated.js").FormAssociatedElementInterface> & Constructor<import("../common/mixins/sizable.js").SizableInterface> & Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcInputEventMap>> & Constructor<LitElement>;
+declare const IgcInputBaseComponent_base: Constructor<import("../common/mixins/form-associated-required.js").FormRequiredInterface & import("../common/mixins/form-associated.js").FormAssociatedElementInterface> & Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcInputEventMap>> & Constructor<LitElement>;
 export declare abstract class IgcInputBaseComponent extends IgcInputBaseComponent_base {
-    private readonly [themeSymbol];
     protected static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -25,6 +24,7 @@ export declare abstract class IgcInputBaseComponent extends IgcInputBaseComponen
     protected prefixes: Array<HTMLElement>;
     protected suffixes: Array<HTMLElement>;
     protected helperText: Array<HTMLElement>;
+    protected get _isMaterial(): boolean;
     /**
      * Whether the control will have outlined appearance.
      * @attr
@@ -35,14 +35,6 @@ export declare abstract class IgcInputBaseComponent extends IgcInputBaseComponen
      * @attr readonly
      */
     readOnly: boolean;
-    /**
-     * Makes the control a readonly field.
-     * @prop
-     *
-     * @deprecated since v4.4.0. Use the `readOnly` property instead.
-     */
-    set readonly(value: boolean);
-    get readonly(): boolean;
     /**
      * The placeholder attribute of the control.
      * @attr
@@ -53,27 +45,22 @@ export declare abstract class IgcInputBaseComponent extends IgcInputBaseComponen
      * @attr
      */
     label: string;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
     /** Sets focus on the control. */
     focus(options?: FocusOptions): void;
     /** Removes focus from the control. */
     blur(): void;
     protected abstract renderInput(): TemplateResult;
-    protected handleSlotChange: () => void;
     protected resolvePartNames(base: string): {
         [x: string]: boolean;
         prefixed: boolean;
         suffixed: boolean;
         filled: boolean;
     };
-    protected handleFocus(): void;
-    protected handleBlur(): void;
     /** Sets the text selection range of the control */
-    setSelectionRange(start: number, end: number, direction?: 'backward' | 'forward' | 'none'): void;
+    setSelectionRange(start: number, end: number, direction?: SelectionRangeDirection): void;
     /** Replaces the selected text in the input. */
-    setRangeText(replacement: string, start: number, end: number, selectMode?: 'select' | 'start' | 'end' | 'preserve'): void;
+    setRangeText(replacement: string, start: number, end: number, selectMode?: RangeTextSelectMode): void;
     private renderPrefix;
     private renderSuffix;
     private renderLabel;

package/components/input/input-base.js

@@ -7,38 +7,28 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var IgcInputBaseComponent_1;
 import { LitElement, html, nothing } from 'lit';
 import { property, query, queryAssignedElements } from 'lit/decorators.js';
-import { themeSymbol, themes } from '../../theming/theming-decorator.js';
-import { alternateName } from '../common/decorators/alternateName.js';
+import { getThemeController, themes } from '../../theming/theming-decorator.js';
 import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedRequiredMixin } from '../common/mixins/form-associated-required.js';
-import { SizableMixin } from '../common/mixins/sizable.js';
 import { createCounter, partNameMap } from '../common/util.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';
-let IgcInputBaseComponent = IgcInputBaseComponent_1 = class IgcInputBaseComponent extends FormAssociatedRequiredMixin(SizableMixin(EventEmitterMixin(LitElement))) {
-    set readonly(value) {
-        this.readOnly = value;
-    }
-    get readonly() {
-        return this.readOnly;
-    }
+let IgcInputBaseComponent = IgcInputBaseComponent_1 = class IgcInputBaseComponent extends FormAssociatedRequiredMixin(EventEmitterMixin(LitElement)) {
     constructor() {
-        super();
+        super(...arguments);
         this.inputId = `input-${IgcInputBaseComponent_1.increment()}`;
         this.outlined = false;
         this.readOnly = false;
-        this.handleSlotChange = () => this.requestUpdate();
-        this.size = 'medium';
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.shadowRoot.addEventListener('slotchange', this.handleSlotChange);
+    get _isMaterial() {
+        return getThemeController(this)?.theme === 'material';
     }
-    disconnectedCallback() {
-        this.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
-        super.disconnectedCallback();
+    createRenderRoot() {
+        const root = super.createRenderRoot();
+        root.addEventListener('slotchange', () => this.requestUpdate());
+        return root;
     }
     focus(options) {
         this.input.focus(options);
@@ -54,12 +44,6 @@ let IgcInputBaseComponent = IgcInputBaseComponent_1 = class IgcInputBaseComponen
             filled: !!this.value,
         };
     }
-    handleFocus() {
-        this.emitEvent('igcFocus');
-    }
-    handleBlur() {
-        this.emitEvent('igcBlur');
-    }
     setSelectionRange(start, end, direction = 'none') {
         this.input.setSelectionRange(start, end, direction);
     }
@@ -110,11 +94,7 @@ let IgcInputBaseComponent = IgcInputBaseComponent_1 = class IgcInputBaseComponen
       </div>`;
     }
     render() {
-        return html `
-      ${this[themeSymbol] === 'material'
-            ? this.renderMaterial()
-            : this.renderStandard()}
-    `;
+        return this._isMaterial ? this.renderMaterial() : this.renderStandard();
     }
 };
 IgcInputBaseComponent.shadowRootOptions = {
@@ -141,24 +121,15 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'readonly' })
 ], IgcInputBaseComponent.prototype, "readOnly", void 0);
-__decorate([
-    property({ attribute: false })
-], IgcInputBaseComponent.prototype, "readonly", null);
 __decorate([
     property()
 ], IgcInputBaseComponent.prototype, "placeholder", void 0);
 __decorate([
     property()
 ], IgcInputBaseComponent.prototype, "label", void 0);
-__decorate([
-    alternateName('focusComponent')
-], IgcInputBaseComponent.prototype, "focus", null);
-__decorate([
-    alternateName('blurComponent')
-], IgcInputBaseComponent.prototype, "blur", null);
 IgcInputBaseComponent = IgcInputBaseComponent_1 = __decorate([
-    themes(all, true),
-    blazorDeepImport
+    blazorDeepImport,
+    themes(all, { exposeController: true })
 ], IgcInputBaseComponent);
 export { IgcInputBaseComponent };
 //# sourceMappingURL=input-base.js.map

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 { LitElement, type TemplateResult, html, nothing } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { themeSymbol, themes } from '../../theming/theming-decorator.js';\nimport type { Theme } from '../../theming/types.js';\nimport { alternateName } from '../common/decorators/alternateName.js';\nimport { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { FormAssociatedRequiredMixin } from '../common/mixins/form-associated-required.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\nimport { createCounter, partNameMap } from '../common/util.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 IgcInputEventMap {\n  /* alternateName: inputOcurred */\n  igcInput: CustomEvent<string>;\n  /* blazorSuppress */\n  igcChange: CustomEvent<string>;\n  igcFocus: CustomEvent<void>;\n  igcBlur: CustomEvent<void>;\n}\n\n@themes(all, true)\n@blazorDeepImport\nexport abstract class IgcInputBaseComponent extends FormAssociatedRequiredMixin(\n  SizableMixin(\n    EventEmitterMixin<IgcInputEventMap, Constructor<LitElement>>(LitElement)\n  )\n) {\n  private declare readonly [themeSymbol]: Theme;\n\n  protected static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  public static styles = [styles, shared];\n  private static readonly increment = createCounter();\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: 'prefix' })\n  protected prefixes!: Array<HTMLElement>;\n\n  @queryAssignedElements({ slot: 'suffix' })\n  protected suffixes!: Array<HTMLElement>;\n\n  @queryAssignedElements({ slot: 'helper-text' })\n  protected helperText!: 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  /* blazorCSSuppress */\n  /**\n   * Makes the control a readonly field.\n   * @prop\n   *\n   * @deprecated since v4.4.0. Use the `readOnly` property instead.\n   */\n  @property({ attribute: false })\n  public set readonly(value: boolean) {\n    this.readOnly = value;\n  }\n\n  public get readonly() {\n    return this.readOnly;\n  }\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  constructor() {\n    super();\n    this.size = 'medium';\n  }\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    this.shadowRoot!.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  public override disconnectedCallback() {\n    this.shadowRoot!.removeEventListener('slotchange', this.handleSlotChange);\n    super.disconnectedCallback();\n  }\n\n  /** Sets focus on the control. */\n  @alternateName('focusComponent')\n  public override focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the control. */\n  @alternateName('blurComponent')\n  public override blur() {\n    this.input.blur();\n  }\n\n  protected abstract renderInput(): TemplateResult;\n  protected handleSlotChange = () => this.requestUpdate();\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 handleFocus() {\n    this.emitEvent('igcFocus');\n  }\n\n  protected handleBlur() {\n    this.emitEvent('igcBlur');\n  }\n\n  /** Sets the text selection range of the control */\n  public setSelectionRange(\n    start: number,\n    end: number,\n    direction: 'backward' | 'forward' | 'none' = '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: 'select' | 'start' | 'end' | 'preserve' = '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=\"${partNameMap({\n          ...this.resolvePartNames('container'),\n          labelled: this.label,\n        })}\"\n      >\n        <div part=\"start\">${this.renderPrefix()}</div>\n        ${this.renderInput()}\n        <div part=\"notch\">${this.renderLabel()}</div>\n        <div part=\"filler\"></div>\n        <div part=\"end\">${this.renderSuffix()}</div>\n      </div>\n      <div part=\"helper-text\" .hidden=\"${this.helperText.length === 0}\">\n        <slot name=\"helper-text\"></slot>\n      </div>\n    `;\n  }\n\n  private renderStandard() {\n    return html`${this.renderLabel()}\n      <div part=\"${partNameMap(this.resolvePartNames('container'))}\">\n        ${this.renderPrefix()} ${this.renderInput()} ${this.renderSuffix()}\n      </div>\n      <div part=\"helper-text\" .hidden=\"${this.helperText.length === 0}\">\n        <slot name=\"helper-text\"></slot>\n      </div>`;\n  }\n\n  protected override render() {\n    return html`\n      ${this[themeSymbol] === 'material'\n        ? this.renderMaterial()\n        : this.renderStandard()}\n    `;\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 { LitElement, type TemplateResult, html, nothing } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { getThemeController, themes } from '../../theming/theming-decorator.js';\nimport { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { FormAssociatedRequiredMixin } from '../common/mixins/form-associated-required.js';\nimport { createCounter, partNameMap } from '../common/util.js';\nimport type { RangeTextSelectMode, SelectionRangeDirection } from '../types.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 IgcInputEventMap {\n  /* alternateName: inputOcurred */\n  igcInput: CustomEvent<string>;\n  /* blazorSuppress */\n  igcChange: CustomEvent<string>;\n  // For analyzer meta only:\n  focus: FocusEvent;\n  blur: FocusEvent;\n}\n\n@blazorDeepImport\n@themes(all, { exposeController: true })\nexport abstract class IgcInputBaseComponent extends FormAssociatedRequiredMixin(\n  EventEmitterMixin<IgcInputEventMap, Constructor<LitElement>>(LitElement)\n) {\n  protected static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  public static styles = [styles, shared];\n  private static readonly increment = createCounter();\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: 'prefix' })\n  protected prefixes!: Array<HTMLElement>;\n\n  @queryAssignedElements({ slot: 'suffix' })\n  protected suffixes!: Array<HTMLElement>;\n\n  @queryAssignedElements({ slot: 'helper-text' })\n  protected helperText!: Array<HTMLElement>;\n\n  protected get _isMaterial() {\n    return getThemeController(this)?.theme === 'material';\n  }\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 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  /** 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=\"${partNameMap({\n          ...this.resolvePartNames('container'),\n          labelled: this.label,\n        })}\"\n      >\n        <div part=\"start\">${this.renderPrefix()}</div>\n        ${this.renderInput()}\n        <div part=\"notch\">${this.renderLabel()}</div>\n        <div part=\"filler\"></div>\n        <div part=\"end\">${this.renderSuffix()}</div>\n      </div>\n      <div part=\"helper-text\" .hidden=\"${this.helperText.length === 0}\">\n        <slot name=\"helper-text\"></slot>\n      </div>\n    `;\n  }\n\n  private renderStandard() {\n    return html`${this.renderLabel()}\n      <div part=\"${partNameMap(this.resolvePartNames('container'))}\">\n        ${this.renderPrefix()} ${this.renderInput()} ${this.renderSuffix()}\n      </div>\n      <div part=\"helper-text\" .hidden=\"${this.helperText.length === 0}\">\n        <slot name=\"helper-text\"></slot>\n      </div>`;\n  }\n\n  protected override render() {\n    return this._isMaterial ? this.renderMaterial() : this.renderStandard();\n  }\n}\n"]}

package/components/input/input.d.ts

@@ -1,4 +1,4 @@
-import { type Validator } from '../common/validators.js';
+import type { RangeTextSelectMode } from '../types.js';
 import { IgcInputBaseComponent } from './input-base.js';
 /**
  * @element igc-input
@@ -9,8 +9,6 @@ import { IgcInputBaseComponent } from './input-base.js';
  *
  * @fires igcInput - Emitted when the control input receives user input.
  * @fires igcChange - Emitted when the control's checked state changes.
- * @fires igcFocus - Emitted when the control gains focus.
- * @fires igcBlur - Emitted when the control loses focus.
  *
  * @csspart container - The main wrapper that holds all main input elements.
  * @csspart input - The native input element.
@@ -23,7 +21,7 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
     static readonly tagName = "igc-input";
     static register(): void;
     private get isStringType();
-    protected validators: Validator<this>[];
+    protected get __validators(): import("../common/validators.js").Validator<IgcInputComponent>[];
     protected _value: string;
     /**
      * The value of the control.
@@ -36,14 +34,6 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
      * @attr
      */
     type: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
-    /**
-     * The input mode attribute of the control.
-     * @prop
-     *
-     * @deprecated since v4.10.0. Use `inputMode` property instead.
-     */
-    set inputmode(value: string);
-    get inputmode(): string;
     /**
      * The input mode attribute of the control.
      * See [relevant MDN article](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)
@@ -60,27 +50,11 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
      * @attr minlength
      */
     minLength: number;
-    /**
-     * The minlength attribute of the control.
-     * @prop
-     *
-     * @deprecated since v4.4.0. Use the `minLength` property instead.
-     */
-    set minlength(value: number);
-    get minlength(): number;
     /**
      * The maximum string length of the control.
      * @attr maxlength
      */
     maxLength: number;
-    /**
-     * The maxlength attribute of the control.
-     * @prop
-     *
-     * @deprecated since v4.4.0. Use the `maxLength` property instead.
-     */
-    set maxlength(value: number);
-    get maxlength(): number;
     /**
      * The min attribute of the control.
      * @attr
@@ -121,7 +95,7 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
     /** @hidden */
     connectedCallback(): void;
     /** Replaces the selected text in the input. */
-    setRangeText(replacement: string, start: number, end: number, selectMode?: 'select' | 'start' | 'end' | 'preserve'): void;
+    setRangeText(replacement: string, start: number, end: number, selectMode?: RangeTextSelectMode): void;
     /** Selects all text within the input. */
     select(): void;
     /** Increments the numeric value of the input by one or more steps. */

package/components/input/input.js

@@ -11,59 +11,11 @@ import { live } from 'lit/directives/live.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partNameMap } from '../common/util.js';
-import { emailValidator, maxLengthValidator, maxValidator, minLengthValidator, minValidator, patternValidator, requiredNumberValidator, requiredValidator, stepValidator, urlValidator, } from '../common/validators.js';
 import { IgcInputBaseComponent } from './input-base.js';
+import { numberValidators, stringValidators } from './validators.js';
 class IgcInputComponent extends IgcInputBaseComponent {
     constructor() {
         super(...arguments);
-        this.validators = [
-            {
-                ...requiredValidator,
-                isValid: () => this.isStringType
-                    ? requiredValidator.isValid(this)
-                    : requiredNumberValidator.isValid(this),
-            },
-            {
-                ...minLengthValidator,
-                isValid: () => this.isStringType ? minLengthValidator.isValid(this) : true,
-            },
-            {
-                ...maxLengthValidator,
-                isValid: () => this.isStringType ? maxLengthValidator.isValid(this) : true,
-            },
-            {
-                ...minValidator,
-                isValid: () => (this.isStringType ? true : minValidator.isValid(this)),
-            },
-            {
-                ...maxValidator,
-                isValid: () => (this.isStringType ? true : maxValidator.isValid(this)),
-            },
-            {
-                ...stepValidator,
-                isValid: () => (this.isStringType ? true : stepValidator.isValid(this)),
-            },
-            {
-                ...patternValidator,
-                isValid: () => this.isStringType ? patternValidator.isValid(this) : true,
-            },
-            {
-                key: 'typeMismatch',
-                isValid: () => {
-                    switch (this.type) {
-                        case 'email':
-                            return emailValidator.isValid(this);
-                        case 'url':
-                            return urlValidator.isValid(this);
-                        default:
-                            return true;
-                    }
-                },
-                message: () => (this.type === 'email'
-                    ? emailValidator.message
-                    : urlValidator.message),
-            },
-        ];
         this._value = '';
         this.type = 'text';
         this.validateOnly = false;
@@ -75,6 +27,9 @@ class IgcInputComponent extends IgcInputBaseComponent {
     get isStringType() {
         return this.type !== 'number';
     }
+    get __validators() {
+        return this.isStringType ? stringValidators : numberValidators;
+    }
     set value(value) {
         this._value = value ?? '';
         this.setFormValue(value ? value : null);
@@ -84,24 +39,6 @@ class IgcInputComponent extends IgcInputBaseComponent {
     get value() {
         return this._value;
     }
-    set inputmode(value) {
-        this.inputMode = value;
-    }
-    get inputmode() {
-        return this.inputMode;
-    }
-    set minlength(value) {
-        this.minLength = value;
-    }
-    get minlength() {
-        return this.minLength;
-    }
-    set maxlength(value) {
-        this.maxLength = value;
-    }
-    get maxlength() {
-        return this.maxLength;
-    }
     constraintsChanged() {
         this.updateValidity();
     }
@@ -135,11 +72,9 @@ class IgcInputComponent extends IgcInputBaseComponent {
     }
     handleFocus() {
         this._dirty = true;
-        super.handleFocus();
     }
     handleBlur() {
         this.checkValidity();
-        super.handleBlur();
     }
     renderInput() {
         return html `
@@ -180,9 +115,6 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], IgcInputComponent.prototype, "type", void 0);
-__decorate([
-    property({ attribute: false })
-], IgcInputComponent.prototype, "inputmode", null);
 __decorate([
     property({ attribute: 'inputmode' })
 ], IgcInputComponent.prototype, "inputMode", void 0);
@@ -192,15 +124,9 @@ __decorate([
 __decorate([
     property({ type: Number, attribute: 'minlength' })
 ], IgcInputComponent.prototype, "minLength", void 0);
-__decorate([
-    property({ attribute: false })
-], IgcInputComponent.prototype, "minlength", null);
 __decorate([
     property({ type: Number, attribute: 'maxlength' })
 ], IgcInputComponent.prototype, "maxLength", void 0);
-__decorate([
-    property({ attribute: false })
-], IgcInputComponent.prototype, "maxlength", null);
 __decorate([
     property()
 ], IgcInputComponent.prototype, "min", void 0);