genesys-spark-components 4.0.0-beta.40 → 4.0.0-beta.41

package/dist/collection/components/beta/gux-phone-input/services/RegionCountryCodeMap.js

@@ -246,252 +246,3 @@ export const regionCountryCodeMap = {
   ZM: '+260',
   ZW: '+263'
 };
-// Turn region keys of above map to a union string type of those keys
-const regions = [
-  'AD',
-  'AE',
-  'AF',
-  'AG',
-  'AI',
-  'AL',
-  'AM',
-  'AO',
-  'AR',
-  'AS',
-  'AT',
-  'AU',
-  'AW',
-  'AX',
-  'AZ',
-  'BA',
-  'BB',
-  'BD',
-  'BE',
-  'BF',
-  'BG',
-  'BH',
-  'BI',
-  'BJ',
-  'BL',
-  'BM',
-  'BN',
-  'BO',
-  'BQ',
-  'BR',
-  'BS',
-  'BT',
-  'BV',
-  'BW',
-  'BY',
-  'BZ',
-  'CA',
-  'CC',
-  'CD',
-  'CF',
-  'CG',
-  'CH',
-  'CI',
-  'CK',
-  'CL',
-  'CM',
-  'CN',
-  'CO',
-  'CR',
-  'CU',
-  'CV',
-  'CW',
-  'CX',
-  'CY',
-  'CZ',
-  'DE',
-  'DJ',
-  'DK',
-  'DM',
-  'DO',
-  'DZ',
-  'EC',
-  'EE',
-  'EG',
-  'EH',
-  'ER',
-  'ES',
-  'ET',
-  'FI',
-  'FJ',
-  'FK',
-  'FM',
-  'FO',
-  'FR',
-  'GA',
-  'GB',
-  'GD',
-  'GE',
-  'GF',
-  'GG',
-  'GH',
-  'GI',
-  'GL',
-  'GM',
-  'GN',
-  'GP',
-  'GQ',
-  'GR',
-  'GS',
-  'GT',
-  'GU',
-  'GW',
-  'GY',
-  'HK',
-  'HN',
-  'HR',
-  'HT',
-  'HU',
-  'ID',
-  'IE',
-  'IL',
-  'IM',
-  'IN',
-  'IO',
-  'IQ',
-  'IR',
-  'IS',
-  'IT',
-  'JE',
-  'JM',
-  'JO',
-  'JP',
-  'KE',
-  'KG',
-  'KH',
-  'KI',
-  'KM',
-  'KN',
-  'KP',
-  'KR',
-  'KW',
-  'KY',
-  'KZ',
-  'LA',
-  'LB',
-  'LC',
-  'LI',
-  'LK',
-  'LR',
-  'LS',
-  'LT',
-  'LU',
-  'LV',
-  'LY',
-  'MA',
-  'MC',
-  'MD',
-  'ME',
-  'MF',
-  'MG',
-  'MH',
-  'MK',
-  'ML',
-  'MM',
-  'MN',
-  'MO',
-  'MP',
-  'MQ',
-  'MR',
-  'MS',
-  'MT',
-  'MU',
-  'MV',
-  'MW',
-  'MX',
-  'MY',
-  'MZ',
-  'NA',
-  'NC',
-  'NE',
-  'NF',
-  'NG',
-  'NI',
-  'NL',
-  'NO',
-  'NP',
-  'NR',
-  'NU',
-  'NZ',
-  'OM',
-  'PA',
-  'PE',
-  'PF',
-  'PG',
-  'PH',
-  'PK',
-  'PL',
-  'PM',
-  'PN',
-  'PR',
-  'PS',
-  'PT',
-  'PW',
-  'PY',
-  'QA',
-  'RE',
-  'RO',
-  'RS',
-  'RU',
-  'RW',
-  'SA',
-  'SB',
-  'SC',
-  'SD',
-  'SE',
-  'SG',
-  'SH',
-  'SI',
-  'SJ',
-  'SK',
-  'SL',
-  'SM',
-  'SN',
-  'SO',
-  'SR',
-  'SS',
-  'ST',
-  'SV',
-  'SX',
-  'SY',
-  'SZ',
-  'TC',
-  'TD',
-  'TG',
-  'TH',
-  'TJ',
-  'TK',
-  'TL',
-  'TM',
-  'TN',
-  'TO',
-  'TR',
-  'TT',
-  'TV',
-  'TW',
-  'TZ',
-  'UA',
-  'UG',
-  'US',
-  'UY',
-  'UZ',
-  'VA',
-  'VC',
-  'VE',
-  'VG',
-  'VI',
-  'VN',
-  'VU',
-  'WF',
-  'WS',
-  'XK',
-  'YE',
-  'YT',
-  'ZA',
-  'ZM',
-  'ZW'
-];

package/dist/collection/components/beta/gux-phone-input/services/region-map.service.js

@@ -3,12 +3,12 @@ export function getRegionObjects(locale, i18n, phoneUtil) {
   let regionObjects = [];
   for (const [key, val] of Object.entries(regionCountryCodeMap)) {
     regionObjects.push({
-      code: key,
+      alpha2Code: key,
       name: i18n(key),
-      countryCode: val
+      dialCode: val
     });
   }
-  regionObjects = regionObjects.filter(r => phoneUtil.getSupportedRegions().includes(r.code));
+  regionObjects = regionObjects.filter(r => phoneUtil.getSupportedRegions().includes(r.alpha2Code));
   regionObjects.sort((a, b) => a.name.localeCompare(b.name, locale));
   return regionObjects;
 }

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

@@ -17,8 +17,12 @@ describe('gux-phone-input', () => {
         html: `<gux-phone-input-beta value="+13175971660"></gux-phone-input-beta>`
       },
       {
-        description: 'should render with format',
+        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>`
       }
     ].forEach(({ description, html }) => {
       it(description, async () => {
@@ -28,61 +32,69 @@ describe('gux-phone-input', () => {
         await a11yCheck(page);
       });
     });
-    it('open country dropdown and select option', async () => {
-      const page = await newSparkE2EPage({
-        html: `<gux-phone-input-beta></gux-phone-input-beta>`
-      });
-      const dropdownButton = await page.find('pierce/.gux-field-button');
-      const inputField = await page.find('pierce/#tel-input');
-      const inputEventSpy = await page.spyOnEvent('input');
-      await dropdownButton.press('Enter');
-      expect(dropdownButton.getAttribute('aria-expanded')).toBe('true');
-      await page.waitForChanges();
-      await a11yCheck(page);
-      await page.keyboard.press('ArrowDown');
-      await page.keyboard.press('Enter');
-      await page.waitForChanges();
-      expect(await inputField.getProperty('value')).toBe('+93');
-      expect(inputEventSpy).toHaveReceivedEventDetail('+93');
-      expect(dropdownButton.getAttribute('aria-expanded')).toBe('false');
-    });
   });
-  it('region is set when initialized with value', async () => {
+  it('open country dropdown and select option with value not starting with +', async () => {
     const page = await newSparkE2EPage({
-      html: `<gux-phone-input-beta value="+13175971660"></gux-phone-input-beta>`
+      html: `<gux-phone-input-beta></gux-phone-input-beta>`
     });
     const dropdownButton = await page.find('pierce/.gux-field-button');
-    await dropdownButton.click();
+    const inputField = await page.find('pierce/#tel-input');
+    const component = await page.find('gux-phone-input-beta');
+    await inputField.press('1');
+    await dropdownButton.press('Enter');
+    expect(dropdownButton.getAttribute('aria-expanded')).toBe('true');
     await page.waitForChanges();
-    const selected = await page.find('pierce/.gux-selected');
-    expect(selected.textContent).toEqual('United States+1');
+    await a11yCheck(page);
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('Enter');
+    await page.waitForChanges();
+    const region = await component.callMethod('getRegion');
+    expect(region.alpha2Code).toBe('AF');
+    expect(await component.getProperty('value')).toBe('1');
+    expect(dropdownButton.getAttribute('aria-expanded')).toBe('false');
   });
-  it('region is set when typing in country code', async () => {
+  it('open country dropdown and select option with value starting with +', async () => {
     const page = await newSparkE2EPage({
       html: `<gux-phone-input-beta></gux-phone-input-beta>`
     });
     const dropdownButton = await page.find('pierce/.gux-field-button');
     const inputField = await page.find('pierce/#tel-input');
-    await inputField.type('+41');
+    const component = await page.find('gux-phone-input-beta');
+    await inputField.press('+');
+    await inputField.press('1');
+    await dropdownButton.press('Enter');
+    expect(dropdownButton.getAttribute('aria-expanded')).toBe('true');
     await page.waitForChanges();
-    await dropdownButton.click();
+    await a11yCheck(page);
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('Enter');
     await page.waitForChanges();
-    const selected = await page.find('pierce/.gux-selected');
-    expect(selected.textContent).toEqual('Switzerland+41');
+    const region = await component.callMethod('getRegion');
+    expect(region.alpha2Code).toBe('AD');
+    expect(await component.getProperty('value')).toBe('+376');
+    expect(dropdownButton.getAttribute('aria-expanded')).toBe('false');
+  });
+  it('region is set when initialized with value', async () => {
+    const page = await newSparkE2EPage({
+      html: `<gux-phone-input-beta value="+13175971660"></gux-phone-input-beta>`
+    });
+    const dropdownButtonIcon = await page.find('pierce/.gux-field-button gux-region-icon');
+    const component = await page.find('gux-phone-input-beta');
+    const region = await component.callMethod('getRegion');
+    expect(region.alpha2Code).toBe('US');
+    expect(dropdownButtonIcon.getAttribute('screenreader-text')).toBe('United States');
   });
-  it('phone validation error is sent as true', async () => {
+  it('region is set when typing in country code', async () => {
     const page = await newSparkE2EPage({
-      html: `<gux-phone-input-beta></gux-phone-input-beta>
-            <input type="text" id="focus-input">`
+      html: `<gux-phone-input-beta></gux-phone-input-beta>`
     });
-    const element = await page.find('gux-phone-input-beta');
+    const dropdownButton = await page.find('pierce/.gux-field-button');
     const inputField = await page.find('pierce/#tel-input');
-    const validationEventSpy = await page.spyOnEvent('phoneValidationError');
-    await inputField.focus();
-    await inputField.type('+1317');
+    await inputField.type('+41');
     await page.waitForChanges();
-    element.triggerEvent('focusout');
+    await dropdownButton.click();
     await page.waitForChanges();
-    expect(validationEventSpy).toHaveReceivedEventDetail(true);
+    const selected = await page.find('pierce/.gux-selected');
+    expect(selected.textContent).toEqual('Switzerland+41');
   });
 });

package/dist/collection/components/beta/gux-time-zone-picker/tests/gux-time-zone-picker.e2e.js

@@ -24,7 +24,7 @@ describe('gux-time-zone-picker-beta', () => {
     await openWithClick(page);
     await a11yCheck(page);
     let visibleItems = await unfilteredOptions(page);
-    expect(visibleItems.length).toBe(462);
+    expect(visibleItems.length).toBe(565);
     await page.keyboard.press('a');
     await page.keyboard.press('d');
     await page.keyboard.press('a');
@@ -40,14 +40,14 @@ describe('gux-time-zone-picker-beta', () => {
     await openWithClick(page);
     await a11yCheck(page);
     let visibleItems = await unfilteredOptions(page);
-    expect(visibleItems.length).toBe(462);
+    expect(visibleItems.length).toBe(565);
     await page.keyboard.press('e');
     await page.keyboard.press('t');
     await page.keyboard.press('c');
     await page.keyboard.press('/');
     await page.waitForChanges();
     visibleItems = await unfilteredOptions(page);
-    expect(visibleItems.length).toBe(27);
+    expect(visibleItems.length).toBe(29);
     expect(visibleItems[0].textContent).toBe('Etc/GMT (UTC+00:00)');
   });
 });

package/dist/collection/components/stable/gux-alert/gux-inline-alert.css

@@ -36,7 +36,7 @@
 }
 
 .gux-inline-alert {
-  display: flex;
+  display: inline-flex;
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-alert-gap);

package/dist/collection/components/stable/gux-badge/gux-badge.css

@@ -36,10 +36,10 @@
   align-items: center;
   justify-content: center;
   height: var(--gse-ui-badge-height);
-  padding: var(--gse-ui-badge-padding);
+  padding: 2px 12px;
   font-family: var(--gse-ui-badge-text-fontFamily);
   font-size: var(--gse-ui-badge-text-fontSize);
-  font-weight: var(--gse-ui-badge-text-fontWeight, 600);
+  font-weight: var(--gse-ui-badge-text-fontWeight);
   line-height: var(--gse-ui-badge-text-lineHeight);
   border-radius: var(--gse-ui-badge-borderRadius);
 }

package/dist/collection/components/stable/gux-button/gux-button.css

@@ -18,7 +18,7 @@
 }
 
 ::slotted(*) {
-  padding-left: 8px;
+  padding-left: var(--gse-core-spacing-3xs);
   vertical-align: middle;
 }
 
@@ -45,6 +45,9 @@ button {
   border: none;
   border-radius: var(--gse-ui-button-borderRadius);
 }
+button.gux-icon-only {
+  padding: var(--gse-ui-button-paddingIconOnly);
+}
 button[disabled] {
   cursor: default;
   opacity: var(--gse-ui-button-disabled-opacity);

package/dist/collection/components/stable/gux-button/gux-button.js

@@ -9,32 +9,47 @@ export class GuxButton {
     this.guxTitle = undefined;
     this.disabled = false;
     this.accent = 'secondary';
+    this.iconOnly = undefined;
+  }
+  connectedCallback() {
+    this.slotChanged();
   }
   componentWillLoad() {
     trackComponent(this.root, { variant: this.accent });
-    this.makeSlotContentDisableable();
   }
   render() {
-    return (h("button", { type: this.type, title: this.guxTitle, disabled: this.disabled, class: `gux-${this.accent}` }, h("slot", null)));
+    return (h("button", { type: this.type, title: this.guxTitle, disabled: this.disabled, class: {
+        [`gux-${this.accent}`]: true,
+        'gux-icon-only': this.iconOnly
+      } }, h("slot", { onSlotchange: this.slotChanged.bind(this) })));
+  }
+  stopEventIfDisabled(event) {
+    if (this.disabled) {
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+      event.preventDefault();
+    }
   }
   makeSlotContentDisableable() {
-    this.root.shadowRoot.addEventListener('click', (event) => {
-      if (this.disabled) {
-        event.stopImmediatePropagation();
-        event.stopPropagation();
-        event.preventDefault();
-      }
-    });
+    this.root.shadowRoot.addEventListener('click', (event) => this.stopEventIfDisabled(event));
     Array.from(this.root.children).forEach(slotElement => {
-      slotElement.addEventListener('click', (event) => {
-        if (this.disabled) {
-          event.stopImmediatePropagation();
-          event.stopPropagation();
-          event.preventDefault();
-        }
-      });
+      slotElement.addEventListener('click', (event) => this.stopEventIfDisabled(event));
     });
   }
+  hasIconOnly() {
+    const children = Array.from(this.root.children);
+    if (children.length === 1) {
+      const child = children[0];
+      if (child.tagName === 'GUX-ICON') {
+        return true;
+      }
+    }
+    return false;
+  }
+  slotChanged() {
+    this.makeSlotContentDisableable();
+    this.iconOnly = this.hasIconOnly();
+  }
   static get is() { return "gux-button"; }
   static get encapsulation() { return "shadow"; }
   static get delegatesFocus() { return true; }
@@ -135,5 +150,10 @@ export class GuxButton {
       }
     };
   }
+  static get states() {
+    return {
+      "iconOnly": {}
+    };
+  }
   static get elementRef() { return "root"; }
 }

package/dist/collection/components/stable/gux-button-slot/gux-button-slot.css

@@ -25,6 +25,12 @@
   border-radius: var(--gse-ui-button-borderRadius);
 }
 
+:host([icon-only]) ::slotted(input[type=button]),
+:host([icon-only]) ::slotted(input[type=submit]),
+:host([icon-only]) ::slotted(button) {
+  padding: var(--gse-ui-button-paddingIconOnly);
+}
+
 ::slotted(input[type=button][disabled]),
 ::slotted(input[type=submit][disabled]),
 ::slotted(button[disabled]) {

package/dist/collection/components/stable/gux-button-slot/gux-button-slot.js

@@ -7,6 +7,7 @@ import { logError } from "../../../utils/error/log-error";
 export class GuxButtonSlot {
   constructor() {
     this.accent = 'secondary';
+    this.iconOnly = undefined;
   }
   validateSlotContent() {
     let slottedElement = this.root.children[0];
@@ -31,7 +32,7 @@ export class GuxButtonSlot {
     this.validateSlotContent();
   }
   render() {
-    return (h(Host, { accent: this.accent }, h("slot", null)));
+    return (h(Host, { accent: this.accent, "icon-only": this.iconOnly }, h("slot", null)));
   }
   static get is() { return "gux-button-slot"; }
   static get encapsulation() { return "shadow"; }
@@ -70,6 +71,23 @@ export class GuxButtonSlot {
         "attribute": "accent",
         "reflect": false,
         "defaultValue": "'secondary'"
+      },
+      "iconOnly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon-only",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/stable/gux-column-manager/gux-column-manager-item/gux-column-manager-item.css

@@ -1,3 +1,6 @@
+/**
+  * @prop --gse-ui-dataTableItems-editColumn-editColumnItem-gap
+  */
 :host([gs-reorder-indicator=above]) .gux-container {
   border-top-color: #aac9ff;
 }
@@ -10,6 +13,7 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-dataTableItems-editColumn-editColumnItem-gap);
   align-content: stretch;
   align-items: center;
   justify-content: flex-start;
@@ -33,11 +37,14 @@
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
-  margin-right: 4px;
   color: #596373;
   cursor: grab;
   border-radius: 4px;
 }
+.gux-container .gux-reorder gux-icon {
+  width: var(--gse-ui-icon-size-sm);
+  height: var(--gse-ui-icon-size-sm);
+}
 .gux-container .gux-reorder.gux-reordering:focus-visible gux-icon {
   color: #2a60c8;
 }
@@ -59,8 +66,9 @@
 }
 .gux-container .gux-select gux-text-highlight {
   position: absolute;
-  top: 2px;
-  left: 24px;
+  top: 0;
+  left: 31px;
+  color: transparent;
   pointer-events: none;
 }
 

package/dist/collection/components/stable/gux-column-manager/gux-column-manager-item/gux-column-manager-item.js

@@ -111,7 +111,6 @@ export class GuxColumnManagerItem {
         }
         case 'End': {
           event.preventDefault();
-          console.log('End');
           this.internal_keyboard_reorder_move.emit({
             delta: Infinity,
             column: this.text

package/dist/collection/components/stable/gux-column-manager/gux-column-manager.css

@@ -1,6 +1,11 @@
+/**
+  * @prop --gse-ui-dataTableItems-editColumn-editColumnContent-gap
+  * @prop --gse-ui-dataTableItems-editColumn-editColumnContent-padding
+  */
 .gux-container {
   width: 320px;
   min-width: 320px;
+  padding: var(--gse-ui-dataTableItems-editColumn-editColumnContent-padding);
 }
 .gux-container .gux-search gux-content-search {
   width: 100%;
@@ -13,11 +18,8 @@
   -webkit-appearance: none;
 }
 .gux-container .gux-select {
-  padding: 8px 0 8px 16px;
-  margin: 4px 0;
-  color: #596373;
-  background-color: #f6f7f9;
-  border-radius: 4px;
+  padding: var(--gse-ui-dataTableItems-editColumn-editColumnContent-padding);
+  margin-left: 24px;
 }
 
 .gux-sr-only:not(:focus):not(:active) {

package/dist/collection/components/stable/gux-dismiss-button/gux-dismiss-button.css

@@ -1,7 +1,7 @@
 gux-button-slot {
   position: absolute;
-  top: 0;
-  right: 0;
+  top: 16px;
+  right: 8px;
 }
 gux-button-slot.gux-inherit {
   position: inherit;