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

package/components/tabs/themes/tab-themes.d.ts

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

package/components/tabs/themes/tab.base.css.d.ts

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

package/components/tabs/themes/tabs-themes.d.ts

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

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

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

package/components/textarea/textarea.d.ts

@@ -0,0 +1,203 @@
+import { LitElement, type TemplateResult, nothing } from 'lit';
+import type { Constructor } from '../common/mixins/constructor.js';
+import { type FormValue } from '../common/mixins/forms/form-value.js';
+import type { RangeTextSelectMode, SelectionRangeDirection } from '../types.js';
+export interface IgcTextareaComponentEventMap {
+    igcInput: CustomEvent<string>;
+    igcChange: CustomEvent<string>;
+    focus: FocusEvent;
+    blur: FocusEvent;
+}
+declare const IgcTextareaComponent_base: Constructor<import("../common/mixins/forms/types.js").FormRequiredInterface & import("../common/mixins/forms/types.js").FormAssociatedElementInterface> & Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcTextareaComponentEventMap>> & Constructor<LitElement>;
+/**
+ * This element represents a multi-line plain-text editing control,
+ * useful when you want to allow users to enter a sizeable amount of free-form text,
+ * for example a comment on a review or feedback form.
+ *
+ * @element igc-textarea
+ *
+ * @slot - Text content from the default slot will be used as the value of the component.
+ * @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 too-long - Renders content when the maxlength validation fails.
+ * @slot too-short - Renders content when the minlength 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 receives user input.
+ * @fires igcChange - Emitted when the a change to the control value is committed by the user.
+ *
+ * @csspart container - The main wrapper that holds all main input elements of the textarea.
+ * @csspart input - The native input element of the igc-textarea.
+ * @csspart label - The native label element of the igc-textarea.
+ * @csspart prefix - The prefix wrapper of the igc-textarea.
+ * @csspart suffix - The suffix wrapper of the igc-textarea.
+ * @csspart helper-text - The helper text wrapper of the igc-textarea.
+ */
+export default class IgcTextareaComponent extends IgcTextareaComponent_base {
+    static readonly tagName = "igc-textarea";
+    static styles: import("lit").CSSResult[];
+    static register(): void;
+    protected static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    private static readonly increment;
+    protected get __validators(): import("../common/validators.js").Validator<IgcTextareaComponent>[];
+    protected _formValue: FormValue<string>;
+    protected inputId: string;
+    private observer;
+    private projected;
+    protected prefixes: Array<HTMLElement>;
+    protected suffixes: Array<HTMLElement>;
+    private input;
+    private get resizeStyles();
+    protected get _isMaterial(): boolean;
+    /**
+     * Specifies what if any permission the browser has to provide for automated assistance in filling out form field values,
+     * as well as guidance to the browser as to the type of information expected in the field.
+     * Refer to [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for additional information.
+     *
+     * @attr
+     */
+    autocomplete: string;
+    /**
+     * Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+     *
+     * [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize).
+     *
+     * @attr
+     */
+    autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
+    /**
+     * Hints at the type of data that might be entered by the user while editing the element or its contents.
+     * This allows a browser to display an appropriate virtual keyboard.
+     *
+     * [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)
+     *
+     * @attr inputmode
+     */
+    inputMode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    /**
+     * The label for the control.
+     *
+     * @attr
+     */
+    label: string;
+    /**
+     * The maximum number of characters (UTF-16 code units) that the user can enter.
+     * If this value isn't specified, the user can enter an unlimited number of characters.
+     *
+     * @attr maxlength
+     */
+    maxLength: number;
+    /**
+     * The minimum number of characters (UTF-16 code units) required that the user should enter.
+     *
+     * @attr minlength
+     */
+    minLength: number;
+    /**
+     * Whether the control will have outlined appearance.
+     * @attr
+     */
+    outlined: boolean;
+    /**
+     * The placeholder attribute of the control.
+     *
+     * @attr
+     */
+    placeholder: string;
+    /**
+     * Makes the control a readonly field.
+     *
+     * @attr readonly
+     */
+    readOnly: boolean;
+    /**
+     * Controls whether the control can be resized.
+     * When `auto` is set, the control will try to expand and fit its content.
+     *
+     * @attr
+     */
+    resize: 'auto' | 'vertical' | 'none';
+    /**
+     * The number of visible text lines for the control. If it is specified, it must be a positive integer.
+     * If it is not specified, the default value is 2.
+     *
+     * @attr
+     */
+    rows: number;
+    /**
+     * The value of the component
+     *
+     * @attr
+     */
+    set value(value: string);
+    get value(): string;
+    /**
+     * Controls whether the element may be checked for spelling errors.
+     *
+     * @attr
+     */
+    spellcheck: boolean;
+    /**
+     * Indicates how the control should wrap the value for form submission.
+     * Refer to [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes)
+     * for explanation of the available values.
+     *
+     * @attr
+     */
+    wrap: 'hard' | 'soft' | 'off';
+    /**
+     * Enables validation rules to be evaluated without restricting user input. This applies to the `maxLength` property
+     * when it is defined.
+     *
+     * @attr validate-only
+     */
+    validateOnly: boolean;
+    protected valueChanged(): Promise<void>;
+    protected setAreaHeight(): void;
+    constructor();
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    /** Selects all text within the control. */
+    select(): void;
+    /** Sets the text selection range of the control */
+    setSelectionRange(start: number, end: number, direction?: SelectionRangeDirection): void;
+    /** Replaces the selected text in the control. */
+    setRangeText(replacement: string, start: number, end: number, selectMode?: RangeTextSelectMode): void;
+    scrollTo(options?: ScrollToOptions | undefined): void;
+    scrollTo(x: number, y: number): void;
+    protected resolvePartNames(): {
+        container: boolean;
+        prefixed: boolean;
+        suffixed: boolean;
+        filled: boolean;
+    };
+    private setAutoHeight;
+    protected handleInput(): void;
+    protected handleChange(): void;
+    protected handleFocus(): void;
+    protected handleBlur(): void;
+    protected valueSlotChange(): void;
+    protected renderValueSlot(): TemplateResult<1>;
+    protected renderValidationContainer(): TemplateResult;
+    protected renderPrefix(): TemplateResult<1>;
+    protected renderSuffix(): TemplateResult<1>;
+    protected renderLabel(): TemplateResult<1> | typeof nothing;
+    protected renderStandard(): TemplateResult<1>;
+    protected renderMaterial(): TemplateResult<1>;
+    protected renderInput(): TemplateResult<1>;
+    protected render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-textarea': IgcTextareaComponent;
+    }
+}
+export {};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/components/textarea/themes/themes.d.ts

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

package/components/textarea/validators.d.ts

@@ -0,0 +1,3 @@
+import { type Validator } from '../common/validators.js';
+import type IgcTextareaComponent from './textarea.js';
+export declare const textAreaValidators: Validator<IgcTextareaComponent>[];

package/components/tile-manager/position.d.ts

@@ -0,0 +1,35 @@
+import type IgcTileManagerComponent from './tile-manager.js';
+import type IgcTileComponent from './tile.js';
+declare class TilesState {
+    private _nextEmptyPosition;
+    manager: IgcTileManagerComponent;
+    private get _tiles();
+    /**
+     * Returns the current tiles of the tile manager sorted by their position.
+     */
+    get tiles(): IgcTileComponent[];
+    constructor(manager: IgcTileManagerComponent);
+    assignPositions(): void;
+    /** Updates the default (manual) slot of the tile manager with the current tiles. */
+    assignTiles(): void;
+    add(tile: IgcTileComponent): void;
+    remove(tile: IgcTileComponent): void;
+}
+type TileDragStackEntry = {
+    tile: IgcTileComponent;
+    position: number;
+    column?: number | null;
+    row?: number | null;
+};
+declare class TileDragStack {
+    private _stack;
+    peek(): IgcTileComponent;
+    pop(): TileDragStackEntry | undefined;
+    push(tile: IgcTileComponent): void;
+    restore(): void;
+    reset(): void;
+}
+export declare function createTilesState(manager: IgcTileManagerComponent): TilesState;
+export declare function createTileDragStack(): TileDragStack;
+export declare function swapTiles(a: IgcTileComponent, b: IgcTileComponent): void;
+export {};

package/components/tile-manager/serializer.d.ts

@@ -0,0 +1,28 @@
+import type IgcTileManagerComponent from './tile-manager.js';
+export interface SerializedTile {
+    colSpan: number;
+    colStart: number | null;
+    disableFullscreen: boolean;
+    disableMaximize: boolean;
+    disableResize: boolean;
+    gridColumn: string;
+    gridRow: string;
+    maximized: boolean;
+    position: number;
+    rowSpan: number;
+    rowStart: number | null;
+    tileId: string | null;
+    width: number | null;
+    height: number | null;
+}
+declare class TileManagerSerializer {
+    tileManager: IgcTileManagerComponent;
+    constructor(tileManager: IgcTileManagerComponent);
+    private _getResizeContainer;
+    save(): SerializedTile[];
+    saveAsJSON(): string;
+    load(tiles: SerializedTile[]): void;
+    loadFromJSON(data: string): void;
+}
+export declare function createSerializer(host: IgcTileManagerComponent): TileManagerSerializer;
+export {};

package/components/tile-manager/serializer.js

@@ -13,6 +13,8 @@ class TileManagerSerializer {
             return {
                 colSpan: tile.colSpan,
                 colStart: tile.colStart,
+                disableFullscreen: tile.disableFullscreen,
+                disableMaximize: tile.disableMaximize,
                 disableResize: tile.disableResize,
                 gridColumn,
                 gridRow,

package/components/tile-manager/serializer.js.map

@@ -1 +1 @@
-{"version":3,"file":"serializer.js","sourceRoot":"","sources":["../../../src/components/tile-manager/serializer.ts"],"names":[],"mappings":"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","sourcesContent":["import { asNumber, omit, pick } from '../common/util.js';\nimport type IgcTileManagerComponent from './tile-manager.js';\nimport type IgcTileComponent from './tile.js';\n\nexport interface SerializedTile {\n  colSpan: number;\n  colStart: number | null;\n  disableResize: boolean;\n  gridColumn: string;\n  gridRow: string;\n  maximized: boolean;\n  position: number;\n  rowSpan: number;\n  rowStart: number | null;\n  tileId: string | null;\n  width: number | null;\n  height: number | null;\n}\n\nclass TileManagerSerializer {\n  public tileManager: IgcTileManagerComponent;\n\n  constructor(tileManager: IgcTileManagerComponent) {\n    this.tileManager = tileManager;\n  }\n\n  private _getResizeContainer(tile: IgcTileComponent) {\n    // biome-ignore lint/complexity/useLiteralKeys: Until we migrate to a symbol\n    return tile['_resizeContainer']!;\n  }\n\n  public save(): SerializedTile[] {\n    return this.tileManager.tiles.map((tile) => {\n      const { gridColumn, gridRow } = getComputedStyle(tile);\n      const { width, height } = this._getResizeContainer(tile).getSize();\n\n      return {\n        colSpan: tile.colSpan,\n        colStart: tile.colStart,\n        disableResize: tile.disableResize,\n        gridColumn,\n        gridRow,\n        maximized: tile.maximized,\n        position: tile.position,\n        rowSpan: tile.rowSpan,\n        rowStart: tile.rowStart,\n        tileId: tile.tileId,\n        width: asNumber(width) || null,\n        height: asNumber(height) || null,\n      };\n    });\n  }\n\n  public saveAsJSON(): string {\n    return JSON.stringify(this.save());\n  }\n\n  public load(tiles: SerializedTile[]): void {\n    const mapped = new Map(tiles.map((tile) => [tile.tileId, tile]));\n    const keys: (keyof SerializedTile)[] = [\n      'gridColumn',\n      'gridRow',\n      'width',\n      'height',\n    ];\n\n    for (const tile of this.tileManager.tiles) {\n      if (!mapped.has(tile.tileId)) {\n        continue;\n      }\n\n      const serialized = mapped.get(tile.tileId)!;\n      const properties = omit(serialized, ...keys);\n      const styles = pick(serialized, 'gridColumn', 'gridRow');\n      const { width, height } = pick(serialized, 'width', 'height');\n\n      Object.assign(tile, properties);\n      Object.assign(tile.style, styles);\n      this._getResizeContainer(tile).setSize(width, height);\n    }\n  }\n\n  public loadFromJSON(data: string): void {\n    this.load(JSON.parse(data));\n  }\n}\n\nexport function createSerializer(host: IgcTileManagerComponent) {\n  return new TileManagerSerializer(host);\n}\n"]}
+{"version":3,"file":"serializer.js","sourceRoot":"","sources":["../../../src/components/tile-manager/serializer.ts"],"names":[],"mappings":"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","sourcesContent":["import { asNumber, omit, pick } from '../common/util.js';\nimport type IgcTileManagerComponent from './tile-manager.js';\nimport type IgcTileComponent from './tile.js';\n\nexport interface SerializedTile {\n  colSpan: number;\n  colStart: number | null;\n  disableFullscreen: boolean;\n  disableMaximize: boolean;\n  disableResize: boolean;\n  gridColumn: string;\n  gridRow: string;\n  maximized: boolean;\n  position: number;\n  rowSpan: number;\n  rowStart: number | null;\n  tileId: string | null;\n  width: number | null;\n  height: number | null;\n}\n\nclass TileManagerSerializer {\n  public tileManager: IgcTileManagerComponent;\n\n  constructor(tileManager: IgcTileManagerComponent) {\n    this.tileManager = tileManager;\n  }\n\n  private _getResizeContainer(tile: IgcTileComponent) {\n    // biome-ignore lint/complexity/useLiteralKeys: Until we migrate to a symbol\n    return tile['_resizeContainer']!;\n  }\n\n  public save(): SerializedTile[] {\n    return this.tileManager.tiles.map((tile) => {\n      const { gridColumn, gridRow } = getComputedStyle(tile);\n      const { width, height } = this._getResizeContainer(tile).getSize();\n\n      return {\n        colSpan: tile.colSpan,\n        colStart: tile.colStart,\n        disableFullscreen: tile.disableFullscreen,\n        disableMaximize: tile.disableMaximize,\n        disableResize: tile.disableResize,\n        gridColumn,\n        gridRow,\n        maximized: tile.maximized,\n        position: tile.position,\n        rowSpan: tile.rowSpan,\n        rowStart: tile.rowStart,\n        tileId: tile.tileId,\n        width: asNumber(width) || null,\n        height: asNumber(height) || null,\n      };\n    });\n  }\n\n  public saveAsJSON(): string {\n    return JSON.stringify(this.save());\n  }\n\n  public load(tiles: SerializedTile[]): void {\n    const mapped = new Map(tiles.map((tile) => [tile.tileId, tile]));\n    const keys: (keyof SerializedTile)[] = [\n      'gridColumn',\n      'gridRow',\n      'width',\n      'height',\n    ];\n\n    for (const tile of this.tileManager.tiles) {\n      if (!mapped.has(tile.tileId)) {\n        continue;\n      }\n\n      const serialized = mapped.get(tile.tileId)!;\n      const properties = omit(serialized, ...keys);\n      const styles = pick(serialized, 'gridColumn', 'gridRow');\n      const { width, height } = pick(serialized, 'width', 'height');\n\n      Object.assign(tile, properties);\n      Object.assign(tile.style, styles);\n      this._getResizeContainer(tile).setSize(width, height);\n    }\n  }\n\n  public loadFromJSON(data: string): void {\n    this.load(JSON.parse(data));\n  }\n}\n\nexport function createSerializer(host: IgcTileManagerComponent) {\n  return new TileManagerSerializer(host);\n}\n"]}

package/components/tile-manager/themes/container.d.ts

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

package/components/tile-manager/themes/dark/tile-manager.bootstrap.css.d.ts

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

package/components/tile-manager/themes/dark/tile-manager.fluent.css.d.ts

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

package/components/tile-manager/themes/dark/tile-manager.indigo.css.d.ts

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

package/components/tile-manager/themes/dark/tile-manager.material.css.d.ts

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

package/components/tile-manager/themes/dark/tile-manager.shared.css.d.ts

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

package/components/tile-manager/themes/light/tile-manager.bootstrap.css.d.ts

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

package/components/tile-manager/themes/light/tile-manager.fluent.css.d.ts

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

package/components/tile-manager/themes/light/tile-manager.indigo.css.d.ts

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

package/components/tile-manager/themes/light/tile-manager.material.css.d.ts

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

package/components/tile-manager/themes/light/tile-manager.shared.css.d.ts

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

package/components/tile-manager/themes/shared/tile/tile.bootstrap.css.d.ts

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

package/components/tile-manager/themes/shared/tile/tile.common.css.d.ts

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

package/components/tile-manager/themes/shared/tile/tile.fluent.css.d.ts

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

package/components/tile-manager/themes/shared/tile/tile.indigo.css.d.ts

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

package/components/tile-manager/themes/shared/tile-manager.common.css.d.ts

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

package/components/tile-manager/themes/tile-manager.base.css.d.ts

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

package/components/tile-manager/themes/tile.base.css.d.ts

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

package/components/tile-manager/themes/tile.d.ts

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

package/components/tile-manager/tile-manager.d.ts

@@ -0,0 +1,99 @@
+import { LitElement } from 'lit';
+import type { Constructor } from '../common/mixins/constructor.js';
+import type { TileManagerDragMode, TileManagerResizeMode } from '../types.js';
+import IgcTileComponent from './tile.js';
+export interface IgcTileManagerComponentEventMap {
+    igcTileDragStarted: CustomEvent<IgcTileComponent>;
+    igcTileDragEnded: CustomEvent<IgcTileComponent>;
+}
+declare const IgcTileManagerComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcTileManagerComponentEventMap>> & Constructor<LitElement>;
+/**
+ * The tile manager component enables the dynamic arrangement, resizing, and interaction of tiles.
+ *
+ * @element igc-tile-manager
+ *
+ * @fires igcTileDragStarted - Fired when an owning tile begins a drag operation.
+ * @fires igcTileDragEnded - Fired when an owning tile completes a drag operation, either by dropping onto a new position or canceling the drag.
+ */
+export default class IgcTileManagerComponent extends IgcTileManagerComponent_base {
+    static readonly tagName = "igc-tile-manager";
+    static styles: import("lit").CSSResult[];
+    protected static shadowRootOptions: ShadowRootInit;
+    static register(): void;
+    private _internalStyles;
+    private _dragMode;
+    private _resizeMode;
+    private _columnCount;
+    private _gap?;
+    private _minColWidth?;
+    private _minRowHeight?;
+    private _serializer;
+    private _tilesState;
+    private _grid;
+    private _context;
+    private _createContext;
+    private _setManagerContext;
+    /**
+     * Whether resize operations are enabled.
+     *
+     * @attr resize-mode
+     * @default none
+     */
+    set resizeMode(value: TileManagerResizeMode);
+    get resizeMode(): TileManagerResizeMode;
+    /**
+     * Whether drag and drop operations are enabled.
+     *
+     * @attr drag-mode
+     * @default none
+     */
+    set dragMode(value: TileManagerDragMode);
+    get dragMode(): TileManagerDragMode;
+    /**
+     * Sets the number of columns for the tile manager.
+     * Setting value <= than zero will trigger a responsive layout.
+     *
+     * @attr column-count
+     * @default 0
+     */
+    set columnCount(value: number);
+    get columnCount(): number;
+    /**
+     * Sets the minimum width for a column unit in the tile manager.
+     * @attr min-column-width
+     */
+    set minColumnWidth(value: string | undefined);
+    get minColumnWidth(): string | undefined;
+    /**
+     * Sets the minimum height for a row unit in the tile manager.
+     * @attr min-row-height
+     */
+    set minRowHeight(value: string | undefined);
+    get minRowHeight(): string | undefined;
+    /**
+     * Sets the gap size of the the tile manager.
+     *
+     * @attr gap
+     */
+    set gap(value: string | undefined);
+    get gap(): string | undefined;
+    /**
+     * Gets the tiles sorted by their position in the layout.
+     * @property
+     */
+    get tiles(): IgcTileComponent[];
+    constructor();
+    protected firstUpdated(): void;
+    private _observerCallback;
+    private _handleTileDragStart;
+    private _handleTileDragEnd;
+    saveLayout(): string;
+    loadLayout(data: string): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-tile-manager': IgcTileManagerComponent;
+    }
+}
+export {};

package/components/tile-manager/tile-util.d.ts

@@ -0,0 +1,68 @@
+import type { ResizeState } from '../resize-container/types.js';
+import type IgcTileComponent from './tile.js';
+type TilePosition = {
+    start: number;
+    span: number;
+};
+type TileGridPosition = {
+    column: TilePosition;
+    row: TilePosition;
+};
+type TileResizeDimensions = {
+    width: number | null;
+    height: number | null;
+};
+export declare const DraggedTileAttribute = "data-drag-ghost-tile";
+type TileGridDimension = {
+    count: number;
+    entries: number[];
+    minSize: number;
+};
+declare class TileResizeState {
+    private _initialPosition;
+    protected _gap: number;
+    protected _prevDeltaX: number;
+    protected _prevDeltaY: number;
+    protected _prevSnappedWidth: number;
+    protected _prevSnappedHeight: number;
+    protected _position: TileGridPosition;
+    protected _columns: TileGridDimension;
+    protected _rows: TileGridDimension;
+    resizedDimensions: TileResizeDimensions;
+    get emptyResizeDimensions(): TileResizeDimensions;
+    get gap(): number;
+    get position(): TileGridPosition;
+    get columns(): TileGridDimension;
+    get rows(): TileGridDimension;
+    calculateSnappedWidth(state: ResizeState): number;
+    calculateSnappedHeight(state: ResizeState): number;
+    updateState(tileRect: DOMRect, tile: IgcTileComponent, grid: HTMLElement): void;
+    /**
+     * Calculates and returns the CSS column and row properties of a tile after resizing,
+     * based on its new dimensions and starting position.
+     */
+    getResizedPosition(rect: DOMRect): {
+        column: string;
+        row: string;
+    };
+    calculateResizedSize(grid: HTMLElement): {
+        width: number;
+        height: number;
+    };
+    /**
+     * Checks and adjusts tile spans based on the column count of the tile manager.
+     */
+    adjustTileGridPosition(tiles: IgcTileComponent[]): void;
+    private calculateSnappedDimension;
+    private calculateResizedSpan;
+    private initState;
+    private calculateTileStartPosition;
+    private calculatePosition;
+    private calculateAdditionalSpan;
+    private calculateSizeFromEntries;
+    private getGridOffset;
+}
+export declare function createTileResizeState(): TileResizeState;
+export declare function createTileDragGhost(tile: IgcTileComponent): IgcTileComponent;
+export declare function createTileGhost(): HTMLElement;
+export {};

package/components/tile-manager/tile-util.js

@@ -56,6 +56,13 @@ class TileResizeState {
             entries: [],
             minSize: 0,
         };
+        this.resizedDimensions = {
+            width: null,
+            height: null,
+        };
+    }
+    get emptyResizeDimensions() {
+        return { width: null, height: null };
     }
     get gap() {
         return this._gap;