igniteui-webcomponents 3.0.0 → 3.3.0-beta.0

package/components/tree/tree-item.js

@@ -0,0 +1,458 @@
+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 { property, query, queryAssignedElements, state, } from 'lit/decorators.js';
+import { html, LitElement } from 'lit';
+import { partNameMap } from '../common/util.js';
+import { styles } from './themes/light/tree-item.base.css.js';
+import { styles as bootstrap } from './themes/light/tree-item.bootstrap.css.js';
+import { styles as fluent } from './themes/light/tree-item.fluent.css.js';
+import { styles as indigo } from './themes/light/tree-item.indigo.css.js';
+import { watch } from '../common/decorators/watch.js';
+import { themes } from '../../theming/theming-decorator.js';
+import { blazorSuppress } from '../common/decorators/blazorSuppress.js';
+import '../icon/icon.js';
+const sizeMultiplier = {
+    small: 1 / 2,
+    medium: 2 / 3,
+    large: 1,
+};
+let IgcTreeItemComponent = class IgcTreeItemComponent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.focusedProgrammatically = false;
+        this.parent = null;
+        this.init = false;
+        this.isFocused = false;
+        this.hasChildren = false;
+        this.level = 0;
+        this.indeterminate = false;
+        this.label = '';
+        this.expanded = false;
+        this.active = false;
+        this.disabled = false;
+        this.selected = false;
+        this.loading = false;
+        this.value = undefined;
+    }
+    bothChange() {
+        if (this.hasChildren) {
+            this.setAttribute('aria-expanded', this.expanded.toString());
+        }
+        else {
+            this.removeAttribute('aria-expanded');
+        }
+    }
+    expandedChange(oldValue) {
+        var _a;
+        (_a = this.navService) === null || _a === void 0 ? void 0 : _a.update_visible_cache(this, this.expanded);
+        if (!oldValue) {
+            return;
+        }
+        Promise.resolve().then(() => {
+            var _a, _b, _c, _d;
+            if (((_a = this.navService) === null || _a === void 0 ? void 0 : _a.focusedItem) !== this && !this.isFocused) {
+                (_d = (_c = (_b = this.navService) === null || _b === void 0 ? void 0 : _b.focusedItem) === null || _c === void 0 ? void 0 : _c.wrapper) === null || _d === void 0 ? void 0 : _d.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                    inline: 'nearest',
+                });
+            }
+        });
+    }
+    activeChange() {
+        var _a, _b;
+        if ((this.active && ((_a = this.navService) === null || _a === void 0 ? void 0 : _a.activeItem) === this) || !this.active) {
+            return;
+        }
+        if (this.navService) {
+            this.navService.setActiveItem(this, false);
+        }
+        (_b = this.tree) === null || _b === void 0 ? void 0 : _b.expandToItem(this);
+        Promise.resolve().then(() => {
+            var _a;
+            (_a = this.wrapper) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'nearest',
+            });
+        });
+    }
+    disabledChange() {
+        var _a;
+        (_a = this.navService) === null || _a === void 0 ? void 0 : _a.update_disabled_cache(this);
+    }
+    selectedChange() {
+        var _a, _b, _c, _d;
+        if (this.selected && !((_a = this.selectionService) === null || _a === void 0 ? void 0 : _a.isItemSelected(this))) {
+            (_b = this.selectionService) === null || _b === void 0 ? void 0 : _b.selectItemsWithNoEvent([this]);
+        }
+        if (!this.selected && ((_c = this.selectionService) === null || _c === void 0 ? void 0 : _c.isItemSelected(this))) {
+            (_d = this.selectionService) === null || _d === void 0 ? void 0 : _d.deselectItemsWithNoEvent([this]);
+        }
+    }
+    connectedCallback() {
+        var _a, _b;
+        super.connectedCallback();
+        this.tree = this.closest('igc-tree');
+        this.parent =
+            ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === 'igc-tree-item'
+                ? this.parentElement
+                : null;
+        this.level = this.parent ? this.parent.level + 1 : 0;
+        this.setAttribute('role', 'treeitem');
+        this.addEventListener('blur', this.onBlur);
+        this.addEventListener('focus', this.onFocus);
+        this.addEventListener('pointerdown', this.pointerDown);
+        this.activeChange();
+        if (this.init) {
+            this.selectedChange();
+        }
+        else {
+            (_b = this.selectionService) === null || _b === void 0 ? void 0 : _b.retriggerItemState(this);
+        }
+        this.init = false;
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        super.disconnectedCallback();
+        (_a = this.selectionService) === null || _a === void 0 ? void 0 : _a.ensureStateOnItemDelete(this);
+        (_b = this.navService) === null || _b === void 0 ? void 0 : _b.delete_item(this);
+    }
+    get selectionService() {
+        var _a;
+        return (_a = this.tree) === null || _a === void 0 ? void 0 : _a.selectionService;
+    }
+    get navService() {
+        var _a;
+        return (_a = this.tree) === null || _a === void 0 ? void 0 : _a.navService;
+    }
+    get parts() {
+        return {
+            selected: this.selected,
+            focused: this.isFocused,
+            active: this.active,
+        };
+    }
+    get directChildren() {
+        return Array.from(this.children).filter((x) => x.tagName.toLowerCase() === 'igc-tree-item');
+    }
+    get allChildren() {
+        return Array.from(this.querySelectorAll(`igc-tree-item`));
+    }
+    get path() {
+        var _a;
+        return ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.path) ? [...this.parent.path, this] : [this];
+    }
+    pointerDown(event) {
+        var _a;
+        event.stopPropagation();
+        if (this.disabled) {
+            return;
+        }
+        this.tabIndex = 0;
+        (_a = this.navService) === null || _a === void 0 ? void 0 : _a.setFocusedAndActiveItem(this, true, false);
+    }
+    expandIndicatorClick() {
+        if (this.disabled) {
+            return;
+        }
+        if (this.expanded) {
+            this.collapseWithEvent();
+        }
+        else {
+            this.expandWithEvent();
+        }
+    }
+    selectorClick(event) {
+        var _a, _b, _c;
+        event.preventDefault();
+        if (event.shiftKey) {
+            (_a = this.selectionService) === null || _a === void 0 ? void 0 : _a.selectMultipleItems(this);
+            return;
+        }
+        if (this.selected) {
+            (_b = this.selectionService) === null || _b === void 0 ? void 0 : _b.deselectItem(this);
+        }
+        else {
+            (_c = this.selectionService) === null || _c === void 0 ? void 0 : _c.selectItem(this);
+        }
+    }
+    onFocus() {
+        var _a, _b, _c;
+        if (this.disabled) {
+            return;
+        }
+        if (((_a = this.navService) === null || _a === void 0 ? void 0 : _a.focusedItem) !== this) {
+            (_b = this.navService) === null || _b === void 0 ? void 0 : _b.focusItem(this, false);
+            (_c = this.wrapper) === null || _c === void 0 ? void 0 : _c.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'nearest',
+            });
+        }
+        if (this.tabbableEl && this.tabbableEl.length) {
+            this.tabbableEl.forEach((element) => {
+                element.tabIndex = 0;
+            });
+            this.focusedProgrammatically = true;
+            this.tabbableEl[0].focus();
+            return;
+        }
+        this.isFocused = true;
+    }
+    onBlur() {
+        this.isFocused = false;
+    }
+    onFocusIn(ev) {
+        var _a;
+        ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
+        if (!this.disabled) {
+            if (!this.focusedProgrammatically) {
+                (_a = this.tabbableEl) === null || _a === void 0 ? void 0 : _a.forEach((element) => {
+                    element.tabIndex = 0;
+                });
+            }
+            this.removeAttribute('tabIndex');
+            this.isFocused = true;
+            this.focusedProgrammatically = false;
+        }
+    }
+    onFocusOut(ev) {
+        var _a, _b;
+        ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
+        this.isFocused = false;
+        (_a = this.tabbableEl) === null || _a === void 0 ? void 0 : _a.forEach((element) => {
+            element.tabIndex = -1;
+        });
+        if (((_b = this.navService) === null || _b === void 0 ? void 0 : _b.focusedItem) === this) {
+            this.setAttribute('tabindex', '0');
+        }
+    }
+    labelChange() {
+        const firstElement = this.contentList[0];
+        const tabbableSelector = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])';
+        this.tabbableEl = [
+            ...firstElement.querySelectorAll(tabbableSelector),
+        ];
+        if (firstElement.matches(tabbableSelector)) {
+            this.tabbableEl.splice(0, 0, firstElement);
+        }
+        if (this.tabbableEl && this.tabbableEl.length) {
+            this.setAttribute('role', 'none');
+            this.tabbableEl[0].setAttribute('role', 'treeitem');
+            this.tabbableEl.forEach((element) => {
+                element.tabIndex = -1;
+            });
+        }
+        else {
+            this.setAttribute('role', 'treeitem');
+        }
+    }
+    handleChange() {
+        var _a;
+        this.hasChildren = !!this.directChildren.length;
+        (_a = this.navService) === null || _a === void 0 ? void 0 : _a.update_visible_cache(this, this.expanded, false);
+    }
+    getChildren(options = { flatten: false }) {
+        if (options.flatten) {
+            return this.allChildren;
+        }
+        else {
+            return this.directChildren;
+        }
+    }
+    expandWithEvent() {
+        var _a, _b, _c;
+        if (this.expanded) {
+            return;
+        }
+        const args = {
+            detail: this,
+            cancelable: true,
+        };
+        const allowed = (_a = this.tree) === null || _a === void 0 ? void 0 : _a.emitEvent('igcItemExpanding', args);
+        if (!allowed) {
+            return;
+        }
+        if ((_b = this.tree) === null || _b === void 0 ? void 0 : _b.singleBranchExpand) {
+            const pathSet = new Set(this.path.splice(0, this.path.length - 1));
+            this.tree.items.forEach((item) => {
+                if (!pathSet.has(item)) {
+                    item.collapseWithEvent();
+                }
+            });
+        }
+        this.expanded = true;
+        (_c = this.tree) === null || _c === void 0 ? void 0 : _c.emitEvent('igcItemExpanded', { detail: this });
+    }
+    collapseWithEvent() {
+        var _a, _b;
+        if (!this.expanded) {
+            return;
+        }
+        const args = {
+            detail: this,
+            cancelable: true,
+        };
+        const allowed = (_a = this.tree) === null || _a === void 0 ? void 0 : _a.emitEvent('igcItemCollapsing', args);
+        if (!allowed) {
+            return;
+        }
+        this.expanded = false;
+        (_b = this.tree) === null || _b === void 0 ? void 0 : _b.emitEvent('igcItemCollapsed', { detail: this });
+    }
+    toggle() {
+        this.expanded = !this.expanded;
+    }
+    expand() {
+        this.expanded = true;
+    }
+    collapse() {
+        this.expanded = false;
+    }
+    render() {
+        var _a, _b, _c;
+        const size = this.level * (this.tree ? sizeMultiplier[this.tree.size] : 1);
+        return html `
+      <div
+        id="wrapper"
+        part="wrapper ${(_a = this.tree) === null || _a === void 0 ? void 0 : _a.size} ${partNameMap(this.parts)}"
+      >
+        <div
+          style="width: calc(${size} * var(--igc-tree-indentation-size))"
+          part="indentation"
+          aria-hidden="true"
+        >
+          <slot name="indentation"></slot>
+        </div>
+        <div part="indicator" aria-hidden="true">
+          ${this.loading
+            ? html `
+                <slot name="loading">
+                  <igc-circular-progress indeterminate></igc-circular-progress>
+                </slot>
+              `
+            : html `
+                <slot name="indicator" @click=${this.expandIndicatorClick}>
+                  ${this.hasChildren
+                ? html `
+                        <igc-icon
+                          name=${this.expanded
+                    ? 'keyboard_arrow_down'
+                    : ((_b = this.tree) === null || _b === void 0 ? void 0 : _b.dir) === 'rtl'
+                        ? 'navigate_before'
+                        : 'keyboard_arrow_right'}
+                          collection="internal"
+                        >
+                        </igc-icon>
+                      `
+                : ''}
+                </slot>
+              `}
+        </div>
+        ${((_c = this.tree) === null || _c === void 0 ? void 0 : _c.selection) !== 'none'
+            ? html `
+              <div part="select" aria-hidden="true">
+                <igc-checkbox
+                  @click=${this.selectorClick}
+                  .checked=${this.selected}
+                  .indeterminate=${this.indeterminate}
+                  .disabled=${this.disabled}
+                  tabindex="-1"
+                >
+                </igc-checkbox>
+              </div>
+            `
+            : ''}
+        <div part="label">
+          <slot
+            name="label"
+            @slotchange=${this.labelChange}
+            @focusin=${this.onFocusIn}
+            @focusout=${this.onFocusOut}
+          >
+            <span part="text">${this.label}</span>
+          </slot>
+        </div>
+      </div>
+      <div role="group">
+        <slot @slotchange=${this.handleChange} ?hidden=${!this.expanded}></slot>
+      </div>
+    `;
+    }
+};
+IgcTreeItemComponent.tagName = 'igc-tree-item';
+IgcTreeItemComponent.styles = styles;
+__decorate([
+    blazorSuppress()
+], IgcTreeItemComponent.prototype, "tree", void 0);
+__decorate([
+    blazorSuppress()
+], IgcTreeItemComponent.prototype, "init", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'label', flatten: true })
+], IgcTreeItemComponent.prototype, "contentList", void 0);
+__decorate([
+    query('#wrapper'),
+    blazorSuppress()
+], IgcTreeItemComponent.prototype, "wrapper", void 0);
+__decorate([
+    state()
+], IgcTreeItemComponent.prototype, "isFocused", void 0);
+__decorate([
+    state(),
+    blazorSuppress()
+], IgcTreeItemComponent.prototype, "hasChildren", void 0);
+__decorate([
+    state()
+], IgcTreeItemComponent.prototype, "level", void 0);
+__decorate([
+    state(),
+    blazorSuppress()
+], IgcTreeItemComponent.prototype, "indeterminate", void 0);
+__decorate([
+    property()
+], IgcTreeItemComponent.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], IgcTreeItemComponent.prototype, "expanded", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], IgcTreeItemComponent.prototype, "active", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], IgcTreeItemComponent.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], IgcTreeItemComponent.prototype, "selected", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], IgcTreeItemComponent.prototype, "loading", void 0);
+__decorate([
+    property({ attribute: true })
+], IgcTreeItemComponent.prototype, "value", void 0);
+__decorate([
+    watch('expanded', { waitUntilFirstUpdate: true }),
+    watch('hasChildren', { waitUntilFirstUpdate: true })
+], IgcTreeItemComponent.prototype, "bothChange", null);
+__decorate([
+    watch('expanded')
+], IgcTreeItemComponent.prototype, "expandedChange", null);
+__decorate([
+    watch('active', { waitUntilFirstUpdate: true })
+], IgcTreeItemComponent.prototype, "activeChange", null);
+__decorate([
+    watch('disabled')
+], IgcTreeItemComponent.prototype, "disabledChange", null);
+__decorate([
+    watch('selected', { waitUntilFirstUpdate: true })
+], IgcTreeItemComponent.prototype, "selectedChange", null);
+IgcTreeItemComponent = __decorate([
+    themes({ bootstrap, fluent, indigo })
+], IgcTreeItemComponent);
+export default IgcTreeItemComponent;
+//# sourceMappingURL=tree-item.js.map

package/components/tree/tree-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-item.js","sourceRoot":"","sources":["../../../src/components/tree/tree-item.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\nimport { html, LitElement } from 'lit';\nimport { partNameMap } from '../common/util.js';\nimport { styles } from './themes/light/tree-item.base.css.js';\nimport { styles as bootstrap } from './themes/light/tree-item.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/tree-item.fluent.css.js';\nimport { styles as indigo } from './themes/light/tree-item.indigo.css.js';\nimport type IgcTreeComponent from './tree.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { IgcTreeSelectionService } from './tree.selection.js';\nimport { IgcTreeNavigationService } from './tree.navigation.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { blazorSuppress } from '../common/decorators/blazorSuppress.js';\nimport '../icon/icon.js';\n\nconst sizeMultiplier: Record<'small' | 'medium' | 'large', number> = {\n  small: 1 / 2,\n  medium: 2 / 3,\n  large: 1,\n};\n\n/**\n * The tree-item component represents a child item of the tree component or another tree item.\n *\n * @element igc-tree-item\n *\n * @slot - Renders nested tree-item component.\n * @slot label - Renders the tree item container.\n * @slot indicator - Renders the expand indicator container.\n * @slot loading - Renders the tree item loading indicator container.\n * @slot indentation - Renders the container (by default the space) before the tree item.\n *\n * @csspart wrapper - The wrapper for the tree item.\n * @csspart selected - Indicates selected state. Applies to `wrapper`.\n * @csspart focused - Indicates focused state. Applies to `wrapper`.\n * @csspart active - Indicates an active state. Applies to `wrapper`.\n * @csspart indicator - The expand indicator of the tree item.\n * @csspart label - The tree item content.\n * @csspart text - The tree item displayed text.\n * @csspart select - The checkbox of the tree item when selection is enabled.\n */\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcTreeItemComponent extends LitElement {\n  /** @private */\n  public static readonly tagName = 'igc-tree-item';\n  /** @private */\n  public static override styles = styles;\n\n  private tabbableEl?: HTMLElement[];\n  private focusedProgrammatically = false;\n\n  /** A reference to the tree the item is a part of. */\n  @blazorSuppress()\n  public tree?: IgcTreeComponent;\n  /** The parent item of the current tree item (if any) */\n  public parent: IgcTreeItemComponent | null = null;\n\n  /** @private */\n  @blazorSuppress()\n  public init = false;\n\n  @queryAssignedElements({ slot: 'label', flatten: true })\n  private contentList!: Array<HTMLElement>;\n\n  /** @private */\n  @query('#wrapper')\n  @blazorSuppress()\n  public wrapper!: HTMLElement;\n\n  @state()\n  private isFocused = false;\n\n  /** @private */\n  @state()\n  @blazorSuppress()\n  public hasChildren = false;\n\n  /** The depth of the item, relative to the root. */\n  @state()\n  public level = 0;\n\n  /** @private */\n  @state()\n  @blazorSuppress()\n  public indeterminate = false;\n\n  /** The tree item label. */\n  @property()\n  public label = '';\n\n  /** The tree item expansion state. */\n  @property({ reflect: true, type: Boolean })\n  public expanded = false;\n\n  /** Marks the item as the tree's active item. */\n  @property({ reflect: true, type: Boolean })\n  public active = false;\n\n  /** Get/Set whether the tree item is disabled. Disabled items are ignored for user interactions. */\n  @property({ reflect: true, type: Boolean })\n  public disabled = false;\n\n  /** The tree item selection state. */\n  @property({ reflect: true, type: Boolean })\n  public selected = false;\n\n  /** To be used for load-on-demand scenarios in order to specify whether the item is loading data. */\n  @property({ reflect: true, type: Boolean })\n  public loading = false;\n\n  /**\n   * The value entry that the tree item is visualizing. Required for searching through items.\n   * @type any\n   */\n  @property({ attribute: true })\n  public value: any = undefined;\n\n  @watch('expanded', { waitUntilFirstUpdate: true })\n  @watch('hasChildren', { waitUntilFirstUpdate: true })\n  protected bothChange(): void {\n    if (this.hasChildren) {\n      this.setAttribute('aria-expanded', this.expanded.toString());\n    } else {\n      this.removeAttribute('aria-expanded');\n    }\n  }\n\n  @watch('expanded')\n  protected expandedChange(oldValue: boolean): void {\n    // always update the visible cache\n    this.navService?.update_visible_cache(this, this.expanded);\n    if (!oldValue) {\n      return;\n    }\n    // await for load on demand children\n    Promise.resolve().then(() => {\n      if (this.navService?.focusedItem !== this && !this.isFocused) {\n        this.navService?.focusedItem?.wrapper?.scrollIntoView({\n          behavior: 'smooth',\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      }\n    });\n  }\n\n  @watch('active', { waitUntilFirstUpdate: true })\n  protected activeChange(): void {\n    if ((this.active && this.navService?.activeItem === this) || !this.active) {\n      return;\n    }\n    if (this.navService) {\n      this.navService.setActiveItem(this, false);\n    }\n    // Expand and scroll to the newly active item\n    this.tree?.expandToItem(this);\n    // Await for expanding\n    Promise.resolve().then(() => {\n      this.wrapper?.scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n        inline: 'nearest',\n      });\n    });\n  }\n\n  @watch('disabled')\n  protected disabledChange(): void {\n    this.navService?.update_disabled_cache(this);\n  }\n\n  @watch('selected', { waitUntilFirstUpdate: true })\n  protected selectedChange(): void {\n    if (this.selected && !this.selectionService?.isItemSelected(this)) {\n      this.selectionService?.selectItemsWithNoEvent([this]);\n    }\n    if (!this.selected && this.selectionService?.isItemSelected(this)) {\n      this.selectionService?.deselectItemsWithNoEvent([this]);\n    }\n  }\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.tree = this.closest('igc-tree') as IgcTreeComponent;\n    this.parent =\n      this.parentElement?.tagName.toLowerCase() === 'igc-tree-item'\n        ? (this.parentElement as IgcTreeItemComponent)\n        : null;\n    this.level = this.parent ? this.parent.level + 1 : 0;\n    this.setAttribute('role', 'treeitem');\n    this.addEventListener('blur', this.onBlur);\n    this.addEventListener('focus', this.onFocus);\n    this.addEventListener('pointerdown', this.pointerDown);\n    this.activeChange();\n    // if the item is not added/moved runtime\n    if (this.init) {\n      this.selectedChange();\n    } else {\n      // retriger the item selection state in order to update the collections within the selectionService\n      // and to handle correctly the itemParents recursively to the top-most ancestor\n      this.selectionService?.retriggerItemState(this);\n    }\n    this.init = false;\n  }\n\n  public override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.selectionService?.ensureStateOnItemDelete(this);\n    this.navService?.delete_item(this);\n  }\n\n  private get selectionService(): IgcTreeSelectionService | undefined {\n    return this.tree?.selectionService;\n  }\n\n  private get navService(): IgcTreeNavigationService | undefined {\n    return this.tree?.navService;\n  }\n\n  private get parts() {\n    return {\n      selected: this.selected,\n      focused: this.isFocused,\n      active: this.active,\n    };\n  }\n\n  private get directChildren(): Array<IgcTreeItemComponent> {\n    return Array.from(this.children).filter(\n      (x) => x.tagName.toLowerCase() === 'igc-tree-item'\n    ) as IgcTreeItemComponent[];\n  }\n\n  private get allChildren(): Array<IgcTreeItemComponent> {\n    return Array.from(this.querySelectorAll(`igc-tree-item`));\n  }\n\n  /** The full path to the tree item, starting from the top-most ancestor. */\n  public get path(): IgcTreeItemComponent[] {\n    return this.parent?.path ? [...this.parent.path, this] : [this];\n  }\n\n  private pointerDown(event: MouseEvent): void {\n    event.stopPropagation();\n    if (this.disabled) {\n      return;\n    }\n    this.tabIndex = 0;\n    this.navService?.setFocusedAndActiveItem(this, true, false);\n  }\n\n  private expandIndicatorClick(): void {\n    if (this.disabled) {\n      return;\n    }\n    if (this.expanded) {\n      this.collapseWithEvent();\n    } else {\n      this.expandWithEvent();\n    }\n  }\n\n  private selectorClick(event: MouseEvent): void {\n    event.preventDefault();\n    if (event.shiftKey) {\n      this.selectionService?.selectMultipleItems(this);\n      return;\n    }\n    if (this.selected) {\n      this.selectionService?.deselectItem(this);\n    } else {\n      this.selectionService?.selectItem(this);\n    }\n  }\n\n  private onFocus(): void {\n    if (this.disabled) {\n      return;\n    }\n    if (this.navService?.focusedItem !== this) {\n      this.navService?.focusItem(this, false);\n      this.wrapper?.scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n        inline: 'nearest',\n      });\n    }\n    if (this.tabbableEl && this.tabbableEl.length) {\n      // set tabIndex = 0 to all tabbable elements\n      // focus the first one\n      this.tabbableEl.forEach((element: HTMLElement) => {\n        element.tabIndex = 0;\n      });\n      this.focusedProgrammatically = true;\n      this.tabbableEl[0].focus();\n      return;\n    }\n    this.isFocused = true;\n  }\n\n  private onBlur(): void {\n    this.isFocused = false;\n  }\n\n  private onFocusIn(ev: Event): void {\n    ev?.stopPropagation();\n    if (!this.disabled) {\n      // clicking directly over tabbable element when the item is not focused\n      if (!this.focusedProgrammatically) {\n        this.tabbableEl?.forEach((element: HTMLElement) => {\n          element.tabIndex = 0;\n        });\n      }\n      this.removeAttribute('tabIndex');\n      this.isFocused = true;\n      this.focusedProgrammatically = false;\n    }\n  }\n\n  private onFocusOut(ev: Event): void {\n    ev?.stopPropagation();\n    this.isFocused = false;\n    this.tabbableEl?.forEach((element: HTMLElement) => {\n      element.tabIndex = -1;\n    });\n\n    if (this.navService?.focusedItem === this) {\n      // called twice when clicking on already focused item with link (pointerDown handler)\n      this.setAttribute('tabindex', '0');\n    }\n  }\n\n  private labelChange(): void {\n    const firstElement = this.contentList[0];\n    const tabbableSelector =\n      'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"])';\n\n    this.tabbableEl = [\n      ...firstElement.querySelectorAll<HTMLElement>(tabbableSelector),\n    ];\n    if (firstElement.matches(tabbableSelector)) {\n      this.tabbableEl.splice(0, 0, firstElement);\n    }\n\n    if (this.tabbableEl && this.tabbableEl.length) {\n      this.setAttribute('role', 'none');\n      this.tabbableEl[0].setAttribute('role', 'treeitem');\n\n      this.tabbableEl.forEach((element: HTMLElement) => {\n        element.tabIndex = -1;\n      });\n    } else {\n      this.setAttribute('role', 'treeitem');\n    }\n  }\n\n  private handleChange(): void {\n    this.hasChildren = !!this.directChildren.length;\n    // there is no need to update nested children beacuse they're state is already up to date\n    this.navService?.update_visible_cache(this, this.expanded, false);\n  }\n\n  /**\n   * Returns a collection of child items.\n   * If the parameter value is true returns all tree item's direct children,\n   * otherwise - only the direct children.\n   */\n  public getChildren(\n    options: { flatten: boolean } = { flatten: false }\n  ): IgcTreeItemComponent[] {\n    if (options.flatten) {\n      return this.allChildren;\n    } else {\n      return this.directChildren;\n    }\n  }\n\n  /**\n   * @private\n   * Expands the tree item.\n   */\n  public expandWithEvent(): void {\n    if (this.expanded) {\n      return;\n    }\n    const args = {\n      detail: this,\n      cancelable: true,\n    };\n\n    const allowed = this.tree?.emitEvent('igcItemExpanding', args);\n\n    if (!allowed) {\n      return;\n    }\n\n    if (this.tree?.singleBranchExpand) {\n      const pathSet = new Set(this.path.splice(0, this.path.length - 1));\n      this.tree.items.forEach((item: IgcTreeItemComponent) => {\n        if (!pathSet.has(item)) {\n          item.collapseWithEvent();\n        }\n      });\n    }\n\n    this.expanded = true;\n    this.tree?.emitEvent('igcItemExpanded', { detail: this });\n  }\n\n  /**\n   * @private\n   * Collapses the tree item.\n   */\n  public collapseWithEvent(): void {\n    if (!this.expanded) {\n      return;\n    }\n    const args = {\n      detail: this,\n      cancelable: true,\n    };\n\n    const allowed = this.tree?.emitEvent('igcItemCollapsing', args);\n\n    if (!allowed) {\n      return;\n    }\n    this.expanded = false;\n    this.tree?.emitEvent('igcItemCollapsed', { detail: this });\n  }\n\n  /** Toggles tree item expansion state. */\n  public toggle(): void {\n    this.expanded = !this.expanded;\n  }\n\n  /** Expands the tree item. */\n  public expand(): void {\n    this.expanded = true;\n  }\n\n  /** Collapses the tree item. */\n  public collapse(): void {\n    this.expanded = false;\n  }\n\n  protected override render() {\n    const size = this.level * (this.tree ? sizeMultiplier[this.tree!.size] : 1);\n\n    return html`\n      <div\n        id=\"wrapper\"\n        part=\"wrapper ${this.tree?.size} ${partNameMap(this.parts)}\"\n      >\n        <div\n          style=\"width: calc(${size} * var(--igc-tree-indentation-size))\"\n          part=\"indentation\"\n          aria-hidden=\"true\"\n        >\n          <slot name=\"indentation\"></slot>\n        </div>\n        <div part=\"indicator\" aria-hidden=\"true\">\n          ${this.loading\n            ? html`\n                <slot name=\"loading\">\n                  <igc-circular-progress indeterminate></igc-circular-progress>\n                </slot>\n              `\n            : html`\n                <slot name=\"indicator\" @click=${this.expandIndicatorClick}>\n                  ${this.hasChildren\n                    ? html`\n                        <igc-icon\n                          name=${this.expanded\n                            ? 'keyboard_arrow_down'\n                            : this.tree?.dir === 'rtl'\n                            ? 'navigate_before'\n                            : 'keyboard_arrow_right'}\n                          collection=\"internal\"\n                        >\n                        </igc-icon>\n                      `\n                    : ''}\n                </slot>\n              `}\n        </div>\n        ${this.tree?.selection !== 'none'\n          ? html`\n              <div part=\"select\" aria-hidden=\"true\">\n                <igc-checkbox\n                  @click=${this.selectorClick}\n                  .checked=${this.selected}\n                  .indeterminate=${this.indeterminate}\n                  .disabled=${this.disabled}\n                  tabindex=\"-1\"\n                >\n                </igc-checkbox>\n              </div>\n            `\n          : ''}\n        <div part=\"label\">\n          <slot\n            name=\"label\"\n            @slotchange=${this.labelChange}\n            @focusin=${this.onFocusIn}\n            @focusout=${this.onFocusOut}\n          >\n            <span part=\"text\">${this.label}</span>\n          </slot>\n        </div>\n      </div>\n      <div role=\"group\">\n        <slot @slotchange=${this.handleChange} ?hidden=${!this.expanded}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-tree-item': IgcTreeItemComponent;\n  }\n}\n"]}

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> & import("../common/mixins/constructor.js").AbstractConstructor<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 {};