@vuu-ui/vuu-table-extras 0.0.26

package/cjs/table-settings/TableSettingsPanel.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var tableSettingsPanelCss = ".vuuTableSettingsPanel {\n    --vuu-svg-text-strikethrough: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 24\"><path d=\"M28.3333 9.33334C28.8867 9.33334 29.3333 8.88668 29.3333 8.33334C29.3333 7.78001 28.8867 7.33334 28.3333 7.33334H20.26L22.26 9.33334H23.48L23.1133 10.1867L24.5067 11.58L25.4733 9.33334H28.3333ZM27.6267 16.5867L18.7467 7.70668C18.4867 7.44668 18.0667 7.44668 17.8067 7.70668C17.5467 7.96668 17.5467 8.38668 17.8067 8.64668L21.98 12.82L20.88 15.38C20.62 15.9933 21.0667 16.6667 21.7267 16.6667C22.0933 16.6667 22.4267 16.4467 22.5733 16.1067L23.38 14.22L26.68 17.52C26.94 17.78 27.36 17.78 27.62 17.52C27.8867 17.2667 27.8867 16.8467 27.6267 16.5867Z\"/></svg>');\n    --vuu-svg-text-Tt: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 24\"><path d=\"M17.6667 7.66666C17.6667 8.21999 18.1133 8.66666 18.6667 8.66666H21V15.6667C21 16.22 21.4467 16.6667 22 16.6667C22.5533 16.6667 23 16.22 23 15.6667V8.66666H25.3333C25.8867 8.66666 26.3333 8.21999 26.3333 7.66666C26.3333 7.11332 25.8867 6.66666 25.3333 6.66666H18.6667C18.1133 6.66666 17.6667 7.11332 17.6667 7.66666ZM29.3333 9.99999H25.3333C24.78 9.99999 24.3333 10.4467 24.3333 11C24.3333 11.5533 24.78 12 25.3333 12H26.3333V15.6667C26.3333 16.22 26.78 16.6667 27.3333 16.6667C27.8867 16.6667 28.3333 16.22 28.3333 15.6667V12H29.3333C29.8867 12 30.3333 11.5533 30.3333 11C30.3333 10.4467 29.8867 9.99999 29.3333 9.99999Z\" /></svg>');\n    --vuu-svg-text-T: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 24\"><path d=\"M19.3333 7.66666C19.3333 8.21999 19.78 8.66666 20.3333 8.66666H23V15.6667C23 16.22 23.4467 16.6667 24 16.6667C24.5533 16.6667 25 16.22 25 15.6667V8.66666H27.6667C28.22 8.66666 28.6667 8.21999 28.6667 7.66666C28.6667 7.11332 28.22 6.66666 27.6667 6.66666H20.3333C19.78 6.66666 19.3333 7.11332 19.3333 7.66666Z\"/></svg>');\n    --vuu-svg-stripes: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><rect x=\"2\" y=\"2\" width=\"12\" height=\"2\" rx=\"0.3\"/><rect x=\"2\" y=\"5\" width=\"12\" height=\"2\" rx=\"0.3\"/><rect x=\"2\" y=\"8\" width=\"12\" height=\"2\" rx=\"0.3\"/><rect x=\"2\" y=\"11\" width=\"12\" height=\"2\" rx=\"0.3\"/></svg>');\n    --vuu-svg-row-lines: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><rect x=\"2\" y=\"3\" width=\"12\" height=\"1\" rx=\"0.3\" /><rect x=\"2\" y=\"6\" width=\"12\" height=\"1\" rx=\"0.3\" /><rect x=\"2\" y=\"9\" width=\"12\" height=\"1\" rx=\"0.3\" /><rect x=\"2\" y=\"12\" width=\"12\" height=\"1\" rx=\"0.3\"/></svg>');\n    --vuu-svg-col-lines: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><rect x=\"3\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 3 14)\"/><rect x=\"6\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 6 14)\"/><rect x=\"9\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 9 14)\"/><rect x=\"12\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 12 14)\"/></svg>');\n\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    height: 100%;\n    max-width: 254px;\n    padding: 24px 2px 0 2px;\n}\n\n\n.vuuTableSettingsPanel [data-icon=\"text-strikethrough\"]{\n    --vuu-icon-svg: var(--vuu-svg-text-strikethrough);\n}\n.vuuTableSettingsPanel [data-icon=\"text-Tt\"]{\n    --vuu-icon-svg: var(--vuu-svg-text-Tt);\n}\n.vuuTableSettingsPanel [data-icon=\"text-T\"]{\n    --vuu-icon-svg: var(--vuu-svg-text-T);\n}\n.vuuTableSettingsPanel [data-icon=\"col-lines\"]{\n    --vuu-icon-svg: var(--vuu-svg-col-lines);\n}\n.vuuTableSettingsPanel [data-icon=\"row-lines\"]{\n    --vuu-icon-svg: var(--vuu-svg-row-lines);\n}\n.vuuTableSettingsPanel [data-icon=\"row-striping\"]{\n    --vuu-icon-svg: var(--vuu-svg-stripes);\n}\n\n.vuuTableSettingsPanel-header {\n    border-top: solid 2px var(--vuu-color-gray-30);\n    font-size: 14px;\n    font-weight: 600;\n    padding-top: 24px;\n}\n\n.vuuTableSettingsPanel .vuuColumnList {\n    flex-grow: 1;\n    flex-shrink:  1;\n    flex-basis: 0;\n}\n\n.vuuTableSettingsPanel-calculatedButtonbar {\n    --vuu-icon-size: 16px;\n    --saltButton-height: 24px;\n    --saltButton-width: 24px;\n    align-items: center;\n    display: flex;\n    flex: 0 0 32px;\n    gap: 12px;\n}\n\n\n\n\n\n\n";
+
+module.exports = tableSettingsPanelCss;
+//# sourceMappingURL=TableSettingsPanel.css.js.map

package/cjs/table-settings/TableSettingsPanel.css.js.map

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

package/cjs/table-settings/TableSettingsPanel.js

@@ -0,0 +1,123 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var ColumnList = require('../column-list/ColumnList.js');
+var useTableSettings = require('./useTableSettings.js');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var TableSettingsPanel$1 = require('./TableSettingsPanel.css.js');
+
+const classBase = "vuuTableSettingsPanel";
+const TableSettingsPanel = ({
+  allowColumnLabelCase = true,
+  allowColumnDefaultWidth = true,
+  allowGridRowStyling = true,
+  availableColumns,
+  onAddCalculatedColumn,
+  onConfigChange,
+  onDataSourceConfigChange,
+  onNavigateToColumn,
+  tableConfig: tableConfigProp
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-table-settings-panel",
+    css: TableSettingsPanel$1,
+    window: targetWindow
+  });
+  const {
+    columnItems,
+    columnLabelsValue,
+    onChangeColumnLabels,
+    onChangeTableAttribute,
+    onColumnChange,
+    onCommitColumnWidth,
+    onMoveListItem,
+    tableConfig
+  } = useTableSettings.useTableSettings({
+    availableColumns,
+    onConfigChange,
+    onDataSourceConfigChange,
+    tableConfig: tableConfigProp
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classBase, children: [
+    allowColumnLabelCase || allowColumnDefaultWidth || allowGridRowStyling ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-header`, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Column Settings" }) }) : null,
+    allowColumnDefaultWidth ? /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Column Width" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        vuuUiControls.VuuInput,
+        {
+          className: "vuuInput",
+          "data-embedded": true,
+          onCommit: onCommitColumnWidth
+        }
+      )
+    ] }) : null,
+    allowColumnLabelCase ? /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Column Labels" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        core.ToggleButtonGroup,
+        {
+          className: "vuuToggleButtonGroup",
+          onChange: onChangeColumnLabels,
+          value: columnLabelsValue,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { className: "vuuIconToggleButton", value: 0, children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "text-strikethrough", size: 48 }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { className: "vuuIconToggleButton", value: 1, children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "text-Tt", size: 48 }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { className: "vuuIconToggleButton", value: 2, children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "text-T", size: 48 }) })
+          ]
+        }
+      )
+    ] }) : null,
+    allowGridRowStyling ? /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Grid separators" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "saltToggleButtonGroup vuuStateButtonGroup saltToggleButtonGroup-horizontal", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          core.ToggleButton,
+          {
+            selected: tableConfig.zebraStripes ?? false,
+            onChange: onChangeTableAttribute,
+            value: "zebraStripes",
+            children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "row-striping", size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          core.ToggleButton,
+          {
+            selected: tableConfig.rowSeparators ?? false,
+            onChange: onChangeTableAttribute,
+            value: "rowSeparators",
+            children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "row-lines", size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          core.ToggleButton,
+          {
+            selected: tableConfig.columnSeparators ?? false,
+            onChange: onChangeTableAttribute,
+            value: "columnSeparators",
+            children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "col-lines", size: 16 })
+          }
+        )
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ColumnList.ColumnList,
+      {
+        columnItems,
+        onChange: onColumnChange,
+        onMoveListItem,
+        onNavigateToColumn
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-calculatedButtonbar`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.Button, { "data-icon": "plus", onClick: onAddCalculatedColumn }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-calculatedLabel`, children: "Add calculated column" })
+    ] })
+  ] });
+};
+
+exports.TableSettingsPanel = TableSettingsPanel;
+//# sourceMappingURL=TableSettingsPanel.js.map

package/cjs/table-settings/TableSettingsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSettingsPanel.js","sources":["../../src/table-settings/TableSettingsPanel.tsx"],"sourcesContent":["import {\n  Button,\n  FormField,\n  FormFieldLabel,\n  ToggleButton,\n  ToggleButtonGroup,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { TableSettingsProps } from \"@vuu-ui/vuu-table-types\";\nimport { ColumnList } from \"../column-list\";\nimport { useTableSettings } from \"./useTableSettings\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport { VuuInput } from \"@vuu-ui/vuu-ui-controls\";\n\nimport tableSettingsPanelCss from \"./TableSettingsPanel.css\";\n\nconst classBase = \"vuuTableSettingsPanel\";\n\n/**\n  The TableSettingsPanel assumes 'ownership' of the tableSettings.\n  It updates the settings in state locally and notifies caller of\n  every change via onChange callback\n */\nexport const TableSettingsPanel = ({\n  allowColumnLabelCase = true,\n  allowColumnDefaultWidth = true,\n  allowGridRowStyling = true,\n  availableColumns,\n  onAddCalculatedColumn,\n  onConfigChange,\n  onDataSourceConfigChange,\n  onNavigateToColumn,\n  tableConfig: tableConfigProp,\n}: TableSettingsProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-settings-panel\",\n    css: tableSettingsPanelCss,\n    window: targetWindow,\n  });\n\n  const {\n    columnItems,\n    columnLabelsValue,\n    onChangeColumnLabels,\n    onChangeTableAttribute,\n    onColumnChange,\n    onCommitColumnWidth,\n    onMoveListItem,\n    tableConfig,\n  } = useTableSettings({\n    availableColumns,\n    onConfigChange,\n    onDataSourceConfigChange,\n    tableConfig: tableConfigProp,\n  });\n\n  return (\n    <div className={classBase}>\n      {allowColumnLabelCase ||\n      allowColumnDefaultWidth ||\n      allowGridRowStyling ? (\n        <div className={`${classBase}-header`}>\n          <span>Column Settings</span>\n        </div>\n      ) : null}\n\n      {allowColumnDefaultWidth ? (\n        <FormField>\n          <FormFieldLabel>Column Width</FormFieldLabel>\n          <VuuInput\n            className=\"vuuInput\"\n            data-embedded\n            onCommit={onCommitColumnWidth}\n          />\n        </FormField>\n      ) : null}\n\n      {allowColumnLabelCase ? (\n        <FormField>\n          <FormFieldLabel>Column Labels</FormFieldLabel>\n          <ToggleButtonGroup\n            className=\"vuuToggleButtonGroup\"\n            onChange={onChangeColumnLabels}\n            value={columnLabelsValue}\n          >\n            <ToggleButton className=\"vuuIconToggleButton\" value={0}>\n              <Icon name=\"text-strikethrough\" size={48} />\n            </ToggleButton>\n            <ToggleButton className=\"vuuIconToggleButton\" value={1}>\n              <Icon name=\"text-Tt\" size={48} />\n            </ToggleButton>\n            <ToggleButton className=\"vuuIconToggleButton\" value={2}>\n              <Icon name=\"text-T\" size={48} />\n            </ToggleButton>\n          </ToggleButtonGroup>\n        </FormField>\n      ) : null}\n\n      {allowGridRowStyling ? (\n        <FormField>\n          <FormFieldLabel>Grid separators</FormFieldLabel>\n          <div className=\"saltToggleButtonGroup vuuStateButtonGroup saltToggleButtonGroup-horizontal\">\n            <ToggleButton\n              selected={tableConfig.zebraStripes ?? false}\n              onChange={onChangeTableAttribute}\n              value=\"zebraStripes\"\n            >\n              <Icon name=\"row-striping\" size={16} />\n            </ToggleButton>\n            <ToggleButton\n              selected={tableConfig.rowSeparators ?? false}\n              onChange={onChangeTableAttribute}\n              value=\"rowSeparators\"\n            >\n              <Icon name=\"row-lines\" size={16} />\n            </ToggleButton>\n            <ToggleButton\n              selected={tableConfig.columnSeparators ?? false}\n              onChange={onChangeTableAttribute}\n              value=\"columnSeparators\"\n            >\n              <Icon name=\"col-lines\" size={16} />\n            </ToggleButton>\n          </div>\n        </FormField>\n      ) : null}\n\n      <ColumnList\n        columnItems={columnItems}\n        onChange={onColumnChange}\n        onMoveListItem={onMoveListItem}\n        onNavigateToColumn={onNavigateToColumn}\n      />\n\n      <div className={`${classBase}-calculatedButtonbar`}>\n        <Button data-icon=\"plus\" onClick={onAddCalculatedColumn} />\n        <span className={`${classBase}-calculatedLabel`}>\n          Add calculated column\n        </span>\n      </div>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","tableSettingsPanelCss","useTableSettings","jsxs","jsx","FormField","FormFieldLabel","VuuInput","ToggleButtonGroup","ToggleButton","Icon","ColumnList","Button"],"mappings":"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"}

package/cjs/table-settings/useTableSettings.js

@@ -0,0 +1,182 @@
+'use strict';
+
+var vuuTable = require('@vuu-ui/vuu-table');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var react = require('react');
+
+const sortOrderFromAvailableColumns = (availableColumns, columns) => {
+  const sortedColumns = [];
+  for (const { name } of availableColumns) {
+    const column = columns.find((col) => col.name === name);
+    if (column) {
+      sortedColumns.push(column);
+    }
+  }
+  return sortedColumns;
+};
+const buildColumnItems = (availableColumns, configuredColumns) => {
+  return availableColumns.map(({ name, serverDataType }) => {
+    const configuredColumn = configuredColumns.find((col) => col.name === name);
+    return {
+      hidden: configuredColumn?.hidden,
+      isCalculated: vuuUtils.isCalculatedColumn(name),
+      label: configuredColumn?.label,
+      name,
+      serverDataType,
+      subscribed: configuredColumn !== void 0
+    };
+  });
+};
+const useTableSettings = ({
+  availableColumns: availableColumnsProp,
+  onConfigChange,
+  onDataSourceConfigChange,
+  tableConfig: tableConfigProp
+}) => {
+  const [{ availableColumns, tableConfig }, setColumnState] = react.useState({
+    availableColumns: availableColumnsProp,
+    tableConfig: tableConfigProp
+  });
+  const columnItems = react.useMemo(
+    () => buildColumnItems(availableColumns, tableConfig.columns),
+    [availableColumns, tableConfig.columns]
+  );
+  const handleMoveListItem = react.useCallback(
+    (fromIndex, toIndex) => {
+      setColumnState((state) => {
+        const newAvailableColumns = vuuUtils.moveItem(
+          state.availableColumns,
+          fromIndex,
+          toIndex
+        );
+        const newColumns = sortOrderFromAvailableColumns(
+          newAvailableColumns,
+          tableConfig.columns
+        );
+        return {
+          availableColumns: newAvailableColumns,
+          tableConfig: {
+            ...state.tableConfig,
+            columns: newColumns
+          }
+        };
+      });
+    },
+    [tableConfig.columns]
+  );
+  const handleColumnChange = react.useCallback(
+    (name, property, value) => {
+      const columnItem = columnItems.find((col) => col.name === name);
+      if (property === "subscribed") {
+        if (columnItem?.subscribed) {
+          const subscribedColumns = tableConfig.columns.filter((col) => col.name !== name).map((col) => col.name);
+          setColumnState((state) => ({
+            ...state,
+            tableConfig: {
+              ...tableConfig,
+              columns: tableConfig.columns.filter(
+                vuuUtils.subscribedOnly(subscribedColumns)
+              )
+            }
+          }));
+          onDataSourceConfigChange({
+            columns: subscribedColumns
+          });
+        } else {
+          const newConfig = {
+            ...tableConfig,
+            columns: vuuUtils.addColumnToSubscribedColumns(
+              tableConfig.columns,
+              availableColumns,
+              name
+            )
+          };
+          setColumnState((state) => ({
+            ...state,
+            tableConfig: newConfig
+          }));
+          const subscribedColumns = newConfig.columns.map((col) => col.name);
+          onDataSourceConfigChange({
+            columns: subscribedColumns
+          });
+        }
+      } else if (columnItem?.subscribed) {
+        const column = tableConfig.columns.find((col) => col.name === name);
+        if (column) {
+          const newConfig = vuuTable.updateTableConfig(tableConfig, {
+            type: "column-prop",
+            property,
+            column,
+            value
+          });
+          setColumnState((state) => ({
+            ...state,
+            tableConfig: newConfig
+          }));
+        }
+      }
+    },
+    [availableColumns, columnItems, onDataSourceConfigChange, tableConfig]
+  );
+  const handleChangeColumnLabels = react.useCallback((evt) => {
+    const button = vuuUtils.queryClosest(evt.target, "button");
+    if (button) {
+      const value = parseInt(button.value);
+      const columnFormatHeader = value === 0 ? void 0 : value === 1 ? "capitalize" : "uppercase";
+      setColumnState((state) => ({
+        ...state,
+        tableConfig: {
+          ...state.tableConfig,
+          columnFormatHeader
+        }
+      }));
+    }
+  }, []);
+  const handleChangeTableAttribute = react.useCallback(
+    (evt) => {
+      const button = vuuUtils.queryClosest(evt.target, "button");
+      if (button) {
+        const { ariaPressed, value } = button;
+        console.log({ ariaPressed, value, button });
+        setColumnState((state) => ({
+          ...state,
+          tableConfig: {
+            ...state.tableConfig,
+            [value]: ariaPressed !== "true"
+          }
+        }));
+      }
+    },
+    []
+  );
+  const handleCommitColumnWidth = react.useCallback((_, value) => {
+    const columnDefaultWidth = parseInt(value);
+    if (!isNaN(columnDefaultWidth)) {
+      setColumnState((state) => ({
+        ...state,
+        tableConfig: {
+          ...state.tableConfig,
+          columnDefaultWidth
+        }
+      }));
+    }
+    console.log({ value });
+  }, []);
+  vuuUtils.useLayoutEffectSkipFirst(() => {
+    onConfigChange?.(tableConfig);
+  }, [onConfigChange, tableConfig]);
+  const columnLabelsValue = tableConfig.columnFormatHeader === void 0 ? 0 : tableConfig.columnFormatHeader === "capitalize" ? 1 : 2;
+  return {
+    columnItems,
+    columnLabelsValue,
+    onChangeColumnLabels: handleChangeColumnLabels,
+    onChangeTableAttribute: handleChangeTableAttribute,
+    onColumnChange: handleColumnChange,
+    onCommitColumnWidth: handleCommitColumnWidth,
+    onMoveListItem: handleMoveListItem,
+    tableConfig
+  };
+};
+
+exports.useTableSettings = useTableSettings;
+//# sourceMappingURL=useTableSettings.js.map

package/cjs/table-settings/useTableSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableSettings.js","sources":["../../src/table-settings/useTableSettings.ts"],"sourcesContent":["import { SchemaColumn } from \"@vuu-ui/vuu-data-types\";\nimport { updateTableConfig } from \"@vuu-ui/vuu-table\";\nimport {\n  ColumnDescriptor,\n  TableConfig,\n  TableSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n  addColumnToSubscribedColumns,\n  queryClosest,\n  isCalculatedColumn,\n  moveItem,\n  subscribedOnly,\n  useLayoutEffectSkipFirst,\n} from \"@vuu-ui/vuu-utils\";\nimport { Commithandler } from \"@vuu-ui/vuu-ui-controls/src\";\nimport {\n  MouseEvent,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { ColumnChangeHandler } from \"../column-list\";\n\nconst sortOrderFromAvailableColumns = (\n  availableColumns: SchemaColumn[],\n  columns: ColumnDescriptor[]\n) => {\n  const sortedColumns: ColumnDescriptor[] = [];\n  for (const { name } of availableColumns) {\n    const column = columns.find((col) => col.name === name);\n    if (column) {\n      sortedColumns.push(column);\n    }\n  }\n  return sortedColumns;\n};\n\nexport type ColumnItem = Pick<\n  ColumnDescriptor,\n  \"hidden\" | \"label\" | \"name\" | \"serverDataType\"\n> & {\n  isCalculated: boolean;\n  subscribed: boolean;\n};\n\nconst buildColumnItems = (\n  availableColumns: SchemaColumn[],\n  configuredColumns: ColumnDescriptor[]\n): ColumnItem[] => {\n  return availableColumns.map<ColumnItem>(({ name, serverDataType }) => {\n    const configuredColumn = configuredColumns.find((col) => col.name === name);\n    return {\n      hidden: configuredColumn?.hidden,\n      isCalculated: isCalculatedColumn(name),\n      label: configuredColumn?.label,\n      name,\n      serverDataType,\n      subscribed: configuredColumn !== undefined,\n    };\n  });\n};\n\ntype ColumnState = {\n  availableColumns: SchemaColumn[];\n  tableConfig: TableConfig;\n};\n\nexport const useTableSettings = ({\n  availableColumns: availableColumnsProp,\n  onConfigChange,\n  onDataSourceConfigChange,\n  tableConfig: tableConfigProp,\n}: Omit<TableSettingsProps, \"onAddCalculatedColumn\">) => {\n  const [{ availableColumns, tableConfig }, setColumnState] =\n    useState<ColumnState>({\n      availableColumns: availableColumnsProp,\n      tableConfig: tableConfigProp,\n    });\n\n  const columnItems = useMemo(\n    () => buildColumnItems(availableColumns, tableConfig.columns),\n    [availableColumns, tableConfig.columns]\n  );\n\n  const handleMoveListItem = useCallback(\n    (fromIndex: number, toIndex: number) => {\n      setColumnState((state) => {\n        const newAvailableColumns = moveItem(\n          state.availableColumns,\n          fromIndex,\n          toIndex\n        );\n        const newColumns = sortOrderFromAvailableColumns(\n          newAvailableColumns,\n          tableConfig.columns\n        );\n\n        return {\n          availableColumns: newAvailableColumns,\n          tableConfig: {\n            ...state.tableConfig,\n            columns: newColumns,\n          },\n        };\n      });\n    },\n    [tableConfig.columns]\n  );\n\n  const handleColumnChange = useCallback<ColumnChangeHandler>(\n    (name, property, value) => {\n      // to be applied immediately\n      const columnItem = columnItems.find((col) => col.name === name);\n      if (property === \"subscribed\") {\n        if (columnItem?.subscribed) {\n          const subscribedColumns = tableConfig.columns\n            .filter((col) => col.name !== name)\n            .map((col) => col.name);\n          setColumnState((state) => ({\n            ...state,\n            tableConfig: {\n              ...tableConfig,\n              columns: tableConfig.columns.filter(\n                subscribedOnly(subscribedColumns)\n              ),\n            },\n          }));\n          onDataSourceConfigChange({\n            columns: subscribedColumns,\n          });\n        } else {\n          const newConfig = {\n            ...tableConfig,\n            columns: addColumnToSubscribedColumns(\n              tableConfig.columns,\n              availableColumns,\n              name\n            ),\n          };\n          setColumnState((state) => ({\n            ...state,\n            tableConfig: newConfig,\n          }));\n\n          const subscribedColumns = newConfig.columns.map((col) => col.name);\n\n          onDataSourceConfigChange({\n            columns: subscribedColumns,\n          });\n        }\n      } else if (columnItem?.subscribed) {\n        const column = tableConfig.columns.find((col) => col.name === name);\n        if (column) {\n          const newConfig = updateTableConfig(tableConfig, {\n            type: \"column-prop\",\n            property,\n            column,\n            value,\n          });\n          setColumnState((state) => ({\n            ...state,\n            tableConfig: newConfig,\n          }));\n        }\n      }\n    },\n    [availableColumns, columnItems, onDataSourceConfigChange, tableConfig]\n  );\n\n  const handleChangeColumnLabels = useCallback((evt: SyntheticEvent) => {\n    const button = queryClosest<HTMLButtonElement>(evt.target, \"button\");\n    if (button) {\n      const value = parseInt(button.value);\n      const columnFormatHeader =\n        value === 0 ? undefined : value === 1 ? \"capitalize\" : \"uppercase\";\n      setColumnState((state) => ({\n        ...state,\n        tableConfig: {\n          ...state.tableConfig,\n          columnFormatHeader,\n        },\n      }));\n    }\n  }, []);\n\n  const handleChangeTableAttribute = useCallback(\n    (evt: MouseEvent<HTMLButtonElement>) => {\n      const button = queryClosest<HTMLButtonElement>(evt.target, \"button\");\n      if (button) {\n        const { ariaPressed, value } = button;\n        console.log({ ariaPressed, value, button });\n        setColumnState((state) => ({\n          ...state,\n          tableConfig: {\n            ...state.tableConfig,\n            [value]: ariaPressed !== \"true\",\n          },\n        }));\n      }\n    },\n    []\n  );\n\n  const handleCommitColumnWidth = useCallback<Commithandler>((_, value) => {\n    const columnDefaultWidth = parseInt(value);\n    if (!isNaN(columnDefaultWidth)) {\n      setColumnState((state) => ({\n        ...state,\n        tableConfig: {\n          ...state.tableConfig,\n          columnDefaultWidth,\n        },\n      }));\n    }\n    console.log({ value });\n  }, []);\n\n  useLayoutEffectSkipFirst(() => {\n    onConfigChange?.(tableConfig);\n  }, [onConfigChange, tableConfig]);\n\n  const columnLabelsValue =\n    tableConfig.columnFormatHeader === undefined\n      ? 0\n      : tableConfig.columnFormatHeader === \"capitalize\"\n      ? 1\n      : 2;\n\n  return {\n    columnItems,\n    columnLabelsValue,\n    onChangeColumnLabels: handleChangeColumnLabels,\n    onChangeTableAttribute: handleChangeTableAttribute,\n    onColumnChange: handleColumnChange,\n    onCommitColumnWidth: handleCommitColumnWidth,\n    onMoveListItem: handleMoveListItem,\n    tableConfig,\n  };\n};\n"],"names":["isCalculatedColumn","useState","useMemo","useCallback","moveItem","subscribedOnly","addColumnToSubscribedColumns","updateTableConfig","queryClosest","useLayoutEffectSkipFirst"],"mappings":"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"}

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

@@ -0,0 +1,22 @@
+import { registerComponent } from '@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";
+  }
+};
+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 { 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":[],"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;AAEA,iBAAA,CAAkB,UAAY,EAAA,aAAA,EAAe,qBAAuB,EAAA,EAAE,CAAA;;;;"}

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

@@ -0,0 +1,24 @@
+import { registerComponent } from '@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";
+  }
+};
+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 { 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":[],"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;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,77 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { dataAndColumnUnchanged, registerComponent, metadataKeys, isTypeDescriptor, UP1, UP2, DOWN1, DOWN2 } from '@vuu-ui/vuu-utils';
+import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+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 { 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 { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { memo } from \"react\";\nimport { useDirection } from \"./useDirection\";\n\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?: 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 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},\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":["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 { Dropdown } from '@vuu-ui/vuu-ui-controls';
+import { registerConfigurationEditor } from '@vuu-ui/vuu-utils';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { FormField, FormFieldLabel } from '@salt-ds/core';
+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
+  });
+  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 { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { FormField, FormFieldLabel } from \"@salt-ds/core\";\nimport { 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  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":";;;;;;;;;AAaA,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,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0CAAA;AAAA,IACR,GAAK,EAAA,oCAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,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.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