@aquera/nile-elements 0.0.80 → 0.0.82

package/dist/src/nile-tree/nile-tree.js

@@ -0,0 +1,376 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { styles } from './nile-tree.css';
+import NileElement from '../internal/nile-element';
+import { clamp } from '../internal/math';
+import { customElement, property, query } from 'lit/decorators.js';
+import { html } from 'lit';
+import { watch } from '../internal/watch';
+import NileTreeItem from '../nile-tree-item/nile-tree-item';
+function syncCheckboxes(changedTreeItem, initialSync = false) {
+    function syncParentItem(treeItem) {
+        const children = treeItem.getChildrenItems({ includeDisabled: false });
+        if (children.length) {
+            const allChecked = children.every(item => item.selected);
+            const allUnchecked = children.every(item => !item.selected && !item.indeterminate);
+            treeItem.selected = allChecked;
+            treeItem.indeterminate = !allChecked && !allUnchecked;
+        }
+    }
+    function syncAncestors(treeItem) {
+        const parentItem = treeItem.parentElement;
+        if (NileTreeItem.isTreeItem(parentItem)) {
+            syncParentItem(parentItem);
+            syncAncestors(parentItem);
+        }
+    }
+    function syncDescendants(treeItem) {
+        for (const childItem of treeItem.getChildrenItems()) {
+            childItem.selected = initialSync
+                ? treeItem.selected || childItem.selected
+                : !childItem.disabled && treeItem.selected;
+            syncDescendants(childItem);
+        }
+        if (initialSync) {
+            syncParentItem(treeItem);
+        }
+    }
+    syncDescendants(changedTreeItem);
+    syncAncestors(changedTreeItem);
+}
+/**
+ * @summary Trees allow you to display a hierarchical list of selectable [tree items](/components/tree-item). Items with children can be expanded and collapsed as desired by the user.
+ *
+ * @event {{ selection: NileTreeItem[] }} nile-selection-change - Emitted when a tree item is selected or deselected.
+ *
+ * @slot - The default slot.
+ * @slot expand-icon - The icon to show when the tree item is expanded. Works best with `<nile-icon>`.
+ * @slot collapse-icon - The icon to show when the tree item is collapsed. Works best with `<nile-icon>`.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty [--indent-size=var(--nile-spacing-medium)] - The size of the indentation for nested items.
+ * @cssproperty [--indent-guide-color=var(--nile-color-neutral-200)] - The color of the indentation line.
+ * @cssproperty [--indent-guide-offset=0] - The amount of vertical spacing to leave between the top and bottom of the
+ *  indentation line's starting position.
+ * @cssproperty [--indent-guide-style=solid] - The style of the indentation line, e.g. solid, dotted, dashed.
+ * @cssproperty [--indent-guide-width=0] - The width of the indentation line.
+ */
+let NileTree = class NileTree extends NileElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple
+         * displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected.
+         */
+        this.selection = 'leaf';
+        this.clickTarget = null;
+        // Initializes new items by setting the `selectable` property and the expanded/collapsed icons if any
+        this.initTreeItem = (item) => {
+            item.selectable = this.selection === 'multiple';
+            ['expand', 'collapse']
+                .filter(status => !!this.querySelector(`[slot="${status}-icon"]`))
+                .forEach((status) => {
+                const existingIcon = item.querySelector(`[slot="${status}-icon"]`);
+                if (existingIcon === null) {
+                    // No separator exists, add one
+                    item.append(this.getExpandButtonIcon(status));
+                }
+                else if (existingIcon.hasAttribute('data-default')) {
+                    // A default separator exists, replace it
+                    existingIcon.replaceWith(this.getExpandButtonIcon(status));
+                }
+                else {
+                    // The user provided a custom icon, leave it alone
+                }
+            });
+        };
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        this.handleTreeChanged = this.handleTreeChanged.bind(this);
+        this.handleFocusIn = this.handleFocusIn.bind(this);
+        this.handleFocusOut = this.handleFocusOut.bind(this);
+        this.setAttribute('role', 'tree');
+        this.setAttribute('tabindex', '0');
+        this.addEventListener('focusin', this.handleFocusIn);
+        this.addEventListener('focusout', this.handleFocusOut);
+        this.addEventListener('nile-lazy-change', this.handleSlotChange);
+        await this.updateComplete;
+        this.mutationObserver = new MutationObserver(this.handleTreeChanged);
+        this.mutationObserver.observe(this, { childList: true, subtree: true });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.mutationObserver.disconnect();
+        this.removeEventListener('focusin', this.handleFocusIn);
+        this.removeEventListener('focusout', this.handleFocusOut);
+        this.removeEventListener('nile-lazy-change', this.handleSlotChange);
+    }
+    // Generates a clone of the expand icon element to use for each tree item
+    getExpandButtonIcon(status) {
+        const slot = status === 'expand' ? this.expandedIconSlot : this.collapsedIconSlot;
+        const icon = slot.assignedElements({ flatten: true })[0];
+        // Clone it, remove ids, and slot it
+        if (icon) {
+            const clone = icon.cloneNode(true);
+            [clone, ...clone.querySelectorAll('[id]')].forEach(el => el.removeAttribute('id'));
+            clone.setAttribute('data-default', '');
+            clone.slot = `${status}-icon`;
+            return clone;
+        }
+        return null;
+    }
+    handleTreeChanged(mutations) {
+        for (const mutation of mutations) {
+            const addedNodes = [...mutation.addedNodes].filter(NileTreeItem.isTreeItem);
+            const removedNodes = [...mutation.removedNodes].filter(NileTreeItem.isTreeItem);
+            addedNodes.forEach(this.initTreeItem);
+            // If the focused item has been removed form the DOM, move the focus to the first focusable item
+            if (removedNodes.includes(this.lastFocusedItem)) {
+                this.focusItem(this.getFocusableItems()[0]);
+            }
+        }
+    }
+    syncTreeItems(selectedItem) {
+        const items = this.getAllTreeItems();
+        if (this.selection === 'multiple') {
+            syncCheckboxes(selectedItem);
+        }
+        else {
+            for (const item of items) {
+                if (item !== selectedItem) {
+                    item.selected = false;
+                }
+            }
+        }
+    }
+    selectItem(selectedItem) {
+        const previousSelection = [...this.selectedItems];
+        if (this.selection === 'multiple') {
+            selectedItem.selected = !selectedItem.selected;
+            if (selectedItem.lazy) {
+                selectedItem.expanded = true;
+            }
+            this.syncTreeItems(selectedItem);
+        }
+        else if (this.selection === 'single' || selectedItem.isLeaf) {
+            selectedItem.expanded = !selectedItem.expanded;
+            selectedItem.selected = true;
+            this.syncTreeItems(selectedItem);
+        }
+        else if (this.selection === 'leaf') {
+            selectedItem.expanded = !selectedItem.expanded;
+        }
+        const nextSelection = this.selectedItems;
+        if (previousSelection.length !== nextSelection.length ||
+            nextSelection.some(item => !previousSelection.includes(item))) {
+            // Wait for the tree items' DOM to update before emitting
+            Promise.all(nextSelection.map(el => el.updateComplete)).then(() => {
+                this.emit('nile-selection-change', { detail: { selection: nextSelection } });
+            });
+        }
+    }
+    getAllTreeItems() {
+        return [...this.querySelectorAll('nile-tree-item')];
+    }
+    focusItem(item) {
+        item?.focus();
+    }
+    handleKeyDown(event) {
+        if (!['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Home', 'End', 'Enter', ' '].includes(event.key)) {
+            return;
+        }
+        const items = this.getFocusableItems();
+        const isLtr = true;
+        const isRtl = false;
+        if (items.length > 0) {
+            event.preventDefault();
+            const activeItemIndex = items.findIndex(item => item.matches(':focus'));
+            const activeItem = items[activeItemIndex];
+            const focusItemAt = (index) => {
+                const item = items[clamp(index, 0, items.length - 1)];
+                this.focusItem(item);
+            };
+            const toggleExpand = (expanded) => {
+                activeItem.expanded = expanded;
+            };
+            if (event.key === 'ArrowDown') {
+                // Moves focus to the next node that is focusable without opening or closing a node.
+                focusItemAt(activeItemIndex + 1);
+            }
+            else if (event.key === 'ArrowUp') {
+                // Moves focus to the next node that is focusable without opening or closing a node.
+                focusItemAt(activeItemIndex - 1);
+            }
+            else if ((isLtr && event.key === 'ArrowRight') || (isRtl && event.key === 'ArrowLeft')) {
+                //
+                // When focus is on a closed node, opens the node; focus does not move.
+                // When focus is on a open node, moves focus to the first child node.
+                // When focus is on an end node (a tree item with no children), does nothing.
+                //
+                if (!activeItem || activeItem.disabled || activeItem.expanded || (activeItem.isLeaf && !activeItem.lazy)) {
+                    focusItemAt(activeItemIndex + 1);
+                }
+                else {
+                    toggleExpand(true);
+                }
+            }
+            else if ((isLtr && event.key === 'ArrowLeft') || (isRtl && event.key === 'ArrowRight')) {
+                //
+                // When focus is on an open node, closes the node.
+                // When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
+                // When focus is on a closed `tree`, does nothing.
+                //
+                if (!activeItem || activeItem.disabled || activeItem.isLeaf || !activeItem.expanded) {
+                    focusItemAt(activeItemIndex - 1);
+                }
+                else {
+                    toggleExpand(false);
+                }
+            }
+            else if (event.key === 'Home') {
+                // Moves focus to the first node in the tree without opening or closing a node.
+                focusItemAt(0);
+            }
+            else if (event.key === 'End') {
+                // Moves focus to the last node in the tree that is focusable without opening the node.
+                focusItemAt(items.length - 1);
+            }
+            else if (event.key === 'Enter' || event.key === ' ') {
+                // Selects the focused node.
+                if (!activeItem.disabled) {
+                    this.selectItem(activeItem);
+                }
+            }
+        }
+    }
+    handleClick(event) {
+        const target = event.target;
+        const treeItem = target.closest('nile-tree-item');
+        const isExpandButton = event
+            .composedPath()
+            .some((el) => el?.classList?.contains('tree-item__expand-button'));
+        //
+        // Don't Do anything if there's no tree item, if it's disabled, or if the click doesn't match the initial target
+        // from mousedown. The latter case prevents the user from starting a click on one item and ending it on another,
+        // causing the parent node to collapse.
+        //
+        if (!treeItem || treeItem.disabled || target !== this.clickTarget) {
+            return;
+        }
+        if (this.selection === 'multiple' && isExpandButton) {
+            treeItem.expanded = !treeItem.expanded;
+        }
+        else {
+            this.selectItem(treeItem);
+        }
+    }
+    handleMouseDown(event) {
+        // Record the click target so we know which item the click initially targeted
+        this.clickTarget = event.target;
+    }
+    handleFocusOut(event) {
+        const relatedTarget = event.relatedTarget;
+        // If the element that got the focus is not in the tree
+        if (!relatedTarget || !this.contains(relatedTarget)) {
+            this.tabIndex = 0;
+        }
+    }
+    handleFocusIn(event) {
+        const target = event.target;
+        // If the tree has been focused, move the focus to the last focused item
+        if (event.target === this) {
+            this.focusItem(this.lastFocusedItem || this.getAllTreeItems()[0]);
+        }
+        // If the target is a tree item, update the tabindex
+        if (NileTreeItem.isTreeItem(target) && !target.disabled) {
+            if (this.lastFocusedItem) {
+                this.lastFocusedItem.tabIndex = -1;
+            }
+            this.lastFocusedItem = target;
+            this.tabIndex = -1;
+            target.tabIndex = 0;
+        }
+    }
+    handleSlotChange() {
+        const items = this.getAllTreeItems();
+        items.forEach(this.initTreeItem);
+    }
+    async handleSelectionChange() {
+        const isSelectionMultiple = this.selection === 'multiple';
+        const items = this.getAllTreeItems();
+        this.setAttribute('aria-multiselectable', isSelectionMultiple ? 'true' : 'false');
+        for (const item of items) {
+            item.selectable = isSelectionMultiple;
+        }
+        if (isSelectionMultiple) {
+            await this.updateComplete;
+            [...this.querySelectorAll(':scope > nile-tree-item')].forEach((treeItem) => syncCheckboxes(treeItem, true));
+        }
+    }
+    /** @internal Returns the list of tree items that are selected in the tree. */
+    get selectedItems() {
+        const items = this.getAllTreeItems();
+        const isSelected = (item) => item.selected;
+        return items.filter(isSelected);
+    }
+    /** @internal Gets focusable tree items in the tree. */
+    getFocusableItems() {
+        const items = this.getAllTreeItems();
+        const collapsedItems = new Set();
+        return items.filter(item => {
+            // Exclude disabled elements
+            if (item.disabled)
+                return false;
+            // Exclude those whose parent is collapsed or loading
+            const parent = item.parentElement?.closest('[role=treeitem]');
+            if (parent && (!parent.expanded || parent.loading || collapsedItems.has(parent))) {
+                collapsedItems.add(item);
+            }
+            return !collapsedItems.has(item);
+        });
+    }
+    render() {
+        return html `
+      <div
+        part="base"
+        class="tree"
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+        @mousedown=${this.handleMouseDown}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+        <slot name="expand-icon" hidden aria-hidden="true"> </slot>
+        <slot name="collapse-icon" hidden aria-hidden="true"> </slot>
+      </div>
+    `;
+    }
+};
+NileTree.styles = styles;
+__decorate([
+    query('slot:not([name])')
+], NileTree.prototype, "defaultSlot", void 0);
+__decorate([
+    query('slot[name=expand-icon]')
+], NileTree.prototype, "expandedIconSlot", void 0);
+__decorate([
+    query('slot[name=collapse-icon]')
+], NileTree.prototype, "collapsedIconSlot", void 0);
+__decorate([
+    property()
+], NileTree.prototype, "selection", void 0);
+__decorate([
+    watch('selection')
+], NileTree.prototype, "handleSelectionChange", null);
+NileTree = __decorate([
+    customElement('nile-tree')
+], NileTree);
+export { NileTree };
+export default NileTree;
+//# sourceMappingURL=nile-tree.js.map

package/dist/src/nile-tree/nile-tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-tree.js","sourceRoot":"","sources":["../../../src/nile-tree/nile-tree.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, CSSResultArray, TemplateResult} from 'lit-element';\nimport {styles} from './nile-tree.css';\nimport NileElement from '../internal/nile-element';\nimport { clamp } from '../internal/math';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { html } from 'lit';\nimport { watch } from '../internal/watch';\nimport NileTreeItem from '../nile-tree-item/nile-tree-item';\nimport type { CSSResultGroup } from 'lit';\n\nfunction syncCheckboxes(changedTreeItem: NileTreeItem, initialSync = false) {\n  function syncParentItem(treeItem: NileTreeItem) {\n    const children = treeItem.getChildrenItems({ includeDisabled: false });\n\n    if (children.length) {\n      const allChecked = children.every(item => item.selected);\n      const allUnchecked = children.every(item => !item.selected && !item.indeterminate);\n\n      treeItem.selected = allChecked;\n      treeItem.indeterminate = !allChecked && !allUnchecked;\n    }\n  }\n\n  function syncAncestors(treeItem: NileTreeItem) {\n    const parentItem: NileTreeItem | null = treeItem.parentElement as NileTreeItem;\n\n    if (NileTreeItem.isTreeItem(parentItem)) {\n      syncParentItem(parentItem);\n      syncAncestors(parentItem);\n    }\n  }\n\n  function syncDescendants(treeItem: NileTreeItem) {\n    for (const childItem of treeItem.getChildrenItems()) {\n      childItem.selected = initialSync\n        ? treeItem.selected || childItem.selected\n        : !childItem.disabled && treeItem.selected;\n\n      syncDescendants(childItem);\n    }\n\n    if (initialSync) {\n      syncParentItem(treeItem);\n    }\n  }\n\n  syncDescendants(changedTreeItem);\n  syncAncestors(changedTreeItem);\n}\n\n\n/**\n * @summary Trees allow you to display a hierarchical list of selectable [tree items](/components/tree-item). Items with children can be expanded and collapsed as desired by the user.\n *\n * @event {{ selection: NileTreeItem[] }} nile-selection-change - Emitted when a tree item is selected or deselected.\n *\n * @slot - The default slot.\n * @slot expand-icon - The icon to show when the tree item is expanded. Works best with `<nile-icon>`.\n * @slot collapse-icon - The icon to show when the tree item is collapsed. Works best with `<nile-icon>`.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty [--indent-size=var(--nile-spacing-medium)] - The size of the indentation for nested items.\n * @cssproperty [--indent-guide-color=var(--nile-color-neutral-200)] - The color of the indentation line.\n * @cssproperty [--indent-guide-offset=0] - The amount of vertical spacing to leave between the top and bottom of the\n *  indentation line's starting position.\n * @cssproperty [--indent-guide-style=solid] - The style of the indentation line, e.g. solid, dotted, dashed.\n * @cssproperty [--indent-guide-width=0] - The width of the indentation line.\n */\n\n@customElement('nile-tree')\nexport class NileTree extends NileElement {\n\n\tstatic styles: CSSResultGroup = styles;\n\n  @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n  @query('slot[name=expand-icon]') expandedIconSlot: HTMLSlotElement;\n  @query('slot[name=collapse-icon]') collapsedIconSlot: HTMLSlotElement;\n\n  /**\n   * The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple\n   * displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected.\n   */\n  @property() selection: 'single' | 'multiple' | 'leaf' = 'leaf';\n\n  //\n  // A collection of all the items in the tree, in the order they appear. The collection is live, meaning it is\n  // automatically updated when the underlying document is changed.\n  //\n  private lastFocusedItem: NileTreeItem;\n  private mutationObserver: MutationObserver;\n  private clickTarget: NileTreeItem | null = null;\n\n  async connectedCallback() {\n    super.connectedCallback();\n    this.handleTreeChanged = this.handleTreeChanged.bind(this);\n    this.handleFocusIn = this.handleFocusIn.bind(this);\n    this.handleFocusOut = this.handleFocusOut.bind(this);\n\n    this.setAttribute('role', 'tree');\n    this.setAttribute('tabindex', '0');\n\n    this.addEventListener('focusin', this.handleFocusIn);\n    this.addEventListener('focusout', this.handleFocusOut);\n    this.addEventListener('nile-lazy-change', this.handleSlotChange);\n\n    await this.updateComplete;\n\n    this.mutationObserver = new MutationObserver(this.handleTreeChanged);\n    this.mutationObserver.observe(this, { childList: true, subtree: true });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.mutationObserver.disconnect();\n\n    this.removeEventListener('focusin', this.handleFocusIn);\n    this.removeEventListener('focusout', this.handleFocusOut);\n    this.removeEventListener('nile-lazy-change', this.handleSlotChange);\n  }\n\n  // Generates a clone of the expand icon element to use for each tree item\n  private getExpandButtonIcon(status: 'expand' | 'collapse') {\n    const slot = status === 'expand' ? this.expandedIconSlot : this.collapsedIconSlot;\n    const icon = slot.assignedElements({ flatten: true })[0] as HTMLElement;\n\n    // Clone it, remove ids, and slot it\n    if (icon) {\n      const clone = icon.cloneNode(true) as HTMLElement;\n      [clone, ...clone.querySelectorAll('[id]')].forEach(el => el.removeAttribute('id'));\n      clone.setAttribute('data-default', '');\n      clone.slot = `${status}-icon`;\n\n      return clone;\n    }\n\n    return null;\n  }\n\n  // Initializes new items by setting the `selectable` property and the expanded/collapsed icons if any\n  private initTreeItem = (item: NileTreeItem) => {\n    item.selectable = this.selection === 'multiple';\n\n    ['expand', 'collapse']\n      .filter(status => !!this.querySelector(`[slot=\"${status}-icon\"]`))\n      .forEach((status: 'expand' | 'collapse') => {\n        const existingIcon = item.querySelector(`[slot=\"${status}-icon\"]`);\n\n        if (existingIcon === null) {\n          // No separator exists, add one\n          item.append(this.getExpandButtonIcon(status)!);\n        } else if (existingIcon.hasAttribute('data-default')) {\n          // A default separator exists, replace it\n          existingIcon.replaceWith(this.getExpandButtonIcon(status)!);\n        } else {\n          // The user provided a custom icon, leave it alone\n        }\n      });\n  };\n\n  private handleTreeChanged(mutations: MutationRecord[]) {\n    for (const mutation of mutations) {\n      const addedNodes: NileTreeItem[] = [...mutation.addedNodes].filter(NileTreeItem.isTreeItem) as NileTreeItem[];\n      const removedNodes = [...mutation.removedNodes].filter(NileTreeItem.isTreeItem) as NileTreeItem[];\n\n      addedNodes.forEach(this.initTreeItem);\n\n      // If the focused item has been removed form the DOM, move the focus to the first focusable item\n      if (removedNodes.includes(this.lastFocusedItem)) {\n        this.focusItem(this.getFocusableItems()[0]);\n      }\n    }\n  }\n\n  private syncTreeItems(selectedItem: NileTreeItem) {\n    const items = this.getAllTreeItems();\n\n    if (this.selection === 'multiple') {\n      syncCheckboxes(selectedItem);\n    } else {\n      for (const item of items) {\n        if (item !== selectedItem) {\n          item.selected = false;\n        }\n      }\n    }\n  }\n\n  private selectItem(selectedItem: NileTreeItem) {\n    const previousSelection = [...this.selectedItems];\n\n    if (this.selection === 'multiple') {\n      selectedItem.selected = !selectedItem.selected;\n      if (selectedItem.lazy) {\n        selectedItem.expanded = true;\n      }\n      this.syncTreeItems(selectedItem);\n    } else if (this.selection === 'single' || selectedItem.isLeaf) {\n      selectedItem.expanded = !selectedItem.expanded;\n      selectedItem.selected = true;\n\n      this.syncTreeItems(selectedItem);\n    } else if (this.selection === 'leaf') {\n      selectedItem.expanded = !selectedItem.expanded;\n    }\n\n    const nextSelection = this.selectedItems;\n\n    if (\n      previousSelection.length !== nextSelection.length ||\n      nextSelection.some(item => !previousSelection.includes(item))\n    ) {\n      // Wait for the tree items' DOM to update before emitting\n      Promise.all(nextSelection.map(el => el.updateComplete)).then(() => {\n        this.emit('nile-selection-change', { detail: { selection: nextSelection } });\n      });\n    }\n  }\n\n  private getAllTreeItems() {\n    return [...this.querySelectorAll<NileTreeItem>('nile-tree-item')];\n  }\n\n  private focusItem(item?: NileTreeItem | null) {\n    item?.focus();\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (!['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Home', 'End', 'Enter', ' '].includes(event.key)) {\n      return;\n    }\n\n    const items = this.getFocusableItems();\n    const isLtr = true;\n    const isRtl = false;\n\n    if (items.length > 0) {\n      event.preventDefault();\n      const activeItemIndex = items.findIndex(item => item.matches(':focus'));\n      const activeItem: NileTreeItem | undefined = items[activeItemIndex];\n\n      const focusItemAt = (index: number) => {\n        const item = items[clamp(index, 0, items.length - 1)];\n        this.focusItem(item);\n      };\n      const toggleExpand = (expanded: boolean) => {\n        activeItem.expanded = expanded;\n      };\n\n      if (event.key === 'ArrowDown') {\n        // Moves focus to the next node that is focusable without opening or closing a node.\n        focusItemAt(activeItemIndex + 1);\n      } else if (event.key === 'ArrowUp') {\n        // Moves focus to the next node that is focusable without opening or closing a node.\n        focusItemAt(activeItemIndex - 1);\n      } else if ((isLtr && event.key === 'ArrowRight') || (isRtl && event.key === 'ArrowLeft')) {\n        //\n        // When focus is on a closed node, opens the node; focus does not move.\n        // When focus is on a open node, moves focus to the first child node.\n        // When focus is on an end node (a tree item with no children), does nothing.\n        //\n        if (!activeItem || activeItem.disabled || activeItem.expanded || (activeItem.isLeaf && !activeItem.lazy)) {\n          focusItemAt(activeItemIndex + 1);\n        } else {\n          toggleExpand(true);\n        }\n      } else if ((isLtr && event.key === 'ArrowLeft') || (isRtl && event.key === 'ArrowRight')) {\n        //\n        // When focus is on an open node, closes the node.\n        // When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.\n        // When focus is on a closed `tree`, does nothing.\n        //\n        if (!activeItem || activeItem.disabled || activeItem.isLeaf || !activeItem.expanded) {\n          focusItemAt(activeItemIndex - 1);\n        } else {\n          toggleExpand(false);\n        }\n      } else if (event.key === 'Home') {\n        // Moves focus to the first node in the tree without opening or closing a node.\n        focusItemAt(0);\n      } else if (event.key === 'End') {\n        // Moves focus to the last node in the tree that is focusable without opening the node.\n        focusItemAt(items.length - 1);\n      } else if (event.key === 'Enter' || event.key === ' ') {\n        // Selects the focused node.\n        if (!activeItem.disabled) {\n          this.selectItem(activeItem);\n        }\n      }\n    }\n  }\n\n  private handleClick(event: Event) {\n    const target = event.target as NileTreeItem;\n    const treeItem = target.closest('nile-tree-item')!;\n    const isExpandButton = event\n      .composedPath()\n      .some((el: HTMLElement) => el?.classList?.contains('tree-item__expand-button'));\n\n    //\n    // Don't Do anything if there's no tree item, if it's disabled, or if the click doesn't match the initial target\n    // from mousedown. The latter case prevents the user from starting a click on one item and ending it on another,\n    // causing the parent node to collapse.\n    //\n    if (!treeItem || treeItem.disabled || target !== this.clickTarget) {\n      return;\n    }\n\n    if (this.selection === 'multiple' && isExpandButton) {\n      treeItem.expanded = !treeItem.expanded;\n    } else {\n      this.selectItem(treeItem);\n    }\n  }\n\n  handleMouseDown(event: MouseEvent) {\n    // Record the click target so we know which item the click initially targeted\n    this.clickTarget = event.target as NileTreeItem;\n  }\n\n  private handleFocusOut(event: FocusEvent) {\n    const relatedTarget = event.relatedTarget as HTMLElement;\n\n    // If the element that got the focus is not in the tree\n    if (!relatedTarget || !this.contains(relatedTarget)) {\n      this.tabIndex = 0;\n    }\n  }\n\n  private handleFocusIn(event: FocusEvent) {\n    const target = event.target as NileTreeItem;\n\n    // If the tree has been focused, move the focus to the last focused item\n    if (event.target === this) {\n      this.focusItem(this.lastFocusedItem || this.getAllTreeItems()[0]);\n    }\n\n    // If the target is a tree item, update the tabindex\n    if (NileTreeItem.isTreeItem(target) && !target.disabled) {\n      if (this.lastFocusedItem) {\n        this.lastFocusedItem.tabIndex = -1;\n      }\n      this.lastFocusedItem = target;\n      this.tabIndex = -1;\n\n      target.tabIndex = 0;\n    }\n  }\n\n  private handleSlotChange() {\n    const items = this.getAllTreeItems();\n    items.forEach(this.initTreeItem);\n  }\n\n  @watch('selection')\n  async handleSelectionChange() {\n    const isSelectionMultiple = this.selection === 'multiple';\n    const items = this.getAllTreeItems();\n\n    this.setAttribute('aria-multiselectable', isSelectionMultiple ? 'true' : 'false');\n\n    for (const item of items) {\n      item.selectable = isSelectionMultiple;\n    }\n\n    if (isSelectionMultiple) {\n      await this.updateComplete;\n\n      [...this.querySelectorAll(':scope > nile-tree-item')].forEach((treeItem: NileTreeItem) =>\n        syncCheckboxes(treeItem, true)\n      );\n    }\n  }\n\n  /** @internal Returns the list of tree items that are selected in the tree. */\n  get selectedItems(): NileTreeItem[] {\n    const items = this.getAllTreeItems();\n    const isSelected = (item: NileTreeItem) => item.selected;\n\n    return items.filter(isSelected);\n  }\n\n  /** @internal Gets focusable tree items in the tree. */\n  getFocusableItems() {\n    const items = this.getAllTreeItems();\n    const collapsedItems = new Set();\n\n    return items.filter(item => {\n      // Exclude disabled elements\n      if (item.disabled) return false;\n\n      // Exclude those whose parent is collapsed or loading\n      const parent: NileTreeItem | null | undefined = item.parentElement?.closest('[role=treeitem]');\n      if (parent && (!parent.expanded || parent.loading || collapsedItems.has(parent))) {\n        collapsedItems.add(item);\n      }\n\n      return !collapsedItems.has(item);\n    });\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=\"tree\"\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n        @mousedown=${this.handleMouseDown}\n      >\n        <slot @slotchange=${this.handleSlotChange}></slot>\n        <slot name=\"expand-icon\" hidden aria-hidden=\"true\"> </slot>\n        <slot name=\"collapse-icon\" hidden aria-hidden=\"true\"> </slot>\n      </div>\n    `;\n  }\n}\n\nexport default NileTree;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-tree': NileTree;\n  }\n}\n"]}

package/dist/src/nile-tree-item/index.d.ts

@@ -0,0 +1 @@
+export { NileTreeItem } from './nile-tree-item';

package/dist/src/nile-tree-item/index.js

@@ -0,0 +1,2 @@
+export { NileTreeItem } from './nile-tree-item';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-tree-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-tree-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { NileTreeItem } from './nile-tree-item';"]}

package/dist/src/nile-tree-item/nile-tree-item.css.d.ts

@@ -0,0 +1,12 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+ * TreeItem CSS
+ */
+export declare const styles: import("lit-element").CSSResult;
+declare const _default: import("lit-element").CSSResult[];
+export default _default;

package/dist/src/nile-tree-item/nile-tree-item.css.js

@@ -0,0 +1,176 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+import { css } from 'lit-element';
+/**
+ * TreeItem CSS
+ */
+export const styles = css `
+  :host {
+    box-sizing: border-box;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    display: block;
+    outline: 0;
+    z-index: 0;
+  }
+
+  :host(:focus) {
+    outline: none;
+  }
+
+  slot:not([name])::slotted(nile-icon) {
+    margin-inline-end: 0.5rem;
+  }
+
+  .tree-item {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    flex-direction: column;
+    color: #777D82;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .tree-item__checkbox {
+    pointer-events: none;
+  }
+
+  .tree-item__expand-button,
+  .tree-item__checkbox,
+  .tree-item__label {
+    font-family: var(--nile-font-family-serif);
+    font-size: 16px;
+    font-weight: 400;
+  }
+
+  .tree-item__checkbox::part(base) {
+    display: flex;
+    align-items: center;
+  }
+
+  .tree-item__indentation {
+    display: block;
+    width: 1em;
+    flex-shrink: 0;
+  }
+
+  .tree-item__expand-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: content-box;
+    color: #C7CED4;
+    padding: 0.5rem;
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    cursor: pointer;
+  }
+
+  .tree-item__expand-button {
+    transition: 250ms rotate ease;
+  }
+
+  .tree-item--expanded .tree-item__expand-button {
+    rotate: 90deg;
+  }
+
+  .tree-item--expanded.tree-item--rtl .tree-item__expand-button {
+    rotate: -90deg;
+  }
+
+  .tree-item--expanded slot[name='expand-icon'],
+  .tree-item:not(.tree-item--expanded) slot[name='collapse-icon'] {
+    display: none;
+  }
+
+  .tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot {
+    display: none;
+  }
+
+  .tree-item__expand-button--visible {
+    cursor: pointer;
+  }
+
+  .tree-item__item {
+    display: flex;
+    align-items: center;
+    border-inline-start: solid 3px transparent;
+  }
+
+  .tree-item--disabled .tree-item__item {
+    opacity: 0.5;
+    outline: none;
+    cursor: not-allowed;
+  }
+
+  :host(:focus-visible) .tree-item__item {
+    outline: solid 3px #C7CED4;
+    outline-offset: 1px;
+    z-index: 2;
+  }
+
+  :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
+    background-color: #eaecf0;
+    border-inline-start-color: #035da6;
+  }
+
+  :host(:not([aria-disabled='true'])) .tree-item__expand-button {
+    color: #777D82;
+  }
+
+  .tree-item__label {
+    display: flex;
+    align-items: center;
+    transition: 150ms color;
+  }
+
+  .tree-item__children {
+    display: block;
+    font-size: calc(1em + var(--indent-size, 1rem));
+  }
+
+  /* Indentation lines */
+  .tree-item__children {
+    position: relative;
+  }
+
+  .tree-item__children::before {
+    content: '';
+    position: absolute;
+    top: var(--indent-guide-offset);
+    bottom: var(--indent-guide-offset);
+    left: calc(1em - (var(--indent-guide-width) / 2) - 1px);
+    border-inline-end: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color);
+    z-index: 1;
+  }
+
+  .tree-item--rtl .tree-item__children::before {
+    left: auto;
+    right: 1em;
+  }
+
+  @media (forced-colors: active) {
+    :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
+      outline: dashed 1px SelectedItem;
+    }
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-tree-item.css.js.map

package/dist/src/nile-tree-item/nile-tree-item.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-tree-item.css.js","sourceRoot":"","sources":["../../../src/nile-tree-item/nile-tree-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmKxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit-element';\n\n/**\n * TreeItem CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: block;\n    outline: 0;\n    z-index: 0;\n  }\n\n  :host(:focus) {\n    outline: none;\n  }\n\n  slot:not([name])::slotted(nile-icon) {\n    margin-inline-end: 0.5rem;\n  }\n\n  .tree-item {\n    position: relative;\n    display: flex;\n    align-items: stretch;\n    flex-direction: column;\n    color: #777D82;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .tree-item__checkbox {\n    pointer-events: none;\n  }\n\n  .tree-item__expand-button,\n  .tree-item__checkbox,\n  .tree-item__label {\n    font-family: var(--nile-font-family-serif);\n    font-size: 16px;\n    font-weight: 400;\n  }\n\n  .tree-item__checkbox::part(base) {\n    display: flex;\n    align-items: center;\n  }\n\n  .tree-item__indentation {\n    display: block;\n    width: 1em;\n    flex-shrink: 0;\n  }\n\n  .tree-item__expand-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: content-box;\n    color: #C7CED4;\n    padding: 0.5rem;\n    width: 1rem;\n    height: 1rem;\n    flex-shrink: 0;\n    cursor: pointer;\n  }\n\n  .tree-item__expand-button {\n    transition: 250ms rotate ease;\n  }\n\n  .tree-item--expanded .tree-item__expand-button {\n    rotate: 90deg;\n  }\n\n  .tree-item--expanded.tree-item--rtl .tree-item__expand-button {\n    rotate: -90deg;\n  }\n\n  .tree-item--expanded slot[name='expand-icon'],\n  .tree-item:not(.tree-item--expanded) slot[name='collapse-icon'] {\n    display: none;\n  }\n\n  .tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot {\n    display: none;\n  }\n\n  .tree-item__expand-button--visible {\n    cursor: pointer;\n  }\n\n  .tree-item__item {\n    display: flex;\n    align-items: center;\n    border-inline-start: solid 3px transparent;\n  }\n\n  .tree-item--disabled .tree-item__item {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n\n  :host(:focus-visible) .tree-item__item {\n    outline: solid 3px #C7CED4;\n    outline-offset: 1px;\n    z-index: 2;\n  }\n\n  :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n    background-color: #eaecf0;\n    border-inline-start-color: #035da6;\n  }\n\n  :host(:not([aria-disabled='true'])) .tree-item__expand-button {\n    color: #777D82;\n  }\n\n  .tree-item__label {\n    display: flex;\n    align-items: center;\n    transition: 150ms color;\n  }\n\n  .tree-item__children {\n    display: block;\n    font-size: calc(1em + var(--indent-size, 1rem));\n  }\n\n  /* Indentation lines */\n  .tree-item__children {\n    position: relative;\n  }\n\n  .tree-item__children::before {\n    content: '';\n    position: absolute;\n    top: var(--indent-guide-offset);\n    bottom: var(--indent-guide-offset);\n    left: calc(1em - (var(--indent-guide-width) / 2) - 1px);\n    border-inline-end: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color);\n    z-index: 1;\n  }\n\n  .tree-item--rtl .tree-item__children::before {\n    left: auto;\n    right: 1em;\n  }\n\n  @media (forced-colors: active) {\n    :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n      outline: dashed 1px SelectedItem;\n    }\n  }\n`;\n\nexport default [styles];\n"]}