igniteui-webcomponents 5.3.0-beta.1 → 5.3.0-beta.2

package/components/expansion-panel/themes/expansion-panel.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/expansion-panel/themes/light/expansion-panel.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/expansion-panel/themes/light/expansion-panel.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/expansion-panel/themes/light/expansion-panel.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/expansion-panel/themes/light/expansion-panel.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/expansion-panel/themes/light/expansion-panel.shared.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/expansion-panel/themes/shared/expansion-panel.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/expansion-panel/themes/shared/expansion-panel.common.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/expansion-panel/themes/shared/expansion-panel.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/expansion-panel/themes/shared/expansion-panel.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/expansion-panel/themes/themes.d.ts

@@ -0,0 +1,2 @@
+import type { Themes } from '../../../theming/types.js';
+export declare const all: Themes;

package/components/focus-trap/focus-trap.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+/**
+ *
+ * @element igc-focus-trap
+ *
+ * @slot - The content of the focus trap component
+ */
+export default class IgcFocusTrapComponent extends LitElement {
+    static readonly tagName = "igc-focus-trap";
+    static styles: import("lit").CSSResult;
+    static register(): void;
+    protected _focused: boolean;
+    /**
+     * Whether to manage focus state for the slotted children.
+     * @attr disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether focus in currently inside the trap component.
+     */
+    get focused(): boolean;
+    /** An array of focusable elements including elements in Shadow roots */
+    get focusableElements(): HTMLElement[];
+    constructor();
+    private onFocusIn;
+    private onFocusOut;
+    focusFirstElement(): void;
+    focusLastElement(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-focus-trap': IgcFocusTrapComponent;
+    }
+}

package/components/icon/icon-references.d.ts

@@ -0,0 +1,28 @@
+/** READ BEFORE YOU MODIFY THIS FILE!
+ *
+ * Before you add/modify an icon reference, please think about the semantics of the icon you are adding/modifying.
+ *
+ * Icon aliases have sematic meaning depending on the context in which they are used.
+ * For instance, if your component handles toggling between expanded and collapsed states,
+ * you may want to use the already existing `expand` and `collapse` aliases that point to
+ * the `expand_more` and `expand_less` icons in the material font set.
+ *
+ * It may so happen, however, that the design of your component requires you to use the `chevron_right` for the
+ * expand icon and the `expand_more` for the collapse icon. In this case the `tree_expand` and `tree_collapse` aliases
+ * would be appropriate.
+ * This distinction is important when choosing which icon to use for your component as it will have an impact
+ * when a user decides to rewire the `expand`/`collapse` icons to some other icons.
+ *
+ * Likewise, modifying existing references should be handled with caution as many component in the framework already
+ * share icons that have equivalent semantic meaning. For example, the `Paginator`, `Grid Filtering Row`,
+ * and `Tabs` components in Ignite UI for Angular all use the `prev` and `next` icons for navigating between pages
+ * or lists of items. Changing the underlying target for those icons should be done in a way that suits all components.
+ *
+ * Keep in mind that icon aliases and their underlying names are shared between Ignite UI component frameworks
+ * and changing an alias name here should be reflected in the other frameworks as well.
+ *
+ * To get acquainted with which component uses what icon, please make sure to read the
+ * [docs](https://infragistics.com/products/ignite-ui-angular/Angular/components/icon-service#internal-usage).
+ */
+import type { IconReference } from './registry/types.js';
+export declare const iconReferences: IconReference[];

package/components/icon/icon-state.broadcast.d.ts

@@ -0,0 +1,14 @@
+import type { BroadcastIconsChangeMessage, IconMeta, IconsCollection, SvgIcon } from './registry/types.js';
+export declare class IconsStateBroadcast {
+    private channel;
+    private collections;
+    private refsCollection;
+    private static readonly origin;
+    constructor(collections: IconsCollection<SvgIcon>, refsCollection: IconsCollection<IconMeta>);
+    send(data: BroadcastIconsChangeMessage): void;
+    handleEvent({ data }: MessageEvent<BroadcastIconsChangeMessage>): void;
+    private create;
+    private dispose;
+    private getUserRefsCollection;
+    private getUserSetCollection;
+}

package/components/icon/icon.d.ts

@@ -0,0 +1,47 @@
+import { LitElement } from 'lit';
+import type { IconMeta } from './registry/types.js';
+/**
+ * The icon component allows visualizing collections of pre-registered SVG icons.
+ *
+ * @element igc-icon
+ *
+ *
+ */
+export default class IgcIconComponent extends LitElement {
+    static readonly tagName = "igc-icon";
+    static styles: import("lit").CSSResult[];
+    static register(): void;
+    private __internals;
+    private svg;
+    /**
+     * The name of the icon glyph to draw.
+     * @attr
+     */
+    name: string;
+    /**
+     * The name of the registered collection for look up of icons.
+     * Defaults to `default`.
+     * @attr
+     */
+    collection: string;
+    /**
+     * Whether to flip the icon. Useful for RTL layouts.
+     * @attr
+     */
+    mirrored: boolean;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected iconChanged(prev: string, curr: string): void;
+    private iconLoaded;
+    private getIcon;
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected registerIcon(name: string, url: string, collection?: string): Promise<void>;
+    protected registerIconFromText(name: string, iconText: string, collection?: string): void;
+    protected setIconRef(name: string, collection: string, icon: IconMeta): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-icon': IgcIconComponent;
+    }
+}

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

@@ -0,0 +1,24 @@
+import type { Theme } from '../../theming/types.js';
+import type { IconCallback, IconMeta, IconReferencePair, SvgIcon } from './registry/types.js';
+declare class IconsRegistry {
+    private parser;
+    private collections;
+    private references;
+    private listeners;
+    private theme;
+    private broadcast;
+    constructor();
+    register(name: string, iconText: string, collection?: string): void;
+    subscribe(callback: IconCallback): void;
+    unsubscribe(callback: IconCallback): void;
+    setRefsByTheme(theme: Theme): void;
+    setIconRef(options: IconReferencePair): void;
+    getIconRef(name: string, collection: string): IconMeta;
+    get(name: string, collection?: string): SvgIcon | undefined;
+    private notifyAll;
+}
+export declare function getIconRegistry(): IconsRegistry;
+export declare function registerIcon(name: string, url: string, collection?: string): Promise<void>;
+export declare function registerIconFromText(name: string, iconText: string, collection?: string): void;
+export declare function setIconRef(name: string, collection: string, icon: IconMeta): void;
+export {};

package/components/icon/internal-icons-lib.d.ts

@@ -0,0 +1,2 @@
+import type { SvgIcon } from './registry/types.js';
+export declare const internalIcons: Map<string, SvgIcon>;

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(): MapIterator<[T, U]>;
+}
+export declare function createIconDefaultMap<T, U>(): DefaultMap<T, Map<T, U>>;

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/types.d.ts

@@ -0,0 +1,35 @@
+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>>;
+    origin?: string;
+}
+export interface IconMeta {
+    name: string;
+    collection: string;
+    external?: boolean;
+}

package/components/icon/themes/dark/icon.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/icon/themes/dark/icon.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/icon/themes/dark/icon.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/icon/themes/dark/icon.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/icon/themes/icon.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/icon/themes/light/icon.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/icon/themes/light/icon.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/icon/themes/light/icon.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/icon/themes/light/icon.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/icon/themes/light/icon.shared.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/icon/themes/shared/icon.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/icon/themes/shared/icon.common.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/icon/themes/shared/icon.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/icon/themes/shared/icon.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/icon/themes/themes.d.ts

@@ -0,0 +1,2 @@
+import type { Themes } from '../../../theming/types.js';
+export declare const all: Themes;

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

@@ -0,0 +1,72 @@
+import { LitElement, type TemplateResult } from 'lit';
+import type { Constructor } from '../common/mixins/constructor.js';
+import type { RangeTextSelectMode, SelectionRangeDirection } from '../types.js';
+export interface IgcInputComponentEventMap {
+    igcInput: CustomEvent<string>;
+    igcChange: CustomEvent<string>;
+    focus: FocusEvent;
+    blur: FocusEvent;
+}
+declare const IgcInputBaseComponent_base: Constructor<import("../common/mixins/forms/types.js").FormRequiredInterface & import("../common/mixins/forms/types.js").FormAssociatedElementInterface> & Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcInputComponentEventMap>> & Constructor<LitElement>;
+export declare abstract class IgcInputBaseComponent extends IgcInputBaseComponent_base {
+    protected static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    static styles: import("lit").CSSResult[];
+    private static readonly increment;
+    protected inputId: string;
+    /** The value attribute of the control. */
+    abstract value: string | Date | null;
+    protected input: HTMLInputElement;
+    protected _helperText: Array<HTMLElement>;
+    protected prefixes: Array<HTMLElement>;
+    protected suffixes: Array<HTMLElement>;
+    protected get _isMaterial(): boolean;
+    /**
+     * Whether the control will have outlined appearance.
+     * @attr
+     */
+    outlined: boolean;
+    /**
+     * Makes the control a readonly field.
+     * @attr readonly
+     */
+    readOnly: boolean;
+    /**
+     * The placeholder attribute of the control.
+     * @attr
+     */
+    placeholder: string;
+    /**
+     * The label for the control.
+     * @attr
+     */
+    label: string;
+    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 renderValidatorContainer(): TemplateResult;
+    protected resolvePartNames(base: string): {
+        [x: string]: boolean;
+        prefixed: boolean;
+        suffixed: boolean;
+        filled: boolean;
+    };
+    /** Sets the text selection range of the control */
+    setSelectionRange(start: number, end: number, direction?: SelectionRangeDirection): void;
+    /** Replaces the selected text in the input. */
+    setRangeText(replacement: string, start: number, end: number, selectMode?: RangeTextSelectMode): void;
+    private renderPrefix;
+    private renderSuffix;
+    private renderLabel;
+    private renderMaterial;
+    private renderStandard;
+    protected render(): TemplateResult<1>;
+}
+export {};

package/components/input/input.d.ts

@@ -0,0 +1,135 @@
+import { type FormValue } from '../common/mixins/forms/form-value.js';
+import type { RangeTextSelectMode } from '../types.js';
+import { IgcInputBaseComponent } from './input-base.js';
+/**
+ * @element igc-input
+ *
+ * @slot prefix - Renders content before the input.
+ * @slot suffix - Renders content after input.
+ * @slot helper-text - Renders content below the input.
+ * @slot value-missing - Renders content when the required validation fails.
+ * @slot type-mismatch - Renders content when the a type url/email input pattern validation fails.
+ * @slot pattern-mismatch - Renders content when the pattern validation fails.
+ * @slot too-long - Renders content when the maxlength validation fails.
+ * @slot too-short - Renders content when the minlength validation fails.
+ * @slot range-overflow - Renders content when the max validation fails.
+ * @slot range-underflow - Renders content when the min validation fails.
+ * @slot step-mismatch - Renders content when the step validation fails.
+ * @slot custom-error - Renders content when setCustomValidity(message) is set.
+ * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).
+ *
+ * @fires igcInput - Emitted when the control input receives user input.
+ * @fires igcChange - Emitted when the control's checked state changes.
+ *
+ * @csspart container - The main wrapper that holds all main input elements.
+ * @csspart input - The native input element.
+ * @csspart label - The native label element.
+ * @csspart prefix - The prefix wrapper.
+ * @csspart suffix - The suffix wrapper.
+ * @csspart helper-text - The helper text wrapper.
+ */
+export default class IgcInputComponent extends IgcInputBaseComponent {
+    static readonly tagName = "igc-input";
+    static register(): void;
+    protected _formValue: FormValue<string>;
+    protected get __validators(): import("../common/validators.js").Validator<IgcInputComponent>[];
+    private _min?;
+    private _max?;
+    private _minLength?;
+    private _maxLength?;
+    private _pattern?;
+    private _step?;
+    /**
+     * The value of the control.
+     * @attr
+     */
+    set value(value: string);
+    get value(): string;
+    /**
+     * The type attribute of the control.
+     * @attr
+     */
+    type: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
+    /**
+     * The input mode attribute of the control.
+     * See [relevant MDN article](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)
+     * @attr inputmode
+     */
+    inputMode: string;
+    /**
+     * The pattern attribute of the control.
+     * @attr
+     */
+    set pattern(value: string | undefined);
+    get pattern(): string | undefined;
+    /**
+     * The minimum string length required by the control.
+     * @attr minlength
+     */
+    set minLength(value: number | undefined);
+    get minLength(): number | undefined;
+    /**
+     * The maximum string length of the control.
+     * @attr maxlength
+     */
+    set maxLength(value: number | undefined);
+    get maxLength(): number | undefined;
+    /**
+     * The min attribute of the control.
+     * @attr
+     */
+    set min(value: number | undefined);
+    get min(): number | undefined;
+    /**
+     * The max attribute of the control.
+     * @attr
+     */
+    set max(value: number | undefined);
+    get max(): number | undefined;
+    /**
+     * The step attribute of the control.
+     * @attr
+     */
+    set step(value: number | undefined);
+    get step(): number | undefined;
+    /**
+     * The autofocus attribute of the control.
+     * @attr
+     */
+    autofocus: boolean;
+    /**
+     * The autocomplete attribute of the control.
+     * @attr
+     */
+    autocomplete: string;
+    /**
+     * Enables validation rules to be evaluated without restricting user input. This applies to the `maxLength` property for
+     * string-type inputs or allows spin buttons to exceed the predefined `min/max` limits for number-type inputs.
+     *
+     * @attr validate-only
+     */
+    validateOnly: boolean;
+    /**
+     * @internal
+     */
+    tabIndex: number;
+    constructor();
+    /** Replaces the selected text in the input. */
+    setRangeText(replacement: string, start: number, end: number, selectMode?: RangeTextSelectMode): void;
+    /** Selects all text within the input. */
+    select(): void;
+    /** Increments the numeric value of the input by one or more steps. */
+    stepUp(n?: number): void;
+    /** Decrements the numeric value of the input by one or more steps. */
+    stepDown(n?: number): void;
+    private handleInput;
+    private handleChange;
+    protected handleFocus(): void;
+    protected handleBlur(): void;
+    protected renderInput(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-input': IgcInputComponent;
+    }
+}

package/components/input/themes/dark/input.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/input/themes/dark/input.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/input/themes/dark/input.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/input/themes/dark/input.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/input/themes/input.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/input/themes/light/input.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/input/themes/light/input.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/input/themes/light/input.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/input/themes/light/input.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/input/themes/light/input.shared.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/input/themes/shared/input.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/input/themes/shared/input.common.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/input/themes/shared/input.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/input/themes/shared/input.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/input/themes/shared/input.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/input/themes/themes.d.ts

@@ -0,0 +1,2 @@
+import type { Themes } from '../../../theming/types.js';
+export declare const all: Themes;

package/components/input/validators.d.ts

@@ -0,0 +1,4 @@
+import { type Validator } from '../common/validators.js';
+import type IgcInputComponent from './input.js';
+export declare const stringValidators: Validator<IgcInputComponent>[];
+export declare const numberValidators: Validator<IgcInputComponent>[];

package/components/list/list-header.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+/**
+ * Header list item.
+ *
+ * @element igc-list-header
+ *
+ * @slot - Renders header list item's content.
+ */
+export default class IgcListHeaderComponent extends LitElement {
+    static readonly tagName = "igc-list-header";
+    static styles: import("lit").CSSResult[];
+    static register(): void;
+    private _internals;
+    constructor();
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-list-header': IgcListHeaderComponent;
+    }
+}

package/components/list/list-item.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+/**
+ * The list-item component is a container
+ * intended for row items in the list component.
+ *
+ * @element igc-list-item
+ *
+ * @slot - Renders custom content.
+ * @slot start - Renders content before all other content.
+ * @slot end - Renders content after all other content.
+ * @slot title - Renders the title.
+ * @slot subtitle - Renders the subtitle.
+ *
+ * @csspart start - The start container.
+ * @csspart end - The end container.
+ * @csspart content - The header and custom content container.
+ * @csspart header - The title and subtitle container.
+ * @csspart title - The title container.
+ * @csspart subtitle - The subtitle container.
+ */
+export default class IgcListItemComponent extends LitElement {
+    static readonly tagName = "igc-list-item";
+    static styles: import("lit").CSSResult[];
+    static register(): void;
+    private _internals;
+    constructor();
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-list-item': IgcListItemComponent;
+    }
+}