@fluid-topics/ft-tree-selector 1.2.43 → 1.2.44

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

@@ -1,16 +1,10 @@
 import { PropertyValues } from "lit";
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
-import { FtTree, FtTreeChangedDetail, FtTreeExpandedChangeDetail, FtTreeNode } from "./model/FtTree";
+import { FtTree, FtTreeChangedDetail, FtTreeNode } from "./model/FtTree";
 import { FtButton } from "@fluid-topics/ft-button";
 export declare class TreeNodeChangeEvent extends CustomEvent<FtTreeChangedDetail> {
     constructor(values: FtTreeChangedDetail);
 }
-export declare class TreeNodeExpandedChangeEvent extends CustomEvent<FtTreeExpandedChangeDetail> {
-    constructor(values: FtTreeExpandedChangeDetail);
-}
-export declare class TreeNodeAllNodeCollapsedEvent extends CustomEvent<void> {
-    constructor();
-}
 export declare class TreeNodeClearAll extends CustomEvent<void> {
     constructor();
 }
@@ -33,15 +27,17 @@ export declare class FtTreeSelector extends FtLitElement {
     clearLabel: string;
     protected update(changedProperties: PropertyValues): void;
     protected render(): import("lit-html").TemplateResult<1>;
+    private clear;
     protected renderNode(node: FtTreeNode): unknown;
+    private toggleNode;
     private renderOpenCloseButton;
     private userChangeNodeExpandStatus;
-    private sendAllNodeCollapseEventIfNeeded;
     private onKeydown;
     private focusPreviousButton;
     private focusNextButton;
     private isNodeExpanded;
     private hasExpandableChildren;
+    toggleExpandAll(): void;
     expandAll(): void;
     private getAllClosedNodes;
     collapseAll(): void;

package/build/ft-tree-selector.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
-import { FtLitElement, hasChanged, ParametrizedLabelResolver, } from "@fluid-topics/ft-wc-utils";
+import { flatDeep, FtLitElement, hasChanged, ParametrizedLabelResolver, } from "@fluid-topics/ft-wc-utils";
 import { styles } from "./ft-tree-selector.styles";
 import { FtCheckbox } from "@fluid-topics/ft-checkbox";
 import { FtTypography } from "@fluid-topics/ft-typography";
@@ -18,16 +18,6 @@ export class TreeNodeChangeEvent extends CustomEvent {
         super("treenode-change", { detail: values, bubbles: true, composed: true });
     }
 }
-export class TreeNodeExpandedChangeEvent extends CustomEvent {
-    constructor(values) {
-        super("treenode-expanded-change", { detail: values, bubbles: true, composed: true });
-    }
-}
-export class TreeNodeAllNodeCollapsedEvent extends CustomEvent {
-    constructor() {
-        super("treenode-all-node-collapsed", { bubbles: true, composed: true });
-    }
-}
 export class TreeNodeClearAll extends CustomEvent {
     constructor() {
         super("treenode-clear-all", { bubbles: true, composed: true });
@@ -60,29 +50,25 @@ class FtTreeSelector extends FtLitElement {
         return html `
             <div class="ft-tree-selector ${atLeastOneRootNodeIsExpandable ? "with-expandable" : ""}">
                 <div part="header">
-                    <ft-typography variant="overline" part="label">
-                        ${this.label}
-                    </ft-typography>
-                    <ft-button dense
-                               tooltipposition="bottom"
-                               part="expand-button"
-                               icon=${this.isTreeSelectorCollapsed ? "ICON_EXPAND" : "ICON_COLLAPSE"}
-                               label="${this.isTreeSelectorCollapsed
-            ? this.expandAllLabel
-            : this.collapseAllLabel}"
-                               aria-expanded="${this.isTreeSelectorCollapsed}"
-                               @click="${this.isTreeSelectorCollapsed ? () => {
-            this.expandAll();
-            this.isTreeSelectorCollapsed = false;
-        } : () => {
-            this.collapseAll();
-            this.isTreeSelectorCollapsed = true;
-        }}">
-                    </ft-button>
+                    ${this.label.length > 0 ? html `
+                        <ft-typography variant="overline" part="label">
+                            ${this.label}
+                        </ft-typography>
+                    ` : nothing}
+                    ${atLeastOneRootNodeIsExpandable ? html `
+                        <ft-button dense
+                                   tooltipposition="bottom"
+                                   part="expand-button"
+                                   icon=${this.isTreeSelectorCollapsed ? "ICON_EXPAND" : "ICON_COLLAPSE"}
+                                   label="${this.isTreeSelectorCollapsed ? this.expandAllLabel : this.collapseAllLabel}"
+                                   aria-expanded="${this.isTreeSelectorCollapsed}"
+                                   @click="${() => this.toggleExpandAll()}">
+                        </ft-button>
+                    ` : nothing}
 
                     ${((_a = this.data) === null || _a === void 0 ? void 0 : _a.rootNodes.some(node => node.selected || node.indeterminate)) ?
             html `
-                           <ft-button icon="close" dense @click=${() => this.dispatchEvent(new TreeNodeClearAll())} part="clear-button">
+                           <ft-button icon="close" dense @click=${() => this.clear()} part="clear-button">
                                ${this.clearLabel}
                            </ft-button>
                        ` : nothing}
@@ -94,6 +80,14 @@ class FtTreeSelector extends FtLitElement {
             </div>
         `;
     }
+    clear() {
+        flatDeep(this.data.rootNodes, n => n.children).forEach(n => {
+            n.selected = false;
+            n.indeterminate = false;
+        });
+        this.requestUpdate();
+        this.dispatchEvent(new TreeNodeClearAll());
+    }
     renderNode(node) {
         const isNodeExpanded = this.isNodeExpanded(node);
         const childrenClasses = {
@@ -105,13 +99,12 @@ class FtTreeSelector extends FtLitElement {
             <div part="level" class="${node.children.length != 0 ? "expandable" : "leaf"}"
                  data-value="${node.value}">
                 <div part="actions">
-                    ${node.children.length != 0 ? this.renderOpenCloseButton(node) : nothing}
-                    <ft-checkbox part="checkbox" name="${node.label}" ?checked="${node.selected}"
+                    ${this.renderOpenCloseButton(node)}
+                    <ft-checkbox part="checkbox"
+                                 name="${node.label}"
+                                 ?checked="${node.selected}"
                                  ?indeterminate="${node.indeterminate}"
-                                 @change=${(e) => this.dispatchEvent(new TreeNodeChangeEvent({
-            value: node.value,
-            selected: e.detail
-        }))}>
+                                 @change=${(e) => this.toggleNode(node, e)}>
                         ${node.label}
                     </ft-checkbox>
                 </div>
@@ -126,7 +119,21 @@ class FtTreeSelector extends FtLitElement {
             </div>
         `;
     }
+    toggleNode(node, e) {
+        node.selected = e.detail;
+        node.indeterminate = false;
+        this.requestUpdate();
+        return this.dispatchEvent(new TreeNodeChangeEvent({
+            value: node.value,
+            selected: e.detail
+        }));
+    }
     renderOpenCloseButton(node) {
+        if (node.children.length === 0) {
+            return html `
+                <div part="expand"></div>
+            `;
+        }
         let isNodeExpanded = this.isNodeExpanded(node);
         return html `
             <ft-button dense part="expand" tooltipposition="bottom"
@@ -159,18 +166,8 @@ class FtTreeSelector extends FtLitElement {
                 this.userClosedNodes.add(currentNodeValue);
             }
         }
-        this.dispatchEvent(new TreeNodeExpandedChangeEvent({
-            value: currentNodeValue,
-            expanded: expanded
-        }));
-        this.sendAllNodeCollapseEventIfNeeded();
         this.requestUpdate();
     }
-    sendAllNodeCollapseEventIfNeeded() {
-        if (this.data.rootNodes.every(node => !this.isNodeExpanded(node))) {
-            this.dispatchEvent(new TreeNodeAllNodeCollapsedEvent());
-        }
-    }
     onKeydown(event, node) {
         let needToStopPropagation = false;
         switch (event.key) {
@@ -215,9 +212,18 @@ class FtTreeSelector extends FtLitElement {
     hasExpandableChildren(node) {
         return node.children.some(child => child.children.length > 0);
     }
+    toggleExpandAll() {
+        if (this.isTreeSelectorCollapsed) {
+            this.expandAll();
+        }
+        else {
+            this.collapseAll();
+        }
+    }
     expandAll() {
         this.userClosedNodes = new Set();
         this.userOpenedNodes = new Set(this.data.rootNodes.flatMap((n) => this.getAllClosedNodes(n)));
+        this.isTreeSelectorCollapsed = false;
     }
     getAllClosedNodes(node) {
         if (node.children.length !== 0) {
@@ -230,7 +236,7 @@ class FtTreeSelector extends FtLitElement {
     collapseAll() {
         this.userOpenedNodes = new Set();
         this.userClosedNodes = new Set(this.data.rootNodes.filter((n) => n.expanded).map(n => n.value));
-        this.dispatchEvent(new TreeNodeAllNodeCollapsedEvent());
+        this.isTreeSelectorCollapsed = true;
     }
     getAriaControlId(node) {
         return node.value.replace(" ", "").replace("|", "-") + "-children";