genesys-spark-components 3.13.1 → 3.14.2

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

@@ -1,32 +1,46 @@
-button {
+.gux-container {
   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;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: flex-start;
+  align-items: center;
+  justify-content: flex-start;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+}
+.gux-container:focus-within {
+  border-bottom-color: #75a8ff;
+}
+.gux-container .gux-sort-button {
+  all: unset;
+  flex: 1 1 auto;
+  align-self: stretch;
+  order: 0;
   cursor: pointer;
-  background: transparent;
-  border: none;
-  outline: none;
 }
-button gux-icon {
+.gux-container .gux-sort-button .gux-sort-icon {
   float: right;
   width: 16px;
   height: 16px;
-  padding-right: 8.5px;
+  margin: 8px;
+  color: #d7dce5;
+}
+.gux-container .gux-sort-button .gux-sort-icon.gux-left {
+  float: left;
+}
+.gux-container .gux-sort-button.gux-active .gux-sort-icon {
+  color: #2e394c;
 }
-button:focus {
-  border-bottom: 3px solid #75a8ff;
+.gux-container .gux-resize-spacer {
+  flex: 0 1 auto;
+  align-self: stretch;
+  order: 0;
+  width: 2px;
 }
 .gux-sr-only:not(:focus):not(:active) {
   position: absolute;

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

@@ -1,52 +1,167 @@
-import { Component, h, Host, State, Listen, Element } from '@stencil/core';
+import { Component, Element, Event, Prop, State, h } from '@stencil/core';
 import { buildI18nForComponent } from '../../../../i18n';
+import { trackComponent } from '../../../../usage-tracking';
+import { getClosestElement } from '../../../../utils/dom/get-closest-element';
+import { onMutation } from '../../../../utils/dom/on-mutation';
 import tableResources from '../i18n/en.json';
 export class GuxSortControl {
-  sortDirectionEvent(event) {
-    this.colSortDirection = event.detail.sortDirection;
-    this.colLabel = event.detail.columnName;
+  constructor() {
+    this.includeUnsorted = false;
+    this.active = false;
+    this.sort = 'none';
+    this.isLeftAlignIcon = false;
   }
-  renderSrText() {
-    return (h("div", { class: "gux-sr-only" }, this.i18n(this.getSrTextLocalisationKey(), {
-      colLabel: this.colLabel
-    })));
+  async componentWillLoad() {
+    trackComponent(this.root);
+    this.i18n = await buildI18nForComponent(this.root, tableResources, 'gux-table');
+    this.tableHeader = getClosestElement('th', this.root);
+    this.thObserver = onMutation(this.tableHeader, () => {
+      this.setState();
+    }, {
+      attributes: true,
+      childList: false,
+      subtree: false
+    });
+    this.setState();
   }
-  getSrTextLocalisationKey() {
-    return `${this.colSortDirection}ColumnSort`;
+  disconnectedCallback() {
+    this.thObserver.disconnect();
   }
-  async componentWillRender() {
-    this.i18n = await buildI18nForComponent(this.root, tableResources);
+  onClick() {
+    this.guxsortchanged.emit({
+      columnName: this.tableHeader.dataset.columnName,
+      sortDirection: this.getNextSort(this.sort)
+    });
   }
-  componentDidLoad() {
-    this.colLabel = this.root.closest('th').getAttribute('data-column-name');
-    this.colSortDirection = this.root.closest('th').getAttribute('aria-sort');
+  setState() {
+    this.headerContent = this.tableHeader.textContent;
+    this.isLeftAlignIcon =
+      this.tableHeader.hasAttribute('data-cell-numeric') ||
+        this.tableHeader.hasAttribute('data-cell-action');
+    const ariaSort = this.tableHeader.getAttribute('aria-sort');
+    switch (ariaSort) {
+      case 'ascending':
+      case 'descending':
+        this.active = true;
+        this.sort = ariaSort;
+        break;
+      default:
+        this.active = false;
+        this.sort = 'none';
+    }
+  }
+  getIconName(colSortDirection) {
+    switch (colSortDirection) {
+      case 'descending':
+        return 'arrow-solid-up';
+      case 'ascending':
+      default:
+        return 'arrow-solid-down';
+    }
+  }
+  getNextSort(colSortDirection) {
+    switch (colSortDirection) {
+      case 'none':
+        return 'ascending';
+      case 'ascending':
+        return 'descending';
+      case 'descending':
+      default: {
+        if (this.includeUnsorted) {
+          return 'none';
+        }
+        return 'ascending';
+      }
+    }
+  }
+  getSRText(colSortDirection) {
+    switch (colSortDirection) {
+      case 'ascending':
+        return this.i18n('ascendingColumnSort', {
+          headerContent: this.headerContent
+        });
+      case 'descending': {
+        if (this.includeUnsorted) {
+          return this.i18n('descendingColumnSortIncludeUnsorted', {
+            headerContent: this.headerContent
+          });
+        }
+        return this.i18n('descendingColumnSort', {
+          headerContent: this.headerContent
+        });
+      }
+      default:
+        return this.i18n('noColumnSort', { headerContent: this.headerContent });
+    }
   }
   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())));
+    return (h("div", { class: "gux-container" },
+      h("button", { class: {
+          'gux-sort-button': true,
+          'gux-active': this.active
+        }, type: "button", onClick: () => this.onClick() },
+        h("span", { class: "gux-sr-only" }, this.getSRText(this.sort)),
+        h("gux-icon", { class: {
+            'gux-sort-icon': true,
+            'gux-left': this.isLeftAlignIcon
+          }, "icon-name": this.getIconName(this.sort), decorative: true })),
+      h("div", { class: "gux-resize-spacer" })));
   }
   static get is() { return "gux-sort-control"; }
   static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
   static get originalStyleUrls() { return {
     "$": ["gux-sort-control.less"]
   }; }
   static get styleUrls() { return {
     "$": ["gux-sort-control.css"]
   }; }
+  static get properties() { return {
+    "includeUnsorted": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "include-unsorted",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
   static get states() { return {
-    "colLabel": {},
-    "colSortDirection": {}
+    "headerContent": {},
+    "active": {},
+    "sort": {},
+    "isLeftAlignIcon": {}
   }; }
-  static get elementRef() { return "root"; }
-  static get listeners() { return [{
+  static get events() { return [{
+      "method": "guxsortchanged",
       "name": "guxsortchanged",
-      "method": "sortDirectionEvent",
-      "target": "body",
-      "capture": false,
-      "passive": false
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "GuxTableSortState",
+        "resolved": "GuxTableSortState",
+        "references": {
+          "GuxTableSortState": {
+            "location": "import",
+            "path": "../gux-table.types"
+          }
+        }
+      }
     }]; }
+  static get elementRef() { return "root"; }
 }

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

@@ -0,0 +1,82 @@
+export default {
+  notSorted: {
+    description: 'Not sorted',
+    html: `
+      <table>
+        <thead>
+          <tr>
+            <th data-column-name="c1">Column Header 1 <gux-sort-control /></th>
+            <th data-column-name="c2">Column Header 2</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Column 1, Row 1</td>
+            <td>Column 2, Row 1</td>
+          </tr>
+        </tbody>
+      </table>
+    `,
+    onclickSortDirection: 'ascending'
+  },
+  sortedAscending: {
+    description: 'Sorted ascending',
+    html: `
+      <table>
+        <thead>
+          <tr>
+            <th data-column-name="c1" aria-sort="ascending">Column Header 1 <gux-sort-control /></th>
+            <th data-column-name="c2">Column Header 2</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Column 1, Row 1</td>
+            <td>Column 2, Row 1</td>
+          </tr>
+        </tbody>
+      </table>
+    `,
+    onclickSortDirection: 'descending'
+  },
+  sortedDescending: {
+    description: 'Sorted descending',
+    html: `
+      <table>
+        <thead>
+          <tr>
+            <th data-column-name="c1" aria-sort="descending">Column Header 1 <gux-sort-control /></th>
+            <th data-column-name="c2">Column Header 2</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Column 1, Row 1</td>
+            <td>Column 2, Row 1</td>
+          </tr>
+        </tbody>
+      </table>
+    `,
+    onclickSortDirection: 'ascending'
+  },
+  sortedDescendingUnsortedAllowed: {
+    description: 'Sorted descending, unsorted allowed',
+    html: `
+      <table>
+        <thead>
+          <tr>
+            <th data-column-name="c1" aria-sort="descending">Column Header 1 <gux-sort-control include-unsorted/></th>
+            <th data-column-name="c2">Column Header 2</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Column 1, Row 1</td>
+            <td>Column 2, Row 1</td>
+          </tr>
+        </tbody>
+      </table>
+    `,
+    onclickSortDirection: 'none'
+  }
+};

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

@@ -1,4 +1,4 @@
-import { Component, Host, Element, Event, getAssetPath, h, Listen, Method, Prop, readTask, forceUpdate, State } from '@stencil/core';
+import { Component, Host, Element, Event, h, Listen, Method, Prop, readTask, forceUpdate, State } from '@stencil/core';
 import { buildI18nForComponent } from '../../../i18n';
 import { whenEventIsFrom } from '../../../utils/dom/when-event-is-from';
 import { randomHTMLId } from '../../../utils/dom/random-html-id';
@@ -48,7 +48,6 @@ export class GuxTable {
     if (this.resizableColumns) {
       this.prepareResizableColumns();
     }
-    this.prepareSortableColumns();
     this.prepareSelectableRows();
     this.checkHorizontalScroll();
     this.checkVerticalScroll();
@@ -120,12 +119,6 @@ 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'));
   }
@@ -317,66 +310,6 @@ export class GuxTable {
   getElementComputedWidth(element) {
     return parseInt(window.getComputedStyle(element).getPropertyValue('width').split('px')[0], 10);
   }
-  /******************************* Sortable Columns *******************************/
-  prepareSortableColumns() {
-    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
-   * asset paths to generate the urls
-   */
-  prepareSortableColumnsStyles() {
-    const styleId = 'gux-table-sortable-styles';
-    if (document.getElementById(styleId) == null) {
-      const styleElement = document.createElement('style');
-      styleElement.id = styleId;
-      const ascArrowIcon = getAssetPath(`./icons/arrow-solid-down.svg`);
-      const descArrowIcon = getAssetPath(`./icons/arrow-solid-up.svg`);
-      const sortAscContent = this.i18n('sortAsc');
-      const sortDescContent = this.i18n('sortDesc');
-      styleElement.innerHTML = `
-      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);
-    }
-  }
   setResizableColumnsStyles() {
     const styleElement = document.getElementById(`${this.tableId}-resizable-styles`);
     let columnsStyles = '';

package/dist/collection/components/stable/gux-accordion/gux-accordion-section/gux-accordion-section.css

@@ -83,6 +83,10 @@ section.gux-disabled > * {
   width: 16px;
   height: 16px;
 }
+.gux-header .gux-header-icon.gux-arrow-position-before-text {
+  order: -1;
+  margin: 0 8px 0 0;
+}
 .gux-header .gux-header-icon.gux-expanded {
   transform: rotate(-180deg);
 }

package/dist/collection/components/stable/gux-accordion/gux-accordion-section/gux-accordion-section.js

@@ -9,7 +9,13 @@ import { logError } from '@utils/error/log-error';
 export class GuxAccordionSection {
   constructor() {
     this.sectionId = randomHTMLId('gux-accordion-section');
+    /**
+     * Position of the arrow chevron icon. Position can be 'default' or 'before-text'.  'beside-text' is deprecated and will be removed in v4.
+     */
     this.arrowPosition = 'default';
+    /**
+     * The content layout used in the accordion section. 'text' layout provides default padding, 'custom' removes default padding.
+     */
     this.contentLayout = 'text';
     this.open = false;
     this.disabled = false;
@@ -23,6 +29,10 @@ export class GuxAccordionSection {
   toggle() {
     this.open = !this.open;
   }
+  isArrowPositionBeforeText() {
+    return this.arrowPosition === 'before-text';
+  }
+  // arrow position 'beside-text' will be removed in v4 (COMUI-1128)
   isArrowPositionedBesideText() {
     return this.arrowPosition === 'beside-text';
   }
@@ -50,7 +60,8 @@ export class GuxAccordionSection {
           h("slot", { onSlotchange: () => this.handleSlotChange('subheader'), name: "subheader" })),
         h("div", { class: {
             'gux-header-icon': true,
-            'gux-expanded': this.open
+            'gux-expanded': this.open,
+            'gux-arrow-position-before-text': this.isArrowPositionBeforeText()
           } },
           h("gux-icon", { decorative: true, "icon-name": "chevron-small-down" }))),
       h("div", { id: this.sectionId, class: {
@@ -74,7 +85,7 @@ export class GuxAccordionSection {
       "mutable": false,
       "complexType": {
         "original": "GuxAccordionSectionArrowPosition",
-        "resolved": "\"beside-text\" | \"default\"",
+        "resolved": "\"before-text\" | \"beside-text\" | \"default\"",
         "references": {
           "GuxAccordionSectionArrowPosition": {
             "location": "import",
@@ -86,7 +97,7 @@ export class GuxAccordionSection {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Position of the arrow chevron icon. Position can be 'default' or 'before-text'.  'beside-text' is deprecated and will be removed in v4."
       },
       "attribute": "arrow-position",
       "reflect": false,
@@ -109,7 +120,7 @@ export class GuxAccordionSection {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "The content layout used in the accordion section. 'text' layout provides default padding, 'custom' removes default padding."
       },
       "attribute": "content-layout",
       "reflect": false,

package/dist/deploy-info.json

@@ -1,9 +1,9 @@
 {
   "name": "spark-components",
-  "version": "3.13.0",
+  "version": "3.14.1",
   "ecosystem": "pc",
   "team": "Core UI",
   "indexFiles": [],
-  "build": "99",
-  "buildDate": "2022-07-27T09:35:14.951607Z"
+  "build": "105",
+  "buildDate": "2022-08-02T09:19:57.058384Z"
 }

package/dist/esm/en-66f138f8.js

@@ -0,0 +1,28 @@
+const emptyMessage = "No data available";
+const scrollLeft = "Scroll Left";
+const scrollRight = "Scroll Right";
+const selectAllTableRows = "Select All Table Rows";
+const selectTableRow = "Select Table Row";
+const sortAsc = "Sorted Ascending";
+const sortDesc = "Sorted Descending";
+const tableOptions = "Table Options";
+const noColumnSort = "{headerContent}. The table is not currently sorted by this column. Click the column header to sort the table by this column in ascending order";
+const ascendingColumnSort = "{headerContent}. The table is currently sorted by this column in ascending order. Click the column header to sort the table by this column in descending order";
+const descendingColumnSort = "{headerContent}. The table is currently sorted by this column in descending order. Click the column header to sort the table by this column in ascending order";
+const descendingColumnSortIncludeUnsorted = "{headerContent}. The table is currently sorted by this column in descending order. Click the column header to not sort the table by this column";
+const tableResources = {
+	emptyMessage: emptyMessage,
+	scrollLeft: scrollLeft,
+	scrollRight: scrollRight,
+	selectAllTableRows: selectAllTableRows,
+	selectTableRow: selectTableRow,
+	sortAsc: sortAsc,
+	sortDesc: sortDesc,
+	tableOptions: tableOptions,
+	noColumnSort: noColumnSort,
+	ascendingColumnSort: ascendingColumnSort,
+	descendingColumnSort: descendingColumnSort,
+	descendingColumnSortIncludeUnsorted: descendingColumnSortIncludeUnsorted
+};
+
+export { tableResources as t };