@globalpayments/vega 2.71.0 → 2.72.0

package/dist/collection/components/vega-date-picker/vega-date-picker.css

@@ -289,15 +289,4 @@
 
 :host(.disabled) .vega-input-container input {
   color: rgba(var(--v-text-input-disabled, 107, 116, 125, 1));
-}
-
-.litepicker-backdrop {
-  display: none;
-  background-color: var(--litepicker-mobilefriendly-backdrop-color-bg);
-  opacity: 0.3;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
 }

package/dist/collection/components/vega-date-picker/vega-date-picker.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 { Component, Element, Event, Method, Prop, Watch } from '@stencil/core';
+import { Component, Element, Event, Method, Prop, State, Watch } from '@stencil/core';
 import { sanitizeVegaComponent } from '../../utils/component';
 import { DateRequiredRule } from '../../helpers/validator/rules/date-required-rule';
 import { DateRangeRule } from '../../helpers/validator/rules/date-range-rule';
@@ -12,25 +12,22 @@ import { MinAndMaxDateRule } from '../../helpers/validator/rules/min-and-max-dat
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
 import { VegaDatePickerRenderer } from './slimmers/renderers/vega-date-picker-renderer';
-import { VegaDatePickerMobileController } from './slimmers/controllers/vega-date-picker-mobile-controller';
 import { VegaDatePickerSingleInputRenderer } from './slimmers/renderers/vega-date-picker-single-input-renderer';
 import { VegaDatePickerRangeInputRenderer } from './slimmers/renderers/vega-date-picker-range-input-renderer';
-import { VegaDatePickerCalendarController } from './slimmers/controllers/vega-date-picker-calendar-controller';
 import { VegaDatePickerCalendarRenderer } from './slimmers/renderers/vega-date-picker-calendar-renderer';
-import { VegaDatePickerZIndexController } from './slimmers/controllers/vega-date-picker-zindex-controller';
 import { VegaDatePickerValueController } from './slimmers/controllers/vega-date-picker-value-controller';
 import { VegaDatePickerFormatController } from './slimmers/controllers/vega-date-picker-format-controller';
-import { VegaDatePickerElementAppenderController } from './slimmers/controllers/vega-date-picker-element-appender-controller';
 import { VegaDatePickerKeyboardController } from './slimmers/controllers/vega-date-picker-keyboard-controller';
 import { ComponentLoadRequired } from '../../decorators/method-decorators/component-load-required';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
-import { VegaChange, VegaMonthYearChange } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaChange, VegaClear, VegaMonthYearChange, } from '../../helpers/event-manager/event-id/vega-event-id';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaDatePickerRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-date-picker/runtime-metrics-payload-definition';
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
-import { VegaDatePickerMonthYearDropdownRenderer } from './slimmers/renderers/vega-date-picker-calendar-month-year-dropdown-renderer';
-import { VegaDatePickerMonthYearChangeEventController } from './slimmers/controllers/vega-date-picker-month-year-change-event-controller';
+import { DeviceType } from '../../types/ui.type';
+import { getDeviceType } from '../../utils/ui';
+import { VegaDatePickerCalendarOpenStateController } from './slimmers/controllers/vega-date-picker-calendar-open-state-controller';
 /**
  * @vegaVersion 1.3.0
  */
@@ -38,14 +35,11 @@ export class VegaDatePicker {
   constructor() {
     this.globalSlimmers = {};
     this.translationSlimmer = new TranslationSlimmer();
-    this.vegaDatePickerMobileController = new VegaDatePickerMobileController();
-    this.vegaDatePickerCalendarController = new VegaDatePickerCalendarController();
-    this.vegaDatePickerZIndexController = new VegaDatePickerZIndexController();
+    this.calendarOpenStateController = new VegaDatePickerCalendarOpenStateController();
     this.vegaDatePickerValueController = new VegaDatePickerValueController();
     this.vegaDatePickerFormatController = new VegaDatePickerFormatController('single');
     this.startInputFormatController = new VegaDatePickerFormatController('rangeStart');
     this.endInputFormatController = new VegaDatePickerFormatController('rangeEnd');
-    this.vegaDatePickerElementAppenderController = new VegaDatePickerElementAppenderController();
     this.vegaDatePickerKeyboardController = new VegaDatePickerKeyboardController();
     this.vegaDatePickerRenderer = new VegaDatePickerRenderer();
     this.vegaDatePickerSingleInputRenderer = new VegaDatePickerSingleInputRenderer();
@@ -85,12 +79,12 @@ export class VegaDatePicker {
         ].filter(Boolean);
       },
     });
-    this.monthYearChangeEventEmitter = createEventEmitSlimmer(VegaDatePicker, VegaMonthYearChange);
     this.changeEventEmitter = createEventEmitSlimmer(VegaDatePicker, VegaChange);
-    this.inputEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.vegaDatePickerRenderer.getDatePickerContainer());
+    this.monthYearChangeEventEmitter = createEventEmitSlimmer(VegaDatePicker, VegaMonthYearChange);
+    this.inputEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange, VegaClear, VegaMonthYearChange], () => this.vegaDatePickerCalendarRenderer.getCalendarRef());
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaDatePickerRuntimeMetricsPayloadDefinition);
-    this.monthYearDropdownRenderer = new VegaDatePickerMonthYearDropdownRenderer();
-    this.vegaDatePickerMonthYearChangeEventController = new VegaDatePickerMonthYearChangeEventController();
+    this.isMobileDevice = getDeviceType() === DeviceType.MOBILE;
+    this.isCalendarShow = false;
     /**
      * Specifies the selection mode of the date picker.
      *
@@ -211,6 +205,9 @@ export class VegaDatePicker {
      */
     this.isDateDisabled = () => false;
   }
+  watchIsCalendarShow() {
+    methodPlaceholder();
+  }
   /*
    * The below method is e2e-test covered in
    * @see{module:vega-date-picker-mode-change}
@@ -262,9 +259,6 @@ export class VegaDatePicker {
   watchDisabled() {
     methodPlaceholder();
   }
-  watchIsDateDisabled() {
-    methodPlaceholder();
-  }
   /**
    * Invoke this method to close the calendar dropdown
    *    associated with the date picker.
@@ -765,6 +759,10 @@ export class VegaDatePicker {
       "defaultValue": "() => false"
     }
   }; }
+  static get states() { return {
+    "isMobileDevice": {},
+    "isCalendarShow": {}
+  }; }
   static get events() { return [{
       "method": "vegaChange",
       "name": "vegaChange",
@@ -902,6 +900,9 @@ export class VegaDatePicker {
   }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
+      "propName": "isCalendarShow",
+      "methodName": "watchIsCalendarShow"
+    }, {
       "propName": "mode",
       "methodName": "watchMode"
     }, {
@@ -928,9 +929,6 @@ export class VegaDatePicker {
     }, {
       "propName": "disabled",
       "methodName": "watchDisabled"
-    }, {
-      "propName": "isDateDisabled",
-      "methodName": "watchIsDateDisabled"
     }]; }
 }
 __decorate([
@@ -941,13 +939,7 @@ __decorate([
 ], VegaDatePicker.prototype, "translationSlimmer", void 0);
 __decorate([
   InjectVegaSlimmer()
-], VegaDatePicker.prototype, "vegaDatePickerMobileController", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaDatePicker.prototype, "vegaDatePickerCalendarController", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaDatePicker.prototype, "vegaDatePickerZIndexController", void 0);
+], VegaDatePicker.prototype, "calendarOpenStateController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaDatePickerValueController", void 0);
@@ -960,9 +952,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "endInputFormatController", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaDatePicker.prototype, "vegaDatePickerElementAppenderController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaDatePickerKeyboardController", void 0);
@@ -983,22 +972,16 @@ __decorate([
 ], VegaDatePicker.prototype, "formFieldController", void 0);
 __decorate([
   InjectVegaSlimmer()
-], VegaDatePicker.prototype, "monthYearChangeEventEmitter", void 0);
+], VegaDatePicker.prototype, "changeEventEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
-], VegaDatePicker.prototype, "changeEventEmitter", void 0);
+], VegaDatePicker.prototype, "monthYearChangeEventEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "inputEventPrevent", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaDatePicker.prototype, "monthYearDropdownRenderer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaDatePicker.prototype, "vegaDatePickerMonthYearChangeEventController", void 0);
 __decorate([
   ComponentLoadRequired()
 ], VegaDatePicker.prototype, "watchValue", null);

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-appender-controller.js

@@ -4,11 +4,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 } from 'vega-slimmer/core';
+import { MapToComponentField, MapToComponentMethod, methodPlaceholder } from 'vega-slimmer/core';
 import { ElementAppenderSlimmer } from '../../../../helpers/slimmers/element-appender/element-appender-slimmer';
-import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
-import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
-import { VegaInternalDropdownUpdateTarget } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 /**
  * The `VegaDropdownAppenderController` class is responsible for managing the visibility and
  * behavior of a dropdown component.
@@ -25,13 +22,13 @@ export class VegaDropdownAppenderController extends ElementAppenderSlimmer {
    * Component lifecycle - [componentDidLoad]{@link VegaPopover.connectedCallback}
    */
   connectedCallback() {
-    this.registerRemoteMethod();
+    methodPlaceholder();
   }
   /**
    * Component lifecycle - [componentDidLoad]{@link VegaPopover.disconnectedCallback}
    */
   disconnectedCallback() {
-    remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalDropdownUpdateTarget));
+    methodPlaceholder();
   }
   /**
    * The function `watchIsDropdownShow` checks if the dropdown is shown and performs certain actions
@@ -85,15 +82,6 @@ export class VegaDropdownAppenderController extends ElementAppenderSlimmer {
       isScreenPosition: this.isScreenPosition,
     };
   }
-  /**
-   * Register a remote method to update the target element of the dropdown.
-   */
-  registerRemoteMethod() {
-    remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalDropdownUpdateTarget), (target) => {
-      this.target = target;
-      super.updateShowConfigFactory(this.generateShowConfigFactory.bind(this));
-    });
-  }
 }
 __decorate([
   MapToComponentField()

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

@@ -566,7 +566,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\"; matchContainerHeight?: boolean; isScreenPosition?: boolean; caseSensitive?: boolean; useDefaultFilter?: boolean; searchTriggerBy?: VegaDropdownSearchTriggerByType; resettable?: boolean; preserveValueIfNotInSource?: boolean; }",
         "references": {
           "VegaDropdownPropsForSelect": {
             "location": "import",

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

@@ -0,0 +1,154 @@
+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
+     * @param {number} [min] - min limit
+     * @param {number} [max] - max limit
+     */
+    this.updateCurrent = (current, min, max) => {
+      this.current = normalizeNumberByRanger(current, min, max);
+    };
+  }
+  /** connectedCallback */
+  connectedCallback() {
+    this.initStepClickObserver();
+  }
+  /** disconnectedCallback */
+  disconnectedCallback() {
+    this.removeStepClickObserver();
+  }
+  /** componentDidLoad */
+  componentDidLoad() {
+    this.updateCurrent(this.current, 0, this.steps.length - 1);
+  }
+  /** componentDidRender */
+  async componentDidRender() {
+    await this.goToPageTaskQueue.runTask();
+  }
+  /**
+   * watch current change
+   */
+  async watchCurrentChange() {
+    this.updateCurrent(this.current, 0, this.steps.length - 1);
+    this.currentStepUpdateEventEmitter.emit(this.steps[this.current]);
+    await this.renderer.gotoCarouselPage();
+  }
+  /** watch steps change */
+  watchSteps() {
+    this.updateCurrent(this.current, 0, this.steps.length - 1);
+  }
+  /** watch nextStep method call*/
+  nextStep() {
+    this.updateCurrent(++this.current, null, this.steps.length - 1);
+  }
+  /** watch prevStep method call*/
+  prevStep() {
+    this.updateCurrent(--this.current, 0, null);
+  }
+  /**
+   * watch setCurrent method call
+   *
+   * @param {number} step - step index to set current
+   */
+  setCurrent(step) {
+    this.updateCurrent(step, 0, this.steps.length - 1);
+  }
+  /**
+   * While direction changed from others direction to 'horizontal-compact',
+   *   we need to goto the current step page in carousel.
+   */
+  async watchDirection() {
+    await this.goToPageTaskQueue.enqueue({
+      /* eslint-disable jsdoc/require-jsdoc */
+      run: async () => {
+        return await this.renderer.gotoCarouselPage();
+      },
+    }, false);
+  }
+  /**
+   * Initialize step click observer
+   */
+  initStepClickObserver() {
+    this.stepClickObserver = new Observer(this.canAcceptStepClickEvent.bind(this), this.updateCurrent.bind(this));
+    changeManager.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalProgressTrackerStepClick), this.stepClickObserver);
+  }
+  /**
+   * Remove step click observer
+   */
+  removeStepClickObserver() {
+    changeManager.unregister(domNodeSubjectFactory.getSubject(this.host, VegaInternalProgressTrackerStepClick), this.stepClickObserver);
+  }
+  /**
+   * Check if can accept step click event
+   *
+   * @returns {boolean} - true if can accept, false otherwise.
+   */
+  canAcceptStepClickEvent() {
+    return true;
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaProgressTrackerCurrentStepController.prototype, "steps", 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/renderers/vega-progress-tracker-renderer.js

@@ -0,0 +1,101 @@
+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';
+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) => {
+      return (h("div", { class: "vega-progress-step-icon-container" },
+        h("div", { class: "vega-progress-step__icon" }, progressStepStatus == ProgressStepStatus.COMPLETE ? (h("vega-icon", { icon: "checkmark-rounded", size: "size-16" })) : (h("span", null, index + 1)))));
+    };
+    this.renderSteps = (subTitle, index) => {
+      const progressStepStatus = this.getStepState(index);
+      const prevStepCompleteStatus = this.deprecatedPropertySlimmer
+        .getValue()
+        .includes(this.steps[index - 1]);
+      return (h("div", { role: !this.canClickStep ? null : 'button', class: `vega-progress-step ${progressStepStatus} ${index === this.current ? 'current' : ''}`, "data-index": index, tabIndex: !this.canClickStep ? null : 0, onClick: !this.canClickStep ? null : this.onStepIconClick, onKeyDown: !this.canClickStep ? null : createEnterKeyHandlerToTriggerClick(), "aria-label": subTitle },
+        h("div", { class: "vega-progress-step-icon-divider" },
+          h("div", { class: `vega-progress-step__divider left ${prevStepCompleteStatus ? 'background' : ''}` }),
+          this.renderStepIcon(index, progressStepStatus),
+          h("div", { class: `vega-progress-step__divider right ${this.deprecatedPropertySlimmer.getValue().includes(subTitle)
+              ? 'complete'
+              : 'default'}` })),
+        h("div", { class: "vega-progress-step__title" }, subTitle)));
+    };
+    this.getStepState = (index) => {
+      if (this.deprecatedPropertySlimmer.getValue().includes(this.steps[index])) {
+        return ProgressStepStatus.COMPLETE;
+      }
+      else if (index === this.current) {
+        return ProgressStepStatus.IN_PROGRESS;
+      }
+      else {
+        return ProgressStepStatus.DEFAULT;
+      }
+    };
+    this.onStepIconClick = (e) => {
+      const index = Number(e.currentTarget.getAttribute('data-index'));
+      changeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalProgressTrackerStepClick), index);
+    };
+  }
+  async gotoCarouselPage() {
+    if (this.carouselContainerRef.getBoundingClientRect().width > 0) {
+      await this.carouselRef.goToPage(this.current + 1);
+    }
+  }
+  render() {
+    return (h(Fragment, null,
+      h("div", { class: "vega-progress-tracker__container" },
+        h("div", { class: "vega-progress-tracker__slot" }, this.steps.map((subTitle, index) => this.renderSteps(subTitle, index)))),
+      h("div", { class: "vega-progress-tracker__box", ref: (ref) => (this.carouselContainerRef = ref) },
+        h("vega-carousel", { showSlider: false, itemsPerPage: 1, canSwipe: this.canClickStep, ref: (el) => {
+            /**
+             * The below method is e2e-test covered in
+             * @see{module:vega-progress-tracker-with-touch-event-mobile}
+             */
+            /* istanbul ignore next */
+            DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaPageUpdate, async (input) => await this.host.setCurrent(input.detail - 1));
+            return (this.carouselRef = el);
+          } }, this.steps.map((subTitle, index) => (h("div", { class: {
+            subTitle: true,
+            completed: this.getStepState(index) === ProgressStepStatus.COMPLETE,
+            inProgress: this.current === index,
+          } }, subTitle)))))));
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaProgressTrackerRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaProgressTrackerRenderer.prototype, "steps", 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);

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

@@ -255,74 +255,76 @@
   }
 }
 
-@media screen and (min-width: 320px) and (max-width: 767px) {
-  :host {
-    flex: 1 1 100%;
-  }
-}
 /* vertical css in mobile */
-@media screen and (min-width: 320px) and (max-width: 767px) {
-  :host .vega-progress-tracker__container {
-    padding-top: 16px;
-    padding-bottom: 16px;
-  }
-  :host .vega-progress-tracker__slot {
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0px;
-  }
-  :host .vega-progress-step {
-    display: flex;
-    flex-grow: 1;
-    flex-basis: 0;
-  }
-  :host .vega-progress-step .vega-progress-step-icon-divider {
-    display: flex;
-    flex-direction: row;
-    gap: 4px;
-    width: 100%;
-  }
-  :host .vega-progress-step .vega-progress-step__icon {
-    height: 16px;
-    width: 16px;
-    min-width: 16px;
-  }
-  :host .vega-progress-step .vega-progress-step__icon {
-    line-height: 16px;
-  }
-  :host .vega-progress-step .vega-progress-step__icon vega-icon {
-    height: 8px;
-    width: 8px;
-  }
-  :host .vega-progress-step .vega-progress-step__icon span {
-    display: none;
-  }
-  :host .vega-progress-step .vega-progress-step__divider {
-    height: 1px;
-    flex-grow: 1;
-  }
-  :host .vega-progress-step .vega-progress-step__divider.left {
-    display: block;
-  }
-  :host .vega-progress-step .vega-progress-step__divider.left.background {
-    background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
-  }
-  :host .vega-progress-step .vega-progress-step__divider.right {
-    display: block;
-  }
-  :host .vega-progress-step .vega-progress-step__title {
-    display: none;
-  }
-  :host .vega-progress-step:first-child .vega-progress-step__divider.left {
-    opacity: 0;
-  }
-  :host .vega-progress-step:last-child .vega-progress-step__divider.right {
-    display: block;
-    opacity: 0;
-  }
+:host(.horizontal-compact) {
+  flex: 1 1 100%;
+  padding-top: 0px;
+}
+:host(.horizontal-compact) .vega-progress-tracker__container {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+:host(.horizontal-compact) .vega-progress-tracker__slot {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0px;
+}
+:host(.horizontal-compact) .vega-progress-step {
+  display: flex;
+  flex-grow: 1;
+  flex-basis: 0;
+}
+:host(.horizontal-compact) .vega-progress-step .vega-progress-step-icon-divider {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  width: 100%;
+}
+:host(.horizontal-compact) .vega-progress-step .vega-progress-step__icon {
+  height: 16px;
+  width: 16px;
+  min-width: 16px;
+}
+:host(.horizontal-compact) .vega-progress-step .vega-progress-step__icon {
+  line-height: 16px;
+}
+:host(.horizontal-compact) .vega-progress-step .vega-progress-step__icon vega-icon {
+  height: 8px;
+  width: 8px;
+}
+:host(.horizontal-compact) .vega-progress-step .vega-progress-step__icon span {
+  display: none;
+}
+:host(.horizontal-compact) .vega-progress-step .vega-progress-step__divider {
+  height: 1px;
+  flex-grow: 1;
+}
+:host(.horizontal-compact) .vega-progress-step .vega-progress-step__divider.left {
+  display: block;
+}
+:host(.horizontal-compact) .vega-progress-step .vega-progress-step__divider.left.background {
+  background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
+}
+:host(.horizontal-compact) .vega-progress-step .vega-progress-step__divider.right {
+  display: block;
+}
+:host(.horizontal-compact) .vega-progress-step .vega-progress-step__title {
+  display: none;
+}
+:host(.horizontal-compact) .vega-progress-step:first-child .vega-progress-step__divider.left {
+  opacity: 0;
+}
+:host(.horizontal-compact) .vega-progress-step:last-child .vega-progress-step__divider.right {
+  display: block;
+  opacity: 0;
 }
+
+:host(:not(.horizontal-compact)) .vega-progress-tracker__box {
+  display: none;
+}
+
 /* horizontal css */
 :host(.horizontal) {
   display: block;
@@ -373,12 +375,6 @@
   opacity: 0;
 }
 
-/* horizontal css in mobile */
-@media screen and (min-width: 320px) and (max-width: 767px) {
-  :host(.horizontal) {
-    padding-top: 0px;
-  }
-}
 /* common mobile css */
 :host vega-carousel .subTitle {
   font-family: "Inter", sans-serif;
@@ -420,11 +416,6 @@
   display: flex;
   align-items: center;
 }
-@media (min-width: 768px) {
-  :host .vega-progress-tracker__box {
-    display: none;
-  }
-}
 :host .vega-progress-tracker__box vega-carousel {
   width: 100%;
   text-align: center;