genesys-spark-components 4.26.0 → 4.26.1

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

@@ -5,288 +5,288 @@ import { trackComponent } from "../../../utils/tracking/usage";
 import simulateNativeEvent from "../../../utils/dom/simulate-native-event";
 import { getTimeZoneList, formatOffset } from "../../../utils/date/time-zone";
 export class GuxTimeZonePickerBeta {
-  constructor() {
-    this.value = undefined;
-    this.workspaceDefault = undefined;
-    this.localDefault = undefined;
-    this.hasError = false;
-    this.disabled = false;
-    this.required = false;
-    this.searchString = '';
-    this.timeZoneOptionElements = undefined;
-    this.timeZoneList = undefined;
-    this.filteredZoneList = undefined;
-  }
-  on(event) {
-    this.searchString = event.detail;
-    this.filteredZoneList = this.filterTimeZoneList(this.timeZoneList);
-    this.timeZoneOptionElements = this.renderTimeZones(this.filteredZoneList);
-  }
-  async componentWillLoad() {
-    trackComponent(this.root);
-    this.i18n = await buildI18nForComponent(this.root, translationResources);
-    this.timeZoneList = this.getTimeZoneOptionsList();
-    this.filteredZoneList = this.timeZoneList;
-    this.timeZoneOptionElements = this.renderTimeZones(this.filteredZoneList);
-  }
-  componentDidLoad() {
-    var _a;
-    const dropdownElement = (_a = this.root) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('gux-dropdown');
-    dropdownElement.addEventListener('change', (event) => {
-      const selectedElement = event.target;
-      const selectedValue = selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.value;
-      this.value = selectedValue;
-      simulateNativeEvent(this.root, 'change');
-    });
-  }
-  filterTimeZoneList(timeZoneList) {
-    const searchString = this.searchString;
-    return timeZoneList.filter(tzOption => {
-      return this.getFormattedTimeZoneOption(tzOption)
-        .toLowerCase()
-        .includes(searchString.toLowerCase());
-    });
-  }
-  getTimeZoneOption(timeZone) {
-    const localizedGroupName = this.i18n(timeZone.name);
-    const localizedCountryName = this.i18n(timeZone.countryName);
-    if (!localizedGroupName) {
-      return;
+    constructor() {
+        this.value = undefined;
+        this.workspaceDefault = undefined;
+        this.localDefault = undefined;
+        this.hasError = false;
+        this.disabled = false;
+        this.required = false;
+        this.searchString = '';
+        this.timeZoneOptionElements = undefined;
+        this.timeZoneList = undefined;
+        this.filteredZoneList = undefined;
     }
-    const formattedOffset = formatOffset(timeZone.currentTimeOffsetInMinutes);
-    const localizedUTC = this.i18n('UTC');
-    const displayTextName = `${localizedGroupName}`;
-    const displayTextOffset = ` (${localizedUTC}${formattedOffset})`;
-    const baseDisplayOffsetText = `${displayTextOffset}`;
-    const displayTextNameFormatted = displayTextName.replace(/_/g, ' ');
-    const countryName = `${localizedCountryName}`;
-    const defaultZone = '';
-    const priority = displayTextName.startsWith('Etc/GMT') ? 2 : 1;
-    return {
-      value: timeZone.name,
-      localizedGroupName,
-      formattedOffset,
-      displayTextNameFormatted,
-      displayTextOffset,
-      baseDisplayOffsetText,
-      countryName,
-      defaultZone,
-      priority
-    };
-  }
-  getFormattedTimeZoneOption(option) {
-    return option.displayTextNameFormatted.startsWith('Etc/GMT')
-      ? option.displayTextNameFormatted.concat(option.baseDisplayOffsetText)
-      : option.displayTextNameFormatted
-        .split('/')
-        .pop()
-        .concat(', ', option.countryName)
-        .concat(option.baseDisplayOffsetText);
-  }
-  getTimeZoneOptionsList() {
-    const allTimeZones = getTimeZoneList();
-    const timeZoneOptionsList = [];
-    allTimeZones.forEach(timeZone => {
-      const zone = this.getTimeZoneOption(timeZone);
-      //Filter out zones we don't have a translation for; helps filter out deprecated module zones we don't want to use.
-      if (!zone) {
-        return;
-      }
-      timeZoneOptionsList.push(zone);
-    });
-    return timeZoneOptionsList.sort((a, b) => {
-      var _a;
-      return a.priority - b.priority ||
-        ((_a = a.displayTextNameFormatted) === null || _a === void 0 ? void 0 : _a.localeCompare(b.displayTextNameFormatted));
-    });
-  }
-  getDefaultZones() {
-    const defaultZones = [];
-    if (this.workspaceDefault) {
-      defaultZones.push(this.workspaceDefault);
+    on(event) {
+        this.searchString = event.detail;
+        this.filteredZoneList = this.filterTimeZoneList(this.timeZoneList);
+        this.timeZoneOptionElements = this.renderTimeZones(this.filteredZoneList);
     }
-    if (this.localDefault) {
-      defaultZones.push(this.localDefault);
+    async componentWillLoad() {
+        trackComponent(this.root);
+        this.i18n = await buildI18nForComponent(this.root, translationResources);
+        this.timeZoneList = this.getTimeZoneOptionsList();
+        this.filteredZoneList = this.timeZoneList;
+        this.timeZoneOptionElements = this.renderTimeZones(this.filteredZoneList);
     }
-    return defaultZones;
-  }
-  getDefaultZoneList() {
-    const defaultZones = this.getDefaultZones();
-    const defaultZoneOptions = this.timeZoneList.reduce((defaults, tz) => {
-      if (defaultZones.includes(tz.value)) {
-        return defaults.concat([Object.assign({}, tz)]);
-      }
-      return defaults;
-    }, []);
-    defaultZoneOptions.forEach(option => {
-      if (defaultZoneOptions.length === 1 &&
-        this.workspaceDefault === this.localDefault) {
-        defaultZoneOptions[0].defaultZone = `${this.i18n('localAndWorkspaceDefault')}`;
-      }
-      else if (option.value === this.workspaceDefault) {
-        option.defaultZone = `${this.i18n('workspaceDefault')}`;
-      }
-      else if (option.value === this.localDefault) {
-        option.defaultZone = `${this.i18n('localDefault')}`;
-      }
-    });
-    return defaultZoneOptions;
-  }
-  renderTimeZones(zoneList) {
-    return zoneList.map(tzOption => {
-      return (h("gux-option", { class: {
-          'gux-has-defaults': tzOption.defaultZone !== ''
-        }, value: tzOption.value }, h("div", { class: "gux-option-wrapper" }, h("div", null, this.getFormattedTimeZoneOption(tzOption)), h("span", { class: "gux-default-zone" }, tzOption.defaultZone))));
-    });
-  }
-  renderDefaultsList() {
-    const defaults = this.renderTimeZones(this.getDefaultZoneList());
-    if (defaults.length) {
-      return (h("div", null, h("div", { class: "zone-header" }, this.i18n('default')), defaults, h("gux-list-divider", null), h("div", { class: "zone-header" }, this.i18n('all'))));
+    componentDidLoad() {
+        var _a;
+        const dropdownElement = (_a = this.root) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('gux-dropdown');
+        dropdownElement.addEventListener('change', (event) => {
+            const selectedElement = event.target;
+            const selectedValue = selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.value;
+            this.value = selectedValue;
+            simulateNativeEvent(this.root, 'change');
+        });
+    }
+    filterTimeZoneList(timeZoneList) {
+        const searchString = this.searchString;
+        return timeZoneList.filter(tzOption => {
+            return this.getFormattedTimeZoneOption(tzOption)
+                .toLowerCase()
+                .includes(searchString.toLowerCase());
+        });
+    }
+    getTimeZoneOption(timeZone) {
+        const localizedGroupName = this.i18n(timeZone.name);
+        const localizedCountryName = this.i18n(timeZone.countryName);
+        if (!localizedGroupName) {
+            return;
+        }
+        const formattedOffset = formatOffset(timeZone.currentTimeOffsetInMinutes);
+        const localizedUTC = this.i18n('UTC');
+        const displayTextName = `${localizedGroupName}`;
+        const displayTextOffset = ` (${localizedUTC}${formattedOffset})`;
+        const baseDisplayOffsetText = `${displayTextOffset}`;
+        const displayTextNameFormatted = displayTextName.replace(/_/g, ' ');
+        const countryName = `${localizedCountryName}`;
+        const defaultZone = '';
+        const priority = displayTextName.startsWith('Etc/GMT') ? 2 : 1;
+        return {
+            value: timeZone.name,
+            localizedGroupName,
+            formattedOffset,
+            displayTextNameFormatted,
+            displayTextOffset,
+            baseDisplayOffsetText,
+            countryName,
+            defaultZone,
+            priority
+        };
+    }
+    getFormattedTimeZoneOption(option) {
+        return option.displayTextNameFormatted.startsWith('Etc/GMT')
+            ? option.displayTextNameFormatted.concat(option.baseDisplayOffsetText)
+            : option.displayTextNameFormatted
+                .split('/')
+                .pop()
+                .concat(', ', option.countryName)
+                .concat(option.baseDisplayOffsetText);
+    }
+    getTimeZoneOptionsList() {
+        const allTimeZones = getTimeZoneList();
+        const timeZoneOptionsList = [];
+        allTimeZones.forEach(timeZone => {
+            const zone = this.getTimeZoneOption(timeZone);
+            //Filter out zones we don't have a translation for; helps filter out deprecated module zones we don't want to use.
+            if (!zone) {
+                return;
+            }
+            timeZoneOptionsList.push(zone);
+        });
+        return timeZoneOptionsList.sort((a, b) => {
+            var _a;
+            return a.priority - b.priority ||
+                ((_a = a.displayTextNameFormatted) === null || _a === void 0 ? void 0 : _a.localeCompare(b.displayTextNameFormatted));
+        });
+    }
+    getDefaultZones() {
+        const defaultZones = [];
+        if (this.workspaceDefault) {
+            defaultZones.push(this.workspaceDefault);
+        }
+        if (this.localDefault) {
+            defaultZones.push(this.localDefault);
+        }
+        return defaultZones;
+    }
+    getDefaultZoneList() {
+        const defaultZones = this.getDefaultZones();
+        const defaultZoneOptions = this.timeZoneList.reduce((defaults, tz) => {
+            if (defaultZones.includes(tz.value)) {
+                return defaults.concat([Object.assign({}, tz)]);
+            }
+            return defaults;
+        }, []);
+        defaultZoneOptions.forEach(option => {
+            if (defaultZoneOptions.length === 1 &&
+                this.workspaceDefault === this.localDefault) {
+                defaultZoneOptions[0].defaultZone = `${this.i18n('localAndWorkspaceDefault')}`;
+            }
+            else if (option.value === this.workspaceDefault) {
+                option.defaultZone = `${this.i18n('workspaceDefault')}`;
+            }
+            else if (option.value === this.localDefault) {
+                option.defaultZone = `${this.i18n('localDefault')}`;
+            }
+        });
+        return defaultZoneOptions;
+    }
+    renderTimeZones(zoneList) {
+        return zoneList.map(tzOption => {
+            return (h("gux-option", { class: {
+                    'gux-has-defaults': tzOption.defaultZone !== ''
+                }, value: tzOption.value }, h("div", { class: "gux-option-wrapper" }, h("div", null, this.getFormattedTimeZoneOption(tzOption)), h("span", { class: "gux-default-zone" }, tzOption.defaultZone))));
+        });
+    }
+    renderDefaultsList() {
+        const defaults = this.renderTimeZones(this.getDefaultZoneList());
+        if (defaults.length) {
+            return (h("div", null, h("div", { class: "zone-header" }, this.i18n('default')), defaults, h("gux-list-divider", null), h("div", { class: "zone-header" }, this.i18n('all'))));
+        }
+    }
+    render() {
+        return (h("gux-dropdown", { key: 'bf907629437b034cfd728a477d0e34b24d4c2a95', class: {
+                'has-defaults': !!this.workspaceDefault || !!this.localDefault
+            }, "filter-type": "custom", placeholder: this.i18n('selectZone'), value: this.value, hasError: this.hasError, disabled: this.disabled }, h("gux-listbox", { key: 'c57d91d7b111d7bf8fbdc246349c48603cd881f1', "aria-label": this.i18n('timeZones') }, this.renderDefaultsList(), this.timeZoneOptionElements)));
+    }
+    static get is() { return "gux-time-zone-picker-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-time-zone-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-time-zone-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "workspaceDefault": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "workspace-default",
+                "reflect": false
+            },
+            "localDefault": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "local-default",
+                "reflect": false
+            },
+            "hasError": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "has-error",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "searchString": {},
+            "timeZoneOptionElements": {},
+            "timeZoneList": {},
+            "filteredZoneList": {}
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get listeners() {
+        return [{
+                "name": "guxfilter",
+                "method": "on",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
     }
-  }
-  render() {
-    return (h("gux-dropdown", { class: {
-        'has-defaults': !!this.workspaceDefault || !!this.localDefault
-      }, "filter-type": "custom", placeholder: this.i18n('selectZone'), value: this.value, hasError: this.hasError, disabled: this.disabled }, h("gux-listbox", { "aria-label": this.i18n('timeZones') }, this.renderDefaultsList(), this.timeZoneOptionElements)));
-  }
-  static get is() { return "gux-time-zone-picker-beta"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["gux-time-zone-picker.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["gux-time-zone-picker.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "value": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "value",
-        "reflect": false
-      },
-      "workspaceDefault": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "workspace-default",
-        "reflect": false
-      },
-      "localDefault": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "local-default",
-        "reflect": false
-      },
-      "hasError": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "has-error",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "required",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "searchString": {},
-      "timeZoneOptionElements": {},
-      "timeZoneList": {},
-      "filteredZoneList": {}
-    };
-  }
-  static get elementRef() { return "root"; }
-  static get listeners() {
-    return [{
-        "name": "guxfilter",
-        "method": "on",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
 }

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

@@ -1,53 +1,53 @@
 import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
 async function openWithClick(page) {
-  const dropdownButtonElement = await page.find('pierce/.gux-field');
-  await dropdownButtonElement.click();
-  await page.waitForChanges();
+    const dropdownButtonElement = await page.find('pierce/.gux-field');
+    await dropdownButtonElement.click();
+    await page.waitForChanges();
 }
 async function unfilteredOptions(page) {
-  const element = await page.find('gux-time-zone-picker-beta');
-  return element.shadowRoot.querySelectorAll(`gux-dropdown gux-listbox gux-option:not(.gux-filtered)`);
+    const element = await page.find('gux-time-zone-picker-beta');
+    return element.shadowRoot.querySelectorAll(`gux-dropdown gux-listbox gux-option:not(.gux-filtered)`);
 }
 describe('gux-time-zone-picker-beta', () => {
-  describe('#render', () => {
-    it('renders', async () => {
-      const html = `<gux-time-zone-picker-beta></gux-time-zone-picker-beta>`;
-      const page = await newSparkE2EPage({ html });
-      const element = await page.find('gux-time-zone-picker-beta');
-      expect(element).toHaveAttribute('hydrated');
+    describe('#render', () => {
+        it('renders', async () => {
+            const html = `<gux-time-zone-picker-beta></gux-time-zone-picker-beta>`;
+            const page = await newSparkE2EPage({ html });
+            const element = await page.find('gux-time-zone-picker-beta');
+            expect(element).toHaveAttribute('hydrated');
+        });
+    });
+    it('filters the list', async () => {
+        const html = `<gux-time-zone-picker-beta></gux-time-zone-picker-beta>`;
+        const page = await newSparkE2EPage({ html });
+        await a11yCheck(page);
+        await openWithClick(page);
+        await a11yCheck(page);
+        let visibleItems = await unfilteredOptions(page);
+        expect(visibleItems.length).toBe(478);
+        await page.keyboard.press('a');
+        await page.keyboard.press('d');
+        await page.keyboard.press('a');
+        await page.keyboard.press('k');
+        await page.waitForChanges();
+        visibleItems = await unfilteredOptions(page);
+        expect(visibleItems.length).toBe(1);
+    });
+    it('includes generic zones', async () => {
+        const html = `<gux-time-zone-picker-beta></gux-time-zone-picker-beta>`;
+        const page = await newSparkE2EPage({ html });
+        await a11yCheck(page);
+        await openWithClick(page);
+        await a11yCheck(page);
+        let visibleItems = await unfilteredOptions(page);
+        expect(visibleItems.length).toBe(478);
+        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[0].textContent).toBe('Etc/GMT (UTC+00:00)');
     });
-  });
-  it('filters the list', async () => {
-    const html = `<gux-time-zone-picker-beta></gux-time-zone-picker-beta>`;
-    const page = await newSparkE2EPage({ html });
-    await a11yCheck(page);
-    await openWithClick(page);
-    await a11yCheck(page);
-    let visibleItems = await unfilteredOptions(page);
-    expect(visibleItems.length).toBe(478);
-    await page.keyboard.press('a');
-    await page.keyboard.press('d');
-    await page.keyboard.press('a');
-    await page.keyboard.press('k');
-    await page.waitForChanges();
-    visibleItems = await unfilteredOptions(page);
-    expect(visibleItems.length).toBe(1);
-  });
-  it('includes generic zones', async () => {
-    const html = `<gux-time-zone-picker-beta></gux-time-zone-picker-beta>`;
-    const page = await newSparkE2EPage({ html });
-    await a11yCheck(page);
-    await openWithClick(page);
-    await a11yCheck(page);
-    let visibleItems = await unfilteredOptions(page);
-    expect(visibleItems.length).toBe(478);
-    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[0].textContent).toBe('Etc/GMT (UTC+00:00)');
-  });
 });