genesys-spark-components 4.185.4 → 4.186.1

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

@@ -0,0 +1,183 @@
+'use strict';
+
+var index = require('./index-C1LZ-Zd8.js');
+var usage = require('./usage-o6I3mOuO.js');
+var simulateNativeEvent = require('./simulate-native-event-_MPnVmRN.js');
+var guxTree_service = require('./gux-tree.service-DM6q_PoD.js');
+require('./when-event-is-from-C6TjNoqM.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) {
+        index.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 || guxTree_service.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);
+        }
+        guxTree_service.setSelectedNodeByValue(this.root, this.value);
+        simulateNativeEvent.simulateNativeEvent(this.root, 'input');
+        if (oldValue !== newValue) {
+            simulateNativeEvent.simulateNativeEvent(this.root, 'change');
+        }
+        guxTree_service.forceUpdateTree(this.root);
+    }
+    handleDisabledChange() {
+        if (this.disabled) {
+            guxTree_service.clearActiveNode(this.root);
+        }
+        else {
+            guxTree_service.setInitialActiveNode(this.root);
+        }
+        guxTree_service.forceUpdateTree(this.root);
+    }
+    onClick(event) {
+        if (this.disabled) {
+            return;
+        }
+        guxTree_service.handleTreeNodeSpecificEvent({
+            event,
+            onLeaf: leaf => {
+                guxTree_service.setSelectedNode(this.root, leaf);
+            },
+            onBranch: branch => {
+                branch.expanded = !branch.expanded;
+                guxTree_service.setSelectedNode(this.root, branch);
+            }
+        });
+    }
+    handleKeydown(event) {
+        if (this.disabled) {
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                guxTree_service.setNextNodeActive(this.root);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                guxTree_service.setPreviousNodeActive(this.root);
+                break;
+            case 'Home':
+                event.preventDefault();
+                guxTree_service.setFirstNodeActive(this.root);
+                break;
+            case 'End':
+                event.preventDefault();
+                guxTree_service.setLastNodeActive(this.root);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowRight':
+            case 'Enter':
+                guxTree_service.handleTreeNodeSpecificEvent({
+                    event,
+                    onLeaf: leaf => {
+                        switch (event.key) {
+                            case 'ArrowLeft':
+                                event.preventDefault();
+                                guxTree_service.setParentNodeActive(this.root);
+                                break;
+                            case 'Enter':
+                                event.preventDefault();
+                                guxTree_service.setSelectedNode(this.root, leaf);
+                                break;
+                        }
+                    },
+                    onBranch: branch => {
+                        switch (event.key) {
+                            case 'ArrowRight':
+                                event.preventDefault();
+                                if (!branch.expanded) {
+                                    branch.expanded = true;
+                                }
+                                else {
+                                    guxTree_service.setChildNodeActive(this.root, branch);
+                                }
+                                break;
+                            case 'ArrowLeft':
+                                event.preventDefault();
+                                if (branch.expanded) {
+                                    branch.expanded = false;
+                                }
+                                else {
+                                    guxTree_service.setParentNodeActive(this.root);
+                                }
+                                break;
+                            case 'Enter':
+                                event.preventDefault();
+                                guxTree_service.setSelectedNode(this.root, branch);
+                                break;
+                        }
+                    }
+                });
+                break;
+            default:
+                return;
+        }
+    }
+    formAssociatedCallback(form) {
+        console.info('Form associated:', form);
+    }
+    formDisabledCallback() {
+        guxTree_service.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;
+        usage.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);
+        }
+        guxTree_service.setSelectedNodeByValue(this.root, this.value);
+        guxTree_service.setInitialActiveNode(this.root);
+    }
+    componentDidLoad() {
+        this.handleDisabledChange();
+    }
+    onDefaultSlotchange() {
+        index.forceUpdate(this.root);
+    }
+    render() {
+        return (index.h(index.Host, { key: 'd68d924fb23d1120d753fc26001201709f9b417d', class: {
+                'gux-compact': this.size === 'compact',
+                'gux-end': this.alignment === 'end'
+            }, "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("slot", { key: 'f4f7c959b771c0079fbd1b73fc11085db4929d40', onSlotchange: () => this.onDefaultSlotchange() })));
+    }
+    static get formAssociated() { return true; }
+    get root() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["handleValueChange"],
+        "disabled": ["handleDisabledChange"]
+    }; }
+};
+GuxTree.style = guxTreeCss;
+
+exports.gux_tree_beta = GuxTree;

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

@@ -0,0 +1,204 @@
+'use strict';
+
+var index = require('./index-C1LZ-Zd8.js');
+var usage = require('./usage-o6I3mOuO.js');
+var simulateNativeEvent = require('./simulate-native-event-_MPnVmRN.js');
+var guxTreeMulti_service = require('./gux-tree-multi.service-BFBspBvZ.js');
+require('./when-event-is-from-C6TjNoqM.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) {
+        index.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 || guxTreeMulti_service.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);
+        }
+        guxTreeMulti_service.setSelectedNodesByValue(this.root, this.value);
+        simulateNativeEvent.simulateNativeEvent(this.root, 'input');
+        if (oldValue !== newValue) {
+            simulateNativeEvent.simulateNativeEvent(this.root, 'change');
+        }
+        guxTreeMulti_service.forceUpdateTree(this.root);
+    }
+    handleDisabledChange() {
+        if (this.disabled) {
+            guxTreeMulti_service.clearActiveNode(this.root);
+        }
+        else {
+            guxTreeMulti_service.setInitialActiveNode(this.root);
+        }
+        guxTreeMulti_service.forceUpdateTree(this.root);
+    }
+    onClick(event) {
+        if (this.disabled) {
+            return;
+        }
+        guxTreeMulti_service.handleTreeNodeSpecificEvent({
+            event,
+            onLeaf: leaf => {
+                if (this.isSelectionClick(event)) {
+                    guxTreeMulti_service.toggleNodeSelection(this.root, leaf);
+                }
+            },
+            onBranch: branch => {
+                if (this.isSelectionClick(event)) {
+                    guxTreeMulti_service.toggleNodeSelection(this.root, branch);
+                }
+                else {
+                    branch.expanded = !branch.expanded;
+                }
+            }
+        });
+    }
+    handleKeydown(event) {
+        if (this.disabled) {
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                guxTreeMulti_service.setNextNodeActive(this.root);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                guxTreeMulti_service.setPreviousNodeActive(this.root);
+                break;
+            case 'Home':
+                event.preventDefault();
+                guxTreeMulti_service.setFirstNodeActive(this.root);
+                break;
+            case 'End':
+                event.preventDefault();
+                guxTreeMulti_service.setLastNodeActive(this.root);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowRight':
+            case 'Enter':
+            case ' ':
+                guxTreeMulti_service.handleTreeNodeSpecificEvent({
+                    event,
+                    onLeaf: leaf => {
+                        switch (event.key) {
+                            case 'ArrowLeft':
+                                event.preventDefault();
+                                guxTreeMulti_service.setParentNodeActive(this.root);
+                                break;
+                            case 'Enter':
+                            case ' ':
+                                event.preventDefault();
+                                guxTreeMulti_service.toggleNodeSelection(this.root, leaf);
+                                break;
+                        }
+                    },
+                    onBranch: branch => {
+                        switch (event.key) {
+                            case 'ArrowRight':
+                                event.preventDefault();
+                                if (!branch.expanded) {
+                                    branch.expanded = true;
+                                }
+                                else {
+                                    guxTreeMulti_service.setChildNodeActive(this.root);
+                                }
+                                break;
+                            case 'ArrowLeft':
+                                event.preventDefault();
+                                if (branch.expanded) {
+                                    branch.expanded = false;
+                                }
+                                else {
+                                    guxTreeMulti_service.setParentNodeActive(this.root);
+                                }
+                                break;
+                            case 'Enter':
+                            case ' ':
+                                event.preventDefault();
+                                guxTreeMulti_service.toggleNodeSelection(this.root, branch);
+                                break;
+                        }
+                    }
+                });
+                break;
+            default:
+                return;
+        }
+    }
+    formAssociatedCallback(form) {
+        console.info('Form associated:', form);
+    }
+    formDisabledCallback() {
+        guxTreeMulti_service.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;
+        usage.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);
+        }
+        guxTreeMulti_service.setInitialSelectedNodesByValue(this.root, this.value);
+        guxTreeMulti_service.setInitialActiveNode(this.root);
+    }
+    componentDidLoad() {
+        this.handleDisabledChange();
+    }
+    onDefaultSlotchange() {
+        index.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 (index.h(index.Host, { key: 'de91a0dd243fc74f1c8c7f83121767dbd5f55481', class: {
+                'gux-compact': this.size === 'compact',
+                'gux-end': this.alignment === 'end'
+            }, "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("slot", { key: '5d7c3ccf991078b9a51361482c0ab35a278dcf20', onSlotchange: () => this.onDefaultSlotchange() })));
+    }
+    static get formAssociated() { return true; }
+    get root() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["handleValueChange"],
+        "disabled": ["handleDisabledChange"]
+    }; }
+};
+GuxTreeMulti.style = guxTreeMultiCss;
+
+exports.gux_tree_multi_beta = GuxTreeMulti;

package/dist/cjs/gux-tree-multi.service-BFBspBvZ.js

@@ -0,0 +1,313 @@
+'use strict';
+
+var index = require('./index-C1LZ-Zd8.js');
+var whenEventIsFrom = require('./when-event-is-from-C6TjNoqM.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 => {
+        index.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.whenEventIsFrom('gux-leaf-multi', event, (leaf) => {
+        if (leaf.value) {
+            onLeaf(leaf);
+            eventFromLeaf = true;
+        }
+    });
+    if (!eventFromLeaf) {
+        whenEventIsFrom.whenEventIsFrom('gux-branch-multi', event, (branch) => {
+            onBranch(branch);
+        });
+    }
+}
+
+exports.clearActiveNode = clearActiveNode;
+exports.forceUpdateTree = forceUpdateTree;
+exports.getTreeAlignment = getTreeAlignment;
+exports.getTreeSize = getTreeSize;
+exports.handleTreeNodeSpecificEvent = handleTreeNodeSpecificEvent;
+exports.hasChildSelected = hasChildSelected;
+exports.hasParentDisabled = hasParentDisabled;
+exports.setChildNodeActive = setChildNodeActive;
+exports.setFirstNodeActive = setFirstNodeActive;
+exports.setInitialActiveNode = setInitialActiveNode;
+exports.setInitialSelectedNodesByValue = setInitialSelectedNodesByValue;
+exports.setLastNodeActive = setLastNodeActive;
+exports.setNextNodeActive = setNextNodeActive;
+exports.setParentNodeActive = setParentNodeActive;
+exports.setPreviousNodeActive = setPreviousNodeActive;
+exports.setSelectedNodesByValue = setSelectedNodesByValue;
+exports.toggleNodeSelection = toggleNodeSelection;