@heartlandone/vega 2.34.1 → 2.35.0-RTE-preview

package/dist/cjs/vega-page-notification_2.cjs.entry.js

@@ -2,13 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const globalSlimmerRegistry = require('./global-slimmer-registry-dd2691b8.js');
+const index = require('./index-09acd3c9.js');
 const accessibility = require('./accessibility-bfa227f6.js');
-const component = require('./component-63af66ea.js');
-const ui = require('./ui-b5906704.js');
-const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-019d3c00.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-093462f1.js');
-require('./change-manager-bda1d107.js');
+const component = require('./component-73a88c4e.js');
+const ui = require('./ui-5fd9b267.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-5f0eae19.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-3ec114b8.js');
+require('./change-manager-a297e4d2.js');
 
 const vegaPageNotificationCss = ":host{display:inline-block;box-sizing:border-box;border-radius:12px;max-width:480px;box-shadow:0 4px 8px rgba(2, 2, 15, 0.1), 0 12px 20px rgba(2, 2, 15, 0.15);animation:fade-in-right 300ms ease-in-out}:host(.mobile){width:100%;max-width:100%;animation:fade-in-up 300ms ease-in-out}:host(.vega-page-notification-fade-out){opacity:0;animation:fade-out 300ms ease-in-out}:host vega-icon{color:rgba(var(--v-text-page-notification-content, 32, 54, 69, 1))}:host .vega-page-notification-prefix{display:flex}:host(.mobile) .vega-page-notification-prefix{padding-top:4px}:host .vega-page-notification-content{flex:1 1 0%;overflow:auto}:host .vega-page-notification-close-btn{cursor:pointer;display:inline-flex;margin-top:4px}:host(.mobile) .vega-page-notification-close-btn{padding:2px}:host .vega-page-notification-actions-container{display:flex;align-items:flex-end;flex-wrap:wrap;gap:16px;justify-content:flex-end;margin-top:24px}:host(.mobile) .vega-page-notification-actions-container{margin-top:16px}:host .vega-page-notification-title{color:rgba(var(--v-text-page-notification-content, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:28px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-page-notification-title{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:28px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-page-notification-title{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:28px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-page-notification-title{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:28px;letter-spacing:0px}}:host(.mobile) .vega-page-notification-title{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px;overflow-wrap:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.mobile) .vega-page-notification-title{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(.mobile) .vega-page-notification-title{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(.mobile) .vega-page-notification-title{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}}:host .vega-page-notification-message{color:rgba(var(--v-text-page-notification-content, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:18px;font-weight:500;line-height:28px;letter-spacing:0px;overflow-wrap:break-word;margin-top:2px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-page-notification-message{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-page-notification-message{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-page-notification-message{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}:host(.mobile) .vega-page-notification-message{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.mobile) .vega-page-notification-message{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.mobile) .vega-page-notification-message{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.mobile) .vega-page-notification-message{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .vega-page-notification-actions-container vega-button::part(button):hover,:host .vega-page-notification-actions-container vega-button::part(button){font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:24px;letter-spacing:0px;background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0));color:rgba(var(--v-text-page-notification-content, 32, 54, 69, 1));border:2px solid rgba(var(--v-text-page-notification-content, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-page-notification-actions-container vega-button::part(button):hover,:host .vega-page-notification-actions-container vega-button::part(button){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-page-notification-actions-container vega-button::part(button):hover,:host .vega-page-notification-actions-container vega-button::part(button){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-page-notification-actions-container vega-button::part(button):hover,:host .vega-page-notification-actions-container vega-button::part(button){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.success){background-color:rgba(var(--v-bg-status-success, 160, 233, 167, 1))}:host(.warning){background-color:rgba(var(--v-bg-status-warning, 255, 220, 131, 1))}:host(.error){background-color:rgba(var(--v-bg-status-error, 255, 110, 139, 1))}:host(.info){background-color:rgba(var(--v-bg-status-info, 205, 209, 211, 1))}.vega-page-notification-list{display:flex;flex-direction:column;align-items:flex-end;position:fixed}.vega-page-notification-list-topRight{top:24px;right:24px}.vega-page-notification-list-bottom{left:0px;right:0px;padding-left:16px;padding-right:16px;align-items:center;bottom:0px}@keyframes fade-in-right{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:none}}@keyframes fade-in-up{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}@keyframes fade-out{from{opacity:1}to{opacity:0}}";
 
@@ -30,7 +32,7 @@ const typeIconMap = {
 };
 const VegaPageNotification = class {
   constructor(hostRef) {
-    globalSlimmerRegistry.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     this.globalSlimmers = {};
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
     this.isMobileDevice = ui.getDeviceType() === ui.DeviceType.MOBILE;
@@ -90,10 +92,10 @@ const VegaPageNotification = class {
      */
     this.actionButtons = [];
     this.renderPrefixIcon = () => {
-      return (globalSlimmerRegistry.h("div", { class: "vega-page-notification-prefix" }, globalSlimmerRegistry.h("vega-icon", { icon: typeIconMap[this.type], size: this.isMobileDevice ? 'size-16' : 'size-24' })));
+      return (index.h("div", { class: "vega-page-notification-prefix" }, index.h("vega-icon", { icon: typeIconMap[this.type], size: this.isMobileDevice ? 'size-16' : 'size-24' })));
     };
     this.renderContent = () => {
-      return (globalSlimmerRegistry.h("div", { class: "vega-page-notification-content" }, this.notificationTitle && (globalSlimmerRegistry.h("div", { class: "vega-page-notification-title" }, this.notificationTitle)), globalSlimmerRegistry.h("div", { class: "vega-page-notification-message" }, this.message)));
+      return (index.h("div", { class: "vega-page-notification-content" }, this.notificationTitle && (index.h("div", { class: "vega-page-notification-title" }, this.notificationTitle)), index.h("div", { class: "vega-page-notification-message" }, this.message)));
     };
     this.autoCloseAfterDuration = () => {
       if (this.duration > 0) {
@@ -119,23 +121,23 @@ const VegaPageNotification = class {
   }
   render() {
     const classNames = ui.arrayToClassString([this.type, this.isMobileDevice && 'mobile'].filter(Boolean));
-    return component.sanitizeVegaComponent(globalSlimmerRegistry.h(globalSlimmerRegistry.Host, { class: classNames }, globalSlimmerRegistry.h("vega-box", { padding: this.isMobileDevice ? 'size-16' : 'size-24' }, globalSlimmerRegistry.h("vega-flex", { gap: "size-16" }, this.renderPrefixIcon(), this.renderContent(), this.renderCloseButtons()), this.renderActionButtons())), this.host);
+    return component.sanitizeVegaComponent(index.h(index.Host, { class: classNames }, index.h("vega-box", { padding: this.isMobileDevice ? 'size-16' : 'size-24' }, index.h("vega-flex", { gap: "size-16" }, this.renderPrefixIcon(), this.renderContent(), this.renderCloseButtons()), this.renderActionButtons())), this.host);
   }
   renderCloseButtons() {
     if (!this.showCloseButton)
       return;
-    return (globalSlimmerRegistry.h("div", { "aria-label": "Close Button", class: "vega-page-notification-close-btn",
+    return (index.h("div", { "aria-label": "Close Button", class: "vega-page-notification-close-btn",
       /* eslint-disable-next-line react/jsx-no-bind */
-      onClick: () => this.close(), role: 'button', tabIndex: 0, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick() }, globalSlimmerRegistry.h("vega-icon", { icon: "close", size: this.isMobileDevice ? 'size-12' : 'size-16' })));
+      onClick: () => this.close(), role: 'button', tabIndex: 0, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick() }, index.h("vega-icon", { icon: "close", size: this.isMobileDevice ? 'size-12' : 'size-16' })));
   }
   renderActionButtons() {
     if (!this.actionButtons || this.actionButtons.length === 0)
       return;
-    return (globalSlimmerRegistry.h("div", { class: "vega-page-notification-actions-container" }, this.actionButtons.map((actionButton) => (globalSlimmerRegistry.h("vega-button", { size: this.isMobileDevice ? 'small' : 'default', label: actionButton.label, variant: "secondary", ref: (ref) => {
-        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaClick, actionButton.onVegaClick);
+    return (index.h("div", { class: "vega-page-notification-actions-container" }, this.actionButtons.map((actionButton) => (index.h("vega-button", { size: this.isMobileDevice ? 'small' : 'default', label: actionButton.label, variant: "secondary", ref: (ref) => {
+        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectFactory.VegaClick, actionButton.onVegaClick);
       } })))));
   }
-  get host() { return globalSlimmerRegistry.getElement(this); }
+  get host() { return index.getElement(this); }
 };
 __decorate$1([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
@@ -159,14 +161,14 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 };
 const VegaPageNotificationList = class {
   constructor(hostRef) {
-    globalSlimmerRegistry.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     this.globalSlimmers = {};
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
   }
   render() {
-    return (globalSlimmerRegistry.h(globalSlimmerRegistry.Host, null, globalSlimmerRegistry.h("slot", null)));
+    return (index.h(index.Host, null, index.h("slot", null)));
   }
-  get host() { return globalSlimmerRegistry.getElement(this); }
+  get host() { return index.getElement(this); }
 };
 __decorate([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()

package/dist/cjs/vega-pagination.cjs.entry.js

@@ -2,30 +2,32 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const globalSlimmerRegistry = require('./global-slimmer-registry-dd2691b8.js');
-const component = require('./component-63af66ea.js');
+const index = require('./index-09acd3c9.js');
+const component = require('./component-73a88c4e.js');
 const number = require('./number-4816603d.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-093462f1.js');
-const ui = require('./ui-b5906704.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-e1a6e5ad.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-a46bb411.js');
-const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-019d3c00.js');
-const translationSlimmer = require('./translation-slimmer-90f9f71f.js');
-require('./change-manager-bda1d107.js');
-require('./internal-vega-event-manager-d7643ec6.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-5f0eae19.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-3ec114b8.js');
+const ui = require('./ui-5fd9b267.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-96c3c4ae.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-9c223f73.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
+const translationSlimmer = require('./translation-slimmer-ec76c5a2.js');
+require('./change-manager-a297e4d2.js');
+require('./internal-vega-event-manager-e5e4bcf4.js');
 require('./vega-env-manager-23b8b23c.js');
-require('./feature-flag-controller-e97b5f29.js');
+require('./feature-flag-controller-7b22e598.js');
 require('./index-8b247c17.js');
 require('./_commonjsHelpers-537d719a.js');
-require('./dynamic-slimmer-dc30600a.js');
-require('./translation-f6b7ee84.js');
+require('./dynamic-slimmer-f31fdfd7.js');
+require('./translation-b9be41e0.js');
 require('./static-subject-title-d66b88fb.js');
-require('./create-public-api-runtime-metrics-slimmer-8c6a8fb7.js');
+require('./create-public-api-runtime-metrics-slimmer-54c3f73b.js');
 
 const VegaPaginationCurrentPageLabel = ({ pageSize, current, total, translationSlimmer, }) => {
   const rangeFrom = total > 0 ? pageSize * (current - 1) + 1 : 0;
   const rangeTo = Math.min(current * pageSize, total);
-  return (globalSlimmerRegistry.h("vega-field-label", { label: translationSlimmer.t('Viewing {0}-{1} of {2}', rangeFrom, rangeTo, total) }));
+  return (index.h("vega-field-label", { label: translationSlimmer.t('Viewing {0}-{1} of {2}', rangeFrom, rangeTo, total) }));
 };
 
 const VegaPaginationGoTo = ({ onChange, pageCount, translationSlimmer, }) => {
@@ -40,14 +42,14 @@ const VegaPaginationGoTo = ({ onChange, pageCount, translationSlimmer, }) => {
   const stopChangePropagation = (e) => {
     e.stopPropagation();
   };
-  return (globalSlimmerRegistry.h("vega-flex", { alignItems: "center", justifyContent: "center", gap: "size-8" },
-    globalSlimmerRegistry.h("vega-field-label", { label: translationSlimmer.t('Go To') }),
-    globalSlimmerRegistry.h("vega-form", { 
+  return (index.h("vega-flex", { alignItems: "center", justifyContent: "center", gap: "size-8" },
+    index.h("vega-field-label", { label: translationSlimmer.t('Go To') }),
+    index.h("vega-form", { 
       /* eslint-disable-next-line react/jsx-no-bind */
       ref: (ref) => {
-        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaFormSubmit, handleChange);
+        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectFactory.VegaFormSubmit, handleChange);
       } },
-      globalSlimmerRegistry.h("vega-input", { "data-vega-form": "paginationGoTo", type: "number", size: "small", showClearIcon: false, style: { width: '60px' }, maskConfig: {
+      index.h("vega-input", { "data-vega-form": "paginationGoTo", type: "number", size: "small", showClearIcon: false, style: { width: '60px' }, maskConfig: {
           type: 'number',
           options: {
             allowNegative: false,
@@ -61,7 +63,7 @@ const VegaPaginationGoTo = ({ onChange, pageCount, translationSlimmer, }) => {
         /* eslint-disable-next-line react/jsx-no-bind */
         ref: (ref) => {
           inputRef = ref;
-          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaBlur, handleChange);
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectFactory.VegaBlur, handleChange);
         } }))));
 };
 
@@ -72,16 +74,16 @@ const VegaPaginationPageSizeSelector = ({ pageSize, pageSizeSelectorOptions, onC
     const pageSize = Number(input.detail);
     onChange(pageSize);
   };
-  return (globalSlimmerRegistry.h("vega-flex", { alignItems: "center", justifyContent: "center", gap: "size-8" },
-    globalSlimmerRegistry.h("vega-field-label", { label: translationSlimmer.t('Show') }),
-    globalSlimmerRegistry.h("div", null,
-      globalSlimmerRegistry.h("vega-input-select", { size: "small", source: mergedPageSizeOptions.map((option) => ({
+  return (index.h("vega-flex", { alignItems: "center", justifyContent: "center", gap: "size-8" },
+    index.h("vega-field-label", { label: translationSlimmer.t('Show') }),
+    index.h("div", null,
+      index.h("vega-input-select", { size: "small", source: mergedPageSizeOptions.map((option) => ({
           id: option.toString(),
           displayName: option.toString(),
         })), value: pageSize.toString(), placeholder: "Page Size", vegaDropdownProps: { matchTargetWidth: false, searchable: false }, 
         /* eslint-disable-next-line react/jsx-no-bind */
         ref: (ref) => {
-          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaChange, handleChange);
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectFactory.VegaChange, handleChange);
         } }))));
 };
 
@@ -132,8 +134,8 @@ const VegaPaginationPageSelector = ({ total, current, onChange, pageCount, }) =>
     const clickable = current !== page;
     return (
     /* no-noninteractive-element-to-interactive-role https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-noninteractive-element-to-interactive-role.md */
-    globalSlimmerRegistry.h("li", { key: page, class: ui.arrayToClassString(['vega-pagination-item', isCurrent]) },
-      globalSlimmerRegistry.h("button", { 
+    index.h("li", { key: page, class: ui.arrayToClassString(['vega-pagination-item', isCurrent]) },
+      index.h("button", { 
         /* eslint-disable-next-line react/jsx-no-bind */
         onClick: () => clickable && onChange(page) }, page)));
   };
@@ -162,11 +164,11 @@ const VegaPaginationPageSelector = ({ total, current, onChange, pageCount, }) =>
     });
   };
   const pagerButton = (icon, isDisabled, handleClick) => {
-    return (globalSlimmerRegistry.h("li", { class: ui.arrayToClassString(['vega-pagination-button', isDisabled && 'disabled']) },
-      globalSlimmerRegistry.h("vega-button-circle", { variant: "icon-only", icon: icon, iconColor: "text-link", size: "small", disabled: isDisabled, 
+    return (index.h("li", { class: ui.arrayToClassString(['vega-pagination-button', isDisabled && 'disabled']) },
+      index.h("vega-button-circle", { variant: "icon-only", icon: icon, iconColor: "text-link", size: "small", disabled: isDisabled, 
         /* eslint-disable-next-line react/jsx-no-bind */
         ref: (ref) => {
-          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaClick, handleClick);
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectFactory.VegaClick, handleClick);
         } })));
   };
   const handlePrev = () => {
@@ -176,9 +178,9 @@ const VegaPaginationPageSelector = ({ total, current, onChange, pageCount, }) =>
     onChange(current + 1);
   };
   const pagerEllipsis = () => {
-    return globalSlimmerRegistry.h("li", { class: "vega-pagination-item pager-ellipsis" }, "...");
+    return index.h("li", { class: "vega-pagination-item pager-ellipsis" }, "...");
   };
-  return (globalSlimmerRegistry.h("ul", { class: "vega-pagination" },
+  return (index.h("ul", { class: "vega-pagination" },
     renderPrevButton(),
     renderPagers(),
     renderNextButton()));
@@ -198,17 +200,17 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 };
 const VegaPagination = class {
   constructor(hostRef) {
-    globalSlimmerRegistry.registerInstance(this, hostRef);
-    this.vegaChange = globalSlimmerRegistry.createEvent(this, "vegaChange", 7);
-    this.change = globalSlimmerRegistry.createEvent(this, "change", 7);
-    this.vegaPageSizeChange = globalSlimmerRegistry.createEvent(this, "vegaPageSizeChange", 7);
-    this.pageSizeChange = globalSlimmerRegistry.createEvent(this, "pageSizeChange", 7);
+    index.registerInstance(this, hostRef);
+    this.vegaChange = index.createEvent(this, "vegaChange", 7);
+    this.change = index.createEvent(this, "change", 7);
+    this.vegaPageSizeChange = index.createEvent(this, "vegaPageSizeChange", 7);
+    this.pageSizeChange = index.createEvent(this, "pageSizeChange", 7);
     this.globalSlimmers = {};
     this.translationSlimmer = new translationSlimmer.TranslationSlimmer();
-    this.childEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectObserverFactory.VegaFormSubmit], () => this.host);
-    this.childValueChangePrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectObserverFactory.VegaChange], () => this.host, true);
-    this.vegaChangeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaPagination, domNodeSubjectObserverFactory.VegaChange);
-    this.vegaPageSizeChangeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaPagination, domNodeSubjectObserverFactory.VegaPageSizeChange);
+    this.childEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectFactory.VegaFormSubmit], () => this.host);
+    this.childValueChangePrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectFactory.VegaChange], () => this.host, true);
+    this.vegaChangeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaPagination, domNodeSubjectFactory.VegaChange);
+    this.vegaPageSizeChangeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaPagination, domNodeSubjectFactory.VegaPageSizeChange);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
     this.vegaPaginationItemTypes = [
       'currentPageLabel',
@@ -261,24 +263,24 @@ const VegaPagination = class {
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.pageSizeSelectorOptions = [10, 20, 50, 100];
     this.renderPaginationItemsWrapper = (extensionArr) => {
-      return (globalSlimmerRegistry.h("vega-flex", { gap: "size-24", alignItems: "center", key: this.generateWrapperKey(extensionArr) }, extensionArr.map((item) => {
-        return globalSlimmerRegistry.h("div", { key: item }, this.renderPaginationItem(item));
+      return (index.h("vega-flex", { gap: "size-24", alignItems: "center", key: this.generateWrapperKey(extensionArr) }, extensionArr.map((item) => {
+        return index.h("div", { key: item }, this.renderPaginationItem(item));
       })));
     };
     this.renderPaginationItem = (item) => {
       switch (item) {
         case 'currentPageLabel':
-          return (globalSlimmerRegistry.h(VegaPaginationCurrentPageLabel, { total: this.total, current: this.current, pageSize: this.pageSize, translationSlimmer: this.translationSlimmer }));
+          return (index.h(VegaPaginationCurrentPageLabel, { total: this.total, current: this.current, pageSize: this.pageSize, translationSlimmer: this.translationSlimmer }));
         case 'pageSizeSelector': {
           const pageSizeSelectorOptions = this.pageSizeSelectorOptions.includes(this.pageSize)
             ? this.pageSizeSelectorOptions
             : [...this.pageSizeSelectorOptions, this.pageSize];
-          return (globalSlimmerRegistry.h(VegaPaginationPageSizeSelector, { pageSize: this.pageSize, pageSizeSelectorOptions: pageSizeSelectorOptions, onChange: this.onPageSizeSelectorChange, translationSlimmer: this.translationSlimmer }));
+          return (index.h(VegaPaginationPageSizeSelector, { pageSize: this.pageSize, pageSizeSelectorOptions: pageSizeSelectorOptions, onChange: this.onPageSizeSelectorChange, translationSlimmer: this.translationSlimmer }));
         }
         case 'pageSelector':
-          return (globalSlimmerRegistry.h(VegaPaginationPageSelector, { current: this.current, total: this.total, onChange: this.onPageSelectorChange, pageCount: this.pageCount }));
+          return (index.h(VegaPaginationPageSelector, { current: this.current, total: this.total, onChange: this.onPageSelectorChange, pageCount: this.pageCount }));
         case 'goTo':
-          return (globalSlimmerRegistry.h(VegaPaginationGoTo, { onChange: this.handlePaginationGoToChange, pageCount: this.pageCount, translationSlimmer: this.translationSlimmer }));
+          return (index.h(VegaPaginationGoTo, { onChange: this.handlePaginationGoToChange, pageCount: this.pageCount, translationSlimmer: this.translationSlimmer }));
       }
     };
     this.handlePaginationGoToChange = (page) => {
@@ -351,9 +353,9 @@ const VegaPagination = class {
     }
   }
   render() {
-    return component.sanitizeVegaComponent(globalSlimmerRegistry.h(globalSlimmerRegistry.Host, null, this.removeDuplicateItems(this.extensions).map(this.renderPaginationItemsWrapper)), this.host);
+    return component.sanitizeVegaComponent(index.h(index.Host, null, this.removeDuplicateItems(this.extensions).map(this.renderPaginationItemsWrapper)), this.host);
   }
-  get host() { return globalSlimmerRegistry.getElement(this); }
+  get host() { return index.getElement(this); }
   static get watchers() { return {
     "pageCount": ["watchPageCount"],
     "current": ["watchCurrent"],

package/dist/cjs/vega-pie-chart.cjs.entry.js

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const globalSlimmerRegistry = require('./global-slimmer-registry-dd2691b8.js');
+const index = require('./index-09acd3c9.js');
 const legendInputProcessor = require('./legend-input-processor-d0b3f621.js');
-const component = require('./component-63af66ea.js');
-const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-019d3c00.js');
+const component = require('./component-73a88c4e.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
 require('./array-5adef7b2.js');
 require('./number-4816603d.js');
 require('./typography-4560e7f1.js');
@@ -376,7 +377,7 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 };
 const VegaPieChart = class {
   constructor(hostRef) {
-    globalSlimmerRegistry.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     this.globalSlimmers = {};
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
   }
@@ -406,7 +407,7 @@ const VegaPieChart = class {
     }, 0);
   }
   render() {
-    return component.sanitizeVegaComponent(globalSlimmerRegistry.h(globalSlimmerRegistry.Host, null), this.host);
+    return component.sanitizeVegaComponent(index.h(index.Host, null), this.host);
   }
   /**
    * This function draws a pie chart using the provided options and data source.
@@ -426,7 +427,7 @@ const VegaPieChart = class {
       this.chart.render();
     }
   }
-  get host() { return globalSlimmerRegistry.getElement(this); }
+  get host() { return index.getElement(this); }
   static get watchers() { return {
     "options": ["watchOptionsHandel"]
   }; }

package/dist/cjs/vega-popover_2.cjs.entry.js

@@ -2,30 +2,32 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const globalSlimmerRegistry = require('./global-slimmer-registry-dd2691b8.js');
-const component = require('./component-63af66ea.js');
-const injectKeyboardManager = require('./inject-keyboard-manager-af37c861.js');
-const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-019d3c00.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-a46bb411.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-093462f1.js');
-const elementAppenderSlimmer = require('./element-appender-slimmer-0dd70e61.js');
-const remoteInvocationRegistry = require('./remote-invocation-registry-71a45468.js');
+const index = require('./index-09acd3c9.js');
+const component = require('./component-73a88c4e.js');
+const injectKeyboardManager = require('./inject-keyboard-manager-4a5c27a2.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-9c223f73.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-3ec114b8.js');
+const elementAppenderSlimmer = require('./element-appender-slimmer-700b7004.js');
+const remoteInvocationRegistry = require('./remote-invocation-registry-ff9af278.js');
 const vegaInternalEventId = require('./vega-internal-event-id-85b68849.js');
-require('./keyboard-manager-5afbc8f1.js');
-require('./ui-b5906704.js');
-require('./dynamic-slimmer-dc30600a.js');
-require('./change-manager-bda1d107.js');
-require('./internal-vega-event-manager-d7643ec6.js');
-require('./internal-vega-z-index-manager-e24e4309.js');
+require('./keyboard-manager-2df53b2f.js');
+require('./ui-5fd9b267.js');
+require('./dynamic-slimmer-f31fdfd7.js');
+require('./change-manager-a297e4d2.js');
+require('./dom-node-subject-observer-factory-5f0eae19.js');
+require('./internal-vega-event-manager-e5e4bcf4.js');
+require('./internal-vega-z-index-manager-f03ddb37.js');
 require('./number-4816603d.js');
-require('./page-resize-observer-slimmer-e54fa9d4.js');
+require('./page-resize-observer-slimmer-bb1eaebe.js');
 require('./breakpoints-17d6c4c7.js');
 require('./ui-32e69595.js');
 require('./breakpoints-ebde4837.js');
 require('./type-guard-4ba85fdc.js');
 require('./regex-c1f70fd4.js');
 require('./typography-4560e7f1.js');
-require('./responsive-format-facade-74079f1b.js');
+require('./responsive-format-facade-4363a00d.js');
 require('./pixel-98f2a10c.js');
 
 var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -59,7 +61,7 @@ class VegaPopoverAppenderRenderer extends globalSlimmerRegistry.VegaSlimmer {
    * @returns {HTMLElement} An HTMLVegaPopoverContentBoxElement element wrapped in a vega-popover-content-box component is being returned.
    */
   render() {
-    return (globalSlimmerRegistry.h("vega-popover-content-box", { ref: (el) => (this.popoverContentBox = el), showArrow: this.showArrow }));
+    return (index.h("vega-popover-content-box", { ref: (el) => (this.popoverContentBox = el), showArrow: this.showArrow }));
   }
 }
 __decorate$3([
@@ -96,7 +98,7 @@ class VegaPopoverAppenderController extends elementAppenderSlimmer.ElementAppend
    * Component lifecycle - [componentDidLoad]{@link VegaPopover.disconnectedCallback}
    */
   disconnectedCallback() {
-    remoteInvocationRegistry.remoteInvocationRegistry.unRegister(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalPopoverUpdateTarget));
+    remoteInvocationRegistry.remoteInvocationRegistry.unRegister(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalPopoverUpdateTarget));
   }
   /**
    * Generate the show configuration for the popover.
@@ -118,7 +120,7 @@ class VegaPopoverAppenderController extends elementAppenderSlimmer.ElementAppend
    * Register a remote method to update the target element of the popover.
    */
   registerRemoteMethod() {
-    remoteInvocationRegistry.remoteInvocationRegistry.register(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalPopoverUpdateTarget), (target) => {
+    remoteInvocationRegistry.remoteInvocationRegistry.register(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalPopoverUpdateTarget), (target) => {
       this.target = target;
       super.updateShowConfigFactory(this.generateShowConfigFactory.bind(this));
     });
@@ -169,16 +171,16 @@ var __decorate$1 = (undefined && undefined.__decorate) || function (decorators,
 };
 const VegaPopover = class {
   constructor(hostRef) {
-    globalSlimmerRegistry.registerInstance(this, hostRef);
-    this.vegaPopoverShow = globalSlimmerRegistry.createEvent(this, "vegaPopoverShow", 7);
-    this.popoverShow = globalSlimmerRegistry.createEvent(this, "popoverShow", 7);
-    this.vegaPopoverHide = globalSlimmerRegistry.createEvent(this, "vegaPopoverHide", 7);
-    this.popoverHide = globalSlimmerRegistry.createEvent(this, "popoverHide", 7);
+    index.registerInstance(this, hostRef);
+    this.vegaPopoverShow = index.createEvent(this, "vegaPopoverShow", 7);
+    this.popoverShow = index.createEvent(this, "popoverShow", 7);
+    this.vegaPopoverHide = index.createEvent(this, "vegaPopoverHide", 7);
+    this.popoverHide = index.createEvent(this, "popoverHide", 7);
     this.globalSlimmers = {};
     this.appenderRenderer = new VegaPopoverAppenderRenderer();
     this.appenderController = new VegaPopoverAppenderController();
-    this.popoverShowEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaPopover, domNodeSubjectObserverFactory.VegaPopoverShow);
-    this.popoverHideEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaPopover, domNodeSubjectObserverFactory.VegaPopoverHide);
+    this.popoverShowEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaPopover, domNodeSubjectFactory.VegaPopoverShow);
+    this.popoverHideEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaPopover, domNodeSubjectFactory.VegaPopoverHide);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
     /** popover isPopoverShow */
     this.isPopoverShow = false;
@@ -255,9 +257,9 @@ const VegaPopover = class {
     }
   }
   render() {
-    return component.sanitizeVegaComponent(globalSlimmerRegistry.h(globalSlimmerRegistry.Host, null, globalSlimmerRegistry.h("slot", { name: "popover-content" }), this.appenderRenderer.render()), this.host);
+    return component.sanitizeVegaComponent(index.h(index.Host, null, index.h("slot", { name: "popover-content" }), this.appenderRenderer.render()), this.host);
   }
-  get host() { return globalSlimmerRegistry.getElement(this); }
+  get host() { return index.getElement(this); }
   static get watchers() { return {
     "isPopoverShow": ["watchIsPopoverShow"],
     "size": ["watchToRefreshPopover"],
@@ -326,7 +328,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 };
 const VegaPopoverContentBox = class {
   constructor(hostRef) {
-    globalSlimmerRegistry.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     this.globalSlimmers = {};
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
     /**
@@ -337,12 +339,12 @@ const VegaPopoverContentBox = class {
     this.showArrow = true;
   }
   render() {
-    return component.sanitizeVegaComponent(globalSlimmerRegistry.h(globalSlimmerRegistry.Host, { class: {
+    return component.sanitizeVegaComponent(index.h(index.Host, { class: {
         'vega-popover': true,
         'no-arrow': !this.showArrow,
-      }, role: "tooltip" }, globalSlimmerRegistry.h("div", { class: "vega-popover-content" }, globalSlimmerRegistry.h("slot", { name: "popover" }), this.showArrow && globalSlimmerRegistry.h("div", { class: "vega-arrow" })), globalSlimmerRegistry.h("slot", null)), this.host);
+      }, role: "tooltip" }, index.h("div", { class: "vega-popover-content" }, index.h("slot", { name: "popover" }), this.showArrow && index.h("div", { class: "vega-arrow" })), index.h("slot", null)), this.host);
   }
-  get host() { return globalSlimmerRegistry.getElement(this); }
+  get host() { return index.getElement(this); }
 };
 __decorate([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()

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

@@ -2,18 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const globalSlimmerRegistry = require('./global-slimmer-registry-dd2691b8.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-093462f1.js');
+const index = require('./index-09acd3c9.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-5f0eae19.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-3ec114b8.js');
 const accessibility = require('./accessibility-bfa227f6.js');
-const component = require('./component-63af66ea.js');
+const component = require('./component-73a88c4e.js');
 const number = require('./number-4816603d.js');
-const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-019d3c00.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-a46bb411.js');
-const deprecatedPropertySlimmer = require('./deprecated-property-slimmer-f36e3779.js');
-require('./change-manager-bda1d107.js');
-require('./ui-b5906704.js');
-require('./dynamic-slimmer-dc30600a.js');
-require('./internal-vega-event-manager-d7643ec6.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-9c223f73.js');
+const deprecatedPropertySlimmer = require('./deprecated-property-slimmer-fc729fd9.js');
+require('./change-manager-a297e4d2.js');
+require('./ui-5fd9b267.js');
+require('./dynamic-slimmer-f31fdfd7.js');
+require('./internal-vega-event-manager-e5e4bcf4.js');
 require('./object-bbd4ed7f.js');
 
 const VegaProgressTrackerRuntimeMetricsPayloadDefinition = [
@@ -63,11 +65,11 @@ var ProgressStepStatus;
 })(ProgressStepStatus || (ProgressStepStatus = {}));
 const VegaProgressTracker = class {
   constructor(hostRef) {
-    globalSlimmerRegistry.registerInstance(this, hostRef);
-    this.vegaCurrentStepUpdate = globalSlimmerRegistry.createEvent(this, "vegaCurrentStepUpdate", 7);
-    this.currentStepUpdate = globalSlimmerRegistry.createEvent(this, "currentStepUpdate", 7);
+    index.registerInstance(this, hostRef);
+    this.vegaCurrentStepUpdate = index.createEvent(this, "vegaCurrentStepUpdate", 7);
+    this.currentStepUpdate = index.createEvent(this, "currentStepUpdate", 7);
     this.globalSlimmers = {};
-    this.currentStepUpdateEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaProgressTracker, domNodeSubjectObserverFactory.VegaCurrentStepUpdate);
+    this.currentStepUpdateEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaProgressTracker, domNodeSubjectFactory.VegaCurrentStepUpdate);
     this.deprecatedPropertySlimmer = deprecatedPropertySlimmer.createDeprecatedPropertySlimmer(VegaProgressTracker, 'completedSteps', 'completedStepArray', []);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer(VegaProgressTrackerRuntimeMetricsPayloadDefinition);
     /**
@@ -140,17 +142,17 @@ const VegaProgressTracker = class {
       const index = Number(e.currentTarget.getAttribute('data-index'));
       await this.setCurrent(index);
     };
-    this.renderStepIcon = (index, progressStepStatus) => {
-      return (globalSlimmerRegistry.h("div", { class: "vega-progress-step-icon-container" }, globalSlimmerRegistry.h("div", { class: "vega-progress-step__icon" }, progressStepStatus == ProgressStepStatus.COMPLETE ? (globalSlimmerRegistry.h("vega-icon", { icon: "checkmark-rounded", size: "size-16" })) : (globalSlimmerRegistry.h("span", null, index + 1)))));
+    this.renderStepIcon = (index$1, progressStepStatus) => {
+      return (index.h("div", { class: "vega-progress-step-icon-container" }, index.h("div", { class: "vega-progress-step__icon" }, progressStepStatus == ProgressStepStatus.COMPLETE ? (index.h("vega-icon", { icon: "checkmark-rounded", size: "size-16" })) : (index.h("span", null, index$1 + 1)))));
     };
-    this.renderSteps = (subTitle, index) => {
-      const progressStepStatus = this.getStepState(index);
+    this.renderSteps = (subTitle, index$1) => {
+      const progressStepStatus = this.getStepState(index$1);
       const prevStepCompleteStatus = this.deprecatedPropertySlimmer
         .getValue()
-        .includes(this.steps[index - 1]);
-      return (globalSlimmerRegistry.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 : accessibility.createEnterKeyHandlerToTriggerClick(), "aria-label": subTitle }, globalSlimmerRegistry.h("div", { class: "vega-progress-step-icon-divider" }, globalSlimmerRegistry.h("div", { class: `vega-progress-step__divider left ${prevStepCompleteStatus ? 'background' : ''}` }), this.renderStepIcon(index, progressStepStatus), globalSlimmerRegistry.h("div", { class: `vega-progress-step__divider right ${this.deprecatedPropertySlimmer.getValue().includes(subTitle)
+        .includes(this.steps[index$1 - 1]);
+      return (index.h("div", { role: !this.canClickStep ? null : 'button', class: `vega-progress-step ${progressStepStatus} ${index$1 === this.current ? 'current' : ''}`, "data-index": index$1, tabIndex: !this.canClickStep ? null : 0, onClick: !this.canClickStep ? null : this.onStepIconClick, onKeyDown: !this.canClickStep ? null : accessibility.createEnterKeyHandlerToTriggerClick(), "aria-label": subTitle }, index.h("div", { class: "vega-progress-step-icon-divider" }, index.h("div", { class: `vega-progress-step__divider left ${prevStepCompleteStatus ? 'background' : ''}` }), this.renderStepIcon(index$1, progressStepStatus), index.h("div", { class: `vega-progress-step__divider right ${this.deprecatedPropertySlimmer.getValue().includes(subTitle)
           ? 'complete'
-          : 'default'}` })), globalSlimmerRegistry.h("div", { class: "vega-progress-step__title" }, subTitle)));
+          : 'default'}` })), index.h("div", { class: "vega-progress-step__title" }, subTitle)));
     };
     this.updateCurrent = (current, min, max) => {
       this.current = number.normalizeNumberByRanger(current, min, max);
@@ -212,21 +214,21 @@ const VegaProgressTracker = class {
     return this.current;
   }
   render() {
-    return component.sanitizeVegaComponent(globalSlimmerRegistry.h(globalSlimmerRegistry.Host, { class: `vega-progress-tracker ${this.direction}${!this.canClickStep ? ' click-step-disabled' : ''}` }, globalSlimmerRegistry.h("div", { class: "vega-progress-tracker__container" }, globalSlimmerRegistry.h("div", { class: "vega-progress-tracker__slot" }, this.steps.map((subTitle, index) => this.renderSteps(subTitle, index)))), globalSlimmerRegistry.h("div", { class: "vega-progress-tracker__box" }, globalSlimmerRegistry.h("vega-carousel", { showSlider: false, itemsPerPage: 1, canSwipe: this.canClickStep, ref: (el) => {
+    return component.sanitizeVegaComponent(index.h(index.Host, { class: `vega-progress-tracker ${this.direction}${!this.canClickStep ? ' click-step-disabled' : ''}` }, index.h("div", { class: "vega-progress-tracker__container" }, index.h("div", { class: "vega-progress-tracker__slot" }, this.steps.map((subTitle, index) => this.renderSteps(subTitle, index)))), index.h("div", { class: "vega-progress-tracker__box" }, index.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.DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, domNodeSubjectObserverFactory.VegaPageUpdate, (input) => this.updateCurrent(input.detail - 1, 0, this.steps.length - 1));
+        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, domNodeSubjectFactory.VegaPageUpdate, (input) => this.updateCurrent(input.detail - 1, 0, this.steps.length - 1));
         return (this.carouselDom = el);
-      } }, this.steps.map((subTitle, index) => (globalSlimmerRegistry.h("div", { class: {
+      } }, this.steps.map((subTitle, index$1) => (index.h("div", { class: {
         subTitle: true,
-        completed: this.getStepState(index) === ProgressStepStatus.COMPLETE,
-        inProgress: this.current === index,
+        completed: this.getStepState(index$1) === ProgressStepStatus.COMPLETE,
+        inProgress: this.current === index$1,
       } }, subTitle)))))), this.host);
   }
-  get host() { return globalSlimmerRegistry.getElement(this); }
+  get host() { return index.getElement(this); }
   static get watchers() { return {
     "current": ["watchCurrentChange"],
     "steps": ["watchSteps"]