genesys-spark-components 4.185.3 → 4.186.0

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

@@ -0,0 +1,209 @@
+import { h } from "@stencil/core";
+import { getTreeSize, getTreeAlignment, hasChildSelected, hasParentDisabled } from "../gux-tree.service";
+/**
+ * @slot label - Required slot for the branch text
+ * @slot icon - Optional slot for the icon
+ */
+export class GuxBranch {
+    constructor() {
+        this.expanded = false;
+        this._disabled = false;
+        this.filtered = false;
+        this.active = false;
+        this.selected = 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));
+        this.internals.ariaExpanded = String(this.expanded);
+        this.root.setAttribute('aria-expanded', String(this.expanded));
+    }
+    renderBranchIndicator(alignment) {
+        if (this.alignment === alignment) {
+            return (h("div", { class: "gux-branch-indicator" }, h("gux-icon", { class: "gux-arrow-icon", decorative: true, "icon-name": "fa/caret-right-solid" })));
+        }
+    }
+    render() {
+        return (h("div", { key: '5930096f60c13b5c0f3969cfb2b33b7d280c51ab', class: {
+                'gux-wrapper': true,
+                'gux-compact': this.size === 'compact',
+                'gux-end': this.alignment === 'end',
+                'gux-expanded': this.expanded,
+                'gux-disabled': this.disabled,
+                'gux-selected': this.selected,
+                'gux-child-selected': hasChildSelected(this.root)
+            } }, h("div", { key: 'fd696f27e3768e392887216ea532d30ef7584ebe', class: "gux-node" }, h("div", { key: 'd205b90bd7b7ced36ff7c88d47773a7acac2bbff', class: "gux-selected-bookmark" }), h("div", { key: '8e2bed756f765e664fd066e6806754de8304ec06', class: "gux-tree-item" }, this.renderBranchIndicator('start'), h("div", { key: 'e55cae0ee1a18e7fb48e5bf6716486a99a99f94a', class: "gux-selection-target" }, h("div", { key: '979caece7d537dcf83526bf3b964c26a616fc4d5', class: "gux-icon" }, h("slot", { key: 'a2fcc15293a02904a49a189756664a188ddd8e0b', name: "icon" })), h("div", { key: 'fe7d0003299e263b5fb653384ee6514bf2c02455', class: "gux-label" }, h("slot", { key: 'a554537a452e5db64a5832f2dc87928d376388e0', name: "label" }))), this.renderBranchIndicator('end'))), h("div", { key: '01efd44b1db1580a33ea3beca2bff55945231b09', role: "group", class: "gux-treeitems" }, h("slot", { key: 'a0beb615024c99f290095a009876281030e70a41' }))));
+    }
+    static get is() { return "gux-branch"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-branch.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-branch.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
+            },
+            "expanded": {
+                "type": "boolean",
+                "attribute": "expanded",
+                "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
+            },
+            "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"
+            },
+            "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"
+            },
+            "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"
+            }
+        };
+    }
+    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-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);
+}