@vuu-ui/vuu-shell 0.8.93 → 0.8.95

package/cjs/app-status-bar/AppStatusBar.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var appStatusBarCss = ".vuuAppStatusBar {\n  align-items: center;\n  background-color: var(--salt-container-secondary-background);\n  display: flex;\n  height: 36px;\n  justify-content: flex-end;\n}\n.vuuAppStatusBar-hidden {\n  display: none;\n}\n";
+
+module.exports = appStatusBarCss;
+//# sourceMappingURL=AppStatusBar.css.js.map

package/cjs/app-status-bar/AppStatusBar.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppStatusBar.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/app-status-bar/AppStatusBar.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var cx = require('clsx');
+var vuuDataRemote = require('@vuu-ui/vuu-data-remote');
+var AppStatusBar = require('./AppStatusBar.css.js');
+var ApplicationProvider = require('../application-provider/ApplicationProvider.js');
+var ConnectionStateDisplay = require('../connection-status/ConnectionStateDisplay.js');
+require('../connection-status/ConnectionStatusIndicator.js');
+var React = require('react');
+
+const classBase = "vuuAppStatusBar";
+const shouldShowStatusBar = (connected, settings) => {
+  if (settings && "showAppStatusBar" in settings) {
+    return settings.showAppStatusBar === true || connected === false;
+  } else {
+    return connected === false;
+  }
+};
+const ApplicationStatusBar = () => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-settings-form",
+    css: AppStatusBar,
+    window: targetWindow
+  });
+  const [connected, setConnected] = React.useState(true);
+  const settings = ApplicationProvider.useUserSetting();
+  React.useEffect(() => {
+    vuuDataRemote.ConnectionManager.on("connection-status", ({ connectionStatus }) => {
+      if (connectionStatus === "disconnected") {
+        setConnected(false);
+      } else if (connectionStatus.endsWith("connected")) {
+        setConnected(true);
+      }
+    });
+  }, []);
+  if (!shouldShowStatusBar(connected, settings)) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classBase, `${classBase}-hidden`) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classBase, children: /* @__PURE__ */ jsxRuntime.jsx(ConnectionStateDisplay.ConnectionStateDisplay, {}) });
+};
+
+exports.ApplicationStatusBar = ApplicationStatusBar;
+//# sourceMappingURL=AppStatusBar.js.map

package/cjs/app-status-bar/AppStatusBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppStatusBar.js","sources":["../../src/app-status-bar/AppStatusBar.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { ConnectionManager } from \"@vuu-ui/vuu-data-remote\";\n\nimport appStatusBarCss from \"./AppStatusBar.css\";\nimport { useUserSetting } from \"../application-provider\";\nimport { Settings } from \"@vuu-ui/vuu-utils\";\nimport { ConnectionStateDisplay } from \"../connection-status\";\nimport { useEffect, useState } from \"react\";\n\nconst classBase = \"vuuAppStatusBar\";\n\nconst shouldShowStatusBar = (connected: boolean, settings?: Settings) => {\n  if (settings && \"showAppStatusBar\" in settings) {\n    return settings.showAppStatusBar === true || connected === false;\n  } else {\n    return connected === false;\n  }\n};\n\nexport const ApplicationStatusBar = () => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-settings-form\",\n    css: appStatusBarCss,\n    window: targetWindow,\n  });\n\n  const [connected, setConnected] = useState(true);\n  const settings = useUserSetting();\n\n  useEffect(() => {\n    ConnectionManager.on(\"connection-status\", ({ connectionStatus }) => {\n      if (connectionStatus === \"disconnected\") {\n        setConnected(false);\n      } else if (connectionStatus.endsWith(\"connected\")) {\n        setConnected(true);\n      }\n    });\n  }, []);\n\n  if (!shouldShowStatusBar(connected, settings)) {\n    return <div className={cx(classBase, `${classBase}-hidden`)} />;\n  }\n\n  // const connect = () => {\n  //   ConnectionManager.connect({\n  //     token: \"blah\",\n  //     url: \"ws://localhost:8090/websocket\",\n  //     username: \"steve\",\n  //   });\n  // };\n  // const disconnect = () => {\n  //   ConnectionManager.disconnect();\n  // };\n\n  return (\n    <div className={classBase}>\n      {/* <Button onClick={disconnect}>Disconnect</Button>\n      <Button onClick={connect}>Connect</Button> */}\n      <ConnectionStateDisplay />\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","appStatusBarCss","useState","useUserSetting","useEffect","ConnectionManager","jsx","ConnectionStateDisplay"],"mappings":";;;;;;;;;;;;;AAWA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAElB,MAAM,mBAAA,GAAsB,CAAC,SAAA,EAAoB,QAAwB,KAAA;AACvE,EAAI,IAAA,QAAA,IAAY,sBAAsB,QAAU,EAAA;AAC9C,IAAO,OAAA,QAAA,CAAS,gBAAqB,KAAA,IAAA,IAAQ,SAAc,KAAA,KAAA,CAAA;AAAA,GACtD,MAAA;AACL,IAAA,OAAO,SAAc,KAAA,KAAA,CAAA;AAAA,GACvB;AACF,CAAA,CAAA;AAEO,MAAM,uBAAuB,MAAM;AACxC,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,eAAS,IAAI,CAAA,CAAA;AAC/C,EAAA,MAAM,WAAWC,kCAAe,EAAA,CAAA;AAEhC,EAAAC,eAAA,CAAU,MAAM;AACd,IAAAC,+BAAA,CAAkB,EAAG,CAAA,mBAAA,EAAqB,CAAC,EAAE,kBAAuB,KAAA;AAClE,MAAA,IAAI,qBAAqB,cAAgB,EAAA;AACvC,QAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAAA,OACT,MAAA,IAAA,gBAAA,CAAiB,QAAS,CAAA,WAAW,CAAG,EAAA;AACjD,QAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAAA,OACnB;AAAA,KACD,CAAA,CAAA;AAAA,GACH,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,IAAI,CAAC,mBAAA,CAAoB,SAAW,EAAA,QAAQ,CAAG,EAAA;AAC7C,IAAO,uBAAAC,cAAA,CAAC,SAAI,SAAW,EAAA,EAAA,CAAG,WAAW,CAAG,EAAA,SAAS,SAAS,CAAG,EAAA,CAAA,CAAA;AAAA,GAC/D;AAaA,EAAA,sCACG,KAAI,EAAA,EAAA,SAAA,EAAW,SAGd,EAAA,QAAA,kBAAAA,cAAA,CAACC,iDAAuB,CAC1B,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/cjs/application-provider/ApplicationProvider.js

@@ -93,7 +93,7 @@ const useApplicationSettings = () => {
 };
 const useUserSetting = () => {
   const { userSettings } = React.useContext(ApplicationContext.ApplicationContext);
-  return { userSettings };
+  return userSettings;
 };
 
 exports.ApplicationProvider = ApplicationProvider;

package/cjs/application-provider/ApplicationProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationProvider.js","sources":["../../src/application-provider/ApplicationProvider.tsx"],"sourcesContent":["import { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  Density,\n  Mode,\n  SaltProvider,\n  ThemeContextProps,\n  useDensity,\n  useTheme,\n} from \"@salt-ds/core\";\nimport {\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\nimport {\n  ApplicationContext,\n  ApplicationContextProps,\n} from \"./ApplicationContext\";\nimport { usePersistenceManager } from \"../persistence-manager\";\n\nexport interface ApplicationProviderProps\n  extends Partial<Pick<ThemeContextProps, \"theme\" | \"mode\">>,\n    Partial<Omit<ApplicationContextProps, \"userSettings\">> {\n  children: ReactNode;\n  density?: Density;\n}\n\nconst getThemeMode = (\n  mode: Mode = \"light\",\n  userSettings?: Record<string, string | number | boolean>,\n) => {\n  const themeMode = userSettings?.themeMode;\n  if (themeMode === \"light\" || themeMode === \"dark\") {\n    return themeMode;\n  }\n  return mode;\n};\n\nexport const ApplicationProvider = ({\n  children,\n  density: densityProp,\n  loginUrl,\n  mode,\n  theme,\n  userSettingsSchema: userSettingsSchema,\n  user,\n}: ApplicationProviderProps): ReactElement | null => {\n  const { mode: inheritedMode, theme: inheritedTheme } = useTheme();\n  const density = useDensity(densityProp);\n  const persistenceManager = usePersistenceManager();\n  const context = useContext(ApplicationContext);\n  const [userSettings, setSettings] =\n    useState<Record<string, string | number | boolean>>();\n\n  useMemo(async () => {\n    if (persistenceManager) {\n      const userSettings = await persistenceManager.getUserSettings();\n      setSettings(userSettings);\n    } else {\n      setSettings({});\n    }\n  }, [persistenceManager]);\n\n  const onUserSettingChanged = useCallback(\n    (propertyName: string, value: VuuRowDataItemType) => {\n      setSettings((currentSettings) => {\n        const newSettings = { ...currentSettings, [propertyName]: value };\n        persistenceManager?.saveUserSettings(newSettings);\n        return newSettings;\n      });\n    },\n    [persistenceManager],\n  );\n\n  return userSettings ? (\n    <ApplicationContext.Provider\n      value={{\n        ...context,\n        loginUrl,\n        onUserSettingChanged,\n        userSettings,\n        userSettingsSchema,\n        user: user ?? context.user,\n      }}\n    >\n      <SaltProvider\n        theme={theme ?? inheritedTheme ?? \"vuu-theme\"}\n        density={density}\n        mode={getThemeMode(mode ?? inheritedMode, userSettings)}\n      >\n        {children}\n      </SaltProvider>\n    </ApplicationContext.Provider>\n  ) : null;\n};\n\nexport const useApplicationUser = () => {\n  const { user } = useContext(ApplicationContext);\n  return user;\n};\n\nexport const useLoginUrl = () => {\n  const { loginUrl } = useContext(ApplicationContext);\n  return loginUrl;\n};\n\n//Setter method (only used within the shell)\nexport const useApplicationSettings = () => {\n  const { onUserSettingChanged, userSettings, userSettingsSchema } =\n    useContext(ApplicationContext);\n  return {\n    onUserSettingChanged,\n    userSettings,\n    userSettingsSchema,\n  };\n};\n\n//Getter method (read only access to applicationSetting)\nexport const useUserSetting = () => {\n  const { userSettings } = useContext(ApplicationContext);\n  return { userSettings };\n};\n"],"names":["useTheme","useDensity","usePersistenceManager","useContext","ApplicationContext","useState","useMemo","userSettings","useCallback","jsx","SaltProvider"],"mappings":";;;;;;;;;;;;;;;AA8BA,MAAM,YAAe,GAAA,CACnB,IAAa,GAAA,OAAA,EACb,YACG,KAAA;AACH,EAAA,MAAM,YAAY,YAAc,EAAA,SAAA,CAAA;AAChC,EAAI,IAAA,SAAA,KAAc,OAAW,IAAA,SAAA,KAAc,MAAQ,EAAA;AACjD,IAAO,OAAA,SAAA,CAAA;AAAA,GACT;AACA,EAAO,OAAA,IAAA,CAAA;AACT,CAAA,CAAA;AAEO,MAAM,sBAAsB,CAAC;AAAA,EAClC,QAAA;AAAA,EACA,OAAS,EAAA,WAAA;AAAA,EACT,QAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,kBAAA;AAAA,EACA,IAAA;AACF,CAAqD,KAAA;AACnD,EAAA,MAAM,EAAE,IAAM,EAAA,aAAA,EAAe,KAAO,EAAA,cAAA,KAAmBA,aAAS,EAAA,CAAA;AAChE,EAAM,MAAA,OAAA,GAAUC,gBAAW,WAAW,CAAA,CAAA;AACtC,EAAA,MAAM,qBAAqBC,yCAAsB,EAAA,CAAA;AACjD,EAAM,MAAA,OAAA,GAAUC,iBAAWC,qCAAkB,CAAA,CAAA;AAC7C,EAAA,MAAM,CAAC,YAAA,EAAc,WAAW,CAAA,GAC9BC,cAAoD,EAAA,CAAA;AAEtD,EAAAC,aAAA,CAAQ,YAAY;AAClB,IAAA,IAAI,kBAAoB,EAAA;AACtB,MAAMC,MAAAA,aAAAA,GAAe,MAAM,kBAAA,CAAmB,eAAgB,EAAA,CAAA;AAC9D,MAAA,WAAA,CAAYA,aAAY,CAAA,CAAA;AAAA,KACnB,MAAA;AACL,MAAA,WAAA,CAAY,EAAE,CAAA,CAAA;AAAA,KAChB;AAAA,GACF,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,EAAA,MAAM,oBAAuB,GAAAC,iBAAA;AAAA,IAC3B,CAAC,cAAsB,KAA8B,KAAA;AACnD,MAAA,WAAA,CAAY,CAAC,eAAoB,KAAA;AAC/B,QAAA,MAAM,cAAc,EAAE,GAAG,iBAAiB,CAAC,YAAY,GAAG,KAAM,EAAA,CAAA;AAChE,QAAA,kBAAA,EAAoB,iBAAiB,WAAW,CAAA,CAAA;AAChD,QAAO,OAAA,WAAA,CAAA;AAAA,OACR,CAAA,CAAA;AAAA,KACH;AAAA,IACA,CAAC,kBAAkB,CAAA;AAAA,GACrB,CAAA;AAEA,EAAA,OAAO,YACL,mBAAAC,cAAA;AAAA,IAACL,qCAAmB,CAAA,QAAA;AAAA,IAAnB;AAAA,MACC,KAAO,EAAA;AAAA,QACL,GAAG,OAAA;AAAA,QACH,QAAA;AAAA,QACA,oBAAA;AAAA,QACA,YAAA;AAAA,QACA,kBAAA;AAAA,QACA,IAAA,EAAM,QAAQ,OAAQ,CAAA,IAAA;AAAA,OACxB;AAAA,MAEA,QAAA,kBAAAK,cAAA;AAAA,QAACC,iBAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAO,SAAS,cAAkB,IAAA,WAAA;AAAA,UAClC,OAAA;AAAA,UACA,IAAM,EAAA,YAAA,CAAa,IAAQ,IAAA,aAAA,EAAe,YAAY,CAAA;AAAA,UAErD,QAAA;AAAA,SAAA;AAAA,OACH;AAAA,KAAA;AAAA,GAEA,GAAA,IAAA,CAAA;AACN,EAAA;AAEO,MAAM,qBAAqB,MAAM;AACtC,EAAA,MAAM,EAAE,IAAA,EAAS,GAAAP,gBAAA,CAAWC,qCAAkB,CAAA,CAAA;AAC9C,EAAO,OAAA,IAAA,CAAA;AACT,EAAA;AAEO,MAAM,cAAc,MAAM;AAC/B,EAAA,MAAM,EAAE,QAAA,EAAa,GAAAD,gBAAA,CAAWC,qCAAkB,CAAA,CAAA;AAClD,EAAO,OAAA,QAAA,CAAA;AACT,EAAA;AAGO,MAAM,yBAAyB,MAAM;AAC1C,EAAA,MAAM,EAAE,oBAAsB,EAAA,YAAA,EAAc,kBAAmB,EAAA,GAC7DD,iBAAWC,qCAAkB,CAAA,CAAA;AAC/B,EAAO,OAAA;AAAA,IACL,oBAAA;AAAA,IACA,YAAA;AAAA,IACA,kBAAA;AAAA,GACF,CAAA;AACF,EAAA;AAGO,MAAM,iBAAiB,MAAM;AAClC,EAAA,MAAM,EAAE,YAAA,EAAiB,GAAAD,gBAAA,CAAWC,qCAAkB,CAAA,CAAA;AACtD,EAAA,OAAO,EAAE,YAAa,EAAA,CAAA;AACxB;;;;;;;;"}
+{"version":3,"file":"ApplicationProvider.js","sources":["../../src/application-provider/ApplicationProvider.tsx"],"sourcesContent":["import { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  Density,\n  Mode,\n  SaltProvider,\n  ThemeContextProps,\n  useDensity,\n  useTheme,\n} from \"@salt-ds/core\";\nimport {\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\nimport {\n  ApplicationContext,\n  ApplicationContextProps,\n} from \"./ApplicationContext\";\nimport { usePersistenceManager } from \"../persistence-manager\";\n\nexport interface ApplicationProviderProps\n  extends Partial<Pick<ThemeContextProps, \"theme\" | \"mode\">>,\n    Partial<Omit<ApplicationContextProps, \"userSettings\">> {\n  children: ReactNode;\n  density?: Density;\n}\n\nconst getThemeMode = (\n  mode: Mode = \"light\",\n  userSettings?: Record<string, string | number | boolean>,\n) => {\n  const themeMode = userSettings?.themeMode;\n  if (themeMode === \"light\" || themeMode === \"dark\") {\n    return themeMode;\n  }\n  return mode;\n};\n\nexport const ApplicationProvider = ({\n  children,\n  density: densityProp,\n  loginUrl,\n  mode,\n  theme,\n  userSettingsSchema: userSettingsSchema,\n  user,\n}: ApplicationProviderProps): ReactElement | null => {\n  const { mode: inheritedMode, theme: inheritedTheme } = useTheme();\n  const density = useDensity(densityProp);\n  const persistenceManager = usePersistenceManager();\n  const context = useContext(ApplicationContext);\n  const [userSettings, setSettings] =\n    useState<Record<string, string | number | boolean>>();\n\n  useMemo(async () => {\n    if (persistenceManager) {\n      const userSettings = await persistenceManager.getUserSettings();\n      setSettings(userSettings);\n    } else {\n      setSettings({});\n    }\n  }, [persistenceManager]);\n\n  const onUserSettingChanged = useCallback(\n    (propertyName: string, value: VuuRowDataItemType) => {\n      setSettings((currentSettings) => {\n        const newSettings = { ...currentSettings, [propertyName]: value };\n        persistenceManager?.saveUserSettings(newSettings);\n        return newSettings;\n      });\n    },\n    [persistenceManager],\n  );\n\n  return userSettings ? (\n    <ApplicationContext.Provider\n      value={{\n        ...context,\n        loginUrl,\n        onUserSettingChanged,\n        userSettings,\n        userSettingsSchema,\n        user: user ?? context.user,\n      }}\n    >\n      <SaltProvider\n        theme={theme ?? inheritedTheme ?? \"vuu-theme\"}\n        density={density}\n        mode={getThemeMode(mode ?? inheritedMode, userSettings)}\n      >\n        {children}\n      </SaltProvider>\n    </ApplicationContext.Provider>\n  ) : null;\n};\n\nexport const useApplicationUser = () => {\n  const { user } = useContext(ApplicationContext);\n  return user;\n};\n\nexport const useLoginUrl = () => {\n  const { loginUrl } = useContext(ApplicationContext);\n  return loginUrl;\n};\n\n//Setter method (only used within the shell)\nexport const useApplicationSettings = () => {\n  const { onUserSettingChanged, userSettings, userSettingsSchema } =\n    useContext(ApplicationContext);\n  return {\n    onUserSettingChanged,\n    userSettings,\n    userSettingsSchema,\n  };\n};\n\n//Getter method (read only access to applicationSetting)\nexport const useUserSetting = () => {\n  const { userSettings } = useContext(ApplicationContext);\n  return userSettings;\n};\n"],"names":["useTheme","useDensity","usePersistenceManager","useContext","ApplicationContext","useState","useMemo","userSettings","useCallback","jsx","SaltProvider"],"mappings":"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"}

package/cjs/connection-status/ConnectionRetryCountdown.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+const classBase = "vuuConnectionRetryCountdown";
+const ConnectionRetryCountdown = ({
+  seconds: secondsProp
+}) => {
+  const secondsRemainingRef = React.useRef(secondsProp);
+  const [seconds, setSeconds] = React.useState(secondsRemainingRef.current);
+  const countDown = React.useCallback(() => {
+    secondsRemainingRef.current -= 1;
+    setSeconds(secondsRemainingRef.current);
+    if (secondsRemainingRef.current > 0) {
+      setTimeout(countDown, 1e3);
+    }
+  }, []);
+  React.useEffect(() => {
+    if (secondsProp !== secondsRemainingRef.current) {
+      secondsRemainingRef.current = secondsProp;
+      countDown();
+    }
+  }, [countDown, secondsProp]);
+  React.useMemo(() => {
+    setTimeout(countDown, 1e3);
+  }, [countDown]);
+  return seconds === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: classBase, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "connecting" }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: classBase, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+    "retry in ",
+    seconds,
+    " seconds"
+  ] }) });
+};
+
+exports.ConnectionRetryCountdown = ConnectionRetryCountdown;
+//# sourceMappingURL=ConnectionRetryCountdown.js.map

package/cjs/connection-status/ConnectionRetryCountdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionRetryCountdown.js","sources":["../../src/connection-status/ConnectionRetryCountdown.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nconst classBase = \"vuuConnectionRetryCountdown\";\n\nexport const ConnectionRetryCountdown = ({\n  seconds: secondsProp,\n}: {\n  seconds: number;\n}) => {\n  const secondsRemainingRef = useRef(secondsProp);\n  const [seconds, setSeconds] = useState<number>(secondsRemainingRef.current);\n\n  const countDown = useCallback(() => {\n    secondsRemainingRef.current -= 1;\n    setSeconds(secondsRemainingRef.current);\n    if (secondsRemainingRef.current > 0) {\n      setTimeout(countDown, 1000);\n    }\n  }, []);\n\n  useEffect(() => {\n    if (secondsProp !== secondsRemainingRef.current) {\n      secondsRemainingRef.current = secondsProp;\n      countDown();\n    }\n  }, [countDown, secondsProp]);\n\n  useMemo(() => {\n    setTimeout(countDown, 1000);\n  }, [countDown]);\n\n  return seconds === 0 ? (\n    <div className={classBase}>\n      <span>connecting</span>\n    </div>\n  ) : (\n    <div className={classBase}>\n      <span>retry in {seconds} seconds</span>\n    </div>\n  );\n};\n"],"names":["useRef","useState","useCallback","useEffect","useMemo","jsx"],"mappings":";;;;;AAEA,MAAM,SAAY,GAAA,6BAAA,CAAA;AAEX,MAAM,2BAA2B,CAAC;AAAA,EACvC,OAAS,EAAA,WAAA;AACX,CAEM,KAAA;AACJ,EAAM,MAAA,mBAAA,GAAsBA,aAAO,WAAW,CAAA,CAAA;AAC9C,EAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAAC,cAAA,CAAiB,oBAAoB,OAAO,CAAA,CAAA;AAE1E,EAAM,MAAA,SAAA,GAAYC,kBAAY,MAAM;AAClC,IAAA,mBAAA,CAAoB,OAAW,IAAA,CAAA,CAAA;AAC/B,IAAA,UAAA,CAAW,oBAAoB,OAAO,CAAA,CAAA;AACtC,IAAI,IAAA,mBAAA,CAAoB,UAAU,CAAG,EAAA;AACnC,MAAA,UAAA,CAAW,WAAW,GAAI,CAAA,CAAA;AAAA,KAC5B;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAAC,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,WAAA,KAAgB,oBAAoB,OAAS,EAAA;AAC/C,MAAA,mBAAA,CAAoB,OAAU,GAAA,WAAA,CAAA;AAC9B,MAAU,SAAA,EAAA,CAAA;AAAA,KACZ;AAAA,GACC,EAAA,CAAC,SAAW,EAAA,WAAW,CAAC,CAAA,CAAA;AAE3B,EAAAC,aAAA,CAAQ,MAAM;AACZ,IAAA,UAAA,CAAW,WAAW,GAAI,CAAA,CAAA;AAAA,GAC5B,EAAG,CAAC,SAAS,CAAC,CAAA,CAAA;AAEd,EAAA,OAAO,YAAY,CACjB,mBAAAC,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,WACd,QAAC,kBAAAA,cAAA,CAAA,MAAA,EAAA,EAAK,QAAU,EAAA,YAAA,EAAA,CAAA,EAClB,oBAECA,cAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EACd,0CAAC,MAAK,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,WAAA;AAAA,IAAU,OAAA;AAAA,IAAQ,UAAA;AAAA,GAAA,EAAQ,CAClC,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/cjs/connection-status/ConnectionStateDisplay.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var connectionStateDisplayCss = ".vuuConnectionStateDisplay {\n  --ballbox-height: 24px;\n  --message-height: 14px;\n  --row-gap: 3px;\n  --top-row: calc(var(--ballbox-height) + var(--message-height));\n  --bottom-row: 0px;\n\n  align-items: center;\n  background: var(--salt-container-secondary-background);\n  column-gap: var(--salt-spacing-200);\n  display: grid;\n  grid-template-columns: auto 1fr;\n  grid-template-rows: var(--top-row) var(--bottom-row);\n  justify-items: end;\n  height: calc(var(--ballbox-height) + var(--message-height) + var(--row-gap));\n  padding: 0 var(--salt-spacing-200);\n  transition: grid-template-rows 0.4s linear;\n  row-gap: var(--row-gap);\n  width: max-content;\n\n  .vuuTrafficLightControl {\n    grid-area: 1/2/2/3;\n    padding-left: 20px;\n  }\n\n  &.vuuConnectionStateDisplay-disconnected {\n    --top-row: var(--ballbox-height);\n    --bottom-row: var(--message-height);\n  }\n\n  .vuuConnectionRetryCountdown {\n    color: var(--salt-content-secondary-foreground);\n    grid-area: 2/2/3/3;\n    font-size: 11px;\n    text-align: end;\n    width: 100%;\n  }\n}\n\n.vuuConnectionStateDisplay-text {\n  grid-area: 1/1/2/2;\n  text-transform: capitalize;\n}\n";
+
+module.exports = connectionStateDisplayCss;
+//# sourceMappingURL=ConnectionStateDisplay.css.js.map

package/cjs/connection-status/ConnectionStateDisplay.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionStateDisplay.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/connection-status/ConnectionStateDisplay.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuDataRemote = require('@vuu-ui/vuu-data-remote');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var React = require('react');
+var ConnectionRetryCountdown = require('./ConnectionRetryCountdown.js');
+var ConnectionStatusIndicator = require('./ConnectionStatusIndicator.js');
+var cx = require('clsx');
+var ConnectionStateDisplay$1 = require('./ConnectionStateDisplay.css.js');
+
+const classBase = "vuuConnectionStateDisplay";
+const DefaultConnectionState = {
+  connectionPhase: "connecting",
+  connectionStatus: "closed",
+  secondsToNextRetry: -1,
+  retryAttemptsRemaining: 0,
+  retryAttemptsTotal: 1
+};
+const getDisplayText = (connectionState) => {
+  switch (connectionState.connectionStatus) {
+    case "closed":
+      return "Unable to connect to data service";
+    case "failed":
+      return connectionState.connectionPhase === "connecting" ? "Failed to connect" : "Failed to re-connect";
+    case "disconnected":
+      return connectionState.connectionPhase === "connecting" ? "Attempting to connect to data service" : "Attempting to reconnect to data service";
+  }
+};
+const ConnectionStateDisplay = ({
+  connectionState: connectionStateProp,
+  showText = true,
+  ...htmlAttributes
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-connection-status-indicator",
+    css: ConnectionStateDisplay$1,
+    window: targetWindow
+  });
+  const [connectionState, setConnectionState] = React.useState(DefaultConnectionState);
+  React.useMemo(() => {
+    vuuDataRemote.ConnectionManager.on("connection-status", setConnectionState);
+    if (connectionStateProp) {
+      setConnectionState(connectionStateProp);
+    }
+  }, [connectionStateProp]);
+  const { connectionStatus, secondsToNextRetry } = connectionState;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(classBase, `${classBase}-${connectionStatus}`),
+      children: [
+        showText ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-text`, children: getDisplayText(connectionState) }) : null,
+        connectionStatus === "disconnected" && secondsToNextRetry > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ConnectionRetryCountdown.ConnectionRetryCountdown, { seconds: secondsToNextRetry }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(ConnectionStatusIndicator.ConnectionStatusIndicator, { connectionState })
+      ]
+    }
+  );
+};
+
+exports.ConnectionStateDisplay = ConnectionStateDisplay;
+//# sourceMappingURL=ConnectionStateDisplay.js.map

package/cjs/connection-status/ConnectionStateDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionStateDisplay.js","sources":["../../src/connection-status/ConnectionStateDisplay.tsx"],"sourcesContent":["import { ConnectionManager } from \"@vuu-ui/vuu-data-remote\";\nimport type { WebSocketConnectionState } from \"@vuu-ui/vuu-data-remote/src/WebSocketConnection\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, useMemo, useState } from \"react\";\nimport { ConnectionRetryCountdown } from \"./ConnectionRetryCountdown\";\nimport { ConnectionStatusIndicator } from \"./ConnectionStatusIndicator\";\nimport cx from \"clsx\";\n\nimport connectionStateDisplayCss from \"./ConnectionStateDisplay.css\";\n\nconst classBase = \"vuuConnectionStateDisplay\";\n\nconst DefaultConnectionState: WebSocketConnectionState = {\n  connectionPhase: \"connecting\",\n  connectionStatus: \"closed\",\n  secondsToNextRetry: -1,\n  retryAttemptsRemaining: 0,\n  retryAttemptsTotal: 1,\n};\n\ninterface ConnectionStateDisplayProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  connectionState?: WebSocketConnectionState;\n  showText?: boolean;\n}\n\nconst getDisplayText = (connectionState: WebSocketConnectionState) => {\n  switch (connectionState.connectionStatus) {\n    case \"closed\":\n      return \"Unable to connect to data service\";\n    case \"failed\":\n      return connectionState.connectionPhase === \"connecting\"\n        ? \"Failed to connect\"\n        : \"Failed to re-connect\";\n\n    case \"disconnected\":\n      return connectionState.connectionPhase === \"connecting\"\n        ? \"Attempting to connect to data service\"\n        : \"Attempting to reconnect to data service\";\n  }\n};\n\nexport const ConnectionStateDisplay = ({\n  connectionState: connectionStateProp,\n  showText = true,\n  ...htmlAttributes\n}: ConnectionStateDisplayProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-connection-status-indicator\",\n    css: connectionStateDisplayCss,\n    window: targetWindow,\n  });\n  const [connectionState, setConnectionState] =\n    useState<WebSocketConnectionState>(DefaultConnectionState);\n\n  useMemo(() => {\n    ConnectionManager.on(\"connection-status\", setConnectionState);\n    if (connectionStateProp) {\n      setConnectionState(connectionStateProp);\n    }\n  }, [connectionStateProp]);\n\n  const { connectionStatus, secondsToNextRetry } = connectionState;\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, `${classBase}-${connectionStatus}`)}\n    >\n      {showText ? (\n        <div className={`${classBase}-text`}>\n          {getDisplayText(connectionState)}\n        </div>\n      ) : null}\n      {connectionStatus === \"disconnected\" && secondsToNextRetry > 0 ? (\n        <ConnectionRetryCountdown seconds={secondsToNextRetry} />\n      ) : null}\n      <ConnectionStatusIndicator connectionState={connectionState} />\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","connectionStateDisplayCss","useState","useMemo","ConnectionManager","jsxs","jsx","ConnectionRetryCountdown","ConnectionStatusIndicator"],"mappings":";;;;;;;;;;;;AAWA,MAAM,SAAY,GAAA,2BAAA,CAAA;AAElB,MAAM,sBAAmD,GAAA;AAAA,EACvD,eAAiB,EAAA,YAAA;AAAA,EACjB,gBAAkB,EAAA,QAAA;AAAA,EAClB,kBAAoB,EAAA,CAAA,CAAA;AAAA,EACpB,sBAAwB,EAAA,CAAA;AAAA,EACxB,kBAAoB,EAAA,CAAA;AACtB,CAAA,CAAA;AAQA,MAAM,cAAA,GAAiB,CAAC,eAA8C,KAAA;AACpE,EAAA,QAAQ,gBAAgB,gBAAkB;AAAA,IACxC,KAAK,QAAA;AACH,MAAO,OAAA,mCAAA,CAAA;AAAA,IACT,KAAK,QAAA;AACH,MAAO,OAAA,eAAA,CAAgB,eAAoB,KAAA,YAAA,GACvC,mBACA,GAAA,sBAAA,CAAA;AAAA,IAEN,KAAK,cAAA;AACH,MAAO,OAAA,eAAA,CAAgB,eAAoB,KAAA,YAAA,GACvC,uCACA,GAAA,yCAAA,CAAA;AAAA,GACR;AACF,CAAA,CAAA;AAEO,MAAM,yBAAyB,CAAC;AAAA,EACrC,eAAiB,EAAA,mBAAA;AAAA,EACjB,QAAW,GAAA,IAAA;AAAA,EACX,GAAG,cAAA;AACL,CAAmC,KAAA;AACjC,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iCAAA;AAAA,IACR,GAAK,EAAAC,wBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GACxCC,eAAmC,sBAAsB,CAAA,CAAA;AAE3D,EAAAC,aAAA,CAAQ,MAAM;AACZ,IAAkBC,+BAAA,CAAA,EAAA,CAAG,qBAAqB,kBAAkB,CAAA,CAAA;AAC5D,IAAA,IAAI,mBAAqB,EAAA;AACvB,MAAA,kBAAA,CAAmB,mBAAmB,CAAA,CAAA;AAAA,KACxC;AAAA,GACF,EAAG,CAAC,mBAAmB,CAAC,CAAA,CAAA;AAExB,EAAM,MAAA,EAAE,gBAAkB,EAAA,kBAAA,EAAuB,GAAA,eAAA,CAAA;AAEjD,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,WAAW,EAAG,CAAA,SAAA,EAAW,GAAG,SAAS,CAAA,CAAA,EAAI,gBAAgB,CAAE,CAAA,CAAA;AAAA,MAE1D,QAAA,EAAA;AAAA,QACC,QAAA,mBAAAC,cAAA,CAAC,SAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CACzB,KAAA,CAAA,EAAA,QAAA,EAAA,cAAA,CAAe,eAAe,CAAA,EACjC,CACE,GAAA,IAAA;AAAA,QACH,gBAAA,KAAqB,kBAAkB,kBAAqB,GAAA,CAAA,kCAC1DC,iDAAyB,EAAA,EAAA,OAAA,EAAS,oBAAoB,CACrD,GAAA,IAAA;AAAA,wBACJD,cAAA,CAACE,uDAA0B,eAAkC,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAC/D,CAAA;AAEJ;;;;"}

package/cjs/connection-status/ConnectionStatusIndicator.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var connectionStatusIndicatorCss = ".vuuStatus-container {\n\tdisplay: flex;\n}\n\n.vuuStatus-text {\n\talign-self: center;\n}\n\n\n.vuuStatus {\n\t--vuu-icon-height: 18px;\n\t--vuu-icon-padding: var(--vuuStatus-padding, 6px);\n\t--vuu-icon-width: var(--vuuStatus-width, auto);\n\t--vuu-icon-min-width: var(--vuuStatus-min-width, 20px);\n\talign-items: center;\n\tdisplay: inline-flex;\n\theight: var(--vuu-icon-height);\n\tjustify-content: center;\n\tmin-width: var(--vuu-icon-min-width);\n\tpadding: 0 var(--vuu-icon-padding);\n\twidth: var(--vuu-icon-width);\n\tposition: relative;\n}\n\n.vuuStatus[data-icon]::after {\n\tinset: 0 0 0 0;\n\tcontent: '';\n\tbox-shadow: 0 0 0 0 black;\n\tposition: absolute;\n\tmask: var(--vuu-icon-svg) center center/20px 20px no-repeat;\n\t-webkit-mask: var(--vuu-icon-svg) center center/20px 20px no-repeat;\n}\n\n.vuuActiveStatus::after {\n\t--vuu-icon-svg: var(--svg-active-status);\n\tbackground-color: rgb(0, 255, 0);\n}\n\n.vuuConnectingStatus::after {\n\t--vuu-icon-svg: var(--svg-connecting-status);\n\tbackground-color: orange;\n\ttransform: scale(1);\n\tanimation: infinite pulse 1s;\n}\n\n.vuuDisconnectedStatus::after {\n\t--vuu-icon-svg: var(--svg-disconnected-status);\n\tbackground-color: red;\n\ttransform: scale(1);\n\tanimation: infinite pulse 0.5s;\n}\n\n@keyframes pulse {\n\t0% {\n\t\ttransform: scale(0.95);\n\t\tbox-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);\n\t}\n\n\t70% {\n\t\ttransform: scale(1);\n\t\tbox-shadow: 0 0 0 0 rgba(0, 0, 0, 0);\n\t}\n\n\t100% {\n\t\ttransform: scale(0.95);\n\t\tbox-shadow: 0 0 0 0 rgba(0, 0, 0, 0);\n\t}\n}";
+var connectionStatusIndicatorCss = "@keyframes squeeze {\n  0% {\n    transform: scale(1);\n  }\n\n  50% {\n    transform: scale(0.85);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n}\n\n.ConnectionStatusIndicator {\n  --ball-size-large: 20px;\n  --ball-size-small: 14px;\n  --ballbox-padding: 4px;\n  --retry-count: 0;\n  --height: var(\n    --ballbox-height,\n    calc(var(--ball-size-large) + var(--salt-spacing-100))\n  );\n  height: var(--height);\n  padding: 0 4px;\n  position: relative;\n  width: calc(\n    var(--ball-size-large) + var(--salt-spacing-400) +\n      (var(--ball-size-small) + var(--salt-spacing-100)) * var(--retry-count)\n  );\n\n  &.expanded {\n    transition-delay: 1s;\n    .Ball.large {\n      animation-duration: 0.8s;\n      animation-name: squeeze;\n      transform-origin: center;\n    }\n    .Ball.small {\n      transform: translateX(calc(var(--ball-size-large) * var(--i)));\n    }\n  }\n}\n\n.ConnectionStatusIndicator-inactive {\n  --ball-color: lightgray;\n}\n\n.ConnectionStatusIndicator-closed {\n  --ball-color: red;\n  opacity: 0.8;\n  .Ball.large {\n    transition: background-color 1s linear;\n  }\n}\n\n.ConnectionStatusIndicator-connected {\n  --ball-color: green;\n}\n\n.ConnectionStatusIndicator-disconnected {\n  --ball-color: red;\n}\n\n.Ball.large {\n  background-color: var(--ball-color);\n  border-radius: calc(var(--ball-size-large) / 2);\n  height: var(--ball-size-large);\n  right: var(--ballbox-padding);\n  top: calc(var(--height) / 2 - (var(--ball-size-large) / 2));\n  position: absolute;\n  transition: transform 0.8s linear;\n\n  width: var(--ball-size-large);\n  z-index: 1;\n}\n\n.Ball.small {\n  background-color: var(--ball-color);\n  border-radius: calc(var(--ball-size-small) / 2);\n  height: var(--ball-size-small);\n  position: absolute;\n  right: calc(\n    var(--ballbox-padding) + (var(--ball-size-large) - var(--ball-size-small)) /\n      2\n  );\n  top: calc(var(--height) / 2 - (var(--ball-size-small) / 2));\n  width: var(--ball-size-small);\n\n  transition: transform 0.4s ease-out;\n  transition-delay: 0.1s;\n}\n";
 
 module.exports = connectionStatusIndicatorCss;
 //# sourceMappingURL=ConnectionStatusIndicator.css.js.map

package/cjs/connection-status/ConnectionStatusIndicator.js

@@ -7,11 +7,24 @@ var window = require('@salt-ds/window');
 var cx = require('clsx');
 var ConnectionStatusIndicator$1 = require('./ConnectionStatusIndicator.css.js');
 
+const classBase = "ConnectionStatusIndicator";
+const Ball = React.memo(({ background, i = 0, large = false }) => {
+  if (large) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Ball large", style: { background } }, i);
+  } else {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "Ball small",
+        style: { "--i": -(i + 1), background }
+      },
+      i
+    );
+  }
+});
+Ball.displayName = "Ball";
 const ConnectionStatusIndicator = ({
-  connectionStatus,
-  className,
-  element = "span",
-  ...props
+  connectionState
 }) => {
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
@@ -19,32 +32,49 @@ const ConnectionStatusIndicator = ({
     css: ConnectionStatusIndicator$1,
     window: targetWindow
   });
-  const [classBase, setClassBase] = React.useState("vuuConnectingStatus");
-  React.useEffect(() => {
-    switch (connectionStatus) {
-      case "connected":
-      case "reconnected":
-        setClassBase("vuuActiveStatus");
-        break;
-      case "connecting":
-        setClassBase("vuuConnectingStatus");
-        break;
-      case "disconnected":
-        setClassBase("vuuDisconnectedStatus");
-        break;
+  const ballbox = React.useRef(null);
+  const expandedRef = React.useRef(false);
+  const { connectionStatus, retryAttemptsRemaining, retryAttemptsTotal } = connectionState;
+  if (connectionStatus === "disconnected") {
+    expandedRef.current = true;
+  }
+  const finalState = connectionStatus === "connected" || connectionStatus === "closed";
+  React.useMemo(() => {
+    if (finalState) {
+      expandedRef.current = false;
     }
-  }, [connectionStatus]);
-  const statusIcon = React.createElement(element, {
-    ...props,
-    className: cx("vuuStatus vuuIcon", classBase, className)
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "vuuStatus-container salt-theme", children: [
-    statusIcon,
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "vuuStatus-text", children: [
-      "Status: ",
-      connectionStatus.toUpperCase()
-    ] })
-  ] }) });
+  }, [finalState]);
+  const getSmallBalls = () => {
+    const colors = Array(retryAttemptsTotal).fill("lightgray");
+    const index = retryAttemptsTotal - retryAttemptsRemaining;
+    if (retryAttemptsRemaining) {
+      colors[index] = "orange";
+      for (let i = 0; i < index; i++) {
+        colors[i] = "red";
+      }
+    } else {
+      colors.fill("red");
+    }
+    colors.reverse();
+    return colors.map((background, i) => /* @__PURE__ */ jsxRuntime.jsx(Ball, { i, background }, i));
+  };
+  const balls = getSmallBalls();
+  const displayState = connectionStatus;
+  const retryCount = connectionStatus === "disconnected" ? retryAttemptsTotal : 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cx(classBase, `${classBase}-${displayState}`, {
+        expanded: expandedRef.current
+      }),
+      ref: ballbox,
+      style: { "--retry-count": retryCount },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Ball, { large: true }),
+        balls
+      ]
+    }
+  );
 };
 
 exports.ConnectionStatusIndicator = ConnectionStatusIndicator;

package/cjs/connection-status/ConnectionStatusIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectionStatusIndicator.js","sources":["../../src/connection-status/ConnectionStatusIndicator.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport cx from \"clsx\";\n\nimport connectionStatusIndicatorCss from \"./ConnectionStatusIndicator.css\";\n\ntype connectionStatus =\n  | \"connected\"\n  | \"reconnected\"\n  | \"connecting\"\n  | \"disconnected\";\n\ninterface ConnectionStatusProps {\n  connectionStatus: connectionStatus;\n  className?: string;\n  props?: unknown;\n  element?: string;\n}\n\nexport const ConnectionStatusIndicator = ({\n  connectionStatus,\n  className,\n  element = \"span\",\n  ...props\n}: ConnectionStatusProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-connection-status-indicator\",\n    css: connectionStatusIndicatorCss,\n    window: targetWindow,\n  });\n\n  const [classBase, setClassBase] = useState<string>(\"vuuConnectingStatus\");\n  useEffect(() => {\n    switch (connectionStatus) {\n      case \"connected\":\n      case \"reconnected\":\n        setClassBase(\"vuuActiveStatus\");\n        break;\n      case \"connecting\":\n        setClassBase(\"vuuConnectingStatus\");\n        break;\n      case \"disconnected\":\n        setClassBase(\"vuuDisconnectedStatus\");\n        break;\n      default:\n        break;\n    }\n  }, [connectionStatus]);\n\n  const statusIcon = React.createElement(element, {\n    ...props,\n    className: cx(\"vuuStatus vuuIcon\", classBase, className),\n  });\n\n  return (\n    <>\n      <div className=\"vuuStatus-container salt-theme\">\n        {statusIcon}\n        <div className=\"vuuStatus-text\">\n          Status: {connectionStatus.toUpperCase()}\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","connectionStatusIndicatorCss","useState","useEffect","jsx","Fragment","jsxs"],"mappings":";;;;;;;;;AAqBO,MAAM,4BAA4B,CAAC;AAAA,EACxC,gBAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAU,GAAA,MAAA;AAAA,EACV,GAAG,KAAA;AACL,CAA6B,KAAA;AAC3B,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iCAAA;AAAA,IACR,GAAK,EAAAC,2BAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,eAAiB,qBAAqB,CAAA,CAAA;AACxE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,QAAQ,gBAAkB;AAAA,MACxB,KAAK,WAAA,CAAA;AAAA,MACL,KAAK,aAAA;AACH,QAAA,YAAA,CAAa,iBAAiB,CAAA,CAAA;AAC9B,QAAA,MAAA;AAAA,MACF,KAAK,YAAA;AACH,QAAA,YAAA,CAAa,qBAAqB,CAAA,CAAA;AAClC,QAAA,MAAA;AAAA,MACF,KAAK,cAAA;AACH,QAAA,YAAA,CAAa,uBAAuB,CAAA,CAAA;AACpC,QAAA,MAAA;AAEA,KACJ;AAAA,GACF,EAAG,CAAC,gBAAgB,CAAC,CAAA,CAAA;AAErB,EAAM,MAAA,UAAA,GAAa,KAAM,CAAA,aAAA,CAAc,OAAS,EAAA;AAAA,IAC9C,GAAG,KAAA;AAAA,IACH,SAAW,EAAA,EAAA,CAAG,mBAAqB,EAAA,SAAA,EAAW,SAAS,CAAA;AAAA,GACxD,CAAA,CAAA;AAED,EAAA,uBAEIC,cAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,kBAAAC,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,gCACZ,EAAA,QAAA,EAAA;AAAA,IAAA,UAAA;AAAA,oBACDA,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,gBAAiB,EAAA,QAAA,EAAA;AAAA,MAAA,UAAA;AAAA,MACrB,iBAAiB,WAAY,EAAA;AAAA,KACxC,EAAA,CAAA;AAAA,GAAA,EACF,CACF,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ConnectionStatusIndicator.js","sources":["../../src/connection-status/ConnectionStatusIndicator.tsx"],"sourcesContent":["import { CSSProperties, memo, useMemo, useRef } from \"react\";\nimport type { WebSocketConnectionState } from \"@vuu-ui/vuu-data-remote\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport cx from \"clsx\";\n\nimport connectionStatusIndicatorCss from \"./ConnectionStatusIndicator.css\";\n\nconst classBase = \"ConnectionStatusIndicator\";\n\ninterface BallProps {\n  background?: string;\n  i?: number;\n  large?: boolean;\n}\nconst Ball = memo(({ background, i = 0, large = false }: BallProps) => {\n  if (large) {\n    return <div className=\"Ball large\" key={i} style={{ background }} />;\n  } else {\n    return (\n      <div\n        className=\"Ball small\"\n        key={i}\n        style={{ \"--i\": -(i + 1), background } as CSSProperties}\n      />\n    );\n  }\n});\nBall.displayName = \"Ball\";\n\ninterface ConnectionStatusIndicatorProps {\n  connectionState: WebSocketConnectionState;\n}\n\nexport const ConnectionStatusIndicator = ({\n  connectionState,\n}: ConnectionStatusIndicatorProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-connection-status-indicator\",\n    css: connectionStatusIndicatorCss,\n    window: targetWindow,\n  });\n\n  const ballbox = useRef<HTMLDivElement>(null);\n  const expandedRef = useRef(false);\n  const { connectionStatus, retryAttemptsRemaining, retryAttemptsTotal } =\n    connectionState;\n\n  if (connectionStatus === \"disconnected\") {\n    // one way switch\n    expandedRef.current = true;\n  }\n  const finalState =\n    connectionStatus === \"connected\" || connectionStatus === \"closed\";\n\n  useMemo(() => {\n    if (finalState) {\n      expandedRef.current = false;\n    }\n  }, [finalState]);\n\n  const getSmallBalls = () => {\n    const colors = Array(retryAttemptsTotal).fill(\"lightgray\");\n    const index = retryAttemptsTotal - retryAttemptsRemaining;\n    if (retryAttemptsRemaining) {\n      colors[index] = \"orange\";\n      for (let i = 0; i < index; i++) {\n        colors[i] = \"red\";\n      }\n    } else {\n      colors.fill(\"red\");\n    }\n    colors.reverse();\n    return colors.map((background, i) => (\n      <Ball key={i} i={i} background={background} />\n    ));\n  };\n\n  const balls = getSmallBalls();\n\n  // const displayState = balls.length > 0 ? \"disconnected\" : connectionStatus;\n  const displayState = connectionStatus;\n  const retryCount =\n    connectionStatus === \"disconnected\" ? retryAttemptsTotal : 0;\n\n  return (\n    <div\n      className={cx(classBase, `${classBase}-${displayState}`, {\n        expanded: expandedRef.current,\n      })}\n      ref={ballbox}\n      style={{ \"--retry-count\": retryCount } as CSSProperties}\n    >\n      <Ball large />\n      {balls}\n    </div>\n  );\n};\n"],"names":["memo","jsx","useWindow","useComponentCssInjection","connectionStatusIndicatorCss","useRef","useMemo","jsxs"],"mappings":"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"}

package/cjs/index.js

@@ -2,6 +2,7 @@
 
 var ApplicationProvider = require('./application-provider/ApplicationProvider.js');
 var AppHeader = require('./app-header/AppHeader.js');
+var ConnectionStateDisplay = require('./connection-status/ConnectionStateDisplay.js');
 var ConnectionStatusIndicator = require('./connection-status/ConnectionStatusIndicator.js');
 var Feature = require('./feature/Feature.js');
 var FeatureAndLayoutProvider = require('./feature-and-layout-provider/FeatureAndLayoutProvider.js');
@@ -35,6 +36,7 @@ exports.useApplicationUser = ApplicationProvider.useApplicationUser;
 exports.useLoginUrl = ApplicationProvider.useLoginUrl;
 exports.useUserSetting = ApplicationProvider.useUserSetting;
 exports.AppHeader = AppHeader.AppHeader;
+exports.ConnectionStateDisplay = ConnectionStateDisplay.ConnectionStateDisplay;
 exports.ConnectionStatusIndicator = ConnectionStatusIndicator.ConnectionStatusIndicator;
 exports.Feature = Feature.Feature;
 exports.FeatureAndLayoutProvider = FeatureAndLayoutProvider.FeatureAndLayoutProvider;

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/persistence-manager/LocalPersistenceManager.js

@@ -10,9 +10,12 @@ require('clsx');
 require('react');
 var loginUtils = require('../login/login-utils.js');
 
+var __defProp = Object.defineProperty;
 var __typeError = (msg) => {
   throw TypeError(msg);
 };
+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);
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
@@ -23,23 +26,23 @@ const baseLayoutsSaveLocation = "layouts/layouts";
 class LocalPersistenceManager {
   constructor(urlKey) {
     __privateAdd(this, _username, loginUtils.getAuthDetailsFromCookies()[0]);
-    this.metadataSaveLocation = `${baseMetadataSaveLocation}/${__privateGet(this, _username)}`;
-    this.layoutsSaveLocation = `${baseLayoutsSaveLocation}/${__privateGet(this, _username)}`;
+    __publicField(this, "metadataSaveLocation", `${baseMetadataSaveLocation}/${__privateGet(this, _username)}`);
+    __publicField(this, "layoutsSaveLocation", `${baseLayoutsSaveLocation}/${__privateGet(this, _username)}`);
     __privateAdd(this, _urlKey, `api/vui/${__privateGet(this, _username)}`);
     __privateAdd(this, _applicationJSON);
-    this.loadLayouts = () => {
+    __publicField(this, "loadLayouts", () => {
       return new Promise((resolve) => {
         const layouts = vuuUtils.getLocalEntity(this.layoutsSaveLocation);
         resolve(layouts || []);
       });
-    };
-    this.saveLayoutsWithMetadata = (layouts, metadata) => {
+    });
+    __publicField(this, "saveLayoutsWithMetadata", (layouts, metadata) => {
       vuuUtils.saveLocalEntity(this.layoutsSaveLocation, layouts);
       vuuUtils.saveLocalEntity(this.metadataSaveLocation, metadata);
-    };
+    });
     // Ensures that there is exactly one Layout entry and exactly one Metadata
     // entry in local storage corresponding to the provided ID.
-    this.validateIds = async (id) => {
+    __publicField(this, "validateIds", async (id) => {
       return Promise.all([
         this.validateId(id, "metadata").catch((error) => error.message),
         this.validateId(id, "layout").catch((error) => error.message)
@@ -49,10 +52,10 @@ class LocalPersistenceManager {
           throw new Error(combinedMessage);
         }
       });
-    };
+    });
     // Ensures that there is exactly one element (Layout or Metadata) in local
     // storage corresponding to the provided ID.
-    this.validateId = (id, dataType) => {
+    __publicField(this, "validateId", (id, dataType) => {
       return new Promise((resolve, reject) => {
         const loadFunc = dataType === "metadata" ? () => this.loadMetadata() : () => this.loadLayouts();
         loadFunc().then((array) => {
@@ -71,7 +74,7 @@ class LocalPersistenceManager {
           }
         });
       });
-    };
+    });
     if (urlKey) {
       __privateSet(this, _urlKey, urlKey);
     }

package/cjs/persistence-manager/LocalPersistenceManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalPersistenceManager.js","sources":["../../src/persistence-manager/LocalPersistenceManager.ts"],"sourcesContent":["import {\n  ApplicationJSON,\n  LayoutJSON,\n  Settings,\n  formatDate,\n  getLocalEntity,\n  getUniqueId,\n  saveLocalEntity,\n  Layout,\n  LayoutMetadata,\n  LayoutMetadataDto,\n  WithId,\n} from \"@vuu-ui/vuu-utils\";\nimport { getAuthDetailsFromCookies } from \"../login\";\nimport { IPersistenceManager } from \"./PersistenceManager\";\nconst baseMetadataSaveLocation = \"layouts/metadata\";\nconst baseLayoutsSaveLocation = \"layouts/layouts\";\n\nexport class LocalPersistenceManager implements IPersistenceManager {\n  #username: string = getAuthDetailsFromCookies()[0];\n  metadataSaveLocation = `${baseMetadataSaveLocation}/${this.#username}`;\n  layoutsSaveLocation = `${baseLayoutsSaveLocation}/${this.#username}`;\n  #urlKey = `api/vui/${this.#username}`;\n  #applicationJSON: ApplicationJSON | undefined;\n\n  constructor(urlKey?: string) {\n    if (urlKey) {\n      this.#urlKey = urlKey;\n    }\n  }\n\n  createLayout(\n    metadata: LayoutMetadataDto,\n    layout: LayoutJSON,\n  ): Promise<LayoutMetadata> {\n    return new Promise((resolve) => {\n      Promise.all([this.loadLayouts(), this.loadMetadata()]).then(\n        ([existingLayouts, existingMetadata]) => {\n          const id = getUniqueId();\n          const newMetadata: LayoutMetadata = {\n            ...metadata,\n            id,\n            created: formatDate({ date: \"dd.mm.yyyy\" })(new Date()),\n          };\n\n          this.saveLayoutsWithMetadata(\n            [...existingLayouts, { id, json: layout }],\n            [...existingMetadata, newMetadata],\n          );\n          resolve(newMetadata);\n        },\n      );\n    });\n  }\n\n  updateLayout(\n    id: string,\n    newMetadata: LayoutMetadataDto,\n    newLayout: LayoutJSON,\n  ): Promise<void> {\n    return new Promise((resolve, reject) => {\n      this.validateIds(id)\n        .then(() => Promise.all([this.loadLayouts(), this.loadMetadata()]))\n        .then(([existingLayouts, existingMetadata]) => {\n          const updatedLayouts = existingLayouts.map((layout) =>\n            layout.id === id ? { ...layout, json: newLayout } : layout,\n          );\n          const updatedMetadata = existingMetadata.map((metadata) =>\n            metadata.id === id ? { ...metadata, ...newMetadata } : metadata,\n          );\n          this.saveLayoutsWithMetadata(updatedLayouts, updatedMetadata);\n          resolve();\n        })\n        .catch((e) => reject(e));\n    });\n  }\n\n  deleteLayout(id: string): Promise<void> {\n    return new Promise((resolve, reject) => {\n      this.validateIds(id)\n        .then(() => Promise.all([this.loadLayouts(), this.loadMetadata()]))\n        .then(([existingLayouts, existingMetadata]) => {\n          const layouts = existingLayouts.filter((layout) => layout.id !== id);\n          const metadata = existingMetadata.filter(\n            (metadata) => metadata.id !== id,\n          );\n          this.saveLayoutsWithMetadata(layouts, metadata);\n          resolve();\n        })\n        .catch((e) => reject(e));\n    });\n  }\n\n  loadLayout(id: string): Promise<LayoutJSON> {\n    return new Promise((resolve, reject) => {\n      this.validateId(id, \"layout\")\n        .then(() => this.loadLayouts())\n        .then((existingLayouts) => {\n          const foundLayout = existingLayouts.find(\n            (layout) => layout.id === id,\n          );\n          if (foundLayout) {\n            resolve(foundLayout.json);\n          } else {\n            reject(new Error(`no layout found matching id ${id}`));\n          }\n        })\n        .catch((e) => reject(e));\n    });\n  }\n\n  loadMetadata(): Promise<LayoutMetadata[]> {\n    return new Promise((resolve) => {\n      const metadata = getLocalEntity<LayoutMetadata[]>(\n        this.metadataSaveLocation,\n      );\n      resolve(metadata || []);\n    });\n  }\n\n  async loadApplicationJSON(): Promise<ApplicationJSON | undefined> {\n    return (\n      this.#applicationJSON ||\n      new Promise((resolve) => {\n        const applicationJSON = getLocalEntity<ApplicationJSON>(this.#urlKey);\n        if (applicationJSON) {\n          this.#applicationJSON = applicationJSON;\n        }\n        resolve(applicationJSON);\n      })\n    );\n  }\n\n  saveApplicationJSON(applicationJSON: ApplicationJSON): Promise<void> {\n    return new Promise((resolve, reject) => {\n      const savedLayout = saveLocalEntity<ApplicationJSON>(\n        this.#urlKey,\n        applicationJSON,\n      );\n      if (savedLayout) {\n        this.#applicationJSON = applicationJSON;\n        resolve();\n      } else {\n        reject(new Error(\"Application Json failed to save\"));\n      }\n    });\n  }\n\n  loadLayouts = (): Promise<Layout[]> => {\n    return new Promise((resolve) => {\n      const layouts = getLocalEntity<Layout[]>(this.layoutsSaveLocation);\n      resolve(layouts || []);\n    });\n  };\n\n  saveLayoutsWithMetadata = (\n    layouts: Layout[],\n    metadata: LayoutMetadata[],\n  ): void => {\n    saveLocalEntity<Layout[]>(this.layoutsSaveLocation, layouts);\n    saveLocalEntity<LayoutMetadata[]>(this.metadataSaveLocation, metadata);\n  };\n\n  // Ensures that there is exactly one Layout entry and exactly one Metadata\n  // entry in local storage corresponding to the provided ID.\n  validateIds = async (id: string): Promise<void> => {\n    return Promise.all([\n      this.validateId(id, \"metadata\").catch((error) => error.message),\n      this.validateId(id, \"layout\").catch((error) => error.message),\n    ]).then((errorMessages: string[]) => {\n      // filter() is used to remove any blank messages before joining.\n      // Avoids orphaned delimiters in combined messages, e.g. \"; \" or \"; error 2\"\n      const combinedMessage = errorMessages\n        .filter((msg) => msg !== undefined)\n        .join(\"; \");\n      if (combinedMessage) {\n        throw new Error(combinedMessage);\n      }\n    });\n  };\n\n  // Ensures that there is exactly one element (Layout or Metadata) in local\n  // storage corresponding to the provided ID.\n  validateId = (id: string, dataType: \"metadata\" | \"layout\"): Promise<void> => {\n    return new Promise((resolve, reject) => {\n      const loadFunc =\n        dataType === \"metadata\"\n          ? () => this.loadMetadata()\n          : () => this.loadLayouts();\n\n      loadFunc().then((array: WithId[]) => {\n        const count = array.filter((element) => element.id === id).length;\n        switch (count) {\n          case 1: {\n            resolve();\n            break;\n          }\n          case 0: {\n            reject(new Error(`No ${dataType} with ID ${id}`));\n            break;\n          }\n          default:\n            reject(new Error(`Non-unique ${dataType} with ID ${id}`));\n        }\n      });\n    });\n  };\n\n  async getUserSettings() {\n    if (this.#applicationJSON) {\n      return this.#applicationJSON.userSettings ?? {};\n    }\n\n    try {\n      const applicationJSON = await this.loadApplicationJSON();\n      return applicationJSON?.userSettings ?? {};\n    } catch (e) {\n      return {};\n    }\n  }\n\n  saveUserSettings(userSettings: Settings) {\n    if (this.#applicationJSON) {\n      this.saveApplicationJSON({\n        ...this.#applicationJSON,\n        userSettings,\n      });\n    }\n  }\n}\n"],"names":["getAuthDetailsFromCookies","getLocalEntity","saveLocalEntity","getUniqueId","formatDate","metadata"],"mappings":"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"}
+{"version":3,"file":"LocalPersistenceManager.js","sources":["../../src/persistence-manager/LocalPersistenceManager.ts"],"sourcesContent":["import {\n  ApplicationJSON,\n  LayoutJSON,\n  Settings,\n  formatDate,\n  getLocalEntity,\n  getUniqueId,\n  saveLocalEntity,\n  Layout,\n  LayoutMetadata,\n  LayoutMetadataDto,\n  WithId,\n} from \"@vuu-ui/vuu-utils\";\nimport { getAuthDetailsFromCookies } from \"../login\";\nimport { IPersistenceManager } from \"./PersistenceManager\";\nconst baseMetadataSaveLocation = \"layouts/metadata\";\nconst baseLayoutsSaveLocation = \"layouts/layouts\";\n\nexport class LocalPersistenceManager implements IPersistenceManager {\n  #username: string = getAuthDetailsFromCookies()[0];\n  metadataSaveLocation = `${baseMetadataSaveLocation}/${this.#username}`;\n  layoutsSaveLocation = `${baseLayoutsSaveLocation}/${this.#username}`;\n  #urlKey = `api/vui/${this.#username}`;\n  #applicationJSON: ApplicationJSON | undefined;\n\n  constructor(urlKey?: string) {\n    if (urlKey) {\n      this.#urlKey = urlKey;\n    }\n  }\n\n  createLayout(\n    metadata: LayoutMetadataDto,\n    layout: LayoutJSON,\n  ): Promise<LayoutMetadata> {\n    return new Promise((resolve) => {\n      Promise.all([this.loadLayouts(), this.loadMetadata()]).then(\n        ([existingLayouts, existingMetadata]) => {\n          const id = getUniqueId();\n          const newMetadata: LayoutMetadata = {\n            ...metadata,\n            id,\n            created: formatDate({ date: \"dd.mm.yyyy\" })(new Date()),\n          };\n\n          this.saveLayoutsWithMetadata(\n            [...existingLayouts, { id, json: layout }],\n            [...existingMetadata, newMetadata],\n          );\n          resolve(newMetadata);\n        },\n      );\n    });\n  }\n\n  updateLayout(\n    id: string,\n    newMetadata: LayoutMetadataDto,\n    newLayout: LayoutJSON,\n  ): Promise<void> {\n    return new Promise((resolve, reject) => {\n      this.validateIds(id)\n        .then(() => Promise.all([this.loadLayouts(), this.loadMetadata()]))\n        .then(([existingLayouts, existingMetadata]) => {\n          const updatedLayouts = existingLayouts.map((layout) =>\n            layout.id === id ? { ...layout, json: newLayout } : layout,\n          );\n          const updatedMetadata = existingMetadata.map((metadata) =>\n            metadata.id === id ? { ...metadata, ...newMetadata } : metadata,\n          );\n          this.saveLayoutsWithMetadata(updatedLayouts, updatedMetadata);\n          resolve();\n        })\n        .catch((e) => reject(e));\n    });\n  }\n\n  deleteLayout(id: string): Promise<void> {\n    return new Promise((resolve, reject) => {\n      this.validateIds(id)\n        .then(() => Promise.all([this.loadLayouts(), this.loadMetadata()]))\n        .then(([existingLayouts, existingMetadata]) => {\n          const layouts = existingLayouts.filter((layout) => layout.id !== id);\n          const metadata = existingMetadata.filter(\n            (metadata) => metadata.id !== id,\n          );\n          this.saveLayoutsWithMetadata(layouts, metadata);\n          resolve();\n        })\n        .catch((e) => reject(e));\n    });\n  }\n\n  loadLayout(id: string): Promise<LayoutJSON> {\n    return new Promise((resolve, reject) => {\n      this.validateId(id, \"layout\")\n        .then(() => this.loadLayouts())\n        .then((existingLayouts) => {\n          const foundLayout = existingLayouts.find(\n            (layout) => layout.id === id,\n          );\n          if (foundLayout) {\n            resolve(foundLayout.json);\n          } else {\n            reject(new Error(`no layout found matching id ${id}`));\n          }\n        })\n        .catch((e) => reject(e));\n    });\n  }\n\n  loadMetadata(): Promise<LayoutMetadata[]> {\n    return new Promise((resolve) => {\n      const metadata = getLocalEntity<LayoutMetadata[]>(\n        this.metadataSaveLocation,\n      );\n      resolve(metadata || []);\n    });\n  }\n\n  async loadApplicationJSON(): Promise<ApplicationJSON | undefined> {\n    return (\n      this.#applicationJSON ||\n      new Promise((resolve) => {\n        const applicationJSON = getLocalEntity<ApplicationJSON>(this.#urlKey);\n        if (applicationJSON) {\n          this.#applicationJSON = applicationJSON;\n        }\n        resolve(applicationJSON);\n      })\n    );\n  }\n\n  saveApplicationJSON(applicationJSON: ApplicationJSON): Promise<void> {\n    return new Promise((resolve, reject) => {\n      const savedLayout = saveLocalEntity<ApplicationJSON>(\n        this.#urlKey,\n        applicationJSON,\n      );\n      if (savedLayout) {\n        this.#applicationJSON = applicationJSON;\n        resolve();\n      } else {\n        reject(new Error(\"Application Json failed to save\"));\n      }\n    });\n  }\n\n  loadLayouts = (): Promise<Layout[]> => {\n    return new Promise((resolve) => {\n      const layouts = getLocalEntity<Layout[]>(this.layoutsSaveLocation);\n      resolve(layouts || []);\n    });\n  };\n\n  saveLayoutsWithMetadata = (\n    layouts: Layout[],\n    metadata: LayoutMetadata[],\n  ): void => {\n    saveLocalEntity<Layout[]>(this.layoutsSaveLocation, layouts);\n    saveLocalEntity<LayoutMetadata[]>(this.metadataSaveLocation, metadata);\n  };\n\n  // Ensures that there is exactly one Layout entry and exactly one Metadata\n  // entry in local storage corresponding to the provided ID.\n  validateIds = async (id: string): Promise<void> => {\n    return Promise.all([\n      this.validateId(id, \"metadata\").catch((error) => error.message),\n      this.validateId(id, \"layout\").catch((error) => error.message),\n    ]).then((errorMessages: string[]) => {\n      // filter() is used to remove any blank messages before joining.\n      // Avoids orphaned delimiters in combined messages, e.g. \"; \" or \"; error 2\"\n      const combinedMessage = errorMessages\n        .filter((msg) => msg !== undefined)\n        .join(\"; \");\n      if (combinedMessage) {\n        throw new Error(combinedMessage);\n      }\n    });\n  };\n\n  // Ensures that there is exactly one element (Layout or Metadata) in local\n  // storage corresponding to the provided ID.\n  validateId = (id: string, dataType: \"metadata\" | \"layout\"): Promise<void> => {\n    return new Promise((resolve, reject) => {\n      const loadFunc =\n        dataType === \"metadata\"\n          ? () => this.loadMetadata()\n          : () => this.loadLayouts();\n\n      loadFunc().then((array: WithId[]) => {\n        const count = array.filter((element) => element.id === id).length;\n        switch (count) {\n          case 1: {\n            resolve();\n            break;\n          }\n          case 0: {\n            reject(new Error(`No ${dataType} with ID ${id}`));\n            break;\n          }\n          default:\n            reject(new Error(`Non-unique ${dataType} with ID ${id}`));\n        }\n      });\n    });\n  };\n\n  async getUserSettings() {\n    if (this.#applicationJSON) {\n      return this.#applicationJSON.userSettings ?? {};\n    }\n\n    try {\n      const applicationJSON = await this.loadApplicationJSON();\n      return applicationJSON?.userSettings ?? {};\n    } catch (e) {\n      return {};\n    }\n  }\n\n  saveUserSettings(userSettings: Settings) {\n    if (this.#applicationJSON) {\n      this.saveApplicationJSON({\n        ...this.#applicationJSON,\n        userSettings,\n      });\n    }\n  }\n}\n"],"names":["getAuthDetailsFromCookies","getLocalEntity","saveLocalEntity","getUniqueId","formatDate","metadata"],"mappings":"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"}

package/cjs/persistence-manager/RemotePersistenceManager.js

@@ -9,13 +9,16 @@ require('clsx');
 require('react');
 var loginUtils = require('../login/login-utils.js');
 
+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);
 const baseURL = "/api";
 const metadataSaveLocation = "layouts/metadata";
 const layoutsSaveLocation = "layouts";
 const applicationLayoutsSaveLocation = "application-layouts";
 class RemotePersistenceManager {
   constructor() {
-    this.username = loginUtils.getAuthDetailsFromCookies()[0];
+    __publicField(this, "username", loginUtils.getAuthDetailsFromCookies()[0]);
   }
   createLayout(metadata, layout) {
     return new Promise(