genesys-spark-components 4.0.0-beta.37 → 4.0.0-beta.39

package/dist/esm/gux-tab-advanced-legacy.entry.js

@@ -1,153 +0,0 @@
-import { r as registerInstance, c as createEvent, w as writeTask, h, g as getElement } from './index-a0eec33a.js';
-import { e as eventIsFrom } from './event-is-from-e25c5a22.js';
-import { r as randomHTMLId } from './random-html-id-3354d85c.js';
-import { a as afterNextRenderTimeout } from './after-next-render-84ec18ad.js';
-import { b as buildI18nForComponent } from './index-e5ccc024.js';
-import { t as tabsResources } from './en-b0526f2a.js';
-import './get-closest-element-66f63212.js';
-
-const guxTabAdvancedCss = ".gux-tab-sorting :focus-within{margin-bottom:4px}gux-tab-advanced-legacy:not(:last-child) .gux-tab:not(.gux-dropdown-options) .gux-tab-button{border-right:1px solid #d7dce5}gux-tab-advanced-legacy:not(:last-child) .gux-dropdown-options .gux-tab-options-button{border-right:1px solid #d7dce5}gux-tab-advanced-legacy .gux-tab{display:flex;align-items:center;width:126px;height:50px;padding-bottom:2px;overflow:hidden;border-radius:4px 4px 0 0;transition:width 0.4s ease-out}gux-tab-advanced-legacy .gux-tab .gux-tab-button{display:flex;align-items:center;width:100%;width:125px;height:50px;padding-right:0;padding-left:16px;color:#000;background-color:#f6f7f9;border:none}gux-tab-advanced-legacy .gux-tab .gux-tab-button:focus-visible{height:90%;border:3px solid #aac9ff;border-radius:5px;outline:none}gux-tab-advanced-legacy .gux-tab.gux-show{width:160px}gux-tab-advanced-legacy .gux-tab.gux-show.gux-disabled .gux-tab-button{color:rgba(0, 0, 0, 0.5)}gux-tab-advanced-legacy .gux-tab.gux-show.gux-disabled .gux-tab-options-button{color:rgba(46, 57, 76, 0.5);pointer-events:none;cursor:default}gux-tab-advanced-legacy .gux-tab .gux-tab-options-button{z-index:1;align-items:center;justify-content:center;width:35px;height:30px;padding:0;cursor:pointer;background-color:#f6f7f9;border:none}gux-tab-advanced-legacy .gux-tab .gux-tab-options-button:focus-visible{outline:none}gux-tab-advanced-legacy .gux-tab .gux-tab-options-button:focus-visible gux-icon{padding-right:0;padding-left:0;border:3px solid #aac9ff;border-radius:5px}gux-tab-advanced-legacy .gux-tab .gux-tab-options-button gux-icon{width:16px;height:16px;padding-right:16px;padding-left:8px;transition:color 0.25s}gux-tab-advanced-legacy .gux-tab:not(.gux-dropdown-options) .gux-tab-button{width:160px;height:30px;padding-right:16px}gux-tab-advanced-legacy .gux-tab:not(.gux-dropdown-options) .gux-tab-button:focus-visible{height:90%;border:3px solid #aac9ff;border-radius:5px;outline:none}gux-tab-advanced-legacy .gux-tab .tab-icon-container{display:flex;flex:0 0 16px;align-items:center;justify-content:center;height:14px;margin-right:8px}gux-tab-advanced-legacy .gux-tab .tab-icon-container gux-icon{width:100%}gux-tab-advanced-legacy .gux-tab.gux-selected{padding-bottom:0;background-color:#fdfdfd;border-bottom:2px solid #2a60c8}gux-tab-advanced-legacy .gux-tab.gux-selected .gux-tab-button{background-color:#fdfdfd}gux-tab-advanced-legacy .gux-tab.gux-selected .gux-tab-options-button{background-color:#fdfdfd}gux-tab-advanced-legacy .gux-tab:hover:not(.gux-selected):not(.gux-disabled){padding-bottom:0;border-bottom:2px solid #8a97ad}gux-tab-advanced-legacy .gux-tab gux-tooltip-title{font-size:14px;white-space:nowrap}";
-
-const GuxTabAdvancedLegacy = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.internalactivatetabpanel = createEvent(this, "internalactivatetabpanel", 7);
-    this.dropdownOptionsButtonId = randomHTMLId();
-    this.tabTitle = '';
-    this.focusinFromClick = false;
-    this.tabId = undefined;
-    this.active = false;
-    this.guxDisabled = false;
-    this.popoverHidden = true;
-    this.hasAnimated = false;
-  }
-  onFocusin(event) {
-    if (!this.focusinFromClick &&
-      event.target.classList.contains('gux-tab-button')) {
-      void this.tooltipTitleElement.setShowTooltip();
-    }
-  }
-  onFocusout(event) {
-    if (!this.root.querySelector('.gux-tab').contains(event.relatedTarget)) {
-      this.popoverHidden = true;
-    }
-    if (event.target.classList.contains('gux-tab-button')) {
-      void this.tooltipTitleElement.setHideTooltip();
-    }
-    this.focusinFromClick = false;
-  }
-  onKeydown(event) {
-    switch (event.key) {
-      case 'ArrowDown':
-      case 'Enter':
-        if (eventIsFrom('.gux-tab-options-button', event)) {
-          event.preventDefault();
-          this.popoverHidden = false;
-          this.focusFirstItemInPopupList();
-        }
-        break;
-      case 'Escape':
-        if (eventIsFrom('gux-list[slot="dropdown-options"]', event)) {
-          event.stopPropagation();
-          this.popoverHidden = true;
-          afterNextRenderTimeout(() => {
-            var _a;
-            (_a = this.tabOptionsButtonElement) === null || _a === void 0 ? void 0 : _a.focus();
-          });
-        }
-        break;
-    }
-  }
-  onKeyup(event) {
-    switch (event.key) {
-      case ' ':
-        if (eventIsFrom('.gux-tab-options-button', event)) {
-          this.focusFirstItemInPopupList();
-        }
-    }
-  }
-  onClick(event) {
-    if (eventIsFrom('.gux-tab-options-button', event)) {
-      return;
-    }
-    if (!this.active && !this.guxDisabled) {
-      this.internalactivatetabpanel.emit(this.tabId);
-    }
-  }
-  onMouseDown() {
-    this.focusinFromClick = true;
-  }
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async guxSetActive(active) {
-    this.active = active;
-  }
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async guxGetActive() {
-    return this.active;
-  }
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async guxFocus() {
-    this.buttonElement.focus();
-  }
-  get hasDropdownOptions() {
-    return Boolean(this.root.querySelector('gux-list[slot="dropdown-options"]'));
-  }
-  focusFirstItemInPopupList() {
-    const listElement = this.root.querySelector('gux-list[slot="dropdown-options"]');
-    afterNextRenderTimeout(() => {
-      void (listElement === null || listElement === void 0 ? void 0 : listElement.guxFocusFirstItem());
-    });
-  }
-  toggleOptions() {
-    this.popoverHidden = !this.popoverHidden;
-  }
-  onSelectDropdownOption(e) {
-    this.popoverHidden = true;
-    e.stopPropagation();
-    afterNextRenderTimeout(() => {
-      this.tabOptionsButtonElement.focus();
-    });
-  }
-  async componentWillLoad() {
-    this.i18n = await buildI18nForComponent(this.root, tabsResources, 'gux-tabs-advanced');
-  }
-  componentDidLoad() {
-    this.tabTitle = this.root
-      .querySelector('gux-tooltip-title')
-      .textContent.trim();
-    if (!this.hasAnimated) {
-      writeTask(() => {
-        this.root.querySelector('.gux-tab').classList.add('gux-show');
-        this.hasAnimated = true;
-      });
-    }
-  }
-  popoverOnClick(e) {
-    e.stopPropagation();
-  }
-  getDropdownOptions() {
-    if (this.hasDropdownOptions) {
-      return [
-        h("button", { id: this.dropdownOptionsButtonId, "aria-expanded": (!this.popoverHidden).toString(), type: "button", class: "gux-tab-options-button", ref: el => (this.tabOptionsButtonElement = el), onClick: () => this.toggleOptions(), tabIndex: this.active ? 0 : -1, disabled: this.guxDisabled }, h("gux-icon", { "icon-name": "menu-kebab-vertical", "screenreader-text": this.i18n('options', {
-            tabTitle: this.tabTitle
-          }) })),
-        h("gux-popover-list", { position: "top-end", for: this.dropdownOptionsButtonId, displayDismissButton: false, hidden: this.popoverHidden, closeOnClickOutside: true, onGuxdismiss: () => (this.popoverHidden = true), onClick: (e) => this.popoverOnClick(e), onFocusout: e => e.stopImmediatePropagation() }, h("div", { class: "gux-dropdown-option-container", onClick: (e) => this.onSelectDropdownOption(e) }, h("slot", { name: "dropdown-options" })))
-      ];
-    }
-    return null;
-  }
-  render() {
-    return [
-      h("div", { class: {
-          'gux-tab': true,
-          'gux-selected': this.active,
-          'gux-dropdown-options': this.hasDropdownOptions,
-          'gux-disabled': this.guxDisabled
-        } }, h("button", { class: "gux-tab-button", type: "button", role: "tab", "aria-selected": this.active.toString(), "aria-disabled": this.guxDisabled.toString(), "aria-controls": `gux-${this.tabId}-panel`, ref: el => (this.buttonElement = el), tabIndex: this.active ? 0 : -1, id: `gux-${this.tabId}-tab` }, h("gux-tooltip-title", { ref: el => (this.tooltipTitleElement = el) }, h("span", null, h("slot", null)))), this.getDropdownOptions())
-    ];
-  }
-  get root() { return getElement(this); }
-};
-GuxTabAdvancedLegacy.style = guxTabAdvancedCss;
-
-export { GuxTabAdvancedLegacy as gux_tab_advanced_legacy };

package/dist/esm/gux-tab-advanced-list-legacy.entry.js

@@ -1,466 +0,0 @@
-import { r as registerInstance, c as createEvent, d as readTask, w as writeTask, h, g as getElement } from './index-a0eec33a.js';
-import { S as Sortable } from './sortable.esm-8c3d5856.js';
-import { O as OnMutation } from './on-mutation-c1be3c74.js';
-import { e as eventIsFrom } from './event-is-from-e25c5a22.js';
-import { a as afterNextRenderTimeout } from './after-next-render-84ec18ad.js';
-import { b as buildI18nForComponent } from './index-e5ccc024.js';
-import { t as tabsResources } from './en-b0526f2a.js';
-import './get-closest-element-66f63212.js';
-
-const guxTabAdvancedListCss = "gux-tab-advanced-list-legacy .gux-tab-container{display:flex;align-items:flex-end;width:100%;height:50px;margin-bottom:16px;overflow-x:auto;overflow-y:hidden;background-color:#f6f7f9;border-bottom:1px solid #d7dce5;border-radius:4px 4px 0 0}gux-tab-advanced-list-legacy .gux-tab-container .action-button-container{display:flex;border-radius:4px}gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button{min-width:35px;height:50px;padding:0;margin-left:2px;color:#2e394c;background-color:#e2e6ee;border:none;border-radius:4px;transition:color 0.25s}gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button [slot=add-tab]{display:inline-flex;align-items:center;padding:0 12px;white-space:nowrap;font-family:var(--gse-core-fontFamily-body), sans-serif;font-weight:var(--gse-core-fontWeight-bold)}gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button [slot=add-tab] gux-icon{padding-right:8px}gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button:disabled{opacity:0.5}gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button:hover{background-color:#d7dce5}gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button:active{background-color:#c8cfda}gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button:focus-visible{outline:none;box-shadow:inset 0 0 0 3px #aac9ff}gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button:focus-visible{border-radius:5px;outline:none;box-shadow:inset 0 0 0 3px #aac9ff}gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button gux-icon{width:16px;height:16px}gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .gux-scroll-button-container{display:flex;border-radius:4px}gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button{display:flex;align-items:center;justify-content:center;width:28px;height:50px;padding:0;color:#2e394c;background-color:#e2e6ee;border:none;border-radius:4px;transition:color 0.25s}gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:focus-visible{border:3px solid #aac9ff;border-radius:5px;outline:none}gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button gux-icon{width:16px;height:16px}gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:focus-visible{border:3px solid #aac9ff;outline:none}gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:hover{background-color:#d7dce5}gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:active{background-color:#c8cfda}gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:focus-visible{outline:var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);outline-offset:var(--gse-semantic-focusRing-offset)}gux-tab-advanced-list-legacy .gux-tab-container .gux-scrollable-section{display:flex;align-items:flex-end;height:50px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}gux-tab-advanced-list-legacy .gux-tab-container .gux-scrollable-section::-webkit-scrollbar{height:0}gux-tab-advanced-list-legacy .gux-sr-only{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";
-
-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 GuxTabAdvancedListLegacy = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.newTab = createEvent(this, "newTab", 7);
-    this.sortChanged = createEvent(this, "sortChanged", 7);
-    this.showNewTabButton = true;
-    this.tabLimit = Infinity;
-    this.allowSort = true;
-    this.focused = 0;
-    this.disableAddTabButton = false;
-    this.tabTriggers = undefined;
-    this.hasScrollbar = false;
-    this.keyboardSort = false;
-    this.initialSortIndex = 0;
-    this.sortTarget = undefined;
-    this.ariaLiveAlert = '';
-  }
-  onFocusin(event) {
-    if (this.allowSort &&
-      eventIsFrom('.gux-scrollable-section', event) &&
-      !this.keyboardSort) {
-      this.ariaLiveAlert = 'toggleSort';
-    }
-  }
-  onFocusout(event) {
-    if (!this.root
-      .querySelector('.gux-scrollable-section')
-      .contains(event.relatedTarget)) {
-      this.tabTriggers.forEach((tabTrigger, index) => {
-        void tabTrigger.guxGetActive().then(activeElement => {
-          if (activeElement) {
-            this.focused = index;
-          }
-          else {
-            tabTrigger
-              .querySelector('.gux-tab-button')
-              .setAttribute('tabindex', '-1');
-            if (tabTrigger.querySelector('.gux-tab-options-button')) {
-              tabTrigger
-                .querySelector('.gux-tab-options-button')
-                .setAttribute('tabindex', '-1');
-            }
-          }
-        });
-      });
-    }
-  }
-  watchAllowSort(allowSort) {
-    if (allowSort) {
-      this.validateSortableInstance();
-    }
-    else {
-      this.destroySortable();
-    }
-  }
-  onMutation() {
-    this.setTabTriggers();
-  }
-  onKeydown(event) {
-    switch (event.key) {
-      case 'ArrowRight':
-      case 'ArrowDown':
-        event.preventDefault();
-        if (this.keyboardSort &&
-          !eventIsFrom('.gux-tab-options-button', event)) {
-          this.ariaLiveAlert = '';
-          const parentNode = this.root.querySelector('.gux-scrollable-section');
-          const allNodes = parentNode.querySelectorAll('gux-tab-advanced-legacy');
-          const targetNodeIndex = Array.prototype.indexOf.call(allNodes, this.sortTarget);
-          let insertBeforeTab;
-          if (targetNodeIndex === allNodes.length - 1) {
-            insertBeforeTab = allNodes[0];
-          }
-          else {
-            insertBeforeTab = allNodes[targetNodeIndex + 2];
-          }
-          parentNode.insertBefore(this.sortTarget, insertBeforeTab);
-          this.tabTriggers = this.root.querySelectorAll('gux-tab-advanced-legacy');
-          this.tabTriggers.forEach((tabTrigger, index) => {
-            var _a;
-            const active = tabTrigger.tabId ===
-              ((_a = this.sortTarget) === null || _a === void 0 ? void 0 : _a.getAttribute('tab-id'));
-            if (active) {
-              this.focused = index;
-            }
-          });
-          this.focusTab(this.focused);
-        }
-        else if (!eventIsFrom('.gux-tab-options-button', event) &&
-          !eventIsFrom('.gux-dropdown-option-container', event)) {
-          this.handleKeyboardScroll('forward');
-        }
-        break;
-      case 'ArrowLeft':
-      case 'ArrowUp':
-        event.preventDefault();
-        if (this.keyboardSort &&
-          !eventIsFrom('.gux-tab-options-button', event)) {
-          this.ariaLiveAlert = '';
-          const parentNode = this.root.querySelector('.gux-scrollable-section');
-          const allNodes = parentNode.querySelectorAll('gux-tab-advanced-legacy');
-          const targetNodeIndex = Array.prototype.indexOf.call(allNodes, this.sortTarget);
-          const insertBeforeTab = allNodes[targetNodeIndex - 1] || null;
-          parentNode.insertBefore(this.sortTarget, insertBeforeTab);
-          this.tabTriggers = this.root.querySelectorAll('gux-tab-advanced-legacy');
-          this.tabTriggers.forEach((tabTrigger, index) => {
-            var _a;
-            const active = tabTrigger.tabId ===
-              ((_a = this.sortTarget) === null || _a === void 0 ? void 0 : _a.getAttribute('tab-id'));
-            if (active) {
-              this.focused = index;
-            }
-          });
-          this.focusTab(this.focused);
-        }
-        else if (!eventIsFrom('.gux-tab-options-button', event) &&
-          !eventIsFrom('.gux-dropdown-option-container', event)) {
-          this.handleKeyboardScroll('backward');
-        }
-        break;
-      case 'Escape':
-        event.preventDefault();
-        if (this.keyboardSort && this.allowSort) {
-          this.keyboardSort = false;
-          this.ariaLiveAlert = 'sortCancelled';
-          const parentNode = this.root.querySelector('.gux-scrollable-section');
-          const allNodes = this.tabTriggers;
-          const targetNodeIndex = this.initialSortIndex;
-          const insertBeforeTab = allNodes[targetNodeIndex] || null;
-          parentNode.insertBefore(this.sortTarget, insertBeforeTab);
-        }
-        this.tabTriggers = this.root.querySelectorAll('gux-tab-advanced-legacy');
-        this.tabTriggers.forEach((tabTrigger, index) => {
-          var _a;
-          const active = tabTrigger.tabId ===
-            ((_a = this.sortTarget) === null || _a === void 0 ? void 0 : _a.getAttribute('tab-id'));
-          if (active) {
-            this.focused = index;
-          }
-        });
-        this.focusTab(this.initialSortIndex);
-        afterNextRenderTimeout(() => {
-          this.focusTab(this.initialSortIndex);
-        });
-        break;
-      case 'Enter':
-        if (this.keyboardSort) {
-          event.preventDefault();
-          this.keyboardSort = false;
-          this.ariaLiveAlert = 'sortComplete';
-          this.tabTriggers = this.root.querySelectorAll('gux-tab-advanced-legacy');
-          this.tabTriggers.forEach((tabTrigger, index) => {
-            var _a;
-            const active = tabTrigger.tabId ===
-              ((_a = this.sortTarget) === null || _a === void 0 ? void 0 : _a.getAttribute('tab-id'));
-            if (active) {
-              this.focused = index;
-            }
-          });
-          this.emitSortChanged();
-        }
-        break;
-      case 'Tab':
-        if (this.keyboardSort) {
-          this.keyboardSort = false;
-          this.ariaLiveAlert = 'sortCancelled';
-        }
-        break;
-      case 'Home':
-        event.preventDefault();
-        this.focusTab(0);
-        break;
-      case 'End':
-        event.preventDefault();
-        this.focusTab(this.tabTriggers.length - 1);
-        break;
-    }
-  }
-  onKeyup(event) {
-    switch (event.key) {
-      case ' ':
-        if (eventIsFrom('.gux-tab', event) &&
-          !eventIsFrom('.gux-tab-options-button', event) &&
-          !eventIsFrom('gux-popover-list', event) &&
-          this.allowSort) {
-          event.preventDefault();
-          if (this.keyboardSort === true) {
-            this.keyboardSort = false;
-            this.ariaLiveAlert = 'sortComplete';
-            this.tabTriggers = this.root.querySelectorAll('gux-tab-advanced-legacy');
-            this.tabTriggers.forEach((tabTrigger, index) => {
-              var _a;
-              const active = tabTrigger.tabId ===
-                ((_a = this.sortTarget) === null || _a === void 0 ? void 0 : _a.getAttribute('tab-id'));
-              if (active) {
-                this.focused = index;
-              }
-            });
-            this.focusTab(this.focused);
-            this.emitSortChanged();
-          }
-          else {
-            this.keyboardSort = true;
-            this.sortTarget = event.target.parentNode.parentNode;
-            this.tabTriggers.forEach((tabTrigger, index) => {
-              var _a;
-              const active = tabTrigger.tabId ===
-                ((_a = this.sortTarget) === null || _a === void 0 ? void 0 : _a.getAttribute('tab-id'));
-              if (active) {
-                this.initialSortIndex = index;
-              }
-            });
-            this.ariaLiveAlert = 'sortModeOn';
-          }
-        }
-    }
-  }
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async guxSetActive(activeTab) {
-    this.tabTriggers.forEach((tabTrigger, index) => {
-      const active = tabTrigger.tabId === activeTab;
-      void tabTrigger.guxSetActive(active);
-      if (active) {
-        this.focused = index;
-      }
-    });
-  }
-  focusTab(tabIndex) {
-    this.focused = tabIndex;
-    this.tabTriggers.forEach((tabTrigger, index) => {
-      void tabTrigger.guxGetActive().then(activeElement => {
-        if (this.focused !== index && !activeElement) {
-          tabTrigger
-            .querySelector('.gux-tab-button')
-            .setAttribute('tabindex', '-1');
-          if (tabTrigger.querySelector('.gux-tab-options-button')) {
-            tabTrigger
-              .querySelector('.gux-tab-options-button')
-              .setAttribute('tabindex', '-1');
-          }
-        }
-      });
-    });
-    this.tabTriggers[this.focused]
-      .querySelector('button')
-      .setAttribute('tabindex', '0');
-    if (this.tabTriggers[this.focused].querySelector('.gux-tab-options-button')) {
-      this.tabTriggers[this.focused]
-        .querySelector('.gux-tab-options-button')
-        .setAttribute('tabindex', '0');
-    }
-    void this.tabTriggers[this.focused].guxFocus();
-  }
-  setTabTriggers() {
-    this.tabTriggers = this.root.querySelectorAll('gux-tab-advanced-legacy');
-    if (this.tabTriggers) {
-      this.triggerIds = Array.from(this.tabTriggers)
-        .map(trigger => `gux-${trigger.getAttribute('tab-id')}-tab`)
-        .join(' ');
-    }
-    else {
-      this.triggerIds = '';
-    }
-  }
-  createSortable() {
-    this.sortableInstance = new Sortable(this.root.querySelector('.gux-scrollable-section'), {
-      animation: 250,
-      draggable: 'gux-tab-advanced-legacy',
-      filter: '.ignore-sort',
-      onMove: (event) => {
-        return !event.related.classList.contains('ignore-sort');
-      },
-      onUpdate: () => {
-        this.emitSortChanged();
-      }
-    });
-  }
-  destroySortable() {
-    if (this.sortableInstance) {
-      this.sortableInstance.destroy();
-      this.sortableInstance = null;
-    }
-  }
-  emitSortChanged() {
-    const tabIds = Array.from(this.root.querySelectorAll('gux-tab-advanced-legacy')).map(tabElement => tabElement.tabId);
-    this.sortChanged.emit(tabIds);
-  }
-  checkForScrollbarHideOrShow() {
-    readTask(() => {
-      const el = this.root.querySelector('.gux-scrollable-section');
-      const hasScrollbar = el.clientWidth < el.scrollWidth;
-      if (hasScrollbar !== this.hasScrollbar) {
-        this.hasScrollbar = hasScrollbar;
-      }
-    });
-  }
-  handleKeyboardScroll(direction) {
-    if (direction === 'forward') {
-      if (this.focused < this.tabTriggers.length - 1) {
-        if (this.hasScrollbar) {
-          this.scrollRight();
-        }
-        this.focusTab(this.focused + 1);
-      }
-      else {
-        if (this.hasScrollbar) {
-          this.scrollToStart();
-        }
-        this.focusTab(0);
-      }
-    }
-    else if (direction === 'backward') {
-      if (this.focused > 0) {
-        if (this.hasScrollbar) {
-          this.scrollLeft();
-        }
-        this.focusTab(this.focused - 1);
-      }
-      else {
-        if (this.hasScrollbar) {
-          this.scrollToEnd();
-        }
-        this.focusTab(this.tabTriggers.length - 1);
-      }
-    }
-  }
-  disconnectedCallback() {
-    if (this.sortableInstance) {
-      this.destroySortable();
-    }
-    if (this.resizeObserver) {
-      this.resizeObserver.unobserve(this.root.querySelector('.gux-tab-container'));
-    }
-    if (this.domObserver) {
-      this.domObserver.disconnect();
-    }
-  }
-  async componentWillLoad() {
-    this.setTabTriggers();
-    this.i18n = await buildI18nForComponent(this.root, tabsResources, 'gux-tabs-advanced');
-  }
-  validateSortableInstance() {
-    if (this.allowSort && !this.sortableInstance) {
-      this.createSortable();
-    }
-  }
-  componentDidLoad() {
-    this.validateSortableInstance();
-    if (!this.resizeObserver && window.ResizeObserver) {
-      this.resizeObserver = new ResizeObserver(() => this.checkForScrollbarHideOrShow());
-    }
-    if (this.resizeObserver) {
-      this.resizeObserver.observe(this.root.querySelector('.gux-scrollable-section'));
-    }
-    if (!this.domObserver && window.MutationObserver) {
-      this.domObserver = new MutationObserver(() => this.checkForScrollbarHideOrShow());
-    }
-    if (this.domObserver) {
-      this.domObserver.observe(this.root, {
-        childList: true,
-        attributes: false,
-        subtree: true
-      });
-    }
-    afterNextRenderTimeout(() => {
-      this.checkForScrollbarHideOrShow();
-    }, 500);
-  }
-  scrollLeft() {
-    writeTask(() => {
-      var _a;
-      this.root
-        .querySelector('.gux-scrollable-section')
-        .scrollBy(-((_a = this.root.querySelector('gux-tab-advanced-legacy')) === null || _a === void 0 ? void 0 : _a.scrollWidth), 0);
-    });
-  }
-  scrollRight() {
-    writeTask(() => {
-      var _a;
-      this.root
-        .querySelector('.gux-scrollable-section')
-        .scrollBy((_a = this.root.querySelector('gux-tab-advanced-legacy')) === null || _a === void 0 ? void 0 : _a.scrollWidth, 0);
-    });
-  }
-  scrollToStart() {
-    const scrollableSection = this.root.querySelector('.gux-scrollable-section');
-    writeTask(() => {
-      scrollableSection === null || scrollableSection === void 0 ? void 0 : scrollableSection.scrollBy(-(scrollableSection === null || scrollableSection === void 0 ? void 0 : scrollableSection.scrollWidth), 0);
-    });
-  }
-  scrollToEnd() {
-    const scrollableSection = this.root.querySelector('.gux-scrollable-section');
-    writeTask(() => {
-      scrollableSection.scrollBy(scrollableSection === null || scrollableSection === void 0 ? void 0 : scrollableSection.scrollWidth, 0);
-    });
-  }
-  componentWillRender() {
-    const tabs = Array.from(this.root.querySelectorAll('gux-tab-advanced-legacy'));
-    this.disableAddTabButton = tabs.length >= this.tabLimit;
-  }
-  render() {
-    const AddNewTabButton = (props) => {
-      return (h("button", { title: this.disableAddTabButton
-          ? this.i18n('disableNewTab')
-          : this.root.querySelector('[slot="add-tab"]')
-            ? this.root.querySelector('[slot="add-tab"]').textContent.trim()
-            : this.i18n('createNewTab'), class: "add-tab-button", onClick: () => props.onClick(), disabled: this.disableAddTabButton }, h("slot", { name: "add-tab" }, h("gux-icon", { "icon-name": "add", decorative: true }))));
-    };
-    return [
-      h("span", { class: "gux-sr-only gux-aria-live-region", "aria-live": "polite" }, this.ariaLiveAlert ? this.i18n(this.ariaLiveAlert) : ''),
-      h("div", { class: "gux-tab-container" }, h("div", { class: "action-button-container" }, this.renderScrollButton('scrollLeft')), h("div", { role: "tablist", class: `gux-scrollable-section ${this.keyboardSort ? 'gux-tab-sorting' : ''}`, "aria-owns": this.triggerIds }, h("slot", null)), h("div", { class: "action-button-container" }, this.renderScrollButton('scrollRight'), this.showNewTabButton ? (h(AddNewTabButton, { onClick: () => this.newTab.emit() })) : null))
-    ];
-  }
-  renderScrollButton(direction) {
-    return (h("div", { class: "gux-scroll-button-container" }, this.hasScrollbar ? (h("button", { tabindex: "-1", title: this.i18n(direction), "aria-label": this.i18n(direction), class: "gux-scroll-button", onDragOver: () => this.getScrollDirection(direction), onClick: () => this.getScrollDirection(direction) }, h("gux-icon", { "icon-name": this.getChevronIconName(direction), decorative: true }))) : null));
-  }
-  getScrollDirection(direction) {
-    switch (direction) {
-      case 'scrollLeft':
-        this.scrollLeft();
-        break;
-      case 'scrollRight':
-        this.scrollRight();
-        break;
-    }
-  }
-  getChevronIconName(direction) {
-    switch (direction) {
-      case 'scrollLeft':
-        return 'chevron-left';
-      case 'scrollRight':
-        return 'chevron-right';
-    }
-  }
-  get root() { return getElement(this); }
-  static get watchers() { return {
-    "allowSort": ["watchAllowSort"]
-  }; }
-};
-__decorate([
-  OnMutation({ childList: true, subtree: true })
-], GuxTabAdvancedListLegacy.prototype, "onMutation", null);
-GuxTabAdvancedListLegacy.style = guxTabAdvancedListCss;
-
-export { GuxTabAdvancedListLegacy as gux_tab_advanced_list_legacy };

package/dist/esm/gux-tab-advanced-panel-legacy.entry.js

@@ -1,30 +0,0 @@
-import { r as registerInstance, c as createEvent, h } from './index-a0eec33a.js';
-
-const guxTabAdvancedPanelCss = "gux-tab-advanced-panel-legacy div[role=tabpanel]:focus{outline:none}gux-tab-advanced-panel-legacy div[role=tabpanel]:focus-visible{outline:var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);outline-offset:var(--gse-semantic-focusRing-offset)}";
-
-const GuxTabAdvancedPanelLegacy = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.guxactivepanelchange = createEvent(this, "guxactivepanelchange", 7);
-    this.tabId = undefined;
-    this.active = false;
-  }
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async guxSetActive(active) {
-    this.active = active;
-  }
-  watchActivePanel() {
-    if (this.active === true) {
-      this.guxactivepanelchange.emit(this.tabId);
-    }
-  }
-  render() {
-    return (h("div", { id: `gux-${this.tabId}-panel`, role: "tabpanel", "aria-labelledby": `gux-${this.tabId}-tab`, tabIndex: 0, hidden: !this.active, "aria-live": "assertive" }, h("slot", null)));
-  }
-  static get watchers() { return {
-    "active": ["watchActivePanel"]
-  }; }
-};
-GuxTabAdvancedPanelLegacy.style = guxTabAdvancedPanelCss;
-
-export { GuxTabAdvancedPanelLegacy as gux_tab_advanced_panel_legacy };