@vuu-ui/vuu-shell 0.0.26

package/esm/layout-management/useLayoutManager.js

@@ -0,0 +1,214 @@
+import { jsx } from 'react/jsx-runtime';
+import React, { useState, useRef, useCallback, useEffect, useContext } from 'react';
+import { isLayoutJSON, resolveJSONPath } from '@vuu-ui/vuu-layout';
+import { useNotifications } from '@vuu-ui/vuu-popups';
+import { defaultApplicationJson, loadingApplicationJson } from '../persistence-management/defaultApplicationJson.js';
+import { LocalPersistenceManager } from '../persistence-management/LocalPersistenceManager.js';
+import { RemotePersistenceManager } from '../persistence-management/RemotePersistenceManager.js';
+
+let _persistenceManager;
+const getPersistenceManager = () => {
+  if (_persistenceManager === void 0) {
+    _persistenceManager = process.env.LOCAL ? new LocalPersistenceManager() : new RemotePersistenceManager();
+  }
+  return _persistenceManager;
+};
+const LayoutManagementContext = React.createContext({
+  getApplicationSettings: () => void 0,
+  layoutMetadata: [],
+  saveLayout: () => void 0,
+  // The default Application JSON will be served if no LayoutManagementProvider
+  applicationJson: defaultApplicationJson,
+  saveApplicationLayout: () => void 0,
+  saveApplicationSettings: () => void 0,
+  loadLayoutById: () => void 0
+});
+const ensureLayoutHasTitle = (layout, layoutMetadata) => {
+  if (layout.props?.title !== void 0) {
+    return layout;
+  } else {
+    return {
+      ...layout,
+      props: {
+        ...layout.props,
+        title: layoutMetadata.name
+      }
+    };
+  }
+};
+const LayoutManagementProvider = (props) => {
+  const [layoutMetadata, setLayoutMetadata] = useState([]);
+  const [, forceRefresh] = useState({});
+  const notify = useNotifications();
+  const applicationJSONRef = useRef(loadingApplicationJson);
+  const setApplicationJSON = useCallback(
+    (applicationJSON, rerender = true) => {
+      applicationJSONRef.current = applicationJSON;
+      if (rerender) {
+        forceRefresh({});
+      }
+    },
+    []
+  );
+  const setApplicationLayout = useCallback(
+    (layout, rerender = true) => {
+      setApplicationJSON(
+        {
+          ...applicationJSONRef.current,
+          layout
+        },
+        rerender
+      );
+    },
+    [setApplicationJSON]
+  );
+  const setApplicationSettings = useCallback(
+    (settings) => {
+      setApplicationJSON(
+        {
+          ...applicationJSONRef.current,
+          settings: {
+            ...applicationJSONRef.current.settings,
+            ...settings
+          }
+        },
+        false
+      );
+    },
+    [setApplicationJSON]
+  );
+  useEffect(() => {
+    const persistenceManager = getPersistenceManager();
+    persistenceManager.loadMetadata().then((metadata) => {
+      setLayoutMetadata(metadata);
+    }).catch((error) => {
+      notify({
+        type: "error",
+        header: "Failed to Load Layouts",
+        body: "Could not load list of available layouts"
+      });
+      console.error("Error occurred while retrieving metadata", error);
+    });
+    persistenceManager.loadApplicationJSON().then((applicationJSON) => {
+      setApplicationJSON(applicationJSON);
+    }).catch((error) => {
+      notify({
+        type: "error",
+        header: "Failed to Load Layout",
+        body: "Could not load your latest view"
+      });
+      console.error(
+        "Error occurred while retrieving application layout",
+        error
+      );
+    });
+  }, [notify, setApplicationJSON]);
+  const saveApplicationLayout = useCallback(
+    (layout) => {
+      if (isLayoutJSON(layout)) {
+        setApplicationLayout(layout, false);
+        getPersistenceManager().saveApplicationJSON(applicationJSONRef.current);
+      } else {
+        console.error("Tried to save invalid application layout", layout);
+      }
+    },
+    [setApplicationLayout]
+  );
+  const saveLayout = useCallback(
+    (metadata) => {
+      const layoutToSave = resolveJSONPath(
+        applicationJSONRef.current.layout,
+        "#main-tabs.ACTIVE_CHILD"
+      );
+      if (layoutToSave && isLayoutJSON(layoutToSave)) {
+        getPersistenceManager().createLayout(metadata, ensureLayoutHasTitle(layoutToSave, metadata)).then((metadata2) => {
+          notify({
+            type: "success",
+            header: "Layout Saved Successfully",
+            body: `${metadata2.name} saved successfully`
+          });
+          setLayoutMetadata((prev) => [...prev, metadata2]);
+        }).catch((error) => {
+          notify({
+            type: "error",
+            header: "Failed to Save Layout",
+            body: `Failed to save layout ${metadata.name}`
+          });
+          console.error("Error occurred while saving layout", error);
+        });
+      } else {
+        console.error("Tried to save invalid layout", layoutToSave);
+        notify({
+          type: "error",
+          header: "Failed to Save Layout",
+          body: "Cannot save invalid layout"
+        });
+      }
+    },
+    [notify]
+  );
+  const saveApplicationSettings = useCallback(
+    (settings, key) => {
+      const { settings: applicationSettings } = applicationJSONRef.current;
+      if (key) {
+        setApplicationSettings({
+          ...applicationSettings,
+          [key]: settings
+        });
+      } else {
+        setApplicationSettings(settings);
+      }
+      getPersistenceManager().saveApplicationJSON(applicationJSONRef.current);
+    },
+    [setApplicationSettings]
+  );
+  const getApplicationSettings = useCallback(
+    (key) => {
+      const { settings } = applicationJSONRef.current;
+      return key ? settings?.[key] : settings;
+    },
+    []
+  );
+  const loadLayoutById = useCallback(
+    (id) => {
+      getPersistenceManager().loadLayout(id).then((layoutJson) => {
+        const { layout: currentLayout } = applicationJSONRef.current;
+        setApplicationLayout({
+          ...currentLayout,
+          children: (currentLayout.children || []).concat(layoutJson),
+          props: {
+            ...currentLayout.props,
+            active: currentLayout.children?.length ?? 0
+          }
+        });
+      }).catch((error) => {
+        notify({
+          type: "error",
+          header: "Failed to Load Layout",
+          body: "Failed to load the requested layout"
+        });
+        console.error("Error occurred while loading layout", error);
+      });
+    },
+    [notify, setApplicationLayout]
+  );
+  return /* @__PURE__ */ jsx(
+    LayoutManagementContext.Provider,
+    {
+      value: {
+        getApplicationSettings,
+        layoutMetadata,
+        saveLayout,
+        applicationJson: applicationJSONRef.current,
+        saveApplicationLayout,
+        saveApplicationSettings,
+        loadLayoutById
+      },
+      children: props.children
+    }
+  );
+};
+const useLayoutManager = () => useContext(LayoutManagementContext);
+
+export { LayoutManagementContext, LayoutManagementProvider, useLayoutManager };
+//# sourceMappingURL=useLayoutManager.js.map

package/esm/layout-management/useLayoutManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLayoutManager.js","sources":["../../src/layout-management/useLayoutManager.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  ApplicationJSON,\n  ApplicationSettings,\n  LayoutJSON,\n  resolveJSONPath,\n  ApplicationSetting,\n  isLayoutJSON,\n} from \"@vuu-ui/vuu-layout\";\nimport { useNotifications } from \"@vuu-ui/vuu-popups\";\nimport { LayoutMetadata, LayoutMetadataDto } from \"./layoutTypes\";\nimport {\n  defaultApplicationJson,\n  PersistenceManager,\n  loadingApplicationJson,\n  LocalPersistenceManager,\n  RemotePersistenceManager,\n} from \"../persistence-management\";\n\nlet _persistenceManager: PersistenceManager;\n\nconst getPersistenceManager = () => {\n  if (_persistenceManager === undefined) {\n    _persistenceManager = process.env.LOCAL\n      ? new LocalPersistenceManager()\n      : new RemotePersistenceManager();\n  }\n  return _persistenceManager;\n};\n\nexport const LayoutManagementContext = React.createContext<{\n  layoutMetadata: LayoutMetadata[];\n  saveLayout: (n: LayoutMetadataDto) => void;\n  applicationJson: ApplicationJSON;\n  saveApplicationLayout: (layout: LayoutJSON) => void;\n  getApplicationSettings: (\n    key?: keyof ApplicationSettings\n  ) => ApplicationSettings | ApplicationSetting | undefined;\n  saveApplicationSettings: (\n    settings: ApplicationSettings | ApplicationSetting,\n    key?: keyof ApplicationSettings\n  ) => void;\n  loadLayoutById: (id: string) => void;\n}>({\n  getApplicationSettings: () => undefined,\n  layoutMetadata: [],\n  saveLayout: () => undefined,\n  // The default Application JSON will be served if no LayoutManagementProvider\n  applicationJson: defaultApplicationJson,\n  saveApplicationLayout: () => undefined,\n  saveApplicationSettings: () => undefined,\n  loadLayoutById: () => undefined,\n});\n\ntype LayoutManagementProviderProps = {\n  children: JSX.Element | JSX.Element[];\n};\n\nconst ensureLayoutHasTitle = (\n  layout: LayoutJSON,\n  layoutMetadata: LayoutMetadataDto\n) => {\n  if (layout.props?.title !== undefined) {\n    return layout;\n  } else {\n    return {\n      ...layout,\n      props: {\n        ...layout.props,\n        title: layoutMetadata.name,\n      },\n    };\n  }\n};\n\nexport const LayoutManagementProvider = (\n  props: LayoutManagementProviderProps\n) => {\n  const [layoutMetadata, setLayoutMetadata] = useState<LayoutMetadata[]>([]);\n  // TODO this default should probably be a loading state rather than the placeholder\n  // It will be replaced as soon as the localStorage/remote layout is resolved\n  const [, forceRefresh] = useState({});\n  const notify = useNotifications();\n  const applicationJSONRef = useRef<ApplicationJSON>(loadingApplicationJson);\n\n  const setApplicationJSON = useCallback(\n    (applicationJSON: ApplicationJSON, rerender = true) => {\n      applicationJSONRef.current = applicationJSON;\n      if (rerender) {\n        forceRefresh({});\n      }\n    },\n    []\n  );\n\n  const setApplicationLayout = useCallback(\n    (layout: LayoutJSON, rerender = true) => {\n      setApplicationJSON(\n        {\n          ...applicationJSONRef.current,\n          layout,\n        },\n        rerender\n      );\n    },\n    [setApplicationJSON]\n  );\n\n  const setApplicationSettings = useCallback(\n    (settings: ApplicationSettings) => {\n      setApplicationJSON(\n        {\n          ...applicationJSONRef.current,\n          settings: {\n            ...applicationJSONRef.current.settings,\n            ...settings,\n          },\n        },\n        false\n      );\n    },\n    [setApplicationJSON]\n  );\n\n  useEffect(() => {\n    const persistenceManager = getPersistenceManager();\n\n    persistenceManager\n      .loadMetadata()\n      .then((metadata) => {\n        setLayoutMetadata(metadata);\n      })\n      .catch((error: Error) => {\n        notify({\n          type: \"error\",\n          header: \"Failed to Load Layouts\",\n          body: \"Could not load list of available layouts\",\n        });\n        console.error(\"Error occurred while retrieving metadata\", error);\n      });\n\n    persistenceManager\n      .loadApplicationJSON()\n      .then((applicationJSON: ApplicationJSON) => {\n        setApplicationJSON(applicationJSON);\n      })\n      .catch((error: Error) => {\n        notify({\n          type: \"error\",\n          header: \"Failed to Load Layout\",\n          body: \"Could not load your latest view\",\n        });\n        console.error(\n          \"Error occurred while retrieving application layout\",\n          error\n        );\n      });\n  }, [notify, setApplicationJSON]);\n\n  const saveApplicationLayout = useCallback(\n    (layout: LayoutJSON) => {\n      if (isLayoutJSON(layout)) {\n        setApplicationLayout(layout, false);\n        getPersistenceManager().saveApplicationJSON(applicationJSONRef.current);\n      } else {\n        console.error(\"Tried to save invalid application layout\", layout);\n      }\n    },\n    [setApplicationLayout]\n  );\n\n  const saveLayout = useCallback(\n    (metadata: LayoutMetadataDto) => {\n      const layoutToSave = resolveJSONPath(\n        applicationJSONRef.current.layout,\n        \"#main-tabs.ACTIVE_CHILD\"\n      );\n\n      if (layoutToSave && isLayoutJSON(layoutToSave)) {\n        getPersistenceManager()\n          .createLayout(metadata, ensureLayoutHasTitle(layoutToSave, metadata))\n          .then((metadata) => {\n            notify({\n              type: \"success\",\n              header: \"Layout Saved Successfully\",\n              body: `${metadata.name} saved successfully`,\n            });\n            setLayoutMetadata((prev) => [...prev, metadata]);\n          })\n          .catch((error: Error) => {\n            notify({\n              type: \"error\",\n              header: \"Failed to Save Layout\",\n              body: `Failed to save layout ${metadata.name}`,\n            });\n            console.error(\"Error occurred while saving layout\", error);\n          });\n      } else {\n        console.error(\"Tried to save invalid layout\", layoutToSave);\n        notify({\n          type: \"error\",\n          header: \"Failed to Save Layout\",\n          body: \"Cannot save invalid layout\",\n        });\n      }\n    },\n    [notify]\n  );\n\n  const saveApplicationSettings = useCallback(\n    (\n      settings: ApplicationSettings | ApplicationSetting,\n      key?: keyof ApplicationSettings\n    ) => {\n      const { settings: applicationSettings } = applicationJSONRef.current;\n      if (key) {\n        setApplicationSettings({\n          ...applicationSettings,\n          [key]: settings,\n        });\n      } else {\n        setApplicationSettings(settings as ApplicationSettings);\n      }\n      getPersistenceManager().saveApplicationJSON(applicationJSONRef.current);\n    },\n    [setApplicationSettings]\n  );\n\n  const getApplicationSettings = useCallback(\n    (key?: keyof ApplicationSettings) => {\n      const { settings } = applicationJSONRef.current;\n      return key ? settings?.[key] : settings;\n    },\n    []\n  );\n\n  const loadLayoutById = useCallback(\n    (id: string) => {\n      getPersistenceManager()\n        .loadLayout(id)\n        .then((layoutJson) => {\n          const { layout: currentLayout } = applicationJSONRef.current;\n          setApplicationLayout({\n            ...currentLayout,\n            children: (currentLayout.children || []).concat(layoutJson),\n            props: {\n              ...currentLayout.props,\n              active: currentLayout.children?.length ?? 0,\n            },\n          });\n        })\n        .catch((error: Error) => {\n          notify({\n            type: \"error\",\n            header: \"Failed to Load Layout\",\n            body: \"Failed to load the requested layout\",\n          });\n          console.error(\"Error occurred while loading layout\", error);\n        });\n    },\n    [notify, setApplicationLayout]\n  );\n\n  return (\n    <LayoutManagementContext.Provider\n      value={{\n        getApplicationSettings,\n        layoutMetadata,\n        saveLayout,\n        applicationJson: applicationJSONRef.current,\n        saveApplicationLayout,\n        saveApplicationSettings,\n        loadLayoutById,\n      }}\n    >\n      {props.children}\n    </LayoutManagementContext.Provider>\n  );\n};\n\nexport const useLayoutManager = () => useContext(LayoutManagementContext);\n"],"names":["metadata"],"mappings":"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"}

package/esm/left-nav/LeftNav.css.js

@@ -0,0 +1,4 @@
+var leftNavCss = ".vuuLeftNav {\n    --vuuOverflowContainer-height: auto;\n    --salt-navigable-fontWeight-active: 700;\n    --vuuTab-background-selected: rgba(255, 255, 255, 0.10);\n    --vuuTab-hover-background: rgba(255, 255, 255, 0.10);\n    --vuuTab-before-content: none;\n    --vuuTab-borderRadius: 6px;\n    --vuuTab-height: 40px;\n    --vuuTabstrip-fontWeight: 700;\n    --vuuTabstrip-width: 100%;\n    --svg-demo: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M11.3333 11C11.52 11 11.6667 10.8533 11.6667 10.6667C11.6667 10.48 11.52 10.3333 11.3333 10.3333C11.1467 10.3333 11 10.48 11 10.6667C11 10.8533 11.1467 11 11.3333 11Z\"/><path d=\"M5.99999 8.66667C6.36818 8.66667 6.66666 8.36819 6.66666 8C6.66666 7.63181 6.36818 7.33334 5.99999 7.33334C5.63181 7.33334 5.33333 7.63181 5.33333 8C5.33333 8.36819 5.63181 8.66667 5.99999 8.66667Z\"/><path d=\"M8.66667 6C9.03486 6 9.33333 5.70152 9.33333 5.33333C9.33333 4.96514 9.03486 4.66667 8.66667 4.66667C8.29848 4.66667 8 4.96514 8 5.33333C8 5.70152 8.29848 6 8.66667 6Z\"/><path d=\"M8.66667 11.3333C9.03486 11.3333 9.33333 11.0349 9.33333 10.6667C9.33333 10.2985 9.03486 10 8.66667 10C8.29848 10 8 10.2985 8 10.6667C8 11.0349 8.29848 11.3333 8.66667 11.3333Z\"/><path d=\"M11.3333 8.33333C11.52 8.33333 11.6667 8.18666 11.6667 8C11.6667 7.81333 11.52 7.66666 11.3333 7.66666C11.1467 7.66666 11 7.81333 11 8C11 8.18666 11.1467 8.33333 11.3333 8.33333Z\"/><path d=\"M8.66667 8.66667C9.03486 8.66667 9.33333 8.36819 9.33333 8C9.33333 7.63181 9.03486 7.33334 8.66667 7.33334C8.29848 7.33334 8 7.63181 8 8C8 8.36819 8.29848 8.66667 8.66667 8.66667Z\"/><path d=\"M2 2H14V3.33333H2V2Z\"/><path d=\"M3.33333 6.33333C3.88561 6.33333 4.33333 5.88562 4.33333 5.33333C4.33333 4.78105 3.88561 4.33333 3.33333 4.33333C2.78104 4.33333 2.33333 4.78105 2.33333 5.33333C2.33333 5.88562 2.78104 6.33333 3.33333 6.33333Z\"/><path d=\"M3.33333 9C3.88561 9 4.33333 8.55228 4.33333 8C4.33333 7.44772 3.88561 7 3.33333 7C2.78104 7 2.33333 7.44772 2.33333 8C2.33333 8.55228 2.78104 9 3.33333 9Z\"/><path d=\"M3.33333 11.6667C3.88561 11.6667 4.33333 11.2189 4.33333 10.6667C4.33333 10.1144 3.88561 9.66666 3.33333 9.66666C2.78104 9.66666 2.33333 10.1144 2.33333 10.6667C2.33333 11.2189 2.78104 11.6667 3.33333 11.6667Z\"/><path d=\"M11.3333 5.66667C11.52 5.66667 11.6667 5.52 11.6667 5.33333C11.6667 5.14667 11.52 5 11.3333 5C11.1467 5 11 5.14667 11 5.33333C11 5.52 11.1467 5.66667 11.3333 5.66667Z\"/><path d=\"M5.99999 11.3333C6.36818 11.3333 6.66666 11.0349 6.66666 10.6667C6.66666 10.2985 6.36818 10 5.99999 10C5.63181 10 5.33333 10.2985 5.33333 10.6667C5.33333 11.0349 5.63181 11.3333 5.99999 11.3333Z\"/><path d=\"M5.99999 6C6.36818 6 6.66666 5.70152 6.66666 5.33333C6.66666 4.96514 6.36818 4.66667 5.99999 4.66667C5.63181 4.66667 5.33333 4.96514 5.33333 5.33333C5.33333 5.70152 5.63181 6 5.99999 6Z\"/><path d=\"M2 12.6667H14V14H2V12.6667Z\"/></svg>');\n    --svg-features: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M15.3333 12.6667H14L14 3.33334H15.3333L15.3333 12.6667ZM12.6667 12.6667H11.3333L11.3333 3.33334H12.6667L12.6667 12.6667ZM1.33333 12.6667L9.33333 12.6667C9.69999 12.6667 9.99999 12.3667 9.99999 12V4.00001C9.99999 3.63334 9.69999 3.33334 9.33333 3.33334L1.33333 3.33334C0.966661 3.33334 0.666661 3.63334 0.666661 4.00001L0.666661 12C0.666661 12.3667 0.966661 12.6667 1.33333 12.6667ZM1.99999 4.66667L8.66666 4.66667V11.3333L1.99999 11.3333L1.99999 4.66667Z\"/></svg>');\n    --svg-tables: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M2 6H4.66667V3.33334H3.33333C2.6 3.33334 2 3.93334 2 4.66667V6ZM2 9.33334H4.66667V6.66667H2V9.33334ZM5.33333 9.33334H8V6.66667H5.33333V9.33334ZM8.66667 9.33334H11.3333V6.66667H8.66667V9.33334ZM5.33333 6H8V3.33334H5.33333V6ZM8.66667 3.33334V6H11.3333V3.33334H8.66667ZM12 9.33334H14.6667V6.66667H12V9.33334ZM3.33333 12.6667H4.66667V10H2V11.3333C2 12.0667 2.6 12.6667 3.33333 12.6667ZM5.33333 12.6667H8V10H5.33333V12.6667ZM8.66667 12.6667H11.3333V10H8.66667V12.6667ZM12 12.6667H13.3333C14.0667 12.6667 14.6667 12.0667 14.6667 11.3333V10H12V12.6667ZM12 3.33334V6H14.6667V4.66667C14.6667 3.93334 14.0667 3.33334 13.3333 3.33334H12Z\"/></svg>');\n    --svg-layouts: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M15.3333 10H14V11.3333H15.3333V10ZM15.3333 12.6667H14V14H15.3333V12.6667ZM15.3333 7.33333H14V8.66667H15.3333V7.33333ZM10 2H8.66667V3.33333H10V2ZM15.3333 4.66667H14V6H15.3333V4.66667ZM0.666672 14H7.33334V10H0.666672V14ZM2.00001 4.66667H0.666672V6H2.00001V4.66667ZM10 12.6667H8.66667V14H10V12.6667ZM12.6667 2H11.3333V3.33333H12.6667V2ZM15.3333 2H14V3.33333H15.3333V2ZM12.6667 12.6667H11.3333V14H12.6667V12.6667ZM2.00001 7.33333H0.666672V8.66667H2.00001V7.33333ZM7.33334 2H6.00001V3.33333H7.33334V2ZM4.66667 2H3.33334V3.33333H4.66667V2ZM2.00001 2H0.666672V3.33333H2.00001V2Z\"/></svg>');\n    --vuu-light-text-primary: #15171b;\n\n    --menu-level-2-width: 0px;\n\n    box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.15);\n    display: flex;\n    height: calc(100% - 4px);\n    margin-bottom: 4px;\n    overflow: hidden;\n    position: relative;\n    transition: width .2s ease-out;\n    z-index: 0;\n    /* width: calc(var(--menu-width) + var(--menu-level-2-width)); */\n    /* width: 100%; */\n\n}\n\n.vuuLeftNav-menu-full {\n    --menu-width: var(--nav-menu-expanded-width);\n}\n\n.vuuLeftNav-menu-icons {\n    --menu-width: var(--nav-menu-collapsed-width);\n}\n\n.vuuLeftNav-menu-icons-content {\n    --menu-width: var(--nav-menu-collapsed-width);\n    --menu-level-2-width: var(--nav-menu-content-width);\n}\n\n.vuuLeftNav-menu-full-content {\n    --menu-width: var(--nav-menu-expanded-width);\n    --menu-level-2-width: var(--nav-menu-content-width);\n}\n\n.vuuLeftNav-menu-icons-content .vuuLeftNav-menu-secondary,\n.vuuLeftNav-menu-full-content .vuuLeftNav-menu-secondary {\n    display: flex;\n}\n\n.vuuLeftNav-menu-primary {\n    background-color: #2A015F;\n    container-type: inline-size;\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    padding: 32px 16px;\n    transition: flex-basis ease-out .2s;\n    flex-grow:0;\n    flex-shrink:0;\n    flex-basis: var(--menu-width);\n}\n\n.vuuLeftNav-menu-secondary {\n    flex: 1 1 auto;\n    display: none;\n    /* position: absolute; */\n    top:0;\n    right: 0;\n    flex-grow:0;\n    flex-shrink:0;\n    flex-basis: var(--nav-menu-content-width, 240px);\n    z-index: -1;\n}\n\n.vuuLeftNav .vuuTabstrip {\n    margin-top: 102px;\n}\n\n.vuuLeftNav .vuuTab {\n    --vuuTab-focusVisible-color: pink;\n    --vuu-icon-color: white;\n    --vuu-icon-left: 12px;\n    --vuu-icon-size: 16px;\n    border-left: solid 4px transparent;\n    padding: 0 0 0 48px;\n\n}\n\n.vuuLeftNav .vuuTab-selected {\n    --vuu-icon-color: var(--salt-navigable-indicator-active);\n    border-left: solid 4px var(--salt-navigable-indicator-active);\n}\n\n.vuuLeftNav-logo {\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n}\n\n.vuuLeftNav-main {\n    flex: 1 1 auto;\n}\n\n.vuuLeftNav-menu {\n    color: white;\n    margin-top: 102px;\n    padding: 0;\n}\n\n\n.vuuLeftNav [data-icon='demo'] {\n    --vuu-icon-svg: var(--svg-demo);\n}\n\n.vuuLeftNav [data-icon='tables'] {\n    --vuu-icon-svg: var(--svg-tables);\n}\n\n.vuuLeftNav [data-icon='features'] {\n    --vuu-icon-svg: var(--svg-features);\n}\n\n.vuuLeftNav [data-icon='layouts'] {\n    --vuu-icon-svg: var(--svg-layouts);\n}\n\n\n@container (max-width: 100px) {\n    .vuuTab {\n        /* --vuu-icon-left: 12px !important; */\n        --vuuTab-padding: 0 0 0 42px;\n    }\n\n    .vuuTab-main {\n        display: none !important;\n    }\n}\n\n.vuuLeftNav-buttonBar {\n    align-items: center;\n    display: flex;\n    flex: 0 0 100px;\n    justify-content: center;\n}\n\n.vuuLeftNav-toggleButton {\n    --vuu-icon-color: var(--vuu-light-text-primary);\n    --vuu-icon-left: 11px;\n    --vuu-icon-top: 10px;\n    --vuu-icon-size: 16px;\n    background-color: var(--salt-navigable-indicator-active);\n    border-width: 0;\n    border-radius: 18px;\n    height: 36px;\n    position: relative;\n    width: 36px\n}\n\n.vuuLeftNav-toggleButton-open {\n    --vuu-icon-left: 9px;\n}\n\n.vuuLeftNav-drawer {\n    display: flex;\n    padding: 0 0 0 24px;\n    flex-direction: column;\n    align-items: flex-start;\n    flex-shrink: 0;\n    align-self: stretch;\n    background: #FFF;\n    box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.15);\n    height: 100%\n}";
+
+export { leftNavCss as default };
+//# sourceMappingURL=LeftNav.css.js.map

package/esm/left-nav/LeftNav.css.js.map

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

package/esm/left-nav/LeftNav.js

@@ -0,0 +1,164 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { VuuLogo } from '@vuu-ui/vuu-icons';
+import { useLayoutProviderDispatch, Stack } from '@vuu-ui/vuu-layout';
+import { Tabstrip, Tab } from '@vuu-ui/vuu-ui-controls';
+import { useThemeAttributes } from '@vuu-ui/vuu-utils';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import cx from 'clsx';
+import { useState, useCallback } from 'react';
+import { FeatureList } from '../feature-list/FeatureList.js';
+import 'html-to-image';
+import '@salt-ds/core';
+import { LayoutList } from '../layout-management/LayoutList.js';
+import '../layout-management/useLayoutManager.js';
+import leftNavCss from './LeftNav.css.js';
+
+const classBase = "vuuLeftNav";
+const getDisplayStatus = (activeTabIndex, expanded) => {
+  if (activeTabIndex === 0) {
+    return expanded ? "menu-full" : "menu-icons";
+  } else {
+    return expanded ? "menu-full-content" : "menu-icons-content";
+  }
+};
+const LeftNav = (props) => {
+  const dispatch = useLayoutProviderDispatch();
+  const [themeClass] = useThemeAttributes();
+  const {
+    "data-path": path,
+    defaultExpanded = true,
+    defaultActiveTabIndex = 0,
+    features,
+    onActiveChange,
+    onTogglePrimaryMenu,
+    sizeCollapsed = 80,
+    sizeContent = 300,
+    sizeExpanded = 240,
+    style: styleProp,
+    tableFeatures,
+    ...htmlAttributes
+  } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-left-nav",
+    css: leftNavCss,
+    window: targetWindow
+  });
+  const [navState, setNavState] = useState({
+    activeTabIndex: defaultActiveTabIndex,
+    expanded: defaultExpanded
+  });
+  const getFullWidth = useCallback(
+    (tabIndex, expanded) => {
+      if (tabIndex === 0) {
+        return expanded ? sizeExpanded : sizeCollapsed;
+      } else {
+        return expanded ? sizeExpanded + sizeContent : sizeCollapsed + sizeContent;
+      }
+    },
+    [sizeCollapsed, sizeContent, sizeExpanded]
+  );
+  const handleTabSelection = useCallback(
+    (activeTabIndex) => {
+      const { activeTabIndex: currentIndex, expanded } = navState;
+      const newState = { activeTabIndex, expanded };
+      setNavState(newState);
+      if (activeTabIndex === 0 || currentIndex === 0) {
+        const width = getFullWidth(activeTabIndex, expanded);
+        dispatch({
+          type: "layout-resize",
+          path: "#vuu-side-panel",
+          size: width
+        });
+      }
+      onActiveChange?.(activeTabIndex);
+    },
+    [dispatch, getFullWidth, navState, onActiveChange]
+  );
+  const displayStatus = getDisplayStatus(
+    navState.activeTabIndex,
+    navState.expanded
+  );
+  const toggleExpanded = useCallback(() => {
+    const { activeTabIndex, expanded } = navState;
+    const primaryMenuExpanded = !expanded;
+    const newState = { activeTabIndex, expanded: primaryMenuExpanded };
+    setNavState(newState);
+    dispatch({
+      type: "layout-resize",
+      path: "#vuu-side-panel",
+      size: getFullWidth(activeTabIndex, primaryMenuExpanded)
+    });
+    onTogglePrimaryMenu?.(primaryMenuExpanded);
+  }, [dispatch, getFullWidth, navState, onTogglePrimaryMenu]);
+  const style = {
+    ...styleProp,
+    "--nav-menu-collapsed-width": `${sizeCollapsed}px`,
+    "--nav-menu-expanded-width": `${sizeExpanded}px`,
+    "--nav-menu-content-width": `${sizeContent}px`
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(classBase, `${classBase}-${displayStatus}`),
+      style,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cx(`${classBase}-menu-primary`, themeClass),
+            "data-mode": "dark",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "vuuLeftNav-logo", children: /* @__PURE__ */ jsx(VuuLogo, {}) }),
+              /* @__PURE__ */ jsx("div", { className: `${classBase}-main`, children: /* @__PURE__ */ jsxs(
+                Tabstrip,
+                {
+                  activeTabIndex: navState.activeTabIndex,
+                  animateSelectionThumb: false,
+                  className: `${classBase}-Tabstrip`,
+                  onActiveChange: handleTabSelection,
+                  orientation: "vertical",
+                  children: [
+                    /* @__PURE__ */ jsx(Tab, { "data-icon": "demo", label: "DEMO" }),
+                    /* @__PURE__ */ jsx(Tab, { "data-icon": "features", label: "VUU FEATURES" }),
+                    /* @__PURE__ */ jsx(Tab, { "data-icon": "tables", label: "VUU TABLES" }),
+                    /* @__PURE__ */ jsx(Tab, { "data-icon": "layouts", label: "MY LAYOUTS" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { className: "vuuLeftNav-buttonBar", children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: cx("vuuLeftNav-toggleButton", {
+                    "vuuLeftNav-toggleButton-open": displayStatus.startsWith("menu-full"),
+                    "vuuLeftNav-toggleButton-closed": displayStatus.startsWith("menu-icons")
+                  }),
+                  "data-icon": displayStatus.startsWith("menu-full") ? "chevron-left" : "chevron-right",
+                  onClick: toggleExpanded
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            active: navState.activeTabIndex - 1,
+            className: `${classBase}-menu-secondary`,
+            showTabs: false,
+            children: [
+              /* @__PURE__ */ jsx(FeatureList, { features, title: "VUU FEATURES" }),
+              /* @__PURE__ */ jsx(FeatureList, { features: tableFeatures, title: "VUU TABLES" }),
+              /* @__PURE__ */ jsx("div", { className: "vuuLeftNav-drawer", children: /* @__PURE__ */ jsx(LayoutList, {}) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { LeftNav };
+//# sourceMappingURL=LeftNav.js.map

package/esm/left-nav/LeftNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LeftNav.js","sources":["../../src/left-nav/LeftNav.tsx"],"sourcesContent":["import { VuuLogo } from \"@vuu-ui/vuu-icons\";\nimport {\n  LayoutResizeAction,\n  Stack,\n  useLayoutProviderDispatch,\n} from \"@vuu-ui/vuu-layout\";\nimport { Tab, Tabstrip } from \"@vuu-ui/vuu-ui-controls\";\nimport { useThemeAttributes } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { CSSProperties, HTMLAttributes, useCallback, useState } from \"react\";\nimport { FeatureProps } from \"../feature\";\nimport { FeatureList } from \"../feature-list\";\nimport { LayoutList } from \"../layout-management\";\n\nimport leftNavCss from \"./LeftNav.css\";\n\nconst classBase = \"vuuLeftNav\";\n\nexport type NavDisplayStatus =\n  | \"menu-full\"\n  | \"menu-icons\"\n  | \"menu-full-content\"\n  | \"menu-icons-content\";\n\nconst getDisplayStatus = (\n  activeTabIndex: number,\n  expanded: boolean\n): NavDisplayStatus => {\n  if (activeTabIndex === 0) {\n    return expanded ? \"menu-full\" : \"menu-icons\";\n  } else {\n    return expanded ? \"menu-full-content\" : \"menu-icons-content\";\n  }\n};\n\nexport type NavDisplayStatusHandler = (\n  navDisplayStatus: NavDisplayStatus\n) => void;\nexport interface LeftNavProps extends HTMLAttributes<HTMLDivElement> {\n  \"data-path\"?: string;\n  defaultActiveTabIndex?: number;\n  defaultExpanded?: boolean;\n  features: FeatureProps[];\n  onActiveChange?: (activeTabIndex: number) => void;\n  onTogglePrimaryMenu?: (expanded: boolean) => void;\n  sizeCollapsed?: number;\n  sizeContent?: number;\n  sizeExpanded?: number;\n  tableFeatures: FeatureProps[];\n}\n\ntype NavState = {\n  activeTabIndex: number;\n  expanded: boolean;\n};\n\nexport const LeftNav = (props: LeftNavProps) => {\n  const dispatch = useLayoutProviderDispatch();\n  const [themeClass] = useThemeAttributes();\n  const {\n    \"data-path\": path,\n    defaultExpanded = true,\n    defaultActiveTabIndex = 0,\n    features,\n    onActiveChange,\n    onTogglePrimaryMenu,\n    sizeCollapsed = 80,\n    sizeContent = 300,\n    sizeExpanded = 240,\n    style: styleProp,\n    tableFeatures,\n    ...htmlAttributes\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-left-nav\",\n    css: leftNavCss,\n    window: targetWindow,\n  });\n\n  const [navState, setNavState] = useState<NavState>({\n    activeTabIndex: defaultActiveTabIndex,\n    expanded: defaultExpanded,\n  });\n\n  const getFullWidth = useCallback(\n    (tabIndex: number, expanded: boolean): number => {\n      if (tabIndex === 0) {\n        return expanded ? sizeExpanded : sizeCollapsed;\n      } else {\n        return expanded\n          ? sizeExpanded + sizeContent\n          : sizeCollapsed + sizeContent;\n      }\n    },\n    [sizeCollapsed, sizeContent, sizeExpanded]\n  );\n\n  const handleTabSelection = useCallback(\n    (activeTabIndex: number) => {\n      const { activeTabIndex: currentIndex, expanded } = navState;\n      const newState = { activeTabIndex, expanded };\n      setNavState(newState);\n      if (activeTabIndex === 0 || currentIndex === 0) {\n        const width = getFullWidth(activeTabIndex, expanded);\n        dispatch({\n          type: \"layout-resize\",\n          path: \"#vuu-side-panel\",\n          size: width,\n        } as LayoutResizeAction);\n      }\n      onActiveChange?.(activeTabIndex);\n    },\n    [dispatch, getFullWidth, navState, onActiveChange]\n  );\n\n  const displayStatus = getDisplayStatus(\n    navState.activeTabIndex,\n    navState.expanded\n  );\n\n  const toggleExpanded = useCallback(() => {\n    const { activeTabIndex, expanded } = navState;\n    const primaryMenuExpanded = !expanded;\n    const newState = { activeTabIndex, expanded: primaryMenuExpanded };\n    setNavState(newState);\n    dispatch({\n      type: \"layout-resize\",\n      path: \"#vuu-side-panel\",\n      size: getFullWidth(activeTabIndex, primaryMenuExpanded),\n    } as LayoutResizeAction);\n    onTogglePrimaryMenu?.(primaryMenuExpanded);\n  }, [dispatch, getFullWidth, navState, onTogglePrimaryMenu]);\n\n  const style = {\n    ...styleProp,\n    \"--nav-menu-collapsed-width\": `${sizeCollapsed}px`,\n    \"--nav-menu-expanded-width\": `${sizeExpanded}px`,\n    \"--nav-menu-content-width\": `${sizeContent}px`,\n  } as CSSProperties;\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, `${classBase}-${displayStatus}`)}\n      style={style}\n    >\n      <div\n        className={cx(`${classBase}-menu-primary`, themeClass)}\n        data-mode=\"dark\"\n      >\n        <div className=\"vuuLeftNav-logo\">\n          <VuuLogo />\n        </div>\n        <div className={`${classBase}-main`}>\n          <Tabstrip\n            activeTabIndex={navState.activeTabIndex}\n            animateSelectionThumb={false}\n            className={`${classBase}-Tabstrip`}\n            onActiveChange={handleTabSelection}\n            orientation=\"vertical\"\n          >\n            <Tab data-icon=\"demo\" label=\"DEMO\"></Tab>\n            <Tab data-icon=\"features\" label=\"VUU FEATURES\"></Tab>\n            <Tab data-icon=\"tables\" label=\"VUU TABLES\"></Tab>\n            <Tab data-icon=\"layouts\" label=\"MY LAYOUTS\"></Tab>\n          </Tabstrip>\n        </div>\n        <div className=\"vuuLeftNav-buttonBar\">\n          <button\n            className={cx(\"vuuLeftNav-toggleButton\", {\n              \"vuuLeftNav-toggleButton-open\":\n                displayStatus.startsWith(\"menu-full\"),\n              \"vuuLeftNav-toggleButton-closed\":\n                displayStatus.startsWith(\"menu-icons\"),\n            })}\n            data-icon={\n              displayStatus.startsWith(\"menu-full\")\n                ? \"chevron-left\"\n                : \"chevron-right\"\n            }\n            onClick={toggleExpanded}\n          />\n        </div>\n      </div>\n      <Stack\n        active={navState.activeTabIndex - 1}\n        className={`${classBase}-menu-secondary`}\n        showTabs={false}\n      >\n        <FeatureList features={features} title=\"VUU FEATURES\" />\n        <FeatureList features={tableFeatures} title=\"VUU TABLES\" />\n        <div className=\"vuuLeftNav-drawer\">\n          <LayoutList />\n        </div>\n      </Stack>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/login/LoginPanel.css.js

@@ -0,0 +1,4 @@
+var loginPanelCss = ".vuuLoginPanel {\n  --saltInput-paddingLeft: 8px;\n  --login-width: 856px;\n  --login-height: 550px;\n  --hwTextInput-border: solid 1px #ccc;\n  --hwTextInput-height: 28px;\n  --hwTextInput-padding: 0 12px;\n  --hwTextInput-width: 100%;\n  --login-row-height: 60px;\n  border-radius: 16px;\n  box-shadow: 0px 24px 44px 0px rgba(0, 0, 0, 0.25);\n  display: flex;\n  height: var(--login-height);\n  margin: 0 auto;\n  width: var(--login-width);\n}\n\n.vuuLoginPanel .saltInput-primary {\n--saltInput-height: 36px;\n}\n\n.vuuLoginPanel-title {\n  justify-content: center;\nfont-size: 28px;\nfont-weight: 400;\ndisplay: flex;\n}\n\n\n.vuuLoginPanel-branding {\n  align-items: center;\n  background-color: var(--vuu-color-purple-50);\n  border-radius: 16px 0 0 16px;\n  display: flex;\n  flex: 0 0 368px;\n  flex-direction: column;\n  gap: 40px;\n  justify-content: center;\n  padding: 40px 100px;\n}\n\n.vuuLoginPanel-form {\n  background-color: white;\n  border-radius: 0 16px 16px 0px;\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  gap: 32px;\n  justify-content: center;\n  padding: 0 40px;\n}\n\n.vuuLoginPanel-password {\n  --vuu-icon-size: 16px;\n}\n\n.vuuLoginPanel-appName {\n  color: white;\n  font-size: 18px;\n  font-weight: 700;\n  text-transform: uppercase;\n}\n\n.vuuLoginPanel-login {\n  --saltButton-height: 36px;\n  --saltButton-borderRadius: 6px;\n  width: 100%\n}\n\n\n";
+
+export { loginPanelCss as default };
+//# sourceMappingURL=LoginPanel.css.js.map

package/esm/login/LoginPanel.css.js.map

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

package/esm/login/LoginPanel.js

@@ -0,0 +1,106 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { FormField, FormFieldLabel, Button } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { VuuInput } from '@vuu-ui/vuu-ui-controls';
+import { VuuLogo } from './VuuLogo.js';
+import cx from 'clsx';
+import loginPanelCss from './LoginPanel.css.js';
+
+const classBase = "vuuLoginPanel";
+const LoginPanel = ({
+  appName = "Demo App",
+  className,
+  requirePassword = true,
+  onSubmit,
+  ...htmlAttributes
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-login-panel",
+    css: loginPanelCss,
+    window: targetWindow
+  });
+  const [username, setUserName] = useState("");
+  const [password, setPassword] = useState("");
+  const inputRef = useRef(null);
+  const login = () => {
+    onSubmit(username, password);
+  };
+  const handleUsername = (evt) => {
+    setUserName(evt.target.value);
+  };
+  const handlePassword = (evt) => {
+    setPassword(evt.target.value);
+  };
+  const handleCommitName = useCallback(() => {
+    if (!requirePassword) {
+      onSubmit(username);
+    }
+  }, [onSubmit, requirePassword, username]);
+  const handleCommitPassword = useCallback(() => {
+    if (username) {
+      onSubmit(username, password);
+    }
+  }, [onSubmit, password, username]);
+  const dataIsValid = username.trim() !== "" && (requirePassword === false || password.trim() !== "");
+  useEffect(() => {
+    console.log(`inputRef`, {
+      input: inputRef.current
+    });
+    inputRef.current?.focus();
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: cx(classBase, className), children: [
+    /* @__PURE__ */ jsxs("div", { className: `${classBase}-branding`, children: [
+      /* @__PURE__ */ jsx(VuuLogo, {}),
+      /* @__PURE__ */ jsx("div", { className: `${classBase}-appName`, children: appName })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: `${classBase}-form`, children: [
+      /* @__PURE__ */ jsx("div", { className: `${classBase}-title`, children: "Welcome Back" }),
+      /* @__PURE__ */ jsxs(FormField, { children: [
+        /* @__PURE__ */ jsx(FormFieldLabel, { children: "Username" }),
+        /* @__PURE__ */ jsx(
+          VuuInput,
+          {
+            value: username,
+            id: "text-username",
+            inputRef,
+            onChange: handleUsername,
+            onCommit: handleCommitName
+          }
+        )
+      ] }),
+      requirePassword ? /* @__PURE__ */ jsxs(FormField, { children: [
+        /* @__PURE__ */ jsx(FormFieldLabel, { children: "Password" }),
+        /* @__PURE__ */ jsx(
+          VuuInput,
+          {
+            className: `${classBase}-password`,
+            inputProps: {
+              type: "password"
+            },
+            value: password,
+            id: "text-password",
+            onChange: handlePassword,
+            onCommit: handleCommitPassword,
+            endAdornment: /* @__PURE__ */ jsx("span", { "data-icon": "eye", style: { cursor: "pointer" } })
+          }
+        )
+      ] }) : null,
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: `${classBase}-login`,
+          disabled: !dataIsValid,
+          onClick: login,
+          variant: "cta",
+          children: "Login"
+        }
+      )
+    ] })
+  ] });
+};
+
+export { LoginPanel };
+//# sourceMappingURL=LoginPanel.js.map

package/esm/login/LoginPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginPanel.js","sources":["../../src/login/LoginPanel.tsx"],"sourcesContent":["import {\n  ChangeEvent,\n  HTMLAttributes,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { Button, FormField, FormFieldLabel } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport { VuuLogo } from \"./VuuLogo\";\nimport cx from \"clsx\";\n\nimport loginPanelCss from \"./LoginPanel.css\";\n\nconst classBase = \"vuuLoginPanel\";\n\nexport interface LoginPanelProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onSubmit\"> {\n  appName?: string;\n  onSubmit: (username: string, password?: string) => void;\n  requirePassword?: boolean;\n}\n\nexport const LoginPanel = ({\n  appName = \"Demo App\",\n  className,\n  requirePassword = true,\n  onSubmit,\n  ...htmlAttributes\n}: LoginPanelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-login-panel\",\n    css: loginPanelCss,\n    window: targetWindow,\n  });\n\n  const [username, setUserName] = useState(\"\");\n  const [password, setPassword] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const login = () => {\n    onSubmit(username, password);\n  };\n\n  const handleUsername = (evt: ChangeEvent<HTMLInputElement>) => {\n    setUserName(evt.target.value);\n  };\n\n  const handlePassword = (evt: ChangeEvent<HTMLInputElement>) => {\n    setPassword(evt.target.value);\n  };\n\n  const handleCommitName = useCallback(() => {\n    if (!requirePassword) {\n      onSubmit(username);\n    }\n  }, [onSubmit, requirePassword, username]);\n\n  const handleCommitPassword = useCallback(() => {\n    if (username) {\n      onSubmit(username, password);\n    }\n  }, [onSubmit, password, username]);\n\n  const dataIsValid =\n    username.trim() !== \"\" &&\n    (requirePassword === false || password.trim() !== \"\");\n\n  useEffect(() => {\n    console.log(`inputRef`, {\n      input: inputRef.current,\n    });\n    inputRef.current?.focus();\n  }, []);\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, className)}>\n      <div className={`${classBase}-branding`}>\n        <VuuLogo />\n        <div className={`${classBase}-appName`}>{appName}</div>\n      </div>\n      <div className={`${classBase}-form`}>\n        <div className={`${classBase}-title`}>Welcome Back</div>\n        <FormField>\n          <FormFieldLabel>Username</FormFieldLabel>\n          <VuuInput\n            value={username}\n            id=\"text-username\"\n            inputRef={inputRef}\n            onChange={handleUsername}\n            onCommit={handleCommitName}\n          />\n        </FormField>\n\n        {requirePassword ? (\n          <FormField>\n            <FormFieldLabel>Password</FormFieldLabel>\n            <VuuInput\n              className={`${classBase}-password`}\n              inputProps={{\n                type: \"password\",\n              }}\n              value={password}\n              id=\"text-password\"\n              onChange={handlePassword}\n              onCommit={handleCommitPassword}\n              endAdornment={\n                <span data-icon=\"eye\" style={{ cursor: \"pointer\" }} />\n              }\n            />\n          </FormField>\n        ) : null}\n\n        <Button\n          className={`${classBase}-login`}\n          disabled={!dataIsValid}\n          onClick={login}\n          variant=\"cta\"\n        >\n          Login\n        </Button>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}