@vuu-ui/vuu-table-extras 2.1.19-beta.2 → 2.1.19-beta.3

package/cjs/packages/vuu-table-extras/src/cell-renderers/background-cell/useDirection.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var react = require('react');
+
+const INITIAL_VALUE = [void 0, void 0, void 0, void 0];
+function useDirection(key, value, column) {
+  const ref = react.useRef(void 0);
+  const [prevKey, prevValue, prevColumn, prevDirection] = ref.current || INITIAL_VALUE;
+  const { type: dataType } = column;
+  const decimals = vuuUtils.isTypeDescriptor(dataType) ? dataType.formatting?.decimals : void 0;
+  const direction = key === prevKey && vuuUtils.isValidNumber(value) && vuuUtils.isValidNumber(prevValue) && column === prevColumn ? vuuUtils.getMovingValueDirection(value, prevDirection, prevValue, decimals) : "";
+  react.useEffect(() => {
+    ref.current = [key, value, column, direction];
+  });
+  return direction;
+}
+
+exports.useDirection = useDirection;
+//# sourceMappingURL=useDirection.js.map

package/cjs/packages/vuu-table-extras/src/cell-renderers/background-cell/useDirection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDirection.js","sources":["../../../../../../../../packages/vuu-table-extras/src/cell-renderers/background-cell/useDirection.ts"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  getMovingValueDirection,\n  isTypeDescriptor,\n  isValidNumber,\n  valueChangeDirection,\n} from \"@vuu-ui/vuu-utils\";\nimport { useEffect, useRef } from \"react\";\n\nconst INITIAL_VALUE = [undefined, undefined, undefined, undefined];\n\ntype State = [string, unknown, RuntimeColumnDescriptor, valueChangeDirection];\n\nexport function useDirection(\n  key: string,\n  value: unknown,\n  column: RuntimeColumnDescriptor,\n) {\n  const ref = useRef<State>(undefined);\n  const [prevKey, prevValue, prevColumn, prevDirection] =\n    ref.current || INITIAL_VALUE;\n\n  const { type: dataType } = column;\n  const decimals = isTypeDescriptor(dataType)\n    ? dataType.formatting?.decimals\n    : undefined;\n\n  const direction =\n    key === prevKey &&\n    isValidNumber(value) &&\n    isValidNumber(prevValue) &&\n    column === prevColumn\n      ? getMovingValueDirection(value, prevDirection, prevValue, decimals)\n      : \"\";\n\n  useEffect(() => {\n    ref.current = [key, value, column, direction];\n  });\n\n  return direction;\n}\n"],"names":["useRef","isTypeDescriptor","isValidNumber","getMovingValueDirection","useEffect"],"mappings":";;;;;AASA,MAAM,aAAgB,GAAA,CAAC,KAAW,CAAA,EAAA,KAAA,CAAA,EAAW,QAAW,KAAS,CAAA,CAAA;AAIjD,SAAA,YAAA,CACd,GACA,EAAA,KAAA,EACA,MACA,EAAA;AACA,EAAM,MAAA,GAAA,GAAMA,aAAc,KAAS,CAAA,CAAA;AACnC,EAAA,MAAM,CAAC,OAAS,EAAA,SAAA,EAAW,YAAY,aAAa,CAAA,GAClD,IAAI,OAAW,IAAA,aAAA;AAEjB,EAAM,MAAA,EAAE,IAAM,EAAA,QAAA,EAAa,GAAA,MAAA;AAC3B,EAAA,MAAM,WAAWC,yBAAiB,CAAA,QAAQ,CACtC,GAAA,QAAA,CAAS,YAAY,QACrB,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,YACJ,GAAQ,KAAA,OAAA,IACRC,sBAAc,CAAA,KAAK,KACnBA,sBAAc,CAAA,SAAS,CACvB,IAAA,MAAA,KAAW,aACPC,gCAAwB,CAAA,KAAA,EAAO,aAAe,EAAA,SAAA,EAAW,QAAQ,CACjE,GAAA,EAAA;AAEN,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,GAAA,CAAI,OAAU,GAAA,CAAC,GAAK,EAAA,KAAA,EAAO,QAAQ,SAAS,CAAA;AAAA,GAC7C,CAAA;AAED,EAAO,OAAA,SAAA;AACT;;;;"}

package/cjs/packages/vuu-table-extras/src/cell-renderers/button-cell/IconButtonCell.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var iconButtonCellCss = "\n.vuuTableCell:has(.vuuIconButtonCell){\n    padding: 0;\n    position: relative;\n}\n\n.vuuIconButtonCell {\n    align-items: center;\n    display: inline-flex;\n    justify-content: center;\n    padding: 0;\n    font-weight: 500;\n    position: relative;\n    height: 100%;\n    --saltButton-height: 100%;\n    --saltButton-minWidth: 100%;\n    --saltButton-padding: 0;\n    --saltButton-width: 100%;\n}\n";
+
+module.exports = iconButtonCellCss;
+//# sourceMappingURL=IconButtonCell.css.js.map

package/cjs/packages/vuu-table-extras/src/cell-renderers/button-cell/IconButtonCell.css.js.map

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

package/cjs/packages/vuu-table-extras/src/cell-renderers/button-cell/IconButtonCell.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var IconButtonCell$1 = require('./IconButtonCell.css.js');
+var TableProvider = require('../../table-provider/TableProvider.js');
+var core = require('@salt-ds/core');
+
+const classBase = "vuuIconButtonCell";
+const IconButtonCell = ({ column, dataRow }) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-iconbutton-cell",
+    css: IconButtonCell$1,
+    window: targetWindow
+  });
+  const actionHandler = TableProvider.useRowAction(column.name);
+  const handleClick = react.useCallback(
+    (evt) => {
+      evt.stopPropagation();
+      actionHandler(column.name, dataRow);
+    },
+    [actionHandler, column, dataRow]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Button,
+    {
+      appearance: "transparent",
+      className: classBase,
+      "data-embedded": true,
+      "data-icon": true,
+      onClick: handleClick
+    }
+  );
+};
+
+exports.IconButtonCell = IconButtonCell;
+//# sourceMappingURL=IconButtonCell.js.map

package/cjs/packages/vuu-table-extras/src/cell-renderers/button-cell/IconButtonCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButtonCell.js","sources":["../../../../../../../../packages/vuu-table-extras/src/cell-renderers/button-cell/IconButtonCell.tsx"],"sourcesContent":["import { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { MouseEventHandler, useCallback } from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport iconButtonCellCss from \"./IconButtonCell.css\";\nimport { useRowAction } from \"../../table-provider/TableProvider\";\nimport { Button } from \"@salt-ds/core\";\n\nconst classBase = \"vuuIconButtonCell\";\n\n/**\n * To assign an icon to the cell, give the columndescriptor\n * a className. In css, assign an icon variable to --vuu-svg-icon.\n */\nexport const IconButtonCell = ({ column, dataRow }: TableCellRendererProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-iconbutton-cell\",\n    css: iconButtonCellCss,\n    window: targetWindow,\n  });\n\n  const actionHandler = useRowAction(column.name);\n  const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n    (evt) => {\n      evt.stopPropagation();\n      actionHandler(column.name, dataRow);\n    },\n    [actionHandler, column, dataRow],\n  );\n\n  return (\n    <Button\n      appearance=\"transparent\"\n      className={classBase}\n      data-embedded\n      data-icon\n      onClick={handleClick}\n    />\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","iconButtonCellCss","useRowAction","useCallback","jsx","Button"],"mappings":";;;;;;;;;;AASA,MAAM,SAAY,GAAA,mBAAA;AAMX,MAAM,cAAiB,GAAA,CAAC,EAAE,MAAA,EAAQ,SAAsC,KAAA;AAC7E,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,aAAA,GAAgBC,0BAAa,CAAA,MAAA,CAAO,IAAI,CAAA;AAC9C,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,CAAC,GAAQ,KAAA;AACP,MAAA,GAAA,CAAI,eAAgB,EAAA;AACpB,MAAc,aAAA,CAAA,MAAA,CAAO,MAAM,OAAO,CAAA;AAAA,KACpC;AAAA,IACA,CAAC,aAAe,EAAA,MAAA,EAAQ,OAAO;AAAA,GACjC;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,UAAW,EAAA,aAAA;AAAA,MACX,SAAW,EAAA,SAAA;AAAA,MACX,eAAa,EAAA,IAAA;AAAA,MACb,WAAS,EAAA,IAAA;AAAA,MACT,OAAS,EAAA;AAAA;AAAA,GACX;AAEJ;;;;"}

package/cjs/packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var dropdownCellCss = ".vuuTableCell {\n  .vuuTableDropdownCell {\n    --vuu-icon-height: 15px;\n    --vuu-icon-left: calc(100% - var(--salt-spacing-300));\n    --vuu-icon-size: 8px;\n    --vuu-icon-top: -3px;\n    --salt-focused-outlineStyle: none;\n    --saltButton-borderRadius: 2px;\n\n    border: solid 1px var(--salt-editable-borderColor);\n    border-radius: 2px;\n    position: relative;\n    font-weight: 500;\n    height: var(--vuu-table-embedded-control-height);\n    min-height: var(--vuu-table-embedded-control-height);\n    text-align: left;\n\n    button:focus-visible {\n      --saltButton-borderColor: var(--salt-focused-outlineColor);\n      --saltButton-borderWidth: 2px;\n      padding-left: 7px;\n    }\n    &.saltDropdown:focus {\n      outline: none;\n    }\n  }\n\n  .vuuTableDropdownCell:focus {\n    border: solid 2px var(--salt-focused-outlineColor);\n  }\n}\n\n/* .vuuTableCell:focus .vuuTableInputCell.saltInput-primary,\n.vuuTableInputCell.saltInput-primary.saltInput-focused {\n  border: solid 2px var(--salt-focused-outlineColor);\n  padding: 0 3px;\n} */\n";
+
+module.exports = dropdownCellCss;
+//# sourceMappingURL=DropdownCell.css.js.map

package/cjs/packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.css.js.map

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

package/cjs/packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.js

@@ -0,0 +1,103 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuDataReact = require('@vuu-ui/vuu-data-react');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var cx = require('clsx');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var react = require('react');
+var DropdownCell$1 = require('./DropdownCell.css.js');
+
+const classBase = "vuuTableDropdownCell";
+const DropdownCell = react.memo(
+  function DropdownCell2({
+    column,
+    dataRow,
+    editedDuringCurrentSession,
+    onEdit
+  }) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "vuu-dropdown-cell",
+      css: DropdownCell$1,
+      window: targetWindow
+    });
+    if (editedDuringCurrentSession) {
+      console.log(`${column.name} edited ${editedDuringCurrentSession}`);
+    }
+    const [open, setOpen] = react.useState(false);
+    const dataValue = dataRow[column.name];
+    const { values } = vuuDataReact.useLookupValues(column, dataValue);
+    const valueRef = react.useRef(void 0);
+    react.useMemo(() => {
+      valueRef.current = vuuUtils.getSelectedOption(values, dataValue);
+    }, [dataValue, values]);
+    const handleOpenChange = react.useCallback((isOpen) => {
+      console.log(`handleOpenChange ${isOpen}`);
+      if (isOpen === false) {
+        setOpen(false);
+      }
+    }, []);
+    const handleSelectionChange = react.useCallback(
+      async (evt, [selectedOption2]) => {
+        if (selectedOption2) {
+          const response = await onEdit?.(
+            {
+              editType: "commit",
+              isValid: true,
+              previousValue: valueRef.current?.value,
+              value: selectedOption2.value
+            },
+            "commit"
+          );
+          if (vuuUtils.isRpcSuccess(response)) {
+            vuuUtils.dispatchCustomEvent(evt.target, "vuu-commit");
+          }
+        }
+      },
+      [onEdit]
+    );
+    const handleClick = react.useCallback(() => {
+      if (!open) {
+        setOpen(true);
+      }
+    }, [open]);
+    const handleKeyDown = react.useCallback(
+      (e) => {
+        if (e.key === "Enter" && !open) {
+          e.preventDefault();
+          e.stopPropagation();
+          setOpen(true);
+        }
+      },
+      [open]
+    );
+    const { current: selectedOption } = valueRef;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      core.Dropdown,
+      {
+        className: cx(classBase, {
+          [`${classBase}-edited`]: editedDuringCurrentSession === true
+        }),
+        "data-icon": "triangle-down",
+        onClick: handleClick,
+        onKeyDownCapture: handleKeyDown,
+        onOpenChange: handleOpenChange,
+        onSelectionChange: handleSelectionChange,
+        open,
+        selected: selectedOption ? [selectedOption] : [],
+        value: selectedOption?.label,
+        children: values.map((listOption, i) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: listOption, children: listOption.label }, i))
+      }
+    );
+  },
+  (p, p1) => p.editedDuringCurrentSession !== p1.editedDuringCurrentSession && vuuUtils.dataColumnAndKeyUnchanged(p, p1)
+);
+vuuUtils.registerComponent("dropdown-cell", DropdownCell, "cell-renderer", {
+  userCanAssign: false
+});
+
+exports.DropdownCell = DropdownCell;
+//# sourceMappingURL=DropdownCell.js.map

package/cjs/packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownCell.js","sources":["../../../../../../../../packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.tsx"],"sourcesContent":["import { useLookupValues } from \"@vuu-ui/vuu-data-react\";\nimport type { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport { ListOption, TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n  dataColumnAndKeyUnchanged,\n  dispatchCustomEvent,\n  getSelectedOption,\n  isRpcSuccess,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { Dropdown, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  KeyboardEventHandler,\n  MouseEventHandler,\n  SyntheticEvent,\n  memo,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport dropdownCellCss from \"./DropdownCell.css\";\n\nconst classBase = \"vuuTableDropdownCell\";\n\nexport const DropdownCell = memo(\n  function DropdownCell({\n    column,\n    dataRow,\n    editedDuringCurrentSession,\n    onEdit,\n  }: TableCellRendererProps) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-dropdown-cell\",\n      css: dropdownCellCss,\n      window: targetWindow,\n    });\n\n    if (editedDuringCurrentSession) {\n      console.log(`${column.name} edited ${editedDuringCurrentSession}`);\n    }\n\n    const [open, setOpen] = useState(false);\n    const dataValue = dataRow[column.name] as string | number;\n    const { values } = useLookupValues(column, dataValue);\n    const valueRef = useRef<ListOption>(undefined);\n\n    useMemo(() => {\n      valueRef.current = getSelectedOption(values, dataValue);\n    }, [dataValue, values]);\n\n    const handleOpenChange = useCallback((isOpen: boolean) => {\n      console.log(`handleOpenChange ${isOpen}`);\n      if (isOpen === false) {\n        setOpen(false);\n      }\n    }, []);\n\n    const handleSelectionChange = useCallback(\n      async (evt: SyntheticEvent, [selectedOption]: ListOption[]) => {\n        if (selectedOption) {\n          // Note, we do not setState locally when a selection is made, we just send the update\n          // to the server. We rely on the update coming back in from a server response which\n          // we handle in the useMemo above. If we worry that server repsonses might be too slow\n          // we can extend this logic with some kind of pending update state.\n          const response = await onEdit?.(\n            {\n              editType: \"commit\",\n              isValid: true,\n              previousValue: valueRef.current?.value,\n              value: selectedOption.value as VuuColumnDataType,\n            },\n            \"commit\",\n          );\n          if (isRpcSuccess(response)) {\n            // TODO this should be done in TableCell\n            dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n          }\n        }\n      },\n      [onEdit],\n    );\n\n    const handleClick = useCallback<\n      MouseEventHandler<HTMLButtonElement>\n    >(() => {\n      if (!open) {\n        setOpen(true);\n      }\n    }, [open]);\n\n    const handleKeyDown = useCallback<KeyboardEventHandler>(\n      (e) => {\n        if (e.key === \"Enter\" && !open) {\n          e.preventDefault();\n          e.stopPropagation();\n          setOpen(true);\n        }\n      },\n      [open],\n    );\n\n    const { current: selectedOption } = valueRef;\n    return (\n      <Dropdown<ListOption>\n        className={cx(classBase, {\n          [`${classBase}-edited`]: editedDuringCurrentSession === true,\n        })}\n        data-icon=\"triangle-down\"\n        onClick={handleClick}\n        onKeyDownCapture={handleKeyDown}\n        onOpenChange={handleOpenChange}\n        onSelectionChange={handleSelectionChange}\n        open={open}\n        selected={selectedOption ? [selectedOption] : []}\n        value={selectedOption?.label}\n      >\n        {values.map((listOption, i) => (\n          <Option key={i} value={listOption}>\n            {listOption.label}\n          </Option>\n        ))}\n      </Dropdown>\n    );\n  },\n  (p: TableCellRendererProps, p1: TableCellRendererProps) =>\n    p.editedDuringCurrentSession !== p1.editedDuringCurrentSession &&\n    dataColumnAndKeyUnchanged(p, p1),\n);\nregisterComponent(\"dropdown-cell\", DropdownCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":["memo","DropdownCell","useWindow","useComponentCssInjection","dropdownCellCss","useState","useLookupValues","useRef","useMemo","getSelectedOption","useCallback","selectedOption","isRpcSuccess","dispatchCustomEvent","jsx","Dropdown","Option","dataColumnAndKeyUnchanged","registerComponent"],"mappings":"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"}

package/cjs/packages/vuu-table-extras/src/cell-renderers/lookup-cell/LookupCell.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuDataReact = require('@vuu-ui/vuu-data-react');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var react = require('react');
+
+const LookupCell = react.memo(function LookupCell2({
+  column,
+  dataRow
+}) {
+  const dataValue = dataRow[column.name];
+  const { initialValue: value } = vuuDataReact.useLookupValues(column, dataValue);
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { children: value?.label });
+}, vuuUtils.dataAndColumnUnchanged);
+vuuUtils.registerComponent("lookup-cell", LookupCell, "cell-renderer", {
+  userCanAssign: false
+});
+
+exports.LookupCell = LookupCell;
+//# sourceMappingURL=LookupCell.js.map

package/cjs/packages/vuu-table-extras/src/cell-renderers/lookup-cell/LookupCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LookupCell.js","sources":["../../../../../../../../packages/vuu-table-extras/src/cell-renderers/lookup-cell/LookupCell.tsx"],"sourcesContent":["import { useLookupValues } from \"@vuu-ui/vuu-data-react\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { dataAndColumnUnchanged, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { memo } from \"react\";\n\nexport const LookupCell = memo(function LookupCell({\n  column,\n  dataRow,\n}: TableCellRendererProps) {\n  const dataValue = dataRow[column.name] as string | number;\n  const { initialValue: value } = useLookupValues(column, dataValue);\n  return <span>{value?.label}</span>;\n}, dataAndColumnUnchanged);\n\nregisterComponent(\"lookup-cell\", LookupCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":["memo","LookupCell","useLookupValues","jsx","dataAndColumnUnchanged","registerComponent"],"mappings":";;;;;;;AAKa,MAAA,UAAA,GAAaA,UAAK,CAAA,SAASC,WAAW,CAAA;AAAA,EACjD,MAAA;AAAA,EACA;AACF,CAA2B,EAAA;AACzB,EAAM,MAAA,SAAA,GAAY,OAAQ,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,EAAA,MAAM,EAAE,YAAc,EAAA,KAAA,EAAU,GAAAC,4BAAA,CAAgB,QAAQ,SAAS,CAAA;AACjE,EAAO,uBAAAC,cAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAA,KAAA,EAAO,KAAM,EAAA,CAAA;AAC7B,CAAA,EAAGC,+BAAsB;AAEzBC,0BAAkB,CAAA,aAAA,EAAe,YAAY,eAAiB,EAAA;AAAA,EAC5D,aAAe,EAAA;AACjB,CAAC,CAAA;;;;"}

package/cjs/packages/vuu-table-extras/src/cell-renderers/pct-progress-cell/PctProgressCell.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var pctProgressCellCss = ".vuuPctProgressCell {\n    --progress-bar-width: 2px;\n    position: relative;\n}\n\n.vuuPctProgressCell-zero {\n    --progress-bar-width: 0px;\n}\n.vuuPctProgressCell-complete {\n    --progress-bar-width: 0px;\n}\n\n.vuuPctProgressCell-progressBar {\n    background-color: var(--vuu-color-green-60-fade-30);\n    border-right: solid var(--progress-bar-width) var(--vuu-color-green-60);\n    display: inline-block;\n    height: 20px;\n    left: 0;\n    overflow: hidden;\n    position: absolute;\n    width: var(--progress-bar-pct, 0);\n}\n\n\n.vuuPctProgressCell-text {\n    display: inline-block;\n    text-align: left;\n    width: 80%;\n    z-index: 1;\n}";
+
+module.exports = pctProgressCellCss;
+//# sourceMappingURL=PctProgressCell.css.js.map

package/cjs/packages/vuu-table-extras/src/cell-renderers/pct-progress-cell/PctProgressCell.css.js.map

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

package/cjs/packages/vuu-table-extras/src/cell-renderers/pct-progress-cell/PctProgressCell.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var cx = require('clsx');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var PctProgressCell$1 = require('./PctProgressCell.css.js');
+
+const classBase = "vuuPctProgressCell";
+const getPercentageValue = (value) => {
+  if (value >= 0 && value <= 1) {
+    return value * 100;
+  } else if (value > 2) {
+    return 0;
+  } else if (value > 1) {
+    return 100;
+  } else {
+    return 0;
+  }
+};
+const PctProgressCell = ({ column, dataRow }) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-pct-progress-cell",
+    css: PctProgressCell$1,
+    window: targetWindow
+  });
+  const value = dataRow[column.name];
+  const percentageValue = getPercentageValue(value);
+  const className = cx(classBase, {});
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cx(className, {
+        [`${classBase}-zero`]: percentageValue === 0,
+        [`${classBase}-complete`]: percentageValue >= 100
+      }),
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: `${classBase}-progressBar`,
+            style: { "--progress-bar-pct": `${percentageValue}%` }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-text`, children: `${percentageValue.toFixed(
+          2
+        )} %` })
+      ]
+    }
+  );
+};
+vuuUtils.registerComponent("vuu.pct-progress", PctProgressCell, "cell-renderer", {
+  description: "Percentage formatter",
+  label: "Percentage formatter",
+  serverDataType: "double"
+});
+
+exports.PctProgressCell = PctProgressCell;
+//# sourceMappingURL=PctProgressCell.js.map

package/cjs/packages/vuu-table-extras/src/cell-renderers/pct-progress-cell/PctProgressCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PctProgressCell.js","sources":["../../../../../../../../packages/vuu-table-extras/src/cell-renderers/pct-progress-cell/PctProgressCell.tsx"],"sourcesContent":["import { TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { CSSProperties } from \"react\";\n\nimport pctProgressCellCss from \"./PctProgressCell.css\";\n\nconst classBase = \"vuuPctProgressCell\";\n\nconst getPercentageValue = (value: number) => {\n  if (value >= 0 && value <= 1) {\n    return value * 100;\n  } else if (value > 2) {\n    return 0;\n  } else if (value > 1) {\n    return 100;\n  } else {\n    return 0;\n  }\n};\n\nexport const PctProgressCell = ({ column, dataRow }: TableCellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-pct-progress-cell\",\n    css: pctProgressCellCss,\n    window: targetWindow,\n  });\n\n  const value = dataRow[column.name] as number;\n  const percentageValue = getPercentageValue(value);\n  const className = cx(classBase, {});\n\n  return (\n    <div\n      className={cx(className, {\n        [`${classBase}-zero`]: percentageValue === 0,\n        [`${classBase}-complete`]: percentageValue >= 100,\n      })}\n      tabIndex={-1}\n    >\n      <span\n        className={`${classBase}-progressBar`}\n        style={{ \"--progress-bar-pct\": `${percentageValue}%` } as CSSProperties}\n      />\n      <span className={`${classBase}-text`}>{`${percentageValue.toFixed(\n        2,\n      )} %`}</span>\n    </div>\n  );\n};\n\nregisterComponent(\"vuu.pct-progress\", PctProgressCell, \"cell-renderer\", {\n  description: \"Percentage formatter\",\n  label: \"Percentage formatter\",\n  serverDataType: \"double\",\n});\n"],"names":["useWindow","useComponentCssInjection","pctProgressCellCss","jsxs","jsx","registerComponent"],"mappings":";;;;;;;;;AASA,MAAM,SAAY,GAAA,oBAAA;AAElB,MAAM,kBAAA,GAAqB,CAAC,KAAkB,KAAA;AAC5C,EAAI,IAAA,KAAA,IAAS,CAAK,IAAA,KAAA,IAAS,CAAG,EAAA;AAC5B,IAAA,OAAO,KAAQ,GAAA,GAAA;AAAA,GACjB,MAAA,IAAW,QAAQ,CAAG,EAAA;AACpB,IAAO,OAAA,CAAA;AAAA,GACT,MAAA,IAAW,QAAQ,CAAG,EAAA;AACpB,IAAO,OAAA,GAAA;AAAA,GACF,MAAA;AACL,IAAO,OAAA,CAAA;AAAA;AAEX,CAAA;AAEO,MAAM,eAAkB,GAAA,CAAC,EAAE,MAAA,EAAQ,SAA8B,KAAA;AACtE,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,iBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,KAAA,GAAQ,OAAQ,CAAA,MAAA,CAAO,IAAI,CAAA;AACjC,EAAM,MAAA,eAAA,GAAkB,mBAAmB,KAAK,CAAA;AAChD,EAAA,MAAM,SAAY,GAAA,EAAA,CAAG,SAAW,EAAA,EAAE,CAAA;AAElC,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,QACvB,CAAC,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO,GAAG,eAAoB,KAAA,CAAA;AAAA,QAC3C,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,eAAmB,IAAA;AAAA,OAC/C,CAAA;AAAA,MACD,QAAU,EAAA,CAAA,CAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,YAAA,CAAA;AAAA,YACvB,KAAO,EAAA,EAAE,oBAAsB,EAAA,CAAA,EAAG,eAAe,CAAI,CAAA,CAAA;AAAA;AAAA,SACvD;AAAA,uCACC,MAAK,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA,EAAU,aAAG,eAAgB,CAAA,OAAA;AAAA,UACxD;AAAA,SACD,CAAK,EAAA,CAAA,EAAA;AAAA;AAAA;AAAA,GACR;AAEJ;AAEAC,0BAAkB,CAAA,kBAAA,EAAoB,iBAAiB,eAAiB,EAAA;AAAA,EACtE,WAAa,EAAA,sBAAA;AAAA,EACb,KAAO,EAAA,sBAAA;AAAA,EACP,cAAgB,EAAA;AAClB,CAAC,CAAA;;;;"}

package/cjs/packages/vuu-table-extras/src/cell-renderers/progress-cell/ProgressCell.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var progressCellCss = ".vuuProgressCell {\n   align-items: center;\n   display: flex;\n}\n\n.vuuProgressCell-track {\n    display: inline-block;\n    flex: auto 1 1;\n    height: 4px;\n    overflow: hidden;\n    position: relative;\n}\n\n.vuuProgressCell-bg {\n    background-color: var(--salt-measured-background);\n    display: inline-block;\n    height: 2px;\n    left: 0;\n    position: absolute;\n    top: 1px;\n    width: 100%;\n}\n\n\n.vuuProgressCell-bar {\n    background-color: var(--salt-measured-fill);\n    display: inline-block;\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top:0;\n    transform: translateX(var(--progress-bar-pct, -100%));\n    width: 100%;\n}\n\n.vuuProgressCell-text {\n    flex: 35px 0 0;\n    text-align: right;\n}";
+
+module.exports = progressCellCss;
+//# sourceMappingURL=ProgressCell.css.js.map

package/cjs/packages/vuu-table-extras/src/cell-renderers/progress-cell/ProgressCell.css.js.map

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

package/cjs/packages/vuu-table-extras/src/cell-renderers/progress-cell/ProgressCell.js

@@ -0,0 +1,69 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var cx = require('clsx');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var ProgressCell$1 = require('./ProgressCell.css.js');
+
+const classBase = "vuuProgressCell";
+const ProgressCell = ({ column, dataRow }) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-progress-cell",
+    css: ProgressCell$1,
+    window: targetWindow
+  });
+  const { name, type } = column;
+  const value = dataRow[name];
+  let showProgress = false;
+  let percentage = 0;
+  if (vuuUtils.isTypeDescriptor(type) && vuuUtils.isColumnTypeRenderer(type.renderer)) {
+    const { associatedField } = type.renderer;
+    if (associatedField) {
+      const associatedValue = dataRow[associatedField];
+      if (vuuUtils.isValidNumber(value) && vuuUtils.isValidNumber(associatedValue)) {
+        percentage = Math.min(Math.round(value / associatedValue * 100), 100);
+        percentage = Math.min(Math.round(value / associatedValue * 100), 100);
+        showProgress = isFinite(percentage);
+      } else {
+        const floatValue = parseFloat(value);
+        if (Number.isFinite(floatValue)) {
+          const floatOtherValue = parseFloat(associatedValue);
+          if (Number.isFinite(floatOtherValue)) {
+            percentage = Math.min(
+              Math.round(floatValue / floatOtherValue * 100),
+              100
+            );
+            showProgress = isFinite(percentage);
+          }
+        }
+      }
+    } else {
+      throw Error("ProgressCell associatedField is required to render");
+    }
+  }
+  const className = cx(classBase, {});
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, tabIndex: -1, children: [
+    showProgress ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${classBase}-track`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-bg` }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: `${classBase}-bar`,
+          style: { "--progress-bar-pct": `-${100 - percentage}%` }
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-text`, children: `${percentage} %` })
+  ] });
+};
+vuuUtils.registerComponent("vuu.progress", ProgressCell, "cell-renderer", {
+  description: "Progress formatter",
+  label: "Progress formatter",
+  serverDataType: ["long", "int", "double"],
+  // Not until we provide settings for associaetd field
+  userCanAssign: false
+});
+//# sourceMappingURL=ProgressCell.js.map

package/cjs/packages/vuu-table-extras/src/cell-renderers/progress-cell/ProgressCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressCell.js","sources":["../../../../../../../../packages/vuu-table-extras/src/cell-renderers/progress-cell/ProgressCell.tsx"],"sourcesContent":["import { TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n  isColumnTypeRenderer,\n  isTypeDescriptor,\n  isValidNumber,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { CSSProperties } from \"react\";\n\nimport progressCellCss from \"./ProgressCell.css\";\n\nconst classBase = \"vuuProgressCell\";\n\nconst ProgressCell = ({ column, dataRow }: TableCellProps) => {\n  //TODO what about click handling\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-progress-cell\",\n    css: progressCellCss,\n    window: targetWindow,\n  });\n\n  const { name, type } = column;\n  const value = dataRow[name];\n  let showProgress = false;\n  let percentage = 0;\n\n  if (isTypeDescriptor(type) && isColumnTypeRenderer(type.renderer)) {\n    const { associatedField } = type.renderer;\n    if (associatedField) {\n      const associatedValue = dataRow[associatedField];\n      if (isValidNumber(value) && isValidNumber(associatedValue)) {\n        percentage = Math.min(Math.round((value / associatedValue) * 100), 100);\n        percentage = Math.min(Math.round((value / associatedValue) * 100), 100);\n        showProgress = isFinite(percentage);\n      } else {\n        // Temp workaround for bug on server that sends aggregated values as strings\n        const floatValue = parseFloat(value as string);\n        if (Number.isFinite(floatValue)) {\n          const floatOtherValue = parseFloat(associatedValue as string);\n          if (Number.isFinite(floatOtherValue)) {\n            percentage = Math.min(\n              Math.round((floatValue / floatOtherValue) * 100),\n              100,\n            );\n            showProgress = isFinite(percentage);\n          }\n        }\n      }\n    } else {\n      throw Error(\"ProgressCell associatedField is required to render\");\n    }\n  }\n\n  const className = cx(classBase, {});\n\n  return (\n    <div className={className} tabIndex={-1}>\n      {showProgress ? (\n        <span className={`${classBase}-track`}>\n          <span className={`${classBase}-bg`} />\n          <span\n            className={`${classBase}-bar`}\n            style={\n              { \"--progress-bar-pct\": `-${100 - percentage}%` } as CSSProperties\n            }\n          />\n        </span>\n      ) : null}\n      <span className={`${classBase}-text`}>{`${percentage} %`}</span>\n    </div>\n  );\n};\n\nregisterComponent(\"vuu.progress\", ProgressCell, \"cell-renderer\", {\n  description: \"Progress formatter\",\n  label: \"Progress formatter\",\n  serverDataType: [\"long\", \"int\", \"double\"],\n  // Not until we provide settings for associaetd field\n  userCanAssign: false,\n});\n"],"names":["useWindow","useComponentCssInjection","progressCellCss","isTypeDescriptor","isColumnTypeRenderer","isValidNumber","jsxs","jsx","registerComponent"],"mappings":"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"}

package/cjs/packages/vuu-table-extras/src/column-expression-input/ColumnExpressionInput.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var colummExpressionInputCss = "\n.vuuColumnExpressionInput {\n    --vuuFilterEditor-background: var(--salt-container-primary-background);\n    --vuuFilterEditor-color: var(--salt-content-primary-foreground);\n    --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);\n    --vuuFilterEditor-fontSize: var(--salt-text-fontSize);\n    --vuuFilterEditor-cursorColor: var(--salt-content-secondary-foreground);\n    --vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);\n    --vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);\n    --vuuFilterEditor-tooltipBorder: solid 1px var(--vuu-color-purple-10); \n    --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);\n    --vuuFilterEditor-suggestion-selectedBackground: var(--vuu-color-gray-10);\n    --vuuFilterEditor-suggestion-selectedColor: var(--salt-content-primary-foreground);\n    --vuuFilterEditor-suggestion-detailColor: var(--salt-content-secondary-foreground-disabled);\n    --vuuFilterEditor-suggestion-height: 24px;\n    --vuuFilterEditor-variableColor: var(--vuu-color-purple-10);\n\n    align-items: center;\n    box-sizing: border-box;\n    height: 30px;\n}\n\n.vuuColumnExpressionInput-FilterButton,\n.vuuColumnExpressionInput-ClearButton {\n    --vuu-icon-size: 12px;\n    --saltButton-width: 28px;\n}\n\n.expression-type-container {\n    margin: 0 3px 0 auto;\n    color: var(--salt-content-secondary-foreground)\n}\n\n.expression-kind {\n    display: inline-block;\n    width: 50px;\n}\n\n.expression-type {\n    display: inline-block;\n    text-align: right;\n    width: 50px;\n}\n\n.vuuSuggestion {\n    display: flex;\n    align-items: center;\n}\n\n.vuuFunctionDoc {\n    padding: 13px 7px;\n}\n\n.vuuFunctionDoc .function-heading {\n    display: flex;\n    gap: 3px;\n}\n\n.vuuFunctionDoc .function-name {\n    font-weight: 700;\n    text-transform: capitalize;\n}\n\n.vuuFunctionDoc .param-list {\n    color: var(--vuu-color-gray-50);\n    white-space: pre;\n}\n\n.vuuFunctionDoc .function-type {\n    color: var(--vuu-color-gray-50);\n    font-weight: 700;\n    margin-left: auto;\n    text-transform: capitalize;\n}\n\n.vuuFunctionDoc .example-container {\n    background-color: var(--vuu-color-gray-03);\n    margin: 6px 0;\n    padding: 3px;\n}\n\n.vuuFunctionDoc .example-expression {\n    color: var(--vuu-color-gray-80);\n    font-family: var(--salt-typography-fontFamily-code);\n    font-weight: 500;\n    padding: 8px;\n}\n\n.vuuFunctionDoc .example-result {\n    margin-left: 8px;\n    margin-top: 6px;\n}";
+
+module.exports = colummExpressionInputCss;
+//# sourceMappingURL=ColumnExpressionInput.css.js.map

package/cjs/packages/vuu-table-extras/src/column-expression-input/ColumnExpressionInput.css.js.map

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

package/cjs/packages/vuu-table-extras/src/column-expression-input/ColumnExpressionInput.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var useColumnExpressionEditor = require('./useColumnExpressionEditor.js');
+var ColumnExpressionInput$1 = require('./ColumnExpressionInput.css.js');
+
+const classBase = "vuuColumnExpressionInput";
+const ColumnExpressionInput = react.memo(
+  ({
+    onChange,
+    onSubmitExpression,
+    source = "",
+    suggestionProvider
+  }) => {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "vuu-column-expression-input",
+      css: ColumnExpressionInput$1,
+      window: targetWindow
+    });
+    const { editorRef, onBlur } = useColumnExpressionEditor.useColumnExpressionEditor({
+      onChange,
+      onSubmitExpression,
+      source,
+      suggestionProvider
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}`, onBlur, ref: editorRef });
+  },
+  (prevProps, newProps) => {
+    return prevProps.source === newProps.source;
+  }
+);
+ColumnExpressionInput.displayName = "ColumnExpressionInput";
+
+exports.ColumnExpressionInput = ColumnExpressionInput;
+//# sourceMappingURL=ColumnExpressionInput.js.map

package/cjs/packages/vuu-table-extras/src/column-expression-input/ColumnExpressionInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnExpressionInput.js","sources":["../../../../../../../packages/vuu-table-extras/src/column-expression-input/ColumnExpressionInput.tsx"],"sourcesContent":["import { HTMLAttributes, memo } from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ColumnDefinitionExpression } from \"./column-language-parser\";\nimport {\n  ExpressionSuggestionConsumer,\n  useColumnExpressionEditor,\n} from \"./useColumnExpressionEditor\";\n\nimport colummExpressionInputCss from \"./ColumnExpressionInput.css\";\n\nconst classBase = \"vuuColumnExpressionInput\";\n\nexport type ColumnExpressionSubmitHandler = (\n  source: string,\n  expression: ColumnDefinitionExpression | undefined\n) => void;\n\nexport interface ColumnExpressionInputProps\n  extends ExpressionSuggestionConsumer,\n    Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  onChange?: (source: string) => void;\n  onSubmitExpression?: ColumnExpressionSubmitHandler;\n  source?: string;\n}\n\nexport const ColumnExpressionInput = memo(\n  ({\n    onChange,\n    onSubmitExpression,\n    source = \"\",\n    suggestionProvider,\n  }: ColumnExpressionInputProps) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-column-expression-input\",\n      css: colummExpressionInputCss,\n      window: targetWindow,\n    });\n\n    const { editorRef, onBlur } = useColumnExpressionEditor({\n      onChange,\n      onSubmitExpression,\n      source,\n      suggestionProvider,\n    });\n\n    return <div className={`${classBase}`} onBlur={onBlur} ref={editorRef} />;\n  },\n  (prevProps, newProps) => {\n    return prevProps.source === newProps.source;\n  }\n);\nColumnExpressionInput.displayName = \"ColumnExpressionInput\";\n"],"names":["memo","useWindow","useComponentCssInjection","colummExpressionInputCss","useColumnExpressionEditor","jsx"],"mappings":";;;;;;;;;AAWA,MAAM,SAAY,GAAA,0BAAA;AAeX,MAAM,qBAAwB,GAAAA,UAAA;AAAA,EACnC,CAAC;AAAA,IACC,QAAA;AAAA,IACA,kBAAA;AAAA,IACA,MAAS,GAAA,EAAA;AAAA,IACT;AAAA,GACgC,KAAA;AAChC,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,6BAAA;AAAA,MACR,GAAK,EAAAC,uBAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,SAAA,EAAW,MAAO,EAAA,GAAIC,mDAA0B,CAAA;AAAA,MACtD,QAAA;AAAA,MACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAO,uBAAAC,cAAA,CAAC,SAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAI,CAAA,EAAA,MAAA,EAAgB,KAAK,SAAW,EAAA,CAAA;AAAA,GACzE;AAAA,EACA,CAAC,WAAW,QAAa,KAAA;AACvB,IAAO,OAAA,SAAA,CAAU,WAAW,QAAS,CAAA,MAAA;AAAA;AAEzC;AACA,qBAAA,CAAsB,WAAc,GAAA,uBAAA;;;;"}