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

package/components/tree/themes/dark/container.shared.css.d.ts

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

package/components/tree/themes/item.base.css.d.ts

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

package/components/tree/themes/item.d.ts

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

package/components/tree/themes/light/container.bootstrap.css.d.ts

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

package/components/tree/themes/light/container.fluent.css.d.ts

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

package/components/tree/themes/light/container.indigo.css.d.ts

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

package/components/tree/themes/light/container.material.css.d.ts

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

package/components/tree/themes/light/container.shared.css.d.ts

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

package/components/tree/themes/shared/item.common.css.d.ts

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

package/components/tree/themes/shared/item.indigo.css.d.ts

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

package/components/tree/themes/shared/item.material.css.d.ts

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

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

@@ -0,0 +1,137 @@
+import { LitElement } from 'lit';
+import type IgcTreeComponent from './tree.js';
+/**
+ * The tree-item component represents a child item of the tree component or another tree item.
+ *
+ * @element igc-tree-item
+ *
+ * @slot - Renders nested tree-item component.
+ * @slot label - Renders the tree item container.
+ * @slot indicator - Renders the expand indicator container.
+ * @slot loading - Renders the tree item loading indicator container.
+ * @slot indentation - Renders the container (by default the space) before the tree item.
+ *
+ * @csspart wrapper - The wrapper for the tree item.
+ * @csspart selected - Indicates selected state. Applies to `wrapper`.
+ * @csspart focused - Indicates focused state. Applies to `wrapper`.
+ * @csspart active - Indicates an active state. Applies to `wrapper`.
+ * @csspart indicator - The expand indicator of the tree item.
+ * @csspart label - The tree item content.
+ * @csspart text - The tree item displayed text.
+ * @csspart select - The checkbox of the tree item when selection is enabled.
+ */
+export default class IgcTreeItemComponent extends LitElement {
+    static readonly tagName = "igc-tree-item";
+    static styles: import("lit").CSSResult[];
+    static register(): void;
+    private tabbableEl?;
+    private focusedProgrammatically;
+    private groupRef;
+    private animationPlayer;
+    /** A reference to the tree the item is a part of. */
+    tree?: IgcTreeComponent;
+    /** The parent item of the current tree item (if any) */
+    parent: IgcTreeItemComponent | null;
+    /** @private @hidden @internal */
+    init: boolean;
+    private contentList;
+    /** @private @hidden @internal */
+    wrapper: HTMLElement;
+    private isFocused;
+    /** @private @hidden @internal */
+    hasChildren: boolean;
+    /** The depth of the item, relative to the root. */
+    level: number;
+    /** @private @hidden @internal */
+    indeterminate: boolean;
+    /**
+     * The tree item label.
+     * @attr
+     */
+    label: string;
+    /**
+     * The tree item expansion state.
+     * @attr
+     */
+    expanded: boolean;
+    /**
+     * Marks the item as the tree's active item.
+     * @attr
+     */
+    active: boolean;
+    /**
+     * Get/Set whether the tree item is disabled. Disabled items are ignored for user interactions.
+     * @attr
+     */
+    disabled: boolean;
+    /**
+     * The tree item selection state.
+     * @attr
+     */
+    selected: boolean;
+    /**
+     * To be used for load-on-demand scenarios in order to specify whether the item is loading data.
+     * @attr
+     */
+    loading: boolean;
+    /**
+     * The value entry that the tree item is visualizing. Required for searching through items.
+     * @type any
+     * @attr
+     */
+    value: any;
+    private toggleAnimation;
+    protected bothChange(): void;
+    protected expandedChange(oldValue: boolean): void;
+    protected activeChange(): void;
+    protected disabledChange(): void;
+    protected selectedChange(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get selectionService();
+    private get navService();
+    private get parts();
+    private get directChildren();
+    private get allChildren();
+    /** The full path to the tree item, starting from the top-most ancestor. */
+    get path(): IgcTreeItemComponent[];
+    private itemClick;
+    private expandIndicatorClick;
+    private selectorClick;
+    private onFocus;
+    private onBlur;
+    private onFocusIn;
+    private onFocusOut;
+    private labelChange;
+    private handleChange;
+    /**
+     * Returns a collection of child items.
+     * If the parameter value is true returns all tree item's direct children,
+     * otherwise - only the direct children.
+     */
+    getChildren(options?: {
+        flatten: boolean;
+    }): IgcTreeItemComponent[];
+    /**
+     * @private
+     * Expands the tree item.
+     */
+    expandWithEvent(): Promise<void>;
+    /**
+     * @private
+     * Collapses the tree item.
+     */
+    collapseWithEvent(): Promise<void>;
+    /** Toggles tree item expansion state. */
+    toggle(): void;
+    /** Expands the tree item. */
+    expand(): void;
+    /** Collapses the tree item. */
+    collapse(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-tree-item': IgcTreeItemComponent;
+    }
+}

package/components/tree/tree.common.d.ts

@@ -0,0 +1,16 @@
+import type IgcTreeItemComponent from './tree-item.js';
+export interface IgcTreeComponentEventMap {
+    igcSelection: CustomEvent<TreeSelectionChange>;
+    igcItemExpanding: CustomEvent<IgcTreeItemComponent>;
+    igcItemExpanded: CustomEvent<IgcTreeItemComponent>;
+    igcItemCollapsing: CustomEvent<IgcTreeItemComponent>;
+    igcItemCollapsed: CustomEvent<IgcTreeItemComponent>;
+    igcActiveItem: CustomEvent<IgcTreeItemComponent>;
+}
+export interface IgcSelectionEventArgs {
+    detail: TreeSelectionChange;
+    cancelable: boolean;
+}
+export interface TreeSelectionChange {
+    newSelection: IgcTreeItemComponent[];
+}

package/components/tree/tree.d.ts

@@ -0,0 +1,77 @@
+import { LitElement } from 'lit';
+import type { Constructor } from '../common/mixins/constructor.js';
+import IgcTreeItemComponent from './tree-item.js';
+import type { IgcTreeComponentEventMap } from './tree.common.js';
+import { IgcTreeNavigationService } from './tree.navigation.js';
+import { IgcTreeSelectionService } from './tree.selection.js';
+declare const IgcTreeComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcTreeComponentEventMap>> & Constructor<LitElement>;
+/**
+ * The tree allows users to represent hierarchical data in a tree-view structure,
+ * maintaining parent-child relationships, as well as to define static tree-view structure without a corresponding data model.
+ *
+ * @element igc-tree
+ *
+ * @slot - Renders the tree items inside default slot.
+ *
+ * @fires igcSelection - Emitted when item selection is changing, before the selection completes.
+ * @fires igcItemCollapsed - Emitted when tree item is collapsed.
+ * @fires igcItemCollapsing - Emitted when tree item is about to collapse.
+ * @fires igcItemExpanded - Emitted when tree item is expanded.
+ * @fires igcItemExpanding - Emitted when tree item is about to expand.
+ * @fires igcActiveItem - Emitted when the tree's `active` item changes.
+ */
+export default class IgcTreeComponent extends IgcTreeComponent_base {
+    static readonly tagName = "igc-tree";
+    static styles: import("lit").CSSResult;
+    static register(): void;
+    /** @private @hidden @internal */
+    selectionService: IgcTreeSelectionService;
+    /** @private @hidden @internal */
+    navService: IgcTreeNavigationService;
+    /**
+     * Whether a single or multiple of a parent's child items can be expanded.
+     * @attr single-branch-expand
+     */
+    singleBranchExpand: boolean;
+    /**
+     * Whether clicking over nodes will change their expanded state or not.
+     * @attr toggle-node-on-click
+     */
+    toggleNodeOnClick: boolean;
+    /**
+     * The selection state of the tree.
+     * @attr
+     */
+    selection: 'none' | 'multiple' | 'cascade';
+    protected onDirChange(): void;
+    protected selectionModeChange(): void;
+    protected singleBranchExpandChange(): void;
+    constructor();
+    connectedCallback(): void;
+    /** Returns all of the tree's items. */
+    get items(): Array<IgcTreeItemComponent>;
+    private handleKeydown;
+    /** @private */
+    expandToItem(item: IgcTreeItemComponent): void;
+    /** Select all items if the items collection is empty. Otherwise, select the items in the items collection. */
+    select(items?: IgcTreeItemComponent[]): void;
+    /** Deselect all items if the items collection is empty. Otherwise, deselect the items in the items collection. */
+    deselect(items?: IgcTreeItemComponent[]): void;
+    /**
+     * Expands all of the passed items.
+     * If no items are passed, expands ALL items.
+     */
+    expand(items?: IgcTreeItemComponent[]): void;
+    /**
+     * Collapses all of the passed items.
+     * If no items are passed, collapses ALL items.
+     */
+    collapse(items?: IgcTreeItemComponent[]): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-tree': IgcTreeComponent;
+    }
+}
+export {};

package/components/tree/tree.navigation.d.ts

@@ -0,0 +1,41 @@
+import type IgcTreeItemComponent from './tree-item.js';
+import type IgcTreeComponent from './tree.js';
+import type { IgcTreeSelectionService } from './tree.selection.js';
+export declare const NAVIGATION_KEYS: Set<string>;
+export declare class IgcTreeNavigationService {
+    private tree;
+    private selectionService;
+    private _focusedItem;
+    private _lastFocusedItem;
+    private _activeItem;
+    private _visibleChildren;
+    private _invisibleChildren;
+    private _disabledChildren;
+    constructor(tree: IgcTreeComponent, selectionService: IgcTreeSelectionService);
+    updateVisChild(): void;
+    get focusedItem(): IgcTreeItemComponent | null;
+    focusItem(value: IgcTreeItemComponent | null, shouldFocus?: boolean): void;
+    get activeItem(): IgcTreeItemComponent | null;
+    setActiveItem(value: IgcTreeItemComponent | null, shouldEmit?: boolean): void;
+    get visibleChildren(): IgcTreeItemComponent[];
+    update_disabled_cache(item: IgcTreeItemComponent): void;
+    delete_item(item: IgcTreeItemComponent): void;
+    update_visible_cache(item: IgcTreeItemComponent, expanded: boolean, shouldUpdateNestedChildren?: boolean, shouldUpdate?: boolean): void;
+    /**
+     * Sets the item as focused (and active)
+     *
+     * @param item target item
+     * @param isActive if true, sets the item as active
+     */
+    setFocusedAndActiveItem(item: IgcTreeItemComponent, isActive?: boolean, shouldFocus?: boolean): void;
+    /** Handler for keydown events. Used in tree.component.ts */
+    handleKeydown(event: KeyboardEvent): void;
+    private handleNavigation;
+    private handleArrowLeft;
+    private handleArrowRight;
+    private handleUpDownArrow;
+    private handleAsterisk;
+    private handleSpace;
+    /** Gets the next visible item in the given direction - 1 -> next, -1 -> previous */
+    private getVisibleItem;
+}

package/components/tree/tree.selection.d.ts

@@ -0,0 +1,55 @@
+import type IgcTreeItemComponent from './tree-item.js';
+import type IgcTreeComponent from './tree.js';
+export declare class IgcTreeSelectionService {
+    private tree;
+    private itemSelection;
+    private indeterminateItems;
+    private itemsToBeSelected;
+    private itemsToBeIndeterminate;
+    constructor(tree: IgcTreeComponent);
+    /** Select range from last selected item to the current specified item. */
+    selectMultipleItems(item: IgcTreeItemComponent): void;
+    /** Select the specified item and emit event. */
+    selectItem(item: IgcTreeItemComponent): void;
+    /** Deselect the specified item and emit event. */
+    deselectItem(item: IgcTreeItemComponent): void;
+    /** Clears item selection */
+    clearItemsSelection(): void;
+    isItemSelected(item: IgcTreeItemComponent): boolean;
+    isItemIndeterminate(item: IgcTreeItemComponent): boolean;
+    /** Called on item`s disconnectedCallback */
+    ensureStateOnItemDelete(item: IgcTreeItemComponent): void;
+    /** Retrigger the selection state of the item. */
+    retriggerItemState(item: IgcTreeItemComponent): void;
+    private emitItemSelectionEvent;
+    /** Select specified items. No event is emitted. */
+    selectItemsWithNoEvent(items: IgcTreeItemComponent[]): void;
+    /** Deselect specified items. No event is emitted. */
+    deselectItemsWithNoEvent(items?: IgcTreeItemComponent[], onDelete?: boolean): void;
+    private emitCascadeItemSelectionEvent;
+    private cascadeSelectItemsWithNoEvent;
+    private cascadeDeselectItemsWithNoEvent;
+    /**
+     * populates the itemsToBeSelected and itemsToBeIndeterminate sets
+     * with the items which will be eventually in selected/indeterminate state
+     */
+    private calculateItemsNewSelectionState;
+    /** Ensures proper selection state for all predescessors and descendants during a selection event */
+    private cascadeSelectionState;
+    /**
+     * recursively handle the selection state of the direct and indirect parents
+     */
+    private handleParentSelectionState;
+    /**
+     * Handle the selection state of a given item based the selection states of its direct children
+     */
+    private handleItemSelectionState;
+    /** Emits the `selectedChange` event for each item affected by the selection */
+    private updateItemsState;
+    /** Returns array of the selected items. */
+    private getSelectedItems;
+    /** Returns array of the items in indeterminate state. */
+    private getIndeterminateItems;
+    private areEqualCollections;
+    private selectDeselectItem;
+}

package/components/types.d.ts

@@ -0,0 +1,5 @@
+export type StyleVariant = 'primary' | 'info' | 'success' | 'warning' | 'danger';
+export type SelectionRangeDirection = 'none' | 'backward' | 'forward';
+export type RangeTextSelectMode = 'preserve' | 'select' | 'start' | 'end';
+export type TileManagerDragMode = 'none' | 'tile-header' | 'tile';
+export type TileManagerResizeMode = 'none' | 'hover' | 'always';

package/components/validation-container/themes/dark/validator.bootstrap.css.d.ts

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

package/components/validation-container/themes/dark/validator.fluent.css.d.ts

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

package/components/validation-container/themes/dark/validator.indigo.css.d.ts

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

package/components/validation-container/themes/dark/validator.material.css.d.ts

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

package/components/validation-container/themes/light/validator.bootstrap.css.d.ts

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

package/components/validation-container/themes/light/validator.fluent.css.d.ts

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

package/components/validation-container/themes/light/validator.indigo.css.d.ts

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

package/components/validation-container/themes/light/validator.material.css.d.ts

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

package/components/validation-container/themes/light/validator.shared.css.d.ts

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

package/components/validation-container/themes/shared/validator.common.css.d.ts

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

package/components/validation-container/themes/themes.d.ts

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

package/components/validation-container/themes/validator.base.css.d.ts

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

package/components/validation-container/validation-container.d.ts

@@ -0,0 +1,42 @@
+import { LitElement, type TemplateResult, nothing } from 'lit';
+import type { IgcFormControl } from '../common/mixins/forms/types.js';
+interface ValidationContainerConfig {
+    /** The id attribute for the validation container. */
+    id?: string;
+    /** Project the validation container to the given slot inside the host shadow DOM. */
+    slot?: string;
+    /** Additional part(s) that should be bound to the validation container. */
+    part?: string;
+    /** Whether the validation container should expose a helper-text slot. */
+    hasHelperText?: boolean;
+}
+/**
+ * @element igc-validator
+ *
+ * @csspart helper-text - The base wrapper
+ * @csspart validation-message - The validation error message container
+ * @csspart validation-icon - The validation error icon
+ */
+export default class IgcValidationContainerComponent extends LitElement {
+    static readonly tagName = "igc-validator";
+    static styles: import("lit").CSSResult[];
+    static register(): void;
+    static create(host: IgcFormControl, config?: ValidationContainerConfig): TemplateResult;
+    private _target;
+    private _hasSlottedContent;
+    invalid: boolean;
+    set target(value: IgcFormControl);
+    get target(): IgcFormControl;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    handleEvent({ type }: Event): void;
+    protected renderValidationMessage(slotName: string): TemplateResult<1>;
+    protected renderValidationSlots(validity: ValidityState, projected?: boolean): Generator<TemplateResult<1>, void, unknown>;
+    protected renderHelper(): TemplateResult<1> | typeof nothing;
+    protected render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-validator': IgcValidationContainerComponent;
+    }
+}
+export {};

package/custom-elements.json

@@ -11717,6 +11717,18 @@
             {
               "description": "The container wrapping the tile’s main content.",
               "name": "content-container"
+            },
+            {
+              "description": "The part for the side adorner of the encapsulated resize element.",
+              "name": "trigger-side"
+            },
+            {
+              "description": "The part for the corner adorner of the encapsulated resize element.",
+              "name": "trigger"
+            },
+            {
+              "description": "The part for the bottom adorner of the encapsulated resize element.",
+              "name": "trigger-bottom"
             }
           ],
           "slots": [
@@ -57440,14 +57452,6 @@
             "module": "./components/types.js"
           }
         },
-        {
-          "kind": "js",
-          "name": "TileManagerDragAction",
-          "declaration": {
-            "name": "TileManagerDragAction",
-            "module": "./components/types.js"
-          }
-        },
         {
           "kind": "js",
           "name": "TileManagerDragMode",