@vuu-ui/vuu-table-extras 0.8.43 → 0.8.45

package/cjs/column-settings/ColumnSettingsPanel.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var colunSettingsPanelCss = ".vuuColumnSettingsPanel {\n    --vuu-svg-align-left: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M9.33333 10H2.66667C2.3 10 2 10.3 2 10.6667C2 11.0333 2.3 11.3333 2.66667 11.3333H9.33333C9.7 11.3333 10 11.0333 10 10.6667C10 10.3 9.7 10 9.33333 10ZM9.33333 4.66667H2.66667C2.3 4.66667 2 4.96667 2 5.33333C2 5.7 2.3 6 2.66667 6H9.33333C9.7 6 10 5.7 10 5.33333C10 4.96667 9.7 4.66667 9.33333 4.66667ZM2.66667 8.66667H13.3333C13.7 8.66667 14 8.36667 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333H2.66667C2.3 7.33333 2 7.63333 2 8C2 8.36667 2.3 8.66667 2.66667 8.66667ZM2.66667 14H13.3333C13.7 14 14 13.7 14 13.3333C14 12.9667 13.7 12.6667 13.3333 12.6667H2.66667C2.3 12.6667 2 12.9667 2 13.3333C2 13.7 2.3 14 2.66667 14ZM2 2.66667C2 3.03333 2.3 3.33333 2.66667 3.33333H13.3333C13.7 3.33333 14 3.03333 14 2.66667C14 2.3 13.7 2 13.3333 2H2.66667C2.3 2 2 2.3 2 2.66667Z\" /></svg>');\n    --vuu-svg-align-right: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M2.66667 14H13.3333C13.7 14 14 13.7 14 13.3333C14 12.9667 13.7 12.6667 13.3333 12.6667H2.66667C2.3 12.6667 2 12.9667 2 13.3333C2 13.7 2.3 14 2.66667 14ZM6.66667 11.3333H13.3333C13.7 11.3333 14 11.0333 14 10.6667C14 10.3 13.7 10 13.3333 10H6.66667C6.3 10 6 10.3 6 10.6667C6 11.0333 6.3 11.3333 6.66667 11.3333ZM2.66667 8.66667H13.3333C13.7 8.66667 14 8.36667 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333H2.66667C2.3 7.33333 2 7.63333 2 8C2 8.36667 2.3 8.66667 2.66667 8.66667ZM6.66667 6H13.3333C13.7 6 14 5.7 14 5.33333C14 4.96667 13.7 4.66667 13.3333 4.66667H6.66667C6.3 4.66667 6 4.96667 6 5.33333C6 5.7 6.3 6 6.66667 6ZM2 2.66667C2 3.03333 2.3 3.33333 2.66667 3.33333H13.3333C13.7 3.33333 14 3.03333 14 2.66667C14 2.3 13.7 2 13.3333 2H2.66667C2.3 2 2 2.3 2 2.66667Z\" /></svg>');\n    --vuu-svg-pin-left: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M7.33333 9.86V8.66666H13.3333C13.7 8.66666 14 8.36666 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333L7.33333 7.33333V6.14C7.33333 5.84 6.97333 5.69333 6.76667 5.90666L4.90667 7.76666C4.77333 7.89999 4.77333 8.10666 4.90667 8.24L6.76667 10.1C6.97333 10.3067 7.33333 10.16 7.33333 9.86ZM2.66667 13.3333C3.03333 13.3333 3.33333 13.0333 3.33333 12.6667L3.33333 3.33333C3.33333 2.96666 3.03333 2.66666 2.66667 2.66666C2.3 2.66666 2 2.96666 2 3.33333L2 12.6667C2 13.0333 2.3 13.3333 2.66667 13.3333Z\" /></svg>');\n    --vuu-svg-pin-float: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M6 4.66667H4.66667V6H6V4.66667ZM6 7.33333H4.66667V8.66667H6V7.33333ZM6 2C5.26 2 4.66667 2.6 4.66667 3.33333H6V2ZM8.66667 10H7.33333V11.3333H8.66667V10ZM12.6667 2V3.33333H14C14 2.6 13.4 2 12.6667 2ZM8.66667 2H7.33333V3.33333H8.66667V2ZM6 11.3333V10H4.66667C4.66667 10.7333 5.26 11.3333 6 11.3333ZM12.6667 8.66667H14V7.33333H12.6667V8.66667ZM12.6667 6H14V4.66667H12.6667V6ZM12.6667 11.3333C13.4 11.3333 14 10.7333 14 10H12.6667V11.3333ZM2.66667 4.66667C2.3 4.66667 2 4.96667 2 5.33333V12.6667C2 13.4 2.6 14 3.33333 14H10.6667C11.0333 14 11.3333 13.7 11.3333 13.3333C11.3333 12.9667 11.0333 12.6667 10.6667 12.6667H4C3.63333 12.6667 3.33333 12.3667 3.33333 12V5.33333C3.33333 4.96667 3.03333 4.66667 2.66667 4.66667ZM10 3.33333H11.3333V2H10V3.33333ZM10 11.3333H11.3333V10H10V11.3333Z\" /></svg>');\n    --vuu-svg-pin-right: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M8.66667 6.14V7.33333H2.66667C2.3 7.33333 2 7.63333 2 8C2 8.36666 2.3 8.66666 2.66667 8.66666H8.66667V9.86C8.66667 10.16 9.02667 10.3067 9.23333 10.0933L11.0933 8.23333C11.2267 8.1 11.2267 7.89333 11.0933 7.76L9.23333 5.9C9.02667 5.69333 8.66667 5.84 8.66667 6.14ZM13.3333 13.3333C13.7 13.3333 14 13.0333 14 12.6667V3.33333C14 2.96666 13.7 2.66666 13.3333 2.66666C12.9667 2.66666 12.6667 2.96666 12.6667 3.33333V12.6667C12.6667 13.0333 12.9667 13.3333 13.3333 13.3333Z\"/></svg>');\n    --vuuDropdown-height: 24px;\n    --vuuDropdown-width: 100%;\n    \n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    height: 100%;\n    padding-top: 24px;\n}\n\n.vuuColumnSettingsPanel-header {\n  border-top: solid 2px var(--vuu-color-gray-30);\n  font-size: 14px;\n  font-weight: 600;\n  padding: 24px 2px 0 2px;\n}\n\n\n.vuuColumnSettingsPanel-buttonBar {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  margin-top: auto;\n}\n\n.vuuColumnSettingsPanel-buttonBar[data-align=\"right\"]{\n  gap: 6px;\n  justify-content: flex-end;\n}\n\n.vuuColumnSettingsPanel-buttonNavPrev {\n  --vuu-icon-left: 6px;\n  padding-left: 24px\n}\n\n.vuuColumnSettingsPanel-buttonNavNext {\n  --vuu-icon-left: calc(100% - 18px);\n  padding-right: 24px\n}\n\n\n\n[data-icon='align-left'] {\n    --vuu-icon-svg: var(--vuu-svg-align-left);\n  }\n\n  [data-icon='align-right'] {\n    --vuu-icon-svg: var(--vuu-svg-align-right);\n  }\n\n  [data-icon='pin-left'] {\n    --vuu-icon-svg: var(--vuu-svg-pin-left);\n  }\n  [data-icon='pin-float'] {\n    --vuu-icon-svg: var(--vuu-svg-pin-float);\n  }\n  [data-icon='pin-right'] {\n    --vuu-icon-svg: var(--vuu-svg-pin-right);\n  }\n\n  .vuuColumnSettingsPanel-editing .vuuColumnNameLabel-edit {\n    display: none;\n  }\n  \n\n\n  \n  \n  \n  \n  \n";
+
+module.exports = colunSettingsPanelCss;
+//# sourceMappingURL=ColumnSettingsPanel.css.js.map

package/cjs/column-settings/ColumnSettingsPanel.css.js.map

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

package/cjs/column-settings/ColumnSettingsPanel.js

@@ -4,12 +4,15 @@ 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 styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var cx = require('clsx');
 var ColumnExpressionPanel = require('../column-expression-panel/ColumnExpressionPanel.js');
 var ColumnFormattingPanel = require('../column-formatting-settings/ColumnFormattingPanel.js');
 require('react');
 var ColumnNameLabel = require('./ColumnNameLabel.js');
 var useColumnSettings = require('./useColumnSettings.js');
+var ColumnSettingsPanel$1 = require('./ColumnSettingsPanel.css.js');
 
 const classBase = "vuuColumnSettingsPanel";
 const getColumnLabel = (column) => {
@@ -28,6 +31,12 @@ const ColumnSettingsPanel = ({
   tableConfig,
   vuuTable
 }) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-column-settings-panel",
+    css: ColumnSettingsPanel$1,
+    window: targetWindow
+  });
   const isNewCalculatedColumn = columnProp.name === "::";
   const {
     availableRenderers,

package/cjs/column-settings/ColumnSettingsPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnSettingsPanel.js","sources":["../../src/column-settings/ColumnSettingsPanel.tsx"],"sourcesContent":["import { ColumnDescriptor, ColumnSettingsProps } from \"@vuu-ui/vuu-table-types\";\nimport { Icon, VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  getCalculatedColumnName,\n  getDefaultAlignment,\n  isCalculatedColumn,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  Button,\n  FormField,\n  FormFieldLabel,\n  ToggleButton,\n  ToggleButtonGroup,\n} from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { ColumnExpressionPanel } from \"../column-expression-panel\";\nimport { ColumnFormattingPanel } from \"../column-formatting-settings\";\nimport { ColumnNameLabel } from \"./ColumnNameLabel\";\nimport { useColumnSettings } from \"./useColumnSettings\";\n\nimport \"./ColumnSettingsPanel.css\";\n\nconst classBase = \"vuuColumnSettingsPanel\";\n\nconst getColumnLabel = (column: ColumnDescriptor) => {\n  const { name, label } = column;\n  if (isCalculatedColumn(name)) {\n    return label ?? getCalculatedColumnName(column);\n  } else {\n    return label ?? name;\n  }\n};\n\nexport const ColumnSettingsPanel = ({\n  column: columnProp,\n  onCancelCreateColumn,\n  onConfigChange,\n  onCreateCalculatedColumn,\n  tableConfig,\n  vuuTable,\n}: ColumnSettingsProps) => {\n  const isNewCalculatedColumn = columnProp.name === \"::\";\n  const {\n    availableRenderers,\n    editCalculatedColumn,\n    column,\n    navigateNextColumn,\n    navigatePrevColumn,\n    onCancel,\n    onChange,\n    onChangeCalculatedColumnName,\n    onChangeFormatting,\n    onChangeRendering,\n    onChangeServerDataType,\n    onChangeToggleButton,\n    onChangeType,\n    onEditCalculatedColumn,\n    onInputCommit,\n    onSave,\n  } = useColumnSettings({\n    column: columnProp,\n    onCancelCreateColumn,\n    onConfigChange,\n    onCreateCalculatedColumn,\n    tableConfig,\n  });\n\n  const {\n    serverDataType,\n    align = getDefaultAlignment(serverDataType),\n    pin,\n    width,\n  } = column;\n\n  return (\n    <div\n      className={cx(classBase, {\n        [`${classBase}-editing`]: editCalculatedColumn,\n      })}\n    >\n      <div className={`${classBase}-header`}>\n        <ColumnNameLabel column={column} onClick={onEditCalculatedColumn} />\n      </div>\n\n      {editCalculatedColumn ? (\n        <ColumnExpressionPanel\n          column={column}\n          onChangeName={onChangeCalculatedColumnName}\n          onChangeServerDataType={onChangeServerDataType}\n          tableConfig={tableConfig}\n          vuuTable={vuuTable}\n        />\n      ) : null}\n\n      <FormField data-field=\"column-label\">\n        <FormFieldLabel>Column Label</FormFieldLabel>\n        <VuuInput\n          className=\"vuuInput\"\n          data-embedded\n          onChange={onChange}\n          onCommit={onInputCommit}\n          value={getColumnLabel(column)}\n        />\n      </FormField>\n\n      <FormField data-field=\"column-width\">\n        <FormFieldLabel>Column Width</FormFieldLabel>\n        <VuuInput\n          className=\"vuuInput\"\n          data-embedded\n          onChange={onChange}\n          value={width}\n          onCommit={onInputCommit}\n        />\n      </FormField>\n      <FormField data-field=\"column-alignment\">\n        <FormFieldLabel>Alignment</FormFieldLabel>\n        <ToggleButtonGroup onChange={onChangeToggleButton} value={align}>\n          <ToggleButton value=\"left\">\n            <Icon name=\"align-left\" size={16} />\n          </ToggleButton>\n          <ToggleButton value=\"right\">\n            <Icon name=\"align-right\" size={16} />\n          </ToggleButton>\n        </ToggleButtonGroup>\n      </FormField>\n      <FormField data-field=\"column-pin\">\n        <FormFieldLabel>Pin Column</FormFieldLabel>\n        <ToggleButtonGroup onChange={onChangeToggleButton} value={pin ?? \"\"}>\n          <ToggleButton value=\"left\">\n            <Icon name=\"pin-left\" size={16} />\n          </ToggleButton>\n          <ToggleButton value=\"floating\">\n            <Icon name=\"pin-float\" size={16} />\n          </ToggleButton>\n          <ToggleButton value=\"right\">\n            <Icon name=\"pin-right\" size={16} />\n          </ToggleButton>\n          <ToggleButton value=\"\">\n            <Icon name=\"cross-circle\" size={16} />\n          </ToggleButton>\n        </ToggleButtonGroup>\n      </FormField>\n      <ColumnFormattingPanel\n        availableRenderers={availableRenderers}\n        column={column}\n        onChangeFormatting={onChangeFormatting}\n        onChangeRendering={onChangeRendering}\n        onChangeColumnType={onChangeType}\n      />\n\n      {editCalculatedColumn ? (\n        <div className=\"vuuColumnSettingsPanel-buttonBar\" data-align=\"right\">\n          <Button\n            className={`${classBase}-buttonCancel`}\n            onClick={onCancel}\n            tabIndex={-1}\n          >\n            cancel\n          </Button>\n          <Button\n            className={`${classBase}-buttonSave`}\n            onClick={onSave}\n            variant=\"cta\"\n          >\n            save\n          </Button>\n        </div>\n      ) : (\n        <div\n          className={`${classBase}-buttonBar`}\n          data-align={isNewCalculatedColumn ? \"right\" : undefined}\n        >\n          <Button\n            className={`${classBase}-buttonNavPrev`}\n            variant=\"secondary\"\n            data-icon=\"arrow-left\"\n            onClick={navigatePrevColumn}\n          >\n            PREVIOUS\n          </Button>\n          <Button\n            className={`${classBase}-buttonNavNext`}\n            variant=\"secondary\"\n            data-icon=\"arrow-right\"\n            onClick={navigateNextColumn}\n          >\n            NEXT\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["isCalculatedColumn","getCalculatedColumnName","useColumnSettings","getDefaultAlignment","jsxs","jsx","ColumnNameLabel","ColumnExpressionPanel","FormField","FormFieldLabel","VuuInput","ToggleButtonGroup","ToggleButton","Icon","ColumnFormattingPanel","Button"],"mappings":";;;;;;;;;;;;;AAsBA,MAAM,SAAY,GAAA,wBAAA,CAAA;AAElB,MAAM,cAAA,GAAiB,CAAC,MAA6B,KAAA;AACnD,EAAM,MAAA,EAAE,IAAM,EAAA,KAAA,EAAU,GAAA,MAAA,CAAA;AACxB,EAAI,IAAAA,2BAAA,CAAmB,IAAI,CAAG,EAAA;AAC5B,IAAO,OAAA,KAAA,IAASC,iCAAwB,MAAM,CAAA,CAAA;AAAA,GACzC,MAAA;AACL,IAAA,OAAO,KAAS,IAAA,IAAA,CAAA;AAAA,GAClB;AACF,CAAA,CAAA;AAEO,MAAM,sBAAsB,CAAC;AAAA,EAClC,MAAQ,EAAA,UAAA;AAAA,EACR,oBAAA;AAAA,EACA,cAAA;AAAA,EACA,wBAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AACF,CAA2B,KAAA;AACzB,EAAM,MAAA,qBAAA,GAAwB,WAAW,IAAS,KAAA,IAAA,CAAA;AAClD,EAAM,MAAA;AAAA,IACJ,kBAAA;AAAA,IACA,oBAAA;AAAA,IACA,MAAA;AAAA,IACA,kBAAA;AAAA,IACA,kBAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,4BAAA;AAAA,IACA,kBAAA;AAAA,IACA,iBAAA;AAAA,IACA,sBAAA;AAAA,IACA,oBAAA;AAAA,IACA,YAAA;AAAA,IACA,sBAAA;AAAA,IACA,aAAA;AAAA,IACA,MAAA;AAAA,MACEC,mCAAkB,CAAA;AAAA,IACpB,MAAQ,EAAA,UAAA;AAAA,IACR,oBAAA;AAAA,IACA,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,WAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,cAAA;AAAA,IACA,KAAA,GAAQC,6BAAoB,cAAc,CAAA;AAAA,IAC1C,GAAA;AAAA,IACA,KAAA;AAAA,GACE,GAAA,MAAA,CAAA;AAEJ,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,QACvB,CAAC,CAAA,EAAG,SAAS,CAAA,QAAA,CAAU,GAAG,oBAAA;AAAA,OAC3B,CAAA;AAAA,MAED,QAAA,EAAA;AAAA,wBAACC,cAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,OAAA,CAAA,EAC1B,yCAACC,+BAAgB,EAAA,EAAA,MAAA,EAAgB,OAAS,EAAA,sBAAA,EAAwB,CACpE,EAAA,CAAA;AAAA,QAEC,oBACC,mBAAAD,cAAA;AAAA,UAACE,2CAAA;AAAA,UAAA;AAAA,YACC,MAAA;AAAA,YACA,YAAc,EAAA,4BAAA;AAAA,YACd,sBAAA;AAAA,YACA,WAAA;AAAA,YACA,QAAA;AAAA,WAAA;AAAA,SAEA,GAAA,IAAA;AAAA,wBAEJH,eAAA,CAACI,cAAU,EAAA,EAAA,YAAA,EAAW,cACpB,EAAA,QAAA,EAAA;AAAA,0BAAAH,cAAA,CAACI,uBAAe,QAAY,EAAA,cAAA,EAAA,CAAA;AAAA,0BAC5BJ,cAAA;AAAA,YAACK,sBAAA;AAAA,YAAA;AAAA,cACC,SAAU,EAAA,UAAA;AAAA,cACV,eAAa,EAAA,IAAA;AAAA,cACb,QAAA;AAAA,cACA,QAAU,EAAA,aAAA;AAAA,cACV,KAAA,EAAO,eAAe,MAAM,CAAA;AAAA,aAAA;AAAA,WAC9B;AAAA,SACF,EAAA,CAAA;AAAA,wBAEAN,eAAA,CAACI,cAAU,EAAA,EAAA,YAAA,EAAW,cACpB,EAAA,QAAA,EAAA;AAAA,0BAAAH,cAAA,CAACI,uBAAe,QAAY,EAAA,cAAA,EAAA,CAAA;AAAA,0BAC5BJ,cAAA;AAAA,YAACK,sBAAA;AAAA,YAAA;AAAA,cACC,SAAU,EAAA,UAAA;AAAA,cACV,eAAa,EAAA,IAAA;AAAA,cACb,QAAA;AAAA,cACA,KAAO,EAAA,KAAA;AAAA,cACP,QAAU,EAAA,aAAA;AAAA,aAAA;AAAA,WACZ;AAAA,SACF,EAAA,CAAA;AAAA,wBACAN,eAAA,CAACI,cAAU,EAAA,EAAA,YAAA,EAAW,kBACpB,EAAA,QAAA,EAAA;AAAA,0BAAAH,cAAA,CAACI,uBAAe,QAAS,EAAA,WAAA,EAAA,CAAA;AAAA,0BACxBL,eAAA,CAAAO,sBAAA,EAAA,EAAkB,QAAU,EAAA,oBAAA,EAAsB,OAAO,KACxD,EAAA,QAAA,EAAA;AAAA,4BAACN,cAAA,CAAAO,iBAAA,EAAA,EAAa,OAAM,MAClB,EAAA,QAAA,kBAAAP,cAAA,CAACQ,sBAAK,IAAK,EAAA,YAAA,EAAa,IAAM,EAAA,EAAA,EAAI,CACpC,EAAA,CAAA;AAAA,4BACAR,cAAA,CAACO,iBAAa,EAAA,EAAA,KAAA,EAAM,OAClB,EAAA,QAAA,kBAAAP,cAAA,CAACQ,sBAAK,IAAK,EAAA,aAAA,EAAc,IAAM,EAAA,EAAA,EAAI,CACrC,EAAA,CAAA;AAAA,WACF,EAAA,CAAA;AAAA,SACF,EAAA,CAAA;AAAA,wBACAT,eAAA,CAACI,cAAU,EAAA,EAAA,YAAA,EAAW,YACpB,EAAA,QAAA,EAAA;AAAA,0BAAAH,cAAA,CAACI,uBAAe,QAAU,EAAA,YAAA,EAAA,CAAA;AAAA,0CACzBE,sBAAkB,EAAA,EAAA,QAAA,EAAU,oBAAsB,EAAA,KAAA,EAAO,OAAO,EAC/D,EAAA,QAAA,EAAA;AAAA,4BAACN,cAAA,CAAAO,iBAAA,EAAA,EAAa,OAAM,MAClB,EAAA,QAAA,kBAAAP,cAAA,CAACQ,sBAAK,IAAK,EAAA,UAAA,EAAW,IAAM,EAAA,EAAA,EAAI,CAClC,EAAA,CAAA;AAAA,4BACAR,cAAA,CAACO,iBAAa,EAAA,EAAA,KAAA,EAAM,UAClB,EAAA,QAAA,kBAAAP,cAAA,CAACQ,sBAAK,IAAK,EAAA,WAAA,EAAY,IAAM,EAAA,EAAA,EAAI,CACnC,EAAA,CAAA;AAAA,4BACAR,cAAA,CAACO,iBAAa,EAAA,EAAA,KAAA,EAAM,OAClB,EAAA,QAAA,kBAAAP,cAAA,CAACQ,sBAAK,IAAK,EAAA,WAAA,EAAY,IAAM,EAAA,EAAA,EAAI,CACnC,EAAA,CAAA;AAAA,4BACAR,cAAA,CAACO,iBAAa,EAAA,EAAA,KAAA,EAAM,EAClB,EAAA,QAAA,kBAAAP,cAAA,CAACQ,sBAAK,IAAK,EAAA,cAAA,EAAe,IAAM,EAAA,EAAA,EAAI,CACtC,EAAA,CAAA;AAAA,WACF,EAAA,CAAA;AAAA,SACF,EAAA,CAAA;AAAA,wBACAR,cAAA;AAAA,UAACS,2CAAA;AAAA,UAAA;AAAA,YACC,kBAAA;AAAA,YACA,MAAA;AAAA,YACA,kBAAA;AAAA,YACA,iBAAA;AAAA,YACA,kBAAoB,EAAA,YAAA;AAAA,WAAA;AAAA,SACtB;AAAA,QAEC,uCACEV,eAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,kCAAA,EAAmC,cAAW,OAC3D,EAAA,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAACU,WAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,SAAS,CAAA,aAAA,CAAA;AAAA,cACvB,OAAS,EAAA,QAAA;AAAA,cACT,QAAU,EAAA,CAAA,CAAA;AAAA,cACX,QAAA,EAAA,QAAA;AAAA,aAAA;AAAA,WAED;AAAA,0BACAV,cAAA;AAAA,YAACU,WAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,SAAS,CAAA,WAAA,CAAA;AAAA,cACvB,OAAS,EAAA,MAAA;AAAA,cACT,OAAQ,EAAA,KAAA;AAAA,cACT,QAAA,EAAA,MAAA;AAAA,aAAA;AAAA,WAED;AAAA,SAAA,EACF,CAEA,mBAAAX,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,UAAA,CAAA;AAAA,YACvB,YAAA,EAAY,wBAAwB,OAAU,GAAA,KAAA,CAAA;AAAA,YAE9C,QAAA,EAAA;AAAA,8BAAAC,cAAA;AAAA,gBAACU,WAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,GAAG,SAAS,CAAA,cAAA,CAAA;AAAA,kBACvB,OAAQ,EAAA,WAAA;AAAA,kBACR,WAAU,EAAA,YAAA;AAAA,kBACV,OAAS,EAAA,kBAAA;AAAA,kBACV,QAAA,EAAA,UAAA;AAAA,iBAAA;AAAA,eAED;AAAA,8BACAV,cAAA;AAAA,gBAACU,WAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,GAAG,SAAS,CAAA,cAAA,CAAA;AAAA,kBACvB,OAAQ,EAAA,WAAA;AAAA,kBACR,WAAU,EAAA,aAAA;AAAA,kBACV,OAAS,EAAA,kBAAA;AAAA,kBACV,QAAA,EAAA,MAAA;AAAA,iBAAA;AAAA,eAED;AAAA,aAAA;AAAA,WAAA;AAAA,SACF;AAAA,OAAA;AAAA,KAAA;AAAA,GAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ColumnSettingsPanel.js","sources":["../../src/column-settings/ColumnSettingsPanel.tsx"],"sourcesContent":["import { ColumnDescriptor, ColumnSettingsProps } from \"@vuu-ui/vuu-table-types\";\nimport { Icon, VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  getCalculatedColumnName,\n  getDefaultAlignment,\n  isCalculatedColumn,\n} from \"@vuu-ui/vuu-utils\";\nimport {\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 cx from \"clsx\";\nimport { ColumnExpressionPanel } from \"../column-expression-panel\";\nimport { ColumnFormattingPanel } from \"../column-formatting-settings\";\nimport { ColumnNameLabel } from \"./ColumnNameLabel\";\nimport { useColumnSettings } from \"./useColumnSettings\";\n\nimport colunSettingsPanelCss from \"./ColumnSettingsPanel.css\";\n\nconst classBase = \"vuuColumnSettingsPanel\";\n\nconst getColumnLabel = (column: ColumnDescriptor) => {\n  const { name, label } = column;\n  if (isCalculatedColumn(name)) {\n    return label ?? getCalculatedColumnName(column);\n  } else {\n    return label ?? name;\n  }\n};\n\nexport const ColumnSettingsPanel = ({\n  column: columnProp,\n  onCancelCreateColumn,\n  onConfigChange,\n  onCreateCalculatedColumn,\n  tableConfig,\n  vuuTable,\n}: ColumnSettingsProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-settings-panel\",\n    css: colunSettingsPanelCss,\n    window: targetWindow,\n  });\n\n  const isNewCalculatedColumn = columnProp.name === \"::\";\n  const {\n    availableRenderers,\n    editCalculatedColumn,\n    column,\n    navigateNextColumn,\n    navigatePrevColumn,\n    onCancel,\n    onChange,\n    onChangeCalculatedColumnName,\n    onChangeFormatting,\n    onChangeRendering,\n    onChangeServerDataType,\n    onChangeToggleButton,\n    onChangeType,\n    onEditCalculatedColumn,\n    onInputCommit,\n    onSave,\n  } = useColumnSettings({\n    column: columnProp,\n    onCancelCreateColumn,\n    onConfigChange,\n    onCreateCalculatedColumn,\n    tableConfig,\n  });\n\n  const {\n    serverDataType,\n    align = getDefaultAlignment(serverDataType),\n    pin,\n    width,\n  } = column;\n\n  return (\n    <div\n      className={cx(classBase, {\n        [`${classBase}-editing`]: editCalculatedColumn,\n      })}\n    >\n      <div className={`${classBase}-header`}>\n        <ColumnNameLabel column={column} onClick={onEditCalculatedColumn} />\n      </div>\n\n      {editCalculatedColumn ? (\n        <ColumnExpressionPanel\n          column={column}\n          onChangeName={onChangeCalculatedColumnName}\n          onChangeServerDataType={onChangeServerDataType}\n          tableConfig={tableConfig}\n          vuuTable={vuuTable}\n        />\n      ) : null}\n\n      <FormField data-field=\"column-label\">\n        <FormFieldLabel>Column Label</FormFieldLabel>\n        <VuuInput\n          className=\"vuuInput\"\n          data-embedded\n          onChange={onChange}\n          onCommit={onInputCommit}\n          value={getColumnLabel(column)}\n        />\n      </FormField>\n\n      <FormField data-field=\"column-width\">\n        <FormFieldLabel>Column Width</FormFieldLabel>\n        <VuuInput\n          className=\"vuuInput\"\n          data-embedded\n          onChange={onChange}\n          value={width}\n          onCommit={onInputCommit}\n        />\n      </FormField>\n      <FormField data-field=\"column-alignment\">\n        <FormFieldLabel>Alignment</FormFieldLabel>\n        <ToggleButtonGroup onChange={onChangeToggleButton} value={align}>\n          <ToggleButton value=\"left\">\n            <Icon name=\"align-left\" size={16} />\n          </ToggleButton>\n          <ToggleButton value=\"right\">\n            <Icon name=\"align-right\" size={16} />\n          </ToggleButton>\n        </ToggleButtonGroup>\n      </FormField>\n      <FormField data-field=\"column-pin\">\n        <FormFieldLabel>Pin Column</FormFieldLabel>\n        <ToggleButtonGroup onChange={onChangeToggleButton} value={pin ?? \"\"}>\n          <ToggleButton value=\"left\">\n            <Icon name=\"pin-left\" size={16} />\n          </ToggleButton>\n          <ToggleButton value=\"floating\">\n            <Icon name=\"pin-float\" size={16} />\n          </ToggleButton>\n          <ToggleButton value=\"right\">\n            <Icon name=\"pin-right\" size={16} />\n          </ToggleButton>\n          <ToggleButton value=\"\">\n            <Icon name=\"cross-circle\" size={16} />\n          </ToggleButton>\n        </ToggleButtonGroup>\n      </FormField>\n      <ColumnFormattingPanel\n        availableRenderers={availableRenderers}\n        column={column}\n        onChangeFormatting={onChangeFormatting}\n        onChangeRendering={onChangeRendering}\n        onChangeColumnType={onChangeType}\n      />\n\n      {editCalculatedColumn ? (\n        <div className=\"vuuColumnSettingsPanel-buttonBar\" data-align=\"right\">\n          <Button\n            className={`${classBase}-buttonCancel`}\n            onClick={onCancel}\n            tabIndex={-1}\n          >\n            cancel\n          </Button>\n          <Button\n            className={`${classBase}-buttonSave`}\n            onClick={onSave}\n            variant=\"cta\"\n          >\n            save\n          </Button>\n        </div>\n      ) : (\n        <div\n          className={`${classBase}-buttonBar`}\n          data-align={isNewCalculatedColumn ? \"right\" : undefined}\n        >\n          <Button\n            className={`${classBase}-buttonNavPrev`}\n            variant=\"secondary\"\n            data-icon=\"arrow-left\"\n            onClick={navigatePrevColumn}\n          >\n            PREVIOUS\n          </Button>\n          <Button\n            className={`${classBase}-buttonNavNext`}\n            variant=\"secondary\"\n            data-icon=\"arrow-right\"\n            onClick={navigateNextColumn}\n          >\n            NEXT\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["isCalculatedColumn","getCalculatedColumnName","useWindow","useComponentCssInjection","colunSettingsPanelCss","useColumnSettings","getDefaultAlignment","jsxs","jsx","ColumnNameLabel","ColumnExpressionPanel","FormField","FormFieldLabel","VuuInput","ToggleButtonGroup","ToggleButton","Icon","ColumnFormattingPanel","Button"],"mappings":"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"}

package/cjs/datasource-stats/DatasourceStats.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var dataSourceStats = ".vuuDatasourceStats {\n    color: black;\n    display: flex;\n    font-size: 10px;\n    gap: var(--salt-size-unit);\n    padding: 4px 0 0 12px;\n}\n\n.vuuDatasourceStats-label {\n    color: var(--vuu-color-gray-50);\n}";
+
+module.exports = dataSourceStats;
+//# sourceMappingURL=DatasourceStats.css.js.map

package/cjs/datasource-stats/DatasourceStats.css.js.map

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

package/cjs/datasource-stats/DatasourceStats.js

@@ -2,7 +2,10 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var cx = require('clsx');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var react = require('react');
+var DatasourceStats = require('./DatasourceStats.css.js');
 
 const classBase = "vuuDatasourceStats";
 const numberFormatter = new Intl.NumberFormat();
@@ -10,6 +13,12 @@ const DataSourceStats = ({
   className: classNameProp,
   dataSource
 }) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-datasource-stats",
+    css: DatasourceStats,
+    window: targetWindow
+  });
   const [range, setRange] = react.useState(dataSource.range);
   const [size, setSize] = react.useState(dataSource.size);
   react.useEffect(() => {

package/cjs/datasource-stats/DatasourceStats.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatasourceStats.js","sources":["../../src/datasource-stats/DatasourceStats.tsx"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useEffect, useState } from \"react\";\n\nimport \"./DatasourceStats.css\";\n\ninterface DataSourceStatsProps extends HTMLAttributes<HTMLSpanElement> {\n  dataSource: DataSource;\n}\n\nconst classBase = \"vuuDatasourceStats\";\n\nconst numberFormatter = new Intl.NumberFormat();\n\nexport const DataSourceStats = ({\n  className: classNameProp,\n  dataSource,\n}: DataSourceStatsProps) => {\n  const [range, setRange] = useState<VuuRange>(dataSource.range);\n  const [size, setSize] = useState(dataSource.size);\n  useEffect(() => {\n    setSize(dataSource.size);\n    dataSource.on(\"resize\", setSize);\n    dataSource.on(\"range\", setRange);\n    return () => {\n      dataSource.removeListener(\"resize\", setSize);\n      dataSource.removeListener(\"range\", setRange);\n    };\n  }, [dataSource]);\n\n  const className = cx(classBase, classNameProp);\n  const from = numberFormatter.format(range.from + 1);\n  const to = numberFormatter.format(Math.min(range.to, size));\n  const value = numberFormatter.format(size);\n  return (\n    <div className={className}>\n      <span className={`${classBase}-label`}>Row count</span>\n      <span className={`${classBase}-range`}>{from}</span>\n      <span>-</span>\n      <span className={`${classBase}-range`}>{to}</span>\n      <span>of</span>\n      <span className={`${classBase}-size`}>{value}</span>\n    </div>\n  );\n};\n"],"names":["useState","useEffect","jsxs","jsx"],"mappings":";;;;;;AAWA,MAAM,SAAY,GAAA,oBAAA,CAAA;AAElB,MAAM,eAAA,GAAkB,IAAI,IAAA,CAAK,YAAa,EAAA,CAAA;AAEvC,MAAM,kBAAkB,CAAC;AAAA,EAC9B,SAAW,EAAA,aAAA;AAAA,EACX,UAAA;AACF,CAA4B,KAAA;AAC1B,EAAA,MAAM,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAAA,cAAA,CAAmB,WAAW,KAAK,CAAA,CAAA;AAC7D,EAAA,MAAM,CAAC,IAAM,EAAA,OAAO,CAAI,GAAAA,cAAA,CAAS,WAAW,IAAI,CAAA,CAAA;AAChD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,OAAA,CAAQ,WAAW,IAAI,CAAA,CAAA;AACvB,IAAW,UAAA,CAAA,EAAA,CAAG,UAAU,OAAO,CAAA,CAAA;AAC/B,IAAW,UAAA,CAAA,EAAA,CAAG,SAAS,QAAQ,CAAA,CAAA;AAC/B,IAAA,OAAO,MAAM;AACX,MAAW,UAAA,CAAA,cAAA,CAAe,UAAU,OAAO,CAAA,CAAA;AAC3C,MAAW,UAAA,CAAA,cAAA,CAAe,SAAS,QAAQ,CAAA,CAAA;AAAA,KAC7C,CAAA;AAAA,GACF,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA,CAAA;AAC7C,EAAA,MAAM,IAAO,GAAA,eAAA,CAAgB,MAAO,CAAA,KAAA,CAAM,OAAO,CAAC,CAAA,CAAA;AAClD,EAAM,MAAA,EAAA,GAAK,gBAAgB,MAAO,CAAA,IAAA,CAAK,IAAI,KAAM,CAAA,EAAA,EAAI,IAAI,CAAC,CAAA,CAAA;AAC1D,EAAM,MAAA,KAAA,GAAQ,eAAgB,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACzC,EACE,uBAAAC,eAAA,CAAC,SAAI,SACH,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAU,QAAS,EAAA,WAAA,EAAA,CAAA;AAAA,mCAC/C,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAK,EAAA,IAAA,EAAA,CAAA;AAAA,oBAC7CA,cAAA,CAAC,UAAK,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,mCACN,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAG,EAAA,EAAA,EAAA,CAAA;AAAA,oBAC3CA,cAAA,CAAC,UAAK,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,mCACP,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,SAAU,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,GAC/C,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DatasourceStats.js","sources":["../../src/datasource-stats/DatasourceStats.tsx"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, useEffect, useState } from \"react\";\n\nimport dataSourceStats from \"./DatasourceStats.css\";\n\ninterface DataSourceStatsProps extends HTMLAttributes<HTMLSpanElement> {\n  dataSource: DataSource;\n}\n\nconst classBase = \"vuuDatasourceStats\";\n\nconst numberFormatter = new Intl.NumberFormat();\n\nexport const DataSourceStats = ({\n  className: classNameProp,\n  dataSource,\n}: DataSourceStatsProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-datasource-stats\",\n    css: dataSourceStats,\n    window: targetWindow,\n  });\n\n  const [range, setRange] = useState<VuuRange>(dataSource.range);\n  const [size, setSize] = useState(dataSource.size);\n  useEffect(() => {\n    setSize(dataSource.size);\n    dataSource.on(\"resize\", setSize);\n    dataSource.on(\"range\", setRange);\n    return () => {\n      dataSource.removeListener(\"resize\", setSize);\n      dataSource.removeListener(\"range\", setRange);\n    };\n  }, [dataSource]);\n\n  const className = cx(classBase, classNameProp);\n  const from = numberFormatter.format(range.from + 1);\n  const to = numberFormatter.format(Math.min(range.to, size));\n  const value = numberFormatter.format(size);\n  return (\n    <div className={className}>\n      <span className={`${classBase}-label`}>Row count</span>\n      <span className={`${classBase}-range`}>{from}</span>\n      <span>-</span>\n      <span className={`${classBase}-range`}>{to}</span>\n      <span>of</span>\n      <span className={`${classBase}-size`}>{value}</span>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","dataSourceStats","useState","useEffect","jsxs","jsx"],"mappings":";;;;;;;;;AAaA,MAAM,SAAY,GAAA,oBAAA,CAAA;AAElB,MAAM,eAAA,GAAkB,IAAI,IAAA,CAAK,YAAa,EAAA,CAAA;AAEvC,MAAM,kBAAkB,CAAC;AAAA,EAC9B,SAAW,EAAA,aAAA;AAAA,EACX,UAAA;AACF,CAA4B,KAAA;AAC1B,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAAC,cAAA,CAAmB,WAAW,KAAK,CAAA,CAAA;AAC7D,EAAA,MAAM,CAAC,IAAM,EAAA,OAAO,CAAI,GAAAA,cAAA,CAAS,WAAW,IAAI,CAAA,CAAA;AAChD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,OAAA,CAAQ,WAAW,IAAI,CAAA,CAAA;AACvB,IAAW,UAAA,CAAA,EAAA,CAAG,UAAU,OAAO,CAAA,CAAA;AAC/B,IAAW,UAAA,CAAA,EAAA,CAAG,SAAS,QAAQ,CAAA,CAAA;AAC/B,IAAA,OAAO,MAAM;AACX,MAAW,UAAA,CAAA,cAAA,CAAe,UAAU,OAAO,CAAA,CAAA;AAC3C,MAAW,UAAA,CAAA,cAAA,CAAe,SAAS,QAAQ,CAAA,CAAA;AAAA,KAC7C,CAAA;AAAA,GACF,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA,CAAA;AAC7C,EAAA,MAAM,IAAO,GAAA,eAAA,CAAgB,MAAO,CAAA,KAAA,CAAM,OAAO,CAAC,CAAA,CAAA;AAClD,EAAM,MAAA,EAAA,GAAK,gBAAgB,MAAO,CAAA,IAAA,CAAK,IAAI,KAAM,CAAA,EAAA,EAAI,IAAI,CAAC,CAAA,CAAA;AAC1D,EAAM,MAAA,KAAA,GAAQ,eAAgB,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACzC,EACE,uBAAAC,eAAA,CAAC,SAAI,SACH,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAU,QAAS,EAAA,WAAA,EAAA,CAAA;AAAA,mCAC/C,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAK,EAAA,IAAA,EAAA,CAAA;AAAA,oBAC7CA,cAAA,CAAC,UAAK,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,mCACN,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAG,EAAA,EAAA,EAAA,CAAA;AAAA,oBAC3CA,cAAA,CAAC,UAAK,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,mCACP,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,SAAU,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,GAC/C,EAAA,CAAA,CAAA;AAEJ;;;;"}

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

@@ -2,9 +2,12 @@
 
 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 = ({
@@ -18,6 +21,12 @@ const TableSettingsPanel = ({
   onNavigateToColumn,
   tableConfig: tableConfigProp
 }) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-table-settings-panel",
+    css: TableSettingsPanel$1,
+    window: targetWindow
+  });
   const {
     columnItems,
     columnLabelsValue,

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

@@ -1 +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 { 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 \"./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 {\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":["useTableSettings","jsxs","jsx","FormField","FormFieldLabel","VuuInput","ToggleButtonGroup","ToggleButton","Icon","ColumnList","Button"],"mappings":"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"}
+{"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/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

@@ -1,8 +1,12 @@
 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);
@@ -27,6 +31,17 @@ const BackgroundCell = memo(
     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];

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

@@ -1 +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":["BackgroundCell"],"mappings":"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"}
+{"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

@@ -1,8 +1,11 @@
 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 = [
@@ -19,6 +22,12 @@ const BackgroundCellConfigurationEditor = ({
   column,
   onChangeRendering
 }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-background-cell-configuration-editor",
+    css: backgroundCellConfigurationEditorCss,
+    window: targetWindow
+  });
   const [flashStyle, setFlashStyle] = useState(
     valueFromColumn(column)
   );

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

@@ -1 +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;;;;"}
+{"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

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

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

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

@@ -0,0 +1,4 @@
+var dropdownCellCss = "\n.vuuTableDropdownCell {\n    --vuu-icon-height: 15px;\n    --salt-focused-outlineStyle: none;\n\n    --saltButton-borderRadius: 4px;\n    font-weight: 500;\n\n    .vuuDropdownButton {\n        --saltButton-height: var(--vuu-table-embedded-control-height);\n    }\n}\n\n.vuuTableDropdownCell button:focus-visible {\n    --saltButton-borderColor: var(--salt-focused-outlineColor);\n    --saltButton-borderWidth: 2px;\n    padding-left: 7px;\n}";
+
+export { dropdownCellCss as default };
+//# sourceMappingURL=DropdownCell.css.js.map

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

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

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

@@ -2,7 +2,10 @@ 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 { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { memo, useRef, useMemo, useCallback } from 'react';
+import dropdownCellCss from './DropdownCell.css.js';
 
 const classBase = "vuuTableDropdownCell";
 const openKeys = ["Enter", " "];
@@ -13,6 +16,12 @@ const DropdownCell = memo(
     onCommit = WarnCommit,
     row
   }) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "vuu-dropdown-cell",
+      css: dropdownCellCss,
+      window: targetWindow
+    });
     const dataIdx = columnMap[column.name];
     const dataValue = row[dataIdx];
     const { values } = useLookupValues(column, dataValue);

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

@@ -1 +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;;;;"}
+{"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 { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { memo, useCallback, useMemo, useRef } from \"react\";\n\nimport dropdownCellCss from \"./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 targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-dropdown-cell\",\n    css: dropdownCellCss,\n    window: targetWindow,\n  });\n\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":";;;;;;;;;AAoBA,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,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAA,eAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,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/pct-progress-cell/PctProgressCell.css.js

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

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

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

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

@@ -1,6 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { registerComponent } from '@vuu-ui/vuu-utils';
 import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import pctProgressCellCss from './PctProgressCell.css.js';
 
 const classBase = "vuuPctProgressCell";
 const getPercentageValue = (value) => {
@@ -15,6 +18,12 @@ const getPercentageValue = (value) => {
   }
 };
 const PctProgressCell = ({ column, columnMap, row }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-pct-progress-cell",
+    css: pctProgressCellCss,
+    window: targetWindow
+  });
   const value = row[columnMap[column.name]];
   const percentageValue = getPercentageValue(value);
   const className = cx(classBase, {});

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

@@ -1 +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;;;;"}
+{"version":3,"file":"PctProgressCell.js","sources":["../../../src/cell-renderers/pct-progress-cell/PctProgressCell.tsx"],"sourcesContent":["import { TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { CSSProperties } from \"react\";\n\nimport pctProgressCellCss from \"./PctProgressCell.css\";\n\nconst classBase = \"vuuPctProgressCell\";\n\nconst getPercentageValue = (value: number) => {\n  if (value >= 0 && value <= 1) {\n    return value * 100;\n  } else if (value > 2) {\n    return 0;\n  } else if (value > 1) {\n    return 100;\n  } else {\n    return 0;\n  }\n};\n\nexport const PctProgressCell = ({ column, columnMap, row }: TableCellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-pct-progress-cell\",\n    css: pctProgressCellCss,\n    window: targetWindow,\n  });\n\n  const value = row[columnMap[column.name]] as number;\n  const percentageValue = getPercentageValue(value);\n  const className = cx(classBase, {});\n\n  return (\n    <div\n      className={cx(className, {\n        [`${classBase}-zero`]: percentageValue === 0,\n        [`${classBase}-complete`]: percentageValue >= 100,\n      })}\n      tabIndex={-1}\n    >\n      <span\n        className={`${classBase}-progressBar`}\n        style={{ \"--progress-bar-pct\": `${percentageValue}%` } as CSSProperties}\n      />\n      <span className={`${classBase}-text`}>{`${percentageValue.toFixed(\n        2\n      )} %`}</span>\n    </div>\n  );\n};\n\nregisterComponent(\"vuu.pct-progress\", PctProgressCell, \"cell-renderer\", {\n  description: \"Percentage formatter\",\n  label: \"Percentage formatter\",\n  serverDataType: \"double\",\n});\n"],"names":[],"mappings":";;;;;;;AASA,MAAM,SAAY,GAAA,oBAAA,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,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAA,kBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,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.js

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

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

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

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

@@ -1,9 +1,18 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { registerComponent, isTypeDescriptor, isColumnTypeRenderer, isValidNumber } from '@vuu-ui/vuu-utils';
 import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import progressCellCss from './ProgressCell.css.js';
 
 const classBase = "vuuProgressCell";
 const ProgressCell = ({ column, columnMap, row }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-progress-cell",
+    css: progressCellCss,
+    window: targetWindow
+  });
   const { name, type } = column;
   const value = row[columnMap[name]];
   let showProgress = false;

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

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

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

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