genesys-spark-components 4.157.6 → 4.159.0

package/dist/collection/components/beta/gux-phone-input/tests/gux-phone-input.common.js

@@ -0,0 +1,28 @@
+export const renderConfigs = [
+    {
+        description: 'should render phone-input',
+        html: `
+        <gux-phone-input-beta></gux-phone-input-beta>
+        `
+    },
+    {
+        description: 'should render with default region',
+        html: `<gux-phone-input-beta default-region="US"></gux-phone-input-beta>`
+    },
+    {
+        description: 'should render with value',
+        html: `<gux-phone-input-beta value="+13175971660"></gux-phone-input-beta>`
+    },
+    {
+        description: 'should render with e164 format',
+        html: `<gux-phone-input-beta phone-number-format="E164"></gux-phone-input-beta>`
+    },
+    {
+        description: 'should render with international format',
+        html: `<gux-phone-input-beta phone-number-format="INTERNATIONAL"></gux-phone-input-beta>`
+    },
+    {
+        description: 'should render with toll-free type',
+        html: `<gux-phone-input-beta phone-number-type="TOLL_FREE"></gux-phone-input-beta>`
+    }
+];

package/dist/collection/components/beta/gux-popover-list-beta/tests/gux-popover-list.common.js

@@ -0,0 +1,16 @@
+export const renderConfig = {
+    description: 'renders',
+    html: `
+        <div lang="en">
+        <div id="popover-target">
+          Example Element
+        </div>
+        <gux-popover-list-beta position="top" for="popover-target" is-open>
+          <gux-list>
+            <gux-list-item>Item 1</gux-list-item>
+            <gux-list-item>Item 2</gux-list-item>
+            <gux-list-item>Item 3</gux-list-item>
+          </gux-list>
+        </gux-popover-list-beta>
+      </div>`
+};

package/dist/collection/components/beta/gux-segmented-control/tests/gux-segmented-control.common.js

@@ -0,0 +1,95 @@
+export const renderConfigs = [
+    {
+        description: 'Should render basic segmented control',
+        html: `<gux-segmented-control-beta>
+      <gux-segmented-control-item value="option1">
+        <span slot="text">Option 1</span>
+      </gux-segmented-control-item>
+      <gux-segmented-control-item value="option2">
+        <span slot="text">Option 2</span>
+      </gux-segmented-control-item>
+      <gux-segmented-control-item value="option3">
+        <span slot="text">Option 3</span>
+      </gux-segmented-control-item>
+    </gux-segmented-control-beta>`
+    },
+    {
+        description: 'Should render with selected value',
+        html: `<gux-segmented-control-beta value="option2">
+      <gux-segmented-control-item value="option1">
+        <span slot="text">Option 1</span>
+      </gux-segmented-control-item>
+      <gux-segmented-control-item value="option2">
+        <span slot="text">Option 2</span>
+      </gux-segmented-control-item>
+      <gux-segmented-control-item value="option3">
+        <span slot="text">Option 3</span>
+      </gux-segmented-control-item>
+    </gux-segmented-control-beta>`
+    },
+    {
+        description: 'Should render disabled segmented control',
+        html: `<gux-segmented-control-beta disabled>
+      <gux-segmented-control-item value="option1">
+        <span slot="text">Option 1</span>
+      </gux-segmented-control-item>
+      <gux-segmented-control-item value="option2">
+        <span slot="text">Option 2</span>
+      </gux-segmented-control-item>
+      <gux-segmented-control-item value="option3">
+        <span slot="text">Option 3</span>
+      </gux-segmented-control-item>
+    </gux-segmented-control-beta>`
+    },
+    {
+        description: 'Should render with icons',
+        html: `<gux-segmented-control-beta>
+      <gux-segmented-control-item value="home">
+        <gux-icon slot="icon" icon-name="home" decorative></gux-icon>
+        <span slot="text">Home</span>
+      </gux-segmented-control-item>
+      <gux-segmented-control-item value="settings">
+        <gux-icon slot="icon" icon-name="settings" decorative></gux-icon>
+        <span slot="text">Settings</span>
+      </gux-segmented-control-item>
+      <gux-segmented-control-item value="profile">
+        <gux-icon slot="icon" icon-name="user" decorative></gux-icon>
+        <span slot="text">Profile</span>
+      </gux-segmented-control-item>
+    </gux-segmented-control-beta>`
+    },
+    {
+        description: 'Should render icon-only items',
+        html: `<gux-segmented-control-beta>
+      <gux-segmented-control-item value="home" icon-only>
+        <gux-icon slot="icon" icon-name="home" decorative></gux-icon>
+        <span slot="text">Home</span>
+      </gux-segmented-control-item>
+    </gux-segmented-control-beta>`
+    },
+    {
+        description: 'Should render with individual disabled items',
+        html: `<gux-segmented-control-beta>
+      <gux-segmented-control-item value="option1">
+        <span slot="text">Option 1</span>
+      </gux-segmented-control-item>
+      <gux-segmented-control-item value="option2" disabled>
+        <span slot="text">Option 2</span>
+      </gux-segmented-control-item>
+      <gux-segmented-control-item value="option3">
+        <span slot="text">Option 3</span>
+      </gux-segmented-control-item>
+    </gux-segmented-control-beta>`
+    },
+    {
+        description: 'Should render with two items',
+        html: `<gux-segmented-control-beta value="left">
+      <gux-segmented-control-item value="left">
+        <span slot="text">Left</span>
+      </gux-segmented-control-item>
+      <gux-segmented-control-item value="right">
+        <span slot="text">Right</span>
+      </gux-segmented-control-item>
+    </gux-segmented-control-beta>`
+    }
+];

package/dist/collection/components/beta/gux-selector-cards/tests/gux-selector-cards.common.js

@@ -0,0 +1,189 @@
+export const renderConfigs = [
+    {
+        description: 'renders simple radio selector cards',
+        html: `
+      <gux-selector-cards-beta>
+        <gux-selector-card-beta variant="simple">
+          <label slot="label" for="first">First</label>
+          <input slot="input" id="first" type="radio" name="example1" />
+          <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="simple">
+          <label slot="label" for="second">Second</label>
+          <input slot="input" id="second" type="radio" name="example1" />
+          <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="simple">
+          <label slot="label" for="third">Third</label>
+          <input slot="input" id="third" type="radio" name="example1" />
+          <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="simple">
+          <label slot="label" for="fourth">Fourth</label>
+          <input slot="input" id="fourth" type="radio" name="example1" disabled />
+          <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="simple">
+          <label slot="label" for="fifth">Fifth</label>
+          <input slot="input" id="fifth" type="radio" name="example1" />
+          <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+        </gux-selector-card-beta>
+      </gux-selector-cards-beta>
+      `
+    },
+    {
+        description: 'renders descriptive radio selector cards',
+        html: `<gux-selector-cards-beta class="example2">
+        <gux-selector-card-beta variant="descriptive">
+          <label slot="label" for="first">First</label>
+          <input slot="input" id="first" type="radio" name="example2" />
+          <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+          <gux-badge slot="badge" bold>Badge</gux-badge>
+          <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="descriptive">
+          <label slot="label" for="second">Second</label>
+          <input slot="input" id="second" type="radio" name="example2" />
+          <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+          <gux-badge slot="badge" bold>Badge</gux-badge>
+          <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="descriptive">
+          <label slot="label" for="third">Third</label>
+          <input slot="input" id="third" type="radio" name="example2" />
+          <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+          <gux-badge slot="badge" bold>Badge</gux-badge>
+          <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="descriptive">
+          <label slot="label" for="fourth">Fourth</label>
+          <input slot="input" id="fourth" type="radio" name="example2" disabled />
+          <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+          <gux-badge slot="badge" bold>Badge</gux-badge>
+          <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="descriptive">
+          <label slot="label" for="fifth">Fifth</label>
+          <input slot="input" id="fifth" type="radio" name="example2" />
+          <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+          <gux-badge slot="badge" bold>Badge</gux-badge>
+          <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+        </gux-selector-card-beta>
+      </gux-selector-cards-beta>`
+    },
+    {
+        description: 'renders simple checkbox selector cards',
+        html: `<gux-selector-cards-beta class="example1">
+            <gux-selector-card-beta variant="simple">
+              <label slot="label" for="1-D">First</label>
+              <input slot="input" id="1-D" type="checkbox" name="example4" value="1-D" />
+              <span slot="description"
+                >A label for a sample selector card. Used in Spark WCL.</span
+              >
+              <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+            </gux-selector-card-beta>
+
+            <gux-selector-card-beta variant="simple">
+              <label slot="label" for="2-D">Second</label>
+              <input slot="input" id="2-D" type="checkbox" name="example4" value="2-D" />
+              <span slot="description"
+                >A label for a sample selector card. Used in Spark WCL.</span
+              >
+              <gux-badge slot="badge" bold>Badge</gux-badge>
+              <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+            </gux-selector-card-beta>
+
+            <gux-selector-card-beta variant="simple">
+              <label slot="label" for="3-D">Third</label>
+              <input slot="input" id="3-D" type="checkbox" name="example4" value="3-D" />
+              <span slot="description"
+                >A label for a sample selector card. Used in Spark WCL.</span
+              >
+              <gux-badge slot="badge" bold>Badge</gux-badge>
+              <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+            </gux-selector-card-beta>
+
+            <gux-selector-card-beta variant="simple">
+              <label slot="label" for="4-D">Fourth</label>
+              <input slot="input" id="4-D" type="checkbox" name="example4" disabled value="4-D" />
+              <span slot="description"
+                >A label for a sample selector card. Used in Spark WCL.</span
+              >
+              <gux-badge slot="badge" bold>Badge</gux-badge>
+              <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+            </gux-selector-card-beta>
+
+            <gux-selector-card-beta variant="simple">
+              <label slot="label" for="5-D">Fifth</label>
+              <input slot="input" id="5-D" type="checkbox" name="example4" value="5-D" />
+              <span slot="description"
+                >A label for a sample selector card. Used in Spark WCL.</span
+              >
+              <gux-badge slot="badge" bold>Badge</gux-badge>
+              <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+            </gux-selector-card-beta>
+          </gux-selector-cards-beta>`
+    },
+    {
+        description: 'renders descriptive checkbox selector cards',
+        html: `<gux-selector-cards-beta class="example1">
+      <gux-selector-card-beta variant="descriptive">
+        <label slot="label" for="1-D">First</label>
+        <input slot="input" id="1-D" type="checkbox" name="example4" value="1-D" />
+        <span slot="description"
+          >A label for a sample selector card. Used in Spark WCL.</span
+        >
+        <gux-badge slot="badge" bold>Badge</gux-badge>
+        <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+      </gux-selector-card-beta>
+
+      <gux-selector-card-beta variant="descriptive">
+        <label slot="label" for="2-D">Second</label>
+        <input slot="input" id="2-D" type="checkbox" name="example4" value="2-D" />
+        <span slot="description"
+          >A label for a sample selector card. Used in Spark WCL.</span
+        >
+        <gux-badge slot="badge" bold>Badge</gux-badge>
+        <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+      </gux-selector-card-beta>
+
+      <gux-selector-card-beta variant="descriptive">
+        <label slot="label" for="3-D">Third</label>
+        <input slot="input" id="3-D" type="checkbox" name="example4" value="3-D" />
+        <span slot="description"
+          >A label for a sample selector card. Used in Spark WCL.</span
+        >
+        <gux-badge slot="badge" bold>Badge</gux-badge>
+        <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+      </gux-selector-card-beta>
+
+      <gux-selector-card-beta variant="descriptive">
+        <label slot="label" for="4-D">Fourth</label>
+        <input slot="input" id="4-D" type="checkbox" name="example4" disabled value="4-D" />
+        <span slot="description"
+          >A label for a sample selector card. Used in Spark WCL.</span
+        >
+        <gux-badge slot="badge" bold>Badge</gux-badge>
+        <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+      </gux-selector-card-beta>
+
+      <gux-selector-card-beta variant="descriptive">
+        <label slot="label" for="5-D">Fifth</label>
+        <input slot="input" id="5-D" type="checkbox" name="example4" value="5-D" />
+        <span slot="description"
+          >A label for a sample selector card. Used in Spark WCL.</span
+        >
+        <gux-badge slot="badge" bold>Badge</gux-badge>
+        <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+      </gux-selector-card-beta>
+    </gux-selector-cards-beta>`
+    }
+];

package/dist/collection/components/beta/gux-side-panel/components/gux-modal-side-panel/gux-modal-side-panel.css

@@ -5,6 +5,11 @@ dialog {
   padding: 0;
   margin: unset;
   border: none;
+  transform: translateX(100%);
+  transition: transform 0.2s ease-in-out;
+}
+dialog.gux-open {
+  transform: translateX(0%);
 }
 
 dialog::backdrop {

package/dist/collection/components/beta/gux-side-panel/components/gux-modal-side-panel/gux-modal-side-panel.js

@@ -52,7 +52,7 @@ export class GuxModalSidePanel {
     }
     render() {
         const titleID = randomHTMLId();
-        return (h("dialog", { key: 'ecf03e299a46bc5fe8c69c3a45c4ee082678ca54', ref: el => (this.dialogElement = el), "aria-labelledby": titleID }, h("gux-side-panel-beta", { key: '80fd9bc4c0b2a0ff8a5329eb5b882e0c3b7598ef', size: this.size }, h("div", { key: 'f8c7caadaeb21468617dd03dd4892f4e3efb83c3', slot: "heading", id: titleID }, h("slot", { key: 'aca70b21b54b4cfcf9db2ce7f6b67db5321ee753', name: "heading" })), hasSlot(this.root, 'description') && (h("div", { key: 'c9bc9620a4374a3b5d1c3d25ef85d378fdcbf305', slot: "description" }, h("slot", { key: 'e50e0d1e6e8571108c6ca564c50a1e7c5e0a7a68', name: "description" }))), h("div", { key: 'bad2c534e47b59dfe0f1c83047eba1395a1c2ff9', slot: "content" }, h("slot", { key: '1d3d8a04686e7c18a1dedbf064b889eab7c96615', name: "content" })), h("div", { key: 'c8ecb56faec61bda9d39e3f25358968221740721', slot: "footer" }, h("slot", { key: '45c9673d168477550f2055115620c112dcc6620f', name: "footer" })))));
+        return (h("dialog", { key: 'a0762489e7f0b45cbc00eaef77141f174cf89860', ref: el => (this.dialogElement = el), "aria-labelledby": titleID, class: { 'gux-open': this.open } }, h("gux-side-panel-beta", { key: 'e07a6eab666d7fa67bf932a42589edb7cc51541f', size: this.size }, h("div", { key: '5b9b231d4cb29f3707f8c77fd4e4f465ab3b3b53', slot: "heading", id: titleID }, h("slot", { key: '9d312a6c106e5c3a276b77350b30f83377b5299d', name: "heading" })), hasSlot(this.root, 'description') && (h("div", { key: 'c987c918bffd3a8fb8671d9cec836cc580fcc5f2', slot: "description" }, h("slot", { key: 'ac61b86567c6e9387cafa128b1fe6b36a9dfd40f', name: "description" }))), h("div", { key: 'bd9907df3b52f4214992970b47d2aa81f8b80da3', slot: "content" }, h("slot", { key: 'cd3e07787a0527d2f11b9cd8f2a8cc553e7f22a7', name: "content" })), h("div", { key: 'b9ad7f08ead8a67a61f29d826fc51df710ed68c7', slot: "footer" }, h("slot", { key: '8b237d105399c02ace67b9eebdf185db2f1c8f7f', name: "footer" })))));
     }
     static get is() { return "gux-modal-side-panel-beta"; }
     static get encapsulation() { return "shadow"; }