@fluid-topics/ftds-tree-list 2.1.0

package/build/ftds-tree-list.js

@@ -0,0 +1,579 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing, } from "lit";
+import { property, state, } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { when } from "lit/directives/when.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { classMap } from "lit/directives/class-map.js";
+import { DesignSystemFamily, FtLitElement, hasChanged, jsonProperty, numberProperty, } from "@fluid-topics/ft-wc-utils";
+import { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ftds-typography";
+import { FtdsIcon, FtdsIcons, FtdsIconVariants, } from "@fluid-topics/ftds-icon";
+import { FtdsButton } from "@fluid-topics/ftds-button";
+import { styles } from "./ftds-tree-list.styles";
+import { createLoadMoreNode, getPathToNode, TraversalInstruction, traverseVisibleTree, } from "./model/FtdsTreeListData";
+import { cactusSvg } from "@fluid-topics/ft-assets";
+import { FtSkeleton } from "@fluid-topics/ft-skeleton";
+export class NodeSelectedEvent extends CustomEvent {
+    constructor(node) {
+        super("node-selected", { detail: node });
+    }
+}
+export class FtdsTreeList extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.label = "";
+        this.pageSize = 10;
+        this.expandLabel = "Expand";
+        this.collapseLabel = "Collapse";
+        this.loadMoreLabel = "Load more";
+        this.expandParametrizedLabel = "Expand {0}";
+        this.collapseParametrizedLabel = "Collapse {0}";
+        this.expandAllLabel = "Expand all";
+        this.collapseAllLabel = "Collapse all";
+        this.loading = false;
+        this.childrenCounts = new Map();
+        this.userOpenedNodes = new Set();
+        this.userClosedNodes = new Set();
+    }
+    expandAll() {
+        this.userClosedNodes = new Set();
+        this.userOpenedNodes = new Set(this.data.rootNodes.flatMap((n) => this.getAllClosedNodes(n)));
+        this.isTreeSelectorCollapsed = false;
+    }
+    collapseAll() {
+        this.userOpenedNodes = new Set();
+        this.userClosedNodes = new Set(this.data.rootNodes.filter((n) => n.expanded).map((n) => n.value));
+        this.isTreeSelectorCollapsed = true;
+    }
+    getItemSelector(item) {
+        var _a;
+        return (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-value="${item.value}"]`);
+    }
+    isNodeExpanded(node) {
+        return (!this.userClosedNodes.has(node.value)
+            && (node.expanded || this.userOpenedNodes.has(node.value)));
+    }
+    setFocusToTreeItem(item) {
+        var _a, _b;
+        (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[tabindex="0"]`)) === null || _b === void 0 ? void 0 : _b.setAttribute("tabindex", "-1");
+        const itemEl = this.getItemSelector(item);
+        itemEl === null || itemEl === void 0 ? void 0 : itemEl.focus();
+        itemEl === null || itemEl === void 0 ? void 0 : itemEl.setAttribute("tabindex", "0");
+    }
+    async selectNodeByBreadcrumb(breadcrumb) {
+        let currentNode = this.data.rootNodes.find((root) => root.value === breadcrumb[0]);
+        for (let i = 0; i < breadcrumb.length - 1; i++) {
+            currentNode = this.displayChild(currentNode, breadcrumb[i + 1]);
+        }
+        await this.updateComplete;
+        this.selectNode(currentNode);
+    }
+    render() {
+        const atLeastOneRootNodeIsExpandable = this.data && this.data.rootNodes && this.data.rootNodes.length > 0
+            ? this.data.rootNodes.some((rootNode) => rootNode.children.length > 0)
+            : false;
+        return html `
+            <div part="header">
+                ${when(this.label.length > 0, () => this.renderLeftHeader())}
+                ${when(atLeastOneRootNodeIsExpandable, () => html `
+                        <ftds-button
+                            dense
+                            tooltipposition="bottom"
+                            part="expand-button"
+                            family="${DesignSystemFamily.neutral}"
+                            icon="${FtdsIcons.ARROWS_TO_LINE}"
+                            label="${this.collapseAllLabel}"
+                            @click=${() => this.collapseAll()}
+                        >
+                            ${this.collapseAllLabel}
+                        </ftds-button>
+                    `)}
+            </div>
+            ${this.renderBody()}
+        `;
+    }
+    renderBody() {
+        var _a;
+        if (this.loading) {
+            return this.renderLoadingState();
+        }
+        else if (!((_a = this.data) === null || _a === void 0 ? void 0 : _a.rootNodes) || this.data.rootNodes.length <= 0) {
+            return this.renderEmptyState();
+        }
+        else {
+            return html `
+                <ul role="tree" class="ftds-tree-list" aria-labelledby="${this.label}">
+                    ${repeat(this.data.rootNodes, (node) => node.value, (node) => this.renderNode(node))}
+                </ul>`;
+        }
+    }
+    renderLoadingState() {
+        const skeletons = [
+            50, 45, 30, 35, 25,
+            44, 35, 27, 42, 25,
+            47, 30, 29, 45, 49,
+        ].map((width) => html `
+            <li>
+                <div class="ftds-tree-list--item">
+                    <ft-skeleton style="--ft-skeleton--width: ${width}%"></ft-skeleton>
+                </div>
+            </li>`);
+        return html `
+            <ul class="ftds-tree-list loading-state">${skeletons}</ul>`;
+    }
+    renderLeftHeader() {
+        if (this.loading) {
+            return html `
+                <div class="header-left">
+                    <ftds-typography class="header-label" variant="${FtdsTypographyVariants.body1semibold}">
+                        ${this.label}
+                    </ftds-typography>
+                    <ft-skeleton class="node-count-loader"></ft-skeleton>
+                </div>
+            `;
+        }
+        else {
+            return html `
+                <ftds-typography class="header-label" variant="${FtdsTypographyVariants.body1semibold}">
+                    ${this.label}
+                    <ftds-typography variant="${FtdsTypographyVariants.body2medium}" class="node-children-count">
+                            (${this.getEntriesCount()})
+                    </ftds-typography>
+                </ftds-typography>
+            `;
+        }
+    }
+    renderNode(node) {
+        var _a;
+        const isNodeExpanded = this.isNodeExpanded(node);
+        node.loadedCount = (_a = node.loadedCount) !== null && _a !== void 0 ? _a : this.pageSize;
+        if (!node.loadedCount) {
+            node.loadedCount = node.children.length;
+        }
+        const visibleChildren = node.children.slice(0, node.loadedCount);
+        const childrenClasses = {
+            expanded: isNodeExpanded,
+            collapsed: isNodeExpanded,
+            "with-expandable": this.hasExpandableChildren(node),
+            "with-children": this.hasChildren(node),
+        };
+        return html `
+            <li role="none">
+                <a
+                    part="node-container"
+                    role="treeitem"
+                    data-value="${node.value}"
+                    aria-expanded="${ifDefined(isNodeExpanded)}"
+                    class="ftds-tree-list--item ${classMap(childrenClasses)}"
+                    tabindex="-1"
+                    @keydown=${(e) => this.onKeydown(e, node, false)}
+                >
+                    ${when(this.hasChildren(node), () => html `
+                            <ftds-icon
+                                part="node-expand"
+                                icon="${isNodeExpanded ? FtdsIcons.ANGLE_DOWN : FtdsIcons.ANGLE_RIGHT}"
+                                variant="${FtdsIconVariants.regular}"
+                                @click=${() => this.expandNode(!isNodeExpanded, node.value)}
+                            ></ftds-icon>
+                        `)}
+                    <div class="node-label-container" @click=${(e) => this.handleNodeSelectEvent(e, node)}>
+                        <ftds-typography
+                            part="node-label"
+                            variant="${FtdsTypographyVariants.body2medium}"
+                        >
+                            ${node.label}
+                        </ftds-typography>
+                        ${when(this.hasChildren(node), () => html `
+                            <ftds-typography variant="${FtdsTypographyVariants.body2medium}" class="node-children-count">
+                                    (${this.getChildrenCount(node)})
+                            </ftds-typography>
+                        `)}
+                    </div>
+                </a>
+                ${this.hasChildren(node) ? this.renderChildNodes(isNodeExpanded, visibleChildren, node, childrenClasses) : nothing}
+            </li>
+        `;
+    }
+    renderChildNodes(isNodeExpanded, visibleChildren, node, childrenClasses) {
+        return html `
+            <ul role="group">
+                ${when(isNodeExpanded, () => html `
+                        ${repeat(visibleChildren, (c) => c.value, (c) => this.renderNode(c))}
+                        ${node.loadedCount && node.children.length > node.loadedCount
+            ? this.renderShowMore(node, childrenClasses) : nothing}`)}
+            </ul>
+        `;
+    }
+    renderShowMore(node, childrenClasses) {
+        return html `
+            <li role="none">
+                <a part="load-more"
+                   role="treeitem"
+                   data-value="load-more-${node.value}"
+                   icon="${FtdsIcons.ARROW_DOWN}"
+                   tabindex="-1"
+                   aria-expanded="false"
+                   class="ftds-tree-list--item ${classMap(childrenClasses)}"
+                   @click=${() => this.loadMore(node)}
+                   @keydown=${(e) => this.onKeydown(e, createLoadMoreNode(node), true, node)}>
+                    <ftds-icon icon="${FtdsIcons.ARROW_DOWN}" variant="${FtdsIconVariants.regular}"></ftds-icon>
+                    <ftds-typography
+                        part="node-label"
+                        variant="${FtdsTypographyVariants.body2medium}"
+                    >
+                        ${this.loadMoreLabel}
+                    </ftds-typography>
+                </a>
+            </li>
+        `;
+    }
+    renderEmptyState() {
+        var _a;
+        return html `
+            <div class="empty-state">
+                ${((_a = this.emptyState) === null || _a === void 0 ? void 0 : _a.noImage) ? nothing : cactusSvg}
+                ${this.renderEmptyStateTitle()}
+                ${this.renderEmptyStateDescription()}
+            </div>
+        `;
+    }
+    renderEmptyStateTitle() {
+        if (!this.emptyState) {
+            return nothing;
+        }
+        if (typeof this.emptyState.title === "string") {
+            return html `
+                <ftds-typography class="empty-state--title" variant="${FtdsTypographyVariants.body1medium}">
+                    ${this.emptyState.title}
+                </ftds-typography>`;
+        }
+        else {
+            return this.emptyState.title;
+        }
+    }
+    renderEmptyStateDescription() {
+        var _a;
+        if (!((_a = this.emptyState) === null || _a === void 0 ? void 0 : _a.description)) {
+            return nothing;
+        }
+        if (typeof this.emptyState.description === "string") {
+            this.emptyState.description = [this.emptyState.description];
+        }
+        if (this.emptyState.description instanceof Array) {
+            const labels = this.emptyState.description.map((label) => html `
+                <ftds-typography variant="${FtdsTypographyVariants.body1medium}">
+                    ${label}
+                </ftds-typography>`);
+            return html `
+                <div class="empty-state--description">${labels}</div>`;
+        }
+        else {
+            return this.emptyState.description;
+        }
+    }
+    willUpdate(props) {
+        var _a, _b;
+        super.willUpdate(props);
+        if (!this.selectedNode && ((_a = this.data) === null || _a === void 0 ? void 0 : _a.rootNodes)) {
+            this.selectedNode = (_b = this.data) === null || _b === void 0 ? void 0 : _b.rootNodes[0];
+        }
+    }
+    updated(props) {
+        super.updated(props);
+        if (this.nodeToFocus) {
+            this.setFocusToTreeItem(this.nodeToFocus);
+            this.nodeToFocus = undefined;
+        }
+    }
+    onKeydown(event, currentNode, isLoadMore, parentNode) {
+        let needToStopPropagation = false;
+        const tree = this.data.rootNodes;
+        const visibleItems = this.getAdjacentVisibleTreeItems(tree, currentNode);
+        const currentNodeIndex = visibleItems.findIndex((node) => node.value === currentNode.value);
+        if (event.shiftKey && (event.key === " " || event.key === "Space")) {
+            event.stopPropagation();
+        }
+        else {
+            const nodeExpanded = this.isNodeExpanded(currentNode);
+            switch (event.key) {
+                case "Enter":
+                case " ":
+                case "Space":
+                    if (isLoadMore && parentNode) {
+                        this.loadMore(parentNode);
+                    }
+                    else {
+                        this.handleNodeSelectEvent(event, currentNode);
+                    }
+                    needToStopPropagation = true;
+                    break;
+                case "ArrowDown":
+                    this.setFocusToNextNode(visibleItems, currentNodeIndex);
+                    needToStopPropagation = true;
+                    break;
+                case "ArrowUp":
+                    this.setFocusToPreviousNode(visibleItems, currentNodeIndex);
+                    needToStopPropagation = true;
+                    break;
+                case "ArrowRight":
+                    if (nodeExpanded) {
+                        if (currentNode.children.length > 0) {
+                            this.setFocusToTreeItem(currentNode.children[0]);
+                        }
+                    }
+                    else {
+                        this.expandNode(!nodeExpanded, currentNode.value);
+                    }
+                    needToStopPropagation = true;
+                    break;
+                case "ArrowLeft":
+                    if (nodeExpanded) {
+                        this.expandNode(!nodeExpanded, currentNode.value);
+                    }
+                    else {
+                        const breadcrumb = getPathToNode(tree, currentNode.value);
+                        if (breadcrumb && breadcrumb.length > 1) {
+                            const parent = breadcrumb[breadcrumb.length - 2];
+                            this.setFocusToTreeItem(parent);
+                        }
+                    }
+                    needToStopPropagation = true;
+                    break;
+                case "Home":
+                    this.setFocusToTreeItem(visibleItems[0]);
+                    needToStopPropagation = true;
+                    break;
+                case "End":
+                    this.setFocusToTreeItem(visibleItems[visibleItems.length - 1]);
+                    needToStopPropagation = true;
+                    break;
+                case "*":
+                    const breadcrumb = getPathToNode(tree, currentNode.value);
+                    if (breadcrumb && breadcrumb.length > 1) {
+                        const siblings = breadcrumb[breadcrumb.length - 2].children;
+                        for (const node of siblings) {
+                            this.expandNode(true, node.value);
+                        }
+                    }
+                    else if ((breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.length) == 1) {
+                        for (const rootNode of this.data.rootNodes) {
+                            this.expandNode(true, rootNode.value);
+                        }
+                    }
+                    needToStopPropagation = true;
+                    break;
+            }
+        }
+        if (needToStopPropagation) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+    setFocusToPreviousNode(visibleItems, currentNodeIndex) {
+        if (visibleItems[currentNodeIndex - 1]) {
+            this.setFocusToTreeItem(visibleItems[currentNodeIndex - 1]);
+        }
+    }
+    setFocusToNextNode(visibleItems, currentNodeIndex) {
+        if (visibleItems[currentNodeIndex + 1]) {
+            this.setFocusToTreeItem(visibleItems[currentNodeIndex + 1]);
+        }
+    }
+    getAdjacentVisibleTreeItems(tree, currentNode) {
+        const visibleTreeItems = [];
+        let stopAfterNext = false;
+        let push = false;
+        traverseVisibleTree(tree, (node) => {
+            const last = stopAfterNext;
+            if (node.value === currentNode.value) {
+                stopAfterNext = true;
+                push = true;
+            }
+            if (this.isVisible(node)) {
+                if (push) {
+                    visibleTreeItems.push(node);
+                }
+                else {
+                    visibleTreeItems[0] = node;
+                }
+            }
+            return new TraversalInstruction(last, !this.isNodeExpanded(node));
+        });
+        return visibleTreeItems;
+    }
+    isVisible(treeitem) {
+        var _a, _b;
+        const tree = this.data.rootNodes;
+        if (treeitem.value.includes("load-more-")) {
+            const parentValue = treeitem.value.replace("load-more-", "");
+            const parentItem = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-value="${parentValue}"]`);
+            if (!parentItem || parentItem.getAttribute("aria-expanded") === "false") {
+                return false;
+            }
+        }
+        const pathToNode = getPathToNode(tree, treeitem.value);
+        if (pathToNode && pathToNode.length > 1) {
+            const parentNode = pathToNode[(pathToNode === null || pathToNode === void 0 ? void 0 : pathToNode.length) - 2];
+            const parentItem = this.getItemSelector(parentNode);
+            const childIndex = parentNode.children.findIndex((child) => child.value === treeitem.value);
+            if (!parentItem || parentItem.getAttribute("aria-expanded") === "false" || childIndex >= ((_b = parentNode.loadedCount) !== null && _b !== void 0 ? _b : Infinity)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    expandNode(expanded, currentNodeValue) {
+        if (expanded) {
+            if (this.userClosedNodes.has(currentNodeValue)) {
+                this.userClosedNodes.delete(currentNodeValue);
+            }
+            else {
+                this.userOpenedNodes.add(currentNodeValue);
+            }
+        }
+        else {
+            if (this.userOpenedNodes.has(currentNodeValue)) {
+                this.userOpenedNodes.delete(currentNodeValue);
+            }
+            else {
+                this.userClosedNodes.add(currentNodeValue);
+            }
+        }
+        this.requestUpdate();
+    }
+    toggleExpandAll() {
+        if (this.isTreeSelectorCollapsed) {
+            this.expandAll();
+        }
+        else {
+            this.collapseAll();
+        }
+    }
+    getAllClosedNodes(node) {
+        if (node.children.length !== 0) {
+            return [
+                ...(node.expanded ? [] : [node.value]),
+                ...node.children.flatMap((c) => this.getAllClosedNodes(c)),
+            ];
+        }
+        else {
+            return [];
+        }
+    }
+    getChildrenCount(node) {
+        if (this.childrenCounts.has(node.value)) {
+            return this.childrenCounts.get(node.value);
+        }
+        const childrenCount = node.children.reduce((count, child) => count + this.getChildrenCount(child) + 1, 0);
+        this.childrenCounts.set(node.value, childrenCount);
+        return childrenCount;
+    }
+    getEntriesCount() {
+        var _a, _b;
+        return (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.rootNodes.reduce((count, node) => count + this.getChildrenCount(node) + 1, 0)) !== null && _b !== void 0 ? _b : 0;
+    }
+    hasExpandableChildren(node) {
+        return node.children.some((child) => child.children.length > 0);
+    }
+    hasChildren(node) {
+        return node.children.length > 0;
+    }
+    loadMore(node) {
+        var _a;
+        if (this.pageSize) {
+            const prevLoadedCount = (_a = node.loadedCount) !== null && _a !== void 0 ? _a : this.pageSize;
+            node.loadedCount = prevLoadedCount + this.pageSize;
+            this.nodeToFocus = node.children[prevLoadedCount];
+            this.requestUpdate();
+            this.setFocusToTreeItem(node.children[prevLoadedCount]);
+        }
+    }
+    displayChild(currentNode, childValue) {
+        var _a;
+        this.expandNode(true, currentNode.value);
+        const childIndex = currentNode.children.findIndex((child) => child.value === childValue);
+        currentNode.loadedCount = Math.max((_a = currentNode.loadedCount) !== null && _a !== void 0 ? _a : this.pageSize, childIndex + 1);
+        return currentNode.children[childIndex];
+    }
+    handleNodeSelectEvent(e, node) {
+        e.preventDefault();
+        this.selectNode(node);
+        e.stopPropagation();
+    }
+    selectNode(node) {
+        var _a, _b;
+        const oldNode = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("[aria-selected]");
+        oldNode === null || oldNode === void 0 ? void 0 : oldNode.removeAttribute("aria-selected");
+        const nodeContainer = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(`[data-value="${node.value}"]`);
+        nodeContainer.setAttribute("aria-selected", "true");
+        this.selectedNode = node;
+        this.dispatchEvent(new NodeSelectedEvent(node));
+        this.setFocusToTreeItem(node);
+    }
+}
+FtdsTreeList.elementDefinitions = {
+    "ftds-typography": FtdsTypography,
+    "ftds-button": FtdsButton,
+    "ftds-icon": FtdsIcon,
+    "ft-skeleton": FtSkeleton,
+};
+FtdsTreeList.styles = styles;
+__decorate([
+    property()
+], FtdsTreeList.prototype, "data", void 0);
+__decorate([
+    property()
+], FtdsTreeList.prototype, "label", void 0);
+__decorate([
+    numberProperty()
+], FtdsTreeList.prototype, "pageSize", void 0);
+__decorate([
+    property()
+], FtdsTreeList.prototype, "selectedNode", void 0);
+__decorate([
+    property()
+], FtdsTreeList.prototype, "expandLabel", void 0);
+__decorate([
+    property()
+], FtdsTreeList.prototype, "collapseLabel", void 0);
+__decorate([
+    property()
+], FtdsTreeList.prototype, "loadMoreLabel", void 0);
+__decorate([
+    property()
+], FtdsTreeList.prototype, "expandParametrizedLabel", void 0);
+__decorate([
+    property()
+], FtdsTreeList.prototype, "collapseParametrizedLabel", void 0);
+__decorate([
+    property()
+], FtdsTreeList.prototype, "expandAllLabel", void 0);
+__decorate([
+    property()
+], FtdsTreeList.prototype, "collapseAllLabel", void 0);
+__decorate([
+    jsonProperty(undefined)
+], FtdsTreeList.prototype, "emptyState", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsTreeList.prototype, "loading", void 0);
+__decorate([
+    state()
+], FtdsTreeList.prototype, "nodeToFocus", void 0);
+__decorate([
+    state()
+], FtdsTreeList.prototype, "isTreeSelectorCollapsed", void 0);
+__decorate([
+    state()
+], FtdsTreeList.prototype, "childrenCounts", void 0);
+__decorate([
+    state({ hasChanged })
+], FtdsTreeList.prototype, "userOpenedNodes", void 0);
+__decorate([
+    state({ hasChanged })
+], FtdsTreeList.prototype, "userClosedNodes", void 0);