@globalpayments/vega 2.70.0 → 2.75.1

package/dist/collection/components/vega-input-select/slimmers/controllers/vega-input-select-item-controller.js

@@ -0,0 +1,89 @@
+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';
+/** The `VegaInputSelectItemController` class is a TypeScript React component that controls the state of selected item. */
+export class VegaInputSelectItemController extends VegaSlimmer {
+  /**
+   * Set initial the value of selected item
+   */
+  componentWillLoad() {
+    this.setSelectedItem();
+  }
+  /**
+   * Reset the value of selected item based on select type
+   */
+  watchSelectType() {
+    if (this.selectType === 'multiple') {
+      this.selectedItem = [];
+      this.vegaInputSelectValueController.setValue([]);
+    }
+    else {
+      this.selectedItem = null;
+      this.vegaInputSelectValueController.setValue('');
+    }
+  }
+  /**
+   * Synchronizes the controller's selectedItem with the current value and the source data.
+   */
+  setSelectedItem() {
+    var _a;
+    if (this.selectType === 'multiple') {
+      const updatedItem = this.value.map((itemValue) => this.sourceController.getItem(itemValue));
+      const originalItem = this.selectedItem
+        ? this.selectedItem.filter((item) => this.value.includes(item === null || item === void 0 ? void 0 : item.id))
+        : [];
+      this.selectedItem = this.updateSelectedItemUnderMultiple(originalItem, updatedItem);
+    }
+    else {
+      const updatedItem = this.sourceController.getItem(this.value);
+      if (!this.value || this.value !== ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id)) {
+        this.selectedItem = null;
+      }
+      if (updatedItem) {
+        this.selectedItem = updatedItem;
+      }
+    }
+  }
+  /**
+   * Updates the selected items array under multiple selection mode.
+   *
+   * @param {SelectSourceItem[]} originalItem - the original selected items array.
+   * @param {SelectSourceItem[]} updatedItem - the updated selected items array.
+   * @returns {SelectSourceItem[]} The updated selected items array.
+   */
+  updateSelectedItemUnderMultiple(originalItem, updatedItem) {
+    const map = new Map(originalItem.map((obj) => [obj.id, obj]));
+    // Iterate through array2 and update the Map
+    updatedItem.forEach((item) => {
+      // If id exists, it replaces the old object; if not, it adds it
+      map.set(item === null || item === void 0 ? void 0 : item.id, item);
+    });
+    // Convert the Map values back into a standard array
+    return Array.from(map.values());
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaInputSelectItemController.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectItemController.prototype, "selectType", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaInputSelectItemController.prototype, "selectedItem", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectItemController.prototype, "sourceController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectItemController.prototype, "vegaInputSelectValueController", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaInputSelectItemController.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('watchSelectType')
+], VegaInputSelectItemController.prototype, "watchSelectType", null);

package/dist/collection/components/vega-input-select/slimmers/controllers/vega-input-select-source-controller.js

@@ -19,6 +19,7 @@ export class VegaInputSelectSourceController extends VegaSlimmer {
     this.handleSourceChange = () => {
       this.host.dataset.source = JSON.stringify(this.source);
       this.source = isArrayOfType(this.source, isSelectSourceItemType) ? this.source : [];
+      this.vegaInputSelectItemController.setSelectedItem();
     };
   }
   /**
@@ -47,6 +48,9 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaInputSelectSourceController.prototype, "source", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectSourceController.prototype, "vegaInputSelectItemController", void 0);
 __decorate([
   MapToComponentMethod('watchSource')
 ], VegaInputSelectSourceController.prototype, "handleSourceChange", void 0);

package/dist/collection/components/vega-input-select/slimmers/controllers/vega-input-select-value-controller.js

@@ -71,6 +71,7 @@ export class VegaInputSelectValueController extends VegaSlimmer {
   setValue(value) {
     if (this.valueGuard(value)) {
       this.value = value;
+      this.vegaInputSelectItemController.setSelectedItem();
     }
   }
   /**
@@ -106,6 +107,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputSelectValueController.prototype, "sourceController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectValueController.prototype, "vegaInputSelectItemController", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputSelectValueController.prototype, "vegaDropdownProps", void 0);

package/dist/collection/components/vega-input-select/slimmers/renderers/vega-input-select-dropdown-renderer.js

@@ -10,6 +10,7 @@ import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibi
 import chevronUp from '../../../../global/icons/chevron-up';
 import chevronDown from '../../../../global/icons/chevron-down';
 import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
+import { sanitizeHtmlLabel } from '../../../../utils/sanitize';
 /** The `VegaInputSelectDropdownRenderer` class is a TypeScript React component that renders a dropdown select input with various customization options. */
 export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
   constructor() {
@@ -27,7 +28,17 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
       return (h("div", { class: "vega-input-select-toggle-icon", part: "toggle-icon-container" },
         h("vega-icon", { part: "toggle-icon", icon: VegaInternalIconManager.getIconKey(this.isDropdownShow ? 'chevron-up' : 'chevron-down') })));
     };
+    /* istanbul ignore next */
     this.renderSelectContainer = () => {
+      var _a, _b;
+      if (typeof this.selectedLabel !== 'function') {
+        if (!((_a = this.selectedLabel) === null || _a === void 0 ? void 0 : _a.single)) {
+          this.selectedLabel.single = (_value, selectedItem) => selectedItem.displayName;
+        }
+        if (!((_b = this.selectedLabel) === null || _b === void 0 ? void 0 : _b.multiple)) {
+          this.selectedLabel.multiple = (value) => `${value.length} Selected`;
+        }
+      }
       return (h("div", { class: "vega-input-select-select-container" },
         h("div", { class: "vega-input-select-selected-box" }, this.selectType === 'multiple'
           ? this.renderMultipleSelected()
@@ -35,7 +46,10 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
     };
     this.renderMultipleSelected = () => {
       if (this.value.length > 0) {
-        const selectedLabelStr = this.selectedLabel(this.value);
+        const selectedLabelStr = typeof this.selectedLabel == 'function'
+          ? this.selectedLabel(this.value)
+          : // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+            this.selectedLabel.multiple(this.value, this.selectedItem);
         return (h("span", { class: "vega-input-select-selected" },
           h("vega-text", { overflow: "ellipsis", tooltip: { placement: 'bottom' }, key: selectedLabelStr }, selectedLabelStr)));
       }
@@ -44,15 +58,26 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
       }
     };
     this.renderSingleSelected = () => {
-      const item = this.sourceController.getItem(this.value);
-      if (item || (this.vegaDropdownProps.preserveValueIfNotInSource && this.value)) {
-        return (h("span", { class: "vega-input-select-selected", part: "selected-box" },
-          h("vega-text", { overflow: "ellipsis", tooltip: { placement: 'bottom' }, key: this.vegaDropdownProps.preserveValueIfNotInSource
-              ? this.value
-              : // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-                item.displayName }, 
-          // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-          this.vegaDropdownProps.preserveValueIfNotInSource ? this.value : item.displayName)));
+      var _a, _b;
+      const selectedSourceItemItem = this.selectedItem;
+      if (selectedSourceItemItem === null || selectedSourceItemItem === void 0 ? void 0 : selectedSourceItemItem.displayName) {
+        selectedSourceItemItem.displayName = sanitizeHtmlLabel(selectedSourceItemItem.displayName);
+      }
+      const selectedLabelStr = (_b = (_a = this.selectedLabel).single) === null || _b === void 0 ? void 0 : _b.call(_a, this.value, selectedSourceItemItem);
+      if ((typeof this.selectedLabel == 'function' && this.selectedItem) ||
+        (typeof this.selectedLabel != 'function' && selectedLabelStr)) {
+        if (typeof this.selectedLabel == 'function') {
+          return (h("span", { class: "vega-input-select-selected", part: "selected-box" },
+            h("vega-text", { overflow: "ellipsis", tooltip: { placement: 'bottom' }, key: 
+              // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+              selectedSourceItemItem.displayName }, 
+            // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+            selectedSourceItemItem.displayName)));
+        }
+        else {
+          return (h("span", { class: "vega-input-select-selected", part: "selected-box" },
+            h("vega-text", { overflow: "ellipsis", tooltip: { placement: 'bottom' }, key: selectedLabelStr }, selectedLabelStr)));
+        }
       }
       else {
         return (h("div", { class: "vega-input-select-placeholder", part: "placeholder" }, this.translationSlimmer.t(this.placeholder)));
@@ -150,15 +175,15 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "vegaInputSelectPrefixIconRenderer", void 0);
-__decorate([
-  MapToComponentField()
-], VegaInputSelectDropdownRenderer.prototype, "sourceController", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "translationSlimmer", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectDropdownRenderer.prototype, "selectedItem", void 0);
 __decorate([
   MapToComponentMethod('watchVegaDropdownProps')
 ], VegaInputSelectDropdownRenderer.prototype, "watchVegaDropdownProps", null);

package/dist/collection/components/vega-input-select/vega-input-select.js

@@ -12,6 +12,7 @@ import { VegaInputSelectRenderer } from './slimmers/renderers/vega-input-select-
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { VegaInputSelectDropdownController } from './slimmers/controllers/vega-input-select-dropdown-controller';
 import { VegaInputSelectValueController } from './slimmers/controllers/vega-input-select-value-controller';
+import { VegaInputSelectItemController } from './slimmers/controllers/vega-input-select-item-controller';
 import { VegaInputSelectDropdownRenderer } from './slimmers/renderers/vega-input-select-dropdown-renderer';
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
@@ -40,6 +41,7 @@ export class VegaInputSelect {
     this.vegaInputSelectValueController = new VegaInputSelectValueController();
     this.vegaInputSelectDropdownRenderer = new VegaInputSelectDropdownRenderer();
     this.vegaInputSelectItemsSlotController = new VegaInputSelectItemsSlotController();
+    this.vegaInputSelectItemController = new VegaInputSelectItemController();
     this.formFieldControllerSlimmer = new FormFieldControllerSlimmer({
       propertyRules: [
         {
@@ -98,9 +100,13 @@ export class VegaInputSelect {
     this.required = false;
     /**
      * Allows customization of the text displayed within the
-     *    select field when multiple items are selected.
+     *    select field when single or multiple items are selected.
      *    The default format for the selected label is
-     *    `${number of selected items} Selected`.
+     *    `${number of selected items} Selected` for multiple mode only.
+     *
+     *	To enable all modes, use the `SelectedLabelTypeForAllModes` type.
+     * 		For single mode, the default format is the `displayName` of the selected item if not set
+     * 		For multiple mode, the default format is `${number of selected items} Selected` if not set
      *
      * @vegaVersion 1.35.0
      */
@@ -187,6 +193,9 @@ export class VegaInputSelect {
      */
     this.size = 'default';
   }
+  watchSelectType() {
+    methodPlaceholder();
+  }
   watchSource() {
     methodPlaceholder();
   }
@@ -313,12 +322,16 @@ export class VegaInputSelect {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "SelectedLabelType",
-        "resolved": "(value: string[]) => string",
+        "original": "SelectedLabelType | SelectedLabelTypeForAllModes",
+        "resolved": "((value: string[]) => string) | ({ single?: (value: string, selectedItem?: SelectSourceItem) => string; multiple?: (value: string[], selectedItem?: SelectSourceItem[]) => string; })",
         "references": {
           "SelectedLabelType": {
             "location": "import",
             "path": "./types"
+          },
+          "SelectedLabelTypeForAllModes": {
+            "location": "import",
+            "path": "./types"
           }
         }
       },
@@ -329,9 +342,9 @@ export class VegaInputSelect {
             "name": "vegaVersion",
             "text": "1.35.0"
           }],
-        "text": "Allows customization of the text displayed within the\n   select field when multiple items are selected.\n   The default format for the selected label is\n   `${number of selected items} Selected`."
+        "text": "Allows customization of the text displayed within the\n   select field when single or multiple items are selected.\n   The default format for the selected label is\n   `${number of selected items} Selected` for multiple mode only.\n\nTo enable all modes, use the `SelectedLabelTypeForAllModes` type.\n\t\tFor single mode, the default format is the `displayName` of the selected item if not set\n\t\tFor multiple mode, the default format is `${number of selected items} Selected` if not set"
       },
-      "defaultValue": "(value: string[]) => `${value.length} Selected`"
+      "defaultValue": "(value: string[]) =>\n\t\t`${value.length} Selected`"
     },
     "selectType": {
       "type": "string",
@@ -566,7 +579,7 @@ export class VegaInputSelect {
       "mutable": false,
       "complexType": {
         "original": "VegaDropdownPropsForSelect",
-        "resolved": "{ size?: ResponsiveType<SizeType>; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; searchable?: boolean; itemDisplayRule?: \"ellipsis\" | \"newline\"; matchContainerHeight?: boolean; caseSensitive?: boolean; useDefaultFilter?: boolean; searchTriggerBy?: VegaDropdownSearchTriggerByType; isScreenPosition?: boolean; resettable?: boolean; preserveValueIfNotInSource?: boolean; }",
+        "resolved": "{ size?: ResponsiveType<SizeType>; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; searchable?: boolean; itemDisplayRule?: \"ellipsis\" | \"newline\"; resettable?: boolean; matchContainerHeight?: boolean; isScreenPosition?: boolean; caseSensitive?: boolean; useDefaultFilter?: boolean; searchTriggerBy?: VegaDropdownSearchTriggerByType; preserveValueIfNotInSource?: boolean; }",
         "references": {
           "VegaDropdownPropsForSelect": {
             "location": "import",
@@ -642,7 +655,8 @@ export class VegaInputSelect {
   static get states() { return {
     "isDropdownShow": {},
     "currentBreakpoint": {},
-    "isLazyLoading": {}
+    "isLazyLoading": {},
+    "selectedItem": {}
   }; }
   static get events() { return [{
       "method": "vegaChange",
@@ -937,6 +951,9 @@ export class VegaInputSelect {
   }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
+      "propName": "selectType",
+      "methodName": "watchSelectType"
+    }, {
       "propName": "source",
       "methodName": "watchSource"
     }, {
@@ -977,6 +994,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputSelect.prototype, "vegaInputSelectItemsSlotController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputSelect.prototype, "vegaInputSelectItemController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputSelect.prototype, "formFieldControllerSlimmer", void 0);

package/dist/collection/components/vega-modal/slimmers/controllers/vega-modal-layout-controller.js

@@ -9,6 +9,7 @@ import ResponsiveFormatFacade from '../../../../helpers/formatter/responsive-map
 import { DefaultModalSize } from '../../../../constants/ui';
 import { getCurrentBreakpoint } from '../../../../utils/breakpoints';
 import { PageResizeObserverSlimmer } from '../../../../helpers/slimmers/page-resize-observer-slimmer';
+import { parseToPixelString } from '../../../../utils/pixel';
 /**
  * Modal layout controller
  */
@@ -90,8 +91,8 @@ export class VegaModalLayoutController extends VegaSlimmer {
    */
   setContentMaxHeight() {
     const maxHeight = ResponsiveFormatFacade.formatCustom(this.contentMaxHeight);
-    if (maxHeight) {
-      this.renderer.getModalContentRef().style.maxHeight = `${maxHeight}px`;
+    if (typeof maxHeight === 'number' || typeof maxHeight === 'string') {
+      this.renderer.getModalContentRef().style.maxHeight = parseToPixelString(maxHeight);
     }
   }
   /*

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

@@ -457,11 +457,11 @@ export class VegaModal {
       "defaultValue": "'size-24'"
     },
     "contentMaxHeight": {
-      "type": "number",
+      "type": "any",
       "mutable": false,
       "complexType": {
-        "original": "ResponsiveType<number>",
-        "resolved": "number | { S?: number; M?: number; L?: number; XL?: number; default?: number; }",
+        "original": "ResponsiveType<number | string>",
+        "resolved": "number | string | { S?: string | number; M?: string | number; L?: string | number; XL?: string | number; default?: string | number; }",
         "references": {
           "ResponsiveType": {
             "location": "import",
@@ -476,7 +476,7 @@ export class VegaModal {
             "name": "vegaVersion",
             "text": "1.4.0"
           }],
-        "text": "Defines the maximum height of the content within\n   the modal element."
+        "text": "Defines the maximum height of the content within\n   the modal element.\n\nIt accepts values in numeric, string and ResponsiveType.\nNumeric values represent maximum height of the content in pixels\n   (e.g., 100 translates to 100px).\nString values allow the use of CSS units like 'vh' or 'calc' expressions.\n   (e.g., '100vh' or 'calc(100vh - 20px)')."
       },
       "attribute": "content-max-height",
       "reflect": false

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);