genesys-spark-components 4.185.4 → 4.186.0

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
+];

package/dist/collection/components/beta/gux-tree-multi/gux-branch-multi/gux-branch-multi.css

@@ -0,0 +1,122 @@
+:host {
+  display: block;
+}
+
+:host(:focus-visible) {
+  outline: none;
+}
+:host(:focus-visible) .gux-node {
+  outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);
+  outline-offset: var(--gse-semantic-focusOutline-offset);
+}
+:host(:focus-visible) .gux-tree-item {
+  background-color: var(--gse-ui-treeView-background-hover);
+}
+
+.gux-wrapper {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  gap: var(--gse-ui-treeView-item-internalGap);
+  place-content: stretch flex-start;
+  align-items: stretch;
+}
+.gux-wrapper .gux-node {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: var(--gse-semantic-interactive-sm-gap);
+  place-content: stretch flex-start;
+  align-items: stretch;
+}
+.gux-wrapper .gux-node .gux-selected-bookmark {
+  flex: 0 1 auto;
+  align-self: auto;
+  inline-size: 6px;
+  background: transparent;
+  border-radius: var(--gse-semantic-interactive-sm-borderRadius);
+}
+.gux-wrapper .gux-node .gux-tree-item {
+  display: flex;
+  flex: 1 1 auto;
+  gap: var(--gse-ui-treeView-item-internalGap);
+  align-items: center;
+  align-self: auto;
+  padding: var(--gse-ui-treeView-group-comfy-padding);
+  border-radius: var(--gse-semantic-interactive-sm-borderRadius);
+}
+.gux-wrapper .gux-node .gux-tree-item:hover {
+  background-color: var(--gse-ui-treeView-background-hover);
+}
+.gux-wrapper .gux-node .gux-tree-item .gux-selection-target {
+  display: flex;
+  flex: 0 0 auto;
+  gap: var(--gse-semantic-interactive-lg-gap);
+  align-items: center;
+  align-self: auto;
+}
+.gux-wrapper .gux-node .gux-tree-item .gux-selection-target .gux-checkbox-container {
+  display: flex;
+  align-items: center;
+}
+.gux-wrapper .gux-node .gux-tree-item .gux-selection-target .gux-icon {
+  display: flex;
+  align-items: center;
+}
+.gux-wrapper.gux-compact .gux-tree-item {
+  padding: var(--gse-ui-treeView-group-compact-padding);
+}
+.gux-wrapper.gux-compact.gux-end .gux-tree-item {
+  justify-content: space-between;
+  padding: var(--gse-ui-treeView-item-compact-rightAligned-padding);
+}
+.gux-wrapper.gux-end .gux-tree-item {
+  justify-content: space-between;
+  padding: var(--gse-ui-treeView-item-comfy-rightAligned-padding);
+}
+.gux-wrapper.gux-selected .gux-selected-bookmark {
+  background: var(--gse-semantic-background-interactive-primary-default);
+}
+.gux-wrapper.gux-selected .gux-tree-item {
+  background-color: var(--gse-ui-treeView-background-selected);
+}
+.gux-wrapper.gux-child-selected .gux-selected-bookmark {
+  background: var(--gse-ui-treeView-selectionBookmark-midEmphasis);
+}
+.gux-wrapper.gux-disabled .gux-node {
+  opacity: var(--gse-ui-treeView-disableOpacity);
+}
+.gux-wrapper.gux-disabled {
+  pointer-events: none;
+  cursor: default;
+}
+.gux-wrapper .gux-treeitems {
+  display: none;
+  padding-inline-start: 20px;
+}
+.gux-wrapper.gux-expanded .gux-branch-indicator gux-icon {
+  rotate: 90deg;
+}
+.gux-wrapper.gux-expanded .gux-treeitems {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  gap: var(--gse-ui-treeView-item-internalGap);
+  place-content: stretch flex-start;
+  align-items: stretch;
+}
+.gux-wrapper .gux-branch-indicator {
+  display: flex;
+  align-items: center;
+}
+.gux-wrapper .gux-branch-indicator gux-icon {
+  inline-size: 16px;
+  block-size: 16px;
+}
+
+::slotted(gux-icon[slot=icon]) {
+  display: flex;
+  align-items: center;
+  inline-size: 16px;
+  block-size: 16px;
+}