'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-58ea899e.js');
const component = require('./component-334e6818.js');
const log = require('./global-slimmer-registry-7bbdb1f2.js');
const injectVegaSlimmer = require('./inject-vega-slimmer-26fffae4.js');
const placeholder = require('./placeholder-cb6d37ad.js');
const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-b717b38b.js');
const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-f08660b9.js');
const timer = require('./timer-5f33058b.js');
const accessibility = require('./accessibility-bfa227f6.js');
const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-26bc0450.js');
const vegaEventId = require('./vega-event-id-c08ce3d3.js');
const changeManager = require('./change-manager-72f643de.js');
const observer = require('./observer-f49483e8.js');
const staticSubjectTitle = require('./static-subject-title-5829a298.js');
const ui = require('./ui-fe7a2158.js');
const synchronizeTaskQueue = require('./synchronize-task-queue-1ee80e94.js');
const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-09ceefa4.js');
const eventEmitSlimmer = require('./event-emit-slimmer-8422724f.js');
require('./breakpoints-1cc2c4c6.js');
require('./ui-32120990.js');
require('./breakpoints-ebde4837.js');
require('./try-get-document-c0ebd39a.js');
require('./dom-node-subject-factory-36b5fdbc.js');
require('./internal-vega-event-manager-f8bdaa58.js');
require('./vega-env-manager-23b8b23c.js');
require('./feature-flag-controller-09933b7a.js');
require('./index-f054eb5d.js');
require('./dynamic-slimmer-0050c489.js');

var __decorate$b = (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 log.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 (index.h(index.Fragment, null,
      index.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')),
      index.h("div", { class: "horizontal-divider" }),
      this.contentRenderer.render()));
  }
}
__decorate$b([
  log.MapToComponentField()
], VegaTabGroupRenderer.prototype, "tabPages", void 0);
__decorate$b([
  log.MapToComponentField()
], VegaTabGroupRenderer.prototype, "variant", void 0);
__decorate$b([
  log.MapToComponentField()
], VegaTabGroupRenderer.prototype, "overflow", void 0);
__decorate$b([
  log.MapToComponentField({ componentFieldName: 'vegaTabGroupTabListRenderer' })
], VegaTabGroupRenderer.prototype, "tabListRenderer", void 0);
__decorate$b([
  log.MapToComponentField({ componentFieldName: 'vegaTabGroupDirectionButtonRenderer' })
], VegaTabGroupRenderer.prototype, "directionButtonRenderer", void 0);
__decorate$b([
  log.MapToComponentField({ componentFieldName: 'vegaTabGroupContentRenderer' })
], VegaTabGroupRenderer.prototype, "contentRenderer", void 0);

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;
};
/** The VegaTabGroupSelectedTargetController class is responsible for handling the selected data target in a VegaTabGroup component and emitting a click event. */
class VegaTabGroupSelectedTargetController extends log.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$a([
  log.MapToComponentField()
], VegaTabGroupSelectedTargetController.prototype, "clickEventEmitter", void 0);
__decorate$a([
  log.MapToComponentField({ writable: true })
], VegaTabGroupSelectedTargetController.prototype, "selectedTabDataTarget", void 0);
__decorate$a([
  log.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$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 `VegaTabGroupPagesController` class is responsible for managing the tab pages and their widths in a tab group component. */
class VegaTabGroupPagesController extends pageResizeObserverSlimmer.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 = timer.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$9([
  log.MapToComponentField()
], VegaTabGroupPagesController.prototype, "host", void 0);
__decorate$9([
  log.MapToComponentField()
], VegaTabGroupPagesController.prototype, "gap", void 0);
__decorate$9([
  log.MapToComponentField({ writable: true })
], VegaTabGroupPagesController.prototype, "tabPages", void 0);
__decorate$9([
  log.MapToComponentField({ writable: true })
], VegaTabGroupPagesController.prototype, "tabWidthArray", void 0);
__decorate$9([
  log.MapToComponentField({ writable: true })
], VegaTabGroupPagesController.prototype, "tabItems", void 0);
__decorate$9([
  log.MapToComponentField()
], VegaTabGroupPagesController.prototype, "variant", void 0);
__decorate$9([
  log.MapToComponentField()
], VegaTabGroupPagesController.prototype, "overflow", void 0);
__decorate$9([
  log.MapToComponentField({ componentFieldName: 'vegaTabGroupSliderStateController' })
], VegaTabGroupPagesController.prototype, "sliderStateController", void 0);
__decorate$9([
  log.MapToComponentMethod('componentDidLoad')
], VegaTabGroupPagesController.prototype, "componentDidLoad", null);
__decorate$9([
  log.MapToComponentMethod('componentDidRender')
], VegaTabGroupPagesController.prototype, "componentDidRender", null);
__decorate$9([
  log.MapToComponentMethod('watchGapChange')
], VegaTabGroupPagesController.prototype, "handleGapChange", null);
__decorate$9([
  log.MapToComponentMethod('watchTabWidthArrayChange')
], VegaTabGroupPagesController.prototype, "handleTabWidthArrayChange", null);
__decorate$9([
  log.MapToComponentMethod('watchTabItemsChange')
], VegaTabGroupPagesController.prototype, "handleTabItemsChange", null);

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 `VegaTabGroupPageIndexController` class is a TypeScript class that manages the current page index of a tab group component. */
class VegaTabGroupPageIndexController extends log.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$8([
  log.MapToComponentField()
], VegaTabGroupPageIndexController.prototype, "tabPages", void 0);
__decorate$8([
  log.MapToComponentField({ writable: true })
], VegaTabGroupPageIndexController.prototype, "currentPageIndex", void 0);
__decorate$8([
  log.MapToComponentField()
], VegaTabGroupPageIndexController.prototype, "selectedTabDataTarget", void 0);
__decorate$8([
  log.MapToComponentMethod('watchTabPagesChange')
], VegaTabGroupPageIndexController.prototype, "handleTabPagesChange", null);
__decorate$8([
  log.MapToComponentMethod('watchSelectedTabDataTargetChange')
], VegaTabGroupPageIndexController.prototype, "handleSelectedDataTargetChange", 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;
};
class VegaTabGroupCloseButtonRenderer extends log.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 && (index.h("div", { class: vegaCloseIconCss, onClick: this.onCloseTab, role: 'button', tabIndex: item.disabled ? -1 : 0, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick(), "aria-label": 'Close Button' },
      index.h("vega-icon", { icon: "close", size: "size-12" }))));
  }
}
__decorate$7([
  log.MapToComponentField()
], VegaTabGroupCloseButtonRenderer.prototype, "tabWidthArray", void 0);
__decorate$7([
  log.MapToComponentField()
], VegaTabGroupCloseButtonRenderer.prototype, "showCloseButton", void 0);
__decorate$7([
  log.MapToComponentField()
], VegaTabGroupCloseButtonRenderer.prototype, "tabItems", void 0);
__decorate$7([
  log.MapToComponentField({ componentFieldName: 'vegaTabGroupSelectedTargetController' })
], VegaTabGroupCloseButtonRenderer.prototype, "selectedTargetController", void 0);
__decorate$7([
  log.MapToComponentField({ componentFieldName: 'vegaTabGroupPagesController' })
], VegaTabGroupCloseButtonRenderer.prototype, "tabPagesController", void 0);

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 VegaTabGroupSwitchPageButtonRenderer extends log.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 (index.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: accessibility.createEnterKeyHandlerToTriggerClick() },
      index.h("vega-dropdown", { source: source, translocation: translocation, selectType: "single", selectedSourceKey: selectedItemKey, "position-relative-to": this.positionRelativeTo, ref: (ref) => {
          this.dropdownRef = ref;
          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaDropdownClick, (payload) => {
            this.vegaTabGroupSelectedTargetController.handleTabItemClick(payload.detail);
          });
        } },
        index.h("vega-icon", { size: "size-12", icon: icon }))));
  }
}
__decorate$6([
  log.MapToComponentField()
], VegaTabGroupSwitchPageButtonRenderer.prototype, "tabPages", void 0);
__decorate$6([
  log.MapToComponentField()
], VegaTabGroupSwitchPageButtonRenderer.prototype, "currentPageIndex", void 0);
__decorate$6([
  log.MapToComponentField()
], VegaTabGroupSwitchPageButtonRenderer.prototype, "selectedTabDataTarget", void 0);
__decorate$6([
  log.MapToComponentField()
], VegaTabGroupSwitchPageButtonRenderer.prototype, "positionRelativeTo", void 0);
__decorate$6([
  log.MapToComponentField({ componentFieldName: 'vegaTabGroupPageIndexController' })
], VegaTabGroupSwitchPageButtonRenderer.prototype, "pageIndexController", void 0);
__decorate$6([
  log.MapToComponentField()
], VegaTabGroupSwitchPageButtonRenderer.prototype, "vegaTabGroupSelectedTargetController", 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;
};
/** 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 log.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.Observer(this.canAcceptPanelUpdate.bind(this), this.handlePanelUpdate);
    changeManager.ChangeManager.register(staticSubjectTitle.TAB_PANEL_ADD_OR_DEL_TO_GROUP, this.tabPanelUpdateObserver);
  }
  /**
   * un-register the observer when component remove, clear the tab panel map
   */
  disconnectedCallback() {
    changeManager.ChangeManager.unregister(staticSubjectTitle.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 ui.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$5([
  log.MapToComponentField()
], VegaTabGroupPanelController.prototype, "host", void 0);
__decorate$5([
  log.MapToComponentField()
], VegaTabGroupPanelController.prototype, "selectedTabDataTarget", void 0);
__decorate$5([
  log.MapToComponentField()
], VegaTabGroupPanelController.prototype, "tabItems", void 0);
__decorate$5([
  log.MapToComponentField({ componentFieldName: 'vegaTabGroupSelectedTargetController' })
], VegaTabGroupPanelController.prototype, "selectTargetController", void 0);
__decorate$5([
  log.MapToComponentMethod('connectedCallback')
], VegaTabGroupPanelController.prototype, "connectedCallback", null);
__decorate$5([
  log.MapToComponentMethod('disconnectedCallback')
], VegaTabGroupPanelController.prototype, "disconnectedCallback", null);
__decorate$5([
  log.MapToComponentMethod('componentDidLoad')
], VegaTabGroupPanelController.prototype, "componentDidLoad", null);
__decorate$5([
  log.MapToComponentMethod('watchSelectedTabDataTargetChange')
], VegaTabGroupPanelController.prototype, "watchSelectedTabDataTargetChange", null);

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;
};
class VegaTabGroupTabListRenderer extends log.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 (index.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 (index.h("vega-carousel", { showSlider: false, ref: (el) => (this.carouselDom = el) }, this.tabPages.length > 0 ? (this.tabPages.map((tabPage, index$1) => {
      return index.h("div", { key: index$1 }, this.renderTabList(tabPage));
    })) : (index.h("div", null, this.renderTabList(this.tabItems)))));
  }
  renderTabListInScrollOverflow() {
    return (index.h("div", { class: "overflow-scroll" }, this.tabPages.map((tabPage, index$1) => {
      return index.h("div", { key: index$1 }, this.renderTabList(tabPage));
    })));
  }
  renderTabList(showTabItems) {
    return (index.h("vega-flex", { gap: this.gap }, showTabItems.map((item) => {
      return (index.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 },
        index.h("div", { class: "vega-tab-container" },
          index.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: accessibility.createEnterKeyHandlerToTriggerClick() },
            this.renderPrefixIconDom(item),
            this.renderTabLabelDom(item),
            this.renderCounterBadgeDom(item)),
          this.closeButtonRenderer.render(item))));
    })));
  }
  renderPrefixIconDom(item) {
    const prefixIcon = item.prefixIcon;
    return prefixIcon && index.h("vega-icon", { icon: prefixIcon });
  }
  renderTabLabelDom(item) {
    const labelLength = item.label.length;
    return labelLength > this.TAB_LABEL_MAX_SIZE ? (index.h("vega-tooltip", { text: item.label, placement: "bottom", "position-relative-to": this.positionRelativeTo },
      index.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 && (index.h("div", { class: `vega-counter-badge ${counterBadgeClass}` },
      index.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$4([
  log.MapToComponentField()
], VegaTabGroupTabListRenderer.prototype, "tabPages", void 0);
__decorate$4([
  log.MapToComponentField()
], VegaTabGroupTabListRenderer.prototype, "currentPageIndex", void 0);
__decorate$4([
  log.MapToComponentField()
], VegaTabGroupTabListRenderer.prototype, "selectedTabDataTarget", void 0);
__decorate$4([
  log.MapToComponentField()
], VegaTabGroupTabListRenderer.prototype, "gap", void 0);
__decorate$4([
  log.MapToComponentField()
], VegaTabGroupTabListRenderer.prototype, "showCloseButton", void 0);
__decorate$4([
  log.MapToComponentField()
], VegaTabGroupTabListRenderer.prototype, "tabItems", void 0);
__decorate$4([
  log.MapToComponentField()
], VegaTabGroupTabListRenderer.prototype, "overflow", void 0);
__decorate$4([
  log.MapToComponentField()
], VegaTabGroupTabListRenderer.prototype, "positionRelativeTo", void 0);
__decorate$4([
  log.MapToComponentField({ componentFieldName: 'vegaTabGroupCloseButtonRenderer' })
], VegaTabGroupTabListRenderer.prototype, "closeButtonRenderer", void 0);
__decorate$4([
  log.MapToComponentField({ componentFieldName: 'vegaTabGroupSelectedTargetController' })
], VegaTabGroupTabListRenderer.prototype, "selectedTargetController", void 0);

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 VegaTabGroupContentRenderer extends log.VegaSlimmer {
  render() {
    if (this.variant === 'secondary') {
      return (index.h("div", { class: "vega-tab-group-content" },
        index.h("slot", null)));
    }
    else {
      return (index.h("vega-card", { margin: "0", padding: { default: 'size-24', S: 'size-12' }, variant: "shadow", backgroundColor: "bg-primary" },
        index.h("div", { class: "vega-tab-group-content" },
          index.h("slot", null))));
    }
  }
}
__decorate$3([
  log.MapToComponentField()
], VegaTabGroupContentRenderer.prototype, "variant", 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;
};
/** The `VegaTabGroupSliderStateController` class manages the animation state of a tab group slider component. */
class VegaTabGroupSliderStateController extends log.VegaSlimmer {
  constructor() {
    super(...arguments);
    /* about 2 frames in the browser */
    this.UPDATE_ANIMATION_FLAG_DELAY = 32;
    this.goToPageTaskQueue = new synchronizeTaskQueue.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$2([
  log.MapToComponentField({ componentFieldName: 'vegaTabGroupTabListRenderer' })
], VegaTabGroupSliderStateController.prototype, "tabListRenderer", void 0);
__decorate$2([
  log.MapToComponentField()
], VegaTabGroupSliderStateController.prototype, "currentPageIndex", void 0);
__decorate$2([
  log.MapToComponentMethod('componentDidRender')
], VegaTabGroupSliderStateController.prototype, "componentDidRender", null);
__decorate$2([
  log.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$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;
};
const VegaTabGroup = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.vegaClick = index.createEvent(this, "vegaClick", 7);
    this.click = index.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 = eventEmitSlimmer.createEventEmitSlimmer(VegaTabGroup, vegaEventId.VegaClick);
    this.dropdownEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaClick], () => this.vegaTabGroupRenderer.getTabMenuContainer());
    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.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() {
  }
  /**
   * 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() {
  }
  /**
   * The below method is e2e-test covered in
   * @see{module:vega-tab-group-with-right-button}
   */
  /* istanbul ignore next */
  async watchCurrentPageIndexChange(newIndex) {
  }
  watchSelectedTabDataTargetChange() {
  }
  /**
   * The below method is e2e-test covered in
   * @see{module:vega-tab-group-with-gap-change}
   */
  /* istanbul ignore next */
  watchGapChange() {
  }
  /**
   * The below method is e2e-test covered in
   * @see{module:vega-tab-group-watch-tab-items-on-change}
   */
  /* istanbul ignore next */
  watchTabItemsChange() {
  }
  /**
   * Call the pager to return a two-dimensional array of page numbers.
   */
  componentDidLoad() {
  }
  componentDidRender() {
  }
  render() {
    placeholder.slotPlaceholder(index.h("slot", null));
    return component.sanitizeVegaComponent(index.h(index.Host, null, this.vegaTabGroupRenderer.render()), this.host);
  }
  get host() { return index.getElement(this); }
  static get watchers() { return {
    "tabPages": ["watchTabPagesChange"],
    "tabWidthArray": ["watchTabWidthArrayChange"],
    "currentPageIndex": ["watchCurrentPageIndexChange"],
    "selectedTabDataTarget": ["watchSelectedTabDataTargetChange"],
    "gap": ["watchGapChange"],
    "tabItems": ["watchTabItemsChange"]
  }; }
};
__decorate$1([
  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
], VegaTabGroup.prototype, "globalSlimmers", void 0);
__decorate$1([
  injectVegaSlimmer.InjectVegaSlimmer()
], VegaTabGroup.prototype, "vegaTabGroupRenderer", void 0);
__decorate$1([
  injectVegaSlimmer.InjectVegaSlimmer()
], VegaTabGroup.prototype, "vegaTabGroupDirectionButtonRenderer", void 0);
__decorate$1([
  injectVegaSlimmer.InjectVegaSlimmer()
], VegaTabGroup.prototype, "vegaTabGroupTabListRenderer", void 0);
__decorate$1([
  injectVegaSlimmer.InjectVegaSlimmer()
], VegaTabGroup.prototype, "vegaTabGroupCloseButtonRenderer", void 0);
__decorate$1([
  injectVegaSlimmer.InjectVegaSlimmer()
], VegaTabGroup.prototype, "vegaTabGroupPagesController", void 0);
__decorate$1([
  injectVegaSlimmer.InjectVegaSlimmer()
], VegaTabGroup.prototype, "vegaTabGroupSelectedTargetController", void 0);
__decorate$1([
  injectVegaSlimmer.InjectVegaSlimmer()
], VegaTabGroup.prototype, "vegaTabGroupPageIndexController", void 0);
__decorate$1([
  injectVegaSlimmer.InjectVegaSlimmer()
], VegaTabGroup.prototype, "vegaTabGroupPanelController", void 0);
__decorate$1([
  injectVegaSlimmer.InjectVegaSlimmer()
], VegaTabGroup.prototype, "vegaTabGroupContentRenderer", void 0);
__decorate$1([
  injectVegaSlimmer.InjectVegaSlimmer()
], VegaTabGroup.prototype, "vegaTabGroupSliderStateController", void 0);
__decorate$1([
  injectVegaSlimmer.InjectVegaSlimmer()
], VegaTabGroup.prototype, "clickEventEmitter", void 0);
__decorate$1([
  injectVegaSlimmer.InjectVegaSlimmer()
], VegaTabGroup.prototype, "dropdownEventPrevent", void 0);
__decorate$1([
  injectVegaSlimmer.InjectVegaSlimmer()
], VegaTabGroup.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
VegaTabGroup.style = vegaTabGroupCss;

const vegaTabGroupPanelCss = ":host{display:none}:host(.active){display:block}";

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 VegaTabGroupPanel = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.globalSlimmers = {};
    this.clickEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaClick], () => this.host, undefined, true);
    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
    /**
     * Controls the visibility of the tab panel within the tab group.
     *
     * @vegaVersion 1.26.0
     */
    this.isActive = false;
  }
  /**
   * add the panel to group when dom re-append to the group
   */
  connectedCallback() {
    this.notifyGroupAddOrDelPanel('ADD');
  }
  disconnectedCallback() {
    this.notifyGroupAddOrDelPanel('DEL');
  }
  /**
   * add the panel to group when first render
   */
  componentWillLoad() {
    this.notifyGroupAddOrDelPanel('ADD');
  }
  render() {
    return component.sanitizeVegaComponent(index.h(index.Host, { class: this.isActive ? 'active' : '' }, index.h("slot", null)), this.host);
  }
  /**
   * The function notifies the change manager about adding or deleting a panel to a group.
   *
   * @param {PanelUpdatePayload['type']} type - The type of panel update, such as adding or deleting a panel.
   */
  notifyGroupAddOrDelPanel(type) {
    changeManager.ChangeManager.notify(staticSubjectTitle.TAB_PANEL_ADD_OR_DEL_TO_GROUP, { host: this.host, type });
  }
  get host() { return index.getElement(this); }
};
__decorate([
  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
], VegaTabGroupPanel.prototype, "globalSlimmers", void 0);
__decorate([
  injectVegaSlimmer.InjectVegaSlimmer()
], VegaTabGroupPanel.prototype, "clickEventPrevent", void 0);
__decorate([
  injectVegaSlimmer.InjectVegaSlimmer()
], VegaTabGroupPanel.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
VegaTabGroupPanel.style = vegaTabGroupPanelCss;

exports.vega_tab_group = VegaTabGroup;
exports.vega_tab_group_panel = VegaTabGroupPanel;
