@globalpayments/vega 2.33.0 → 2.34.0

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

@@ -2,16 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-09acd3c9.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-dd2691b8.js');
 const accessibility = require('./accessibility-bfa227f6.js');
-const component = require('./component-73a88c4e.js');
-const ui = require('./ui-08f33116.js');
-const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-1ee24991.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-2e41340d.js');
-const vegaEventId = require('./vega-event-id-81270f6a.js');
-require('./change-manager-a297e4d2.js');
-require('./observer-f49483e8.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 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}}";
 
@@ -33,7 +30,7 @@ const typeIconMap = {
 };
 const VegaPageNotification = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
+    globalSlimmerRegistry.registerInstance(this, hostRef);
     this.globalSlimmers = {};
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
     this.isMobileDevice = ui.getDeviceType() === ui.DeviceType.MOBILE;
@@ -93,10 +90,10 @@ const VegaPageNotification = class {
      */
     this.actionButtons = [];
     this.renderPrefixIcon = () => {
-      return (index.h("div", { class: "vega-page-notification-prefix" }, index.h("vega-icon", { icon: typeIconMap[this.type], size: this.isMobileDevice ? 'size-16' : 'size-24' })));
+      return (globalSlimmerRegistry.h("div", { class: "vega-page-notification-prefix" }, globalSlimmerRegistry.h("vega-icon", { icon: typeIconMap[this.type], size: this.isMobileDevice ? 'size-16' : 'size-24' })));
     };
     this.renderContent = () => {
-      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)));
+      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)));
     };
     this.autoCloseAfterDuration = () => {
       if (this.duration > 0) {
@@ -122,23 +119,23 @@ const VegaPageNotification = class {
   }
   render() {
     const classNames = ui.arrayToClassString([this.type, this.isMobileDevice && 'mobile'].filter(Boolean));
-    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);
+    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);
   }
   renderCloseButtons() {
     if (!this.showCloseButton)
       return;
-    return (index.h("div", { "aria-label": "Close Button", class: "vega-page-notification-close-btn",
+    return (globalSlimmerRegistry.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() }, index.h("vega-icon", { icon: "close", size: this.isMobileDevice ? 'size-12' : 'size-16' })));
+      onClick: () => this.close(), role: 'button', tabIndex: 0, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick() }, globalSlimmerRegistry.h("vega-icon", { icon: "close", size: this.isMobileDevice ? 'size-12' : 'size-16' })));
   }
   renderActionButtons() {
     if (!this.actionButtons || this.actionButtons.length === 0)
       return;
-    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, vegaEventId.VegaClick, actionButton.onVegaClick);
+    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);
       } })))));
   }
-  get host() { return index.getElement(this); }
+  get host() { return globalSlimmerRegistry.getElement(this); }
 };
 __decorate$1([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
@@ -162,14 +159,14 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 };
 const VegaPageNotificationList = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
+    globalSlimmerRegistry.registerInstance(this, hostRef);
     this.globalSlimmers = {};
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
   }
   render() {
-    return (index.h(index.Host, null, index.h("slot", null)));
+    return (globalSlimmerRegistry.h(globalSlimmerRegistry.Host, null, globalSlimmerRegistry.h("slot", null)));
   }
-  get host() { return index.getElement(this); }
+  get host() { return globalSlimmerRegistry.getElement(this); }
 };
 __decorate([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()

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

@@ -2,32 +2,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-09acd3c9.js');
-const component = require('./component-73a88c4e.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-dd2691b8.js');
+const component = require('./component-63af66ea.js');
 const number = require('./number-4816603d.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-2e41340d.js');
-const vegaEventId = require('./vega-event-id-81270f6a.js');
-const ui = require('./ui-08f33116.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-f07a8fe9.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-83278943.js');
-const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-1ee24991.js');
-const translationSlimmer = require('./translation-slimmer-32aa13e7.js');
-require('./change-manager-a297e4d2.js');
-require('./observer-f49483e8.js');
-require('./internal-vega-event-manager-5fe83465.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');
 require('./vega-env-manager-23b8b23c.js');
-require('./feature-flag-controller-0d1015fa.js');
-require('./index-5792390b.js');
-require('./dynamic-slimmer-f31fdfd7.js');
-require('./translation-42c1b2c8.js');
-require('./static-subject-title-471e1793.js');
-require('./create-public-api-runtime-metrics-slimmer-5cc88124.js');
+require('./feature-flag-controller-e97b5f29.js');
+require('./index-8b247c17.js');
+require('./_commonjsHelpers-537d719a.js');
+require('./dynamic-slimmer-dc30600a.js');
+require('./translation-f6b7ee84.js');
+require('./static-subject-title-d66b88fb.js');
+require('./create-public-api-runtime-metrics-slimmer-8c6a8fb7.js');
 
 const VegaPaginationCurrentPageLabel = ({ pageSize, current, total, translationSlimmer, }) => {
   const rangeFrom = total > 0 ? pageSize * (current - 1) + 1 : 0;
   const rangeTo = Math.min(current * pageSize, total);
-  return (index.h("vega-field-label", { label: translationSlimmer.t('Viewing {0}-{1} of {2}', rangeFrom, rangeTo, total) }));
+  return (globalSlimmerRegistry.h("vega-field-label", { label: translationSlimmer.t('Viewing {0}-{1} of {2}', rangeFrom, rangeTo, total) }));
 };
 
 const VegaPaginationGoTo = ({ onChange, pageCount, translationSlimmer, }) => {
@@ -42,14 +40,14 @@ const VegaPaginationGoTo = ({ onChange, pageCount, translationSlimmer, }) => {
   const stopChangePropagation = (e) => {
     e.stopPropagation();
   };
-  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", { 
+  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", { 
       /* eslint-disable-next-line react/jsx-no-bind */
       ref: (ref) => {
-        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaFormSubmit, handleChange);
+        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaFormSubmit, handleChange);
       } },
-      index.h("vega-input", { "data-vega-form": "paginationGoTo", type: "number", size: "small", showClearIcon: false, style: { width: '60px' }, maskConfig: {
+      globalSlimmerRegistry.h("vega-input", { "data-vega-form": "paginationGoTo", type: "number", size: "small", showClearIcon: false, style: { width: '60px' }, maskConfig: {
           type: 'number',
           options: {
             allowNegative: false,
@@ -63,7 +61,7 @@ const VegaPaginationGoTo = ({ onChange, pageCount, translationSlimmer, }) => {
         /* eslint-disable-next-line react/jsx-no-bind */
         ref: (ref) => {
           inputRef = ref;
-          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaBlur, handleChange);
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaBlur, handleChange);
         } }))));
 };
 
@@ -74,16 +72,16 @@ const VegaPaginationPageSizeSelector = ({ pageSize, pageSizeSelectorOptions, onC
     const pageSize = Number(input.detail);
     onChange(pageSize);
   };
-  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) => ({
+  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) => ({
           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, vegaEventId.VegaChange, handleChange);
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaChange, handleChange);
         } }))));
 };
 
@@ -134,8 +132,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 */
-    index.h("li", { key: page, class: ui.arrayToClassString(['vega-pagination-item', isCurrent]) },
-      index.h("button", { 
+    globalSlimmerRegistry.h("li", { key: page, class: ui.arrayToClassString(['vega-pagination-item', isCurrent]) },
+      globalSlimmerRegistry.h("button", { 
         /* eslint-disable-next-line react/jsx-no-bind */
         onClick: () => clickable && onChange(page) }, page)));
   };
@@ -164,11 +162,11 @@ const VegaPaginationPageSelector = ({ total, current, onChange, pageCount, }) =>
     });
   };
   const pagerButton = (icon, isDisabled, handleClick) => {
-    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, 
+    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, 
         /* eslint-disable-next-line react/jsx-no-bind */
         ref: (ref) => {
-          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaClick, handleClick);
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaClick, handleClick);
         } })));
   };
   const handlePrev = () => {
@@ -178,9 +176,9 @@ const VegaPaginationPageSelector = ({ total, current, onChange, pageCount, }) =>
     onChange(current + 1);
   };
   const pagerEllipsis = () => {
-    return index.h("li", { class: "vega-pagination-item pager-ellipsis" }, "...");
+    return globalSlimmerRegistry.h("li", { class: "vega-pagination-item pager-ellipsis" }, "...");
   };
-  return (index.h("ul", { class: "vega-pagination" },
+  return (globalSlimmerRegistry.h("ul", { class: "vega-pagination" },
     renderPrevButton(),
     renderPagers(),
     renderNextButton()));
@@ -200,17 +198,17 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 };
 const VegaPagination = class {
   constructor(hostRef) {
-    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);
+    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);
     this.globalSlimmers = {};
     this.translationSlimmer = new translationSlimmer.TranslationSlimmer();
-    this.childEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaFormSubmit], () => this.host);
-    this.childValueChangePrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaChange], () => this.host, true);
-    this.vegaChangeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaPagination, vegaEventId.VegaChange);
-    this.vegaPageSizeChangeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaPagination, vegaEventId.VegaPageSizeChange);
+    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.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
     this.vegaPaginationItemTypes = [
       'currentPageLabel',
@@ -263,24 +261,24 @@ const VegaPagination = class {
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.pageSizeSelectorOptions = [10, 20, 50, 100];
     this.renderPaginationItemsWrapper = (extensionArr) => {
-      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));
+      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));
       })));
     };
     this.renderPaginationItem = (item) => {
       switch (item) {
         case 'currentPageLabel':
-          return (index.h(VegaPaginationCurrentPageLabel, { total: this.total, current: this.current, pageSize: this.pageSize, translationSlimmer: this.translationSlimmer }));
+          return (globalSlimmerRegistry.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 (index.h(VegaPaginationPageSizeSelector, { pageSize: this.pageSize, pageSizeSelectorOptions: pageSizeSelectorOptions, onChange: this.onPageSizeSelectorChange, translationSlimmer: this.translationSlimmer }));
+          return (globalSlimmerRegistry.h(VegaPaginationPageSizeSelector, { pageSize: this.pageSize, pageSizeSelectorOptions: pageSizeSelectorOptions, onChange: this.onPageSizeSelectorChange, translationSlimmer: this.translationSlimmer }));
         }
         case 'pageSelector':
-          return (index.h(VegaPaginationPageSelector, { current: this.current, total: this.total, onChange: this.onPageSelectorChange, pageCount: this.pageCount }));
+          return (globalSlimmerRegistry.h(VegaPaginationPageSelector, { current: this.current, total: this.total, onChange: this.onPageSelectorChange, pageCount: this.pageCount }));
         case 'goTo':
-          return (index.h(VegaPaginationGoTo, { onChange: this.handlePaginationGoToChange, pageCount: this.pageCount, translationSlimmer: this.translationSlimmer }));
+          return (globalSlimmerRegistry.h(VegaPaginationGoTo, { onChange: this.handlePaginationGoToChange, pageCount: this.pageCount, translationSlimmer: this.translationSlimmer }));
       }
     };
     this.handlePaginationGoToChange = (page) => {
@@ -350,9 +348,9 @@ const VegaPagination = class {
     }
   }
   render() {
-    return component.sanitizeVegaComponent(index.h(index.Host, null, this.removeDuplicateItems(this.extensions).map(this.renderPaginationItemsWrapper)), this.host);
+    return component.sanitizeVegaComponent(globalSlimmerRegistry.h(globalSlimmerRegistry.Host, null, this.removeDuplicateItems(this.extensions).map(this.renderPaginationItemsWrapper)), this.host);
   }
-  get host() { return index.getElement(this); }
+  get host() { return globalSlimmerRegistry.getElement(this); }
   static get watchers() { return {
     "pageCount": ["watchPageCount"],
     "current": ["watchCurrent"],

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

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

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

@@ -2,30 +2,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-09acd3c9.js');
-const component = require('./component-73a88c4e.js');
-const injectKeyboardManager = require('./inject-keyboard-manager-e79a1ade.js');
-const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-1ee24991.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-83278943.js');
-const vegaEventId = require('./vega-event-id-81270f6a.js');
-const elementAppenderSlimmer = require('./element-appender-slimmer-415d261a.js');
-require('./keyboard-manager-34b78600.js');
-require('./ui-08f33116.js');
-require('./dynamic-slimmer-f31fdfd7.js');
-require('./change-manager-a297e4d2.js');
-require('./dom-node-subject-observer-factory-2e41340d.js');
-require('./observer-f49483e8.js');
-require('./internal-vega-event-manager-5fe83465.js');
-require('./internal-vega-z-index-manager-f03ddb37.js');
+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 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('./number-4816603d.js');
-require('./page-resize-observer-slimmer-a8cf1874.js');
-require('./breakpoints-7e2dff90.js');
+require('./page-resize-observer-slimmer-e54fa9d4.js');
+require('./breakpoints-17d6c4c7.js');
 require('./ui-32e69595.js');
-require('./type-guard-a07b353b.js');
+require('./breakpoints-ebde4837.js');
+require('./type-guard-4ba85fdc.js');
 require('./regex-c1f70fd4.js');
 require('./typography-4560e7f1.js');
-require('./responsive-format-facade-ad2f67bf.js');
+require('./responsive-format-facade-74079f1b.js');
 require('./pixel-98f2a10c.js');
 
 var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -59,7 +59,7 @@ class VegaPopoverAppenderRenderer extends globalSlimmerRegistry.VegaSlimmer {
    * @returns {HTMLElement} An HTMLVegaPopoverContentBoxElement element wrapped in a vega-popover-content-box component is being returned.
    */
   render() {
-    return (index.h("vega-popover-content-box", { ref: (el) => (this.popoverContentBox = el), showArrow: this.showArrow }));
+    return (globalSlimmerRegistry.h("vega-popover-content-box", { ref: (el) => (this.popoverContentBox = el), showArrow: this.showArrow }));
   }
 }
 __decorate$3([
@@ -84,15 +84,44 @@ class VegaPopoverAppenderController extends elementAppenderSlimmer.ElementAppend
    * The constructor initializes a popover with specific configuration options.
    */
   constructor() {
-    super(() => ({
-      target: this.host,
+    super(() => this.generateShowConfigFactory(), () => this.trigger, 'isPopoverShow');
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]{@link VegaPopover.connectedCallback}
+   */
+  connectedCallback() {
+    this.registerRemoteMethod();
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]{@link VegaPopover.disconnectedCallback}
+   */
+  disconnectedCallback() {
+    remoteInvocationRegistry.remoteInvocationRegistry.unRegister(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalPopoverUpdateTarget));
+  }
+  /**
+   * Generate the show configuration for the popover.
+   *
+   * @returns {ElementAppenderShowConfig} The show configuration for the popover.
+   */
+  generateShowConfigFactory() {
+    return {
+      target: this.target || this.host,
       appendableElement: this.appenderRenderer.getPopoverContentBox(),
       positionRelativeTo: this.positionRelativeTo,
       matchTargetWidth: false,
       size: this.size,
       placement: this.placement,
       alignment: this.alignment,
-    }), () => this.trigger, 'isPopoverShow');
+    };
+  }
+  /**
+   * Register a remote method to update the target element of the popover.
+   */
+  registerRemoteMethod() {
+    remoteInvocationRegistry.remoteInvocationRegistry.register(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalPopoverUpdateTarget), (target) => {
+      this.target = target;
+      super.updateShowConfigFactory(this.generateShowConfigFactory.bind(this));
+    });
   }
 }
 __decorate$2([
@@ -119,6 +148,12 @@ __decorate$2([
 __decorate$2([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaPopoverAppenderController.prototype, "appenderRenderer", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], VegaPopoverAppenderController.prototype, "connectedCallback", null);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], VegaPopoverAppenderController.prototype, "disconnectedCallback", null);
 
 const vegaPopoverCss = ":host{display:inline-block}";
 
@@ -134,16 +169,16 @@ var __decorate$1 = (undefined && undefined.__decorate) || function (decorators,
 };
 const VegaPopover = class {
   constructor(hostRef) {
-    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);
+    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);
     this.globalSlimmers = {};
     this.appenderRenderer = new VegaPopoverAppenderRenderer();
     this.appenderController = new VegaPopoverAppenderController();
-    this.popoverShowEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaPopover, vegaEventId.VegaPopoverShow);
-    this.popoverHideEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaPopover, vegaEventId.VegaPopoverHide);
+    this.popoverShowEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaPopover, domNodeSubjectObserverFactory.VegaPopoverShow);
+    this.popoverHideEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaPopover, domNodeSubjectObserverFactory.VegaPopoverHide);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
     /** popover isPopoverShow */
     this.isPopoverShow = false;
@@ -220,9 +255,9 @@ const VegaPopover = class {
     }
   }
   render() {
-    return component.sanitizeVegaComponent(index.h(index.Host, null, index.h("slot", { name: "popover-content" }), this.appenderRenderer.render()), this.host);
+    return component.sanitizeVegaComponent(globalSlimmerRegistry.h(globalSlimmerRegistry.Host, null, globalSlimmerRegistry.h("slot", { name: "popover-content" }), this.appenderRenderer.render()), this.host);
   }
-  get host() { return index.getElement(this); }
+  get host() { return globalSlimmerRegistry.getElement(this); }
   static get watchers() { return {
     "isPopoverShow": ["watchIsPopoverShow"],
     "size": ["watchToRefreshPopover"],
@@ -291,7 +326,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 };
 const VegaPopoverContentBox = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
+    globalSlimmerRegistry.registerInstance(this, hostRef);
     this.globalSlimmers = {};
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
     /**
@@ -302,12 +337,12 @@ const VegaPopoverContentBox = class {
     this.showArrow = true;
   }
   render() {
-    return component.sanitizeVegaComponent(index.h(index.Host, { class: {
+    return component.sanitizeVegaComponent(globalSlimmerRegistry.h(globalSlimmerRegistry.Host, { class: {
         'vega-popover': true,
         'no-arrow': !this.showArrow,
-      }, 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);
+      }, 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);
   }
-  get host() { return index.getElement(this); }
+  get host() { return globalSlimmerRegistry.getElement(this); }
 };
 __decorate([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()