@heartlandone/vega 2.0.0-temp-test-0.3 → 2.0.0

package/dist/esm/{injectElementAppender-408d92be.js → vega-popover_2.entry.js}

@@ -1,5 +1,25 @@
-import { E as ElementAppender } from './elementAppender-d9abb547.js';
-import { b as isParent, f as findParent } from './ui-608b4032.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c3505689.js';
+import { s as sanitizeVegaComponent } from './component-e4eb3f14.js';
+import { E as ElementAppender } from './elementAppender-4e1e8de0.js';
+import { c as isParent, f as findParent } from './ui-6e5294cb.js';
+import { I as InjectKeyboardManager } from './injectKeyboardManager-8157140d.js';
+import { I as InjectVegaSlimmer } from './global-slimmer-registry-b91c742d.js';
+import { I as InjectVegaGlobalSlimmer } from './inject-vega-global-slimmer-c3f84156.js';
+import { c as createEventEmitSlimmer } from './eventEmitSlimmer-d605ac81.js';
+import { w as VegaPopoverShow, x as VegaPopoverHide } from './internalVegaEventManager-efa77ebb.js';
+import './log-a824be80.js';
+import './ui-535c5fb3.js';
+import './typeGuard-5e282437.js';
+import './breakpoints-900a4c99.js';
+import './typography-03d285b4.js';
+import './responsiveFormatFacade-e91e14ac.js';
+import './number-400b3bf2.js';
+import './zIndexManager-ea603c97.js';
+import './dynamic-slimmer-c8ad78de.js';
+import './vega-slimmer-ce2e45d1.js';
+import './pageResizeObserverSlimmer-b476bb1f.js';
+import './keyboardManager-0a038e77.js';
+import './changeManager-935d420b.js';
 
 /**
  * It creates a proxy for the `ElementAppender` class and attaches it to the component class as a
@@ -203,4 +223,163 @@ class ElementAppenderListener {
 }
 ElementAppenderListener.DELAY_HIDE_TIME = 100;
 
-export { InjectElementAppender as I };
+const vegaPopoverCss = ":host{display:inline-block}";
+
+var __decorate$1 = (undefined && undefined.__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;
+};
+const VegaPopover = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaPopoverShow = createEvent(this, "vegaPopoverShow", 7);
+    this.popoverShow = createEvent(this, "popoverShow", 7);
+    this.vegaPopoverHide = createEvent(this, "vegaPopoverHide", 7);
+    this.popoverHide = createEvent(this, "popoverHide", 7);
+    this.globalSlimmers = {};
+    this.popoverShowEventEmitter = createEventEmitSlimmer(VegaPopover, VegaPopoverShow);
+    this.popoverHideEventEmitter = createEventEmitSlimmer(VegaPopover, VegaPopoverHide);
+    /** popover isPopoverShow */
+    this.isPopoverShow = false;
+    /**
+     * Specifies the placement or position of the popover
+     *    in relation to its parent element.
+     *
+     * If there is insufficient space to display the popover in the
+     *    default position, it will automatically adjust its placement
+     *    based on the following order: `top`, `left`, `bottom`, `right`.
+     */
+    this.placement = 'top';
+    /**
+     * Controls how the popover aligns horizontally and vertically,
+     *    ensuring it is displayed in the desired position.
+     */
+    this.alignment = 'center';
+    /* istanbul ignore next */
+    this.showPopover = () => {
+      var _a;
+      (_a = this.elementAppender) === null || _a === void 0 ? void 0 : _a.show();
+    };
+    /* istanbul ignore next */
+    this.hidePopover = () => {
+      var _a;
+      (_a = this.elementAppender) === null || _a === void 0 ? void 0 : _a.hide();
+    };
+  }
+  async watchIsPopoverShow() {
+    if (this.isPopoverShow) {
+      this.popoverShowEventEmitter.emit();
+    }
+    else {
+      this.popoverHideEventEmitter.emit();
+    }
+  }
+  watchToRefreshPopover() {
+    this.isPopoverShow && this.elementAppender.show();
+  }
+  componentDidRender() {
+    const popoverSlot = this.host.querySelector("[slot='popover']");
+    if (popoverSlot) {
+      this.popoverContentBox.appendChild(popoverSlot);
+    }
+  }
+  /**
+   * Invoke this method to show the popover.
+   */
+  async show() {
+    if (!this.isPopoverShow) {
+      this.showPopover();
+    }
+  }
+  /**
+   * Invoke this method to close the popover.
+   */
+  async hide() {
+    if (this.isPopoverShow) {
+      this.hidePopover();
+    }
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, h("slot", { name: "popover-content" }), this.renderPopover()), this.host);
+  }
+  renderPopover() {
+    return (h("vega-popover-content-box", { ref: (el) => (this.popoverContentBox = el) }));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "isPopoverShow": ["watchIsPopoverShow"],
+    "size": ["watchToRefreshPopover"],
+    "placement": ["watchToRefreshPopover"],
+    "alignment": ["watchToRefreshPopover"]
+  }; }
+};
+__decorate$1([
+  InjectVegaGlobalSlimmer()
+], VegaPopover.prototype, "globalSlimmers", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaPopover.prototype, "popoverShowEventEmitter", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaPopover.prototype, "popoverHideEventEmitter", void 0);
+__decorate$1([
+  InjectElementAppender((host) => ({
+    target: host.host,
+    appendableElement: host.popoverContentBox,
+    positionRelativeTo: host.positionRelativeTo,
+    matchTargetWidth: false,
+    size: host.size,
+    placement: host.placement,
+    alignment: host.alignment,
+  }), () => 'click', 'isPopoverShow')
+], VegaPopover.prototype, "elementAppender", void 0);
+__decorate$1([
+  InjectKeyboardManager((host) => [
+    {
+      keyCode: 'Escape',
+      activeElementInScope: [host.host],
+      callback: host.hidePopover,
+    },
+    {
+      keyCode: 'Tab',
+      activeElementOutScope: [host.host, host.popoverContentBox],
+      callback: host.hidePopover,
+    },
+  ])
+], VegaPopover.prototype, "host", void 0);
+VegaPopover.style = vegaPopoverCss;
+
+const vegaPopoverContentBoxCss = ":host{position:absolute}:host(.vega-force-hidden){display:none !important}.vega-popover-content{border-radius:8px;padding:16px;position:relative;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));box-shadow:var(--v-shadow-popover, 0px 0px 88px 0px rgba(2, 2, 15, 0.01), 0px 0px 32px 0px rgba(2, 2, 15, 0.02), 0px 4px 72px 0px rgba(2, 2, 15, 0.06))}.vega-popover-content .vega-arrow{position:absolute}.vega-popover-content .vega-arrow::after{display:inline-block;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));content:\"\";border-right-width:0px;border-bottom-width:0px;border-radius:4px 1px 0 1px;transform:skewX(18deg);width:18px;height:17.12px;border-right-color:transparent;border-bottom-color:transparent}:host(.vega-placement-left) .vega-arrow{transform:rotate(144deg);right:-9px}:host(.vega-placement-left.vega-alignment-start) .vega-arrow{top:8px}:host(.vega-placement-left.vega-alignment-center) .vega-arrow{top:calc(50% - 14px)}:host(.vega-placement-left.vega-alignment-end) .vega-arrow{bottom:12px}:host(.vega-placement-right) .vega-arrow{transform:rotate(324deg);left:-9px}:host(.vega-placement-right.vega-alignment-start) .vega-arrow{top:12px}:host(.vega-placement-right.vega-alignment-center) .vega-arrow{top:calc(50% - 10px)}:host(.vega-placement-right.vega-alignment-end) .vega-arrow{bottom:8px}:host(.vega-placement-top) .vega-arrow{transform:rotate(234deg);bottom:-10.65px}:host(.vega-placement-top.vega-alignment-start) .vega-arrow{left:24px}:host(.vega-placement-top.vega-alignment-center) .vega-arrow{left:calc(50% - 9px)}:host(.vega-placement-top.vega-alignment-end) .vega-arrow{right:18px}:host(.vega-placement-bottom) .vega-arrow{transform:rotate(54deg);top:-10.65px}:host(.vega-placement-bottom.vega-alignment-start) .vega-arrow{left:18px}:host(.vega-placement-bottom.vega-alignment-center) .vega-arrow{left:calc(50% - 14px)}:host(.vega-placement-bottom.vega-alignment-end) .vega-arrow{right:24px}:host(.vega-placement-top){margin-top:-20px}:host(.vega-placement-bottom){margin-top:20px}:host(.vega-placement-right){margin-left:20px}:host(.vega-placement-left){margin-left:-20px}";
+
+var __decorate = (undefined && undefined.__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;
+};
+const VegaPopoverContentBox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, { class: "vega-popover", role: "tooltip" }, h("div", { class: "vega-popover-content" }, h("slot", { name: "popover" }), h("div", { class: "vega-arrow" })), h("slot", null)), this.el);
+  }
+  get el() { return getElement(this); }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaPopoverContentBox.prototype, "globalSlimmers", void 0);
+VegaPopoverContentBox.style = vegaPopoverContentBoxCss;
+
+export { VegaPopover as vega_popover, VegaPopoverContentBox as vega_popover_content_box };

package/dist/esm/vega-progress-tracker.entry.js

@@ -0,0 +1,179 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c3505689.js';
+import { c as createEventEmitSlimmer, D as DomNodeSubjectObserverFactory } from './eventEmitSlimmer-d605ac81.js';
+import { e as VegaPageUpdate, u as VegaCurrentStepUpdate } from './internalVegaEventManager-efa77ebb.js';
+import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
+import { s as sanitizeVegaComponent } from './component-e4eb3f14.js';
+import { n as normalizeNumberByRanger } from './number-400b3bf2.js';
+import { I as InjectVegaSlimmer } from './global-slimmer-registry-b91c742d.js';
+import { I as InjectVegaGlobalSlimmer } from './inject-vega-global-slimmer-c3f84156.js';
+import './vega-slimmer-ce2e45d1.js';
+import './dynamic-slimmer-c8ad78de.js';
+import './changeManager-935d420b.js';
+import './log-a824be80.js';
+
+const vegaProgressTrackerCss = ":host .vega-progress-tracker__container{display:flex;align-items:center;padding-top:0px;padding-bottom:0px}:host .vega-progress-tracker__slot{width:100%;display:block}:host .vega-progress-step{display:flex;gap:16px}:host(:not(.click-step-disabled)) .vega-progress-step{cursor:pointer}:host(:not(.click-step-disabled)) .vega-progress-step.default:hover .vega-progress-step__icon{background-color:rgba(var(--v-bg-action-quaternary-hover, 239, 239, 239, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.default .vega-progress-step__icon:hover{background-color:rgba(var(--v-bg-action-quaternary-hover, 239, 239, 239, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.default:active .vega-progress-step__icon{background-color:rgba(var(--v-bg-action-quaternary-active, 205, 209, 211, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.inProgress .vega-progress-step__icon:hover{background-color:rgba(var(--v-bg-action-hover, 4, 112, 236, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.inProgress:hover .vega-progress-step__icon{background-color:rgba(var(--v-bg-action-hover, 4, 112, 236, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.inProgress:active .vega-progress-step__icon{background-color:rgba(var(--v-bg-action-active, 29, 65, 195, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.complete:hover .vega-progress-step__icon{border-color:rgba(var(--v-border-color-action-hover, 4, 112, 236, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.complete:hover .vega-progress-step__icon vega-icon{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.complete:active .vega-progress-step__icon{border-color:rgba(var(--v-border-color-action-active, 29, 65, 195, 1))}:host(:not(.click-step-disabled)) .vega-progress-step.complete:active .vega-progress-step__icon vega-icon{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}:host .vega-progress-step:focus-visible{outline-width:0px}:host .vega-progress-step:focus-visible .vega-progress-step-icon-container{border-radius:8px;box-shadow:0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25))}:host .vega-progress-step .vega-progress-step-icon-divider{display:flex;flex-direction:column;align-items:center;gap:0px}:host .vega-progress-step .vega-progress-step-icon-container{padding:8px}:host .vega-progress-step .vega-progress-step__icon{display:block;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:9999px;box-sizing:content-box;height:32px;width:32px;min-width:32px;line-height:32px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-progress-step .vega-progress-step__icon{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__icon{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__icon{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}:host .vega-progress-step .vega-progress-step__icon span{display:block}:host .vega-progress-step .vega-progress-step__icon:not(.disable-responsive){line-height:32px}:host .vega-progress-step .vega-progress-step__divider{width:1px;flex-grow:1;height:100%;background-color:rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1));display:block}:host .vega-progress-step .vega-progress-step__divider.right.complete{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1))}:host .vega-progress-step .vega-progress-step__divider.left{display:none}: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))}:host .vega-progress-step.complete .vega-progress-step__icon{display:flex;justify-content:center;align-items:center;background-color:rgba(var(--v-bg-action-tertiary, 0, 0, 0, 0));box-sizing:border-box;border-width:1px;border-style:solid;border-color:rgba(var(--v-border-color-action, 19, 98, 226, 1))}: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.inProgress .vega-progress-step__icon{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));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{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 .vega-progress-step.inProgress .vega-progress-step__title{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 .vega-progress-step.inProgress .vega-progress-step__title{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 .vega-progress-step.inProgress .vega-progress-step__title{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:22px;letter-spacing:0px}}@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){display:block;overflow-x:auto;padding-top:4px}:host(.horizontal) .vega-progress-tracker__slot{display:flex}:host(.horizontal) .vega-progress-step{flex-direction:column;align-items:center;gap:4px;flex-grow:1;flex-basis:0}:host(.horizontal) .vega-progress-step .vega-progress-step-icon-divider{flex-direction:row;align-items:center;gap:4px;width:100%}:host(.horizontal) .vega-progress-step .vega-progress-step__divider{height:1px;display:block}:host(.horizontal) .vega-progress-step .vega-progress-step__divider.left{display:block}:host(.horizontal) .vega-progress-step .vega-progress-step__divider.right.complete{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1))}:host(.horizontal) .vega-progress-step .vega-progress-step__divider.left.background{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1))}:host(.horizontal) .vega-progress-step .vega-progress-step__title{padding-top:0px;padding-bottom:0px;text-align:center;padding-left:4px;padding-right:4px}:host(.horizontal) .vega-progress-step:first-child .vega-progress-step__divider.left{opacity:0}:host(.horizontal) .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(.horizontal){padding-top:0px}}:host vega-carousel .subTitle{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host vega-carousel .subTitle{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host vega-carousel .subTitle{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host vega-carousel .subTitle{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}}:host .vega-progress-tracker__box{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}";
+
+var __decorate = (undefined && undefined.__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;
+};
+var ProgressStepStatus;
+(function (ProgressStepStatus) {
+  ProgressStepStatus["DEFAULT"] = "default";
+  ProgressStepStatus["IN_PROGRESS"] = "inProgress";
+  ProgressStepStatus["COMPLETE"] = "complete";
+})(ProgressStepStatus || (ProgressStepStatus = {}));
+const VegaProgressTracker = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaCurrentStepUpdate = createEvent(this, "vegaCurrentStepUpdate", 7);
+    this.currentStepUpdate = createEvent(this, "currentStepUpdate", 7);
+    this.globalSlimmers = {};
+    this.currentStepUpdateEventEmitter = createEventEmitSlimmer(VegaProgressTracker, VegaCurrentStepUpdate);
+    /**
+     * Indicates the current step or stage in a
+     *    sequential process or workflow,
+     *    starting from 0.
+     */
+    this.current = 0;
+    /**
+     * Specifies the direction of the Progress Tracker component.
+     *
+     * It can be set to either horizontal or vertical.
+     *    In the horizontal direction, the tracker is divided into
+     *    panes with navigable arrows. In the vertical direction,
+     *    it is displayed as a single pane.
+     */
+    this.direction = 'vertical';
+    /**
+     * Specifies an array of step subtitles for
+     *    the Progress Tracker component.
+     *
+     * Each subtitle corresponds to a step in the
+     *    progression of the workflow or process.
+     */
+    this.steps = [];
+    /**
+     * Specifies an array of completed step titles for
+     *    the Progress Tracker component.
+     *
+     * Each completed step title represents a step that
+     *    has been successfully completed in the
+     *    workflow or process.
+     */
+    this.completedStepArray = [];
+    /**
+     * Enables the ability to click on the steps in
+     *    the Progress Tracker component.
+     */
+    this.canClickStep = true;
+    this.getStepState = (index) => {
+      if (index === this.current) {
+        return ProgressStepStatus.IN_PROGRESS;
+      }
+      else if (this.completedStepArray.includes(this.steps[index])) {
+        return ProgressStepStatus.COMPLETE;
+      }
+      else {
+        return ProgressStepStatus.DEFAULT;
+      }
+    };
+    this.onStepIconClick = async (e) => {
+      const index = Number(e.currentTarget.getAttribute('data-index'));
+      await this.setCurrent(index);
+    };
+    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.completedStepArray.includes(this.steps[index - 1]);
+      return (h("div", { role: !this.canClickStep ? null : 'button', class: `vega-progress-step ${progressStepStatus}`, "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.completedStepArray.includes(subTitle) ? 'complete' : 'default'}` })), h("div", { class: "vega-progress-step__title" }, subTitle)));
+    };
+    this.updateCurrent = (current, min, max) => {
+      this.current = normalizeNumberByRanger(current, min, max);
+    };
+    this.isElementVisible = () => {
+      return this.carouselDom.parentElement.getBoundingClientRect().width > 0;
+    };
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-progress-tracker-e2e-change-current-mobile}
+   */
+  /* istanbul ignore next */
+  async watchCurrentChange(newCurrent) {
+    this.updateCurrent(newCurrent, 0, this.steps.length - 1);
+    this.currentStepUpdateEventEmitter.emit(this.steps[this.current]);
+    if (this.isElementVisible()) {
+      await this.carouselDom.goToPage(this.current + 1);
+    }
+  }
+  watchSteps() {
+    this.updateCurrent(this.current, 0, this.steps.length - 1);
+  }
+  componentDidLoad() {
+    this.updateCurrent(this.current, 0, this.steps.length - 1);
+  }
+  /**
+   * Invoke this method to change the tracker's current step
+   *    to the next step, if available.
+   */
+  async nextStep() {
+    this.updateCurrent(++this.current, null, this.steps.length - 1);
+  }
+  /**
+   * Invoke this method to change the tracker's current step
+   *    to the previous step, if available.
+   */
+  async prevStep() {
+    this.updateCurrent(--this.current, 0, null);
+  }
+  /**
+   * Invoke this method to set the current step of the tracker.
+   */
+  async setCurrent(step) {
+    this.updateCurrent(step, 0, this.steps.length - 1);
+  }
+  /**
+   * Invoke this method to retrieve the tracker's current step.
+   */
+  async getCurrent() {
+    return this.current;
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, { class: `vega-progress-tracker ${this.direction}${!this.canClickStep ? ' click-step-disabled' : ''}` }, 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" }, h("vega-carousel", { showSlider: false, perPage: 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, (input) => this.updateCurrent(input.detail - 1, 0, this.steps.length - 1));
+        return (this.carouselDom = el);
+      } }, this.steps.map((subTitle, index) => (h("div", { class: {
+        subTitle: true,
+        completed: this.getStepState(index) === ProgressStepStatus.COMPLETE,
+        inProgress: this.current === index,
+      } }, subTitle)))))), this.host);
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "current": ["watchCurrentChange"],
+    "steps": ["watchSteps"]
+  }; }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaProgressTracker.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaProgressTracker.prototype, "currentStepUpdateEventEmitter", void 0);
+VegaProgressTracker.style = vegaProgressTrackerCss;
+
+export { VegaProgressTracker as vega_progress_tracker };