@globalpayments/vega 2.69.1 → 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

@@ -0,0 +1,153 @@
+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';
+import { normalizeNumberByRanger } from '../../../../utils/number';
+import { Observer } from '../../../../helpers/change-manager/observer/observer';
+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';
+import { SynchronizeTaskQueue } from '../../../../helpers/queue/synchronize-task-queue';
+/**
+ * Controls the current step of the progress tracker component.
+ */
+export class VegaProgressTrackerCurrentStepController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.goToPageTaskQueue = new SynchronizeTaskQueue();
+    /**
+     * Update current step with range limit
+     *
+     * @param {number} current - current step index
+     */
+    this.updateCurrent = (current) => {
+      this.current = normalizeNumberByRanger(current, 0, this.currentSteps.length - 1);
+    };
+  }
+  /** connectedCallback */
+  connectedCallback() {
+    this.initStepClickObserver();
+  }
+  /** disconnectedCallback */
+  disconnectedCallback() {
+    this.removeStepClickObserver();
+  }
+  /** componentDidLoad */
+  componentDidLoad() {
+    this.updateCurrent(this.current);
+  }
+  /** componentDidRender */
+  async componentDidRender() {
+    await this.goToPageTaskQueue.runTask();
+  }
+  /**
+   * watch current change
+   */
+  async watchCurrentChange() {
+    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);
+  }
+  /** watch nextStep method call*/
+  nextStep() {
+    this.updateCurrent(++this.current);
+  }
+  /** watch prevStep method call*/
+  prevStep() {
+    this.updateCurrent(--this.current);
+  }
+  /**
+   * watch setCurrent method call
+   *
+   * @param {number} step - step index to set current
+   */
+  setCurrent(step) {
+    this.updateCurrent(step);
+  }
+  /**
+   * 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([
+  MapToComponentField()
+], VegaProgressTrackerCurrentStepController.prototype, "currentSteps", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaProgressTrackerCurrentStepController.prototype, "current", void 0);
+__decorate([
+  MapToComponentField()
+], VegaProgressTrackerCurrentStepController.prototype, "currentStepUpdateEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaProgressTrackerCurrentStepController.prototype, "renderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaProgressTrackerCurrentStepController.prototype, "host", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaProgressTrackerCurrentStepController.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaProgressTrackerCurrentStepController.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaProgressTrackerCurrentStepController.prototype, "componentDidLoad", null);
+__decorate([
+  MapToComponentMethod('componentDidRender')
+], VegaProgressTrackerCurrentStepController.prototype, "componentDidRender", null);
+__decorate([
+  MapToComponentMethod('watchCurrentChange')
+], VegaProgressTrackerCurrentStepController.prototype, "watchCurrentChange", null);
+__decorate([
+  MapToComponentMethod('watchSteps')
+], VegaProgressTrackerCurrentStepController.prototype, "watchSteps", null);
+__decorate([
+  MapToComponentMethod('nextStep')
+], VegaProgressTrackerCurrentStepController.prototype, "nextStep", null);
+__decorate([
+  MapToComponentMethod('prevStep')
+], VegaProgressTrackerCurrentStepController.prototype, "prevStep", null);
+__decorate([
+  MapToComponentMethod('setCurrent')
+], VegaProgressTrackerCurrentStepController.prototype, "setCurrent", null);
+__decorate([
+  MapToComponentMethod('watchDirection')
+], VegaProgressTrackerCurrentStepController.prototype, "watchDirection", null);

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

@@ -0,0 +1,94 @@
+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 { Fragment, h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaPageUpdate } from '../../../../helpers/event-manager/event-id/vega-event-id';
+import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
+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';
+/** Renders the progress tracker component. */
+export class VegaProgressTrackerRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.renderStepIcon = (step, stepIndex) => {
+      return (h("div", { class: "vega-progress-step-icon-container" },
+        h("div", { class: "vega-progress-step__icon" }, step.isCompleted() ? (h("vega-icon", { icon: "checkmark-rounded", size: "size-16" })) : (h("span", null, stepIndex + 1)))));
+    };
+    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 ${((_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'));
+      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.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) => {
+            /**
+             * 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.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([
+  MapToComponentField()
+], VegaProgressTrackerRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaProgressTrackerRenderer.prototype, "currentSteps", void 0);
+__decorate([
+  MapToComponentField()
+], VegaProgressTrackerRenderer.prototype, "canClickStep", void 0);
+__decorate([
+  MapToComponentField()
+], VegaProgressTrackerRenderer.prototype, "current", void 0);
+__decorate([
+  MapToComponentField()
+], VegaProgressTrackerRenderer.prototype, "deprecatedPropertySlimmer", void 0);
+__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);