genesys-spark-components 4.58.0 → 4.59.0

package/dist/cjs/{usage-28b13cde.js → usage-e56cf78b.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const name = "genesys-spark-components";
-const version = "4.58.0";
+const version = "4.59.0";
 const description = "Common webcomponents";
 const license = "MIT";
 const main = "dist/stencil-wrapper.js";

package/dist/collection/collection-manifest.json

@@ -78,6 +78,7 @@
     "components/stable/gux-form-field/components/gux-form-field-number/gux-form-field-number.js",
     "components/stable/gux-form-field/components/gux-form-field-phone/gux-form-field-phone.js",
     "components/stable/gux-form-field/components/gux-form-field-radio/gux-form-field-radio.js",
+    "components/stable/gux-form-field/components/gux-form-field-radio-group/gux-form-field-radio-group.js",
     "components/stable/gux-form-field/components/gux-form-field-range/gux-form-field-range.js",
     "components/stable/gux-form-field/components/gux-form-field-search/gux-form-field-search.js",
     "components/stable/gux-form-field/components/gux-form-field-select/gux-form-field-select.js",

package/dist/collection/components/beta/gux-tooltip-beta/tests/gux-tooltip.e2e.js

@@ -6,7 +6,7 @@ describe('gux-tooltip-beta', () => {
         <div id="element" lang="en">
           <div>Element</div>
           <gux-tooltip-beta>
-            <div slot="content">Tooltip</div>
+            <span slot="content">Tooltip</span>
           </gux-tooltip-beta>
         </div>
       `,

package/dist/collection/components/beta/gux-tooltip-beta/tests/gux-tooltip.spec.js

@@ -14,7 +14,7 @@ describe('gux-tooltip-beta', () => {
         <div>
           <div>Element</div>
           <gux-tooltip-beta>
-            <div slot="content">Tooltip</div>
+            <span slot="content">Tooltip</span>
           </gux-tooltip-beta>
         </div>
       `,
@@ -39,7 +39,7 @@ describe('gux-tooltip-beta', () => {
         <div>
           <div>Element</div>
           <gux-tooltip-beta>
-            <div slot="content">Tooltip</div>
+            <span slot="content">Tooltip</span>
           </gux-tooltip-beta>
         </div>
       `,

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-checkbox/gux-form-field-checkbox.css

@@ -3,6 +3,7 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-helper-gap);
   place-content: stretch flex-start;
   align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
@@ -16,11 +17,10 @@
 }
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
-  align-self: auto;
+  align-self: start;
   order: 0;
   min-width: var(--gse-ui-icon-size-sm);
   min-height: var(--gse-ui-icon-size-sm);
-  margin-right: var(--gse-ui-formControl-helper-gap);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-color/gux-form-field-color.css

@@ -10,6 +10,7 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-helper-gap);
   place-content: stretch flex-start;
   align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
@@ -23,11 +24,10 @@
 }
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
-  align-self: auto;
+  align-self: start;
   order: 0;
   min-width: var(--gse-ui-icon-size-sm);
   min-height: var(--gse-ui-icon-size-sm);
-  margin-right: var(--gse-ui-formControl-helper-gap);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-dropdown/gux-form-field-dropdown.css

@@ -19,6 +19,7 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-helper-gap);
   place-content: stretch flex-start;
   align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
@@ -32,11 +33,10 @@
 }
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
-  align-self: auto;
+  align-self: start;
   order: 0;
   min-width: var(--gse-ui-icon-size-sm);
   min-height: var(--gse-ui-icon-size-sm);
-  margin-right: var(--gse-ui-formControl-helper-gap);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-number/gux-form-field-number.css

@@ -10,6 +10,7 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-helper-gap);
   place-content: stretch flex-start;
   align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
@@ -23,11 +24,10 @@
 }
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
-  align-self: auto;
+  align-self: start;
   order: 0;
   min-width: var(--gse-ui-icon-size-sm);
   min-height: var(--gse-ui-icon-size-sm);
-  margin-right: var(--gse-ui-formControl-helper-gap);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-phone/gux-form-field-phone.css

@@ -19,6 +19,7 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-helper-gap);
   place-content: stretch flex-start;
   align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
@@ -32,11 +33,10 @@
 }
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
-  align-self: auto;
+  align-self: start;
   order: 0;
   min-width: var(--gse-ui-icon-size-sm);
   min-height: var(--gse-ui-icon-size-sm);
-  margin-right: var(--gse-ui-formControl-helper-gap);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-radio/gux-form-field-radio.css

@@ -24,6 +24,7 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-helper-gap);
   place-content: stretch flex-start;
   align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
@@ -37,11 +38,10 @@
 }
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
-  align-self: auto;
+  align-self: start;
   order: 0;
   min-width: var(--gse-ui-icon-size-sm);
   min-height: var(--gse-ui-icon-size-sm);
-  margin-right: var(--gse-ui-formControl-helper-gap);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-radio/gux-form-field-radio.js

@@ -26,8 +26,10 @@ import { trackComponent } from "../../../../../utils/tracking/usage";
 export class GuxFormFieldRadio {
     constructor() {
         this.disabled = undefined;
-        this.hasError = false;
         this.hasHelp = false;
+        this.hasError = false;
+        this.hasGroupError = false;
+        this.hasGroupDisabled = false;
     }
     onMutation() {
         this.hasError = hasSlot(this.root, 'error');
@@ -45,13 +47,16 @@ export class GuxFormFieldRadio {
         }
     }
     render() {
-        return (h(Host, { key: 'd2daead3becf9dfc99d48fd75b4184a0f17a575d', class: {
-                'gux-input-error': this.hasError,
+        return (h(Host, { key: 'b335309d70bc8ab06267c50f4c623ca519238199', class: {
+                'gux-input-error': this.hasError || this.hasGroupError,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '836a7e83f8f954e4f175979720da3c069c90c66a', class: "gux-form-field-container" }, h("div", { key: '6d8ae39bf560ebcda1998ced209624d5509e6e8e', class: "gux-input-label" }, h("div", { key: '7ed914a1e4c76eaf90f0d49c445b0ede8412a727', class: "gux-input" }, h("slot", { key: '2117ece053b32ad43fbf7aadf343acd1f583b91e', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: 'ac2008218c656bb24828cb465b0e4ecaafb93899', class: "gux-label", "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '8f95b8edbcb04cb2635c29b07ad67c6c46159ccd', name: "label" }), h(GuxFormFieldError, { key: 'f613802f6316ff517f24b39a2123afde96b403ed', show: this.hasError }, h("slot", { key: '4947bb510a3423a3e5922ee65f3a3d9ba2c256e5', name: "error" })), h(GuxFormFieldHelp, { key: '6f661b21afb70d1b80cd13c0119016c49a35aa5b', show: !this.hasError && this.hasHelp }, h("slot", { key: '6020ad3b02091f2c485328945be9e87dd2bf435a', name: "help" })))))));
+            } }, h("div", { key: '97e99ea3fa5d83000ea819cd1713800f4a96e4f9', class: "gux-form-field-container" }, h("div", { key: '15a44ed431873990b2aa9209979b6dd2951ba042', class: "gux-input-label" }, h("div", { key: 'e9e37654772a1b0e365903bdf7f5eab42b620c8e', class: "gux-input" }, h("slot", { key: '6ea9b85433af15c9f0a527fcff3460f529322507', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: '7b10f8f0a65b77d793fb7ff14ccaae564340e394', class: "gux-label", "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '5794f7de875016c01c815f6a54a851d1df6e3e34', name: "label" }), h(GuxFormFieldError, { key: '35f92edfc585f98332726aefcde59f5a48dab422', show: this.hasError }, h("slot", { key: '857177e5d2dc47933e268e0e63cbb2a83def05e2', name: "error" })), h(GuxFormFieldHelp, { key: '41e71c3fb43f56bb8bff20476e690a342c0a02f5', show: !this.hasError && this.hasHelp }, h("slot", { key: '044b3a68741d85c3bcab3ab247257fc551fc9bf4', name: "help" })))))));
     }
     setInput() {
         this.input = getSlottedInput(this.root, 'input[type="radio"][slot="input"]');
+        if (this.hasGroupDisabled) {
+            this.input.disabled = true;
+        }
         preventBrowserValidationStyling(this.input);
         this.disabled = calculateInputDisabledState(this.input);
         this.disabledObserver = onInputDisabledStateChange(this.input, (disabled) => {
@@ -71,11 +76,51 @@ export class GuxFormFieldRadio {
             "$": ["gux-form-field-radio.css"]
         };
     }
+    static get properties() {
+        return {
+            "hasGroupError": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "has-group-error",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hasGroupDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "has-group-disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
     static get states() {
         return {
             "disabled": {},
-            "hasError": {},
-            "hasHelp": {}
+            "hasHelp": {},
+            "hasError": {}
         };
     }
     static get elementRef() { return "root"; }

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-radio-group/gux-form-field-radio-group.css

@@ -0,0 +1,163 @@
+/* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */
+.gux-form-field-fieldset-container {
+  display: flex;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+.gux-form-field-fieldset-container.gux-beside {
+  flex-direction: row;
+}
+.gux-form-field-fieldset-container.gux-above {
+  flex-direction: column;
+}
+
+.gux-form-field-error {
+  display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-helper-gap);
+  place-content: stretch flex-start;
+  align-items: center;
+  padding: var(--gse-ui-formControl-helper-errorPadding);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-errorColor);
+}
+.gux-form-field-error.gux-show {
+  display: flex;
+}
+.gux-form-field-error gux-icon {
+  flex: 0 1 auto;
+  align-self: start;
+  order: 0;
+  min-width: var(--gse-ui-icon-size-sm);
+  min-height: var(--gse-ui-icon-size-sm);
+  color: var(--gse-ui-formControl-helper-errorColor);
+}
+.gux-form-field-error .gux-message {
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
+}
+
+.gux-form-field-legend-label ::slotted(label) {
+  white-space: nowrap;
+}
+.gux-form-field-legend-label.gux-required::after {
+  color: var(--gse-ui-formControl-label-indicator-requiredColor);
+  content: " *";
+}
+.gux-form-field-legend-label.gux-beside {
+  position: relative;
+  top: var(--gse-ui-formControl-input-top);
+  float: left;
+  width: fit-content;
+  min-width: 45px;
+  margin-right: var(--gse-ui-formControl-label-gap);
+}
+.gux-form-field-legend-label.gux-above {
+  padding: var(--gse-ui-formControl-label-padding);
+}
+.gux-form-field-legend-label.gux-screenreader {
+  position: absolute;
+  top: auto;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.gux-form-field-help {
+  display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  place-content: stretch flex-start;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: var(--gse-ui-formControl-helper-paddingSmall);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-defaultColor);
+}
+.gux-form-field-help.gux-show {
+  display: flex;
+}
+.gux-form-field-help .gux-message {
+  flex: 0 1 auto;
+  align-self: none;
+  order: 0;
+}
+
+.gux-form-field-error {
+  display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-helper-gap);
+  place-content: stretch flex-start;
+  align-items: center;
+  padding: var(--gse-ui-formControl-helper-errorPadding);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-errorColor);
+}
+.gux-form-field-error.gux-show {
+  display: flex;
+}
+.gux-form-field-error gux-icon {
+  flex: 0 1 auto;
+  align-self: start;
+  order: 0;
+  min-width: var(--gse-ui-icon-size-sm);
+  min-height: var(--gse-ui-icon-size-sm);
+  color: var(--gse-ui-formControl-helper-errorColor);
+}
+.gux-form-field-error .gux-message {
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
+}
+
+.gux-form-field-help {
+  display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  place-content: stretch flex-start;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: var(--gse-ui-formControl-helper-paddingSmall);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-defaultColor);
+}
+.gux-form-field-help.gux-show {
+  display: flex;
+}
+.gux-form-field-help .gux-message {
+  flex: 0 1 auto;
+  align-self: none;
+  order: 0;
+}
+
+:host {
+  display: block;
+}
+
+:host([disabled]) .gux-form-field-legend-label {
+  opacity: var(--gse-ui-formControl-input-disabled-opacity);
+}
+
+.gux-form-field-legend-label {
+  font-family: var(--gse-ui-formControl-label-text-fontFamily);
+  font-size: var(--gse-ui-formControl-label-text-fontSize);
+  font-weight: var(--gse-ui-formControl-label-text-fontWeight);
+  line-height: var(--gse-ui-formControl-label-text-lineHeight);
+  color: var(--gse-ui-formControl-label-labelColor);
+}

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-radio-group/gux-form-field-radio-group.js

@@ -0,0 +1,128 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h } from "@stencil/core";
+import { OnMutation } from "../../../../../utils/decorator/on-mutation";
+import { hasSlot } from "../../../../../utils/dom/has-slot";
+import { GuxFormFieldError, GuxFormFieldHelp, GuxFormFieldLegendLabel, GuxFormFieldFieldsetContainer } from "../../functional-components/functional-components";
+import { getSlotTextContent } from "../../../../../utils/dom/get-slot-text-content";
+import { trackComponent } from "../../../../../utils/tracking/usage";
+/**
+ * @slot group-label - Required slot for label tag
+ * @slot group-error - Optional slot for error message
+ * @slot group-help - Optional slot for help message
+ */
+export class GuxFormFieldRadioGroupBeta {
+    constructor() {
+        this.hasGroupError = false;
+        this.hasGroupHelp = false;
+        this.disabled = false;
+    }
+    watchGroupError(hasGroupError) {
+        const radioSlots = this.root.querySelectorAll('gux-form-field-radio');
+        if (radioSlots) {
+            radioSlots.forEach(item => {
+                item.hasGroupError = hasGroupError;
+            });
+        }
+    }
+    watchDisabled() {
+        this.setDisabledRadio();
+    }
+    onMutation() {
+        this.hasGroupError = hasSlot(this.root, 'group-error');
+        this.hasGroupHelp = hasSlot(this.root, 'group-help');
+    }
+    componentWillLoad() {
+        this.hasGroupError = hasSlot(this.root, 'group-error');
+        this.hasGroupHelp = hasSlot(this.root, 'group-help');
+        this.setLabel();
+        this.setDisabledRadio();
+        trackComponent(this.root);
+    }
+    disconnectedCallback() {
+        if (this.disabledObserver) {
+            this.disabledObserver.disconnect();
+        }
+    }
+    setDisabledRadio() {
+        const radioSlots = this.root.querySelectorAll('gux-form-field-radio');
+        if (radioSlots) {
+            radioSlots.forEach(item => {
+                item.hasGroupDisabled = this.disabled;
+            });
+        }
+    }
+    renderScreenReaderText(text, condition = false) {
+        if (condition) {
+            return (h("gux-screen-reader-beta", null, text));
+        }
+    }
+    render() {
+        var _a;
+        return (h(GuxFormFieldFieldsetContainer, { key: 'a343c90310cf28500ed7af2a5d3a825f3be74b4f', labelPosition: "above" }, h(GuxFormFieldLegendLabel, { key: 'a9256282d2effa1a337bbd59c96cbe066a390af7', position: "above", required: false, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: 'c08396feebf1cde91f19b6d8bc5b399976301c45', name: "group-label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderScreenReaderText(getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp)), h("slot", { key: '20d0194275ab1a61b042169b344210bc0f816930' }), h(GuxFormFieldError, { key: '9e9e3a9607c3762e1c937bbe9e02f659b53a93f1', show: this.hasGroupError }, h("slot", { key: 'd43287ea4f5b354ac51b791b693cd8806552595b', name: "group-error" })), h(GuxFormFieldHelp, { key: '382f3c667023926fa717b3c4371234249759906d', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: '69c18b00b4290b1c2ec478ba066e9a2894d18d1e', name: "group-help" }))));
+    }
+    setLabel() {
+        this.label = this.root.querySelector('label[slot="label"]');
+    }
+    static get is() { return "gux-form-field-radio-group-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-form-field-radio-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-form-field-radio-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the radio buttons in the group."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasGroupError": {},
+            "hasGroupHelp": {}
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get watchers() {
+        return [{
+                "propName": "hasGroupError",
+                "methodName": "watchGroupError"
+            }, {
+                "propName": "disabled",
+                "methodName": "watchDisabled"
+            }];
+    }
+}
+__decorate([
+    OnMutation({ childList: true, subtree: true })
+], GuxFormFieldRadioGroupBeta.prototype, "onMutation", null);