genesys-spark-components 4.185.4 → 4.186.0

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

@@ -0,0 +1,236 @@
+import { h } from "@stencil/core";
+import { randomHTMLId } from "../../../../utils/dom/random-html-";
+import { getTreeSize, getTreeAlignment, hasChildSelected, hasParentDisabled } from "../gux-tree-multi.service";
+/**
+ * @slot label - Required slot for the branch text
+ * @slot icon - Optional slot for the icon
+ */
+export class GuxBranchMulti {
+    constructor() {
+        this.expanded = false;
+        this._disabled = false;
+        this.filtered = false;
+        this.active = false;
+        this.selected = false;
+        this.indeterminate = 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.labelId = randomHTMLId('gux-branch-label');
+        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: '33af54e7beaa31958080ad6f3370cbed53989774', 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: '2966f26c4a1b46f4a29f9a7c3ae5a626971795fe', class: "gux-node" }, h("div", { key: 'b5de3c189e2adb7edb0b67591a09cd5a80398080', class: "gux-selected-bookmark" }), h("div", { key: '3660189eb276f6101a60c84c749b304893cca77b', class: "gux-tree-item" }, this.renderBranchIndicator('start'), h("div", { key: 'bd278808b47889e3c569438fe1edd2ec382ae722', class: "gux-selection-target" }, h("div", { key: '339b1e434db480a7bd9196248628ee96990df5f6', class: "gux-checkbox-container" }, h("input", { key: 'e4158932f3bd68f24b02bf5f13aefc6492e8fd16', type: "checkbox", tabIndex: -1, checked: this.selected, disabled: this.disabled, "aria-labelledby": this.labelId, ref: el => {
+                if (el) {
+                    el.indeterminate = this.indeterminate;
+                }
+            } })), h("div", { key: '1dac97a5f7d691e1366c1002523c23a523e7c6d3', class: "gux-icon" }, h("slot", { key: '6e9ae563a183ef94d52fa07b98b741b00453fbd7', name: "icon" })), h("div", { key: '014dec453ecaed7c34b78a3d325f9090c7c1ee47', class: "gux-label", id: this.labelId }, h("slot", { key: 'a73ed670d8e0bab2a92aa4c1ef5f03e152baca7b', name: "label" }))), this.renderBranchIndicator('end'))), h("div", { key: 'd8502c699dd9f834ae9ef326d2de973bda52f0cd', role: "group", class: "gux-treeitems" }, h("slot", { key: '50d35cbb506d71cece65d5d42e01e6c20873ef7a' }))));
+    }
+    static get is() { return "gux-branch-multi"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-branch-multi.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-branch-multi.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"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "attribute": "indeterminate",
+                "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-multi/gux-leaf-multi/gux-leaf-multi.css

@@ -0,0 +1,100 @@
+: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: 0 0 auto;
+  gap: var(--gse-semantic-interactive-lg-gap);
+  align-items: center;
+  align-self: auto;
+  padding-inline-start: 8px;
+}
+.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-item-compact-leftAligned-padding);
+}
+.gux-wrapper.gux-compact .gux-tree-item .gux-selection-target {
+  padding-inline-start: 4px;
+}
+.gux-wrapper.gux-compact.gux-end .gux-tree-item {
+  padding: var(--gse-ui-treeView-item-compact-rightAligned-padding);
+}
+.gux-wrapper.gux-compact.gux-end .gux-tree-item .gux-selection-target {
+  padding-inline-start: 0;
+}
+.gux-wrapper.gux-end .gux-tree-item {
+  padding: var(--gse-ui-treeView-item-comfy-rightAligned-padding);
+}
+.gux-wrapper.gux-end .gux-tree-item .gux-selection-target {
+  padding-inline-start: 0;
+}
+.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-multi/gux-leaf-multi/gux-leaf-multi.js

@@ -0,0 +1,181 @@
+import { h } from "@stencil/core";
+import { randomHTMLId } from "../../../../utils/dom/random-html-";
+import { getTreeSize, getTreeAlignment, hasParentDisabled } from "../gux-tree-multi.service";
+/**
+ * @slot label - Required slot for the text
+ * @slot icon - Optional slot for an icon
+ */
+export class GuxLeafMulti {
+    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.labelId = randomHTMLId('gux-leaf-label');
+        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: 'b695b25028c40a5332b8c8a4153e4431ffd71c5f', 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: '17b1cdba8590e16ef05fdaba718a2ea3df82010c', class: "gux-node" }, h("div", { key: 'f30b5f94dd474df8a3965237f4567a1fc41e22f1', class: "gux-selected-bookmark" }), h("div", { key: '1b444d520ba1689c7930f70ad725671e977a99d9', class: "gux-tree-item" }, h("div", { key: '125c9722458a9de9f846fc246225b82ec05c490f', class: "gux-selection-target" }, h("div", { key: 'd0f2b2b84a129f67fa7125725b92d2250ef91753', class: "gux-checkbox-container" }, h("input", { key: '57fea7519939e6a5a14c86121e1f682e5539a16d', tabIndex: -1, type: "checkbox", checked: this.selected, disabled: this.disabled, "aria-labelledby": this.labelId })), h("div", { key: '1959af1d9eef9c9848ceb9b1a78afaa15a9d1342', class: "gux-icon" }, h("slot", { key: 'db2364e938e79a74bf7c39c68ff6f9bcc8b51e7a', name: "icon" })), h("div", { key: 'ab1aff2e8ee493a2a2008123c899a515f4b8b56b', class: "gux-label", id: this.labelId }, h("slot", { key: 'b7651313d0d08a25d7e23f03edcde4c21312edd1', name: "label" })))))));
+    }
+    static get is() { return "gux-leaf-multi"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-leaf-multi.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-leaf-multi.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-multi/gux-tree-multi.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);
+}