genesys-spark-components 4.0.0-beta.3 → 4.0.0-beta.30

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

@@ -0,0 +1,247 @@
+import { h } from '@stencil/core';
+import { getTimeZones } from '@vvo/tzdb';
+import { buildI18nForComponent } from '../../../i18n';
+import translationResources from './i18n/en.json';
+import { trackComponent } from '@utils/tracking/usage';
+import simulateNativeEvent from '../../../utils/dom/simulate-native-event';
+import { genericTimeZones } from './generic-zones';
+export class GuxTimeZonePickerBeta {
+  constructor() {
+    this.value = undefined;
+    this.workspaceDefault = undefined;
+    this.localDefault = undefined;
+    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.getTimeZoneList();
+    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', () => {
+      simulateNativeEvent(this.root, 'change');
+    });
+  }
+  /**
+   * @desc create a formatted offset string
+   * @param {number} offset timezone offset in minutes
+   * @returns {string} formatted offset string
+   * @example '+HH:mm' or '-HH:mm'
+   */
+  formatOffset(offset) {
+    const isValidOffset = typeof offset === 'number';
+    if (!isValidOffset) {
+      return '';
+    }
+    const mins = Math.abs(offset) % 60;
+    const stringMins = mins.toString().padStart(2, '0');
+    const hrs = Math.floor(Math.abs(offset) / 60);
+    const stringHrs = hrs.toString().padStart(2, '0');
+    if (offset >= 0) {
+      return `+${stringHrs}:${stringMins}`;
+    }
+    return `-${stringHrs}:${stringMins}`;
+  }
+  /**
+   * @desc Adds 'group' zones that are the same as other zones to the top-level list. Modifies the original list.
+   * @param GuxTimeZoneListing[] timeZoneList base list of timezones. Group zones found in this list will be added to it.
+   */
+  addGroupZonesToList(timeZoneList) {
+    timeZoneList.forEach(zone => {
+      zone.group.forEach(groupZone => {
+        const existing = timeZoneList.find(zone => zone.name === groupZone);
+        if (!existing && groupZone !== zone.name) {
+          const groupZoneItem = Object.assign({}, zone);
+          groupZoneItem.name = groupZone;
+          timeZoneList.push(groupZoneItem);
+        }
+      });
+    });
+  }
+  filterTimeZoneList(timeZoneList) {
+    const searchString = this.searchString;
+    return timeZoneList.filter(tzOption => {
+      return tzOption.displayTextName
+        .toLowerCase()
+        .includes(searchString.toLowerCase());
+    });
+  }
+  getTimeZoneOption(timeZone) {
+    const localizedName = this.i18n(timeZone.name);
+    if (!localizedName) {
+      return;
+    }
+    const formattedOffset = this.formatOffset(timeZone.currentTimeOffsetInMinutes);
+    const localizedUTC = this.i18n('UTC');
+    const displayTextName = `${localizedName}`;
+    const displayTextOffset = ` (${localizedUTC}${formattedOffset})`;
+    const baseDisplayOffsetText = `${displayTextOffset}`;
+    return {
+      value: timeZone.name,
+      localizedName,
+      formattedOffset,
+      displayTextName,
+      displayTextOffset,
+      baseDisplayOffsetText
+    };
+  }
+  getTimeZoneList() {
+    const moduleTimeZones = getTimeZones();
+    const allTimeZones = [...genericTimeZones, ...moduleTimeZones];
+    this.addGroupZonesToList(allTimeZones);
+    const timeZoneList = [];
+    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;
+      }
+      timeZoneList.push(zone);
+    });
+    return timeZoneList.sort((a, b) => {
+      var _a;
+      return ((_a = a.displayTextName) === null || _a === void 0 ? void 0 : _a.localeCompare(b.displayTextName)) || 0;
+    });
+  }
+  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.filter(tz => defaultZones.includes(tz.value));
+    defaultZoneOptions.forEach(option => {
+      const baseDisplayOffsetText = option.baseDisplayOffsetText;
+      if (defaultZoneOptions.length === 1 &&
+        this.workspaceDefault === this.localDefault) {
+        defaultZoneOptions[0].displayTextOffset = `${defaultZoneOptions[0].displayTextOffset} ${this.i18n('localAndWorkspaceDefault')}`;
+      }
+      else if (option.value === this.workspaceDefault) {
+        option.displayTextOffset = `${baseDisplayOffsetText} ${this.i18n('workspaceDefault')}`;
+      }
+      else if (option.value === this.localDefault) {
+        option.displayTextOffset = `${baseDisplayOffsetText} ${this.i18n('localDefault')}`;
+      }
+    });
+    return defaultZoneOptions;
+  }
+  renderTimeZones(zoneList) {
+    return zoneList.map(tzOption => {
+      return (h("gux-option", { value: tzOption.value }, tzOption.displayTextName, h("span", { class: "tz-utc" }, tzOption.displayTextOffset)));
+    });
+  }
+  renderDefaultsList() {
+    const defaults = this.renderTimeZones(this.getDefaultZoneList());
+    if (defaults.length) {
+      return (h("span", null, h("div", { class: "zone-header" }, "Default"), defaults, h("gux-list-divider", null), h("div", { class: "zone-header" }, "All")));
+    }
+  }
+  render() {
+    return (h("gux-dropdown", { class: {
+        'has-defaults': !!this.workspaceDefault || !!this.localDefault
+      }, "filter-type": "custom", placeholder: this.i18n('selectZone'), value: this.value }, 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
+      }
+    };
+  }
+  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/legacy/gux-action-toast-legacy/gux-action-toast.css

@@ -0,0 +1,163 @@
+.gux-focus-ring-focused:focus {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-focused-within:focus-within {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-focused-visible:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-small-focused:focus {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-small-focused-within:focus-within {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-small-focused-visible:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+/*
+ * Typography styles and mixins.
+ */
+/* Helpers */
+/* Base typography */
+/* Headings */
+/* Anchor */
+.gux-icon-anchor gux-icon {
+  padding-right: var(--gse-ui-links-inLine-padding);
+}
+
+/* Custom Styles */
+:host {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: stretch;
+  justify-content: flex-start;
+  width: 270px;
+  padding: 20px 24px;
+  margin-bottom: 4px;
+  color: #2e394c;
+  background: #f6f7f9;
+  border: 1px solid #b4bccb;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(32, 41, 55, 0.24);
+}
+
+.gux-header {
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: center;
+  align-self: auto;
+  justify-content: flex-start;
+  order: 0;
+  font-family: var(--gse-core-fontFamily-heading), var(--gse-core-fontFamily-body), sans-serif;
+  font-weight: var(--gse-core-fontWeight-semiBold);
+  font-size: var(--gse-core-fontSize-lg);
+  line-height: var(--gse-lineHeight-md);
+}
+.gux-header .gux-icon {
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
+  color: #1da8b3;
+}
+.gux-header .gux-icon ::slotted(gux-icon) {
+  width: 32px !important;
+  height: 32px !important;
+}
+.gux-header .gux-title {
+  flex: 1 1 auto;
+  align-self: auto;
+  order: 0;
+  margin: 0 0 0 8px;
+}
+
+.gux-message {
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
+  margin: 16px 0;
+  font-family: var(--gse-core-fontFamily-body), sans-serif;
+  font-weight: var(--gse-core-fontWeight-regular);
+  font-size: var(--gse-core-fontSize-xs);
+  line-height: var(--gse-core-lineHeight-xs);
+}
+.gux-message ::slotted(dl) {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: stretch;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin: 0;
+}
+
+.gux-action-buttons {
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: flex-start;
+  align-self: auto;
+  justify-content: space-between;
+  order: 0;
+}
+.gux-action-buttons .gux-negative-button {
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
+}
+.gux-action-buttons .gux-positive-button {
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
+}
+
+.gux-action-buttons {
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: flex-start;
+  align-self: auto;
+  justify-content: space-between;
+  order: 0;
+}
+.gux-action-buttons .gux-negative-button {
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
+}
+.gux-action-buttons .gux-positive-button {
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
+}

package/dist/collection/components/{stable/gux-advanced-dropdown → legacy/gux-advanced-dropdown-legacy}/dropdown-option/gux-dropdown-option.css

@@ -23,7 +23,7 @@ gux-dropdown-option[disabled] {
   cursor: default;
   opacity: 0.5;
 }
-gux-dropdown-option[disabled='false'] {
+gux-dropdown-option[disabled=false] {
   pointer-events: auto;
   cursor: pointer;
   opacity: 1;
@@ -32,8 +32,7 @@ gux-dropdown-option:not(:disabled)[selected] {
   color: #2e394c;
   background: #deeaff;
 }
-gux-dropdown-option:not(:disabled):hover,
-gux-dropdown-option:not(:disabled):focus-visible {
+gux-dropdown-option:not(:disabled):hover, gux-dropdown-option:not(:disabled):focus-visible {
   color: #fdfdfd;
   background: #2a60c8;
-}
+}

package/dist/collection/components/{stable/gux-advanced-dropdown → legacy/gux-advanced-dropdown-legacy}/dropdown-option/gux-dropdown-option.js

@@ -79,7 +79,7 @@ export class GuxDropdownOption {
   static get is() { return "gux-dropdown-option"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-dropdown-option.less"]
+      "$": ["gux-dropdown-option.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/legacy/gux-advanced-dropdown-legacy/gux-advanced-dropdown.css

@@ -0,0 +1,136 @@
+.gux-focus-ring-focused:focus {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-focused-within:focus-within {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-focused-visible:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-small-focused:focus {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-small-focused-within:focus-within {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-small-focused-visible:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+/*
+ * Typography styles and mixins.
+ */
+/* Helpers */
+/* Base typography */
+/* Headings */
+/* Anchor */
+.gux-icon-anchor gux-icon {
+  padding-right: var(--gse-ui-links-inLine-padding);
+}
+
+/* Custom Styles */
+:host {
+  color: #2e394c;
+}
+
+gux-popup {
+  display: block;
+  margin: 4px 0;
+}
+gux-popup .gux-select-field {
+  position: relative;
+  width: 100%;
+  height: 32px;
+}
+gux-popup .gux-select-field a.gux-select-input {
+  position: absolute;
+  inset: 0;
+  padding: 6px 24px 6px 12px;
+  overflow: hidden;
+  color: #2e394c;
+  text-overflow: ellipsis;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  background-color: #f6f7f9;
+  background-image: none;
+  border: 1px solid #6b7585;
+  border-radius: 4px;
+  box-shadow: inset 0 0 4px rgba(32, 41, 55, 0.16);
+}
+gux-popup .gux-select-field a.gux-select-input .gux-select-placeholder,
+gux-popup .gux-select-field a.gux-select-input .gux-select-value {
+  line-height: 20px;
+}
+gux-popup .gux-select-field a.gux-select-input .gux-select-placeholder {
+  color: #596373;
+}
+gux-popup .gux-select-field a.gux-select-input:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(117, 168, 255, 0.5);
+}
+gux-popup .gux-select-field .gux-icon-wrapper {
+  position: absolute;
+  top: 1px;
+  right: 8px;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  cursor: pointer;
+}
+gux-popup .gux-select-field .gux-icon-wrapper gux-icon {
+  width: 16px;
+  height: 16px;
+  color: #596373;
+}
+gux-popup .gux-select-field:hover .gux-icon-wrapper gux-icon {
+  color: #2e394c;
+}
+gux-popup .gux-advanced-dropdown-menu {
+  width: 100%;
+  background: #fdfdfd;
+  border: 1px solid #b4bccb;
+  border-radius: 4px;
+  box-shadow: 0 0 2px 0 rgba(32, 41, 55, 0.24);
+}
+gux-popup .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search {
+  margin: 8px 16px;
+}
+gux-popup .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search input::-webkit-search-cancel-button, gux-popup .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search input::-webkit-search-results-button, gux-popup .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search input::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
+}
+gux-popup .gux-dropdown-options {
+  padding: 8px 0;
+  margin: 0;
+  overflow-y: auto;
+  color: #2e394c;
+  background: #fdfdfd;
+  border-radius: 4px;
+  box-shadow: none;
+}
+
+gux-popup::part(gux-popup-container) {
+  width: inherit;
+}

package/dist/collection/components/{stable/gux-advanced-dropdown → legacy/gux-advanced-dropdown-legacy}/gux-advanced-dropdown.js

@@ -18,7 +18,7 @@ import advancedDropDownResources from './i18n/en.json';
 /**
  * @slot - collection of gux-dropdown-option elements
  */
-export class GuxAdvancedDropdown {
+export class GuxAdvancedDropdownLegacy {
   constructor() {
     this.disabled = false;
     this.placeholder = undefined;
@@ -195,11 +195,11 @@ export class GuxAdvancedDropdown {
       this.inputBox.focus();
     }
   }
-  static get is() { return "gux-advanced-dropdown"; }
+  static get is() { return "gux-advanced-dropdown-legacy"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-advanced-dropdown.less"]
+      "$": ["gux-advanced-dropdown.scss"]
     };
   }
   static get styleUrls() {
@@ -393,4 +393,4 @@ export class GuxAdvancedDropdown {
 }
 __decorate([
   OnClickOutside({ triggerEvents: 'mousedown' })
-], GuxAdvancedDropdown.prototype, "onClickOutside", null);
+], GuxAdvancedDropdownLegacy.prototype, "onClickOutside", null);

package/dist/collection/components/{stable/gux-disclosure-button → legacy/gux-disclosure-button-legacy}/gux-disclosure-button.css

@@ -1,7 +1,8 @@
 :host {
   height: 100%;
-  color: #2e394c;
+  color: var(--gse-ui-tabs-item-icon-iconColor);
 }
+
 .gux-disclosure-button-container {
   display: flex;
   flex-direction: row;
@@ -12,12 +13,12 @@
   width: 16px;
   padding: 0;
   margin: 0;
-  color: #2e394c;
+  color: var(--gse-ui-tabs-item-icon-iconColor);
   background: transparent;
   border-top: none;
-  border-right: 1px solid #e2e6ee;
+  border-right: 1px solid var(--gse-ui-tabs-item-divider-dividerColor);
   border-bottom: none;
-  border-left: 1px solid #e2e6ee;
+  border-left: 1px solid var(--gse-ui-tabs-item-divider-dividerColor);
 }
 .gux-disclosure-button-container .gux-disclosure-button gux-icon {
   width: 12px;
@@ -39,4 +40,4 @@
 }
 .gux-disclosure-button-container.gux-right .gux-disclosure-panel {
   order: 1;
-}
+}

package/dist/collection/components/{stable/gux-disclosure-button → legacy/gux-disclosure-button-legacy}/gux-disclosure-button.js

@@ -6,7 +6,7 @@ import translationResources from './i18n/en.json';
 /**
  * @slot panel-content - Slot for content of panel
  */
-export class GuxDisclosureButton {
+export class GuxDisclosureButtonLegacy {
   constructor() {
     this.panelId = randomHTMLId('gux-disclosure-button-panel');
     this.position = 'left';
@@ -43,11 +43,11 @@ export class GuxDisclosureButton {
         'gux-active': this.isOpen
       }, role: "region" }, h("slot", { name: "panel-content" }))));
   }
-  static get is() { return "gux-disclosure-button"; }
+  static get is() { return "gux-disclosure-button-legacy"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-disclosure-button.less"]
+      "$": ["gux-disclosure-button.scss"]
     };
   }
   static get styleUrls() {