@tmlmobilidade/ui 20250920.1941.29 → 20250920.2339.20

package/dist/index.d.ts

@@ -168,12 +168,16 @@ interface CommentItemProps {
     created_by: string;
     icon: React.ReactNode;
     iconTopMargin?: number;
+    reverse?: boolean;
 }
-declare function CommentItem({ content, created_at, created_by, icon, iconTopMargin }: CommentItemProps): react_jsx_runtime.JSX.Element;
+declare function CommentItem({ content, created_at, created_by, icon, iconTopMargin, reverse }: CommentItemProps): react_jsx_runtime.JSX.Element;
 
-declare function CommentList({ data }: {
+interface CommentListProps {
     data: CommentItemProps[];
-}): react_jsx_runtime.JSX.Element | null;
+    maxHeight?: number;
+    reverse?: boolean;
+}
+declare function CommentList({ data, maxHeight, reverse }: CommentListProps): react_jsx_runtime.JSX.Element | null;
 
 interface BadgeProps extends BadgeProps$1 {
     children?: react__default.ReactNode;

package/dist/src/components/comments/CommentItem/index.js

@@ -7,8 +7,8 @@ import { Section } from '../../layout/Section/index.js';
 import { Dates } from '@tmlmobilidade/utils';
 import styles from './styles.module.css.js';
 
-function CommentItem({ content, created_at, created_by, icon, iconTopMargin }) {
-    return (jsxRuntimeExports.jsxs("div", { className: styles.item, children: [jsxRuntimeExports.jsxs("div", { className: styles.itemWrapper, children: [jsxRuntimeExports.jsx("div", { className: styles.icon, style: { marginTop: iconTopMargin ? `${iconTopMargin}px` : '0' }, children: icon }), jsxRuntimeExports.jsx("div", { className: styles.path })] }), jsxRuntimeExports.jsx("div", { className: styles.content, children: typeof content === 'string' ? (jsxRuntimeExports.jsxs(Section, { flexDirection: "column", padding: "none", children: [jsxRuntimeExports.jsx("div", { className: styles.label, children: content }), jsxRuntimeExports.jsxs(Label, { size: "sm", children: [created_by, " a ", Dates.fromUnixTimestamp(created_at).toLocaleString(Dates.FORMATS.DATETIME_SHORT, 'pt-PT')] })] })) : (content) })] }));
+function CommentItem({ content, created_at, created_by, icon, iconTopMargin, reverse }) {
+    return (jsxRuntimeExports.jsxs("div", { className: styles.item, "data-reverse": reverse, children: [jsxRuntimeExports.jsxs("div", { className: styles.itemWrapper, children: [jsxRuntimeExports.jsx("div", { className: styles.icon, style: { marginTop: iconTopMargin && `${iconTopMargin}px` }, children: icon }), jsxRuntimeExports.jsx("div", { className: styles.path })] }), jsxRuntimeExports.jsx("div", { className: styles.content, children: typeof content === 'string' ? (jsxRuntimeExports.jsxs(Section, { flexDirection: "column", padding: "none", children: [jsxRuntimeExports.jsx("div", { className: styles.label, children: content }), jsxRuntimeExports.jsxs(Label, { size: "sm", children: [created_by, " a ", Dates.fromUnixTimestamp(created_at).toLocaleString(Dates.FORMATS.DATETIME_SHORT, 'pt-PT')] })] })) : (content) })] }));
 }
 
 export { CommentItem };

package/dist/src/components/comments/CommentItem/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/comments/CommentItem/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAkBM,SAAU,WAAW,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,aAAa,EAAoB,EAAA;AACrG,IAAA,QACCA,sBAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,QAAA,EAAA,CAC1BA,sBAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,QAAA,EAAA,CACjCC,qBAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,aAAa,GAAG,CAAA,EAAG,aAAa,CAAA,EAAA,CAAI,GAAG,GAAG,EAAE,EAAA,QAAA,EAC3F,IAAI,EAAA,CACA,EACNA,qBAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,CAAI,CAAA,EAAA,CAC1B,EACNA,qBAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,QAAA,EAC5B,OAAO,OAAO,KAAK,QAAQ,IAC3BD,sBAAA,CAAC,OAAO,EAAA,EAAC,aAAa,EAAC,QAAQ,EAAC,OAAO,EAAC,MAAM,EAAA,QAAA,EAAA,CAC7CC,qBAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,KAAK,EAAA,QAAA,EAAG,OAAO,EAAA,CAAO,EAC7CD,sBAAA,CAAC,KAAK,EAAA,EAAC,IAAI,EAAC,IAAI,EAAA,QAAA,EAAA,CAAE,UAAU,EAAA,KAAA,EAAK,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE,OAAO,CAAC,CAAA,EAAA,CAAS,CAAA,EAAA,CAC1H,KAEV,OAAO,CACP,EAAA,CACI,CAAA,EAAA,CACD;AAER;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/comments/CommentItem/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAmBM,SAAU,WAAW,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,aAAa,EAAE,OAAO,EAAoB,EAAA;IAC9G,QACCA,sBAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,cAAA,EAAgB,OAAO,EAAA,QAAA,EAAA,CACjDA,sBAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,QAAA,EAAA,CACjCC,qBAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,aAAa,IAAI,CAAA,EAAG,aAAa,CAAA,EAAA,CAAI,EAAE,EAAA,QAAA,EACtF,IAAI,EAAA,CACA,EACNA,qBAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,CAAI,CAAA,EAAA,CAC1B,EACNA,qBAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,QAAA,EAC5B,OAAO,OAAO,KAAK,QAAQ,IAC3BD,sBAAA,CAAC,OAAO,EAAA,EAAC,aAAa,EAAC,QAAQ,EAAC,OAAO,EAAC,MAAM,EAAA,QAAA,EAAA,CAC7CC,qBAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,KAAK,EAAA,QAAA,EAAG,OAAO,EAAA,CAAO,EAC7CD,sBAAA,CAAC,KAAK,EAAA,EAAC,IAAI,EAAC,IAAI,EAAA,QAAA,EAAA,CAAE,UAAU,EAAA,KAAA,EAAK,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE,OAAO,CAAC,CAAA,EAAA,CAAS,CAAA,EAAA,CAC1H,KAEV,OAAO,CACP,EAAA,CACI,CAAA,EAAA,CACD;AAER;;;;"}

package/dist/src/components/comments/CommentList/index.js

@@ -3,13 +3,12 @@ import { j as jsxRuntimeExports } from '../../../../_virtual/jsx-runtime.js';
 import styles from './styles.module.css.js';
 import { CommentItem } from '../CommentItem/index.js';
 
-/* * */
-function CommentList({ data }) {
+function CommentList({ data, maxHeight, reverse }) {
     //
     // B. Render components
     if (!data)
         return null;
-    return (jsxRuntimeExports.jsx("div", { className: styles.container, children: data.map((comment, index) => jsxRuntimeExports.jsx(CommentItem, { ...comment }, index)) }));
+    return (jsxRuntimeExports.jsx("div", { className: styles.container, "data-reverse": reverse, style: { maxHeight: maxHeight && `${maxHeight}px` }, children: (reverse ? data.toReversed() : data).map((comment, index) => jsxRuntimeExports.jsx(CommentItem, { ...comment, reverse: reverse }, index)) }));
 }
 
 export { CommentList };

package/dist/src/components/comments/CommentList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/comments/CommentList/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;AAQA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAEM,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAU,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAW,CAAC,CAAA,CAAE,CAAA,CAAA,CAAA,CAAI,EAAgC,CAAA,CAAA;;;AAIjE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAI,CAAC,CAAA,CAAA,CAAA,CAAI;AAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAO,CAAA,CAAA,CAAA,CAAI;AAEtB,CAAA,CAAA,CAAA,CAAA,QACCA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAK,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAC,SAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAC9B,CAAA,CAAA,CAAA,CAAI,CAAC,CAAA,CAAA,CAAG,CAAC,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,EAAE,CAAA,CAAA,CAAA,CAAA,CAAK,CAAA,CAAA,CAAA,CAAA,CACxBA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAA,CAAC,WAAW,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAiB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,EAAA,CAAA,CAAlB,CAAA,CAAA,CAAA,CAAA,CAAK,CAAiB,CACxC,EAAA,CACI,CAAA;AAER;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/comments/CommentList/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;AAeM,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAU,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAW,CAAC,CAAA,CAAE,CAAA,CAAA,CAAA,CAAI,EAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,CAAA,CAAoB,CAAA,CAAA;;;AAIzE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAI,CAAC,CAAA,CAAA,CAAA,CAAI;AAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAO,CAAA,CAAA,CAAA,CAAI;AAEtB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CACCA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAA,cAAA,CAAA,CAAgB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,CAAA,CAAE,CAAA,CAAA,CAAA,CAAA,CAAK,CAAA,CAAE,CAAA,CAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAE,SAAS,CAAA,CAAA,CAAA,CAAI,CAAA,CAAA,CAAG,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAA,CAAA,CAAI,CAAA,CAAE,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAC1G,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,CAAA,CAAA,CAAG,CAAA,CAAA,CAAA,CAAI,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAU,EAAE,CAAA,CAAA,CAAG,CAAA,CAAA,CAAA,CAAI,CAAA,CAAE,CAAA,CAAA,CAAG,CAAC,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,CAAA,CAAE,KAAK,CAAA,CAAA,CAAA,CAAA,CACxDA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAA,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAW,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAiB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,EAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,CAAA,CAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,CAAA,CAAA,CAAA,CAApC,CAAA,CAAA,CAAA,CAAA,CAAK,CAAmC,CAC1D,EAAA,CACI,CAAA;AAER;;"}

package/dist/styles-no-reset.css

@@ -1518,6 +1518,7 @@
 
 .styles-module_icon__wl1ta {
     z-index: 2;
+    margin-top: 10px;
     background-color: var(--color-system-background-100);
 }
 
@@ -1528,7 +1529,11 @@
     background-color: var(--color-system-border-100);
 }
 
-.styles-module_item__S7RQD:last-child .styles-module_path__JfW5D {
+.styles-module_item__S7RQD[data-reverse="false"]:last-child .styles-module_path__JfW5D {
+    display: none;
+}
+
+.styles-module_item__S7RQD[data-reverse="true"]:first-child .styles-module_path__JfW5D {
     display: none;
 }
 
@@ -1562,6 +1567,29 @@
     position: relative;
     display: flex;
     flex-direction: column;
+    width: 100%;
+    padding: var(--size-spacing-xs) 0;
+    overflow-y: scroll;
+    scrollbar-color: var(--color-primary) var(--color-primary);
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: var(--color-system-background-100);
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: var(--color-system-border-100);
+        border: 2px solid var(--color-system-background-100);
+        border-radius: 10px;
+    }
+
+    &[data-reverse="true"] {
+        flex-direction: column-reverse;
+    }
 }
 
 .styles-module_label__SjHA2 {

package/dist/styles.css

@@ -1577,6 +1577,7 @@ figure {
 
 .styles-module_icon__wl1ta {
     z-index: 2;
+    margin-top: 10px;
     background-color: var(--color-system-background-100);
 }
 
@@ -1587,7 +1588,11 @@ figure {
     background-color: var(--color-system-border-100);
 }
 
-.styles-module_item__S7RQD:last-child .styles-module_path__JfW5D {
+.styles-module_item__S7RQD[data-reverse="false"]:last-child .styles-module_path__JfW5D {
+    display: none;
+}
+
+.styles-module_item__S7RQD[data-reverse="true"]:first-child .styles-module_path__JfW5D {
     display: none;
 }
 
@@ -1621,6 +1626,29 @@ figure {
     position: relative;
     display: flex;
     flex-direction: column;
+    width: 100%;
+    padding: var(--size-spacing-xs) 0;
+    overflow-y: scroll;
+    scrollbar-color: var(--color-primary) var(--color-primary);
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: var(--color-system-background-100);
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: var(--color-system-border-100);
+        border: 2px solid var(--color-system-background-100);
+        border-radius: 10px;
+    }
+
+    &[data-reverse="true"] {
+        flex-direction: column-reverse;
+    }
 }
 
 .styles-module_label__SjHA2 {

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@tmlmobilidade/ui",
 	"description": "UI components for Transportes Metropolitanos de Lisboa (TML) web applications.",
-	"version": "20250920.1941.29",
+	"version": "20250920.2339.20",
 	"author": "João de Vasconcelos & Jusi Monteiro",
 	"license": "AGPL-3.0-or-later",
 	"publishConfig": {