@fluid-topics/ft-tree-selector 1.2.32 → 1.2.34

package/build/ft-tree-selector.d.ts

@@ -41,6 +41,7 @@ export declare class FtTreeSelector extends FtLitElement {
     private focusPreviousButton;
     private focusNextButton;
     private isNodeExpanded;
+    private hasExpandableChildren;
     expandAll(): void;
     private getAllClosedNodes;
     collapseAll(): void;

package/build/ft-tree-selector.js

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, nothing } from "lit";
+import { classMap } from "lit/directives/class-map.js";
 import { FtLitElement, hasChanged, ParametrizedLabelResolver, } from "@fluid-topics/ft-wc-utils";
 import { styles } from "./ft-tree-selector.styles";
 import { FtCheckbox } from "@fluid-topics/ft-checkbox";
@@ -55,8 +56,9 @@ class FtTreeSelector extends FtLitElement {
     }
     render() {
         var _a;
+        const atLeastOneRootNodeIsExpandable = this.data.rootNodes.some(rootNode => rootNode.children.length > 0);
         return html `
-            <div class="ft-tree-selector">
+            <div class="ft-tree-selector ${atLeastOneRootNodeIsExpandable ? "with-expandable" : ""}">
                 <div part="header">
                     <ft-typography variant="overline" part="label">
                         ${this.label}
@@ -94,6 +96,11 @@ class FtTreeSelector extends FtLitElement {
     }
     renderNode(node) {
         const isNodeExpanded = this.isNodeExpanded(node);
+        const childrenClasses = {
+            "expanded": isNodeExpanded,
+            "collapsed": isNodeExpanded,
+            "with-expandable": this.hasExpandableChildren(node),
+        };
         return html `
             <div part="level" class="${node.children.length != 0 ? "expandable" : "leaf"}"
                  data-value="${node.value}">
@@ -110,9 +117,7 @@ class FtTreeSelector extends FtLitElement {
                 </div>
                 ${node.children.length != 0 && this.isNodeExpanded(node)
             ? html `
-                        <div part="children"
-                             class="${isNodeExpanded ? "expanded" : "collapsed"}"
-                             id=${this.getAriaControlId(node)}>
+                        <div part="children" class=${classMap(childrenClasses)} id=${this.getAriaControlId(node)}>
                             ${isNodeExpanded
                 ? html `${repeat(node.children, (c) => c.value, (c) => this.renderNode(c))}`
                 : nothing}
@@ -207,6 +212,9 @@ class FtTreeSelector extends FtLitElement {
     isNodeExpanded(node) {
         return !this.userClosedNodes.has(node.value) && (node.expanded || this.userOpenedNodes.has(node.value));
     }
+    hasExpandableChildren(node) {
+        return node.children.some(child => child.children.length > 0);
+    }
     expandAll() {
         this.userClosedNodes = new Set();
         this.userOpenedNodes = new Set(this.data.rootNodes.flatMap((n) => this.getAllClosedNodes(n)));