@lowdefy/blocks-aggrid 4.7.3 → 5.1.0

package/dist/AgGrid.js

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 Lowdefy, Inc
+  Copyright 2020-2026 Lowdefy, Inc
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
@@ -18,6 +18,7 @@ import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-mod
 import { CsvExportModule } from '@ag-grid-community/csv-export';
 import processColDefs from './processColDefs.js';
 import assignRowId from './assignRowId.js';
+import LoadingOverlay from './LoadingOverlay.js';
 const AgGrid = ({ properties, methods, loading, events })=>{
     const { quickFilterValue, columnDefs, defaultColDef, rowData: newRowData, ...someProperties } = properties;
     const [rowData, setRowData] = useState(newRowData ?? []);
@@ -118,14 +119,6 @@ const AgGrid = ({ properties, methods, loading, events })=>{
             }
             gridRef.current.columnApi.autoSizeColumns(allColumnIds, skipHeader);
         });
-        if (gridRef.current.api) {
-            if (loading) {
-                gridRef.current.api.showLoadingOverlay();
-            }
-            if (!loading) {
-                gridRef.current.api.hideOverlay();
-            }
-        }
     }, []);
     useEffect(()=>{
         if (JSON.stringify(rowData) !== JSON.stringify(newRowData)) {
@@ -137,7 +130,13 @@ const AgGrid = ({ properties, methods, loading, events })=>{
     if (quickFilterValue && quickFilterValue === '') {
         gridRef.current.api.setQuickFilter(quickFilterValue); // check if empty string matches all
     }
-    return /*#__PURE__*/ React.createElement(AgGridReact, {
+    return /*#__PURE__*/ React.createElement("div", {
+        style: {
+            position: 'relative',
+            width: '100%',
+            height: '100%'
+        }
+    }, /*#__PURE__*/ React.createElement(AgGridReact, {
         ...someProperties,
         rowData: rowData,
         defaultColDef: memoDefaultColDef,
@@ -153,7 +152,8 @@ const AgGrid = ({ properties, methods, loading, events })=>{
         ],
         columnDefs: processColDefs(columnDefs, methods),
         ref: gridRef,
-        getRowId: getRowId
-    });
+        getRowId: getRowId,
+        suppressLoadingOverlay: true
+    }), loading && /*#__PURE__*/ React.createElement(LoadingOverlay, null));
 };
 export default AgGrid;

package/dist/AgGridInput.js

@@ -18,6 +18,7 @@ import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-mod
 import { CsvExportModule } from '@ag-grid-community/csv-export';
 import processColDefs from './processColDefs.js';
 import assignRowId from './assignRowId.js';
+import LoadingOverlay from './LoadingOverlay.js';
 const AgGridInput = ({ properties, methods, loading, events, value })=>{
     const { quickFilterValue, columnDefs, defaultColDef, ...someProperties } = properties;
     const [rowData, setRowData] = useState(value ?? []);
@@ -167,14 +168,6 @@ const AgGridInput = ({ properties, methods, loading, events, value })=>{
             }
             gridRef.current.columnApi.autoSizeColumns(allColumnIds, skipHeader);
         });
-        if (gridRef.current.api) {
-            if (loading) {
-                gridRef.current.api.showLoadingOverlay();
-            }
-            if (!loading) {
-                gridRef.current.api.hideOverlay();
-            }
-        }
     }, []);
     useEffect(()=>{
         if (JSON.stringify(rowData) !== JSON.stringify(value)) {
@@ -186,7 +179,13 @@ const AgGridInput = ({ properties, methods, loading, events, value })=>{
     if (quickFilterValue && quickFilterValue === '') {
         gridRef.current.api.setQuickFilter(quickFilterValue); // check if empty string matches all
     }
-    return /*#__PURE__*/ React.createElement(AgGridReact, {
+    return /*#__PURE__*/ React.createElement("div", {
+        style: {
+            position: 'relative',
+            width: '100%',
+            height: '100%'
+        }
+    }, /*#__PURE__*/ React.createElement(AgGridReact, {
         ...someProperties,
         rowData: rowData,
         onCellClicked: onCellClicked,
@@ -204,7 +203,8 @@ const AgGridInput = ({ properties, methods, loading, events, value })=>{
         ],
         columnDefs: processColDefs(columnDefs, methods),
         ref: gridRef,
-        getRowId: getRowId
-    });
+        getRowId: getRowId,
+        suppressLoadingOverlay: true
+    }), loading && /*#__PURE__*/ React.createElement(LoadingOverlay, null));
 };
 export default AgGridInput;

package/dist/LoadingOverlay.js

@@ -0,0 +1,42 @@
+/*
+  Copyright 2020-2026 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';
+const wrapperStyle = {
+    position: 'absolute',
+    inset: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'color-mix(in srgb, var(--ant-color-bg-container) 70%, transparent)',
+    zIndex: 2,
+    pointerEvents: 'all'
+};
+const boxStyle = {
+    padding: '8px 16px',
+    borderRadius: 'var(--ant-border-radius)',
+    boxShadow: 'var(--ant-box-shadow-secondary)',
+    backgroundColor: 'var(--ant-color-bg-container)',
+    color: 'var(--ant-color-text)',
+    border: '1px solid var(--ant-color-border)',
+    fontSize: 'var(--ant-font-size)'
+};
+function LoadingOverlay() {
+    return /*#__PURE__*/ React.createElement("div", {
+        style: wrapperStyle
+    }, /*#__PURE__*/ React.createElement("div", {
+        style: boxStyle
+    }, "Loading..."));
+}
+export default LoadingOverlay;

package/dist/ag-grid-antd.module.css

@@ -0,0 +1,107 @@
+.antdTheme.antdTheme {
+  --ag-background-color: var(--ant-color-bg-container);
+  --ag-foreground-color: var(--ant-color-text);
+  --ag-secondary-foreground-color: var(--ant-color-text-secondary);
+  --ag-border-color: var(--ant-color-border);
+  --ag-secondary-border-color: var(--ant-color-border-secondary);
+  --ag-header-background-color: var(--ant-color-fill-quaternary);
+  --ag-header-foreground-color: var(--ant-color-text);
+  --ag-header-cell-hover-background-color: var(--ant-color-fill-tertiary);
+  --ag-header-cell-moving-background-color: var(--ant-color-fill-secondary);
+  --ag-tooltip-background-color: var(--ant-color-bg-spotlight);
+  --ag-odd-row-background-color: var(--ant-color-fill-quaternary);
+  --ag-control-panel-background-color: var(--ant-color-bg-elevated);
+  --ag-subheader-background-color: var(--ant-color-bg-layout);
+  --ag-subheader-toolbar-background-color: var(--ant-color-bg-layout);
+  --ag-selected-row-background-color: var(--ant-color-primary-bg);
+  --ag-row-hover-color: var(--ant-color-primary-bg-hover);
+  --ag-column-hover-color: var(--ant-color-primary-bg-hover);
+  --ag-range-selection-highlight-color: var(--ant-color-primary-bg-hover);
+  --ag-modal-overlay-background-color: var(--ant-color-bg-mask);
+  --ag-input-disabled-background-color: var(--ant-color-bg-container-disabled);
+  --ag-input-disabled-border-color: var(--ant-color-border);
+  --ag-disabled-foreground-color: var(--ant-color-text-disabled);
+  --ag-chip-background-color: var(--ant-color-fill-secondary);
+  --ag-input-focus-box-shadow: 0 0 0 2px var(--ant-color-primary-bg);
+  --ag-input-focus-border-color: var(--ant-color-primary);
+  --ag-range-selection-border-color: var(--ant-color-primary);
+  --ag-range-selection-background-color: var(--ant-color-primary-bg);
+  --ag-checkbox-checked-color: var(--ant-color-primary);
+  --ag-checkbox-unchecked-color: var(--ant-color-text-quaternary);
+  --ag-checkbox-background-color: var(--ant-color-bg-container);
+  --ag-card-shadow: var(--ant-box-shadow-secondary);
+  --ag-popup-shadow: var(--ant-box-shadow);
+  --ag-font-family: var(--ant-font-family);
+  --ag-font-size: var(--ant-font-size);
+}
+
+.antdTheme :global(.ag-root-wrapper) {
+  border-radius: var(--ant-border-radius);
+  overflow: hidden;
+}
+
+/* Avatar sizing per ag-grid theme — reads row-height via the wrapper class. */
+.antdTheme:global(.ag-theme-balham),
+.antdTheme:global(.ag-theme-balham-dark) {
+  --lf-avatar-size: 20px;
+  --lf-avatar-font-size: 10px;
+}
+.antdTheme:global(.ag-theme-alpine),
+.antdTheme:global(.ag-theme-alpine-dark) {
+  --lf-avatar-size: var(--ant-control-height-sm, 24px);
+  --lf-avatar-font-size: var(--ant-font-size-sm, 12px);
+}
+.antdTheme:global(.ag-theme-material) {
+  --lf-avatar-size: 26px;
+  --lf-avatar-font-size: var(--ant-font-size-sm, 12px);
+}
+
+.antdTheme :global(.ag-overlay-loading-wrapper) {
+  background-color: color-mix(in srgb, var(--ant-color-bg-container) 70%, transparent);
+}
+
+.antdTheme :global(.ag-overlay-loading-center) {
+  border-radius: var(--ant-border-radius);
+  box-shadow: var(--ant-box-shadow-secondary);
+}
+
+.antdTheme :global(.ag-overlay-no-rows-wrapper) {
+  color: var(--ant-color-text-secondary);
+}
+
+.antdTheme :global(.ag-cell) {
+  display: flex;
+  align-items: center;
+  line-height: var(--ant-line-height, 1.5);
+}
+
+.antdTheme :global(.lf-ellipsis-1),
+.antdTheme :global(.lf-ellipsis-2),
+.antdTheme :global(.lf-ellipsis-3),
+.antdTheme :global(.lf-ellipsis-4),
+.antdTheme :global(.lf-ellipsis-5),
+.antdTheme :global(.lf-ellipsis-6) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  white-space: normal;
+  word-break: break-word;
+}
+.antdTheme :global(.lf-ellipsis-1) {
+  -webkit-line-clamp: 1;
+}
+.antdTheme :global(.lf-ellipsis-2) {
+  -webkit-line-clamp: 2;
+}
+.antdTheme :global(.lf-ellipsis-3) {
+  -webkit-line-clamp: 3;
+}
+.antdTheme :global(.lf-ellipsis-4) {
+  -webkit-line-clamp: 4;
+}
+.antdTheme :global(.lf-ellipsis-5) {
+  -webkit-line-clamp: 5;
+}
+.antdTheme :global(.lf-ellipsis-6) {
+  -webkit-line-clamp: 6;
+}

package/dist/blocks/AgGridAlpine/AgGridAlpine.js

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 Lowdefy, Inc
+  Copyright 2020-2026 Lowdefy, Inc
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
@@ -13,27 +13,25 @@
   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 { withBlockDefaults } from '@lowdefy/block-utils';
+import '@ag-grid-community/styles/ag-grid.css';
+import '@ag-grid-community/styles/ag-theme-alpine.css';
+import antdStyles from '../../ag-grid-antd.module.css';
 import AgGrid from '../../AgGrid.js';
-const AgGridAlpine = ({ blockId, events, loading, methods, properties })=>/*#__PURE__*/ React.createElement("div", {
+const AgGridAlpine = ({ blockId, events, loading, methods, properties, styles })=>{
+    return /*#__PURE__*/ React.createElement("div", {
         id: blockId,
-        className: `ag-theme-alpine ${methods.makeCssClass({
+        className: `ag-theme-alpine ${antdStyles.antdTheme}`,
+        style: {
             width: '100%',
             height: properties.height ?? 500,
-            ...properties.style
-        })}`
+            ...styles?.element
+        }
     }, /*#__PURE__*/ React.createElement(AgGrid, {
         events: events,
         loading: loading,
         methods: methods,
         properties: properties
     }));
-AgGridAlpine.defaultProps = blockDefaultProps;
-AgGridAlpine.meta = {
-    category: 'display',
-    icons: [],
-    styles: [
-        'blocks/AgGridAlpine/style.less'
-    ]
 };
-export default AgGridAlpine;
+export default withBlockDefaults(AgGridAlpine);