@heartlandone/vega 2.72.0 → 2.73.0

package/dist/collection/components/vega-popover/vega-popover.js

@@ -97,9 +97,10 @@ export class VegaPopover {
    * Invoke this method to show the popover.
    *
    * @vegaVersion 1.22.0
+   * @param {boolean} refresh - Determines whether the popover should be refreshed even when it is already visible. This is useful for updating the popover‘s styles (such as width, height, or position). The default value is false. Added in 2.73.0.
    */
-  async show() {
-    if (!this.isPopoverShow) {
+  async show(refresh = false) {
+    if (!this.isPopoverShow || refresh) {
       this.showPopover();
     }
   }
@@ -413,8 +414,14 @@ export class VegaPopover {
   static get methods() { return {
     "show": {
       "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
+        "signature": "(refresh?: boolean) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "refresh - Determines whether the popover should be refreshed even when it is already visible. This is useful for updating the popover\u2018s styles (such as width, height, or position). The default value is false. Added in 2.73.0."
+              }],
+            "text": "- Determines whether the popover should be refreshed even when it is already visible. This is useful for updating the popover\u2018s styles (such as width, height, or position). The default value is false. Added in 2.73.0."
+          }],
         "references": {
           "Promise": {
             "location": "global"
@@ -427,6 +434,9 @@ export class VegaPopover {
         "tags": [{
             "name": "vegaVersion",
             "text": "1.22.0"
+          }, {
+            "name": "param",
+            "text": "refresh - Determines whether the popover should be refreshed even when it is already visible. This is useful for updating the popover\u2018s styles (such as width, height, or position). The default value is false. Added in 2.73.0."
           }]
       }
     },

package/dist/collection/components/vega-progress-tracker/slimmers/controllers/dto/internal-progress-tracker-step.js

@@ -0,0 +1,75 @@
+export var ProgressStepStatus;
+(function (ProgressStepStatus) {
+  ProgressStepStatus["DEFAULT"] = "default";
+  ProgressStepStatus["IN_PROGRESS"] = "inProgress";
+  ProgressStepStatus["COMPLETE"] = "complete";
+})(ProgressStepStatus || (ProgressStepStatus = {}));
+/**
+ * Data Transfer Object representing an internal step in the progress tracker.
+ */
+export class InternalProgressTrackerStep {
+  /**
+   * @param {string} stepKey - The unique key for the step.
+   * @param {string} title - The title of the step.
+   * @param {ProgressStepStatus} progressStatus - The progress status of the step.
+   * @param {boolean} isCurrent - Indicates if this step is the current step.
+   */
+  constructor(stepKey, title, progressStatus, isCurrent) {
+    this.stepKey = stepKey;
+    this.title = title;
+    this.progressStatus = progressStatus;
+    this.isCurrent = isCurrent;
+  }
+  /**
+   * Create InternalProgressTrackerStep array from steps property
+   *
+   * @param {string[]} steps - An array of step keys.
+   * @param {number} current - The current step index.
+   * @param {string[]} completedSteps - An array of completed step keys.
+   * @returns {InternalProgressTrackerStep[]} An array of InternalProgressTrackerStep instances.
+   */
+  static fromSteps(steps, current, completedSteps) {
+    return steps.map((step, index) => new InternalProgressTrackerStep(step, step, this.getStepStatus(step, index, current, completedSteps), index === current));
+  }
+  /**
+   * Create InternalProgressTrackerStep array from host slot elements
+   *
+   * @param {HTMLElement} host - The host element containing the slot elements.
+   * @param {number} current - The current step index.
+   * @param {string[]} completedSteps - An array of completed step keys.
+   * @returns {InternalProgressTrackerStep[]} An array of InternalProgressTrackerStep instances.
+   */
+  static fromHostSlot(host, current, completedSteps) {
+    return Array.from(host.querySelectorAll('vega-progress-tracker-step')).map((step, index) => {
+      return new InternalProgressTrackerStep(step.stepKey, '', this.getStepStatus(step.stepKey, index, current, completedSteps), index === current);
+    });
+  }
+  /**
+   * Checks if the step is completed.
+   *
+   * @returns { boolean } A boolean value indicating whether the step is completed.
+   */
+  isCompleted() {
+    return this.progressStatus === ProgressStepStatus.COMPLETE;
+  }
+}
+/**
+ * Determines the progress status of a step based on its index, the current step, and completed steps.
+ *
+ * @param {string} stepKey - The unique key for the step.
+ * @param {number} stepIndex - The index of the step.
+ * @param {number} current - The current step index.
+ * @param {string[]} completedSteps - An array of completed step keys.
+ * @returns {ProgressStepStatus} The progress status of the step.
+ */
+InternalProgressTrackerStep.getStepStatus = (stepKey, stepIndex, current, completedSteps) => {
+  if (completedSteps.includes(stepKey)) {
+    return ProgressStepStatus.COMPLETE;
+  }
+  else if (stepIndex === current) {
+    return ProgressStepStatus.IN_PROGRESS;
+  }
+  else {
+    return ProgressStepStatus.DEFAULT;
+  }
+};

package/dist/collection/components/vega-progress-tracker/slimmers/controllers/vega-progress-tracker-current-direction-controller.js

@@ -0,0 +1,88 @@
+var __decorate = (this && this.__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;
+};
+import { InjectVegaSlimmer, MapToComponentField, MapToComponentMethod, VegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
+import { PageResizeObserverSlimmer } from '../../../../helpers/slimmers/page-resize-observer-slimmer';
+import responsiveFormatFacade from '../../../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
+import { isResponsiveType } from '../../../../types/type-guard';
+import { getCurrentBreakpoint } from '../../../../utils/breakpoints';
+/**
+ * Controls the current direction of the progress tracker component.
+ */
+export class VegaProgressTrackerCurrentDirectionController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer({
+      /*
+       * The below method is e2e-test covered in
+       * @see{module:vega-progress-tracker-resize-e2e}
+       */
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      callback: /* istanbul ignore next */ async () => {
+        this.setCurrentDirection();
+        await this.renderer.gotoCarouselPage();
+      },
+    });
+  }
+  /** connectedCallback */
+  connectedCallback() {
+    methodPlaceholder();
+  }
+  /** disconnectedCallback */
+  disconnectedCallback() {
+    methodPlaceholder();
+  }
+  /** componentWillLoad */
+  componentWillLoad() {
+    this.setCurrentDirection();
+  }
+  /** componentDidLoad */
+  componentDidLoad() {
+    methodPlaceholder();
+  }
+  /** watchDirection */
+  watchDirection() {
+    this.setCurrentDirection();
+  }
+  /**
+   * The function sets the current direction of a progress tracker
+   * based on the component's direction and the current breakpoint.
+   */
+  setCurrentDirection() {
+    let direction = responsiveFormatFacade.formatCustom(this.direction) || 'vertical';
+    if (['default', 'S'].includes(getCurrentBreakpoint()) && !isResponsiveType(this.direction)) {
+      direction = 'horizontal-compact';
+    }
+    this.currentDirection = direction;
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaProgressTrackerCurrentDirectionController.prototype, "direction", void 0);
+__decorate([
+  MapToComponentField()
+], VegaProgressTrackerCurrentDirectionController.prototype, "renderer", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaProgressTrackerCurrentDirectionController.prototype, "currentDirection", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaProgressTrackerCurrentDirectionController.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaProgressTrackerCurrentDirectionController.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaProgressTrackerCurrentDirectionController.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaProgressTrackerCurrentDirectionController.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaProgressTrackerCurrentDirectionController.prototype, "componentDidLoad", null);
+__decorate([
+  MapToComponentMethod('watchDirection')
+], VegaProgressTrackerCurrentDirectionController.prototype, "watchDirection", null);

package/dist/collection/components/vega-progress-tracker/slimmers/controllers/vega-progress-tracker-current-step-controller.js

@@ -22,11 +22,9 @@ export class VegaProgressTrackerCurrentStepController extends VegaSlimmer {
      * 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);
+    this.updateCurrent = (current) => {
+      this.current = normalizeNumberByRanger(current, 0, this.currentSteps.length - 1);
     };
   }
   /** connectedCallback */
@@ -39,7 +37,7 @@ export class VegaProgressTrackerCurrentStepController extends VegaSlimmer {
   }
   /** componentDidLoad */
   componentDidLoad() {
-    this.updateCurrent(this.current, 0, this.steps.length - 1);
+    this.updateCurrent(this.current);
   }
   /** componentDidRender */
   async componentDidRender() {
@@ -49,21 +47,22 @@ export class VegaProgressTrackerCurrentStepController extends VegaSlimmer {
    * watch current change
    */
   async watchCurrentChange() {
-    this.updateCurrent(this.current, 0, this.steps.length - 1);
-    this.currentStepUpdateEventEmitter.emit(this.steps[this.current]);
+    var _a;
+    this.updateCurrent(this.current);
+    this.currentStepUpdateEventEmitter.emit((_a = this.currentSteps[this.current]) === null || _a === void 0 ? void 0 : _a.stepKey);
     await this.renderer.gotoCarouselPage();
   }
   /** watch steps change */
   watchSteps() {
-    this.updateCurrent(this.current, 0, this.steps.length - 1);
+    this.updateCurrent(this.current);
   }
   /** watch nextStep method call*/
   nextStep() {
-    this.updateCurrent(++this.current, null, this.steps.length - 1);
+    this.updateCurrent(++this.current);
   }
   /** watch prevStep method call*/
   prevStep() {
-    this.updateCurrent(--this.current, 0, null);
+    this.updateCurrent(--this.current);
   }
   /**
    * watch setCurrent method call
@@ -71,7 +70,7 @@ export class VegaProgressTrackerCurrentStepController extends VegaSlimmer {
    * @param {number} step - step index to set current
    */
   setCurrent(step) {
-    this.updateCurrent(step, 0, this.steps.length - 1);
+    this.updateCurrent(step);
   }
   /**
    * While direction changed from others direction to 'horizontal-compact',
@@ -109,7 +108,7 @@ export class VegaProgressTrackerCurrentStepController extends VegaSlimmer {
 }
 __decorate([
   MapToComponentField()
-], VegaProgressTrackerCurrentStepController.prototype, "steps", void 0);
+], VegaProgressTrackerCurrentStepController.prototype, "currentSteps", void 0);
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaProgressTrackerCurrentStepController.prototype, "current", void 0);

package/dist/collection/components/vega-progress-tracker/slimmers/controllers/vega-progress-tracker-current-steps-controller.js

@@ -0,0 +1,125 @@
+var __decorate = (this && this.__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;
+};
+import { InjectVegaSlimmer, MapToComponentField, MapToComponentMethod, VegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
+import { MutationObserverSlimmer } from '../../../../helpers/slimmers/mutation-observer/mutation-observer-slimmer';
+import { InternalProgressTrackerStep } from './dto/internal-progress-tracker-step';
+/**
+ * Controls the current steps of the progress tracker component.
+ */
+export class VegaProgressTrackerCurrentStepsController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.mutationObserver = new MutationObserverSlimmer({
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      target: () => this.host,
+      options: {
+        childList: true,
+        subtree: true,
+      },
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      callback: /* istanbul ignore next */ () => {
+        this.appendSlotAttribute();
+        this.syncUpCurrentSteps();
+      },
+    });
+  }
+  /** connectedCallback */
+  connectedCallback() {
+    this.appendSlotAttribute();
+  }
+  /** disconnectedCallback */
+  disconnectedCallback() {
+    methodPlaceholder();
+  }
+  /** componentWillLoad */
+  componentWillLoad() {
+    this.syncUpCurrentSteps();
+  }
+  /** componentDidLoad */
+  componentDidLoad() {
+    methodPlaceholder();
+  }
+  /** while steps changed, we need sync up current steps */
+  watchSteps() {
+    this.syncUpCurrentSteps();
+  }
+  /** while current state changed, we need sync up current steps */
+  watchCurrentChange() {
+    this.syncUpCurrentSteps();
+  }
+  /** while completedStepArray changed, we need sync up current steps */
+  watchCompletedStepArray() {
+    this.syncUpCurrentSteps();
+  }
+  /** while completedSteps changed, we need sync up current steps */
+  watchCompletedSteps() {
+    this.syncUpCurrentSteps();
+  }
+  /**
+   * Sync up current steps
+   */
+  syncUpCurrentSteps() {
+    this.currentSteps = this.renderModeController.isSourceRenderMode()
+      ? InternalProgressTrackerStep.fromSteps(this.steps, this.current, this.deprecatedPropertySlimmer.getValue())
+      : InternalProgressTrackerStep.fromHostSlot(this.host, this.current, this.deprecatedPropertySlimmer.getValue());
+  }
+  /**
+   * If template mode, append slot attribute to each step element in host.
+   */
+  appendSlotAttribute() {
+    if (!this.renderModeController.isSourceRenderMode()) {
+      Array.from(this.host.querySelectorAll('vega-progress-tracker-step')).map((step, index) => {
+        step.setAttribute('slot', `step-${index}`);
+      });
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaProgressTrackerCurrentStepsController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaProgressTrackerCurrentStepsController.prototype, "steps", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaProgressTrackerCurrentStepsController.prototype, "currentSteps", void 0);
+__decorate([
+  MapToComponentField()
+], VegaProgressTrackerCurrentStepsController.prototype, "renderModeController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaProgressTrackerCurrentStepsController.prototype, "current", void 0);
+__decorate([
+  MapToComponentField()
+], VegaProgressTrackerCurrentStepsController.prototype, "deprecatedPropertySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaProgressTrackerCurrentStepsController.prototype, "mutationObserver", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaProgressTrackerCurrentStepsController.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaProgressTrackerCurrentStepsController.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaProgressTrackerCurrentStepsController.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaProgressTrackerCurrentStepsController.prototype, "componentDidLoad", null);
+__decorate([
+  MapToComponentMethod('watchSteps')
+], VegaProgressTrackerCurrentStepsController.prototype, "watchSteps", null);
+__decorate([
+  MapToComponentMethod('watchCurrentChange')
+], VegaProgressTrackerCurrentStepsController.prototype, "watchCurrentChange", null);
+__decorate([
+  MapToComponentMethod('watchCompletedStepArray')
+], VegaProgressTrackerCurrentStepsController.prototype, "watchCompletedStepArray", null);
+__decorate([
+  MapToComponentMethod('watchCompletedSteps')
+], VegaProgressTrackerCurrentStepsController.prototype, "watchCompletedSteps", null);

package/dist/collection/components/vega-progress-tracker/slimmers/controllers/vega-progress-tracker-render-mode-controller.js

@@ -0,0 +1,40 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+/**
+ * Controls the render mode of the progress tracker component.
+ */
+export class VegaProgressTrackerRenderModeController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.renderMode = 'SOURCE';
+  }
+  /** connectedCallback */
+  connectedCallback() {
+    this.setRenderMode();
+  }
+  /**
+   * Checks if the render mode is set to 'SOURCE'.
+   *
+   * @returns { boolean }A boolean value indicating whether the render mode is set to 'SOURCE'.
+   */
+  isSourceRenderMode() {
+    return this.renderMode === 'SOURCE';
+  }
+  /**
+   * The function sets the render mode based on the presence of a specific element in the host component.
+   */
+  setRenderMode() {
+    this.renderMode = this.host.querySelector('vega-progress-tracker-step') ? 'SLOT' : 'SOURCE';
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaProgressTrackerRenderModeController.prototype, "host", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaProgressTrackerRenderModeController.prototype, "connectedCallback", null);

package/dist/collection/components/vega-progress-tracker/slimmers/renderers/vega-progress-tracker-renderer.js

@@ -12,44 +12,22 @@ import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibi
 import changeManager from '../../../../helpers/change-manager/change-manager';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalProgressTrackerStepClick } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
-var ProgressStepStatus;
-(function (ProgressStepStatus) {
-  ProgressStepStatus["DEFAULT"] = "default";
-  ProgressStepStatus["IN_PROGRESS"] = "inProgress";
-  ProgressStepStatus["COMPLETE"] = "complete";
-})(ProgressStepStatus || (ProgressStepStatus = {}));
 /** Renders the progress tracker component. */
 export class VegaProgressTrackerRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
-    this.renderStepIcon = (index, progressStepStatus) => {
+    this.renderStepIcon = (step, stepIndex) => {
       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)))));
+        h("div", { class: "vega-progress-step__icon" }, step.isCompleted() ? (h("vega-icon", { icon: "checkmark-rounded", size: "size-16" })) : (h("span", null, stepIndex + 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 },
+    this.renderStep = (step, stepIndex) => {
+      var _a;
+      return (h("div", { role: !this.canClickStep ? null : 'button', class: `vega-progress-step ${step.progressStatus} ${step.isCurrent ? 'current' : ''}`, "data-index": stepIndex, tabIndex: !this.canClickStep ? null : 0, onClick: !this.canClickStep ? null : this.onStepIconClick, onKeyDown: !this.canClickStep ? null : createEnterKeyHandlerToTriggerClick(), "aria-label": step.title },
         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;
-      }
+          h("div", { class: `vega-progress-step__divider left ${((_a = this.currentSteps[stepIndex - 1]) === null || _a === void 0 ? void 0 : _a.isCompleted()) ? 'background' : ''}` }),
+          this.renderStepIcon(step, stepIndex),
+          h("div", { class: `vega-progress-step__divider right ${step.isCompleted() ? 'complete' : 'default'}` })),
+        h("div", { class: "vega-progress-step__title" }, this.renderStepTitle(step, stepIndex, 'top'))));
     };
     this.onStepIconClick = (e) => {
       const index = Number(e.currentTarget.getAttribute('data-index'));
@@ -64,7 +42,7 @@ export class VegaProgressTrackerRenderer extends VegaSlimmer {
   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__slot" }, this.currentSteps.map((step, stepIndex) => this.renderStep(step, stepIndex)))),
       h("div", { class: "vega-progress-tracker__box", ref: (ref) => (this.carouselContainerRef = ref) },
         h("vega-carousel", { showSlider: false, itemsPerPage: 1, canSwipe: this.canClickStep, ref: (el) => {
             /**
@@ -72,13 +50,22 @@ export class VegaProgressTrackerRenderer extends VegaSlimmer {
              * @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));
+            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)))))));
+          } }, this.currentSteps.map((step, index) => this.renderStepTitle(step, index, 'carousel'))))));
+  }
+  renderStepTitle(step, stepIndex, position) {
+    const isCompact = this.currentDirection === 'horizontal-compact';
+    if ((isCompact && position === 'carousel') || (!isCompact && position === 'top')) {
+      if (this.renderModeController.isSourceRenderMode()) {
+        return (h("vega-progress-tracker-step", { key: step.stepKey, stepKey: step.stepKey }, step.title));
+      }
+      else {
+        return h("slot", { name: `step-${stepIndex}` });
+      }
+    }
   }
 }
 __decorate([
@@ -86,7 +73,7 @@ __decorate([
 ], VegaProgressTrackerRenderer.prototype, "host", void 0);
 __decorate([
   MapToComponentField()
-], VegaProgressTrackerRenderer.prototype, "steps", void 0);
+], VegaProgressTrackerRenderer.prototype, "currentSteps", void 0);
 __decorate([
   MapToComponentField()
 ], VegaProgressTrackerRenderer.prototype, "canClickStep", void 0);
@@ -99,3 +86,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaProgressTrackerRenderer.prototype, "currentStepController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaProgressTrackerRenderer.prototype, "currentDirection", void 0);
+__decorate([
+  MapToComponentField()
+], VegaProgressTrackerRenderer.prototype, "renderModeController", void 0);

package/dist/collection/components/vega-progress-tracker/vega-progress-tracker-step/slimmers/controllers/vega-progress-tracker-step-state-controller.js

@@ -0,0 +1,43 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentField } from 'vega-slimmer/core';
+import { SubStateObserverSlimmer } from '../../../../../helpers/slimmers/sub-state/sub-state-observer-slimmer';
+/**
+ * Controls the state of a progress tracker step component.
+ */
+export class VegaProgressTrackerStepStateController extends SubStateObserverSlimmer {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  constructor() {
+    super({
+      parent: 'vega-progress-tracker',
+      subStates: [
+        {
+          subStateName: 'status',
+          parentStateName: 'currentSteps',
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: (steps) => {
+            const step = steps.find((step) => step.stepKey === this.stepKey);
+            this.progressStatus = step.progressStatus;
+            this.isCurrent = step.isCurrent;
+          },
+        },
+      ],
+    });
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaProgressTrackerStepStateController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaProgressTrackerStepStateController.prototype, "progressStatus", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaProgressTrackerStepStateController.prototype, "isCurrent", void 0);
+__decorate([
+  MapToComponentField()
+], VegaProgressTrackerStepStateController.prototype, "stepKey", void 0);