@fluid-topics/ft-tree-list 1.2.67

package/build/ftds-tree-list.styles.js

@@ -0,0 +1,211 @@
+import { css } from "lit";
+import { setVariable, } from "@fluid-topics/ft-wc-utils";
+import { FtTypographyCssVariables, FtTypographyVariants } from "@fluid-topics/ft-typography";
+import { treeList } from "@fluid-topics/design-system-variables";
+export { treeList as FtdsTreeListCssVariables } from "@fluid-topics/design-system-variables";
+// language=CSS
+export const styles = css `
+    /* Header */
+    [part="header"] {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        align-items: baseline;
+        margin-bottom: ${treeList.headerSectionMarginBottom};
+        padding-left: ${treeList.headerSectionPaddingLeft};
+        padding-right: ${treeList.headerSectionPaddingRight};
+        color: ${treeList.headerSectionColor};
+    }
+
+    .header-label {
+        display: flex;
+        gap: ${treeList.headerSectionHorizontalGap};
+        align-items: baseline;
+    }
+
+    /* Tree */
+    ul[role="tree"] {
+        padding: 0;
+        margin: 0;
+        position: relative;
+        overflow-x: clip;
+    }
+
+    ul[role="tree"]:before {
+        border-width: 0 ${treeList.listContainerBorderWidth};
+        border-style: solid;
+        border-color: ${treeList.listContainerBorderColor};
+        background-color: ${treeList.listContainerBackgroundColor};
+    }
+
+    ul[role="tree"],
+    ul[role="tree"] li {
+        list-style: none;
+        width: max-content;
+        min-width: 100%;
+    }
+
+    ul[role="tree"] > li {
+        padding-left: ${treeList.nodeRootPaddingLeft};
+    }
+
+    ul[role="tree"] a[role="treeitem"] {
+        height: ${treeList.nodeHeight};
+        line-height: ${treeList.nodeHeight};
+        width: calc(100% - ${treeList.nodeRootPaddingLeft});
+    }
+
+    li a[role="treeitem"] {
+        display: inline-flex;
+        align-items: baseline;
+        padding-right: ${treeList.nodeParentLabelMarginRight};
+        cursor: pointer;
+    }
+
+    li a[role="treeitem"]:not(.with-children):not([part="load-more"]) {
+        padding-left: ${treeList.nodeLeafPaddingLeft};
+    }
+
+    li a[role="treeitem"] + ul {
+        padding-left: ${treeList.nodeChildPaddingLeft};
+    }
+
+    li a[role="treeitem"]:before {
+        content: '';
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: ${treeList.nodeHeight};
+        pointer-events: none;
+        border-width: 0 ${treeList.nodeBorderWidth} ${treeList.nodeBorderWidth} ${treeList.nodeBorderWidth};
+        border-style: solid;
+        border-color: ${treeList.nodeUnselectedDefaultBorderColor};
+    }
+
+    ul[role="tree"] > li:first-of-type a[role="treeitem"]:before {
+        border-top-width: ${treeList.nodeBorderWidth};
+    }
+
+    li a[role="treeitem"]:hover:before, li a[role="treeitem"]:focus-visible:before {
+        left: 1px;
+        width: calc(100% - 4px); /* 4px to not clip the border when no horizontal scroll */
+        border-style: solid;
+    }
+
+    /* Hover node */
+    li a[role="treeitem"]:hover:before {
+        border-color: ${treeList.nodeHoverBorderColor} !important;
+        border-width: ${treeList.nodeBorderWidth};
+    }
+
+    /* Focus node */
+    li a[role="treeitem"]:focus-visible {
+        outline: none;
+    }
+
+    li a[role="treeitem"]:focus-visible:before, ul[role="tree"] > li:first-of-type a[role="treeitem"]:focus-visible:before {
+        border-color: ${treeList.nodeFocusFocusRingColor} !important;
+        border-width: ${treeList.nodeFocusOutlineWidth};
+    }
+
+    /* Selected Node */
+    li > a[role="treeitem"][aria-selected=true] ft-typography[part="node-label"] {
+        color: ${treeList.nodeSelectedLabelColor};
+    }
+
+    li > a[role="treeitem"][aria-selected=true] [part="node-expand"] {
+        color: ${treeList.nodeSelectedIconColor};
+    }
+
+    li > a[role="treeitem"][aria-selected=true]:before {
+        background-color: ${treeList.nodeSelectedBackgroundColor};
+        border-color: ${treeList.nodeSelectedDefaultBorderColor};
+    }
+
+    /* Descendent of selected Node */
+    li > a[role="treeitem"][aria-selected=true] + ul a ft-typography[part="node-label"] {
+        color: ${treeList.nodeDescendantOfSelectedLabelColor};
+    }
+
+    li > a[role="treeitem"][aria-selected=true] + ul a [part="node-expand"] {
+        color: ${treeList.nodeDescendantOfSelectedIconColor};
+    }
+
+    li > a[role="treeitem"][aria-selected=true] + ul a:before {
+        background-color: ${treeList.nodeDescendantOfSelectedBackgroundColor};
+        border-color: ${treeList.nodeDescendantOfSelectedDefaultBorderColor};
+    }
+
+    /* Buttons */
+    [part="node-expand"] {
+        --ft-icon-font-size: 16px;
+        color: ${treeList.nodeUnselectedIconColor};
+    }
+
+    /* Load more node */
+    [part="load-more"] [part="node-label"],
+    li > a[role="treeitem"][aria-selected=true] + ul a[part="load-more"] ft-typography[part="node-label"] {
+        color: ${treeList.loadMoreLabelColor};
+    }
+
+    [part="load-more"] ft-icon {
+        color: ${treeList.loadMoreIconColor};
+    }
+
+    li a[role="treeitem"][part="load-more"]:before {
+        border-color: ${treeList.loadMoreUnselectedDefaultBorderColor};
+    }
+
+    li > a[role="treeitem"][aria-selected=true] + ul a[part="load-more"]:not(:hover, :focus-visible, :active):before {
+        background-color: ${treeList.loadMoreDescendantOfSelectedDefaultBackgroundColor};
+        border-color: ${treeList.loadMoreDescendantOfSelectedDefaultBorderColor};
+    }
+
+    li a[role="treeitem"][part="load-more"]:hover:before {
+         background-color: ${treeList.loadMoreHoverBackgroundColor};
+         border-color: ${treeList.loadMoreHoverBorderColor} !important;
+    }
+
+    li a[role="treeitem"][part="load-more"]:focus-visible:before {
+        background-color: ${treeList.loadMoreFocusBackgroundColor};
+    }
+
+    li a[role="treeitem"][part="load-more"]:active:before {
+        background-color: ${treeList.loadMoreActiveBackgroundColor};
+        border-color: ${treeList.loadMoreActiveBorderColor} !important;
+    }
+
+    /* Labels */
+    .node-label-container {
+        display: flex;
+        width: 100%;
+        align-items: baseline;
+    }
+
+    ft-typography[part="node-label"] {
+        height: 100%;
+        white-space: nowrap;
+        color: ${treeList.nodeUnselectedLabelColor};
+        margin-right: ${treeList.nodeParentLabelMarginRight};
+    }
+
+    li a[role="treeitem"].with-children > .node-label-container > ft-typography[part="node-label"] {
+        margin-left: ${treeList.nodeParentLabelMarginLeft};
+    }
+
+    li > a[aria-selected=true] > ft-typography[part="node-label"] {
+        ${setVariable(FtTypographyCssVariables.fontFamily, FtTypographyVariants.body2semibold)};
+        ${setVariable(FtTypographyCssVariables.fontWeight, "bold")};
+    }
+
+    .node-children-count {
+        color: ${treeList.nodeUnselectedCounterColor};
+    }
+
+    /* Empty State */
+    .empty-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+`;

package/build/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ftds-tree-list.styles";
+export * from "./ftds-tree-list.properties";
+export * from "./ftds-tree-list";

package/build/index.js

@@ -0,0 +1,6 @@
+import { customElement } from "@fluid-topics/ft-wc-utils";
+import { FtdsTreeList } from "./ftds-tree-list";
+export * from "./ftds-tree-list.styles";
+export * from "./ftds-tree-list.properties";
+export * from "./ftds-tree-list";
+customElement("ftds-tree-list")(FtdsTreeList);

package/build/model/FtTreeListData.d.ts

@@ -0,0 +1,18 @@
+export interface FtTreeNode {
+    value: string;
+    label: string;
+    expanded?: boolean;
+    children: FtTreeNode[];
+    loadedCount?: number;
+}
+export interface FtTreeListData {
+    rootNodes: FtTreeNode[];
+}
+export declare class TraversalInstruction {
+    readonly finished: boolean;
+    readonly skipChild: boolean;
+    constructor(finished: boolean, skipChild: boolean);
+}
+export declare function createLoadMoreNode(node: FtTreeNode): FtTreeNode;
+export declare function traverseVisibleTree(nodes: FtTreeNode[], callback: (node: FtTreeNode, depth: number, parent: FtTreeNode | null) => TraversalInstruction | void, parent?: FtTreeNode | null, depth?: number): boolean;
+export declare function getPathToNode(root: FtTreeNode | FtTreeNode[], targetValue: string, path?: FtTreeNode[]): FtTreeNode[] | null;

package/build/model/FtTreeListData.js

@@ -0,0 +1,50 @@
+export class TraversalInstruction {
+    constructor(finished, skipChild) {
+        this.finished = finished;
+        this.skipChild = skipChild;
+    }
+}
+export function createLoadMoreNode(node) {
+    return {
+        value: `load-more-${node.value}`,
+        label: "Load more",
+        children: []
+    };
+}
+export function traverseVisibleTree(nodes, callback, parent = null, depth = 0) {
+    var _a;
+    for (const node of nodes) {
+        const instruction = callback(node, depth, parent);
+        if (instruction === null || instruction === void 0 ? void 0 : instruction.finished) {
+            return true;
+        }
+        if (!(instruction === null || instruction === void 0 ? void 0 : instruction.skipChild) && ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length)) {
+            const finished = traverseVisibleTree(node.children.slice(0, node.loadedCount), callback, node, depth + 1);
+            if (finished) {
+                return true;
+            }
+            if (node.loadedCount && (node.loadedCount < node.children.length)) {
+                let loadMoreNode = createLoadMoreNode(node);
+                callback(loadMoreNode, depth + 1, parent);
+            }
+        }
+    }
+    return false;
+}
+export function getPathToNode(root, targetValue, path = []) {
+    var _a;
+    const nodes = Array.isArray(root) ? root : [root];
+    for (const node of nodes) {
+        const newPath = [...path, node];
+        if (node.value === targetValue) {
+            return newPath;
+        }
+        if ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) {
+            const result = getPathToNode(node.children, targetValue, newPath);
+            if (result) {
+                return result;
+            }
+        }
+    }
+    return null;
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+    "name": "@fluid-topics/ft-tree-list",
+    "version": "1.2.67",
+    "description": "A tree list component",
+    "keywords": [
+        "Lit"
+    ],
+    "author": "Fluid Topics <devtopics@antidot.net>",
+    "license": "ISC",
+    "main": "build/index.js",
+    "web": "build/ft-tree-list.min.js",
+    "typings": "build/index",
+    "files": [
+        "build/**/*.js",
+        "build/**/*.ts"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
+    },
+    "dependencies": {
+        "@fluid-topics/design-system-variables": "0.1.99",
+        "@fluid-topics/ft-assets": "1.2.67",
+        "@fluid-topics/ft-wc-utils": "1.2.67",
+        "lit": "3.1.0"
+    },
+    "devDependencies": {
+        "@fluid-topics/ft-wc-test-utils": "1.2.67"
+    },
+    "gitHead": "883c4eaa2ce2d80befa30df7781a2cc5f547260f"
+}