genesys-spark-components 3.5.0 → 3.7.1

package/dist/collection/components/beta/gux-dropdown-multi/gux-dropdown-multi.js

@@ -0,0 +1,458 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, Element, forceUpdate, h, Listen, Method, Prop, State, Watch } from '@stencil/core';
+import { OnClickOutside } from '../../../utils/decorator/on-click-outside';
+import { buildI18nForComponent } from '../../../i18n';
+import simulateNativeEvent from '../../../utils/dom/simulate-native-event';
+import { trackComponent } from '../../../usage-tracking';
+import translationResources from './i18n/en.json';
+import { getSearchOption } from '../../stable/gux-listbox/gux-listbox.service';
+/**
+ * @slot - for a gux-listbox-multi containing gux-option-multi children
+ */
+export class GuxDropdownMulti {
+  constructor() {
+    this.disabled = false;
+    this.required = false;
+    this.filterable = false;
+    this.expanded = false;
+    this.filter = '';
+  }
+  focusSelectedItemAfterRender(expanded) {
+    if (expanded && this.listboxElement) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          this.listboxElement.focus();
+          if (this.filterable) {
+            this.filterElement.focus();
+          }
+        });
+      });
+    }
+    if (!expanded) {
+      this.filter = '';
+    }
+  }
+  validateValue(newValue) {
+    if (newValue === undefined) {
+      if (this.listboxElement) {
+        this.listboxElement.value = newValue;
+      }
+      return;
+    }
+    const selectedListboxOptionElement = this.getOptionElementByValue(newValue);
+    if (selectedListboxOptionElement) {
+      this.listboxElement.value = newValue;
+      return;
+    }
+    this.value = undefined;
+  }
+  /**
+   * Gets the currently selected values.
+   */
+  getSelectedValues() {
+    var _a;
+    return Promise.resolve(((_a = this.value) === null || _a === void 0 ? void 0 : _a.split(',')) || []);
+  }
+  onKeydown(event) {
+    switch (event.key) {
+      case 'Escape':
+        if (this.filterable) {
+          if (document.activeElement === this.listboxElement) {
+            return this.filterElement.focus();
+          }
+        }
+        this.collapseListbox('focusFieldButton');
+        return;
+      case 'Tab':
+        if (this.shiftTabFromFilterListbox(event)) {
+          event.preventDefault();
+          return this.filterElement.focus();
+        }
+        else if (this.shiftTabFromExpandedFilterInput(event)) {
+          event.preventDefault();
+          return this.collapseListbox('focusFieldButton');
+        }
+        else {
+          this.collapseListbox('noFocusChange');
+        }
+        return;
+      case 'ArrowDown':
+        if (this.activeElementNotListbox()) {
+          event.preventDefault();
+          this.expanded = true;
+        }
+        return;
+    }
+  }
+  onInternallistboxoptionsupdated(event) {
+    event.stopPropagation();
+    forceUpdate(this.root);
+  }
+  onGuxclearselected(event) {
+    event.stopPropagation();
+    this.value = '';
+    if (this.listboxElement) {
+      this.listboxElement.value = undefined;
+    }
+    this.validateValue(this.value);
+    this.fieldButtonElement.focus();
+  }
+  onBlur(event) {
+    this.stopPropagationOfInternalFocusEvents(event);
+  }
+  onFocus(event) {
+    this.stopPropagationOfInternalFocusEvents(event);
+  }
+  onFocusout(event) {
+    this.stopPropagationOfInternalFocusEvents(event);
+  }
+  onFocusin(event) {
+    this.stopPropagationOfInternalFocusEvents(event);
+  }
+  onClickOutside() {
+    this.collapseListbox('noFocusChange');
+  }
+  async componentWillLoad() {
+    trackComponent(this.root);
+    this.i18n = await buildI18nForComponent(this.root, translationResources);
+    this.listboxElement = this.root.querySelector('gux-listbox-multi');
+    this.validateValue(this.value);
+  }
+  componentDidLoad() {
+    this.listboxElement.addEventListener('input', (event) => {
+      event.stopPropagation();
+      this.updateValue(event.target.value);
+    });
+    this.listboxElement.addEventListener('change', (event) => {
+      event.stopPropagation();
+    });
+  }
+  componentWillRender() {
+    this.validateValue(this.value);
+    this.listboxElement.filter = this.filter;
+  }
+  stopPropagationOfInternalFocusEvents(event) {
+    if (this.root.contains(event.relatedTarget)) {
+      return event.stopImmediatePropagation();
+    }
+  }
+  getOptionElementByValue(value) {
+    const listboxOptionElements = Array.from(this.root.querySelectorAll('gux-option-multi'));
+    const values = value ? value.split(',') : undefined;
+    if (values) {
+      return listboxOptionElements.filter(element => values.includes(element.value));
+    }
+    return;
+  }
+  fieldButtonClick() {
+    this.expanded = !this.expanded;
+  }
+  fieldButtonInputClick() {
+    if (!this.expanded) {
+      this.expanded = !this.expanded;
+    }
+  }
+  filterInput(event) {
+    event.stopPropagation();
+    this.filter = this.filterElement.value;
+  }
+  shiftTabFromExpandedFilterInput(event) {
+    return (event.shiftKey &&
+      this.filterable &&
+      this.expanded &&
+      !(document.activeElement === this.listboxElement));
+  }
+  shiftTabFromFilterListbox(event) {
+    return (event.shiftKey &&
+      this.filterable &&
+      document.activeElement === this.listboxElement);
+  }
+  activeElementNotListbox() {
+    return document.activeElement !== this.listboxElement;
+  }
+  filterKeydown(event) {
+    switch (event.key) {
+      case 'ArrowDown':
+        event.stopImmediatePropagation();
+        this.listboxElement.focus();
+        return;
+      case 'Enter':
+        void this.listboxElement.guxSelectActive();
+        event.preventDefault();
+        return;
+    }
+  }
+  filterKeyup(event) {
+    switch (event.key) {
+      case ' ':
+        event.preventDefault();
+        return;
+    }
+  }
+  collapseListbox(focusChange) {
+    if (this.expanded) {
+      this.expanded = false;
+    }
+    if (focusChange === 'focusFieldButton') {
+      this.fieldButtonElement.focus();
+    }
+  }
+  updateValue(newValue) {
+    if (this.value !== newValue) {
+      this.value = newValue;
+      simulateNativeEvent(this.root, 'input');
+      simulateNativeEvent(this.root, 'change');
+    }
+  }
+  getSuggestionText(filter) {
+    const filterLength = filter.length;
+    if (filterLength > 0) {
+      const option = getSearchOption(this.listboxElement, filter);
+      if (option) {
+        return option.textContent.substring(filterLength);
+      }
+    }
+    return '';
+  }
+  renderTargetDisplay() {
+    return (h("div", { class: "gux-placeholder" },
+      this.placeholder || this.i18n('noSelection'),
+      this.getSrSelectedText()));
+  }
+  getSrSelectedText() {
+    const selectedListboxOptionElement = this.getOptionElementByValue(this.value);
+    if (selectedListboxOptionElement === null || selectedListboxOptionElement === void 0 ? void 0 : selectedListboxOptionElement.length) {
+      return (h("span", { class: "gux-sr-only" }, this.i18n('numberSelected', {
+        numberSelected: selectedListboxOptionElement.length.toString()
+      })));
+    }
+  }
+  renderTag() {
+    const selectedListboxOptionElement = this.getOptionElementByValue(this.value);
+    if (selectedListboxOptionElement === null || selectedListboxOptionElement === void 0 ? void 0 : selectedListboxOptionElement.length) {
+      return (h("gux-dropdown-multi-tag", { disabled: this.disabled, "number-selected": selectedListboxOptionElement.length }));
+    }
+  }
+  renderFilterInputField() {
+    if (this.expanded && this.filterable) {
+      return (h("div", { class: "gux-field gux-input-field" },
+        h("div", { class: "gux-field-content" },
+          h("div", { class: "gux-filter" },
+            h("div", { class: "gux-filter-display" },
+              h("span", { class: "gux-filter-text" }, this.filter),
+              h("span", { class: "gux-filter-suggestion" }, this.getSuggestionText(this.filter))),
+            h("div", { class: "input-and-dropdown-button" },
+              h("input", { onClick: this.fieldButtonInputClick.bind(this), placeholder: this.placeholder || this.i18n('noSelection'), class: "gux-filter-input", type: "text", "aria-label": this.i18n('filterResults'), ref: el => (this.filterElement = el), onInput: this.filterInput.bind(this), onKeyDown: this.filterKeydown.bind(this), onKeyUp: this.filterKeyup.bind(this) }))))));
+    }
+  }
+  renderPopup() {
+    return (h("div", { slot: "popup", class: "gux-listbox-container" },
+      h("slot", null)));
+  }
+  renderTarget() {
+    return (h("div", { class: {
+        'gux-target-container': true,
+        'gux-target-container-expanded': this.expanded && this.filterable,
+        'gux-target-container-collapsed': !(this.expanded && this.filterable)
+      }, slot: "target" },
+      this.renderFilterInputField(),
+      h("button", { type: "button", class: "gux-field gux-field-button", disabled: this.disabled, onClick: this.fieldButtonClick.bind(this), ref: el => (this.fieldButtonElement = el), "aria-haspopup": "listbox", "aria-expanded": this.expanded.toString() },
+        this.renderTargetContent(),
+        h("gux-icon", { class: {
+            'gux-expand-icon': true
+          }, "screenreader-text": this.i18n('dropdown'), iconName: "chevron-small-down" }))));
+  }
+  renderTargetContent() {
+    if (!(this.expanded && this.filterable)) {
+      return (h("div", { class: "gux-field-content" }, this.renderTargetDisplay()));
+    }
+  }
+  render() {
+    return [
+      h("div", { class: "gux-dropdown-container" },
+        h("gux-popup", { expanded: this.expanded, disabled: this.disabled },
+          this.renderTarget(),
+          this.renderPopup()),
+        this.renderTag())
+    ];
+  }
+  static get is() { return "gux-dropdown-multi-beta"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["gux-dropdown-multi.less"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["gux-dropdown-multi.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": 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"
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "placeholder",
+      "reflect": false
+    },
+    "filterable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "filterable",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "expanded": {},
+    "filter": {}
+  }; }
+  static get methods() { return {
+    "getSelectedValues": {
+      "complexType": {
+        "signature": "() => Promise<string[]>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<string[]>"
+      },
+      "docs": {
+        "text": "Gets the currently selected values.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "root"; }
+  static get watchers() { return [{
+      "propName": "expanded",
+      "methodName": "focusSelectedItemAfterRender"
+    }, {
+      "propName": "value",
+      "methodName": "validateValue"
+    }]; }
+  static get listeners() { return [{
+      "name": "keydown",
+      "method": "onKeydown",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "internallistboxoptionsupdated",
+      "method": "onInternallistboxoptionsupdated",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "guxclearselected",
+      "method": "onGuxclearselected",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "blur",
+      "method": "onBlur",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "focus",
+      "method": "onFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "focusout",
+      "method": "onFocusout",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "focusin",
+      "method": "onFocusin",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}
+__decorate([
+  OnClickOutside({ triggerEvents: 'mousedown' })
+], GuxDropdownMulti.prototype, "onClickOutside", null);

package/dist/collection/components/beta/gux-table/gux-sort-control/gux-sort-control.css

@@ -0,0 +1,39 @@
+button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  display: inline;
+  width: 100%;
+  height: 100%;
+  padding: 4px;
+  margin: 1px;
+  font-size: 100%;
+  font-weight: bold;
+  color: #2e394c;
+  text-align: left;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  outline: none;
+}
+button gux-icon {
+  float: right;
+  width: 16px;
+  height: 16px;
+  padding-right: 8.5px;
+}
+button:focus {
+  border-bottom: 3px solid #75a8ff;
+}
+.gux-sr-only:not(:focus):not(:active) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

package/dist/collection/components/beta/gux-table/gux-sort-control/gux-sort-control.js

@@ -0,0 +1,50 @@
+import { Component, h, Host, State, Listen, Element } from '@stencil/core';
+import { buildI18nForComponent } from '../../../../i18n';
+import tableResources from '../i18n/en.json';
+export class GuxSortControl {
+  sortDirectionEvent(event) {
+    this.colSortDirection = event.detail.sortDirection;
+    this.colLabel = event.detail.columnName;
+  }
+  renderSrText() {
+    return (h("div", { class: "gux-sr-only" }, this.i18n('colSortDirection', {
+      colLabel: this.colLabel,
+      colSortDirection: this.colSortDirection
+    })));
+  }
+  async componentWillRender() {
+    this.i18n = await buildI18nForComponent(this.root, tableResources);
+  }
+  componentDidLoad() {
+    this.colLabel = this.root.closest('th').getAttribute('data-column-name');
+    this.colSortDirection = this.root.closest('th').getAttribute('aria-sort');
+  }
+  render() {
+    return (h(Host, null,
+      h("button", { type: "button" },
+        h("gux-icon", { "icon-name": this.colSortDirection === 'ascending'
+            ? 'arrow-solid-down'
+            : 'arrow-solid-up', decorative: true }),
+        this.renderSrText())));
+  }
+  static get is() { return "gux-sort-control"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["gux-sort-control.less"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["gux-sort-control.css"]
+  }; }
+  static get states() { return {
+    "colLabel": {},
+    "colSortDirection": {}
+  }; }
+  static get elementRef() { return "root"; }
+  static get listeners() { return [{
+      "name": "guxsortchanged",
+      "method": "sortDirectionEvent",
+      "target": "body",
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/beta/gux-table/gux-table.js

@@ -120,6 +120,12 @@ export class GuxTable {
   get tableColumns() {
     return Array.from(this.slottedTable.querySelectorAll('thead th'));
   }
+  get tableColumnsDataSortable() {
+    return Array.from(this.slottedTable.querySelectorAll('thead th[data-sortable]'));
+  }
+  get sortControlCol() {
+    return Array.from(this.slottedTable.querySelectorAll('thead th gux-sort-control'));
+  }
   get rowCheckboxes() {
     return Array.from(this.slottedTable.querySelectorAll('tbody tr td gux-row-select'));
   }
@@ -313,32 +319,42 @@ export class GuxTable {
   }
   /******************************* Sortable Columns *******************************/
   prepareSortableColumns() {
-    const columnsElements = this.tableColumns;
-    this.prepareSortableColumnsStyles();
-    columnsElements.forEach((column) => {
-      if (Object.prototype.hasOwnProperty.call(column.dataset, 'sortable')) {
-        column.onclick = (event) => {
-          if (!this.columnResizeHover) {
-            const columnElement = event.currentTarget;
-            const sortDirection = columnElement.dataset.sort || '';
-            let newSortDirection = null;
-            switch (sortDirection) {
-              case '':
-              case 'desc':
-                newSortDirection = 'asc';
-                break;
-              case 'asc':
-                newSortDirection = 'desc';
-                break;
-            }
-            this.guxsortchanged.emit({
-              columnName: columnElement.dataset.columnName,
-              sortDirection: newSortDirection
-            });
-          }
-        };
+    let sortControlSelected = [];
+    const sortControl = document.querySelector('gux-sort-control');
+    sortControl
+      ? (sortControlSelected = this.sortControlCol)
+      : (sortControlSelected = this.tableColumnsDataSortable);
+    /* Only apply sortable styles if the data-sortable way of sorting is being used(ie the old way) and not the <gux-sort-control /> */
+    this.tableColumnsDataSortable.forEach((tableHeader) => {
+      if (tableHeader.hasAttribute('data-sortable')) {
+        this.prepareSortableColumnsStyles();
       }
     });
+    sortControlSelected.forEach((column) => {
+      column.onclick = (event) => {
+        if (!this.columnResizeHover) {
+          const button = event.target;
+          const columnElement = column.hasAttribute('data-sortable')
+            ? event.currentTarget
+            : button.parentElement;
+          const sortDirection = columnElement.getAttribute('aria-sort') || '';
+          let newSortDirection = null;
+          switch (sortDirection) {
+            case '':
+            case 'descending':
+              newSortDirection = 'ascending';
+              break;
+            case 'ascending':
+              newSortDirection = 'descending';
+              break;
+          }
+          this.guxsortchanged.emit({
+            columnName: columnElement.dataset.columnName,
+            sortDirection: newSortDirection
+          });
+        }
+      };
+    });
   }
   /**
    * Create sort styles if they don't exist. We can't make these static because we need to look up
@@ -354,9 +370,9 @@ export class GuxTable {
       const sortAscContent = this.i18n('sortAsc');
       const sortDescContent = this.i18n('sortDesc');
       styleElement.innerHTML = `
-      th[data-sortable]:hover:after{content: "${sortAscContent}";background-image: url("${ascArrowIcon}");}
-      th[data-sort="asc"]:after{background-image:url("${ascArrowIcon}")!important;content:"${sortAscContent}"!important;}
-      th[data-sort="desc"]:after{background-image:url("${descArrowIcon}")!important;content:"${sortDescContent}"!important;}
+      th[data-sortable]:focus-within:after{content: "${sortAscContent}";background-image: url("${ascArrowIcon}");}
+      th[aria-sort="ascending"]:after{background-image:url("${ascArrowIcon}")!important;content:"${sortAscContent}"!important;}
+      th[aria-sort="descending"]:after{background-image:url("${descArrowIcon}")!important;content:"${sortDescContent}"!important;}
     `;
       document.querySelector('head').appendChild(styleElement);
     }

package/dist/collection/components/beta/gux-tag/gux-tag.js

@@ -156,23 +156,6 @@ export class GuxTag {
       "attribute": "removable",
       "reflect": false,
       "defaultValue": "false"
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Tag icon name."
-      },
-      "attribute": "icon",
-      "reflect": false
     }
   }; }
   static get states() { return {

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

@@ -17,6 +17,7 @@ import { getSearchOption } from '../gux-listbox/gux-listbox.service';
 export class GuxDropdown {
   constructor() {
     this.disabled = false;
+    this.required = false;
     this.filterable = false;
     this.expanded = false;
     this.filter = '';
@@ -281,6 +282,24 @@ export class GuxDropdown {
       "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"
+    },
     "placeholder": {
       "type": "string",
       "mutable": false,