genesys-spark-components 4.185.3 → 4.186.0

package/dist/esm/gux-tooltip_2.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host, a as getElement, f as forceUpdate } from './index-Dz_2h4jr.js';
 import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, h as hide } from './floating-ui.dom-C8aV-TzO.js';
 import { r as randomHTMLId } from './random-html-id-D9jKBqIb.js';
-import { t as trackComponent } from './usage-BosaBwHR.js';
+import { t as trackComponent } from './usage-P-hdUE3M.js';
 import { f as findElementById } from './find-element-by-id-Cr5bTKWF.js';
 import { b as afterNextRender } from './after-next-render-Bg4q97BS.js';
 import { o as overflowDetection } from './overflow-detection-DFafEcJf.js';
@@ -158,10 +158,10 @@ const GuxTooltip = class {
         this.disconnectForElement();
     }
     render() {
-        return (h(Host, { key: '74913ea005def5c10e986822932615562c3a4d52', id: this.id, class: { 'gux-show': this.isShown }, role: "tooltip" }, h("div", { key: '356dc86d585632c86004d10fc88a9a1cb378fb8a', class: {
+        return (h(Host, { key: '262107f7e8394a7196408c654508efafa46e0712', id: this.id, class: { 'gux-show': this.isShown }, role: "tooltip" }, h("div", { key: '4142136c631e79eaf208a577ab1c69f3d31bcfed', class: {
                 'gux-container': true,
                 [`gux-${this.accent}`]: true
-            }, "data-placement": this.placement }, h("slot", { key: '1d9920b52e360fa8285afaadfcc31ecddb2160f4', name: "content" }, h("slot", { key: '0e0aa1e2f83795ffea14dd00387aec18241d5ecb' })))));
+            }, "data-placement": this.placement }, h("slot", { key: 'e0650e5e69c6127245a425bccfcccc419e57bb06', name: "content" }, h("slot", { key: '10351203f9ff42f1c2072456ff44b742b0315350' })))));
     }
     get root() { return getElement(this); }
     static get watchers() { return {
@@ -221,12 +221,12 @@ const GuxTruncate = class {
     }
     render() {
         var _a;
-        return (h("div", { key: '3fc6df08f4e5b36071d4e18e6eacffecfc06b18d', class: {
+        return (h("div", { key: '513b2e20fcbf2d0a041a1108580fac1fbfed222a', class: {
                 'gux-truncate-multi-line': Boolean(this.maxLines)
-            } }, h("span", { key: 'c2a8e7803b4f364e8ff21b8f728d38550a373240', class: {
+            } }, h("span", { key: 'd71d9fcdb762b5615ecb24e8a90cf2f0ea9dc21e', class: {
                 'gux-overflow-hidden': this.needsTruncation(),
                 'gux-truncate-slot-container': true
-            }, style: { webkitLineClamp: (_a = this.maxLines) === null || _a === void 0 ? void 0 : _a.toString() } }, h("slot", { key: 'c19b5fb35613f3fd6a6b737e06e435ea16bda7b8' })), this.renderTooltip()));
+            }, style: { webkitLineClamp: (_a = this.maxLines) === null || _a === void 0 ? void 0 : _a.toString() } }, h("slot", { key: '8634b05960569070909f77cec6e8e52a53c2cb8b' })), this.renderTooltip()));
     }
     get root() { return getElement(this); }
 };

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 };