genesys-spark-components 4.185.4 → 4.186.0

package/dist/collection/components/beta/gux-tree/gux-leaf/gux-leaf.css

@@ -0,0 +1,86 @@
+: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;
+  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;
+  align-items: center;
+  align-self: auto;
+  padding: var(--gse-ui-treeView-item-comfy-leftAligned-padding);
+  border-radius: var(--gse-semantic-interactive-sm-borderRadius);
+}
+.gux-wrapper .gux-node .gux-tree-item:has(:focus-visible), .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: 1 1 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-icon {
+  display: flex;
+  align-items: center;
+}
+.gux-wrapper.gux-compact .gux-tree-item {
+  padding: var(--gse-ui-treeView-item-compact-leftAligned-padding);
+}
+.gux-wrapper.gux-compact.gux-end .gux-tree-item {
+  padding: var(--gse-ui-treeView-item-compact-rightAligned-padding);
+}
+.gux-wrapper.gux-end .gux-tree-item {
+  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-disabled {
+  opacity: var(--gse-ui-treeView-disableOpacity);
+  pointer-events: none;
+  cursor: default;
+}
+
+::slotted(gux-icon[slot=icon]) {
+  display: flex;
+  align-items: center;
+  inline-size: 16px;
+  block-size: 16px;
+}

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

@@ -0,0 +1,179 @@
+import { h } from "@stencil/core";
+import { getTreeSize, getTreeAlignment, hasParentDisabled } from "../gux-tree.service";
+/**
+ * @slot label - Required slot for the text
+ * @slot icon - Optional slot for an icon
+ */
+export class GuxLeaf {
+    constructor() {
+        this.selected = false;
+        this._disabled = false;
+        this.active = false;
+        this.filtered = false;
+        this.size = 'comfy';
+        this.alignment = 'start';
+    }
+    get disabled() {
+        return this._disabled || hasParentDisabled(this.root);
+    }
+    set disabled(value) {
+        this._disabled = value;
+    }
+    handleActiveChange(active) {
+        this.root.setAttribute('tabIndex', active ? '0' : '');
+        if (active) {
+            this.root.focus();
+        }
+    }
+    componentWillLoad() {
+        this.internals.role = 'treeitem';
+        this.root.setAttribute('role', 'treeitem');
+        this.root.setAttribute('tabIndex', this.active ? '0' : '');
+        this.size = getTreeSize(this.root);
+        this.alignment = getTreeAlignment(this.root);
+    }
+    componentWillRender() {
+        this.internals.ariaDisabled = String(this.disabled);
+        this.root.setAttribute('aria-disabled', String(this.disabled));
+        this.internals.ariaSelected = String(this.selected);
+        this.root.setAttribute('aria-selected', String(this.selected));
+    }
+    render() {
+        return (h("div", { key: '24f7df587743f1370eb06b93ae19c61df87bc7dc', class: {
+                'gux-wrapper': true,
+                'gux-compact': this.size === 'compact',
+                'gux-end': this.alignment === 'end',
+                'gux-disabled': this.disabled,
+                'gux-selected': this.selected
+            } }, h("div", { key: 'ee0ae38ad6c4156647c9da4feeed55b4aad09b35', class: "gux-node" }, h("div", { key: '7f09f8d288314cd961ad6b298b8f504e746af8d0', class: "gux-selected-bookmark" }), h("div", { key: 'd082ed53f3e2b6d9c938f9430aac1f977a7bd1d4', class: "gux-tree-item" }, h("div", { key: '5e381d69da4cb1a8a627b02dea21a30a61f1d502', class: "gux-selection-target" }, h("div", { key: '4be916191e5aaf855065ed767d19207ef2427a2d', class: "gux-icon" }, h("slot", { key: '9deae4002592cd444107fb882d90fc56c87883b1', name: "icon" })), h("div", { key: '52ab1087a0dfed78aebcb45cc6b8a402591d153f', class: "gux-label" }, h("slot", { key: '2f96faaa3f77d7104c99b21f2510a1ec4c524b3e', name: "label" })))))));
+    }
+    static get is() { return "gux-leaf"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-leaf.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-leaf.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "selected": {
+                "type": "boolean",
+                "attribute": "selected",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "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": false
+            },
+            "active": {
+                "type": "boolean",
+                "attribute": "active",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "filtered": {
+                "type": "boolean",
+                "attribute": "filtered",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "size": {},
+            "alignment": {}
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get watchers() {
+        return [{
+                "propName": "active",
+                "methodName": "handleActiveChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}

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

@@ -0,0 +1,13 @@
+: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);
+}

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