genesys-spark-components 4.185.4 → 4.186.0

package/dist/esm/gux-tree-beta.entry.js

@@ -0,0 +1,181 @@
+import { r as registerInstance, f as forceUpdate, h, H as Host, a as getElement } from './index-Dz_2h4jr.js';
+import { t as trackComponent } from './usage-P-hdUE3M.js';
+import { s as simulateNativeEvent } from './simulate-native-event-BMRf5pjV.js';
+import { h as hasParentDisabled, s as setSelectedNodeByValue, f as forceUpdateTree, c as clearActiveNode, d as setInitialActiveNode, e as handleTreeNodeSpecificEvent, i as setLastNodeActive, j as setFirstNodeActive, k as setPreviousNodeActive, l as setNextNodeActive, m as setSelectedNode, n as setParentNodeActive, o as setChildNodeActive } from './gux-tree.service-g_oSRmLT.js';
+import './when-event-is-from-kLXvN2m9.js';
+
+const guxTreeCss = ":host{display:flex;flex-direction:column;flex-wrap:nowrap;gap:var(--gse-ui-treeView-item-internalGap);place-content:stretch flex-start;align-items:stretch;padding:var(--gse-ui-treeView-group-comfy-padding)}:host(.gux-compact){padding:var(--gse-ui-treeView-group-compact-padding)}";
+
+const GuxTree = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        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 formAssociated() { return true; }
+    get root() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["handleValueChange"],
+        "disabled": ["handleDisabledChange"]
+    }; }
+};
+GuxTree.style = guxTreeCss;
+
+export { GuxTree as gux_tree_beta };

package/dist/esm/gux-tree-multi-beta.entry.js

@@ -0,0 +1,202 @@
+import { r as registerInstance, f as forceUpdate, h, H as Host, a as getElement } from './index-Dz_2h4jr.js';
+import { t as trackComponent } from './usage-P-hdUE3M.js';
+import { s as simulateNativeEvent } from './simulate-native-event-BMRf5pjV.js';
+import { h as hasParentDisabled, s as setSelectedNodesByValue, f as forceUpdateTree, c as clearActiveNode, d as setInitialActiveNode, e as handleTreeNodeSpecificEvent, i as setLastNodeActive, j as setFirstNodeActive, k as setPreviousNodeActive, l as setNextNodeActive, m as setInitialSelectedNodesByValue, t as toggleNodeSelection, n as setParentNodeActive, o as setChildNodeActive } from './gux-tree-multi.service-rN4u4zJA.js';
+import './when-event-is-from-kLXvN2m9.js';
+
+const guxTreeMultiCss = ":host{display:flex;flex-direction:column;flex-wrap:nowrap;gap:var(--gse-ui-treeView-item-internalGap);place-content:stretch flex-start;align-items:stretch;padding:var(--gse-ui-treeView-group-comfy-padding)}:host(.gux-compact){padding:var(--gse-ui-treeView-group-compact-padding)}";
+
+const GuxTreeMulti = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        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 formAssociated() { return true; }
+    get root() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["handleValueChange"],
+        "disabled": ["handleDisabledChange"]
+    }; }
+};
+GuxTreeMulti.style = guxTreeMultiCss;
+
+export { GuxTreeMulti as gux_tree_multi_beta };

package/dist/esm/gux-tree-multi.service-rN4u4zJA.js

@@ -0,0 +1,295 @@
+import { f as forceUpdate } from './index-Dz_2h4jr.js';
+import { w as whenEventIsFrom } from './when-event-is-from-kLXvN2m9.js';
+
+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);
+}
+// 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' });
+    }
+}
+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 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
+function setInitialActiveNode(tree) {
+    setActiveNode(tree, getFirstSelectedNode(tree) || getFirstNode(tree));
+}
+function setFirstNodeActive(tree) {
+    setActiveNode(tree, getFirstNode(tree));
+}
+function setLastNodeActive(tree) {
+    setActiveNode(tree, getLastNode(tree));
+}
+function setNextNodeActive(tree) {
+    setActiveNode(tree, getNextNode(tree));
+}
+function setPreviousNodeActive(tree) {
+    setActiveNode(tree, getPreviousNode(tree));
+}
+function setParentNodeActive(tree) {
+    const activeNode = getActiveNode(tree);
+    const parentNode = activeNode.parentElement.closest('gux-branch-multi');
+    setActiveNode(tree, parentNode);
+}
+function setChildNodeActive(tree, branch) {
+    const targetBranch = getActiveNode(tree);
+    const availableNodes = getAvailableTreeNodes(tree).filter(node => {
+        return targetBranch.contains(node);
+    });
+    if (availableNodes[0]) {
+        setActiveNode(tree, availableNodes[0]);
+    }
+}
+function hasChildSelected(branch) {
+    return getAllTreeNodes(branch).some(node => node.selected);
+}
+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;
+}
+function forceUpdateTree(tree) {
+    getAllTreeNodes(tree).forEach(node => {
+        forceUpdate(node);
+    });
+}
+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' });
+}
+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);
+    });
+}
+function setInitialSelectedNodesByValue(tree, value) {
+    setSelectedNodesByValue(tree, value);
+    expandSelectedNodes(tree);
+}
+function expandSelectedNodes(tree) {
+    const allNodes = getAllTreeNodes(tree);
+    allNodes.forEach(node => {
+        if (node.selected) {
+            expandAllParents(node);
+        }
+    });
+}
+function getTreeSize(node) {
+    var _a;
+    return (_a = getTree(node)) === null || _a === void 0 ? void 0 : _a.size;
+}
+function getTreeAlignment(node) {
+    var _a;
+    return (_a = getTree(node)) === null || _a === void 0 ? void 0 : _a.alignment;
+}
+// Public API - Event handling
+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);
+        });
+    }
+}
+
+export { getTreeAlignment as a, hasChildSelected as b, clearActiveNode as c, setInitialActiveNode as d, handleTreeNodeSpecificEvent as e, forceUpdateTree as f, getTreeSize as g, hasParentDisabled as h, setLastNodeActive as i, setFirstNodeActive as j, setPreviousNodeActive as k, setNextNodeActive as l, setInitialSelectedNodesByValue as m, setParentNodeActive as n, setChildNodeActive as o, setSelectedNodesByValue as s, toggleNodeSelection as t };