@vuu-ui/vuu-table-extras 0.7.6-debug → 0.8.0-debug

package/index.css

@@ -535,4 +535,49 @@
   display: flex;
   gap: var(--salt-size-unit);
 }
+
+/* src/table-settings/column-type-panel/ColumnTypePanel.css */
+.vuuColumnTypePanel {
+  --settings-panel-marginTop: 0px;
+}
+.vuuColumnTypePanel-renderer {
+  --saltButton-background: var(--salt-container-secondary-background);
+  --saltButton-background-hover: var(--salt-actionable-secondary-background-hover);
+}
+
+/* src/table-settings/column-settings-panel/ColumnSettingsPanel.css */
+.vuuColumnSettingsPanel {
+  --saltFormField-margin: 3px 0;
+  --saltFormField-label-width: 80px;
+  --saltPanel-padding: var(--salt-size-unit);
+  align-items: flex-start;
+  border-left: solid 1px var(--salt-container-primary-borderColor);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  min-width: 220px;
+  padding-left: calc(var(--salt-size-unit) * 2);
+  width: var(--vuuColumnSettings-width, auto);
+}
+.vuuColumnSettingsPanel-columnTabs {
+  --saltFormField-margin: 0;
+}
+.vuuColumnSettingsPanel-columnTabs .saltFormField {
+  margin-left: 0 !important;
+}
+.vuuColumnSettingsPanel .saltPanel {
+  --saltFormField-margin: 3px 0;
+  margin-top: var(--settings-panel-marginTop, var(--salt-size-unit));
+  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-size-unit);
+}
+.vuuColumnPanelSwitch {
+  white-space: nowrap;
+  width: 100%;
+}
+.vuuColumnSettingsPanel .saltSwitch {
+  margin-left: auto;
+}
 /*# sourceMappingURL=index.css.map */

package/index.css.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCell.css", "../../../packages/vuu-table-extras/src/cell-renderers/background-cell/FlashingBackground.css", "../../../packages/vuu-table-extras/src/cell-renderers/progress-cell/ProgressCell.css", "../../../packages/vuu-table-extras/src/column-expression-input/ColumnExpressionInput.css", "../../../packages/vuu-table-extras/src/datagrid-configuration-ui/column-picker/ColumnListItem.css", "../../../packages/vuu-table-extras/src/datagrid-configuration-ui/column-picker/ColumnPicker.css", "../../../packages/vuu-table-extras/src/datagrid-configuration-ui/column-type-panel/ColumnTypePanel.css", "../../../packages/vuu-table-extras/src/datagrid-configuration-ui/column-settings-panel/ColumnSettingsPanel.css", "../../../packages/vuu-table-extras/src/datagrid-configuration-ui/settings-panel/GridSettingsPanel.css", "../../../packages/vuu-table-extras/src/datagrid-configuration-ui/calculated-column-panel/CalculatedColumnPanel.css", "../../../packages/vuu-table-extras/src/datagrid-configuration-ui/settings-panel/DatagridSettingsPanel.css", "../../../packages/vuu-table-extras/src/datasource-stats/DatasourceStats.css"],
-  "sourcesContent": [".vuuTable td:has(> .vuuBackgroundCell){\n  padding: 0;\n  text-align: right;\n} \n\n.vuuBackgroundCell {\n  padding-right: var(--salt-size-unit);\n  position: relative;\n  z-index: -1;\n}\n\n.vuuBackgroundCell-flasher {\n  color: transparent;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  z-index: -1;\n}\n\n.vuuBackgroundCell-flasher {\n  text-align: left;\n}\n.vuuBackgroundCell-flasher + .num {\n  padding-left: 8px;\n}\n\n.right .vuuBackgroundCell-flasher {\n  text-align: right;\n}\n.right .vuuBackgroundCell-flasher + .num {\n  padding-right: 8px;\n}\n\n.up1 > .vuuBackgroundCell-flasher {\n  animation-duration: 30s;\n  animation-name: reactbgup1;\n}\n\n.up2 > .vuuBackgroundCell-flasher {\n  animation-duration: 30s;\n  animation-name: reactbgup2;\n}\n\n.down1 > .vuuBackgroundCell-flasher {\n  animation-duration: 30s;\n  animation-name: reactbgdown1;\n}\n\n.down2 > .vuuBackgroundCell-flasher {\n  animation-duration: 30s;\n  animation-name: reactbgdown2;\n}\n\n.up1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {\n  animation-duration: 30s;\n  animation-name: reactarrowup1;\n}\n\n.up2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {\n  animation-duration: 30s;\n  animation-name: reactarrowup2;\n}\n\n.down1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {\n  animation-duration: 30s;\n  animation-name: reactarrowdown1;\n}\n\n.down2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {\n  animation-duration: 30s;\n  animation-name: reactarrowdown2;\n}\n\n.up1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {\n  animation-duration: 30s;\n  animation-name: reactbgarrowup1;\n}\n\n.up2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {\n  animation-duration: 30s;\n  animation-name: reactbgarrowup2;\n}\n\n.down1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {\n  animation-duration: 30s;\n  animation-name: reactbgarrowdown1;\n}\n\n.down2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {\n  animation-duration: 30s;\n  animation-name: reactbgarrowdown2;\n}\n", "@keyframes reactbgup1 {\n    from {\n      background-color: var(--salt-differential-positive-background);\n    }\n    to {\n      background-color: transparent;\n    }\n  }\n  \n  @keyframes reactbgup2 {\n    from {\n      background-color: var(--salt-differential-positive-background);\n    }\n    to {\n      background-color: transparent;\n    }\n  }\n  \n  @keyframes reactbgdown1 {\n    from {\n      background-color: var(--salt-differential-negative-background);\n    }\n    to {\n      background-color: transparent;\n    }\n  }\n  \n  @keyframes reactbgdown2 {\n    from {\n      background-color: var(--salt-differential-negative-background);\n    }\n    to {\n      background-color: transparent;\n    }\n  }\n  \n  @keyframes reactarrowup1 {\n    from {\n      color: var(--salt-differential-positive-foreground);\n    }\n    to {\n      color: transparent;\n    }\n  }\n  \n  @keyframes reactarrowup2 {\n    from {\n      color: var(--salt-differential-positive-foreground);\n    }\n    to {\n      color: transparent;\n    }\n  }\n  \n  @keyframes reactarrowdown1 {\n    from {\n      color: var(--salt-differential-negative-foreground);\n    }\n    to {\n      color: transparent;\n    }\n  }\n  \n  @keyframes reactarrowdown2 {\n    from {\n      color: var(--salt-differential-negative-foreground);\n    }\n    to {\n      color: transparent;\n    }\n  }\n  \n  @keyframes reactbgarrowup1 {\n    0% {\n      color: var(--salt-differential-positive-foreground);\n      background-color: var(--salt-differential-positive-background);\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 reactbgarrowup2 {\n    0% {\n      color: var(--salt-differential-positive-foreground);\n      background-color: var(--salt-differential-positive-background);\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 reactbgarrowdown1 {\n    0% {\n      color: var(--salt-differential-negative-foreground);\n      background-color: var(--salt-differential-negative-background);\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 reactbgarrowdown2 {\n    0% {\n      color: var(--salt-differential-negative-foreground);\n      background-color: var(--salt-differential-negative-background);\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  ", ".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}", "\n.vuuColumnExpressionInput {\n    --vuuFilterEditor-background: var(--salt-container-primary-background);\n    --vuuFilterEditor-color: var(--salt-text-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: var(--tooltip-status-borderColor) var(--salt-container-borderWidth) var(--salt-container-borderStyle); \n    --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);\n    --vuuFilterEditor-suggestion-selectedBackground: var(--salt-selectable-background-selected);\n    --vuuFilterEditor-suggestion-selectedColor: var(--salt-text-primary-foreground);\n    --vuuFilterEditor-suggestion-detailColor: var(--salt-text-secondary-foreground-disabled);\n    --vuuFilterEditor-suggestion-height: 24px;\n    --vuuFilterEditor-variableColor: blue;\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\n.vuuFunctionDoc .function-heading {\n    display: flex;\n    gap: 3px;\n}\n\n.vuuFunctionDoc .function-name {\n    font-style: italic;\n}\n\n.vuuFunctionDoc .param-list {\n    font-style: italic;\n    color: blue;\n    white-space: pre;\n}\n\n.vuuFunctionDoc .function-type {\n    margin-left: auto;\n}\n\n.vuuFunctionDoc .example-container {\n    background-color: var(--salt-container-secondary-background);\n    margin: 6px 0;\n    padding: 3px;\n}\n\n.vuuFunctionDoc .example-expression {\n    font-family: var(--salt-typography-fontFamily-code);\n    margin-left: 8px;\n    margin-top: 6px;\n}\n\n.vuuFunctionDoc .example-result {\n    margin-left: 8px;\n    margin-top: 6px;\n}", ".vuuColumnListItem {\n    --svg-eye-hidden: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0z\"/><path d=\"M4.52 5.934L1.393 2.808l1.415-1.415 19.799 19.8-1.415 1.414-3.31-3.31A10.949 10.949 0 0 1 12 21c-5.392 0-9.878-3.88-10.819-9a10.982 10.982 0 0 1 3.34-6.066zm10.237 10.238l-1.464-1.464a3 3 0 0 1-4.001-4.001L7.828 9.243a5 5 0 0 0 6.929 6.929zM7.974 3.76C9.221 3.27 10.58 3 12 3c5.392 0 9.878 3.88 10.819 9a10.947 10.947 0 0 1-2.012 4.592l-3.86-3.86a5 5 0 0 0-5.68-5.68L7.974 3.761z\"/></svg>');\n    align-items: center;\n    padding: 0 !important;\n}\n\n.vuuColumnListItem-calculated {\n    --vuu-icon-size: 12px;\n    --column-icon-svg: var(--svg-function);\n    --calculated-background: var(--salt-text-secondary-foreground);\n}\n.vuuColumnListItem-hidden {\n    --vuu-icon-size: 14px;\n    --hidden-background: var(--salt-text-secondary-foreground);\n    --hidden-icon-svg: var(--svg-eye-hidden);\n}\n\n.vuuColumnListItem-label {\n    flex: 1 1 auto;\n}\n.vuuColumnListItem-iconType {\n    background-color: var(--calculated-background, transparent);\n    display: inline-block;\n    height: 100%;\n    mask: var(--column-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n    mask-repeat: no-repeat;\n    -webkit-mask: var(--column-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n    -webkit-mask-repeat: no-repeat;\n    width: 20px;\n  }\n\n.vuuColumnListItem-iconHidden {\n    background-color: var(--hidden-background, transparent);\n    display: inline-block;\n    height: 100%;\n    mask: var(--hidden-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n    mask-repeat: no-repeat;\n    -webkit-mask: var(--hidden-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n    -webkit-mask-repeat: no-repeat;\n    width: 20px;\n}", ".vuuColumnPicker {\n\n    --vuu-icon-color: var(--salt-text-primary-foreground);\n    --vuu-icon-left: 0px;\n    --vuu-icon-size: 12px;\n\n    display: flex;\n    flex-shrink: 0;\n\n    gap: calc(var(--salt-size-unit) * 2);\n    width: var(--vuuColumnPicker-width, 100%);\n}\n\n.vuuColumnPicker-listColumn {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n}\n\n.vuuColumnPicker-listContainer {\n    border: solid 1px var(--salt-container-primary-borderColor);\n    margin-right: var(--salt-size-unit)\n}\n\n.vuuColumnPicker-defineColumn {\n    align-items: center;\n    border-top: solid 1px var(--salt-container-primary-borderColor);\n    display: flex;\n    flex: 0 0 calc(100% - var(--salt-size-unit));\n    gap: var(--salt-size-unit);\n    transition: .2s height;\n    margin-top: 12px;\n    height: 48px;\n}\n\n[data-align='right'] .vuuColumnPicker-defineColumn {\n    border-top: none;\n    height: 0;\n}\n\n.vuuColumnPicker-addCalculatedColumn {\n    margin-left: auto;\n    margin-right: var(--salt-size-unit);\n    width: 28px;\n}\n\n", ".vuuColumnTypePanel {\n    --settings-panel-marginTop: 0px;\n}\n\n.vuuColumnTypePanel-renderer {\n    --saltButton-background: var(--salt-container-secondary-background);\n    --saltButton-background-hover: var(--salt-actionable-secondary-background-hover);\n}\n", ".vuuColumnSettingsPanel {\n    --saltFormField-margin: 3px 0;\n    --saltFormField-label-width: 80px;\n    --saltPanel-padding: var(--salt-size-unit);\n    align-items: flex-start;\n    border-left: solid 1px var(--salt-container-primary-borderColor);\n    display: flex;\n    flex-direction: column;\n    flex-shrink: 0;\n    min-width: 220px;\n    padding-left: calc(var(--salt-size-unit) * 2);\n    width: var(--vuuColumnSettings-width, auto);\n\n}\n\n.vuuColumnSettingsPanel-columnTabs {\n    --saltFormField-margin: 0;\n}\n\n.vuuColumnSettingsPanel-columnTabs .saltFormField {\n    margin-left: 0 !important;\n}\n\n.vuuColumnSettingsPanel .saltPanel {\n    --saltFormField-margin: 3px 0;\n    margin-top: var(--settings-panel-marginTop, var(--salt-size-unit));\n\n    align-items: stretch;\n    display: flex;\n    flex-direction: column;\n    gap: var(--salt-size-unit);\n\n}\n\n.vuuColumnPanelSwitch {\n    white-space: nowrap;\n    width: 100%;\n}\n\n.vuuColumnSettingsPanel .saltSwitch {\n    margin-left: auto;;\n}\n", ".vuuGridSettingsPanel {\n    --saltFormField-label-width: 150px;\n}", ".vuuCalculatedColumnPanel {\n    display: flex;\n    flex-direction: column;\n    gap: var(--salt-size-unit);\n}", ".vuuDialog-gridConfig {\n    \n}\n\n    \n\n  .vuuDatagridSettingsPanel {\n    --svg-table-settings: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><rect height=\"3\" width=\"5\" x=\"1\" y=\"10\" /><rect height=\"3\" width=\"5\" x=\"1\" y=\"6\" /><rect height=\"3\" width=\"10\" x=\"7\" y=\"10\" /><rect height=\"3\" width=\"10\" x=\"7\" y=\"6\" /><path d=\"M6,17H1.5a.5.5,0,0,1-.5-.5V14H6Z\" /><path d=\"M16.5,17H7V14H17v2.5A.5.5,0,0,1,16.5,17Z\" /><path d=\"M16.5,1H1.5a.5.5,0,0,0-.5.5V5H17V1.5A.5.5,0,0,0,16.5,1Z\" /></svg>');\n    --svg-column-chooser: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M16,1H10V17h6a1,1,0,0,0,1-1V2A1,1,0,0,0,16,1Z\" /><path d=\"M8,1H2A1,1,0,0,0,1,2V16a1,1,0,0,0,1,1H8Z\" /></svg>');\n    --svg-column-settings: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M5,17H1.5a.5.5,0,0,1-.5-.5V1.5A.5.5,0,0,1,1.5,1H5Z\" /><path d=\"M8.71,15.4685a1.8065,1.8065,0,0,1-1.11-1.665v-.607a1.806,1.806,0,0,1,1.11-1.665,1.807,1.807,0,0,1,.3875-1.974l.459-.4595a1.792,1.792,0,0,1,1.276-.5285c.057,0,.1115.0115.167.0165V1H7V17H8.773A1.81349,1.81349,0,0,1,8.71,15.4685Z\" /><path d=\"M13.1965,7.6h.607A1.8065,1.8065,0,0,1,15.468,8.7095,1.77249,1.77249,0,0,1,17,8.7815V1.5a.5.5,0,0,0-.5-.5H13V7.63A1.70987,1.70987,0,0,1,13.1965,7.6Z\" /><path d=\"M17.5965,12.893H16.534a3.0709,3.0709,0,0,0-.45-1.0895l.7565-.7565a.3035.3035,0,0,0,0-.429l-.46-.46a.3035.3035,0,0,0-.429,0l-.7555.757a3.07263,3.07263,0,0,0-1.089-.45V9.4035A.3035.3035,0,0,0,13.8035,9.1h-.607a.3035.3035,0,0,0-.3035.3035V10.466a3.07263,3.07263,0,0,0-1.089.45l-.7565-.7565a.3035.3035,0,0,0-.429,0l-.46.46a.3035.3035,0,0,0,0,.429l.7565.7565a3.0709,3.0709,0,0,0-.45,1.0895H9.4035A.3035.3035,0,0,0,9.1,13.198v.607a.3035.3035,0,0,0,.3035.3035H10.466a3.0709,3.0709,0,0,0,.45,1.0895l-.7565.7565a.3035.3035,0,0,0,0,.429l.46.46a.3035.3035,0,0,0,.429,0l.7565-.7565a3.07263,3.07263,0,0,0,1.089.45v1.0625a.3035.3035,0,0,0,.3035.3035h.607a.3035.3035,0,0,0,.3035-.3035V16.534a3.07263,3.07263,0,0,0,1.089-.45l.7565.7565a.3035.3035,0,0,0,.429,0l.46-.46a.3035.3035,0,0,0,0-.429l-.7575-.7555a3.0709,3.0709,0,0,0,.45-1.0895h1.0625a.3035.3035,0,0,0,.3035-.3035v-.6065a.3035.3035,0,0,0-.3035-.3035ZM13.5,15.25a1.75,1.75,0,1,1,1.75-1.75A1.75,1.75,0,0,1,13.5,15.25Z\" /></svg>');\n\n\n    \n\n    --saltToolbar-background : transparent;\n    --vuuView-borderStyle: solid;\n    --vuuColumnPicker-width: 100%;\n    --vuuColumnSettings-width: 50%;\n    background-color: var(--salt-container-primary-background);\n    display: flex;\n    flex-direction: column;\n    height: 442px;\n    width: 520px;\n}\n\n[data-icon='column-chooser']{\n  --vuu-icon-svg: var(--svg-column-chooser);\n}\n[data-icon='column-settings']{\n  --vuu-icon-svg: var(--svg-column-settings);\n}\n[data-icon='table-settings']{\n  --vuu-icon-svg: var(--svg-table-settings);\n}\n[data-icon='define-column']{\n  --vuu-icon-svg: var(--svg-function);\n}\n\n.vuuDatagridSettingsPanel-header {\nflex: 0 0 50px;\n}\n\n.vuuDatagridSettingsPanel-stack {\n    flex: 1;\n    gap: 24px;\n    overflow: hidden;\n\n}\n\n.vuuDatagridSettingsPanel-stack > .saltToolbar {\n    --saltToolbar-background: var(--salt-container-secondary-background);\n    --vuu-icon-color: var(--salt-text-secondary-foreground);\n    --vuu-icon-size: 18px;\n    --vuu-icon-height: 36px;\n    --vuu-icon-width: 36px;\n    border-bottom: none;\n}\n\n.vuuDatagridSettingsPanel-stack > .saltToolbar .saltTabstrip {\n    --tabs-activationIndicator-inset: 0px auto 0px 1px;\n}\n\n.vuuDatagridSettingsPanel-stack > .saltToolbar .saltTab[aria-selected='true'],\n.vuuDatagridSettingsPanel-stack > .saltToolbar .saltTab:hover{\n    --vuu-icon-color: var(--salt-text-primary-foreground);\n \n}\n\n.vuuDatagridSettingsPanel-stack > .saltToolbar {\n    --saltToolbar-background: var(--salt-container-secondary-background);\n}\n\n.vuuDatagridSettingsPanel-columnPanels {\n    display: flex;\n    flex-flow: nowrap;\n    gap: calc(var(--salt-size-unit) * 1);\n    margin: var(--salt-size-unit) 0;\n    overflow: hidden;\n    position: relative;\n    /* margin: calc(var(--salt-size-unit) * 3); */\n}\n\n.vuuDatagridSettingsPanel-columnPanels > * {\n    transition: .3s transform ease-out;\n    transform: translate3d(0px, 0px, 0px);\n}\n\n.vuuDatagridSettingsPanel-columnPanels[data-align='right'] > * {\n    transform: translate3d(-235px, 0px, 0px);\n}\n\n\n.vuuDatagridSettingsPanel-columnToolbar {\n    --saltButton-width: 60px;\n}\n\n.vuuDatagridSettingsPanel-columnToolbar > .Responsive-inner {\n    align-items: center;\n}\n\n.vuuDatagridSettingsPanel-buttonBar {\n    align-items: center;\n    border-top: solid 1px var(--salt-separable-primary-borderColor);\n    display: flex;\n    flex: 0 0 40px;\n    gap: var(--salt-size-unit);\n    justify-content: flex-end;  \n    padding: 0 var(--salt-size-unit);\n}\n    ", ".vuuDatasourceStats {\n    display: flex;\n    gap: var(--salt-size-unit);\n}"],
-  "mappings": "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",
+  "sources": ["../../../packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCell.css", "../../../packages/vuu-table-extras/src/cell-renderers/background-cell/FlashingBackground.css", "../../../packages/vuu-table-extras/src/cell-renderers/progress-cell/ProgressCell.css", "../../../packages/vuu-table-extras/src/column-expression-input/ColumnExpressionInput.css", "../../../packages/vuu-table-extras/src/datagrid-configuration-ui/column-picker/ColumnListItem.css", "../../../packages/vuu-table-extras/src/datagrid-configuration-ui/column-picker/ColumnPicker.css", "../../../packages/vuu-table-extras/src/datagrid-configuration-ui/column-type-panel/ColumnTypePanel.css", "../../../packages/vuu-table-extras/src/datagrid-configuration-ui/column-settings-panel/ColumnSettingsPanel.css", "../../../packages/vuu-table-extras/src/datagrid-configuration-ui/settings-panel/GridSettingsPanel.css", "../../../packages/vuu-table-extras/src/datagrid-configuration-ui/calculated-column-panel/CalculatedColumnPanel.css", "../../../packages/vuu-table-extras/src/datagrid-configuration-ui/settings-panel/DatagridSettingsPanel.css", "../../../packages/vuu-table-extras/src/datasource-stats/DatasourceStats.css", "../../../packages/vuu-table-extras/src/table-settings/column-type-panel/ColumnTypePanel.css", "../../../packages/vuu-table-extras/src/table-settings/column-settings-panel/ColumnSettingsPanel.css"],
+  "sourcesContent": [".vuuTable td:has(> .vuuBackgroundCell){\n  padding: 0;\n  text-align: right;\n} \n\n.vuuBackgroundCell {\n  padding-right: var(--salt-size-unit);\n  position: relative;\n  z-index: -1;\n}\n\n.vuuBackgroundCell-flasher {\n  color: transparent;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  z-index: -1;\n}\n\n.vuuBackgroundCell-flasher {\n  text-align: left;\n}\n.vuuBackgroundCell-flasher + .num {\n  padding-left: 8px;\n}\n\n.right .vuuBackgroundCell-flasher {\n  text-align: right;\n}\n.right .vuuBackgroundCell-flasher + .num {\n  padding-right: 8px;\n}\n\n.up1 > .vuuBackgroundCell-flasher {\n  animation-duration: 30s;\n  animation-name: reactbgup1;\n}\n\n.up2 > .vuuBackgroundCell-flasher {\n  animation-duration: 30s;\n  animation-name: reactbgup2;\n}\n\n.down1 > .vuuBackgroundCell-flasher {\n  animation-duration: 30s;\n  animation-name: reactbgdown1;\n}\n\n.down2 > .vuuBackgroundCell-flasher {\n  animation-duration: 30s;\n  animation-name: reactbgdown2;\n}\n\n.up1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {\n  animation-duration: 30s;\n  animation-name: reactarrowup1;\n}\n\n.up2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {\n  animation-duration: 30s;\n  animation-name: reactarrowup2;\n}\n\n.down1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {\n  animation-duration: 30s;\n  animation-name: reactarrowdown1;\n}\n\n.down2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {\n  animation-duration: 30s;\n  animation-name: reactarrowdown2;\n}\n\n.up1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {\n  animation-duration: 30s;\n  animation-name: reactbgarrowup1;\n}\n\n.up2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {\n  animation-duration: 30s;\n  animation-name: reactbgarrowup2;\n}\n\n.down1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {\n  animation-duration: 30s;\n  animation-name: reactbgarrowdown1;\n}\n\n.down2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {\n  animation-duration: 30s;\n  animation-name: reactbgarrowdown2;\n}\n", "@keyframes reactbgup1 {\n    from {\n      background-color: var(--salt-differential-positive-background);\n    }\n    to {\n      background-color: transparent;\n    }\n  }\n  \n  @keyframes reactbgup2 {\n    from {\n      background-color: var(--salt-differential-positive-background);\n    }\n    to {\n      background-color: transparent;\n    }\n  }\n  \n  @keyframes reactbgdown1 {\n    from {\n      background-color: var(--salt-differential-negative-background);\n    }\n    to {\n      background-color: transparent;\n    }\n  }\n  \n  @keyframes reactbgdown2 {\n    from {\n      background-color: var(--salt-differential-negative-background);\n    }\n    to {\n      background-color: transparent;\n    }\n  }\n  \n  @keyframes reactarrowup1 {\n    from {\n      color: var(--salt-differential-positive-foreground);\n    }\n    to {\n      color: transparent;\n    }\n  }\n  \n  @keyframes reactarrowup2 {\n    from {\n      color: var(--salt-differential-positive-foreground);\n    }\n    to {\n      color: transparent;\n    }\n  }\n  \n  @keyframes reactarrowdown1 {\n    from {\n      color: var(--salt-differential-negative-foreground);\n    }\n    to {\n      color: transparent;\n    }\n  }\n  \n  @keyframes reactarrowdown2 {\n    from {\n      color: var(--salt-differential-negative-foreground);\n    }\n    to {\n      color: transparent;\n    }\n  }\n  \n  @keyframes reactbgarrowup1 {\n    0% {\n      color: var(--salt-differential-positive-foreground);\n      background-color: var(--salt-differential-positive-background);\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 reactbgarrowup2 {\n    0% {\n      color: var(--salt-differential-positive-foreground);\n      background-color: var(--salt-differential-positive-background);\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 reactbgarrowdown1 {\n    0% {\n      color: var(--salt-differential-negative-foreground);\n      background-color: var(--salt-differential-negative-background);\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 reactbgarrowdown2 {\n    0% {\n      color: var(--salt-differential-negative-foreground);\n      background-color: var(--salt-differential-negative-background);\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  ", ".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}", "\n.vuuColumnExpressionInput {\n    --vuuFilterEditor-background: var(--salt-container-primary-background);\n    --vuuFilterEditor-color: var(--salt-text-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: var(--tooltip-status-borderColor) var(--salt-container-borderWidth) var(--salt-container-borderStyle); \n    --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);\n    --vuuFilterEditor-suggestion-selectedBackground: var(--salt-selectable-background-selected);\n    --vuuFilterEditor-suggestion-selectedColor: var(--salt-text-primary-foreground);\n    --vuuFilterEditor-suggestion-detailColor: var(--salt-text-secondary-foreground-disabled);\n    --vuuFilterEditor-suggestion-height: 24px;\n    --vuuFilterEditor-variableColor: blue;\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\n.vuuFunctionDoc .function-heading {\n    display: flex;\n    gap: 3px;\n}\n\n.vuuFunctionDoc .function-name {\n    font-style: italic;\n}\n\n.vuuFunctionDoc .param-list {\n    font-style: italic;\n    color: blue;\n    white-space: pre;\n}\n\n.vuuFunctionDoc .function-type {\n    margin-left: auto;\n}\n\n.vuuFunctionDoc .example-container {\n    background-color: var(--salt-container-secondary-background);\n    margin: 6px 0;\n    padding: 3px;\n}\n\n.vuuFunctionDoc .example-expression {\n    font-family: var(--salt-typography-fontFamily-code);\n    margin-left: 8px;\n    margin-top: 6px;\n}\n\n.vuuFunctionDoc .example-result {\n    margin-left: 8px;\n    margin-top: 6px;\n}", ".vuuColumnListItem {\n    --svg-eye-hidden: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0z\"/><path d=\"M4.52 5.934L1.393 2.808l1.415-1.415 19.799 19.8-1.415 1.414-3.31-3.31A10.949 10.949 0 0 1 12 21c-5.392 0-9.878-3.88-10.819-9a10.982 10.982 0 0 1 3.34-6.066zm10.237 10.238l-1.464-1.464a3 3 0 0 1-4.001-4.001L7.828 9.243a5 5 0 0 0 6.929 6.929zM7.974 3.76C9.221 3.27 10.58 3 12 3c5.392 0 9.878 3.88 10.819 9a10.947 10.947 0 0 1-2.012 4.592l-3.86-3.86a5 5 0 0 0-5.68-5.68L7.974 3.761z\"/></svg>');\n    align-items: center;\n    padding: 0 !important;\n}\n\n.vuuColumnListItem-calculated {\n    --vuu-icon-size: 12px;\n    --column-icon-svg: var(--svg-function);\n    --calculated-background: var(--salt-text-secondary-foreground);\n}\n.vuuColumnListItem-hidden {\n    --vuu-icon-size: 14px;\n    --hidden-background: var(--salt-text-secondary-foreground);\n    --hidden-icon-svg: var(--svg-eye-hidden);\n}\n\n.vuuColumnListItem-label {\n    flex: 1 1 auto;\n}\n.vuuColumnListItem-iconType {\n    background-color: var(--calculated-background, transparent);\n    display: inline-block;\n    height: 100%;\n    mask: var(--column-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n    mask-repeat: no-repeat;\n    -webkit-mask: var(--column-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n    -webkit-mask-repeat: no-repeat;\n    width: 20px;\n  }\n\n.vuuColumnListItem-iconHidden {\n    background-color: var(--hidden-background, transparent);\n    display: inline-block;\n    height: 100%;\n    mask: var(--hidden-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n    mask-repeat: no-repeat;\n    -webkit-mask: var(--hidden-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n    -webkit-mask-repeat: no-repeat;\n    width: 20px;\n}", ".vuuColumnPicker {\n\n    --vuu-icon-color: var(--salt-text-primary-foreground);\n    --vuu-icon-left: 0px;\n    --vuu-icon-size: 12px;\n\n    display: flex;\n    flex-shrink: 0;\n\n    gap: calc(var(--salt-size-unit) * 2);\n    width: var(--vuuColumnPicker-width, 100%);\n}\n\n.vuuColumnPicker-listColumn {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n}\n\n.vuuColumnPicker-listContainer {\n    border: solid 1px var(--salt-container-primary-borderColor);\n    margin-right: var(--salt-size-unit)\n}\n\n.vuuColumnPicker-defineColumn {\n    align-items: center;\n    border-top: solid 1px var(--salt-container-primary-borderColor);\n    display: flex;\n    flex: 0 0 calc(100% - var(--salt-size-unit));\n    gap: var(--salt-size-unit);\n    transition: .2s height;\n    margin-top: 12px;\n    height: 48px;\n}\n\n[data-align='right'] .vuuColumnPicker-defineColumn {\n    border-top: none;\n    height: 0;\n}\n\n.vuuColumnPicker-addCalculatedColumn {\n    margin-left: auto;\n    margin-right: var(--salt-size-unit);\n    width: 28px;\n}\n\n", ".vuuColumnTypePanel {\n    --settings-panel-marginTop: 0px;\n}\n\n.vuuColumnTypePanel-renderer {\n    --saltButton-background: var(--salt-container-secondary-background);\n    --saltButton-background-hover: var(--salt-actionable-secondary-background-hover);\n}\n", ".vuuColumnSettingsPanel {\n    --saltFormField-margin: 3px 0;\n    --saltFormField-label-width: 80px;\n    --saltPanel-padding: var(--salt-size-unit);\n    align-items: flex-start;\n    border-left: solid 1px var(--salt-container-primary-borderColor);\n    display: flex;\n    flex-direction: column;\n    flex-shrink: 0;\n    min-width: 220px;\n    padding-left: calc(var(--salt-size-unit) * 2);\n    width: var(--vuuColumnSettings-width, auto);\n\n}\n\n.vuuColumnSettingsPanel-columnTabs {\n    --saltFormField-margin: 0;\n}\n\n.vuuColumnSettingsPanel-columnTabs .saltFormField {\n    margin-left: 0 !important;\n}\n\n.vuuColumnSettingsPanel .saltPanel {\n    --saltFormField-margin: 3px 0;\n    margin-top: var(--settings-panel-marginTop, var(--salt-size-unit));\n\n    align-items: stretch;\n    display: flex;\n    flex-direction: column;\n    gap: var(--salt-size-unit);\n\n}\n\n.vuuColumnPanelSwitch {\n    white-space: nowrap;\n    width: 100%;\n}\n\n.vuuColumnSettingsPanel .saltSwitch {\n    margin-left: auto;;\n}\n", ".vuuGridSettingsPanel {\n    --saltFormField-label-width: 150px;\n}", ".vuuCalculatedColumnPanel {\n    display: flex;\n    flex-direction: column;\n    gap: var(--salt-size-unit);\n}", ".vuuDialog-gridConfig {\n    \n}\n\n    \n\n  .vuuDatagridSettingsPanel {\n    --svg-table-settings: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><rect height=\"3\" width=\"5\" x=\"1\" y=\"10\" /><rect height=\"3\" width=\"5\" x=\"1\" y=\"6\" /><rect height=\"3\" width=\"10\" x=\"7\" y=\"10\" /><rect height=\"3\" width=\"10\" x=\"7\" y=\"6\" /><path d=\"M6,17H1.5a.5.5,0,0,1-.5-.5V14H6Z\" /><path d=\"M16.5,17H7V14H17v2.5A.5.5,0,0,1,16.5,17Z\" /><path d=\"M16.5,1H1.5a.5.5,0,0,0-.5.5V5H17V1.5A.5.5,0,0,0,16.5,1Z\" /></svg>');\n    --svg-column-chooser: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M16,1H10V17h6a1,1,0,0,0,1-1V2A1,1,0,0,0,16,1Z\" /><path d=\"M8,1H2A1,1,0,0,0,1,2V16a1,1,0,0,0,1,1H8Z\" /></svg>');\n    --svg-column-settings: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M5,17H1.5a.5.5,0,0,1-.5-.5V1.5A.5.5,0,0,1,1.5,1H5Z\" /><path d=\"M8.71,15.4685a1.8065,1.8065,0,0,1-1.11-1.665v-.607a1.806,1.806,0,0,1,1.11-1.665,1.807,1.807,0,0,1,.3875-1.974l.459-.4595a1.792,1.792,0,0,1,1.276-.5285c.057,0,.1115.0115.167.0165V1H7V17H8.773A1.81349,1.81349,0,0,1,8.71,15.4685Z\" /><path d=\"M13.1965,7.6h.607A1.8065,1.8065,0,0,1,15.468,8.7095,1.77249,1.77249,0,0,1,17,8.7815V1.5a.5.5,0,0,0-.5-.5H13V7.63A1.70987,1.70987,0,0,1,13.1965,7.6Z\" /><path d=\"M17.5965,12.893H16.534a3.0709,3.0709,0,0,0-.45-1.0895l.7565-.7565a.3035.3035,0,0,0,0-.429l-.46-.46a.3035.3035,0,0,0-.429,0l-.7555.757a3.07263,3.07263,0,0,0-1.089-.45V9.4035A.3035.3035,0,0,0,13.8035,9.1h-.607a.3035.3035,0,0,0-.3035.3035V10.466a3.07263,3.07263,0,0,0-1.089.45l-.7565-.7565a.3035.3035,0,0,0-.429,0l-.46.46a.3035.3035,0,0,0,0,.429l.7565.7565a3.0709,3.0709,0,0,0-.45,1.0895H9.4035A.3035.3035,0,0,0,9.1,13.198v.607a.3035.3035,0,0,0,.3035.3035H10.466a3.0709,3.0709,0,0,0,.45,1.0895l-.7565.7565a.3035.3035,0,0,0,0,.429l.46.46a.3035.3035,0,0,0,.429,0l.7565-.7565a3.07263,3.07263,0,0,0,1.089.45v1.0625a.3035.3035,0,0,0,.3035.3035h.607a.3035.3035,0,0,0,.3035-.3035V16.534a3.07263,3.07263,0,0,0,1.089-.45l.7565.7565a.3035.3035,0,0,0,.429,0l.46-.46a.3035.3035,0,0,0,0-.429l-.7575-.7555a3.0709,3.0709,0,0,0,.45-1.0895h1.0625a.3035.3035,0,0,0,.3035-.3035v-.6065a.3035.3035,0,0,0-.3035-.3035ZM13.5,15.25a1.75,1.75,0,1,1,1.75-1.75A1.75,1.75,0,0,1,13.5,15.25Z\" /></svg>');\n\n\n    \n\n    --saltToolbar-background : transparent;\n    --vuuView-borderStyle: solid;\n    --vuuColumnPicker-width: 100%;\n    --vuuColumnSettings-width: 50%;\n    background-color: var(--salt-container-primary-background);\n    display: flex;\n    flex-direction: column;\n    height: 442px;\n    width: 520px;\n}\n\n[data-icon='column-chooser']{\n  --vuu-icon-svg: var(--svg-column-chooser);\n}\n[data-icon='column-settings']{\n  --vuu-icon-svg: var(--svg-column-settings);\n}\n[data-icon='table-settings']{\n  --vuu-icon-svg: var(--svg-table-settings);\n}\n[data-icon='define-column']{\n  --vuu-icon-svg: var(--svg-function);\n}\n\n.vuuDatagridSettingsPanel-header {\nflex: 0 0 50px;\n}\n\n.vuuDatagridSettingsPanel-stack {\n    flex: 1;\n    gap: 24px;\n    overflow: hidden;\n\n}\n\n.vuuDatagridSettingsPanel-stack > .saltToolbar {\n    --saltToolbar-background: var(--salt-container-secondary-background);\n    --vuu-icon-color: var(--salt-text-secondary-foreground);\n    --vuu-icon-size: 18px;\n    --vuu-icon-height: 36px;\n    --vuu-icon-width: 36px;\n    border-bottom: none;\n}\n\n.vuuDatagridSettingsPanel-stack > .saltToolbar .saltTabstrip {\n    --tabs-activationIndicator-inset: 0px auto 0px 1px;\n}\n\n.vuuDatagridSettingsPanel-stack > .saltToolbar .saltTab[aria-selected='true'],\n.vuuDatagridSettingsPanel-stack > .saltToolbar .saltTab:hover{\n    --vuu-icon-color: var(--salt-text-primary-foreground);\n \n}\n\n.vuuDatagridSettingsPanel-stack > .saltToolbar {\n    --saltToolbar-background: var(--salt-container-secondary-background);\n}\n\n.vuuDatagridSettingsPanel-columnPanels {\n    display: flex;\n    flex-flow: nowrap;\n    gap: calc(var(--salt-size-unit) * 1);\n    margin: var(--salt-size-unit) 0;\n    overflow: hidden;\n    position: relative;\n    /* margin: calc(var(--salt-size-unit) * 3); */\n}\n\n.vuuDatagridSettingsPanel-columnPanels > * {\n    transition: .3s transform ease-out;\n    transform: translate3d(0px, 0px, 0px);\n}\n\n.vuuDatagridSettingsPanel-columnPanels[data-align='right'] > * {\n    transform: translate3d(-235px, 0px, 0px);\n}\n\n\n.vuuDatagridSettingsPanel-columnToolbar {\n    --saltButton-width: 60px;\n}\n\n.vuuDatagridSettingsPanel-columnToolbar > .Responsive-inner {\n    align-items: center;\n}\n\n.vuuDatagridSettingsPanel-buttonBar {\n    align-items: center;\n    border-top: solid 1px var(--salt-separable-primary-borderColor);\n    display: flex;\n    flex: 0 0 40px;\n    gap: var(--salt-size-unit);\n    justify-content: flex-end;  \n    padding: 0 var(--salt-size-unit);\n}\n    ", ".vuuDatasourceStats {\n    display: flex;\n    gap: var(--salt-size-unit);\n}", ".vuuColumnTypePanel {\n    --settings-panel-marginTop: 0px;\n}\n\n.vuuColumnTypePanel-renderer {\n    --saltButton-background: var(--salt-container-secondary-background);\n    --saltButton-background-hover: var(--salt-actionable-secondary-background-hover);\n}\n", ".vuuColumnSettingsPanel {\n    --saltFormField-margin: 3px 0;\n    --saltFormField-label-width: 80px;\n    --saltPanel-padding: var(--salt-size-unit);\n    align-items: flex-start;\n    border-left: solid 1px var(--salt-container-primary-borderColor);\n    display: flex;\n    flex-direction: column;\n    flex-shrink: 0;\n    min-width: 220px;\n    padding-left: calc(var(--salt-size-unit) * 2);\n    width: var(--vuuColumnSettings-width, auto);\n\n}\n\n.vuuColumnSettingsPanel-columnTabs {\n    --saltFormField-margin: 0;\n}\n\n.vuuColumnSettingsPanel-columnTabs .saltFormField {\n    margin-left: 0 !important;\n}\n\n.vuuColumnSettingsPanel .saltPanel {\n    --saltFormField-margin: 3px 0;\n    margin-top: var(--settings-panel-marginTop, var(--salt-size-unit));\n\n    align-items: stretch;\n    display: flex;\n    flex-direction: column;\n    gap: var(--salt-size-unit);\n\n}\n\n.vuuColumnPanelSwitch {\n    white-space: nowrap;\n    width: 100%;\n}\n\n.vuuColumnSettingsPanel .saltSwitch {\n    margin-left: auto;;\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,20 +1,21 @@
 {
   "name": "@vuu-ui/vuu-table-extras",
-  "version": "0.7.6-debug",
+  "version": "0.8.0-debug",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-filter-types": "0.7.6-debug",
-    "@vuu-ui/vuu-protocol-types": "0.7.6-debug"
+    "@vuu-ui/vuu-filter-types": "0.8.0-debug",
+    "@vuu-ui/vuu-protocol-types": "0.8.0-debug"
   },
   "dependencies": {
-    "@vuu-ui/vuu-codemirror": "0.7.6-debug",
-    "@vuu-ui/vuu-data": "0.7.6-debug",
-    "@vuu-ui/vuu-layout": "0.7.6-debug",
-    "@vuu-ui/vuu-popups": "0.7.6-debug",
-    "@vuu-ui/vuu-utils": "0.7.6-debug",
+    "@vuu-ui/vuu-codemirror": "0.8.0-debug",
+    "@vuu-ui/vuu-data": "0.8.0-debug",
+    "@vuu-ui/vuu-data-react": "0.8.0-debug",
+    "@vuu-ui/vuu-datagrid-types": "0.8.0-debug",
+    "@vuu-ui/vuu-layout": "0.8.0-debug",
+    "@vuu-ui/vuu-popups": "0.8.0-debug",
+    "@vuu-ui/vuu-utils": "0.8.0-debug",
     "@heswell/salt-lab": "1.0.0-alpha.2",
-    "@lezer/common": "1.0.2",
     "@lezer/lr": "1.3.4",
     "@salt-ds/core": "1.2.0"
   },
@@ -28,8 +29,10 @@
     "cjs",
     "esm",
     "index.css",
-    "index.css.map"
+    "index.css.map",
+    "/types"
   ],
   "module": "esm/index.js",
-  "main": "cjs/index.js"
+  "main": "cjs/index.js",
+  "types": "types/index.d.ts"
 }

package/types/cell-renderers/background-cell/BackgroundCell.d.ts

@@ -0,0 +1,2 @@
+import "./BackgroundCell.css";
+import "./FlashingBackground.css";

package/types/cell-renderers/background-cell/index.d.ts

@@ -0,0 +1 @@
+export * from "./BackgroundCell";

package/types/cell-renderers/background-cell/useDirection.d.ts

@@ -0,0 +1,3 @@
+import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { valueChangeDirection } from "@vuu-ui/vuu-utils";
+export declare function useDirection(key: string, value: unknown, column: KeyedColumnDescriptor): valueChangeDirection;

package/types/cell-renderers/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./background-cell";
+export * from "./progress-cell";

package/types/cell-renderers/progress-cell/ProgressCell.d.ts

@@ -0,0 +1 @@
+import "./ProgressCell.css";

package/types/cell-renderers/progress-cell/index.d.ts

@@ -0,0 +1 @@
+export * from "./ProgressCell";

package/types/column-expression-input/ColumnExpressionInput.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from "react";
+import { ExpressionSuggestionConsumer } from "./useColumnExpressionEditor";
+import "./ColumnExpressionInput.css";
+import { ColumnDefinitionExpression } from "./column-language-parser";
+export interface ColumnExpressionInputProps extends ExpressionSuggestionConsumer, Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    onChange?: (source: string, expression: ColumnDefinitionExpression | undefined) => void;
+    onSubmitExpression?: (source: string, expression: ColumnDefinitionExpression | undefined) => void;
+}
+export declare const ColumnExpressionInput: ({ onChange, onSubmitExpression, suggestionProvider, }: ColumnExpressionInputProps) => JSX.Element;

package/types/column-expression-input/column-function-descriptors.d.ts

@@ -0,0 +1,15 @@
+export type ColumnFunctionDescriptor = {
+    accepts: "string" | "number" | "any" | Array<"string" | "number">;
+    description: string;
+    example: {
+        expression: string;
+        result: string;
+    };
+    name: string;
+    params: {
+        count?: number;
+        description: string;
+    };
+    type: "string" | "number" | "boolean" | "variable";
+};
+export declare const columnFunctionDescriptors: ColumnFunctionDescriptor[];

package/types/column-expression-input/column-language-parser/ColumnExpressionLanguage.d.ts

@@ -0,0 +1,2 @@
+import { LanguageSupport } from "@vuu-ui/vuu-codemirror";
+export declare const columnExpressionLanguageSupport: () => LanguageSupport;

package/types/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.d.ts

@@ -0,0 +1,58 @@
+import { Tree } from "@vuu-ui/vuu-codemirror";
+import { RelationalExpression } from "./generated/column-parser.terms";
+type expressionType = "arithmeticExpression" | "booleanCondition" | "booleanLiteralExpression" | "callExpression" | "colExpression" | "conditionalExpression" | "numericLiteralExpression" | "relationalExpression" | "stringLiteralExpression" | "unknown";
+type arithmeticOp = "*" | "/" | "+" | "-" | "unknown";
+type booleanOp = "and" | "or";
+type relationalOp = "=" | "!=" | ">" | ">=" | "<" | "<=" | "unknown";
+export interface Expression {
+    type: expressionType;
+    expressions?: Expression[];
+    toJSON?: () => unknown;
+    value?: string | number | boolean;
+}
+interface BooleanLiteralExpression {
+    type: "booleanLiteralExpression";
+    value: boolean;
+}
+interface NumericLiteralExpression {
+    type: "numericLiteralExpression";
+    value: number;
+}
+interface StringLiteralExpression {
+    type: "stringLiteralExpression";
+    value: string;
+}
+interface ArithmeticExpression extends Expression {
+    expressions: [Expression, Expression];
+    op: arithmeticOp;
+    type: "arithmeticExpression";
+}
+interface BooleanCondition extends Expression {
+    expressions: Expression[];
+    op: booleanOp;
+    type: "booleanCondition";
+}
+interface RelationalExpression extends Expression {
+    expressions: Expression[];
+    op: relationalOp;
+    type: "relationalExpression";
+}
+interface ColExpression extends Expression {
+    column?: string;
+    type: "colExpression";
+}
+interface CallExpression extends Expression {
+    arguments: Expression[];
+    functionName?: string;
+    type: "callExpression";
+}
+type ConditionExpression = RelationalExpression | BooleanCondition;
+interface ConditionalExpression extends Expression {
+    type: "conditionalExpression";
+    condition: ConditionExpression;
+    truthyExpression: Expression;
+    falsyExpression: Expression;
+}
+export type ColumnDefinitionExpression = ArithmeticExpression | BooleanLiteralExpression | CallExpression | ColExpression | ConditionalExpression | NumericLiteralExpression | StringLiteralExpression;
+export declare const walkTree: (tree: Tree, source: string) => ColumnDefinitionExpression;
+export {};

package/types/column-expression-input/column-language-parser/column-expression-parse-utils.d.ts

@@ -0,0 +1,5 @@
+import { SyntaxNode } from "@vuu-ui/vuu-codemirror";
+export declare const ColumnNamedTerms: readonly string[];
+export declare const isCompleteExpression: (src: string) => boolean;
+export declare const lastNamedChild: (node: SyntaxNode) => SyntaxNode | null;
+export declare const isCompleteRelationalExpression: (node?: SyntaxNode) => boolean;

package/types/column-expression-input/column-language-parser/generated/column-parser.d.ts

@@ -0,0 +1,2 @@
+export const parser: LRParser;
+import { LRParser } from "@lezer/lr";

package/types/column-expression-input/column-language-parser/generated/column-parser.terms.d.ts

@@ -0,0 +1,24 @@
+export const ColumnDefinitionExpression: 1;
+export const Column: 2;
+export const Number: 3;
+export const String: 4;
+export const True: 5;
+export const False: 6;
+export const ParenthesizedExpression: 7;
+export const OpenBrace: 8;
+export const CloseBrace: 9;
+export const ArithmeticExpression: 10;
+export const Divide: 11;
+export const Times: 12;
+export const Plus: 13;
+export const Minus: 14;
+export const ConditionalExpression: 15;
+export const If: 16;
+export const RelationalExpression: 17;
+export const RelationalOperator: 18;
+export const AndCondition: 19;
+export const OrCondition: 20;
+export const Comma: 21;
+export const CallExpression: 22;
+export const Function: 23;
+export const ArgList: 24;

package/types/column-expression-input/column-language-parser/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ColumnExpressionLanguage";
+export * from "./ColumnExpressionTreeWalker";
+export * from "./column-expression-parse-utils";

package/types/column-expression-input/column-language-parser/test.d.mts

@@ -0,0 +1 @@
+export function walkTree(tree: any, source: any): void;

package/types/column-expression-input/functionDocInfo.d.ts

@@ -0,0 +1,2 @@
+import { ColumnFunctionDescriptor } from "./column-function-descriptors";
+export declare const functionDocInfo: ({ name, description, example, params, type, }: ColumnFunctionDescriptor) => HTMLElement;

package/types/column-expression-input/highlighting.d.ts

@@ -0,0 +1 @@
+export declare const vuuHighlighting: import("@codemirror/state").Extension;

package/types/column-expression-input/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./ColumnExpressionInput";
+export * from "./column-language-parser";
+export * from "./useColumnExpressionEditor";
+export * from "./useColumnExpressionSuggestionProvider";

package/types/column-expression-input/theme.d.ts

@@ -0,0 +1 @@
+export declare const vuuTheme: import("@codemirror/state").Extension;

package/types/column-expression-input/useColumnAutoComplete.d.ts

@@ -0,0 +1,6 @@
+import { CompletionSource } from "@vuu-ui/vuu-codemirror";
+import { MutableRefObject } from "react";
+import { IExpressionSuggestionProvider } from "./useColumnExpressionEditor";
+export type ApplyCompletion = (mode?: "add" | "replace") => void;
+export type Operator = "";
+export declare const useColumnAutoComplete: (suggestionProvider: IExpressionSuggestionProvider, onSubmit: MutableRefObject<ApplyCompletion>) => CompletionSource;

package/types/column-expression-input/useColumnExpressionEditor.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { Completion } from "@vuu-ui/vuu-codemirror";
+import { ColumnDefinitionExpression } from "./column-language-parser/ColumnExpressionTreeWalker";
+export type ColumnExpressionOperator = "Times" | "Divide" | "Minus" | "Plus";
+export type ColumnExpressionSuggestionType = "column" | "columnValue" | "expression" | "condition-operator" | "operator" | "relational-operator";
+export type ColumnExpressionSuggestionOptions = {
+    columnName?: string;
+    functionName?: string;
+    operator?: ColumnExpressionOperator;
+    prefix?: string;
+    startsWith?: string;
+    selection?: string[];
+};
+export interface IExpressionSuggestionProvider {
+    getSuggestions: (valueType: ColumnExpressionSuggestionType, options?: ColumnExpressionSuggestionOptions) => Promise<Completion[]>;
+    isPartialMatch: (valueType: ColumnExpressionSuggestionType, columnName?: string, text?: string | undefined) => Promise<boolean>;
+}
+export interface ExpressionSuggestionConsumer {
+    suggestionProvider: IExpressionSuggestionProvider;
+}
+export interface ColumnExpressionEditorProps {
+    onChange?: (source: string, expression: ColumnDefinitionExpression | undefined) => void;
+    onSubmitExpression?: (source: string, expression: ColumnDefinitionExpression | undefined) => void;
+    suggestionProvider: IExpressionSuggestionProvider;
+}
+export declare const useColumnExpressionEditor: ({ onChange, onSubmitExpression, suggestionProvider, }: ColumnExpressionEditorProps) => {
+    editorRef: import("react").RefObject<HTMLDivElement>;
+    clearInput: () => void;
+};

package/types/column-expression-input/useColumnExpressionSuggestionProvider.d.ts

@@ -0,0 +1,8 @@
+import { ColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { VuuTable } from "@vuu-ui/vuu-protocol-types";
+import { IExpressionSuggestionProvider } from "@vuu-ui/vuu-table-extras";
+export interface SuggestionProviderHookProps {
+    columns: ColumnDescriptor[];
+    table: VuuTable;
+}
+export declare const useColumnExpressionSuggestionProvider: ({ columns, table, }: SuggestionProviderHookProps) => IExpressionSuggestionProvider;

package/types/datagrid-configuration-ui/calculated-column-panel/CalculatedColumnPanel.d.ts

@@ -0,0 +1,11 @@
+import { ColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { VuuTable } from "@vuu-ui/vuu-protocol-types";
+import { Dispatch, HTMLAttributes } from "react";
+import { ColumnAction } from "../settings-panel/useGridSettings";
+import "./CalculatedColumnPanel.css";
+export interface CalculatedColumnPanelProps extends HTMLAttributes<HTMLDivElement> {
+    columns: ColumnDescriptor[];
+    dispatchColumnAction: Dispatch<ColumnAction>;
+    table: VuuTable;
+}
+export declare const CalculatedColumnPanel: ({ columns, dispatchColumnAction, table, }: CalculatedColumnPanelProps) => JSX.Element;

package/types/datagrid-configuration-ui/calculated-column-panel/index.d.ts

@@ -0,0 +1 @@
+export * from "./CalculatedColumnPanel";

package/types/datagrid-configuration-ui/column-picker/ColumnListItem.d.ts

@@ -0,0 +1,4 @@
+import { ColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { ListItemType } from "@heswell/salt-lab";
+import "./ColumnListItem.css";
+export declare const ColumnListItem: ListItemType<ColumnDescriptor>;

package/types/datagrid-configuration-ui/column-picker/ColumnPicker.d.ts

@@ -0,0 +1,13 @@
+import { ColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { Dispatch, HTMLAttributes } from "react";
+import { ColumnAction } from "../settings-panel/useGridSettings";
+import "./ColumnPicker.css";
+export interface ColumnPickerProps extends HTMLAttributes<HTMLDivElement> {
+    availableColumns: ColumnDescriptor[];
+    dispatchColumnAction: Dispatch<ColumnAction>;
+    onAddCalculatedColumnClick: () => void;
+    onSelectionChange?: (selected: ColumnDescriptor | null) => void;
+    chosenColumns: ColumnDescriptor[];
+    selectedColumn: ColumnDescriptor | null;
+}
+export declare const ColumnPicker: ({ availableColumns, id: idProp, dispatchColumnAction: dispatch, onAddCalculatedColumnClick, onSelectionChange, chosenColumns, selectedColumn, }: ColumnPickerProps) => JSX.Element;

package/types/datagrid-configuration-ui/column-picker/index.d.ts

@@ -0,0 +1 @@
+export * from "./ColumnPicker";

package/types/datagrid-configuration-ui/column-settings-panel/ColumnSettingsPanel.d.ts

@@ -0,0 +1,9 @@
+import { ColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { Dispatch, HTMLAttributes } from "react";
+import { ColumnAction } from "../settings-panel/useGridSettings";
+import "./ColumnSettingsPanel.css";
+export interface ColumnSettingsPanelProps extends HTMLAttributes<HTMLDivElement> {
+    column: ColumnDescriptor;
+    dispatchColumnAction: Dispatch<ColumnAction>;
+}
+export declare const ColumnSettingsPanel: ({ column, dispatchColumnAction, style: styleProp, ...props }: ColumnSettingsPanelProps) => JSX.Element;

package/types/datagrid-configuration-ui/column-settings-panel/index.d.ts

@@ -0,0 +1 @@
+export * from "./ColumnSettingsPanel";

package/types/datagrid-configuration-ui/column-type-panel/ColumnTypePanel.d.ts

@@ -0,0 +1,10 @@
+import { ColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { PanelProps } from "@salt-ds/core";
+import { Dispatch } from "react";
+import { ColumnAction } from "../settings-panel/useGridSettings";
+import "./ColumnTypePanel.css";
+export interface ColumnTypePanelProps extends PanelProps {
+    column: ColumnDescriptor;
+    dispatchColumnAction: Dispatch<ColumnAction>;
+}
+export declare const ColumnTypePanel: ({ className, column, dispatchColumnAction, ...props }: ColumnTypePanelProps) => JSX.Element;

package/types/datagrid-configuration-ui/column-type-panel/NumericColumnPanel.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ColumnTypePanelProps } from "./ColumnTypePanel";
+import "./ColumnTypePanel.css";
+export declare const NumericColumnPanel: ({ column, dispatchColumnAction, }: ColumnTypePanelProps) => JSX.Element | null;

package/types/datagrid-configuration-ui/column-type-panel/StringColumnPanel.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import "./ColumnTypePanel.css";
+import { ColumnTypePanelProps } from "./ColumnTypePanel";
+export declare const StringColumnPanel: ({ column, dispatchColumnAction, }: ColumnTypePanelProps) => JSX.Element;

package/types/datagrid-configuration-ui/column-type-panel/index.d.ts

@@ -0,0 +1 @@
+export * from "./ColumnTypePanel";

package/types/datagrid-configuration-ui/index.d.ts

@@ -0,0 +1 @@
+export * from "./settings-panel";

package/types/datagrid-configuration-ui/settings-panel/DatagridSettingsPanel.d.ts

@@ -0,0 +1,10 @@
+import { ColumnDescriptor, GridConfig } from "@vuu-ui/vuu-datagrid-types";
+import { HTMLAttributes } from "react";
+import "./DatagridSettingsPanel.css";
+export interface DatagridSettingsPanelProps extends HTMLAttributes<HTMLDivElement> {
+    availableColumns: ColumnDescriptor[];
+    gridConfig: Omit<GridConfig, "headings">;
+    onCancel?: () => void;
+    onConfigChange?: (config: Omit<GridConfig, "headings">, closePanel?: boolean) => void;
+}
+export declare const DatagridSettingsPanel: ({ availableColumns, className, gridConfig, onCancel, onConfigChange, ...props }: DatagridSettingsPanelProps) => JSX.Element;

package/types/datagrid-configuration-ui/settings-panel/GridSettingsPanel.d.ts

@@ -0,0 +1,9 @@
+import { GridConfig } from "@vuu-ui/vuu-datagrid-types";
+import { Dispatch, HTMLAttributes } from "react";
+import "./GridSettingsPanel.css";
+import { ColumnAction } from "./useGridSettings";
+export interface GridSettingsPanelProps extends HTMLAttributes<HTMLDivElement> {
+    config: Omit<GridConfig, "headings">;
+    dispatchColumnAction: Dispatch<ColumnAction>;
+}
+export declare const GridSettingsPanel: ({ config, dispatchColumnAction, style: styleProp, ...props }: GridSettingsPanelProps) => JSX.Element;

package/types/datagrid-configuration-ui/settings-panel/index.d.ts

@@ -0,0 +1 @@
+export * from "./DatagridSettingsPanel";

package/types/datagrid-configuration-ui/settings-panel/useGridSettings.d.ts

@@ -0,0 +1,59 @@
+import { ColumnDescriptor, GridConfig } from "@vuu-ui/vuu-datagrid-types";
+import { Reducer } from "react";
+export type CalculatedColumnExpression = {
+    columName: string;
+    expression: string;
+};
+export interface ColumnActionAdd {
+    type: "addColumn";
+    columns?: ColumnDescriptor[];
+    column?: ColumnDescriptor;
+    index?: number;
+}
+export interface ColumnActionAddCalculatedColumn {
+    columnName: string;
+    columnType: "string" | "int" | "double" | "boolean";
+    expression: string;
+    type: "addCalculatedColumn";
+}
+export interface ColumnActionMove {
+    type: "moveColumn";
+    column?: ColumnDescriptor;
+    moveBy?: 1 | -1;
+    moveTo?: number;
+    moveFrom?: number;
+}
+export interface ColumnActionRemove {
+    type: "removeColumn";
+    column: ColumnDescriptor;
+}
+export interface ColumnActionUpdate {
+    type: "updateColumn";
+    column: ColumnDescriptor;
+}
+export interface ColumnActionUpdateProp {
+    align?: ColumnDescriptor["align"];
+    column: ColumnDescriptor;
+    hidden?: ColumnDescriptor["hidden"];
+    label?: ColumnDescriptor["label"];
+    type: "updateColumnProp";
+    width?: ColumnDescriptor["width"];
+}
+export interface ColumnActionUpdateGridSettings {
+    type: "updateGridSettings";
+    columnDefaultWidth?: number;
+    columnFormatHeader?: "capitalize" | "uppercase";
+}
+export interface ColumnActionUpdateTypeFormatting {
+    type: "updateColumnTypeFormatting";
+    column: ColumnDescriptor;
+    alignOnDecimals?: boolean;
+    decimals?: number;
+    zeroPad?: boolean;
+}
+export type ColumnAction = ColumnActionAdd | ColumnActionAddCalculatedColumn | ColumnActionUpdateGridSettings | ColumnActionMove | ColumnActionRemove | ColumnActionUpdate | ColumnActionUpdateProp | ColumnActionUpdateTypeFormatting;
+export type GridSettingsReducer = Reducer<Omit<GridConfig, "headings">, ColumnAction>;
+export declare const useGridSettings: (config: Omit<GridConfig, "headings">) => {
+    gridSettings: Omit<GridConfig, "headings">;
+    dispatchColumnAction: import("react").Dispatch<ColumnAction>;
+};

package/types/datasource-stats/DatasourceStats.d.ts

@@ -0,0 +1,8 @@
+import { DataSource } from "@vuu-ui/vuu-data";
+import { HTMLAttributes } from "react";
+import "./DatasourceStats.css";
+interface DataSourceStatsProps extends HTMLAttributes<HTMLSpanElement> {
+    dataSource: DataSource;
+}
+export declare const DataSourceStats: ({ className: classNameProp, dataSource, }: DataSourceStatsProps) => JSX.Element;
+export {};

package/types/datasource-stats/index.d.ts

@@ -0,0 +1 @@
+export * from "./DatasourceStats";