@fluid-topics/ft-tree-selector 1.3.31 → 1.3.33

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

@@ -2,6 +2,10 @@ import { PropertyValues } from "lit";
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtTree, FtTreeChangedDetail, FtTreeNode } from "./model/FtTree";
 import { FtButton } from "@fluid-topics/ft-button";
+import { FtTreeSelectorModes } from "./ft-tree-selector.properties";
+export declare class FtTreeChangeEvent extends CustomEvent<FtTree> {
+    constructor(detail: FtTree);
+}
 export declare class TreeNodeChangeEvent extends CustomEvent<FtTreeChangedDetail> {
     constructor(values: FtTreeChangedDetail);
 }
@@ -11,6 +15,7 @@ export declare class TreeNodeClearAll extends CustomEvent<void> {
 export declare class FtTreeSelector extends FtLitElement {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult;
+    mode: FtTreeSelectorModes;
     data: FtTree;
     userOpenedNodes: Set<string>;
     userClosedNodes: Set<string>;
@@ -25,10 +30,10 @@ export declare class FtTreeSelector extends FtLitElement {
     expandAllLabel: string;
     collapseAllLabel: string;
     clearLabel: string;
-    protected update(changedProperties: PropertyValues): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
     protected render(): import("lit-html").TemplateResult<1>;
+    protected renderNode(breadcrumb: FtTreeNode[], node: FtTreeNode): unknown;
     private clear;
-    protected renderNode(node: FtTreeNode): unknown;
     private toggleNode;
     private renderOpenCloseButton;
     private userChangeNodeExpandStatus;

package/build/ft-tree-selector.js

@@ -6,26 +6,34 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
-import { flatDeep, FtLitElement, hasChanged, ParametrizedLabelResolver, } from "@fluid-topics/ft-wc-utils";
+import { deepCopy, flatDeep, forEachDeep, 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";
+import { FtTypography, FtTypographyVariants } from "@fluid-topics/ft-typography";
 import { repeat } from "lit/directives/repeat.js";
 import { property, queryAll, state } from "lit/decorators.js";
 import { FtButton } from "@fluid-topics/ft-button";
+import { FtTreeSelectorModes } from "./ft-tree-selector.properties";
+import { when } from "lit/directives/when.js";
+export class FtTreeChangeEvent extends CustomEvent {
+    constructor(detail) {
+        super("tree-change", { detail: deepCopy(detail) });
+    }
+}
 export class TreeNodeChangeEvent extends CustomEvent {
     constructor(values) {
-        super("treenode-change", { detail: values, bubbles: true, composed: true });
+        super("treenode-change", { detail: values });
     }
 }
 export class TreeNodeClearAll extends CustomEvent {
     constructor() {
-        super("treenode-clear-all", { bubbles: true, composed: true });
+        super("treenode-clear-all");
     }
 }
 class FtTreeSelector extends FtLitElement {
     constructor() {
         super(...arguments);
+        this.mode = FtTreeSelectorModes.auto;
         this.userOpenedNodes = new Set();
         this.userClosedNodes = new Set();
         this.currentExpandButtonFocusedIndex = 0;
@@ -38,20 +46,20 @@ class FtTreeSelector extends FtLitElement {
         this.collapseAllLabel = "Collapse all";
         this.clearLabel = "Clear";
     }
-    update(changedProperties) {
-        super.update(changedProperties);
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
         if (this.data && this.isTreeSelectorCollapsed == undefined) {
-            this.isTreeSelectorCollapsed = this.data.rootNodes.every(entry => !this.isNodeExpanded(entry));
+            this.isTreeSelectorCollapsed = this.data.rootNodes.every((entry) => !this.isNodeExpanded(entry));
         }
     }
     render() {
         var _a;
-        const atLeastOneRootNodeIsExpandable = this.data.rootNodes.some(rootNode => rootNode.children.length > 0);
+        const atLeastOneRootNodeIsExpandable = this.data.rootNodes.some((rootNode) => rootNode.children.length > 0);
         return html `
             <div class="ft-tree-selector ${atLeastOneRootNodeIsExpandable ? "with-expandable" : ""}">
                 <div part="header">
                     ${this.label.length > 0 ? html `
-                        <ft-typography variant="overline" part="label">
+                        <ft-typography variant="${FtTypographyVariants.overline}" part="label">
                             ${this.label}
                         </ft-typography>
                     ` : nothing}
@@ -59,36 +67,28 @@ class FtTreeSelector extends FtLitElement {
                         <ft-button dense
                                    tooltipposition="bottom"
                                    part="expand-button"
-                                   icon=${this.isTreeSelectorCollapsed ? "ICON_EXPAND" : "ICON_COLLAPSE"}
+                                   icon="${this.isTreeSelectorCollapsed ? "ICON_EXPAND" : "ICON_COLLAPSE"}"
                                    label="${this.isTreeSelectorCollapsed ? this.expandAllLabel : this.collapseAllLabel}"
                                    aria-expanded="${this.isTreeSelectorCollapsed}"
-                                   @click="${() => this.toggleExpandAll()}">
+                                   @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.clear()} part="clear-button">
-                               ${this.clearLabel}
-                           </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.clear()} part="clear-button">
+                                ${this.clearLabel}
+                            </ft-button>
+                        ` : nothing}
                 </div>
                 ${repeat(this.data.rootNodes, (node) => node.value, (node) => {
-            return this.renderNode(node);
+            return this.renderNode([], node);
         })}
             </div>
             </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) {
+    renderNode(breadcrumb, node) {
         const isNodeExpanded = this.isNodeExpanded(node);
         const childrenClasses = {
             "expanded": isNodeExpanded,
@@ -102,31 +102,67 @@ class FtTreeSelector extends FtLitElement {
                     ${this.renderOpenCloseButton(node)}
                     <ft-checkbox part="checkbox"
                                  name="${node.label}"
-                                 ?checked="${node.selected}"
-                                 ?indeterminate="${node.indeterminate}"
-                                 @change=${(e) => this.toggleNode(node, e)}>
+                                 ?checked=${node.selected}
+                                 ?indeterminate=${node.indeterminate}
+                                 @change=${(e) => this.toggleNode(breadcrumb, node, e)}>
                         ${node.label}
                     </ft-checkbox>
                 </div>
                 ${node.children.length != 0 && this.isNodeExpanded(node)
             ? html `
-                        <div part="children" class=${classMap(childrenClasses)} id=${this.getAriaControlId(node)}>
-                            ${isNodeExpanded
-                ? html `${repeat(node.children, (c) => c.value, (c) => this.renderNode(c))}`
-                : nothing}
+                        <div part="children" class="${classMap(childrenClasses)}" id="${this.getAriaControlId(node)}">
+                            ${when(isNodeExpanded, () => repeat(node.children, (c) => c.value, (c) => this.renderNode([...breadcrumb, node], c)))}
                         </div>`
             : nothing}
             </div>
         `;
     }
-    toggleNode(node, e) {
-        node.selected = e.detail;
-        node.indeterminate = false;
+    clear() {
+        flatDeep(this.data.rootNodes, (n) => n.children).forEach((n) => {
+            n.selected = false;
+            n.indeterminate = false;
+        });
         this.requestUpdate();
-        return this.dispatchEvent(new TreeNodeChangeEvent({
-            value: node.value,
-            selected: e.detail
-        }));
+        switch (this.mode) {
+            case FtTreeSelectorModes.auto:
+            case FtTreeSelectorModes.downward:
+                this.dispatchEvent(new FtTreeChangeEvent(this.data));
+                break;
+            default:
+                this.dispatchEvent(new TreeNodeClearAll());
+                break;
+        }
+    }
+    toggleNode(breadcrumb, node, e) {
+        const update = (n) => {
+            n.selected = e.detail;
+            n.indeterminate = false;
+        };
+        update(node);
+        const parents = [...breadcrumb].reverse();
+        switch (this.mode) {
+            case FtTreeSelectorModes.auto:
+                forEachDeep(node.children, (n) => n.children, update);
+                parents.forEach((n) => {
+                    n.selected = n.children.every((c) => c.selected);
+                    n.indeterminate = !n.selected && n.children.some((c) => c.selected || c.indeterminate);
+                });
+                this.requestUpdate();
+                this.dispatchEvent(new FtTreeChangeEvent(this.data));
+                break;
+            case FtTreeSelectorModes.downward:
+                forEachDeep(node.children, (n) => n.children, update);
+                this.requestUpdate();
+                this.dispatchEvent(new FtTreeChangeEvent(this.data));
+                break;
+            default:
+                this.requestUpdate();
+                this.dispatchEvent(new TreeNodeChangeEvent({
+                    value: node.value,
+                    selected: e.detail,
+                }));
+                break;
+        }
     }
     renderOpenCloseButton(node) {
         if (node.children.length === 0) {
@@ -134,18 +170,18 @@ class FtTreeSelector extends FtLitElement {
                 <div part="expand"></div>
             `;
         }
-        let isNodeExpanded = this.isNodeExpanded(node);
+        const isNodeExpanded = this.isNodeExpanded(node);
         return html `
             <ft-button dense part="expand" tooltipposition="bottom"
-                       icon=${isNodeExpanded ? "TRIANGLE_BOTTOM" : "TRIANGLE_RIGHT"}
+                       icon="${isNodeExpanded ? "TRIANGLE_BOTTOM" : "TRIANGLE_RIGHT"}"
                        label="${isNodeExpanded ? this.collapseLabel : this.expandLabel}"
                        aria-label="${ParametrizedLabelResolver.replaceParameters(isNodeExpanded
             ? this.collapseParametrizedLabel
             : this.expandParametrizedLabel, node.label)}"
                        aria-expanded="${isNodeExpanded}"
-                       aria-control=${this.getAriaControlId(node)}
-                       @keydown="${(e) => this.onKeydown(e, node)}"
-                       @click="${() => this.userChangeNodeExpandStatus(!isNodeExpanded, node.value)}">
+                       aria-controls="${this.getAriaControlId(node)}"
+                       @keydown=${(e) => this.onKeydown(e, node)}
+                       @click=${() => this.userChangeNodeExpandStatus(!isNodeExpanded, node.value)}>
             </ft-button>
         `;
     }
@@ -198,19 +234,19 @@ class FtTreeSelector extends FtLitElement {
         }
     }
     focusPreviousButton(currentButton) {
-        let currentIndex = this.currentLevelExpandButtons.indexOf(currentButton);
+        const currentIndex = this.currentLevelExpandButtons.indexOf(currentButton);
         this.currentLevelExpandButtons[currentIndex == 0 ? this.currentLevelExpandButtons.length - 1 : currentIndex - 1].focus();
     }
     focusNextButton(currentButton) {
-        let ftButtons = [...this.currentLevelExpandButtons];
-        let currentIndex = ftButtons.indexOf(currentButton);
+        const ftButtons = [...this.currentLevelExpandButtons];
+        const currentIndex = ftButtons.indexOf(currentButton);
         ftButtons[currentIndex == ftButtons.length - 1 ? 0 : currentIndex + 1].focus();
     }
     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);
+        return node.children.some((child) => child.children.length > 0);
     }
     toggleExpandAll() {
         if (this.isTreeSelectorCollapsed) {
@@ -222,20 +258,17 @@ class FtTreeSelector extends FtLitElement {
     }
     expandAll() {
         this.userClosedNodes = new Set();
-        this.userOpenedNodes = new Set(this.data.rootNodes.flatMap((n) => this.getAllClosedNodes(n)));
+        this.userOpenedNodes = new Set(this.getAllClosedNodes());
         this.isTreeSelectorCollapsed = false;
     }
-    getAllClosedNodes(node) {
-        if (node.children.length !== 0) {
-            return [...(!node.expanded ? [node.value] : []), ...node.children.flatMap((c) => this.getAllClosedNodes(c))];
-        }
-        else {
-            return [];
-        }
+    getAllClosedNodes() {
+        return flatDeep(this.data.rootNodes, (n) => n.children)
+            .filter((n) => !n.expanded)
+            .map((n) => n.value);
     }
     collapseAll() {
         this.userOpenedNodes = new Set();
-        this.userClosedNodes = new Set(this.data.rootNodes.filter((n) => n.expanded).map(n => n.value));
+        this.userClosedNodes = new Set(this.data.rootNodes.filter((n) => n.expanded).map((n) => n.value));
         this.isTreeSelectorCollapsed = true;
     }
     getAriaControlId(node) {
@@ -245,9 +278,12 @@ class FtTreeSelector extends FtLitElement {
 FtTreeSelector.elementDefinitions = {
     "ft-checkbox": FtCheckbox,
     "ft-typography": FtTypography,
-    "ft-button": FtButton
+    "ft-button": FtButton,
 };
 FtTreeSelector.styles = styles;
+__decorate([
+    property()
+], FtTreeSelector.prototype, "mode", void 0);
 __decorate([
     property()
 ], FtTreeSelector.prototype, "data", void 0);