@fluid-topics/ft-tree-list 1.3.22 → 1.3.24

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;

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>
@@ -477,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([
@@ -516,6 +558,9 @@ __decorate([
 __decorate([
     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,6 +11,8 @@ export interface FtdsTreeListProperties {
     collapseParametrizedLabel: string;
     expandAllLabel: string;
     collapseAllLabel: string;
+    emptyState?: EmptyStateConfiguration;
+    loading?: boolean;
 }
 export interface EmptyStateConfiguration {
     noImage: boolean;

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

@@ -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};
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-tree-list",
-    "version": "1.3.22",
+    "version": "1.3.24",
     "description": "A tree list component",
     "keywords": [
         "Lit"
@@ -20,12 +20,16 @@
     },
     "dependencies": {
         "@fluid-topics/design-system-variables": "2.53.0",
-        "@fluid-topics/ft-assets": "1.3.22",
-        "@fluid-topics/ft-wc-utils": "1.3.22",
+        "@fluid-topics/ft-assets": "1.3.24",
+        "@fluid-topics/ft-button": "1.3.24",
+        "@fluid-topics/ft-icon": "1.3.24",
+        "@fluid-topics/ft-skeleton": "1.3.24",
+        "@fluid-topics/ft-typography": "1.3.24",
+        "@fluid-topics/ft-wc-utils": "1.3.24",
         "lit": "3.1.0"
     },
     "devDependencies": {
-        "@fluid-topics/ft-wc-test-utils": "1.3.22"
+        "@fluid-topics/ft-wc-test-utils": "1.3.24"
     },
-    "gitHead": "f8ee485234740327c93ce01f6149dc1605d080b9"
+    "gitHead": "0e06032738885d65c740cf157a677dc41d2d041c"
 }