@limetech/lime-crm-building-blocks 1.70.1 → 1.71.0

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## [1.71.0](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.70.1...v1.71.0) (2025-04-16)
+
+### Features
+
+
+* **chat:** add property for controling the order of chat items ([5f9d48e](https://github.com/Lundalogik/lime-crm-building-blocks/commit/5f9d48ee0c4246b7b041cd8975b149f7c216544f))
+### Bug Fixes
+
+
+* **chat:** fix broken typing indicator ([7ba211f](https://github.com/Lundalogik/lime-crm-building-blocks/commit/7ba211f4e7b5004eaeb9924699aac76a4eb1cbb8))
+
 ## [1.70.1](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.70.0...v1.70.1) (2025-04-15)
 
 ### Bug Fixes

package/dist/cjs/lime-crm-building-blocks.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["limebb-feed.cjs",[[1,"limebb-feed",{"platform":[16],"context":[16],"items":[16],"emptyStateMessage":[1,"empty-state-message"],"heading":[1],"loading":[4],"minutesOfProximity":[2,"minutes-of-proximity"],"totalCount":[2,"total-count"],"direction":[1],"lastVisitedTimestamp":[1,"last-visited-timestamp"]}]]],["limebb-kanban.cjs",[[1,"limebb-kanban",{"platform":[16],"context":[16],"groups":[16]}]]],["limebb-chat-list.cjs",[[1,"limebb-chat-list",{"platform":[16],"context":[16],"items":[16],"loading":[516],"isTypingIndicatorVisible":[516,"is-typing-indicator-visible"],"lastVisitedTimestamp":[513,"last-visited-timestamp"]},null,{"items":["handleItemsChange"]}]]],["limebb-text-editor.cjs",[[1,"limebb-text-editor",{"platform":[16],"context":[16],"allowMentioning":[4,"allow-mentioning"],"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"required":[516],"selectedContext":[16],"ui":[513],"allowResize":[4,"allow-resize"],"value":[1],"draftIdentifier":[1,"draft-identifier"],"triggerMap":[16],"customElements":[16],"items":[32],"highlightedItemIndex":[32],"editorPickerQuery":[32],"searchableLimetypes":[32],"isPickerOpen":[32],"isSearching":[32]},null,{"isPickerOpen":["watchOpen"],"editorPickerQuery":["watchQuery"]}]]],["limebb-date-range.cjs",[[1,"limebb-date-range",{"platform":[16],"context":[16],"startTime":[16],"endTime":[16],"startTimeLabel":[1,"start-time-label"],"endTimeLabel":[1,"end-time-label"],"language":[1],"timeFormat":[1,"time-format"],"type":[1]}]]],["limebb-info-tile-currency-format.cjs",[[1,"limebb-info-tile-currency-format",{"platform":[16],"context":[16],"value":[16]}]]],["limebb-notification-list.cjs",[[1,"limebb-notification-list",{"platform":[16],"context":[16],"items":[16],"loading":[4],"lastVisitedTimestamp":[1,"last-visited-timestamp"]},null,{"items":["handleItemsChange"]}]]],["limebb-browser.cjs",[[17,"limebb-browser",{"platform":[16],"context":[16],"items":[16],"layout":[1],"filter":[32]}]]],["limebb-component-config.cjs",[[1,"limebb-component-config",{"platform":[16],"context":[16],"value":[16],"required":[4],"readonly":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"],"formInfo":[16],"type":[1],"nameField":[1,"name-field"],"configComponent":[32],"configViewType":[32]},null,{"formInfo":["watchFormInfo"],"configComponent":["watchconfigComponent"]}]]],["limebb-component-picker.cjs",[[1,"limebb-component-picker",{"platform":[16],"context":[16],"type":[1],"tags":[16],"value":[1],"copyLabel":[1,"copy-label"],"hideCopyButton":[4,"hide-copy-button"],"required":[4],"readonly":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-dashboard-widget.cjs",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["limebb-icon-picker.cjs",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-info-tile.cjs",[[1,"limebb-info-tile",{"platform":[16],"context":[16],"filterId":[513,"filter-id"],"disabled":[4],"icon":[513],"label":[1],"prefix":[1],"suffix":[1],"propertyName":[1,"property-name"],"aggregateOperator":[1,"aggregate-operator"],"format":[16],"config":[32],"filters":[32],"value":[32],"loading":[32],"error":[32]},null,{"filterId":["watchFilterId"],"propertyName":["watchPropertyName"],"aggregateOperator":["watchAggregateOperator"]}]]],["limebb-info-tile-date-format.cjs",[[1,"limebb-info-tile-date-format",{"value":[16]}]]],["limebb-info-tile-decimal-format.cjs",[[1,"limebb-info-tile-decimal-format",{"value":[16]}]]],["limebb-info-tile-format.cjs",[[1,"limebb-info-tile-format",{"platform":[16],"context":[16],"type":[1],"value":[16]}]]],["limebb-info-tile-relative-date-format.cjs",[[1,"limebb-info-tile-relative-date-format",{"value":[16]}]]],["limebb-info-tile-unit-format.cjs",[[1,"limebb-info-tile-unit-format",{"value":[16]}]]],["limebb-limeobject-file-viewer.cjs",[[1,"limebb-limeobject-file-viewer",{"platform":[16],"context":[16],"property":[1],"fileTypes":[16],"limeobject":[32],"limetype":[32]}]]],["limebb-locale-picker.cjs",[[1,"limebb-locale-picker",{"platform":[16],"context":[16],"value":[1],"required":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"],"readonly":[4],"multipleChoice":[4,"multiple-choice"],"allLanguages":[32]}]]],["limebb-mention.cjs",[[1,"limebb-mention",{"limetype":[1],"objectid":[2],"limeobject":[32]}]]],["limebb-mention-group-counter.cjs",[[1,"limebb-mention-group-counter",{"count":[2],"limetype":[16],"helperLabel":[1,"helper-label"]}]]],["limebb-trend-indicator.cjs",[[1,"limebb-trend-indicator",{"platform":[16],"context":[16],"value":[520],"formerValue":[514,"former-value"],"suffix":[513],"label":[513],"invalid":[516],"helperText":[513,"helper-text"],"reducePresence":[516,"reduce-presence"]},null,{"value":["valueChanged"]}]]],["limebb-navigation-button_2.cjs",[[1,"limebb-summary-popover",{"triggerDelay":[514,"trigger-delay"],"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"openDirection":[513,"open-direction"],"popoverMaxWidth":[513,"popover-max-width"],"popoverMaxHeight":[513,"popover-max-height"],"actions":[16],"isPopoverOpen":[32]}],[17,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["limebb-kanban-item.cjs",[[1,"limebb-kanban-item",{"platform":[16],"context":[16],"item":[16]}]]],["limebb-kanban-group.cjs",[[1,"limebb-kanban-group",{"platform":[16],"context":[16],"identifier":[1],"heading":[513],"help":[1],"items":[16],"summary":[1],"loading":[516],"totalCount":[514,"total-count"]}]]],["limebb-feed-timeline-item.cjs",[[1,"limebb-feed-timeline-item",{"platform":[16],"context":[16],"item":[16],"ui":[513],"isBundled":[516,"is-bundled"],"headingCanExpand":[32],"isHeadingExpanded":[32],"showMore":[32],"isTall":[32]}]]],["limebb-text-editor-picker.cjs",[[1,"limebb-text-editor-picker",{"items":[16],"open":[516],"isSearching":[4,"is-searching"],"emptyMessage":[1,"empty-message"]},null,{"open":["watchOpen"]}]]],["limebb-currency-picker.cjs",[[1,"limebb-currency-picker",{"platform":[16],"context":[16],"label":[513],"currencies":[16],"helperText":[513,"helper-text"],"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"value":[1]}]]],["limebb-date-picker.cjs",[[1,"limebb-date-picker",{"platform":[16],"context":[16],"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[1],"type":[513]}]]],["limebb-notification-item.cjs",[[1,"limebb-notification-item",{"platform":[16],"context":[16],"item":[16]}]]],["limebb-chat-item_2.cjs",[[1,"limebb-chat-item",{"platform":[16],"context":[16],"item":[16]}],[1,"limebb-typing-indicator"]]],["limebb-empty-state.cjs",[[1,"limebb-empty-state",{"heading":[513],"value":[513],"icon":[16]}]]]], options);
+  return index.bootstrapLazy([["limebb-feed.cjs",[[1,"limebb-feed",{"platform":[16],"context":[16],"items":[16],"emptyStateMessage":[1,"empty-state-message"],"heading":[1],"loading":[4],"minutesOfProximity":[2,"minutes-of-proximity"],"totalCount":[2,"total-count"],"direction":[1],"lastVisitedTimestamp":[1,"last-visited-timestamp"]}]]],["limebb-kanban.cjs",[[1,"limebb-kanban",{"platform":[16],"context":[16],"groups":[16]}]]],["limebb-chat-list.cjs",[[1,"limebb-chat-list",{"platform":[16],"context":[16],"items":[16],"loading":[516],"isTypingIndicatorVisible":[516,"is-typing-indicator-visible"],"lastVisitedTimestamp":[513,"last-visited-timestamp"],"order":[513]},null,{"items":["handleItemsChange"]}]]],["limebb-text-editor.cjs",[[1,"limebb-text-editor",{"platform":[16],"context":[16],"allowMentioning":[4,"allow-mentioning"],"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"required":[516],"selectedContext":[16],"ui":[513],"allowResize":[4,"allow-resize"],"value":[1],"draftIdentifier":[1,"draft-identifier"],"triggerMap":[16],"customElements":[16],"items":[32],"highlightedItemIndex":[32],"editorPickerQuery":[32],"searchableLimetypes":[32],"isPickerOpen":[32],"isSearching":[32]},null,{"isPickerOpen":["watchOpen"],"editorPickerQuery":["watchQuery"]}]]],["limebb-date-range.cjs",[[1,"limebb-date-range",{"platform":[16],"context":[16],"startTime":[16],"endTime":[16],"startTimeLabel":[1,"start-time-label"],"endTimeLabel":[1,"end-time-label"],"language":[1],"timeFormat":[1,"time-format"],"type":[1]}]]],["limebb-info-tile-currency-format.cjs",[[1,"limebb-info-tile-currency-format",{"platform":[16],"context":[16],"value":[16]}]]],["limebb-notification-list.cjs",[[1,"limebb-notification-list",{"platform":[16],"context":[16],"items":[16],"loading":[4],"lastVisitedTimestamp":[1,"last-visited-timestamp"]},null,{"items":["handleItemsChange"]}]]],["limebb-browser.cjs",[[17,"limebb-browser",{"platform":[16],"context":[16],"items":[16],"layout":[1],"filter":[32]}]]],["limebb-component-config.cjs",[[1,"limebb-component-config",{"platform":[16],"context":[16],"value":[16],"required":[4],"readonly":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"],"formInfo":[16],"type":[1],"nameField":[1,"name-field"],"configComponent":[32],"configViewType":[32]},null,{"formInfo":["watchFormInfo"],"configComponent":["watchconfigComponent"]}]]],["limebb-component-picker.cjs",[[1,"limebb-component-picker",{"platform":[16],"context":[16],"type":[1],"tags":[16],"value":[1],"copyLabel":[1,"copy-label"],"hideCopyButton":[4,"hide-copy-button"],"required":[4],"readonly":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-dashboard-widget.cjs",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["limebb-icon-picker.cjs",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-info-tile.cjs",[[1,"limebb-info-tile",{"platform":[16],"context":[16],"filterId":[513,"filter-id"],"disabled":[4],"icon":[513],"label":[1],"prefix":[1],"suffix":[1],"propertyName":[1,"property-name"],"aggregateOperator":[1,"aggregate-operator"],"format":[16],"config":[32],"filters":[32],"value":[32],"loading":[32],"error":[32]},null,{"filterId":["watchFilterId"],"propertyName":["watchPropertyName"],"aggregateOperator":["watchAggregateOperator"]}]]],["limebb-info-tile-date-format.cjs",[[1,"limebb-info-tile-date-format",{"value":[16]}]]],["limebb-info-tile-decimal-format.cjs",[[1,"limebb-info-tile-decimal-format",{"value":[16]}]]],["limebb-info-tile-format.cjs",[[1,"limebb-info-tile-format",{"platform":[16],"context":[16],"type":[1],"value":[16]}]]],["limebb-info-tile-relative-date-format.cjs",[[1,"limebb-info-tile-relative-date-format",{"value":[16]}]]],["limebb-info-tile-unit-format.cjs",[[1,"limebb-info-tile-unit-format",{"value":[16]}]]],["limebb-limeobject-file-viewer.cjs",[[1,"limebb-limeobject-file-viewer",{"platform":[16],"context":[16],"property":[1],"fileTypes":[16],"limeobject":[32],"limetype":[32]}]]],["limebb-locale-picker.cjs",[[1,"limebb-locale-picker",{"platform":[16],"context":[16],"value":[1],"required":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"],"readonly":[4],"multipleChoice":[4,"multiple-choice"],"allLanguages":[32]}]]],["limebb-mention.cjs",[[1,"limebb-mention",{"limetype":[1],"objectid":[2],"limeobject":[32]}]]],["limebb-mention-group-counter.cjs",[[1,"limebb-mention-group-counter",{"count":[2],"limetype":[16],"helperLabel":[1,"helper-label"]}]]],["limebb-trend-indicator.cjs",[[1,"limebb-trend-indicator",{"platform":[16],"context":[16],"value":[520],"formerValue":[514,"former-value"],"suffix":[513],"label":[513],"invalid":[516],"helperText":[513,"helper-text"],"reducePresence":[516,"reduce-presence"]},null,{"value":["valueChanged"]}]]],["limebb-navigation-button_2.cjs",[[1,"limebb-summary-popover",{"triggerDelay":[514,"trigger-delay"],"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"openDirection":[513,"open-direction"],"popoverMaxWidth":[513,"popover-max-width"],"popoverMaxHeight":[513,"popover-max-height"],"actions":[16],"isPopoverOpen":[32]}],[17,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["limebb-kanban-item.cjs",[[1,"limebb-kanban-item",{"platform":[16],"context":[16],"item":[16]}]]],["limebb-kanban-group.cjs",[[1,"limebb-kanban-group",{"platform":[16],"context":[16],"identifier":[1],"heading":[513],"help":[1],"items":[16],"summary":[1],"loading":[516],"totalCount":[514,"total-count"]}]]],["limebb-feed-timeline-item.cjs",[[1,"limebb-feed-timeline-item",{"platform":[16],"context":[16],"item":[16],"ui":[513],"isBundled":[516,"is-bundled"],"headingCanExpand":[32],"isHeadingExpanded":[32],"showMore":[32],"isTall":[32]}]]],["limebb-text-editor-picker.cjs",[[1,"limebb-text-editor-picker",{"items":[16],"open":[516],"isSearching":[4,"is-searching"],"emptyMessage":[1,"empty-message"]},null,{"open":["watchOpen"]}]]],["limebb-currency-picker.cjs",[[1,"limebb-currency-picker",{"platform":[16],"context":[16],"label":[513],"currencies":[16],"helperText":[513,"helper-text"],"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"value":[1]}]]],["limebb-date-picker.cjs",[[1,"limebb-date-picker",{"platform":[16],"context":[16],"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[1],"type":[513]}]]],["limebb-notification-item.cjs",[[1,"limebb-notification-item",{"platform":[16],"context":[16],"item":[16]}]]],["limebb-chat-item_2.cjs",[[1,"limebb-chat-item",{"platform":[16],"context":[16],"item":[16]}],[1,"limebb-typing-indicator"]]],["limebb-empty-state.cjs",[[1,"limebb-empty-state",{"heading":[513],"value":[513],"icon":[16]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/limebb-chat-list.cjs.entry.js

@@ -124,7 +124,7 @@ function insertDateGroups(context) {
     return Object.assign(Object.assign({}, context), { processedItems: newProcessedItems });
 }
 
-const chatListCss = "@charset \"UTF-8\";:host(limebb-chat-list){--limel-top-edge-fade-height:0.75rem;isolation:isolate;--limel-overflow-mask-vertical:linear-gradient(\n      to bottom,\n      transparent 0%,\n      black calc(0% + var(--limel-top-edge-fade-height, 1rem)),\n      black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),\n      transparent 100%\n  );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);box-sizing:border-box;display:flex;flex-direction:column;gap:0.5rem;height:100%;width:100%;min-width:0;min-height:0;padding:var(--limel-top-edge-fade-height) 0.5rem;overflow:hidden auto}:host(limebb-chat-list.is-empty){padding:0}*{box-sizing:border-box}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-group{isolation:isolate;display:flex;flex-direction:column;gap:0.5rem}.date-heading{position:sticky;z-index:1;top:0.25rem;display:flex;border-radius:9rem;padding:0.25rem 0.5rem;margin:0 auto;width:fit-content;font-size:0.75rem;line-height:1;color:rgb(var(--contrast-900));backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);transition:color 0.2s ease, border-color 0.4s ease}.date-heading:hover{color:rgb(var(--contrast-1000));border-color:rgb(var(--contrast-500))}.date-heading:hover:before{opacity:1}.date-heading:before{transition:opacity 0.2s ease;content:\"\";position:absolute;z-index:-1;inset:0;opacity:0.6;border-radius:inherit;background-color:rgb(var(--contrast-100))}.new-items-indicator{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;margin:0.25rem 0}.new-items-indicator hr{border:none;position:absolute;width:100%;height:1px;background-color:rgb(var(--color-red-lighter))}.new-items-indicator h3{z-index:1;padding:0 0.5rem;border-radius:1rem;margin:0 1rem;font-size:small;line-height:0.75rem;text-transform:lowercase;color:rgb(var(--color-red-default));background-color:rgb(var(--contrast-100))}.typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.1s;--limebb-chat-typing-opacity-transition-delay:0s;--limebb-chat-typing-grid-template-rows-transition-speed:0.3s;position:sticky;top:0;z-index:1;transition:grid-template-rows var(--limebb-chat-typing-grid-template-rows-transition-speed) ease;display:grid;grid-template-rows:0}.typing-indicator-height-animation div{transition:opacity var(--limebb-chat-typing-opacity-transition-speed) ease var(--limebb-chat-typing-opacity-transition-delay);overflow:hidden;opacity:0}:host(limebb-chat-list[are-others-typing]) .typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.4s;--limebb-chat-typing-opacity-transition-delay:0.3s;--limebb-chat-typing-grid-template-rows-transition-speed:0.46s;grid-template-rows:1.5rem}:host(limebb-chat-list[are-others-typing]) .typing-indicator-height-animation div{opacity:1}";
+const chatListCss = "@charset \"UTF-8\";:host(limebb-chat-list){--limel-top-edge-fade-height:0.75rem;isolation:isolate;--limel-overflow-mask-vertical:linear-gradient(\n      to bottom,\n      transparent 0%,\n      black calc(0% + var(--limel-top-edge-fade-height, 1rem)),\n      black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),\n      transparent 100%\n  );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);box-sizing:border-box;display:flex;gap:0.5rem;height:100%;width:100%;min-width:0;min-height:0;padding:var(--limel-top-edge-fade-height) 0.5rem;overflow:hidden auto}:host(limebb-chat-list.is-empty){padding:0}:host(limebb-chat-list[order=oldest-on-top]){flex-direction:column-reverse}:host(limebb-chat-list[order=newest-on-top]){flex-direction:column}*{box-sizing:border-box}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-group{isolation:isolate;display:flex;flex-direction:inherit;gap:0.5rem}.date-heading{position:sticky;z-index:1;top:0.25rem;display:flex;border-radius:9rem;padding:0.25rem 0.5rem;margin:0 auto;width:fit-content;font-size:0.75rem;line-height:1;color:rgb(var(--contrast-900));backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);transition:color 0.2s ease, border-color 0.4s ease}.date-heading:hover{color:rgb(var(--contrast-1000));border-color:rgb(var(--contrast-500))}.date-heading:hover:before{opacity:1}.date-heading:before{transition:opacity 0.2s ease;content:\"\";position:absolute;z-index:-1;inset:0;opacity:0.6;border-radius:inherit;background-color:rgb(var(--contrast-100))}.new-items-indicator{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;margin:0.25rem 0}.new-items-indicator hr{border:none;position:absolute;width:100%;height:1px;background-color:rgb(var(--color-red-lighter))}.new-items-indicator h3{z-index:1;padding:0 0.5rem;border-radius:1rem;margin:0 1rem;font-size:small;line-height:0.75rem;text-transform:lowercase;color:rgb(var(--color-red-default));background-color:rgb(var(--contrast-100))}.typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.1s;--limebb-chat-typing-opacity-transition-delay:0s;--limebb-chat-typing-grid-template-rows-transition-speed:0.3s;position:sticky;top:0;z-index:1;transition:grid-template-rows var(--limebb-chat-typing-grid-template-rows-transition-speed) ease;display:grid;grid-template-rows:0}.typing-indicator-height-animation div{transition:opacity var(--limebb-chat-typing-opacity-transition-speed) ease var(--limebb-chat-typing-opacity-transition-delay);overflow:hidden;opacity:0}:host(limebb-chat-list[is-typing-indicator-visible]) .typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.4s;--limebb-chat-typing-opacity-transition-delay:0.3s;--limebb-chat-typing-grid-template-rows-transition-speed:0.46s;grid-template-rows:1.5rem}:host(limebb-chat-list[is-typing-indicator-visible]) .typing-indicator-height-animation div{opacity:1}";
 const LimebbChatListStyle0 = chatListCss;
 
 const ChatList = class {
@@ -135,6 +135,20 @@ const ChatList = class {
          * These items must be sorted by their `timestamp` in descending order.
          */
         this.items = [];
+        /**
+         * - `newest-on-top` displays new messages at the top of the list;
+         * used if the chat input is located on top of the chat interface.
+         * - `oldest-on-top` displays new messages at the bottom of the list (default);
+         * used if the chat input is located at the bottom of the chat interface.
+         *
+         * :::important
+         * Using this prop will _not_ automatically sort the chat items for you!
+         * You still need to pass the items in the correct order (descending order by timestamp).
+         * This prop will only affect the direction of the elements in the user interface,
+         * such as the location of the typing indicator or the scrollbars.
+         * :::
+         */
+        this.order = 'oldest-on-top';
         this.processedItems = [];
     }
     handleItemsChange() {
@@ -148,9 +162,9 @@ const ChatList = class {
         this.handleItemsChange();
     }
     render() {
-        return (index.h(index.Host, { key: '8d7895cdc128ff75f9e46b0545ab2605d3a8c1a8', class: {
+        return (index.h(index.Host, { key: 'cb3552184a7a9eaacbd7e94c1af68ffbb8cce6ff', class: {
                 'is-empty': !this.items.length && !this.isTypingIndicatorVisible,
-            }, "aria-busy": this.isBusy(), "aria-live": "assertive" }, this.renderSpinner(), index.h("div", { key: 'c5e700c8bbf5ccf545c93cfd3058636afb56a329', class: "typing-indicator-height-animation" }, index.h("div", { key: '4bfa4b69701035711ef5b0faede056a698ea70fd' }, this.renderTypingIndicator())), this.renderChatItems()));
+            }, "aria-busy": this.isBusy(), "aria-live": "assertive" }, this.renderSpinner(), index.h("div", { key: 'fedc4e0eef654a983c2a3c5aa751107c32a987bb', class: "typing-indicator-height-animation" }, index.h("div", { key: 'a4a8955159ef7eea5519176ba7778b5b6b6f19ed' }, this.renderTypingIndicator())), this.renderChatItems()));
     }
     renderSpinner() {
         if (!this.loading) {
@@ -177,14 +191,19 @@ const ChatList = class {
         });
     }
     renderGroup(group) {
-        return (index.h("section", { class: "date-group" }, index.h("a", { class: "date-heading" }, group.heading), group.items.map((item) => {
+        const chatItems = group.items.map((item) => {
             if (item.type === 'chat') {
                 return this.renderChatItem(item.item);
             }
             else if (item.type === 'newItemIndicator') {
                 return this.renderIndicator();
             }
-        })));
+        });
+        const dateHeading = index.h("a", { class: "date-heading" }, group.heading);
+        if (this.order === 'oldest-on-top') {
+            return (index.h("section", { class: "date-group" }, chatItems, dateHeading));
+        }
+        return (index.h("section", { class: "date-group" }, dateHeading, chatItems));
     }
     renderChatItem(item) {
         return (index.h("limebb-chat-item", { platform: this.platform, context: this.context, item: item, key: item.id }));

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["limebb-feed.cjs",[[1,"limebb-feed",{"platform":[16],"context":[16],"items":[16],"emptyStateMessage":[1,"empty-state-message"],"heading":[1],"loading":[4],"minutesOfProximity":[2,"minutes-of-proximity"],"totalCount":[2,"total-count"],"direction":[1],"lastVisitedTimestamp":[1,"last-visited-timestamp"]}]]],["limebb-kanban.cjs",[[1,"limebb-kanban",{"platform":[16],"context":[16],"groups":[16]}]]],["limebb-chat-list.cjs",[[1,"limebb-chat-list",{"platform":[16],"context":[16],"items":[16],"loading":[516],"isTypingIndicatorVisible":[516,"is-typing-indicator-visible"],"lastVisitedTimestamp":[513,"last-visited-timestamp"]},null,{"items":["handleItemsChange"]}]]],["limebb-text-editor.cjs",[[1,"limebb-text-editor",{"platform":[16],"context":[16],"allowMentioning":[4,"allow-mentioning"],"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"required":[516],"selectedContext":[16],"ui":[513],"allowResize":[4,"allow-resize"],"value":[1],"draftIdentifier":[1,"draft-identifier"],"triggerMap":[16],"customElements":[16],"items":[32],"highlightedItemIndex":[32],"editorPickerQuery":[32],"searchableLimetypes":[32],"isPickerOpen":[32],"isSearching":[32]},null,{"isPickerOpen":["watchOpen"],"editorPickerQuery":["watchQuery"]}]]],["limebb-date-range.cjs",[[1,"limebb-date-range",{"platform":[16],"context":[16],"startTime":[16],"endTime":[16],"startTimeLabel":[1,"start-time-label"],"endTimeLabel":[1,"end-time-label"],"language":[1],"timeFormat":[1,"time-format"],"type":[1]}]]],["limebb-info-tile-currency-format.cjs",[[1,"limebb-info-tile-currency-format",{"platform":[16],"context":[16],"value":[16]}]]],["limebb-notification-list.cjs",[[1,"limebb-notification-list",{"platform":[16],"context":[16],"items":[16],"loading":[4],"lastVisitedTimestamp":[1,"last-visited-timestamp"]},null,{"items":["handleItemsChange"]}]]],["limebb-browser.cjs",[[17,"limebb-browser",{"platform":[16],"context":[16],"items":[16],"layout":[1],"filter":[32]}]]],["limebb-component-config.cjs",[[1,"limebb-component-config",{"platform":[16],"context":[16],"value":[16],"required":[4],"readonly":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"],"formInfo":[16],"type":[1],"nameField":[1,"name-field"],"configComponent":[32],"configViewType":[32]},null,{"formInfo":["watchFormInfo"],"configComponent":["watchconfigComponent"]}]]],["limebb-component-picker.cjs",[[1,"limebb-component-picker",{"platform":[16],"context":[16],"type":[1],"tags":[16],"value":[1],"copyLabel":[1,"copy-label"],"hideCopyButton":[4,"hide-copy-button"],"required":[4],"readonly":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-dashboard-widget.cjs",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["limebb-icon-picker.cjs",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-info-tile.cjs",[[1,"limebb-info-tile",{"platform":[16],"context":[16],"filterId":[513,"filter-id"],"disabled":[4],"icon":[513],"label":[1],"prefix":[1],"suffix":[1],"propertyName":[1,"property-name"],"aggregateOperator":[1,"aggregate-operator"],"format":[16],"config":[32],"filters":[32],"value":[32],"loading":[32],"error":[32]},null,{"filterId":["watchFilterId"],"propertyName":["watchPropertyName"],"aggregateOperator":["watchAggregateOperator"]}]]],["limebb-info-tile-date-format.cjs",[[1,"limebb-info-tile-date-format",{"value":[16]}]]],["limebb-info-tile-decimal-format.cjs",[[1,"limebb-info-tile-decimal-format",{"value":[16]}]]],["limebb-info-tile-format.cjs",[[1,"limebb-info-tile-format",{"platform":[16],"context":[16],"type":[1],"value":[16]}]]],["limebb-info-tile-relative-date-format.cjs",[[1,"limebb-info-tile-relative-date-format",{"value":[16]}]]],["limebb-info-tile-unit-format.cjs",[[1,"limebb-info-tile-unit-format",{"value":[16]}]]],["limebb-limeobject-file-viewer.cjs",[[1,"limebb-limeobject-file-viewer",{"platform":[16],"context":[16],"property":[1],"fileTypes":[16],"limeobject":[32],"limetype":[32]}]]],["limebb-locale-picker.cjs",[[1,"limebb-locale-picker",{"platform":[16],"context":[16],"value":[1],"required":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"],"readonly":[4],"multipleChoice":[4,"multiple-choice"],"allLanguages":[32]}]]],["limebb-mention.cjs",[[1,"limebb-mention",{"limetype":[1],"objectid":[2],"limeobject":[32]}]]],["limebb-mention-group-counter.cjs",[[1,"limebb-mention-group-counter",{"count":[2],"limetype":[16],"helperLabel":[1,"helper-label"]}]]],["limebb-trend-indicator.cjs",[[1,"limebb-trend-indicator",{"platform":[16],"context":[16],"value":[520],"formerValue":[514,"former-value"],"suffix":[513],"label":[513],"invalid":[516],"helperText":[513,"helper-text"],"reducePresence":[516,"reduce-presence"]},null,{"value":["valueChanged"]}]]],["limebb-navigation-button_2.cjs",[[1,"limebb-summary-popover",{"triggerDelay":[514,"trigger-delay"],"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"openDirection":[513,"open-direction"],"popoverMaxWidth":[513,"popover-max-width"],"popoverMaxHeight":[513,"popover-max-height"],"actions":[16],"isPopoverOpen":[32]}],[17,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["limebb-kanban-item.cjs",[[1,"limebb-kanban-item",{"platform":[16],"context":[16],"item":[16]}]]],["limebb-kanban-group.cjs",[[1,"limebb-kanban-group",{"platform":[16],"context":[16],"identifier":[1],"heading":[513],"help":[1],"items":[16],"summary":[1],"loading":[516],"totalCount":[514,"total-count"]}]]],["limebb-feed-timeline-item.cjs",[[1,"limebb-feed-timeline-item",{"platform":[16],"context":[16],"item":[16],"ui":[513],"isBundled":[516,"is-bundled"],"headingCanExpand":[32],"isHeadingExpanded":[32],"showMore":[32],"isTall":[32]}]]],["limebb-text-editor-picker.cjs",[[1,"limebb-text-editor-picker",{"items":[16],"open":[516],"isSearching":[4,"is-searching"],"emptyMessage":[1,"empty-message"]},null,{"open":["watchOpen"]}]]],["limebb-currency-picker.cjs",[[1,"limebb-currency-picker",{"platform":[16],"context":[16],"label":[513],"currencies":[16],"helperText":[513,"helper-text"],"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"value":[1]}]]],["limebb-date-picker.cjs",[[1,"limebb-date-picker",{"platform":[16],"context":[16],"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[1],"type":[513]}]]],["limebb-notification-item.cjs",[[1,"limebb-notification-item",{"platform":[16],"context":[16],"item":[16]}]]],["limebb-chat-item_2.cjs",[[1,"limebb-chat-item",{"platform":[16],"context":[16],"item":[16]}],[1,"limebb-typing-indicator"]]],["limebb-empty-state.cjs",[[1,"limebb-empty-state",{"heading":[513],"value":[513],"icon":[16]}]]]], options);
+  return index.bootstrapLazy([["limebb-feed.cjs",[[1,"limebb-feed",{"platform":[16],"context":[16],"items":[16],"emptyStateMessage":[1,"empty-state-message"],"heading":[1],"loading":[4],"minutesOfProximity":[2,"minutes-of-proximity"],"totalCount":[2,"total-count"],"direction":[1],"lastVisitedTimestamp":[1,"last-visited-timestamp"]}]]],["limebb-kanban.cjs",[[1,"limebb-kanban",{"platform":[16],"context":[16],"groups":[16]}]]],["limebb-chat-list.cjs",[[1,"limebb-chat-list",{"platform":[16],"context":[16],"items":[16],"loading":[516],"isTypingIndicatorVisible":[516,"is-typing-indicator-visible"],"lastVisitedTimestamp":[513,"last-visited-timestamp"],"order":[513]},null,{"items":["handleItemsChange"]}]]],["limebb-text-editor.cjs",[[1,"limebb-text-editor",{"platform":[16],"context":[16],"allowMentioning":[4,"allow-mentioning"],"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"required":[516],"selectedContext":[16],"ui":[513],"allowResize":[4,"allow-resize"],"value":[1],"draftIdentifier":[1,"draft-identifier"],"triggerMap":[16],"customElements":[16],"items":[32],"highlightedItemIndex":[32],"editorPickerQuery":[32],"searchableLimetypes":[32],"isPickerOpen":[32],"isSearching":[32]},null,{"isPickerOpen":["watchOpen"],"editorPickerQuery":["watchQuery"]}]]],["limebb-date-range.cjs",[[1,"limebb-date-range",{"platform":[16],"context":[16],"startTime":[16],"endTime":[16],"startTimeLabel":[1,"start-time-label"],"endTimeLabel":[1,"end-time-label"],"language":[1],"timeFormat":[1,"time-format"],"type":[1]}]]],["limebb-info-tile-currency-format.cjs",[[1,"limebb-info-tile-currency-format",{"platform":[16],"context":[16],"value":[16]}]]],["limebb-notification-list.cjs",[[1,"limebb-notification-list",{"platform":[16],"context":[16],"items":[16],"loading":[4],"lastVisitedTimestamp":[1,"last-visited-timestamp"]},null,{"items":["handleItemsChange"]}]]],["limebb-browser.cjs",[[17,"limebb-browser",{"platform":[16],"context":[16],"items":[16],"layout":[1],"filter":[32]}]]],["limebb-component-config.cjs",[[1,"limebb-component-config",{"platform":[16],"context":[16],"value":[16],"required":[4],"readonly":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"],"formInfo":[16],"type":[1],"nameField":[1,"name-field"],"configComponent":[32],"configViewType":[32]},null,{"formInfo":["watchFormInfo"],"configComponent":["watchconfigComponent"]}]]],["limebb-component-picker.cjs",[[1,"limebb-component-picker",{"platform":[16],"context":[16],"type":[1],"tags":[16],"value":[1],"copyLabel":[1,"copy-label"],"hideCopyButton":[4,"hide-copy-button"],"required":[4],"readonly":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-dashboard-widget.cjs",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["limebb-icon-picker.cjs",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-info-tile.cjs",[[1,"limebb-info-tile",{"platform":[16],"context":[16],"filterId":[513,"filter-id"],"disabled":[4],"icon":[513],"label":[1],"prefix":[1],"suffix":[1],"propertyName":[1,"property-name"],"aggregateOperator":[1,"aggregate-operator"],"format":[16],"config":[32],"filters":[32],"value":[32],"loading":[32],"error":[32]},null,{"filterId":["watchFilterId"],"propertyName":["watchPropertyName"],"aggregateOperator":["watchAggregateOperator"]}]]],["limebb-info-tile-date-format.cjs",[[1,"limebb-info-tile-date-format",{"value":[16]}]]],["limebb-info-tile-decimal-format.cjs",[[1,"limebb-info-tile-decimal-format",{"value":[16]}]]],["limebb-info-tile-format.cjs",[[1,"limebb-info-tile-format",{"platform":[16],"context":[16],"type":[1],"value":[16]}]]],["limebb-info-tile-relative-date-format.cjs",[[1,"limebb-info-tile-relative-date-format",{"value":[16]}]]],["limebb-info-tile-unit-format.cjs",[[1,"limebb-info-tile-unit-format",{"value":[16]}]]],["limebb-limeobject-file-viewer.cjs",[[1,"limebb-limeobject-file-viewer",{"platform":[16],"context":[16],"property":[1],"fileTypes":[16],"limeobject":[32],"limetype":[32]}]]],["limebb-locale-picker.cjs",[[1,"limebb-locale-picker",{"platform":[16],"context":[16],"value":[1],"required":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"],"readonly":[4],"multipleChoice":[4,"multiple-choice"],"allLanguages":[32]}]]],["limebb-mention.cjs",[[1,"limebb-mention",{"limetype":[1],"objectid":[2],"limeobject":[32]}]]],["limebb-mention-group-counter.cjs",[[1,"limebb-mention-group-counter",{"count":[2],"limetype":[16],"helperLabel":[1,"helper-label"]}]]],["limebb-trend-indicator.cjs",[[1,"limebb-trend-indicator",{"platform":[16],"context":[16],"value":[520],"formerValue":[514,"former-value"],"suffix":[513],"label":[513],"invalid":[516],"helperText":[513,"helper-text"],"reducePresence":[516,"reduce-presence"]},null,{"value":["valueChanged"]}]]],["limebb-navigation-button_2.cjs",[[1,"limebb-summary-popover",{"triggerDelay":[514,"trigger-delay"],"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"openDirection":[513,"open-direction"],"popoverMaxWidth":[513,"popover-max-width"],"popoverMaxHeight":[513,"popover-max-height"],"actions":[16],"isPopoverOpen":[32]}],[17,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["limebb-kanban-item.cjs",[[1,"limebb-kanban-item",{"platform":[16],"context":[16],"item":[16]}]]],["limebb-kanban-group.cjs",[[1,"limebb-kanban-group",{"platform":[16],"context":[16],"identifier":[1],"heading":[513],"help":[1],"items":[16],"summary":[1],"loading":[516],"totalCount":[514,"total-count"]}]]],["limebb-feed-timeline-item.cjs",[[1,"limebb-feed-timeline-item",{"platform":[16],"context":[16],"item":[16],"ui":[513],"isBundled":[516,"is-bundled"],"headingCanExpand":[32],"isHeadingExpanded":[32],"showMore":[32],"isTall":[32]}]]],["limebb-text-editor-picker.cjs",[[1,"limebb-text-editor-picker",{"items":[16],"open":[516],"isSearching":[4,"is-searching"],"emptyMessage":[1,"empty-message"]},null,{"open":["watchOpen"]}]]],["limebb-currency-picker.cjs",[[1,"limebb-currency-picker",{"platform":[16],"context":[16],"label":[513],"currencies":[16],"helperText":[513,"helper-text"],"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"value":[1]}]]],["limebb-date-picker.cjs",[[1,"limebb-date-picker",{"platform":[16],"context":[16],"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[1],"type":[513]}]]],["limebb-notification-item.cjs",[[1,"limebb-notification-item",{"platform":[16],"context":[16],"item":[16]}]]],["limebb-chat-item_2.cjs",[[1,"limebb-chat-item",{"platform":[16],"context":[16],"item":[16]}],[1,"limebb-typing-indicator"]]],["limebb-empty-state.cjs",[[1,"limebb-empty-state",{"heading":[513],"value":[513],"icon":[16]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/chat-list/chat-list.css

@@ -89,7 +89,6 @@
   padding-bottom: var(--limel-bottom-edge-fade-height, 1rem);
   box-sizing: border-box;
   display: flex;
-  flex-direction: column;
   gap: 0.5rem;
   height: 100%;
   width: 100%;
@@ -103,6 +102,14 @@
   padding: 0;
 }
 
+:host(limebb-chat-list[order=oldest-on-top]) {
+  flex-direction: column-reverse;
+}
+
+:host(limebb-chat-list[order=newest-on-top]) {
+  flex-direction: column;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -116,7 +123,7 @@ limel-spinner {
 .date-group {
   isolation: isolate;
   display: flex;
-  flex-direction: column;
+  flex-direction: inherit;
   gap: 0.5rem;
 }
 
@@ -198,12 +205,12 @@ limel-spinner {
   opacity: 0;
 }
 
-:host(limebb-chat-list[are-others-typing]) .typing-indicator-height-animation {
+:host(limebb-chat-list[is-typing-indicator-visible]) .typing-indicator-height-animation {
   --limebb-chat-typing-opacity-transition-speed: 0.4s;
   --limebb-chat-typing-opacity-transition-delay: 0.3s;
   --limebb-chat-typing-grid-template-rows-transition-speed: 0.46s;
   grid-template-rows: 1.5rem;
 }
-:host(limebb-chat-list[are-others-typing]) .typing-indicator-height-animation div {
+:host(limebb-chat-list[is-typing-indicator-visible]) .typing-indicator-height-animation div {
   opacity: 1;
 }

package/dist/collection/components/chat-list/chat-list.js

@@ -10,6 +10,7 @@ import { processChatItems } from "./processChatItems";
  * @exampleComponent limebb-example-chat-list-basic
  * @exampleComponent limebb-example-chat-list-others-are-typing
  * @exampleComponent limebb-example-chat-list-new-messages
+ * @exampleComponent limebb-example-chat-list-reverse-order
  * @beta
  */
 export class ChatList {
@@ -19,6 +20,20 @@ export class ChatList {
          * These items must be sorted by their `timestamp` in descending order.
          */
         this.items = [];
+        /**
+         * - `newest-on-top` displays new messages at the top of the list;
+         * used if the chat input is located on top of the chat interface.
+         * - `oldest-on-top` displays new messages at the bottom of the list (default);
+         * used if the chat input is located at the bottom of the chat interface.
+         *
+         * :::important
+         * Using this prop will _not_ automatically sort the chat items for you!
+         * You still need to pass the items in the correct order (descending order by timestamp).
+         * This prop will only affect the direction of the elements in the user interface,
+         * such as the location of the typing indicator or the scrollbars.
+         * :::
+         */
+        this.order = 'oldest-on-top';
         this.processedItems = [];
     }
     handleItemsChange() {
@@ -32,9 +47,9 @@ export class ChatList {
         this.handleItemsChange();
     }
     render() {
-        return (h(Host, { key: '8d7895cdc128ff75f9e46b0545ab2605d3a8c1a8', class: {
+        return (h(Host, { key: 'cb3552184a7a9eaacbd7e94c1af68ffbb8cce6ff', class: {
                 'is-empty': !this.items.length && !this.isTypingIndicatorVisible,
-            }, "aria-busy": this.isBusy(), "aria-live": "assertive" }, this.renderSpinner(), h("div", { key: 'c5e700c8bbf5ccf545c93cfd3058636afb56a329', class: "typing-indicator-height-animation" }, h("div", { key: '4bfa4b69701035711ef5b0faede056a698ea70fd' }, this.renderTypingIndicator())), this.renderChatItems()));
+            }, "aria-busy": this.isBusy(), "aria-live": "assertive" }, this.renderSpinner(), h("div", { key: 'fedc4e0eef654a983c2a3c5aa751107c32a987bb', class: "typing-indicator-height-animation" }, h("div", { key: 'a4a8955159ef7eea5519176ba7778b5b6b6f19ed' }, this.renderTypingIndicator())), this.renderChatItems()));
     }
     renderSpinner() {
         if (!this.loading) {
@@ -61,14 +76,19 @@ export class ChatList {
         });
     }
     renderGroup(group) {
-        return (h("section", { class: "date-group" }, h("a", { class: "date-heading" }, group.heading), group.items.map((item) => {
+        const chatItems = group.items.map((item) => {
             if (item.type === 'chat') {
                 return this.renderChatItem(item.item);
             }
             else if (item.type === 'newItemIndicator') {
                 return this.renderIndicator();
             }
-        })));
+        });
+        const dateHeading = h("a", { class: "date-heading" }, group.heading);
+        if (this.order === 'oldest-on-top') {
+            return (h("section", { class: "date-group" }, chatItems, dateHeading));
+        }
+        return (h("section", { class: "date-group" }, dateHeading, chatItems));
     }
     renderChatItem(item) {
         return (h("limebb-chat-item", { platform: this.platform, context: this.context, item: item, key: item.id }));
@@ -236,6 +256,26 @@ export class ChatList {
                 "setter": false,
                 "attribute": "last-visited-timestamp",
                 "reflect": true
+            },
+            "order": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'newest-on-top' | 'oldest-on-top'",
+                    "resolved": "\"newest-on-top\" | \"oldest-on-top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "- `newest-on-top` displays new messages at the top of the list;\nused if the chat input is located on top of the chat interface.\n- `oldest-on-top` displays new messages at the bottom of the list (default);\nused if the chat input is located at the bottom of the chat interface.\n\n:::important\nUsing this prop will _not_ automatically sort the chat items for you!\nYou still need to pass the items in the correct order (descending order by timestamp).\nThis prop will only affect the direction of the elements in the user interface,\nsuch as the location of the typing indicator or the scrollbars.\n:::"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "order",
+                "reflect": true,
+                "defaultValue": "'oldest-on-top'"
             }
         };
     }

package/dist/components/limebb-chat-list.js

@@ -122,7 +122,7 @@ function insertDateGroups(context) {
     return Object.assign(Object.assign({}, context), { processedItems: newProcessedItems });
 }
 
-const chatListCss = "@charset \"UTF-8\";:host(limebb-chat-list){--limel-top-edge-fade-height:0.75rem;isolation:isolate;--limel-overflow-mask-vertical:linear-gradient(\n      to bottom,\n      transparent 0%,\n      black calc(0% + var(--limel-top-edge-fade-height, 1rem)),\n      black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),\n      transparent 100%\n  );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);box-sizing:border-box;display:flex;flex-direction:column;gap:0.5rem;height:100%;width:100%;min-width:0;min-height:0;padding:var(--limel-top-edge-fade-height) 0.5rem;overflow:hidden auto}:host(limebb-chat-list.is-empty){padding:0}*{box-sizing:border-box}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-group{isolation:isolate;display:flex;flex-direction:column;gap:0.5rem}.date-heading{position:sticky;z-index:1;top:0.25rem;display:flex;border-radius:9rem;padding:0.25rem 0.5rem;margin:0 auto;width:fit-content;font-size:0.75rem;line-height:1;color:rgb(var(--contrast-900));backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);transition:color 0.2s ease, border-color 0.4s ease}.date-heading:hover{color:rgb(var(--contrast-1000));border-color:rgb(var(--contrast-500))}.date-heading:hover:before{opacity:1}.date-heading:before{transition:opacity 0.2s ease;content:\"\";position:absolute;z-index:-1;inset:0;opacity:0.6;border-radius:inherit;background-color:rgb(var(--contrast-100))}.new-items-indicator{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;margin:0.25rem 0}.new-items-indicator hr{border:none;position:absolute;width:100%;height:1px;background-color:rgb(var(--color-red-lighter))}.new-items-indicator h3{z-index:1;padding:0 0.5rem;border-radius:1rem;margin:0 1rem;font-size:small;line-height:0.75rem;text-transform:lowercase;color:rgb(var(--color-red-default));background-color:rgb(var(--contrast-100))}.typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.1s;--limebb-chat-typing-opacity-transition-delay:0s;--limebb-chat-typing-grid-template-rows-transition-speed:0.3s;position:sticky;top:0;z-index:1;transition:grid-template-rows var(--limebb-chat-typing-grid-template-rows-transition-speed) ease;display:grid;grid-template-rows:0}.typing-indicator-height-animation div{transition:opacity var(--limebb-chat-typing-opacity-transition-speed) ease var(--limebb-chat-typing-opacity-transition-delay);overflow:hidden;opacity:0}:host(limebb-chat-list[are-others-typing]) .typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.4s;--limebb-chat-typing-opacity-transition-delay:0.3s;--limebb-chat-typing-grid-template-rows-transition-speed:0.46s;grid-template-rows:1.5rem}:host(limebb-chat-list[are-others-typing]) .typing-indicator-height-animation div{opacity:1}";
+const chatListCss = "@charset \"UTF-8\";:host(limebb-chat-list){--limel-top-edge-fade-height:0.75rem;isolation:isolate;--limel-overflow-mask-vertical:linear-gradient(\n      to bottom,\n      transparent 0%,\n      black calc(0% + var(--limel-top-edge-fade-height, 1rem)),\n      black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),\n      transparent 100%\n  );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);box-sizing:border-box;display:flex;gap:0.5rem;height:100%;width:100%;min-width:0;min-height:0;padding:var(--limel-top-edge-fade-height) 0.5rem;overflow:hidden auto}:host(limebb-chat-list.is-empty){padding:0}:host(limebb-chat-list[order=oldest-on-top]){flex-direction:column-reverse}:host(limebb-chat-list[order=newest-on-top]){flex-direction:column}*{box-sizing:border-box}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-group{isolation:isolate;display:flex;flex-direction:inherit;gap:0.5rem}.date-heading{position:sticky;z-index:1;top:0.25rem;display:flex;border-radius:9rem;padding:0.25rem 0.5rem;margin:0 auto;width:fit-content;font-size:0.75rem;line-height:1;color:rgb(var(--contrast-900));backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);transition:color 0.2s ease, border-color 0.4s ease}.date-heading:hover{color:rgb(var(--contrast-1000));border-color:rgb(var(--contrast-500))}.date-heading:hover:before{opacity:1}.date-heading:before{transition:opacity 0.2s ease;content:\"\";position:absolute;z-index:-1;inset:0;opacity:0.6;border-radius:inherit;background-color:rgb(var(--contrast-100))}.new-items-indicator{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;margin:0.25rem 0}.new-items-indicator hr{border:none;position:absolute;width:100%;height:1px;background-color:rgb(var(--color-red-lighter))}.new-items-indicator h3{z-index:1;padding:0 0.5rem;border-radius:1rem;margin:0 1rem;font-size:small;line-height:0.75rem;text-transform:lowercase;color:rgb(var(--color-red-default));background-color:rgb(var(--contrast-100))}.typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.1s;--limebb-chat-typing-opacity-transition-delay:0s;--limebb-chat-typing-grid-template-rows-transition-speed:0.3s;position:sticky;top:0;z-index:1;transition:grid-template-rows var(--limebb-chat-typing-grid-template-rows-transition-speed) ease;display:grid;grid-template-rows:0}.typing-indicator-height-animation div{transition:opacity var(--limebb-chat-typing-opacity-transition-speed) ease var(--limebb-chat-typing-opacity-transition-delay);overflow:hidden;opacity:0}:host(limebb-chat-list[is-typing-indicator-visible]) .typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.4s;--limebb-chat-typing-opacity-transition-delay:0.3s;--limebb-chat-typing-grid-template-rows-transition-speed:0.46s;grid-template-rows:1.5rem}:host(limebb-chat-list[is-typing-indicator-visible]) .typing-indicator-height-animation div{opacity:1}";
 const LimebbChatListStyle0 = chatListCss;
 
 const ChatList = /*@__PURE__*/ proxyCustomElement(class ChatList extends HTMLElement {
@@ -135,6 +135,20 @@ const ChatList = /*@__PURE__*/ proxyCustomElement(class ChatList extends HTMLEle
          * These items must be sorted by their `timestamp` in descending order.
          */
         this.items = [];
+        /**
+         * - `newest-on-top` displays new messages at the top of the list;
+         * used if the chat input is located on top of the chat interface.
+         * - `oldest-on-top` displays new messages at the bottom of the list (default);
+         * used if the chat input is located at the bottom of the chat interface.
+         *
+         * :::important
+         * Using this prop will _not_ automatically sort the chat items for you!
+         * You still need to pass the items in the correct order (descending order by timestamp).
+         * This prop will only affect the direction of the elements in the user interface,
+         * such as the location of the typing indicator or the scrollbars.
+         * :::
+         */
+        this.order = 'oldest-on-top';
         this.processedItems = [];
     }
     handleItemsChange() {
@@ -148,9 +162,9 @@ const ChatList = /*@__PURE__*/ proxyCustomElement(class ChatList extends HTMLEle
         this.handleItemsChange();
     }
     render() {
-        return (h(Host, { key: '8d7895cdc128ff75f9e46b0545ab2605d3a8c1a8', class: {
+        return (h(Host, { key: 'cb3552184a7a9eaacbd7e94c1af68ffbb8cce6ff', class: {
                 'is-empty': !this.items.length && !this.isTypingIndicatorVisible,
-            }, "aria-busy": this.isBusy(), "aria-live": "assertive" }, this.renderSpinner(), h("div", { key: 'c5e700c8bbf5ccf545c93cfd3058636afb56a329', class: "typing-indicator-height-animation" }, h("div", { key: '4bfa4b69701035711ef5b0faede056a698ea70fd' }, this.renderTypingIndicator())), this.renderChatItems()));
+            }, "aria-busy": this.isBusy(), "aria-live": "assertive" }, this.renderSpinner(), h("div", { key: 'fedc4e0eef654a983c2a3c5aa751107c32a987bb', class: "typing-indicator-height-animation" }, h("div", { key: 'a4a8955159ef7eea5519176ba7778b5b6b6f19ed' }, this.renderTypingIndicator())), this.renderChatItems()));
     }
     renderSpinner() {
         if (!this.loading) {
@@ -177,14 +191,19 @@ const ChatList = /*@__PURE__*/ proxyCustomElement(class ChatList extends HTMLEle
         });
     }
     renderGroup(group) {
-        return (h("section", { class: "date-group" }, h("a", { class: "date-heading" }, group.heading), group.items.map((item) => {
+        const chatItems = group.items.map((item) => {
             if (item.type === 'chat') {
                 return this.renderChatItem(item.item);
             }
             else if (item.type === 'newItemIndicator') {
                 return this.renderIndicator();
             }
-        })));
+        });
+        const dateHeading = h("a", { class: "date-heading" }, group.heading);
+        if (this.order === 'oldest-on-top') {
+            return (h("section", { class: "date-group" }, chatItems, dateHeading));
+        }
+        return (h("section", { class: "date-group" }, dateHeading, chatItems));
     }
     renderChatItem(item) {
         return (h("limebb-chat-item", { platform: this.platform, context: this.context, item: item, key: item.id }));
@@ -211,7 +230,8 @@ const ChatList = /*@__PURE__*/ proxyCustomElement(class ChatList extends HTMLEle
         "items": [16],
         "loading": [516],
         "isTypingIndicatorVisible": [516, "is-typing-indicator-visible"],
-        "lastVisitedTimestamp": [513, "last-visited-timestamp"]
+        "lastVisitedTimestamp": [513, "last-visited-timestamp"],
+        "order": [513]
     }, undefined, {
         "items": ["handleItemsChange"]
     }]);

package/dist/esm/lime-crm-building-blocks.js

@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["limebb-feed",[[1,"limebb-feed",{"platform":[16],"context":[16],"items":[16],"emptyStateMessage":[1,"empty-state-message"],"heading":[1],"loading":[4],"minutesOfProximity":[2,"minutes-of-proximity"],"totalCount":[2,"total-count"],"direction":[1],"lastVisitedTimestamp":[1,"last-visited-timestamp"]}]]],["limebb-kanban",[[1,"limebb-kanban",{"platform":[16],"context":[16],"groups":[16]}]]],["limebb-chat-list",[[1,"limebb-chat-list",{"platform":[16],"context":[16],"items":[16],"loading":[516],"isTypingIndicatorVisible":[516,"is-typing-indicator-visible"],"lastVisitedTimestamp":[513,"last-visited-timestamp"]},null,{"items":["handleItemsChange"]}]]],["limebb-text-editor",[[1,"limebb-text-editor",{"platform":[16],"context":[16],"allowMentioning":[4,"allow-mentioning"],"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"required":[516],"selectedContext":[16],"ui":[513],"allowResize":[4,"allow-resize"],"value":[1],"draftIdentifier":[1,"draft-identifier"],"triggerMap":[16],"customElements":[16],"items":[32],"highlightedItemIndex":[32],"editorPickerQuery":[32],"searchableLimetypes":[32],"isPickerOpen":[32],"isSearching":[32]},null,{"isPickerOpen":["watchOpen"],"editorPickerQuery":["watchQuery"]}]]],["limebb-date-range",[[1,"limebb-date-range",{"platform":[16],"context":[16],"startTime":[16],"endTime":[16],"startTimeLabel":[1,"start-time-label"],"endTimeLabel":[1,"end-time-label"],"language":[1],"timeFormat":[1,"time-format"],"type":[1]}]]],["limebb-info-tile-currency-format",[[1,"limebb-info-tile-currency-format",{"platform":[16],"context":[16],"value":[16]}]]],["limebb-notification-list",[[1,"limebb-notification-list",{"platform":[16],"context":[16],"items":[16],"loading":[4],"lastVisitedTimestamp":[1,"last-visited-timestamp"]},null,{"items":["handleItemsChange"]}]]],["limebb-browser",[[17,"limebb-browser",{"platform":[16],"context":[16],"items":[16],"layout":[1],"filter":[32]}]]],["limebb-component-config",[[1,"limebb-component-config",{"platform":[16],"context":[16],"value":[16],"required":[4],"readonly":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"],"formInfo":[16],"type":[1],"nameField":[1,"name-field"],"configComponent":[32],"configViewType":[32]},null,{"formInfo":["watchFormInfo"],"configComponent":["watchconfigComponent"]}]]],["limebb-component-picker",[[1,"limebb-component-picker",{"platform":[16],"context":[16],"type":[1],"tags":[16],"value":[1],"copyLabel":[1,"copy-label"],"hideCopyButton":[4,"hide-copy-button"],"required":[4],"readonly":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-dashboard-widget",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["limebb-icon-picker",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-info-tile",[[1,"limebb-info-tile",{"platform":[16],"context":[16],"filterId":[513,"filter-id"],"disabled":[4],"icon":[513],"label":[1],"prefix":[1],"suffix":[1],"propertyName":[1,"property-name"],"aggregateOperator":[1,"aggregate-operator"],"format":[16],"config":[32],"filters":[32],"value":[32],"loading":[32],"error":[32]},null,{"filterId":["watchFilterId"],"propertyName":["watchPropertyName"],"aggregateOperator":["watchAggregateOperator"]}]]],["limebb-info-tile-date-format",[[1,"limebb-info-tile-date-format",{"value":[16]}]]],["limebb-info-tile-decimal-format",[[1,"limebb-info-tile-decimal-format",{"value":[16]}]]],["limebb-info-tile-format",[[1,"limebb-info-tile-format",{"platform":[16],"context":[16],"type":[1],"value":[16]}]]],["limebb-info-tile-relative-date-format",[[1,"limebb-info-tile-relative-date-format",{"value":[16]}]]],["limebb-info-tile-unit-format",[[1,"limebb-info-tile-unit-format",{"value":[16]}]]],["limebb-limeobject-file-viewer",[[1,"limebb-limeobject-file-viewer",{"platform":[16],"context":[16],"property":[1],"fileTypes":[16],"limeobject":[32],"limetype":[32]}]]],["limebb-locale-picker",[[1,"limebb-locale-picker",{"platform":[16],"context":[16],"value":[1],"required":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"],"readonly":[4],"multipleChoice":[4,"multiple-choice"],"allLanguages":[32]}]]],["limebb-mention",[[1,"limebb-mention",{"limetype":[1],"objectid":[2],"limeobject":[32]}]]],["limebb-mention-group-counter",[[1,"limebb-mention-group-counter",{"count":[2],"limetype":[16],"helperLabel":[1,"helper-label"]}]]],["limebb-trend-indicator",[[1,"limebb-trend-indicator",{"platform":[16],"context":[16],"value":[520],"formerValue":[514,"former-value"],"suffix":[513],"label":[513],"invalid":[516],"helperText":[513,"helper-text"],"reducePresence":[516,"reduce-presence"]},null,{"value":["valueChanged"]}]]],["limebb-navigation-button_2",[[1,"limebb-summary-popover",{"triggerDelay":[514,"trigger-delay"],"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"openDirection":[513,"open-direction"],"popoverMaxWidth":[513,"popover-max-width"],"popoverMaxHeight":[513,"popover-max-height"],"actions":[16],"isPopoverOpen":[32]}],[17,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["limebb-kanban-item",[[1,"limebb-kanban-item",{"platform":[16],"context":[16],"item":[16]}]]],["limebb-kanban-group",[[1,"limebb-kanban-group",{"platform":[16],"context":[16],"identifier":[1],"heading":[513],"help":[1],"items":[16],"summary":[1],"loading":[516],"totalCount":[514,"total-count"]}]]],["limebb-feed-timeline-item",[[1,"limebb-feed-timeline-item",{"platform":[16],"context":[16],"item":[16],"ui":[513],"isBundled":[516,"is-bundled"],"headingCanExpand":[32],"isHeadingExpanded":[32],"showMore":[32],"isTall":[32]}]]],["limebb-text-editor-picker",[[1,"limebb-text-editor-picker",{"items":[16],"open":[516],"isSearching":[4,"is-searching"],"emptyMessage":[1,"empty-message"]},null,{"open":["watchOpen"]}]]],["limebb-currency-picker",[[1,"limebb-currency-picker",{"platform":[16],"context":[16],"label":[513],"currencies":[16],"helperText":[513,"helper-text"],"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"value":[1]}]]],["limebb-date-picker",[[1,"limebb-date-picker",{"platform":[16],"context":[16],"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[1],"type":[513]}]]],["limebb-notification-item",[[1,"limebb-notification-item",{"platform":[16],"context":[16],"item":[16]}]]],["limebb-chat-item_2",[[1,"limebb-chat-item",{"platform":[16],"context":[16],"item":[16]}],[1,"limebb-typing-indicator"]]],["limebb-empty-state",[[1,"limebb-empty-state",{"heading":[513],"value":[513],"icon":[16]}]]]], options);
+  return bootstrapLazy([["limebb-feed",[[1,"limebb-feed",{"platform":[16],"context":[16],"items":[16],"emptyStateMessage":[1,"empty-state-message"],"heading":[1],"loading":[4],"minutesOfProximity":[2,"minutes-of-proximity"],"totalCount":[2,"total-count"],"direction":[1],"lastVisitedTimestamp":[1,"last-visited-timestamp"]}]]],["limebb-kanban",[[1,"limebb-kanban",{"platform":[16],"context":[16],"groups":[16]}]]],["limebb-chat-list",[[1,"limebb-chat-list",{"platform":[16],"context":[16],"items":[16],"loading":[516],"isTypingIndicatorVisible":[516,"is-typing-indicator-visible"],"lastVisitedTimestamp":[513,"last-visited-timestamp"],"order":[513]},null,{"items":["handleItemsChange"]}]]],["limebb-text-editor",[[1,"limebb-text-editor",{"platform":[16],"context":[16],"allowMentioning":[4,"allow-mentioning"],"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"required":[516],"selectedContext":[16],"ui":[513],"allowResize":[4,"allow-resize"],"value":[1],"draftIdentifier":[1,"draft-identifier"],"triggerMap":[16],"customElements":[16],"items":[32],"highlightedItemIndex":[32],"editorPickerQuery":[32],"searchableLimetypes":[32],"isPickerOpen":[32],"isSearching":[32]},null,{"isPickerOpen":["watchOpen"],"editorPickerQuery":["watchQuery"]}]]],["limebb-date-range",[[1,"limebb-date-range",{"platform":[16],"context":[16],"startTime":[16],"endTime":[16],"startTimeLabel":[1,"start-time-label"],"endTimeLabel":[1,"end-time-label"],"language":[1],"timeFormat":[1,"time-format"],"type":[1]}]]],["limebb-info-tile-currency-format",[[1,"limebb-info-tile-currency-format",{"platform":[16],"context":[16],"value":[16]}]]],["limebb-notification-list",[[1,"limebb-notification-list",{"platform":[16],"context":[16],"items":[16],"loading":[4],"lastVisitedTimestamp":[1,"last-visited-timestamp"]},null,{"items":["handleItemsChange"]}]]],["limebb-browser",[[17,"limebb-browser",{"platform":[16],"context":[16],"items":[16],"layout":[1],"filter":[32]}]]],["limebb-component-config",[[1,"limebb-component-config",{"platform":[16],"context":[16],"value":[16],"required":[4],"readonly":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"],"formInfo":[16],"type":[1],"nameField":[1,"name-field"],"configComponent":[32],"configViewType":[32]},null,{"formInfo":["watchFormInfo"],"configComponent":["watchconfigComponent"]}]]],["limebb-component-picker",[[1,"limebb-component-picker",{"platform":[16],"context":[16],"type":[1],"tags":[16],"value":[1],"copyLabel":[1,"copy-label"],"hideCopyButton":[4,"hide-copy-button"],"required":[4],"readonly":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-dashboard-widget",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["limebb-icon-picker",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-info-tile",[[1,"limebb-info-tile",{"platform":[16],"context":[16],"filterId":[513,"filter-id"],"disabled":[4],"icon":[513],"label":[1],"prefix":[1],"suffix":[1],"propertyName":[1,"property-name"],"aggregateOperator":[1,"aggregate-operator"],"format":[16],"config":[32],"filters":[32],"value":[32],"loading":[32],"error":[32]},null,{"filterId":["watchFilterId"],"propertyName":["watchPropertyName"],"aggregateOperator":["watchAggregateOperator"]}]]],["limebb-info-tile-date-format",[[1,"limebb-info-tile-date-format",{"value":[16]}]]],["limebb-info-tile-decimal-format",[[1,"limebb-info-tile-decimal-format",{"value":[16]}]]],["limebb-info-tile-format",[[1,"limebb-info-tile-format",{"platform":[16],"context":[16],"type":[1],"value":[16]}]]],["limebb-info-tile-relative-date-format",[[1,"limebb-info-tile-relative-date-format",{"value":[16]}]]],["limebb-info-tile-unit-format",[[1,"limebb-info-tile-unit-format",{"value":[16]}]]],["limebb-limeobject-file-viewer",[[1,"limebb-limeobject-file-viewer",{"platform":[16],"context":[16],"property":[1],"fileTypes":[16],"limeobject":[32],"limetype":[32]}]]],["limebb-locale-picker",[[1,"limebb-locale-picker",{"platform":[16],"context":[16],"value":[1],"required":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"],"readonly":[4],"multipleChoice":[4,"multiple-choice"],"allLanguages":[32]}]]],["limebb-mention",[[1,"limebb-mention",{"limetype":[1],"objectid":[2],"limeobject":[32]}]]],["limebb-mention-group-counter",[[1,"limebb-mention-group-counter",{"count":[2],"limetype":[16],"helperLabel":[1,"helper-label"]}]]],["limebb-trend-indicator",[[1,"limebb-trend-indicator",{"platform":[16],"context":[16],"value":[520],"formerValue":[514,"former-value"],"suffix":[513],"label":[513],"invalid":[516],"helperText":[513,"helper-text"],"reducePresence":[516,"reduce-presence"]},null,{"value":["valueChanged"]}]]],["limebb-navigation-button_2",[[1,"limebb-summary-popover",{"triggerDelay":[514,"trigger-delay"],"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"openDirection":[513,"open-direction"],"popoverMaxWidth":[513,"popover-max-width"],"popoverMaxHeight":[513,"popover-max-height"],"actions":[16],"isPopoverOpen":[32]}],[17,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["limebb-kanban-item",[[1,"limebb-kanban-item",{"platform":[16],"context":[16],"item":[16]}]]],["limebb-kanban-group",[[1,"limebb-kanban-group",{"platform":[16],"context":[16],"identifier":[1],"heading":[513],"help":[1],"items":[16],"summary":[1],"loading":[516],"totalCount":[514,"total-count"]}]]],["limebb-feed-timeline-item",[[1,"limebb-feed-timeline-item",{"platform":[16],"context":[16],"item":[16],"ui":[513],"isBundled":[516,"is-bundled"],"headingCanExpand":[32],"isHeadingExpanded":[32],"showMore":[32],"isTall":[32]}]]],["limebb-text-editor-picker",[[1,"limebb-text-editor-picker",{"items":[16],"open":[516],"isSearching":[4,"is-searching"],"emptyMessage":[1,"empty-message"]},null,{"open":["watchOpen"]}]]],["limebb-currency-picker",[[1,"limebb-currency-picker",{"platform":[16],"context":[16],"label":[513],"currencies":[16],"helperText":[513,"helper-text"],"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"value":[1]}]]],["limebb-date-picker",[[1,"limebb-date-picker",{"platform":[16],"context":[16],"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[1],"type":[513]}]]],["limebb-notification-item",[[1,"limebb-notification-item",{"platform":[16],"context":[16],"item":[16]}]]],["limebb-chat-item_2",[[1,"limebb-chat-item",{"platform":[16],"context":[16],"item":[16]}],[1,"limebb-typing-indicator"]]],["limebb-empty-state",[[1,"limebb-empty-state",{"heading":[513],"value":[513],"icon":[16]}]]]], options);
 });

package/dist/esm/limebb-chat-list.entry.js

@@ -120,7 +120,7 @@ function insertDateGroups(context) {
     return Object.assign(Object.assign({}, context), { processedItems: newProcessedItems });
 }
 
-const chatListCss = "@charset \"UTF-8\";:host(limebb-chat-list){--limel-top-edge-fade-height:0.75rem;isolation:isolate;--limel-overflow-mask-vertical:linear-gradient(\n      to bottom,\n      transparent 0%,\n      black calc(0% + var(--limel-top-edge-fade-height, 1rem)),\n      black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),\n      transparent 100%\n  );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);box-sizing:border-box;display:flex;flex-direction:column;gap:0.5rem;height:100%;width:100%;min-width:0;min-height:0;padding:var(--limel-top-edge-fade-height) 0.5rem;overflow:hidden auto}:host(limebb-chat-list.is-empty){padding:0}*{box-sizing:border-box}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-group{isolation:isolate;display:flex;flex-direction:column;gap:0.5rem}.date-heading{position:sticky;z-index:1;top:0.25rem;display:flex;border-radius:9rem;padding:0.25rem 0.5rem;margin:0 auto;width:fit-content;font-size:0.75rem;line-height:1;color:rgb(var(--contrast-900));backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);transition:color 0.2s ease, border-color 0.4s ease}.date-heading:hover{color:rgb(var(--contrast-1000));border-color:rgb(var(--contrast-500))}.date-heading:hover:before{opacity:1}.date-heading:before{transition:opacity 0.2s ease;content:\"\";position:absolute;z-index:-1;inset:0;opacity:0.6;border-radius:inherit;background-color:rgb(var(--contrast-100))}.new-items-indicator{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;margin:0.25rem 0}.new-items-indicator hr{border:none;position:absolute;width:100%;height:1px;background-color:rgb(var(--color-red-lighter))}.new-items-indicator h3{z-index:1;padding:0 0.5rem;border-radius:1rem;margin:0 1rem;font-size:small;line-height:0.75rem;text-transform:lowercase;color:rgb(var(--color-red-default));background-color:rgb(var(--contrast-100))}.typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.1s;--limebb-chat-typing-opacity-transition-delay:0s;--limebb-chat-typing-grid-template-rows-transition-speed:0.3s;position:sticky;top:0;z-index:1;transition:grid-template-rows var(--limebb-chat-typing-grid-template-rows-transition-speed) ease;display:grid;grid-template-rows:0}.typing-indicator-height-animation div{transition:opacity var(--limebb-chat-typing-opacity-transition-speed) ease var(--limebb-chat-typing-opacity-transition-delay);overflow:hidden;opacity:0}:host(limebb-chat-list[are-others-typing]) .typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.4s;--limebb-chat-typing-opacity-transition-delay:0.3s;--limebb-chat-typing-grid-template-rows-transition-speed:0.46s;grid-template-rows:1.5rem}:host(limebb-chat-list[are-others-typing]) .typing-indicator-height-animation div{opacity:1}";
+const chatListCss = "@charset \"UTF-8\";:host(limebb-chat-list){--limel-top-edge-fade-height:0.75rem;isolation:isolate;--limel-overflow-mask-vertical:linear-gradient(\n      to bottom,\n      transparent 0%,\n      black calc(0% + var(--limel-top-edge-fade-height, 1rem)),\n      black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),\n      transparent 100%\n  );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);box-sizing:border-box;display:flex;gap:0.5rem;height:100%;width:100%;min-width:0;min-height:0;padding:var(--limel-top-edge-fade-height) 0.5rem;overflow:hidden auto}:host(limebb-chat-list.is-empty){padding:0}:host(limebb-chat-list[order=oldest-on-top]){flex-direction:column-reverse}:host(limebb-chat-list[order=newest-on-top]){flex-direction:column}*{box-sizing:border-box}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-group{isolation:isolate;display:flex;flex-direction:inherit;gap:0.5rem}.date-heading{position:sticky;z-index:1;top:0.25rem;display:flex;border-radius:9rem;padding:0.25rem 0.5rem;margin:0 auto;width:fit-content;font-size:0.75rem;line-height:1;color:rgb(var(--contrast-900));backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);transition:color 0.2s ease, border-color 0.4s ease}.date-heading:hover{color:rgb(var(--contrast-1000));border-color:rgb(var(--contrast-500))}.date-heading:hover:before{opacity:1}.date-heading:before{transition:opacity 0.2s ease;content:\"\";position:absolute;z-index:-1;inset:0;opacity:0.6;border-radius:inherit;background-color:rgb(var(--contrast-100))}.new-items-indicator{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;margin:0.25rem 0}.new-items-indicator hr{border:none;position:absolute;width:100%;height:1px;background-color:rgb(var(--color-red-lighter))}.new-items-indicator h3{z-index:1;padding:0 0.5rem;border-radius:1rem;margin:0 1rem;font-size:small;line-height:0.75rem;text-transform:lowercase;color:rgb(var(--color-red-default));background-color:rgb(var(--contrast-100))}.typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.1s;--limebb-chat-typing-opacity-transition-delay:0s;--limebb-chat-typing-grid-template-rows-transition-speed:0.3s;position:sticky;top:0;z-index:1;transition:grid-template-rows var(--limebb-chat-typing-grid-template-rows-transition-speed) ease;display:grid;grid-template-rows:0}.typing-indicator-height-animation div{transition:opacity var(--limebb-chat-typing-opacity-transition-speed) ease var(--limebb-chat-typing-opacity-transition-delay);overflow:hidden;opacity:0}:host(limebb-chat-list[is-typing-indicator-visible]) .typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.4s;--limebb-chat-typing-opacity-transition-delay:0.3s;--limebb-chat-typing-grid-template-rows-transition-speed:0.46s;grid-template-rows:1.5rem}:host(limebb-chat-list[is-typing-indicator-visible]) .typing-indicator-height-animation div{opacity:1}";
 const LimebbChatListStyle0 = chatListCss;
 
 const ChatList = class {
@@ -131,6 +131,20 @@ const ChatList = class {
          * These items must be sorted by their `timestamp` in descending order.
          */
         this.items = [];
+        /**
+         * - `newest-on-top` displays new messages at the top of the list;
+         * used if the chat input is located on top of the chat interface.
+         * - `oldest-on-top` displays new messages at the bottom of the list (default);
+         * used if the chat input is located at the bottom of the chat interface.
+         *
+         * :::important
+         * Using this prop will _not_ automatically sort the chat items for you!
+         * You still need to pass the items in the correct order (descending order by timestamp).
+         * This prop will only affect the direction of the elements in the user interface,
+         * such as the location of the typing indicator or the scrollbars.
+         * :::
+         */
+        this.order = 'oldest-on-top';
         this.processedItems = [];
     }
     handleItemsChange() {
@@ -144,9 +158,9 @@ const ChatList = class {
         this.handleItemsChange();
     }
     render() {
-        return (h(Host, { key: '8d7895cdc128ff75f9e46b0545ab2605d3a8c1a8', class: {
+        return (h(Host, { key: 'cb3552184a7a9eaacbd7e94c1af68ffbb8cce6ff', class: {
                 'is-empty': !this.items.length && !this.isTypingIndicatorVisible,
-            }, "aria-busy": this.isBusy(), "aria-live": "assertive" }, this.renderSpinner(), h("div", { key: 'c5e700c8bbf5ccf545c93cfd3058636afb56a329', class: "typing-indicator-height-animation" }, h("div", { key: '4bfa4b69701035711ef5b0faede056a698ea70fd' }, this.renderTypingIndicator())), this.renderChatItems()));
+            }, "aria-busy": this.isBusy(), "aria-live": "assertive" }, this.renderSpinner(), h("div", { key: 'fedc4e0eef654a983c2a3c5aa751107c32a987bb', class: "typing-indicator-height-animation" }, h("div", { key: 'a4a8955159ef7eea5519176ba7778b5b6b6f19ed' }, this.renderTypingIndicator())), this.renderChatItems()));
     }
     renderSpinner() {
         if (!this.loading) {
@@ -173,14 +187,19 @@ const ChatList = class {
         });
     }
     renderGroup(group) {
-        return (h("section", { class: "date-group" }, h("a", { class: "date-heading" }, group.heading), group.items.map((item) => {
+        const chatItems = group.items.map((item) => {
             if (item.type === 'chat') {
                 return this.renderChatItem(item.item);
             }
             else if (item.type === 'newItemIndicator') {
                 return this.renderIndicator();
             }
-        })));
+        });
+        const dateHeading = h("a", { class: "date-heading" }, group.heading);
+        if (this.order === 'oldest-on-top') {
+            return (h("section", { class: "date-group" }, chatItems, dateHeading));
+        }
+        return (h("section", { class: "date-group" }, dateHeading, chatItems));
     }
     renderChatItem(item) {
         return (h("limebb-chat-item", { platform: this.platform, context: this.context, item: item, key: item.id }));

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["limebb-feed",[[1,"limebb-feed",{"platform":[16],"context":[16],"items":[16],"emptyStateMessage":[1,"empty-state-message"],"heading":[1],"loading":[4],"minutesOfProximity":[2,"minutes-of-proximity"],"totalCount":[2,"total-count"],"direction":[1],"lastVisitedTimestamp":[1,"last-visited-timestamp"]}]]],["limebb-kanban",[[1,"limebb-kanban",{"platform":[16],"context":[16],"groups":[16]}]]],["limebb-chat-list",[[1,"limebb-chat-list",{"platform":[16],"context":[16],"items":[16],"loading":[516],"isTypingIndicatorVisible":[516,"is-typing-indicator-visible"],"lastVisitedTimestamp":[513,"last-visited-timestamp"]},null,{"items":["handleItemsChange"]}]]],["limebb-text-editor",[[1,"limebb-text-editor",{"platform":[16],"context":[16],"allowMentioning":[4,"allow-mentioning"],"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"required":[516],"selectedContext":[16],"ui":[513],"allowResize":[4,"allow-resize"],"value":[1],"draftIdentifier":[1,"draft-identifier"],"triggerMap":[16],"customElements":[16],"items":[32],"highlightedItemIndex":[32],"editorPickerQuery":[32],"searchableLimetypes":[32],"isPickerOpen":[32],"isSearching":[32]},null,{"isPickerOpen":["watchOpen"],"editorPickerQuery":["watchQuery"]}]]],["limebb-date-range",[[1,"limebb-date-range",{"platform":[16],"context":[16],"startTime":[16],"endTime":[16],"startTimeLabel":[1,"start-time-label"],"endTimeLabel":[1,"end-time-label"],"language":[1],"timeFormat":[1,"time-format"],"type":[1]}]]],["limebb-info-tile-currency-format",[[1,"limebb-info-tile-currency-format",{"platform":[16],"context":[16],"value":[16]}]]],["limebb-notification-list",[[1,"limebb-notification-list",{"platform":[16],"context":[16],"items":[16],"loading":[4],"lastVisitedTimestamp":[1,"last-visited-timestamp"]},null,{"items":["handleItemsChange"]}]]],["limebb-browser",[[17,"limebb-browser",{"platform":[16],"context":[16],"items":[16],"layout":[1],"filter":[32]}]]],["limebb-component-config",[[1,"limebb-component-config",{"platform":[16],"context":[16],"value":[16],"required":[4],"readonly":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"],"formInfo":[16],"type":[1],"nameField":[1,"name-field"],"configComponent":[32],"configViewType":[32]},null,{"formInfo":["watchFormInfo"],"configComponent":["watchconfigComponent"]}]]],["limebb-component-picker",[[1,"limebb-component-picker",{"platform":[16],"context":[16],"type":[1],"tags":[16],"value":[1],"copyLabel":[1,"copy-label"],"hideCopyButton":[4,"hide-copy-button"],"required":[4],"readonly":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-dashboard-widget",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["limebb-icon-picker",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-info-tile",[[1,"limebb-info-tile",{"platform":[16],"context":[16],"filterId":[513,"filter-id"],"disabled":[4],"icon":[513],"label":[1],"prefix":[1],"suffix":[1],"propertyName":[1,"property-name"],"aggregateOperator":[1,"aggregate-operator"],"format":[16],"config":[32],"filters":[32],"value":[32],"loading":[32],"error":[32]},null,{"filterId":["watchFilterId"],"propertyName":["watchPropertyName"],"aggregateOperator":["watchAggregateOperator"]}]]],["limebb-info-tile-date-format",[[1,"limebb-info-tile-date-format",{"value":[16]}]]],["limebb-info-tile-decimal-format",[[1,"limebb-info-tile-decimal-format",{"value":[16]}]]],["limebb-info-tile-format",[[1,"limebb-info-tile-format",{"platform":[16],"context":[16],"type":[1],"value":[16]}]]],["limebb-info-tile-relative-date-format",[[1,"limebb-info-tile-relative-date-format",{"value":[16]}]]],["limebb-info-tile-unit-format",[[1,"limebb-info-tile-unit-format",{"value":[16]}]]],["limebb-limeobject-file-viewer",[[1,"limebb-limeobject-file-viewer",{"platform":[16],"context":[16],"property":[1],"fileTypes":[16],"limeobject":[32],"limetype":[32]}]]],["limebb-locale-picker",[[1,"limebb-locale-picker",{"platform":[16],"context":[16],"value":[1],"required":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"],"readonly":[4],"multipleChoice":[4,"multiple-choice"],"allLanguages":[32]}]]],["limebb-mention",[[1,"limebb-mention",{"limetype":[1],"objectid":[2],"limeobject":[32]}]]],["limebb-mention-group-counter",[[1,"limebb-mention-group-counter",{"count":[2],"limetype":[16],"helperLabel":[1,"helper-label"]}]]],["limebb-trend-indicator",[[1,"limebb-trend-indicator",{"platform":[16],"context":[16],"value":[520],"formerValue":[514,"former-value"],"suffix":[513],"label":[513],"invalid":[516],"helperText":[513,"helper-text"],"reducePresence":[516,"reduce-presence"]},null,{"value":["valueChanged"]}]]],["limebb-navigation-button_2",[[1,"limebb-summary-popover",{"triggerDelay":[514,"trigger-delay"],"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"openDirection":[513,"open-direction"],"popoverMaxWidth":[513,"popover-max-width"],"popoverMaxHeight":[513,"popover-max-height"],"actions":[16],"isPopoverOpen":[32]}],[17,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["limebb-kanban-item",[[1,"limebb-kanban-item",{"platform":[16],"context":[16],"item":[16]}]]],["limebb-kanban-group",[[1,"limebb-kanban-group",{"platform":[16],"context":[16],"identifier":[1],"heading":[513],"help":[1],"items":[16],"summary":[1],"loading":[516],"totalCount":[514,"total-count"]}]]],["limebb-feed-timeline-item",[[1,"limebb-feed-timeline-item",{"platform":[16],"context":[16],"item":[16],"ui":[513],"isBundled":[516,"is-bundled"],"headingCanExpand":[32],"isHeadingExpanded":[32],"showMore":[32],"isTall":[32]}]]],["limebb-text-editor-picker",[[1,"limebb-text-editor-picker",{"items":[16],"open":[516],"isSearching":[4,"is-searching"],"emptyMessage":[1,"empty-message"]},null,{"open":["watchOpen"]}]]],["limebb-currency-picker",[[1,"limebb-currency-picker",{"platform":[16],"context":[16],"label":[513],"currencies":[16],"helperText":[513,"helper-text"],"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"value":[1]}]]],["limebb-date-picker",[[1,"limebb-date-picker",{"platform":[16],"context":[16],"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[1],"type":[513]}]]],["limebb-notification-item",[[1,"limebb-notification-item",{"platform":[16],"context":[16],"item":[16]}]]],["limebb-chat-item_2",[[1,"limebb-chat-item",{"platform":[16],"context":[16],"item":[16]}],[1,"limebb-typing-indicator"]]],["limebb-empty-state",[[1,"limebb-empty-state",{"heading":[513],"value":[513],"icon":[16]}]]]], options);
+  return bootstrapLazy([["limebb-feed",[[1,"limebb-feed",{"platform":[16],"context":[16],"items":[16],"emptyStateMessage":[1,"empty-state-message"],"heading":[1],"loading":[4],"minutesOfProximity":[2,"minutes-of-proximity"],"totalCount":[2,"total-count"],"direction":[1],"lastVisitedTimestamp":[1,"last-visited-timestamp"]}]]],["limebb-kanban",[[1,"limebb-kanban",{"platform":[16],"context":[16],"groups":[16]}]]],["limebb-chat-list",[[1,"limebb-chat-list",{"platform":[16],"context":[16],"items":[16],"loading":[516],"isTypingIndicatorVisible":[516,"is-typing-indicator-visible"],"lastVisitedTimestamp":[513,"last-visited-timestamp"],"order":[513]},null,{"items":["handleItemsChange"]}]]],["limebb-text-editor",[[1,"limebb-text-editor",{"platform":[16],"context":[16],"allowMentioning":[4,"allow-mentioning"],"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"required":[516],"selectedContext":[16],"ui":[513],"allowResize":[4,"allow-resize"],"value":[1],"draftIdentifier":[1,"draft-identifier"],"triggerMap":[16],"customElements":[16],"items":[32],"highlightedItemIndex":[32],"editorPickerQuery":[32],"searchableLimetypes":[32],"isPickerOpen":[32],"isSearching":[32]},null,{"isPickerOpen":["watchOpen"],"editorPickerQuery":["watchQuery"]}]]],["limebb-date-range",[[1,"limebb-date-range",{"platform":[16],"context":[16],"startTime":[16],"endTime":[16],"startTimeLabel":[1,"start-time-label"],"endTimeLabel":[1,"end-time-label"],"language":[1],"timeFormat":[1,"time-format"],"type":[1]}]]],["limebb-info-tile-currency-format",[[1,"limebb-info-tile-currency-format",{"platform":[16],"context":[16],"value":[16]}]]],["limebb-notification-list",[[1,"limebb-notification-list",{"platform":[16],"context":[16],"items":[16],"loading":[4],"lastVisitedTimestamp":[1,"last-visited-timestamp"]},null,{"items":["handleItemsChange"]}]]],["limebb-browser",[[17,"limebb-browser",{"platform":[16],"context":[16],"items":[16],"layout":[1],"filter":[32]}]]],["limebb-component-config",[[1,"limebb-component-config",{"platform":[16],"context":[16],"value":[16],"required":[4],"readonly":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"],"formInfo":[16],"type":[1],"nameField":[1,"name-field"],"configComponent":[32],"configViewType":[32]},null,{"formInfo":["watchFormInfo"],"configComponent":["watchconfigComponent"]}]]],["limebb-component-picker",[[1,"limebb-component-picker",{"platform":[16],"context":[16],"type":[1],"tags":[16],"value":[1],"copyLabel":[1,"copy-label"],"hideCopyButton":[4,"hide-copy-button"],"required":[4],"readonly":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-dashboard-widget",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["limebb-icon-picker",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-info-tile",[[1,"limebb-info-tile",{"platform":[16],"context":[16],"filterId":[513,"filter-id"],"disabled":[4],"icon":[513],"label":[1],"prefix":[1],"suffix":[1],"propertyName":[1,"property-name"],"aggregateOperator":[1,"aggregate-operator"],"format":[16],"config":[32],"filters":[32],"value":[32],"loading":[32],"error":[32]},null,{"filterId":["watchFilterId"],"propertyName":["watchPropertyName"],"aggregateOperator":["watchAggregateOperator"]}]]],["limebb-info-tile-date-format",[[1,"limebb-info-tile-date-format",{"value":[16]}]]],["limebb-info-tile-decimal-format",[[1,"limebb-info-tile-decimal-format",{"value":[16]}]]],["limebb-info-tile-format",[[1,"limebb-info-tile-format",{"platform":[16],"context":[16],"type":[1],"value":[16]}]]],["limebb-info-tile-relative-date-format",[[1,"limebb-info-tile-relative-date-format",{"value":[16]}]]],["limebb-info-tile-unit-format",[[1,"limebb-info-tile-unit-format",{"value":[16]}]]],["limebb-limeobject-file-viewer",[[1,"limebb-limeobject-file-viewer",{"platform":[16],"context":[16],"property":[1],"fileTypes":[16],"limeobject":[32],"limetype":[32]}]]],["limebb-locale-picker",[[1,"limebb-locale-picker",{"platform":[16],"context":[16],"value":[1],"required":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"],"readonly":[4],"multipleChoice":[4,"multiple-choice"],"allLanguages":[32]}]]],["limebb-mention",[[1,"limebb-mention",{"limetype":[1],"objectid":[2],"limeobject":[32]}]]],["limebb-mention-group-counter",[[1,"limebb-mention-group-counter",{"count":[2],"limetype":[16],"helperLabel":[1,"helper-label"]}]]],["limebb-trend-indicator",[[1,"limebb-trend-indicator",{"platform":[16],"context":[16],"value":[520],"formerValue":[514,"former-value"],"suffix":[513],"label":[513],"invalid":[516],"helperText":[513,"helper-text"],"reducePresence":[516,"reduce-presence"]},null,{"value":["valueChanged"]}]]],["limebb-navigation-button_2",[[1,"limebb-summary-popover",{"triggerDelay":[514,"trigger-delay"],"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"openDirection":[513,"open-direction"],"popoverMaxWidth":[513,"popover-max-width"],"popoverMaxHeight":[513,"popover-max-height"],"actions":[16],"isPopoverOpen":[32]}],[17,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["limebb-kanban-item",[[1,"limebb-kanban-item",{"platform":[16],"context":[16],"item":[16]}]]],["limebb-kanban-group",[[1,"limebb-kanban-group",{"platform":[16],"context":[16],"identifier":[1],"heading":[513],"help":[1],"items":[16],"summary":[1],"loading":[516],"totalCount":[514,"total-count"]}]]],["limebb-feed-timeline-item",[[1,"limebb-feed-timeline-item",{"platform":[16],"context":[16],"item":[16],"ui":[513],"isBundled":[516,"is-bundled"],"headingCanExpand":[32],"isHeadingExpanded":[32],"showMore":[32],"isTall":[32]}]]],["limebb-text-editor-picker",[[1,"limebb-text-editor-picker",{"items":[16],"open":[516],"isSearching":[4,"is-searching"],"emptyMessage":[1,"empty-message"]},null,{"open":["watchOpen"]}]]],["limebb-currency-picker",[[1,"limebb-currency-picker",{"platform":[16],"context":[16],"label":[513],"currencies":[16],"helperText":[513,"helper-text"],"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"value":[1]}]]],["limebb-date-picker",[[1,"limebb-date-picker",{"platform":[16],"context":[16],"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[1],"type":[513]}]]],["limebb-notification-item",[[1,"limebb-notification-item",{"platform":[16],"context":[16],"item":[16]}]]],["limebb-chat-item_2",[[1,"limebb-chat-item",{"platform":[16],"context":[16],"item":[16]}],[1,"limebb-typing-indicator"]]],["limebb-empty-state",[[1,"limebb-empty-state",{"heading":[513],"value":[513],"icon":[16]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/lime-crm-building-blocks/lime-crm-building-blocks.esm.js

@@ -1 +1 @@
-import{p as e,b as t}from"./p-b11e09b4.js";export{s as setNonce}from"./p-b11e09b4.js";import{g as i}from"./p-e1255160.js";(()=>{const t=import.meta.url,i={};return""!==t&&(i.resourcesUrl=new URL(".",t).href),e(i)})().then((async e=>(await i(),t([["p-e3984a45",[[1,"limebb-feed",{platform:[16],context:[16],items:[16],emptyStateMessage:[1,"empty-state-message"],heading:[1],loading:[4],minutesOfProximity:[2,"minutes-of-proximity"],totalCount:[2,"total-count"],direction:[1],lastVisitedTimestamp:[1,"last-visited-timestamp"]}]]],["p-974c3022",[[1,"limebb-kanban",{platform:[16],context:[16],groups:[16]}]]],["p-2b122433",[[1,"limebb-chat-list",{platform:[16],context:[16],items:[16],loading:[516],isTypingIndicatorVisible:[516,"is-typing-indicator-visible"],lastVisitedTimestamp:[513,"last-visited-timestamp"]},null,{items:["handleItemsChange"]}]]],["p-949ac1a5",[[1,"limebb-text-editor",{platform:[16],context:[16],allowMentioning:[4,"allow-mentioning"],contentType:[1,"content-type"],language:[513],disabled:[516],readonly:[516],helperText:[513,"helper-text"],placeholder:[513],label:[513],invalid:[516],required:[516],selectedContext:[16],ui:[513],allowResize:[4,"allow-resize"],value:[1],draftIdentifier:[1,"draft-identifier"],triggerMap:[16],customElements:[16],items:[32],highlightedItemIndex:[32],editorPickerQuery:[32],searchableLimetypes:[32],isPickerOpen:[32],isSearching:[32]},null,{isPickerOpen:["watchOpen"],editorPickerQuery:["watchQuery"]}]]],["p-1077b336",[[1,"limebb-date-range",{platform:[16],context:[16],startTime:[16],endTime:[16],startTimeLabel:[1,"start-time-label"],endTimeLabel:[1,"end-time-label"],language:[1],timeFormat:[1,"time-format"],type:[1]}]]],["p-bed2fa73",[[1,"limebb-info-tile-currency-format",{platform:[16],context:[16],value:[16]}]]],["p-063681c6",[[1,"limebb-notification-list",{platform:[16],context:[16],items:[16],loading:[4],lastVisitedTimestamp:[1,"last-visited-timestamp"]},null,{items:["handleItemsChange"]}]]],["p-769e6d21",[[17,"limebb-browser",{platform:[16],context:[16],items:[16],layout:[1],filter:[32]}]]],["p-3310a5aa",[[1,"limebb-component-config",{platform:[16],context:[16],value:[16],required:[4],readonly:[4],disabled:[4],label:[1],helperText:[1,"helper-text"],formInfo:[16],type:[1],nameField:[1,"name-field"],configComponent:[32],configViewType:[32]},null,{formInfo:["watchFormInfo"],configComponent:["watchconfigComponent"]}]]],["p-306b2ff4",[[1,"limebb-component-picker",{platform:[16],context:[16],type:[1],tags:[16],value:[1],copyLabel:[1,"copy-label"],hideCopyButton:[4,"hide-copy-button"],required:[4],readonly:[4],disabled:[4],label:[1],helperText:[1,"helper-text"]}]]],["p-6a6fc0c0",[[1,"limebb-dashboard-widget",{heading:[513],subheading:[513],supportingText:[513,"supporting-text"],icon:[513]}]]],["p-cafb01ea",[[1,"limebb-icon-picker",{value:[1],required:[4],readonly:[4],invalid:[4],disabled:[4],label:[1],helperText:[1,"helper-text"]}]]],["p-a6b26348",[[1,"limebb-info-tile",{platform:[16],context:[16],filterId:[513,"filter-id"],disabled:[4],icon:[513],label:[1],prefix:[1],suffix:[1],propertyName:[1,"property-name"],aggregateOperator:[1,"aggregate-operator"],format:[16],config:[32],filters:[32],value:[32],loading:[32],error:[32]},null,{filterId:["watchFilterId"],propertyName:["watchPropertyName"],aggregateOperator:["watchAggregateOperator"]}]]],["p-29c74b32",[[1,"limebb-info-tile-date-format",{value:[16]}]]],["p-a50a02bd",[[1,"limebb-info-tile-decimal-format",{value:[16]}]]],["p-d2a76616",[[1,"limebb-info-tile-format",{platform:[16],context:[16],type:[1],value:[16]}]]],["p-fefcc3c1",[[1,"limebb-info-tile-relative-date-format",{value:[16]}]]],["p-95e1d1c3",[[1,"limebb-info-tile-unit-format",{value:[16]}]]],["p-fc97d0d1",[[1,"limebb-limeobject-file-viewer",{platform:[16],context:[16],property:[1],fileTypes:[16],limeobject:[32],limetype:[32]}]]],["p-5b15f6ba",[[1,"limebb-locale-picker",{platform:[16],context:[16],value:[1],required:[4],disabled:[4],label:[1],helperText:[1,"helper-text"],readonly:[4],multipleChoice:[4,"multiple-choice"],allLanguages:[32]}]]],["p-9e2dab17",[[1,"limebb-mention",{limetype:[1],objectid:[2],limeobject:[32]}]]],["p-6ee336a3",[[1,"limebb-mention-group-counter",{count:[2],limetype:[16],helperLabel:[1,"helper-label"]}]]],["p-f817b904",[[1,"limebb-trend-indicator",{platform:[16],context:[16],value:[520],formerValue:[514,"former-value"],suffix:[513],label:[513],invalid:[516],helperText:[513,"helper-text"],reducePresence:[516,"reduce-presence"]},null,{value:["valueChanged"]}]]],["p-047f49d4",[[1,"limebb-summary-popover",{triggerDelay:[514,"trigger-delay"],heading:[513],subheading:[513],image:[16],icon:[513],value:[1],openDirection:[513,"open-direction"],popoverMaxWidth:[513,"popover-max-width"],popoverMaxHeight:[513,"popover-max-height"],actions:[16],isPopoverOpen:[32]}],[17,"limebb-navigation-button",{href:[513],tooltipLabel:[513,"tooltip-label"],tooltipHelperLabel:[513,"tooltip-helper-label"],type:[513]}]]],["p-dcae11f9",[[1,"limebb-kanban-item",{platform:[16],context:[16],item:[16]}]]],["p-fddc70a8",[[1,"limebb-kanban-group",{platform:[16],context:[16],identifier:[1],heading:[513],help:[1],items:[16],summary:[1],loading:[516],totalCount:[514,"total-count"]}]]],["p-0cf447b6",[[1,"limebb-feed-timeline-item",{platform:[16],context:[16],item:[16],ui:[513],isBundled:[516,"is-bundled"],headingCanExpand:[32],isHeadingExpanded:[32],showMore:[32],isTall:[32]}]]],["p-62343f2e",[[1,"limebb-text-editor-picker",{items:[16],open:[516],isSearching:[4,"is-searching"],emptyMessage:[1,"empty-message"]},null,{open:["watchOpen"]}]]],["p-df7f6a89",[[1,"limebb-currency-picker",{platform:[16],context:[16],label:[513],currencies:[16],helperText:[513,"helper-text"],required:[516],readonly:[516],invalid:[516],disabled:[516],value:[1]}]]],["p-389313b3",[[1,"limebb-date-picker",{platform:[16],context:[16],disabled:[516],readonly:[516],invalid:[516],label:[513],placeholder:[513],helperText:[513,"helper-text"],required:[516],value:[1],type:[513]}]]],["p-c6d4c005",[[1,"limebb-notification-item",{platform:[16],context:[16],item:[16]}]]],["p-728fc7ee",[[1,"limebb-chat-item",{platform:[16],context:[16],item:[16]}],[1,"limebb-typing-indicator"]]],["p-1a07c942",[[1,"limebb-empty-state",{heading:[513],value:[513],icon:[16]}]]]],e))));
+import{p as e,b as t}from"./p-b11e09b4.js";export{s as setNonce}from"./p-b11e09b4.js";import{g as i}from"./p-e1255160.js";(()=>{const t=import.meta.url,i={};return""!==t&&(i.resourcesUrl=new URL(".",t).href),e(i)})().then((async e=>(await i(),t([["p-e3984a45",[[1,"limebb-feed",{platform:[16],context:[16],items:[16],emptyStateMessage:[1,"empty-state-message"],heading:[1],loading:[4],minutesOfProximity:[2,"minutes-of-proximity"],totalCount:[2,"total-count"],direction:[1],lastVisitedTimestamp:[1,"last-visited-timestamp"]}]]],["p-974c3022",[[1,"limebb-kanban",{platform:[16],context:[16],groups:[16]}]]],["p-50060884",[[1,"limebb-chat-list",{platform:[16],context:[16],items:[16],loading:[516],isTypingIndicatorVisible:[516,"is-typing-indicator-visible"],lastVisitedTimestamp:[513,"last-visited-timestamp"],order:[513]},null,{items:["handleItemsChange"]}]]],["p-949ac1a5",[[1,"limebb-text-editor",{platform:[16],context:[16],allowMentioning:[4,"allow-mentioning"],contentType:[1,"content-type"],language:[513],disabled:[516],readonly:[516],helperText:[513,"helper-text"],placeholder:[513],label:[513],invalid:[516],required:[516],selectedContext:[16],ui:[513],allowResize:[4,"allow-resize"],value:[1],draftIdentifier:[1,"draft-identifier"],triggerMap:[16],customElements:[16],items:[32],highlightedItemIndex:[32],editorPickerQuery:[32],searchableLimetypes:[32],isPickerOpen:[32],isSearching:[32]},null,{isPickerOpen:["watchOpen"],editorPickerQuery:["watchQuery"]}]]],["p-1077b336",[[1,"limebb-date-range",{platform:[16],context:[16],startTime:[16],endTime:[16],startTimeLabel:[1,"start-time-label"],endTimeLabel:[1,"end-time-label"],language:[1],timeFormat:[1,"time-format"],type:[1]}]]],["p-bed2fa73",[[1,"limebb-info-tile-currency-format",{platform:[16],context:[16],value:[16]}]]],["p-063681c6",[[1,"limebb-notification-list",{platform:[16],context:[16],items:[16],loading:[4],lastVisitedTimestamp:[1,"last-visited-timestamp"]},null,{items:["handleItemsChange"]}]]],["p-769e6d21",[[17,"limebb-browser",{platform:[16],context:[16],items:[16],layout:[1],filter:[32]}]]],["p-3310a5aa",[[1,"limebb-component-config",{platform:[16],context:[16],value:[16],required:[4],readonly:[4],disabled:[4],label:[1],helperText:[1,"helper-text"],formInfo:[16],type:[1],nameField:[1,"name-field"],configComponent:[32],configViewType:[32]},null,{formInfo:["watchFormInfo"],configComponent:["watchconfigComponent"]}]]],["p-306b2ff4",[[1,"limebb-component-picker",{platform:[16],context:[16],type:[1],tags:[16],value:[1],copyLabel:[1,"copy-label"],hideCopyButton:[4,"hide-copy-button"],required:[4],readonly:[4],disabled:[4],label:[1],helperText:[1,"helper-text"]}]]],["p-6a6fc0c0",[[1,"limebb-dashboard-widget",{heading:[513],subheading:[513],supportingText:[513,"supporting-text"],icon:[513]}]]],["p-cafb01ea",[[1,"limebb-icon-picker",{value:[1],required:[4],readonly:[4],invalid:[4],disabled:[4],label:[1],helperText:[1,"helper-text"]}]]],["p-a6b26348",[[1,"limebb-info-tile",{platform:[16],context:[16],filterId:[513,"filter-id"],disabled:[4],icon:[513],label:[1],prefix:[1],suffix:[1],propertyName:[1,"property-name"],aggregateOperator:[1,"aggregate-operator"],format:[16],config:[32],filters:[32],value:[32],loading:[32],error:[32]},null,{filterId:["watchFilterId"],propertyName:["watchPropertyName"],aggregateOperator:["watchAggregateOperator"]}]]],["p-29c74b32",[[1,"limebb-info-tile-date-format",{value:[16]}]]],["p-a50a02bd",[[1,"limebb-info-tile-decimal-format",{value:[16]}]]],["p-d2a76616",[[1,"limebb-info-tile-format",{platform:[16],context:[16],type:[1],value:[16]}]]],["p-fefcc3c1",[[1,"limebb-info-tile-relative-date-format",{value:[16]}]]],["p-95e1d1c3",[[1,"limebb-info-tile-unit-format",{value:[16]}]]],["p-fc97d0d1",[[1,"limebb-limeobject-file-viewer",{platform:[16],context:[16],property:[1],fileTypes:[16],limeobject:[32],limetype:[32]}]]],["p-5b15f6ba",[[1,"limebb-locale-picker",{platform:[16],context:[16],value:[1],required:[4],disabled:[4],label:[1],helperText:[1,"helper-text"],readonly:[4],multipleChoice:[4,"multiple-choice"],allLanguages:[32]}]]],["p-9e2dab17",[[1,"limebb-mention",{limetype:[1],objectid:[2],limeobject:[32]}]]],["p-6ee336a3",[[1,"limebb-mention-group-counter",{count:[2],limetype:[16],helperLabel:[1,"helper-label"]}]]],["p-f817b904",[[1,"limebb-trend-indicator",{platform:[16],context:[16],value:[520],formerValue:[514,"former-value"],suffix:[513],label:[513],invalid:[516],helperText:[513,"helper-text"],reducePresence:[516,"reduce-presence"]},null,{value:["valueChanged"]}]]],["p-047f49d4",[[1,"limebb-summary-popover",{triggerDelay:[514,"trigger-delay"],heading:[513],subheading:[513],image:[16],icon:[513],value:[1],openDirection:[513,"open-direction"],popoverMaxWidth:[513,"popover-max-width"],popoverMaxHeight:[513,"popover-max-height"],actions:[16],isPopoverOpen:[32]}],[17,"limebb-navigation-button",{href:[513],tooltipLabel:[513,"tooltip-label"],tooltipHelperLabel:[513,"tooltip-helper-label"],type:[513]}]]],["p-dcae11f9",[[1,"limebb-kanban-item",{platform:[16],context:[16],item:[16]}]]],["p-fddc70a8",[[1,"limebb-kanban-group",{platform:[16],context:[16],identifier:[1],heading:[513],help:[1],items:[16],summary:[1],loading:[516],totalCount:[514,"total-count"]}]]],["p-0cf447b6",[[1,"limebb-feed-timeline-item",{platform:[16],context:[16],item:[16],ui:[513],isBundled:[516,"is-bundled"],headingCanExpand:[32],isHeadingExpanded:[32],showMore:[32],isTall:[32]}]]],["p-62343f2e",[[1,"limebb-text-editor-picker",{items:[16],open:[516],isSearching:[4,"is-searching"],emptyMessage:[1,"empty-message"]},null,{open:["watchOpen"]}]]],["p-df7f6a89",[[1,"limebb-currency-picker",{platform:[16],context:[16],label:[513],currencies:[16],helperText:[513,"helper-text"],required:[516],readonly:[516],invalid:[516],disabled:[516],value:[1]}]]],["p-389313b3",[[1,"limebb-date-picker",{platform:[16],context:[16],disabled:[516],readonly:[516],invalid:[516],label:[513],placeholder:[513],helperText:[513,"helper-text"],required:[516],value:[1],type:[513]}]]],["p-c6d4c005",[[1,"limebb-notification-item",{platform:[16],context:[16],item:[16]}]]],["p-728fc7ee",[[1,"limebb-chat-item",{platform:[16],context:[16],item:[16]}],[1,"limebb-typing-indicator"]]],["p-1a07c942",[[1,"limebb-empty-state",{heading:[513],value:[513],icon:[16]}]]]],e))));

package/dist/lime-crm-building-blocks/p-50060884.entry.js

@@ -0,0 +1 @@
+import{r as t,h as e,H as i}from"./p-b11e09b4.js";import{P as r}from"./p-a26d352f.js";function a(t){return t.items.forEach((e=>{t.processedItems.push({type:"chat",item:e})})),t}function n(t){const e=[];let i=t.newItemIndicatorInserted;return t.processedItems.forEach((r=>{"chat"===r.type&&t.lastVisitedTimestamp&&!i&&new Date(r.item.timestamp)<=t.lastVisitedTimestamp&&t.hasUnseenNotifications&&(e.push({type:"newItemIndicator"}),i=!0),e.push(r)})),t.processedItems=e,t.newItemIndicatorInserted=i,t}function o(t){const e=[];let i=null,r=null;for(const a of t.processedItems)if("chat"===a.type){const n=new Date(a.item.timestamp),o=t.dateTimeFormatter.format(n,"date");o!==r&&(i&&e.push(i),i={type:"group",groupType:"dateGroup",heading:o,items:[]},r=o),i&&i.items.push(a)}else"newItemIndicator"===a.type&&(i?i.items.push(a):e.push(a));return i&&e.push(i),Object.assign(Object.assign({},t),{processedItems:e})}const s=class{constructor(e){t(this,e),this.items=[],this.order="oldest-on-top",this.processedItems=[]}handleItemsChange(){let t=null;var e,i,r,s;this.lastVisitedTimestamp&&(t="string"==typeof(s=this.lastVisitedTimestamp)?new Date(Date.parse(s)):new Date(s)),this.processedItems=(r={items:e=this.items,processedItems:[],lastVisitedTimestamp:i=t,dateTimeFormatter:this.dateTimeFormatter,newItemIndicatorInserted:!1,lastProcessedDate:null,hasUnseenNotifications:e.some((t=>i&&new Date(t.timestamp)>i))},[a,n,o].reduce(((t,e)=>e(t)),r)).processedItems}componentWillLoad(){this.handleItemsChange()}render(){return e(i,{key:"cb3552184a7a9eaacbd7e94c1af68ffbb8cce6ff",class:{"is-empty":!this.items.length&&!this.isTypingIndicatorVisible},"aria-busy":this.isBusy(),"aria-live":"assertive"},this.renderSpinner(),e("div",{key:"fedc4e0eef654a983c2a3c5aa751107c32a987bb",class:"typing-indicator-height-animation"},e("div",{key:"a4a8955159ef7eea5519176ba7778b5b6b6f19ed"},this.renderTypingIndicator())),this.renderChatItems())}renderSpinner(){if(this.loading)return e("limel-spinner",null)}renderTypingIndicator(){if(this.isTypingIndicatorVisible)return e("limebb-typing-indicator",null)}renderChatItems(){return this.processedItems.map((t=>{switch(t.type){case"group":return this.renderGroup(t);case"newItemIndicator":return this.renderIndicator();default:return null}}))}renderGroup(t){const i=t.items.map((t=>"chat"===t.type?this.renderChatItem(t.item):"newItemIndicator"===t.type?this.renderIndicator():void 0)),r=e("a",{class:"date-heading"},t.heading);return"oldest-on-top"===this.order?e("section",{class:"date-group"},i,r):e("section",{class:"date-group"},r,i)}renderChatItem(t){return e("limebb-chat-item",{platform:this.platform,context:this.context,item:t,key:t.id})}renderIndicator(){return e("div",{class:"new-items-indicator"},e("hr",null),e("h3",null,this.translator.get("webclient.new")))}isBusy(){return this.loading||this.isTypingIndicatorVisible?"true":"false"}get dateTimeFormatter(){return this.platform.get(r.DateTimeFormatter)}get translator(){return this.platform.get(r.Translate)}static get watchers(){return{items:["handleItemsChange"]}}};s.style='@charset "UTF-8";:host(limebb-chat-list){--limel-top-edge-fade-height:0.75rem;isolation:isolate;--limel-overflow-mask-vertical:linear-gradient(\n      to bottom,\n      transparent 0%,\n      black calc(0% + var(--limel-top-edge-fade-height, 1rem)),\n      black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),\n      transparent 100%\n  );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);box-sizing:border-box;display:flex;gap:0.5rem;height:100%;width:100%;min-width:0;min-height:0;padding:var(--limel-top-edge-fade-height) 0.5rem;overflow:hidden auto}:host(limebb-chat-list.is-empty){padding:0}:host(limebb-chat-list[order=oldest-on-top]){flex-direction:column-reverse}:host(limebb-chat-list[order=newest-on-top]){flex-direction:column}*{box-sizing:border-box}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-group{isolation:isolate;display:flex;flex-direction:inherit;gap:0.5rem}.date-heading{position:sticky;z-index:1;top:0.25rem;display:flex;border-radius:9rem;padding:0.25rem 0.5rem;margin:0 auto;width:fit-content;font-size:0.75rem;line-height:1;color:rgb(var(--contrast-900));backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);transition:color 0.2s ease, border-color 0.4s ease}.date-heading:hover{color:rgb(var(--contrast-1000));border-color:rgb(var(--contrast-500))}.date-heading:hover:before{opacity:1}.date-heading:before{transition:opacity 0.2s ease;content:"";position:absolute;z-index:-1;inset:0;opacity:0.6;border-radius:inherit;background-color:rgb(var(--contrast-100))}.new-items-indicator{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;margin:0.25rem 0}.new-items-indicator hr{border:none;position:absolute;width:100%;height:1px;background-color:rgb(var(--color-red-lighter))}.new-items-indicator h3{z-index:1;padding:0 0.5rem;border-radius:1rem;margin:0 1rem;font-size:small;line-height:0.75rem;text-transform:lowercase;color:rgb(var(--color-red-default));background-color:rgb(var(--contrast-100))}.typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.1s;--limebb-chat-typing-opacity-transition-delay:0s;--limebb-chat-typing-grid-template-rows-transition-speed:0.3s;position:sticky;top:0;z-index:1;transition:grid-template-rows var(--limebb-chat-typing-grid-template-rows-transition-speed) ease;display:grid;grid-template-rows:0}.typing-indicator-height-animation div{transition:opacity var(--limebb-chat-typing-opacity-transition-speed) ease var(--limebb-chat-typing-opacity-transition-delay);overflow:hidden;opacity:0}:host(limebb-chat-list[is-typing-indicator-visible]) .typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.4s;--limebb-chat-typing-opacity-transition-delay:0.3s;--limebb-chat-typing-grid-template-rows-transition-speed:0.46s;grid-template-rows:1.5rem}:host(limebb-chat-list[is-typing-indicator-visible]) .typing-indicator-height-animation div{opacity:1}';export{s as limebb_chat_list}

package/dist/types/components/chat-list/chat-list.d.ts

@@ -9,6 +9,7 @@ import { ChatItem } from './chat-item/chat-item.types';
  * @exampleComponent limebb-example-chat-list-basic
  * @exampleComponent limebb-example-chat-list-others-are-typing
  * @exampleComponent limebb-example-chat-list-new-messages
+ * @exampleComponent limebb-example-chat-list-reverse-order
  * @beta
  */
 export declare class ChatList implements LimeWebComponent {
@@ -42,6 +43,20 @@ export declare class ChatList implements LimeWebComponent {
      * If there are no newer items, the divider line will not be displayed.
      */
     lastVisitedTimestamp?: string | Date | null;
+    /**
+     * - `newest-on-top` displays new messages at the top of the list;
+     * used if the chat input is located on top of the chat interface.
+     * - `oldest-on-top` displays new messages at the bottom of the list (default);
+     * used if the chat input is located at the bottom of the chat interface.
+     *
+     * :::important
+     * Using this prop will _not_ automatically sort the chat items for you!
+     * You still need to pass the items in the correct order (descending order by timestamp).
+     * This prop will only affect the direction of the elements in the user interface,
+     * such as the location of the typing indicator or the scrollbars.
+     * :::
+     */
+    order: 'newest-on-top' | 'oldest-on-top';
     private processedItems;
     protected handleItemsChange(): void;
     componentWillLoad(): void;

package/dist/types/components.d.ts

@@ -97,6 +97,7 @@ export namespace Components {
      * @exampleComponent limebb-example-chat-list-basic
      * @exampleComponent limebb-example-chat-list-others-are-typing
      * @exampleComponent limebb-example-chat-list-new-messages
+     * @exampleComponent limebb-example-chat-list-reverse-order
      * @beta 
      */
     interface LimebbChatList {
@@ -121,6 +122,10 @@ export namespace Components {
           * True if items have not finished loading.
          */
         "loading": boolean;
+        /**
+          * - `newest-on-top` displays new messages at the top of the list; used if the chat input is located on top of the chat interface. - `oldest-on-top` displays new messages at the bottom of the list (default); used if the chat input is located at the bottom of the chat interface.  :::important Using this prop will _not_ automatically sort the chat items for you! You still need to pass the items in the correct order (descending order by timestamp). This prop will only affect the direction of the elements in the user interface, such as the location of the typing indicator or the scrollbars. :::
+         */
+        "order": 'newest-on-top' | 'oldest-on-top';
         /**
           * Reference to the platform
           * @inheritdoc
@@ -1453,6 +1458,7 @@ declare global {
      * @exampleComponent limebb-example-chat-list-basic
      * @exampleComponent limebb-example-chat-list-others-are-typing
      * @exampleComponent limebb-example-chat-list-new-messages
+     * @exampleComponent limebb-example-chat-list-reverse-order
      * @beta 
      */
     interface HTMLLimebbChatListElement extends Components.LimebbChatList, HTMLStencilElement {
@@ -2355,6 +2361,7 @@ declare namespace LocalJSX {
      * @exampleComponent limebb-example-chat-list-basic
      * @exampleComponent limebb-example-chat-list-others-are-typing
      * @exampleComponent limebb-example-chat-list-new-messages
+     * @exampleComponent limebb-example-chat-list-reverse-order
      * @beta 
      */
     interface LimebbChatList {
@@ -2379,6 +2386,10 @@ declare namespace LocalJSX {
           * True if items have not finished loading.
          */
         "loading"?: boolean;
+        /**
+          * - `newest-on-top` displays new messages at the top of the list; used if the chat input is located on top of the chat interface. - `oldest-on-top` displays new messages at the bottom of the list (default); used if the chat input is located at the bottom of the chat interface.  :::important Using this prop will _not_ automatically sort the chat items for you! You still need to pass the items in the correct order (descending order by timestamp). This prop will only affect the direction of the elements in the user interface, such as the location of the typing indicator or the scrollbars. :::
+         */
+        "order"?: 'newest-on-top' | 'oldest-on-top';
         /**
           * Reference to the platform
           * @inheritdoc
@@ -3740,6 +3751,7 @@ declare module "@stencil/core" {
              * @exampleComponent limebb-example-chat-list-basic
              * @exampleComponent limebb-example-chat-list-others-are-typing
              * @exampleComponent limebb-example-chat-list-new-messages
+             * @exampleComponent limebb-example-chat-list-reverse-order
              * @beta 
              */
             "limebb-chat-list": LocalJSX.LimebbChatList & JSXBase.HTMLAttributes<HTMLLimebbChatListElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-crm-building-blocks",
-  "version": "1.70.1",
+  "version": "1.71.0",
   "description": "A home for shared components meant for use with Lime CRM",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/lime-crm-building-blocks/p-2b122433.entry.js

@@ -1 +0,0 @@
-import{r as e,h as t,H as i}from"./p-b11e09b4.js";import{P as r}from"./p-a26d352f.js";function a(e){return e.items.forEach((t=>{e.processedItems.push({type:"chat",item:t})})),e}function n(e){const t=[];let i=e.newItemIndicatorInserted;return e.processedItems.forEach((r=>{"chat"===r.type&&e.lastVisitedTimestamp&&!i&&new Date(r.item.timestamp)<=e.lastVisitedTimestamp&&e.hasUnseenNotifications&&(t.push({type:"newItemIndicator"}),i=!0),t.push(r)})),e.processedItems=t,e.newItemIndicatorInserted=i,e}function o(e){const t=[];let i=null,r=null;for(const a of e.processedItems)if("chat"===a.type){const n=new Date(a.item.timestamp),o=e.dateTimeFormatter.format(n,"date");o!==r&&(i&&t.push(i),i={type:"group",groupType:"dateGroup",heading:o,items:[]},r=o),i&&i.items.push(a)}else"newItemIndicator"===a.type&&(i?i.items.push(a):t.push(a));return i&&t.push(i),Object.assign(Object.assign({},e),{processedItems:t})}const s=class{constructor(t){e(this,t),this.items=[],this.processedItems=[]}handleItemsChange(){let e=null;var t,i,r,s;this.lastVisitedTimestamp&&(e="string"==typeof(s=this.lastVisitedTimestamp)?new Date(Date.parse(s)):new Date(s)),this.processedItems=(r={items:t=this.items,processedItems:[],lastVisitedTimestamp:i=e,dateTimeFormatter:this.dateTimeFormatter,newItemIndicatorInserted:!1,lastProcessedDate:null,hasUnseenNotifications:t.some((e=>i&&new Date(e.timestamp)>i))},[a,n,o].reduce(((e,t)=>t(e)),r)).processedItems}componentWillLoad(){this.handleItemsChange()}render(){return t(i,{key:"8d7895cdc128ff75f9e46b0545ab2605d3a8c1a8",class:{"is-empty":!this.items.length&&!this.isTypingIndicatorVisible},"aria-busy":this.isBusy(),"aria-live":"assertive"},this.renderSpinner(),t("div",{key:"c5e700c8bbf5ccf545c93cfd3058636afb56a329",class:"typing-indicator-height-animation"},t("div",{key:"4bfa4b69701035711ef5b0faede056a698ea70fd"},this.renderTypingIndicator())),this.renderChatItems())}renderSpinner(){if(this.loading)return t("limel-spinner",null)}renderTypingIndicator(){if(this.isTypingIndicatorVisible)return t("limebb-typing-indicator",null)}renderChatItems(){return this.processedItems.map((e=>{switch(e.type){case"group":return this.renderGroup(e);case"newItemIndicator":return this.renderIndicator();default:return null}}))}renderGroup(e){return t("section",{class:"date-group"},t("a",{class:"date-heading"},e.heading),e.items.map((e=>"chat"===e.type?this.renderChatItem(e.item):"newItemIndicator"===e.type?this.renderIndicator():void 0)))}renderChatItem(e){return t("limebb-chat-item",{platform:this.platform,context:this.context,item:e,key:e.id})}renderIndicator(){return t("div",{class:"new-items-indicator"},t("hr",null),t("h3",null,this.translator.get("webclient.new")))}isBusy(){return this.loading||this.isTypingIndicatorVisible?"true":"false"}get dateTimeFormatter(){return this.platform.get(r.DateTimeFormatter)}get translator(){return this.platform.get(r.Translate)}static get watchers(){return{items:["handleItemsChange"]}}};s.style='@charset "UTF-8";:host(limebb-chat-list){--limel-top-edge-fade-height:0.75rem;isolation:isolate;--limel-overflow-mask-vertical:linear-gradient(\n      to bottom,\n      transparent 0%,\n      black calc(0% + var(--limel-top-edge-fade-height, 1rem)),\n      black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),\n      transparent 100%\n  );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);box-sizing:border-box;display:flex;flex-direction:column;gap:0.5rem;height:100%;width:100%;min-width:0;min-height:0;padding:var(--limel-top-edge-fade-height) 0.5rem;overflow:hidden auto}:host(limebb-chat-list.is-empty){padding:0}*{box-sizing:border-box}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-group{isolation:isolate;display:flex;flex-direction:column;gap:0.5rem}.date-heading{position:sticky;z-index:1;top:0.25rem;display:flex;border-radius:9rem;padding:0.25rem 0.5rem;margin:0 auto;width:fit-content;font-size:0.75rem;line-height:1;color:rgb(var(--contrast-900));backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);transition:color 0.2s ease, border-color 0.4s ease}.date-heading:hover{color:rgb(var(--contrast-1000));border-color:rgb(var(--contrast-500))}.date-heading:hover:before{opacity:1}.date-heading:before{transition:opacity 0.2s ease;content:"";position:absolute;z-index:-1;inset:0;opacity:0.6;border-radius:inherit;background-color:rgb(var(--contrast-100))}.new-items-indicator{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;margin:0.25rem 0}.new-items-indicator hr{border:none;position:absolute;width:100%;height:1px;background-color:rgb(var(--color-red-lighter))}.new-items-indicator h3{z-index:1;padding:0 0.5rem;border-radius:1rem;margin:0 1rem;font-size:small;line-height:0.75rem;text-transform:lowercase;color:rgb(var(--color-red-default));background-color:rgb(var(--contrast-100))}.typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.1s;--limebb-chat-typing-opacity-transition-delay:0s;--limebb-chat-typing-grid-template-rows-transition-speed:0.3s;position:sticky;top:0;z-index:1;transition:grid-template-rows var(--limebb-chat-typing-grid-template-rows-transition-speed) ease;display:grid;grid-template-rows:0}.typing-indicator-height-animation div{transition:opacity var(--limebb-chat-typing-opacity-transition-speed) ease var(--limebb-chat-typing-opacity-transition-delay);overflow:hidden;opacity:0}:host(limebb-chat-list[are-others-typing]) .typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.4s;--limebb-chat-typing-opacity-transition-delay:0.3s;--limebb-chat-typing-grid-template-rows-transition-speed:0.46s;grid-template-rows:1.5rem}:host(limebb-chat-list[are-others-typing]) .typing-indicator-height-animation div{opacity:1}';export{s as limebb_chat_list}