igniteui-webcomponents 7.2.3 → 7.3.0-beta.0

package/components/tree/tree-item.js

@@ -4,91 +4,63 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, nothing } from 'lit';
+import { html, LitElement } from 'lit';
 import { property, query, queryAssignedElements, state, } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { addAnimationController } from '../../animations/player.js';
-import { growVerIn, growVerOut } from '../../animations/presets/grow/index.js';
-import { addThemingController } from '../../theming/theming-controller.js';
+import { addAnimationController } from '#animations/player.js';
+import { growVerIn, growVerOut } from '#animations/presets/grow/index.js';
+import { registerComponent } from '#internals/definitions/register.js';
+import { partMap } from '#internals/part-map.js';
+import { scrollIntoView } from '#internals/utils/dom.js';
+import { addSafeEventListener, getElementFromPath, } from '#internals/utils/events.js';
+import { addThemingController } from '#theming/theming-controller.js';
 import IgcCheckboxComponent from '../checkbox/checkbox.js';
-import { watch } from '../common/decorators/watch.js';
-import { registerComponent } from '../common/definitions/register.js';
-import { partMap } from '../common/part-map.js';
-import { addSafeEventListener, getElementFromPath, isLTR, } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcCircularProgressComponent from '../progress/circular-progress.js';
 import { styles } from './themes/item.base.css.js';
 import { all } from './themes/item.js';
 import { styles as shared } from './themes/shared/item.common.css.js';
+import { clearTreeItemAria, getTreeItemChildren, hasTreeItemChildren, setAriaState, TREE_ITEM_TAG, TREE_TAG, } from './tree.common.js';
 export default class IgcTreeItemComponent extends LitElement {
-    static { this.tagName = 'igc-tree-item'; }
+    static { this.tagName = TREE_ITEM_TAG; }
     static { this.styles = [styles, shared]; }
     static register() {
         registerComponent(IgcTreeItemComponent, IgcIconComponent, IgcCheckboxComponent, IgcCircularProgressComponent);
     }
-    async toggleAnimation(dir) {
-        const animation = dir === 'open' ? growVerIn : growVerOut;
-        return this.animationPlayer.playExclusive(animation());
+    get tree() {
+        return this._tree;
     }
-    bothChange() {
-        if (this.hasChildren) {
-            this.setAttribute('aria-expanded', this.expanded.toString());
-        }
-        else {
-            this.removeAttribute('aria-expanded');
-        }
+    get _selectionService() {
+        return this.tree?.selectionService;
     }
-    expandedChange(oldValue) {
-        this.navService?.update_visible_cache(this, this.expanded);
-        if (!oldValue) {
-            return;
-        }
-        Promise.resolve().then(() => {
-            if (this.navService?.focusedItem !== this && !this.isFocused) {
-                this.navService?.focusedItem?.wrapper?.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'nearest',
-                    inline: 'nearest',
-                });
-            }
-        });
+    get _navService() {
+        return this.tree?.navService;
     }
-    activeChange() {
-        if ((this.active && this.navService?.activeItem === this) || !this.active) {
-            return;
-        }
-        if (this.navService) {
-            this.navService.setActiveItem(this, false);
-        }
-        this.tree?.expandToItem(this);
-        Promise.resolve().then(() => {
-            this.wrapper?.scrollIntoView({
-                behavior: 'smooth',
-                block: 'nearest',
-                inline: 'nearest',
-            });
-        });
+    get _parts() {
+        return {
+            wrapper: true,
+            selected: this.selected,
+            focused: this._isFocused,
+            active: this.active,
+        };
     }
-    disabledChange() {
-        this.navService?.update_disabled_cache(this);
+    get _directChildren() {
+        return getTreeItemChildren(this);
     }
-    selectedChange() {
-        if (this.selected && !this.selectionService?.isItemSelected(this)) {
-            this.selectionService?.selectItemsWithNoEvent([this]);
-        }
-        if (!this.selected && this.selectionService?.isItemSelected(this)) {
-            this.selectionService?.deselectItemsWithNoEvent([this]);
-        }
+    get _allChildren() {
+        const result = [];
+        this._collectDescendants(result);
+        return result;
     }
     constructor() {
         super();
-        this.focusedProgrammatically = false;
-        this.groupRef = createRef();
-        this.animationPlayer = addAnimationController(this, this.groupRef);
+        this._focusedProgrammatically = false;
+        this._groupRef = createRef();
+        this._animationPlayer = addAnimationController(this, this._groupRef);
         this.parent = null;
         this.init = false;
-        this.isFocused = false;
+        this._isFocused = false;
         this.hasChildren = false;
         this.level = 0;
         this.indeterminate = false;
@@ -100,172 +72,215 @@ export default class IgcTreeItemComponent extends LitElement {
         this.loading = false;
         this.value = undefined;
         addThemingController(this, all);
-        addSafeEventListener(this, 'click', this.itemClick);
-        addSafeEventListener(this, 'focus', this.onFocus);
-        addSafeEventListener(this, 'blur', this.onBlur);
+        addSafeEventListener(this, 'click', this._itemClick);
+        addSafeEventListener(this, 'focus', this._onFocus);
+        addSafeEventListener(this, 'blur', this._onBlur);
     }
     connectedCallback() {
         super.connectedCallback();
-        this.tree = this.closest('igc-tree');
-        this.parent = this.parentElement?.closest('igc-tree-item');
+        this._tree =
+            this.closest(TREE_TAG) ?? undefined;
+        this.parent =
+            this.parentElement?.tagName.toLowerCase() === TREE_ITEM_TAG
+                ? this.parentElement
+                : null;
         this.level = this.parent ? this.parent.level + 1 : 0;
-        this.setAttribute('role', 'treeitem');
-        this.activeChange();
+        this._syncAria();
+        this._activeChange();
         if (this.init) {
-            this.selectedChange();
+            this._selectedChange();
         }
         else {
-            this.selectionService?.retriggerItemState(this);
+            this._selectionService?.retriggerItemState(this);
         }
         this.init = false;
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this.selectionService?.ensureStateOnItemDelete(this);
-        this.navService?.delete_item(this);
-    }
-    get selectionService() {
-        return this.tree?.selectionService;
-    }
-    get navService() {
-        return this.tree?.navService;
-    }
-    get parts() {
-        return {
-            wrapper: true,
-            selected: this.selected,
-            focused: this.isFocused,
-            active: this.active,
-        };
+        this._selectionService?.ensureStateOnItemDelete(this);
+        this._navService?.handleItemDisconnect(this);
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (changed.has('expanded')) {
+            const oldValue = changed.get('expanded');
+            if (oldValue !== this.expanded) {
+                this._expandedChange(oldValue);
+            }
+        }
+        if (this.hasUpdated && changed.has('active')) {
+            const oldValue = changed.get('active');
+            if (oldValue !== this.active) {
+                this._activeChange();
+            }
+        }
+        if (this.hasUpdated && changed.has('selected')) {
+            const oldValue = changed.get('selected');
+            if (oldValue !== this.selected) {
+                this._selectedChange();
+            }
+        }
     }
-    get directChildren() {
-        return this.allChildren.filter((x) => (x.parent ?? x.parentElement?.closest('igc-tree-item')) === this);
+    updated(changed) {
+        super.updated(changed);
+        this._syncAria();
     }
-    get allChildren() {
-        return Array.from(this.querySelectorAll('igc-tree-item'));
+    _collectDescendants(out) {
+        for (const child of getTreeItemChildren(this)) {
+            out.push(child);
+            child._collectDescendants(out);
+        }
     }
     get path() {
-        return this.parent?.path ? [...this.parent.path, this] : [this];
+        const parent = this.parent;
+        return parent ? [...parent.path, this] : [this];
     }
-    itemClick(event) {
+    _itemClick(event) {
         if (this.disabled || this !== getElementFromPath(this.tagName, event)) {
             return;
         }
         this.tabIndex = 0;
         if (this.tree?.toggleNodeOnClick && event.button === 0) {
-            if (this.expanded) {
-                this.collapseWithEvent();
-            }
-            else {
-                this.expandWithEvent();
-            }
+            this.expanded ? this.collapseWithEvent() : this.expandWithEvent();
         }
-        this.navService?.setFocusedAndActiveItem(this, true, true);
+        this._navService?.setFocusedAndActiveItem(this, true, true);
     }
-    expandIndicatorClick() {
-        if (this.disabled) {
+    _expandIndicatorClick() {
+        if (this.disabled || this.tree?.toggleNodeOnClick) {
             return;
         }
-        if (this.expanded) {
-            this.collapseWithEvent();
-        }
-        else {
-            this.expandWithEvent();
-        }
+        this.expanded ? this.collapseWithEvent() : this.expandWithEvent();
     }
-    selectorClick(event) {
+    _selectorClick(event) {
         event.preventDefault();
         if (this.tree?.toggleNodeOnClick) {
             event.stopPropagation();
         }
         if (event.shiftKey) {
-            this.selectionService?.selectMultipleItems(this);
+            this._selectionService?.selectMultipleItems(this);
             return;
         }
-        if (this.selected) {
-            this.selectionService?.deselectItem(this);
-        }
-        else {
-            this.selectionService?.selectItem(this);
-        }
+        this.selected
+            ? this._selectionService?.deselectItem(this)
+            : this._selectionService?.selectItem(this);
     }
-    onFocus() {
+    _onFocus() {
         if (this.disabled) {
             return;
         }
-        if (this.navService?.focusedItem !== this) {
-            this.navService?.focusItem(this, false);
-            this.wrapper?.scrollIntoView({
-                behavior: 'smooth',
-                block: 'nearest',
-                inline: 'nearest',
-            });
-        }
-        if (this.tabbableEl?.length) {
-            this.tabbableEl.forEach((element) => {
-                element.tabIndex = 0;
-            });
-            this.focusedProgrammatically = true;
-            this.tabbableEl[0].focus();
+        if (this._navService?.focusedItem !== this) {
+            this._navService?.focusItem(this, false);
+            scrollIntoView(this.wrapper, { behavior: 'smooth' });
+        }
+        if (this._tabbableEl?.length) {
+            this._setTabbable(0);
+            this._focusedProgrammatically = true;
+            this._tabbableEl[0].focus();
             return;
         }
-        this.isFocused = true;
+        this._isFocused = true;
     }
-    onBlur() {
-        this.isFocused = false;
+    _onBlur() {
+        this._isFocused = false;
     }
-    onFocusIn(ev) {
+    _onFocusIn(ev) {
         ev?.stopPropagation();
         if (!this.disabled) {
-            if (!this.focusedProgrammatically) {
-                this.tabbableEl?.forEach((element) => {
-                    element.tabIndex = 0;
-                });
+            if (!this._focusedProgrammatically) {
+                this._setTabbable(0);
             }
             this.removeAttribute('tabIndex');
-            this.isFocused = true;
-            this.focusedProgrammatically = false;
+            this._isFocused = true;
+            this._focusedProgrammatically = false;
         }
     }
-    onFocusOut(ev) {
+    _onFocusOut(ev) {
         ev?.stopPropagation();
-        this.isFocused = false;
-        this.tabbableEl?.forEach((element) => {
-            element.tabIndex = -1;
-        });
-        if (this.navService?.focusedItem === this) {
+        this._isFocused = false;
+        this._setTabbable(-1);
+        if (this._navService?.focusedItem === this) {
             this.setAttribute('tabindex', '0');
         }
     }
-    labelChange() {
-        const firstElement = this.contentList[0];
+    _labelChange() {
+        const firstElement = this._contentList[0];
         const tabbableSelector = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])';
-        this.tabbableEl = [
+        this._tabbableEl = [
             ...firstElement.querySelectorAll(tabbableSelector),
         ];
         if (firstElement.matches(tabbableSelector)) {
-            this.tabbableEl.splice(0, 0, firstElement);
+            this._tabbableEl.splice(0, 0, firstElement);
         }
-        if (this.tabbableEl?.length) {
-            this.setAttribute('role', 'none');
-            this.tabbableEl[0].setAttribute('role', 'treeitem');
-            this.tabbableEl.forEach((element) => {
-                element.tabIndex = -1;
-            });
+        this._setTabbable(-1);
+        this._syncAria();
+    }
+    _setTabbable(value) {
+        for (const element of this._tabbableEl ?? []) {
+            element.tabIndex = value;
         }
-        else {
-            this.setAttribute('role', 'treeitem');
+    }
+    get _ariaTarget() {
+        return this._tabbableEl?.length ? this._tabbableEl[0] : this;
+    }
+    _syncAria() {
+        const target = this._ariaTarget;
+        const delegated = target !== this;
+        if (this._ariaDelegate && this._ariaDelegate !== target) {
+            clearTreeItemAria(this._ariaDelegate);
+            this._ariaDelegate.removeAttribute('role');
+        }
+        this._ariaDelegate = delegated ? target : undefined;
+        this.setAttribute('role', delegated ? 'none' : 'treeitem');
+        if (delegated) {
+            target.setAttribute('role', 'treeitem');
+            clearTreeItemAria(this);
         }
+        setAriaState(target, 'aria-expanded', this.hasChildren ? String(this.expanded) : null);
+        setAriaState(target, 'aria-selected', this.tree && this.tree.selection !== 'none' ? String(this.selected) : null);
+        setAriaState(target, 'aria-disabled', this.disabled ? 'true' : null);
     }
-    handleChange() {
-        this.hasChildren = !!this.directChildren.length;
-        this.navService?.update_visible_cache(this, this.expanded, false);
+    async _toggleAnimation(dir) {
+        const animation = dir === 'open' ? growVerIn : growVerOut;
+        return this._animationPlayer.playExclusive(animation());
     }
-    getChildren(options = { flatten: false }) {
-        if (options.flatten) {
-            return this.allChildren;
+    _expandedChange(oldValue) {
+        if (!oldValue) {
+            return;
+        }
+        Promise.resolve().then(() => {
+            if (this._navService?.focusedItem !== this && !this._isFocused) {
+                scrollIntoView(this._navService?.focusedItem?.wrapper, {
+                    behavior: 'smooth',
+                });
+            }
+        });
+    }
+    _activeChange() {
+        if ((this.active && this._navService?.activeItem === this) ||
+            !this.active) {
+            return;
+        }
+        if (this._navService) {
+            this._navService.setActiveItem(this, false);
+        }
+        this.tree?.expandToItem(this);
+        Promise.resolve().then(() => {
+            scrollIntoView(this.wrapper, { behavior: 'smooth' });
+        });
+    }
+    _selectedChange() {
+        if (this.selected && !this._selectionService?.isItemSelected(this)) {
+            this._selectionService?.selectItemsWithNoEvent([this]);
+        }
+        if (!this.selected && this._selectionService?.isItemSelected(this)) {
+            this._selectionService?.deselectItemsWithNoEvent([this]);
         }
-        return this.directChildren;
+    }
+    _handleChange() {
+        this.hasChildren = hasTreeItemChildren(this);
+    }
+    getChildren(options = { flatten: false }) {
+        return options.flatten ? this._allChildren : this._directChildren;
     }
     async expandWithEvent() {
         if (this.expanded) {
@@ -280,15 +295,15 @@ export default class IgcTreeItemComponent extends LitElement {
             return;
         }
         if (this.tree?.singleBranchExpand) {
-            const pathSet = new Set(this.path.splice(0, this.path.length - 1));
-            this.tree.items.forEach((item) => {
-                if (!pathSet.has(item)) {
+            const ancestors = new Set(this.path.slice(0, -1));
+            for (const item of this.tree.items) {
+                if (!ancestors.has(item)) {
                     item.collapseWithEvent();
                 }
-            });
+            }
         }
         this.expanded = true;
-        if (await this.toggleAnimation('open')) {
+        if (await this._toggleAnimation('open')) {
             this.tree?.emitEvent('igcItemExpanded', { detail: this });
         }
     }
@@ -305,7 +320,7 @@ export default class IgcTreeItemComponent extends LitElement {
             return;
         }
         this.expanded = false;
-        if (await this.toggleAnimation('close')) {
+        if (await this._toggleAnimation('close')) {
             this.tree?.emitEvent('igcItemCollapsed', { detail: this });
         }
     }
@@ -319,12 +334,8 @@ export default class IgcTreeItemComponent extends LitElement {
         this.expanded = false;
     }
     render() {
-        const indicatorParts = {
-            indicator: true,
-            rtl: !(this.tree ? isLTR(this.tree) : true),
-        };
         return html `
-      <div id="wrapper" part=${partMap(this.parts)}>
+      <div id="wrapper" part=${partMap(this._parts)}>
         <div
           style="width: calc(${this.level} * var(--igc-tree-indentation-size))"
           part="indentation"
@@ -332,77 +343,72 @@ export default class IgcTreeItemComponent extends LitElement {
         >
           <slot name="indentation"></slot>
         </div>
-        <div part=${partMap(indicatorParts)} aria-hidden="true">
+        <div part="indicator" aria-hidden="true">
           ${this.loading
             ? html `
-                <slot name="loading">
-                  <igc-circular-progress indeterminate></igc-circular-progress>
-                </slot>
-              `
+                  <slot name="loading">
+                    <igc-circular-progress
+                      indeterminate
+                    ></igc-circular-progress>
+                  </slot>
+                `
             : html `
-                <slot
-                  name="indicator"
-                  @click=${this.tree?.toggleNodeOnClick
-                ? nothing
-                : this.expandIndicatorClick}
-                >
-                  ${this.hasChildren
+                  <slot name="indicator" @click=${this._expandIndicatorClick}>
+                    ${this.hasChildren
                 ? html `
-                        <igc-icon
-                          aria-label=${ifDefined(this.expanded
+                            <igc-icon
+                              aria-label=${ifDefined(this.expanded
                     ? this.tree?.resourceStrings.collapse
                     : this.tree?.resourceStrings.expand)}
-                          name=${this.expanded
-                    ? 'tree_collapse'
-                    : 'tree_expand'}
-                          collection="default"
-                        >
-                        </igc-icon>
-                      `
+                              name=${this.expanded ? 'tree_collapse' : 'tree_expand'}
+                              collection="default"
+                            >
+                            </igc-icon>
+                          `
                 : ''}
-                </slot>
-              `}
+                  </slot>
+                `}
         </div>
         ${this.tree?.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="select" aria-hidden="true">
+                  <igc-checkbox
+                    tabindex="-1"
+                    @click=${this._selectorClick}
+                    .checked=${this.selected}
+                    .indeterminate=${this.indeterminate}
+                    .disabled=${this.disabled}
+                  >
+                  </igc-checkbox>
+                </div>
+              `
             : ''}
         <div part="label">
           <slot
             name="label"
-            @slotchange=${this.labelChange}
-            @focusin=${this.onFocusIn}
-            @focusout=${this.onFocusOut}
+            @slotchange=${this._labelChange}
+            @focusin=${this._onFocusIn}
+            @focusout=${this._onFocusOut}
           >
             <span part="text">${this.label}</span>
           </slot>
         </div>
       </div>
-      <div ${ref(this.groupRef)} role="group" aria-hidden=${!this.expanded}>
-        <slot @slotchange=${this.handleChange}></slot>
+      <div ${ref(this._groupRef)} role="group" .inert=${!this.expanded}>
+        <slot @slotchange=${this._handleChange}></slot>
       </div>
     `;
     }
 }
 __decorate([
     queryAssignedElements({ slot: 'label', flatten: true })
-], IgcTreeItemComponent.prototype, "contentList", void 0);
+], IgcTreeItemComponent.prototype, "_contentList", void 0);
 __decorate([
     query('#wrapper')
 ], IgcTreeItemComponent.prototype, "wrapper", void 0);
 __decorate([
     state()
-], IgcTreeItemComponent.prototype, "isFocused", void 0);
+], IgcTreeItemComponent.prototype, "_isFocused", void 0);
 __decorate([
     state()
 ], IgcTreeItemComponent.prototype, "hasChildren", void 0);
@@ -433,20 +439,4 @@ __decorate([
 __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);
 //# sourceMappingURL=tree-item.js.map