@apia/dashboard-controller 3.0.1 → 3.0.6

package/dist/index.js

@@ -1,23 +1,2239 @@
-export { usePanelPosition } from './position/usePanelPosition.js';
-export { LandingPagePanelWrapper } from './splash/panels/LandingPagePanelWrapper.js';
-export { PanelIdentifier, PanelIdentifierContext } from './splash/panels/PanelIdentifier.js';
-export { usePanelContext } from './splash/panels/PanelContext/index.js';
-export { useYieldPanelIsReady } from './splash/panels/PanelContext/useYieldPanelIsReady.js';
-export { externalFirePanelAction } from './actions/externalFirePanelAction.js';
-export { usePanelActions } from './actions/usePanelActions.js';
-export { usePanelIsLoading } from './actions/usePanelIsLoading.js';
-export { usePanelNetworkState } from './actions/usePanelNetworkState.js';
-export { handleAction } from './actions/basicAction.js';
-export { usePanelIdentity } from './common/usePanelIdentity.js';
-export { usePanelParametersSelector } from './config/usePanelParametersSelector.js';
-export { saveParameters } from './config/saveParameters.js';
-export { parametersStore } from './config/parametersStore.js';
-export { Dashboard } from './dashboard/dashboard.js';
-export { useDashboardContext } from './dashboard/DashboardContext.js';
-export { useDashboardPanel } from './dashboard/DashboardPanelContext.js';
-export { usePanelFireEvent } from './eventsController/usePanelFireEvent.js';
-export { usePanelOnEvent } from './eventsController/usePanelOnEvent.js';
-export { eventsController } from './eventsController/eventsController.js';
-export { changePanelTitle, usePanelChangeTitle } from './panelsUtil/usePanelChangeTitle.js';
-export { createPanelStore } from './panelsStore/createPanelStore.js';
+import { ApiaApi, makeApiaUrl } from '@apia/api';
+import { EventEmitter, useMount, useImperativeComponentEvents, getLabel, makeImperativeComponent, parseXmlAsync, toBoolean, isChild, getSpecificParent, ucfirst, useLatest } from '@apia/util';
+import { createContext, useMemo, useContext, useState, useEffect, useCallback, useRef, useDeferredValue, Suspense, lazy, Component, startTransition } from 'react';
+import { jsx, jsxs, Fragment } from '@apia/theme/jsx-runtime';
+import { Icon } from '@apia/icons';
+import { spacing, responsive, getSpacingLayouts, spacingLayouts, Box, makeStyledComponent, Heading, Paragraph } from '@apia/theme';
+import { shallowEqual } from 'react-redux';
+import { createSlice, injectReducers, shallowEqual as shallowEqual$1 } from '@apia/store';
+import { IconButton, AutoEllipsis, SimpleButton } from '@apia/components';
+import { createPortal } from 'react-dom';
+
+const PanelIdentifierContext = createContext(void 0);
+const PanelIdentifier = ({
+  children,
+  name,
+  id,
+  title,
+  type
+}) => {
+  const contextValue = useMemo(() => {
+    return { panelName: name, panelId: id, panelTitle: title, panelType: type };
+  }, []);
+  return /* @__PURE__ */ jsx(PanelIdentifierContext.Provider, { value: contextValue, children });
+};
+
+function usePanelIdentity() {
+  const context = useContext(PanelIdentifierContext);
+  if (!context)
+    throw new Error("Trying to access an unexistent PanelIdentifierContext");
+  return context;
+}
+
+class PanelPositionEmitter extends EventEmitter {
+}
+const panelPositionEmitter = new PanelPositionEmitter();
+function usePanelPosition() {
+  const { panelId } = usePanelIdentity();
+  const [position, setPosition] = useState();
+  useEffect(() => {
+    return panelPositionEmitter.on("panelUpdate", (ev) => {
+      if (ev.panelId === panelId)
+        setPosition({ containerId: ev.containerId, position: ev.newPosition });
+    });
+  }, [panelId]);
+  return position;
+}
+async function updatePanelPosition(panelId, containerId, newPosition) {
+  const result = await ApiaApi.post(
+    makeApiaUrl({
+      action: "panelMove",
+      pnlId: panelId,
+      containerId,
+      newPosition
+    })
+  );
+  const hasUpdated = result?.data && !result.hasError && !result.hasMessages;
+  if (hasUpdated)
+    panelPositionEmitter.emit("panelUpdate", {
+      panelId,
+      containerId,
+      newPosition
+    });
+  return hasUpdated;
+}
+
+const DashboardPanelContext = createContext(null);
+function useDashboardPanel() {
+  const context = useContext(DashboardPanelContext);
+  if (!context)
+    throw new Error("There is no DashboardPanelContext");
+  return context;
+}
+
+var __defProp$7 = Object.defineProperty;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$7 = (obj, key, value) => {
+  __defNormalProp$7(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+const panelActionsEmitter = new class PanelActionsEmitter {
+  constructor() {
+    __publicField$7(this, "listeners", {});
+    __publicField$7(this, "on", (panelId, action, cb) => {
+      if (!this.listeners[panelId])
+        this.listeners[panelId] = {};
+      if (!this.listeners[panelId][action])
+        this.listeners[panelId][action] = [];
+      this.listeners[panelId][action].push(cb);
+      return () => {
+        this.listeners[panelId][action] = this.listeners[panelId][action].filter(
+          (current) => current !== cb
+        );
+      };
+    });
+    __publicField$7(this, "emit", (panelId, action, data) => {
+      this.listeners[panelId]?.[action]?.forEach((current) => {
+        window.requestAnimationFrame(() => {
+          current({ action, panelId, data });
+        });
+      });
+    });
+  }
+}();
+function usePanelActions(actionsHandler) {
+  const { panelId } = usePanelIdentity();
+  useMount(() => {
+    const subscriptions = [];
+    Object.entries(actionsHandler ?? {}).forEach(([action, handler]) => {
+      subscriptions.push(
+        panelActionsEmitter.on(panelId, action, (res) => {
+          handler(res.data);
+        })
+      );
+    });
+    return () => {
+      subscriptions.forEach((unsubscribe) => unsubscribe());
+    };
+  });
+  const panel = useDashboardPanel();
+  return panel.fireAction;
+}
+
+class PanelNetworkStateEmitter extends EventEmitter {
+}
+const panelNetworkStateEmitter = new PanelNetworkStateEmitter();
+const usePanelNetworkState = () => {
+  const [isConnected, setIsConnected] = useState(true);
+  const { panelId } = usePanelIdentity();
+  useEffect(() => {
+    return panelNetworkStateEmitter.on("stateChange", (ev) => {
+      if (ev.panelId === panelId && ev.isConnected !== isConnected)
+        setIsConnected(ev.isConnected);
+    });
+  }, [isConnected, panelId]);
+  return isConnected;
+};
+
+var __defProp$6 = Object.defineProperty;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$6 = (obj, key, value) => {
+  __defNormalProp$6(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+function identifierAfitsOnB(a, b) {
+  for (const key of Object.keys(a)) {
+    if (a[key] !== b[key])
+      return false;
+  }
+  return true;
+}
+const eventsController = new class EventsController {
+  constructor() {
+    __publicField$6(this, "callbacks", []);
+  }
+  broadcast(eventType, payload) {
+    const origin = {
+      panelId: "broadcast",
+      panelName: "broadcast",
+      panelType: "broadcast",
+      panelTitle: "broadcast"
+    };
+    this.callbacks.forEach(({ callback, ...current }) => {
+      if (eventType === current.eventType) {
+        callback({ ...origin, eventType, payload });
+      }
+    });
+  }
+  fireEvent(origin, eventType, payload) {
+    if ([origin.panelId, origin.panelName, origin.panelType].includes("*"))
+      throw new Error(
+        "Broadcast is not allowed through fireEvent, use broadcast instead"
+      );
+    this.callbacks.forEach(({ callback, ...current }) => {
+      if (identifierAfitsOnB(current, { ...origin, eventType })) {
+        callback({ ...origin, eventType, payload });
+      }
+    });
+  }
+  onEvent(distinction, callback) {
+    const register = {
+      ...distinction,
+      callback
+    };
+    this.callbacks.push(register);
+    return () => {
+      this.callbacks = this.callbacks.filter((current) => {
+        return current !== register;
+      });
+    };
+  }
+}();
+
+function usePanelFireEvent() {
+  const { panelId, panelName, panelType, panelTitle } = usePanelIdentity();
+  const fireEvent = useCallback(
+    (eventType, payload) => {
+      eventsController.fireEvent(
+        { panelId, panelName, panelType, panelTitle },
+        eventType,
+        payload
+      );
+    },
+    [panelId, panelName, panelType, panelTitle]
+  );
+  return fireEvent;
+}
+
+function usePanelOnEvent(distinction, callback) {
+  useEffect(() => {
+    const unsuscriber = eventsController.onEvent(distinction, callback);
+    return () => {
+      unsuscriber();
+    };
+  });
+}
+
+function changePanelTitle(panelId, newTitle) {
+  eventsController.fireEvent(
+    { panelId },
+    "changeTitle",
+    newTitle
+  );
+}
+function usePanelChangeTitle() {
+  const fireEvent = usePanelFireEvent();
+  return useCallback(
+    (newTitle) => {
+      fireEvent("changeTitle", newTitle);
+    },
+    [fireEvent]
+  );
+}
+
+function changePanelFooter(panelId, footer) {
+  eventsController.fireEvent(
+    { panelId },
+    "changeFooter",
+    footer
+  );
+}
+function usePanelFooter(panelId, { initialData }) {
+  const [footer, setFooter] = useState(
+    initialData?.footer?.footer?.text ? initialData?.footer?.footer : null
+  );
+  const handleFooterClick = useCallback(
+    (ev) => {
+      console.log(ev.type);
+      if (footer)
+        handleAction(panelId, ev, footer);
+    },
+    [footer, panelId]
+  );
+  usePanelOnEvent(
+    { eventType: "changeFooter", panelId },
+    (ev) => {
+      if (!ev.payload.text)
+        setFooter(null);
+      else
+        setFooter(ev.payload);
+    }
+  );
+  return { footer, handleFooterClick };
+}
+
+const paramsSlice = createSlice({
+  initialState: {},
+  name: "panelParameters",
+  reducers: {
+    udpate(state, {
+      payload
+    }) {
+      if (!state[payload.panelId])
+        state[payload.panelId] = {};
+      state[payload.panelId] = {
+        ...state[payload.panelId],
+        ...payload.parameters
+      };
+    }
+  }
+});
+const { store, useSelector } = injectReducers({
+  panelParameters: paramsSlice.reducer
+});
+const parametersActions = paramsSlice.actions;
+
+function saveParameters(panelId, parameters, refresh = true) {
+  store.dispatch(parametersActions.udpate({ panelId, parameters }));
+  if (refresh) {
+    panelActionsEmitter.emit(panelId, "configurationApply", {
+      data: parameters
+    });
+    firePanelAction(panelId, "refresh");
+  }
+}
+
+const DashboardContext = createContext(null);
+function useDashboardContext() {
+  const context = useContext(DashboardContext);
+  if (!context)
+    throw new Error("There is no Dashboard context");
+  return context;
+}
+
+const defaultPanelWrapperStyles = {
+  pb: spacing(6),
+  "&:last-child": {
+    pb: 0
+  },
+  ".panel__container": {
+    background: "palette.background.paper",
+    border: "1px solid",
+    borderColor: "palette.gray.800",
+    display: "flex",
+    flexDirection: "column",
+    borderRadius: "panel",
+    boxShadow: "panel"
+  },
+  ".panel__icon": {
+    height: "24px",
+    width: "24px",
+    borderRadius: "100%",
+    transform: "scale(1.25)",
+    marginRight: "6px"
+  },
+  ".panel__header": {
+    alignItems: "center",
+    cursor: "grab",
+    display: "flex",
+    flexWrap: "nowrap",
+    fontWeight: "bold",
+    justifyContent: "space-between",
+    maxWidth: "100%",
+    overflow: "visible",
+    backgroundColor: "palette.secondary.light",
+    borderBottomRightRadius: "0px !important",
+    borderBottomLeftRadius: "0px !important",
+    pl: 4,
+    py: 4,
+    borderRadius: "panel",
+    ".panel__header__left": {
+      alignItems: "center",
+      display: "flex",
+      gap: 2,
+      overflow: "visible",
+      svg: {
+        color: "palette.error.dark"
+      }
+    },
+    "& > *": {
+      flexShrink: 0
+    },
+    ".panel__header__buttons": {
+      alignSelf: "end",
+      display: "flex",
+      flexGrow: 1,
+      fontWeight: "normal",
+      gap: 2,
+      justifyContent: "end",
+      right: 0,
+      background: "transparent",
+      pr: 3,
+      opacity: responsive({ 0: 1, 3: 0 }),
+      alignItems: "center",
+      pl: 3,
+      height: "24px",
+      button: {
+        width: "30px",
+        height: "30px"
+      }
+    }
+  },
+  ".panel__content": {
+    ...getSpacingLayouts()
+  },
+  ".panel__container:hover, .panel__container:focus, .panel__container:focus-within, .panel__container.isLoading": {
+    ".panel__header__buttons, .lastUpdate__wrapper": {
+      opacity: responsive({ 0: 1 })
+    }
+  },
+  ".panel__footer": {
+    display: "flex",
+    justifyContent: "space-between",
+    gap: spacing(3),
+    background: "palette.secondary.light",
+    px: 4,
+    py: 3,
+    color: "palette.text.primary",
+    borderRadius: "panel",
+    borderTopRightRadius: "0px",
+    borderTopLeftRadius: "0px",
+    overflow: "hidden",
+    alignItems: "center"
+  },
+  ".panel__iconButton, .lastUpdate__wrapper": {
+    transition: "opacity 300ms"
+  },
+  ".lastUpdate__wrapper": {
+    fontSize: 14,
+    opacity: 0,
+    flexShrink: 0
+  },
+  ".panel__footer__text": {
+    overflow: "hidden",
+    flexShrink: 1
+  },
+  "span.panel__title": {
+    flexShrink: "1 !important"
+  }
+};
+
+const RefreshButton = (props) => {
+  const [isDisabled, setIsDisabled] = useState(false);
+  const isLoading = usePanelIsLoading();
+  const dispatch = usePanelActions();
+  useImperativeComponentEvents({
+    disable(newDisabledValue) {
+      setIsDisabled(newDisabledValue);
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      icon: "Refresh",
+      variant: "buttons.icon-outline",
+      className: "panel__iconButton",
+      size: "Md",
+      onClick: useCallback(() => {
+        void dispatch({ action: "refresh" });
+      }, [dispatch]),
+      title: getLabel("lblRefreshPnl", { text: { TOK1: props.title } }).text,
+      isLoading,
+      disabled: isDisabled
+    }
+  );
+};
+
+class ConfigEmitter extends EventEmitter {
+}
+new ConfigEmitter();
+function usePanelConfig() {
+  const { panelId } = usePanelIdentity();
+  return function config() {
+    void ApiaApi.post(
+      makeApiaUrl({
+        action: "panelEdit",
+        pnlId: panelId
+      }),
+      { handleLoad: true }
+    );
+  };
+}
+
+const SettingsButton = (props) => {
+  const { panelId } = usePanelIdentity();
+  const configure = usePanelConfig();
+  const [isDisabled, setIsDisabled] = useState(false);
+  useImperativeComponentEvents({
+    disable(newDisabledValue) {
+      setIsDisabled(newDisabledValue);
+    }
+  });
+  usePanelActions({
+    refresh() {
+      panelButtonsActions(panelId, "disable", false);
+    }
+  });
+  const openSettings = useCallback(() => {
+    try {
+      configure();
+    } catch (e) {
+    }
+  }, [configure]);
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      icon: "Settings",
+      size: "Md",
+      variant: "buttons.icon-outline",
+      className: "panel__iconButton",
+      onClick: openSettings,
+      title: getLabel("lblOpenPnlConf", { text: { TOK1: props.title } }).text,
+      disabled: isDisabled
+    }
+  );
+};
+
+const [, panelButtonsActions, PanelButtons] = makeImperativeComponent()({
+  Component: (props) => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      props.isRefreshable && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(RefreshButton, { ...props }) }),
+      props.isConfigurable && /* @__PURE__ */ jsx(SettingsButton, { title: props.title })
+    ] });
+  }
+});
+
+function usePanelContextLayout() {
+  const elRef = useRef(null);
+  const layoutRef = useRef("clever");
+  const clearClassNames = useCallback(() => {
+    spacingLayouts.forEach(
+      (current) => elRef.current?.querySelector(".panel__content")?.classList.remove(current)
+    );
+  }, []);
+  const setRef = useCallback(
+    (el) => {
+      if (el instanceof HTMLDivElement) {
+        elRef.current = el;
+        clearClassNames();
+        (el?.querySelector(".panel__content")).classList.add(
+          layoutRef.current
+        );
+      }
+    },
+    [clearClassNames]
+  );
+  const setLayout = useCallback(
+    (layout) => {
+      if (layoutRef.current === layout)
+        return;
+      layoutRef.current = layout;
+      clearClassNames();
+      elRef.current?.querySelector(".panel__content")?.classList.add(layoutRef.current);
+    },
+    [clearClassNames]
+  );
+  return { ref: setRef, setLayout };
+}
+
+function useYieldPanelIsReady() {
+  const { setRef } = usePanelContext();
+  useMount(() => {
+    setRef({});
+  });
+}
+
+const PanelContext = createContext(null);
+function usePanelContext() {
+  const context = useContext(PanelContext);
+  if (!context)
+    throw new Error("No panel wrapper context defined");
+  return context;
+}
+const PanelContextProvider = ({
+  children,
+  value
+}) => {
+  return /* @__PURE__ */ jsx(PanelContext.Provider, { value, children });
+};
+function useMakePanelContext(panelId, panelProps) {
+  const setTitle = useCallback(
+    (newTitle) => {
+      changePanelTitle(panelId, newTitle);
+    },
+    [panelId]
+  );
+  const { ref, setLayout } = usePanelContextLayout();
+  const [title, setTitleState] = useState(panelProps.title);
+  usePanelOnEvent(
+    { eventType: "changeTitle", panelId },
+    (ev) => {
+      setTitleState(ev.payload);
+    }
+  );
+  const { footer, handleFooterClick } = usePanelFooter(
+    panelId,
+    panelProps.initialData
+  );
+  const [footerContent, setFooterContent] = useState(null);
+  const dispatch = usePanelActions();
+  const hasRefreshedOnStartup = useRef(false);
+  const dashboard = useDashboardContext();
+  const setRef = useCallback(
+    (el) => {
+      if (el && !hasRefreshedOnStartup.current) {
+        hasRefreshedOnStartup.current = true;
+        if (panelProps.refreshOnStart) {
+          void dispatch({ action: "refresh" }).then(() => {
+            dashboard.bootstrapper.setPanelHasLoaded(panelId);
+          });
+        } else {
+          dashboard.bootstrapper.setPanelHasLoaded(panelId);
+        }
+      }
+    },
+    [dashboard.bootstrapper, dispatch, panelId, panelProps.refreshOnStart]
+  );
+  const contextValue = useMemo(
+    () => ({ setFooterContent, setTitle, setLayout, panelProps, setRef }),
+    [setTitle, setLayout, panelProps, setRef]
+  );
+  return { footerContent, title, footer, handleFooterClick, contextValue, ref };
+}
+
+const PanelFooter = ({
+  footerContent,
+  isRefreshable,
+  footer,
+  handleFooterClick
+}) => {
+  const [lastUpdate, setLastUpdate] = useState(0);
+  usePanelActions({
+    refresh() {
+      setLastUpdate(Date.now());
+    }
+  });
+  return /* @__PURE__ */ jsx(Fragment, { children: (isRefreshable || footer) && /* @__PURE__ */ jsxs("div", { className: "panel__footer", children: [
+    footerContent ?? (footer && (!footer.action || footer.actionBehavior === "DO_NOTHING") && /* @__PURE__ */ jsx("div", { className: "panel__footer__text", children: /* @__PURE__ */ jsx(
+      AutoEllipsis,
+      {
+        overrideStyles: (el) => {
+          const styles = window.getComputedStyle(
+            el.closest(".panel__footer")
+          );
+          const width = Number.parseInt(styles.width, 10);
+          const padding = Number.parseInt(styles.paddingLeft, 10) + Number.parseInt(styles.paddingRight, 10);
+          return {
+            width: `${width - padding}px`
+          };
+        },
+        children: footer.text
+      }
+    ) })),
+    footer?.action && footer.actionBehavior !== "DO_NOTHING" && /* @__PURE__ */ jsx(
+      SimpleButton,
+      {
+        onClick: handleFooterClick,
+        onDoubleClick: handleFooterClick,
+        variant: "link",
+        className: "panel__footer__text",
+        children: /* @__PURE__ */ jsx(
+          AutoEllipsis,
+          {
+            overrideStyles: (el) => {
+              const styles = window.getComputedStyle(
+                el.closest(".panel__footer")
+              );
+              const width = Number.parseInt(styles.width, 10);
+              const padding = Number.parseInt(styles.paddingLeft, 10) + Number.parseInt(styles.paddingRight, 10);
+              return {
+                width: `${width - padding}px`
+              };
+            },
+            children: footer.text
+          }
+        )
+      }
+    ),
+    !footer && /* @__PURE__ */ jsx("div", {}),
+    lastUpdate > 0 && /* @__PURE__ */ jsxs(Box, { className: "lastUpdate__wrapper", children: [
+      new Date(lastUpdate).toLocaleDateString(),
+      " ",
+      new Date(lastUpdate).toLocaleTimeString()
+    ] })
+  ] }) });
+};
+
+const DefaultPanelWrapper = makeStyledComponent(
+  "DefaultPanelWrapper",
+  "layout.common.dashboards.panel",
+  defaultPanelWrapperStyles,
+  ({ children, ...props }) => {
+    const { panelId, panelName, panelType } = usePanelIdentity();
+    const { contextValue, title, ref, ...footerProps } = useMakePanelContext(
+      panelId,
+      props
+    );
+    const panelTitleDescription = usePanelTitleDescription();
+    const panelImage = usePanelImage() ?? props.image;
+    const showHeader = props.showTitle || props.isConfigurable || props.isRefreshable || panelImage;
+    const isLoading = usePanelIsLoading();
+    return /* @__PURE__ */ jsx(PanelContextProvider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: `panel__container ${isLoading ? "isLoading" : ""}`,
+        "data-panelname": panelName,
+        "data-paneltype": panelType,
+        "data-panelid": panelId,
+        children: [
+          showHeader && /* @__PURE__ */ jsxs("div", { draggable: props.canMove, className: `panel__header`, children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "panel__header__left",
+                sx: {
+                  maxWidth: "80%",
+                  overflow: "hidden",
+                  whiteSpace: "nowrap"
+                },
+                children: [
+                  panelImage && !panelImage.match("(^.+null$)") && /* @__PURE__ */ jsx("img", { src: panelImage, className: "panel__icon" }),
+                  /* @__PURE__ */ jsxs(AutoEllipsis, { children: [
+                    props.showTitle && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "panel__title",
+                        title: panelTitleDescription ?? title,
+                        children: title
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(NetworkState, { title })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: `panel__header__buttons`, children: /* @__PURE__ */ jsx(PanelButtons, { ...props, id: panelId }) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "panel__content", children }),
+          /* @__PURE__ */ jsx(PanelFooter, { isRefreshable: props.isRefreshable, ...footerProps })
+        ]
+      }
+    ) });
+  }
+);
+
+var __defProp$5 = Object.defineProperty;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$5 = (obj, key, value) => {
+  __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __accessCheck$4 = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet$4 = (obj, member, getter) => {
+  __accessCheck$4(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd$4 = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet$2 = (obj, member, value, setter) => {
+  __accessCheck$4(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var _hasLoadedAll, _bootstrappedPanels, _hasLoaded, _initTimestamp, _timeoutTreshold, _checkAllHasLoaded, _removeSkeletons;
+class DashboardPanelsBootstraper {
+  constructor(dashboard) {
+    this.dashboard = dashboard;
+    __privateAdd$4(this, _hasLoadedAll, false);
+    __privateAdd$4(this, _bootstrappedPanels, {});
+    __privateAdd$4(this, _hasLoaded, {});
+    __privateAdd$4(this, _initTimestamp, Date.now());
+    __privateAdd$4(this, _timeoutTreshold, (window.DASH_COURTAIN_TRESHOLD ?? 5) * 1e3);
+    __privateAdd$4(this, _checkAllHasLoaded, () => {
+      if (__privateGet$4(this, _hasLoadedAll))
+        return true;
+      const keys = Object.keys(__privateGet$4(this, _bootstrappedPanels));
+      const hasLoadedAllPanels = !keys.find(
+        (current) => !__privateGet$4(this, _hasLoaded)[current] && this.dashboard.getPanel(current).isVisible
+      );
+      const hasTimedOutLoading = Date.now() - __privateGet$4(this, _initTimestamp) > __privateGet$4(this, _timeoutTreshold);
+      if (hasLoadedAllPanels || hasTimedOutLoading) {
+        if (hasTimedOutLoading) {
+          const nonBootstrappedPanels = Object.keys(__privateGet$4(this, _bootstrappedPanels)).filter((current) => !__privateGet$4(this, _hasLoaded)[current]).map((panelId) => {
+            const panelProps = this.dashboard.getPanel(panelId).props;
+            return panelProps;
+          });
+          console.warn(
+            `The courtain was removed because of timeout, check that all panels are reporting according to useYieldPanelIsReady's documentation. 
+
+It might have happened that all panels are reporting but the browser was too busy to handle all of them in time, in order to determine what is actually happen you can raise the DASH_COURTAIN_TRESHOLD to a very large number, like 20 for example.`,
+            { nonBootstrappedPanels }
+          );
+        }
+        __privateSet$2(this, _hasLoadedAll, true);
+        __privateGet$4(this, _removeSkeletons).call(this);
+        return true;
+      }
+      return false;
+    });
+    __privateAdd$4(this, _removeSkeletons, () => {
+      const skeleton = document.querySelector(
+        "#DashLayoutCourtain"
+      );
+      const dashContent = document.querySelector(
+        "#DashLayoutContent"
+      );
+      skeleton.style.display = "none";
+      dashContent.style.visibility = "initial";
+      skeleton.remove();
+    });
+    /**
+     * El bootstraper se basa en dos elementos: setHasLoadedInitialData y
+     * SuspendPanelUntilDashboardReady.
+     *
+     * El funcionamiento es muy elemental: Cada panel utiliza el Suspend como
+     * wrapper y éste registra el id del panel en un array de paneles pendientes
+     * por cargar.
+     *
+     * Una vez que todos los paneles cargaron, el suspense retoma su tarea y
+     * renderiza el panel normalmente.
+     */
+    __publicField$5(this, "setPanelHasLoaded", (panelId) => {
+      __privateGet$4(this, _hasLoaded)[panelId] = true;
+      this.dashboard.getPanel(panelId).setHasLoaded();
+    });
+    __publicField$5(this, "SuspendPanelUntilDashbordReady", ({
+      children,
+      panelId
+    }) => {
+      const [hasBootstraped, setHasBootstraped] = useState(false);
+      const deferredHasBootstraped = useDeferredValue(hasBootstraped);
+      __privateGet$4(this, _bootstrappedPanels)[panelId] = true;
+      const LoadWaiter = useCallback(() => {
+        if (!__privateGet$4(this, _checkAllHasLoaded).call(this))
+          void new Promise((resolve) => {
+            const interval = setInterval(() => {
+              if (__privateGet$4(this, _checkAllHasLoaded).call(this)) {
+                resolve();
+                clearInterval(interval);
+              }
+            }, 300);
+          });
+        return null;
+      }, []);
+      if (!deferredHasBootstraped)
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: (el) => {
+              if (el)
+                setHasBootstraped(true);
+            }
+          }
+        );
+      return /* @__PURE__ */ jsxs(Suspense, { fallback: null, children: [
+        children,
+        /* @__PURE__ */ jsx(LoadWaiter, {})
+      ] });
+    });
+  }
+}
+_hasLoadedAll = new WeakMap();
+_bootstrappedPanels = new WeakMap();
+_hasLoaded = new WeakMap();
+_initTimestamp = new WeakMap();
+_timeoutTreshold = new WeakMap();
+_checkAllHasLoaded = new WeakMap();
+_removeSkeletons = new WeakMap();
+
+const PanelNotFound = () => {
+  const props = usePanelIdentity();
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Heading, { children: [
+    "Panel not found: ",
+    props.panelType
+  ] }) });
+};
+
+const importedPanels = {};
+function importPanel(path) {
+  if (!importedPanels[path])
+    importedPanels[path] = lazy(() => {
+      return new Promise((resolve) => {
+        import(
+          /* webpackChunkName: "[request]" */
+          /* webpackInclude: /\.tsx?$/ */
+          /* webpackPreload: true */
+          `/panels/${path}`
+        ).then(
+          (result) => {
+            resolve(result.default);
+          }
+        ).catch(() => {
+          resolve({
+            default: PanelNotFound
+          });
+        });
+      });
+    });
+  return importedPanels[path];
+}
+
+var __defProp$4 = Object.defineProperty;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$4 = (obj, key, value) => {
+  __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+const Error2 = makeStyledComponent(
+  "Error",
+  "layout.panels.error",
+  {
+    ".panelError__wrapper": {
+      display: "flex",
+      flexDirection: "column",
+      gap: 3,
+      h3: {
+        color: "palette.error.main"
+      }
+    }
+  },
+  ({ error }) => {
+    return /* @__PURE__ */ jsxs(Box, { className: "panelError__wrapper", children: [
+      /* @__PURE__ */ jsx(Heading, { as: "h3", children: "Oops! Something went wrong" }),
+      /* @__PURE__ */ jsx(Heading, { as: "h4", children: "Error:" }),
+      /* @__PURE__ */ jsx(Paragraph, { children: error })
+    ] });
+  }
+);
+class PanelErrorBoundary extends Component {
+  constructor() {
+    super(...arguments);
+    __publicField$4(this, "state", {
+      hasError: false,
+      errorMessage: ""
+    });
+  }
+  static getDerivedStateFromError(error) {
+    if (!(error instanceof Promise))
+      return { hasError: true, errorMessage: String(error) };
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ jsx(Error2, { error: this.state.errorMessage });
+    }
+    return this.props.children;
+  }
+}
+
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$3 = (obj, key, value) => {
+  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __accessCheck$3 = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet$3 = (obj, member, getter) => {
+  __accessCheck$3(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd$3 = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var _elements, _loaders;
+const noData = { initialData: {} };
+function parameterValue(value) {
+  if (value === "true")
+    return true;
+  if (value === "false")
+    return false;
+  return value;
+}
+class DashboardPanel extends EventEmitter {
+  constructor({
+    id,
+    dashboard,
+    PanelContainer: PanelContainer2
+  }) {
+    super();
+    __publicField$3(this, "dashboard");
+    __publicField$3(this, "hasInited", false);
+    __publicField$3(this, "hasLoaded", false);
+    __publicField$3(this, "id");
+    __publicField$3(this, "initialData", null);
+    __publicField$3(this, "isVisible", false);
+    __publicField$3(this, "portal");
+    __publicField$3(this, "props", {});
+    __privateAdd$3(this, _elements, {
+      props: () => {
+        const panelData = document.querySelector(
+          `panel-props[id="${this.id}"]`
+        );
+        if (!panelData) {
+          console.error("Panel with no id:", this.id);
+          throw new Error("A panel has no data element in the DOM.");
+        }
+        return panelData;
+      }
+    });
+    __privateAdd$3(this, _loaders, {
+      loadAll: () => {
+        void __privateGet$3(this, _loaders).initialData();
+        __privateGet$3(this, _loaders).parameters();
+        __privateGet$3(this, _loaders).props();
+      },
+      initialData: () => {
+        const panel = this.getContainer();
+        const panelContent = panel.querySelector(
+          ".panel__content"
+        );
+        const xml = panelContent.innerHTML.replaceAll("&lt;", "<").replaceAll("&gt;", ">").replaceAll("&amp;", "&");
+        panelContent.innerHTML = "";
+        this.initialData = parseXmlAsync(xml.replace(/<!--?[^>]+>/, ""));
+        return this.initialData;
+      },
+      parameters: () => {
+        if (store.getState().panelParameters[this.id])
+          return;
+        const panelData = __privateGet$3(this, _elements).props();
+        const options = Object.fromEntries(
+          [...panelData.querySelectorAll("panel-option")].map(
+            (current) => {
+              return [
+                current.getAttribute("name"),
+                parameterValue(current.getAttribute("value"))
+              ];
+            }
+          )
+        );
+        const parameters = Object.fromEntries(
+          [...panelData.querySelectorAll("panel-parameter")].map(
+            (current) => {
+              return [
+                current.getAttribute("name"),
+                parameterValue(current.getAttribute("value"))
+              ];
+            }
+          )
+        );
+        saveParameters(this.id, Object.assign(options, parameters), false);
+      },
+      props: () => {
+        const panelData = __privateGet$3(this, _elements).props();
+        const panel = this.getContainer();
+        const props = {
+          id: this.id,
+          canMove: toBoolean(panelData.getAttribute("canMove")),
+          hasRss: toBoolean(panelData.getAttribute("hasRss")),
+          image: panelData.getAttribute("imagePath"),
+          isConfigurable: toBoolean(panelData.getAttribute("isConfigurable")),
+          isRefreshable: toBoolean(panelData.getAttribute("isRefreshable")),
+          name: panelData.getAttribute("name"),
+          refreshOnHome: toBoolean(panelData.getAttribute("refreshOnHome")),
+          refreshOnStart: toBoolean(panelData.getAttribute("refreshOnStart")),
+          showTitle: toBoolean(panelData.getAttribute("showTitle")),
+          title: panelData.getAttribute("title"),
+          type: panel.dataset.panel
+        };
+        this.props = props;
+      }
+    });
+    __publicField$3(this, "fireAction", ({ action, ...parameters }, options) => {
+      if (!this.isVisible)
+        return new Promise((resolve) => resolve(null));
+      const postData = {};
+      Object.entries(parameters).forEach(([name, value]) => {
+        postData[`p_${name}`] = value;
+      });
+      return new Promise((resolve, reject) => {
+        firePanelAction(this.id, action, postData, {
+          ...options,
+          onComplete(hasSucceed, data) {
+            options?.onComplete?.(hasSucceed, data);
+            if (hasSucceed) {
+              resolve(data);
+            } else
+              reject();
+          }
+        });
+      });
+    });
+    __publicField$3(this, "PanelElement", ({
+      ActualPanelContainer,
+      Element
+    }) => {
+      const [resolvedInitialData, setResolvedInitialData] = useState(null);
+      const [isVisible, setIsVisible] = useState(this.isVisible);
+      useMount(() => {
+        void this.initialData?.then((data) => {
+          setResolvedInitialData(data ?? noData);
+        });
+        return this.on(
+          "isVisible",
+          (ev) => setIsVisible((current) => ev || current)
+        );
+      });
+      if (resolvedInitialData === null || resolvedInitialData === noData)
+        return null;
+      return /* @__PURE__ */ jsx(DashboardPanelContext.Provider, { value: this, children: /* @__PURE__ */ jsx(PanelIdentifier, { ...this.props, children: /* @__PURE__ */ jsx(
+        ActualPanelContainer,
+        {
+          ...this.props,
+          initialData: resolvedInitialData,
+          children: /* @__PURE__ */ jsx(
+            this.dashboard.bootstrapper.SuspendPanelUntilDashbordReady,
+            {
+              panelId: this.id,
+              children: /* @__PURE__ */ jsx(PanelErrorBoundary, { children: isVisible ? /* @__PURE__ */ jsx(Element, { initialData: resolvedInitialData.initialData }) : null })
+            }
+          )
+        }
+      ) }) });
+    });
+    this.dashboard = dashboard;
+    this.id = id;
+    __privateGet$3(this, _loaders).loadAll();
+    this.portal = createPortal(
+      /* @__PURE__ */ jsx(
+        this.PanelElement,
+        {
+          ActualPanelContainer: PanelContainer2,
+          Element: importPanel(this.props.type)
+        }
+      ),
+      this.getContainer().querySelector(".panel__content"),
+      this.id
+    );
+  }
+  getContainer() {
+    const panel = document.querySelector(
+      `[data-id="${this.id}"][data-panel]`
+    );
+    if (!panel) {
+      console.error("Panel not found in dom:", this.id);
+      throw new Error("Panel not found in DOM.");
+    }
+    return panel;
+  }
+  getParameters() {
+    return store.getState().panelParameters[this.id];
+  }
+  hide() {
+    const container = this.getContainer();
+    container.style.display = "none";
+    container.ariaHidden = "true";
+    this.isVisible = false;
+    this.emit("isVisible", this.isVisible);
+  }
+  refresh() {
+    return this.fireAction({ action: "refresh" });
+  }
+  setHasLoaded() {
+    this.hasLoaded = true;
+    this.emit("hasLoaded", true);
+  }
+  show() {
+    const container = this.getContainer();
+    container.style.display = "block";
+    container.ariaHidden = "false";
+    this.hasInited = true;
+    this.isVisible = true;
+    this.emit("isVisible", this.isVisible);
+  }
+}
+_elements = new WeakMap();
+_loaders = new WeakMap();
+
+function dragleave(_ev, DragAndDrop2) {
+  const ev = _ev;
+  if (ev.relatedTarget === null || isChild(ev.relatedTarget, (current) => {
+    return current.parentElement === null && current === document.getRootNode() && current.dataset.splash === void 0;
+  })) {
+    const shadows = document.querySelectorAll(".apia_panel_falseDiv");
+    shadows.forEach((el) => el.remove());
+    DragAndDrop2.draggingPanel?.setAttribute("style", "");
+  }
+}
+
+const isCursorInArea = ({
+  top,
+  bottom,
+  left,
+  right,
+  cursorX,
+  cursorY
+}) => {
+  return top <= cursorY && cursorY <= bottom && left <= cursorX && cursorX <= right;
+};
+
+const getColumnAreas = (specificPanel) => {
+  return {
+    top: {
+      top: specificPanel.panelTop,
+      bottom: specificPanel.panelTop + specificPanel.panelHeight / 2,
+      left: specificPanel.panelLeft,
+      right: specificPanel.panelRight
+    },
+    bottom: {
+      top: specificPanel.panelBottom - specificPanel.panelHeight / 2,
+      bottom: specificPanel.panelBottom,
+      right: specificPanel.panelRight,
+      left: specificPanel.panelLeft
+    }
+  };
+};
+
+function dragover(event, DragAndDrop2) {
+  const ev = event;
+  ev.preventDefault();
+  DragAndDrop2.timeout = -1;
+  if ((ev.clientX !== DragAndDrop2.dragoverPosition.x || ev.clientY !== DragAndDrop2.dragoverPosition.y) && DragAndDrop2.draggingPanelId !== "" && DragAndDrop2.shadowDiv) {
+    DragAndDrop2.clearTimeout();
+    DragAndDrop2.currentBottomPanel = DragAndDrop2.findBottomPanel(
+      ev.clientX,
+      ev.clientY + DragAndDrop2.currentScroll
+    );
+    DragAndDrop2.dragoverPosition.x = ev.clientX;
+    DragAndDrop2.dragoverPosition.y = ev.clientY;
+    const snapshotSection = DragAndDrop2.findBottomSection(
+      ev.clientX,
+      ev.clientY + DragAndDrop2.currentScroll
+    );
+    if (DragAndDrop2.shadowDivData && isCursorInArea({
+      cursorX: ev.clientX,
+      cursorY: ev.clientY + DragAndDrop2.currentScroll,
+      bottom: DragAndDrop2.shadowDivData?.panelBottom,
+      top: DragAndDrop2.shadowDivData?.panelTop,
+      left: DragAndDrop2.shadowDivData?.panelLeft,
+      right: DragAndDrop2.shadowDivData?.panelRight
+    })) {
+      return;
+    }
+    if (DragAndDrop2.currentBottomPanel && snapshotSection) {
+      const bottomPanel = DragAndDrop2.splash.querySelector(
+        `[data-panel][data-id='${DragAndDrop2.currentBottomPanel.id}']`
+      );
+      const draggingPanel = DragAndDrop2.splash.querySelector(
+        `[data-panel][data-id='${DragAndDrop2.draggingPanelId}']`
+      );
+      const bottomSection = DragAndDrop2.splash.querySelector(
+        `[data-locationid='${snapshotSection.sectionId}']`
+      );
+      if (bottomSection) {
+        if (isCursorInArea({
+          cursorX: ev.clientX,
+          cursorY: ev.clientY + DragAndDrop2.currentScroll,
+          ...getColumnAreas({
+            ...DragAndDrop2.currentBottomPanel,
+            panelLeft: bottomSection?.getBoundingClientRect().left ?? 0,
+            panelRight: bottomSection?.getBoundingClientRect().right ?? 0
+          }).top
+        })) {
+          if (draggingPanel) {
+            draggingPanel.setAttribute("style", "display: none; height: 0;");
+          }
+          if (bottomPanel && snapshotSection) {
+            if (bottomSection) {
+              DragAndDrop2.shadowDiv.setAttribute("style", "opacity: 50%;");
+              DragAndDrop2.debounceBefore(
+                bottomPanel,
+                DragAndDrop2.shadowDiv,
+                bottomSection
+              );
+              DragAndDrop2.snapshot();
+              DragAndDrop2.clearTimeout();
+            }
+          }
+        } else if (isCursorInArea({
+          cursorX: ev.clientX,
+          cursorY: ev.clientY + DragAndDrop2.currentScroll,
+          ...getColumnAreas({
+            ...DragAndDrop2.currentBottomPanel,
+            panelLeft: bottomSection?.getBoundingClientRect().left ?? 0,
+            panelRight: bottomSection?.getBoundingClientRect().right ?? 0
+          }).bottom
+        })) {
+          const bottomPanel2 = DragAndDrop2.splash.querySelector(
+            `[data-panel][data-id='${DragAndDrop2.currentBottomPanel.id}']`
+          );
+          const draggingPanel2 = DragAndDrop2.splash.querySelector(
+            `[data-panel][data-id='${DragAndDrop2.draggingPanelId}']`
+          );
+          if (draggingPanel2) {
+            draggingPanel2.setAttribute("style", "display: none;");
+          }
+          if (bottomPanel2 && snapshotSection) {
+            const bottomSection2 = DragAndDrop2.splash.querySelector(
+              `[data-locationid='${snapshotSection.sectionId}']`
+            );
+            if (bottomSection2) {
+              DragAndDrop2.shadowDiv.setAttribute("style", "opacity: 50%;");
+              DragAndDrop2.debounceAfter(DragAndDrop2.shadowDiv, bottomPanel2);
+              DragAndDrop2.snapshot();
+              DragAndDrop2.clearTimeout();
+            }
+          }
+        }
+      }
+    } else if (!DragAndDrop2.currentBottomPanel && snapshotSection) {
+      const bottomSection = DragAndDrop2.splash.querySelector(
+        `[data-locationid='${snapshotSection.sectionId}']`
+      );
+      if (bottomSection) {
+        const draggingPanel = DragAndDrop2.splash.querySelector(
+          `[data-panel][data-id='${DragAndDrop2.draggingPanelId}']`
+        );
+        if (draggingPanel) {
+          draggingPanel.setAttribute("style", "display: none;");
+        }
+        DragAndDrop2.shadowDiv.setAttribute("style", "opacity: 50%;");
+        DragAndDrop2.debounceAppend(
+          bottomSection,
+          DragAndDrop2.shadowDiv
+        );
+        DragAndDrop2.snapshot();
+        DragAndDrop2.clearTimeout();
+      }
+    }
+  }
+}
+
+function dragstart(ev, el, DragAndDrop2) {
+  if (!(el instanceof HTMLElement))
+    return;
+  DragAndDrop2.drawMinimap();
+  DragAndDrop2.sectionData = [];
+  const targetPanel = getSpecificParent(
+    ev.target,
+    (current) => !!current.dataset?.id && !!current.dataset?.panel
+  );
+  ev?.dataTransfer?.setData("text", targetPanel?.dataset.id);
+  if (targetPanel) {
+    DragAndDrop2.placeholderImage = targetPanel.cloneNode(true);
+    DragAndDrop2.placeholderImage.style.position = "fixed";
+    DragAndDrop2.placeholderImage.style.top = "-10000000.45px";
+    const children = DragAndDrop2.placeholderImage.querySelectorAll("*");
+    children.forEach((current) => current.style.overflow = "hidden");
+    document.body.append(DragAndDrop2.placeholderImage);
+    ev?.dataTransfer?.setDragImage(DragAndDrop2.placeholderImage, 0, 0);
+  }
+  if (ev.dataTransfer) {
+    ev.dataTransfer.effectAllowed = "move";
+  }
+  setTimeout(() => {
+    const targetSection = getSpecificParent(
+      ev.target,
+      (current) => !!current.dataset?.locationid
+    );
+    const sections = DragAndDrop2.body?.querySelectorAll("[data-locationid]");
+    const emptySectionsId = [];
+    sections?.forEach((sec) => {
+      if (sec.children.length === 0) {
+        emptySectionsId.push(sec.dataset.locationid ?? "");
+      }
+    });
+    emptySectionsId.forEach((emptySecId) => {
+      const section = DragAndDrop2.body?.querySelector(
+        `[data-locationid="${emptySecId}"]`
+      );
+      if (section) {
+        section.setAttribute("style", "padding: 10px; border:2px dashed #ccc");
+      }
+    });
+    DragAndDrop2.snapshot();
+    if (targetPanel) {
+      DragAndDrop2.draggingPanelSectionId = targetSection?.dataset.locationid ?? "";
+      DragAndDrop2.draggingPanelId = targetPanel.dataset.id;
+      DragAndDrop2.draggingPanel = targetPanel;
+    }
+    if (DragAndDrop2.draggingPanelId === "") {
+      return;
+    }
+    const falseDiv = targetPanel?.cloneNode(true);
+    falseDiv.style.opacity = `50%`;
+    falseDiv.style.width = `100%`;
+    falseDiv.style.height = `auto`;
+    falseDiv.style.backgroundColor = `rgba(0,0,0,0.1)`;
+    falseDiv.className = "apia_panel_falseDiv";
+    DragAndDrop2.shadowDiv = falseDiv;
+  }, 0);
+}
+
+function Drop(event, DragAndDrop2) {
+  if (DragAndDrop2.body) {
+    const ev = event;
+    const data = ev?.dataTransfer?.getData("text");
+    const sections = DragAndDrop2.body?.querySelectorAll("[data-locationid]");
+    sections.forEach((sec) => {
+      sec.setAttribute("style", "");
+    });
+    const draggingPanel = DragAndDrop2.body.querySelector(
+      `[data-panel][data-id="${DragAndDrop2.draggingPanelId}"]:not(.apia_panel_falseDiv)`
+    );
+    if (draggingPanel) {
+      draggingPanel.setAttribute("style", "");
+    }
+    const falseDiv = document.querySelector(".apia_panel_falseDiv");
+    if (data) {
+      const child = document.querySelector(
+        `[data-panel][data-id="${data}"]:not(.apia_panel_falseDiv)`
+      );
+      sections.forEach((sec) => {
+        if (sec.children.length === 1) {
+          sec.setAttribute("style", "");
+        }
+      });
+      if (falseDiv) {
+        const newSection = getSpecificParent(
+          falseDiv,
+          (current) => !!current.dataset.locationid
+        );
+        if (newSection) {
+          const panelsArray = Array.from(newSection.children);
+          const childId = child.dataset.id;
+          if (childId) {
+            const index = panelsArray.findIndex(
+              (panel) => panel.dataset.id === childId
+            );
+            if (typeof index === "number" && newSection.dataset.locationid) {
+              void updatePanelPosition(
+                childId,
+                newSection.dataset.locationid,
+                index + 1
+              );
+            }
+          }
+        }
+        falseDiv.replaceWith(child);
+      }
+    }
+    DragAndDrop2.draggingPanelId = "";
+    DragAndDrop2.panelData = [];
+    DragAndDrop2.drawMinimap();
+    DragAndDrop2.removePlaceholder();
+  }
+}
+
+var __defProp$2 = Object.defineProperty;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$2 = (obj, key, value) => {
+  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __accessCheck$2 = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet$2 = (obj, member, getter) => {
+  __accessCheck$2(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd$2 = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet$1 = (obj, member, value, setter) => {
+  __accessCheck$2(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var _unsuscribers;
+class DragAndDrop {
+  constructor() {
+    __privateAdd$2(this, _unsuscribers, []);
+    __publicField$2(this, "bootstrap", () => {
+      __privateGet$2(this, _unsuscribers).forEach((unsuscribe) => unsuscribe());
+      __privateSet$1(this, _unsuscribers, []);
+      this.body.addEventListener("dragover", this.dragOver);
+      this.body.addEventListener("drop", this.drop);
+      __privateGet$2(this, _unsuscribers).push(() => {
+        this.body.removeEventListener("dragover", this.dragOver);
+        this.body.removeEventListener("drop", this.drop);
+      });
+      if (this.splash) {
+        this.splash.addEventListener("dragleave", this.dragLeave);
+        this.splash.addEventListener("dragenter", this.dragEnter);
+        this.body.addEventListener("dragenter", this.dragEnter);
+        __privateGet$2(this, _unsuscribers).push(() => {
+          this.splash.removeEventListener("dragleave", this.dragLeave);
+          this.splash.removeEventListener("dragenter", this.dragEnter);
+          this.body.removeEventListener("dragenter", this.dragEnter);
+        });
+      }
+      this.panels.map((el) => {
+        el.addEventListener("dragstart", (ev) => {
+          this.dragStart(ev, el);
+        });
+        __privateGet$2(this, _unsuscribers).push(() => {
+          el.removeEventListener("dragstart", (ev) => {
+            this.dragStart(ev, el);
+          });
+        });
+        return el;
+      });
+    });
+    __publicField$2(this, "panelData", []);
+    __publicField$2(this, "minimap", null);
+    __publicField$2(this, "timeout", -1);
+    __publicField$2(this, "sectionData", []);
+    __publicField$2(this, "body", document.querySelector("[data-layout]"));
+    __publicField$2(this, "splash", document.querySelector("[data-splash]"));
+    __publicField$2(this, "dragoverPosition", { x: 0, y: 0 });
+    __publicField$2(this, "shadowDivData", null);
+    __publicField$2(this, "shadowDiv", null);
+    __publicField$2(this, "placeholderImage", null);
+    __publicField$2(this, "panels", [
+      ...document.querySelectorAll("[data-panel][data-id]")
+    ]);
+    __publicField$2(this, "currentScroll", document.scrollingElement?.scrollTop ?? 0);
+    __publicField$2(this, "draggingPanel", null);
+    __publicField$2(this, "draggingPanelId", "");
+    __publicField$2(this, "draggingPanelSectionId", "");
+    __publicField$2(this, "currentBottomPanel");
+    __publicField$2(this, "updateMinimap", () => {
+      const frameElement = document.querySelector(".windowFrame");
+      if (frameElement) {
+        frameElement.style.top = `${(document.scrollingElement?.scrollTop ?? 0) * Number(frameElement.dataset.aspect)}px`;
+      }
+    });
+    __publicField$2(this, "removePlaceholder", () => {
+      this.clearTimeout();
+      const falseDivs = document.querySelectorAll(".apia_panel_falseDiv");
+      falseDivs.forEach((el) => {
+        el.remove();
+      });
+      this.placeholderImage?.remove();
+      this.placeholderImage = null;
+    });
+    __publicField$2(this, "clearTimeout", () => {
+      clearTimeout(this.timeout);
+    });
+    __publicField$2(this, "debounceAppend", (target, child) => {
+      if (!this.draggingPanelId)
+        return;
+      if (this.timeout === -1) {
+        target.appendChild(child);
+      }
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(() => {
+        target.appendChild(child);
+      }, 500);
+    });
+    __publicField$2(this, "debounceBefore", (reference, child, container) => {
+      if (!this.draggingPanelId)
+        return;
+      if (this.timeout === -1)
+        container.insertBefore(child, reference);
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(() => {
+        container.insertBefore(child, reference);
+      }, 500);
+    });
+    __publicField$2(this, "debounceAfter", (child, reference) => {
+      if (!this.draggingPanelId)
+        return;
+      if (this.timeout === -1)
+        reference.after(child);
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(() => {
+        reference.after(child);
+      }, 500);
+    });
+    __publicField$2(this, "dragOver", (event) => {
+      dragover(event, this);
+      this.updateMinimap();
+    });
+    __publicField$2(this, "dragStart", (ev, el) => {
+      dragstart(ev, el, this);
+    });
+    __publicField$2(this, "dragLeave", (_ev) => {
+      dragleave(_ev, this);
+    });
+    __publicField$2(this, "dragEnter", (_ev) => {
+      _ev.preventDefault();
+    });
+    __publicField$2(this, "drop", (event) => {
+      Drop(event, this);
+    });
+    __publicField$2(this, "snapshot", () => {
+      this.panelData = [];
+      const innerPanels = this.body.querySelectorAll(
+        "[data-panel][data-id]"
+      );
+      innerPanels.forEach((panel) => {
+        if (panel.classList.contains("apia_panel_falseDiv")) {
+          this.shadowDivData = {
+            id: panel.getAttribute("data-id") ?? "",
+            isShadow: true,
+            panelBottom: panel.getBoundingClientRect().bottom + this.currentScroll,
+            panelTop: panel.getBoundingClientRect().top + this.currentScroll,
+            panelRight: panel.getBoundingClientRect().right,
+            panelLeft: panel.getBoundingClientRect().left,
+            panelWidth: panel.getBoundingClientRect().width,
+            panelHeight: panel.getBoundingClientRect().height,
+            row: getSpecificParent(
+              panel,
+              (current) => !!current.dataset.locationid
+            )?.classList.contains("apia_section_row") ?? false,
+            sectionId: getSpecificParent(
+              panel,
+              (current) => !!current.dataset.locationid
+            )?.dataset.locationid ?? 0
+          };
+        }
+        if (this.panelData.every((innerPanel) => {
+          return innerPanel.id !== panel.getAttribute("data-id") && !panel.classList.contains("apia_panel_falseDiv");
+        })) {
+          this.panelData.push({
+            isShadow: panel.classList.contains("apia_panel_falseDiv"),
+            panelBottom: panel.getBoundingClientRect().bottom + this.currentScroll,
+            panelTop: panel.getBoundingClientRect().top + this.currentScroll,
+            panelRight: panel.getBoundingClientRect().right,
+            panelLeft: panel.getBoundingClientRect().left,
+            panelWidth: panel.getBoundingClientRect().width,
+            panelHeight: panel.getBoundingClientRect().height,
+            row: getSpecificParent(
+              panel,
+              (current) => !!current.dataset.locationid
+            )?.classList.contains("apia_section_row") ?? false,
+            sectionId: getSpecificParent(
+              panel,
+              (current) => !!current.dataset.locationid
+            )?.dataset.locationid ?? 0,
+            id: getSpecificParent(
+              panel,
+              (current) => !!current.dataset.id
+            )?.dataset.id ?? 0
+          });
+        }
+      });
+      this.sectionData = [];
+      const sections = this.body?.querySelectorAll("[data-locationid]");
+      sections?.forEach((sec) => {
+        if (this.sectionData.every(
+          (innerSection) => innerSection.sectionId !== sec.getAttribute("data-locationid")
+        )) {
+          this.sectionData.push({
+            sectionBottom: sec.getBoundingClientRect().bottom + this.currentScroll,
+            sectionLeft: sec.getBoundingClientRect().left,
+            sectionTop: sec.getBoundingClientRect().top + this.currentScroll,
+            sectionRight: sec.getBoundingClientRect().right,
+            sectionWidth: sec.getBoundingClientRect().width,
+            sectionHeight: sec.getBoundingClientRect().height,
+            sectionId: getSpecificParent(
+              sec,
+              (current) => !!current.dataset.locationid
+            )?.dataset.locationid ?? 0
+          });
+        }
+      });
+      this.drawMinimap();
+    });
+    __publicField$2(this, "findBottomPanel", (x, y) => {
+      const bottomPanel = this.panelData.find((panel) => {
+        return panel.panelBottom >= y && panel.panelTop <= y && panel.panelLeft <= x && panel.panelRight >= x;
+      });
+      return bottomPanel;
+    });
+    __publicField$2(this, "findBottomSection", (x, y) => {
+      const bottomSection = this.sectionData.find((sec) => {
+        return sec.sectionBottom >= y && sec.sectionTop <= y && sec.sectionLeft <= x && sec.sectionRight >= x;
+      });
+      return bottomSection;
+    });
+  }
+  drawMinimap() {
+    return;
+  }
+}
+_unsuscribers = new WeakMap();
+
+var __defProp$1 = Object.defineProperty;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$1 = (obj, key, value) => {
+  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __accessCheck$1 = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet$1 = (obj, member, getter) => {
+  __accessCheck$1(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd$1 = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var _matchLocation, _evalRoutes;
+class Router extends EventEmitter {
+  constructor() {
+    super();
+    __privateAdd$1(this, _matchLocation, (regexp) => {
+      const path = "/" + (window.location.href.replaceAll("%20", " ").match(new RegExp(`${window.CONTEXT}/?([^?]+)?(?:\\?.*)?`))?.[1] ?? "");
+      return path.match(regexp);
+    });
+    __privateAdd$1(this, _evalRoutes, (routes) => {
+      for (let i = 0; i < routes.length; i++) {
+        const match = __privateGet$1(this, _matchLocation).call(this, routes[i].route);
+        if (match) {
+          return { route: routes[i], match };
+        }
+      }
+    });
+    /**
+     * Se evaluarán las rutas en orden y la primera en coincidir será tomada como
+     * resultado del cambio de ruta.
+     *
+     * Las rutas provistas deberán matchear contra el path actual. El path actual
+     * es la porción de la ruta luego del dominio y el contexto. Ejemplo:
+     *
+     * http://localhost/apia                              =>      path='/'
+     * http://localhost/apia/spa/categories/comidas/1     =>      path='/spa/categories/comidas/1'
+     */
+    __publicField$1(this, "useSwitch", (routes) => {
+      const lastMatch = useRef(null);
+      useMount(() => {
+        const result = __privateGet$1(this, _evalRoutes).call(this, routes);
+        if (result) {
+          result.route.callback(result.match);
+        }
+        return this.on("newRoute", () => {
+          const result2 = __privateGet$1(this, _evalRoutes).call(this, routes);
+          if (result2 && !shallowEqual(result2.match, lastMatch.current)) {
+            result2.route.callback(result2.match);
+          }
+        });
+      });
+    });
+    window.addEventListener("popstate", () => {
+      this.emit("newRoute", window.location.href);
+    });
+  }
+}
+_matchLocation = new WeakMap();
+_evalRoutes = new WeakMap();
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var _currentScene, _dragAndDrop, _PanelContainer, _panelsRenderedPortals, _loadPanels, _Context, _suscribeToEvents, _usePanelsList, _SceneRenderer;
+class Dashboard extends EventEmitter {
+  constructor(panelsContainer = DefaultPanelWrapper, urlContext) {
+    super();
+    this.urlContext = urlContext;
+    __publicField(this, "bootstrapper", new DashboardPanelsBootstraper(this));
+    __publicField(this, "panels", null);
+    __publicField(this, "router", new Router());
+    __publicField(this, "scenes", {});
+    __privateAdd(this, _currentScene, "/");
+    __privateAdd(this, _dragAndDrop, new DragAndDrop());
+    __privateAdd(this, _PanelContainer, DefaultPanelWrapper);
+    __privateAdd(this, _panelsRenderedPortals, []);
+    __publicField(this, "getPanel", (id) => this.panels?.[id]);
+    __publicField(this, "getPanelByName", (name) => Object.values(this.panels ?? {}).find(
+      (current) => current.props.name === name
+    ));
+    __privateAdd(this, _loadPanels, () => {
+      this.panels = {};
+      const panelsElements = document.querySelectorAll(
+        "[data-panel]"
+      );
+      Array.from(panelsElements).forEach((current) => {
+        const panel = new DashboardPanel({
+          dashboard: this,
+          PanelContainer: __privateGet(this, _PanelContainer),
+          id: current.dataset.id
+        });
+        let panelPath = panel.getParameters().PAR_SPA_PATH || "*";
+        if (panelPath === "/")
+          panelPath = `/${this.urlContext}`;
+        if (panelPath !== "*")
+          panel.hide();
+        else
+          panel.show();
+        const paths = panelPath.split(",");
+        paths.forEach((currentPath) => {
+          if (!this.scenes[currentPath])
+            this.scenes[currentPath] = [];
+          this.scenes[currentPath].push(panel.props.id);
+        });
+        this.panels[panel.props.id] = panel;
+        __privateGet(this, _panelsRenderedPortals).push(panel.portal);
+      });
+      __privateGet(this, _dragAndDrop).bootstrap();
+    });
+    __privateAdd(this, _Context, ({ children }) => {
+      return /* @__PURE__ */ jsx(DashboardContext.Provider, { value: this, children });
+    });
+    __privateAdd(this, _suscribeToEvents, () => {
+      eventsController.onEvent({ eventType: "dashboard__focus" }, () => {
+        Object.values(this.panels ?? {}).forEach((current) => {
+          if (current.props.refreshOnHome) {
+            void current.refresh();
+          }
+        });
+      });
+    });
+    __privateAdd(this, _usePanelsList, () => {
+      const [panels, setPanels] = useState(null);
+      const deferredPanels = useDeferredValue(panels);
+      useMount(() => {
+        this.loadScene();
+        setPanels(__privateGet(this, _panelsRenderedPortals));
+      });
+      this.router.useSwitch([
+        {
+          route: new RegExp(`(?:/spa)?/(\\w+)`),
+          callback: (result) => {
+            console.log("Dashboard", { scene: result[1] });
+            this.loadScene(result[1]);
+          }
+        },
+        {
+          route: new RegExp(`/`),
+          callback: () => {
+            console.log("Dashboard", { noScene: "/" });
+            this.loadScene("/");
+          }
+        }
+      ]);
+      return deferredPanels;
+    });
+    __privateAdd(this, _SceneRenderer, () => {
+      const Context = __privateGet(this, _Context);
+      const panels = __privateGet(this, _usePanelsList).call(this);
+      return /* @__PURE__ */ jsx(Context, { children: panels });
+    });
+    __publicField(this, "loadScene", (scene = __privateGet(this, _currentScene)) => {
+      let actualScene = scene;
+      if (!actualScene.startsWith("/"))
+        actualScene = `/${actualScene}`;
+      if (!this.panels)
+        __privateGet(this, _loadPanels).call(this);
+      if (!this.scenes[actualScene])
+        this.scenes[actualScene] = [];
+      this.scenes[__privateGet(this, _currentScene)].forEach((scenePanelId) => {
+        if (!this.scenes[actualScene].includes(scenePanelId))
+          this.panels?.[scenePanelId]?.hide();
+      });
+      this.scenes[actualScene].forEach((scenePanelIds) => {
+        const panel = this.panels?.[scenePanelIds];
+        if (panel) {
+          panel.show();
+          if (panel.hasInited && panel.props.refreshOnStart)
+            void panel.refresh();
+        }
+      });
+      __privateSet(this, _currentScene, actualScene);
+      return __privateGet(this, _panelsRenderedPortals);
+    });
+    __publicField(this, "Component", () => {
+      const R = __privateGet(this, _SceneRenderer);
+      return /* @__PURE__ */ jsx(R, {});
+    });
+    __privateSet(this, _currentScene, `/`);
+    __privateSet(this, _PanelContainer, panelsContainer ?? __privateGet(this, _PanelContainer));
+    __privateGet(this, _suscribeToEvents).call(this);
+  }
+}
+_currentScene = new WeakMap();
+_dragAndDrop = new WeakMap();
+_PanelContainer = new WeakMap();
+_panelsRenderedPortals = new WeakMap();
+_loadPanels = new WeakMap();
+_Context = new WeakMap();
+_suscribeToEvents = new WeakMap();
+_usePanelsList = new WeakMap();
+_SceneRenderer = new WeakMap();
+
+function usePanelParametersSelector(selector, panelName) {
+  const { panelId } = usePanelIdentity();
+  const dashboard = useDashboardContext();
+  const id = panelName !== void 0 ? dashboard.getPanelByName(panelName)?.id ?? "" : panelId;
+  return useSelector((global) => {
+    const currentParams = global.panelParameters[id];
+    return selector(currentParams ?? {});
+  }, shallowEqual);
+}
+
+const panelActionParameterName = "__panelTitleAction";
+const panelImageParameterName = "__panelImageAction";
+const panelDescriptionParameterName = "__panelTitleDescription";
+function setPanelTitleAction(panelId, newAction) {
+  store.dispatch(
+    parametersActions.udpate({
+      panelId,
+      parameters: { [panelActionParameterName]: newAction }
+    })
+  );
+}
+function setPanelTitleDescritpion(panelId, newDescription) {
+  store.dispatch(
+    parametersActions.udpate({
+      panelId,
+      parameters: { [panelDescriptionParameterName]: newDescription }
+    })
+  );
+}
+function setPanelImageAction(panelId, newImage) {
+  store.dispatch(
+    parametersActions.udpate({
+      panelId,
+      parameters: { [panelImageParameterName]: newImage }
+    })
+  );
+}
+function usePanelTitleAction() {
+  return usePanelParametersSelector(
+    (current) => current[panelActionParameterName]
+  );
+}
+function usePanelImage() {
+  return usePanelParametersSelector(
+    (current) => current[panelImageParameterName]
+  );
+}
+function usePanelTitleDescription() {
+  return usePanelParametersSelector(
+    (current) => current[panelDescriptionParameterName]
+  );
+}
+
+function firePanelAction(panelId, action, parameters, options) {
+  const postData = { p_action: action, ...parameters };
+  panelActionsEmitter.emit(panelId, `pre${ucfirst(action)}`, null);
+  void ApiaApi.post(
+    makeApiaUrl({
+      action: "panelAction",
+      pnlId: panelId
+    }),
+    { postData, postDataTreatement: "stringify", ...options?.requestConfig }
+  ).then((result) => {
+    if (result?.status !== 200) {
+      console.log("ERROR", panelId);
+      panelNetworkStateEmitter.emit("stateChange", {
+        panelId,
+        isConnected: false
+      });
+    } else {
+      panelNetworkStateEmitter.emit("stateChange", {
+        panelId,
+        isConnected: true
+      });
+    }
+    try {
+      if (result) {
+        startTransition(() => {
+          if (result?.data?.title) {
+            changePanelTitle(
+              panelId,
+              result?.data?.title
+            );
+          }
+          if (result?.data?.footer) {
+            changePanelFooter(
+              panelId,
+              result?.data?.footer
+            );
+          }
+          if (result?.data?.titleAction) {
+            setPanelTitleAction(panelId, result?.data?.titleAction);
+          }
+          if (result?.data?.image) {
+            setPanelImageAction(panelId, result?.data?.image);
+          }
+          if (result?.data?.titleDescription) {
+            setPanelTitleDescritpion(
+              panelId,
+              result?.data?.titleDescription
+            );
+          }
+          options?.onComplete?.(true, result);
+          panelActionsEmitter.emit(panelId, action, result);
+        });
+      } else
+        options?.onComplete?.(false, null);
+    } catch (e) {
+      console.error(e);
+    }
+  }).catch((e) => {
+    console.error(e);
+    panelNetworkStateEmitter.emit("stateChange", {
+      panelId,
+      isConnected: false
+    });
+    options?.onComplete?.(false, null);
+  });
+}
+
+function handleAction(panelId, event, action) {
+  if (event.type === "dblclick" && action.actionSource === "DOUBLE_CLICK" || (event.type === "click" || event.type === "mousedown") && action.actionSource === "CLICK" || event.type === "keydown" && event.code === "Enter") {
+    if (action?.action) {
+      switch (action.actionBehavior) {
+        case "CALL_AJAX_URL":
+          void ApiaApi.post(action.action, { handleLoad: true });
+          break;
+        case "DO_NOTHING":
+          break;
+        case "NAVIGATE_URL":
+          window.location.assign(action.action);
+          break;
+        case "OPEN_TAB":
+          window.top?.tabsController.openTabByUrl(
+            action.actionNewTabTitle || action.text,
+            action.action
+          );
+          break;
+        case "RUN_ACTION":
+          firePanelAction(
+            panelId,
+            action.action,
+            {},
+            { requestConfig: {
+              handleLoad: true
+            } }
+          );
+          break;
+        default:
+          console.error("Unknown action behavior: ", action);
+      }
+    }
+  }
+}
+
+const externalFirePanelAction = (panelId, { action, ...parameters }, options) => {
+  const postData = {};
+  Object.entries(parameters).forEach(([name, value]) => {
+    postData[`p_${name}`] = value;
+  });
+  firePanelAction(panelId, action, postData, options);
+};
+
+function usePanelIsLoading() {
+  const [isLoading, setIsLoading] = useState(false);
+  usePanelActions({
+    preRefresh: () => setIsLoading(true),
+    refresh: () => setIsLoading(false)
+  });
+  return isLoading;
+}
+
+const NetworkState = ({ title }) => {
+  const isConnected = usePanelNetworkState();
+  return /* @__PURE__ */ jsx(Fragment, { children: !isConnected && /* @__PURE__ */ jsx(
+    Icon,
+    {
+      tabIndex: 0,
+      title: getLabel("lblTestDBNoOk", {
+        text: {
+          TOK1: title
+        }
+      }).text,
+      "aria-label": getLabel("lblTestDBNoOk", {
+        text: {
+          TOK1: title
+        }
+      }).text,
+      name: "Alert"
+    }
+  ) });
+};
+
+const LandingPagePanelWrapper = ({
+  children,
+  ...props
+}) => {
+  const { panelId, panelName, panelType } = usePanelIdentity();
+  const { contextValue, title, ref, ...footerProps } = useMakePanelContext(
+    panelId,
+    props
+  );
+  const panelTitleAction = usePanelTitleAction();
+  const panelTitleDescription = usePanelTitleDescription();
+  const dashboard = useDashboardContext();
+  if (dashboard.getPanel(panelId).props.hasRss)
+    console.log(dashboard.getPanel(panelId).props);
+  return /* @__PURE__ */ jsx(PanelContextProvider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "panel__container",
+      "data-panelname": panelName,
+      "data-paneltype": panelType,
+      "data-panelid": panelId,
+      ref,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "panel__header", children: /* @__PURE__ */ jsxs("div", { className: "panel__header__left", children: [
+          props.showTitle && /* @__PURE__ */ jsx("span", { className: "panel__title", children: panelTitleAction ? /* @__PURE__ */ jsx(
+            "a",
+            {
+              title: panelTitleDescription,
+              className: "panel__title__link",
+              href: panelTitleAction,
+              children: title
+            }
+          ) : title }),
+          /* @__PURE__ */ jsx(NetworkState, { title })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "panel__content", children }),
+        /* @__PURE__ */ jsx(PanelFooter, { isRefreshable: false, ...footerProps })
+      ]
+    }
+  ) });
+};
+
+const reducers = {};
+function initPanelTypeUpdater(panelType) {
+  if (!reducers[panelType]) {
+    reducers[panelType] = {
+      defaultReducer: (panelsState, payload) => {
+        Object.assign(panelsState, payload);
+      }
+    };
+  }
+}
+function registerReducers(panelType, newReducers) {
+  initPanelTypeUpdater(panelType);
+  Object.assign(reducers[panelType], newReducers);
+}
+function initPanelState(state, panelType, panelId, initialState) {
+  if (!state[panelType]) {
+    state[panelType] = {};
+  }
+  if (!state[panelType][panelId])
+    state[panelType][panelId] = {};
+  state[panelType][panelId] = initialState;
+}
+const panelsSlice = createSlice({
+  name: "panelsSlice",
+  initialState: {},
+  reducers: {
+    initState(state, {
+      payload: { panelId, panelType, initialState }
+    }) {
+      if (!state[panelType]?.[panelId]) {
+        initPanelState(state, panelType, panelId, initialState);
+        state[panelType][panelId] = initialState;
+      }
+    },
+    updatePanelStore(state, {
+      payload: { data, panelId, panelType, reducer, initialState }
+    }) {
+      if (!state[panelType]?.[panelId]) {
+        initPanelState(state, panelType, panelId, initialState ?? {});
+      }
+      const panelsStore2 = state[panelType][panelId];
+      initPanelTypeUpdater(panelType);
+      if (!reducers[panelType][reducer ?? "default"]) {
+        return;
+      }
+      const currentReducer = reducers[panelType][reducer ?? "default"];
+      currentReducer(panelsStore2, data);
+    }
+  }
+});
+const { useSelector: usePanelStoreSelector, store: panelsStore } = injectReducers({
+  panelsSlice: panelsSlice.reducer
+});
+const panelsActions = panelsSlice.actions;
+
+const undefinedObject = {};
+function usePanelSelector(panelType, panelName, initialState, selector, comparator = shallowEqual$1) {
+  const { panelId } = usePanelIdentity();
+  if (!panelId)
+    throw new Error(`Cannot find panel with name ${panelName}`);
+  const storeState = panelsStore.getState().panelsSlice[panelType];
+  const [selection, setSelection] = useState(
+    initialState ? selector(storeState?.[panelId] ?? initialState) : {}
+  );
+  const previousSelected = useRef(
+    selection ?? undefinedObject
+  );
+  usePanelStoreSelector((global) => {
+    const newState = global.panelsSlice[panelType]?.[panelId];
+    if (newState !== void 0) {
+      const newSelected = selector(newState);
+      if (previousSelected.current === undefinedObject || !comparator(previousSelected.current, newSelected)) {
+        previousSelected.current = newSelected;
+        setSelection(newSelected);
+      }
+    }
+  });
+  return selection;
+}
+
+function createPanelStore(panelType, initialState, reducers) {
+  const useSelector = (panelName, selector, comparator = shallowEqual$1) => {
+    const dashboard = useDashboardContext();
+    const props = useMemo(
+      () => dashboard.getPanelByName(panelName)?.props,
+      [dashboard, panelName]
+    );
+    const propsRef = useLatest(props);
+    useEffect(() => {
+      panelsStore.dispatch(
+        panelsActions.initState({
+          panelType,
+          panelId: propsRef.current.id,
+          initialState
+        })
+      );
+    }, []);
+    return usePanelSelector(
+      panelType,
+      panelName,
+      initialState,
+      selector,
+      comparator
+    );
+  };
+  registerReducers(panelType, reducers);
+  const usePanelDispatcher = () => {
+    const { panelName: contextPanelName } = usePanelIdentity();
+    const dispatchers = {};
+    const dashboard = useDashboardContext();
+    Object.entries(reducers).forEach(([name]) => {
+      dispatchers[name] = (payload, panelName) => {
+        const props = dashboard.getPanelByName(panelName ?? contextPanelName)?.props;
+        panelsStore.dispatch(
+          panelsActions.updatePanelStore({
+            panelId: props.id,
+            panelType,
+            data: { payload },
+            reducer: name
+          })
+        );
+      };
+    });
+    return dispatchers;
+  };
+  return [usePanelDispatcher, useSelector];
+}
+
+export { Dashboard, LandingPagePanelWrapper, PanelIdentifier, PanelIdentifierContext, changePanelTitle, createPanelStore, eventsController, externalFirePanelAction, handleAction, store as parametersStore, saveParameters, useDashboardContext, useDashboardPanel, usePanelActions, usePanelChangeTitle, usePanelContext, usePanelFireEvent, usePanelIdentity, usePanelIsLoading, usePanelNetworkState, usePanelOnEvent, usePanelParametersSelector, usePanelPosition, useYieldPanelIsReady };
 //# sourceMappingURL=index.js.map