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

package/dist/cjs/gux-table-toolbar-menu-button.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-1066593d.js');
+const usage = require('./usage-89e1afa4.js');
 const onClickOutside = require('./on-click-outside-428f8bbf.js');
 const index$1 = require('./index-9bbde1aa.js');
 const afterNextRender = require('./after-next-render-a09f528a.js');
@@ -14,7 +14,7 @@ const translationResources = {
 	additionalActions: additionalActions
 };
 
-const guxTableToolbarMenuButtonCss = ":host{display:none;-webkit-user-select:none;user-select:none;font-family:Roboto, sans-serif;font-weight:400;font-size:12px;line-height:20px}:host(.gux-show-menu){display:block}>*{vertical-align:middle}.gux-menu-button button{color:#2e394c;cursor:grab;background-color:#e2e6ee;border:none}.gux-menu-button button gux-icon{width:16px;height:16px}.gux-list-container{width:min-content;padding:8px 0;margin:0;list-style:none;background-color:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}";
+const guxTableToolbarMenuButtonCss = ":host{display:none;-webkit-user-select:none;user-select:none}:host(.gux-show-menu){display:block}.gux-menu-button button{color:var(--gse-ui-button-secondary-default-foregroundColor);cursor:grab;background-color:var(--gse-ui-button-secondary-default-backgroundColor);border:none}.gux-menu-button button gux-icon{width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm)}.gux-list-container{width:min-content;padding:var(--gse-ui-menu-padding);margin:0;list-style:none;background-color:var(--gse-ui-menu-backgroundColor);border:1px var(--gse-ui-menu-border-style) var(--gse-ui-menu-border-color);border-radius:var(--gse-ui-menu-borderRadius);box-shadow:var(--gse-ui-menu-boxShadow-x) var(--gse-ui-menu-boxShadow-y) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color)}";
 
 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;
@@ -68,6 +68,12 @@ const GuxTableToolbarMenuButton = class {
       }
     }
   }
+  onFocusin() {
+    void this.tooltipTitleElement.setShowTooltip();
+  }
+  onFocusout() {
+    void this.tooltipTitleElement.setHideTooltip();
+  }
   toggle() {
     this.expanded = !this.expanded;
     if (this.expanded) {
@@ -92,7 +98,7 @@ const GuxTableToolbarMenuButton = class {
     usage.trackComponent(this.root);
   }
   render() {
-    return (index.h(index.Host, { class: { 'gux-show-menu': this.showMenu } }, index.h("gux-popup", { expanded: this.expanded }, index.h("div", { slot: "target", class: "gux-toolbar-menu-container" }, index.h("gux-button-slot-beta", { class: "gux-menu-button" }, index.h("button", { type: "button", ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.expanded.toString() }, index.h("gux-icon", { "screenreader-text": this.i18n('additionalActions'), "icon-name": "menu-kebab-horizontal" })))), index.h("div", { class: "gux-list-container", slot: "popup" }, index.h("gux-list", { ref: el => (this.listElement = el) }, index.h("slot", null))))));
+    return (index.h(index.Host, { class: { 'gux-show-menu': this.showMenu } }, index.h("gux-popup", { expanded: this.expanded }, index.h("div", { slot: "target", class: "gux-toolbar-menu-container" }, index.h("gux-button-slot", { class: "gux-menu-button" }, index.h("button", { type: "button", ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.expanded.toString() }, index.h("gux-tooltip-title", { ref: el => (this.tooltipTitleElement = el) }, index.h("span", null, index.h("gux-icon", { "screenreader-text": this.i18n('additionalActions'), "icon-name": "menu-kebab-horizontal" })))))), index.h("div", { class: "gux-list-container", slot: "popup" }, index.h("gux-list", { ref: el => (this.listElement = el) }, index.h("slot", null))))));
   }
   static get delegatesFocus() { return true; }
   get root() { return index.getElement(this); }

package/dist/cjs/{gux-table-toolbar-beta.cjs.entry.js → gux-table-toolbar.cjs.entry.js}

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0d0fdb85.js');
 const onResize = require('./on-resize-ee6a4b87.js');
 const onMutation = require('./on-mutation-247f99dd.js');
-const usage = require('./usage-1066593d.js');
+const usage = require('./usage-89e1afa4.js');
 const getSlot = require('./get-slot-097ade01.js');
 
 /**
@@ -28,7 +28,7 @@ function setActionsIconOnlyProp(iconOnly, ...actionSets) {
     .forEach(action => (action.iconOnly = iconOnly));
 }
 
-const guxTableToolbarCss = ":host{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;max-height:48px;padding:0 8px 16px 8px;background-color:#fdfdfd;border-radius:4px}:host .search-filter-container{width:260px;min-width:260px}:host slot[name='search-and-filter']::slotted(*){display:flex;flex-direction:row;gap:4px;align-content:flex-start;align-items:center}:host .section-spacing{display:flex;flex-direction:row;min-width:72px}:host .gux-contextual-permanent-primary{display:flex;flex-direction:row;justify-content:space-between}:host .gux-contextual-permanent-primary slot[name='permanent-actions']::slotted(*),:host .gux-contextual-permanent-primary slot[name='contextual-actions']::slotted(*){display:flex;flex-direction:row;flex-wrap:nowrap;gap:4px;align-content:flex-end;align-items:center}:host .gux-contextual-permanent-primary .gux-contextual-wrapper{padding-right:8px;border-right:1px solid #d7dce5}:host .gux-contextual-permanent-primary .gux-permanent-menu-primary-wrapper{display:flex;flex-direction:row;flex-wrap:nowrap;gap:4px;margin-left:8px}";
+const guxTableToolbarCss = ":host{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;max-height:var(--gse-ui-dataTableItems-tableToolbar-height)}:host .search-filter-container{width:260px;min-width:260px;padding-right:var(--gse-ui-dataTableItems-tableToolbar-gap)}:host slot[name=search-and-filter]::slotted(*){display:flex;flex-direction:row;gap:var(--gse-ui-dataTableItems-tableToolbar-tableToolbarGroup-gap);align-content:flex-start;align-items:center}:host .section-spacing{display:flex;flex-direction:row;min-width:72px}:host .gux-contextual-permanent-primary{display:flex;flex-direction:row;justify-content:space-between;padding-left:var(--gse-ui-dataTableItems-tableToolbar-gap)}:host .gux-contextual-permanent-primary slot[name=permanent-actions]::slotted(*),:host .gux-contextual-permanent-primary slot[name=contextual-actions]::slotted(*){display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-dataTableItems-tableToolbar-tableToolbarGroup-gap);align-content:flex-end;align-items:center}:host .gux-contextual-permanent-primary .gux-contextual-wrapper{padding-right:var(--gse-ui-dataTableItems-tableToolbar-gap);border-right:var(--gse-ui-dataTableItems-tableToolbar-divider-width) solid var(--gse-ui-dataTableItems-tableToolbar-dividerColor)}:host .gux-contextual-permanent-primary .gux-permanent-menu-primary-wrapper{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-dataTableItems-tableToolbar-tableToolbarGroup-gap);margin-left:var(--gse-ui-dataTableItems-tableToolbar-gap)}";
 
 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;
@@ -210,4 +210,4 @@ __decorate([
 ], GuxTableToolbar.prototype, "checkResponsiveLayout", null);
 GuxTableToolbar.style = guxTableToolbarCss;
 
-exports.gux_table_toolbar_beta = GuxTableToolbar;
+exports.gux_table_toolbar = GuxTableToolbar;

package/dist/cjs/{gux-table-beta.cjs.entry.js → gux-table.cjs.entry.js}

@@ -6,11 +6,11 @@ const index = require('./index-0d0fdb85.js');
 const index$1 = require('./index-9bbde1aa.js');
 const whenEventIsFrom = require('./when-event-is-from-69b5ca13.js');
 const randomHtmlId = require('./random-html-id-b86b61c0.js');
-const usage = require('./usage-1066593d.js');
-const en = require('./en-dc1f49b7.js');
+const usage = require('./usage-89e1afa4.js');
+const en = require('./en-d1b32383.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;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}";
+const guxTableCss = ".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)}.gux-icon-anchor gux-icon{padding-right:var(--gse-ui-links-inLine-padding)}:host{display:block;isolation:isolate}:host .gux-table{position:relative;height:inherit}:host .gux-table .gux-table-container{max-height:100%;overflow:auto;scrollbar-color:var(--gse-ui-dataTableItems-scrollbar-foregroundColor);scrollbar-width:thin}: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:calc(100% - var(--gse-ui-dataTableItems-header-default-height));color:#596373;background:#fdfdfd;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)}";
 
 const COL_RESIZE_HANDLE_WIDTH = 3;
 const GuxTable = class {
@@ -21,11 +21,7 @@ const GuxTable = class {
     this.slotObserver = new MutationObserver(() => index.forceUpdate(this));
     this.tableId = randomHtmlId.randomHTMLId('gux-table');
     this.columnsWidths = {};
-    this.tableWidth = this.getElementComputedWidth(this.slottedTable);
     this.isVerticalScroll = false;
-    this.isHorizontalScroll = false;
-    this.isScrolledToFirstCell = true;
-    this.isScrolledToLastCell = false;
     this.columnResizeHover = false;
     this.compact = false;
     this.objectTable = false;
@@ -42,15 +38,11 @@ const GuxTable = class {
       this.prepareResizableColumns();
     }
     this.prepareSelectableRows();
-    this.checkHorizontalScroll();
     this.checkVerticalScroll();
     if (!this.resizeObserver && window.ResizeObserver) {
       this.resizeObserver = new ResizeObserver(() => {
         index.readTask(() => {
-          this.checkHorizontalScroll();
           this.checkVerticalScroll();
-          this.updateScrollState();
-          this.scaleColumnWidths();
         });
       });
     }
@@ -63,6 +55,11 @@ const GuxTable = class {
       childList: true
     });
   }
+  checkVerticalScroll() {
+    const tableContainerElement = this.tableContainer;
+    this.isVerticalScroll =
+      tableContainerElement.scrollHeight > tableContainerElement.clientHeight;
+  }
   disconnectedCallback() {
     if (this.resizeObserver) {
       this.resizeObserver.unobserve(this.tableContainer);
@@ -73,16 +70,15 @@ const GuxTable = class {
     }
   }
   /******************************* Event Listeners *******************************/
-  onScroll() {
-    this.updateScrollState();
-  }
   onInternalAllRowSelectChange(event) {
     event.stopPropagation();
-    this.handleSelectAllRows();
+    this.handleSelectAllRows(event.detail);
   }
   onInternalRowSelectChange(event) {
     event.stopPropagation();
-    this.handleRowSelection(event.target);
+    const rowCheckbox = event.target;
+    rowCheckbox.selected = event.detail;
+    this.handleRowSelection(rowCheckbox);
   }
   onMouseMove(event) {
     if (this.resizableColumns) {
@@ -149,7 +145,7 @@ const GuxTable = class {
     const selectAllCheckbox = this.selectAllCheckbox;
     if (selectAllCheckbox) {
       const rowCheckboxes = this.rowCheckboxes;
-      const filterDisabled = rowCheckboxes.filter(rowBox => rowBox.hasAttribute('disabled') == false);
+      const filterDisabled = rowCheckboxes.filter(rowBox => !rowBox.hasAttribute('disabled'));
       const selectedRows = filterDisabled.filter(box => box.selected);
       const hasRows = Boolean(rowCheckboxes.length);
       const allSelected = selectedRows.length === filterDisabled.length;
@@ -159,12 +155,13 @@ const GuxTable = class {
     }
   }
   // Handle a change in state of the select all checkbox
-  handleSelectAllRows() {
+  handleSelectAllRows(selected) {
     const selectAllCheckbox = this.selectAllCheckbox;
     const rowCheckboxes = this.rowCheckboxes;
     rowCheckboxes.forEach(rowBox => {
+      selectAllCheckbox.selected = selected;
       if (!rowBox.hasAttribute('disabled')) {
-        rowBox.selected = selectAllCheckbox.selected;
+        rowBox.selected = selected;
         this.updateRowSelection(rowBox);
       }
     });
@@ -189,101 +186,18 @@ const GuxTable = class {
       tableRow.removeAttribute('data-selected-row');
     }
   }
-  /******************************* Scrolling *******************************/
-  nextColumn() {
-    const columns = this.tableColumns;
-    const viewportBounds = this.tableContainer.getBoundingClientRect();
-    // The last column who's right side is out of the viewport
-    // or the last element if we can't find one.
-    const lastVisibleColumn = columns.find(col => col.getBoundingClientRect().right > viewportBounds.right) || columns[columns.length - 1];
-    const lastColumnBounds = lastVisibleColumn.getBoundingClientRect();
-    let distanceToScroll = lastColumnBounds.right - viewportBounds.right;
-    // Don't scroll the whole viewport away if there is a very long column
-    if (distanceToScroll > viewportBounds.width) {
-      distanceToScroll = viewportBounds.width * 0.9;
-    }
-    // Always try to scroll a little bit extra to make sure we aren't caught out by
-    // funny floating-point pixel math behavior.
-    this.tableContainer.scrollLeft += Math.ceil(distanceToScroll);
-    this.updateScrollState();
-  }
-  previousColumn() {
-    const columns = this.tableColumns;
-    const viewportBounds = this.tableContainer.getBoundingClientRect();
-    // The first column who's left side is out of the viewport
-    // or the first element if we can't find one.
-    const firstVisibleColumn = columns
-      .reverse()
-      .find(col => col.getBoundingClientRect().left < viewportBounds.left) ||
-      columns[0];
-    const firstColumnBounds = firstVisibleColumn.getBoundingClientRect();
-    let distanceToScroll = viewportBounds.left - firstColumnBounds.left;
-    // Don't scroll the whole viewport away if there is a very long column
-    if (distanceToScroll > viewportBounds.width) {
-      distanceToScroll = viewportBounds.width * 0.9;
-    }
-    // Always try to scroll a little bit extra to make sure we aren't caught out by
-    // funny floating-point pixel math behavior.
-    this.tableContainer.scrollLeft += -Math.ceil(distanceToScroll);
-    this.updateScrollState();
-  }
-  updateScrollState() {
-    const scrollLeft = this.tableContainer.scrollLeft;
-    const maxScrollLeft = this.tableContainer.scrollWidth - this.tableContainer.clientWidth;
-    this.isScrolledToFirstCell = scrollLeft === 0;
-    this.isScrolledToLastCell =
-      // sometimes this can go less than zero due to the scrollbar constant
-      maxScrollLeft - scrollLeft - this.tableScrollbarConstant <= 0;
-  }
-  checkHorizontalScroll() {
-    const tableWidth = this.slottedTable.getBoundingClientRect().width;
-    const containerWidth = this.root.getBoundingClientRect().width;
-    this.isHorizontalScroll = tableWidth > containerWidth;
-  }
-  checkVerticalScroll() {
-    const tableContainerElement = this.tableContainer;
-    this.isVerticalScroll =
-      tableContainerElement.scrollHeight > tableContainerElement.clientHeight;
-  }
-  get tableScrollbarConstant() {
-    const container = this.tableContainer;
-    return container ? container.offsetWidth - container.clientWidth : 0;
-  }
   /******************************* Resizable Columns *******************************/
   prepareResizableColumns() {
     const styleElement = document.createElement('style');
     styleElement.id = `${this.tableId}-resizable-styles`;
     document.querySelector('head').appendChild(styleElement);
     const columnWidths = this.calculateColumnWidths(this.tableColumns);
-    this.tableWidth = this.getElementComputedWidth(this.slottedTable);
     columnWidths
       // Exclude the last column to allow it to fill the remaining space naturally
       .slice(0, -1)
       .forEach(c => (this.columnsWidths[c.name] = c.width));
     this.setResizableColumnsStyles();
   }
-  /** Scale column pixel widths equal when a resize is observed */
-  scaleColumnWidths() {
-    if (!this.columnResizeState &&
-      this.resizableColumns &&
-      !this.isHorizontalScroll) {
-      const oldColumnWidths = this.calculateColumnWidths(this.tableColumns);
-      const oldTableWidth = this.tableWidth;
-      const newTableWidth = this.getElementComputedWidth(this.slottedTable);
-      oldColumnWidths
-        .map(col => (Object.assign(Object.assign({}, col), { width: this.calcScaledColWidth(col.width, oldTableWidth, newTableWidth) })))
-        // Exclude the last column to allow it to fill the remaining space naturally
-        .slice(0, -1)
-        .forEach(c => (this.columnsWidths[c.name] = c.width));
-      this.tableWidth = newTableWidth;
-      this.setResizableColumnsStyles();
-    }
-  }
-  calcScaledColWidth(colWidth, oldTableWidth, newTableWidth) {
-    const proposedWidth = Math.round((colWidth / oldTableWidth) * newTableWidth);
-    const minWidth = 1;
-    return Math.max(proposedWidth, minWidth);
-  }
   updateResizeState(event) {
     if (this.columnResizeState) {
       const minimumWidth = 1;
@@ -300,7 +214,6 @@ const GuxTable = class {
       });
       this.columnsWidths[columnName] = columnWidths.find(c => c.name === columnName).width;
       this.setResizableColumnsStyles();
-      this.tableWidth = this.getElementComputedWidth(this.slottedTable);
     }
     else {
       this.columnResizeHover = false;
@@ -320,7 +233,7 @@ const GuxTable = class {
         this.columnResizeState = {
           resizableColumn,
           columnResizeMouseStartX: event.pageX,
-          resizableColumnInitialWidth: this.getElementComputedWidth(resizableColumn)
+          resizableColumnInitialWidth: resizableColumn.clientWidth
         };
       }
     });
@@ -334,16 +247,11 @@ const GuxTable = class {
     return (header.getBoundingClientRect().right - event.clientX <
       COL_RESIZE_HANDLE_WIDTH);
   }
-  getElementComputedWidth(element) {
-    return (element.clientWidth -
-      parseInt(window.getComputedStyle(element).paddingLeft) -
-      parseInt(window.getComputedStyle(element).paddingRight));
-  }
   /** Calculates column width minus padding in pixels */
   calculateColumnWidths(columns) {
     return columns.map(c => ({
       name: c.dataset.columnName,
-      width: this.getElementComputedWidth(c)
+      width: c.clientWidth
     }));
   }
   setResizableColumnsStyles() {
@@ -369,10 +277,10 @@ const GuxTable = class {
     };
   }
   render() {
-    return (index.h(index.Host, { "gs-table-id": this.tableId, "gs-v-scroll": this.isVerticalScroll, "gs-h-scroll": this.isHorizontalScroll, "gs-obj-table": this.objectTable, "gs-compact": this.compact }, index.h("div", { class: "gux-table" }, index.h("div", { tabindex: this.isVerticalScroll ? '0' : '-1', id: this.tableId, class: this.tableContainerClasses }, index.h("slot", { name: "data" })), this.isHorizontalScroll && (index.h("gux-button-slot-beta", { accent: "secondary" }, index.h("button", { class: "gux-table-scroll-left", disabled: this.isScrolledToFirstCell, onClick: !this.isScrolledToFirstCell && this.previousColumn.bind(this) }, index.h("gux-icon", { "icon-name": "chevron-left", "screenreader-text": this.i18n('scrollLeft') })))), this.isHorizontalScroll && (index.h("gux-button-slot-beta", { accent: "secondary", style: { marginRight: `${this.tableScrollbarConstant}px` } }, index.h("button", { class: "gux-table-scroll-right", disabled: this.isScrolledToLastCell, style: { marginRight: `${this.tableScrollbarConstant}px` }, onClick: !this.isScrolledToLastCell && this.nextColumn.bind(this) }, index.h("gux-icon", { "icon-name": "chevron-right", "screenreader-text": this.i18n('scrollRight') })))), this.isTableEmpty && (index.h("div", { class: "gux-empty-table" }, this.emptyMessage || this.i18n('emptyMessage'))))));
+    return (index.h(index.Host, { "gs-table-id": this.tableId, "gs-obj-table": this.objectTable, "gs-compact": this.compact }, index.h("div", { class: "gux-table" }, index.h("div", { tabindex: this.isVerticalScroll ? '0' : '-1', id: this.tableId, class: this.tableContainerClasses }, index.h("slot", { name: "data" })), this.isTableEmpty && (index.h("div", { class: "gux-empty-table" }, this.emptyMessage || this.i18n('emptyMessage'))))));
   }
   get root() { return index.getElement(this); }
 };
 GuxTable.style = guxTableCss;
 
-exports.gux_table_beta = GuxTable;
+exports.gux_table = GuxTable;

package/dist/cjs/gux-tabs-advanced.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-1066593d.js');
+const usage = require('./usage-89e1afa4.js');
 
 const guxTabsAdvancedCss = "gux-tabs-advanced{-custom-noop:noop}";
 

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-1066593d.js');
+const usage = require('./usage-89e1afa4.js');
 
-const guxTabsCss = ".gux-tabs.gux-vertical{display:flex;height:100%}";
+const guxTabsCss = ":host(.gux-flex){display:flex;flex-direction:column}:host(.gux-flex) .gux-tabs{display:flex;flex-direction:column;height:100%}:host(.gux-flex) .gux-panel-container{display:flex;flex-direction:column;height:100%}.gux-tabs.gux-vertical{display:flex;height:100%}";
 
 const GuxTabs = class {
   constructor(hostRef) {
@@ -14,6 +14,7 @@ const GuxTabs = class {
     this.activeTab = undefined;
     this.orientation = 'horizontal';
     this.alignment = 'left';
+    this.useFlexbox = false;
     this.tabList = undefined;
     this.tabPanels = [];
   }
@@ -50,7 +51,9 @@ const GuxTabs = class {
     usage.trackComponent(this.root);
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: `gux-tabs gux-${this.alignment} gux-${this.orientation}` }, index.h("slot", { name: "tab-list" }), index.h("div", { class: `gux-${this.alignment} gux-${this.orientation}` }, index.h("slot", { onSlotchange: this.onSlotchange.bind(this) })))));
+    return (index.h(index.Host, { class: {
+        'gux-flex': this.useFlexbox
+      } }, index.h("div", { class: `gux-tabs gux-${this.alignment} gux-${this.orientation}` }, index.h("slot", { name: "tab-list" }), index.h("div", { class: `gux-${this.alignment} gux-${this.orientation} gux-panel-container` }, index.h("slot", { onSlotchange: this.onSlotchange.bind(this) })))));
   }
   get root() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/gux-tag.cjs.entry.js

@@ -0,0 +1,80 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0d0fdb85.js');
+const index$1 = require('./index-9bbde1aa.js');
+const usage = require('./usage-89e1afa4.js');
+require('./get-closest-element-ab4b2eee.js');
+
+const tag = "tag with label: {label}";
+const tagResources = {
+	tag: tag,
+	"tag-disabled": "disabled tag with label: {label}",
+	"remove-tag": "Remove tag with label: {label}"
+};
+
+const guxTagCss = ":host{display:inline-block;border-radius:var(--gse-ui-tag-height)}.gux-tag{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:flex-start;font-family:var(--gse-ui-tag-text-fontFamily);font-weight:var(--gse-ui-tag-text-fontWeight, 600);line-height:var(--gse-ui-tag-text-lineHeight);font-size:var(--gse-ui-tag-text-fontSize);background-color:var(--gse-ui-tag-default-backgroundColor);color:var(--gse-ui-tag-default-foregroundColor);border-radius:var(--gse-ui-tag-height);gap:var(--gse-ui-tag-removable-gap);height:var(--gse-ui-tag-height);padding:var(--gse-ui-tag-padding)}.gux-tag.gux-disabled{position:relative}.gux-tag.gux-disabled::before{position:absolute;bottom:0;top:0;left:0;right:0;opacity:0.5;background-color:#ffffff;border-radius:var(--gse-ui-tag-height);content:\"\"}.gux-tag gux-tooltip-title{white-space:nowrap;cursor:default}.gux-tag gux-tooltip-title ::slotted(gux-icon){font-size:var(--gse-ui-tag-button-size)}.gux-tag .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}.gux-tag .gux-tag-remove-button{all:unset;display:flex;align-content:center;align-items:center;justify-content:center}.gux-tag .gux-tag-remove-button:not(:disabled):hover{cursor:pointer}.gux-tag .gux-tag-remove-button .gux-tag-remove-icon{width:var(--gse-ui-tag-button-size);height:var(--gse-ui-tag-button-size);margin-right:-4px}.gux-tag .gux-tag-remove-button:focus-within .gux-tag-remove-icon{outline:2px solid #7b88f7;outline-offset:0;border-radius:4px}.gux-tag.gux-accent-default{background-color:var(--gse-ui-tag-default-backgroundColor);color:var(--gse-ui-tag-default-foregroundColor)}.gux-tag.gux-accent-1{background-color:var(--gse-ui-tag-accent1-backgroundColor);color:var(--gse-ui-tag-accent1-foregroundColor)}.gux-tag.gux-accent-2{background-color:var(--gse-ui-tag-accent2-backgroundColor);color:var(--gse-ui-tag-accent2-foregroundColor)}.gux-tag.gux-accent-3{background-color:var(--gse-ui-tag-accent3-backgroundColor);color:var(--gse-ui-tag-accent3-foregroundColor)}.gux-tag.gux-accent-4{background-color:var(--gse-ui-tag-accent4-backgroundColor);color:var(--gse-ui-tag-accent4-foregroundColor)}.gux-tag.gux-accent-5{background-color:var(--gse-ui-tag-accent5-backgroundColor);color:var(--gse-ui-tag-accent5-foregroundColor)}.gux-tag.gux-accent-6{background-color:var(--gse-ui-tag-accent6-backgroundColor);color:var(--gse-ui-tag-accent6-foregroundColor)}.gux-tag.gux-accent-7{background-color:var(--gse-ui-tag-accent7-backgroundColor);color:var(--gse-ui-tag-accent7-foregroundColor)}.gux-tag.gux-accent-8{background-color:var(--gse-ui-tag-accent8-backgroundColor);color:var(--gse-ui-tag-accent8-foregroundColor)}.gux-tag.gux-accent-9{background-color:var(--gse-ui-tag-accent9-backgroundColor);color:var(--gse-ui-tag-accent9-foregroundColor)}.gux-tag.gux-accent-10{background-color:var(--gse-ui-tag-accent10-backgroundColor);color:var(--gse-ui-tag-accent10-foregroundColor)}.gux-tag.gux-accent-inherit{background-color:inherit;color:inherit}";
+
+const GuxTag = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.guxdelete = index.createEvent(this, "guxdelete", 7);
+    this.value = undefined;
+    this.accent = 'default';
+    this.disabled = false;
+    this.removable = false;
+    this.label = undefined;
+  }
+  onKeyDown(event) {
+    switch (event.key) {
+      case 'Backspace':
+      case 'Delete':
+        this.removeTag();
+    }
+  }
+  removeTag() {
+    if (this.disabled || !this.removable) {
+      return;
+    }
+    this.guxdelete.emit(this.value);
+  }
+  onSlotChange(event) {
+    const slotAssignedNodes = event.composedPath()[0].assignedNodes();
+    this.label = slotAssignedNodes
+      .map(nodeItem => nodeItem.textContent)
+      .join('');
+  }
+  renderTagTitle() {
+    return (index.h("gux-tooltip-title", null, index.h("span", null, index.h("slot", { "aria-hidden": "true", onSlotchange: this.onSlotChange.bind(this) }))));
+  }
+  renderSrText() {
+    return (index.h("div", { class: "gux-sr-only" }, this.disabled
+      ? this.i18n('tag-disabled', { label: this.label })
+      : this.i18n('tag', { label: this.label })));
+  }
+  renderRemoveButton() {
+    if (this.removable) {
+      return (index.h("button", { class: "gux-tag-remove-button", onClick: this.removeTag.bind(this), type: "button", disabled: this.disabled }, index.h("gux-icon", { class: "gux-tag-remove-icon", "icon-name": "close", "screenreader-text": this.i18n('remove-tag', { label: this.label }) })));
+    }
+  }
+  componentWillLoad() {
+    usage.trackComponent(this.root, {
+      variant: this.removable ? 'removable' : 'permenant'
+    });
+  }
+  async componentWillRender() {
+    this.i18n = await index$1.buildI18nForComponent(this.root, tagResources);
+  }
+  render() {
+    return (index.h("div", { class: {
+        'gux-tag': true,
+        [`gux-accent-${this.accent}`]: true,
+        'gux-disabled': this.disabled
+      }, "aria-disabled": this.disabled.toString() }, this.renderTagTitle(), this.renderSrText(), this.renderRemoveButton()));
+  }
+  get root() { return index.getElement(this); }
+};
+GuxTag.style = guxTagCss;
+
+exports.gux_tag = GuxTag;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-1066593d.js');
+const usage = require('./usage-89e1afa4.js');
 
 const conversion = /[ +]/g;
 const expressions = new Map();
@@ -47,7 +47,7 @@ function convertToRegex(word) {
   return new RegExp(newexp + '$', 'i');
 }
 
-const guxTextHighlightCss = "mark{background-color:#ffff00;color:#000000}";
+const guxTextHighlightCss = "mark{background-color:var(--gse-ui-search-match-firstLevel-backgroundColor)}.gux-dimmed mark{background-color:var(--gse-ui-search-match-subsequentLevel-backgroundColor)}";
 
 const GuxTextHighlight = class {
   constructor(hostRef) {
@@ -55,6 +55,7 @@ const GuxTextHighlight = class {
     this.text = undefined;
     this.highlight = undefined;
     this.strategy = 'start';
+    this.dimmed = false;
   }
   componentWillLoad() {
     usage.trackComponent(this.root);
@@ -70,15 +71,15 @@ const GuxTextHighlight = class {
           return this.renderFuzzy();
       }
     }
-    return (index.h("span", null, this.text));
+    return (index.h("span", { class: { 'gux-dimmed': this.dimmed } }, this.text));
   }
   renderStartsWith() {
     if (this.text.toLowerCase().startsWith(this.highlight.toLowerCase())) {
       const highlight = this.text.substring(0, this.highlight.length);
       const after = this.text.substring(this.highlight.length);
-      return (index.h("span", null, index.h("mark", null, highlight), after));
+      return (index.h("span", { class: { 'gux-dimmed': this.dimmed } }, index.h("mark", null, highlight), after));
     }
-    return (index.h("span", null, this.text));
+    return (index.h("span", { class: { 'gux-dimmed': this.dimmed } }, this.text));
   }
   renderContains() {
     const html = {
@@ -94,7 +95,7 @@ const GuxTextHighlight = class {
       html.highlighted += before + `<mark>${highlight}</mark>`;
       html.remaining = html.remaining.substring(index + highlight.length);
     }
-    return (index.h("span", { innerHTML: html.highlighted + html.remaining }));
+    return (index.h("span", { class: { 'gux-dimmed': this.dimmed }, innerHTML: html.highlighted + html.remaining }));
   }
   renderFuzzy() {
     if (matchesFuzzy(this.highlight, this.text)) {
@@ -108,9 +109,9 @@ const GuxTextHighlight = class {
         highlighted: '',
         remaining: this.text
       });
-      return (index.h("span", { innerHTML: html.highlighted + html.remaining }));
+      return (index.h("span", { class: { 'gux-dimmed': this.dimmed }, innerHTML: html.highlighted + html.remaining }));
     }
-    return (index.h("span", null, this.text));
+    return (index.h("span", { class: { 'gux-dimmed': this.dimmed } }, this.text));
   }
   get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-time-beta.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-1066593d.js');
-const DateTimeFormatter = require('./DateTimeFormatter-8deff48e.js');
+const usage = require('./usage-89e1afa4.js');
+const getValidTimezone = require('./get-valid-timezone-39ba3e64.js');
 const index$1 = require('./index-9bbde1aa.js');
 require('./get-closest-element-ab4b2eee.js');
 
@@ -13,13 +13,16 @@ const GuxTime = class {
     index.registerInstance(this, hostRef);
     this.datetime = new Date().toISOString();
     this.format = 'short';
+    this.timeZone = undefined;
   }
   componentWillLoad() {
     usage.trackComponent(this.root);
-    this.formatter = new DateTimeFormatter.DateTimeFormatter(index$1.getDesiredLocale(this.root));
+    this.formatter = new getValidTimezone.DateTimeFormatter(index$1.getDesiredLocale(this.root));
   }
   render() {
-    return (index.h(index.Host, null, this.formatter.formatTime(new Date(this.datetime), this.format)));
+    return (index.h(index.Host, null, this.formatter.formatTime(new Date(this.datetime), this.format, {
+      timeZone: getValidTimezone.getValidTimezone(this.timeZone)
+    })));
   }
   get root() { return index.getElement(this); }
 };

package/dist/cjs/{gux-time-picker-beta.cjs.entry.js → gux-time-picker.cjs.entry.js}

@@ -7,7 +7,7 @@ const onClickOutside = require('./on-click-outside-428f8bbf.js');
 const simulateNativeEvent = require('./simulate-native-event-fe3e62da.js');
 const afterNextRender = require('./after-next-render-a09f528a.js');
 const index = require('./index-9bbde1aa.js');
-const usage = require('./usage-1066593d.js');
+const usage = require('./usage-89e1afa4.js');
 require('./get-closest-element-ab4b2eee.js');
 
 const am = "AM";
@@ -170,7 +170,7 @@ function getValidValueMinuteChange(value, change, selectionStart) {
   return `${hour}:${wanted}`;
 }
 
-const guxTimePickerCss = ".gux-time-picker{position:relative;display:inline-block}.gux-time-picker.gux-error .gux-input-time{border-color:#ea0b0b}.gux-time-picker .gux-input-time{box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;align-content:stretch;align-items:center;justify-content:center;width:100%;height:32px;padding:4px 8px 4px 8px;font-family:inherit;font-size:12px;line-height:1.6667;color:#2e394c;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-time-picker .gux-input-time:focus-within{border-color:#2a60c8;outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-time-picker .gux-input-time input{flex:1 1 auto;align-self:auto;order:0;width:20px;padding:0;font-size:12px;color:#2e394c;text-align:center;text-align:left;background-color:#f6f7f9;border:none;outline:none}.gux-time-picker .gux-input-time input.gux-input-time-hours{text-align:right}.gux-time-picker .gux-input-time input::placeholder{color:#596373;opacity:1}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector{display:grid;grid-template:auto 1fr / auto 1fr auto;place-items:flex-end;padding:0;font-size:12px;font-weight:bold;color:#2e394c;background:transparent;border:none;outline:none}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector:not(:disabled):hover{color:#2a60c8;cursor:pointer}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector:focus-visible{color:#2a60c8;outline:2px solid #aac9ff;outline-offset:0;border-radius:2px}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector .gux-meridiem{grid-row:1;grid-column:1;visibility:hidden}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector .gux-meridiem.gux-visible{visibility:visible}.gux-time-picker .gux-input-time .gux-clock-button{display:flex;flex:0 1 auto;align-items:center;align-self:auto;justify-content:center;order:0;padding:0;color:#596373;background:transparent;border:none}.gux-time-picker .gux-input-time .gux-clock-button.gux-active:not(:disabled){color:#2a60c8;cursor:pointer}.gux-time-picker .gux-input-time .gux-clock-button.gux-active:not(:disabled):hover{color:#2a60c8 !important;cursor:pointer}.gux-time-picker .gux-input-time .gux-clock-button:not(:disabled):hover{color:#2e394c;cursor:pointer}.gux-time-picker .gux-input-time .gux-clock-button:focus{border:none;outline:none}.gux-time-picker .gux-input-time .gux-clock-button:focus-visible gux-icon{outline:2px solid #aac9ff;outline-offset:0;border-radius:2px}.gux-time-picker .gux-input-time .gux-clock-button gux-icon{width:16px;height:16px}.gux-time-picker .gux-list-container{max-height:150px;padding:8px 0;margin:0;overflow-y:scroll;list-style:none;background-color:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}";
+const guxTimePickerCss = ".gux-time-picker{position:relative;display:inline-block}.gux-time-picker.gux-error .gux-input-time{border-color:var(--gse-ui-formControl-input-error-border-color)}.gux-time-picker .gux-input-time{box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-input-gap);align-content:stretch;align-items:center;justify-content:center;white-space:nowrap;width:100%;height:var(--gse-ui-formControl-input-textfield-height);padding:var(--gse-ui-formControl-input-padding);font-family:var(--gse-ui-formControl-input-contentText-fontFamily);font-size:var(--gse-ui-formControl-input-contentText-fontSize);line-height:var(--gse-ui-formControl-input-contentText-lineHeight);color:var(--gse-ui-formControl-input-populatedColor);background-color:var(--gse-ui-formControl-input-backgroundColor);background-image:none;border:var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);border-radius:var(--gse-ui-formControl-input-borderRadius)}.gux-time-picker .gux-input-time:focus-within{outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);border:var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);border-radius:var(--gse-ui-formControl-focusRing-borderRadius)}.gux-time-picker .gux-input-time input{flex:1 1 auto;align-self:auto;order:0;width:2ch;padding:0;font-size:var(--gse-ui-formControl-label-text-fontSize);background-color:var(--gse-ui-formControl-input-backgroundColor);border:none;outline:none}.gux-time-picker .gux-input-time input.gux-input-time-hours{text-align:right}.gux-time-picker .gux-input-time input::placeholder{color:var(--gse-ui-formControl-input-placeholderColor);opacity:1}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector{display:grid;grid-template:auto 1fr/auto 1fr auto;place-items:flex-end;padding:0;font-family:var(--gse-ui-formControl-input-prefixSufix-text-fontFamily);font-size:var(--gse-ui-formControl-input-prefixSufix-text-fontSize);line-height:var(--gse-ui-formControl-input-prefixSufix-text-lineHeight);font-weight:var(--gse-ui-formControl-input-prefixSufix-text-fontWeight);color:var(--gse-ui-formControl-input-populatedColor);background:transparent;border:none;outline:none}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector:focus-visible{outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);border:var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);border-radius:var(--gse-ui-formControl-focusRing-borderRadius)}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector .gux-meridiem{grid-row:1/1;grid-column:1/1;visibility:hidden}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector .gux-meridiem.gux-visible{visibility:visible}.gux-time-picker .gux-input-time .gux-clock-button{display:flex;flex:0 1 auto;align-items:center;align-self:auto;justify-content:center;order:0;padding:0;color:var(--gse-ui-formControl-input-inputIcon-iconEndColor);background:transparent;border:none}.gux-time-picker .gux-input-time .gux-clock-button.gux-active:not(:disabled){color:#4856cb;cursor:pointer}.gux-time-picker .gux-input-time .gux-clock-button:focus{outline:none}.gux-time-picker .gux-input-time .gux-clock-button:focus-visible{outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);border:var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);border-radius:var(--gse-ui-formControl-focusRing-borderRadius)}.gux-time-picker .gux-input-time .gux-clock-button gux-icon{width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm)}.gux-time-picker .gux-time-separator{padding:0 1ch}.gux-time-picker .gux-list-container{max-height:150px;padding:var(--gse-ui-menu-padding);margin:0;overflow-y:scroll;list-style:none;border:var(--gse-ui-menu-border-width) var(--gse-ui-menu-border-style) var(--gse-ui-menu-border-color);background-color:var(--gse-ui-menu-backgroundColor);box-shadow:var(--gse-ui-menu-boxShadow-x) var(--gse-ui-menu-boxShadow-y) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color);border-radius:var(--gse-ui-menu-borderRadius)}";
 
 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;
@@ -182,7 +182,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
         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 GuxTimePickerBeta = class {
+const GuxTimePicker = class {
   constructor(hostRef) {
     index$1.registerInstance(this, hostRef);
     this.value = '00:00';
@@ -386,7 +386,7 @@ const GuxTimePickerBeta = class {
 };
 __decorate([
   onClickOutside.OnClickOutside({ triggerEvents: 'mousedown' })
-], GuxTimePickerBeta.prototype, "onClickOutside", null);
-GuxTimePickerBeta.style = guxTimePickerCss;
+], GuxTimePicker.prototype, "onClickOutside", null);
+GuxTimePicker.style = guxTimePickerCss;
 
-exports.gux_time_picker_beta = GuxTimePickerBeta;
+exports.gux_time_picker = GuxTimePicker;