genesys-spark-components 3.0.0

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

@@ -0,0 +1,401 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1057b10d.js');
+const index$1 = require('./index-88d9f9ab.js');
+const whenEventIsFrom = require('./when-event-is-from-69b5ca13.js');
+const randomHtmlId = require('./random-html-id-b86b61c0.js');
+const usageTracking = require('./usage-tracking-33f2c2e0.js');
+const en = require('./en-3662eafc.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}";
+
+const COL_RESIZE_HANDLE_WIDTH = 3;
+const GuxTable = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.guxselectionchanged = index.createEvent(this, "guxselectionchanged", 7);
+    this.guxsortchanged = index.createEvent(this, "guxsortchanged", 7);
+    this.slotObserver = new MutationObserver(() => index.forceUpdate(this));
+    this.tableId = randomHtmlId.randomHTMLId('gux-table');
+    this.columnsWidths = {};
+    /**
+     * Indicates that vertical scroll is presented for table
+     */
+    this.isVerticalScroll = false;
+    /**
+     * Indicates that horizontal scroll is presented for table
+     */
+    this.isHorizontalScroll = false;
+    /**
+     * Indicates that table content scrolled to it's last column
+     */
+    this.isScrolledToFirstCell = true;
+    /**
+     * Indicates that table content scrolled to it's first column
+     */
+    this.isScrolledToLastCell = false;
+    /**
+     * Indicates if the mouse is in a position that supports starting resize
+     */
+    this.columnResizeHover = false;
+    /**
+     * Indicates table row density style
+     */
+    this.compact = false;
+    /**
+     * Indicates that object table specific styles should be applied
+     */
+    this.objectTable = false;
+  }
+  /******************************* Lifcycle Hooks *******************************/
+  async componentWillLoad() {
+    usageTracking.trackComponent(this.root);
+    this.i18n = await index$1.buildI18nForComponent(this.root, en.tableResources);
+  }
+  componentDidLoad() {
+    if (this.resizableColumns) {
+      this.prepareResizableColumns();
+    }
+    this.prepareSortableColumns();
+    this.prepareSelectableRows();
+    this.checkHorizontalScroll();
+    this.checkVerticalScroll();
+    if (!this.resizeObserver && window.ResizeObserver) {
+      this.resizeObserver = new ResizeObserver(() => {
+        index.readTask(() => {
+          this.checkHorizontalScroll();
+          this.checkVerticalScroll();
+          this.updateScrollState();
+        });
+      });
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.observe(this.tableContainer);
+      this.resizeObserver.observe(this.slottedTable);
+    }
+    this.slotObserver.observe(this.slottedTable, {
+      subtree: true,
+      childList: true
+    });
+  }
+  disconnectedCallback() {
+    if (this.resizeObserver) {
+      this.resizeObserver.unobserve(this.tableContainer);
+      this.resizeObserver.unobserve(this.slottedTable);
+    }
+    if (this.resizableColumns) {
+      document.getElementById(`${this.tableId}-resizable-styles`).remove();
+    }
+  }
+  /******************************* Event Listeners *******************************/
+  onScroll() {
+    this.updateScrollState();
+  }
+  onInternalAllRowSelectChange(event) {
+    event.stopPropagation();
+    this.handleSelectAllRows();
+  }
+  onInternalRowSelectChange(event) {
+    event.stopPropagation();
+    this.handleRowSelection(event.target);
+  }
+  onMouseMove(event) {
+    if (this.resizableColumns) {
+      this.updateResizeState(event);
+    }
+  }
+  onMouseDown(event) {
+    if (this.resizableColumns) {
+      this.maybeStartResizing(event);
+    }
+  }
+  onMouseUp() {
+    if (this.resizableColumns) {
+      this.stopResizing();
+    }
+  }
+  /******************************* Element Getters *******************************/
+  // Add new query selectors here with meaningful names
+  get tableContainer() {
+    return this.root.shadowRoot.querySelector('.gux-table-container');
+  }
+  get slottedTable() {
+    return this.root.querySelector('table[slot="data"]');
+  }
+  get tableRows() {
+    return Array.from(this.slottedTable.querySelectorAll('tbody tr'));
+  }
+  get tableColumns() {
+    return Array.from(this.slottedTable.querySelectorAll('thead th'));
+  }
+  get rowCheckboxes() {
+    return Array.from(this.slottedTable.querySelectorAll('tbody tr td gux-row-select'));
+  }
+  get selectAllCheckbox() {
+    return this.slottedTable.querySelector('thead tr th gux-all-row-select');
+  }
+  /******************************* Row Selection *******************************/
+  /**
+   * Returns the selected rows Ids.
+   */
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async getSelected() {
+    return this.getSelectedInternal();
+  }
+  // Internal synchronous method for getting currently selected rows
+  // The public method is forced to be async by Stencil's lazy-loading.
+  getSelectedInternal() {
+    const rowCheckboxes = Array.from(this.rowCheckboxes);
+    const selectedRowIds = rowCheckboxes
+      .filter(box => box.selected)
+      .map(box => box.closest('tr').getAttribute('data-row-id'));
+    return { selectedRowIds };
+  }
+  // Set up initial selectable row states
+  prepareSelectableRows() {
+    const rowCheckboxes = this.rowCheckboxes;
+    rowCheckboxes.forEach(rowCheckbox => {
+      this.updateRowSelection(rowCheckbox);
+    });
+    this.updateSelectAllBoxState();
+  }
+  // Update the checked/interminate state of the select all checkbox
+  updateSelectAllBoxState() {
+    const selectAllCheckbox = this.selectAllCheckbox;
+    if (selectAllCheckbox) {
+      const rowCheckboxes = this.rowCheckboxes;
+      const selectedRows = rowCheckboxes.filter(box => box.selected);
+      const hasRows = Boolean(rowCheckboxes.length);
+      const allSelected = selectedRows.length === rowCheckboxes.length;
+      const noneSelected = selectedRows.length === 0;
+      selectAllCheckbox.selected = hasRows && allSelected;
+      void selectAllCheckbox.setIndeterminate(hasRows && !allSelected && !noneSelected);
+    }
+  }
+  // Handle a change in state of the select all checkbox
+  handleSelectAllRows() {
+    const selectAllCheckbox = this.selectAllCheckbox;
+    const rowCheckboxes = this.rowCheckboxes;
+    rowCheckboxes.forEach(rowBox => {
+      rowBox.selected = selectAllCheckbox.selected;
+      this.updateRowSelection(rowBox);
+    });
+    this.emitSelectionEvent();
+  }
+  // Handle a change in state of an individual row selection checkbox
+  handleRowSelection(rowCheckbox) {
+    this.updateRowSelection(rowCheckbox);
+    this.updateSelectAllBoxState();
+    this.emitSelectionEvent();
+  }
+  emitSelectionEvent() {
+    this.guxselectionchanged.emit(this.getSelectedInternal());
+  }
+  // Make sure a selected row is tagged/displayed correctly at the row level
+  updateRowSelection(dataRowSelectbox) {
+    const tableRow = dataRowSelectbox.closest('tr');
+    if (dataRowSelectbox.selected) {
+      tableRow.setAttribute('data-selected-row', '');
+    }
+    else {
+      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;
+  }
+  /******************************* Resizeable Columns *******************************/
+  prepareResizableColumns() {
+    const styleElement = document.createElement('style');
+    styleElement.id = `${this.tableId}-resizable-styles`;
+    document.querySelector('head').appendChild(styleElement);
+    const columns = this.tableColumns;
+    columns.pop();
+    columns.forEach((column) => {
+      this.columnsWidths[column.dataset.columnName] = `${this.getElementComputedWidth(column)}px`;
+    });
+    this.setResizableColumnsStyles();
+  }
+  updateResizeState(event) {
+    if (this.columnResizeState) {
+      const columnName = this.columnResizeState.resizableColumn.dataset.columnName;
+      const columnWidth = this.columnResizeState.resizableColumnInitialWidth +
+        (event.pageX - this.columnResizeState.columnResizeMouseStartX);
+      this.columnsWidths[columnName] = `${columnWidth > 1 ? columnWidth : 1}px`;
+      this.setResizableColumnsStyles();
+    }
+    else {
+      this.columnResizeHover = false;
+      whenEventIsFrom.whenEventIsFrom('th', event, (th) => {
+        const columnsLength = this.tableColumns.length;
+        const isLastColumn = columnsLength - 1 === th.cellIndex;
+        if (!isLastColumn && this.isInResizeZone(event, th)) {
+          this.columnResizeHover = true;
+        }
+      });
+    }
+  }
+  maybeStartResizing(event) {
+    whenEventIsFrom.whenEventIsFrom('th', event, th => {
+      if (this.isInResizeZone(event, th)) {
+        const resizableColumn = th;
+        this.columnResizeState = {
+          resizableColumn,
+          columnResizeMouseStartX: event.pageX,
+          resizableColumnInitialWidth: this.getElementComputedWidth(resizableColumn)
+        };
+      }
+    });
+  }
+  stopResizing() {
+    if (this.columnResizeState) {
+      this.columnResizeState = null;
+    }
+  }
+  isInResizeZone(event, header) {
+    return (header.getBoundingClientRect().right - event.clientX <
+      COL_RESIZE_HANDLE_WIDTH);
+  }
+  getElementComputedWidth(element) {
+    return parseInt(window.getComputedStyle(element).getPropertyValue('width').split('px')[0], 10);
+  }
+  /******************************* 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.target;
+            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
+            });
+          }
+        };
+      }
+    });
+  }
+  /**
+   * 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 = index.getAssetPath(`./icons/arrow-solid-down.svg`);
+      const descArrowIcon = index.getAssetPath(`./icons/arrow-solid-up.svg`);
+      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;}
+    `;
+      document.querySelector('head').appendChild(styleElement);
+    }
+  }
+  setResizableColumnsStyles() {
+    const styleElement = document.getElementById(`${this.tableId}-resizable-styles`);
+    let columnsStyles = '';
+    Object.keys(this.columnsWidths).forEach((column) => {
+      columnsStyles += `[gs-table-id=${this.tableId}] th[data-column-name="${column}"]{
+        width:${String(this.columnsWidths[column])};
+        min-width:${String(this.columnsWidths[column])};
+      }`;
+    });
+    styleElement.innerHTML = columnsStyles;
+  }
+  /******************************* Rendering *******************************/
+  get isTableEmpty() {
+    return !this.root.children[0] || this.tableRows.length < 1;
+  }
+  get tableContainerClasses() {
+    return {
+      'gux-table-container': true,
+      'gux-column-resizing': Boolean(this.columnResizeState),
+      'gux-column-resizing-hover': this.columnResizeHover
+    };
+  }
+  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'))))));
+  }
+  get root() { return index.getElement(this); }
+};
+GuxTable.style = guxTableCss;
+
+exports.gux_table_beta = GuxTable;

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

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1057b10d.js');
+const usageTracking = require('./usage-tracking-33f2c2e0.js');
+
+const guxTabsAdvancedCss = "gux-tabs-advanced{-custom-noop:noop}";
+
+const GuxTabsAdvanced = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.guxactivetabchange = index.createEvent(this, "guxactivetabchange", 7);
+    this.tabPanels = [];
+  }
+  watchActiveTab(newValue) {
+    this.guxactivetabchange.emit(newValue);
+  }
+  onInternalActivateTabPanel(event) {
+    event.stopPropagation();
+    const tabId = event.detail;
+    this.activateTab(tabId, this.tabList, this.tabPanels);
+  }
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async guxActivate(tabId) {
+    this.activateTab(tabId, this.tabList, this.tabPanels);
+  }
+  onSlotchange() {
+    const [tabListSlot, defaultSlot] = Array.from(this.root.shadowRoot.querySelectorAll('slot'));
+    this.tabList =
+      tabListSlot.assignedElements()[0];
+    this.tabPanels =
+      defaultSlot.assignedElements();
+    this.activateTab(this.activeTab, this.tabList, this.tabPanels);
+  }
+  activateTab(tabId, tabList, panels) {
+    if (tabId) {
+      this.activeTab = tabId;
+    }
+    else {
+      this.activeTab = tabList
+        .querySelector('gux-tab-advanced')
+        .getAttribute('tab-id');
+    }
+    void tabList.guxSetActive(this.activeTab);
+    panels.forEach(panel => void panel.guxSetActive(panel.tabId === this.activeTab));
+  }
+  componentWillLoad() {
+    usageTracking.trackComponent(this.root);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "gux-tabs" }, index.h("slot", { name: "tab-list" }), index.h("div", null, index.h("slot", { onSlotchange: this.onSlotchange.bind(this) })))));
+  }
+  get root() { return index.getElement(this); }
+  static get watchers() { return {
+    "activeTab": ["watchActiveTab"]
+  }; }
+};
+GuxTabsAdvanced.style = guxTabsAdvancedCss;
+
+exports.gux_tabs_advanced = GuxTabsAdvanced;

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

@@ -0,0 +1,183 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1057b10d.js');
+const sortable_esm = require('./sortable.esm-d03e1767.js');
+const usageTracking = require('./usage-tracking-33f2c2e0.js');
+const index$1 = require('./index-88d9f9ab.js');
+const whenEventIsFrom = require('./when-event-is-from-69b5ca13.js');
+require('./get-closest-element-ab4b2eee.js');
+
+const createNewTab = "Create New Tab";
+const scrollLeft = "Scroll Left";
+const scrollRight = "Scroll Right";
+const disableNewTab = "Maximum number of tabs created has been reached";
+const tabsResources = {
+	createNewTab: createNewTab,
+	scrollLeft: scrollLeft,
+	scrollRight: scrollRight,
+	disableNewTab: disableNewTab
+};
+
+const guxTabsLegacyCss = ".gux-tabs{display:flex;align-items:flex-end;width:100%;height:40px;overflow-x:hidden}.gux-tabs .action-button-container{display:flex;border-radius:2px}.gux-tabs .action-button-container .arrow-button{display:flex;align-items:center;justify-content:center;width:24px;height:40px;padding:0;border:none;border-style:solid;border-width:1px;border-radius:2px;transition:color 0.25s}.gux-tabs .action-button-container .arrow-button gux-icon{width:10px;height:10px}.gux-tabs .action-button-container .add-tab{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;border-style:solid;border-width:1px;border-radius:2px;transition:color 0.25s}.gux-tabs .action-button-container .add-tab:disabled{opacity:0.5}.gux-tabs .action-button-container .add-tab:disabled:hover{color:#202937}.gux-tabs .action-button-container .add-tab:disabled:active{background-color:#e2e6ee}.gux-tabs .action-button-container .add-tab gux-icon{width:16px;height:16px}.gux-tabs .scrollable-section{display:flex;flex:1 1 auto;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}.gux-tabs .scrollable-section::-webkit-scrollbar{height:0}.gux-tabs .scrollable-section .add-tab{display:flex;align-items:center;justify-content:center;width:36px;min-width:36px;height:36px;padding:0;margin-left:4px;border:none;transition:color 0.25s}.gux-tabs .scrollable-section .add-tab gux-icon{width:16px;height:16px}.gux-tabs-light-theme{background-color:#e2e6ee}.gux-tabs-light-theme .action-button-container{background-color:#c8cfda}.gux-tabs-light-theme .action-button-container .arrow-button{color:#202937;background-color:#e2e6ee;border-color:#c8cfda}.gux-tabs-light-theme .action-button-container .arrow-button:hover{color:#2a60c8}.gux-tabs-light-theme .action-button-container .arrow-button:active{background-color:#d2d8e5}.gux-tabs-light-theme .action-button-container .add-tab{color:#202937;background-color:#e2e6ee;border-color:#c8cfda}.gux-tabs-light-theme .action-button-container .add-tab:hover{color:#2a60c8}.gux-tabs-light-theme .action-button-container .add-tab:active{background-color:#d2d8e5}.gux-tabs-light-theme .scrollable-section::-webkit-scrollbar-track{background:#fdfdfd}.gux-tabs-light-theme .scrollable-section::-webkit-scrollbar-thumb{background:#202937}.gux-tabs-light-theme .scrollable-section::-webkit-scrollbar-thumb:hover{background:#202937}.gux-tabs-light-theme .scrollable-section .add-tab{color:#202937;background-color:#c8cfda}.gux-tabs-light-theme .scrollable-section .add-tab:hover{color:#2a60c8}.gux-tabs-light-theme .scrollable-section .add-tab:active{background-color:#b9c2d0}.gux-light-theme .gux-tabs{background-color:#e2e6ee}.gux-light-theme .gux-tabs .action-button-container{background-color:#c8cfda}.gux-light-theme .gux-tabs .action-button-container .arrow-button{color:#202937;background-color:#e2e6ee;border-color:#c8cfda}.gux-light-theme .gux-tabs .action-button-container .arrow-button:hover{color:#2a60c8}.gux-light-theme .gux-tabs .action-button-container .arrow-button:active{background-color:#d2d8e5}.gux-light-theme .gux-tabs .action-button-container .add-tab{color:#202937;background-color:#e2e6ee;border-color:#c8cfda}.gux-light-theme .gux-tabs .action-button-container .add-tab:hover{color:#2a60c8}.gux-light-theme .gux-tabs .action-button-container .add-tab:active{background-color:#d2d8e5}.gux-light-theme .gux-tabs .scrollable-section::-webkit-scrollbar-track{background:#fdfdfd}.gux-light-theme .gux-tabs .scrollable-section::-webkit-scrollbar-thumb{background:#202937}.gux-light-theme .gux-tabs .scrollable-section::-webkit-scrollbar-thumb:hover{background:#202937}.gux-light-theme .gux-tabs .scrollable-section .add-tab{color:#202937;background-color:#c8cfda}.gux-light-theme .gux-tabs .scrollable-section .add-tab:hover{color:#2a60c8}.gux-light-theme .gux-tabs .scrollable-section .add-tab:active{background-color:#b9c2d0}.gux-tabs.gux-light-theme{background-color:#e2e6ee}.gux-tabs.gux-light-theme .action-button-container{background-color:#c8cfda}.gux-tabs.gux-light-theme .action-button-container .arrow-button{color:#202937;background-color:#e2e6ee;border-color:#c8cfda}.gux-tabs.gux-light-theme .action-button-container .arrow-button:hover{color:#2a60c8}.gux-tabs.gux-light-theme .action-button-container .arrow-button:active{background-color:#d2d8e5}.gux-tabs.gux-light-theme .action-button-container .add-tab{color:#202937;background-color:#e2e6ee;border-color:#c8cfda}.gux-tabs.gux-light-theme .action-button-container .add-tab:hover{color:#2a60c8}.gux-tabs.gux-light-theme .action-button-container .add-tab:active{background-color:#d2d8e5}.gux-tabs.gux-light-theme .scrollable-section::-webkit-scrollbar-track{background:#fdfdfd}.gux-tabs.gux-light-theme .scrollable-section::-webkit-scrollbar-thumb{background:#202937}.gux-tabs.gux-light-theme .scrollable-section::-webkit-scrollbar-thumb:hover{background:#202937}.gux-tabs.gux-light-theme .scrollable-section .add-tab{color:#202937;background-color:#c8cfda}.gux-tabs.gux-light-theme .scrollable-section .add-tab:hover{color:#2a60c8}.gux-tabs.gux-light-theme .scrollable-section .add-tab:active{background-color:#b9c2d0}.gux-tabs{background-color:#e2e6ee}.gux-tabs .action-button-container{background-color:#c8cfda}.gux-tabs .action-button-container .arrow-button{color:#202937;background-color:#e2e6ee;border-color:#c8cfda}.gux-tabs .action-button-container .arrow-button:hover{color:#2a60c8}.gux-tabs .action-button-container .arrow-button:active{background-color:#d2d8e5}.gux-tabs .action-button-container .add-tab{color:#202937;background-color:#e2e6ee;border-color:#c8cfda}.gux-tabs .action-button-container .add-tab:hover{color:#2a60c8}.gux-tabs .action-button-container .add-tab:active{background-color:#d2d8e5}.gux-tabs .scrollable-section::-webkit-scrollbar-track{background:#fdfdfd}.gux-tabs .scrollable-section::-webkit-scrollbar-thumb{background:#202937}.gux-tabs .scrollable-section::-webkit-scrollbar-thumb:hover{background:#202937}.gux-tabs .scrollable-section .add-tab{color:#202937;background-color:#c8cfda}.gux-tabs .scrollable-section .add-tab:hover{color:#2a60c8}.gux-tabs .scrollable-section .add-tab:active{background-color:#b9c2d0}";
+
+const GuxTabsLegacy = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.newTab = index.createEvent(this, "newTab", 7);
+    this.input = index.createEvent(this, "input", 7);
+    this.sortChanged = index.createEvent(this, "sortChanged", 7);
+    /**
+     * Enable tab sorting by drag/drop
+     */
+    this.allowSort = false;
+    /**
+     * Enable new tab button
+     */
+    this.showNewTabButton = false;
+    /**
+     * tabId of the currently selected tab
+     */
+    this.value = '';
+    /**
+     * Maximum nuber of tabs created
+     */
+    this.tabLimit = Infinity;
+    /**
+     * Disable new tab button event
+     */
+    this.disableAddTabButton = false;
+    this.hasScrollbar = false;
+  }
+  watchHandler(newValue) {
+    const tabs = Array.from(this.root.querySelectorAll('gux-tab-legacy'));
+    for (const tab of tabs) {
+      tab.active = tab.tabId === newValue;
+    }
+  }
+  internaltabselectedHandler(e) {
+    whenEventIsFrom.whenEventIsFrom('gux-tab-legacy', e, elem => {
+      const tab = elem;
+      if (!tab.active) {
+        this.value = tab.tabId;
+        this.input.emit();
+      }
+    });
+  }
+  createSortable() {
+    this.sortableInstance = new sortable_esm.Sortable(this.root, {
+      animation: 250,
+      draggable: 'gux-tab-legacy',
+      filter: '.ignore-sort',
+      onMove: (event) => {
+        return !event.related.classList.contains('ignore-sort');
+      },
+      onUpdate: () => {
+        const tabIds = Array.from(this.root.querySelectorAll('gux-tab-legacy')).map(tabElement => tabElement.tabId);
+        this.sortChanged.emit(tabIds);
+      }
+    });
+  }
+  destroySortable() {
+    if (this.sortableInstance) {
+      this.sortableInstance.destroy();
+      this.sortableInstance = null;
+    }
+  }
+  disconnectedCallback() {
+    if (this.sortableInstance) {
+      this.destroySortable();
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.unobserve(this.root.shadowRoot.querySelector('.gux-tabs'));
+    }
+    if (this.domObserver) {
+      this.domObserver.disconnect();
+    }
+  }
+  async componentWillLoad() {
+    usageTracking.trackComponent(this.root);
+    this.i18n = await index$1.buildI18nForComponent(this.root, tabsResources);
+  }
+  componentWillRender() {
+    const tabs = Array.from(this.root.querySelectorAll('gux-tab-legacy'));
+    if (tabs.length >= this.tabLimit) {
+      this.disableAddTabButton = true;
+    }
+  }
+  checkForScrollbarHideOrShow() {
+    index.readTask(() => {
+      const el = this.root.shadowRoot.querySelector('.scrollable-section');
+      const hasScrollbar = el.clientWidth !== el.scrollWidth;
+      if (hasScrollbar !== this.hasScrollbar) {
+        this.hasScrollbar = hasScrollbar;
+      }
+    });
+  }
+  componentDidLoad() {
+    if (this.allowSort && !this.sortableInstance) {
+      this.createSortable();
+    }
+    if (!this.resizeObserver && window.ResizeObserver) {
+      this.resizeObserver = new ResizeObserver(this.checkForScrollbarHideOrShow.bind(this));
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.observe(this.root.shadowRoot.querySelector('.gux-tabs'));
+    }
+    if (!this.domObserver && window.MutationObserver) {
+      this.domObserver = new MutationObserver(this.checkForScrollbarHideOrShow.bind(this));
+    }
+    if (this.domObserver) {
+      this.domObserver.observe(this.root, {
+        childList: true,
+        attributes: false,
+        subtree: true
+      });
+    }
+    setTimeout(() => {
+      this.checkForScrollbarHideOrShow();
+    }, 500);
+  }
+  componentDidRender() {
+    setTimeout(() => {
+      index.readTask(() => {
+        if (this.value) {
+          const activeTab = this.root.querySelector(`gux-tab-legacy[tab-id='${this.value}']`);
+          if (activeTab) {
+            activeTab.active = true;
+          }
+        }
+      });
+    }, 500);
+  }
+  scrollLeft() {
+    index.writeTask(() => {
+      this.root.shadowRoot
+        .querySelector('.scrollable-section')
+        .scrollBy(-100, 0);
+    });
+  }
+  scrollRight() {
+    index.writeTask(() => {
+      this.root.shadowRoot
+        .querySelector('.scrollable-section')
+        .scrollBy(100, 0);
+    });
+  }
+  render() {
+    const AddNewTabButton = (props) => {
+      return (index.h("button", { title: this.disableAddTabButton
+          ? this.i18n('disableNewTab')
+          : this.i18n('createNewTab'), class: "add-tab", onClick: () => props.onClick(), disabled: this.disableAddTabButton }, index.h("gux-icon", { "icon-name": "add", decorative: true })));
+    };
+    return (index.h("div", { class: "gux-tabs" }, index.h("div", { class: "action-button-container" }, this.hasScrollbar ? (index.h("button", { title: this.i18n('scrollLeft'), class: "arrow-button", onClick: () => this.scrollLeft() }, index.h("gux-icon", { "icon-name": "chevron-left", decorative: true }))) : null), index.h("div", { class: "scrollable-section" }, index.h("slot", null), this.showNewTabButton && !this.hasScrollbar ? (index.h(AddNewTabButton, { onClick: () => this.newTab.emit() })) : null), index.h("div", { class: "action-button-container" }, this.hasScrollbar ? (index.h("button", { title: this.i18n('scrollRight'), class: "arrow-button", onClick: () => this.scrollRight() }, index.h("gux-icon", { "icon-name": "chevron-right", decorative: true }))) : null, this.showNewTabButton && this.hasScrollbar ? (index.h(AddNewTabButton, { onClick: () => this.newTab.emit() })) : null)));
+  }
+  get root() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["watchHandler"]
+  }; }
+};
+GuxTabsLegacy.style = guxTabsLegacyCss;
+
+exports.gux_tabs_legacy = GuxTabsLegacy;