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

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

@@ -0,0 +1,150 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-c3505689.js';
+import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
+import { s as sanitizeVegaComponent } from './component-e4eb3f14.js';
+import { g as getDeviceType, D as DeviceType, a as arrayToClassString } from './ui-6e5294cb.js';
+import './global-slimmer-registry-b91c742d.js';
+import { I as InjectVegaGlobalSlimmer } from './inject-vega-global-slimmer-c3f84156.js';
+import './log-a824be80.js';
+
+const vegaPageNotificationCss = ":host{display:inline-block;padding:24px;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%;padding:16px;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}}";
+
+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 typeIconMap = {
+  success: 'checkmark-circle',
+  warning: 'warning-triangle-filled',
+  error: 'help-filled',
+  info: 'info-circle-filled',
+};
+const VegaPageNotification = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    this.isMobileDevice = getDeviceType() === DeviceType.MOBILE;
+    /**
+     * Specifies the title text for the page notification.
+     *
+     * It provides users with a concise and informative message
+     *    that communicates the purpose or nature of the notification.
+     */
+    this.notificationTitle = '';
+    /**
+     * Specifies the content text for the page notification.
+     *
+     * It provides a detailed message or information that
+     *    further explains the purpose or context of
+     *    the notification.
+     */
+    this.message = '';
+    /**
+     * Specifies the type of page notification,
+     *    indicating the visual style or category of
+     *    the notification.
+     */
+    this.type = 'info';
+    /**
+     * Specifies the duration, in milliseconds, before the
+     *    page notification automatically closes.
+     *
+     * If the duration is set to `0`, the notification will not
+     *    close automatically.
+     */
+    this.duration = 5000;
+    /**
+     * Specifies whether to display the close button for
+     *    the page notification.
+     */
+    this.showCloseButton = true;
+    /**
+     * Specifies the configuration array for the action buttons of
+     *    the page notification.
+     *
+     * The action buttons provide interactive options for users to
+     *    perform specific actions or operations related to
+     *    the notification.
+     */
+    this.actionButtons = [];
+    this.renderPrefixIcon = () => {
+      return (h("div", { class: "vega-page-notification-prefix" }, h("vega-icon", { icon: typeIconMap[this.type], size: this.isMobileDevice ? 'size-16' : 'size-24' })));
+    };
+    this.renderContent = () => {
+      return (h("div", { class: "vega-page-notification-content" }, this.notificationTitle && (h("div", { class: "vega-page-notification-title" }, this.notificationTitle)), h("div", { class: "vega-page-notification-message" }, this.message)));
+    };
+    this.autoCloseAfterDuration = () => {
+      if (this.duration > 0) {
+        setTimeout(() => {
+          void this.close();
+        }, this.duration);
+      }
+    };
+  }
+  componentDidLoad() {
+    this.autoCloseAfterDuration();
+  }
+  /**
+   * Invoke this method to close the page notification.
+   */
+  async close() {
+    this.host.classList.add('vega-page-notification-fade-out');
+    setTimeout(() => {
+      this.host.remove();
+    }, 300);
+  }
+  render() {
+    const classNames = arrayToClassString([this.type, this.isMobileDevice && 'mobile'].filter(Boolean));
+    return sanitizeVegaComponent(h(Host, { class: classNames }, h("vega-flex", { gap: "size-16" }, this.renderPrefixIcon(), this.renderContent(), this.renderCloseButtons()), this.renderActionButtons()), this.host);
+  }
+  renderCloseButtons() {
+    if (!this.showCloseButton)
+      return;
+    return (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: createEnterKeyHandlerToTriggerClick() }, h("vega-icon", { icon: "close", size: this.isMobileDevice ? 'size-12' : 'size-16' })));
+  }
+  renderActionButtons() {
+    if (!this.actionButtons || this.actionButtons.length === 0)
+      return;
+    return (h("div", { class: "vega-page-notification-actions-container" }, this.actionButtons.map((actionButton) => (h("vega-button", { size: this.isMobileDevice ? 'small' : 'default', label: actionButton.label, variant: "secondary", onVegaClick: actionButton.onVegaClick })))));
+  }
+  get host() { return getElement(this); }
+};
+__decorate$1([
+  InjectVegaGlobalSlimmer()
+], VegaPageNotification.prototype, "globalSlimmers", void 0);
+VegaPageNotification.style = vegaPageNotificationCss;
+
+const vegaPageNotificationListCss = ":host{position:fixed;display:flex;flex-direction:column;align-items:flex-end}:host(.vega-page-notification-list-topRight){top:24px;right:24px}:host(.vega-page-notification-list-bottom){align-items:center;padding-left:16px;padding-right:16px;left:0px;right:0px;bottom:0px}";
+
+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 VegaPageNotificationList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaPageNotificationList.prototype, "globalSlimmers", void 0);
+VegaPageNotificationList.style = vegaPageNotificationListCss;
+
+export { VegaPageNotification as vega_page_notification, VegaPageNotificationList as vega_page_notification_list };

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

@@ -1,9 +1,16 @@
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-fe904372.js';
-import { s as sanitizeVegaComponent } from './component-f8ef7dc9.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-c3505689.js';
+import { s as sanitizeVegaComponent } from './component-e4eb3f14.js';
 import { n as normalizeNumberByRanger, c as convertToNumber } from './number-400b3bf2.js';
-import { a as arrayToClassString } from './ui-8bf12791.js';
-import './featureFlagController-1a4a4ffc.js';
+import { D as DomNodeSubjectObserverFactory, c as createEventEmitSlimmer } from './eventEmitSlimmer-d605ac81.js';
+import { k as VegaFormSubmit, q as VegaBlur, g as VegaChange, V as VegaClick, t as VegaPageSizeChange } from './internalVegaEventManager-efa77ebb.js';
+import { a as arrayToClassString } from './ui-6e5294cb.js';
+import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-65a53b20.js';
+import { I as InjectVegaSlimmer } from './global-slimmer-registry-b91c742d.js';
+import { I as InjectVegaGlobalSlimmer } from './inject-vega-global-slimmer-c3f84156.js';
 import './log-a824be80.js';
+import './vega-slimmer-ce2e45d1.js';
+import './dynamic-slimmer-c8ad78de.js';
+import './changeManager-935d420b.js';
 
 const VegaPaginationCurrentPageLabel = ({ pageSize, current, total, }) => {
   const rangeFrom = total > 0 ? pageSize * (current - 1) + 1 : 0;
@@ -13,45 +20,49 @@ const VegaPaginationCurrentPageLabel = ({ pageSize, current, total, }) => {
 
 const VegaPaginationGoTo = ({ onChange, pageCount, }) => {
   let inputRef;
-  const handleChange = (e) => {
-    e.stopPropagation();
-    if (!inputRef.value) {
-      return;
+  const handleChange = () => {
+    if (inputRef.value) {
+      const goToPage = normalizeNumberByRanger(convertToNumber(inputRef.value, 1), 1, pageCount);
+      onChange(goToPage);
+      inputRef.value = '';
     }
-    const goToPage = normalizeNumberByRanger(convertToNumber(inputRef.value, 1), 1, pageCount);
-    onChange(goToPage);
-    inputRef.value = '';
   };
   const stopChangePropagation = (e) => {
     e.stopPropagation();
   };
-  return (h("vega-flex", { alignItem: "center", justifyContent: "center", gap: "size-8" },
+  return (h("vega-flex", { alignItems: "center", justifyContent: "center", gap: "size-8" },
     h("vega-field-label", { label: "Go To" }),
     h("vega-form", { 
       /* eslint-disable-next-line react/jsx-no-bind */
-      onVegaFormSubmit: handleChange },
-      h("vega-input", { "data-vega-form": "paginationGoTo", ref: (ref) => (inputRef = ref), type: "number", size: "small", showClearIcon: false, style: { width: '60px' }, 
-        /* eslint-disable-next-line react/jsx-no-bind */
-        onVegaBlur: handleChange, 
-        /* eslint-disable-next-line react/jsx-no-bind */
-        onVegaChange: stopChangePropagation, maskConfig: {
+      ref: (ref) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaFormSubmit, handleChange);
+      } },
+      h("vega-input", { "data-vega-form": "paginationGoTo", type: "number", size: "small", showClearIcon: false, style: { width: '60px' }, maskConfig: {
           type: 'number',
           options: {
             allowNegative: false,
             precision: 0,
           },
+        }, 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        onVegaChange: stopChangePropagation, 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        onChange: stopChangePropagation, 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        ref: (ref) => {
+          inputRef = ref;
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaBlur, handleChange);
         } }))));
 };
 
 const VegaPaginationPageSizeSelector = ({ pageSize, pageSizeSelectorOptions, onChange, }) => {
   const mergedPageSizeOptions = pageSizeSelectorOptions.sort((a, b) => a - b);
-  const handleChange = (event) => {
-    event.stopPropagation();
+  const handleChange = (input) => {
     // Because input-select use single mode, so the detail is always a string type
-    const pageSize = Number(event.detail);
+    const pageSize = Number(input.detail);
     onChange(pageSize);
   };
-  return (h("vega-flex", { alignItem: "center", justifyContent: "center", gap: "size-8" },
+  return (h("vega-flex", { alignItems: "center", justifyContent: "center", gap: "size-8" },
     h("vega-field-label", { label: "Show" }),
     h("div", null,
       h("vega-input-select", { size: "small", source: mergedPageSizeOptions.map((option) => ({
@@ -59,7 +70,9 @@ const VegaPaginationPageSizeSelector = ({ pageSize, pageSizeSelectorOptions, onC
           displayName: option.toString(),
         })), value: pageSize.toString(), placeholder: "Page Size", vegaDropdownProps: { matchTargetWidth: false, searchable: false }, 
         /* eslint-disable-next-line react/jsx-no-bind */
-        onVegaChange: handleChange }))));
+        ref: (ref) => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, handleChange);
+        } }))));
 };
 
 /**
@@ -140,7 +153,11 @@ const VegaPaginationPageSelector = ({ total, current, onChange, pageCount, }) =>
   };
   const pagerButton = (icon, isDisabled, handleClick) => {
     return (h("li", { class: arrayToClassString(['vega-pagination-button', isDisabled && 'disabled']) },
-      h("vega-button-circle", { variant: "icon-only", icon: icon, iconColor: "text-link", size: "small", disabled: isDisabled, onVegaClick: handleClick })));
+      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.addUniqueObserverToNode(ref, VegaClick, handleClick);
+        } })));
   };
   const handlePrev = () => {
     onChange(current - 1);
@@ -157,11 +174,30 @@ const VegaPaginationPageSelector = ({ total, current, onChange, pageCount, }) =>
     renderNextButton()));
 };
 
+const vegaPaginationCss = ":host{display:flex;align-items:center;justify-content:space-between;gap:20px;line-height:normal}.vega-pagination{display:flex;padding:0px;margin:0px}.vega-pagination .vega-pagination-item{list-style-type:none;display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;color:rgba(var(--v-text-link, 19, 98, 226, 1));cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-pagination .vega-pagination-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-pagination .vega-pagination-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-pagination .vega-pagination-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}.vega-pagination .vega-pagination-item button{background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0));border-width:0px;outline:2px solid transparent;outline-offset:2px;width:100%;height:100%;cursor:pointer;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;color:rgba(var(--v-text-link, 19, 98, 226, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-pagination .vega-pagination-item button{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-pagination .vega-pagination-item button{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-pagination .vega-pagination-item button{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}.vega-pagination .vega-pagination-item.pager-ellipsis{cursor:default}.vega-pagination .vega-pagination-item:not(.pager-ellipsis):not(:active):hover{text-decoration:underline;text-underline-offset:2px}.vega-pagination .vega-pagination-item button:active,.vega-pagination .vega-pagination-item.active button{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-pagination .vega-pagination-item button:active,.vega-pagination .vega-pagination-item.active button{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-pagination .vega-pagination-item button:active,.vega-pagination .vega-pagination-item.active button{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-pagination .vega-pagination-item button:active,.vega-pagination .vega-pagination-item.active button{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.vega-pagination .vega-pagination-item button:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25));border-radius:9999px}.vega-pagination .vega-pagination-button{list-style-type:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}";
+
+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 VegaPagination = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.vegaChange = createEvent(this, "vegaChange", 7);
+    this.change = createEvent(this, "change", 7);
     this.vegaPageSizeChange = createEvent(this, "vegaPageSizeChange", 7);
+    this.pageSizeChange = createEvent(this, "pageSizeChange", 7);
+    this.globalSlimmers = {};
+    this.childEventPrevent = new ChildNodesEventPreventSlimmer([VegaFormSubmit], () => this.host);
+    this.childValueChangePrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.host, true);
+    this.vegaChangeEventEmitter = createEventEmitSlimmer(VegaPagination, VegaChange);
+    this.vegaPageSizeChangeEventEmitter = createEventEmitSlimmer(VegaPagination, VegaPageSizeChange);
     this.vegaPaginationItemTypes = [
       'currentPageLabel',
       'pageSizeSelector',
@@ -200,7 +236,7 @@ const VegaPagination = class {
      */
     this.pageSizeSelectorOptions = [10, 20, 50, 100];
     this.renderPaginationItemsWrapper = (extensionArr) => {
-      return (h("vega-flex", { gap: "size-24", alignItem: "center", key: this.generateWrapperKey(extensionArr) }, extensionArr.map((item) => {
+      return (h("vega-flex", { gap: "size-24", alignItems: "center", key: this.generateWrapperKey(extensionArr) }, extensionArr.map((item) => {
         return h("div", { key: item }, this.renderPaginationItem(item));
       })));
     };
@@ -221,7 +257,7 @@ const VegaPagination = class {
     };
     this.onPageSizeSelectorChange = (pageSize) => {
       this.pageSize = pageSize;
-      this.vegaPageSizeChange.emit(this.pageSize);
+      this.vegaPageSizeChangeEventEmitter.emit(this.pageSize);
     };
     this.calculatePages = () => {
       if (!this.total) {
@@ -270,7 +306,7 @@ const VegaPagination = class {
   }
   watchCurrent() {
     this.currentValueGuard();
-    this.vegaChange.emit(this.current);
+    this.vegaChangeEventEmitter.emit(this.current);
   }
   watchPageSize() {
     this.pageCount = this.calculatePages();
@@ -293,5 +329,21 @@ const VegaPagination = class {
     "pageSize": ["watchPageSize"]
   }; }
 };
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaPagination.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaPagination.prototype, "childEventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaPagination.prototype, "childValueChangePrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaPagination.prototype, "vegaChangeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaPagination.prototype, "vegaPageSizeChangeEventEmitter", void 0);
+VegaPagination.style = vegaPaginationCss;
 
 export { VegaPagination as vega_pagination };

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

@@ -1,10 +1,11 @@
-import { r as registerInstance, h, g as getElement, H as Host } from './index-fe904372.js';
-import { h as array, t as tau, j as constant, I as InteractingEntryGenerator, k as d3Select, B as BaseDrawer, a as BaseChart, L as LayoutInputProcessor, P as ProcessorChain, b as LegendInputProcessor, c as LegendDrawer } from './legendInputProcessor-b308cd2a.js';
-import { s as sanitizeVegaComponent } from './component-f8ef7dc9.js';
-import './array-195d7d64.js';
+import { r as registerInstance, h, g as getElement, H as Host } from './index-c3505689.js';
+import { h as array, t as tau, j as constant, I as InteractingEntryGenerator, k as d3Select, B as BaseDrawer, a as BaseChart, L as LayoutInputProcessor, P as ProcessorChain, b as LegendInputProcessor, c as LegendDrawer } from './legendInputProcessor-73659534.js';
+import { s as sanitizeVegaComponent } from './component-e4eb3f14.js';
+import './global-slimmer-registry-b91c742d.js';
+import { I as InjectVegaGlobalSlimmer } from './inject-vega-global-slimmer-c3f84156.js';
+import './array-e1522673.js';
 import './number-400b3bf2.js';
-import './typography-8a180b9c.js';
-import './featureFlagController-1a4a4ffc.js';
+import './typography-03d285b4.js';
 import './log-a824be80.js';
 
 function descending(a, b) {
@@ -346,6 +347,18 @@ class PieChart extends BaseChart {
   }
 }
 
+const vegaPieChartCss = ".vega-chart-legend-item{cursor:pointer}.vega-chart-line-path:hover{stroke-width:5}:host{display:block}";
+
+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 __rest = (undefined && undefined.__rest) || function (s, e) {
   var t = {};
   for (var p in s)
@@ -361,6 +374,7 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 const VegaPieChart = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.globalSlimmers = {};
   }
   watchOptionsHandel(options) {
     this.updateChart(options);
@@ -411,5 +425,9 @@ const VegaPieChart = class {
     "options": ["watchOptionsHandel"]
   }; }
 };
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaPieChart.prototype, "globalSlimmers", void 0);
+VegaPieChart.style = vegaPieChartCss;
 
 export { VegaPieChart as vega_pie_chart };

package/dist/esm/{injectElementAppender-995bcf4f.js → vega-popover_2.entry.js}

@@ -1,5 +1,25 @@
-import { E as ElementAppender } from './elementAppender-5c3f4b36.js';
-import { d as isParent, f as findParent } from './ui-8bf12791.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
@@ -132,11 +152,12 @@ class ElementAppenderListener {
     and if the target of the event is not a child of the dropdown or the trigger. If it is, then it
     hides the dropdown. */
     this.globalMouseDownHandler = (e) => {
+      const currentTarget = e.composedPath()[0];
       if (this.shouldListenerWork('custom') &&
         this.component[this.isDropdownShowName] &&
-        !isParent(e.target, this.appendableElement) &&
-        !isParent(e.target, this.target) &&
-        findParent(e.target, 'vega-modal') === findParent(this.target, 'vega-modal')) {
+        !isParent(currentTarget, this.appendableElement) &&
+        !isParent(currentTarget, this.target) &&
+        findParent(currentTarget, 'vega-modal') === findParent(this.target, 'vega-modal')) {
         this.component[this.elementAppenderName].hide();
       }
     };
@@ -202,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 };