@heartlandone/vega 2.74.0-RTE-table-preview → 2.75.0-RTE-table-preview

package/dist/vega/vega-tab-group.entry.js

@@ -1,1281 +0,0 @@
-import { h, F as Fragment, r as registerInstance, e as createEvent, g as Host, i as getElement } from './index-01a2f9c9.js';
-import { s as sanitizeVegaComponent } from './component-0cff85cf.js';
-import { V as VegaSlimmer, b as MapToComponentField, M as MapToComponentMethod, m as methodPlaceholder, d as slotPlaceholder, e as InjectVegaGlobalSlimmer, a as InjectVegaSlimmer } from './vega-slimmer-core-83fd0e22.js';
-import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-ee8774a6.js';
-import { d as debounce } from './timer-9321173b.js';
-import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
-import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-3b49c6b3.js';
-import { V as VegaDropdownClick, a as VegaClick } from './vega-event-id-61c8bd9f.js';
-import { C as ChangeManager } from './change-manager-b115783e.js';
-import { O as Observer } from './observer-3959f9dd.js';
-import { T as TAB_PANEL_ADD_OR_DEL_TO_GROUP } from './static-subject-title-6fdf8c8b.js';
-import { f as findParent } from './ui-5f775fd9.js';
-import { S as SynchronizeTaskQueue } from './synchronize-task-queue-ac8acc3b.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-fcfc9c8b.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-61db3eef.js';
-import { V as VegaComponentUsageRuntimeMetricsSlimmer } from './component-usage-runtime-metrics-0513698f.js';
-import './ui-189dae23.js';
-import './breakpoints-d9faf11c.js';
-import './try-get-document-bef0f526.js';
-import './dom-node-subject-factory-5798693b.js';
-import './internal-vega-event-manager-826279b7.js';
-import './vega-env-manager-8f8dc473.js';
-import './feature-flag-controller-24b9f956.js';
-import './index-1f9eab8f.js';
-import './_commonjsHelpers-2088bffa.js';
-
-var __decorate$a = (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;
-};
-class VegaTabGroupRenderer extends VegaSlimmer {
-  /**
-   * The function returns the tab menu container as an HTMLDivElement.
-   *
-   * @returns {HTMLDivElement} The method is returning an HTMLDivElement.
-   */
-  getTabMenuContainer() {
-    return this.tabMenuContainer;
-  }
-  render() {
-    return (h(Fragment, null,
-      h("div", { class: {
-          'tab-content-container': true,
-          'more-tab': this.tabPages.length > 1,
-          'tab-style-secondary': this.variant === 'secondary',
-          'tab-style-primary': this.variant !== 'secondary',
-          'swipe-more-tabs': this.overflow === 'scroll',
-        }, ref: (node) => (this.tabMenuContainer = node) },
-        this.overflow === 'menu' && this.directionButtonRenderer.render('left'),
-        this.tabListRenderer.render(),
-        this.overflow === 'menu' && this.directionButtonRenderer.render('right')),
-      h("div", { class: "horizontal-divider" }),
-      this.contentRenderer.render()));
-  }
-}
-__decorate$a([
-  MapToComponentField()
-], VegaTabGroupRenderer.prototype, "tabPages", void 0);
-__decorate$a([
-  MapToComponentField()
-], VegaTabGroupRenderer.prototype, "variant", void 0);
-__decorate$a([
-  MapToComponentField()
-], VegaTabGroupRenderer.prototype, "overflow", void 0);
-__decorate$a([
-  MapToComponentField({ componentFieldName: 'vegaTabGroupTabListRenderer' })
-], VegaTabGroupRenderer.prototype, "tabListRenderer", void 0);
-__decorate$a([
-  MapToComponentField({ componentFieldName: 'vegaTabGroupDirectionButtonRenderer' })
-], VegaTabGroupRenderer.prototype, "directionButtonRenderer", void 0);
-__decorate$a([
-  MapToComponentField({ componentFieldName: 'vegaTabGroupContentRenderer' })
-], VegaTabGroupRenderer.prototype, "contentRenderer", void 0);
-
-var __decorate$9 = (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;
-};
-/** The VegaTabGroupSelectedTargetController class is responsible for handling the selected data target in a VegaTabGroup component and emitting a click event. */
-class VegaTabGroupSelectedTargetController extends VegaSlimmer {
-  /**
-   * The function sets the selectedTabDataTarget property to the provided dataTarget value.
-   *
-   * @param {string} dataTarget - The dataTarget parameter is a string that represents the target data for the selected tab.
-   */
-  setSelectedDataTarget(dataTarget) {
-    this.selectedTabDataTarget = dataTarget;
-  }
-  /**
-   * The function emits click event and checks for prevent default then sets the selectedTabDataTarget property to the provided dataTarget value.
-   *
-   * @param {string} dataTarget - The dataTarget parameter is a string that represents the target data for the selected tab.
-   */
-  handleTabItemClick(dataTarget) {
-    const clickEvent = this.clickEventEmitter.emit(dataTarget);
-    if (clickEvent && !clickEvent.defaultPrevented) {
-      if (dataTarget === this.selectedTabDataTarget) {
-        this.vegaTabGroupPageIndexController.setCurrentPageIndexBySelectedTab(dataTarget);
-      }
-      else {
-        this.setSelectedDataTarget(dataTarget);
-      }
-    }
-  }
-}
-__decorate$9([
-  MapToComponentField()
-], VegaTabGroupSelectedTargetController.prototype, "clickEventEmitter", void 0);
-__decorate$9([
-  MapToComponentField({ writable: true })
-], VegaTabGroupSelectedTargetController.prototype, "selectedTabDataTarget", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaTabGroupSelectedTargetController.prototype, "vegaTabGroupPageIndexController", void 0);
-
-/**
- * It takes an array of items, an array of values, and a capacity, and returns an array of arrays of
- * items, where each array of items has a total value less than or equal to the capacity
- */
-class ValuePaginator {
-  /**
-   * It takes an array of items, a function that returns a number for each item, and a number or a
-   * function that returns a number, and returns an array of arrays of items
-   *
-   * @typedef T generic type  parameter
-   * @param {T[]} items - T[] - the items to paginate
-   * @param {(input: T, index: number) => number} valueGetter - (input: T, index: number) => number
-   * @param {number | ((startIndex: number, values: number[]) => number)} currentPageCapacity - number |
-   * ((startIndex: number, values: number[]) => number)
-   * @returns {T[][]} An array of arrays of items.
-   */
-  paginate(items, valueGetter, currentPageCapacity) {
-    const values = items.map(valueGetter);
-    return this.doPaginateByCapacity(items, values, currentPageCapacity);
-  }
-  /**
-   * It takes an array of items, an array of values, and a capacity, and returns an array of arrays of
-   * items, where each array of items is a page, and the number of items in each page is determined by
-   * the capacity
-   *
-   * @typedef T generic type  parameter
-   * @param {T[]} items - T[]
-   * @param {number[]} values - number[]
-   * @param {number | ((startIndex: number, values: number[]) => number)} currentPageCapacity - number |
-   * ((startIndex: number, values: number[]) => number)
-   * @returns {T[][]} An array of arrays of items.
-   */
-  doPaginateByCapacity(items, values, currentPageCapacity) {
-    const pages = [];
-    let startIndex = 0;
-    while (startIndex < values.length) {
-      const pageElementNumber = this.valueSum(startIndex, values, currentPageCapacity);
-      if (pageElementNumber === 0) {
-        break;
-      }
-      pages.push(items.slice(startIndex, startIndex + pageElementNumber));
-      startIndex = startIndex + pageElementNumber;
-    }
-    return pages;
-  }
-  /**
-   * "Given a start index, an array of values, and a capacity, return the number of elements that can fit
-   * in the capacity."
-   *
-   * The function is a bit more complicated than that, but that's the gist of it
-   *
-   * @param {number} startIndex - The index of the first element in the page.
-   * @param {number[]} values - number[] - an array of numbers that represent the height of each element
-   * in the list.
-   * @param {number | ((startIndex: number, values: number[]) => number)} currentPageCapacity - number |
-   * ((startIndex: number, values: number[]) => number)
-   * @returns {number} The number of elements that can fit on a page.
-   */
-  valueSum(startIndex, values, currentPageCapacity) {
-    let totalValues = 0;
-    let flag = false;
-    let pageElementNumber = 0;
-    const dynamicCapacity = typeof currentPageCapacity === 'function'
-      ? currentPageCapacity(startIndex, values)
-      : currentPageCapacity;
-    values.slice(startIndex).forEach((value, index) => {
-      totalValues += value;
-      if (totalValues > dynamicCapacity && !flag) {
-        flag = true;
-        pageElementNumber = index;
-      }
-    });
-    if (!flag) {
-      pageElementNumber = values.slice(startIndex).length;
-    }
-    return pageElementNumber;
-  }
-}
-
-var __decorate$8 = (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;
-};
-/** The `VegaTabGroupPagesController` class is responsible for managing the tab pages and their widths in a tab group component. */
-class VegaTabGroupPagesController extends PageResizeObserverSlimmer {
-  /*
-   * The below method is e2e-test covered in
-   *
-   * @see{module:vega-tab-group-with-screen-size-change}
-   */
-  /**
-   * The constructor initializes a callback function and a target element.
-   */
-  constructor() {
-    /* eslint-disable jsdoc/require-jsdoc*/
-    super({
-      callback: /* istanbul ignore next */ () => {
-        this.initTabPagesWithDebounce();
-      },
-      target: /* istanbul ignore next */ () => this.host,
-      shouldTrigger: /* istanbul ignore next */ () => {
-        return !this.sliderStateController.isAnimationInProgress();
-      },
-    });
-    this.TAB_SIDE_BUTTON_WIDTH = 37;
-    /* The space of left button and first tab, right button hasn't space */
-    this.TAB_SIDE_BUTTON_AND_CONTENT_SPACE = 8;
-    this.valuePaginator = new ValuePaginator();
-    this.initTabPagesWithDebounce = debounce(this.initTabPages, 80, this);
-    /*
-     * The below method is e2e-test covered in
-     * @see{module:vega-tab-group-with-right-button}
-     */
-    /* istanbul ignore next */
-    /**
-     * 1.To calculate the visual width of the tab, you need to subtract the space occupied by the left and right buttons
-     * 2.If the current page is greater than 0, show the left button
-     * 3.If all tab widths of the current page and subsequent pages are larger than the visible width, display the right button.
-     *
-     * @param {number} startIndex start index
-     * @param {values} values number array
-     * @returns {number} the tab container width
-     */
-    this.getTabContainerSpace = (startIndex, values) => {
-      const primaryMargin = 48;
-      const groupWidth = this.host.getBoundingClientRect().width;
-      let tabGroupContainerWidth = this.variant === 'secondary' ? groupWidth : groupWidth - primaryMargin;
-      if (this.overflow === 'menu') {
-        if (startIndex > 0) {
-          tabGroupContainerWidth -= this.TAB_SIDE_BUTTON_WIDTH + this.TAB_SIDE_BUTTON_AND_CONTENT_SPACE;
-        }
-        const showRightButton = values.length > 0 &&
-          values.slice(startIndex).reduce((prev, current) => prev + current) >
-            tabGroupContainerWidth &&
-          tabGroupContainerWidth > 0;
-        if (showRightButton) {
-          tabGroupContainerWidth -= this.TAB_SIDE_BUTTON_WIDTH;
-        }
-      }
-      return tabGroupContainerWidth;
-    };
-    /**
-     * The `emptySourceAndHiddenDropdown` method is responsible for hiding any dropdown elements that have an empty source.
-     */
-    this.emptySourceAndHiddenDropdown = () => {
-      const dropdownElements = Array.from(this.host.shadowRoot.querySelectorAll('vega-dropdown'));
-      dropdownElements.forEach(async (element) => {
-        if (element.source.length === 0) {
-          await element.hide();
-        }
-      });
-    };
-    /* eslint-enable jsdoc/require-jsdoc*/
-  }
-  /**
-   * initial the tab pages when component call the componentDidLoad method
-   */
-  componentDidLoad() {
-    this.initTabPages();
-  }
-  /**
-   * initial the tab pages when component call the componentDidRender method
-   */
-  componentDidRender() {
-    this.initTabsWidthArray();
-    this.emptySourceAndHiddenDropdown();
-  }
-  /* istanbul ignore next*/
-  /**
-   * initial the tab pages when component call the watchGapChange method
-   *
-   * {@link VegaTabGroup#watchGapChange}
-   */
-  handleGapChange() {
-    this.initTabPages();
-  }
-  /* istanbul ignore next*/
-  /**
-   * initial the tab pages when component call the watchTabWidthArrayChange method
-   *
-   * {@link VegaTabGroup#watchTabWidthArrayChange}
-   */
-  handleTabWidthArrayChange() {
-    if (this.tabWidthArray.length > 0) {
-      this.initTabPages();
-    }
-  }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-tab-group-watch-tab-items-on-change}
-   */
-  /* istanbul ignore next */
-  /**
-   * On tab items value change, initialize tab pages
-   */
-  handleTabItemsChange() {
-    this.initTabPagesWithDebounce();
-  }
-  /**
-   * The function sets the tab items for a tab configuration.
-   *
-   * @param {TabConfig[]} value - The value parameter is an array of TabConfig objects.
-   */
-  setTabItems(value) {
-    this.tabItems = value;
-  }
-  /**
-   * The function sets the tab width array to the given value.
-   *
-   * @param {number[]} value - The value parameter is an array of numbers.
-   */
-  setTabWidthArray(value) {
-    this.tabWidthArray = value;
-  }
-  /*
-   * The below method is e2e-test covered in
-   * @see {module:vega-tab-group-with-gap-change}
-   */
-  /* istanbul ignore next */
-  /**
-   * initial the tab pages
-   */
-  initTabPages() {
-    if (this.tabItems) {
-      if (this.overflow === 'scroll') {
-        this.tabPages = [[...this.tabItems]];
-      }
-      else {
-        this.tabPages = this.valuePaginator.paginate(this.tabItems, (_input, index) => this.tabWidthArray[index] > 0
-          ? this.tabWidthArray[index] + Number(this.formatAndValidGap(this.gap))
-          : this.tabWidthArray[index], this.getTabContainerSpace);
-      }
-    }
-  }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-tab-group-with-right-button}
-   */
-  /* istanbul ignore next */
-  /**
-   * get the gap size from token
-   *
-   * @param {SpacingTokenType} gap gap token string
-   * @returns {string} the size number
-   */
-  formatAndValidGap(gap) {
-    return gap.replace('size-', '');
-  }
-  /*
-   * The below method is e2e-test covered in
-   * @see {module:vega-tab-group-with-right-button}
-   */
-  /* istanbul ignore next */
-  /**
-   * 1.record the width of tab.
-   * 2.the width of every tab is zero if the tab group component embedded in modal, so need recalculate the width of tab.
-   */
-  initTabsWidthArray() {
-    if (this.tabWidthArray.length === 0 ||
-      this.tabWidthArray.some((tabWidth) => tabWidth === 0)) {
-      const newTabWidthArray = [];
-      this.tabItems.forEach((item) => {
-        const tabItem = this.host.shadowRoot.querySelector(`.vega-tab[data-target='${item.dataTarget}']`);
-        if (tabItem) {
-          const tabWidth = tabItem.getBoundingClientRect().width;
-          newTabWidthArray.push(tabWidth);
-        }
-      });
-      if (newTabWidthArray.length > 0 && !newTabWidthArray.some((tabWidth) => tabWidth === 0)) {
-        this.tabWidthArray = [...newTabWidthArray];
-      }
-    }
-  }
-}
-__decorate$8([
-  MapToComponentField()
-], VegaTabGroupPagesController.prototype, "host", void 0);
-__decorate$8([
-  MapToComponentField()
-], VegaTabGroupPagesController.prototype, "gap", void 0);
-__decorate$8([
-  MapToComponentField({ writable: true })
-], VegaTabGroupPagesController.prototype, "tabPages", void 0);
-__decorate$8([
-  MapToComponentField({ writable: true })
-], VegaTabGroupPagesController.prototype, "tabWidthArray", void 0);
-__decorate$8([
-  MapToComponentField({ writable: true })
-], VegaTabGroupPagesController.prototype, "tabItems", void 0);
-__decorate$8([
-  MapToComponentField()
-], VegaTabGroupPagesController.prototype, "variant", void 0);
-__decorate$8([
-  MapToComponentField()
-], VegaTabGroupPagesController.prototype, "overflow", void 0);
-__decorate$8([
-  MapToComponentField({ componentFieldName: 'vegaTabGroupSliderStateController' })
-], VegaTabGroupPagesController.prototype, "sliderStateController", void 0);
-__decorate$8([
-  MapToComponentMethod('componentDidLoad')
-], VegaTabGroupPagesController.prototype, "componentDidLoad", null);
-__decorate$8([
-  MapToComponentMethod('componentDidRender')
-], VegaTabGroupPagesController.prototype, "componentDidRender", null);
-__decorate$8([
-  MapToComponentMethod('watchGapChange')
-], VegaTabGroupPagesController.prototype, "handleGapChange", null);
-__decorate$8([
-  MapToComponentMethod('watchTabWidthArrayChange')
-], VegaTabGroupPagesController.prototype, "handleTabWidthArrayChange", null);
-__decorate$8([
-  MapToComponentMethod('watchTabItemsChange')
-], VegaTabGroupPagesController.prototype, "handleTabItemsChange", null);
-
-var __decorate$7 = (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;
-};
-/** The `VegaTabGroupPageIndexController` class is a TypeScript class that manages the current page index of a tab group component. */
-class VegaTabGroupPageIndexController extends VegaSlimmer {
-  /**
-   * update the page index when component call watchTabPagesChange method
-   */
-  handleTabPagesChange() {
-    if (this.selectedTabDataTarget) {
-      this.setCurrentPageIndexBySelectedTab(this.selectedTabDataTarget);
-    }
-    else {
-      this.setCurrentPageIndexWhenTabPagesChange();
-    }
-  }
-  /**
-   * update the page index when component call watchSelectedTabDataTargetChange method
-   */
-  handleSelectedDataTargetChange() {
-    this.setCurrentPageIndexBySelectedTab(this.selectedTabDataTarget);
-  }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-tab-group-with-click-tab-in-dropdown}
-   */
-  /* istanbul ignore next */
-  /**
-   * Update the page index after the tab click
-   *
-   * @param {string} selectedTabDataTarget the tab item property dataTarget
-   */
-  setCurrentPageIndexBySelectedTab(selectedTabDataTarget) {
-    let pageIndex = -1;
-    this.tabPages.forEach((tabPage, index) => {
-      const tabIndex = tabPage.findIndex((tab) => tab.dataTarget === selectedTabDataTarget);
-      if (tabIndex !== -1) {
-        pageIndex = index;
-      }
-    });
-    if (pageIndex >= 0) {
-      this.currentPageIndex = pageIndex;
-    }
-  }
-  /* istanbul ignore next */
-  /**
-   * The `setPageIndex` function sets the current page index to the specified value.
-   *
-   * @param {number} pageIndex - The pageIndex parameter is a number that represents the index of the page you want to set as the current page.
-   */
-  setPageIndex(pageIndex) {
-    this.currentPageIndex = pageIndex;
-  }
-  /*
-   * The below method is e2e-test covered in
-   *
-   * @see {module:vega-tab-group-with-tabPages-change}
-   */
-  /* istanbul ignore next */
-  /**
-   * Update the current page index if tab pages array length change when delete the tab items
-   */
-  setCurrentPageIndexWhenTabPagesChange() {
-    if (this.tabPages && this.tabPages.length && !this.tabPages[this.currentPageIndex]) {
-      this.currentPageIndex = this.tabPages.length - 1;
-    }
-  }
-}
-__decorate$7([
-  MapToComponentField()
-], VegaTabGroupPageIndexController.prototype, "tabPages", void 0);
-__decorate$7([
-  MapToComponentField({ writable: true })
-], VegaTabGroupPageIndexController.prototype, "currentPageIndex", void 0);
-__decorate$7([
-  MapToComponentField()
-], VegaTabGroupPageIndexController.prototype, "selectedTabDataTarget", void 0);
-__decorate$7([
-  MapToComponentMethod('watchTabPagesChange')
-], VegaTabGroupPageIndexController.prototype, "handleTabPagesChange", null);
-__decorate$7([
-  MapToComponentMethod('watchSelectedTabDataTargetChange')
-], VegaTabGroupPageIndexController.prototype, "handleSelectedDataTargetChange", null);
-
-var __decorate$6 = (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;
-};
-class VegaTabGroupCloseButtonRenderer extends VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    /*
-     * The below method is e2e-test covered in
-     * @see{module:vega-tab-group-call-closeTab-only-one-tab-e2e}
-     */
-    /* istanbul ignore next */
-    this.onCloseTab = (e) => {
-      const closeIcon = e.currentTarget;
-      const vegaTab = closeIcon.closest('.vega-tab');
-      const closeTabIndex = this.tabItems.findIndex((item) => item.dataTarget === vegaTab.getAttribute('data-target'));
-      if (vegaTab.classList.contains('selected')) {
-        const searchIndex = closeTabIndex === this.tabItems.length - 1 ? closeTabIndex - 1 : closeTabIndex + 1;
-        this.selectedTargetController.setSelectedDataTarget(this.tabItems[searchIndex].dataTarget);
-      }
-      const newTabItems = this.tabItems
-        .slice(0, closeTabIndex)
-        .concat(this.tabItems.slice(closeTabIndex + 1));
-      this.tabPagesController.setTabItems(newTabItems);
-      const newTabWidthArray = this.tabWidthArray
-        .slice(0, closeTabIndex)
-        .concat(this.tabWidthArray.slice(closeTabIndex + 1));
-      this.tabPagesController.setTabWidthArray(newTabWidthArray);
-      e.stopPropagation();
-    };
-  }
-  render(item) {
-    const vegaCloseIconCss = this.showCloseButton
-      ? 'vega-close-icon'
-      : 'vega-close-icon vega-hidden';
-    return (this.showCloseButton &&
-      this.tabItems.length > 1 && (h("div", { class: vegaCloseIconCss, onClick: this.onCloseTab, role: 'button', tabIndex: item.disabled ? -1 : 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), "aria-label": 'Close Button' },
-      h("vega-icon", { icon: "close", size: "size-12" }))));
-  }
-}
-__decorate$6([
-  MapToComponentField()
-], VegaTabGroupCloseButtonRenderer.prototype, "tabWidthArray", void 0);
-__decorate$6([
-  MapToComponentField()
-], VegaTabGroupCloseButtonRenderer.prototype, "showCloseButton", void 0);
-__decorate$6([
-  MapToComponentField()
-], VegaTabGroupCloseButtonRenderer.prototype, "tabItems", void 0);
-__decorate$6([
-  MapToComponentField({ componentFieldName: 'vegaTabGroupSelectedTargetController' })
-], VegaTabGroupCloseButtonRenderer.prototype, "selectedTargetController", void 0);
-__decorate$6([
-  MapToComponentField({ componentFieldName: 'vegaTabGroupPagesController' })
-], VegaTabGroupCloseButtonRenderer.prototype, "tabPagesController", void 0);
-
-var __decorate$5 = (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;
-};
-class VegaTabGroupSwitchPageButtonRenderer extends VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    /*
-     * The below method is e2e-test covered in
-     * @see{module:vega-tab-group-with-button-click-normal}
-     */
-    /* istanbul ignore next */
-    /**
-     * If there is no pending animation, it calls the `setPageIndex` method of the `pageIndexController` object to update the current page index based on the direction of the button clicked
-     *
-     * @param {'left' | 'right'} direction left or right button
-     */
-    this.onDirectionButtonClick = (direction) => {
-      this.pageIndexController.setPageIndex(direction === 'left' ? this.currentPageIndex - 1 : this.currentPageIndex + 1);
-    };
-  }
-  /* istanbul ignore next */
-  getDropdownRef() {
-    return this.dropdownRef;
-  }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-tab-group-with-left-button}
-   * @see{module:vega-tab-group-with-right-button}
-   */
-  /* istanbul ignore next */
-  render(direction) {
-    const source = [];
-    this.tabPages
-      .slice(direction === 'left' ? 0 : this.currentPageIndex + 1, direction === 'left' ? this.currentPageIndex : this.tabPages.length)
-      .flat()
-      .map((tabItem) => {
-      source.push({
-        key: tabItem.dataTarget,
-        label: tabItem.label,
-        disabled: tabItem.disabled,
-      });
-    });
-    const translocation = {
-      X: 0,
-      Y: 16,
-    };
-    const isHidden = direction === 'left'
-      ? this.currentPageIndex === 0
-      : this.currentPageIndex + 1 === this.tabPages.length || this.tabPages.length <= 1;
-    const icon = direction === 'left' ? 'chevron-backward-rounded' : 'chevron-forward-rounded';
-    const selectedItemKey = source.find((item) => item.key === this.selectedTabDataTarget)
-      ? this.selectedTabDataTarget
-      : '';
-    return (h("div", { class: {
-        'tab-left-button': direction === 'left',
-        'tab-right-button': direction === 'right',
-        'vega-hidden': isHidden,
-      }, 
-      /* eslint-disable-next-line react/jsx-no-bind */
-      onClick: () => this.onDirectionButtonClick(direction), "aria-label": "No label defined", role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() },
-      h("vega-dropdown", { source: source, translocation: translocation, selectType: "single", selectedSourceKey: selectedItemKey, "position-relative-to": this.positionRelativeTo, ref: (ref) => {
-          this.dropdownRef = ref;
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownClick, (payload) => {
-            this.vegaTabGroupSelectedTargetController.handleTabItemClick(payload.detail);
-          });
-        } },
-        h("vega-icon", { size: "size-12", icon: icon }))));
-  }
-}
-__decorate$5([
-  MapToComponentField()
-], VegaTabGroupSwitchPageButtonRenderer.prototype, "tabPages", void 0);
-__decorate$5([
-  MapToComponentField()
-], VegaTabGroupSwitchPageButtonRenderer.prototype, "currentPageIndex", void 0);
-__decorate$5([
-  MapToComponentField()
-], VegaTabGroupSwitchPageButtonRenderer.prototype, "selectedTabDataTarget", void 0);
-__decorate$5([
-  MapToComponentField()
-], VegaTabGroupSwitchPageButtonRenderer.prototype, "positionRelativeTo", void 0);
-__decorate$5([
-  MapToComponentField({ componentFieldName: 'vegaTabGroupPageIndexController' })
-], VegaTabGroupSwitchPageButtonRenderer.prototype, "pageIndexController", void 0);
-__decorate$5([
-  MapToComponentField()
-], VegaTabGroupSwitchPageButtonRenderer.prototype, "vegaTabGroupSelectedTargetController", void 0);
-
-var __decorate$4 = (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;
-};
-/** The `VegaTabGroupPanelController` class is responsible for managing the panels within a tab group component, including initializing the panels, setting the default active panel, and updating the active panel based on user selection. */
-class VegaTabGroupPanelController extends VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    this.tabPanels = [];
-    /**
-     * It is used to handle updates to the tab panels within the tab group component.
-     *
-     * @param {PanelUpdatePayload} payload the panel element and the action type
-     */
-    this.handlePanelUpdate = (payload) => {
-      const { host, type } = payload;
-      if (type === 'ADD') {
-        this.tabPanels.push(host);
-      }
-      else {
-        this.tabPanels = this.tabPanels.filter((panel) => {
-          return panel !== host;
-        });
-      }
-    };
-  }
-  /**
-   * register the observer when component connected
-   */
-  connectedCallback() {
-    this.tabPanelUpdateObserver = new Observer(this.canAcceptPanelUpdate.bind(this), this.handlePanelUpdate);
-    ChangeManager.register(TAB_PANEL_ADD_OR_DEL_TO_GROUP, this.tabPanelUpdateObserver);
-  }
-  /**
-   * un-register the observer when component remove, clear the tab panel map
-   */
-  disconnectedCallback() {
-    ChangeManager.unregister(TAB_PANEL_ADD_OR_DEL_TO_GROUP, this.tabPanelUpdateObserver);
-    this.tabPanels = [];
-  }
-  /**
-   * initial the select tab data target after tap panel render
-   */
-  componentDidLoad() {
-    this.initSelectedTabDataTarget();
-  }
-  /**
-   * update the panels status when component call watchSelectedTabDataTargetChange method
-   */
-  watchSelectedTabDataTargetChange() {
-    this.updateTabPanelsStatus(this.selectedTabDataTarget);
-  }
-  /**
-   * The function `canAcceptPanelUpdate` checks if a panel update can be accepted based on the payload's type and host.
-   *
-   * @param {PanelUpdatePayload} payload the panel element and the action type
-   * @returns {boolean} a boolean value.
-   */
-  canAcceptPanelUpdate(payload) {
-    const { host, type } = payload;
-    if (type === 'ADD') {
-      return findParent(payload.host, 'VEGA-TAB-GROUP') === this.host && !this.tabPanels.includes(host);
-    }
-    else {
-      return this.tabPanels && this.tabPanels.includes(host);
-    }
-  }
-  /**
-   * The function initializes the selected tab data target by setting it to the default active panel ID
-   * or the first tab item's data target if no default active panel ID is available.
-   */
-  initSelectedTabDataTarget() {
-    if (!this.selectedTabDataTarget) {
-      let defaultActivePanelId = this.getDefaultActivePanelId();
-      if (!defaultActivePanelId && this.tabItems && this.tabItems.length) {
-        defaultActivePanelId = this.tabItems[0].dataTarget;
-      }
-      if (defaultActivePanelId) {
-        this.selectTargetController.setSelectedDataTarget(defaultActivePanelId);
-      }
-    }
-    else {
-      this.updateTabPanelsStatus(this.selectedTabDataTarget);
-    }
-  }
-  /**
-   * get the default active panel element if user set
-   *
-   * @returns {Nullable<string>} the default active panel attribute id
-   */
-  getDefaultActivePanelId() {
-    if (this.tabPanels && this.tabPanels.length) {
-      const activePanel = this.tabPanels.find((tabPanel) => tabPanel.isActive === true);
-      return activePanel ? activePanel.getAttribute('id') : null;
-    }
-  }
-  /**
-   * update the active panel by selected panel id
-   *
-   * @param {string} selectedTabDataTarget selected panel id
-   */
-  updateTabPanelsStatus(selectedTabDataTarget) {
-    if (this.tabPanels.length && selectedTabDataTarget) {
-      this.tabPanels.forEach((item) => {
-        const paneId = item.getAttribute('id');
-        if (paneId === selectedTabDataTarget) {
-          item.isActive = true;
-        }
-        else {
-          item.isActive = false;
-        }
-      });
-    }
-  }
-}
-__decorate$4([
-  MapToComponentField()
-], VegaTabGroupPanelController.prototype, "host", void 0);
-__decorate$4([
-  MapToComponentField()
-], VegaTabGroupPanelController.prototype, "selectedTabDataTarget", void 0);
-__decorate$4([
-  MapToComponentField()
-], VegaTabGroupPanelController.prototype, "tabItems", void 0);
-__decorate$4([
-  MapToComponentField({ componentFieldName: 'vegaTabGroupSelectedTargetController' })
-], VegaTabGroupPanelController.prototype, "selectTargetController", void 0);
-__decorate$4([
-  MapToComponentMethod('connectedCallback')
-], VegaTabGroupPanelController.prototype, "connectedCallback", null);
-__decorate$4([
-  MapToComponentMethod('disconnectedCallback')
-], VegaTabGroupPanelController.prototype, "disconnectedCallback", null);
-__decorate$4([
-  MapToComponentMethod('componentDidLoad')
-], VegaTabGroupPanelController.prototype, "componentDidLoad", null);
-__decorate$4([
-  MapToComponentMethod('watchSelectedTabDataTargetChange')
-], VegaTabGroupPanelController.prototype, "watchSelectedTabDataTargetChange", null);
-
-var __decorate$3 = (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;
-};
-class VegaTabGroupTabListRenderer extends VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    this.TAB_LABEL_MAX_SIZE = 32;
-    /* istanbul ignore next */
-    /** The `getCarouselDomRef` method is a getter function that returns the reference to the `carouselDom`
-    element. It is used to access the `carouselDom` element from outside the class. By returning the
-    reference to the `carouselDom` element, other parts of the code can interact with the `carouselDom`
-    element and perform operations on it. */
-    this.getCarouselDomRef = () => {
-      return this.carouselDom;
-    };
-  }
-  render() {
-    return (h("div", { class: {
-        'tab-list': true,
-        'menu': this.overflow === 'menu',
-        'scroll': this.overflow === 'scroll',
-      } },
-      this.overflow === 'menu' && this.renderTabListInMenuOverflow(),
-      this.overflow === 'scroll' && this.renderTabListInScrollOverflow()));
-  }
-  renderTabListInMenuOverflow() {
-    return (h("vega-carousel", { showSlider: false, ref: (el) => (this.carouselDom = el) }, this.tabPages.length > 0 ? (this.tabPages.map((tabPage, index) => {
-      return h("div", { key: index }, this.renderTabList(tabPage));
-    })) : (h("div", null, this.renderTabList(this.tabItems)))));
-  }
-  renderTabListInScrollOverflow() {
-    return (h("div", { class: "overflow-scroll" }, this.tabPages.map((tabPage, index) => {
-      return h("div", { key: index }, this.renderTabList(tabPage));
-    })));
-  }
-  renderTabList(showTabItems) {
-    return (h("vega-flex", { gap: this.gap }, showTabItems.map((item) => {
-      return (h("div", { class: {
-          'vega-tab': true,
-          'selected': this.selectedTabDataTarget === item.dataTarget,
-          'last-page': this.currentPageIndex + 1 === this.tabPages.length,
-          'vega-flex-shrink-0': true,
-          'v-min-w-min': true,
-          'disabled': Boolean(item.disabled),
-        }, "data-target": item.dataTarget, key: item.dataTarget },
-        h("div", { class: "vega-tab-container" },
-          h("div", { class: {
-              'label': true,
-              'vega-close-icon-space': this.showCloseButton,
-            }, 
-            /* eslint-disable-next-line react/jsx-no-bind */
-            onClick: () => this.handleTabItemClick(item.dataTarget), "aria-label": item.dataTarget, role: 'button', tabIndex: item.disabled ? -1 : 0, onKeyDown: createEnterKeyHandlerToTriggerClick() },
-            this.renderPrefixIconDom(item),
-            this.renderTabLabelDom(item),
-            this.renderCounterBadgeDom(item)),
-          this.closeButtonRenderer.render(item))));
-    })));
-  }
-  renderPrefixIconDom(item) {
-    const prefixIcon = item.prefixIcon;
-    return prefixIcon && h("vega-icon", { icon: prefixIcon });
-  }
-  renderTabLabelDom(item) {
-    const labelLength = item.label.length;
-    return labelLength > this.TAB_LABEL_MAX_SIZE ? (h("vega-tooltip", { text: item.label, placement: "bottom", "position-relative-to": this.positionRelativeTo },
-      h("span", null,
-        item.label.substring(0, this.TAB_LABEL_MAX_SIZE),
-        "..."))) : (item.label);
-  }
-  renderCounterBadgeDom(item) {
-    const counterBadge = item.counterBadge;
-    const counterBadgeClass = this.getCounterBadgeClassByCount(counterBadge);
-    return ((counterBadge === null || counterBadge === void 0 ? void 0 : counterBadge.count) !== undefined &&
-      counterBadge.count > 0 && (h("div", { class: `vega-counter-badge ${counterBadgeClass}` },
-      h("vega-counter-badge", { count: counterBadge.count, color: counterBadge.color }))));
-  }
-  getCounterBadgeClassByCount(counterBadge) {
-    if (counterBadge && counterBadge.count) {
-      const digits = counterBadge.count.toString().length;
-      if (digits === 1) {
-        return 'one-digit';
-      }
-      else if (digits === 2) {
-        return 'two-digits';
-      }
-      else {
-        return 'multi-digits';
-      }
-    }
-    else {
-      return '';
-    }
-  }
-  handleTabItemClick(dataTarget) {
-    this.selectedTargetController.handleTabItemClick(dataTarget);
-  }
-}
-__decorate$3([
-  MapToComponentField()
-], VegaTabGroupTabListRenderer.prototype, "tabPages", void 0);
-__decorate$3([
-  MapToComponentField()
-], VegaTabGroupTabListRenderer.prototype, "currentPageIndex", void 0);
-__decorate$3([
-  MapToComponentField()
-], VegaTabGroupTabListRenderer.prototype, "selectedTabDataTarget", void 0);
-__decorate$3([
-  MapToComponentField()
-], VegaTabGroupTabListRenderer.prototype, "gap", void 0);
-__decorate$3([
-  MapToComponentField()
-], VegaTabGroupTabListRenderer.prototype, "showCloseButton", void 0);
-__decorate$3([
-  MapToComponentField()
-], VegaTabGroupTabListRenderer.prototype, "tabItems", void 0);
-__decorate$3([
-  MapToComponentField()
-], VegaTabGroupTabListRenderer.prototype, "overflow", void 0);
-__decorate$3([
-  MapToComponentField()
-], VegaTabGroupTabListRenderer.prototype, "positionRelativeTo", void 0);
-__decorate$3([
-  MapToComponentField({ componentFieldName: 'vegaTabGroupCloseButtonRenderer' })
-], VegaTabGroupTabListRenderer.prototype, "closeButtonRenderer", void 0);
-__decorate$3([
-  MapToComponentField({ componentFieldName: 'vegaTabGroupSelectedTargetController' })
-], VegaTabGroupTabListRenderer.prototype, "selectedTargetController", void 0);
-
-var __decorate$2 = (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;
-};
-class VegaTabGroupContentRenderer extends VegaSlimmer {
-  render() {
-    if (this.variant === 'secondary') {
-      return (h("div", { class: "vega-tab-group-content" },
-        h("slot", null)));
-    }
-    else {
-      return (h("vega-card", { margin: "0", padding: { default: 'size-24', S: 'size-12' }, variant: "shadow", backgroundColor: "bg-primary" },
-        h("div", { class: "vega-tab-group-content" },
-          h("slot", null))));
-    }
-  }
-}
-__decorate$2([
-  MapToComponentField()
-], VegaTabGroupContentRenderer.prototype, "variant", void 0);
-
-var __decorate$1 = (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;
-};
-/** The `VegaTabGroupSliderStateController` class manages the animation state of a tab group slider component. */
-class VegaTabGroupSliderStateController extends VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    /* about 2 frames in the browser */
-    this.UPDATE_ANIMATION_FLAG_DELAY = 32;
-    this.goToPageTaskQueue = new SynchronizeTaskQueue();
-    /**
-     * The normal flow:
-     * page index change
-     *   set pending flag to true
-     *   end animation
-     *   create remove flag setTimeout
-     *
-     * Quickly switch pages flow:
-     * page index change
-     *   set pending flag to true
-     * page index change
-     *   set pending flag to true
-     *   end animation
-     *   create remove flag setTimeout
-     * page index change
-     *   set pending flag to true
-     *   end animation
-     *   create remove flag setTimeout
-     *
-     *   end animation
-     *   create remove flag setTimeout
-     *
-     * Add a num records carousel action time, validate the num if want know the state
-     */
-    this.pendingCarouselActionCount = 0;
-  }
-  /**
-   * goToPage method should be called after the carousel re-render which waiting for the carousel to render all pages,
-   *    otherwise it may not jump to the current page.
-   */
-  async componentDidRender() {
-    await this.goToPageTaskQueue.runTask();
-  }
-  /* istanbul ignore next */
-  /**
-   * update the page index when component call watchCurrentPageIndexChange method
-   *
-   *  {@link VegaTabGroup#watchCurrentPageIndexChange}
-   */
-  async handlePageIndexChange() {
-    const carouselDom = this.tabListRenderer.getCarouselDomRef();
-    if (carouselDom) {
-      this.pendingCarouselActionCount += 1;
-      setTimeout(() => {
-        if (this && typeof this.pendingCarouselActionCount === 'number') {
-          this.pendingCarouselActionCount -= 1;
-        }
-      }, this.UPDATE_ANIMATION_FLAG_DELAY);
-      await this.goToPageTaskQueue.enqueue({
-        /** Add task to the queue and run it until component did render */
-        run: async () => await carouselDom.goToPage(this.currentPageIndex + 1),
-      }, false);
-    }
-  }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-tab-group-with-button-click-normal}
-   */
-  /* istanbul ignore next */
-  /**
-   * The function isAnimationInProgress() returns a boolean value indicating whether there is a pending animation for a tab.
-   *
-   * @returns {boolean} A boolean value indicating whether there is a pending animation.
-   */
-  isAnimationInProgress() {
-    return this.pendingCarouselActionCount > 0;
-  }
-}
-__decorate$1([
-  MapToComponentField({ componentFieldName: 'vegaTabGroupTabListRenderer' })
-], VegaTabGroupSliderStateController.prototype, "tabListRenderer", void 0);
-__decorate$1([
-  MapToComponentField()
-], VegaTabGroupSliderStateController.prototype, "currentPageIndex", void 0);
-__decorate$1([
-  MapToComponentMethod('componentDidRender')
-], VegaTabGroupSliderStateController.prototype, "componentDidRender", null);
-__decorate$1([
-  MapToComponentMethod('watchCurrentPageIndexChange')
-], VegaTabGroupSliderStateController.prototype, "handlePageIndexChange", null);
-
-const VegaTabGroupRuntimeMetricsPayloadDefinition = [
-  {
-    payloadKey: 'VARIANT_IS_PRIMARY',
-    payloadDescription: 'Specifies the visual style and prominence of the tab group',
-    /**
-     * The function checks if the `variant` property of the `host` element is equal to 'primary'.
-     * If it is, the function will return `true`.
-     *
-     * @param {HTMLElement} host - The element to check
-     * @returns {boolean} A boolean value
-     */
-    payloadValue: (host) => host.variant === 'primary',
-  },
-  {
-    payloadKey: 'VARIANT_IS_SECONDARY',
-    payloadDescription: 'Specifies the visual style and prominence of the tab group',
-    /**
-     * The function checks if the `variant` property of the `host` element is equal to 'secondary'.
-     * If it is, the function will return `true`.
-     *
-     * @param {HTMLElement} host - The element to check
-     * @returns {boolean} A boolean value
-     */
-    payloadValue: (host) => host.variant === 'secondary',
-  },
-];
-
-const vegaTabGroupCss = ".tab-content-container.tab-style-primary{margin-left:24px;margin-right:24px}.vega-tab{cursor:pointer;border-top-left-radius:8px;border-top-right-radius:8px;background-color:rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1))}.tab-content-container .tab-list.scroll{width:100%;overflow:hidden}.tab-content-container .tab-list.scroll .overflow-scroll>div{display:flex;overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.tab-content-container .tab-list.scroll .overflow-scroll>div::-webkit-scrollbar{display:none}.tab-content-container.more-tab .vega-tab{flex-grow:1}.tab-content-container.more-tab .vega-tab.last-page{flex-grow:0}.vega-tab>div.vega-tab-container{display:flex;align-items:center}.vega-tab>div.vega-tab-container>div{flex-grow:1}.tab-style-primary .vega-tab:hover{background-color:rgba(var(--v-bg-tab-hover, 245, 247, 247, 1))}.tab-style-primary .vega-tab.selected,.tab-style-primary .vega-tab.selected:hover{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1))}.vega-tab>div>.label{display:inline-flex;align-items:center;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px;cursor:pointer;color:rgba(var(--v-text-primary, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-tab>div>.label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-tab>div>.label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-tab>div>.label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}.vega-tab>div>.label vega-icon{padding-right:8px}.vega-tab>div>.label .vega-counter-badge{position:relative;height:20px;padding-left:8px}.vega-tab>div>.label .vega-counter-badge vega-counter-badge{position:absolute;padding-left:8px;top:10px}.vega-tab>div>.label .vega-counter-badge.one-digit{width:20px}.vega-tab>div>.label .vega-counter-badge.one-digit vega-counter-badge{left:10px}.vega-tab>div>.label .vega-counter-badge.two-digits{width:28px}.vega-tab>div>.label .vega-counter-badge.two-digits vega-counter-badge{left:14px}.vega-tab>div>.label .vega-counter-badge.multi-digits{width:32px}.vega-tab>div>.label .vega-counter-badge.multi-digits vega-counter-badge{left:16px}.vega-tab>div>.label.vega-close-icon-space{padding-right:12px}.vega-tab>div>div.vega-close-icon{padding-left:0px;flex-grow:0;padding-right:13px}.vega-tab>div>div.vega-hidden{display:none}.vega-tab>div vega-icon{color:rgba(var(--v-text-primary, 32, 54, 69, 1));box-sizing:content-box}.vega-tab>div>div.vega-close-icon vega-icon{color:rgba(var(--v-text-input-placeholder, 176, 180, 181, 1))}.vega-tab.disabled{pointer-events:none;background-color:rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1))}.vega-tab.disabled .label,.vega-tab.disabled vega-icon{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}:host{display:block;width:100%;text-align:left;line-height:normal;min-width:270px}.horizontal-divider{height:1px;background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1));width:100%;display:none;margin-top:-1px}.tab-content-container{display:flex;gap:8px;justify-content:space-between}.tab-content-container.more-tab .tab-list{width:100%}div.tab-left-button,div.tab-right-button{display:inline-block;cursor:pointer;border-top-left-radius:8px;border-top-right-radius:8px;background-color:rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1));color:rgba(var(--v-text-primary, 32, 54, 69, 1))}div.tab-left-button.vega-hidden,div.tab-right-button.vega-hidden{display:none}div.tab-left-button vega-icon,div.tab-right-button vega-icon{box-sizing:content-box;padding:13px 13px 13px 12px}.vega-tab-group-content vega-tab-group-panel{display:none}.vega-tab-group-content vega-tab-group-panel.active{display:block}.tab-style-secondary .vega-tab>div.vega-tab-container{align-items:baseline}.tab-style-secondary+.horizontal-divider{display:block}.tab-style-secondary .vega-tab{background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0))}.tab-style-secondary .vega-tab>div>.label{padding-left:16px;padding-right:16px;padding-top:0px;padding-bottom:12px}.tab-style-secondary .vega-tab.selected>div>.label,.tab-style-secondary .vega-tab.selected>div>.label vega-icon,.tab-style-secondary .vega-tab:hover>div>.label,.tab-style-secondary .vega-tab:hover>div>.label vega-icon{color:rgba(var(--v-text-link, 19, 98, 226, 1))}.tab-style-secondary .vega-tab{border-top-width:0px;border-left-width:0px;border-right-width:0px;border-bottom-width:2px;border-style:solid;border-color:transparent}.tab-style-secondary .vega-tab.selected{border-color:rgba(var(--v-border-color-action, 19, 98, 226, 1))}.tab-style-secondary div.tab-left-button,.tab-style-secondary div.tab-right-button{background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0))}.tab-style-secondary div.tab-left-button vega-icon,.tab-style-secondary div.tab-right-button vega-icon{padding:6px 13px 13px 6px}.tab-style-secondary div.tab-left-button:hover vega-icon,.tab-style-secondary div.tab-right-button:hover vega-icon{color:rgba(var(--v-text-link, 19, 98, 226, 1))}";
-
-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 VegaTabGroup = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.vegaClick = createEvent(this, "vegaClick", 7);
-    this.click = createEvent(this, "click", 7);
-    this.globalSlimmers = {};
-    this.vegaTabGroupRenderer = new VegaTabGroupRenderer();
-    this.vegaTabGroupDirectionButtonRenderer = new VegaTabGroupSwitchPageButtonRenderer();
-    this.vegaTabGroupTabListRenderer = new VegaTabGroupTabListRenderer();
-    this.vegaTabGroupCloseButtonRenderer = new VegaTabGroupCloseButtonRenderer();
-    this.vegaTabGroupPagesController = new VegaTabGroupPagesController();
-    this.vegaTabGroupSelectedTargetController = new VegaTabGroupSelectedTargetController();
-    this.vegaTabGroupPageIndexController = new VegaTabGroupPageIndexController();
-    this.vegaTabGroupPanelController = new VegaTabGroupPanelController();
-    this.vegaTabGroupContentRenderer = new VegaTabGroupContentRenderer();
-    this.vegaTabGroupSliderStateController = new VegaTabGroupSliderStateController();
-    this.clickEventEmitter = createEventEmitSlimmer(VegaTabGroup, VegaClick);
-    this.dropdownEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.vegaTabGroupRenderer.getTabMenuContainer());
-    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaTabGroupRuntimeMetricsPayloadDefinition);
-    this.tabPages = [];
-    /* Record the initial value of the tab width */
-    this.tabWidthArray = [];
-    this.currentPageIndex = 0;
-    /**
-     * Defines the data target for the selected tab
-     *    within the tab group.
-     *
-     * @vegaVersion 1.3.0
-     */
-    /* eslint-disable-next-line @stencil/strict-mutable */
-    this.selectedTabDataTarget = '';
-    /**
-     * Defines the spacing between the tabs in
-     *    the tab group.
-     *
-     * @vegaVersion 1.3.0
-     */
-    this.gap = 'size-8';
-    /**
-     * Specifies whether the tabs in the tab group include
-     *    a close button for closing the tab.
-     *
-     * @vegaVersion 1.3.0
-     */
-    this.showCloseButton = false;
-    /**
-     * Defines the tab items that appear within the tab group.
-     *
-     * The `tabItems` property can only be set once during
-     *    initialization and cannot be overridden or
-     *    modified dynamically.
-     *
-     * @vegaVersion 1.3.0
-     */
-    /* eslint-disable-next-line @stencil/strict-mutable */
-    this.tabItems = [];
-    /**
-     * Specifies the visual style and prominence of the tab group.
-     *
-     * @vegaVersion 1.39.0
-     */
-    this.variant = 'primary';
-    /**
-     * Specifies the overflow navigation for many tab items within the tab group.
-     *
-     * @vegaVersion 2.49.0
-     */
-    this.overflow = 'menu';
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-tab-group-with-tabPages-change}
-   */
-  /* istanbul ignore next */
-  watchTabPagesChange() {
-    methodPlaceholder();
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-tab-group-with-right-button}
-   * @see{module:vega-tab-group-close-tab-with-more-tab}
-   */
-  /* istanbul ignore next */
-  watchTabWidthArrayChange() {
-    methodPlaceholder();
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-tab-group-with-right-button}
-   */
-  /* istanbul ignore next */
-  async watchCurrentPageIndexChange(newIndex) {
-    methodPlaceholder(newIndex);
-  }
-  watchSelectedTabDataTargetChange() {
-    methodPlaceholder();
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-tab-group-with-gap-change}
-   */
-  /* istanbul ignore next */
-  watchGapChange() {
-    methodPlaceholder();
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-tab-group-watch-tab-items-on-change}
-   */
-  /* istanbul ignore next */
-  watchTabItemsChange() {
-    methodPlaceholder();
-  }
-  /**
-   * Call the pager to return a two-dimensional array of page numbers.
-   */
-  componentDidLoad() {
-    methodPlaceholder();
-  }
-  componentDidRender() {
-    methodPlaceholder();
-  }
-  render() {
-    slotPlaceholder(h("slot", null));
-    return sanitizeVegaComponent(h(Host, null, this.vegaTabGroupRenderer.render()), this.host);
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "tabPages": ["watchTabPagesChange"],
-    "tabWidthArray": ["watchTabWidthArrayChange"],
-    "currentPageIndex": ["watchCurrentPageIndexChange"],
-    "selectedTabDataTarget": ["watchSelectedTabDataTargetChange"],
-    "gap": ["watchGapChange"],
-    "tabItems": ["watchTabItemsChange"]
-  }; }
-};
-__decorate([
-  InjectVegaGlobalSlimmer()
-], VegaTabGroup.prototype, "globalSlimmers", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaTabGroup.prototype, "vegaTabGroupRenderer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaTabGroup.prototype, "vegaTabGroupDirectionButtonRenderer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaTabGroup.prototype, "vegaTabGroupTabListRenderer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaTabGroup.prototype, "vegaTabGroupCloseButtonRenderer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaTabGroup.prototype, "vegaTabGroupPagesController", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaTabGroup.prototype, "vegaTabGroupSelectedTargetController", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaTabGroup.prototype, "vegaTabGroupPageIndexController", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaTabGroup.prototype, "vegaTabGroupPanelController", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaTabGroup.prototype, "vegaTabGroupContentRenderer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaTabGroup.prototype, "vegaTabGroupSliderStateController", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaTabGroup.prototype, "clickEventEmitter", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaTabGroup.prototype, "dropdownEventPrevent", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaTabGroup.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-VegaTabGroup.style = vegaTabGroupCss;
-
-export { VegaTabGroup as vega_tab_group };