@vuu-ui/vuu-table-extras 0.6.21 → 0.6.22-debug

package/index.css

@@ -1,2 +1,502 @@
-.vuuTable td:has(> .vuuBackgroundCell){padding:0;text-align:right}.vuuBackgroundCell{padding-right:var(--salt-size-unit);position:relative;z-index:-1}.vuuBackgroundCell-flasher{color:transparent;position:absolute;left:0;right:0;top:0;bottom:0;z-index:-1}.vuuBackgroundCell-flasher{text-align:left}.vuuBackgroundCell-flasher+.num{padding-left:8px}.right .vuuBackgroundCell-flasher{text-align:right}.right .vuuBackgroundCell-flasher+.num{padding-right:8px}.up1>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactbgup1}.up2>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactbgup2}.down1>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactbgdown1}.down2>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactbgdown2}.up1.vuuBackgroundCell-arrowOnly>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactarrowup1}.up2.vuuBackgroundCell-arrowOnly>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactarrowup2}.down1.vuuBackgroundCell-arrowOnly>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactarrowdown1}.down2.vuuBackgroundCell-arrowOnly>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactarrowdown2}.up1.vuuBackgroundCell-arrowBackground>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactbgarrowup1}.up2.vuuBackgroundCell-arrowBackground>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactbgarrowup2}.down1.vuuBackgroundCell-arrowBackground>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactbgarrowdown1}.down2.vuuBackgroundCell-arrowBackground>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactbgarrowdown2}@keyframes reactbgup1{0%{background-color:var(--salt-differential-positive-background)}to{background-color:transparent}}@keyframes reactbgup2{0%{background-color:var(--salt-differential-positive-background)}to{background-color:transparent}}@keyframes reactbgdown1{0%{background-color:var(--salt-differential-negative-background)}to{background-color:transparent}}@keyframes reactbgdown2{0%{background-color:var(--salt-differential-negative-background)}to{background-color:transparent}}@keyframes reactarrowup1{0%{color:var(--salt-differential-positive-foreground)}to{color:transparent}}@keyframes reactarrowup2{0%{color:var(--salt-differential-positive-foreground)}to{color:transparent}}@keyframes reactarrowdown1{0%{color:var(--salt-differential-negative-foreground)}to{color:transparent}}@keyframes reactarrowdown2{0%{color:var(--salt-differential-negative-foreground)}to{color:transparent}}@keyframes reactbgarrowup1{0%{color:var(--salt-differential-positive-foreground);background-color:var(--salt-differential-positive-background)}20%{color:var(--salt-differential-positive-foreground);background-color:transparent}to{color:transparent;background-color:transparent}}@keyframes reactbgarrowup2{0%{color:var(--salt-differential-positive-foreground);background-color:var(--salt-differential-positive-background)}20%{color:var(--salt-differential-positive-foreground);background-color:transparent}to{color:transparent;background-color:transparent}}@keyframes reactbgarrowdown1{0%{color:var(--salt-differential-negative-foreground);background-color:var(--salt-differential-negative-background)}20%{color:var(--salt-differential-negative-foreground);background-color:transparent}to{color:transparent;background-color:transparent}}@keyframes reactbgarrowdown2{0%{color:var(--salt-differential-negative-foreground);background-color:var(--salt-differential-negative-background)}20%{color:var(--salt-differential-negative-foreground);background-color:transparent}to{color:transparent;background-color:transparent}}.vuuColumnExpressionInput{--vuuFilterEditor-background: var(--salt-container-primary-background);--vuuFilterEditor-color: var(--salt-text-primary-foreground);--vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);--vuuFilterEditor-fontSize: var(--salt-text-fontSize);--vuuFilterEditor-cursorColor: var(--salt-text-secondary-foreground);--vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);--vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);--vuuFilterEditor-tooltipBorder: var(--tooltip-status-borderColor) var(--salt-container-borderWidth) var(--salt-container-borderStyle);--vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);--vuuFilterEditor-suggestion-selectedBackground: var(--salt-selectable-background-selected);--vuuFilterEditor-suggestion-selectedColor: var(--salt-text-primary-foreground);--vuuFilterEditor-suggestion-detailColor: var(--salt-text-secondary-foreground-disabled);--vuuFilterEditor-suggestion-height: 24px;--vuuFilterEditor-variableColor: blue;align-items:center;box-sizing:border-box;height:30px}.vuuColumnExpressionInput-FilterButton,.vuuColumnExpressionInput-ClearButton{--vuu-icon-size: 12px;--saltButton-width: 28px}.expression-type-container{margin:0 3px 0 auto;color:var(--salt-text-secondary-foreground)}.expression-kind{display:inline-block;width:50px}.expression-type{display:inline-block;text-align:right;width:50px}.vuuSuggestion{display:flex;align-items:center}.vuuFunctionDoc .function-heading{display:flex;gap:3px}.vuuFunctionDoc .function-name{font-style:italic}.vuuFunctionDoc .param-list{font-style:italic;color:#00f;white-space:pre}.vuuFunctionDoc .function-type{margin-left:auto}.vuuFunctionDoc .example-container{background-color:var(--salt-container-secondary-background);margin:6px 0;padding:3px}.vuuFunctionDoc .example-expression{font-family:var(--salt-typography-fontFamily-code);margin-left:8px;margin-top:6px}.vuuFunctionDoc .example-result{margin-left:8px;margin-top:6px}.vuuColumnListItem{--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>');align-items:center;padding:0!important}.vuuColumnListItem-calculated{--vuu-icon-size: 12px;--column-icon-svg: var(--svg-function);--calculated-background: var(--salt-text-secondary-foreground)}.vuuColumnListItem-hidden{--vuu-icon-size: 14px;--hidden-background: var(--salt-text-secondary-foreground);--hidden-icon-svg: var(--svg-eye-hidden)}.vuuColumnListItem-label{flex:1 1 auto}.vuuColumnListItem-iconType{background-color:var(--calculated-background, transparent);display:inline-block;height:100%;mask:var(--column-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);mask-repeat:no-repeat;-webkit-mask:var(--column-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);-webkit-mask-repeat:no-repeat;width:20px}.vuuColumnListItem-iconHidden{background-color:var(--hidden-background, transparent);display:inline-block;height:100%;mask:var(--hidden-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);mask-repeat:no-repeat;-webkit-mask:var(--hidden-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);-webkit-mask-repeat:no-repeat;width:20px}.vuuColumnPicker{--vuu-icon-color: var(--salt-text-primary-foreground);--vuu-icon-left: 0px;--vuu-icon-size: 12px;display:flex;flex-shrink:0;gap:calc(var(--salt-size-unit) * 2);width:var(--vuuColumnPicker-width, 100%)}.vuuColumnPicker-listColumn{display:flex;flex:1;flex-direction:column}.vuuColumnPicker-listContainer{border:solid 1px var(--salt-container-primary-borderColor);margin-right:var(--salt-size-unit)}.vuuColumnPicker-defineColumn{align-items:center;border-top:solid 1px var(--salt-container-primary-borderColor);display:flex;flex:0 0 calc(100% - var(--salt-size-unit));gap:var(--salt-size-unit);transition:.2s height;margin-top:12px;height:48px}[data-align=right] .vuuColumnPicker-defineColumn{border-top:none;height:0}.vuuColumnPicker-addCalculatedColumn{margin-left:auto;margin-right:var(--salt-size-unit);width:28px}.vuuColumnTypePanel{--settings-panel-marginTop: 0px}.vuuColumnTypePanel-renderer{--saltButton-background: var(--salt-container-secondary-background);--saltButton-background-hover: var(--salt-actionable-secondary-background-hover)}.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}.vuuGridSettingsPanel{--saltFormField-label-width: 150px}.vuuCalculatedColumnPanel{display:flex;flex-direction:column;gap:var(--salt-size-unit)}.vuuDatagridSettingsPanel{--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>');--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>');--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>');--saltToolbar-background: transparent;--vuuView-borderStyle: solid;--vuuColumnPicker-width: 100%;--vuuColumnSettings-width: 50%;background-color:var(--salt-container-primary-background);display:flex;flex-direction:column;height:442px;width:520px}[data-icon=column-chooser]{--vuu-icon-svg: var(--svg-column-chooser)}[data-icon=column-settings]{--vuu-icon-svg: var(--svg-column-settings)}[data-icon=table-settings]{--vuu-icon-svg: var(--svg-table-settings)}[data-icon=define-column]{--vuu-icon-svg: var(--svg-function)}.vuuDatagridSettingsPanel-header{flex:0 0 50px}.vuuDatagridSettingsPanel-stack{flex:1;gap:24px;overflow:hidden}.vuuDatagridSettingsPanel-stack>.saltToolbar{--saltToolbar-background: var(--salt-container-secondary-background);--vuu-icon-color: var(--salt-text-secondary-foreground);--vuu-icon-size: 18px;--vuu-icon-height: 36px;--vuu-icon-width: 36px;border-bottom:none}.vuuDatagridSettingsPanel-stack>.saltToolbar .saltTabstrip{--tabs-activationIndicator-inset: 0px auto 0px 1px}.vuuDatagridSettingsPanel-stack>.saltToolbar .saltTab[aria-selected=true],.vuuDatagridSettingsPanel-stack>.saltToolbar .saltTab:hover{--vuu-icon-color: var(--salt-text-primary-foreground)}.vuuDatagridSettingsPanel-stack>.saltToolbar{--saltToolbar-background: var(--salt-container-secondary-background)}.vuuDatagridSettingsPanel-columnPanels{display:flex;flex-flow:nowrap;gap:calc(var(--salt-size-unit) * 1);margin:var(--salt-size-unit) 0;overflow:hidden;position:relative}.vuuDatagridSettingsPanel-columnPanels>*{transition:.3s transform ease-out;transform:translateZ(0)}.vuuDatagridSettingsPanel-columnPanels[data-align=right]>*{transform:translate3d(-235px,0,0)}.vuuDatagridSettingsPanel-columnToolbar{--saltButton-width: 60px}.vuuDatagridSettingsPanel-columnToolbar>.Responsive-inner{align-items:center}.vuuDatagridSettingsPanel-buttonBar{align-items:center;border-top:solid 1px var(--salt-separable-primary-borderColor);display:flex;flex:0 0 40px;gap:var(--salt-size-unit);justify-content:flex-end;padding:0 var(--salt-size-unit)}.vuuDatasourceStats{display:flex;gap:var(--salt-size-unit)}
+/* src/cell-renderers/background-cell/BackgroundCell.css */
+.vuuTable td:has(> .vuuBackgroundCell) {
+  padding: 0;
+  text-align: right;
+}
+.vuuBackgroundCell {
+  padding-right: var(--salt-size-unit);
+  position: relative;
+  z-index: -1;
+}
+.vuuBackgroundCell-flasher {
+  color: transparent;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: -1;
+}
+.vuuBackgroundCell-flasher {
+  text-align: left;
+}
+.vuuBackgroundCell-flasher + .num {
+  padding-left: 8px;
+}
+.right .vuuBackgroundCell-flasher {
+  text-align: right;
+}
+.right .vuuBackgroundCell-flasher + .num {
+  padding-right: 8px;
+}
+.up1 > .vuuBackgroundCell-flasher {
+  animation-duration: 30s;
+  animation-name: reactbgup1;
+}
+.up2 > .vuuBackgroundCell-flasher {
+  animation-duration: 30s;
+  animation-name: reactbgup2;
+}
+.down1 > .vuuBackgroundCell-flasher {
+  animation-duration: 30s;
+  animation-name: reactbgdown1;
+}
+.down2 > .vuuBackgroundCell-flasher {
+  animation-duration: 30s;
+  animation-name: reactbgdown2;
+}
+.up1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {
+  animation-duration: 30s;
+  animation-name: reactarrowup1;
+}
+.up2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {
+  animation-duration: 30s;
+  animation-name: reactarrowup2;
+}
+.down1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {
+  animation-duration: 30s;
+  animation-name: reactarrowdown1;
+}
+.down2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {
+  animation-duration: 30s;
+  animation-name: reactarrowdown2;
+}
+.up1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {
+  animation-duration: 30s;
+  animation-name: reactbgarrowup1;
+}
+.up2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {
+  animation-duration: 30s;
+  animation-name: reactbgarrowup2;
+}
+.down1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {
+  animation-duration: 30s;
+  animation-name: reactbgarrowdown1;
+}
+.down2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {
+  animation-duration: 30s;
+  animation-name: reactbgarrowdown2;
+}
+
+/* src/cell-renderers/background-cell/FlashingBackground.css */
+@keyframes reactbgup1 {
+  from {
+    background-color: var(--salt-differential-positive-background);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+@keyframes reactbgup2 {
+  from {
+    background-color: var(--salt-differential-positive-background);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+@keyframes reactbgdown1 {
+  from {
+    background-color: var(--salt-differential-negative-background);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+@keyframes reactbgdown2 {
+  from {
+    background-color: var(--salt-differential-negative-background);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+@keyframes reactarrowup1 {
+  from {
+    color: var(--salt-differential-positive-foreground);
+  }
+  to {
+    color: transparent;
+  }
+}
+@keyframes reactarrowup2 {
+  from {
+    color: var(--salt-differential-positive-foreground);
+  }
+  to {
+    color: transparent;
+  }
+}
+@keyframes reactarrowdown1 {
+  from {
+    color: var(--salt-differential-negative-foreground);
+  }
+  to {
+    color: transparent;
+  }
+}
+@keyframes reactarrowdown2 {
+  from {
+    color: var(--salt-differential-negative-foreground);
+  }
+  to {
+    color: transparent;
+  }
+}
+@keyframes reactbgarrowup1 {
+  0% {
+    color: var(--salt-differential-positive-foreground);
+    background-color: var(--salt-differential-positive-background);
+  }
+  20% {
+    color: var(--salt-differential-positive-foreground);
+    background-color: transparent;
+  }
+  100% {
+    color: transparent;
+    background-color: transparent;
+  }
+}
+@keyframes reactbgarrowup2 {
+  0% {
+    color: var(--salt-differential-positive-foreground);
+    background-color: var(--salt-differential-positive-background);
+  }
+  20% {
+    color: var(--salt-differential-positive-foreground);
+    background-color: transparent;
+  }
+  100% {
+    color: transparent;
+    background-color: transparent;
+  }
+}
+@keyframes reactbgarrowdown1 {
+  0% {
+    color: var(--salt-differential-negative-foreground);
+    background-color: var(--salt-differential-negative-background);
+  }
+  20% {
+    color: var(--salt-differential-negative-foreground);
+    background-color: transparent;
+  }
+  100% {
+    color: transparent;
+    background-color: transparent;
+  }
+}
+@keyframes reactbgarrowdown2 {
+  0% {
+    color: var(--salt-differential-negative-foreground);
+    background-color: var(--salt-differential-negative-background);
+  }
+  20% {
+    color: var(--salt-differential-negative-foreground);
+    background-color: transparent;
+  }
+  100% {
+    color: transparent;
+    background-color: transparent;
+  }
+}
+
+/* src/column-expression-input/ColumnExpressionInput.css */
+.vuuColumnExpressionInput {
+  --vuuFilterEditor-background: var(--salt-container-primary-background);
+  --vuuFilterEditor-color: var(--salt-text-primary-foreground);
+  --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);
+  --vuuFilterEditor-fontSize: var(--salt-text-fontSize);
+  --vuuFilterEditor-cursorColor: var(--salt-text-secondary-foreground);
+  --vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);
+  --vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);
+  --vuuFilterEditor-tooltipBorder: var(--tooltip-status-borderColor) var(--salt-container-borderWidth) var(--salt-container-borderStyle);
+  --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);
+  --vuuFilterEditor-suggestion-selectedBackground: var(--salt-selectable-background-selected);
+  --vuuFilterEditor-suggestion-selectedColor: var(--salt-text-primary-foreground);
+  --vuuFilterEditor-suggestion-detailColor: var(--salt-text-secondary-foreground-disabled);
+  --vuuFilterEditor-suggestion-height: 24px;
+  --vuuFilterEditor-variableColor: blue;
+  align-items: center;
+  box-sizing: border-box;
+  height: 30px;
+}
+.vuuColumnExpressionInput-FilterButton,
+.vuuColumnExpressionInput-ClearButton {
+  --vuu-icon-size: 12px;
+  --saltButton-width: 28px;
+}
+.expression-type-container {
+  margin: 0 3px 0 auto;
+  color: var(--salt-text-secondary-foreground);
+}
+.expression-kind {
+  display: inline-block;
+  width: 50px;
+}
+.expression-type {
+  display: inline-block;
+  text-align: right;
+  width: 50px;
+}
+.vuuSuggestion {
+  display: flex;
+  align-items: center;
+}
+.vuuFunctionDoc .function-heading {
+  display: flex;
+  gap: 3px;
+}
+.vuuFunctionDoc .function-name {
+  font-style: italic;
+}
+.vuuFunctionDoc .param-list {
+  font-style: italic;
+  color: blue;
+  white-space: pre;
+}
+.vuuFunctionDoc .function-type {
+  margin-left: auto;
+}
+.vuuFunctionDoc .example-container {
+  background-color: var(--salt-container-secondary-background);
+  margin: 6px 0;
+  padding: 3px;
+}
+.vuuFunctionDoc .example-expression {
+  font-family: var(--salt-typography-fontFamily-code);
+  margin-left: 8px;
+  margin-top: 6px;
+}
+.vuuFunctionDoc .example-result {
+  margin-left: 8px;
+  margin-top: 6px;
+}
+
+/* src/datagrid-configuration-ui/column-picker/ColumnListItem.css */
+.vuuColumnListItem {
+  --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>');
+  align-items: center;
+  padding: 0 !important;
+}
+.vuuColumnListItem-calculated {
+  --vuu-icon-size: 12px;
+  --column-icon-svg: var(--svg-function);
+  --calculated-background: var(--salt-text-secondary-foreground);
+}
+.vuuColumnListItem-hidden {
+  --vuu-icon-size: 14px;
+  --hidden-background: var(--salt-text-secondary-foreground);
+  --hidden-icon-svg: var(--svg-eye-hidden);
+}
+.vuuColumnListItem-label {
+  flex: 1 1 auto;
+}
+.vuuColumnListItem-iconType {
+  background-color: var(--calculated-background, transparent);
+  display: inline-block;
+  height: 100%;
+  mask: var(--column-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
+  mask-repeat: no-repeat;
+  -webkit-mask: var(--column-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
+  -webkit-mask-repeat: no-repeat;
+  width: 20px;
+}
+.vuuColumnListItem-iconHidden {
+  background-color: var(--hidden-background, transparent);
+  display: inline-block;
+  height: 100%;
+  mask: var(--hidden-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
+  mask-repeat: no-repeat;
+  -webkit-mask: var(--hidden-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
+  -webkit-mask-repeat: no-repeat;
+  width: 20px;
+}
+
+/* src/datagrid-configuration-ui/column-picker/ColumnPicker.css */
+.vuuColumnPicker {
+  --vuu-icon-color: var(--salt-text-primary-foreground);
+  --vuu-icon-left: 0px;
+  --vuu-icon-size: 12px;
+  display: flex;
+  flex-shrink: 0;
+  gap: calc(var(--salt-size-unit) * 2);
+  width: var(--vuuColumnPicker-width, 100%);
+}
+.vuuColumnPicker-listColumn {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+.vuuColumnPicker-listContainer {
+  border: solid 1px var(--salt-container-primary-borderColor);
+  margin-right: var(--salt-size-unit);
+}
+.vuuColumnPicker-defineColumn {
+  align-items: center;
+  border-top: solid 1px var(--salt-container-primary-borderColor);
+  display: flex;
+  flex: 0 0 calc(100% - var(--salt-size-unit));
+  gap: var(--salt-size-unit);
+  transition: .2s height;
+  margin-top: 12px;
+  height: 48px;
+}
+[data-align=right] .vuuColumnPicker-defineColumn {
+  border-top: none;
+  height: 0;
+}
+.vuuColumnPicker-addCalculatedColumn {
+  margin-left: auto;
+  margin-right: var(--salt-size-unit);
+  width: 28px;
+}
+
+/* src/datagrid-configuration-ui/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/datagrid-configuration-ui/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;
+}
+
+/* src/datagrid-configuration-ui/settings-panel/GridSettingsPanel.css */
+.vuuGridSettingsPanel {
+  --saltFormField-label-width: 150px;
+}
+
+/* src/datagrid-configuration-ui/calculated-column-panel/CalculatedColumnPanel.css */
+.vuuCalculatedColumnPanel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-size-unit);
+}
+
+/* src/datagrid-configuration-ui/settings-panel/DatagridSettingsPanel.css */
+.vuuDialog-gridConfig {
+}
+.vuuDatagridSettingsPanel {
+  --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>');
+  --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>');
+  --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>');
+  --saltToolbar-background: transparent;
+  --vuuView-borderStyle: solid;
+  --vuuColumnPicker-width: 100%;
+  --vuuColumnSettings-width: 50%;
+  background-color: var(--salt-container-primary-background);
+  display: flex;
+  flex-direction: column;
+  height: 442px;
+  width: 520px;
+}
+[data-icon=column-chooser] {
+  --vuu-icon-svg: var(--svg-column-chooser);
+}
+[data-icon=column-settings] {
+  --vuu-icon-svg: var(--svg-column-settings);
+}
+[data-icon=table-settings] {
+  --vuu-icon-svg: var(--svg-table-settings);
+}
+[data-icon=define-column] {
+  --vuu-icon-svg: var(--svg-function);
+}
+.vuuDatagridSettingsPanel-header {
+  flex: 0 0 50px;
+}
+.vuuDatagridSettingsPanel-stack {
+  flex: 1;
+  gap: 24px;
+  overflow: hidden;
+}
+.vuuDatagridSettingsPanel-stack > .saltToolbar {
+  --saltToolbar-background: var(--salt-container-secondary-background);
+  --vuu-icon-color: var(--salt-text-secondary-foreground);
+  --vuu-icon-size: 18px;
+  --vuu-icon-height: 36px;
+  --vuu-icon-width: 36px;
+  border-bottom: none;
+}
+.vuuDatagridSettingsPanel-stack > .saltToolbar .saltTabstrip {
+  --tabs-activationIndicator-inset: 0px auto 0px 1px;
+}
+.vuuDatagridSettingsPanel-stack > .saltToolbar .saltTab[aria-selected=true],
+.vuuDatagridSettingsPanel-stack > .saltToolbar .saltTab:hover {
+  --vuu-icon-color: var(--salt-text-primary-foreground);
+}
+.vuuDatagridSettingsPanel-stack > .saltToolbar {
+  --saltToolbar-background: var(--salt-container-secondary-background);
+}
+.vuuDatagridSettingsPanel-columnPanels {
+  display: flex;
+  flex-flow: nowrap;
+  gap: calc(var(--salt-size-unit) * 1);
+  margin: var(--salt-size-unit) 0;
+  overflow: hidden;
+  position: relative;
+}
+.vuuDatagridSettingsPanel-columnPanels > * {
+  transition: .3s transform ease-out;
+  transform: translate3d(0px, 0px, 0px);
+}
+.vuuDatagridSettingsPanel-columnPanels[data-align=right] > * {
+  transform: translate3d(-235px, 0px, 0px);
+}
+.vuuDatagridSettingsPanel-columnToolbar {
+  --saltButton-width: 60px;
+}
+.vuuDatagridSettingsPanel-columnToolbar > .Responsive-inner {
+  align-items: center;
+}
+.vuuDatagridSettingsPanel-buttonBar {
+  align-items: center;
+  border-top: solid 1px var(--salt-separable-primary-borderColor);
+  display: flex;
+  flex: 0 0 40px;
+  gap: var(--salt-size-unit);
+  justify-content: flex-end;
+  padding: 0 var(--salt-size-unit);
+}
+
+/* src/datasource-stats/DatasourceStats.css */
+.vuuDatasourceStats {
+  display: flex;
+  gap: var(--salt-size-unit);
+}
 /*# sourceMappingURL=index.css.map */

package/index.css.map

@@ -2,6 +2,6 @@
   "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/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  ", "\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": "AAAA,iDAEE,iBAGF,mBACE,oCACA,kBACA,WAGF,2BACE,kBACA,kBACA,OACA,QACA,MACA,SACA,WAGF,2BACE,gBAEF,gCACE,iBAGF,kCACE,iBAEF,uCACE,kBAGF,gCACE,uBACA,0BAGF,gCACE,uBACA,0BAGF,kCACE,uBACA,4BAGF,kCACE,uBACA,4BAGF,4DACE,uBACA,6BAGF,4DACE,uBACA,6BAGF,8DACE,uBACA,+BAGF,8DACE,uBACA,+BAGF,kEACE,uBACA,+BAGF,kEACE,uBACA,+BAGF,oEACE,uBACA,iCAGF,oEACE,uBACA,iCC5FF,yBAEM,iEAGA,8BAIJ,yBAEI,iEAGA,8BAIJ,2BAEI,iEAGA,8BAIJ,2BAEI,iEAGA,8BAIJ,4BAEI,sDAGA,mBAIJ,4BAEI,sDAGA,mBAIJ,8BAEI,sDAGA,mBAIJ,8BAEI,sDAGA,mBAIJ,8BAEI,mDACA,kEAGA,mDACA,gCAGA,kBACA,8BAIJ,8BAEI,mDACA,kEAGA,mDACA,gCAGA,kBACA,8BAIJ,gCAEI,mDACA,kEAGA,mDACA,gCAGA,kBACA,8BAIJ,gCAEI,mDACA,kEAGA,mDACA,gCAGA,kBACA,8BC/HN,0BACI,uEACA,6DACA,gEACA,sDACA,qEACA,4EACA,8EACA,uIACA,0EACA,4FACA,gFACA,yFACA,0CACA,sCAEA,mBACA,sBACA,YAGJ,6EAEI,sBACA,yBAGJ,2BA5BA,oBA8BI,4CAGJ,iBACI,qBACA,WAGJ,iBACI,qBACA,iBACA,WAGJ,eACI,aACA,mBAIJ,kCACI,aACA,QAGJ,+BACI,kBAGJ,4BACI,kBACA,WACA,gBAGJ,+BACI,iBAGJ,mCACI,4DAtEJ,yBA2EA,oCACI,mDACA,gBACA,eAGJ,gCACI,gBACA,eCnFJ,mBACI,giBACA,mBAFJ,oBAMA,8BACI,sBACA,uCACA,+DAEJ,0BACI,sBACA,2DACA,yCAGJ,yBACI,cAEJ,4BACI,2DACA,qBACA,YACA,oFACA,sBACA,4FACA,8BACA,WAGJ,8BACI,uDACA,qBACA,YACA,oFACA,sBACA,4FACA,8BACA,WCvCJ,iBAEI,sDACA,qBACA,sBAEA,aACA,cAEA,oCACA,yCAGJ,4BACI,aACA,OACA,sBAGJ,+BACI,2DACA,mCAGJ,8BACI,mBACA,+DACA,aACA,4CACA,0BACA,sBACA,gBACA,YAGJ,iDACI,gBACA,SAGJ,qCACI,iBACA,mCACA,WC3CJ,oBACI,gCAGJ,6BACI,oEACA,iFCNJ,wBACI,8BACA,kCACA,2CACA,uBACA,gEACA,aACA,sBACA,cACA,gBACA,6CACA,2CAIJ,mCACI,0BAGJ,kDACI,wBAGJ,mCACI,8BACA,kEAEA,oBACA,aACA,sBACA,0BAIJ,sBACI,mBACA,WAGJ,oCACI,iBCxCJ,sBACI,mCCDJ,0BACI,aACA,sBACA,0BCGF,0BACE,scACA,uOACA,ihDAKA,sCACA,6BACA,8BACA,+BACA,0DACA,aACA,sBACA,aACA,YAGJ,2BACE,0CAEF,4BACE,2CAEF,2BACE,0CAEF,0BACE,oCAGF,iCACA,cAGA,gCACI,OACA,SACA,gBAIJ,6CACI,qEACA,wDACA,sBACA,wBACA,uBACA,mBAGJ,2DACI,mDAGJ,sIAEI,sDAIJ,6CACI,qEAGJ,uCACI,aACA,iBACA,oCACA,+BACA,gBACA,kBAIJ,yCACI,kCACA,wBAGJ,2DACI,kCAIJ,wCACI,yBAGJ,0DACI,mBAGJ,oCACI,mBACA,+DACA,aACA,cACA,0BACA,yBACA,gCC3GJ,oBACI,aACA",
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@vuu-ui/vuu-table-extras",
-  "version": "0.6.21",
+  "version": "0.6.22-debug",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-filter-types": "0.6.21",
-    "@vuu-ui/vuu-protocol-types": "0.6.21"
+    "@vuu-ui/vuu-filter-types": "0.6.22-debug",
+    "@vuu-ui/vuu-protocol-types": "0.6.22-debug"
   },
   "dependencies": {
-    "@vuu-ui/vuu-codemirror": "0.6.21",
-    "@vuu-ui/vuu-data": "0.6.21",
-    "@vuu-ui/vuu-layout": "0.6.21",
-    "@vuu-ui/vuu-popups": "0.6.21",
-    "@vuu-ui/vuu-utils": "0.6.21",
+    "@vuu-ui/vuu-codemirror": "0.6.22-debug",
+    "@vuu-ui/vuu-data": "0.6.22-debug",
+    "@vuu-ui/vuu-layout": "0.6.22-debug",
+    "@vuu-ui/vuu-popups": "0.6.22-debug",
+    "@vuu-ui/vuu-utils": "0.6.22-debug",
     "@heswell/salt-lab": "1.0.0-alpha.2",
     "@lezer/common": "1.0.2",
     "@lezer/lr": "1.3.3",

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

@@ -1,6 +1,6 @@
 import { Tree } from "@lezer/common";
 import { RelationalExpression } from "./generated/column-parser.terms";
-type expressionType = "arithmeticExpression" | "booleanCondition" | "booleanLiteralExpression" | "callExpression" | "colExpression" | "conditionalExpression" | "numberLiteralExpression" | "relationalExpression" | "stringLiteralExpression" | "unknown";
+type expressionType = "arithmeticExpression" | "booleanCondition" | "booleanLiteralExpression" | "callExpression" | "colExpression" | "conditionalExpression" | "numericLiteralExpression" | "relationalExpression" | "stringLiteralExpression" | "unknown";
 type arithmeticOp = "*" | "/" | "+" | "-" | "unknown";
 type booleanOp = "and" | "or";
 type relationalOp = "=" | "!=" | ">" | ">=" | "<" | "<=" | "unknown";