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

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

@@ -47,6 +47,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

@@ -191,16 +191,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);
@@ -481,7 +514,7 @@ __decorate([
     property()
 ], FtdsTreeList.prototype, "collapseAllLabel", void 0);
 __decorate([
-    jsonProperty([])
+    jsonProperty(undefined)
 ], FtdsTreeList.prototype, "emptyState", void 0);
 __decorate([
     state()

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

@@ -14,5 +14,6 @@ export interface FtdsTreeListProperties {
 }
 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";
@@ -214,5 +214,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.22",
     "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.22",
+        "@fluid-topics/ft-wc-utils": "1.3.22",
         "lit": "3.1.0"
     },
     "devDependencies": {
-        "@fluid-topics/ft-wc-test-utils": "1.3.21"
+        "@fluid-topics/ft-wc-test-utils": "1.3.22"
     },
-    "gitHead": "fd30595cd89395cbcac48ca8146aecef2e9b8673"
+    "gitHead": "f8ee485234740327c93ce01f6149dc1605d080b9"
 }