@fluid-topics/ft-tree-selector 1.1.103

package/README.md

@@ -0,0 +1,30 @@
+A hierarchical selector for tree
+## Install
+
+```shell
+npm install @fluid-topics/ft-tree-selector
+yarn add @fluid-topics/ft-tree-selector
+```
+
+## Usage
+
+```typescript
+import {html} from "lit"
+import "@fluid-topics/ft-tree-selector"
+
+function render() {
+    return html` <ft-tree-selector .data=${
+            rootNodes = [{
+                value: "parent",
+                label: "label parent",
+                children: [
+                    {value: "1", label: "label 1", children: [], selected: true},
+                    {value: "2", label: "label 2", children: [], selected: true}
+                ],
+                selected: false,
+                indeterminate: true
+            }
+            ]}></ft-tree-selector> `
+}
+```
+

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

@@ -0,0 +1,48 @@
+import { PropertyValues } from "lit";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtTree, FtTreeChangedDetail, FtTreeExpandedChangeDetail, 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();
+}
+export declare class FtTreeSelector extends FtLitElement {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    data: FtTree;
+    userOpenedNodes: Set<string>;
+    userClosedNodes: Set<string>;
+    currentLevelExpandButtons?: FtButton[];
+    currentExpandButtonFocusedIndex: number;
+    isTreeSelectorCollapsed?: boolean;
+    label: string;
+    expandLabel: string;
+    collapseLabel: string;
+    expandParametrizedLabel: string;
+    collapseParametrizedLabel: string;
+    expandAllLabel: string;
+    collapseAllLabel: string;
+    clearLabel: string;
+    protected update(changedProperties: PropertyValues): void;
+    protected render(): import("lit").TemplateResult<1>;
+    protected renderNode(node: FtTreeNode): unknown;
+    private renderOpenCloseButton;
+    private userChangeNodeExpandStatus;
+    private sendAllNodeCollapseEventIfNeeded;
+    private onKeydown;
+    private focusPreviousButton;
+    private focusNextButton;
+    private isNodeExpanded;
+    expandAll(): void;
+    private getAllClosedNodes;
+    collapseAll(): void;
+    getAriaControlId(node: FtTreeNode): string;
+}

package/build/ft-tree-selector.js

@@ -0,0 +1,279 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing } from "lit";
+import { 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 { repeat } from "lit/directives/repeat.js";
+import { property, queryAll, state } from "lit/decorators.js";
+import { FtButton } from "@fluid-topics/ft-button";
+export class TreeNodeChangeEvent extends CustomEvent {
+    constructor(values) {
+        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 });
+    }
+}
+class FtTreeSelector extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.userOpenedNodes = new Set();
+        this.userClosedNodes = new Set();
+        this.currentExpandButtonFocusedIndex = 0;
+        this.label = "";
+        this.expandLabel = "Expand";
+        this.collapseLabel = "Collapse";
+        this.expandParametrizedLabel = "Expand {0}";
+        this.collapseParametrizedLabel = "Collapse {0}";
+        this.expandAllLabel = "Expand all";
+        this.collapseAllLabel = "Collapse all";
+        this.clearLabel = "Clear";
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (this.data && this.isTreeSelectorCollapsed == undefined) {
+            this.isTreeSelectorCollapsed = this.data.rootNodes.every(entry => !this.isNodeExpanded(entry));
+        }
+    }
+    render() {
+        var _a;
+        return html `
+            <div class="ft-tree-selector">
+                <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>
+
+                    ${((_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">
+                               ${this.clearLabel}
+                           </ft-button>
+                       ` : nothing}
+                </div>
+                ${repeat(this.data.rootNodes, (node) => node.value, (node) => {
+            return this.renderNode(node);
+        })}
+            </div>
+            </div>
+        `;
+    }
+    renderNode(node) {
+        const isNodeExpanded = this.isNodeExpanded(node);
+        return html `
+            <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}"
+                                 ?indeterminate="${node.indeterminate}"
+                                 @change=${(e) => this.dispatchEvent(new TreeNodeChangeEvent({
+            value: node.value,
+            selected: e.detail
+        }))}>
+                        ${node.label}
+                    </ft-checkbox>
+                </div>
+                ${node.children.length != 0 && this.isNodeExpanded(node)
+            ? html `
+                        <div part="children"
+                             class="${isNodeExpanded ? "expanded" : "collapsed"}"
+                             id=${this.getAriaControlId(node)}>
+                            ${isNodeExpanded
+                ? html `${repeat(node.children, (c) => c.value, (c) => this.renderNode(c))}`
+                : nothing}
+                        </div>`
+            : nothing}
+            </div>
+        `;
+    }
+    renderOpenCloseButton(node) {
+        let isNodeExpanded = this.isNodeExpanded(node);
+        return html `
+            <ft-button dense part="expand" tooltipposition="bottom"
+                       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)}">
+            </ft-button>
+        `;
+    }
+    userChangeNodeExpandStatus(expanded, currentNodeValue) {
+        if (expanded) {
+            if (this.userClosedNodes.has(currentNodeValue)) {
+                this.userClosedNodes.delete(currentNodeValue);
+            }
+            else {
+                this.userOpenedNodes.add(currentNodeValue);
+            }
+        }
+        else {
+            if (this.userOpenedNodes.has(currentNodeValue)) {
+                this.userOpenedNodes.delete(currentNodeValue);
+            }
+            else {
+                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) {
+            case "ArrowDown":
+                this.focusNextButton(event.target);
+                needToStopPropagation = true;
+                break;
+            case "ArrowUp":
+                this.focusPreviousButton(event.target);
+                needToStopPropagation = true;
+                break;
+            case "ArrowRight":
+                if (!this.isNodeExpanded(node)) {
+                    this.userChangeNodeExpandStatus(true, node.value);
+                }
+                needToStopPropagation = true;
+                break;
+            case "ArrowLeft":
+                if (this.isNodeExpanded(node)) {
+                    this.userChangeNodeExpandStatus(false, node.value);
+                }
+                needToStopPropagation = true;
+                break;
+        }
+        if (needToStopPropagation) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+    focusPreviousButton(currentButton) {
+        let 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);
+        ftButtons[currentIndex == ftButtons.length - 1 ? 0 : currentIndex + 1].focus();
+    }
+    isNodeExpanded(node) {
+        return !this.userClosedNodes.has(node.value) && (node.expanded || this.userOpenedNodes.has(node.value));
+    }
+    expandAll() {
+        this.userClosedNodes = new Set();
+        this.userOpenedNodes = new Set(this.data.rootNodes.flatMap((n) => this.getAllClosedNodes(n)));
+    }
+    getAllClosedNodes(node) {
+        if (node.children.length !== 0) {
+            return [...(!node.expanded ? [node.value] : []), ...node.children.flatMap((c) => this.getAllClosedNodes(c))];
+        }
+        else {
+            return [];
+        }
+    }
+    collapseAll() {
+        this.userOpenedNodes = new Set();
+        this.userClosedNodes = new Set(this.data.rootNodes.filter((n) => n.expanded).map(n => n.value));
+        this.dispatchEvent(new TreeNodeAllNodeCollapsedEvent());
+    }
+    getAriaControlId(node) {
+        return node.value.replace(" ", "").replace("|", "-") + "-children";
+    }
+}
+FtTreeSelector.elementDefinitions = {
+    "ft-checkbox": FtCheckbox,
+    "ft-typography": FtTypography,
+    "ft-button": FtButton
+};
+FtTreeSelector.styles = styles;
+__decorate([
+    property()
+], FtTreeSelector.prototype, "data", void 0);
+__decorate([
+    state({ hasChanged })
+], FtTreeSelector.prototype, "userOpenedNodes", void 0);
+__decorate([
+    state({ hasChanged })
+], FtTreeSelector.prototype, "userClosedNodes", void 0);
+__decorate([
+    queryAll("[part='expand']")
+], FtTreeSelector.prototype, "currentLevelExpandButtons", void 0);
+__decorate([
+    state()
+], FtTreeSelector.prototype, "currentExpandButtonFocusedIndex", void 0);
+__decorate([
+    state()
+], FtTreeSelector.prototype, "isTreeSelectorCollapsed", void 0);
+__decorate([
+    property()
+], FtTreeSelector.prototype, "label", void 0);
+__decorate([
+    property()
+], FtTreeSelector.prototype, "expandLabel", void 0);
+__decorate([
+    property()
+], FtTreeSelector.prototype, "collapseLabel", void 0);
+__decorate([
+    property()
+], FtTreeSelector.prototype, "expandParametrizedLabel", void 0);
+__decorate([
+    property()
+], FtTreeSelector.prototype, "collapseParametrizedLabel", void 0);
+__decorate([
+    property()
+], FtTreeSelector.prototype, "expandAllLabel", void 0);
+__decorate([
+    property()
+], FtTreeSelector.prototype, "collapseAllLabel", void 0);
+__decorate([
+    property()
+], FtTreeSelector.prototype, "clearLabel", void 0);
+export { FtTreeSelector };