@globalpayments/vega 2.25.0 → 2.27.0

package/dist/esm/vega-tab-group_2.entry.js

@@ -3,21 +3,23 @@ import { s as sanitizeVegaComponent } from './component-cae24190.js';
 import { c as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { s as slotPlaceholder } from './placeholder-bf562081.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-b3f6ac79.js';
-import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-8caeb03b.js';
+import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-994c1e1b.js';
 import { d as debounce } from './timer-9321173b.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
-import { D as DomNodeSubjectObserverFactory, O as Observer } from './dom-node-subject-observer-factory-926991a9.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-9461cd67.js';
 import { b as VegaDropdownClick, a as VegaClick } from './vega-event-id-7465a011.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { T as TAB_PANEL_ADD_OR_DEL_TO_GROUP } from './static-subject-title-2e153754.js';
-import { f as findParent } from './ui-153f4ae7.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-501cdd87.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-570444e7.js';
-import './breakpoints-e59edf8d.js';
-import './ui-df46cc20.js';
+import { O as Observer } from './observer-3959f9dd.js';
+import { T as TAB_PANEL_ADD_OR_DEL_TO_GROUP } from './static-subject-title-6987a80b.js';
+import { f as findParent } from './ui-0132dbb5.js';
+import { S as SynchronizeTaskQueue } from './synchronize-task-queue-8f5fbbd9.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-345c46c5.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-eee9fd41.js';
+import './breakpoints-36a3ed69.js';
+import './ui-8424715a.js';
 import './internal-vega-event-manager-722461c1.js';
 import './vega-env-manager-8f8dc473.js';
-import './feature-flag-controller-9be58397.js';
+import './feature-flag-controller-10780eeb.js';
 import './index-0863eec6.js';
 import './dynamic-slimmer-90b8af32.js';
 
@@ -406,7 +408,12 @@ class VegaTabGroupPageIndexController extends VegaSlimmer {
    * update the page index when component call watchTabPagesChange method
    */
   handleTabPagesChange() {
-    this.setCurrentPageIndexWhenTabPagesChange();
+    if (this.selectedTabDataTarget) {
+      this.setCurrentPageIndexBySelectedTab(this.selectedTabDataTarget);
+    }
+    else {
+      this.setCurrentPageIndexWhenTabPagesChange();
+    }
   }
   /**
    * update the page index when component call watchSelectedTabDataTargetChange method
@@ -805,7 +812,8 @@ class VegaTabGroupTabListRenderer extends VegaSlimmer {
             /* eslint-disable-next-line react/jsx-no-bind */
             onClick: () => this.handleTabItemClick(item.dataTarget), "aria-label": item.dataTarget, role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() },
             this.renderPrefixIconDom(item),
-            this.renderTabLabelDom(item)),
+            this.renderTabLabelDom(item),
+            this.renderCounterBadgeDom(item)),
           this.closeButtonRenderer.render())));
     })));
   }
@@ -820,6 +828,30 @@ class VegaTabGroupTabListRenderer extends VegaSlimmer {
         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);
   }
@@ -887,6 +919,7 @@ class VegaTabGroupSliderStateController extends VegaSlimmer {
     super(...arguments);
     /* about 2 frames in the browser */
     this.UPDATE_ANIMATION_FLAG_DELAY = 32;
+    this.goToPageTaskQueue = new SynchronizeTaskQueue();
     /**
      * The normal flow:
      * page index change
@@ -913,24 +946,32 @@ class VegaTabGroupSliderStateController extends VegaSlimmer {
      */
     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}
-   *
-   * @param {number} newIndex the page index
    */
-  async handlePageIndexChange(newIndex) {
+  async handlePageIndexChange() {
     const carouselDom = this.tabListRenderer.getCarouselDomRef();
     if (carouselDom) {
       this.pendingCarouselActionCount += 1;
-      await carouselDom.goToPage(newIndex + 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);
     }
   }
   /*
@@ -950,6 +991,12 @@ class VegaTabGroupSliderStateController extends VegaSlimmer {
 __decorate$2([
   MapToComponentField({ componentFieldName: 'vegaTabGroupTabListRenderer' })
 ], VegaTabGroupSliderStateController.prototype, "tabListRenderer", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaTabGroupSliderStateController.prototype, "currentPageIndex", void 0);
+__decorate$2([
+  MapToComponentMethod('componentDidRender')
+], VegaTabGroupSliderStateController.prototype, "componentDidRender", null);
 __decorate$2([
   MapToComponentMethod('watchCurrentPageIndexChange')
 ], VegaTabGroupSliderStateController.prototype, "handlePageIndexChange", null);
@@ -981,7 +1028,7 @@ const VegaTabGroupRuntimeMetricsPayloadDefinition = [
   },
 ];
 
-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.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-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-inverted-secondary, 188, 186, 213, 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))}";
+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.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-inverted-secondary, 188, 186, 213, 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;
@@ -1020,7 +1067,7 @@ const VegaTabGroup = class {
      * Defines the data target for the selected tab
      *    within the tab group.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.selectedTabDataTarget = '';
@@ -1028,14 +1075,14 @@ const VegaTabGroup = class {
      * Defines the spacing between the tabs in
      *    the tab group.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     this.gap = 'size-8';
     /**
      * Specifies whether the tabs in the tab group include
      *    a close button for closing the tab.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     this.showCloseButton = false;
     /**
@@ -1045,14 +1092,14 @@ const VegaTabGroup = class {
      *    initialization and cannot be overridden or
      *    modified dynamically.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.tabItems = [];
     /**
      * Specifies the visual style and prominence of the tab group.
      *
-     * @version 1.39.0
+     * @vegaVersion 1.39.0
      */
     this.variant = 'primary';
   }
@@ -1172,7 +1219,7 @@ const VegaTabGroupPanel = class {
     /**
      * Controls the visibility of the tab panel within the tab group.
      *
-     * @version 1.26.0
+     * @vegaVersion 1.26.0
      */
     this.isActive = false;
   }