@globalpayments/vega 2.72.0 → 2.74.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);

package/dist/collection/components/vega-progress-tracker/vega-progress-tracker-step/vega-progress-tracker-step.css

@@ -0,0 +1,79 @@
+/* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
+/**
+ * Deprecated. Not for use in new websites.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
+ */
+:host .title-container {
+  font-family: "Inter", sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 22px;
+  letter-spacing: 0px;
+  color: rgba(var(--v-text-secondary, 107, 116, 125, 1));
+  display: block;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host .title-container {
+    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 .title-container {
+    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 .title-container {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 22px;
+    letter-spacing: 0px;
+  }
+}
+:host .title-container.inProgress, :host .title-container.current {
+  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 .title-container.inProgress, :host .title-container.current {
+    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 .title-container.inProgress, :host .title-container.current {
+    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 .title-container.inProgress, :host .title-container.current {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 22px;
+    letter-spacing: 0px;
+  }
+}
+:host .title-container.complete {
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+}