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

package/cjs/column-settings/ColumnNameLabel.js

@@ -1,36 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var cx = require('clsx');
-var vuuUtils = require('@vuu-ui/vuu-utils');
-
-const classBase = "vuuColumnNameLabel";
-const ColumnNameLabel = ({ column, onClick }) => {
-  if (vuuUtils.isCalculatedColumn(column.name)) {
-    const [name, type, expression] = vuuUtils.getCalculatedColumnDetails(column);
-    const displayName = name || "name";
-    const displayExpression = "=expression";
-    const nameClass = displayName === "name" ? `${classBase}-placeholder` : void 0;
-    const expressionClass = expression === "" ? `${classBase}-placeholder` : void 0;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: cx(classBase, `${classBase}-calculated`),
-        onClick,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: nameClass, children: displayName }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: ":" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: type || "string" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: ":" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: expressionClass, children: displayExpression }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-edit`, "data-icon": "edit" })
-        ]
-      }
-    );
-  } else {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classBase, children: column.name });
-  }
-};
-
-exports.ColumnNameLabel = ColumnNameLabel;
-//# sourceMappingURL=ColumnNameLabel.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColumnNameLabel.js","sources":["../../src/column-settings/ColumnNameLabel.tsx"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport cx from \"clsx\";\n\nimport {\n  getCalculatedColumnDetails,\n  isCalculatedColumn,\n} from \"@vuu-ui/vuu-utils\";\n\nimport \"./ColumnNameLabel.css\";\nimport { MouseEventHandler } from \"react\";\n\nconst classBase = \"vuuColumnNameLabel\";\n\nexport interface ColumnNameLabelProps {\n  column: ColumnDescriptor;\n  onClick: MouseEventHandler;\n}\n\nexport const ColumnNameLabel = ({ column, onClick }: ColumnNameLabelProps) => {\n  if (isCalculatedColumn(column.name)) {\n    const [name, type, expression] = getCalculatedColumnDetails(column);\n    const displayName = name || \"name\";\n    const displayExpression = \"=expression\";\n\n    const nameClass =\n      displayName === \"name\" ? `${classBase}-placeholder` : undefined;\n    const expressionClass =\n      expression === \"\" ? `${classBase}-placeholder` : undefined;\n    return (\n      <div\n        className={cx(classBase, `${classBase}-calculated`)}\n        onClick={onClick}\n      >\n        <span className={nameClass}>{displayName}</span>\n        <span>:</span>\n        <span>{type || \"string\"}</span>\n        <span>:</span>\n        <span className={expressionClass}>{displayExpression}</span>\n        <span className={`${classBase}-edit`} data-icon=\"edit\" />\n      </div>\n    );\n  } else {\n    return <div className={classBase}>{column.name}</div>;\n  }\n};\n"],"names":["isCalculatedColumn","getCalculatedColumnDetails","jsxs","jsx"],"mappings":";;;;;;AAWA,MAAM,SAAY,GAAA,oBAAA,CAAA;AAOX,MAAM,eAAkB,GAAA,CAAC,EAAE,MAAA,EAAQ,SAAoC,KAAA;AAC5E,EAAI,IAAAA,2BAAA,CAAmB,MAAO,CAAA,IAAI,CAAG,EAAA;AACnC,IAAA,MAAM,CAAC,IAAM,EAAA,IAAA,EAAM,UAAU,CAAA,GAAIC,oCAA2B,MAAM,CAAA,CAAA;AAClE,IAAA,MAAM,cAAc,IAAQ,IAAA,MAAA,CAAA;AAC5B,IAAA,MAAM,iBAAoB,GAAA,aAAA,CAAA;AAE1B,IAAA,MAAM,SACJ,GAAA,WAAA,KAAgB,MAAS,GAAA,CAAA,EAAG,SAAS,CAAiB,YAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AACxD,IAAA,MAAM,eACJ,GAAA,UAAA,KAAe,EAAK,GAAA,CAAA,EAAG,SAAS,CAAiB,YAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AACnD,IACE,uBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAa,WAAA,CAAA,CAAA;AAAA,QAClD,OAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAACC,cAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,SAAA,EAAY,QAAY,EAAA,WAAA,EAAA,CAAA;AAAA,0BACzCA,cAAA,CAAC,UAAK,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,0BACPA,cAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAA,IAAA,IAAQ,QAAS,EAAA,CAAA;AAAA,0BACxBA,cAAA,CAAC,UAAK,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,0BACNA,cAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,eAAA,EAAkB,QAAkB,EAAA,iBAAA,EAAA,CAAA;AAAA,yCACpD,MAAK,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA,EAAS,aAAU,MAAO,EAAA,CAAA;AAAA,SAAA;AAAA,OAAA;AAAA,KACzD,CAAA;AAAA,GAEG,MAAA;AACL,IAAA,uBAAQA,cAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAY,iBAAO,IAAK,EAAA,CAAA,CAAA;AAAA,GACjD;AACF;;;;"}

package/cjs/column-settings/ColumnSettingsPanel.css

@@ -1,77 +0,0 @@
-.vuuColumnSettingsPanel {
-    --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>');
-    --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>');
-    --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>');
-    --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>');
-    --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>');
-    --vuuDropdown-height: 24px;
-    --vuuDropdown-width: 100%;
-    
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-    height: 100%;
-    padding-top: 24px;
-}
-
-.vuuColumnSettingsPanel-header {
-  border-top: solid 2px var(--vuu-color-gray-30);
-  font-size: 14px;
-  font-weight: 600;
-  padding: 24px 2px 0 2px;
-}
-
-
-.vuuColumnSettingsPanel-buttonBar {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  margin-top: auto;
-}
-
-.vuuColumnSettingsPanel-buttonBar[data-align="right"]{
-  gap: 6px;
-  justify-content: flex-end;
-}
-
-.vuuColumnSettingsPanel-buttonNavPrev {
-  --vuu-icon-left: 6px;
-  padding-left: 24px
-}
-
-.vuuColumnSettingsPanel-buttonNavNext {
-  --vuu-icon-left: calc(100% - 18px);
-  padding-right: 24px
-}
-
-
-
-[data-icon='align-left'] {
-    --vuu-icon-svg: var(--vuu-svg-align-left);
-  }
-
-  [data-icon='align-right'] {
-    --vuu-icon-svg: var(--vuu-svg-align-right);
-  }
-
-  [data-icon='pin-left'] {
-    --vuu-icon-svg: var(--vuu-svg-pin-left);
-  }
-  [data-icon='pin-float'] {
-    --vuu-icon-svg: var(--vuu-svg-pin-float);
-  }
-  [data-icon='pin-right'] {
-    --vuu-icon-svg: var(--vuu-svg-pin-right);
-  }
-
-  .vuuColumnSettingsPanel-editing .vuuColumnNameLabel-edit {
-    display: none;
-  }
-  
-
-
-  
-  
-  
-  
-  

package/cjs/column-settings/ColumnSettingsPanel.js

@@ -1,186 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
-var vuuUtils = require('@vuu-ui/vuu-utils');
-var core = require('@salt-ds/core');
-var 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');
-
-const classBase = "vuuColumnSettingsPanel";
-const getColumnLabel = (column) => {
-  const { name, label } = column;
-  if (vuuUtils.isCalculatedColumn(name)) {
-    return label ?? vuuUtils.getCalculatedColumnName(column);
-  } else {
-    return label ?? name;
-  }
-};
-const ColumnSettingsPanel = ({
-  column: columnProp,
-  onCancelCreateColumn,
-  onConfigChange,
-  onCreateCalculatedColumn,
-  tableConfig,
-  vuuTable
-}) => {
-  const isNewCalculatedColumn = columnProp.name === "::";
-  const {
-    availableRenderers,
-    editCalculatedColumn,
-    column,
-    navigateNextColumn,
-    navigatePrevColumn,
-    onCancel,
-    onChange,
-    onChangeCalculatedColumnName,
-    onChangeFormatting,
-    onChangeRendering,
-    onChangeServerDataType,
-    onChangeToggleButton,
-    onChangeType,
-    onEditCalculatedColumn,
-    onInputCommit,
-    onSave
-  } = useColumnSettings.useColumnSettings({
-    column: columnProp,
-    onCancelCreateColumn,
-    onConfigChange,
-    onCreateCalculatedColumn,
-    tableConfig
-  });
-  const {
-    serverDataType,
-    align = vuuUtils.getDefaultAlignment(serverDataType),
-    pin,
-    width
-  } = column;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cx(classBase, {
-        [`${classBase}-editing`]: editCalculatedColumn
-      }),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-header`, children: /* @__PURE__ */ jsxRuntime.jsx(ColumnNameLabel.ColumnNameLabel, { column, onClick: onEditCalculatedColumn }) }),
-        editCalculatedColumn ? /* @__PURE__ */ jsxRuntime.jsx(
-          ColumnExpressionPanel.ColumnExpressionPanel,
-          {
-            column,
-            onChangeName: onChangeCalculatedColumnName,
-            onChangeServerDataType,
-            tableConfig,
-            vuuTable
-          }
-        ) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": "column-label", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Column Label" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            vuuUiControls.VuuInput,
-            {
-              className: "vuuInput",
-              "data-embedded": true,
-              onChange,
-              onCommit: onInputCommit,
-              value: getColumnLabel(column)
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": "column-width", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Column Width" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            vuuUiControls.VuuInput,
-            {
-              className: "vuuInput",
-              "data-embedded": true,
-              onChange,
-              value: width,
-              onCommit: onInputCommit
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": "column-alignment", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Alignment" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(core.ToggleButtonGroup, { onChange: onChangeToggleButton, value: align, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "left", children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "align-left", size: 16 }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "right", children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "align-right", size: 16 }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": "column-pin", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Pin Column" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(core.ToggleButtonGroup, { onChange: onChangeToggleButton, value: pin ?? "", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "left", children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "pin-left", size: 16 }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "floating", children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "pin-float", size: 16 }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "right", children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "pin-right", size: 16 }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "", children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "cross-circle", size: 16 }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ColumnFormattingPanel.ColumnFormattingPanel,
-          {
-            availableRenderers,
-            column,
-            onChangeFormatting,
-            onChangeRendering,
-            onChangeColumnType: onChangeType
-          }
-        ),
-        editCalculatedColumn ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "vuuColumnSettingsPanel-buttonBar", "data-align": "right", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            core.Button,
-            {
-              className: `${classBase}-buttonCancel`,
-              onClick: onCancel,
-              tabIndex: -1,
-              children: "cancel"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            core.Button,
-            {
-              className: `${classBase}-buttonSave`,
-              onClick: onSave,
-              variant: "cta",
-              children: "save"
-            }
-          )
-        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: `${classBase}-buttonBar`,
-            "data-align": isNewCalculatedColumn ? "right" : void 0,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                core.Button,
-                {
-                  className: `${classBase}-buttonNavPrev`,
-                  variant: "secondary",
-                  "data-icon": "arrow-left",
-                  onClick: navigatePrevColumn,
-                  children: "PREVIOUS"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                core.Button,
-                {
-                  className: `${classBase}-buttonNavNext`,
-                  variant: "secondary",
-                  "data-icon": "arrow-right",
-                  onClick: navigateNextColumn,
-                  children: "NEXT"
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-
-exports.ColumnSettingsPanel = ColumnSettingsPanel;
-//# sourceMappingURL=ColumnSettingsPanel.js.map

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

@@ -1 +0,0 @@
-{"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":"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"}

package/cjs/column-settings/useColumnSettings.js

@@ -1,235 +0,0 @@
-'use strict';
-
-var vuuUtils = require('@vuu-ui/vuu-utils');
-var react = require('react');
-
-const integerCellRenderers = [
-  {
-    description: "Default formatter for columns with data type integer",
-    label: "Default Renderer (int, long)",
-    name: "default-int"
-  }
-];
-const doubleCellRenderers = [
-  {
-    description: "Default formatter for columns with data type double",
-    label: "Default Renderer (double)",
-    name: "default-double"
-  }
-];
-const stringCellRenderers = [
-  {
-    description: "Default formatter for columns with data type string",
-    label: "Default Renderer (string)",
-    name: "default-string"
-  }
-];
-const booleanCellRenderers = [];
-const getAvailableCellRenderers = (column) => {
-  switch (column.serverDataType) {
-    case "char":
-    case "string":
-      return stringCellRenderers.concat(vuuUtils.getRegisteredCellRenderers("string"));
-    case "int":
-    case "long":
-      return integerCellRenderers.concat(vuuUtils.getRegisteredCellRenderers("int"));
-    case "double":
-      return doubleCellRenderers.concat(vuuUtils.getRegisteredCellRenderers("double"));
-    case "boolean":
-      return booleanCellRenderers.concat(vuuUtils.getRegisteredCellRenderers("boolean"));
-    default:
-      return stringCellRenderers;
-  }
-};
-const getFieldName = (input) => {
-  const saltFormField = input.closest(".saltFormField");
-  if (saltFormField && saltFormField.dataset.field) {
-    const {
-      dataset: { field }
-    } = saltFormField;
-    return field;
-  } else {
-    throw Error("named form field not found");
-  }
-};
-const getColumn = (columns, column) => {
-  if (column.name === "::") {
-    return column;
-  } else {
-    const col = columns.find((col2) => col2.name === column.name);
-    if (col) {
-      return col;
-    }
-    throw Error(`columns does not contain column ${name}`);
-  }
-};
-const replaceColumn = (tableConfig, column) => ({
-  ...tableConfig,
-  columns: tableConfig.columns.map(
-    (col) => col.name === column.name ? column : col
-  )
-});
-const useColumnSettings = ({
-  column: columnProp,
-  onCancelCreateColumn,
-  onConfigChange,
-  onCreateCalculatedColumn,
-  tableConfig
-}) => {
-  const [column, setColumn] = react.useState(
-    getColumn(tableConfig.columns, columnProp)
-  );
-  const columnRef = react.useRef(column);
-  const [inEditMode, setEditMode] = react.useState(column.name === "::");
-  const handleEditCalculatedcolumn = react.useCallback(() => {
-    columnRef.current = column;
-    setEditMode(true);
-  }, [column]);
-  react.useEffect(() => {
-    setColumn(columnProp);
-    setEditMode(columnProp.name === "::");
-  }, [columnProp]);
-  const availableRenderers = react.useMemo(() => {
-    return getAvailableCellRenderers(column);
-  }, [column]);
-  const handleInputCommit = react.useCallback(() => {
-    onConfigChange(replaceColumn(tableConfig, column));
-  }, [column, onConfigChange, tableConfig]);
-  const handleChangeToggleButton = react.useCallback(
-    (evt) => {
-      const button = vuuUtils.queryClosest(evt.target, "button");
-      if (button) {
-        const fieldName = getFieldName(button);
-        const { value } = button;
-        switch (fieldName) {
-          case "column-alignment":
-            if (vuuUtils.isValidColumnAlignment(value)) {
-              const newColumn = {
-                ...column,
-                align: value || void 0
-              };
-              setColumn(newColumn);
-              onConfigChange(replaceColumn(tableConfig, newColumn));
-            }
-            break;
-          case "column-pin":
-            if (vuuUtils.isValidPinLocation(value)) {
-              const newColumn = {
-                ...column,
-                pin: value || void 0
-              };
-              setColumn(newColumn);
-              onConfigChange(replaceColumn(tableConfig, newColumn));
-              break;
-            }
-        }
-      }
-    },
-    [column, onConfigChange, tableConfig]
-  );
-  const handleChange = react.useCallback((evt) => {
-    const input = evt.target;
-    const fieldName = getFieldName(input);
-    const { value } = input;
-    switch (fieldName) {
-      case "column-label":
-        setColumn((state) => ({ ...state, label: value }));
-        break;
-      case "column-name":
-        setColumn((state) => vuuUtils.setCalculatedColumnName(state, value));
-        break;
-      case "column-width":
-        setColumn((state) => ({ ...state, width: parseInt(value) }));
-        break;
-    }
-  }, []);
-  const handleChangeCalculatedColumnName = react.useCallback((name2) => {
-    setColumn((state) => ({ ...state, name: name2 }));
-  }, []);
-  const handleChangeFormatting = react.useCallback(
-    (formatting) => {
-      const newColumn = vuuUtils.updateColumnFormatting(column, formatting);
-      setColumn(newColumn);
-      onConfigChange(replaceColumn(tableConfig, newColumn));
-    },
-    [column, onConfigChange, tableConfig]
-  );
-  const handleChangeType = react.useCallback(
-    (type) => {
-      const updatedColumn = vuuUtils.updateColumnType(column, type);
-      setColumn(updatedColumn);
-      onConfigChange(replaceColumn(tableConfig, updatedColumn));
-    },
-    [column, onConfigChange, tableConfig]
-  );
-  const handleChangeServerDataType = react.useCallback(
-    (serverDataType) => {
-      setColumn((col) => ({ ...col, serverDataType }));
-    },
-    []
-  );
-  const handleChangeRendering = react.useCallback(
-    (renderProps) => {
-      if (renderProps) {
-        const newColumn = vuuUtils.updateColumnRenderProps(
-          column,
-          renderProps
-        );
-        setColumn(newColumn);
-        onConfigChange(replaceColumn(tableConfig, newColumn));
-      }
-    },
-    [column, onConfigChange, tableConfig]
-  );
-  const navigateColumn = react.useCallback(
-    ({ moveBy }) => {
-      const { columns } = tableConfig;
-      const index = columns.indexOf(column) + moveBy;
-      const newColumn = columns[index];
-      if (newColumn) {
-        setColumn(newColumn);
-      }
-    },
-    [column, tableConfig]
-  );
-  const navigateNextColumn = react.useCallback(() => {
-    navigateColumn({ moveBy: 1 });
-  }, [navigateColumn]);
-  const navigatePrevColumn = react.useCallback(() => {
-    navigateColumn({ moveBy: -1 });
-  }, [navigateColumn]);
-  const handleSaveCalculatedColumn = react.useCallback(() => {
-    onCreateCalculatedColumn(column);
-  }, [column, onCreateCalculatedColumn]);
-  const handleCancelEdit = react.useCallback(() => {
-    if (columnProp.name === "::") {
-      onCancelCreateColumn();
-    } else {
-      if (columnRef.current !== void 0 && columnRef.current !== column) {
-        setColumn(columnRef.current);
-      }
-      setEditMode(false);
-    }
-  }, [column, columnProp.name, onCancelCreateColumn]);
-  return {
-    availableRenderers,
-    editCalculatedColumn: inEditMode,
-    column,
-    navigateNextColumn,
-    navigatePrevColumn,
-    onCancel: handleCancelEdit,
-    onChange: handleChange,
-    onChangeCalculatedColumnName: handleChangeCalculatedColumnName,
-    onChangeFormatting: handleChangeFormatting,
-    onChangeRendering: handleChangeRendering,
-    onChangeServerDataType: handleChangeServerDataType,
-    onChangeToggleButton: handleChangeToggleButton,
-    onChangeType: handleChangeType,
-    onEditCalculatedColumn: handleEditCalculatedcolumn,
-    onInputCommit: handleInputCommit,
-    onSave: handleSaveCalculatedColumn
-  };
-};
-
-exports.useColumnSettings = useColumnSettings;
-//# sourceMappingURL=useColumnSettings.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useColumnSettings.js","sources":["../../src/column-settings/useColumnSettings.ts"],"sourcesContent":["import {\n  ColumnDescriptor,\n  TableConfig,\n  ColumnTypeFormatting,\n  ColumnSettingsProps,\n  ColumnTypeSimple,\n} from \"@vuu-ui/vuu-table-types\";\n\nimport {\n  CellRendererDescriptor,\n  ColumnRenderPropsChangeHandler,\n  getRegisteredCellRenderers,\n  isValidColumnAlignment,\n  isValidPinLocation,\n  setCalculatedColumnName,\n  updateColumnRenderProps,\n  updateColumnFormatting,\n  updateColumnType,\n  queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  FormEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nconst integerCellRenderers: CellRendererDescriptor[] = [\n  {\n    description: \"Default formatter for columns with data type integer\",\n    label: \"Default Renderer (int, long)\",\n    name: \"default-int\",\n  },\n];\nconst doubleCellRenderers: CellRendererDescriptor[] = [\n  {\n    description: \"Default formatter for columns with data type double\",\n    label: \"Default Renderer (double)\",\n    name: \"default-double\",\n  },\n];\n\nconst stringCellRenderers: CellRendererDescriptor[] = [\n  {\n    description: \"Default formatter for columns with data type string\",\n    label: \"Default Renderer (string)\",\n    name: \"default-string\",\n  },\n];\n\nconst booleanCellRenderers: CellRendererDescriptor[] = [];\n\nconst getAvailableCellRenderers = (\n  column: ColumnDescriptor\n): CellRendererDescriptor[] => {\n  switch (column.serverDataType) {\n    case \"char\":\n    case \"string\":\n      return stringCellRenderers.concat(getRegisteredCellRenderers(\"string\"));\n    case \"int\":\n    case \"long\":\n      return integerCellRenderers.concat(getRegisteredCellRenderers(\"int\"));\n    case \"double\":\n      return doubleCellRenderers.concat(getRegisteredCellRenderers(\"double\"));\n    case \"boolean\":\n      return booleanCellRenderers.concat(getRegisteredCellRenderers(\"boolean\"));\n    default:\n      return stringCellRenderers;\n  }\n};\n\nconst getFieldName = (input: HTMLInputElement | HTMLButtonElement): string => {\n  const saltFormField = input.closest(\".saltFormField\") as HTMLElement;\n  if (saltFormField && saltFormField.dataset.field) {\n    const {\n      dataset: { field },\n    } = saltFormField;\n    return field;\n  } else {\n    throw Error(\"named form field not found\");\n  }\n};\n\nconst getColumn = (columns: ColumnDescriptor[], column: ColumnDescriptor) => {\n  if (column.name === \"::\") {\n    // this is a new calculated column\n    return column;\n  } else {\n    const col = columns.find((col) => col.name === column.name);\n    if (col) {\n      return col;\n    }\n    throw Error(`columns does not contain column ${name}`);\n  }\n};\n\nconst replaceColumn = (\n  tableConfig: TableConfig,\n  column: ColumnDescriptor\n): TableConfig => ({\n  ...tableConfig,\n  columns: tableConfig.columns.map((col) =>\n    col.name === column.name ? column : col\n  ),\n});\n\nexport const useColumnSettings = ({\n  column: columnProp,\n  onCancelCreateColumn,\n  onConfigChange,\n  onCreateCalculatedColumn,\n  tableConfig,\n}: Omit<ColumnSettingsProps, \"vuuTable\">) => {\n  const [column, setColumn] = useState<ColumnDescriptor>(\n    getColumn(tableConfig.columns, columnProp)\n  );\n  const columnRef = useRef<ColumnDescriptor>(column);\n  const [inEditMode, setEditMode] = useState(column.name === \"::\");\n\n  const handleEditCalculatedcolumn = useCallback(() => {\n    columnRef.current = column;\n    setEditMode(true);\n  }, [column]);\n\n  useEffect(() => {\n    setColumn(columnProp);\n    setEditMode(columnProp.name === \"::\");\n  }, [columnProp]);\n\n  const availableRenderers = useMemo(() => {\n    return getAvailableCellRenderers(column);\n  }, [column]);\n\n  const handleInputCommit = useCallback(() => {\n    onConfigChange(replaceColumn(tableConfig, column));\n  }, [column, onConfigChange, tableConfig]);\n\n  const handleChangeToggleButton = useCallback<FormEventHandler>(\n    (evt) => {\n      const button = queryClosest<HTMLButtonElement>(evt.target, \"button\");\n      if (button) {\n        const fieldName = getFieldName(button);\n        const { value } = button;\n        switch (fieldName) {\n          case \"column-alignment\":\n            if (isValidColumnAlignment(value)) {\n              const newColumn: ColumnDescriptor = {\n                ...column,\n                align: value || undefined,\n              };\n              setColumn(newColumn);\n              onConfigChange(replaceColumn(tableConfig, newColumn));\n            }\n            break;\n          case \"column-pin\":\n            if (isValidPinLocation(value)) {\n              const newColumn: ColumnDescriptor = {\n                ...column,\n                pin: value || undefined,\n              };\n              setColumn(newColumn);\n              onConfigChange(replaceColumn(tableConfig, newColumn));\n\n              break;\n            }\n        }\n      }\n    },\n    [column, onConfigChange, tableConfig]\n  );\n\n  const handleChange = useCallback<FormEventHandler>((evt) => {\n    const input = evt.target as HTMLInputElement;\n    const fieldName = getFieldName(input);\n    const { value } = input;\n    switch (fieldName) {\n      case \"column-label\":\n        setColumn((state) => ({ ...state, label: value }));\n        break;\n      case \"column-name\":\n        setColumn((state) => setCalculatedColumnName(state, value));\n        break;\n      case \"column-width\":\n        setColumn((state) => ({ ...state, width: parseInt(value) }));\n        break;\n    }\n  }, []);\n\n  const handleChangeCalculatedColumnName = useCallback((name: string) => {\n    setColumn((state) => ({ ...state, name }));\n  }, []);\n\n  const handleChangeFormatting = useCallback(\n    (formatting: ColumnTypeFormatting) => {\n      const newColumn = updateColumnFormatting(column, formatting);\n      setColumn(newColumn);\n      onConfigChange(replaceColumn(tableConfig, newColumn));\n    },\n    [column, onConfigChange, tableConfig]\n  );\n\n  const handleChangeType = useCallback(\n    (type: ColumnTypeSimple) => {\n      const updatedColumn = updateColumnType(column, type);\n      setColumn(updatedColumn);\n      onConfigChange(replaceColumn(tableConfig, updatedColumn));\n    },\n    [column, onConfigChange, tableConfig]\n  );\n\n  // Changing the server data type applies only to calculated columns\n  const handleChangeServerDataType = useCallback(\n    (serverDataType: VuuColumnDataType) => {\n      setColumn((col) => ({ ...col, serverDataType }));\n    },\n    []\n  );\n\n  const handleChangeRendering = useCallback<ColumnRenderPropsChangeHandler>(\n    (renderProps) => {\n      if (renderProps) {\n        const newColumn: ColumnDescriptor = updateColumnRenderProps(\n          column,\n          renderProps\n        );\n        setColumn(newColumn);\n        onConfigChange(replaceColumn(tableConfig, newColumn));\n      }\n    },\n    [column, onConfigChange, tableConfig]\n  );\n\n  const navigateColumn = useCallback(\n    ({ moveBy }: { moveBy: number }) => {\n      const { columns } = tableConfig;\n      const index = columns.indexOf(column) + moveBy;\n      const newColumn = columns[index];\n      if (newColumn) {\n        setColumn(newColumn);\n      }\n    },\n    [column, tableConfig]\n  );\n  const navigateNextColumn = useCallback(() => {\n    navigateColumn({ moveBy: 1 });\n  }, [navigateColumn]);\n\n  const navigatePrevColumn = useCallback(() => {\n    navigateColumn({ moveBy: -1 });\n  }, [navigateColumn]);\n\n  const handleSaveCalculatedColumn = useCallback(() => {\n    // TODO validate expression, unique name\n    onCreateCalculatedColumn(column);\n  }, [column, onCreateCalculatedColumn]);\n\n  const handleCancelEdit = useCallback(() => {\n    if (columnProp.name === \"::\") {\n      onCancelCreateColumn();\n    } else {\n      if (columnRef.current !== undefined && columnRef.current !== column) {\n        setColumn(columnRef.current);\n      }\n      setEditMode(false);\n    }\n  }, [column, columnProp.name, onCancelCreateColumn]);\n\n  return {\n    availableRenderers,\n    editCalculatedColumn: inEditMode,\n    column,\n    navigateNextColumn,\n    navigatePrevColumn,\n    onCancel: handleCancelEdit,\n    onChange: handleChange,\n    onChangeCalculatedColumnName: handleChangeCalculatedColumnName,\n    onChangeFormatting: handleChangeFormatting,\n    onChangeRendering: handleChangeRendering,\n    onChangeServerDataType: handleChangeServerDataType,\n    onChangeToggleButton: handleChangeToggleButton,\n    onChangeType: handleChangeType,\n    onEditCalculatedColumn: handleEditCalculatedcolumn,\n    onInputCommit: handleInputCommit,\n    onSave: handleSaveCalculatedColumn,\n  };\n};\n"],"names":["getRegisteredCellRenderers","col","useState","useRef","useCallback","useEffect","useMemo","queryClosest","isValidColumnAlignment","isValidPinLocation","setCalculatedColumnName","name","updateColumnFormatting","updateColumnType","updateColumnRenderProps"],"mappings":"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"}

package/cjs/datasource-stats/DatasourceStats.css

@@ -1,11 +0,0 @@
-.vuuDatasourceStats {
-    color: black;
-    display: flex;
-    font-size: 10px;
-    gap: var(--salt-size-unit);
-    padding: 4px 0 0 12px;
-}
-
-.vuuDatasourceStats-label {
-    color: var(--vuu-color-gray-50);
-}

package/cjs/datasource-stats/DatasourceStats.js

@@ -1,39 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var cx = require('clsx');
-var react = require('react');
-
-const classBase = "vuuDatasourceStats";
-const numberFormatter = new Intl.NumberFormat();
-const DataSourceStats = ({
-  className: classNameProp,
-  dataSource
-}) => {
-  const [range, setRange] = react.useState(dataSource.range);
-  const [size, setSize] = react.useState(dataSource.size);
-  react.useEffect(() => {
-    setSize(dataSource.size);
-    dataSource.on("resize", setSize);
-    dataSource.on("range", setRange);
-    return () => {
-      dataSource.removeListener("resize", setSize);
-      dataSource.removeListener("range", setRange);
-    };
-  }, [dataSource]);
-  const className = cx(classBase, classNameProp);
-  const from = numberFormatter.format(range.from + 1);
-  const to = numberFormatter.format(Math.min(range.to, size));
-  const value = numberFormatter.format(size);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-label`, children: "Row count" }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-range`, children: from }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "-" }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-range`, children: to }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "of" }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-size`, children: value })
-  ] });
-};
-
-exports.DataSourceStats = DataSourceStats;
-//# sourceMappingURL=DatasourceStats.js.map