directual-web-components-v2 3.11.339 → 3.11.342

package/dist/index.css

@@ -1964,30 +1964,26 @@ a._IMG1h {
   opacity: 1;
 }
 ._3bMpu ._34tIu {
-  position: absolute;
-  top: 6px;
-  right: 6px;
   display: flex;
-  gap: 2px;
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-._3bMpu ._1Yv6j:hover ._34tIu {
-  opacity: 1;
+  gap: 4px;
+  padding: 4px 0 0 0;
+  justify-content: flex-end;
 }
 ._3bMpu ._Sxnoe {
   cursor: pointer;
-  opacity: 0.4;
-  padding: 4px;
+  opacity: 0.35;
+  padding: 4px 6px;
   border-radius: var(--border-radius);
-  font-size: var(--text-very-small-size);
   line-height: 1;
   -webkit-user-select: none;
           user-select: none;
   transition: opacity 0.15s;
 }
+._3bMpu ._Sxnoe:before {
+  font-size: 20px;
+}
 ._3bMpu ._Sxnoe:hover {
-  opacity: 0.9;
+  opacity: 0.85;
 }
 .react-tooltip {
   z-index: 1000;

package/dist/index.js

@@ -5302,8 +5302,8 @@ function JsonInput(_ref) {
   const adjustHeight = React.useCallback(() => {
     const el = textareaRef.current;
     if (!el || rows !== 'auto') return;
-    el.style.height = 'auto';
-    el.style.height = el.scrollHeight + 'px';
+    el.style.minHeight = '0';
+    el.style.minHeight = el.scrollHeight + 'px';
   }, [rows]);
   React.useEffect(() => {
     adjustHeight();
@@ -5485,20 +5485,20 @@ function JsonInput(_ref) {
     onKeyDown: handleKeyDown,
     value: value,
     placeholder: placeholder || ''
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: styles$4.json_toolbar
-  }, value && !disabled && !copy && /*#__PURE__*/React__default.createElement("div", {
-    className: styles$4.json_toolbar_btn + " icon icon-close",
-    title: "Clear",
-    onClick: handleClear
-  }), value && copy && /*#__PURE__*/React__default.createElement("div", {
-    className: styles$4.json_toolbar_btn + " icon icon-copy",
-    title: "Copy",
-    onClick: handleCopy
   }), value && !disabled && /*#__PURE__*/React__default.createElement("div", {
+    className: styles$4.json_toolbar
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: styles$4.json_toolbar_btn + " icon icon-code",
     title: "Format JSON",
     onClick: handleFormat
+  }), copy && /*#__PURE__*/React__default.createElement("div", {
+    className: styles$4.json_toolbar_btn + " icon icon-copy",
+    title: "Copy",
+    onClick: handleCopy
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: styles$4.json_toolbar_btn + " icon icon-close",
+    title: "Clear",
+    onClick: handleClear
   })), warningMsg.msg && /*#__PURE__*/React__default.createElement("div", {
     className: styles$4.status + " " + styles$4[warningMsg.type]
   }, warningMsg.msg));
@@ -14964,6 +14964,19 @@ const SafeInnerHTML$1 = _ref => {
     html: html
   }));
 };
+const stripDataInfoContent = responseData => {
+  const dataInfo = _$1__default.get(responseData, "result.data", {}) || {};
+  if (dataInfo.content) {
+    delete dataInfo.content;
+  }
+  return dataInfo;
+};
+const normalizeObjectsList = result => {
+  if (!Array.isArray(result)) {
+    return [];
+  }
+  return result.filter(Boolean);
+};
 function FpsCards2(_ref2) {
   let {
     auth,
@@ -14989,8 +15002,6 @@ function FpsCards2(_ref2) {
   const card_border = _$1__default.get(data, "params.card_border", 1);
   const card_border_radius = _$1__default.get(data, "params.card_border_radius");
   const sl = _$1__default.get(data, "sl");
-  const cx = null;
-  const dqlService = _$1.debounce(performFiltering, 600);
   const comp_ID = _$1__default.get(data, "params.comp_ID");
   const [error, setError] = React.useState("");
   const getPageFromUrl = () => {
@@ -14999,6 +15010,8 @@ function FpsCards2(_ref2) {
     return savedPage ? Number(savedPage) : 0;
   };
   const [page, setPage] = React.useState(getPageFromUrl);
+  const [pageSizeOverride, setPageSizeOverride] = React.useState(null);
+  const pageSize = pageSizeOverride || data.pageSize || 10;
   const [dql, setDQL] = React.useState('');
   const [sort, setSort] = React.useState({});
   const [loading, setLoading] = React.useState(false);
@@ -15006,13 +15019,14 @@ function FpsCards2(_ref2) {
   const isFirstRender = React.useRef(true);
   const isRestoringFromUrl = React.useRef(false);
   const cardsContainerRef = React.useRef(null);
+  const refreshSeqRef = React.useRef(0);
+  const dqlService = React.useMemo(() => _$1.debounce(performFiltering, 600), []);
   const updatePageInUrl = newPage => {
     const urlParams = new URLSearchParams(window.location.search);
     urlParams.set("page_" + comp_ID, newPage);
     window.history.replaceState({}, '', window.location.pathname + "?" + urlParams.toString());
   };
   function performFiltering(dql, sort) {
-    clearTimeout(cx);
     console.log('=== F I L T E R I N G ! ===');
     console.log(dql);
     console.log('=== S O R T I N G ! ===');
@@ -15030,31 +15044,6 @@ function FpsCards2(_ref2) {
       setPage(0);
     }
   }
-  const nextPage = () => {
-    setPage(prevPage => {
-      const newPage = prevPage + 1;
-      updatePageInUrl(newPage);
-      return newPage;
-    });
-  };
-  const prevPage = () => {
-    setPage(prevPage => {
-      const newPage = Math.max(prevPage - 1, 0);
-      updatePageInUrl(newPage);
-      return newPage;
-    });
-  };
-  const firstPage = () => {
-    setPage(0);
-    updatePageInUrl(0);
-  };
-  const lastPage = () => {
-    const pageSize = _$1__default.get(dataInfo, 'pageable.pageSize', data.pageSize || 10);
-    const totalPages = Math.max(1, Math.ceil(_$1__default.get(dataInfo, 'total', 0) / pageSize));
-    const lastPageNumber = Math.max(0, totalPages - 1);
-    setPage(lastPageNumber);
-    updatePageInUrl(lastPageNumber);
-  };
   function checkHidden(element, debug, reverse, model) {
     let _conditions = _$1__default.get(element, "_conditions") || [];
     let _name = "";
@@ -15337,7 +15326,6 @@ function FpsCards2(_ref2) {
     if (isFlexLayout === void 0) {
       isFlexLayout = false;
     }
-    const pageSize = pageLoading ? _$1__default.get(dataInfo, 'pageable.pageSize', data.pageSize || 10) : data.pageSize || 10;
     const card_min_height = _$1__default.get(data, "params.card_min_height") || "120px";
     return Array(pageSize).fill(null).map((_, index) => /*#__PURE__*/React__default.createElement("div", {
       key: "skeleton-" + index,
@@ -15412,6 +15400,31 @@ function FpsCards2(_ref2) {
     "empty": false,
     "numberOfElements": 3
   });
+  const totalObjects = _$1__default.get(dataInfo, 'total', 0);
+  const totalPages = Math.max(1, Math.ceil(totalObjects / pageSize));
+  const nextPage = () => {
+    setPage(prevPage => {
+      const newPage = Math.min(prevPage + 1, totalPages - 1);
+      updatePageInUrl(newPage);
+      return newPage;
+    });
+  };
+  const prevPage = () => {
+    setPage(prevPage => {
+      const newPage = Math.max(prevPage - 1, 0);
+      updatePageInUrl(newPage);
+      return newPage;
+    });
+  };
+  const firstPage = () => {
+    setPage(0);
+    updatePageInUrl(0);
+  };
+  const lastPage = () => {
+    const lastPageNumber = Math.max(0, totalPages - 1);
+    setPage(lastPageNumber);
+    updatePageInUrl(lastPageNumber);
+  };
   React.useEffect(() => {
     setFavLoading(true);
     favoritesOn && favoritesEndpoint && callEndpointGET(favoritesEndpoint, {
@@ -15421,22 +15434,21 @@ function FpsCards2(_ref2) {
       setFavLoading(false);
     });
   }, []);
-  function refresh(dql, sort) {
+  function refresh(dql, sort, overridePage) {
     if (data && data.sl) {
       setPageLoading(true);
+      const seq = ++refreshSeqRef.current;
       const sortString = sort && sort.field ? sort.field + ":" + (sort.direction || 'asc') : '';
+      const requestPage = overridePage !== undefined ? overridePage : page;
       callEndpointGET(data.sl, {
-        pageSize: data.pageSize || 10,
-        page: page,
+        pageSize: pageSize,
+        page: requestPage,
         dql: dql,
         sort: sortString
-      }, (result, data) => {
-        const dataInfo = _$1__default.get(data, "result.data", {});
-        if (dataInfo && dataInfo.content) {
-          delete dataInfo.content;
-        }
-        setDataInfo(dataInfo);
-        setObjects(result);
+      }, (result, responseData) => {
+        if (seq !== refreshSeqRef.current) return;
+        setDataInfo(stripDataInfoContent(responseData));
+        setObjects(normalizeObjectsList(result));
         setPageLoading(false);
       });
     }
@@ -15450,9 +15462,9 @@ function FpsCards2(_ref2) {
       isFirstRender.current = false;
       return;
     }
-    console.log("page => " + page);
+    console.log("page => " + page + ", pageSize => " + pageSize);
     refresh(dql, sort);
-  }, [page, debug]);
+  }, [page, pageSize, debug]);
   React.useEffect(() => {
     if (debug) {
       console.log("Cards2 Debug mode: using data from props, skipping API calls");
@@ -15519,19 +15531,17 @@ function FpsCards2(_ref2) {
     if (data && data.sl) {
       console.log("Loading initial data from URL: page=" + urlPage + ", dql=" + urlDql);
       setPageLoading(true);
+      const seq = ++refreshSeqRef.current;
       const sortString = urlSort && urlSort.field ? urlSort.field + ":" + (urlSort.direction || 'asc') : '';
       callEndpointGET(data.sl, {
-        pageSize: data.pageSize || 10,
+        pageSize: pageSize,
         page: urlPage,
         dql: urlDql,
         sort: sortString
       }, (result, responseData) => {
-        const newDataInfo = _$1__default.get(responseData, "result.data", {});
-        if (newDataInfo && newDataInfo.content) {
-          delete newDataInfo.content;
-        }
-        setDataInfo(newDataInfo);
-        setObjects(result);
+        if (seq !== refreshSeqRef.current) return;
+        setDataInfo(stripDataInfoContent(responseData));
+        setObjects(normalizeObjectsList(result));
         setPageLoading(false);
         setInitialLoading(false);
       });
@@ -15547,20 +15557,18 @@ function FpsCards2(_ref2) {
     if (!socket) return;
     if (data && data.sl) {
       console.log("Socket changed, updating data in background...");
+      const seq = ++refreshSeqRef.current;
       const sortString = sort && sort.field ? sort.field + ":" + (sort.direction || 'asc') : '';
       callEndpointGET(data.sl, {
-        pageSize: data.pageSize || 10,
+        pageSize: pageSize,
         page: page,
         dql: dql,
         sort: sortString
       }, (result, responseData) => {
+        if (seq !== refreshSeqRef.current) return;
         console.log("Background update completed");
-        const dataInfo = _$1__default.get(responseData, "result.data", {});
-        if (dataInfo && dataInfo.content) {
-          delete dataInfo.content;
-        }
-        setDataInfo(dataInfo);
-        setObjects(result);
+        setDataInfo(stripDataInfoContent(responseData));
+        setObjects(normalizeObjectsList(result));
       });
     }
   }, [socket, debug]);
@@ -15599,7 +15607,10 @@ function FpsCards2(_ref2) {
     customHTMLfilters: _$1__default.get(data.params, 'filterParams.filteringSortingLayout') === 'custom',
     customHTMLfiltersContent: _$1__default.get(data.params, 'filterParams.filteringSortingLayoutHTML'),
     callEndpoint: (endpoint, params, finish, setOptions, setError) => {
-      const transformedArray = (inputArray, visibleNames) => _$1__default.map(inputArray, item => {
+      const transformedArray = (inputArray, visibleNames) => _$1__default.compact(_$1__default.map(inputArray || [], item => {
+        if (!item) {
+          return null;
+        }
         const parseJson = json => {
           if (!json) return {};
           let parsedJson = {};
@@ -15625,7 +15636,7 @@ function FpsCards2(_ref2) {
           image: _$1__default.get(rest, "userpic") || _$1__default.get(rest, "image") || _$1__default.get(rest, "picture") || _$1__default.get(rest, "photo"),
           description: description
         };
-      });
+      }));
       callEndpoint && callEndpoint(endpoint, "GET", undefined, params, (result, data, visibleNames) => {
         if (result == "ok") {
           finish && finish(transformedArray(data, visibleNames));
@@ -15657,7 +15668,7 @@ function FpsCards2(_ref2) {
       gap: grid_layout__gap,
       gridTemplateColumns: _$1__default.join(_$1__default.times(breakPoints[currentBP], _$1__default.constant('1fr')), ' ')
     }
-  }, initialLoading || pageLoading ? renderSkeletons() : objects.filter(object => !!_$1__default.get(object, field_quantity, 1)).map(object => /*#__PURE__*/React__default.createElement(CardWrapper, {
+  }, initialLoading || pageLoading ? renderSkeletons() : objects.filter(object => object && !!_$1__default.get(object, field_quantity, 1)).map(object => /*#__PURE__*/React__default.createElement(CardWrapper, {
     key: object.id,
     data: data,
     auth: auth,
@@ -15705,7 +15716,7 @@ function FpsCards2(_ref2) {
     style: {
       gap: flex_layout__gap
     }
-  }, initialLoading || pageLoading ? renderSkeletons(true) : objects.filter(object => !!_$1__default.get(object, field_quantity, 1)).map(object => /*#__PURE__*/React__default.createElement(CardWrapper, {
+  }, initialLoading || pageLoading ? renderSkeletons(true) : objects.filter(object => object && !!_$1__default.get(object, field_quantity, 1)).map(object => /*#__PURE__*/React__default.createElement(CardWrapper, {
     key: object.id,
     data: data,
     auth: auth,
@@ -15749,15 +15760,16 @@ function FpsCards2(_ref2) {
       }
     }
   }))), _$1__default.get(data, 'params.general.allowPagination') === true && /*#__PURE__*/React__default.createElement(NewPaging, {
-    totalObjects: _$1__default.get(dataInfo, 'total', 0),
-    objectsPerPage: _$1__default.get(dataInfo, 'pageable.pageSize', data.pageSize || 10),
+    totalObjects: totalObjects,
+    objectsPerPage: pageSize,
     showPageSizeDropdown: true,
     onPageSizeChange: newPageSize => {
-      console.log("onPageSizeChange");
-      console.log("newPageSize:", newPageSize);
+      setPageSizeOverride(newPageSize);
+      setPage(0);
+      updatePageInUrl(0);
     },
-    currentPage: _$1__default.get(dataInfo, 'pageable.page', 0),
-    totalPages: Math.max(1, Math.ceil(_$1__default.get(dataInfo, 'total', 0) / _$1__default.get(dataInfo, 'pageable.pageSize', data.pageSize || 10))),
+    currentPage: page,
+    totalPages: totalPages,
     nextPage: nextPage,
     dataInfo: dataInfo,
     prevPage: prevPage,