@vuu-ui/vuu-shell 0.0.26

package/cjs/index.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var AppHeader = require('./app-header/AppHeader.js');
+var ConnectionStatusIndicator = require('./connection-status/ConnectionStatusIndicator.js');
+var Feature = require('./feature/Feature.js');
+var SaveLayoutPanel = require('./layout-management/SaveLayoutPanel.js');
+var LayoutList = require('./layout-management/LayoutList.js');
+var useLayoutManager = require('./layout-management/useLayoutManager.js');
+var useLayoutContextMenuItems = require('./layout-management/useLayoutContextMenuItems.js');
+var LeftNav = require('./left-nav/LeftNav.js');
+var LoginPanel = require('./login/LoginPanel.js');
+var loginUtils = require('./login/login-utils.js');
+var SessionEditingForm = require('./session-editing-form/SessionEditingForm.js');
+var shell = require('./shell.js');
+var ContextPanel = require('./shell-layouts/context-panel/ContextPanel.js');
+var useShellLayout = require('./shell-layouts/useShellLayout.js');
+var SidePanel = require('./shell-layouts/side-panel/SidePanel.js');
+var shellTypes = require('./shellTypes.js');
+var ShellContextProvider = require('./ShellContextProvider.js');
+var FeatureList = require('./feature-list/FeatureList.js');
+var ThemeSwitch = require('./theme-switch/ThemeSwitch.js');
+
+
+
+exports.AppHeader = AppHeader.AppHeader;
+exports.ConnectionStatusIndicator = ConnectionStatusIndicator.ConnectionStatusIndicator;
+exports.Feature = Feature.Feature;
+exports.SaveLayoutPanel = SaveLayoutPanel.SaveLayoutPanel;
+exports.LayoutList = LayoutList.LayoutList;
+exports.LayoutManagementContext = useLayoutManager.LayoutManagementContext;
+exports.LayoutManagementProvider = useLayoutManager.LayoutManagementProvider;
+exports.useLayoutManager = useLayoutManager.useLayoutManager;
+exports.useLayoutContextMenuItems = useLayoutContextMenuItems.useLayoutContextMenuItems;
+exports.LeftNav = LeftNav.LeftNav;
+exports.LoginPanel = LoginPanel.LoginPanel;
+exports.getAuthDetailsFromCookies = loginUtils.getAuthDetailsFromCookies;
+exports.getAuthModeFromCookies = loginUtils.getAuthModeFromCookies;
+exports.logout = loginUtils.logout;
+exports.redirectToLogin = loginUtils.redirectToLogin;
+exports.SessionEditingForm = SessionEditingForm.SessionEditingForm;
+exports.Shell = shell.Shell;
+exports.ContextPanel = ContextPanel.ContextPanel;
+exports.useShellLayout = useShellLayout.useShellLayout;
+exports.SidePanel = SidePanel.SidePanel;
+exports.isTableSchema = shellTypes.isTableSchema;
+exports.isWildcardSchema = shellTypes.isWildcardSchema;
+exports.ShellContextProvider = ShellContextProvider.ShellContextProvider;
+exports.useShellContext = ShellContextProvider.useShellContext;
+exports.FeatureList = FeatureList.FeatureList;
+exports.ThemeSwitch = ThemeSwitch.ThemeSwitch;
+//# sourceMappingURL=index.js.map

package/cjs/index.js.map

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

package/cjs/layout-management/LayoutList.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var layoutListCss = ".vuuLayoutList {\n    --vuuLayoutList-width: 90%;\n    --vuuMeasuredContainer-flex: 1 1 1px;\n    align-self: stretch;\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    overflow: hidden;\n    padding-right: 6px;\n\n    /* compatible with Chrome, Edge, and Safari */\n    ::-webkit-scrollbar {\n        width: 4px;\n        height: 4px;\n    }\n\n    ::-webkit-scrollbar-track {\n        background: transparent;\n        margin-top: 15px;\n        margin-bottom: 15px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n        border-radius: 4px;\n        background: #D9D9D9;\n    }\n}\n\n.vuuLayoutList-header {\n    display: flex;\n    flex: 0 0 47px;\n    width: var(--vuuLayoutList-width);\n    padding: 16px 0;\n    border-bottom: 1px solid rgba(119, 124, 148, 0.10);\n    color: var(--light-text-primary, #15171B);\n    font-weight: 700;\n    letter-spacing: 0.48px;\n    line-height: 200%;\n    text-transform: uppercase;\n}\n\n.vuuLayoutList-groupName {\n    display: flex;\n    padding-top: 24px;\n    width: var(--vuuLayoutList-width);\n    color: var(--light-text-secondary, #606477);\n    font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;\n    font-family: Nunito Sans;\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 700;\n    line-height: 200%;\n    letter-spacing: 0.48px;\n    text-transform: uppercase;\n}\n\n.vuuLayoutList-layoutContainer {\n    display: flex;\n    align-items: center;\n    width: 90%;\n    height: auto;\n    gap: 8px;\n    padding: 8px 0;\n    flex: 1 1 auto;\n    cursor: pointer;\n}\n\n.vuuLayoutList-layoutName {\n    color: var(--light-text-primary, #15171B);\n    font-weight: 600;\n    line-height: 133.333%;\n    text-transform: capitalize;\n}\n\n.vuuLayoutList-screenshot {\n    width: 60px;\n    height: 45.6px;\n    border: 1px solid #D6D7DA;\n}\n\n.vuuLayoutList-layoutDetails {\n    color: var(--light-text-secondary, #606477);\n    font-size: 10px;\n    font-weight: 600;\n    line-height: 150%;\n}\n";
+
+module.exports = layoutListCss;
+//# sourceMappingURL=LayoutList.css.js.map

package/cjs/layout-management/LayoutList.css.js.map

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

package/cjs/layout-management/LayoutList.js

@@ -0,0 +1,75 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var useLayoutManager = require('./useLayoutManager.js');
+var LayoutTile = require('./LayoutTile.js');
+var LayoutList$1 = require('./LayoutList.css.js');
+
+const classBase = "vuuLayoutList";
+const LayoutList = (props) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-layout-list",
+    css: LayoutList$1,
+    window: targetWindow
+  });
+  const { layoutMetadata, loadLayoutById } = useLayoutManager.useLayoutManager();
+  const handleLoadLayout = (layoutId) => {
+    if (layoutId) {
+      loadLayoutById(layoutId);
+    }
+  };
+  const layoutsByGroup = layoutMetadata.reduce((acc, cur) => {
+    if (acc[cur.group]) {
+      return {
+        ...acc,
+        [cur.group]: [...acc[cur.group], cur]
+      };
+    }
+    return {
+      ...acc,
+      [cur.group]: [cur]
+    };
+  }, {});
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classBase,
+      ...props,
+      role: "listbox",
+      "aria-label": "my layouts",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-header`, children: "My Layouts" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          vuuUiControls.List,
+          {
+            height: "auto",
+            source: Object.entries(layoutsByGroup),
+            ListItem: ({ item }) => {
+              if (!item)
+                return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+              const [groupName, layoutMetadata2] = item;
+              return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "list", "aria-label": groupName, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-groupName`, children: groupName }),
+                layoutMetadata2.map((metadata) => /* @__PURE__ */ jsxRuntime.jsx(
+                  LayoutTile.LayoutTile,
+                  {
+                    metadata,
+                    handleLoadLayout
+                  },
+                  metadata.id
+                ))
+              ] });
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.LayoutList = LayoutList;
+//# sourceMappingURL=LayoutList.js.map

package/cjs/layout-management/LayoutList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutList.js","sources":["../../src/layout-management/LayoutList.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { List } from \"@vuu-ui/vuu-ui-controls\";\nimport { LayoutMetadata } from \"./layoutTypes\";\nimport { useLayoutManager } from \"./useLayoutManager\";\nimport { LayoutTile } from \"./LayoutTile\";\n\nimport layoutListCss from \"./LayoutList.css\";\n\ntype LayoutGroups = {\n  [groupName: string]: LayoutMetadata[];\n};\n\nconst classBase = \"vuuLayoutList\";\n\nexport const LayoutList = (props: HTMLAttributes<HTMLDivElement>) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-layout-list\",\n    css: layoutListCss,\n    window: targetWindow,\n  });\n\n  const { layoutMetadata, loadLayoutById } = useLayoutManager();\n\n  const handleLoadLayout = (layoutId?: string) => {\n    if (layoutId) {\n      loadLayoutById(layoutId);\n    }\n  };\n\n  const layoutsByGroup = layoutMetadata.reduce((acc: LayoutGroups, cur) => {\n    if (acc[cur.group]) {\n      return {\n        ...acc,\n        [cur.group]: [...acc[cur.group], cur],\n      };\n    }\n    return {\n      ...acc,\n      [cur.group]: [cur],\n    };\n  }, {});\n\n  return (\n    <div\n      className={classBase}\n      {...props}\n      role=\"listbox\"\n      aria-label=\"my layouts\"\n    >\n      <div className={`${classBase}-header`}>My Layouts</div>\n      <List<[string, LayoutMetadata[]]>\n        height=\"auto\"\n        source={Object.entries(layoutsByGroup)}\n        ListItem={({ item }) => {\n          if (!item) return <></>;\n          const [groupName, layoutMetadata] = item;\n          return (\n            <div role=\"list\" aria-label={groupName}>\n              <div className={`${classBase}-groupName`}>{groupName}</div>\n              {layoutMetadata.map((metadata) => (\n                <LayoutTile\n                  key={metadata.id}\n                  metadata={metadata}\n                  handleLoadLayout={handleLoadLayout}\n                />\n              ))}\n            </div>\n          );\n        }}\n      />\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","layoutListCss","useLayoutManager","jsxs","jsx","List","Fragment","layoutMetadata","LayoutTile"],"mappings":";;;;;;;;;;AAcA,MAAM,SAAY,GAAA,eAAA,CAAA;AAEL,MAAA,UAAA,GAAa,CAAC,KAA0C,KAAA;AACnE,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,cAAA,EAAgB,cAAe,EAAA,GAAIC,iCAAiB,EAAA,CAAA;AAE5D,EAAM,MAAA,gBAAA,GAAmB,CAAC,QAAsB,KAAA;AAC9C,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,cAAA,CAAe,QAAQ,CAAA,CAAA;AAAA,KACzB;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,cAAiB,GAAA,cAAA,CAAe,MAAO,CAAA,CAAC,KAAmB,GAAQ,KAAA;AACvE,IAAI,IAAA,GAAA,CAAI,GAAI,CAAA,KAAK,CAAG,EAAA;AAClB,MAAO,OAAA;AAAA,QACL,GAAG,GAAA;AAAA,QACH,CAAC,GAAI,CAAA,KAAK,GAAG,CAAC,GAAG,GAAI,CAAA,GAAA,CAAI,KAAK,CAAA,EAAG,GAAG,CAAA;AAAA,OACtC,CAAA;AAAA,KACF;AACA,IAAO,OAAA;AAAA,MACL,GAAG,GAAA;AAAA,MACH,CAAC,GAAA,CAAI,KAAK,GAAG,CAAC,GAAG,CAAA;AAAA,KACnB,CAAA;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,SAAA;AAAA,MACV,GAAG,KAAA;AAAA,MACJ,IAAK,EAAA,SAAA;AAAA,MACL,YAAW,EAAA,YAAA;AAAA,MAEX,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,WAAW,QAAU,EAAA,YAAA,EAAA,CAAA;AAAA,wBACjDA,cAAA;AAAA,UAACC,kBAAA;AAAA,UAAA;AAAA,YACC,MAAO,EAAA,MAAA;AAAA,YACP,MAAA,EAAQ,MAAO,CAAA,OAAA,CAAQ,cAAc,CAAA;AAAA,YACrC,QAAU,EAAA,CAAC,EAAE,IAAA,EAAW,KAAA;AACtB,cAAA,IAAI,CAAC,IAAA;AAAM,gBAAA,uBAASD,cAAA,CAAAE,mBAAA,EAAA,EAAA,CAAA,CAAA;AACpB,cAAM,MAAA,CAAC,SAAWC,EAAAA,eAAc,CAAI,GAAA,IAAA,CAAA;AACpC,cAAA,uBACGJ,eAAA,CAAA,KAAA,EAAA,EAAI,IAAK,EAAA,MAAA,EAAO,cAAY,SAC3B,EAAA,QAAA,EAAA;AAAA,gCAAAC,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,cAAe,QAAU,EAAA,SAAA,EAAA,CAAA;AAAA,gBACpDG,eAAAA,CAAe,GAAI,CAAA,CAAC,QACnB,qBAAAH,cAAA;AAAA,kBAACI,qBAAA;AAAA,kBAAA;AAAA,oBAEC,QAAA;AAAA,oBACA,gBAAA;AAAA,mBAAA;AAAA,kBAFK,QAAS,CAAA,EAAA;AAAA,iBAIjB,CAAA;AAAA,eACH,EAAA,CAAA,CAAA;AAAA,aAEJ;AAAA,WAAA;AAAA,SACF;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/cjs/layout-management/LayoutTile.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var layoutTileCss = ".vuuLayoutTile-layoutTile {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 0px;\n  flex: 1 1 auto;\n  cursor: pointer;\n}\n\n.vuuLayoutTile-layoutName {\n  color: var(--light-text-primary, #15171B);\n  font-weight: 600;\n  line-height: 133.333%;\n  text-transform: capitalize;\n}\n\n.vuuLayoutTile-screenshot {\n  width: 60px;\n  height: 45.6px;\n  border: 1px solid #D6D7DA;\n}\n\n.vuuLayoutTile-layoutDetails {\n  color: var(--light-text-secondary, #606477);\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 150%;\n}\n";
+
+module.exports = layoutTileCss;
+//# sourceMappingURL=LayoutTile.css.js.map

package/cjs/layout-management/LayoutTile.css.js.map

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

package/cjs/layout-management/LayoutTile.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var LayoutTile$1 = require('./LayoutTile.css.js');
+
+const classBase = "vuuLayoutTile";
+const LayoutTile = (props) => {
+  const { metadata, handleLoadLayout } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-layout-tile",
+    css: LayoutTile$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listitem", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `${classBase}-layoutTile`,
+      role: "button",
+      onClick: () => handleLoadLayout(metadata?.id),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("img", { className: `${classBase}-screenshot`, src: metadata?.screenshot }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-layoutName`, children: metadata?.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-layoutDetails`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: `${metadata?.user}, ${metadata?.created}` }) })
+        ] })
+      ]
+    },
+    metadata?.id
+  ) });
+};
+
+exports.LayoutTile = LayoutTile;
+//# sourceMappingURL=LayoutTile.js.map

package/cjs/layout-management/LayoutTile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutTile.js","sources":["../../src/layout-management/LayoutTile.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { LayoutMetadata } from \"./layoutTypes\";\n\nimport layoutTileCss from \"./LayoutTile.css\";\n\nconst classBase = \"vuuLayoutTile\";\n\ntype LayoutTileProps = {\n  metadata: LayoutMetadata;\n  handleLoadLayout: (layoutId?: string) => void;\n};\n\nexport const LayoutTile = (props: LayoutTileProps) => {\n  const { metadata, handleLoadLayout } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-layout-tile\",\n    css: layoutTileCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div role=\"listitem\">\n      <div\n        className={`${classBase}-layoutTile`}\n        key={metadata?.id}\n        role=\"button\"\n        onClick={() => handleLoadLayout(metadata?.id)}\n      >\n        <img className={`${classBase}-screenshot`} src={metadata?.screenshot} />\n        <div>\n          <div className={`${classBase}-layoutName`}>{metadata?.name}</div>\n          <div className={`${classBase}-layoutDetails`}>\n            <div>{`${metadata?.user}, ${metadata?.created}`}</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","layoutTileCss","jsx","jsxs"],"mappings":";;;;;;;AAMA,MAAM,SAAY,GAAA,eAAA,CAAA;AAOL,MAAA,UAAA,GAAa,CAAC,KAA2B,KAAA;AACpD,EAAM,MAAA,EAAE,QAAU,EAAA,gBAAA,EAAqB,GAAA,KAAA,CAAA;AACvC,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAAC,cAAA,CAAC,KAAI,EAAA,EAAA,IAAA,EAAK,UACR,EAAA,QAAA,kBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,SAAS,CAAA,WAAA,CAAA;AAAA,MAEvB,IAAK,EAAA,QAAA;AAAA,MACL,OAAS,EAAA,MAAM,gBAAiB,CAAA,QAAA,EAAU,EAAE,CAAA;AAAA,MAE5C,QAAA,EAAA;AAAA,wBAAAD,cAAA,CAAC,SAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAe,WAAA,CAAA,EAAA,GAAA,EAAK,UAAU,UAAY,EAAA,CAAA;AAAA,wCACrE,KACC,EAAA,EAAA,QAAA,EAAA;AAAA,0BAAAA,cAAA,CAAC,SAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,WAAA,CAAA,EAAgB,oBAAU,IAAK,EAAA,CAAA;AAAA,0BAC1DA,cAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,cAAA,CAAA,EAAA,QAAA,kBAAAA,cAAA,CAAC,KAAK,EAAA,EAAA,QAAA,EAAA,CAAA,EAAG,UAAU,IAAI,CAAA,EAAA,EAAK,QAAU,EAAA,OAAO,IAAG,CAClD,EAAA,CAAA;AAAA,SACF,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,IAVK,QAAU,EAAA,EAAA;AAAA,GAYnB,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/cjs/layout-management/SaveLayoutPanel.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var saveLayoutPanelCss = ".saveLayoutPanel {\n  --salt-selectable-foreground-hover: #6d18bdc3;\n  --salt-selectable-foreground-selected: #6D18BD;\n  --salt-selectable-borderColor-selected: #6D18BD;\n  --saltInputLegacy-fontSize: 12px;\n  --salt-text-label-fontSize: 10px;\n  --saltFormFieldLegacy-label-paddingLeft: 0;\n  --saltFormField-label-fontWeight: 400;\n  --saltText-color: var(--text-secondary-foreground, #606477);\n}\n\n.spinner{\n  width: 100px;\n  height:100px;\n  background-image: var(--svg-spinner);\n}\n\n.saveLayoutPanel-panelContainer {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.saveLayoutPanel-panelContent {\n  display: flex;\n  align-items: flex-start;\n  gap: 32px;\n}\n\n.saveLayoutPanel-formContainer {\n  display: flex;\n  width: 217px;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 16px;\n}\n\n.saveLayoutPanel-formField {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n}\n\n.saveLayoutPanel-inputText {\n  border: none;\n  color: var(--light-text-primary, #15171B);\n  font-family: Nunito Sans A-Variant, serif;\n  font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 16px;\n  padding-left: 4px;\n  width: 100%;\n  outline: none;\n}\n\n.saveLayoutPanel-settingsGroup {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  gap: 10px;\n  width: 100%;\n  line-height: 16px;\n}\n\n.saveLayoutPanel-screenshotContainer {\n  display: flex;\n  width: 304px;\n  height: 208px;\n  padding: 11px 15.5px;\n  justify-content: center;\n  align-items: center;\n  border: 1px solid #E8E8E8;\n  background: var(--dark-text-primary, #FFF);\n}\n\n.saveLayoutPanel-screenshot {\n  background: lightgray 50% / cover no-repeat;\n  width: 273px;\n  height: 186px;\n}\n\n.saveLayoutPanel-buttonsContainer {\n  display: flex;\n  justify-content: flex-end;\n  align-items: flex-start;\n  align-self: stretch;\n  padding-top: 24px;\n  gap: 8px;\n}\n\n.saveLayoutPanel-cancelButton,\n.saveLayoutPanel-saveButton {\n  display: flex;\n  height: fit-content;\n  padding: 4px 8px;\n  align-items: flex-start;\n  gap: 8px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: 133.333%;\n  letter-spacing: 0.48px;\n  text-transform: uppercase;\n}\n\n.saveLayoutPanel-cancelButton {\n  color: var(--actionable-primary-foreground-default, #606477);\n  background: var(--actionable-primary-background-default, #FFF);\n}\n\n.saveLayoutPanel-saveButton {\n  background: #6D18BD;\n  border-color: #6D18BD;\n  color: white;\n}\n\n.saveLayoutPanel-saveButton.saltButton:disabled {\n  background: #6D18BD;\n  border-color: #6D18BD;\n  color: white;\n  opacity: 0.3;\n}\n\n.saveLayoutPanel-saveButton.saltButton:hover {\n  background: #F37880;\n  border-color: #F37880;\n  color: white;\n}\n";
+
+module.exports = saveLayoutPanelCss;
+//# sourceMappingURL=SaveLayoutPanel.css.js.map

package/cjs/layout-management/SaveLayoutPanel.css.js.map

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

package/cjs/layout-management/SaveLayoutPanel.js

@@ -0,0 +1,149 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var screenshotUtils = require('./screenshot-utils.js');
+var core = require('@salt-ds/core');
+var React = require('react');
+require('clsx');
+var loginUtils = require('../login/login-utils.js');
+var SaveLayoutPanel$1 = require('./SaveLayoutPanel.css.js');
+
+const classBase = "saveLayoutPanel";
+const formField = `${classBase}-formField`;
+const groups = ["Group 1", "Group 2", "Group 3", "Group 4", "Group 5"];
+const checkboxValues = ["Value 1", "Value 2", "Value 3"];
+const radioValues = ["Value 1", "Value 2", "Value 3"];
+const SaveLayoutPanel = (props) => {
+  const { defaultTitle = "", onCancel, onSave, componentId } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-save-layout-panel",
+    css: SaveLayoutPanel$1,
+    window: targetWindow
+  });
+  const [layoutName, setLayoutName] = React.useState(defaultTitle);
+  const [group, setGroup] = React.useState("");
+  const [checkValues, setCheckValues] = React.useState([]);
+  const [radioValue, setRadioValue] = React.useState(radioValues[0]);
+  const [screenshot, setScreenshot] = React.useState();
+  const [screenshotErrorMessage, setScreenshotErrorMessage] = React.useState();
+  const [username] = loginUtils.getAuthDetailsFromCookies();
+  React.useEffect(() => {
+    if (componentId) {
+      screenshotUtils.takeScreenshot(document.getElementById(componentId)).then((screenshot2) => {
+        setScreenshot(screenshot2);
+      }).catch((error) => {
+        setScreenshotErrorMessage(error.message);
+      });
+    }
+  }, [componentId]);
+  const handleSubmit = () => {
+    onSave({
+      name: layoutName,
+      group,
+      screenshot: screenshot ?? "",
+      user: username
+    });
+  };
+  const screenshotContent = React.useMemo(() => {
+    if (screenshot) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          className: `${classBase}-screenshot`,
+          src: screenshot,
+          alt: "screenshot of current layout"
+        }
+      );
+    }
+    if (screenshotErrorMessage) {
+      return /* @__PURE__ */ jsxRuntime.jsx(core.Text, { children: screenshotErrorMessage });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "spinner" });
+  }, [screenshot, screenshotErrorMessage]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-panelContainer`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-panelContent`, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-formContainer`, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { className: formField, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Group" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            vuuUiControls.ComboBox,
+            {
+              source: groups,
+              allowFreeText: true,
+              InputProps: {
+                inputProps: {
+                  className: `${classBase}-inputText`,
+                  placeholder: "Select Group or Enter New Name",
+                  onChange: (event) => setGroup(event.target.value)
+                }
+              },
+              width: "100%",
+              onSelectionChange: (_, value) => setGroup(value || "")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { className: formField, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Layout Name" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.Input,
+            {
+              inputProps: {
+                className: `${classBase}-inputText`,
+                placeholder: "Enter Layout Name"
+              },
+              onChange: (event) => setLayoutName(event.target.value),
+              value: layoutName
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { className: formField, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Some Layout Setting" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-settingsGroup`, children: checkboxValues.map((value, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            vuuUiControls.Checkbox,
+            {
+              onToggle: () => setCheckValues(
+                (prev) => prev.includes(value) ? prev.filter((entry) => entry !== value) : [...prev, value]
+              ),
+              checked: checkValues.includes(value),
+              label: value
+            },
+            i
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { className: formField, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Some Layout Setting" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-settingsGroup`, children: radioValues.map((value, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            vuuUiControls.RadioButton,
+            {
+              onClick: () => setRadioValue(value),
+              checked: radioValue === value,
+              label: value,
+              groupName: "radioGroup"
+            },
+            i
+          )) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-screenshotContainer`, children: screenshotContent })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-buttonsContainer`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.Button, { className: `${classBase}-cancelButton`, onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        core.Button,
+        {
+          className: `${classBase}-saveButton`,
+          onClick: handleSubmit,
+          disabled: layoutName === "" || group === "",
+          children: "Save"
+        }
+      )
+    ] })
+  ] });
+};
+
+exports.SaveLayoutPanel = SaveLayoutPanel;
+//# sourceMappingURL=SaveLayoutPanel.js.map

package/cjs/layout-management/SaveLayoutPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SaveLayoutPanel.js","sources":["../../src/layout-management/SaveLayoutPanel.tsx"],"sourcesContent":["import { Checkbox, ComboBox, RadioButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { takeScreenshot } from \"./screenshot-utils\";\nimport { Button, FormField, FormFieldLabel, Input, Text } from \"@salt-ds/core\";\nimport { ChangeEvent, useEffect, useMemo, useState } from \"react\";\nimport { LayoutMetadataDto } from \"./layoutTypes\";\nimport { getAuthDetailsFromCookies } from \"../login\";\n\nimport saveLayoutPanelCss from \"./SaveLayoutPanel.css\";\n\nconst classBase = \"saveLayoutPanel\";\nconst formField = `${classBase}-formField`;\n\nconst groups = [\"Group 1\", \"Group 2\", \"Group 3\", \"Group 4\", \"Group 5\"];\n\nconst checkboxValues = [\"Value 1\", \"Value 2\", \"Value 3\"];\n\nconst radioValues = [\"Value 1\", \"Value 2\", \"Value 3\"] as const;\n\ntype RadioValue = (typeof radioValues)[number];\n\ntype SaveLayoutPanelProps = {\n  componentId?: string;\n  defaultTitle?: string;\n  onCancel: () => void;\n  onSave: (layoutMetadata: LayoutMetadataDto) => void;\n};\n\nexport const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {\n  const { defaultTitle = \"\", onCancel, onSave, componentId } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-save-layout-panel\",\n    css: saveLayoutPanelCss,\n    window: targetWindow,\n  });\n\n  const [layoutName, setLayoutName] = useState<string>(defaultTitle);\n  const [group, setGroup] = useState<string>(\"\");\n  const [checkValues, setCheckValues] = useState<string[]>([]);\n  const [radioValue, setRadioValue] = useState<RadioValue>(radioValues[0]);\n  const [screenshot, setScreenshot] = useState<string | undefined>();\n  const [screenshotErrorMessage, setScreenshotErrorMessage] = useState<\n    string | undefined\n  >();\n  const [username] = getAuthDetailsFromCookies();\n\n  useEffect(() => {\n    if (componentId) {\n      takeScreenshot(document.getElementById(componentId) as HTMLElement)\n        .then((screenshot) => {\n          setScreenshot(screenshot);\n        })\n        .catch((error: Error) => {\n          setScreenshotErrorMessage(error.message);\n        });\n    }\n  }, [componentId]);\n\n  const handleSubmit = () => {\n    onSave({\n      name: layoutName,\n      group,\n      screenshot: screenshot ?? \"\",\n      user: username,\n    });\n  };\n\n  const screenshotContent = useMemo(() => {\n    if (screenshot) {\n      return (\n        <img\n          className={`${classBase}-screenshot`}\n          src={screenshot}\n          alt=\"screenshot of current layout\"\n        />\n      );\n    }\n    if (screenshotErrorMessage) {\n      return <Text>{screenshotErrorMessage}</Text>;\n    }\n    return <div className=\"spinner\" />;\n  }, [screenshot, screenshotErrorMessage]);\n\n  return (\n    <div className={`${classBase}-panelContainer`}>\n      <div className={`${classBase}-panelContent`}>\n        <div className={`${classBase}-formContainer`}>\n          <FormField className={formField}>\n            <FormFieldLabel>Group</FormFieldLabel>\n            <ComboBox\n              source={groups}\n              allowFreeText\n              InputProps={{\n                inputProps: {\n                  className: `${classBase}-inputText`,\n                  placeholder: \"Select Group or Enter New Name\",\n                  onChange: (event: ChangeEvent<HTMLInputElement>) =>\n                    setGroup(event.target.value),\n                },\n              }}\n              width=\"100%\"\n              onSelectionChange={(_, value) => setGroup(value || \"\")}\n            />\n          </FormField>\n          <FormField className={formField}>\n            <FormFieldLabel>Layout Name</FormFieldLabel>\n            <Input\n              inputProps={{\n                className: `${classBase}-inputText`,\n                placeholder: \"Enter Layout Name\",\n              }}\n              onChange={(event: ChangeEvent<HTMLInputElement>) =>\n                setLayoutName(event.target.value)\n              }\n              value={layoutName}\n            />\n          </FormField>\n          <FormField className={formField}>\n            <FormFieldLabel>Some Layout Setting</FormFieldLabel>\n            <div className={`${classBase}-settingsGroup`}>\n              {checkboxValues.map((value, i) => (\n                <Checkbox\n                  key={i}\n                  onToggle={() =>\n                    setCheckValues((prev) =>\n                      prev.includes(value)\n                        ? prev.filter((entry) => entry !== value)\n                        : [...prev, value]\n                    )\n                  }\n                  checked={checkValues.includes(value)}\n                  label={value}\n                />\n              ))}\n            </div>\n          </FormField>\n          <FormField className={formField}>\n            <FormFieldLabel>Some Layout Setting</FormFieldLabel>\n            <div className={`${classBase}-settingsGroup`}>\n              {radioValues.map((value, i) => (\n                <RadioButton\n                  key={i}\n                  onClick={() => setRadioValue(value)}\n                  checked={radioValue === value}\n                  label={value}\n                  groupName=\"radioGroup\"\n                />\n              ))}\n            </div>\n          </FormField>\n        </div>\n        <div className={`${classBase}-screenshotContainer`}>\n          {screenshotContent}\n        </div>\n      </div>\n      <div className={`${classBase}-buttonsContainer`}>\n        <Button className={`${classBase}-cancelButton`} onClick={onCancel}>\n          Cancel\n        </Button>\n        <Button\n          className={`${classBase}-saveButton`}\n          onClick={handleSubmit}\n          disabled={layoutName === \"\" || group === \"\"}\n        >\n          Save\n        </Button>\n      </div>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","saveLayoutPanelCss","useState","getAuthDetailsFromCookies","useEffect","takeScreenshot","screenshot","useMemo","jsx","Text","jsxs","FormField","FormFieldLabel","ComboBox","Input","Checkbox","RadioButton","Button"],"mappings":"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"}

package/cjs/layout-management/screenshot-utils.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var htmlToImage = require('html-to-image');
+
+const takeScreenshot = (node) => {
+  return new Promise((resolve, reject) => {
+    htmlToImage.toPng(node, {
+      cacheBust: true
+    }).then((screenshot) => {
+      if (!screenshot) {
+        reject(new Error("No Screenshot available"));
+      }
+      resolve(screenshot);
+    }).catch((error) => {
+      console.error(
+        "the following error occurred while taking a screenshot of a DOMNode",
+        error
+      );
+      reject(new Error("Error taking screenshot"));
+    });
+  });
+};
+
+exports.takeScreenshot = takeScreenshot;
+//# sourceMappingURL=screenshot-utils.js.map

package/cjs/layout-management/screenshot-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"screenshot-utils.js","sources":["../../src/layout-management/screenshot-utils.ts"],"sourcesContent":["import { toPng } from \"html-to-image\";\n\n/**\n * Takes a screenshot of the given node and returns the base64 encoded image url\n * @param node HTMLElement to take screenshot of\n * @returns Base64 encoded image url\n */\nexport const takeScreenshot = (node: HTMLElement): Promise<string> => {\n  return new Promise((resolve, reject) => {\n    toPng(node, {\n      cacheBust: true /*,\n      filter: (child) =>\n        // remove content of table rows\n        child.nodeType === Node.TEXT_NODE ||\n        child.getAttribute(\"role\") !== \"row\",*/,\n    })\n      .then((screenshot) => {\n        if (!screenshot) {\n          reject(new Error(\"No Screenshot available\"));\n        }\n        resolve(screenshot);\n      })\n      .catch((error: Error) => {\n        console.error(\n          \"the following error occurred while taking a screenshot of a DOMNode\",\n          error\n        );\n        reject(new Error(\"Error taking screenshot\"));\n      });\n  });\n};\n"],"names":["toPng"],"mappings":";;;;AAOa,MAAA,cAAA,GAAiB,CAAC,IAAuC,KAAA;AACpE,EAAA,OAAO,IAAI,OAAA,CAAQ,CAAC,OAAA,EAAS,MAAW,KAAA;AACtC,IAAAA,iBAAA,CAAM,IAAM,EAAA;AAAA,MACV,SAAW,EAAA,IAAA;AAAA,KAKZ,CAAA,CACE,IAAK,CAAA,CAAC,UAAe,KAAA;AACpB,MAAA,IAAI,CAAC,UAAY,EAAA;AACf,QAAO,MAAA,CAAA,IAAI,KAAM,CAAA,yBAAyB,CAAC,CAAA,CAAA;AAAA,OAC7C;AACA,MAAA,OAAA,CAAQ,UAAU,CAAA,CAAA;AAAA,KACnB,CAAA,CACA,KAAM,CAAA,CAAC,KAAiB,KAAA;AACvB,MAAQ,OAAA,CAAA,KAAA;AAAA,QACN,qEAAA;AAAA,QACA,KAAA;AAAA,OACF,CAAA;AACA,MAAO,MAAA,CAAA,IAAI,KAAM,CAAA,yBAAyB,CAAC,CAAA,CAAA;AAAA,KAC5C,CAAA,CAAA;AAAA,GACJ,CAAA,CAAA;AACH;;;;"}

package/cjs/layout-management/useLayoutContextMenuItems.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var useLayoutManager = require('./useLayoutManager.js');
+var SaveLayoutPanel = require('./SaveLayoutPanel.js');
+
+const useLayoutContextMenuItems = (setDialogState) => {
+  const { saveLayout } = useLayoutManager.useLayoutManager();
+  const handleCloseDialog = React.useCallback(() => {
+    setDialogState(void 0);
+  }, [setDialogState]);
+  const handleSave = React.useCallback(
+    (layoutMetadata) => {
+      saveLayout(layoutMetadata);
+      setDialogState(void 0);
+    },
+    [saveLayout, setDialogState]
+  );
+  const [buildMenuOptions, handleMenuAction] = React.useMemo(() => {
+    return [
+      (location, options) => {
+        const locations = location.split(" ");
+        const menuDescriptors = [];
+        if (locations.includes("main-tab")) {
+          menuDescriptors.push(
+            {
+              label: "Save Layout",
+              action: "save-layout",
+              options
+            },
+            {
+              label: "Layout Settings",
+              action: "layout-settings",
+              options
+            }
+          );
+        }
+        return menuDescriptors;
+      },
+      (action) => {
+        console.log("menu action", {
+          action
+        });
+        if (action.menuId === "save-layout") {
+          setDialogState({
+            content: /* @__PURE__ */ jsxRuntime.jsx(
+              SaveLayoutPanel.SaveLayoutPanel,
+              {
+                onCancel: handleCloseDialog,
+                onSave: handleSave,
+                componentId: action.options?.controlledComponentId,
+                defaultTitle: action.options?.controlledComponentTitle
+              }
+            ),
+            title: "Save Layout",
+            hideCloseButton: true
+          });
+          return true;
+        }
+        return false;
+      }
+    ];
+  }, [handleCloseDialog, handleSave, setDialogState]);
+  return {
+    buildMenuOptions,
+    handleMenuAction
+  };
+};
+
+exports.useLayoutContextMenuItems = useLayoutContextMenuItems;
+//# sourceMappingURL=useLayoutContextMenuItems.js.map

package/cjs/layout-management/useLayoutContextMenuItems.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLayoutContextMenuItems.js","sources":["../../src/layout-management/useLayoutContextMenuItems.tsx"],"sourcesContent":["import {\n  ContextMenuItemDescriptor,\n  MenuActionHandler,\n  MenuBuilder,\n} from \"@vuu-ui/vuu-data-types\";\nimport { useCallback, useMemo } from \"react\";\nimport { MenuActionClosePopup, SetDialog } from \"@vuu-ui/vuu-popups\";\nimport { useLayoutManager } from \"./useLayoutManager\";\nimport { LayoutMetadataDto } from \"./layoutTypes\";\nimport { SaveLayoutPanel } from \"./SaveLayoutPanel\";\n\nexport const useLayoutContextMenuItems = (setDialogState: SetDialog) => {\n  const { saveLayout } = useLayoutManager();\n\n  const handleCloseDialog = useCallback(() => {\n    setDialogState(undefined);\n  }, [setDialogState]);\n\n  const handleSave = useCallback(\n    (layoutMetadata: LayoutMetadataDto) => {\n      saveLayout(layoutMetadata);\n      setDialogState(undefined);\n    },\n    [saveLayout, setDialogState]\n  );\n\n  const [buildMenuOptions, handleMenuAction] = useMemo<\n    [MenuBuilder, MenuActionHandler]\n  >(() => {\n    return [\n      (location, options) => {\n        const locations = location.split(\" \");\n        const menuDescriptors: ContextMenuItemDescriptor[] = [];\n        if (locations.includes(\"main-tab\")) {\n          menuDescriptors.push(\n            {\n              label: \"Save Layout\",\n              action: \"save-layout\",\n              options,\n            },\n            {\n              label: \"Layout Settings\",\n              action: \"layout-settings\",\n              options,\n            }\n          );\n        }\n        return menuDescriptors;\n      },\n      (action: MenuActionClosePopup) => {\n        console.log(\"menu action\", {\n          action,\n        });\n        if (action.menuId === \"save-layout\") {\n          setDialogState({\n            content: (\n              <SaveLayoutPanel\n                onCancel={handleCloseDialog}\n                onSave={handleSave}\n                componentId={action.options?.controlledComponentId}\n                defaultTitle={\n                  action.options?.controlledComponentTitle as string\n                }\n              />\n            ),\n            title: \"Save Layout\",\n            hideCloseButton: true,\n          });\n          return true;\n        }\n        return false;\n      },\n    ];\n  }, [handleCloseDialog, handleSave, setDialogState]);\n\n  return {\n    buildMenuOptions,\n    handleMenuAction,\n  };\n};\n"],"names":["useLayoutManager","useCallback","useMemo","jsx","SaveLayoutPanel"],"mappings":";;;;;;;AAWa,MAAA,yBAAA,GAA4B,CAAC,cAA8B,KAAA;AACtE,EAAM,MAAA,EAAE,UAAW,EAAA,GAAIA,iCAAiB,EAAA,CAAA;AAExC,EAAM,MAAA,iBAAA,GAAoBC,kBAAY,MAAM;AAC1C,IAAA,cAAA,CAAe,KAAS,CAAA,CAAA,CAAA;AAAA,GAC1B,EAAG,CAAC,cAAc,CAAC,CAAA,CAAA;AAEnB,EAAA,MAAM,UAAa,GAAAA,iBAAA;AAAA,IACjB,CAAC,cAAsC,KAAA;AACrC,MAAA,UAAA,CAAW,cAAc,CAAA,CAAA;AACzB,MAAA,cAAA,CAAe,KAAS,CAAA,CAAA,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,YAAY,cAAc,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAA,MAAM,CAAC,gBAAA,EAAkB,gBAAgB,CAAA,GAAIC,cAE3C,MAAM;AACN,IAAO,OAAA;AAAA,MACL,CAAC,UAAU,OAAY,KAAA;AACrB,QAAM,MAAA,SAAA,GAAY,QAAS,CAAA,KAAA,CAAM,GAAG,CAAA,CAAA;AACpC,QAAA,MAAM,kBAA+C,EAAC,CAAA;AACtD,QAAI,IAAA,SAAA,CAAU,QAAS,CAAA,UAAU,CAAG,EAAA;AAClC,UAAgB,eAAA,CAAA,IAAA;AAAA,YACd;AAAA,cACE,KAAO,EAAA,aAAA;AAAA,cACP,MAAQ,EAAA,aAAA;AAAA,cACR,OAAA;AAAA,aACF;AAAA,YACA;AAAA,cACE,KAAO,EAAA,iBAAA;AAAA,cACP,MAAQ,EAAA,iBAAA;AAAA,cACR,OAAA;AAAA,aACF;AAAA,WACF,CAAA;AAAA,SACF;AACA,QAAO,OAAA,eAAA,CAAA;AAAA,OACT;AAAA,MACA,CAAC,MAAiC,KAAA;AAChC,QAAA,OAAA,CAAQ,IAAI,aAAe,EAAA;AAAA,UACzB,MAAA;AAAA,SACD,CAAA,CAAA;AACD,QAAI,IAAA,MAAA,CAAO,WAAW,aAAe,EAAA;AACnC,UAAe,cAAA,CAAA;AAAA,YACb,OACE,kBAAAC,cAAA;AAAA,cAACC,+BAAA;AAAA,cAAA;AAAA,gBACC,QAAU,EAAA,iBAAA;AAAA,gBACV,MAAQ,EAAA,UAAA;AAAA,gBACR,WAAA,EAAa,OAAO,OAAS,EAAA,qBAAA;AAAA,gBAC7B,YAAA,EACE,OAAO,OAAS,EAAA,wBAAA;AAAA,eAAA;AAAA,aAEpB;AAAA,YAEF,KAAO,EAAA,aAAA;AAAA,YACP,eAAiB,EAAA,IAAA;AAAA,WAClB,CAAA,CAAA;AACD,UAAO,OAAA,IAAA,CAAA;AAAA,SACT;AACA,QAAO,OAAA,KAAA,CAAA;AAAA,OACT;AAAA,KACF,CAAA;AAAA,GACC,EAAA,CAAC,iBAAmB,EAAA,UAAA,EAAY,cAAc,CAAC,CAAA,CAAA;AAElD,EAAO,OAAA;AAAA,IACL,gBAAA;AAAA,IACA,gBAAA;AAAA,GACF,CAAA;AACF;;;;"}