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

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

@@ -0,0 +1,56 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Dropdown } from '@vuu-ui/vuu-ui-controls';
+import { registerConfigurationEditor } from '@vuu-ui/vuu-utils';
+import { FormField, FormFieldLabel } from '@salt-ds/core';
+import { useState, useCallback } from '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] = 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,
+        source: flashOptions,
+        width: "100%"
+      }
+    )
+  ] });
+};
+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 { 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":[],"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,GAAA,QAAA;AAAA,IAClC,gBAAgB,MAAM,CAAA;AAAA,GACxB,CAAA;AACA,EAAA,MAAM,qBAAwB,GAAA,WAAA;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,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;AAAA,QACV,MAAQ,EAAA,YAAA;AAAA,QACR,KAAM,EAAA,MAAA;AAAA,OAAA;AAAA,KACR;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEA,2BAAA;AAAA,EACE,mCAAA;AAAA,EACA,iCAAA;AACF,CAAA;;;;"}

package/esm/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/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();
+  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>();\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,CAAA;AAIjD,SAAA,YAAA,CACd,GACA,EAAA,KAAA,EACA,MACA,EAAA;AACA,EAAA,MAAM,MAAM,MAAc,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,WAAW,gBAAiB,CAAA,QAAQ,CACtC,GAAA,QAAA,CAAS,YAAY,QACrB,GAAA,KAAA,CAAA,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,CAAA;AAEN,EAAA,SAAA,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/esm/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/esm/cell-renderers/dropdown-cell/DropdownCell.js

@@ -0,0 +1,54 @@
+import { jsx } from 'react/jsx-runtime';
+import { useLookupValues, getSelectedOption } from '@vuu-ui/vuu-data-react';
+import { Dropdown, WarnCommit } from '@vuu-ui/vuu-ui-controls';
+import { dispatchCustomEvent, dataColumnAndKeyUnchanged, registerComponent } from '@vuu-ui/vuu-utils';
+import { memo, useRef, useMemo, useCallback } from 'react';
+
+const classBase = "vuuTableDropdownCell";
+const openKeys = ["Enter", " "];
+const DropdownCell = memo(
+  function DropdownCell2({
+    column,
+    columnMap,
+    onCommit = WarnCommit,
+    row
+  }) {
+    const dataIdx = columnMap[column.name];
+    const dataValue = row[dataIdx];
+    const { values } = useLookupValues(column, dataValue);
+    const valueRef = useRef(null);
+    useMemo(() => {
+      valueRef.current = getSelectedOption(values, dataValue);
+    }, [dataValue, values]);
+    const handleSelectionChange = useCallback(
+      (evt, selectedOption) => {
+        if (selectedOption) {
+          onCommit(selectedOption.value).then((response) => {
+            if (response === true && evt) {
+              dispatchCustomEvent(evt.target, "vuu-commit");
+            }
+          });
+        }
+      },
+      [onCommit]
+    );
+    return /* @__PURE__ */ jsx(
+      Dropdown,
+      {
+        className: classBase,
+        onSelectionChange: handleSelectionChange,
+        openKeys,
+        selected: valueRef.current,
+        source: values,
+        width: column.width - 17
+      }
+    );
+  },
+  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 { 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":["DropdownCell"],"mappings":";;;;;;AAkBA,MAAM,SAAY,GAAA,sBAAA,CAAA;AAElB,MAAM,QAAA,GAA8B,CAAC,OAAA,EAAS,GAAG,CAAA,CAAA;AAE1C,MAAM,YAAe,GAAA,IAAA;AAAA,EAAK,SAASA,aAAa,CAAA;AAAA,IACrD,MAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,UAAA;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,GAAA,eAAA,CAAgB,QAAQ,SAAS,CAAA,CAAA;AACpD,IAAM,MAAA,QAAA,GAAW,OAA0B,IAAI,CAAA,CAAA;AAE/C,IAAA,OAAA,CAAQ,MAAM;AACZ,MAAS,QAAA,CAAA,OAAA,GAAU,iBAAkB,CAAA,MAAA,EAAQ,SAAS,CAAA,CAAA;AAAA,KACrD,EAAA,CAAC,SAAW,EAAA,MAAM,CAAC,CAAA,CAAA;AAEtB,IAAA,MAAM,qBAAwB,GAAA,WAAA;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,cAAoB,mBAAA,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,uBAAA,GAAA;AAAA,MAAC,QAAA;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,EACA,yBAAA;AAAyB,EAAA;AAEzB,iBAAkB,CAAA,eAAA,EAAiB,cAAc,eAAiB,EAAA;AAAA,EAChE,aAAe,EAAA,KAAA;AACjB,CAAC,CAAA;;;;"}

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

@@ -0,0 +1,24 @@
+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},\ndataAndColumnUnchanged);\n\nregisterComponent(\"lookup-cell\", LookupCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":["LookupCell"],"mappings":";;;;;AAKO,MAAM,UAAa,GAAA,IAAA;AAAA,EAAK,SAASA,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,GAAA,eAAA,CAAgB,QAAQ,SAAS,CAAA,CAAA;AACjE,IAAO,uBAAA,GAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAA,KAAA,EAAO,KAAM,EAAA,CAAA,CAAA;AAAA,GAC7B;AAAA,EACA,sBAAA;AAAsB,EAAA;AAEtB,iBAAkB,CAAA,aAAA,EAAe,YAAY,eAAiB,EAAA;AAAA,EAC5D,aAAe,EAAA,KAAA;AACjB,CAAC,CAAA;;;;"}

package/esm/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;
+}

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

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { registerComponent } from '@vuu-ui/vuu-utils';
+import cx from 'clsx';
+
+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 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 { CSSProperties } from \"react\";\n\nimport \"./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 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":";;;;AAOA,MAAM,SAAY,GAAA,oBAAA,CAAA;AAElB,MAAM,kBAAA,GAAqB,CAAC,KAAkB,KAAA;AAC5C,EAAI,IAAA,KAAA,IAAS,CAAK,IAAA,KAAA,IAAS,CAAG,EAAA;AAC5B,IAAA,OAAO,KAAQ,GAAA,GAAA,CAAA;AAAA,GACjB,MAAA,IAAW,QAAQ,CAAG,EAAA;AACpB,IAAO,OAAA,CAAA,CAAA;AAAA,GACT,MAAA,IAAW,QAAQ,CAAG,EAAA;AACpB,IAAO,OAAA,GAAA,CAAA;AAAA,GACF,MAAA;AACL,IAAO,OAAA,CAAA,CAAA;AAAA,GACT;AACF,CAAA,CAAA;AAEO,MAAM,kBAAkB,CAAC,EAAE,MAAQ,EAAA,SAAA,EAAW,KAA0B,KAAA;AAC7E,EAAA,MAAM,KAAQ,GAAA,GAAA,CAAI,SAAU,CAAA,MAAA,CAAO,IAAI,CAAC,CAAA,CAAA;AACxC,EAAM,MAAA,eAAA,GAAkB,mBAAmB,KAAK,CAAA,CAAA;AAChD,EAAA,MAAM,SAAY,GAAA,EAAA,CAAG,SAAW,EAAA,EAAE,CAAA,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,GAAA;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,EAAA;AAAA,WAAA;AAAA,SACvD;AAAA,4BACC,MAAK,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA,EAAU,aAAG,eAAgB,CAAA,OAAA;AAAA,UACxD,CAAA;AAAA,SACD,CAAK,EAAA,CAAA,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACR,CAAA;AAEJ,EAAA;AAEA,iBAAkB,CAAA,kBAAA,EAAoB,iBAAiB,eAAiB,EAAA;AAAA,EACtE,WAAa,EAAA,sBAAA;AAAA,EACb,KAAO,EAAA,sBAAA;AAAA,EACP,cAAgB,EAAA,QAAA;AAClB,CAAC,CAAA;;;;"}

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

@@ -0,0 +1,39 @@
+.vuuProgressCell {
+   align-items: center;
+   display: flex;
+}
+
+.vuuProgressCell-track {
+    display: inline-block;
+    flex: auto 1 1;
+    height: 4px;
+    overflow: hidden;
+    position: relative;
+}
+
+.vuuProgressCell-bg {
+    background-color: var(--salt-measured-background);
+    display: inline-block;
+    height: 2px;
+    left: 0;
+    position: absolute;
+    top: 1px;
+    width: 100%;
+}
+
+
+.vuuProgressCell-bar {
+    background-color: var(--salt-measured-fill);
+    display: inline-block;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top:0;
+    transform: translateX(var(--progress-bar-pct, -100%));
+    width: 100%;
+}
+
+.vuuProgressCell-text {
+    flex: 35px 0 0;
+    text-align: right;
+}

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

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { registerComponent, isTypeDescriptor, isColumnTypeRenderer, isValidNumber } from '@vuu-ui/vuu-utils';
+import cx from 'clsx';
+
+const classBase = "vuuProgressCell";
+const ProgressCell = ({ column, columnMap, row }) => {
+  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 { CSSProperties } from \"react\";\n\nimport \"./ProgressCell.css\";\n\nconst classBase = \"vuuProgressCell\";\n\nconst ProgressCell = ({ column, columnMap, row }: TableCellProps) => {\n  //TODO what about click handling\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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"}

package/esm/column-expression-input/ColumnExpressionInput.css

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