@vuu-ui/vuu-table-extras 0.13.8 → 0.13.10

package/esm/cell-edit-validators/CaseValidator.js

@@ -0,0 +1,23 @@
+import { registerComponent } from '@vuu-ui/vuu-utils';
+import { OK } from '@vuu-ui/vuu-data-react';
+
+const isString = (value) => typeof value === "string";
+const CaseValidator = (rule, value) => {
+  if (isString(value)) {
+    if (value === "") {
+      return OK;
+    } else if (rule.value === "lower" && value.toLowerCase() !== value) {
+      return { ok: false, message: "value must be all lowercase" };
+    } else if (rule.value === "upper" && value.toUpperCase() !== value) {
+      return { ok: false, message: "value must be all uppercase" };
+    } else {
+      return OK;
+    }
+  } else {
+    return { ok: false, message: "value must be a string" };
+  }
+};
+registerComponent("vuu-case", CaseValidator, "data-edit-validator", {});
+
+export { CaseValidator };
+//# sourceMappingURL=CaseValidator.js.map

package/esm/cell-edit-validators/CaseValidator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaseValidator.js","sources":["../../src/cell-edit-validators/CaseValidator.ts"],"sourcesContent":["import { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { EditRuleValidator } from \"@vuu-ui/vuu-data-types\";\nimport { OK } from \"@vuu-ui/vuu-data-react\";\n\nconst isString = (value?: VuuRowDataItemType): value is string =>\n  typeof value === \"string\";\n\nexport const CaseValidator: EditRuleValidator = (rule, value) => {\n  if (isString(value)) {\n    if (value === \"\") {\n      return OK;\n    } else if (rule.value === \"lower\" && value.toLowerCase() !== value) {\n      return { ok: false, message: \"value must be all lowercase\" };\n    } else if (rule.value === \"upper\" && value.toUpperCase() !== value) {\n      return { ok: false, message: \"value must be all uppercase\" };\n    } else {\n      return OK;\n    }\n  } else {\n    return { ok: false, message: \"value must be a string\" };\n  }\n};\n\nregisterComponent(\"vuu-case\", CaseValidator, \"data-edit-validator\", {});\n"],"names":[],"mappings":";;;AAKA,MAAM,QAAW,GAAA,CAAC,KAChB,KAAA,OAAO,KAAU,KAAA,QAAA;AAEN,MAAA,aAAA,GAAmC,CAAC,IAAA,EAAM,KAAU,KAAA;AAC/D,EAAI,IAAA,QAAA,CAAS,KAAK,CAAG,EAAA;AACnB,IAAA,IAAI,UAAU,EAAI,EAAA;AAChB,MAAO,OAAA,EAAA;AAAA,eACE,IAAK,CAAA,KAAA,KAAU,WAAW,KAAM,CAAA,WAAA,OAAkB,KAAO,EAAA;AAClE,MAAA,OAAO,EAAE,EAAA,EAAI,KAAO,EAAA,OAAA,EAAS,6BAA8B,EAAA;AAAA,eAClD,IAAK,CAAA,KAAA,KAAU,WAAW,KAAM,CAAA,WAAA,OAAkB,KAAO,EAAA;AAClE,MAAA,OAAO,EAAE,EAAA,EAAI,KAAO,EAAA,OAAA,EAAS,6BAA8B,EAAA;AAAA,KACtD,MAAA;AACL,MAAO,OAAA,EAAA;AAAA;AACT,GACK,MAAA;AACL,IAAA,OAAO,EAAE,EAAA,EAAI,KAAO,EAAA,OAAA,EAAS,wBAAyB,EAAA;AAAA;AAE1D;AAEA,iBAAA,CAAkB,UAAY,EAAA,aAAA,EAAe,qBAAuB,EAAA,EAAE,CAAA;;;;"}

package/esm/cell-edit-validators/PatternValidator.js

@@ -0,0 +1,29 @@
+import { registerComponent } from '@vuu-ui/vuu-utils';
+import { OK } from '@vuu-ui/vuu-data-react';
+
+const isString = (value) => typeof value === "string";
+const defaultMessage = "value does not match expected pattern";
+const PatternValidator = (rule, value) => {
+  if (typeof rule.value !== "string") {
+    throw Error("Pattern validation rule must provide pattern");
+  }
+  if (isString(value)) {
+    if (value === "") {
+      return OK;
+    } else {
+      const { message = defaultMessage } = rule;
+      const pattern = new RegExp(rule.value);
+      if (pattern.test(value)) {
+        return OK;
+      } else {
+        return { ok: false, message };
+      }
+    }
+  } else {
+    return { ok: false, message: "value must be a string" };
+  }
+};
+registerComponent("vuu-pattern", PatternValidator, "data-edit-validator", {});
+
+export { PatternValidator };
+//# sourceMappingURL=PatternValidator.js.map

package/esm/cell-edit-validators/PatternValidator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PatternValidator.js","sources":["../../src/cell-edit-validators/PatternValidator.ts"],"sourcesContent":["import { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { EditRuleValidator } from \"@vuu-ui/vuu-data-types\";\nimport { OK } from \"@vuu-ui/vuu-data-react\";\n\nconst isString = (value?: VuuRowDataItemType): value is string =>\n  typeof value === \"string\";\n\nconst defaultMessage = \"value does not match expected pattern\";\n\nexport const PatternValidator: EditRuleValidator = (rule, value) => {\n  if (typeof rule.value !== \"string\") {\n    throw Error(\"Pattern validation rule must provide pattern\");\n  }\n  if (isString(value)) {\n    if (value === \"\") {\n      return OK;\n    } else {\n      const { message = defaultMessage } = rule;\n      const pattern = new RegExp(rule.value);\n      if (pattern.test(value)) {\n        return OK;\n      } else {\n        return { ok: false, message };\n      }\n    }\n  } else {\n    return { ok: false, message: \"value must be a string\" };\n  }\n};\n\nregisterComponent(\"vuu-pattern\", PatternValidator, \"data-edit-validator\", {});\n"],"names":[],"mappings":";;;AAKA,MAAM,QAAW,GAAA,CAAC,KAChB,KAAA,OAAO,KAAU,KAAA,QAAA;AAEnB,MAAM,cAAiB,GAAA,uCAAA;AAEV,MAAA,gBAAA,GAAsC,CAAC,IAAA,EAAM,KAAU,KAAA;AAClE,EAAI,IAAA,OAAO,IAAK,CAAA,KAAA,KAAU,QAAU,EAAA;AAClC,IAAA,MAAM,MAAM,8CAA8C,CAAA;AAAA;AAE5D,EAAI,IAAA,QAAA,CAAS,KAAK,CAAG,EAAA;AACnB,IAAA,IAAI,UAAU,EAAI,EAAA;AAChB,MAAO,OAAA,EAAA;AAAA,KACF,MAAA;AACL,MAAM,MAAA,EAAE,OAAU,GAAA,cAAA,EAAmB,GAAA,IAAA;AACrC,MAAA,MAAM,OAAU,GAAA,IAAI,MAAO,CAAA,IAAA,CAAK,KAAK,CAAA;AACrC,MAAI,IAAA,OAAA,CAAQ,IAAK,CAAA,KAAK,CAAG,EAAA;AACvB,QAAO,OAAA,EAAA;AAAA,OACF,MAAA;AACL,QAAO,OAAA,EAAE,EAAI,EAAA,KAAA,EAAO,OAAQ,EAAA;AAAA;AAC9B;AACF,GACK,MAAA;AACL,IAAA,OAAO,EAAE,EAAA,EAAI,KAAO,EAAA,OAAA,EAAS,wBAAyB,EAAA;AAAA;AAE1D;AAEA,iBAAA,CAAkB,aAAe,EAAA,gBAAA,EAAkB,qBAAuB,EAAA,EAAE,CAAA;;;;"}

package/esm/cell-renderers/background-cell/BackgroundCell.css.js

@@ -0,0 +1,4 @@
+var backgroundCellCss = "\n.vuuBackgroundCell {\n  --background-animation-duration: 10s;\n  color: var(--vuuBackgroundCell-color, var(--vuu-color-gray-80));\n  padding-right: var(--salt-size-unit);\n  position: relative;\n  z-index: -1;\n}\n\n.vuuBackgroundCell-arrowBackground,\n.vuuBackgroundCell-arrowOnly {\n  padding-left: 14px;\n}\n\n.vuuBackgroundCell-arrow {\n  background-color: var(--background-cell-background);\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  z-index: -1;\n}\n\n.vuuBackgroundCell-arrow {\n  text-align: left;\n}\n.vuuBackgroundCell-arrow + .num {\n  padding-left: 8px;\n}\n\n.right .vuuBackgroundCell-arrow {\n  text-align: right;\n}\n.right .vuuBackgroundCell-arrow + .num {\n  padding-right: 8px;\n}\n\n.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {\n  background-color: transparent;\n}\n\n.vuuBackgroundCell-backgroundOnly.up1,\n.vuuBackgroundCell-arrowBackground.up1 {\n  animation-duration: var(--background-animation-duration);\n  animation-name: vuubgup1;\n}\n\n.vuuBackgroundCell-backgroundOnly.up2,\n.vuuBackgroundCell-arrowBackground.up2 {\n  animation-duration: var(--background-animation-duration);\n  animation-name: vuubgup2;\n}\n\n.vuuBackgroundCell-backgroundOnly.down1,\n.vuuBackgroundCell-arrowBackground.down1 {\n  animation-duration: var(--background-animation-duration);\n  animation-name: vuubgdown1;\n}\n\n.vuuBackgroundCell-backgroundOnly.down2,\n.vuuBackgroundCell-arrowBackground.down2 {\n  animation-duration: var(--background-animation-duration);\n  animation-name: vuubgdown2;\n}\n\n.up1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {\n  animation-duration: 30s;\n  animation-name: vuuarrowup1;\n}\n\n.up2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {\n  animation-duration: 30s;\n  animation-name: vuuarrowup2;\n}\n\n.down1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {\n  animation-duration: 30s;\n  animation-name: vuuarrowdown1;\n}\n\n.down2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {\n  animation-duration: 30s;\n  animation-name: vuuarrowdown2;\n}\n\n.up1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {\n  animation-duration: 30s;\n  animation-name: vuubgarrowup1;\n}\n\n.up2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {\n  animation-duration: 30s;\n  animation-name: vuubgarrowup2;\n}\n\n.down1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {\n  animation-duration: 30s;\n  animation-name: vuubgarrowdown1;\n}\n\n.down2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {\n  animation-duration: 30s;\n  animation-name: vuubgarrowdown2;\n}\n";
+
+export { backgroundCellCss as default };
+//# sourceMappingURL=BackgroundCell.css.js.map

package/esm/cell-renderers/background-cell/BackgroundCell.css.js.map

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

package/esm/cell-renderers/background-cell/BackgroundCell.js

@@ -0,0 +1,74 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { dataAndColumnUnchanged, registerComponent, metadataKeys, isTypeDescriptor, UP1, UP2, DOWN1, DOWN2 } from '@vuu-ui/vuu-utils';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import cx from 'clsx';
+import { memo } from 'react';
+import { useDirection } from './useDirection.js';
+import backgroundCellCss from './BackgroundCell.css.js';
+import backgroundKeyFramesCss from './BackgroundKeyframes.css.js';
+
+const CHAR_ARROW_UP = String.fromCharCode(11014);
+const CHAR_ARROW_DOWN = String.fromCharCode(11015);
+const { KEY } = metadataKeys;
+const classBase = "vuuBackgroundCell";
+const FlashStyle = {
+  ArrowOnly: "arrow",
+  BackgroundOnly: "bg-only",
+  ArrowBackground: "arrow-bg"
+};
+const getFlashStyle = (colType) => {
+  if (isTypeDescriptor(colType) && colType.renderer) {
+    if ("flashStyle" in colType.renderer) {
+      return colType.renderer["flashStyle"];
+    }
+  }
+  return FlashStyle.BackgroundOnly;
+};
+const BackgroundCell = memo(function BackgroundCell2({
+  column,
+  columnMap,
+  row
+}) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-background-cell",
+    css: backgroundCellCss,
+    window: targetWindow
+  });
+  useComponentCssInjection({
+    testId: "vuu-background-keyframes",
+    css: backgroundKeyFramesCss,
+    window: targetWindow
+  });
+  const { name, type, valueFormatter } = column;
+  const dataIdx = columnMap[name];
+  const value = row[dataIdx];
+  const flashStyle = getFlashStyle(type);
+  const direction = useDirection(row[KEY], value, column);
+  const arrow = flashStyle === FlashStyle.ArrowOnly || flashStyle === FlashStyle.ArrowBackground ? direction === UP1 || direction === UP2 ? CHAR_ARROW_UP : direction === DOWN1 || direction === DOWN2 ? CHAR_ARROW_DOWN : null : null;
+  const dirClass = direction ? ` ` + direction : "";
+  const className = cx(classBase, dirClass, {
+    [`${classBase}-backgroundOnly`]: flashStyle === FlashStyle.BackgroundOnly,
+    [`${classBase}-arrowOnly`]: flashStyle === FlashStyle.ArrowOnly,
+    [`${classBase}-arrowBackground`]: flashStyle === FlashStyle.ArrowBackground
+  });
+  return /* @__PURE__ */ jsxs("div", { className, tabIndex: -1, children: [
+    /* @__PURE__ */ jsx("div", { className: `${classBase}-arrow`, children: arrow }),
+    valueFormatter(row[dataIdx])
+  ] });
+}, dataAndColumnUnchanged);
+registerComponent(
+  "vuu.price-move-background",
+  BackgroundCell,
+  "cell-renderer",
+  {
+    description: "Change background color of cell when value changes",
+    configEditor: "BackgroundCellConfigurationEditor",
+    label: "Background Flash",
+    serverDataType: ["long", "int", "double"]
+  }
+);
+
+export { BackgroundCell };
+//# sourceMappingURL=BackgroundCell.js.map

package/esm/cell-renderers/background-cell/BackgroundCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundCell.js","sources":["../../../src/cell-renderers/background-cell/BackgroundCell.tsx"],"sourcesContent":["import { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n  dataAndColumnUnchanged,\n  DOWN1,\n  DOWN2,\n  isTypeDescriptor,\n  metadataKeys,\n  registerComponent,\n  UP1,\n  UP2,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { memo } from \"react\";\nimport { useDirection } from \"./useDirection\";\n\nimport { DataValueType } from \"@vuu-ui/vuu-data-types\";\nimport backgroundCellCss from \"./BackgroundCell.css\";\nimport backgroundKeyFramesCss from \"./BackgroundKeyframes.css\";\n\nconst CHAR_ARROW_UP = String.fromCharCode(11014);\nconst CHAR_ARROW_DOWN = String.fromCharCode(11015);\n\nconst { KEY } = metadataKeys;\n\nconst classBase = \"vuuBackgroundCell\";\n\n// TODO these sre repeated from PriceFormatter - where shoud they live ?\nconst FlashStyle = {\n  ArrowOnly: \"arrow\",\n  BackgroundOnly: \"bg-only\",\n  ArrowBackground: \"arrow-bg\",\n};\n\nconst getFlashStyle = (colType?: DataValueType) => {\n  if (isTypeDescriptor(colType) && colType.renderer) {\n    if (\"flashStyle\" in colType.renderer) {\n      return colType.renderer[\"flashStyle\"];\n    }\n  }\n  return FlashStyle.BackgroundOnly;\n};\n\nexport const BackgroundCell = memo(function BackgroundCell({\n  column,\n  columnMap,\n  row,\n}: TableCellRendererProps) {\n  //TODO what about click handling\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-background-cell\",\n    css: backgroundCellCss,\n    window: targetWindow,\n  });\n  useComponentCssInjection({\n    testId: \"vuu-background-keyframes\",\n    css: backgroundKeyFramesCss,\n    window: targetWindow,\n  });\n\n  const { name, type, valueFormatter } = column;\n  const dataIdx = columnMap[name];\n  const value = row[dataIdx];\n  const flashStyle = getFlashStyle(type);\n  const direction = useDirection(row[KEY], value, column);\n  const arrow =\n    flashStyle === FlashStyle.ArrowOnly ||\n    flashStyle === FlashStyle.ArrowBackground\n      ? direction === UP1 || direction === UP2\n        ? CHAR_ARROW_UP\n        : direction === DOWN1 || direction === DOWN2\n          ? CHAR_ARROW_DOWN\n          : null\n      : null;\n\n  const dirClass = direction ? ` ` + direction : \"\";\n\n  const className = cx(classBase, dirClass, {\n    [`${classBase}-backgroundOnly`]: flashStyle === FlashStyle.BackgroundOnly,\n    [`${classBase}-arrowOnly`]: flashStyle === FlashStyle.ArrowOnly,\n    [`${classBase}-arrowBackground`]: flashStyle === FlashStyle.ArrowBackground,\n  });\n\n  return (\n    <div className={className} tabIndex={-1}>\n      <div className={`${classBase}-arrow`}>{arrow}</div>\n      {valueFormatter(row[dataIdx])}\n    </div>\n  );\n}, dataAndColumnUnchanged);\n\nregisterComponent(\n  \"vuu.price-move-background\",\n  BackgroundCell,\n  \"cell-renderer\",\n  {\n    description: \"Change background color of cell when value changes\",\n    configEditor: \"BackgroundCellConfigurationEditor\",\n    label: \"Background Flash\",\n    serverDataType: [\"long\", \"int\", \"double\"],\n  },\n);\n"],"names":["BackgroundCell"],"mappings":"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"}

package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css.js

@@ -0,0 +1,4 @@
+var backgroundCellConfigurationEditorCss = ".vuuBackgroundCellConfiguration {\n    height: 50px;\n    background-color: red;\n}";
+
+export { backgroundCellConfigurationEditorCss as default };
+//# sourceMappingURL=BackgroundCellConfigurationEditor.css.js.map

package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css.js.map

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

package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js

@@ -0,0 +1,65 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { registerConfigurationEditor } from '@vuu-ui/vuu-utils';
+import { FormField, FormFieldLabel, Dropdown, Option } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { useState, useCallback } from 'react';
+import backgroundCellConfigurationEditorCss from './BackgroundCellConfigurationEditor.css.js';
+
+const classBase = "vuuBackgroundCellConfiguration";
+const flashOptions = [
+  { label: "Background Only", value: "bg-only" },
+  { label: "Background and Arrow", value: "arrow-bg" },
+  { label: "Arrow Only", value: "arrow" }
+];
+const [defaultFlashOption] = flashOptions;
+const valueFromColumn = (column) => {
+  const { flashStyle } = column.type.renderer;
+  return flashOptions.find((o) => o.value === flashStyle) || defaultFlashOption;
+};
+const BackgroundCellConfigurationEditor = ({
+  column,
+  onChangeRendering
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-background-cell-configuration-editor",
+    css: backgroundCellConfigurationEditorCss,
+    window: targetWindow
+  });
+  console.log({ type: column.type });
+  const [flashStyle, setFlashStyle] = useState(
+    valueFromColumn(column)
+  );
+  const handleSelectionChange = useCallback(
+    (_, [flashOption]) => {
+      setFlashStyle(flashOption);
+      const renderProps = column.type.renderer;
+      onChangeRendering({
+        ...renderProps,
+        flashStyle: flashOption?.value ?? defaultFlashOption.value
+      });
+    },
+    [column.type, onChangeRendering]
+  );
+  return /* @__PURE__ */ jsxs(FormField, { children: [
+    /* @__PURE__ */ jsx(FormFieldLabel, { children: "Flash Style" }),
+    /* @__PURE__ */ jsx(
+      Dropdown,
+      {
+        className: `${classBase}-flashStyle`,
+        onSelectionChange: handleSelectionChange,
+        selected: flashStyle ? [flashStyle] : [],
+        value: flashStyle?.label,
+        children: flashOptions.map((flashOption, i) => /* @__PURE__ */ jsx(Option, { value: flashOption, children: flashOption.label }, i))
+      }
+    )
+  ] });
+};
+registerConfigurationEditor(
+  "BackgroundCellConfigurationEditor",
+  BackgroundCellConfigurationEditor
+);
+
+export { BackgroundCellConfigurationEditor };
+//# sourceMappingURL=BackgroundCellConfigurationEditor.js.map

package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundCellConfigurationEditor.js","sources":["../../../src/cell-renderers/background-cell/BackgroundCellConfigurationEditor.tsx"],"sourcesContent":["import type { ColumnDescriptorCustomRenderer } from \"@vuu-ui/vuu-table-types\";\nimport {\n  ConfigurationEditorProps,\n  registerConfigurationEditor,\n} from \"@vuu-ui/vuu-utils\";\nimport { Dropdown, FormField, FormFieldLabel, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { SyntheticEvent, useCallback, useState } from \"react\";\n\nimport backgroundCellConfigurationEditorCss from \"./BackgroundCellConfigurationEditor.css\";\n\nconst classBase = \"vuuBackgroundCellConfiguration\";\n\ntype FlashOption = {\n  label: string;\n  value: \"arrow\" | \"bg-only\" | \"arrow-bg\";\n};\n\nconst flashOptions: FlashOption[] = [\n  { label: \"Background Only\", value: \"bg-only\" },\n  { label: \"Background and Arrow\", value: \"arrow-bg\" },\n  { label: \"Arrow Only\", value: \"arrow\" },\n];\n\nconst [defaultFlashOption] = flashOptions;\n\nconst valueFromColumn = (column: ColumnDescriptorCustomRenderer) => {\n  const { flashStyle } = column.type.renderer;\n  return flashOptions.find((o) => o.value === flashStyle) || defaultFlashOption;\n};\n\nexport const BackgroundCellConfigurationEditor = ({\n  column,\n  onChangeRendering,\n}: ConfigurationEditorProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-background-cell-configuration-editor\",\n    css: backgroundCellConfigurationEditorCss,\n    window: targetWindow,\n  });\n\n  console.log({ type: column.type });\n\n  const [flashStyle, setFlashStyle] = useState<FlashOption | undefined>(\n    valueFromColumn(column),\n  );\n  const handleSelectionChange = useCallback(\n    (_: SyntheticEvent, [flashOption]: FlashOption[]) => {\n      setFlashStyle(flashOption);\n      const renderProps = column.type.renderer;\n      onChangeRendering({\n        ...renderProps,\n        flashStyle: flashOption?.value ?? defaultFlashOption.value,\n      });\n    },\n    [column.type, onChangeRendering],\n  );\n\n  return (\n    <FormField>\n      <FormFieldLabel>Flash Style</FormFieldLabel>\n      <Dropdown<FlashOption>\n        className={`${classBase}-flashStyle`}\n        onSelectionChange={handleSelectionChange}\n        selected={flashStyle ? [flashStyle] : []}\n        value={flashStyle?.label}\n      >\n        {flashOptions.map((flashOption, i) => (\n          <Option key={i} value={flashOption}>\n            {flashOption.label}\n          </Option>\n        ))}\n      </Dropdown>\n    </FormField>\n  );\n};\n\nregisterConfigurationEditor(\n  \"BackgroundCellConfigurationEditor\",\n  BackgroundCellConfigurationEditor,\n);\n"],"names":[],"mappings":";;;;;;;;AAYA,MAAM,SAAY,GAAA,gCAAA;AAOlB,MAAM,YAA8B,GAAA;AAAA,EAClC,EAAE,KAAA,EAAO,iBAAmB,EAAA,KAAA,EAAO,SAAU,EAAA;AAAA,EAC7C,EAAE,KAAA,EAAO,sBAAwB,EAAA,KAAA,EAAO,UAAW,EAAA;AAAA,EACnD,EAAE,KAAA,EAAO,YAAc,EAAA,KAAA,EAAO,OAAQ;AACxC,CAAA;AAEA,MAAM,CAAC,kBAAkB,CAAI,GAAA,YAAA;AAE7B,MAAM,eAAA,GAAkB,CAAC,MAA2C,KAAA;AAClE,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,MAAA,CAAO,IAAK,CAAA,QAAA;AACnC,EAAA,OAAO,aAAa,IAAK,CAAA,CAAC,MAAM,CAAE,CAAA,KAAA,KAAU,UAAU,CAAK,IAAA,kBAAA;AAC7D,CAAA;AAEO,MAAM,oCAAoC,CAAC;AAAA,EAChD,MAAA;AAAA,EACA;AACF,CAAgC,KAAA;AAC9B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0CAAA;AAAA,IACR,GAAK,EAAA,oCAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,OAAA,CAAQ,GAAI,CAAA,EAAE,IAAM,EAAA,MAAA,CAAO,MAAM,CAAA;AAEjC,EAAM,MAAA,CAAC,UAAY,EAAA,aAAa,CAAI,GAAA,QAAA;AAAA,IAClC,gBAAgB,MAAM;AAAA,GACxB;AACA,EAAA,MAAM,qBAAwB,GAAA,WAAA;AAAA,IAC5B,CAAC,CAAA,EAAmB,CAAC,WAAW,CAAqB,KAAA;AACnD,MAAA,aAAA,CAAc,WAAW,CAAA;AACzB,MAAM,MAAA,WAAA,GAAc,OAAO,IAAK,CAAA,QAAA;AAChC,MAAkB,iBAAA,CAAA;AAAA,QAChB,GAAG,WAAA;AAAA,QACH,UAAA,EAAY,WAAa,EAAA,KAAA,IAAS,kBAAmB,CAAA;AAAA,OACtD,CAAA;AAAA,KACH;AAAA,IACA,CAAC,MAAO,CAAA,IAAA,EAAM,iBAAiB;AAAA,GACjC;AAEA,EAAA,4BACG,SACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,kBAAe,QAAW,EAAA,aAAA,EAAA,CAAA;AAAA,oBAC3B,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,WAAA,CAAA;AAAA,QACvB,iBAAmB,EAAA,qBAAA;AAAA,QACnB,QAAU,EAAA,UAAA,GAAa,CAAC,UAAU,IAAI,EAAC;AAAA,QACvC,OAAO,UAAY,EAAA,KAAA;AAAA,QAElB,QAAa,EAAA,YAAA,CAAA,GAAA,CAAI,CAAC,WAAA,EAAa,CAC9B,qBAAA,GAAA,CAAC,MAAe,EAAA,EAAA,KAAA,EAAO,WACpB,EAAA,QAAA,EAAA,WAAA,CAAY,KADF,EAAA,EAAA,CAEb,CACD;AAAA;AAAA;AACH,GACF,EAAA,CAAA;AAEJ;AAEA,2BAAA;AAAA,EACE,mCAAA;AAAA,EACA;AACF,CAAA;;;;"}

package/esm/cell-renderers/background-cell/BackgroundKeyframes.css.js

@@ -0,0 +1,4 @@
+var backgroundKeyFramesCss = "\n@keyframes vuubgup1 {\n    0% {\n      background-color: var(--vuu-color-green-50);\n      color: white;\n    }\n\n    30% {\n      color: white;\n    }  \n    33% {\n      color: var(--vuu-color-gray-80);\n    }  \n\n    100% {\n      background-color: transparent;\n      color: var(--vuu-color-gray-80);\n    }\n  }\n  \n  @keyframes vuubgup2 {\n    0% {\n      background-color: var(--vuu-color-green-50);\n      color: white;\n    }\n\n    30% {\n      color: white;\n    }  \n    33% {\n      color: var(--vuu-color-gray-80);\n    }  \n\n    100% {\n      background-color: transparent;\n      color: var(--vuu-color-gray-80);\n    }\n  }\n  \n  @keyframes vuubgdown1 {\n    0% {\n      background-color: var(--vuu-color-red-50);\n      color: white;\n    }\n    30% {\n      color: white;\n    }  \n    33% {\n      color: var(--vuu-color-gray-80);\n    }  \n    100% {\n      background-color: transparent;\n      color: var(--vuu-color-gray-80);\n    }\n  }\n  \n  @keyframes vuubgdown2 {\n    0% {\n      background-color: var(--vuu-color-red-50);\n      color: white;\n    }\n    30% {\n      color: white;\n    }  \n    33% {\n      color: var(--vuu-color-gray-80);\n    }  \n    100% {\n      background-color: transparent;\n      color: var(--vuu-color-gray-80);\n    }\n  }\n  \n  @keyframes vuuarrowup1 {\n    from {\n      color: var(--salt-differential-positive-foreground);\n    }\n    to {\n      color: transparent;\n    }\n  }\n  \n  @keyframes vuuarrowup2 {\n    from {\n      color: var(--salt-differential-positive-foreground);\n    }\n    to {\n      color: transparent;\n    }\n  }\n  \n  @keyframes vuuarrowdown1 {\n    from {\n      color: var(--salt-differential-negative-foreground);\n    }\n    to {\n      color: transparent;\n    }\n  }\n  \n  @keyframes vuuarrowdown2 {\n    from {\n      color: var(--salt-differential-negative-foreground);\n    }\n    to {\n      color: transparent;\n    }\n  }\n  \n  @keyframes vuubgarrowup1 {\n    0% {\n      color: var(--salt-differential-positive-foreground);\n      background-color: var(--vuu-color-green-50);\n    }\n    20% {\n      color: var(--salt-differential-positive-foreground);\n      background-color: transparent;\n    }\n    100% {\n      color: transparent;\n      background-color: transparent;\n    }\n  }\n  \n  @keyframes vuubgarrowup2 {\n    0% {\n      color: var(--salt-differential-positive-foreground);\n      background-color: var(--vuu-color-green-50);\n    }\n    20% {\n      color: var(--salt-differential-positive-foreground);\n      background-color: transparent;\n    }\n    100% {\n      color: transparent;\n      background-color: transparent;\n    }\n  }\n  \n  @keyframes vuubgarrowdown1 {\n    0% {\n      color: var(--salt-differential-negative-foreground);\n      background-color: var(--vuu-color-red-50);\n    }\n    20% {\n      color: var(--salt-differential-negative-foreground);\n      background-color: transparent;\n    }\n    100% {\n      color: transparent;\n      background-color: transparent;\n    }\n  }\n  \n  @keyframes vuubgarrowdown2 {\n    0% {\n      color: var(--salt-differential-negative-foreground);\n      background-color: var(--vuu-color-red-50);\n    }\n    20% {\n      color: var(--salt-differential-negative-foreground);\n      background-color: transparent;\n    }\n    100% {\n      color: transparent;\n      background-color: transparent;\n    }\n  }\n  ";
+
+export { backgroundKeyFramesCss as default };
+//# sourceMappingURL=BackgroundKeyframes.css.js.map

package/esm/cell-renderers/background-cell/BackgroundKeyframes.css.js.map

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

package/esm/cell-renderers/background-cell/useDirection.js

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

package/esm/cell-renderers/background-cell/useDirection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDirection.js","sources":["../../../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":[],"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,GAAM,OAAc,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,WAAW,gBAAiB,CAAA,QAAQ,CACtC,GAAA,QAAA,CAAS,YAAY,QACrB,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,YACJ,GAAQ,KAAA,OAAA,IACR,aAAc,CAAA,KAAK,KACnB,aAAc,CAAA,SAAS,CACvB,IAAA,MAAA,KAAW,aACP,uBAAwB,CAAA,KAAA,EAAO,aAAe,EAAA,SAAA,EAAW,QAAQ,CACjE,GAAA,EAAA;AAEN,EAAA,SAAA,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/esm/cell-renderers/dropdown-cell/DropdownCell.css.js

@@ -0,0 +1,4 @@
+var dropdownCellCss = ".vuuTableCell {\n  .vuuTableDropdownCell {\n    --vuu-icon-height: 15px;\n    --vuu-icon-left: calc(100% - 20px);\n    --vuu-icon-size: 8px;\n    --vuu-icon-top: -2px;\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";
+
+export { dropdownCellCss as default };
+//# sourceMappingURL=DropdownCell.css.js.map

package/esm/cell-renderers/dropdown-cell/DropdownCell.css.js.map

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

package/esm/cell-renderers/dropdown-cell/DropdownCell.js

@@ -0,0 +1,92 @@
+import { jsx } from 'react/jsx-runtime';
+import { useLookupValues } from '@vuu-ui/vuu-data-react';
+import { getSelectedOption, dispatchCustomEvent, dataColumnAndKeyUnchanged, registerComponent } from '@vuu-ui/vuu-utils';
+import { Dropdown, Option } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { memo, useState, useRef, useMemo, useCallback } from 'react';
+import dropdownCellCss from './DropdownCell.css.js';
+
+const classBase = "vuuTableDropdownCell";
+const DropdownCell = memo(function DropdownCell2({
+  column,
+  columnMap,
+  onEdit,
+  row
+}) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-dropdown-cell",
+    css: dropdownCellCss,
+    window: targetWindow
+  });
+  const [open, setOpen] = useState(false);
+  const dataIdx = columnMap[column.name];
+  const dataValue = row[dataIdx];
+  const { values } = useLookupValues(column, dataValue);
+  const valueRef = useRef(void 0);
+  useMemo(() => {
+    valueRef.current = getSelectedOption(values, dataValue);
+  }, [dataValue, values]);
+  const handleOpenChange = useCallback((isOpen) => {
+    console.log(`handleOpenChange ${isOpen}`);
+    if (isOpen === false) {
+      setOpen(false);
+    }
+  }, []);
+  const handleSelectionChange = useCallback(
+    async (evt, [selectedOption2]) => {
+      if (selectedOption2) {
+        const response = await onEdit?.(
+          {
+            editType: "commit",
+            previousValue: valueRef.current?.value,
+            value: selectedOption2.value
+          },
+          "commit"
+        );
+        if (response === true) {
+          dispatchCustomEvent(evt.target, "vuu-commit");
+        }
+      }
+    },
+    [onEdit]
+  );
+  const handleClick = useCallback(() => {
+    if (!open) {
+      setOpen(true);
+    }
+  }, [open]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" && !open) {
+        e.preventDefault();
+        e.stopPropagation();
+        setOpen(true);
+      }
+    },
+    [open]
+  );
+  const { current: selectedOption } = valueRef;
+  return /* @__PURE__ */ jsx(
+    Dropdown,
+    {
+      className: classBase,
+      "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__ */ jsx(Option, { value: listOption, children: listOption.label }, i))
+    }
+  );
+}, dataColumnAndKeyUnchanged);
+registerComponent("dropdown-cell", DropdownCell, "cell-renderer", {
+  userCanAssign: false
+});
+
+export { DropdownCell };
+//# sourceMappingURL=DropdownCell.js.map

package/esm/cell-renderers/dropdown-cell/DropdownCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownCell.js","sources":["../../../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  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\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(function DropdownCell({\n  column,\n  columnMap,\n  onEdit,\n  row,\n}: TableCellRendererProps) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-dropdown-cell\",\n    css: dropdownCellCss,\n    window: targetWindow,\n  });\n\n  const [open, setOpen] = useState(false);\n  const dataIdx = columnMap[column.name];\n  const dataValue = row[dataIdx] 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            previousValue: valueRef.current?.value,\n            value: selectedOption.value as VuuColumnDataType,\n          },\n          \"commit\",\n        );\n        if (response === true) {\n          dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n        }\n      }\n    },\n    [onEdit],\n  );\n\n  const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(() => {\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={classBase}\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}, dataColumnAndKeyUnchanged);\n\nregisterComponent(\"dropdown-cell\", DropdownCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":["DropdownCell","selectedOption"],"mappings":"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"}

package/esm/cell-renderers/lookup-cell/LookupCell.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { useLookupValues } from '@vuu-ui/vuu-data-react';
+import { dataAndColumnUnchanged, registerComponent } from '@vuu-ui/vuu-utils';
+import { memo } from 'react';
+
+const LookupCell = memo(function LookupCell2({
+  column,
+  columnMap,
+  row
+}) {
+  const dataIdx = columnMap[column.name];
+  const dataValue = row[dataIdx];
+  const { initialValue: value } = useLookupValues(column, dataValue);
+  return /* @__PURE__ */ jsx("span", { children: value?.label });
+}, dataAndColumnUnchanged);
+registerComponent("lookup-cell", LookupCell, "cell-renderer", {
+  userCanAssign: false
+});
+
+export { LookupCell };
+//# sourceMappingURL=LookupCell.js.map

package/esm/cell-renderers/lookup-cell/LookupCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LookupCell.js","sources":["../../../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  columnMap,\n  row,\n}: TableCellRendererProps) {\n  const dataIdx = columnMap[column.name];\n  const dataValue = row[dataIdx] 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":["LookupCell"],"mappings":";;;;;AAKa,MAAA,UAAA,GAAa,IAAK,CAAA,SAASA,WAAW,CAAA;AAAA,EACjD,MAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAA2B,EAAA;AACzB,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,EAAM,MAAA,SAAA,GAAY,IAAI,OAAO,CAAA;AAC7B,EAAA,MAAM,EAAE,YAAc,EAAA,KAAA,EAAU,GAAA,eAAA,CAAgB,QAAQ,SAAS,CAAA;AACjE,EAAO,uBAAA,GAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAA,KAAA,EAAO,KAAM,EAAA,CAAA;AAC7B,CAAA,EAAG,sBAAsB;AAEzB,iBAAkB,CAAA,aAAA,EAAe,YAAY,eAAiB,EAAA;AAAA,EAC5D,aAAe,EAAA;AACjB,CAAC,CAAA;;;;"}

package/esm/cell-renderers/pct-progress-cell/PctProgressCell.css.js

@@ -0,0 +1,4 @@
+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}";
+
+export { pctProgressCellCss as default };
+//# sourceMappingURL=PctProgressCell.css.js.map

package/esm/cell-renderers/pct-progress-cell/PctProgressCell.css.js.map

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

package/esm/cell-renderers/pct-progress-cell/PctProgressCell.js

@@ -0,0 +1,60 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { registerComponent } from '@vuu-ui/vuu-utils';
+import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import pctProgressCellCss from './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, columnMap, row }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-pct-progress-cell",
+    css: pctProgressCellCss,
+    window: targetWindow
+  });
+  const value = row[columnMap[column.name]];
+  const percentageValue = getPercentageValue(value);
+  const className = cx(classBase, {});
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(className, {
+        [`${classBase}-zero`]: percentageValue === 0,
+        [`${classBase}-complete`]: percentageValue >= 100
+      }),
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `${classBase}-progressBar`,
+            style: { "--progress-bar-pct": `${percentageValue}%` }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: `${classBase}-text`, children: `${percentageValue.toFixed(
+          2
+        )} %` })
+      ]
+    }
+  );
+};
+registerComponent("vuu.pct-progress", PctProgressCell, "cell-renderer", {
+  description: "Percentage formatter",
+  label: "Percentage formatter",
+  serverDataType: "double"
+});
+
+export { PctProgressCell };
+//# sourceMappingURL=PctProgressCell.js.map

package/esm/cell-renderers/pct-progress-cell/PctProgressCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PctProgressCell.js","sources":["../../../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, columnMap, row }: TableCellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-pct-progress-cell\",\n    css: pctProgressCellCss,\n    window: targetWindow,\n  });\n\n  const value = row[columnMap[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":[],"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,kBAAkB,CAAC,EAAE,MAAQ,EAAA,SAAA,EAAW,KAA0B,KAAA;AAC7E,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAA,kBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,KAAQ,GAAA,GAAA,CAAI,SAAU,CAAA,MAAA,CAAO,IAAI,CAAC,CAAA;AACxC,EAAM,MAAA,eAAA,GAAkB,mBAAmB,KAAK,CAAA;AAChD,EAAA,MAAM,SAAY,GAAA,EAAA,CAAG,SAAW,EAAA,EAAE,CAAA;AAElC,EACE,uBAAA,IAAA;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,wBAAA,GAAA;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,4BACC,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;AAEA,iBAAkB,CAAA,kBAAA,EAAoB,iBAAiB,eAAiB,EAAA;AAAA,EACtE,WAAa,EAAA,sBAAA;AAAA,EACb,KAAO,EAAA,sBAAA;AAAA,EACP,cAAgB,EAAA;AAClB,CAAC,CAAA;;;;"}

package/esm/cell-renderers/progress-cell/ProgressCell.css.js

@@ -0,0 +1,4 @@
+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}";
+
+export { progressCellCss as default };
+//# sourceMappingURL=ProgressCell.css.js.map

package/esm/cell-renderers/progress-cell/ProgressCell.css.js.map

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

package/esm/cell-renderers/progress-cell/ProgressCell.js

@@ -0,0 +1,67 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { registerComponent, isTypeDescriptor, isColumnTypeRenderer, isValidNumber } from '@vuu-ui/vuu-utils';
+import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import progressCellCss from './ProgressCell.css.js';
+
+const classBase = "vuuProgressCell";
+const ProgressCell = ({ column, columnMap, row }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-progress-cell",
+    css: progressCellCss,
+    window: targetWindow
+  });
+  const { name, type } = column;
+  const value = row[columnMap[name]];
+  let showProgress = false;
+  let percentage = 0;
+  if (isTypeDescriptor(type) && isColumnTypeRenderer(type.renderer)) {
+    const { associatedField } = type.renderer;
+    if (associatedField) {
+      const associatedValue = row[columnMap[associatedField]];
+      if (isValidNumber(value) && 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__ */ jsxs("div", { className, tabIndex: -1, children: [
+    showProgress ? /* @__PURE__ */ jsxs("span", { className: `${classBase}-track`, children: [
+      /* @__PURE__ */ jsx("span", { className: `${classBase}-bg` }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `${classBase}-bar`,
+          style: { "--progress-bar-pct": `-${100 - percentage}%` }
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsx("span", { className: `${classBase}-text`, children: `${percentage} %` })
+  ] });
+};
+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/esm/cell-renderers/progress-cell/ProgressCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressCell.js","sources":["../../../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, columnMap, row }: 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 = row[columnMap[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 = row[columnMap[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":[],"mappings":"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"}