@adaptabletools/adaptable 13.0.0-canary.12 → 13.0.0-canary.14

package/src/agGrid/FloatingFilterWrapper.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FloatingFilterWrapperFactory = void 0;
 const tslib_1 = require("tslib");
-const QuickFilterForm_1 = require("../View/Components/FilterForm/QuickFilterForm");
-const react_1 = require("react");
 const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const QuickFilterForm_1 = require("../View/Components/FilterForm/QuickFilterForm");
 const filterContainerStyle = {
     overflow: 'hidden',
     minWidth: '0',
@@ -27,34 +27,32 @@ const FloatingFilterWrapperFactory = (adaptable) => {
         return filterContext;
     }
     function patchParentElement(filterContainer) {
-        // todo: consider theme
-        filterContainer.parentElement.style.overflow = 'visible';
-        filterContainer.parentElement.parentElement.style.padding = 'var(--ab-space-1)';
+        if (filterContainer) {
+            // todo: consider theme
+            filterContainer.parentElement.style.overflow = 'visible';
+            filterContainer.parentElement.parentElement.style.padding = 'var(--ab-space-1)';
+        }
     }
     if (adaptable.variant === 'react') {
-        return (0, react_1.forwardRef)((props, ref) => {
+        return (0, react_1.forwardRef)(function ReactFloatingFilterWrapper(props, ref) {
             const colId = props.column.getId();
             const column = adaptable.api.columnApi.getColumnFromId(colId);
-            const domRef = (0, react_1.useRef)(null);
             (0, react_1.useImperativeHandle)(ref, () => {
                 return {
                     onParentModelChanged() { },
                 };
             });
-            (0, react_1.useEffect)(() => {
-                patchParentElement(domRef.current);
-            }, []);
             if (!column) {
                 return null;
             }
-            return (React.createElement("div", { ref: domRef, id: getContainerId(colId), style: filterContainerStyle }, (0, QuickFilterForm_1.QuickFilterFormReact)(getFilterContext(colId))));
+            return (React.createElement("div", { ref: patchParentElement, id: getContainerId(colId), style: filterContainerStyle }, (0, QuickFilterForm_1.QuickFilterFormReact)(getFilterContext(colId))));
         });
     }
     return class FloatingFilterWrapper {
         onParentModelChanged(parentModel, filterChangedEvent) {
             // todo?
         }
-        afterGuiAttached(params) {
+        afterGuiAttached() {
             patchParentElement(this.filterContainer);
         }
         init(params) {

package/src/agGrid/PercentBarRenderer.d.ts

@@ -1,4 +1,8 @@
-import { FormatColumn } from '../PredefinedConfig/FormatColumnState';
+import { GradientStyle, PercentBarStyle } from '../PredefinedConfig/FormatColumnState';
 import { AdaptableApi } from '../Api/AdaptableApi';
 import { AdaptableColumn } from '../PredefinedConfig/Common/AdaptableColumn';
-export declare const getPercentBarRendererForColumn: (formatColumn: FormatColumn, abColumn: AdaptableColumn, api: AdaptableApi) => any;
+export declare const getPercentBarRendererForColumn: (columnStyle: {
+    GradientStyle?: GradientStyle;
+    PercentBarStyle?: PercentBarStyle;
+    CheckBoxStyle?: boolean;
+}, abColumn: AdaptableColumn, api: AdaptableApi) => any;

package/src/agGrid/PercentBarRenderer.js

@@ -4,19 +4,14 @@ exports.getPercentBarRendererForColumn = void 0;
 const tslib_1 = require("tslib");
 const Helper_1 = tslib_1.__importDefault(require("../Utilities/Helpers/Helper"));
 const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
-const FormatHelper_1 = tslib_1.__importDefault(require("../Utilities/Helpers/FormatHelper"));
-const getPercentBarRendererForColumn = (formatColumn, abColumn, api) => {
-    var _a;
-    if (!((_a = formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.ColumnStyle) === null || _a === void 0 ? void 0 : _a.PercentBarStyle)) {
+const getPercentBarRendererForColumn = (columnStyle, abColumn, api) => {
+    if (!columnStyle.PercentBarStyle) {
         return;
     }
     return class PercentBarRenderer {
         init(params) {
-            if (!formatColumn.IncludeGroupedRows && api.gridApi.isGroupRowNode(params.node)) {
-                return;
-            }
-            const min = api.formatColumnApi.getNumericStyleMinValue(formatColumn.ColumnStyle, abColumn, params.node, params.value);
-            const max = api.formatColumnApi.getNumericStyleMaxValue(formatColumn.ColumnStyle, abColumn, params.node, params.value);
+            const min = api.styledColumnApi.getNumericStyleMinValue(columnStyle, abColumn, params.node, params.value);
+            const max = api.styledColumnApi.getNumericStyleMaxValue(columnStyle, abColumn, params.node, params.value);
             let value = params.value;
             if (Helper_1.default.objectNotExists(value)) {
                 value = 0;
@@ -24,12 +19,16 @@ const getPercentBarRendererForColumn = (formatColumn, abColumn, api) => {
             const clampedValue = (0, clamp_1.default)(value, min, max);
             const percentageValue = ((clampedValue - min) / (max - min)) * 100;
             let cellBackColor;
-            const percentBarStyle = formatColumn.ColumnStyle.PercentBarStyle;
+            const percentBarStyle = columnStyle.PercentBarStyle;
             if (percentBarStyle.ColumnComparison) {
                 cellBackColor = percentBarStyle.ColumnComparison.Color;
             }
             else {
-                const matchingRange = percentBarStyle.CellRanges.find((r) => r.Min <= clampedValue && r.Max >= clampedValue);
+                const matchingRange = percentBarStyle.CellRanges.find((r) => {
+                    const rMin = r.Min === 'Col-Min' ? min : r.Min;
+                    const rMax = r.Max === 'Col-Max' ? max : r.Max;
+                    return rMin <= clampedValue && rMax >= clampedValue;
+                });
                 if (matchingRange) {
                     cellBackColor = matchingRange.Color;
                 }
@@ -57,13 +56,6 @@ const getPercentBarRendererForColumn = (formatColumn, abColumn, api) => {
                     textEl.className = 'ab-PercentBar__text';
                     textEl.style.lineHeight = '1.2';
                     if (percentBarStyle.CellText.includes('CellValue')) {
-                        if (formatColumn.DisplayFormat) {
-                            const options = formatColumn.DisplayFormat
-                                .Options;
-                            if (options) {
-                                value = FormatHelper_1.default.NumberFormatter(params.value, options);
-                            }
-                        }
                         textEl.innerText = value;
                     }
                     if (percentBarStyle.CellText.includes('PercentageValue')) {

package/src/agGrid/agGridHelper.d.ts

@@ -5,7 +5,7 @@ import { AdaptableNodeComparerFunction } from '../PredefinedConfig/Common/Adapta
 import { AdaptableColumnType, AdaptableModule } from '../PredefinedConfig/Common/Types';
 import { IModule } from '../Strategy/Interface/IModule';
 import { IPPStyle } from '../Utilities/Interface/IPPStyle';
-import { FormatColumn } from '../PredefinedConfig/FormatColumnState';
+import { GradientStyle, PercentBarStyle } from '../PredefinedConfig/FormatColumnState';
 /**
  * Adaptable AG Grid implementation is getting really big and unwieldy
  * So lets put some of the more obvious 'Helper' functions here
@@ -22,7 +22,11 @@ export declare class agGridHelper {
     setUpModules(): Map<AdaptableModule, IModule>;
     TrySetUpNodeIds(hasAutogeneratedPrimaryKey: boolean): boolean;
     createCheckboxRendererComp(columnId: string, isColumnReadOnly: boolean): ICellRendererFunc | undefined;
-    createPercentBarRendererComp(formatColumn: FormatColumn, abColumn: AdaptableColumn): ICellRendererFunc;
+    createPercentBarRendererComp(columnStyle: {
+        GradientStyle?: GradientStyle;
+        PercentBarStyle?: PercentBarStyle;
+        CheckBoxStyle?: boolean;
+    }, abColumn: AdaptableColumn): ICellRendererFunc;
     getCleanValue(value: string): string | undefined;
     getRenderedValue(colDef: ColDef, valueToRender: any): any;
     createAdaptableColumnFromAgGridColumn(agGridColumn: Column, colsToGroups: Record<string, AdaptableColumnGroup>): AdaptableColumn;

package/src/agGrid/agGridHelper.js

@@ -43,6 +43,7 @@ const StatusBarModule_1 = require("../Strategy/StatusBarModule");
 const GeneralConstants = tslib_1.__importStar(require("../Utilities/Constants/GeneralConstants"));
 const GeneralConstants_1 = require("../Utilities/Constants/GeneralConstants");
 const UIHelper_1 = tslib_1.__importDefault(require("../View/UIHelper"));
+const StyledColumnModule_1 = require("../Strategy/StyledColumnModule");
 const tinycolor = require('tinycolor2');
 /**
  * Adaptable AG Grid implementation is getting really big and unwieldy
@@ -104,6 +105,7 @@ class agGridHelper {
         modules.set(ModuleConstants.SettingsPanelModuleId, new SettingsPanelModule_1.SettingsPanelModule(api));
         modules.set(ModuleConstants.StatusBarModuleId, new StatusBarModule_1.StatusBarModule(api));
         modules.set(ModuleConstants.ChartingModuleId, new ChartingModule_1.ChartingModule(api));
+        modules.set(ModuleConstants.StyledColumnModuleId, new StyledColumnModule_1.StyledColumnModule(api));
         return modules;
     }
     TrySetUpNodeIds(hasAutogeneratedPrimaryKey) {
@@ -150,8 +152,8 @@ class agGridHelper {
     createCheckboxRendererComp(columnId, isColumnReadOnly) {
         return (0, CheckboxRenderer_1.getCheckboxRendererForColumn)(columnId, isColumnReadOnly, this.adaptable.api);
     }
-    createPercentBarRendererComp(formatColumn, abColumn) {
-        return (0, PercentBarRenderer_1.getPercentBarRendererForColumn)(formatColumn, abColumn, this.adaptable.api);
+    createPercentBarRendererComp(columnStyle, abColumn) {
+        return (0, PercentBarRenderer_1.getPercentBarRendererForColumn)(columnStyle, abColumn, this.adaptable.api);
     }
     getCleanValue(value) {
         if (value == null || value == 'null' || value == undefined || value == 'undefined') {

package/src/agGrid/createAgStatusPanelComponent.d.ts

@@ -9,7 +9,7 @@ export interface StatusPanelProps {
         Key: string;
     };
 }
-export declare const createAgStatusPanelComponent: (component: React.FunctionComponent<StatusPanelProps>, adaptable: IAdaptable, context: StatusPanelProps['context']) => {
+export declare const createAgStatusPanelComponent: (component: React.FunctionComponent<StatusPanelProps>, adaptable: IAdaptable, context: StatusPanelProps['context']) => ((props: IStatusPanelParams) => JSX.Element) | {
     new (): {
         params: IStatusPanelParams;
         eGui: HTMLElement;

package/src/agGrid/createAgStatusPanelComponent.js

@@ -5,6 +5,23 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const renderWithAdaptableContext_1 = require("../View/renderWithAdaptableContext");
 const createAgStatusPanelComponent = (component, adaptable, context) => {
+    if (adaptable.variant === 'react') {
+        return (props) => {
+            const children = (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(component, {
+                params: props,
+                adaptableApi: adaptable.api,
+                context,
+            }), adaptable);
+            return (React.createElement("div", { className: "ab-StatusBar", ref: (node) => {
+                    if (node) {
+                        // in React rendering, ag-grid renders an additional extra div
+                        // around the status panel container, with className of 'ag-react-container'
+                        // which needs to be stretched in order to fill the status panel
+                        node.parentElement.style.display = 'flex';
+                    }
+                } }, children));
+        };
+    }
     return class StatusBarRenderer {
         init(params) {
             this.params = params;

package/src/components/Datepicker/index.d.ts

@@ -15,4 +15,4 @@ export declare type DatepickerProps = Omit<BoxProps, 'value' | 'onChange' | 'def
     showWeekNumber?: boolean;
     showOutsideDays?: boolean;
 };
-export declare const Datepicker: React.ForwardRefExoticComponent<Pick<DatepickerProps, "max" | "required" | "type" | "data" | "default" | "high" | "low" | "key" | "id" | "media" | "height" | "width" | "start" | "open" | "name" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "color" | "content" | "display" | "flex" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflow" | "overflowX" | "overflowY" | "padding" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "textAlign" | "translate" | "verticalAlign" | "value" | "hidden" | "cite" | "dir" | "form" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "acceptCharset" | "action" | "method" | "noValidate" | "target" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "async" | "disabled" | "multiple" | "size" | "manifest" | "m" | "wrap" | "accept" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "min" | "minLength" | "muted" | "optimum" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "bg" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "css" | "variant" | "tx" | "sx" | "showClearButton" | "onHide" | "showOutsideDays" | "showWeekNumber" | "datepickerButtons" | "dateProps"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Datepicker: React.ForwardRefExoticComponent<Pick<DatepickerProps, "max" | "required" | "type" | "data" | "default" | "high" | "low" | "key" | "id" | "media" | "height" | "width" | "start" | "open" | "name" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "color" | "content" | "display" | "flex" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflow" | "overflowX" | "overflowY" | "padding" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "textAlign" | "translate" | "verticalAlign" | "value" | "hidden" | "cite" | "dir" | "form" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "acceptCharset" | "action" | "method" | "noValidate" | "target" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "async" | "disabled" | "multiple" | "size" | "manifest" | "m" | "wrap" | "accept" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "min" | "minLength" | "muted" | "optimum" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "bg" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "css" | "variant" | "tx" | "sx" | "showOutsideDays" | "showWeekNumber" | "onHide" | "showClearButton" | "datepickerButtons" | "dateProps"> & React.RefAttributes<HTMLInputElement>>;

package/src/components/icons/brush.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/src/components/icons/brush.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const DefaultIcon_1 = tslib_1.__importDefault(require("./DefaultIcon"));
+exports.default = (props) => (React.createElement(DefaultIcon_1.default, Object.assign({}, props),
+    React.createElement("path", { d: "M6 21q-1.125 0-2.225-.55T2 19q.65 0 1.325-.512Q4 17.975 4 17q0-1.25.875-2.125T7 14q1.25 0 2.125.875T10 17q0 1.65-1.175 2.825Q7.65 21 6 21Zm0-2q.825 0 1.412-.587Q8 17.825 8 17q0-.425-.287-.712Q7.425 16 7 16t-.713.288Q6 16.575 6 17q0 .575-.137 1.05-.138.475-.363.9.125.05.25.05H6Zm5.75-4L9 12.25l8.95-8.95q.275-.275.688-.288.412-.012.712.288l1.35 1.35q.3.3.3.7 0 .4-.3.7ZM7 17Z" })));

package/src/components/icons/index.js

@@ -132,6 +132,7 @@ const track_changes_1 = tslib_1.__importDefault(require("./track-changes"));
 const menu_1 = tslib_1.__importDefault(require("./menu"));
 const statusbar_1 = tslib_1.__importDefault(require("./statusbar"));
 const add_row_1 = tslib_1.__importDefault(require("./add-row"));
+const brush_1 = tslib_1.__importDefault(require("./brush"));
 const LoggingHelper_1 = require("../../Utilities/Helpers/LoggingHelper");
 const quote_1 = tslib_1.__importDefault(require("./quote"));
 const news_1 = tslib_1.__importDefault(require("./news"));
@@ -154,6 +155,7 @@ const allIcons = {
     call: call_1.default,
     instrument: instrument_1.default,
     news: news_1.default,
+    brush: brush_1.default,
     'data-set': data_set_1.default,
     export: export_1.default,
     campaign: campaign_1.default,

package/src/metamodel/adaptable.metamodel.d.ts

@@ -1598,26 +1598,6 @@ export declare const ADAPTABLE_METAMODEL: {
             uiLabel: string;
         }[];
     };
-    ColumnStyle: {
-        name: string;
-        kind: string;
-        description: string;
-        properties: ({
-            name: string;
-            kind: string;
-            description: string;
-            uiLabel: string;
-            isOptional: boolean;
-            reference?: undefined;
-        } | {
-            name: string;
-            kind: string;
-            description: string;
-            uiLabel: string;
-            isOptional: boolean;
-            reference: string;
-        })[];
-    };
     ColumnValuesComparer: {
         name: string;
         kind: string;
@@ -3788,6 +3768,19 @@ export declare const ADAPTABLE_METAMODEL: {
         name: string;
         kind: string;
         description: string;
+        properties: ({
+            name: string;
+            kind: string;
+            description: string;
+            uiLabel: string;
+            reference?: undefined;
+        } | {
+            name: string;
+            kind: string;
+            description: string;
+            uiLabel: string;
+            reference: string;
+        })[];
     };
     ModuleExpressionFunctionsMap: {
         name: string;
@@ -4724,6 +4717,49 @@ export declare const ADAPTABLE_METAMODEL: {
             isOptional: boolean;
         }[];
     };
+    StyledColumn: {
+        name: string;
+        kind: string;
+        description: string;
+        properties: ({
+            name: string;
+            kind: string;
+            description: string;
+            uiLabel: string;
+            isOptional: boolean;
+            reference?: undefined;
+        } | {
+            name: string;
+            kind: string;
+            description: string;
+            uiLabel: string;
+            isOptional: boolean;
+            reference: string;
+        })[];
+    };
+    StyledColumnApi: {
+        name: string;
+        kind: string;
+        description: string;
+        properties: {
+            name: string;
+            kind: string;
+            description: string;
+            uiLabel: string;
+        }[];
+    };
+    StyledColumnState: {
+        name: string;
+        kind: string;
+        description: string;
+        properties: {
+            name: string;
+            kind: string;
+            description: string;
+            uiLabel: string;
+            isOptional: boolean;
+        }[];
+    };
     SuspendableObject: {
         name: string;
         kind: string;