@fluid-topics/ft-tree-list 1.2.67

package/build/ftds-tree-list.d.ts

@@ -0,0 +1,64 @@
+import { PropertyValues } from "lit";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { EmptyStateConfiguration, FtdsTreeListProperties } from "./ftds-tree-list.properties";
+import { FtTreeListData, FtTreeNode } from "./model/FtTreeListData";
+import { TemplateResult } from "lit/development";
+export declare class NodeSelectedEvent extends CustomEvent<FtTreeNode> {
+    constructor(node: FtTreeNode);
+}
+export declare class FtdsTreeList extends FtLitElement implements FtdsTreeListProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    data?: FtTreeListData;
+    label: string;
+    pageSize?: number;
+    selectedNode?: FtTreeNode;
+    expandLabel: string;
+    collapseLabel: string;
+    showMoreLabel: string;
+    expandParametrizedLabel: string;
+    collapseParametrizedLabel: string;
+    expandAllLabel: string;
+    collapseAllLabel: string;
+    emptyState?: EmptyStateConfiguration;
+    nodeToFocus?: FtTreeNode;
+    isTreeSelectorCollapsed?: boolean;
+    userOpenedNodes: Set<string>;
+    userClosedNodes: Set<string>;
+    expandAll(): void;
+    collapseAll(): void;
+    getItemSelector(item: FtTreeNode): HTMLElement;
+    isNodeExpanded(node: FtTreeNode): boolean;
+    setFocusToTreeItem(item: FtTreeNode): void;
+    protected render(): TemplateResult<1>;
+    protected renderNode(node: FtTreeNode): unknown;
+    protected renderChildNodes(isNodeExpanded: boolean, visibleChildren: FtTreeNode[], node: FtTreeNode, childrenClasses: {
+        expanded: boolean;
+        collapsed: boolean;
+        "with-expandable": boolean;
+        "with-children": boolean;
+    }): TemplateResult<1>;
+    protected renderShowMore(node: FtTreeNode, childrenClasses: {
+        expanded: boolean;
+        collapsed: boolean;
+        "with-expandable": boolean;
+        "with-children": boolean;
+    }): TemplateResult<1>;
+    protected renderEmptyState(): TemplateResult<1>;
+    protected willUpdate(props: PropertyValues): void;
+    protected updated(props: PropertyValues): void;
+    protected onKeydown(event: KeyboardEvent, currentNode: FtTreeNode, isLoadMore: boolean, parentNode?: FtTreeNode): void;
+    protected setFocusToPreviousNode(visibleItems: FtTreeNode[], currentNodeIndex: number): void;
+    protected setFocusToNextNode(visibleItems: FtTreeNode[], currentNodeIndex: number): void;
+    protected getAdjacentVisibleTreeItems(tree: FtTreeNode[], currentNode: FtTreeNode): FtTreeNode[];
+    protected isVisible(treeitem: FtTreeNode): boolean;
+    protected expandNode(expanded: boolean, currentNodeValue: string): void;
+    protected toggleExpandAll(): void;
+    protected getAllClosedNodes(node: FtTreeNode): string[];
+    protected getChildrenCount(node: FtTreeNode): number;
+    protected getEntriesCount(): number;
+    protected hasExpandableChildren(node: FtTreeNode): boolean;
+    protected hasChildren(node: FtTreeNode): boolean;
+    protected loadMore(node: FtTreeNode): void;
+    protected selectNode(e: MouseEvent | KeyboardEvent, node: FtTreeNode): void;
+}

package/build/ftds-tree-list.js

@@ -0,0 +1,489 @@
+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 } from "@fluid-topics/ft-wc-utils";
+import { FtTypography, FtTypographyVariants } from "@fluid-topics/ft-typography";
+import { FtIcon, FtIcons } from "@fluid-topics/ft-icon";
+import { FtdsButton } from "@fluid-topics/ft-button";
+import { styles } from "./ftds-tree-list.styles";
+import { createLoadMoreNode, getPathToNode, TraversalInstruction, traverseVisibleTree } from "./model/FtTreeListData";
+import { cactusSvg } from "@fluid-topics/ft-assets";
+export class NodeSelectedEvent extends CustomEvent {
+    constructor(node) {
+        super("node-selected", { detail: node });
+    }
+}
+class FtdsTreeList extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.label = "";
+        this.expandLabel = "Expand";
+        this.collapseLabel = "Collapse";
+        this.showMoreLabel = "Show more";
+        this.expandParametrizedLabel = "Expand {0}";
+        this.collapseParametrizedLabel = "Collapse {0}";
+        this.expandAllLabel = "Expand all";
+        this.collapseAllLabel = "Collapse all";
+        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");
+    }
+    render() {
+        var _a;
+        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, () => html `
+                        <ft-typography class="header-label" variant="${FtTypographyVariants.body1semibold}">
+                            ${this.label}
+                            <ft-typography variant="${FtTypographyVariants.body2medium}" class="node-children-count">
+                                    (${this.getEntriesCount()})
+                            </ft-typography>
+                        </ft-typography>
+                    `)}
+                ${when(atLeastOneRootNodeIsExpandable, () => html `
+                        <ftds-button
+                            dense
+                            tooltipposition="bottom"
+                            part="expand-button"
+                            family="${DesignSystemFamily.neutral}"
+                            icon=${FtIcons.ICON_COLLAPSE}
+                            label="${this.collapseAllLabel}"
+                            @click="${() => this.collapseAll()}"
+                        >
+                            ${this.collapseAllLabel}
+                        </ftds-button>
+                    `)}
+            </div>
+            ${(!((_a = this.data) === null || _a === void 0 ? void 0 : _a.rootNodes) || this.data.rootNodes.length <= 0) ? this.renderEmptyState() : html `
+                <ul role="tree" class="ft-tree-list" aria-labelledby="${this.label}">
+                    ${repeat(this.data.rootNodes, (node) => node.value, (node) => this.renderNode(node))}
+                </ul>
+            `}
+        `;
+    }
+    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="${classMap(childrenClasses)}"
+                    tabindex="-1"
+                    @keydown="${(e) => this.onKeydown(e, node, false)}"
+                >
+                    ${when(this.hasChildren(node), () => html `
+                            <ft-icon
+                                part="node-expand"
+                                value=${isNodeExpanded ? FtIcons.THIN_ARROW : FtIcons.THIN_ARROW_RIGHT}
+                                @click="${() => this.expandNode(!isNodeExpanded, node.value)}"
+                            ></ft-icon>
+                        `)}
+                    <div class="node-label-container" @click=${(e) => this.selectNode(e, node)}>
+                        <ft-typography
+                            part="node-label"
+                            variant="${FtTypographyVariants.body2medium}"
+                        >
+                            ${node.label}
+                        </ft-typography>
+                        ${when(this.hasChildren(node), () => html `
+                            <ft-typography variant="${FtTypographyVariants.body2medium}" class="node-children-count">
+                                    (${this.getChildrenCount(node)})
+                            </ft-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="${FtIcons.ARROW_DOWN}"
+                   tabindex="-1"
+                   aria-expanded="false"
+                   class="${classMap(childrenClasses)}"
+                   @click="${() => this.loadMore(node)}"
+                   @keydown="${(e) => this.onKeydown(e, createLoadMoreNode(node), true, node)}">
+                    <ft-icon value=${FtIcons.ARROW_DOWN}></ft-icon>
+                    <ft-typography
+                        part="node-label"
+                        variant="${FtTypographyVariants.body2medium}"
+                    >
+                        ${this.showMoreLabel}
+                    </ft-typography>
+                </a>
+            </li>
+        `;
+    }
+    renderEmptyState() {
+        var _a, _b;
+        return html `
+            <div class="empty-state">
+                ${((_a = this.emptyState) === null || _a === void 0 ? void 0 : _a.noImage) ? nothing : cactusSvg}
+                <ft-typography variant="${FtTypographyVariants.body2medium}">
+                    ${(_b = this.emptyState) === null || _b === void 0 ? void 0 : _b.content}
+                </ft-typography>
+            </div>
+        `;
+    }
+    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);
+        let currentNodeIndex = visibleItems.findIndex(node => node.value === currentNode.value);
+        if (event.shiftKey && (event.key === " " || event.key === "Space")) {
+            event.stopPropagation();
+        }
+        else {
+            let nodeExpanded = this.isNodeExpanded(currentNode);
+            switch (event.key) {
+                case "Enter":
+                case " ":
+                case "Space":
+                    if (isLoadMore && parentNode) {
+                        this.loadMore(parentNode);
+                    }
+                    else {
+                        this.selectNode(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 {
+                        let breadcrumb = getPathToNode(tree, currentNode.value);
+                        if (breadcrumb && breadcrumb.length > 1) {
+                            let 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 "*":
+                    let breadcrumb = getPathToNode(tree, currentNode.value);
+                    if (breadcrumb && breadcrumb.length > 1) {
+                        let 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;
+            }
+        }
+        let 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) {
+        let count = 0;
+        traverseVisibleTree(node.children, () => {
+            count++;
+        });
+        return count;
+    }
+    getEntriesCount() {
+        var _a;
+        let count = 0;
+        if ((_a = this.data) === null || _a === void 0 ? void 0 : _a.rootNodes) {
+            traverseVisibleTree(this.data.rootNodes, () => {
+                count++;
+            });
+        }
+        return count;
+    }
+    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]);
+        }
+    }
+    selectNode(e, node) {
+        var _a;
+        e.preventDefault();
+        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 currentTarget = e.currentTarget;
+        if (e.type === "click") {
+            const item = currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.parentElement;
+            item === null || item === void 0 ? void 0 : item.setAttribute("aria-selected", "true");
+        }
+        else if (e.type === "keydown") {
+            currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.setAttribute("aria-selected", "true");
+        }
+        this.selectedNode = node;
+        this.dispatchEvent(new NodeSelectedEvent(node));
+        this.setFocusToTreeItem(node);
+        e.stopPropagation();
+    }
+}
+FtdsTreeList.elementDefinitions = {
+    "ft-typography": FtTypography,
+    "ftds-button": FtdsButton,
+    "ft-icon": FtIcon
+};
+FtdsTreeList.styles = styles;
+__decorate([
+    property()
+], FtdsTreeList.prototype, "data", void 0);
+__decorate([
+    property()
+], FtdsTreeList.prototype, "label", void 0);
+__decorate([
+    property()
+], 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, "showMoreLabel", 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([])
+], FtdsTreeList.prototype, "emptyState", void 0);
+__decorate([
+    state()
+], FtdsTreeList.prototype, "nodeToFocus", void 0);
+__decorate([
+    state()
+], FtdsTreeList.prototype, "isTreeSelectorCollapsed", void 0);
+__decorate([
+    state({ hasChanged })
+], FtdsTreeList.prototype, "userOpenedNodes", void 0);
+__decorate([
+    state({ hasChanged })
+], FtdsTreeList.prototype, "userClosedNodes", void 0);
+export { FtdsTreeList };

package/build/ftds-tree-list.properties.d.ts

@@ -0,0 +1,18 @@
+import { FtTree, FtTreeNode } from "@fluid-topics/ft-tree-selector/build/model/FtTree";
+import { TemplateResult } from "lit/development";
+export interface FtdsTreeListProperties {
+    label?: string;
+    data?: FtTree;
+    selectedNode?: FtTreeNode;
+    pageSize?: number;
+    expandLabel: string;
+    collapseLabel: string;
+    expandParametrizedLabel: string;
+    collapseParametrizedLabel: string;
+    expandAllLabel: string;
+    collapseAllLabel: string;
+}
+export interface EmptyStateConfiguration {
+    noImage: boolean;
+    content: string | TemplateResult;
+}

package/build/ftds-tree-list.properties.js

@@ -0,0 +1 @@
+export {};

package/build/ftds-tree-list.styles.d.ts

@@ -0,0 +1,2 @@
+export { treeList as FtdsTreeListCssVariables } from "@fluid-topics/design-system-variables";
+export declare const styles: import("lit").CSSResult;