genesys-spark-components 4.185.3 → 4.186.0

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

@@ -0,0 +1,296 @@
+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, setSelectedNode, setSelectedNodeByValue } from "./gux-tree.service";
+/**
+ * @slot default - gux-branch or gux-leaf elements
+ */
+export class GuxTree {
+    constructor() {
+        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);
+        }
+        setSelectedNodeByValue(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 => {
+                setSelectedNode(this.root, leaf);
+            },
+            onBranch: branch => {
+                branch.expanded = !branch.expanded;
+                setSelectedNode(this.root, branch);
+            }
+        });
+    }
+    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':
+                handleTreeNodeSpecificEvent({
+                    event,
+                    onLeaf: leaf => {
+                        switch (event.key) {
+                            case 'ArrowLeft':
+                                event.preventDefault();
+                                setParentNodeActive(this.root);
+                                break;
+                            case 'Enter':
+                                event.preventDefault();
+                                setSelectedNode(this.root, leaf);
+                                break;
+                        }
+                    },
+                    onBranch: branch => {
+                        switch (event.key) {
+                            case 'ArrowRight':
+                                event.preventDefault();
+                                if (!branch.expanded) {
+                                    branch.expanded = true;
+                                }
+                                else {
+                                    setChildNodeActive(this.root, branch);
+                                }
+                                break;
+                            case 'ArrowLeft':
+                                event.preventDefault();
+                                if (branch.expanded) {
+                                    branch.expanded = false;
+                                }
+                                else {
+                                    setParentNodeActive(this.root);
+                                }
+                                break;
+                            case 'Enter':
+                                event.preventDefault();
+                                setSelectedNode(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');
+        if ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) {
+            this.internals.setFormValue(this.value);
+        }
+        setSelectedNodeByValue(this.root, this.value);
+        setInitialActiveNode(this.root);
+    }
+    componentDidLoad() {
+        this.handleDisabledChange();
+    }
+    onDefaultSlotchange() {
+        forceUpdate(this.root);
+    }
+    render() {
+        return (h(Host, { key: 'd68d924fb23d1120d753fc26001201709f9b417d', class: {
+                'gux-compact': this.size === 'compact',
+                'gux-end': this.alignment === 'end'
+            }, "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: 'f4f7c959b771c0079fbd1b73fc11085db4929d40', onSlotchange: () => this.onDefaultSlotchange() })));
+    }
+    static get is() { return "gux-tree-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-tree.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-tree.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
+            },
+            "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.types",
+                            "id": "src/components/beta/gux-tree/gux-tree.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.types",
+                            "id": "src/components/beta/gux-tree/gux-tree.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/gux-tree.service.js

@@ -0,0 +1,220 @@
+import { forceUpdate } from "@stencil/core";
+import { whenEventIsFrom } from "../../../utils/dom/when-event-is-from";
+function getTree(node) {
+    return node.closest('gux-tree-beta');
+}
+// Utility functions for node type checking
+function isNode(item) {
+    const nodeTypes = ['GUX-LEAF', 'GUX-BRANCH'];
+    return nodeTypes.includes(item.tagName);
+}
+function isBranchNode(item) {
+    return item.tagName === 'GUX-BRANCH';
+}
+function isOpenBranchNode(item) {
+    if (item.tagName === 'GUX-BRANCH') {
+        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 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');
+    while (parent) {
+        parent.expanded = true;
+        parent = parent.parentElement.closest('gux-branch');
+    }
+}
+function setNoSelection(tree) {
+    getAllTreeNodes(tree).forEach(node => {
+        node.selected = false;
+    });
+}
+// 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');
+    setActiveNode(tree, parentNode);
+}
+export function setChildNodeActive(tree, branch) {
+    const node = getActiveNode(branch);
+    const availableNodes = getAvailableTreeNodes(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, gux-tree-beta, fieldset');
+    while (parent) {
+        if (parent.disabled) {
+            return true;
+        }
+        parent = parent.parentElement.closest('gux-branch, gux-tree-beta, fieldset');
+    }
+    return false;
+}
+export function forceUpdateTree(tree) {
+    getAllTreeNodes(tree).forEach(node => {
+        forceUpdate(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', event, (leaf) => {
+        if (leaf.value) {
+            onLeaf(leaf);
+            eventFromLeaf = true;
+        }
+    });
+    if (!eventFromLeaf) {
+        whenEventIsFrom('gux-branch', event, (branch) => {
+            onBranch(branch);
+        });
+    }
+}

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

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

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

@@ -0,0 +1,137 @@
+export const renderConfig = {
+    description: `should render as expected`,
+    html: `
+    <gux-tree-beta>
+      <gux-branch>
+        <div slot="label">Projects</div>
+        <gux-leaf>
+          <div slot="label"> Project-1 </div>
+        </gux-leaf>
+        <gux-leaf>
+          <div slot="label"> Project-2 </div>
+        </gux-leaf>
+      </gux-branch>
+      <gux-branch>
+        <div slot="label">Reports</div>
+        <gux-branch>
+          <div slot="label">2025</div>
+          <gux-leaf>
+            <div slot="label"> doc 1 </div>
+          </gux-leaf>
+          <gux-leaf>
+            <div slot="label"> doc 2 </div>
+          </gux-leaf>
+          <gux-leaf>
+            <div slot="label"> doc 3 </div>
+          </gux-leaf>
+        </gux-branch>
+        <gux-branch>
+          <div slot="label">2024</div>
+        </gux-branch>
+      </gux-branch>
+      <gux-leaf>
+        <div slot="label"> Untitled Documents </div>
+      </gux-leaf>
+    </gux-tree-beta>
+  `
+};
+const comfySizeConfig = {
+    description: 'should render with comfy size',
+    html: `
+    <gux-tree-beta size="comfy">
+      <gux-branch value="b-1">
+        <gux-icon slot="icon" icon-name="fa/code-branch-regular" decorative></gux-icon>
+        <div slot="label">Branch 1</div>
+        <gux-leaf value="l-1-1">
+          <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative></gux-icon>
+          <div slot="label">Leaf 1-1</div>
+        </gux-leaf>
+      </gux-branch>
+      <gux-leaf value="l-1">
+        <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative></gux-icon>
+        <div slot="label">Leaf 1</div>
+      </gux-leaf>
+    </gux-tree-beta>
+  `
+};
+const compactSizeConfig = {
+    description: 'should render with compact size',
+    html: `
+    <gux-tree-beta size="compact">
+      <gux-branch value="b-1">
+        <gux-icon slot="icon" icon-name="fa/code-branch-regular" decorative></gux-icon>
+        <div slot="label">Branch 1</div>
+        <gux-leaf value="l-1-1">
+          <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative></gux-icon>
+          <div slot="label">Leaf 1-1</div>
+        </gux-leaf>
+      </gux-branch>
+      <gux-leaf value="l-1">
+        <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative></gux-icon>
+        <div slot="label">Leaf 1</div>
+      </gux-leaf>
+    </gux-tree-beta>
+  `
+};
+const startAlignmentConfig = {
+    description: 'should render with start alignment',
+    html: `
+    <gux-tree-beta alignment="start">
+      <gux-branch value="b-1">
+        <gux-icon slot="icon" icon-name="fa/code-branch-regular" decorative></gux-icon>
+        <div slot="label">Branch 1</div>
+        <gux-leaf value="l-1-1">
+          <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative></gux-icon>
+          <div slot="label">Leaf 1-1</div>
+        </gux-leaf>
+      </gux-branch>
+      <gux-leaf value="l-1">
+        <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative></gux-icon>
+        <div slot="label">Leaf 1</div>
+      </gux-leaf>
+    </gux-tree-beta>
+  `
+};
+const endAlignmentConfig = {
+    description: 'should render with end alignment',
+    html: `
+    <gux-tree-beta alignment="end">
+      <gux-branch value="b-1">
+        <gux-icon slot="icon" icon-name="fa/code-branch-regular" decorative></gux-icon>
+        <div slot="label">Branch 1</div>
+        <gux-leaf value="l-1-1">
+          <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative></gux-icon>
+          <div slot="label">Leaf 1-1</div>
+        </gux-leaf>
+      </gux-branch>
+      <gux-leaf value="l-1">
+        <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative></gux-icon>
+        <div slot="label">Leaf 1</div>
+      </gux-leaf>
+    </gux-tree-beta>
+  `
+};
+const disabledRenderConfig = {
+    description: 'should render a disabled gux-tree-beta',
+    html: `
+    <gux-tree-beta disabled value="l-1">
+      <gux-branch value="b-1">
+        <div slot="label">Branch 1</div>
+        <gux-leaf value="l-1-1">
+          <div slot="label">Leaf 1-1</div>
+        </gux-leaf>
+      </gux-branch>
+      <gux-leaf value="l-1">
+        <div slot="label">Leaf 1</div>
+      </gux-leaf>
+    </gux-tree-beta>
+  `
+};
+export const renderConfigs = [
+    renderConfig,
+    disabledRenderConfig,
+    comfySizeConfig,
+    compactSizeConfig,
+    startAlignmentConfig,
+    endAlignmentConfig
+];