@globalpayments/vega 2.70.0 → 2.72.0

package/dist/esm/vega-progress-tracker.entry.js

@@ -1,19 +1,45 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-090d31ca.js';
-import { T as VegaCurrentStepUpdate, D as DomNodeSubjectObserverFactory, k as VegaPageUpdate } from './dom-node-subject-observer-factory-dca87b70.js';
-import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
+import { h, F as Fragment, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-090d31ca.js';
+import { d as domNodeSubjectFactory, D as DomNodeSubjectObserverFactory, k as VegaPageUpdate, W as VegaCurrentStepUpdate } from './dom-node-subject-observer-factory-479cc5ef.js';
 import { s as sanitizeVegaComponent } from './component-7d906393.js';
-import { n as normalizeNumberByRanger } from './number-4398f2e1.js';
-import { I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import { c as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-a84cc93e.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-4e28e9f8.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-76fbfe1f.js';
 import { c as createDeprecatedPropertySlimmer } from './deprecated-property-slimmer-2c14df89.js';
-import './change-manager-6a7eb88c.js';
-import './observer-3959f9dd.js';
+import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { p as VegaInternalProgressTrackerStepClick } from './vega-internal-event-id-71c67c39.js';
+import { n as normalizeNumberByRanger } from './number-4398f2e1.js';
+import { O as Observer } from './observer-3959f9dd.js';
+import { S as SynchronizeTaskQueue } from './synchronize-task-queue-ac8acc3b.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-6df7d17a.js';
+import { P as PageResizeObserverSlimmer, g as getCurrentBreakpoint } from './page-resize-observer-slimmer-8744cb44.js';
+import { x as isResponsiveType } from './type-guard-b48aec98.js';
 import './ui-bb99c0c2.js';
 import './dynamic-slimmer-90b8af32.js';
-import './internal-vega-event-manager-516aa721.js';
+import './internal-vega-event-manager-e44672ed.js';
 import './try-get-document-bef0f526.js';
 import './object-66c37948.js';
+import './ui-28fd4193.js';
+import './pixel-f32c07ce.js';
+import './breakpoints-d9faf11c.js';
+import './array-7888f339.js';
+import './vega-env-manager-8f8dc473.js';
+import './function-extension-3f886d01.js';
+import './create-public-api-runtime-metrics-slimmer-bedf3a1e.js';
+import './dark-mode-style-controller-de88a117.js';
+import './static-subject-title-52f93124.js';
+import './_commonjsHelpers-9943807e.js';
+import './vega-nonce-manager-497e5eb5.js';
+import './dto-renderer-manager-d185c7ba.js';
+import './code-block-8fb548ff.js';
+import './string-a953eafc.js';
+import './translation-96e5debd.js';
+import './internal-icon-manager-f0486245.js';
+import './base-renderer-101f6d04.js';
+import './feature-flag-controller-51659753.js';
+import './index-e9da316f.js';
+import './wait-for-vega-handler-c2c07ac3.js';
+import './typography-396de03f.js';
 
 const VegaProgressTrackerRuntimeMetricsPayloadDefinition = [
   {
@@ -42,7 +68,249 @@ const VegaProgressTrackerRuntimeMetricsPayloadDefinition = [
   },
 ];
 
-const vegaProgressTrackerCss = ":host .vega-progress-tracker__container{display:flex;align-items:center;padding-top:0px;padding-bottom:0px}:host .vega-progress-tracker__slot{width:100%;display:block}:host .vega-progress-step{display:flex;gap:16px}:host(:not(.click-step-disabled)) .vega-progress-step{cursor:pointer}:host(:not(.click-step-disabled)) .vega-progress-step.default:hover .vega-progress-step__icon{background-color:rgba(var(--v-bg-action-quaternary-hover, 239, 239, 239, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.default .vega-progress-step__icon:hover{background-color:rgba(var(--v-bg-action-quaternary-hover, 239, 239, 239, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.default:active .vega-progress-step__icon{background-color:rgba(var(--v-bg-action-quaternary-active, 205, 209, 211, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.inProgress .vega-progress-step__icon:hover,:host(:not(.click-step-disabled)) .vega-progress-step.current .vega-progress-step__icon:hover{background-color:rgba(var(--v-bg-action-hover, 4, 112, 236, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.inProgress:hover .vega-progress-step__icon,:host(:not(.click-step-disabled)) .vega-progress-step.current:hover .vega-progress-step__icon{background-color:rgba(var(--v-bg-action-hover, 4, 112, 236, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.inProgress:active .vega-progress-step__icon,:host(:not(.click-step-disabled)) .vega-progress-step.current:active .vega-progress-step__icon{background-color:rgba(var(--v-bg-action-active, 29, 65, 195, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.complete:hover .vega-progress-step__icon{border-color:rgba(var(--v-border-color-action-hover, 4, 112, 236, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.complete:hover .vega-progress-step__icon vega-icon{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.complete:active .vega-progress-step__icon{border-color:rgba(var(--v-border-color-action-active, 29, 65, 195, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.complete:active .vega-progress-step__icon vega-icon{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.complete.current:hover .vega-progress-step__icon vega-icon{color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1))}:host .vega-progress-step:focus-visible{outline-width:0px}:host .vega-progress-step:focus-visible .vega-progress-step-icon-container{border-radius:8px;outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px}:host .vega-progress-step .vega-progress-step-icon-divider{display:flex;flex-direction:column;align-items:center;gap:0px}:host .vega-progress-step .vega-progress-step-icon-container{padding:8px}:host .vega-progress-step .vega-progress-step__icon{display:block;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:9999px;box-sizing:content-box;height:32px;width:32px;min-width:32px;line-height:32px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-progress-step .vega-progress-step__icon{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){:host .vega-progress-step .vega-progress-step__icon{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){:host .vega-progress-step .vega-progress-step__icon{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}:host .vega-progress-step .vega-progress-step__icon span{display:block}:host .vega-progress-step .vega-progress-step__icon:not(.disable-responsive){line-height:32px}:host .vega-progress-step .vega-progress-step__divider{width:1px;flex-grow:1;height:100%;background-color:rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1));display:block}:host .vega-progress-step .vega-progress-step__divider.right.complete{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1))}:host .vega-progress-step .vega-progress-step__divider.left{display:none}:host .vega-progress-step:last-child .vega-progress-step__divider.right{display:none}:host .vega-progress-step .vega-progress-step__title{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;padding-top:12px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));display:block;padding-bottom:36px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-progress-step .vega-progress-step__title{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){:host .vega-progress-step .vega-progress-step__title{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){:host .vega-progress-step .vega-progress-step__title{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}:host .vega-progress-step.default .vega-progress-step__icon{color:rgba(var(--v-text-primary, 32, 54, 69, 1));background-color:rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1))}:host .vega-progress-step.complete .vega-progress-step__icon{display:flex;justify-content:center;align-items:center;background-color:rgba(var(--v-bg-action-tertiary, 0, 0, 0, 0));box-sizing:border-box;border-width:1px;border-style:solid;border-color:rgba(var(--v-border-color-action, 19, 98, 226, 1))}:host .vega-progress-step.complete .vega-progress-step__icon vega-icon{color:rgba(var(--v-text-link, 19, 98, 226, 1))}:host .vega-progress-step.complete .vega-progress-step__title{color:rgba(var(--v-text-primary, 32, 54, 69, 1))}:host .vega-progress-step.complete.current .vega-progress-step__icon vega-icon{color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1))}:host .vega-progress-step.inProgress .vega-progress-step__icon,:host .vega-progress-step.current .vega-progress-step__icon{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));box-shadow:0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25))}:host .vega-progress-step.inProgress .vega-progress-step__title,:host .vega-progress-step.current .vega-progress-step__title{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:22px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-progress-step.inProgress .vega-progress-step__title,:host .vega-progress-step.current .vega-progress-step__title{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-progress-step.inProgress .vega-progress-step__title,:host .vega-progress-step.current .vega-progress-step__title{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-progress-step.inProgress .vega-progress-step__title,:host .vega-progress-step.current .vega-progress-step__title{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 320px) and (max-width: 767px){:host{flex:1 1 100%}}@media screen and (min-width: 320px) and (max-width: 767px){:host .vega-progress-tracker__container{padding-top:16px;padding-bottom:16px}:host .vega-progress-tracker__slot{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:0px}:host .vega-progress-step{display:flex;flex-grow:1;flex-basis:0}:host .vega-progress-step .vega-progress-step-icon-divider{display:flex;flex-direction:row;gap:4px;width:100%}:host .vega-progress-step .vega-progress-step__icon{height:16px;width:16px;min-width:16px}:host .vega-progress-step .vega-progress-step__icon{line-height:16px}:host .vega-progress-step .vega-progress-step__icon vega-icon{height:8px;width:8px}:host .vega-progress-step .vega-progress-step__icon span{display:none}:host .vega-progress-step .vega-progress-step__divider{height:1px;flex-grow:1}:host .vega-progress-step .vega-progress-step__divider.left{display:block}:host .vega-progress-step .vega-progress-step__divider.left.background{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1))}:host .vega-progress-step .vega-progress-step__divider.right{display:block}:host .vega-progress-step .vega-progress-step__title{display:none}:host .vega-progress-step:first-child .vega-progress-step__divider.left{opacity:0}:host .vega-progress-step:last-child .vega-progress-step__divider.right{display:block;opacity:0}}:host(.horizontal){display:block;overflow-x:auto;padding-top:4px}:host(.horizontal) .vega-progress-tracker__slot{display:flex}:host(.horizontal) .vega-progress-step{flex-direction:column;align-items:center;gap:4px;flex-grow:1;flex-basis:0}:host(.horizontal) .vega-progress-step .vega-progress-step-icon-divider{flex-direction:row;align-items:center;gap:4px;width:100%}:host(.horizontal) .vega-progress-step .vega-progress-step__divider{height:1px;display:block}:host(.horizontal) .vega-progress-step .vega-progress-step__divider.left{display:block}:host(.horizontal) .vega-progress-step .vega-progress-step__divider.right.complete{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1))}:host(.horizontal) .vega-progress-step .vega-progress-step__divider.left.background{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1))}:host(.horizontal) .vega-progress-step .vega-progress-step__title{padding-top:0px;padding-bottom:0px;text-align:center;padding-left:4px;padding-right:4px}:host(.horizontal) .vega-progress-step:first-child .vega-progress-step__divider.left{opacity:0}:host(.horizontal) .vega-progress-step:last-child .vega-progress-step__divider.right{display:block;opacity:0}@media screen and (min-width: 320px) and (max-width: 767px){:host(.horizontal){padding-top:0px}}:host vega-carousel .subTitle{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host vega-carousel .subTitle{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host vega-carousel .subTitle{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host vega-carousel .subTitle{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}}:host .vega-progress-tracker__box{display:flex;align-items:center}@media (min-width: 768px){:host .vega-progress-tracker__box{display:none}}:host .vega-progress-tracker__box vega-carousel{width:100%;text-align:center}";
+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;
+};
+var ProgressStepStatus;
+(function (ProgressStepStatus) {
+  ProgressStepStatus["DEFAULT"] = "default";
+  ProgressStepStatus["IN_PROGRESS"] = "inProgress";
+  ProgressStepStatus["COMPLETE"] = "complete";
+})(ProgressStepStatus || (ProgressStepStatus = {}));
+/** Renders the progress tracker component. */
+class VegaProgressTrackerRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.renderStepIcon = (index, progressStepStatus) => {
+      return (h("div", { class: "vega-progress-step-icon-container" },
+        h("div", { class: "vega-progress-step__icon" }, progressStepStatus == ProgressStepStatus.COMPLETE ? (h("vega-icon", { icon: "checkmark-rounded", size: "size-16" })) : (h("span", null, index + 1)))));
+    };
+    this.renderSteps = (subTitle, index) => {
+      const progressStepStatus = this.getStepState(index);
+      const prevStepCompleteStatus = this.deprecatedPropertySlimmer
+        .getValue()
+        .includes(this.steps[index - 1]);
+      return (h("div", { role: !this.canClickStep ? null : 'button', class: `vega-progress-step ${progressStepStatus} ${index === this.current ? 'current' : ''}`, "data-index": index, tabIndex: !this.canClickStep ? null : 0, onClick: !this.canClickStep ? null : this.onStepIconClick, onKeyDown: !this.canClickStep ? null : createEnterKeyHandlerToTriggerClick(), "aria-label": subTitle },
+        h("div", { class: "vega-progress-step-icon-divider" },
+          h("div", { class: `vega-progress-step__divider left ${prevStepCompleteStatus ? 'background' : ''}` }),
+          this.renderStepIcon(index, progressStepStatus),
+          h("div", { class: `vega-progress-step__divider right ${this.deprecatedPropertySlimmer.getValue().includes(subTitle)
+              ? 'complete'
+              : 'default'}` })),
+        h("div", { class: "vega-progress-step__title" }, subTitle)));
+    };
+    this.getStepState = (index) => {
+      if (this.deprecatedPropertySlimmer.getValue().includes(this.steps[index])) {
+        return ProgressStepStatus.COMPLETE;
+      }
+      else if (index === this.current) {
+        return ProgressStepStatus.IN_PROGRESS;
+      }
+      else {
+        return ProgressStepStatus.DEFAULT;
+      }
+    };
+    this.onStepIconClick = (e) => {
+      const index = Number(e.currentTarget.getAttribute('data-index'));
+      ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalProgressTrackerStepClick), index);
+    };
+  }
+  async gotoCarouselPage() {
+    if (this.carouselContainerRef.getBoundingClientRect().width > 0) {
+      await this.carouselRef.goToPage(this.current + 1);
+    }
+  }
+  render() {
+    return (h(Fragment, null,
+      h("div", { class: "vega-progress-tracker__container" },
+        h("div", { class: "vega-progress-tracker__slot" }, this.steps.map((subTitle, index) => this.renderSteps(subTitle, index)))),
+      h("div", { class: "vega-progress-tracker__box", ref: (ref) => (this.carouselContainerRef = ref) },
+        h("vega-carousel", { showSlider: false, itemsPerPage: 1, canSwipe: this.canClickStep, ref: (el) => {
+            /**
+             * The below method is e2e-test covered in
+             * @see{module:vega-progress-tracker-with-touch-event-mobile}
+             */
+            /* istanbul ignore next */
+            DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaPageUpdate, async (input) => await this.host.setCurrent(input.detail - 1));
+            return (this.carouselRef = el);
+          } }, this.steps.map((subTitle, index) => (h("div", { class: {
+            subTitle: true,
+            completed: this.getStepState(index) === ProgressStepStatus.COMPLETE,
+            inProgress: this.current === index,
+          } }, subTitle)))))));
+  }
+}
+__decorate$2([
+  MapToComponentField()
+], VegaProgressTrackerRenderer.prototype, "host", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaProgressTrackerRenderer.prototype, "steps", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaProgressTrackerRenderer.prototype, "canClickStep", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaProgressTrackerRenderer.prototype, "current", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaProgressTrackerRenderer.prototype, "deprecatedPropertySlimmer", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaProgressTrackerRenderer.prototype, "currentStepController", 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;
+};
+/**
+ * Controls the current step of the progress tracker component.
+ */
+class VegaProgressTrackerCurrentStepController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.goToPageTaskQueue = new SynchronizeTaskQueue();
+    /**
+     * Update current step with range limit
+     *
+     * @param {number} current - current step index
+     * @param {number} [min] - min limit
+     * @param {number} [max] - max limit
+     */
+    this.updateCurrent = (current, min, max) => {
+      this.current = normalizeNumberByRanger(current, min, max);
+    };
+  }
+  /** connectedCallback */
+  connectedCallback() {
+    this.initStepClickObserver();
+  }
+  /** disconnectedCallback */
+  disconnectedCallback() {
+    this.removeStepClickObserver();
+  }
+  /** componentDidLoad */
+  componentDidLoad() {
+    this.updateCurrent(this.current, 0, this.steps.length - 1);
+  }
+  /** componentDidRender */
+  async componentDidRender() {
+    await this.goToPageTaskQueue.runTask();
+  }
+  /**
+   * watch current change
+   */
+  async watchCurrentChange() {
+    this.updateCurrent(this.current, 0, this.steps.length - 1);
+    this.currentStepUpdateEventEmitter.emit(this.steps[this.current]);
+    await this.renderer.gotoCarouselPage();
+  }
+  /** watch steps change */
+  watchSteps() {
+    this.updateCurrent(this.current, 0, this.steps.length - 1);
+  }
+  /** watch nextStep method call*/
+  nextStep() {
+    this.updateCurrent(++this.current, null, this.steps.length - 1);
+  }
+  /** watch prevStep method call*/
+  prevStep() {
+    this.updateCurrent(--this.current, 0, null);
+  }
+  /**
+   * watch setCurrent method call
+   *
+   * @param {number} step - step index to set current
+   */
+  setCurrent(step) {
+    this.updateCurrent(step, 0, this.steps.length - 1);
+  }
+  /**
+   * While direction changed from others direction to 'horizontal-compact',
+   *   we need to goto the current step page in carousel.
+   */
+  async watchDirection() {
+    await this.goToPageTaskQueue.enqueue({
+      /* eslint-disable jsdoc/require-jsdoc */
+      run: async () => {
+        return await this.renderer.gotoCarouselPage();
+      },
+    }, false);
+  }
+  /**
+   * Initialize step click observer
+   */
+  initStepClickObserver() {
+    this.stepClickObserver = new Observer(this.canAcceptStepClickEvent.bind(this), this.updateCurrent.bind(this));
+    ChangeManager.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalProgressTrackerStepClick), this.stepClickObserver);
+  }
+  /**
+   * Remove step click observer
+   */
+  removeStepClickObserver() {
+    ChangeManager.unregister(domNodeSubjectFactory.getSubject(this.host, VegaInternalProgressTrackerStepClick), this.stepClickObserver);
+  }
+  /**
+   * Check if can accept step click event
+   *
+   * @returns {boolean} - true if can accept, false otherwise.
+   */
+  canAcceptStepClickEvent() {
+    return true;
+  }
+}
+__decorate$1([
+  MapToComponentField()
+], VegaProgressTrackerCurrentStepController.prototype, "steps", void 0);
+__decorate$1([
+  MapToComponentField({ writable: true })
+], VegaProgressTrackerCurrentStepController.prototype, "current", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaProgressTrackerCurrentStepController.prototype, "currentStepUpdateEventEmitter", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaProgressTrackerCurrentStepController.prototype, "renderer", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaProgressTrackerCurrentStepController.prototype, "host", void 0);
+__decorate$1([
+  MapToComponentMethod('connectedCallback')
+], VegaProgressTrackerCurrentStepController.prototype, "connectedCallback", null);
+__decorate$1([
+  MapToComponentMethod('disconnectedCallback')
+], VegaProgressTrackerCurrentStepController.prototype, "disconnectedCallback", null);
+__decorate$1([
+  MapToComponentMethod('componentDidLoad')
+], VegaProgressTrackerCurrentStepController.prototype, "componentDidLoad", null);
+__decorate$1([
+  MapToComponentMethod('componentDidRender')
+], VegaProgressTrackerCurrentStepController.prototype, "componentDidRender", null);
+__decorate$1([
+  MapToComponentMethod('watchCurrentChange')
+], VegaProgressTrackerCurrentStepController.prototype, "watchCurrentChange", null);
+__decorate$1([
+  MapToComponentMethod('watchSteps')
+], VegaProgressTrackerCurrentStepController.prototype, "watchSteps", null);
+__decorate$1([
+  MapToComponentMethod('nextStep')
+], VegaProgressTrackerCurrentStepController.prototype, "nextStep", null);
+__decorate$1([
+  MapToComponentMethod('prevStep')
+], VegaProgressTrackerCurrentStepController.prototype, "prevStep", null);
+__decorate$1([
+  MapToComponentMethod('setCurrent')
+], VegaProgressTrackerCurrentStepController.prototype, "setCurrent", null);
+__decorate$1([
+  MapToComponentMethod('watchDirection')
+], VegaProgressTrackerCurrentStepController.prototype, "watchDirection", null);
+
+const vegaProgressTrackerCss = ":host .vega-progress-tracker__container{display:flex;align-items:center;padding-top:0px;padding-bottom:0px}:host .vega-progress-tracker__slot{width:100%;display:block}:host .vega-progress-step{display:flex;gap:16px}:host(:not(.click-step-disabled)) .vega-progress-step{cursor:pointer}:host(:not(.click-step-disabled)) .vega-progress-step.default:hover .vega-progress-step__icon{background-color:rgba(var(--v-bg-action-quaternary-hover, 239, 239, 239, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.default .vega-progress-step__icon:hover{background-color:rgba(var(--v-bg-action-quaternary-hover, 239, 239, 239, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.default:active .vega-progress-step__icon{background-color:rgba(var(--v-bg-action-quaternary-active, 205, 209, 211, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.inProgress .vega-progress-step__icon:hover,:host(:not(.click-step-disabled)) .vega-progress-step.current .vega-progress-step__icon:hover{background-color:rgba(var(--v-bg-action-hover, 4, 112, 236, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.inProgress:hover .vega-progress-step__icon,:host(:not(.click-step-disabled)) .vega-progress-step.current:hover .vega-progress-step__icon{background-color:rgba(var(--v-bg-action-hover, 4, 112, 236, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.inProgress:active .vega-progress-step__icon,:host(:not(.click-step-disabled)) .vega-progress-step.current:active .vega-progress-step__icon{background-color:rgba(var(--v-bg-action-active, 29, 65, 195, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.complete:hover .vega-progress-step__icon{border-color:rgba(var(--v-border-color-action-hover, 4, 112, 236, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.complete:hover .vega-progress-step__icon vega-icon{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.complete:active .vega-progress-step__icon{border-color:rgba(var(--v-border-color-action-active, 29, 65, 195, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.complete:active .vega-progress-step__icon vega-icon{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.complete.current:hover .vega-progress-step__icon vega-icon{color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1))}:host .vega-progress-step:focus-visible{outline-width:0px}:host .vega-progress-step:focus-visible .vega-progress-step-icon-container{border-radius:8px;outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px}:host .vega-progress-step .vega-progress-step-icon-divider{display:flex;flex-direction:column;align-items:center;gap:0px}:host .vega-progress-step .vega-progress-step-icon-container{padding:8px}:host .vega-progress-step .vega-progress-step__icon{display:block;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:9999px;box-sizing:content-box;height:32px;width:32px;min-width:32px;line-height:32px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-progress-step .vega-progress-step__icon{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){:host .vega-progress-step .vega-progress-step__icon{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){:host .vega-progress-step .vega-progress-step__icon{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}:host .vega-progress-step .vega-progress-step__icon span{display:block}:host .vega-progress-step .vega-progress-step__icon:not(.disable-responsive){line-height:32px}:host .vega-progress-step .vega-progress-step__divider{width:1px;flex-grow:1;height:100%;background-color:rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1));display:block}:host .vega-progress-step .vega-progress-step__divider.right.complete{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1))}:host .vega-progress-step .vega-progress-step__divider.left{display:none}:host .vega-progress-step:last-child .vega-progress-step__divider.right{display:none}:host .vega-progress-step .vega-progress-step__title{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;padding-top:12px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));display:block;padding-bottom:36px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-progress-step .vega-progress-step__title{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){:host .vega-progress-step .vega-progress-step__title{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){:host .vega-progress-step .vega-progress-step__title{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}:host .vega-progress-step.default .vega-progress-step__icon{color:rgba(var(--v-text-primary, 32, 54, 69, 1));background-color:rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1))}:host .vega-progress-step.complete .vega-progress-step__icon{display:flex;justify-content:center;align-items:center;background-color:rgba(var(--v-bg-action-tertiary, 0, 0, 0, 0));box-sizing:border-box;border-width:1px;border-style:solid;border-color:rgba(var(--v-border-color-action, 19, 98, 226, 1))}:host .vega-progress-step.complete .vega-progress-step__icon vega-icon{color:rgba(var(--v-text-link, 19, 98, 226, 1))}:host .vega-progress-step.complete .vega-progress-step__title{color:rgba(var(--v-text-primary, 32, 54, 69, 1))}:host .vega-progress-step.complete.current .vega-progress-step__icon vega-icon{color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1))}:host .vega-progress-step.inProgress .vega-progress-step__icon,:host .vega-progress-step.current .vega-progress-step__icon{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));box-shadow:0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25))}:host .vega-progress-step.inProgress .vega-progress-step__title,:host .vega-progress-step.current .vega-progress-step__title{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:22px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-progress-step.inProgress .vega-progress-step__title,:host .vega-progress-step.current .vega-progress-step__title{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-progress-step.inProgress .vega-progress-step__title,:host .vega-progress-step.current .vega-progress-step__title{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-progress-step.inProgress .vega-progress-step__title,:host .vega-progress-step.current .vega-progress-step__title{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:22px;letter-spacing:0px}}:host(.horizontal-compact){flex:1 1 100%;padding-top:0px}:host(.horizontal-compact) .vega-progress-tracker__container{padding-top:16px;padding-bottom:16px}:host(.horizontal-compact) .vega-progress-tracker__slot{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:0px}:host(.horizontal-compact) .vega-progress-step{display:flex;flex-grow:1;flex-basis:0}:host(.horizontal-compact) .vega-progress-step .vega-progress-step-icon-divider{display:flex;flex-direction:row;gap:4px;width:100%}:host(.horizontal-compact) .vega-progress-step .vega-progress-step__icon{height:16px;width:16px;min-width:16px}:host(.horizontal-compact) .vega-progress-step .vega-progress-step__icon{line-height:16px}:host(.horizontal-compact) .vega-progress-step .vega-progress-step__icon vega-icon{height:8px;width:8px}:host(.horizontal-compact) .vega-progress-step .vega-progress-step__icon span{display:none}:host(.horizontal-compact) .vega-progress-step .vega-progress-step__divider{height:1px;flex-grow:1}:host(.horizontal-compact) .vega-progress-step .vega-progress-step__divider.left{display:block}:host(.horizontal-compact) .vega-progress-step .vega-progress-step__divider.left.background{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1))}:host(.horizontal-compact) .vega-progress-step .vega-progress-step__divider.right{display:block}:host(.horizontal-compact) .vega-progress-step .vega-progress-step__title{display:none}:host(.horizontal-compact) .vega-progress-step:first-child .vega-progress-step__divider.left{opacity:0}:host(.horizontal-compact) .vega-progress-step:last-child .vega-progress-step__divider.right{display:block;opacity:0}:host(:not(.horizontal-compact)) .vega-progress-tracker__box{display:none}:host(.horizontal){display:block;overflow-x:auto;padding-top:4px}:host(.horizontal) .vega-progress-tracker__slot{display:flex}:host(.horizontal) .vega-progress-step{flex-direction:column;align-items:center;gap:4px;flex-grow:1;flex-basis:0}:host(.horizontal) .vega-progress-step .vega-progress-step-icon-divider{flex-direction:row;align-items:center;gap:4px;width:100%}:host(.horizontal) .vega-progress-step .vega-progress-step__divider{height:1px;display:block}:host(.horizontal) .vega-progress-step .vega-progress-step__divider.left{display:block}:host(.horizontal) .vega-progress-step .vega-progress-step__divider.right.complete{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1))}:host(.horizontal) .vega-progress-step .vega-progress-step__divider.left.background{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1))}:host(.horizontal) .vega-progress-step .vega-progress-step__title{padding-top:0px;padding-bottom:0px;text-align:center;padding-left:4px;padding-right:4px}:host(.horizontal) .vega-progress-step:first-child .vega-progress-step__divider.left{opacity:0}:host(.horizontal) .vega-progress-step:last-child .vega-progress-step__divider.right{display:block;opacity:0}:host vega-carousel .subTitle{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host vega-carousel .subTitle{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host vega-carousel .subTitle{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host vega-carousel .subTitle{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}}:host .vega-progress-tracker__box{display:flex;align-items:center}:host .vega-progress-tracker__box vega-carousel{width:100%;text-align:center}";
 
 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;
@@ -54,21 +322,28 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
         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;
 };
-var ProgressStepStatus;
-(function (ProgressStepStatus) {
-  ProgressStepStatus["DEFAULT"] = "default";
-  ProgressStepStatus["IN_PROGRESS"] = "inProgress";
-  ProgressStepStatus["COMPLETE"] = "complete";
-})(ProgressStepStatus || (ProgressStepStatus = {}));
 const VegaProgressTracker = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.vegaCurrentStepUpdate = createEvent(this, "vegaCurrentStepUpdate", 7);
     this.currentStepUpdate = createEvent(this, "currentStepUpdate", 7);
     this.globalSlimmers = {};
+    this.currentStepController = new VegaProgressTrackerCurrentStepController();
+    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer({
+      /**
+       * The below method is e2e-test covered in
+       * @see{module:vega-progress-tracker-resize-e2e}
+       */
+      callback: /* istanbul ignore next */ async () => {
+        this.currentBreakpoint = getCurrentBreakpoint();
+        await this.renderer.gotoCarouselPage();
+      },
+    });
+    this.renderer = new VegaProgressTrackerRenderer();
     this.currentStepUpdateEventEmitter = createEventEmitSlimmer(VegaProgressTracker, VegaCurrentStepUpdate);
     this.deprecatedPropertySlimmer = createDeprecatedPropertySlimmer(VegaProgressTracker, 'completedSteps', 'completedStepArray', []);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaProgressTrackerRuntimeMetricsPayloadDefinition);
+    this.currentBreakpoint = getCurrentBreakpoint();
     /**
      * Indicates the current step or stage in a
      *    sequential process or workflow,
@@ -76,6 +351,7 @@ const VegaProgressTracker = class {
      *
      * @vegaVersion 1.0.7
      */
+    /* eslint-disable-next-line @stencil/strict-mutable */
     this.current = 0;
     /**
      * Specifies the direction of the Progress Tracker component.
@@ -84,6 +360,7 @@ const VegaProgressTracker = class {
      *    In the horizontal direction, the tracker is divided into
      *    panes with navigable arrows. In the vertical direction,
      *    it is displayed as a single pane.
+     * It also can be set as ResponsiveType for responsive direction.
      *
      * @vegaVersion 1.0.7
      */
@@ -124,57 +401,17 @@ const VegaProgressTracker = class {
      * @vegaVersion 1.5.0
      */
     this.canClickStep = true;
-    this.getStepState = (index) => {
-      if (this.deprecatedPropertySlimmer.getValue().includes(this.steps[index])) {
-        return ProgressStepStatus.COMPLETE;
-      }
-      else if (index === this.current) {
-        return ProgressStepStatus.IN_PROGRESS;
-      }
-      else {
-        return ProgressStepStatus.DEFAULT;
-      }
-    };
-    this.onStepIconClick = async (e) => {
-      const index = Number(e.currentTarget.getAttribute('data-index'));
-      await this.setCurrent(index);
-    };
-    this.renderStepIcon = (index, progressStepStatus) => {
-      return (h("div", { class: "vega-progress-step-icon-container" }, h("div", { class: "vega-progress-step__icon" }, progressStepStatus == ProgressStepStatus.COMPLETE ? (h("vega-icon", { icon: "checkmark-rounded", size: "size-16" })) : (h("span", null, index + 1)))));
-    };
-    this.renderSteps = (subTitle, index) => {
-      const progressStepStatus = this.getStepState(index);
-      const prevStepCompleteStatus = this.deprecatedPropertySlimmer
-        .getValue()
-        .includes(this.steps[index - 1]);
-      return (h("div", { role: !this.canClickStep ? null : 'button', class: `vega-progress-step ${progressStepStatus} ${index === this.current ? 'current' : ''}`, "data-index": index, tabIndex: !this.canClickStep ? null : 0, onClick: !this.canClickStep ? null : this.onStepIconClick, onKeyDown: !this.canClickStep ? null : createEnterKeyHandlerToTriggerClick(), "aria-label": subTitle }, h("div", { class: "vega-progress-step-icon-divider" }, h("div", { class: `vega-progress-step__divider left ${prevStepCompleteStatus ? 'background' : ''}` }), this.renderStepIcon(index, progressStepStatus), h("div", { class: `vega-progress-step__divider right ${this.deprecatedPropertySlimmer.getValue().includes(subTitle)
-          ? 'complete'
-          : 'default'}` })), h("div", { class: "vega-progress-step__title" }, subTitle)));
-    };
-    this.updateCurrent = (current, min, max) => {
-      this.current = normalizeNumberByRanger(current, min, max);
-    };
-    this.isElementVisible = () => {
-      return this.carouselDom.parentElement.getBoundingClientRect().width > 0;
-    };
   }
   /**
    * The below method is e2e-test covered in
    * @see{module:vega-progress-tracker-e2e-change-current-mobile}
    */
   /* istanbul ignore next */
-  async watchCurrentChange(newCurrent) {
-    this.updateCurrent(newCurrent, 0, this.steps.length - 1);
-    this.currentStepUpdateEventEmitter.emit(this.steps[this.current]);
-    if (this.isElementVisible()) {
-      await this.carouselDom.goToPage(this.current + 1);
-    }
+  async watchCurrentChange() {
   }
-  watchSteps() {
-    this.updateCurrent(this.current, 0, this.steps.length - 1);
+  async watchDirection() {
   }
-  componentDidLoad() {
-    this.updateCurrent(this.current, 0, this.steps.length - 1);
+  watchSteps() {
   }
   /**
    * Invoke this method to change the tracker's current step
@@ -183,7 +420,6 @@ const VegaProgressTracker = class {
    * @vegaVersion 1.5.0
    */
   async nextStep() {
-    this.updateCurrent(++this.current, null, this.steps.length - 1);
   }
   /**
    * Invoke this method to change the tracker's current step
@@ -192,7 +428,6 @@ const VegaProgressTracker = class {
    * @vegaVersion 1.5.0
    */
   async prevStep() {
-    this.updateCurrent(--this.current, 0, null);
   }
   /**
    * Invoke this method to set the current step of the tracker.
@@ -200,7 +435,6 @@ const VegaProgressTracker = class {
    * @vegaVersion 1.0.7
    */
   async setCurrent(step) {
-    this.updateCurrent(step, 0, this.steps.length - 1);
   }
   /**
    * Invoke this method to retrieve the tracker's current step.
@@ -211,29 +445,35 @@ const VegaProgressTracker = class {
     return this.current;
   }
   render() {
-    return sanitizeVegaComponent(h(Host, { class: `vega-progress-tracker ${this.direction}${!this.canClickStep ? ' click-step-disabled' : ''}` }, h("div", { class: "vega-progress-tracker__container" }, h("div", { class: "vega-progress-tracker__slot" }, this.steps.map((subTitle, index) => this.renderSteps(subTitle, index)))), h("div", { class: "vega-progress-tracker__box" }, h("vega-carousel", { showSlider: false, itemsPerPage: 1, canSwipe: this.canClickStep, ref: (el) => {
-        /**
-         * The below method is e2e-test covered in
-         * @see{module:vega-progress-tracker-with-touch-event-mobile}
-         */
-        /* istanbul ignore next */
-        DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaPageUpdate, (input) => this.updateCurrent(input.detail - 1, 0, this.steps.length - 1));
-        return (this.carouselDom = el);
-      } }, this.steps.map((subTitle, index) => (h("div", { class: {
-        subTitle: true,
-        completed: this.getStepState(index) === ProgressStepStatus.COMPLETE,
-        inProgress: this.current === index,
-      } }, subTitle)))))), this.host);
+    let direction = ResponsiveFormatFacade.formatCustom(this.direction) || 'vertical';
+    if (['default', 'S'].includes(this.currentBreakpoint) && !isResponsiveType(this.direction)) {
+      direction = 'horizontal-compact';
+    }
+    return sanitizeVegaComponent(h(Host, { class: {
+        'vega-progress-tracker': true,
+        [direction]: true,
+        'click-step-disabled': !this.canClickStep,
+      } }, this.renderer.render()), this.host);
   }
   get host() { return getElement(this); }
   static get watchers() { return {
     "current": ["watchCurrentChange"],
+    "direction": ["watchDirection"],
     "steps": ["watchSteps"]
   }; }
 };
 __decorate([
   InjectVegaGlobalSlimmer()
 ], VegaProgressTracker.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaProgressTracker.prototype, "currentStepController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaProgressTracker.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaProgressTracker.prototype, "renderer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaProgressTracker.prototype, "currentStepUpdateEventEmitter", void 0);

package/dist/esm/vega-radio_2.entry.js

@@ -7,36 +7,36 @@ import { O as Observer } from './observer-3959f9dd.js';
 import { f as findParent } from './ui-bb99c0c2.js';
 import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-a84cc93e.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-4e28e9f8.js';
-import { d as domNodeSubjectFactory, f as VegaChange, C as VegaFocus, E as VegaBlur } from './dom-node-subject-observer-factory-dca87b70.js';
-import { f as VegaInternalFieldErrorStateChange } from './vega-internal-event-id-5c3e5f7f.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-76fbfe1f.js';
+import { d as domNodeSubjectFactory, f as VegaChange, F as VegaFocus, G as VegaBlur } from './dom-node-subject-observer-factory-479cc5ef.js';
+import { f as VegaInternalFieldErrorStateChange } from './vega-internal-event-id-71c67c39.js';
 import { R as RequiredFieldRule } from './required-field-rule-ab4bdc47.js';
 import { C as ComponentLoadRequired } from './component-load-required-db42032a.js';
-import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-bf071b75.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-14379261.js';
 import { C as ChildNodesNotifyObserverSlimmer } from './child-nodes-notify-observer-slimmer-b676cd2b.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-76331524.js';
-import { K as KeyboardManagerSlimmer } from './keyboard-manager-slimmer-f39214e4.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-6f7ae2c7.js';
+import { K as KeyboardManagerSlimmer } from './keyboard-manager-slimmer-e303cb7d.js';
 import { M as MutationObserverSlimmer } from './mutation-observer-slimmer-58ebc13c.js';
 import { T as TagNameMutationFilter } from './mutation-observer-filters-1a054fb0.js';
 import './dynamic-slimmer-90b8af32.js';
-import './internal-vega-event-manager-516aa721.js';
+import './internal-vega-event-manager-e44672ed.js';
 import './try-get-document-bef0f526.js';
 import './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
 import './string-a953eafc.js';
 import './create-public-api-runtime-metrics-slimmer-bedf3a1e.js';
 import './translation-96e5debd.js';
-import './page-resize-observer-slimmer-0bf7fbf3.js';
-import './ui-8424715a.js';
+import './page-resize-observer-slimmer-8744cb44.js';
+import './ui-28fd4193.js';
 import './breakpoints-d9faf11c.js';
 import './array-7888f339.js';
 import './number-4398f2e1.js';
-import './sub-state-observer-slimmer-3504e2f2.js';
+import './sub-state-observer-slimmer-17bb0328.js';
 import './vega-env-manager-8f8dc473.js';
 import './feature-flag-controller-51659753.js';
 import './index-e9da316f.js';
 import './_commonjsHelpers-9943807e.js';
-import './keyboard-manager-5d8f3582.js';
-import './type-guard-12f7654b.js';
+import './keyboard-manager-89acac79.js';
+import './type-guard-b48aec98.js';
 import './typography-396de03f.js';
 
 var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {

package/dist/esm/vega-rich-text-content.entry.js

@@ -3,19 +3,19 @@ import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer,
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-a84cc93e.js';
 import { s as sanitizeVegaComponent } from './component-7d906393.js';
 import { a as VegaDarkModeStyleController } from './dark-mode-style-controller-de88a117.js';
-import { T as TextNodeRenderingRegistry, I as ImageAnnotationAction, a as TextColorToolbarButtonSlimmer } from './image-annotation-action-d0af138c.js';
-import { R as RTEDTORendererManager, g as ImageAnnotation, V as VegaRTEContent } from './dto-renderer-manager-d862ae78.js';
-import { s as stateEntityRenderingRegistry, y as NodeAnnotationTypeEnum, Z as ZERO_WIDTH_SPACE, M as ModifyContentAction, c as ModifyContentActionType, W as LinkAnnotationAction, k as InternalAnnotationTypeEnum, X as CommonAnnotationTypeEnum, N as NodeAnnotation, z as RTEDecoratorNode, Y as UpdateCodeBlockAction, _ as SelectionChangeAction, x as RTECodeBlock } from './code-block-ecb4491b.js';
+import { T as TextNodeRenderingRegistry, I as ImageAnnotationAction, a as TextColorToolbarButtonSlimmer } from './image-annotation-action-3ce95526.js';
+import { R as RTEDTORendererManager, g as ImageAnnotation, V as VegaRTEContent } from './dto-renderer-manager-d185c7ba.js';
+import { s as stateEntityRenderingRegistry, y as NodeAnnotationTypeEnum, Z as ZERO_WIDTH_SPACE, M as ModifyContentAction, c as ModifyContentActionType, W as LinkAnnotationAction, k as InternalAnnotationTypeEnum, X as CommonAnnotationTypeEnum, N as NodeAnnotation, z as RTEDecoratorNode, Y as UpdateCodeBlockAction, _ as SelectionChangeAction, x as RTECodeBlock } from './code-block-8fb548ff.js';
 import { V as VegaRTEBaseRenderer } from './base-renderer-101f6d04.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
-import { D as DomNodeSubjectObserverFactory, f as VegaChange, l as VegaRemove } from './dom-node-subject-observer-factory-dca87b70.js';
-import { i as isNonNullable } from './type-guard-12f7654b.js';
-import { r as VegaInternalCodeBlockSelectionChange } from './vega-internal-event-id-5c3e5f7f.js';
+import { D as DomNodeSubjectObserverFactory, f as VegaChange, l as VegaRemove } from './dom-node-subject-observer-factory-479cc5ef.js';
+import { i as isNonNullable } from './type-guard-b48aec98.js';
+import { s as VegaInternalCodeBlockSelectionChange } from './vega-internal-event-id-71c67c39.js';
 import { t as tryGetDocument } from './try-get-document-bef0f526.js';
 import { v as vegaNonceManager } from './vega-nonce-manager-497e5eb5.js';
-import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-3504e2f2.js';
+import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-17bb0328.js';
 import { f as findParent } from './ui-bb99c0c2.js';
-import { a as waitForComponentDidRender } from './index-c943d263.js';
+import { a as waitForComponentDidRender } from './index-03a016ed.js';
 import { i as isArrayEqual } from './array-7888f339.js';
 import './static-subject-title-52f93124.js';
 import './change-manager-6a7eb88c.js';
@@ -27,8 +27,9 @@ import './dynamic-slimmer-90b8af32.js';
 import './string-a953eafc.js';
 import './object-66c37948.js';
 import './breakpoints-d9faf11c.js';
-import './ui-8424715a.js';
+import './ui-28fd4193.js';
 import './typography-396de03f.js';
+import './translation-96e5debd.js';
 import './wait-for-vega-handler-c2c07ac3.js';
 import './number-4398f2e1.js';