igniteui-webcomponents 3.1.0 → 3.2.0

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

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

package/components/tree/tree.common.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tree.common.js.map

package/components/tree/tree.common.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.common.js","sourceRoot":"","sources":["../../../src/components/tree/tree.common.ts"],"names":[],"mappings":"","sourcesContent":["import type IgcTreeItemComponent from './tree-item.js';\n\nexport interface IgcTreeEventMap {\n  igcSelection: CustomEvent<{ newSelection: IgcTreeItemComponent[] }>;\n  igcItemExpanding: CustomEvent<IgcTreeItemComponent>;\n  igcItemExpanded: CustomEvent<IgcTreeItemComponent>;\n  igcItemCollapsing: CustomEvent<IgcTreeItemComponent>;\n  igcItemCollapsed: CustomEvent<IgcTreeItemComponent>;\n  igcActiveItem: CustomEvent<IgcTreeItemComponent>;\n}\nexport interface IgcSelectionEventArgs {\n  detail: { readonly newSelection: IgcTreeItemComponent[] };\n  cancelable: boolean;\n}\n"]}

package/components/tree/tree.d.ts

@@ -0,0 +1,71 @@
+import { LitElement } from 'lit';
+import { Constructor } from '../common/mixins/constructor.js';
+import IgcTreeItemComponent from './tree-item.js';
+import { IgcTreeEventMap } from './tree.common.js';
+import { IgcTreeNavigationService } from './tree.navigation.js';
+import { IgcTreeSelectionService } from './tree.selection.js';
+declare type Direction = 'ltr' | 'rtl' | 'auto';
+declare const IgcTreeComponent_base: Constructor<import("../common/mixins/sizable.js").SizableInterface> & Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcTreeEventMap>> & 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 igcItemActivated - Emitted when the tree's `active` item changes.
+ */
+export default class IgcTreeComponent extends IgcTreeComponent_base {
+    /** @private */
+    static readonly tagName = "igc-tree";
+    /** @private */
+    static styles: import("lit").CSSResult;
+    /** @private */
+    selectionService: IgcTreeSelectionService;
+    /** @private */
+    navService: IgcTreeNavigationService;
+    /** Whether a single or multiple of a parent's child items can be expanded. */
+    singleBranchExpand: boolean;
+    /** The selection state of the tree. */
+    selection: 'none' | 'multiple' | 'cascade';
+    /** The direction attribute of the control. */
+    dir: Direction;
+    protected onDirChange(): void;
+    protected onSizeChange(): 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.js

@@ -0,0 +1,139 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { watch } from '../common/decorators/watch.js';
+import { styles } from './themes/light/tree.base.css.js';
+import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
+import { SizableMixin } from '../common/mixins/sizable.js';
+import { IgcTreeNavigationService } from './tree.navigation.js';
+import { IgcTreeSelectionService } from './tree.selection.js';
+export default class IgcTreeComponent extends SizableMixin(EventEmitterMixin(LitElement)) {
+    constructor() {
+        super();
+        this.singleBranchExpand = false;
+        this.selection = 'none';
+        this.dir = 'auto';
+        this.selectionService = new IgcTreeSelectionService(this);
+        this.navService = new IgcTreeNavigationService(this, this.selectionService);
+    }
+    onDirChange() {
+        var _a;
+        (_a = this.items) === null || _a === void 0 ? void 0 : _a.forEach((item) => {
+            item.requestUpdate();
+        });
+    }
+    onSizeChange() {
+        var _a, _b, _c;
+        (_a = this.items) === null || _a === void 0 ? void 0 : _a.forEach((item) => {
+            item.requestUpdate();
+        });
+        (_c = (_b = this.navService.activeItem) === null || _b === void 0 ? void 0 : _b.wrapper) === null || _c === void 0 ? void 0 : _c.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+            inline: 'nearest',
+        });
+    }
+    selectionModeChange() {
+        var _a;
+        this.selectionService.clearItemsSelection();
+        (_a = this.items) === null || _a === void 0 ? void 0 : _a.forEach((item) => {
+            item.requestUpdate();
+        });
+    }
+    singleBranchExpandChange() {
+        if (this.singleBranchExpand) {
+            if (this.navService.activeItem) {
+                const path = this.navService.activeItem.path;
+                const remainExpanded = new Set(path.splice(0, path.length - 1));
+                this.items.forEach((item) => {
+                    if (!remainExpanded.has(item)) {
+                        item.collapseWithEvent();
+                    }
+                });
+            }
+            else {
+                this.items.forEach((item) => item.collapseWithEvent());
+            }
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'tree');
+        this.addEventListener('keydown', this.handleKeydown);
+        this.items.forEach((i) => {
+            i.init = true;
+        });
+        const firstNotDisabledItem = this.items.find((i) => !i.disabled);
+        if (firstNotDisabledItem) {
+            firstNotDisabledItem.tabIndex = 0;
+            this.navService.focusItem(firstNotDisabledItem);
+        }
+    }
+    get items() {
+        return Array.from(this.querySelectorAll(`igc-tree-item`));
+    }
+    handleKeydown(event) {
+        this.navService.handleKeydown(event);
+    }
+    expandToItem(item) {
+        if (item && item.parent) {
+            item.path.forEach((i) => {
+                if (i !== item && !i.expanded) {
+                    i.expanded = true;
+                }
+            });
+        }
+    }
+    select(items) {
+        if (!items) {
+            items =
+                this.selection === 'cascade'
+                    ? this.items.filter((item) => item.level === 0)
+                    : this.items;
+        }
+        this.selectionService.selectItemsWithNoEvent(items);
+    }
+    deselect(items) {
+        this.selectionService.deselectItemsWithNoEvent(items);
+    }
+    expand(items) {
+        items = items || this.items;
+        items.forEach((item) => (item.expanded = true));
+    }
+    collapse(items) {
+        items = items || this.items;
+        items.forEach((item) => (item.expanded = false));
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+IgcTreeComponent.tagName = 'igc-tree';
+IgcTreeComponent.styles = styles;
+__decorate([
+    property({ attribute: 'single-branch-expand', reflect: true, type: Boolean })
+], IgcTreeComponent.prototype, "singleBranchExpand", void 0);
+__decorate([
+    property({ reflect: true })
+], IgcTreeComponent.prototype, "selection", void 0);
+__decorate([
+    property({ reflect: true })
+], IgcTreeComponent.prototype, "dir", void 0);
+__decorate([
+    watch('dir')
+], IgcTreeComponent.prototype, "onDirChange", null);
+__decorate([
+    watch('size', { waitUntilFirstUpdate: true })
+], IgcTreeComponent.prototype, "onSizeChange", null);
+__decorate([
+    watch('selection', { waitUntilFirstUpdate: true })
+], IgcTreeComponent.prototype, "selectionModeChange", null);
+__decorate([
+    watch('singleBranchExpand')
+], IgcTreeComponent.prototype, "singleBranchExpandChange", null);
+//# sourceMappingURL=tree.js.map

package/components/tree/tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.js","sourceRoot":"","sources":["../../../src/components/tree/tree.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAEzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAG3D,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAmB9D,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,YAAY,CACxD,iBAAiB,CAA2C,UAAU,CAAC,CACxE;IAoEC;QACE,KAAK,EAAE,CAAC;QAxDH,uBAAkB,GAAG,KAAK,CAAC;QAI3B,cAAS,GAAoC,MAAM,CAAC;QAI3C,QAAG,GAAc,MAAM,CAAC;QAiDtC,IAAI,CAAC,gBAAgB,GAAG,IAAI,uBAAuB,CAAC,IAAI,CAAC,CAAC;QAC1D,IAAI,CAAC,UAAU,GAAG,IAAI,wBAAwB,CAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC9E,CAAC;IAhDS,WAAW;;QACnB,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,CAAC,CAAC,IAA0B,EAAE,EAAE;YACjD,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC;IAGS,YAAY;;QACpB,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,CAAC,CAAC,IAA0B,EAAE,EAAE;YACjD,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC,CAAC,CAAC;QACH,MAAA,MAAA,IAAI,CAAC,UAAU,CAAC,UAAU,0CAAE,OAAO,0CAAE,cAAc,CAAC;YAClD,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,SAAS;SAClB,CAAC,CAAC;IACL,CAAC;IAGS,mBAAmB;;QAC3B,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,CAAC;QAC5C,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,CAAC,CAAC,IAA0B,EAAE,EAAE;YACjD,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC;IAGS,wBAAwB;QAChC,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAE3B,IAAI,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE;gBAC9B,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC;gBAC7C,MAAM,cAAc,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;gBAChE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;oBAC1B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;wBAC7B,IAAI,CAAC,iBAAiB,EAAE,CAAC;qBAC1B;gBACH,CAAC,CAAC,CAAC;aACJ;iBAAM;gBACL,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC;aACxD;SACF;IACH,CAAC;IAQe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAClC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAErD,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAuB,EAAE,EAAE;YAC7C,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC;QAChB,CAAC,CAAC,CAAC;QACH,MAAM,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAC1C,CAAC,CAAuB,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CACzC,CAAC;QACF,IAAI,oBAAoB,EAAE;YACxB,oBAAoB,CAAC,QAAQ,GAAG,CAAC,CAAC;YAClC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC;SACjD;IACH,CAAC;IAGD,IAAW,KAAK;QACd,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;IAC5D,CAAC;IAEO,aAAa,CAAC,KAAoB;QACxC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC;IAGM,YAAY,CAAC,IAA0B;QAC5C,IAAI,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE;YACvB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;gBACtB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE;oBAC7B,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC;iBACnB;YACH,CAAC,CAAC,CAAC;SACJ;IACH,CAAC;IAGM,MAAM,CAAC,KAA8B;QAC1C,IAAI,CAAC,KAAK,EAAE;YACV,KAAK;gBACH,IAAI,CAAC,SAAS,KAAK,SAAS;oBAC1B,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAA0B,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,CAAC,CAAC;oBACrE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;SAClB;QACD,IAAI,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC;IACtD,CAAC;IAGM,QAAQ,CAAC,KAA8B;QAC5C,IAAI,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;IACxD,CAAC;IAMM,MAAM,CAAC,KAA8B;QAC1C,KAAK,GAAG,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC;QAC5B,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC;IAClD,CAAC;IAMM,QAAQ,CAAC,KAA8B;QAC5C,KAAK,GAAG,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC;QAC5B,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC;IACnD,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAjJsB,wBAAO,GAAG,UAAU,CAAC;AAE9B,uBAAM,GAAG,MAAM,CAAC;AAS9B;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,sBAAsB,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4DAC5C;AAIlC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC+B;AAI3D;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACY;AAGxC;IADC,KAAK,CAAC,KAAK,CAAC;mDAKZ;AAGD;IADC,KAAK,CAAC,MAAM,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;oDAU7C;AAGD;IADC,KAAK,CAAC,WAAW,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;2DAMlD;AAGD;IADC,KAAK,CAAC,oBAAoB,CAAC;gEAgB3B","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { styles } from './themes/light/tree.base.css.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\nimport IgcTreeItemComponent from './tree-item.js';\nimport { IgcTreeEventMap } from './tree.common.js';\nimport { IgcTreeNavigationService } from './tree.navigation.js';\nimport { IgcTreeSelectionService } from './tree.selection.js';\n\ntype Direction = 'ltr' | 'rtl' | 'auto';\n\n/**\n * The tree allows users to represent hierarchical data in a tree-view structure,\n * maintaining parent-child relationships, as well as to define static tree-view structure without a corresponding data model.\n *\n * @element igc-tree\n *\n * @slot - Renders the tree items inside default slot.\n *\n * @fires igcSelection - Emitted when item selection is changing, before the selection completes.\n * @fires igcItemCollapsed - Emitted when tree item is collapsed.\n * @fires igcItemCollapsing - Emitted when tree item is about to collapse.\n * @fires igcItemExpanded - Emitted when tree item is expanded.\n * @fires igcItemExpanding - Emitted when tree item is about to expand.\n * @fires igcItemActivated - Emitted when the tree's `active` item changes.\n */\nexport default class IgcTreeComponent extends SizableMixin(\n  EventEmitterMixin<IgcTreeEventMap, Constructor<LitElement>>(LitElement)\n) {\n  /** @private */\n  public static readonly tagName = 'igc-tree';\n  /** @private */\n  public static styles = styles;\n\n  /** @private */\n  public selectionService!: IgcTreeSelectionService;\n  /** @private */\n  public navService!: IgcTreeNavigationService;\n\n  /** Whether a single or multiple of a parent's child items can be expanded. */\n  @property({ attribute: 'single-branch-expand', reflect: true, type: Boolean })\n  public singleBranchExpand = false;\n\n  /** The selection state of the tree. */\n  @property({ reflect: true })\n  public selection: 'none' | 'multiple' | 'cascade' = 'none';\n\n  /** The direction attribute of the control. */\n  @property({ reflect: true })\n  public override dir: Direction = 'auto';\n\n  @watch('dir')\n  protected onDirChange(): void {\n    this.items?.forEach((item: IgcTreeItemComponent) => {\n      item.requestUpdate();\n    });\n  }\n\n  @watch('size', { waitUntilFirstUpdate: true })\n  protected onSizeChange(): void {\n    this.items?.forEach((item: IgcTreeItemComponent) => {\n      item.requestUpdate();\n    });\n    this.navService.activeItem?.wrapper?.scrollIntoView({\n      behavior: 'smooth',\n      block: 'nearest',\n      inline: 'nearest',\n    });\n  }\n\n  @watch('selection', { waitUntilFirstUpdate: true })\n  protected selectionModeChange(): void {\n    this.selectionService.clearItemsSelection();\n    this.items?.forEach((item: IgcTreeItemComponent) => {\n      item.requestUpdate();\n    });\n  }\n\n  @watch('singleBranchExpand')\n  protected singleBranchExpandChange(): void {\n    if (this.singleBranchExpand) {\n      // if activeItem -> do not collapse its branch\n      if (this.navService.activeItem) {\n        const path = this.navService.activeItem.path;\n        const remainExpanded = new Set(path.splice(0, path.length - 1));\n        this.items.forEach((item) => {\n          if (!remainExpanded.has(item)) {\n            item.collapseWithEvent();\n          }\n        });\n      } else {\n        this.items.forEach((item) => item.collapseWithEvent());\n      }\n    }\n  }\n\n  constructor() {\n    super();\n    this.selectionService = new IgcTreeSelectionService(this);\n    this.navService = new IgcTreeNavigationService(this, this.selectionService);\n  }\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'tree');\n    this.addEventListener('keydown', this.handleKeydown);\n    // set init to true for all items which are rendered along with the tree\n    this.items.forEach((i: IgcTreeItemComponent) => {\n      i.init = true;\n    });\n    const firstNotDisabledItem = this.items.find(\n      (i: IgcTreeItemComponent) => !i.disabled\n    );\n    if (firstNotDisabledItem) {\n      firstNotDisabledItem.tabIndex = 0;\n      this.navService.focusItem(firstNotDisabledItem);\n    }\n  }\n\n  /** Returns all of the tree's items. */\n  public get items(): Array<IgcTreeItemComponent> {\n    return Array.from(this.querySelectorAll(`igc-tree-item`));\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    this.navService.handleKeydown(event);\n  }\n\n  /** @private */\n  public expandToItem(item: IgcTreeItemComponent): void {\n    if (item && item.parent) {\n      item.path.forEach((i) => {\n        if (i !== item && !i.expanded) {\n          i.expanded = true;\n        }\n      });\n    }\n  }\n\n  /** Select all items if the items collection is empty. Otherwise, select the items in the items collection. */\n  public select(items?: IgcTreeItemComponent[]): void {\n    if (!items) {\n      items =\n        this.selection === 'cascade'\n          ? this.items.filter((item: IgcTreeItemComponent) => item.level === 0)\n          : this.items;\n    }\n    this.selectionService.selectItemsWithNoEvent(items);\n  }\n\n  /** Deselect all items if the items collection is empty. Otherwise, deselect the items in the items collection. */\n  public deselect(items?: IgcTreeItemComponent[]): void {\n    this.selectionService.deselectItemsWithNoEvent(items);\n  }\n\n  /**\n   * Expands all of the passed items.\n   * If no items are passed, expands ALL items.\n   */\n  public expand(items?: IgcTreeItemComponent[]): void {\n    items = items || this.items;\n    items.forEach((item) => (item.expanded = true));\n  }\n\n  /**\n   * Collapses all of the passed items.\n   * If no items are passed, collapses ALL items.\n   */\n  public collapse(items?: IgcTreeItemComponent[]): void {\n    items = items || this.items;\n    items.forEach((item) => (item.expanded = false));\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-tree': IgcTreeComponent;\n  }\n}\n"]}

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

@@ -0,0 +1,41 @@
+import IgcTreeComponent from './tree.js';
+import IgcTreeItemComponent from './tree-item.js';
+import { 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.navigation.js

@@ -0,0 +1,260 @@
+export const NAVIGATION_KEYS = new Set([
+    'down',
+    'up',
+    'left',
+    'right',
+    'arrowdown',
+    'arrowup',
+    'arrowleft',
+    'arrowright',
+    'home',
+    'end',
+    'space',
+    'spacebar',
+    ' ',
+]);
+export class IgcTreeNavigationService {
+    constructor(tree, selectionService) {
+        this._focusedItem = null;
+        this._lastFocusedItem = null;
+        this._activeItem = null;
+        this._visibleChildren = [];
+        this._invisibleChildren = new Set();
+        this._disabledChildren = new Set();
+        this.tree = tree;
+        this.selectionService = selectionService;
+    }
+    updateVisChild() {
+        var _a;
+        this._visibleChildren = ((_a = this.tree) === null || _a === void 0 ? void 0 : _a.items)
+            ? this.tree.items.filter((i) => !(this._invisibleChildren.has(i) || this._disabledChildren.has(i)))
+            : [];
+    }
+    get focusedItem() {
+        return this._focusedItem;
+    }
+    focusItem(value, shouldFocus = true) {
+        var _a;
+        if (this._focusedItem === value) {
+            return;
+        }
+        this._lastFocusedItem = this._focusedItem;
+        if (this._lastFocusedItem) {
+            this._lastFocusedItem.removeAttribute('tabindex');
+        }
+        this._focusedItem = value;
+        if (this._focusedItem !== null && shouldFocus) {
+            this._focusedItem.tabIndex = 0;
+            this._focusedItem.focus({
+                preventScroll: true,
+            });
+            (_a = this._focusedItem.wrapper) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'nearest',
+            });
+        }
+    }
+    get activeItem() {
+        return this._activeItem;
+    }
+    setActiveItem(value, shouldEmit = true) {
+        if (this._activeItem === value) {
+            return;
+        }
+        if (this._activeItem && value) {
+            this._activeItem.active = false;
+        }
+        this._activeItem = value;
+        if (this._activeItem) {
+            this._activeItem.active = true;
+        }
+        if (shouldEmit && this._activeItem) {
+            this.tree.emitEvent('igcActiveItem', { detail: this._activeItem });
+        }
+    }
+    get visibleChildren() {
+        return this._visibleChildren;
+    }
+    update_disabled_cache(item) {
+        if (item.disabled) {
+            this._disabledChildren.add(item);
+        }
+        else {
+            this._disabledChildren.delete(item);
+        }
+        this.updateVisChild();
+    }
+    delete_item(item) {
+        if (this.activeItem === item) {
+            this.setActiveItem(null);
+        }
+        if (this.focusedItem === item) {
+            this.focusItem(null, false);
+            const firstNotDisableItem = this.tree.items.find((i) => !i.disabled);
+            if (firstNotDisableItem) {
+                firstNotDisableItem.tabIndex = 0;
+                this.focusItem(firstNotDisableItem, false);
+            }
+        }
+    }
+    update_visible_cache(item, expanded, shouldUpdateNestedChildren = true, shouldUpdate = true) {
+        var _a, _b;
+        if (expanded && !this._invisibleChildren.has(item)) {
+            (_a = item.getChildren()) === null || _a === void 0 ? void 0 : _a.forEach((child) => {
+                this._invisibleChildren.delete(child);
+                if (shouldUpdateNestedChildren) {
+                    this.update_visible_cache(child, child.expanded, true, false);
+                }
+            });
+        }
+        else {
+            (_b = item
+                .getChildren({ flatten: true })) === null || _b === void 0 ? void 0 : _b.forEach((c) => this._invisibleChildren.add(c));
+        }
+        if (shouldUpdate) {
+            this.updateVisChild();
+        }
+    }
+    setFocusedAndActiveItem(item, isActive = true, shouldFocus = true) {
+        if (isActive) {
+            this.setActiveItem(item);
+        }
+        this.focusItem(item, shouldFocus);
+    }
+    handleKeydown(event) {
+        const key = event.key.toLowerCase();
+        if (!this.focusedItem) {
+            return;
+        }
+        if (!(NAVIGATION_KEYS.has(key) || key === '*')) {
+            if (key === 'enter') {
+                this.setActiveItem(this.focusedItem);
+            }
+            return;
+        }
+        event.preventDefault();
+        this.handleNavigation(event);
+    }
+    handleNavigation(event) {
+        switch (event.key.toLowerCase()) {
+            case 'home':
+                this.setFocusedAndActiveItem(this.visibleChildren[0]);
+                break;
+            case 'end':
+                this.setFocusedAndActiveItem(this.visibleChildren[this.visibleChildren.length - 1]);
+                break;
+            case 'arrowleft':
+            case 'left':
+                if (this.tree.dir === 'rtl') {
+                    this.handleArrowRight();
+                }
+                else {
+                    this.handleArrowLeft();
+                }
+                break;
+            case 'arrowright':
+            case 'right':
+                if (this.tree.dir === 'rtl') {
+                    this.handleArrowLeft();
+                }
+                else {
+                    this.handleArrowRight();
+                }
+                break;
+            case 'arrowup':
+            case 'up':
+                this.handleUpDownArrow(true, event);
+                break;
+            case 'arrowdown':
+            case 'down':
+                this.handleUpDownArrow(false, event);
+                break;
+            case '*':
+                this.handleAsterisk();
+                break;
+            case ' ':
+            case 'spacebar':
+            case 'space':
+                this.handleSpace(event.shiftKey);
+                break;
+            default:
+                return;
+        }
+    }
+    handleArrowLeft() {
+        var _a, _b, _c;
+        if (((_a = this.focusedItem) === null || _a === void 0 ? void 0 : _a.expanded) && ((_b = this.focusedItem.getChildren()) === null || _b === void 0 ? void 0 : _b.length)) {
+            this.setActiveItem(this.focusedItem);
+            this.focusedItem.collapseWithEvent();
+        }
+        else {
+            const parentItem = (_c = this.focusedItem) === null || _c === void 0 ? void 0 : _c.parent;
+            if (parentItem && !parentItem.disabled) {
+                this.setFocusedAndActiveItem(parentItem);
+            }
+        }
+    }
+    handleArrowRight() {
+        var _a, _b;
+        if (((_a = this.focusedItem.getChildren()) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            if (!((_b = this.focusedItem) === null || _b === void 0 ? void 0 : _b.expanded)) {
+                this.setActiveItem(this.focusedItem);
+                this.focusedItem.expandWithEvent();
+            }
+            else {
+                const firstChild = this.focusedItem
+                    .getChildren()
+                    .find((item) => !item.disabled);
+                if (firstChild) {
+                    this.setFocusedAndActiveItem(firstChild);
+                }
+            }
+        }
+    }
+    handleUpDownArrow(isUp, event) {
+        const next = this.getVisibleItem(this.focusedItem, isUp ? -1 : 1);
+        if (next === this.focusedItem) {
+            return;
+        }
+        if (event.ctrlKey) {
+            this.setFocusedAndActiveItem(next, false);
+        }
+        else {
+            this.setFocusedAndActiveItem(next);
+        }
+    }
+    handleAsterisk() {
+        var _a, _b, _c;
+        const items = ((_a = this.focusedItem) === null || _a === void 0 ? void 0 : _a.parent)
+            ? (_b = this.focusedItem.parent) === null || _b === void 0 ? void 0 : _b.getChildren()
+            : (_c = this.tree.items) === null || _c === void 0 ? void 0 : _c.filter((item) => item.level === 0);
+        items === null || items === void 0 ? void 0 : items.forEach((item) => {
+            if (!item.disabled && !item.expanded && item.hasChildren) {
+                item.expandWithEvent();
+            }
+        });
+    }
+    handleSpace(shiftKey = false) {
+        if (this.tree.selection === 'none') {
+            this.setActiveItem(this.focusedItem);
+            return;
+        }
+        this.setActiveItem(this.focusedItem);
+        if (shiftKey) {
+            this.selectionService.selectMultipleItems(this.focusedItem);
+            return;
+        }
+        if (this.focusedItem.selected) {
+            this.selectionService.deselectItem(this.focusedItem);
+        }
+        else {
+            this.selectionService.selectItem(this.focusedItem);
+        }
+    }
+    getVisibleItem(item, dir = 1) {
+        const itemIndex = this.visibleChildren.indexOf(item);
+        return this.visibleChildren[itemIndex + dir] || item;
+    }
+}
+//# sourceMappingURL=tree.navigation.js.map

package/components/tree/tree.navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.navigation.js","sourceRoot":"","sources":["../../../src/components/tree/tree.navigation.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,GAAG,CAAC;IACrC,MAAM;IACN,IAAI;IACJ,MAAM;IACN,OAAO;IACP,WAAW;IACX,SAAS;IACT,WAAW;IACX,YAAY;IACZ,MAAM;IACN,KAAK;IACL,OAAO;IACP,UAAU;IACV,GAAG;CACJ,CAAC,CAAC;AAEH,MAAM,OAAO,wBAAwB;IAanC,YACE,IAAsB,EACtB,gBAAyC;QAXnC,iBAAY,GAAgC,IAAI,CAAC;QAEjD,qBAAgB,GAAgC,IAAI,CAAC;QACrD,gBAAW,GAAgC,IAAI,CAAC;QAEhD,qBAAgB,GAA2B,EAAE,CAAC;QAC9C,uBAAkB,GAA8B,IAAI,GAAG,EAAE,CAAC;QAC1D,sBAAiB,GAA8B,IAAI,GAAG,EAAE,CAAC;QAM/D,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;IAC3C,CAAC;IAEM,cAAc;;QACnB,IAAI,CAAC,gBAAgB,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK;YACtC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CACpB,CAAC,CAAuB,EAAE,EAAE,CAC1B,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CACrE;YACH,CAAC,CAAC,EAAE,CAAC;IACT,CAAC;IAED,IAAW,WAAW;QACpB,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAEM,SAAS,CAAC,KAAkC,EAAE,WAAW,GAAG,IAAI;;QACrE,IAAI,IAAI,CAAC,YAAY,KAAK,KAAK,EAAE;YAC/B,OAAO;SACR;QACD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAC;QAC1C,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;SACnD;QACD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,IAAI,WAAW,EAAE;YAC7C,IAAI,CAAC,YAAY,CAAC,QAAQ,GAAG,CAAC,CAAC;YAC/B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;gBACtB,aAAa,EAAE,IAAI;aACpB,CAAC,CAAC;YACH,MAAA,IAAI,CAAC,YAAY,CAAC,OAAO,0CAAE,cAAc,CAAC;gBACxC,QAAQ,EAAE,QAAQ;gBAClB,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,SAAS;aAClB,CAAC,CAAC;SACJ;IACH,CAAC;IAED,IAAW,UAAU;QACnB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAEM,aAAa,CAAC,KAAkC,EAAE,UAAU,GAAG,IAAI;QACxE,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,EAAE;YAC9B,OAAO;SACR;QACD,IAAI,IAAI,CAAC,WAAW,IAAI,KAAK,EAAE;YAC7B,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,KAAK,CAAC;SACjC;QACD,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC;SAChC;QACD,IAAI,UAAU,IAAI,IAAI,CAAC,WAAW,EAAE;YAClC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,eAAe,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;SACpE;IACH,CAAC;IAED,IAAW,eAAe;QACxB,OAAO,IAAI,CAAC,gBAAgB,CAAC;IAC/B,CAAC;IAEM,qBAAqB,CAAC,IAA0B;QACrD,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;SAClC;aAAM;YACL,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;SACrC;QACD,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAEM,WAAW,CAAC,IAA0B;QAC3C,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,EAAE;YAC5B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;SAC1B;QACD,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,EAAE;YAC7B,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YAC5B,MAAM,mBAAmB,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAC9C,CAAC,CAAuB,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CACzC,CAAC;YACF,IAAI,mBAAmB,EAAE;gBACvB,mBAAmB,CAAC,QAAQ,GAAG,CAAC,CAAC;gBACjC,IAAI,CAAC,SAAS,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC;aAC5C;SACF;IACH,CAAC;IAEM,oBAAoB,CACzB,IAA0B,EAC1B,QAAiB,EACjB,0BAA0B,GAAG,IAAI,EACjC,YAAY,GAAG,IAAI;;QAEnB,IAAI,QAAQ,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAClD,MAAA,IAAI,CAAC,WAAW,EAAE,0CAAE,OAAO,CAAC,CAAC,KAA2B,EAAE,EAAE;gBAC1D,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBACtC,IAAI,0BAA0B,EAAE;oBAC9B,IAAI,CAAC,oBAAoB,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;iBAC/D;YACH,CAAC,CAAC,CAAC;SACJ;aAAM;YACL,MAAA,IAAI;iBACD,WAAW,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,0CAC7B,OAAO,CAAC,CAAC,CAAuB,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;SAC1E;QAED,IAAI,YAAY,EAAE;YAChB,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;IACH,CAAC;IAQM,uBAAuB,CAC5B,IAA0B,EAC1B,QAAQ,GAAG,IAAI,EACf,WAAW,GAAG,IAAI;QAElB,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;SAC1B;QACD,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IACpC,CAAC;IAGM,aAAa,CAAC,KAAoB;QACvC,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;QACpC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,OAAO;SACR;QACD,IAAI,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,GAAG,KAAK,GAAG,CAAC,EAAE;YAC9C,IAAI,GAAG,KAAK,OAAO,EAAE;gBACnB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;aACtC;YACD,OAAO;SACR;QACD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAEO,gBAAgB,CAAC,KAAoB;QAC3C,QAAQ,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE,EAAE;YAC/B,KAAK,MAAM;gBACT,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;gBACtD,MAAM;YACR,KAAK,KAAK;gBACR,IAAI,CAAC,uBAAuB,CAC1B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CACtD,CAAC;gBACF,MAAM;YACR,KAAK,WAAW,CAAC;YACjB,KAAK,MAAM;gBACT,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,KAAK,KAAK,EAAE;oBAC3B,IAAI,CAAC,gBAAgB,EAAE,CAAC;iBACzB;qBAAM;oBACL,IAAI,CAAC,eAAe,EAAE,CAAC;iBACxB;gBACD,MAAM;YACR,KAAK,YAAY,CAAC;YAClB,KAAK,OAAO;gBACV,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,KAAK,KAAK,EAAE;oBAC3B,IAAI,CAAC,eAAe,EAAE,CAAC;iBACxB;qBAAM;oBACL,IAAI,CAAC,gBAAgB,EAAE,CAAC;iBACzB;gBACD,MAAM;YACR,KAAK,SAAS,CAAC;YACf,KAAK,IAAI;gBACP,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;gBACpC,MAAM;YACR,KAAK,WAAW,CAAC;YACjB,KAAK,MAAM;gBACT,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;gBACrC,MAAM;YACR,KAAK,GAAG;gBACN,IAAI,CAAC,cAAc,EAAE,CAAC;gBACtB,MAAM;YACR,KAAK,GAAG,CAAC;YACT,KAAK,UAAU,CAAC;YAChB,KAAK,OAAO;gBACV,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;gBACjC,MAAM;YACR;gBACE,OAAO;SACV;IACH,CAAC;IAEO,eAAe;;QACrB,IAAI,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,MAAI,MAAA,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,0CAAE,MAAM,CAAA,EAAE;YACxE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACrC,IAAI,CAAC,WAAW,CAAC,iBAAiB,EAAE,CAAC;SACtC;aAAM;YACL,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,WAAW,0CAAE,MAAM,CAAC;YAC5C,IAAI,UAAU,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE;gBACtC,IAAI,CAAC,uBAAuB,CAAC,UAAU,CAAC,CAAC;aAC1C;SACF;IACH,CAAC;IAEO,gBAAgB;;QACtB,IAAI,CAAA,MAAA,IAAI,CAAC,WAAY,CAAC,WAAW,EAAE,0CAAE,MAAM,IAAG,CAAC,EAAE;YAC/C,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAAA,EAAE;gBAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;gBACrC,IAAI,CAAC,WAAY,CAAC,eAAe,EAAE,CAAC;aACrC;iBAAM;gBACL,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW;qBAChC,WAAW,EAAE;qBACb,IAAI,CAAC,CAAC,IAA0B,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;gBACxD,IAAI,UAAU,EAAE;oBACd,IAAI,CAAC,uBAAuB,CAAC,UAAU,CAAC,CAAC;iBAC1C;aACF;SACF;IACH,CAAC;IAEO,iBAAiB,CAAC,IAAa,EAAE,KAAoB;QAC3D,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,WAAY,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACnE,IAAI,IAAI,KAAK,IAAI,CAAC,WAAW,EAAE;YAC7B,OAAO;SACR;QAED,IAAI,KAAK,CAAC,OAAO,EAAE;YACjB,IAAI,CAAC,uBAAuB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;SAC3C;aAAM;YACL,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC;SACpC;IACH,CAAC;IAEO,cAAc;;QACpB,MAAM,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,MAAM;YACpC,CAAC,CAAC,MAAA,IAAI,CAAC,WAAY,CAAC,MAAM,0CAAE,WAAW,EAAE;YACzC,CAAC,CAAC,MAAA,IAAI,CAAC,IAAI,CAAC,KAAK,0CAAE,MAAM,CACrB,CAAC,IAA0B,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,CAAC,CACjD,CAAC;QACN,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,CAAC,IAA0B,EAAE,EAAE;YAC5C,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,EAAE;gBACxD,IAAI,CAAC,eAAe,EAAE,CAAC;aACxB;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,WAAW,CAAC,QAAQ,GAAG,KAAK;QAClC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,KAAK,MAAM,EAAE;YAClC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACrC,OAAO;SACR;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACrC,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAY,CAAC,CAAC;YAC7D,OAAO;SACR;QAED,IAAI,IAAI,CAAC,WAAY,CAAC,QAAQ,EAAE;YAC9B,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,IAAI,CAAC,WAAY,CAAC,CAAC;SACvD;aAAM;YACL,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,IAAI,CAAC,WAAY,CAAC,CAAC;SACrD;IACH,CAAC;IAGO,cAAc,CACpB,IAA0B,EAC1B,MAAc,CAAC;QAEf,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACrD,OAAO,IAAI,CAAC,eAAe,CAAC,SAAS,GAAG,GAAG,CAAC,IAAI,IAAI,CAAC;IACvD,CAAC;CACF","sourcesContent":["import IgcTreeComponent from './tree.js';\nimport IgcTreeItemComponent from './tree-item.js';\nimport { IgcTreeSelectionService } from './tree.selection.js';\n\nexport const NAVIGATION_KEYS = new Set([\n  'down',\n  'up',\n  'left',\n  'right',\n  'arrowdown',\n  'arrowup',\n  'arrowleft',\n  'arrowright',\n  'home',\n  'end',\n  'space',\n  'spacebar',\n  ' ',\n]);\n\nexport class IgcTreeNavigationService {\n  private tree!: IgcTreeComponent;\n  private selectionService!: IgcTreeSelectionService;\n\n  private _focusedItem: IgcTreeItemComponent | null = null;\n\n  private _lastFocusedItem: IgcTreeItemComponent | null = null;\n  private _activeItem: IgcTreeItemComponent | null = null;\n\n  private _visibleChildren: IgcTreeItemComponent[] = [];\n  private _invisibleChildren: Set<IgcTreeItemComponent> = new Set();\n  private _disabledChildren: Set<IgcTreeItemComponent> = new Set();\n\n  constructor(\n    tree: IgcTreeComponent,\n    selectionService: IgcTreeSelectionService\n  ) {\n    this.tree = tree;\n    this.selectionService = selectionService;\n  }\n\n  public updateVisChild(): void {\n    this._visibleChildren = this.tree?.items\n      ? this.tree.items.filter(\n          (i: IgcTreeItemComponent) =>\n            !(this._invisibleChildren.has(i) || this._disabledChildren.has(i))\n        )\n      : [];\n  }\n\n  public get focusedItem(): IgcTreeItemComponent | null {\n    return this._focusedItem;\n  }\n\n  public focusItem(value: IgcTreeItemComponent | null, shouldFocus = true) {\n    if (this._focusedItem === value) {\n      return;\n    }\n    this._lastFocusedItem = this._focusedItem;\n    if (this._lastFocusedItem) {\n      this._lastFocusedItem.removeAttribute('tabindex');\n    }\n    this._focusedItem = value;\n    if (this._focusedItem !== null && shouldFocus) {\n      this._focusedItem.tabIndex = 0;\n      this._focusedItem.focus({\n        preventScroll: true,\n      });\n      this._focusedItem.wrapper?.scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n        inline: 'nearest',\n      });\n    }\n  }\n\n  public get activeItem(): IgcTreeItemComponent | null {\n    return this._activeItem;\n  }\n\n  public setActiveItem(value: IgcTreeItemComponent | null, shouldEmit = true) {\n    if (this._activeItem === value) {\n      return;\n    }\n    if (this._activeItem && value) {\n      this._activeItem.active = false;\n    }\n    this._activeItem = value;\n    if (this._activeItem) {\n      this._activeItem.active = true;\n    }\n    if (shouldEmit && this._activeItem) {\n      this.tree.emitEvent('igcActiveItem', { detail: this._activeItem });\n    }\n  }\n\n  public get visibleChildren(): IgcTreeItemComponent[] {\n    return this._visibleChildren;\n  }\n\n  public update_disabled_cache(item: IgcTreeItemComponent): void {\n    if (item.disabled) {\n      this._disabledChildren.add(item);\n    } else {\n      this._disabledChildren.delete(item);\n    }\n    this.updateVisChild();\n  }\n\n  public delete_item(item: IgcTreeItemComponent) {\n    if (this.activeItem === item) {\n      this.setActiveItem(null);\n    }\n    if (this.focusedItem === item) {\n      this.focusItem(null, false);\n      const firstNotDisableItem = this.tree.items.find(\n        (i: IgcTreeItemComponent) => !i.disabled\n      );\n      if (firstNotDisableItem) {\n        firstNotDisableItem.tabIndex = 0;\n        this.focusItem(firstNotDisableItem, false);\n      }\n    }\n  }\n\n  public update_visible_cache(\n    item: IgcTreeItemComponent,\n    expanded: boolean,\n    shouldUpdateNestedChildren = true,\n    shouldUpdate = true\n  ): void {\n    if (expanded && !this._invisibleChildren.has(item)) {\n      item.getChildren()?.forEach((child: IgcTreeItemComponent) => {\n        this._invisibleChildren.delete(child);\n        if (shouldUpdateNestedChildren) {\n          this.update_visible_cache(child, child.expanded, true, false);\n        }\n      });\n    } else {\n      item\n        .getChildren({ flatten: true })\n        ?.forEach((c: IgcTreeItemComponent) => this._invisibleChildren.add(c));\n    }\n\n    if (shouldUpdate) {\n      this.updateVisChild();\n    }\n  }\n\n  /**\n   * Sets the item as focused (and active)\n   *\n   * @param item target item\n   * @param isActive if true, sets the item as active\n   */\n  public setFocusedAndActiveItem(\n    item: IgcTreeItemComponent,\n    isActive = true,\n    shouldFocus = true\n  ): void {\n    if (isActive) {\n      this.setActiveItem(item);\n    }\n    this.focusItem(item, shouldFocus);\n  }\n\n  /** Handler for keydown events. Used in tree.component.ts */\n  public handleKeydown(event: KeyboardEvent) {\n    const key = event.key.toLowerCase();\n    if (!this.focusedItem) {\n      return;\n    }\n    if (!(NAVIGATION_KEYS.has(key) || key === '*')) {\n      if (key === 'enter') {\n        this.setActiveItem(this.focusedItem);\n      }\n      return;\n    }\n    event.preventDefault();\n    this.handleNavigation(event);\n  }\n\n  private handleNavigation(event: KeyboardEvent) {\n    switch (event.key.toLowerCase()) {\n      case 'home':\n        this.setFocusedAndActiveItem(this.visibleChildren[0]);\n        break;\n      case 'end':\n        this.setFocusedAndActiveItem(\n          this.visibleChildren[this.visibleChildren.length - 1]\n        );\n        break;\n      case 'arrowleft':\n      case 'left':\n        if (this.tree.dir === 'rtl') {\n          this.handleArrowRight();\n        } else {\n          this.handleArrowLeft();\n        }\n        break;\n      case 'arrowright':\n      case 'right':\n        if (this.tree.dir === 'rtl') {\n          this.handleArrowLeft();\n        } else {\n          this.handleArrowRight();\n        }\n        break;\n      case 'arrowup':\n      case 'up':\n        this.handleUpDownArrow(true, event);\n        break;\n      case 'arrowdown':\n      case 'down':\n        this.handleUpDownArrow(false, event);\n        break;\n      case '*':\n        this.handleAsterisk();\n        break;\n      case ' ':\n      case 'spacebar':\n      case 'space':\n        this.handleSpace(event.shiftKey);\n        break;\n      default:\n        return;\n    }\n  }\n\n  private handleArrowLeft(): void {\n    if (this.focusedItem?.expanded && this.focusedItem.getChildren()?.length) {\n      this.setActiveItem(this.focusedItem);\n      this.focusedItem.collapseWithEvent();\n    } else {\n      const parentItem = this.focusedItem?.parent;\n      if (parentItem && !parentItem.disabled) {\n        this.setFocusedAndActiveItem(parentItem);\n      }\n    }\n  }\n\n  private handleArrowRight(): void {\n    if (this.focusedItem!.getChildren()?.length > 0) {\n      if (!this.focusedItem?.expanded) {\n        this.setActiveItem(this.focusedItem);\n        this.focusedItem!.expandWithEvent();\n      } else {\n        const firstChild = this.focusedItem\n          .getChildren()\n          .find((item: IgcTreeItemComponent) => !item.disabled);\n        if (firstChild) {\n          this.setFocusedAndActiveItem(firstChild);\n        }\n      }\n    }\n  }\n\n  private handleUpDownArrow(isUp: boolean, event: KeyboardEvent): void {\n    const next = this.getVisibleItem(this.focusedItem!, isUp ? -1 : 1);\n    if (next === this.focusedItem) {\n      return;\n    }\n\n    if (event.ctrlKey) {\n      this.setFocusedAndActiveItem(next, false);\n    } else {\n      this.setFocusedAndActiveItem(next);\n    }\n  }\n\n  private handleAsterisk(): void {\n    const items = this.focusedItem?.parent\n      ? this.focusedItem!.parent?.getChildren()\n      : this.tree.items?.filter(\n          (item: IgcTreeItemComponent) => item.level === 0\n        );\n    items?.forEach((item: IgcTreeItemComponent) => {\n      if (!item.disabled && !item.expanded && item.hasChildren) {\n        item.expandWithEvent();\n      }\n    });\n  }\n\n  private handleSpace(shiftKey = false): void {\n    if (this.tree.selection === 'none') {\n      this.setActiveItem(this.focusedItem);\n      return;\n    }\n\n    this.setActiveItem(this.focusedItem);\n    if (shiftKey) {\n      this.selectionService.selectMultipleItems(this.focusedItem!);\n      return;\n    }\n\n    if (this.focusedItem!.selected) {\n      this.selectionService.deselectItem(this.focusedItem!);\n    } else {\n      this.selectionService.selectItem(this.focusedItem!);\n    }\n  }\n\n  /** Gets the next visible item in the given direction - 1 -> next, -1 -> previous */\n  private getVisibleItem(\n    item: IgcTreeItemComponent,\n    dir: 1 | -1 = 1\n  ): IgcTreeItemComponent {\n    const itemIndex = this.visibleChildren.indexOf(item);\n    return this.visibleChildren[itemIndex + dir] || item;\n  }\n}\n"]}

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

@@ -0,0 +1,55 @@
+import IgcTreeComponent from './tree.js';
+import IgcTreeItemComponent from './tree-item.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;
+}