genesys-spark-components 4.52.1 → 4.53.0

package/dist/cjs/gux-toggle.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7fb02c8c.js');
-const usage = require('./usage-3d796ac6.js');
+const usage = require('./usage-9a93aaa0.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
 const index$1 = require('./index-a1a48d79.js');
 require('./get-closest-element-9e41d6b9.js');

package/dist/cjs/gux-tooltip-base-beta.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-7fb02c8c.js');
 const floatingUi_dom_esm = require('./floating-ui.dom.esm-f8b4cd90.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
-const usage = require('./usage-3d796ac6.js');
+const usage = require('./usage-9a93aaa0.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
 
 const guxTooltipBaseCss = ":host{position:fixed;z-index:var(--gse-semantic-zIndex-tooltip);display:none;width:max-content;max-width:250px;pointer-events:none;border-radius:var(--gse-ui-tooltip-borderRadius);box-shadow:var(--gse-ui-tooltip-boxShadow-x) var(--gse-ui-tooltip-boxShadow-y) var(--gse-ui-tooltip-boxShadow-blur) var(--gse-ui-tooltip-boxShadow-spread) var(--gse-ui-tooltip-boxShadow-color);opacity:0}:host(.gux-show){display:block;animation-name:fade-in;animation-duration:250ms;animation-delay:1s;animation-fill-mode:forwards}.gux-container{box-sizing:border-box;display:flex;flex-direction:row;gap:var(--gse-ui-tooltip-gap);place-content:center flex-start;padding:var(--gse-ui-tooltip-padding);font-family:var(--gse-ui-tooltip-text-fontFamily);font-size:var(--gse-ui-tooltip-text-fontSize);font-weight:var(--gse-ui-tooltip-text-fontWeight);line-height:var(--gse-ui-tooltip-text-lineHeight);color:var(--gse-ui-tooltip-light-foregroundColor);background-color:var(--gse-ui-tooltip-light-backgroundColor);border:var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);border-radius:var(--gse-ui-tooltip-borderRadius)}.gux-container ::slotted(gux-icon){align-self:center;width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm);color:var(--gse-ui-tooltip-light-iconColor)}.gux-container ::slotted(*){width:100%;overflow-wrap:break-word;white-space:normal}.gux-container.gux-dark{color:var(--gse-ui-tooltip-dark-foregroundColor);background-color:var(--gse-ui-tooltip-dark-backgroundColor);border-color:var(--gse-ui-tooltip-dark-border-color)}.gux-container.gux-dark ::slotted(gux-icon){align-self:center;width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm);color:var(--gse-ui-tooltip-dark-iconColor)}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}";

package/dist/cjs/gux-tooltip-beta.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7fb02c8c.js');
-const usage = require('./usage-3d796ac6.js');
+const usage = require('./usage-9a93aaa0.js');
 const findElementById = require('./find-element-by-id-fde17c92.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
 

package/dist/cjs/gux-tooltip.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-7fb02c8c.js');
 const floatingUi_dom_esm = require('./floating-ui.dom.esm-f8b4cd90.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
-const usage = require('./usage-3d796ac6.js');
+const usage = require('./usage-9a93aaa0.js');
 const findElementById = require('./find-element-by-id-fde17c92.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
 

package/dist/cjs/{usage-3d796ac6.js → usage-9a93aaa0.js}

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

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-dropdown/tests/gux-form-field-dropdown.spec.js

@@ -16,7 +16,7 @@ const components = [
     GuxOptionMulti
 ];
 const language = 'en';
-describe('gux-form-field-select', () => {
+describe('gux-form-field-dropdown', () => {
     describe('single select dropdown', () => {
         it('should build', async () => {
             const html = `

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

@@ -98,6 +98,7 @@
   align-self: auto;
   order: 0;
   width: 100%;
+  padding-bottom: 0;
   overflow: hidden;
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
   text-align: right;
@@ -148,9 +149,6 @@
 .gux-input-and-error-container .gux-input .gux-input-container.gux-disabled {
   opacity: var(--gse-ui-formControl-input-disabled-opacity);
 }
-.gux-input-and-error-container .gux-input .gux-input-container.gux-clear {
-  padding-right: 0;
-}
 .gux-input-and-error-container .gux-input .gux-input-container:focus-within {
   border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
   border-radius: var(--gse-ui-formControl-focusRing-borderRadius);

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-phone/tests/gux-form-field-phone.e2e.js

@@ -0,0 +1,82 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { newSparkE2EPage, a11yCheck } from "../../../../../../test/e2eTestUtils";
+const axeExclusions = [];
+async function newNonrandomE2EPage({ html }) {
+    const page = await newE2EPage();
+    await page.evaluateOnNewDocument(() => {
+        Math.random = () => 0.5;
+    });
+    await page.setContent(html);
+    await page.waitForChanges();
+    return page;
+}
+describe('gux-form-field-phone', () => {
+    describe('#render', () => {
+        describe('label-position', () => {
+            [
+                '',
+                'label-position="above"',
+                'label-position="beside"',
+                'label-position="screenreader"'
+            ].forEach((componentAttribute, index) => {
+                const html = `
+          <gux-form-field-phone lang="en" ${componentAttribute}>
+            <gux-phone-input-beta></gux-phone-input-beta>
+            <label slot="label">Label</label>
+          </gux-form-field-phone>
+        `;
+                it(`should render component as expected (${index + 1})`, async () => {
+                    const page = await newNonrandomE2EPage({ html });
+                    const element = await page.find('gux-form-field-phone');
+                    const elementShadowDom = await element.find('pierce/.gux-form-field-container');
+                    expect(element.outerHTML).toMatchSnapshot();
+                    expect(elementShadowDom).toMatchSnapshot();
+                });
+                it(`should be accessible (${index + 1})`, async () => {
+                    const page = await newSparkE2EPage({ html });
+                    await a11yCheck(page, axeExclusions);
+                });
+            });
+        });
+        describe('help', () => {
+            const html = `
+      <gux-form-field-phone>
+        <gux-phone-input-beta></gux-phone-input-beta>
+        <label slot="label">Default</label>
+        <span slot="help">This is a help message</span>
+      </gux-form-field-phone>
+      `;
+            it('should render component as expected', async () => {
+                const page = await newNonrandomE2EPage({ html });
+                const element = await page.find('gux-form-field-phone');
+                const elementShadowDom = await element.find('pierce/.gux-form-field-container');
+                expect(element.outerHTML).toMatchSnapshot();
+                expect(elementShadowDom).toMatchSnapshot();
+            });
+            it('should be accessible', async () => {
+                const page = await newSparkE2EPage({ html });
+                await a11yCheck(page, axeExclusions);
+            });
+        });
+        describe('error', () => {
+            const html = `
+      <gux-form-field-phone>
+        <gux-phone-input-beta></gux-phone-input-beta>
+        <label slot="label">Default</label>
+        <span slot="error">Custom Error Message</span>
+      </gux-form-field-phone>
+      `;
+            it('should render component as expected', async () => {
+                const page = await newNonrandomE2EPage({ html });
+                const element = await page.find('gux-form-field-phone');
+                const elementShadowDom = await element.find('pierce/.gux-form-field-container');
+                expect(element.outerHTML).toMatchSnapshot();
+                expect(elementShadowDom).toMatchSnapshot();
+            });
+            it('should be accessible', async () => {
+                const page = await newSparkE2EPage({ html });
+                await a11yCheck(page, axeExclusions);
+            });
+        });
+    });
+});

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-phone/tests/gux-form-field-phone.spec.js

@@ -0,0 +1,63 @@
+import { newSpecPage } from "../../../../../../test/specTestUtils";
+import { GuxFormFieldPhone } from "../gux-form-field-phone";
+const components = [GuxFormFieldPhone];
+const language = 'en';
+describe('gux-form-field-phone', () => {
+    it('should build', async () => {
+        const html = `
+      <gux-form-field-phone>
+        <gux-phone-input-beta></gux-phone-input-beta>
+        <label slot="label">Label</label>
+      </gux-form-field-phone>
+    `;
+        const page = await newSpecPage({ components, html, language });
+        expect(page.rootInstance).toBeInstanceOf(GuxFormFieldPhone);
+    });
+    describe('#render', () => {
+        describe('label-position', () => {
+            [
+                '',
+                'label-position="above"',
+                'label-position="beside"',
+                'label-position="screenreader"'
+            ].forEach((componentAttribute, index) => {
+                it(`should render component as expected (${index + 1})`, async () => {
+                    const html = `
+            <gux-form-field-phone ${componentAttribute}>
+              <gux-phone-input-beta></gux-phone-input-beta>
+              <label slot="label">Label</label>
+            </gux-form-field-phone>
+          `;
+                    const page = await newSpecPage({ components, html, language });
+                    expect(page.root).toMatchSnapshot();
+                });
+            });
+        });
+        describe('error', () => {
+            it('should render component as expected', async () => {
+                const html = `
+        <gux-form-field-phone>
+          <gux-phone-input-beta></gux-phone-input-beta>
+          <label slot="label">Default</label>
+          <span slot="error">Custom Error Message</span>
+        </gux-form-field-phone>
+        `;
+                const page = await newSpecPage({ components, html, language });
+                expect(page.root).toMatchSnapshot();
+            });
+        });
+        describe('help', () => {
+            it('should render component as expected', async () => {
+                const html = `
+        <gux-form-field-phone>
+          <gux-phone-input-beta></gux-phone-input-beta>
+          <label slot="label">Default</label>
+          <span slot="help">Custom Help Message</span>
+        </gux-form-field-phone>
+        `;
+                const page = await newSpecPage({ components, html, language });
+                expect(page.root).toMatchSnapshot();
+            });
+        });
+    });
+});

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

@@ -117,7 +117,7 @@ export class GuxFormField {
         return (h("div", { class: {
                 'gux-range-input-container': true,
                 'gux-disabled': this.disabled
-            }, ref: el => (this.containerElement = el) }, h("div", { class: "gux-range" }, h("div", { class: "gux-track" }, h("div", { class: "gux-progress", ref: el => (this.progressElement = el) })), h("slot", { name: "input" }), this.valueInTooltip && (h("gux-tooltip-base-beta", { ref: el => (this.tooltipElement = el), forElement: this.containerElement, offsetY: -10, placement: "top" }, this.getDisplayValue()))), h("div", { class: {
+            }, ref: el => (this.containerElement = el) }, h("div", { class: "gux-range" }, h("div", { class: "gux-track" }, h("div", { class: "gux-progress", ref: el => (this.progressElement = el) })), h("slot", { name: "input" }), this.valueInTooltip && (h("gux-tooltip-base-beta", { ref: el => (this.tooltipElement = el), forElement: this.containerElement, offsetY: -10, placement: "top" }, h("span", { slot: "content" }, this.getDisplayValue())))), h("div", { class: {
                 'gux-display': true,
                 'gux-hidden': this.valueInTooltip
             } }, this.getDisplayValue())));