genesys-spark-components 4.185.4 → 4.186.1

package/dist/collection/components/beta/gux-tree-multi/gux-tree-multi.js

@@ -0,0 +1,318 @@
+import { h, forceUpdate, Host } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
+import simulateNativeEvent from "../../../utils/dom/simulate-native-event";
+import { clearActiveNode, forceUpdateTree, handleTreeNodeSpecificEvent, hasParentDisabled, setChildNodeActive, setFirstNodeActive, setInitialActiveNode, setLastNodeActive, setNextNodeActive, setParentNodeActive, setPreviousNodeActive, setSelectedNodesByValue, setInitialSelectedNodesByValue, toggleNodeSelection } from "./gux-tree-multi.service";
+/**
+ * @slot default - gux-branch-multi or gux-leaf-multi elements
+ */
+export class GuxTreeMulti {
+    constructor() {
+        this.value = '';
+        this._disabled = false;
+        this.size = 'comfy';
+        this.alignment = 'start';
+    }
+    get disabled() {
+        return this._disabled || hasParentDisabled(this.root);
+    }
+    set disabled(value) {
+        this._disabled = value;
+    }
+    handleValueChange(newValue, oldValue) {
+        var _a;
+        if ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) {
+            this.internals.setFormValue(newValue);
+        }
+        setSelectedNodesByValue(this.root, this.value);
+        simulateNativeEvent(this.root, 'input');
+        if (oldValue !== newValue) {
+            simulateNativeEvent(this.root, 'change');
+        }
+        forceUpdateTree(this.root);
+    }
+    handleDisabledChange() {
+        if (this.disabled) {
+            clearActiveNode(this.root);
+        }
+        else {
+            setInitialActiveNode(this.root);
+        }
+        forceUpdateTree(this.root);
+    }
+    onClick(event) {
+        if (this.disabled) {
+            return;
+        }
+        handleTreeNodeSpecificEvent({
+            event,
+            onLeaf: leaf => {
+                if (this.isSelectionClick(event)) {
+                    toggleNodeSelection(this.root, leaf);
+                }
+            },
+            onBranch: branch => {
+                if (this.isSelectionClick(event)) {
+                    toggleNodeSelection(this.root, branch);
+                }
+                else {
+                    branch.expanded = !branch.expanded;
+                }
+            }
+        });
+    }
+    handleKeydown(event) {
+        if (this.disabled) {
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                setNextNodeActive(this.root);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                setPreviousNodeActive(this.root);
+                break;
+            case 'Home':
+                event.preventDefault();
+                setFirstNodeActive(this.root);
+                break;
+            case 'End':
+                event.preventDefault();
+                setLastNodeActive(this.root);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowRight':
+            case 'Enter':
+            case ' ':
+                handleTreeNodeSpecificEvent({
+                    event,
+                    onLeaf: leaf => {
+                        switch (event.key) {
+                            case 'ArrowLeft':
+                                event.preventDefault();
+                                setParentNodeActive(this.root);
+                                break;
+                            case 'Enter':
+                            case ' ':
+                                event.preventDefault();
+                                toggleNodeSelection(this.root, leaf);
+                                break;
+                        }
+                    },
+                    onBranch: branch => {
+                        switch (event.key) {
+                            case 'ArrowRight':
+                                event.preventDefault();
+                                if (!branch.expanded) {
+                                    branch.expanded = true;
+                                }
+                                else {
+                                    setChildNodeActive(this.root);
+                                }
+                                break;
+                            case 'ArrowLeft':
+                                event.preventDefault();
+                                if (branch.expanded) {
+                                    branch.expanded = false;
+                                }
+                                else {
+                                    setParentNodeActive(this.root);
+                                }
+                                break;
+                            case 'Enter':
+                            case ' ':
+                                event.preventDefault();
+                                toggleNodeSelection(this.root, branch);
+                                break;
+                        }
+                    }
+                });
+                break;
+            default:
+                return;
+        }
+    }
+    formAssociatedCallback(form) {
+        console.info('Form associated:', form);
+    }
+    formDisabledCallback() {
+        forceUpdateTree(this.root);
+    }
+    formResetCallback() {
+        this.value = '';
+    }
+    formStateRestoreCallback(state
+    // mode: 'restore' | 'autocomplete' // eslint-disable-line @typescript-eslint/no-unused-vars
+    ) {
+        this.value = state;
+    }
+    componentWillLoad() {
+        var _a;
+        trackComponent(this.root);
+        this.internals.role = 'tree';
+        this.root.setAttribute('role', 'tree');
+        this.internals.ariaMultiSelectable = 'true';
+        this.root.setAttribute('aria-multiselectable', 'true');
+        if ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) {
+            this.internals.setFormValue(this.value);
+        }
+        setInitialSelectedNodesByValue(this.root, this.value);
+        setInitialActiveNode(this.root);
+    }
+    componentDidLoad() {
+        this.handleDisabledChange();
+    }
+    onDefaultSlotchange() {
+        forceUpdate(this.root);
+    }
+    isSelectionClick(event) {
+        const path = event.composedPath();
+        const selectTargets = ['gux-selection-target'];
+        return path.some(el => {
+            const element = el;
+            return (element.classList &&
+                selectTargets.some(target => element.classList.contains(target)));
+        });
+    }
+    render() {
+        return (h(Host, { key: 'de91a0dd243fc74f1c8c7f83121767dbd5f55481', class: {
+                'gux-compact': this.size === 'compact',
+                'gux-end': this.alignment === 'end'
+            }, "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '5d7c3ccf991078b9a51361482c0ab35a278dcf20', onSlotchange: () => this.onDefaultSlotchange() })));
+    }
+    static get is() { return "gux-tree-multi-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-tree-multi.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-tree-multi.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": true,
+                "setter": true,
+                "reflect": true
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuxTreeSize",
+                    "resolved": "\"comfy\" | \"compact\"",
+                    "references": {
+                        "GuxTreeSize": {
+                            "location": "import",
+                            "path": "./gux-tree-multi.types",
+                            "id": "src/components/beta/gux-tree-multi/gux-tree-multi.types.ts::GuxTreeSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'comfy'"
+            },
+            "alignment": {
+                "type": "string",
+                "attribute": "alignment",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuxTreeAlignment",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {
+                        "GuxTreeAlignment": {
+                            "location": "import",
+                            "path": "./gux-tree-multi.types",
+                            "id": "src/components/beta/gux-tree-multi/gux-tree-multi.types.ts::GuxTreeAlignment"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'start'"
+            }
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleDisabledChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}

package/dist/collection/components/beta/gux-tree-multi/gux-tree-multi.service.js

@@ -0,0 +1,320 @@
+import { forceUpdate } from "@stencil/core";
+import { whenEventIsFrom } from "../../../utils/dom/when-event-is-from";
+function getTree(node) {
+    return node.closest('gux-tree-multi-beta');
+}
+// Utility functions for node type checking
+function isNode(item) {
+    const nodeTypes = ['GUX-LEAF-MULTI', 'GUX-BRANCH-MULTI'];
+    return nodeTypes.includes(item.tagName);
+}
+function isBranchNode(item) {
+    return item.tagName === 'GUX-BRANCH-MULTI';
+}
+function isLeafNode(item) {
+    return item.tagName === 'GUX-LEAF-MULTI';
+}
+function isOpenBranchNode(item) {
+    if (item.tagName === 'GUX-BRANCH-MULTI') {
+        return item.expanded;
+    }
+    return false;
+}
+function hasActiveNode(tree) {
+    return Boolean(getActiveNode(tree));
+}
+// Core tree traversal functions
+function getAllTreeNodes(tree) {
+    const nodes = [];
+    function getNodes(element) {
+        for (const child of Array.from(element.children)) {
+            if (isNode(child)) {
+                nodes.push(child);
+            }
+            if (isBranchNode(child)) {
+                getNodes(child);
+            }
+        }
+    }
+    getNodes(tree);
+    return nodes;
+}
+function getAllTreeLeafNodes(tree) {
+    const nodes = [];
+    function getNodes(element) {
+        for (const child of Array.from(element.children)) {
+            if (isLeafNode(child)) {
+                nodes.push(child);
+            }
+            if (isBranchNode(child)) {
+                getNodes(child);
+            }
+        }
+    }
+    getNodes(tree);
+    return nodes;
+}
+function getTreeNodes(tree) {
+    const nodes = [];
+    function getNodes(element) {
+        for (const child of Array.from(element.children)) {
+            if (isNode(child)) {
+                nodes.push(child);
+            }
+            if (isOpenBranchNode(child)) {
+                getNodes(child);
+            }
+        }
+    }
+    getNodes(tree);
+    return nodes;
+}
+function getAvailableTreeNodes(tree) {
+    const availableTreeNodes = getTreeNodes(tree).filter(node => {
+        return !node.disabled && !node.filtered;
+    });
+    return availableTreeNodes;
+}
+// Node getter functions
+function getActiveNode(tree) {
+    return getTreeNodes(tree).find(node => node.active);
+}
+function getFirstSelectedNode(tree) {
+    return getTreeNodes(tree).find(node => node.selected && !node.disabled && !node.filtered);
+}
+function getFirstNode(tree) {
+    return getAvailableTreeNodes(tree)[0];
+}
+function getLastNode(tree) {
+    const availableNodes = getAvailableTreeNodes(tree);
+    return availableNodes[availableNodes.length - 1];
+}
+function getNextNode(tree) {
+    if (hasActiveNode(tree) && getActiveNode(tree) !== getLastNode(tree)) {
+        const availableTreeNodes = getAvailableTreeNodes(tree);
+        const activeNode = getActiveNode(tree);
+        const activeNodeIndex = availableTreeNodes.indexOf(activeNode);
+        return availableTreeNodes[activeNodeIndex + 1];
+    }
+    return getFirstNode(tree);
+}
+function getPreviousNode(tree) {
+    if (hasActiveNode(tree)) {
+        const availableNodesList = getAvailableTreeNodes(tree);
+        const activeNodeIndex = availableNodesList.indexOf(getActiveNode(tree));
+        if (getActiveNode(tree) === getFirstNode(tree)) {
+            return getLastNode(tree);
+        }
+        return availableNodesList[activeNodeIndex - 1];
+    }
+    return getFirstNode(tree);
+}
+function getNodeByValue(tree, value) {
+    return getAllTreeNodes(tree).find(node => node.value === value);
+}
+// Core setter functions
+function setActiveNode(tree, element) {
+    if (tree.disabled) {
+        clearActiveNode(tree);
+        return;
+    }
+    if (element) {
+        getTreeNodes(tree).forEach(node => {
+            const active = !node.disabled && !node.filtered && node === element;
+            node.active = active;
+            if (active) {
+                tree.setAttribute('aria-activedescendant', node.id);
+            }
+        });
+        element.scrollIntoView({ block: 'nearest' });
+    }
+}
+export function clearActiveNode(tree) {
+    getAllTreeNodes(tree).forEach(node => {
+        node.active = false;
+    });
+    tree.removeAttribute('aria-activedescendant');
+}
+function expandAllParents(element) {
+    let parent = element.parentElement.closest('gux-branch-multi');
+    while (parent) {
+        parent.expanded = true;
+        parent = parent.parentElement.closest('gux-branch-multi');
+    }
+}
+function updateBranchState(branch) {
+    const childNodes = getAllTreeLeafNodes(branch);
+    const selectedChildren = childNodes.filter(child => child.selected);
+    if (selectedChildren.length === 0) {
+        branch.selected = false;
+        branch.indeterminate = false;
+    }
+    else if (selectedChildren.length === childNodes.length) {
+        branch.selected = true;
+        branch.indeterminate = false;
+    }
+    else {
+        branch.selected = false;
+        branch.indeterminate = true;
+    }
+}
+function updateDescendants(node, selected) {
+    for (const child of Array.from(node.children)) {
+        if (isNode(child)) {
+            const childNode = child;
+            if (!childNode.disabled && !childNode.filtered) {
+                childNode.selected = selected;
+                childNode.indeterminate = false;
+            }
+        }
+        if (isBranchNode(child)) {
+            updateDescendants(child, selected);
+        }
+    }
+}
+function updateParentStates(node) {
+    let parent = node.parentElement.closest('gux-branch-multi');
+    while (parent) {
+        updateBranchState(parent);
+        parent = parent.parentElement.closest('gux-branch-multi');
+    }
+}
+function setNoSelection(tree) {
+    getAllTreeNodes(tree).forEach(node => {
+        node.selected = false;
+    });
+}
+function updateTreeValue(tree) {
+    const selectedNodes = getAllTreeNodes(tree).filter(node => node.selected && node.value);
+    tree.value = selectedNodes.map(node => node.value).join(',');
+}
+// Public API - Active node management
+export function setInitialActiveNode(tree) {
+    setActiveNode(tree, getFirstSelectedNode(tree) || getFirstNode(tree));
+}
+export function setFirstNodeActive(tree) {
+    setActiveNode(tree, getFirstNode(tree));
+}
+export function setLastNodeActive(tree) {
+    setActiveNode(tree, getLastNode(tree));
+}
+export function setNextNodeActive(tree) {
+    setActiveNode(tree, getNextNode(tree));
+}
+export function setPreviousNodeActive(tree) {
+    setActiveNode(tree, getPreviousNode(tree));
+}
+export function setParentNodeActive(tree) {
+    const activeNode = getActiveNode(tree);
+    const parentNode = activeNode.parentElement.closest('gux-branch-multi');
+    setActiveNode(tree, parentNode);
+}
+export function setChildNodeActive(tree, branch) {
+    const targetBranch = branch || getActiveNode(tree);
+    const availableNodes = getAvailableTreeNodes(tree).filter(node => {
+        return targetBranch.contains(node);
+    });
+    if (availableNodes[0]) {
+        setActiveNode(tree, availableNodes[0]);
+    }
+}
+// Public API - Selection management
+export function setSelectedNode(tree, element) {
+    if (element === null || element === void 0 ? void 0 : element.value) {
+        getAllTreeNodes(tree).forEach(node => {
+            node.selected = node === element;
+        });
+        tree.value = element.value;
+        element.scrollIntoView({ block: 'nearest' });
+    }
+}
+export function setSelectedNodeByValue(tree, value) {
+    const element = getNodeByValue(tree, value);
+    if (element) {
+        expandAllParents(element);
+        setSelectedNode(tree, element);
+    }
+    else {
+        setNoSelection(tree);
+    }
+}
+export function hasChildSelected(branch) {
+    return getAllTreeNodes(branch).some(node => node.selected);
+}
+export function hasParentDisabled(node) {
+    let parent = node.parentElement.closest('gux-branch-multi, gux-tree-multi-beta, fieldset');
+    while (parent) {
+        if (parent.disabled) {
+            return true;
+        }
+        parent = parent.parentElement.closest('gux-branch-multi, gux-tree-multi-beta, fieldset');
+    }
+    return false;
+}
+export function forceUpdateTree(tree) {
+    getAllTreeNodes(tree).forEach(node => {
+        forceUpdate(node);
+    });
+}
+export function toggleNodeSelection(tree, element) {
+    const newSelected = !element.selected;
+    element.selected = newSelected;
+    element.indeterminate = false;
+    // If it's a branch, update all descendants
+    if (isBranchNode(element)) {
+        updateDescendants(element, newSelected);
+    }
+    // Update parent states
+    updateParentStates(element);
+    updateTreeValue(tree);
+    element.scrollIntoView({ block: 'nearest' });
+}
+export function setSelectedNodesByValue(tree, value) {
+    const values = value.split(',').map(v => v.trim());
+    const allNodes = getAllTreeNodes(tree);
+    allNodes.forEach(node => {
+        node.selected = values.includes(node.value);
+        node.indeterminate = false;
+    });
+    // Update branch states
+    allNodes
+        .filter(node => isBranchNode(node))
+        .forEach(branch => {
+        updateBranchState(branch);
+    });
+}
+export function setInitialSelectedNodesByValue(tree, value) {
+    setSelectedNodesByValue(tree, value);
+    expandSelectedNodes(tree);
+}
+function expandSelectedNodes(tree) {
+    const allNodes = getAllTreeNodes(tree);
+    allNodes.forEach(node => {
+        if (node.selected) {
+            expandAllParents(node);
+        }
+    });
+}
+export function getTreeSize(node) {
+    var _a;
+    return (_a = getTree(node)) === null || _a === void 0 ? void 0 : _a.size;
+}
+export function getTreeAlignment(node) {
+    var _a;
+    return (_a = getTree(node)) === null || _a === void 0 ? void 0 : _a.alignment;
+}
+// Public API - Event handling
+export function handleTreeNodeSpecificEvent({ event, onLeaf, onBranch }) {
+    let eventFromLeaf = false;
+    whenEventIsFrom('gux-leaf-multi', event, (leaf) => {
+        if (leaf.value) {
+            onLeaf(leaf);
+            eventFromLeaf = true;
+        }
+    });
+    if (!eventFromLeaf) {
+        whenEventIsFrom('gux-branch-multi', event, (branch) => {
+            onBranch(branch);
+        });
+    }
+}

package/dist/collection/components/beta/gux-tree-multi/gux-tree-multi.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/beta/gux-tree-multi/tests/gux-tree-multi.common.js

@@ -0,0 +1,56 @@
+export const renderConfig = {
+    description: `should render as expected`,
+    disableA11yCheck: true,
+    html: `
+    <gux-tree-multi-beta>
+      <gux-branch-multi value="projects">
+        <div slot="label">Projects</div>
+        <gux-leaf-multi value="project1">
+          <div slot="label"> Project-1 </div>
+        </gux-leaf-multi>
+        <gux-leaf-multi value="project2">
+          <div slot="label"> Project-2 </div>
+        </gux-leaf-multi>
+      </gux-branch-multi>
+      <gux-branch-multi value="reports">
+        <div slot="label">Reports</div>
+        <gux-branch-multi value="2025">
+          <div slot="label">2025</div>
+          <gux-leaf-multi value="doc1">
+            <div slot="label"> doc 1 </div>
+          </gux-leaf-multi>
+          <gux-leaf-multi value="doc2">
+            <div slot="label"> doc 2 </div>
+          </gux-leaf-multi>
+          <gux-leaf-multi value="doc3">
+            <div slot="label"> doc 3 </div>
+          </gux-leaf-multi>
+        </gux-branch-multi>
+        <gux-branch-multi value="2024">
+          <div slot="label">2024</div>
+        </gux-branch-multi>
+      </gux-branch-multi>
+      <gux-leaf-multi value="untitled">
+        <div slot="label"> Untitled Documents </div>
+      </gux-leaf-multi>
+    </gux-tree-multi-beta>
+  `
+};
+const disabledRenderConfig = {
+    description: 'should render a disabled gux-tree-multi-beta',
+    disableA11yCheck: true,
+    html: `
+    <gux-tree-multi-beta disabled value="project1,untitled">
+      <gux-branch-multi value="projects">
+        <div slot="label">Projects</div>
+        <gux-leaf-multi value="project1">
+          <div slot="label">Project-1</div>
+        </gux-leaf-multi>
+      </gux-branch-multi>
+      <gux-leaf-multi value="untitled">
+        <div slot="label">Untitled Documents</div>
+      </gux-leaf-multi>
+    </gux-tree-multi-beta>
+  `
+};
+export const renderConfigs = [renderConfig, disabledRenderConfig];