npm - genesys-spark-components - Versions diffs - 3.5.0 → 3.7.1 - Mend

genesys-spark-components 3.5.0 → 3.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (437) hide show

package/dist/cjs/gux-side-panel-legacy.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-33b1b88e.js');
-const usageTracking = require('./usage-tracking-1ddbe5f1.js');
+const index = require('./index-525cfec0.js');
+const usageTracking = require('./usage-tracking-39a72be3.js');
 const guxSidePanelCss = "gux-side-panel-legacy aside{position:relative;display:flex;flex-direction:row-reverse;width:49px;height:100%;color:#2e394c;background-color:#fdfdfd}gux-side-panel-legacy aside.gux-left{flex-direction:row}gux-side-panel-legacy aside.gux-left .gux-panel-content{left:49px}gux-side-panel-legacy aside.gux-right .gux-panel-content{right:49px}gux-side-panel-legacy aside .gux-panel-icons{border:1px solid #e2e6ee}gux-side-panel-legacy aside .gux-panel-icons gux-side-panel-button{display:flex;flex-direction:column}gux-side-panel-legacy aside .gux-panel-content{position:absolute;width:280px;height:100%}gux-side-panel-legacy aside .gux-panel-content [slot='side-panel-content']{height:100%}gux-side-panel-legacy aside .gux-panel-content.gux-closed{display:none}.gux-side-panel-dark-theme{color:#fdfdfd}.gux-side-panel-dark-theme aside{background-color:#2e394c}.gux-side-panel-dark-theme aside .gux-panel-icons{border-color:#202937}.gux-dark-theme gux-side-panel-legacy{color:#fdfdfd}.gux-dark-theme gux-side-panel-legacy aside{background-color:#2e394c}.gux-dark-theme gux-side-panel-legacy aside .gux-panel-icons{border-color:#202937}gux-side-panel-legacy.gux-dark-theme{color:#fdfdfd}gux-side-panel-legacy.gux-dark-theme aside{background-color:#2e394c}gux-side-panel-legacy.gux-dark-theme aside .gux-panel-icons{border-color:#202937}.gux-side-panel-light-theme{color:#2e394c}.gux-light-theme gux-side-panel-legacy{color:#2e394c}gux-side-panel-legacy.gux-light-theme{color:#2e394c}gux-side-panel-legacy{color:#2e394c}";

package/dist/cjs/gux-simple-toast.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-33b1b88e.js');
-const usageTracking = require('./usage-tracking-1ddbe5f1.js');
+const index = require('./index-525cfec0.js');
+const usageTracking = require('./usage-tracking-39a72be3.js');
 const guxSimpleToastCss = ":host{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;width:286px;padding:8px 16px;margin-bottom:4px;color:#2e394c;background:#f6f7f9;border:1px solid;border-color:#b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}.gux-icon{flex:0 1 auto;align-self:auto;order:0;margin:6px 0}.gux-icon.gux-alert{color:#ea0b0b}.gux-icon.gux-warning{color:#ffae00}.gux-icon.gux-positive{color:#3c8527}.gux-icon.gux-neutral{color:#203b73}.gux-icon gux-icon{width:12px;height:12px}.gux-message{flex:1 1 auto;align-self:auto;order:0;max-height:48px;margin:0 12px 0 8px;overflow:hidden;line-height:24px;text-overflow:ellipsis}";

package/dist/cjs/gux-sort-control.cjs.entry.js ADDED Viewed

@@ -0,0 +1,42 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-525cfec0.js');
+const index$1 = require('./index-57ec1998.js');
+const en = require('./en-3d7b896f.js');
+require('./get-closest-element-ab4b2eee.js');
+const guxSortControlCss = "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}";
+const GuxSortControl = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  sortDirectionEvent(event) {
+    this.colSortDirection = event.detail.sortDirection;
+    this.colLabel = event.detail.columnName;
+  }
+  renderSrText() {
+    return (index.h("div", { class: "gux-sr-only" }, this.i18n('colSortDirection', {
+      colLabel: this.colLabel,
+      colSortDirection: this.colSortDirection
+    })));
+  }
+  async componentWillRender() {
+    this.i18n = await index$1.buildI18nForComponent(this.root, en.tableResources);
+  }
+  componentDidLoad() {
+    this.colLabel = this.root.closest('th').getAttribute('data-column-name');
+    this.colSortDirection = this.root.closest('th').getAttribute('aria-sort');
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("button", { type: "button" }, index.h("gux-icon", { "icon-name": this.colSortDirection === 'ascending'
+        ? 'arrow-solid-down'
+        : 'arrow-solid-up', decorative: true }), this.renderSrText())));
+  }
+  get root() { return index.getElement(this); }
+};
+GuxSortControl.style = guxSortControlCss;
+exports.gux_sort_control = GuxSortControl;

package/dist/cjs/gux-submenu.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-33b1b88e.js');
+const index = require('./index-525cfec0.js');
 const guxMenu_common = require('./gux-menu.common-6a6c2b85.js');
 const popper = require('./popper-71bf3058.js');

package/dist/cjs/gux-switch-item.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-33b1b88e.js');
+const index = require('./index-525cfec0.js');
 const guxSwitchItemCss = "gux-switch-item>.gux-switch-item{font-family:Roboto, sans-serif;font-weight:400;font-size:12px;line-height:20px;font:unset;color:#2e394c;text-align:center;background:none;border:none;outline:none}gux-switch-item>.gux-switch-item>gux-icon svg{fill:#99a4b8}gux-switch-item[disabled]{pointer-events:none;opacity:0.5}gux-switch-item.gux-selected{font-family:Roboto, sans-serif;font-weight:400;font-weight:700}gux-switch>gux-switch-item .gux-switch-item{padding:0 8px 4px;border-bottom:1px solid #e2e6ee}gux-switch>gux-switch-item .gux-switch-item:focus,gux-switch>gux-switch-item .gux-switch-item:hover{padding:0 8px 1px;border-bottom:4px solid #2a60c8;outline:none}gux-switch>gux-switch-item .gux-switch-item:focus>gux-icon svg,gux-switch>gux-switch-item .gux-switch-item:hover>gux-icon svg{fill:#2e394c}gux-switch>gux-switch-item .gux-switch-item>gux-icon{width:32px;height:32px}gux-switch>gux-switch-item.gux-selected .gux-switch-item{padding:0 8px 1px;border-bottom:4px solid #2a60c8}gux-switch>gux-switch-item.gux-selected .gux-switch-item>gux-icon svg{fill:#2e394c}gux-switch.gux-small>gux-switch-item .gux-switch-item{font-family:Roboto, sans-serif;font-weight:400;font-size:11px;line-height:16px;padding:0 4px;border-bottom:1px solid #e2e6ee}gux-switch.gux-small>gux-switch-item .gux-switch-item:focus,gux-switch.gux-small>gux-switch-item .gux-switch-item:hover{border-bottom-color:#2e394c}gux-switch.gux-small>gux-switch-item .gux-switch-item>gux-icon{width:24px;height:24px}gux-switch.gux-small>gux-switch-item.gux-selected .gux-switch-item{border-bottom-color:#2e394c}";

package/dist/cjs/gux-switch.cjs.entry.js CHANGED Viewed

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-33b1b88e.js');
+const index = require('./index-525cfec0.js');
 const simulateNativeEvent = require('./simulate-native-event-fe3e62da.js');
-const usageTracking = require('./usage-tracking-1ddbe5f1.js');
+const usageTracking = require('./usage-tracking-39a72be3.js');
 const guxSwitchCss = "gux-switch{display:flex;align-items:flex-end}";

package/dist/cjs/gux-tab-advanced-list.cjs.entry.js CHANGED Viewed

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-33b1b88e.js');
+const index = require('./index-525cfec0.js');
 const sortable_esm = require('./sortable.esm-d03e1767.js');
-const onMutation = require('./on-mutation-2e4dd956.js');
-const index$1 = require('./index-2202ad01.js');
+const onMutation = require('./on-mutation-347de78d.js');
+const index$1 = require('./index-57ec1998.js');
 const eventIsFrom = require('./event-is-from-ad1044f2.js');
 const en = require('./en-eb56dc17.js');
 require('./get-closest-element-ab4b2eee.js');

package/dist/cjs/gux-tab-advanced-panel.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-33b1b88e.js');
+const index = require('./index-525cfec0.js');
 const guxTabAdvancedPanelCss = "gux-tab-advanced-panel div[role='tabpanel']:focus{outline:none}gux-tab-advanced-panel div[role='tabpanel']:focus-visible{outline:none;box-shadow:0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff}";

package/dist/cjs/gux-tab-advanced.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-33b1b88e.js');
-const index$1 = require('./index-2202ad01.js');
+const index = require('./index-525cfec0.js');
+const index$1 = require('./index-57ec1998.js');
 const eventIsFrom = require('./event-is-from-ad1044f2.js');
 const randomHtmlId = require('./random-html-id-b86b61c0.js');
 const en = require('./en-eb56dc17.js');

package/dist/cjs/gux-tab-dropdown-option-legacy.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-33b1b88e.js');
+const index = require('./index-525cfec0.js');
 const guxTabDropdownOptionLegacyCss = "gux-tab-dropdown-option-legacy .tab-dropdown-option{display:flex;align-items:center;width:120px;height:36px;padding:0;font-size:12px;cursor:pointer;background:none;border:none;transition:color 0.25s, background-color 0.25s}gux-tab-dropdown-option-legacy .tab-dropdown-option:hover,gux-tab-dropdown-option-legacy .tab-dropdown-option:focus{outline:none}gux-tab-dropdown-option-legacy .tab-dropdown-option gux-icon{width:16px;height:16px;margin:0 10px}.gux-tab-dropdown-option-light-theme .tab-dropdown-option{color:#2e394c}.gux-tab-dropdown-option-light-theme .tab-dropdown-option:hover,.gux-tab-dropdown-option-light-theme .tab-dropdown-option:focus{color:#fdfdfd;background-color:#2a60c8}.gux-light-theme gux-tab-dropdown-option-legacy .tab-dropdown-option{color:#2e394c}.gux-light-theme gux-tab-dropdown-option-legacy .tab-dropdown-option:hover,.gux-light-theme gux-tab-dropdown-option-legacy .tab-dropdown-option:focus{color:#fdfdfd;background-color:#2a60c8}gux-tab-dropdown-option-legacy.gux-light-theme .tab-dropdown-option{color:#2e394c}gux-tab-dropdown-option-legacy.gux-light-theme .tab-dropdown-option:hover,gux-tab-dropdown-option-legacy.gux-light-theme .tab-dropdown-option:focus{color:#fdfdfd;background-color:#2a60c8}gux-tab-dropdown-option-legacy .tab-dropdown-option{color:#2e394c}gux-tab-dropdown-option-legacy .tab-dropdown-option:hover,gux-tab-dropdown-option-legacy .tab-dropdown-option:focus{color:#fdfdfd;background-color:#2a60c8}";

package/dist/cjs/gux-tab-legacy.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-33b1b88e.js');
+const index = require('./index-525cfec0.js');
 const eventIsFrom = require('./event-is-from-ad1044f2.js');
 const randomHtmlId = require('./random-html-id-b86b61c0.js');

package/dist/cjs/gux-tab-list.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-33b1b88e.js');
-const index$1 = require('./index-2202ad01.js');
+const index = require('./index-525cfec0.js');
+const index$1 = require('./index-57ec1998.js');
+const onMutation = require('./on-mutation-347de78d.js');
 require('./get-closest-element-ab4b2eee.js');
 const scrollLeft = "Scroll Left";
@@ -19,6 +20,16 @@ const tabsResources = {
 const guxTabListCss = "gux-tabs[orientation='vertical']{height:100%}gux-tabs[orientation='vertical'] .gux-tab-container{display:flex;flex-direction:column;width:160px;max-width:160px;height:100%;margin-right:16px;border-right:1px solid #d7dce5}gux-tabs[orientation='vertical'] .gux-tab-container .gux-scroll-button-container{width:100%}gux-tabs[orientation='vertical'] .gux-tab-container .gux-scroll-button-container button{width:100%}gux-tabs[orientation='vertical'] .gux-tab-container .gux-scrollable-section{flex-direction:column;height:100%;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}gux-tabs[orientation='vertical'] .gux-tab-container .gux-scrollable-section::-webkit-scrollbar{width:0;height:0}gux-tabs:not([orientation='vertical']) .gux-tab-container{height:40px;margin-bottom:16px;border-bottom:1px solid #d7dce5}gux-tabs:not([orientation='vertical']) .gux-scrollable-section{overflow-x:auto}gux-tabs .gux-tab-container{box-sizing:content-box;display:flex;width:100%;overflow-x:hidden;overflow-y:hidden;background-color:#fff}gux-tabs .gux-scrollable-section{display:flex;flex:1 1 auto;scroll-behavior:smooth;scrollbar-width:none}gux-tabs .gux-scrollable-section::-webkit-scrollbar{height:0}gux-tabs .gux-scroll-button-container{display:flex;border-radius:4px}gux-tabs .gux-scroll-button-container .gux-scroll-button{display:flex;align-items:center;justify-content:center;width:28px;height:40px;color:#202937;cursor:pointer;background-color:#c8cfda;background-color:#e2e6ee;border:none;border-radius:4px}gux-tabs .gux-scroll-button-container .gux-scroll-button gux-icon{width:16px;height:16px}gux-tabs .gux-scroll-button-container .gux-scroll-button:hover:not(:disabled){background-color:#d7dce5}gux-tabs .gux-scroll-button-container .gux-scroll-button:active:not(:disabled){background-color:#d2d8e5}gux-tabs .gux-scroll-button-container .gux-scroll-button:disabled{cursor:default;opacity:0.5}";
+var __decorate = (undefined && undefined.__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;
+};
 const GuxTabList = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -73,6 +84,9 @@ const GuxTabList = class {
         break;
     }
   }
+  onMutation() {
+    this.setTabTriggers();
+  }
   // eslint-disable-next-line @typescript-eslint/require-await
   async guxSetActive(activeTab) {
     this.tabTriggers.forEach((tabTrigger, index) => {
@@ -278,6 +292,9 @@ const GuxTabList = class {
   }
   get root() { return index.getElement(this); }
 };
+__decorate([
+  onMutation.OnMutation({ childList: true, subtree: true })
+], GuxTabList.prototype, "onMutation", null);
 GuxTabList.style = guxTabListCss;
 exports.gux_tab_list = GuxTabList;

package/dist/cjs/gux-tab-panel.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-33b1b88e.js');
+const index = require('./index-525cfec0.js');
 const guxTabPanelCss = "gux-tab-panel div[role='tabpanel']:focus{outline:none}gux-tab-panel div[role='tabpanel']:focus-visible{outline:none;box-shadow:0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff}";

package/dist/cjs/gux-tab.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-33b1b88e.js');
+const index = require('./index-525cfec0.js');
 const guxTabCss = "gux-tabs[orientation='vertical'] .gux-tab{display:flex;justify-content:flex-end;padding:12px 16px}gux-tabs[orientation='vertical'] .gux-tab.gux-active{padding-right:14px;border-right:2px solid #2a60c8}gux-tabs[orientation='vertical'] .gux-tab:hover:not(.gux-active):not(.gux-disabled){padding-right:14px;border-right:2px solid #8a97ad}gux-tabs:not([orientation='vertical']) .gux-tab{box-sizing:border-box;padding-bottom:2px}gux-tabs:not([orientation='vertical']) .gux-tab.gux-active{padding-bottom:0;border-bottom:2px solid #2a60c8}gux-tabs:not([orientation='vertical']) .gux-tab:hover:not(.gux-active):not(.gux-disabled){padding-bottom:0;border-bottom:2px solid #8a97ad}gux-tabs:not([orientation='vertical']) .gux-tab gux-tooltip-title{margin:auto}gux-tabs[alignment='center'] .gux-scrollable-section{justify-content:center}gux-tabs[alignment='full-width'] .gux-scrollable-section{flex-grow:1}gux-tabs[alignment='full-width'] gux-tab{width:100%;max-width:100%}gux-tabs[alignment='full-width'] gux-tab .gux-tab{width:100%;max-width:100%}gux-tab{display:flex;max-width:160px}gux-tab .gux-tab{display:flex;align-items:center;width:100%;max-width:160px;height:40px;padding:0 16px;font-size:14px;color:#2e394c;cursor:pointer;background-color:#fff;border:none}gux-tab .gux-tab.gux-disabled{cursor:default}gux-tab .gux-tab.gux-disabled gux-tooltip-title{color:rgba(46, 57, 76, 0.5);cursor:default}gux-tab .gux-tab:focus-visible{padding:0 13px 3px;border:3px solid #aac9ff;border-radius:5px;outline:none}gux-tab .gux-tab gux-tooltip-title{max-width:160px;white-space:nowrap;cursor:pointer}";

package/dist/cjs/gux-table-beta.cjs.entry.js CHANGED Viewed

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-33b1b88e.js');
-const index$1 = require('./index-2202ad01.js');
+const index = require('./index-525cfec0.js');
+const index$1 = require('./index-57ec1998.js');
 const whenEventIsFrom = require('./when-event-is-from-69b5ca13.js');
 const randomHtmlId = require('./random-html-id-b86b61c0.js');
-const usageTracking = require('./usage-tracking-1ddbe5f1.js');
-const en = require('./en-3662eafc.js');
+const usageTracking = require('./usage-tracking-39a72be3.js');
+const en = require('./en-3d7b896f.js');
 require('./get-closest-element-ab4b2eee.js');
 const guxTableCss = ":host{display:block;isolation:isolate}:host .gux-table{position:relative;height:inherit}:host .gux-table .gux-table-scroll-left,:host .gux-table .gux-table-scroll-right{position:absolute;top:0;z-index:1;display:flex;align-items:center;justify-content:center;width:24px;min-width:0;height:40px;padding:0;color:#2e394c;cursor:pointer;border-radius:4px}:host .gux-table .gux-table-scroll-left gux-icon,:host .gux-table .gux-table-scroll-right gux-icon{width:8px;height:8px}:host .gux-table .gux-table-scroll-left{border-top-left-radius:0;border-bottom-left-radius:0}:host .gux-table .gux-table-scroll-right{right:0;border-top-right-radius:0;border-bottom-right-radius:0}:host .gux-table .gux-table-container{width:100%;max-height:100%;overflow-x:hidden;overflow-y:auto;scrollbar-color:rgba(32, 41, 55, 0.24) #fdfdfd;scrollbar-width:thin}:host .gux-table .gux-table-container::-webkit-scrollbar{width:4px}:host .gux-table .gux-table-container::-webkit-scrollbar-track{background:#fdfdfd}:host .gux-table .gux-table-container::-webkit-scrollbar-thumb{background:rgba(32, 41, 55, 0.24)}:host .gux-table .gux-table-container::-webkit-scrollbar-thumb:hover{background:rgba(32, 41, 55, 0.48)}:host .gux-table .gux-table-container.gux-column-resizing-hover,:host .gux-table .gux-table-container.gux-column-resizing{cursor:col-resize}:host .gux-empty-table{display:flex;align-items:center;justify-content:center;height:150px;color:#596373;background:#fdfdfd;font-family:Roboto, sans-serif;font-weight:400;font-weight:300;font-size:18px;line-height:24px}";
@@ -131,6 +131,12 @@ const GuxTable = class {
   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'));
   }
@@ -324,32 +330,42 @@ const GuxTable = class {
   }
   /******************************* 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
@@ -365,9 +381,9 @@ const GuxTable = class {
       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/cjs/gux-tabs-advanced.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-33b1b88e.js');
-const usageTracking = require('./usage-tracking-1ddbe5f1.js');
+const index = require('./index-525cfec0.js');
+const usageTracking = require('./usage-tracking-39a72be3.js');
 const guxTabsAdvancedCss = "gux-tabs-advanced{-custom-noop:noop}";

package/dist/cjs/gux-tabs-legacy.cjs.entry.js CHANGED Viewed

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-33b1b88e.js');
+const index = require('./index-525cfec0.js');
 const sortable_esm = require('./sortable.esm-d03e1767.js');
-const usageTracking = require('./usage-tracking-1ddbe5f1.js');
-const index$1 = require('./index-2202ad01.js');
+const usageTracking = require('./usage-tracking-39a72be3.js');
+const index$1 = require('./index-57ec1998.js');
 const whenEventIsFrom = require('./when-event-is-from-69b5ca13.js');
 require('./get-closest-element-ab4b2eee.js');

package/dist/cjs/gux-tabs.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-33b1b88e.js');
-const usageTracking = require('./usage-tracking-1ddbe5f1.js');
+const index = require('./index-525cfec0.js');
+const usageTracking = require('./usage-tracking-39a72be3.js');
 const guxTabsCss = ".gux-tabs.gux-vertical{display:flex;height:100%}";

package/dist/cjs/gux-tag-beta.cjs.entry.js CHANGED Viewed

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-33b1b88e.js');
-const index$1 = require('./index-2202ad01.js');
-const usageTracking = require('./usage-tracking-1ddbe5f1.js');
+const index = require('./index-525cfec0.js');
+const index$1 = require('./index-57ec1998.js');
+const usageTracking = require('./usage-tracking-39a72be3.js');
 require('./get-closest-element-ab4b2eee.js');
 const tag = "tag with label: {label}";

package/dist/cjs/gux-text-highlight.cjs.entry.js CHANGED Viewed

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-33b1b88e.js');
+const index = require('./index-525cfec0.js');
 const search = require('./search-a2ed7f26.js');
-const usageTracking = require('./usage-tracking-1ddbe5f1.js');
+const usageTracking = require('./usage-tracking-39a72be3.js');
 const GuxTextHighlight = class {
   constructor(hostRef) {

package/dist/cjs/gux-text-label-legacy.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-33b1b88e.js');
-const usageTracking = require('./usage-tracking-1ddbe5f1.js');
+const index = require('./index-525cfec0.js');
+const usageTracking = require('./usage-tracking-39a72be3.js');
 const guxTextLabelCss = "gux-text-label-legacy .gux-label{margin-right:8px}gux-text-label-legacy .gux-text-label-container.gux-beside{display:flex;flex-direction:row;align-items:baseline}gux-text-label-legacy .gux-text-label-container.gux-beside .gux-labeled-component{flex:1 1 auto}.gux-text-label-dark-theme{color:#fdfdfd}.gux-dark-theme gux-text-label-legacy{color:#fdfdfd}gux-text-label-legacy.gux-dark-theme{color:#fdfdfd}.gux-text-label-light-theme{color:#2e394c}.gux-light-theme gux-text-label-legacy{color:#2e394c}gux-text-label-legacy.gux-light-theme{color:#2e394c}gux-text-label-legacy{color:#2e394c}";

package/dist/cjs/gux-time-picker-beta.cjs.entry.js CHANGED Viewed

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-33b1b88e.js');
-const onClickOutside = require('./on-click-outside-246a1eb3.js');
-const usageTracking = require('./usage-tracking-1ddbe5f1.js');
-const index$1 = require('./index-2202ad01.js');
+const index = require('./index-525cfec0.js');
+const onClickOutside = require('./on-click-outside-e0d28eff.js');
+const usageTracking = require('./usage-tracking-39a72be3.js');
+const index$1 = require('./index-57ec1998.js');
 require('./get-closest-element-ab4b2eee.js');
 /********************************************************

package/dist/cjs/gux-toggle-slider.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-33b1b88e.js');
+const index = require('./index-525cfec0.js');
 const guxToggleSliderCss = "gux-toggle-slider{padding:2px;outline:none}gux-toggle-slider .gux-toggle-slider{position:relative;display:inline-block;flex:0 1 auto;align-self:auto;order:0;width:30px;height:16px;border-radius:8px}gux-toggle-slider .gux-toggle-slider.gux-disabled{pointer-events:none;cursor:default;opacity:0.5}gux-toggle-slider .gux-toggle-slider:focus{outline:none;box-shadow:0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff}gux-toggle-slider .gux-toggle-slider .gux-slider{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#6b7585;border-radius:8px;transition:background-color 0.5s ease}gux-toggle-slider .gux-toggle-slider .gux-slider .gux-switch{position:absolute;bottom:1px;left:1px;width:14px;height:14px;content:'';background-color:#fdfdfd;border-radius:50%;transition:0.5s}gux-toggle-slider .gux-toggle-slider .gux-slider .gux-switch gux-icon{position:absolute;top:0;right:0;bottom:0;left:0;width:12px;height:12px;padding:1px;color:#fdfdfd;opacity:0;transition:color 0.5s linear}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider{background-color:#2a60c8}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider .gux-switch{transform:translateX(14px)}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider .gux-switch gux-icon{color:#2a60c8;opacity:1;transition:opacity 0.25s linear;transition-delay:0.25s}";

package/dist/cjs/gux-toggle.cjs.entry.js CHANGED Viewed

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-33b1b88e.js');
-const usageTracking = require('./usage-tracking-1ddbe5f1.js');
+const index = require('./index-525cfec0.js');
+const usageTracking = require('./usage-tracking-39a72be3.js');
 const randomHtmlId = require('./random-html-id-b86b61c0.js');
-const index$1 = require('./index-2202ad01.js');
+const index$1 = require('./index-57ec1998.js');
 require('./get-closest-element-ab4b2eee.js');
 const defaultAriaLabel = "Toggle Switch";

package/dist/cjs/gux-tooltip_2.cjs.entry.js CHANGED Viewed

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-33b1b88e.js');
+const index = require('./index-525cfec0.js');
 const randomHtmlId = require('./random-html-id-b86b61c0.js');
-const usageTracking = require('./usage-tracking-1ddbe5f1.js');
+const usageTracking = require('./usage-tracking-39a72be3.js');
 const popper = require('./popper-71bf3058.js');
 const logError = require('./log-error-a57681bf.js');
-const onMutation = require('./on-mutation-2e4dd956.js');
+const onMutation = require('./on-mutation-347de78d.js');
 const guxTooltipCss = ":host{z-index:1;box-sizing:border-box;max-width:250px;padding:6px 12px;font-size:12px;color:#2e394c;pointer-events:none;visibility:hidden !important;background-color:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24);opacity:0;transition:opacity 0.25s ease-in-out}:host(.gux-show){visibility:visible !important;opacity:1}";

package/dist/cjs/gux-visualization-beta.cjs.entry.js CHANGED Viewed

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index$2 = require('./index-33b1b88e.js');
+const index$2 = require('./index-525cfec0.js');
 const _commonjsHelpers = require('./_commonjsHelpers-537d719a.js');
-const index$3 = require('./index-2202ad01.js');
-const usageTracking = require('./usage-tracking-1ddbe5f1.js');
+const index$3 = require('./index-57ec1998.js');
+const usageTracking = require('./usage-tracking-39a72be3.js');
 require('./get-closest-element-ab4b2eee.js');
 /*!

package/dist/cjs/{index-33b1b88e.js → index-525cfec0.js} RENAMED Viewed

@@ -81,6 +81,8 @@ const hostListenerProxy = (hostRef, methodName) => (ev) => {
 const getHostListenerTarget = (elm, flags) => {
     if (flags & 8 /* TargetWindow */)
         return win;
+    if (flags & 16 /* TargetBody */)
+        return doc.body;
     return elm;
 };
 // prettier-ignore
@@ -1876,6 +1878,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-dropdown-legacy.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'gux-dropdown-multi-beta.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './gux-dropdown-multi-beta.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-dropdown-option.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -1888,6 +1894,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-form-field-color.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'gux-form-field-dropdown.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './gux-form-field-dropdown.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-form-field-legacy.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -1920,6 +1930,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-list-divider-legacy.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'gux-listbox-multi.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './gux-listbox-multi.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-menu.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -1940,6 +1954,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-option-legacy.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'gux-option-multi.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './gux-option-multi.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-page-loading-spinner.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -1988,6 +2006,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-simple-toast.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'gux-sort-control.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './gux-sort-control.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-submenu.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2068,6 +2090,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-calendar.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'gux-dropdown-multi-tag.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './gux-dropdown-multi-tag.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-form-field-search.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2160,14 +2186,14 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-dismiss-button.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'gux-popup.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './gux-popup.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-button-slot-beta.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-button-slot-beta.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'gux-popup.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './gux-popup.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-icon.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */

package/dist/cjs/{index-2202ad01.js → index-57ec1998.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-const index = require('./index-33b1b88e.js');
+const index = require('./index-525cfec0.js');
 const getClosestElement = require('./get-closest-element-ab4b2eee.js');
 /******************************************************************************