@vuu-ui/vuu-table-extras 0.8.35 → 0.8.36

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

@@ -0,0 +1,24 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+
+const isString = (value) => typeof value === "string";
+const CaseValidator = (rule, value) => {
+  if (isString(value)) {
+    if (value === "") {
+      return true;
+    } else if (rule.value === "lower" && value.toLowerCase() !== value) {
+      return "value must be all lowercase";
+    } else if (rule.value === "upper" && value.toUpperCase() !== value) {
+      return "value must be all uppercase";
+    } else {
+      return true;
+    }
+  } else {
+    return "value must be a string";
+  }
+};
+vuuUtils.registerComponent("vuu-case", CaseValidator, "data-edit-validator", {});
+
+exports.CaseValidator = CaseValidator;
+//# sourceMappingURL=CaseValidator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaseValidator.js","sources":["../../src/cell-edit-validators/CaseValidator.ts"],"sourcesContent":["import { EditRuleValidator, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\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 true;\n    } else if (rule.value === \"lower\" && value.toLowerCase() !== value) {\n      return \"value must be all lowercase\";\n    } else if (rule.value === \"upper\" && value.toUpperCase() !== value) {\n      return \"value must be all uppercase\";\n    } else {\n      return true;\n    }\n  } else {\n    return \"value must be a string\";\n  }\n};\n\nregisterComponent(\"vuu-case\", CaseValidator, \"data-edit-validator\", {});\n"],"names":["registerComponent"],"mappings":";;;;AAGA,MAAM,QAAW,GAAA,CAAC,KAChB,KAAA,OAAO,KAAU,KAAA,QAAA,CAAA;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,IAAA,CAAA;AAAA,eACE,IAAK,CAAA,KAAA,KAAU,WAAW,KAAM,CAAA,WAAA,OAAkB,KAAO,EAAA;AAClE,MAAO,OAAA,6BAAA,CAAA;AAAA,eACE,IAAK,CAAA,KAAA,KAAU,WAAW,KAAM,CAAA,WAAA,OAAkB,KAAO,EAAA;AAClE,MAAO,OAAA,6BAAA,CAAA;AAAA,KACF,MAAA;AACL,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAAA,GACK,MAAA;AACL,IAAO,OAAA,wBAAA,CAAA;AAAA,GACT;AACF,EAAA;AAEAA,0BAAA,CAAkB,UAAY,EAAA,aAAA,EAAe,qBAAuB,EAAA,EAAE,CAAA;;;;"}

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

@@ -0,0 +1,26 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+
+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 true;
+    } else {
+      const { message = defaultMessage } = rule;
+      const pattern = new RegExp(rule.value);
+      return pattern.test(value) || message;
+    }
+  } else {
+    return "value must be a string";
+  }
+};
+vuuUtils.registerComponent("vuu-pattern", PatternValidator, "data-edit-validator", {});
+
+exports.PatternValidator = PatternValidator;
+//# sourceMappingURL=PatternValidator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PatternValidator.js","sources":["../../src/cell-edit-validators/PatternValidator.ts"],"sourcesContent":["import { EditRuleValidator, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\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 true;\n    } else {\n      const { message = defaultMessage } = rule;\n      const pattern = new RegExp(rule.value);\n      return pattern.test(value) || message;\n    }\n  } else {\n    return \"value must be a string\";\n  }\n};\n\nregisterComponent(\"vuu-pattern\", PatternValidator, \"data-edit-validator\", {});\n"],"names":["registerComponent"],"mappings":";;;;AAGA,MAAM,QAAW,GAAA,CAAC,KAChB,KAAA,OAAO,KAAU,KAAA,QAAA,CAAA;AAEnB,MAAM,cAAiB,GAAA,uCAAA,CAAA;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,CAAA;AAAA,GAC5D;AACA,EAAI,IAAA,QAAA,CAAS,KAAK,CAAG,EAAA;AACnB,IAAA,IAAI,UAAU,EAAI,EAAA;AAChB,MAAO,OAAA,IAAA,CAAA;AAAA,KACF,MAAA;AACL,MAAM,MAAA,EAAE,OAAU,GAAA,cAAA,EAAmB,GAAA,IAAA,CAAA;AACrC,MAAA,MAAM,OAAU,GAAA,IAAI,MAAO,CAAA,IAAA,CAAK,KAAK,CAAA,CAAA;AACrC,MAAO,OAAA,OAAA,CAAQ,IAAK,CAAA,KAAK,CAAK,IAAA,OAAA,CAAA;AAAA,KAChC;AAAA,GACK,MAAA;AACL,IAAO,OAAA,wBAAA,CAAA;AAAA,GACT;AACF,EAAA;AAEAA,0BAAA,CAAkB,aAAe,EAAA,gBAAA,EAAkB,qBAAuB,EAAA,EAAE,CAAA;;;;"}

package/cjs/cell-renderers/background-cell/BackgroundCell.css

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

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

@@ -0,0 +1,64 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var cx = require('clsx');
+var react = require('react');
+var useDirection = require('./useDirection.js');
+
+const CHAR_ARROW_UP = String.fromCharCode(11014);
+const CHAR_ARROW_DOWN = String.fromCharCode(11015);
+const { KEY } = vuuUtils.metadataKeys;
+const classBase = "vuuBackgroundCell";
+const FlashStyle = {
+  ArrowOnly: "arrow",
+  BackgroundOnly: "bg-only",
+  ArrowBackground: "arrow-bg"
+};
+const getFlashStyle = (colType) => {
+  if (vuuUtils.isTypeDescriptor(colType) && colType.renderer) {
+    if ("flashStyle" in colType.renderer) {
+      return colType.renderer["flashStyle"];
+    }
+  }
+  return FlashStyle.BackgroundOnly;
+};
+const BackgroundCell = react.memo(
+  function BackgroundCell2({
+    column,
+    columnMap,
+    row
+  }) {
+    const { name, type, valueFormatter } = column;
+    const dataIdx = columnMap[name];
+    const value = row[dataIdx];
+    const flashStyle = getFlashStyle(type);
+    const direction = useDirection.useDirection(row[KEY], value, column);
+    const arrow = flashStyle === FlashStyle.ArrowOnly || flashStyle === FlashStyle.ArrowBackground ? direction === vuuUtils.UP1 || direction === vuuUtils.UP2 ? CHAR_ARROW_UP : direction === vuuUtils.DOWN1 || direction === vuuUtils.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__ */ jsxRuntime.jsxs("div", { className, tabIndex: -1, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-arrow`, children: arrow }),
+      valueFormatter(row[dataIdx])
+    ] });
+  },
+  vuuUtils.dataAndColumnUnchanged
+);
+vuuUtils.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"]
+  }
+);
+
+exports.BackgroundCell = BackgroundCell;
+//# sourceMappingURL=BackgroundCell.js.map

package/cjs/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 { ColumnType, TableCellProps } 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 cx from \"clsx\";\nimport { memo } from \"react\";\nimport { useDirection } from \"./useDirection\";\n\nimport \"./BackgroundCell.css\";\nimport \"./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?: ColumnType) => {\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}: TableCellProps) {\n  //TODO what about click handling\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},\ndataAndColumnUnchanged);\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":["metadataKeys","isTypeDescriptor","memo","BackgroundCell","useDirection","UP1","UP2","DOWN1","DOWN2","jsxs","jsx","dataAndColumnUnchanged","registerComponent"],"mappings":"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"}

package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css

@@ -0,0 +1,4 @@
+.vuuBackgroundCellConfiguration {
+    height: 50px;
+    background-color: red;
+}

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

@@ -0,0 +1,58 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var core = require('@salt-ds/core');
+var react = require('react');
+
+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 [flashStyle, setFlashStyle] = react.useState(
+    valueFromColumn(column)
+  );
+  const handleSelectionChange = react.useCallback(
+    (_, flashOption) => {
+      setFlashStyle(flashOption);
+      const renderProps = column.type.renderer;
+      onChangeRendering({
+        ...renderProps,
+        flashStyle: flashOption?.value ?? defaultFlashOption.value
+      });
+    },
+    [column.type, onChangeRendering]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Flash Style" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      vuuUiControls.Dropdown,
+      {
+        className: `${classBase}-flashStyle`,
+        onSelectionChange: handleSelectionChange,
+        selected: flashStyle,
+        source: flashOptions,
+        width: "100%"
+      }
+    )
+  ] });
+};
+vuuUtils.registerConfigurationEditor(
+  "BackgroundCellConfigurationEditor",
+  BackgroundCellConfigurationEditor
+);
+
+exports.BackgroundCellConfigurationEditor = BackgroundCellConfigurationEditor;
+//# sourceMappingURL=BackgroundCellConfigurationEditor.js.map

package/cjs/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 { Dropdown, SingleSelectionHandler } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  ConfigurationEditorProps,\n  registerConfigurationEditor,\n} from \"@vuu-ui/vuu-utils\";\nimport { FormField, FormFieldLabel } from \"@salt-ds/core\";\nimport { useCallback, useState } from \"react\";\n\nimport \"./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 [flashStyle, setFlashStyle] = useState<FlashOption | null>(\n    valueFromColumn(column)\n  );\n  const handleSelectionChange = useCallback<\n    SingleSelectionHandler<FlashOption>\n  >(\n    (_, 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}\n        source={flashOptions}\n        width=\"100%\"\n      />\n    </FormField>\n  );\n};\n\nregisterConfigurationEditor(\n  \"BackgroundCellConfigurationEditor\",\n  BackgroundCellConfigurationEditor\n);\n"],"names":["useState","useCallback","FormField","jsx","FormFieldLabel","Dropdown","registerConfigurationEditor"],"mappings":";;;;;;;;AAWA,MAAM,SAAY,GAAA,gCAAA,CAAA;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,EAAA;AACxC,CAAA,CAAA;AAEA,MAAM,CAAC,kBAAkB,CAAI,GAAA,YAAA,CAAA;AAE7B,MAAM,eAAA,GAAkB,CAAC,MAA2C,KAAA;AAClE,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,MAAA,CAAO,IAAK,CAAA,QAAA,CAAA;AACnC,EAAA,OAAO,aAAa,IAAK,CAAA,CAAC,MAAM,CAAE,CAAA,KAAA,KAAU,UAAU,CAAK,IAAA,kBAAA,CAAA;AAC7D,CAAA,CAAA;AAEO,MAAM,oCAAoC,CAAC;AAAA,EAChD,MAAA;AAAA,EACA,iBAAA;AACF,CAAgC,KAAA;AAC9B,EAAM,MAAA,CAAC,UAAY,EAAA,aAAa,CAAI,GAAAA,cAAA;AAAA,IAClC,gBAAgB,MAAM,CAAA;AAAA,GACxB,CAAA;AACA,EAAA,MAAM,qBAAwB,GAAAC,iBAAA;AAAA,IAG5B,CAAC,GAAG,WAAgB,KAAA;AAClB,MAAA,aAAA,CAAc,WAAW,CAAA,CAAA;AACzB,MAAM,MAAA,WAAA,GAAc,OAAO,IAAK,CAAA,QAAA,CAAA;AAChC,MAAkB,iBAAA,CAAA;AAAA,QAChB,GAAG,WAAA;AAAA,QACH,UAAA,EAAY,WAAa,EAAA,KAAA,IAAS,kBAAmB,CAAA,KAAA;AAAA,OACtD,CAAA,CAAA;AAAA,KACH;AAAA,IACA,CAAC,MAAO,CAAA,IAAA,EAAM,iBAAiB,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,uCACGC,cACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,uBAAe,QAAW,EAAA,aAAA,EAAA,CAAA;AAAA,oBAC3BD,cAAA;AAAA,MAACE,sBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,WAAA,CAAA;AAAA,QACvB,iBAAmB,EAAA,qBAAA;AAAA,QACnB,QAAU,EAAA,UAAA;AAAA,QACV,MAAQ,EAAA,YAAA;AAAA,QACR,KAAM,EAAA,MAAA;AAAA,OAAA;AAAA,KACR;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEAC,oCAAA;AAAA,EACE,mCAAA;AAAA,EACA,iCAAA;AACF,CAAA;;;;"}

package/cjs/cell-renderers/background-cell/BackgroundKeyframes.css

@@ -0,0 +1,169 @@
+
+@keyframes vuubgup1 {
+    0% {
+      background-color: var(--vuu-color-green-50);
+      color: white;
+    }
+
+    30% {
+      color: white;
+    }  
+    33% {
+      color: var(--vuu-color-gray-80);
+    }  
+
+    100% {
+      background-color: transparent;
+      color: var(--vuu-color-gray-80);
+    }
+  }
+  
+  @keyframes vuubgup2 {
+    0% {
+      background-color: var(--vuu-color-green-50);
+      color: white;
+    }
+
+    30% {
+      color: white;
+    }  
+    33% {
+      color: var(--vuu-color-gray-80);
+    }  
+
+    100% {
+      background-color: transparent;
+      color: var(--vuu-color-gray-80);
+    }
+  }
+  
+  @keyframes vuubgdown1 {
+    0% {
+      background-color: var(--vuu-color-red-50);
+      color: white;
+    }
+    30% {
+      color: white;
+    }  
+    33% {
+      color: var(--vuu-color-gray-80);
+    }  
+    100% {
+      background-color: transparent;
+      color: var(--vuu-color-gray-80);
+    }
+  }
+  
+  @keyframes vuubgdown2 {
+    0% {
+      background-color: var(--vuu-color-red-50);
+      color: white;
+    }
+    30% {
+      color: white;
+    }  
+    33% {
+      color: var(--vuu-color-gray-80);
+    }  
+    100% {
+      background-color: transparent;
+      color: var(--vuu-color-gray-80);
+    }
+  }
+  
+  @keyframes vuuarrowup1 {
+    from {
+      color: var(--salt-differential-positive-foreground);
+    }
+    to {
+      color: transparent;
+    }
+  }
+  
+  @keyframes vuuarrowup2 {
+    from {
+      color: var(--salt-differential-positive-foreground);
+    }
+    to {
+      color: transparent;
+    }
+  }
+  
+  @keyframes vuuarrowdown1 {
+    from {
+      color: var(--salt-differential-negative-foreground);
+    }
+    to {
+      color: transparent;
+    }
+  }
+  
+  @keyframes vuuarrowdown2 {
+    from {
+      color: var(--salt-differential-negative-foreground);
+    }
+    to {
+      color: transparent;
+    }
+  }
+  
+  @keyframes vuubgarrowup1 {
+    0% {
+      color: var(--salt-differential-positive-foreground);
+      background-color: var(--vuu-color-green-50);
+    }
+    20% {
+      color: var(--salt-differential-positive-foreground);
+      background-color: transparent;
+    }
+    100% {
+      color: transparent;
+      background-color: transparent;
+    }
+  }
+  
+  @keyframes vuubgarrowup2 {
+    0% {
+      color: var(--salt-differential-positive-foreground);
+      background-color: var(--vuu-color-green-50);
+    }
+    20% {
+      color: var(--salt-differential-positive-foreground);
+      background-color: transparent;
+    }
+    100% {
+      color: transparent;
+      background-color: transparent;
+    }
+  }
+  
+  @keyframes vuubgarrowdown1 {
+    0% {
+      color: var(--salt-differential-negative-foreground);
+      background-color: var(--vuu-color-red-50);
+    }
+    20% {
+      color: var(--salt-differential-negative-foreground);
+      background-color: transparent;
+    }
+    100% {
+      color: transparent;
+      background-color: transparent;
+    }
+  }
+  
+  @keyframes vuubgarrowdown2 {
+    0% {
+      color: var(--salt-differential-negative-foreground);
+      background-color: var(--vuu-color-red-50);
+    }
+    20% {
+      color: var(--salt-differential-negative-foreground);
+      background-color: transparent;
+    }
+    100% {
+      color: transparent;
+      background-color: transparent;
+    }
+  }
+  

package/cjs/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();
+  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/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>();\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,CAAA;AAIjD,SAAA,YAAA,CACd,GACA,EAAA,KAAA,EACA,MACA,EAAA;AACA,EAAA,MAAM,MAAMA,YAAc,EAAA,CAAA;AAC1B,EAAA,MAAM,CAAC,OAAS,EAAA,SAAA,EAAW,YAAY,aAAa,CAAA,GAClD,IAAI,OAAW,IAAA,aAAA,CAAA;AAEjB,EAAM,MAAA,EAAE,IAAM,EAAA,QAAA,EAAa,GAAA,MAAA,CAAA;AAC3B,EAAA,MAAM,WAAWC,yBAAiB,CAAA,QAAQ,CACtC,GAAA,QAAA,CAAS,YAAY,QACrB,GAAA,KAAA,CAAA,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,CAAA;AAEN,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,GAAA,CAAI,OAAU,GAAA,CAAC,GAAK,EAAA,KAAA,EAAO,QAAQ,SAAS,CAAA,CAAA;AAAA,GAC7C,CAAA,CAAA;AAED,EAAO,OAAA,SAAA,CAAA;AACT;;;;"}

package/cjs/cell-renderers/dropdown-cell/DropdownCell.css

@@ -0,0 +1,18 @@
+
+.vuuTableDropdownCell {
+    --vuu-icon-height: 15px;
+    --salt-focused-outlineStyle: none;
+
+    --saltButton-borderRadius: 4px;
+    font-weight: 500;
+
+    .vuuDropdownButton {
+        --saltButton-height: var(--vuu-table-embedded-control-height);
+    }
+}
+
+.vuuTableDropdownCell button:focus-visible {
+    --saltButton-borderColor: var(--salt-focused-outlineColor);
+    --saltButton-borderWidth: 2px;
+    padding-left: 7px;
+}

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

@@ -0,0 +1,56 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuDataReact = require('@vuu-ui/vuu-data-react');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var react = require('react');
+
+const classBase = "vuuTableDropdownCell";
+const openKeys = ["Enter", " "];
+const DropdownCell = react.memo(
+  function DropdownCell2({
+    column,
+    columnMap,
+    onCommit = vuuUiControls.WarnCommit,
+    row
+  }) {
+    const dataIdx = columnMap[column.name];
+    const dataValue = row[dataIdx];
+    const { values } = vuuDataReact.useLookupValues(column, dataValue);
+    const valueRef = react.useRef(null);
+    react.useMemo(() => {
+      valueRef.current = vuuDataReact.getSelectedOption(values, dataValue);
+    }, [dataValue, values]);
+    const handleSelectionChange = react.useCallback(
+      (evt, selectedOption) => {
+        if (selectedOption) {
+          onCommit(selectedOption.value).then((response) => {
+            if (response === true && evt) {
+              vuuUtils.dispatchCustomEvent(evt.target, "vuu-commit");
+            }
+          });
+        }
+      },
+      [onCommit]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      vuuUiControls.Dropdown,
+      {
+        className: classBase,
+        onSelectionChange: handleSelectionChange,
+        openKeys,
+        selected: valueRef.current,
+        source: values,
+        width: column.width - 17
+      }
+    );
+  },
+  vuuUtils.dataColumnAndKeyUnchanged
+);
+vuuUtils.registerComponent("dropdown-cell", DropdownCell, "cell-renderer", {
+  userCanAssign: false
+});
+
+exports.DropdownCell = DropdownCell;
+//# sourceMappingURL=DropdownCell.js.map

package/cjs/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 { getSelectedOption, 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  Dropdown,\n  DropdownOpenKey,\n  SingleSelectionHandler,\n  WarnCommit,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  dataColumnAndKeyUnchanged,\n  dispatchCustomEvent,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { memo, useCallback, useMemo, useRef } from \"react\";\n\nimport \"./DropdownCell.css\";\n\nconst classBase = \"vuuTableDropdownCell\";\n\nconst openKeys: DropdownOpenKey[] = [\"Enter\", \" \"];\n\nexport const DropdownCell = memo(function DropdownCell({\n  column,\n  columnMap,\n  onCommit = WarnCommit,\n  row,\n}: TableCellRendererProps) {\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 | null>(null);\n\n  useMemo(() => {\n    valueRef.current = getSelectedOption(values, dataValue);\n  }, [dataValue, values]);\n\n  const handleSelectionChange = useCallback<SingleSelectionHandler<ListOption>>(\n    (evt, selectedOption) => {\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        onCommit(selectedOption.value as VuuColumnDataType).then((response) => {\n          if (response === true && evt) {\n            dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n          }\n        });\n      }\n    },\n    [onCommit]\n  );\n\n  return (\n    <Dropdown<ListOption>\n      className={classBase}\n      onSelectionChange={handleSelectionChange}\n      openKeys={openKeys}\n      selected={valueRef.current}\n      source={values}\n      width={column.width - 17} // temp hack\n    />\n  );\n},\ndataColumnAndKeyUnchanged);\n\nregisterComponent(\"dropdown-cell\", DropdownCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":["memo","DropdownCell","WarnCommit","useLookupValues","useRef","useMemo","getSelectedOption","useCallback","dispatchCustomEvent","jsx","Dropdown","dataColumnAndKeyUnchanged","registerComponent"],"mappings":";;;;;;;;AAkBA,MAAM,SAAY,GAAA,sBAAA,CAAA;AAElB,MAAM,QAAA,GAA8B,CAAC,OAAA,EAAS,GAAG,CAAA,CAAA;AAE1C,MAAM,YAAe,GAAAA,UAAA;AAAA,EAAK,SAASC,aAAa,CAAA;AAAA,IACrD,MAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAAC,wBAAA;AAAA,IACX,GAAA;AAAA,GACyB,EAAA;AACzB,IAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACrC,IAAM,MAAA,SAAA,GAAY,IAAI,OAAO,CAAA,CAAA;AAC7B,IAAA,MAAM,EAAE,MAAA,EAAW,GAAAC,4BAAA,CAAgB,QAAQ,SAAS,CAAA,CAAA;AACpD,IAAM,MAAA,QAAA,GAAWC,aAA0B,IAAI,CAAA,CAAA;AAE/C,IAAAC,aAAA,CAAQ,MAAM;AACZ,MAAS,QAAA,CAAA,OAAA,GAAUC,8BAAkB,CAAA,MAAA,EAAQ,SAAS,CAAA,CAAA;AAAA,KACrD,EAAA,CAAC,SAAW,EAAA,MAAM,CAAC,CAAA,CAAA;AAEtB,IAAA,MAAM,qBAAwB,GAAAC,iBAAA;AAAA,MAC5B,CAAC,KAAK,cAAmB,KAAA;AACvB,QAAA,IAAI,cAAgB,EAAA;AAKlB,UAAA,QAAA,CAAS,cAAe,CAAA,KAA0B,CAAE,CAAA,IAAA,CAAK,CAAC,QAAa,KAAA;AACrE,YAAI,IAAA,QAAA,KAAa,QAAQ,GAAK,EAAA;AAC5B,cAAoBC,4BAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA,CAAA;AAAA,aAC7D;AAAA,WACD,CAAA,CAAA;AAAA,SACH;AAAA,OACF;AAAA,MACA,CAAC,QAAQ,CAAA;AAAA,KACX,CAAA;AAEA,IACE,uBAAAC,cAAA;AAAA,MAACC,sBAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,SAAA;AAAA,QACX,iBAAmB,EAAA,qBAAA;AAAA,QACnB,QAAA;AAAA,QACA,UAAU,QAAS,CAAA,OAAA;AAAA,QACnB,MAAQ,EAAA,MAAA;AAAA,QACR,KAAA,EAAO,OAAO,KAAQ,GAAA,EAAA;AAAA,OAAA;AAAA,KACxB,CAAA;AAAA,GAEJ;AAAA,EACAC,kCAAA;AAAyB,EAAA;AAEzBC,0BAAkB,CAAA,eAAA,EAAiB,cAAc,eAAiB,EAAA;AAAA,EAChE,aAAe,EAAA,KAAA;AACjB,CAAC,CAAA;;;;"}

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

@@ -0,0 +1,26 @@
+'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,
+    columnMap,
+    row
+  }) {
+    const dataIdx = columnMap[column.name];
+    const dataValue = row[dataIdx];
+    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/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},\ndataAndColumnUnchanged);\n\nregisterComponent(\"lookup-cell\", LookupCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":["memo","LookupCell","useLookupValues","jsx","dataAndColumnUnchanged","registerComponent"],"mappings":";;;;;;;AAKO,MAAM,UAAa,GAAAA,UAAA;AAAA,EAAK,SAASC,WAAW,CAAA;AAAA,IACjD,MAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAA;AAAA,GACyB,EAAA;AACzB,IAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACrC,IAAM,MAAA,SAAA,GAAY,IAAI,OAAO,CAAA,CAAA;AAC7B,IAAA,MAAM,EAAE,YAAc,EAAA,KAAA,EAAU,GAAAC,4BAAA,CAAgB,QAAQ,SAAS,CAAA,CAAA;AACjE,IAAO,uBAAAC,cAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAA,KAAA,EAAO,KAAM,EAAA,CAAA,CAAA;AAAA,GAC7B;AAAA,EACAC,+BAAA;AAAsB,EAAA;AAEtBC,0BAAkB,CAAA,aAAA,EAAe,YAAY,eAAiB,EAAA;AAAA,EAC5D,aAAe,EAAA,KAAA;AACjB,CAAC,CAAA;;;;"}

package/cjs/cell-renderers/pct-progress-cell/PctProgressCell.css

@@ -0,0 +1,30 @@
+.vuuPctProgressCell {
+    --progress-bar-width: 2px;
+    position: relative;
+}
+
+.vuuPctProgressCell-zero {
+    --progress-bar-width: 0px;
+}
+.vuuPctProgressCell-complete {
+    --progress-bar-width: 0px;
+}
+
+.vuuPctProgressCell-progressBar {
+    background-color: var(--vuu-color-green-60-fade-30);
+    border-right: solid var(--progress-bar-width) var(--vuu-color-green-60);
+    display: inline-block;
+    height: 20px;
+    left: 0;
+    overflow: hidden;
+    position: absolute;
+    width: var(--progress-bar-pct, 0);
+}
+
+
+.vuuPctProgressCell-text {
+    display: inline-block;
+    text-align: left;
+    width: 80%;
+    z-index: 1;
+}