@globalpayments/vega 2.69.1 → 2.73.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));
+}

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

@@ -0,0 +1,84 @@
+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 { Component, Host, h, Element, Prop, State } from '@stencil/core';
+import { sanitizeVegaComponent } from '../../../utils/component';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
+import { VegaProgressTrackerStepStateController } from './slimmers/controllers/vega-progress-tracker-step-state-controller';
+import { ProgressStepStatus } from '../slimmers/controllers/dto/internal-progress-tracker-step';
+/**
+ * @vegaVersion 2.73.0
+ */
+export class VegaProgressTrackerStep {
+  constructor() {
+    this.globalSlimmers = {};
+    this.stateController = new VegaProgressTrackerStepStateController();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.progressStatus = ProgressStepStatus.DEFAULT;
+    this.isCurrent = false;
+    /**
+     * The unique key for the step.
+     *
+     * @vegaVersion 2.73.0
+     */
+    this.stepKey = '';
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null,
+      h("div", { class: {
+          'title-container': true,
+          [this.progressStatus]: true,
+          'current': this.isCurrent,
+        } },
+        h("slot", null))), this.host);
+  }
+  static get is() { return "vega-progress-tracker-step"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-progress-tracker-step.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-progress-tracker-step.css"]
+  }; }
+  static get properties() { return {
+    "stepKey": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.73.0"
+          }],
+        "text": "The unique key for the step."
+      },
+      "attribute": "step-key",
+      "reflect": true,
+      "defaultValue": "''"
+    }
+  }; }
+  static get states() { return {
+    "progressStatus": {},
+    "isCurrent": {}
+  }; }
+  static get elementRef() { return "host"; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaProgressTrackerStep.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaProgressTrackerStep.prototype, "stateController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaProgressTrackerStep.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

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

@@ -147,44 +147,6 @@
 :host .vega-progress-step:last-child .vega-progress-step__divider.right {
   display: none;
 }
-:host .vega-progress-step .vega-progress-step__title {
-  font-family: "Inter", sans-serif;
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 22px;
-  letter-spacing: 0px;
-  padding-top: 12px;
-  color: rgba(var(--v-text-secondary, 107, 116, 125, 1));
-  display: block;
-  padding-bottom: 36px;
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  :host .vega-progress-step .vega-progress-step__title {
-    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 .vega-progress-step .vega-progress-step__title {
-    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 .vega-progress-step .vega-progress-step__title {
-    font-family: "Inter", sans-serif;
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 22px;
-    letter-spacing: 0px;
-  }
-}
 :host .vega-progress-step.default .vega-progress-step__icon {
   color: rgba(var(--v-text-primary, 32, 54, 69, 1));
   background-color: rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1));
@@ -202,9 +164,6 @@
 :host .vega-progress-step.complete .vega-progress-step__icon vega-icon {
   color: rgba(var(--v-text-link, 19, 98, 226, 1));
 }
-:host .vega-progress-step.complete .vega-progress-step__title {
-  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
-}
 :host .vega-progress-step.complete.current .vega-progress-step__icon vega-icon {
   color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
 }
@@ -215,114 +174,82 @@
   color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
   box-shadow: 0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25));
 }
-:host .vega-progress-step.inProgress .vega-progress-step__title,
-:host .vega-progress-step.current .vega-progress-step__title {
-  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));
+
+/* vertical css in mobile */
+:host(.horizontal-compact) {
+  flex: 1 1 100%;
+  padding-top: 0px;
 }
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  :host .vega-progress-step.inProgress .vega-progress-step__title,
-  :host .vega-progress-step.current .vega-progress-step__title {
-    font-family: "Inter", sans-serif;
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 22px;
-    letter-spacing: 0px;
-  }
+:host(.horizontal-compact) .vega-progress-tracker__container {
+  padding-top: 16px;
+  padding-bottom: 16px;
 }
-@media screen and (min-width: 1024px) and (max-width: 1439px) {
-  :host .vega-progress-step.inProgress .vega-progress-step__title,
-  :host .vega-progress-step.current .vega-progress-step__title {
-    font-family: "Inter", sans-serif;
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 22px;
-    letter-spacing: 0px;
-  }
+:host(.horizontal-compact) .vega-progress-tracker__slot {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0px;
 }
-@media screen and (min-width: 1440px) and (max-width: 9999px) {
-  :host .vega-progress-step.inProgress .vega-progress-step__title,
-  :host .vega-progress-step.current .vega-progress-step__title {
-    font-family: "Inter", sans-serif;
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 22px;
-    letter-spacing: 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;
 }
 
-@media screen and (min-width: 320px) and (max-width: 767px) {
-  :host {
-    flex: 1 1 100%;
-  }
+:host(:not(.horizontal-compact)) .vega-progress-tracker__box {
+  display: none;
 }
-/* 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(.vertical) .vega-progress-step__title {
+  padding-top: 12px;
+  padding-bottom: 36px;
 }
+
 /* horizontal css */
 :host(.horizontal) {
   display: block;
@@ -373,12 +300,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 +341,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;