@fluid-topics/ft-tree-list 1.3.21 → 1.3.23

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

@@ -21,6 +21,7 @@ export declare class FtdsTreeList extends FtLitElement implements FtdsTreeListPr
     expandAllLabel: string;
     collapseAllLabel: string;
     emptyState?: EmptyStateConfiguration;
+    loading: boolean;
     nodeToFocus?: FtTreeNode;
     isTreeSelectorCollapsed?: boolean;
     childrenCounts: Map<string, number>;
@@ -33,6 +34,9 @@ export declare class FtdsTreeList extends FtLitElement implements FtdsTreeListPr
     setFocusToTreeItem(item: FtTreeNode): void;
     selectNodeByBreadcrumb(breadcrumb: string[]): Promise<void>;
     protected render(): TemplateResult<1>;
+    protected renderBody(): TemplateResult;
+    protected renderLoadingState(): TemplateResult;
+    protected renderLeftHeader(): TemplateResult;
     protected renderNode(node: FtTreeNode): unknown;
     protected renderChildNodes(isNodeExpanded: boolean, visibleChildren: FtTreeNode[], node: FtTreeNode, childrenClasses: {
         expanded: boolean;
@@ -47,6 +51,8 @@ export declare class FtdsTreeList extends FtLitElement implements FtdsTreeListPr
         "with-children": boolean;
     }): TemplateResult<1>;
     protected renderEmptyState(): TemplateResult<1>;
+    protected renderEmptyStateTitle(): TemplateResult | symbol;
+    protected renderEmptyStateDescription(): TemplateResult | symbol;
     protected willUpdate(props: PropertyValues): void;
     protected updated(props: PropertyValues): void;
     protected onKeydown(event: KeyboardEvent, currentNode: FtTreeNode, isLoadMore: boolean, parentNode?: FtTreeNode): void;

package/build/ftds-tree-list.js

@@ -17,6 +17,7 @@ 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";
+import { FtSkeleton } from "@fluid-topics/ft-skeleton";
 export class NodeSelectedEvent extends CustomEvent {
     constructor(node) {
         super("node-selected", { detail: node });
@@ -34,6 +35,7 @@ class FtdsTreeList extends FtLitElement {
         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();
@@ -72,20 +74,12 @@ class FtdsTreeList extends FtLitElement {
         this.selectNode(currentNode);
     }
     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(this.label.length > 0, () => this.renderLeftHeader())}
                 ${when(atLeastOneRootNodeIsExpandable, () => html `
                         <ftds-button
                             dense
@@ -100,12 +94,59 @@ class FtdsTreeList extends FtLitElement {
                         </ftds-button>
                     `)}
             </div>
-            ${(!((_a = this.data) === null || _a === void 0 ? void 0 : _a.rootNodes) || this.data.rootNodes.length <= 0) ? this.renderEmptyState() : html `
+            ${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="ft-tree-list" aria-labelledby="${this.label}">
                     ${repeat(this.data.rootNodes, (node) => node.value, (node) => this.renderNode(node))}
-                </ul>
-            `}
+                </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="ft-tree-list--item">
+                    <ft-skeleton style="--ft-skeleton--width: ${width}%"></ft-skeleton>
+                </div>
+            </li>`);
+        return html `
+            <ul class="ft-tree-list loading-state">${skeletons}</ul>`;
+    }
+    renderLeftHeader() {
+        if (this.loading) {
+            return html `
+            <div class="header-left">
+                <ft-typography class="header-label" variant="${FtTypographyVariants.body1semibold}">
+                    ${this.label}
+                </ft-typography>
+                <ft-skeleton class="node-count-loader"></ft-skeleton>
+            </div>
         `;
+        }
+        else {
+            return 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>
+                `;
+        }
     }
     renderNode(node) {
         var _a;
@@ -128,7 +169,7 @@ class FtdsTreeList extends FtLitElement {
                     role="treeitem"
                     data-value="${node.value}"
                     aria-expanded="${ifDefined(isNodeExpanded)}"
-                    class="${classMap(childrenClasses)}"
+                    class="ft-tree-list--item ${classMap(childrenClasses)}"
                     tabindex="-1"
                     @keydown="${(e) => this.onKeydown(e, node, false)}"
                 >
@@ -176,7 +217,7 @@ class FtdsTreeList extends FtLitElement {
                    icon="${FtIcons.ARROW_DOWN}"
                    tabindex="-1"
                    aria-expanded="false"
-                   class="${classMap(childrenClasses)}"
+                   class="ft-tree-list--item ${classMap(childrenClasses)}"
                    @click="${() => this.loadMore(node)}"
                    @keydown="${(e) => this.onKeydown(e, createLoadMoreNode(node), true, node)}">
                     <ft-icon value=${FtIcons.ARROW_DOWN}></ft-icon>
@@ -191,16 +232,49 @@ class FtdsTreeList extends FtLitElement {
         `;
     }
     renderEmptyState() {
-        var _a, _b;
+        var _a;
         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>
+                ${this.renderEmptyStateTitle()}
+                ${this.renderEmptyStateDescription()}
             </div>
         `;
     }
+    renderEmptyStateTitle() {
+        if (!this.emptyState) {
+            return nothing;
+        }
+        if (typeof this.emptyState.title === "string") {
+            return html `
+                <ft-typography class="empty-state--title" variant="${FtTypographyVariants.body1medium}">
+                    ${this.emptyState.title}
+                </ft-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 `
+                <ft-typography variant="${FtTypographyVariants.body1medium}">
+                    ${label}
+                </ft-typography>`);
+            return html `
+                <div class="empty-state--description">${labels}</div>`;
+        }
+        else {
+            return this.emptyState.description;
+        }
+    }
     willUpdate(props) {
         var _a, _b;
         super.willUpdate(props);
@@ -444,7 +518,8 @@ class FtdsTreeList extends FtLitElement {
 FtdsTreeList.elementDefinitions = {
     "ft-typography": FtTypography,
     "ftds-button": FtdsButton,
-    "ft-icon": FtIcon
+    "ft-icon": FtIcon,
+    "ft-skeleton": FtSkeleton,
 };
 FtdsTreeList.styles = styles;
 __decorate([
@@ -481,8 +556,11 @@ __decorate([
     property()
 ], FtdsTreeList.prototype, "collapseAllLabel", void 0);
 __decorate([
-    jsonProperty([])
+    jsonProperty(undefined)
 ], FtdsTreeList.prototype, "emptyState", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsTreeList.prototype, "loading", void 0);
 __decorate([
     state()
 ], FtdsTreeList.prototype, "nodeToFocus", void 0);

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

@@ -11,8 +11,11 @@ export interface FtdsTreeListProperties {
     collapseParametrizedLabel: string;
     expandAllLabel: string;
     collapseAllLabel: string;
+    emptyState?: EmptyStateConfiguration;
+    loading?: boolean;
 }
 export interface EmptyStateConfiguration {
     noImage: boolean;
-    content: string | TemplateResult;
+    title: string | TemplateResult;
+    description?: string | string[] | TemplateResult;
 }

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

@@ -1,5 +1,5 @@
 import { css } from "lit";
-import { setVariable } from "@fluid-topics/ft-wc-utils";
+import { foundation, setVariable } from "@fluid-topics/ft-wc-utils";
 import { FtTypographyCssVariables, FtTypographyVariants } from "@fluid-topics/ft-typography";
 import { treeList } from "@fluid-topics/design-system-variables";
 import { FtIconCssVariables } from "@fluid-topics/ft-icon";
@@ -24,38 +24,54 @@ export const styles = css `
         align-items: baseline;
     }
 
+    .header-left {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .node-count-loader {
+        width: 30px;
+    }
+
     /* Tree */
-    ul[role="tree"] {
+    ul.ft-tree-list {
         padding: 0;
         margin: 0;
         position: relative;
         overflow-x: clip;
     }
 
-    ul[role="tree"]:before {
+    ul.ft-tree-list:before {
         border-width: 0 ${treeList.listContainerBorderWidth};
         border-style: solid;
         border-color: ${treeList.listContainerBorderColor};
         background-color: ${treeList.listContainerBackgroundColor};
     }
 
-    ul[role="tree"],
-    ul[role="tree"] li {
+    ul.ft-tree-list,
+    ul.ft-tree-list li {
         list-style: none;
         width: max-content;
         min-width: 100%;
     }
 
-    ul[role="tree"] > li {
+    ul.ft-tree-list > li {
         padding-left: ${treeList.nodeRootPaddingLeft};
     }
 
-    ul[role="tree"] a[role="treeitem"] {
+    ul.ft-tree-list .ft-tree-list--item {
         height: ${treeList.nodeHeight};
         line-height: ${treeList.nodeHeight};
         width: calc(100% - ${treeList.nodeRootPaddingLeft});
     }
 
+    ul.loading-state .ft-tree-list--item {
+        display: flex;
+        align-items: center;
+    }
+
     li a[role="treeitem"] {
         display: inline-flex;
         align-items: baseline;
@@ -71,7 +87,7 @@ export const styles = css `
         padding-left: ${treeList.nodeChildPaddingLeft};
     }
 
-    li a[role="treeitem"]:before {
+    li .ft-tree-list--item:before {
         content: '';
         position: absolute;
         left: 0;
@@ -83,7 +99,7 @@ export const styles = css `
         border-color: ${treeList.nodeUnselectedDefaultBorderColor};
     }
 
-    ul[role="tree"] > li:first-of-type a[role="treeitem"]:before {
+    ul.ft-tree-list > li:first-of-type .ft-tree-list--item:before {
         border-top-width: ${treeList.nodeBorderWidth};
     }
 
@@ -214,5 +230,26 @@ export const styles = css `
         display: flex;
         flex-direction: column;
         align-items: center;
+        padding-top: ${treeList.emptyStateContainerPaddingTop};
+        padding-bottom: ${treeList.emptyStateContainerPaddingBottom};
+    }
+
+    .empty-state--title {
+        margin-bottom: ${treeList.emptyStateTitleMarginBottom};
+        color: ${treeList.emptyStateTitleLabelColor};
+    }
+
+    .empty-state--description {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: ${foundation.spacing2};
+        color: ${treeList.emptyStateDescriptionLabelColor};
+    }
+
+    .empty-state svg {
+        height: ${treeList.emptyStateIllustrationHeight};
+        width: ${treeList.emptyStateIllustrationWidth};
+        margin-bottom: ${treeList.emptyStateIllustrationMarginBottom};
     }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-tree-list",
-    "version": "1.3.21",
+    "version": "1.3.23",
     "description": "A tree list component",
     "keywords": [
         "Lit"
@@ -19,13 +19,13 @@
         "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
     },
     "dependencies": {
-        "@fluid-topics/design-system-variables": "2.52.1",
-        "@fluid-topics/ft-assets": "1.3.21",
-        "@fluid-topics/ft-wc-utils": "1.3.21",
+        "@fluid-topics/design-system-variables": "2.53.0",
+        "@fluid-topics/ft-assets": "1.3.23",
+        "@fluid-topics/ft-wc-utils": "1.3.23",
         "lit": "3.1.0"
     },
     "devDependencies": {
-        "@fluid-topics/ft-wc-test-utils": "1.3.21"
+        "@fluid-topics/ft-wc-test-utils": "1.3.23"
     },
-    "gitHead": "fd30595cd89395cbcac48ca8146aecef2e9b8673"
+    "gitHead": "1449ae5b73dbdbe40583d414fc5d8e5395694146"
 }