@pagamio/frontend-commons-lib 0.8.285 → 0.8.287

package/lib/components/ui/DetailsCard.d.ts

@@ -3,6 +3,7 @@ export interface DataItem {
     label: string;
     value: React.ReactNode;
     id?: string | number;
+    layout?: 'default' | 'rightPanel';
 }
 interface DetailsCardProps {
     loading: boolean;

package/lib/components/ui/DetailsCard.js

@@ -6,9 +6,11 @@ const DetailsCard = ({ data, loading, buttonText, showButton = true, onClickButt
     if (!loading && (!data || data.length === 0)) {
         return null;
     }
-    return (_jsx("div", { className: "flex flex-col", children: _jsxs(Card, { children: [loading ? (_jsx("div", { className: "mb-2 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4", children: _jsx("div", { className: "flex items-center justify-center col-span-full", children: _jsx(LoaderComponent, {}) }) })) : (_jsx("div", { className: "mb-2 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4", children: data.map((item) => {
-                        const capitalizedLabel = item.label.charAt(0).toUpperCase() + item.label.slice(1);
-                        return (_jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "mb-1 font-medium text-sm text-muted-foreground", children: capitalizedLabel }), _jsx("div", { className: "text-foreground text-sm break-words", children: item.value })] }, item.id));
-                    }) })), !loading && (_jsxs("div", { className: "flex justify-end gap-2 items-center", children: [actionContent && _jsx("div", { className: "flex-1 flex flex-row text-sm justify-end", children: actionContent }), showButton && (_jsx("div", { className: `flex ${actionContent ? 'justify-end' : 'justify-center sm:justify-end'}`, children: _jsx(Button, { type: "button", variant: "primary", disabled: loading, onClick: onClickButton, className: "text-sm", children: buttonText }) }))] }))] }) }));
+    const rightPanelItem = data.find((item) => item.layout === 'rightPanel' || item.id === '__details_right_panel__');
+    const leftData = rightPanelItem ? data.filter((item) => item !== rightPanelItem) : data;
+    return (_jsx("div", { className: "flex flex-col", children: _jsxs(Card, { children: [loading ? (_jsx("div", { className: "mb-2 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4", children: _jsx("div", { className: "flex items-center justify-center col-span-full", children: _jsx(LoaderComponent, {}) }) })) : (_jsxs("div", { className: `mb-2 ${rightPanelItem ? 'flex flex-col gap-6 lg:flex-row' : ''}`, children: [_jsx("div", { className: `grid grid-cols-1 gap-4 sm:grid-cols-2 ${rightPanelItem ? 'flex-1 lg:grid-cols-3' : 'md:grid-cols-4'}`, children: leftData.map((item, index) => {
+                                const capitalizedLabel = item.label.charAt(0).toUpperCase() + item.label.slice(1);
+                                return (_jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "mb-1 font-medium text-sm text-muted-foreground", children: capitalizedLabel }), _jsx("div", { className: "text-foreground text-sm break-words", children: item.value })] }, item.id ?? `${item.label}-${index}`));
+                            }) }), rightPanelItem && (_jsxs("div", { className: "lg:w-[320px] lg:shrink-0 lg:border-l lg:border-border lg:pl-6", children: [_jsx("div", { className: "mb-2 font-medium text-sm text-muted-foreground", children: rightPanelItem.label.charAt(0).toUpperCase() + rightPanelItem.label.slice(1) }), _jsx("div", { className: "text-foreground text-sm break-words", children: rightPanelItem.value })] }))] })), !loading && (_jsxs("div", { className: "flex justify-end gap-2 items-center", children: [actionContent && _jsx("div", { className: "flex-1 flex flex-row text-sm justify-end", children: actionContent }), showButton && (_jsx("div", { className: `flex ${actionContent ? 'justify-end' : 'justify-center sm:justify-end'}`, children: _jsx(Button, { type: "button", variant: "primary", disabled: loading, onClick: onClickButton, className: "text-sm", children: buttonText }) }))] }))] }) }));
 };
 export default DetailsCard;

package/lib/styles.css

@@ -6388,6 +6388,10 @@ video {
     width: 50%;
   }
 
+  .lg\:w-\[320px\] {
+    width: 320px;
+  }
+
   .lg\:w-\[420px\] {
     width: 420px;
   }
@@ -6396,14 +6400,34 @@ video {
     flex: none;
   }
 
+  .lg\:shrink-0 {
+    flex-shrink: 0;
+  }
+
   .lg\:grid-cols-12 {
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
 
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .lg\:flex-row {
+    flex-direction: row;
+  }
+
   .lg\:gap-3 {
     gap: 0.75rem;
   }
 
+  .lg\:border-l {
+    border-left-width: 1px;
+  }
+
+  .lg\:border-border {
+    border-color: hsl(var(--border));
+  }
+
   .lg\:p-12 {
     padding: 3rem;
   }
@@ -6416,6 +6440,10 @@ video {
     padding-left: 4rem;
     padding-right: 4rem;
   }
+
+  .lg\:pl-6 {
+    padding-left: 1.5rem;
+  }
 }
 @media (min-width: 1280px) {
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.285",
+  "version": "0.8.287",
   "publishConfig": {
     "access": "public",
     "provenance": false