@lowdefy/blocks-aggrid 3.23.3 → 4.0.0-alpha.18

package/README.md

@@ -76,6 +76,8 @@ The block types are hosted at:
 - `autoSize`: When called, auto size columns. The following can be passed as the first argument of `args`.
       - `skipHeader: boolean`: Do not consider header content width when auto-sizing columns.
       - `columnIds: string[]`: List of `colId`s for which to calculate auto-size when called.
+- `setFilterModel`: When called, apply filter model to table. See https://www.ag-grid.com/javascript-data-grid/filter-api/ for model details.
+- `setQuickFilter`: When called, pass a quick filter text into the grid for filtering. See https://www.ag-grid.com/javascript-data-grid/filter-quick/ for details.
 
 ### AgGridAlpine Example
 
@@ -561,24 +563,3 @@ pages:
             filter: true
             editable: true
 ```
-
-## Other Lowdefy Blocks Packages
-
-- [@lowdefy/blocks-template](https://github.com/lowdefy/blocks-template): Lowdefy template for creating blocks.
-- [@lowdefy/blocks-basic](https://github.com/lowdefy/lowdefy/tree/main/packages/blocks/blocksBasic): Official Lowdefy blocks some basic Html elements.
-- [@lowdefy/blocks-antd](https://github.com/lowdefy/lowdefy/tree/main/packages/blocks/blocksAntd): Official Lowdefy blocks for [Antd design](https://ant.design/).
-- [@lowdefy/blocks-color-selectors](https://github.com/lowdefy/lowdefy/tree/main/packages/blocks/blocksColorSelectorsd): Official Lowdefy blocks for [react-color](https://casesandberg.github.io/react-color/).
-- [@lowdefy/blocks-markdown](https://github.com/lowdefy/lowdefy/tree/main/packages/blocks/blocksMarkdown): Official Lowdefy blocks to render Markdown.
-- [@lowdefy/blocks-amcharts](https://github.com/lowdefy/blocks-amcharts): Lowdefy blocks to render [AmCharts v4](https://www.amcharts.com/).
-
-## More Lowdefy resources
-
-- Getting started with Lowdefy - https://docs.lowdefy.com/tutorial-start
-- Lowdefy docs - https://docs.lowdefy.com
-- Lowdefy website - https://lowdefy.com
-- Community forum - https://github.com/lowdefy/lowdefy/discussions
-- Bug reports and feature requests - https://github.com/lowdefy/lowdefy/issues
-
-## Licence
-
-[Apache-2.0](https://github.com/lowdefy/blocks-amcharts/blob/main/LICENSE)

package/dist/AgGrid.js

@@ -0,0 +1,147 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+/*
+  Copyright 2021 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React from 'react';
+import { AgGridReact } from '@ag-grid-community/react';
+import { AllCommunityModules } from '@ag-grid-community/all-modules';
+let AgGrid = class AgGrid extends React.Component {
+    // see https://stackoverflow.com/questions/55182118/ag-grid-resize-detail-height-when-data-changes
+    componentDidUpdate() {
+        if (this.gridApi) {
+            this.gridApi.resetRowHeights();
+        }
+    }
+    onGridReady(params) {
+        this.gridApi = params.api;
+        this.gridColumnApi = params.columnApi;
+        this.props.methods.registerMethod('exportDataAsCsv', (args)=>this.gridApi.exportDataAsCsv(args));
+        this.props.methods.registerMethod('sizeColumnsToFit', ()=>this.gridApi.sizeColumnsToFit());
+        this.props.methods.registerMethod('setFilterModel', (model)=>this.gridApi.setFilterModel(model));
+        this.props.methods.registerMethod('setQuickFilter', (value)=>this.gridApi.setQuickFilter(value));
+        this.props.methods.registerMethod('autoSize', (args = {})=>{
+            const { skipHeader , colIds  } = args;
+            const allColumnIds = colIds || [];
+            if (!colIds) {
+                this.gridColumnApi.getAllColumns().forEach((column)=>{
+                    allColumnIds.push(column.getId());
+                });
+            }
+            this.gridColumnApi.autoSizeColumns(allColumnIds, skipHeader);
+        });
+    }
+    onRowClick(event) {
+        if (this.props.events.onRowClick) {
+            this.props.methods.triggerEvent({
+                event: {
+                    row: event.data,
+                    selected: this.gridApi.getSelectedRows()
+                },
+                index: parseInt(event.node.id),
+                name: 'onRowClick',
+                rowIndex: event.rowIndex
+            });
+        }
+    }
+    onCellClicked(event) {
+        if (this.props.events.onCellClick) {
+            this.props.methods.triggerEvent({
+                name: 'onCellClick',
+                event: {
+                    cell: {
+                        column: event.colDef.field,
+                        value: event.value
+                    },
+                    colId: event.column.colId,
+                    index: parseInt(event.node.id),
+                    row: event.data,
+                    rowIndex: event.rowIndex,
+                    selected: this.gridApi.getSelectedRows()
+                }
+            });
+        }
+    }
+    onRowSelected(event) {
+        if (!event.node.selected) return; // see https://stackoverflow.com/a/63265775/2453657
+        if (this.props.events.onRowSelected) {
+            this.props.methods.triggerEvent({
+                event: {
+                    row: event.data,
+                    selected: this.gridApi.getSelectedRows()
+                },
+                index: parseInt(event.node.id),
+                name: 'onRowSelected',
+                rowIndex: event.rowIndex
+            });
+        }
+    }
+    onSelectionChanged() {
+        if (this.props.events.onSelectionChanged) {
+            this.props.methods.triggerEvent({
+                name: 'onSelectionChanged',
+                event: {
+                    selected: this.gridApi.getSelectedRows()
+                }
+            });
+        }
+    }
+    onFilterChanged(event) {
+        if (this.props.events.onFilterChanged) {
+            this.props.methods.triggerEvent({
+                name: 'onFilterChanged',
+                event: {
+                    rows: event.api.rowModel.rowsToDisplay.map((row)=>row.data)
+                }
+            });
+        }
+    }
+    render() {
+        const { quickFilterValue , ...someProperties } = this.props.properties;
+        if (quickFilterValue && quickFilterValue === '') {
+            this.gridApi.setQuickFilter(quickFilterValue); // check if empty string matches all
+        }
+        return /*#__PURE__*/ React.createElement(AgGridReact, _extends({
+            onFilterChanged: this.onFilterChanged,
+            onSelectionChanged: this.onSelectionChanged,
+            onRowSelected: this.onRowSelected,
+            onRowClicked: this.onRowClick,
+            onCellClicked: this.onCellClicked,
+            onGridReady: this.onGridReady,
+            modules: AllCommunityModules
+        }, someProperties));
+    }
+    constructor(props){
+        super(props);
+        this.onGridReady = this.onGridReady.bind(this);
+        this.onRowClick = this.onRowClick.bind(this);
+        this.onCellClicked = this.onCellClicked.bind(this);
+        this.onRowSelected = this.onRowSelected.bind(this);
+        this.onSelectionChanged = this.onSelectionChanged.bind(this);
+        this.onFilterChanged = this.onFilterChanged.bind(this);
+    }
+};
+export default AgGrid;

package/dist/AgGridInput.js

@@ -0,0 +1,195 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+/*
+  Copyright 2021 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React from 'react';
+import { AgGridReact } from '@ag-grid-community/react';
+import { AllCommunityModules } from '@ag-grid-community/all-modules';
+let AgGridInput = class AgGridInput extends React.Component {
+    // see https://stackoverflow.com/questions/55182118/ag-grid-resize-detail-height-when-data-changes
+    componentDidUpdate() {
+        if (this.gridApi) {
+            this.gridApi.resetRowHeights();
+        }
+    }
+    onGridReady(params) {
+        this.gridApi = params.api;
+        this.gridColumnApi = params.columnApi;
+        this.props.methods.registerMethod('exportDataAsCsv', (args)=>this.gridApi.exportDataAsCsv(args));
+        this.props.methods.registerMethod('sizeColumnsToFit', ()=>this.gridApi.sizeColumnsToFit());
+        this.props.methods.registerMethod('setFilterModel', (model)=>this.gridApi.setFilterModel(model));
+        this.props.methods.registerMethod('setQuickFilter', (value)=>this.gridApi.setQuickFilter(value));
+        this.props.methods.registerMethod('autoSize', (args = {})=>{
+            const { skipHeader , colIds  } = args;
+            const allColumnIds = colIds || [];
+            if (!colIds) {
+                this.gridColumnApi.getAllColumns().forEach((column)=>{
+                    allColumnIds.push(column.getId());
+                });
+            }
+            this.gridColumnApi.autoSizeColumns(allColumnIds, skipHeader);
+        });
+    }
+    onRowClick(event) {
+        if (this.props.events.onRowClick) {
+            this.props.methods.triggerEvent({
+                name: 'onRowClick',
+                event: {
+                    row: event.data,
+                    selected: this.gridApi.getSelectedRows(),
+                    rowIndex: event.rowIndex,
+                    index: parseInt(event.node.id)
+                }
+            });
+        }
+    }
+    onCellClicked(event) {
+        if (this.props.events.onCellClick) {
+            this.props.methods.triggerEvent({
+                name: 'onCellClick',
+                event: {
+                    cell: {
+                        column: event.colDef.field,
+                        value: event.value
+                    },
+                    colId: event.column.colId,
+                    index: parseInt(event.node.id),
+                    row: event.data,
+                    rowIndex: event.rowIndex,
+                    selected: this.gridApi.getSelectedRows()
+                }
+            });
+        }
+    }
+    onRowSelected(event) {
+        if (!event.node.selected) return; // see https://stackoverflow.com/a/63265775/2453657
+        if (this.props.events.onRowSelected) {
+            this.props.methods.triggerEvent({
+                event: {
+                    row: event.data,
+                    selected: this.gridApi.getSelectedRows()
+                },
+                index: parseInt(event.node.id),
+                name: 'onRowSelected',
+                rowIndex: event.rowIndex
+            });
+        }
+    }
+    onSelectionChanged() {
+        if (this.props.events.onSelectionChanged) {
+            this.props.methods.triggerEvent({
+                name: 'onSelectionChanged',
+                event: {
+                    selected: this.gridApi.getSelectedRows()
+                }
+            });
+        }
+    }
+    onFilterChanged(event) {
+        if (this.props.events.onFilterChanged) {
+            this.props.methods.triggerEvent({
+                name: 'onFilterChanged',
+                event: {
+                    rows: event.api.rowModel.rowsToDisplay.map((row)=>row.data)
+                }
+            });
+        }
+    }
+    onRowDragEnd(event) {
+        if (event.overNode !== event.node) {
+            const fromData = event.node.data;
+            const toData = event.overNode.data;
+            const fromIndex = this.props.value.indexOf(fromData);
+            const toIndex = this.props.value.indexOf(toData);
+            const newRowData = this.props.value.slice();
+            const element = newRowData[fromIndex];
+            newRowData.splice(fromIndex, 1);
+            newRowData.splice(toIndex, 0, element);
+            this.props.methods.setValue(newRowData);
+            this.gridApi.setRowData(this.props.value);
+            this.gridApi.clearFocusedCell();
+            this.props.methods.triggerEvent({
+                name: 'onRowDragEnd',
+                event: {
+                    fromData,
+                    toData,
+                    fromIndex,
+                    toIndex,
+                    newRowData
+                }
+            });
+        }
+    }
+    onCellValueChanged(params) {
+        const newRowData = this.props.value;
+        newRowData[parseInt(params.node.id)][params.colDef.field] = params.newValue;
+        this.props.methods.setValue(newRowData);
+        this.props.methods.triggerEvent({
+            name: 'onCellValueChanged',
+            event: {
+                field: params.colDef.field,
+                index: parseInt(params.node.id),
+                newRowData,
+                newValue: params.newValue,
+                oldValue: params.oldValue,
+                rowData: params.data,
+                rowIndex: params.rowIndex
+            }
+        });
+    }
+    render() {
+        const { quickFilterValue , ...someProperties } = this.props.properties;
+        if (quickFilterValue && quickFilterValue === '') {
+            this.gridApi.setQuickFilter(quickFilterValue); // check if empty string matches all
+        }
+        return /*#__PURE__*/ React.createElement(AgGridReact, _extends({
+            onSelectionChanged: this.onSelectionChanged,
+            onRowSelected: this.onRowSelected,
+            onRowClicked: this.onRowClick,
+            onCellClicked: this.onCellClicked,
+            onGridReady: this.onGridReady,
+            onRowDragEnd: this.onRowDragEnd,
+            onCellValueChanged: this.onCellValueChanged,
+            postSort: this.postSort,
+            modules: AllCommunityModules
+        }, someProperties, {
+            rowData: this.props.value
+        }));
+    }
+    constructor(props){
+        super(props);
+        this.onGridReady = this.onGridReady.bind(this);
+        this.onRowClick = this.onRowClick.bind(this);
+        this.onCellClicked = this.onCellClicked.bind(this);
+        this.onRowSelected = this.onRowSelected.bind(this);
+        this.onSelectionChanged = this.onSelectionChanged.bind(this);
+        this.onRowDragEnd = this.onRowDragEnd.bind(this);
+        this.onCellValueChanged = this.onCellValueChanged.bind(this);
+        this.onFilterChanged = this.onFilterChanged.bind(this);
+    }
+};
+export default AgGridInput;

package/dist/blocks/AgGridAlpine/AgGridAlpine.js

@@ -0,0 +1,38 @@
+/*
+  Copyright 2021 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React from 'react';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+import AgGrid from '../../AgGrid.js';
+const AgGridAlpine = ({ blockId , events , methods , properties  })=>/*#__PURE__*/ React.createElement("div", {
+        id: blockId,
+        className: `ag-theme-alpine ${methods.makeCssClass({
+            width: '100%',
+            height: properties.height || 500,
+            ...properties.style
+        })}`
+    }, /*#__PURE__*/ React.createElement(AgGrid, {
+        events: events,
+        properties: properties,
+        methods: methods
+    }));
+AgGridAlpine.defaultProps = blockDefaultProps;
+AgGridAlpine.meta = {
+    category: 'display',
+    icons: [],
+    styles: [
+        'blocks/AgGridAlpine/style.less'
+    ]
+};
+export default AgGridAlpine;

package/dist/blocks/AgGridAlpine/AgGridAlpine.json

@@ -0,0 +1,8 @@
+{
+  "type": "object",
+  "properties": {
+    "properties": {
+      "type": "object"
+    }
+  }
+}

package/dist/blocks/AgGridAlpine/style.less

@@ -0,0 +1,18 @@
+/*
+  Copyright 2020-2022 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-grid.css';
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-theme-alpine.css';

package/dist/blocks/AgGridAlpineDark/AgGridAlpineDark.js

@@ -0,0 +1,38 @@
+/*
+  Copyright 2021 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React from 'react';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+import AgGrid from '../../AgGrid.js';
+const AgGridAlpineDark = ({ blockId , events , methods , properties  })=>/*#__PURE__*/ React.createElement("div", {
+        id: blockId,
+        className: `ag-theme-alpine-dark ${methods.makeCssClass({
+            width: '100%',
+            height: properties.height || 500,
+            ...properties.style
+        })}`
+    }, /*#__PURE__*/ React.createElement(AgGrid, {
+        events: events,
+        properties: properties,
+        methods: methods
+    }));
+AgGridAlpineDark.defaultProps = blockDefaultProps;
+AgGridAlpineDark.meta = {
+    category: 'display',
+    icons: [],
+    styles: [
+        'blocks/AgGridAlpineDark/style.less'
+    ]
+};
+export default AgGridAlpineDark;

package/dist/blocks/AgGridAlpineDark/AgGridAlpineDark.json

@@ -0,0 +1,8 @@
+{
+  "type": "object",
+  "properties": {
+    "properties": {
+      "type": "object"
+    }
+  }
+}

package/dist/blocks/AgGridAlpineDark/style.less

@@ -0,0 +1,18 @@
+/*
+  Copyright 2020-2022 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-grid.css';
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-theme-alpine-dark.css';

package/dist/blocks/AgGridBalham/AgGridBalham.js

@@ -0,0 +1,38 @@
+/*
+  Copyright 2021 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React from 'react';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+import AgGrid from '../../AgGrid.js';
+const AgGridBalham = ({ blockId , events , methods , properties  })=>/*#__PURE__*/ React.createElement("div", {
+        id: blockId,
+        className: `ag-theme-balham ${methods.makeCssClass({
+            width: '100%',
+            height: properties.height || 500,
+            ...properties.style
+        })}`
+    }, /*#__PURE__*/ React.createElement(AgGrid, {
+        events: events,
+        properties: properties,
+        methods: methods
+    }));
+AgGridBalham.defaultProps = blockDefaultProps;
+AgGridBalham.meta = {
+    category: 'display',
+    icons: [],
+    styles: [
+        'blocks/AgGridBalham/style.less'
+    ]
+};
+export default AgGridBalham;

package/dist/blocks/AgGridBalham/AgGridBalham.json

@@ -0,0 +1,8 @@
+{
+  "type": "object",
+  "properties": {
+    "properties": {
+      "type": "object"
+    }
+  }
+}

package/dist/blocks/AgGridBalham/style.less

@@ -0,0 +1,18 @@
+/*
+  Copyright 2020-2022 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-grid.css';
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css';

package/dist/blocks/AgGridBalhamDark/AgGridBalhamDark.js

@@ -0,0 +1,38 @@
+/*
+  Copyright 2021 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React from 'react';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+import AgGrid from '../../AgGrid.js';
+const AgGridBalhamDark = ({ blockId , events , methods , properties  })=>/*#__PURE__*/ React.createElement("div", {
+        id: blockId,
+        className: `ag-theme-balham-dark ${methods.makeCssClass({
+            width: '100%',
+            height: properties.height || 500,
+            ...properties.style
+        })}`
+    }, /*#__PURE__*/ React.createElement(AgGrid, {
+        events: events,
+        properties: properties,
+        methods: methods
+    }));
+AgGridBalhamDark.defaultProps = blockDefaultProps;
+AgGridBalhamDark.meta = {
+    category: 'display',
+    icons: [],
+    styles: [
+        'blocks/AgGridBalhamDark/style.less'
+    ]
+};
+export default AgGridBalhamDark;

package/dist/blocks/AgGridBalhamDark/AgGridBalhamDark.json

@@ -0,0 +1,8 @@
+{
+  "type": "object",
+  "properties": {
+    "properties": {
+      "type": "object"
+    }
+  }
+}

package/dist/blocks/AgGridBalhamDark/style.less

@@ -0,0 +1,18 @@
+/*
+  Copyright 2020-2022 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-grid.css';
+@import (less) '@ag-grid-community/all-modules/dist/styles/ag-theme-balham-dark.css';