@limetech/lime-crm-building-blocks 1.43.3 → 1.43.5

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+### [1.43.5](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.43.4...v1.43.5) (2024-09-11)
+
+
+### Reverts
+
+
+* Revert "feat(notification-list): add "load more" functionality" ([ff7e01d](https://github.com/Lundalogik/lime-crm-building-blocks/commit/ff7e01de6f9a1044c530a608429ad1a5285aee1f))
+
+### [1.43.4](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.43.3...v1.43.4) (2024-09-11)
+
+
+### Bug Fixes
+
+
+* **empty-state:** add `fade-in` animation ([2d482ef](https://github.com/Lundalogik/lime-crm-building-blocks/commit/2d482eff5d4a5edc1a7ebb453ad7512016ac22d1))
+
 ### [1.43.3](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.43.2...v1.43.3) (2024-09-05)
 
 

package/dist/cjs/{factory-93430f8d.js → factory-7974f06f.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-5aaf6970.js');
+const index = require('./index-fcfd461a.js');
 
 function isFunction(value) {
     return typeof value === 'function';

package/dist/cjs/{index-5aaf6970.js → index-fcfd461a.js}

@@ -1010,6 +1010,7 @@ const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propNam
 const setValue = (ref, propName, newVal, cmpMeta) => {
     // check our new property value against our internal value
     const hostRef = getHostRef(ref);
+    const elm = hostRef.$hostElement$ ;
     const oldVal = hostRef.$instanceValues$.get(propName);
     const flags = hostRef.$flags$;
     const instance = hostRef.$lazyInstance$ ;
@@ -1022,6 +1023,22 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
         // set our new value!
         hostRef.$instanceValues$.set(propName, newVal);
         if (instance) {
+            // get an array of method names of watch functions to call
+            if (cmpMeta.$watchers$ && flags & 128 /* HOST_FLAGS.isWatchReady */) {
+                const watchMethods = cmpMeta.$watchers$[propName];
+                if (watchMethods) {
+                    // this instance is watching for when this property changed
+                    watchMethods.map((watchMethodName) => {
+                        try {
+                            // fire off each of the watch methods that are watching this property
+                            instance[watchMethodName](newVal, oldVal, propName);
+                        }
+                        catch (e) {
+                            consoleError(e, elm);
+                        }
+                    });
+                }
+            }
             if ((flags & (2 /* HOST_FLAGS.hasRendered */ | 16 /* HOST_FLAGS.isQueuedForUpdate */)) === 2 /* HOST_FLAGS.hasRendered */) {
                 // looks like this value actually changed, so we've got work to do!
                 // but only if we've already rendered, otherwise just chill out
@@ -1044,6 +1061,9 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
  */
 const proxyComponent = (Cstr, cmpMeta, flags) => {
     if (cmpMeta.$members$) {
+        if (Cstr.watchers) {
+            cmpMeta.$watchers$ = Cstr.watchers;
+        }
         // It's better to have a const than two Object.entries()
         const members = Object.entries(cmpMeta.$members$);
         const prototype = Cstr.prototype;
@@ -1151,6 +1171,12 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
                 endLoad();
             }
             if (!Cstr.isProxied) {
+                // we've never proxied this Constructor before
+                // let's add the getters/setters to its prototype before
+                // the first time we create an instance of the implementation
+                {
+                    cmpMeta.$watchers$ = Cstr.watchers;
+                }
                 proxyComponent(Cstr, cmpMeta, 2 /* PROXY_FLAGS.proxyState */);
                 Cstr.isProxied = true;
             }
@@ -1174,6 +1200,9 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
             {
                 hostRef.$flags$ &= ~8 /* HOST_FLAGS.isConstructingInstance */;
             }
+            {
+                hostRef.$flags$ |= 128 /* HOST_FLAGS.isWatchReady */;
+            }
             endNewInstance();
         }
         if (Cstr.style) {
@@ -1280,6 +1309,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             {
                 cmpMeta.$attrsToReflect$ = [];
             }
+            {
+                cmpMeta.$watchers$ = {};
+            }
             const tagName = cmpMeta.$tagName$;
             const HostElement = class extends HTMLElement {
                 // StencilLazyHost

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

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-5aaf6970.js');
+const index = require('./index-fcfd461a.js');
 
 /*
  Stencil Client Patch Browser v2.18.1 | MIT Licensed | https://stenciljs.com
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["limebb-kanban.cjs",[[1,"limebb-kanban",{"platform":[16],"context":[16],"items":[16],"paginationSize":[2,"pagination-size"],"groupBy":[513,"group-by"],"groups":[16]}]]],["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-feed.cjs",[[1,"limebb-feed",{"platform":[16],"context":[16],"items":[16],"emptyStateMessage":[1,"empty-state-message"],"loading":[4],"minutesOfProximity":[2,"minutes-of-proximity"],"totalCount":[2,"total-count"],"lastVisitedTimestamp":[1,"last-visited-timestamp"]}]]],["limebb-notification-list.cjs",[[1,"limebb-notification-list",{"platform":[16],"context":[16],"items":[16],"loading":[4],"paginationSize":[2,"pagination-size"],"lastVisitedTimestamp":[1,"last-visited-timestamp"],"displayedItemCount":[32]}]]],["limebb-browser.cjs",[[17,"limebb-browser",{"platform":[16],"context":[16],"items":[16],"layout":[1],"filter":[32]}]]],["limebb-currency-picker.cjs",[[1,"limebb-currency-picker",{"label":[513],"platform":[16],"currencies":[16],"helperText":[513,"helper-text"],"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"value":[16]}]]],["limebb-dashboard-widget.cjs",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["limebb-empty-state.cjs",[[1,"limebb-empty-state",{"heading":[513],"value":[513],"icon":[16]}]]],["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":[1,"filter-id"],"disabled":[4],"icon":[1],"label":[1],"prefix":[1],"suffix":[1],"propertyName":[1,"property-name"],"aggregateOperator":[1,"aggregate-operator"],"filters":[32],"value":[32],"loading":[32],"error":[32]}]]],["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-navigation-button.cjs",[[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-column.cjs",[[1,"limebb-kanban-column",{"platform":[16],"context":[16],"columnHeading":[1,"column-heading"],"items":[16],"loading":[4],"paginationSize":[2,"pagination-size"],"displayedItemCount":[32]}]]],["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-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-notification-item.cjs",[[1,"limebb-notification-item",{"platform":[16],"context":[16],"item":[16]}]]]], options);
+  return index.bootstrapLazy([["limebb-kanban.cjs",[[1,"limebb-kanban",{"platform":[16],"context":[16],"items":[16],"paginationSize":[2,"pagination-size"],"groupBy":[513,"group-by"],"groups":[16]}]]],["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-feed.cjs",[[1,"limebb-feed",{"platform":[16],"context":[16],"items":[16],"emptyStateMessage":[1,"empty-state-message"],"loading":[4],"minutesOfProximity":[2,"minutes-of-proximity"],"totalCount":[2,"total-count"],"lastVisitedTimestamp":[1,"last-visited-timestamp"]}]]],["limebb-notification-list.cjs",[[1,"limebb-notification-list",{"platform":[16],"context":[16],"items":[16],"loading":[4],"lastVisitedTimestamp":[1,"last-visited-timestamp"]}]]],["limebb-browser.cjs",[[17,"limebb-browser",{"platform":[16],"context":[16],"items":[16],"layout":[1],"filter":[32]}]]],["limebb-currency-picker.cjs",[[1,"limebb-currency-picker",{"label":[513],"platform":[16],"currencies":[16],"helperText":[513,"helper-text"],"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"value":[16]}]]],["limebb-dashboard-widget.cjs",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["limebb-empty-state.cjs",[[1,"limebb-empty-state",{"heading":[513],"value":[513],"icon":[16]}]]],["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":[1,"filter-id"],"disabled":[4],"icon":[1],"label":[1],"prefix":[1],"suffix":[1],"propertyName":[1,"property-name"],"aggregateOperator":[1,"aggregate-operator"],"filters":[32],"value":[32],"loading":[32],"error":[32]}]]],["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-navigation-button.cjs",[[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-column.cjs",[[1,"limebb-kanban-column",{"platform":[16],"context":[16],"columnHeading":[1,"column-heading"],"items":[16],"loading":[4],"paginationSize":[2,"pagination-size"],"displayedItemCount":[32]}]]],["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-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-notification-item.cjs",[[1,"limebb-notification-item",{"platform":[16],"context":[16],"item":[16]}]]]], options);
 });

package/dist/cjs/limebb-browser.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5aaf6970.js');
+const index = require('./index-fcfd461a.js');
 const types = require('./types-c7646c23.js');
 const negate = require('./negate-14a67e26.js');
 

package/dist/cjs/limebb-currency-picker.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5aaf6970.js');
+const index = require('./index-fcfd461a.js');
 const types = require('./types-c7646c23.js');
 
 const nordicMarketCurrencies = [

package/dist/cjs/limebb-dashboard-widget.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5aaf6970.js');
+const index = require('./index-fcfd461a.js');
 
 const dashboardWidgetCss = ":host(limebb-dashboard-widget){--dashboard-widget-background-color:var(\n      --start-page-grid-widget-background-color,\n      rgb(var(--contrast-100))\n  );--header-icon-color:var(--dashboard-widget-icon-color);--header-background-color:var(\n      --dashboard-widget-header-background-color,\n      var(--start-page-grid-widget-header-color)\n  );--dashboard-widget-border-radius:var(\n      --start-page-grid-widget-border-radius,\n      1rem\n  );--header-top-right-left-border-radius:0;display:flex;flex-direction:column;border-radius:var(--dashboard-widget-border-radius);background-color:var(--dashboard-widget-background-color);height:100%;width:100%;overflow:hidden}";
 

package/dist/cjs/limebb-date-picker.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5aaf6970.js');
+const index = require('./index-fcfd461a.js');
 const types = require('./types-c7646c23.js');
 
 /**

package/dist/cjs/limebb-date-range.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5aaf6970.js');
+const index = require('./index-fcfd461a.js');
 
 const dateRangeCss = ":host(limebb-date-range){isolation:isolate;display:block;position:relative}*{box-sizing:border-box}.date-pickers{display:grid;grid-template-columns:repeat(auto-fit, minmax(13.5rem, 1fr));gap:0.5rem;padding:0.75rem 1rem 1.25rem 1rem}.label-group{display:flex;align-items:center;margin-bottom:0.25rem}.end-time .label-group{flex-direction:row-reverse}.label-group .label{font-size:0.75rem;padding:0 0.25rem}.label-group .circle{flex-shrink:0;width:0.5rem;height:0.5rem;border-radius:50%}.start-time .label-group .circle{background-color:rgb(var(--color-green-default))}.end-time .label-group .circle{background-color:rgb(var(--color-coral-default))}.label-group .line{flex-grow:1;height:0.25rem;border-radius:1rem}.start-time .label-group .line{background-image:linear-gradient(to right, rgb(var(--color-green-light)), rgb(var(--contrast-400)) 30%)}.end-time .label-group .line{background-image:linear-gradient(to left, rgb(var(--color-coral-light)), rgb(var(--contrast-400)) 30%)}.date-pickers:has(>:last-child:nth-child(2)) .start-time .line{margin-right:-0.5rem}.date-pickers:has(>:last-child:nth-child(2)) .end-time .line{margin-left:-0.5rem}";
 

package/dist/cjs/limebb-empty-state.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5aaf6970.js');
+const index = require('./index-fcfd461a.js');
 
-const emptyStateCss = ":host(limebb-empty-state){display:flex;flex-direction:column;align-items:center;gap:0.25rem;padding:0.5rem}*{box-sizing:border-box}h2{color:rgb(var(--contrast-1100));margin:0}limel-markdown{color:rgb(var(--contrast-1000));text-align:center;line-height:1.4}limel-icon{width:2.5rem}";
+const emptyStateCss = ":host(limebb-empty-state){display:flex;flex-direction:column;align-items:center;gap:0.25rem;padding:0.5rem;opacity:0;animation:fade-in 0.3s ease forwards;animation-delay:0.5s}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}*{box-sizing:border-box}h2{color:rgb(var(--contrast-1100));margin:0}limel-markdown{color:rgb(var(--contrast-1000));text-align:center;line-height:1.4}limel-icon{width:2.5rem}";
 
 const EmptyState = class {
   constructor(hostRef) {

package/dist/cjs/limebb-feed-timeline-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5aaf6970.js');
+const index = require('./index-fcfd461a.js');
 const types = require('./types-c7646c23.js');
 
 const feedTimelineItemCss = "@charset \"UTF-8\";*{box-sizing:border-box}:host(limebb-feed-timeline-item){--limebb-feed-item-paddings:0.75rem;display:flex;gap:0.75rem;position:relative;isolation:isolate}:host(limebb-feed-timeline-item:hover) .timestamp{color:rgb(var(--contrast-1100))}:host(limebb-feed-timeline-item[is-bundled]:hover){--limebb-feed-item-timestamp-opacity-delay:0.5s}:host(limebb-feed-timeline-item[is-bundled]:hover) .timestamp{opacity:1}:host(limebb-feed-timeline-item[is-bundled]) .timestamp{opacity:0}.left:before{content:\"\";position:absolute;z-index:0;top:-0.25rem;bottom:-0.25rem;left:1rem;width:1px;background-color:rgb(var(--contrast-600));z-index:-1}.info{position:sticky;top:0.5rem;display:flex;flex-direction:column;align-items:center;gap:0.25rem}.right,.content{display:flex;flex-direction:column;flex-grow:1;min-width:0}.content{border-radius:1rem;gap:0.25rem;padding:var(--limebb-feed-item-paddings)}.header{position:relative;display:flex;gap:0.25rem;padding-bottom:0.25rem;margin-top:-0.25rem;color:rgb(var(--contrast-900));font-size:0.875rem}:host(.has-unpromoted-actions) .header{padding-right:2rem}.header limel-markdown{--markdown-hyperlink-color:var(--mdc-theme-primary);--markdown-hyperlink-color--hovered:rgb(var(--color-teal-light))}.heading{flex-grow:1;overflow:hidden;white-space:nowrap}.heading.expanded-heading{white-space:normal}button.expand-heading{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:rgb(var(--color-blue-default));background-color:transparent;border-radius:1rem;padding:0 0.25rem 0.25rem 0.25rem;height:1rem;white-space:nowrap}button.expand-heading:hover{color:rgb(var(--color-blue-default));background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button.expand-heading:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}button.collapse-heading{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal);flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:1.5rem;width:1rem}button.collapse-heading:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button.collapse-heading:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}button.collapse-heading:focus{outline:none}button.collapse-heading:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button.collapse-heading limel-icon{width:0.75rem}.unpromoted-actions-menu{position:absolute;top:0;right:0;z-index:1}.timestamp{transition:color 0.4s ease, opacity 0.2s ease;transition-delay:var(--limebb-feed-item-timestamp-opacity-delay, 0s);font-size:0.75rem;text-align:center;color:rgb(var(--contrast-800));background-color:var(--limebb-feed-background-color);padding:0.125rem 0;width:2rem}.icon{--icon-background-color:var(--limebb-feed-background-color);width:2rem;padding:0.125rem}:host(.has-author-picture) .icon{width:1.5rem}img{border-radius:50%;width:2rem;height:2rem;object-fit:cover;box-shadow:0 0 0 1px rgb(var(--contrast-600))}.author{font-weight:bold;text-decoration:none;white-space:nowrap}a.author{position:relative;cursor:pointer;transition:color 0.2s ease;color:var(--mdc-theme-primary)}a.author:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:\"\";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a.author:hover{color:rgb(var(--color-teal-light))}a.author:hover:before{opacity:0.3;transform:scale(1)}limel-chip-set{--button-shadow-normal:none;margin-left:-1rem;margin-bottom:-0.5rem}limel-action-bar{--action-bar-item-height:1.75rem;transition:opacity 0.2s ease;justify-content:flex-start;opacity:0.8}.action-bar{display:grid;transition:grid-template-rows var(--limebb-feed-item-action-bar-grid-template-rows-transition-speed, 0.2s) cubic-bezier(1, 0.09, 0, 0.89) var(--limebb-feed-item-action-bar-grid-template-rows-transition-delay, 0s);grid-template-rows:var(--limebb-feed-item-action-bar-grid-template-rows, 1fr)}.action-bar-hider{overflow:hidden}limel-action-bar{transition:padding var(--limebb-feed-item-action-bar-grid-template-rows-transition-speed) cubic-bezier(1, 0.09, 0, 0.89) var(--limebb-feed-item-action-bar-grid-template-rows-transition-delay);padding-bottom:0.5rem}:host(limebb-feed-timeline-item:hover) .action-bar,:host(limebb-feed-timeline-item:focus-within) .action-bar,:host(limebb-feed-timeline-item:focus-visible) .action-bar{--limebb-feed-item-action-bar-grid-template-rows:1fr;will-change:grid-template-rows}:host(limebb-feed-timeline-item:hover) limel-action-bar,:host(limebb-feed-timeline-item:focus-within) limel-action-bar,:host(limebb-feed-timeline-item:focus-visible) limel-action-bar{will-change:opacity;opacity:1}:host(limebb-feed-timeline-item:hover){--limebb-feed-item-action-bar-grid-template-rows-transition-speed:0.46s;--limebb-feed-item-action-bar-grid-template-rows-transition-delay:0.5s}:host(limebb-feed-timeline-item.is-tall) .markdown-container{margin-bottom:0.5rem}:host(limebb-feed-timeline-item.is-tall) .body-text{--body-text-min-height-set-by-code:10rem;min-height:calc(var(--body-text-min-height-set-by-code) + 0.25rem)}:host(limebb-feed-timeline-item.is-tall) .body-text:after{transition:opacity 0.6s ease;content:\"\";opacity:0.26;pointer-events:none;position:absolute;bottom:-0.125rem;right:-0.125rem;left:-0.125rem;height:2.5rem;background:radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)) 0 100%, linear-gradient(to bottom, rgb(var(--limebb-feed-item-background-color), 0) 0%, rgb(var(--limebb-feed-item-background-color), 90%) 100%);background-repeat:no-repeat;background-size:100% 0.5rem, 100% 100%}:host(limebb-feed-timeline-item.is-tall.shows-less) .markdown-container{grid-template-rows:0fr}:host(limebb-feed-timeline-item.is-tall.shows-less) .body-text:after{opacity:1}:host(limebb-feed-timeline-item.is-tall.shows-more) .markdown-container{grid-template-rows:1fr}:host(limebb-feed-timeline-item.is-tall.shows-more) #show-more-button limel-icon{rotate:180deg}.markdown-container{position:relative;display:grid}.markdown-container:not(.opened){transition:grid-template-rows min(var(--body-text-height) * 1.2ms, 500ms) cubic-bezier(1, 0.09, 0, 0.89)}.body-text{display:block;overflow:hidden}#show-more-button{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal);z-index:1;position:absolute;right:0;bottom:-0.6rem;left:0;margin:0 auto;display:flex;align-items:center;justify-content:center;border-radius:3rem;width:2rem;height:1rem}#show-more-button:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}#show-more-button:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}#show-more-button:focus{outline:none}#show-more-button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}#show-more-button limel-icon{transition:rotate 0.2s ease 0.5s;color:var(--mdc-theme-primary);width:0.75rem}:host(limebb-feed-timeline-item[ui=standard]) .content{background-color:rgb(var(--limebb-feed-item-background-color))}:host(limebb-feed-timeline-item[ui=emphasized]) .content{border:1px dashed rgb(var(--contrast-800))}:host(limebb-feed-timeline-item[ui=minimal]) limel-markdown{--markdown-hyperlink-color:rgb(var(--contrast-900))}:host(limebb-feed-timeline-item[ui=minimal]) limel-markdown:hover{--markdown-hyperlink-color:rgb(var(--color-blue-default))}:host(limebb-feed-timeline-item[ui=minimal]) a.author{color:rgb(var(--contrast-900))}:host(limebb-feed-timeline-item[ui=minimal]) .header:hover a.author{color:rgb(var(--color-blue-default))}:host(limebb-feed-timeline-item[ui=minimal]) .icon{color:rgb(var(--contrast-900)) !important}:host(limebb-feed-timeline-item[ui=minimal]) .body-text{color:rgb(var(--contrast-900))}:host(limebb-feed-timeline-item[ui=minimal]) .body-text:hover{color:rgb(var(--contrast-1100))}:host(limebb-feed-timeline-item[ui=thread-message]){margin-bottom:0.25rem}:host(limebb-feed-timeline-item[ui=thread-message]) .content{border-radius:0;box-shadow:var(--button-shadow-normal);margin-bottom:0.25rem;background-color:var(--lime-elevated-surface-background-color)}:host(limebb-feed-timeline-item[ui=thread-message]) .header{padding-bottom:0.75rem;margin-bottom:0.25rem}:host(limebb-feed-timeline-item[ui=thread-message]) .header:before{content:\"\";position:absolute;top:calc(var(--limebb-feed-item-paddings) * -1 + 0.25rem);left:calc(var(--limebb-feed-item-paddings) * -1);right:calc(var(--limebb-feed-item-paddings) * -1);bottom:0;pointer-events:none;border-bottom:1px dashed rgb(var(--contrast-600))}:host(limebb-feed-timeline-item[ui=thread-message]) .thread-effects{transition:transform 0.2s ease;pointer-events:none;content:\"\";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;box-shadow:var(--button-shadow-normal);transform:translate3d(-0.225rem, -0.125rem, 0) rotate(1.5deg);background-color:rgb(var(--contrast-300))}:host(limebb-feed-timeline-item[ui=thread-message]) .content:hover .thread-effects{transform:translate3d(-0.325rem, -0.3rem, 0) rotate(1.5deg)}:host(limebb-feed-timeline-item.is-tall[ui=thread-message]) .body-text{--body-text-min-height-set-by-code:3rem;min-height:calc(var(--body-text-min-height-set-by-code) + 0.25rem)}.content{position:relative}.content:before,.content:after{content:\"\";position:absolute;top:1rem;bottom:1rem;left:-0.125rem;width:0.25rem;border-radius:0.25rem}.content:before{background-color:var(--color-code)}:host(limebb-feed-timeline-item[ui=emphasized]) .content:before,:host(limebb-feed-timeline-item[ui=emphasized]) .content:after{left:calc(-0.125rem - 0.5px)}:host(limebb-feed-timeline-item[ui=minimal]) .content:before{opacity:0.25}:host(limebb-feed-timeline-item[ui=minimal]) .content:after{opacity:0.5;background:repeating-linear-gradient(45deg, var(--color-code), var(--color-code) 0.5rem, transparent 0.5rem, transparent 1rem);background-size:0.25rem 100%;background-repeat:repeat-y;background-position:left;rotate:180deg}:host(limebb-feed-timeline-item[ui=thread-message]) .content:before{top:0.25rem;bottom:unset;height:1.75rem}";

package/dist/cjs/limebb-feed.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5aaf6970.js');
+const index = require('./index-fcfd461a.js');
 const types = require('./types-c7646c23.js');
 
 function getRoundingMethod(method) {

package/dist/cjs/limebb-icon-picker.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5aaf6970.js');
+const index = require('./index-fcfd461a.js');
 
 const icons = [
 	{

package/dist/cjs/limebb-info-tile.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5aaf6970.js');
+const index = require('./index-fcfd461a.js');
 const types = require('./types-c7646c23.js');
-const factory = require('./factory-93430f8d.js');
+const factory = require('./factory-7974f06f.js');
 const _getTag = require('./_getTag-ef492822.js');
 
 /**

package/dist/cjs/limebb-kanban-column.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5aaf6970.js');
+const index = require('./index-fcfd461a.js');
 const types = require('./types-c7646c23.js');
 
 const kanbanColumnCss = ":host(limebb-kanban-column){--header-top-right-left-border-radius:0.5rem;scroll-snap-align:start;box-sizing:border-box;display:flex;flex-direction:column;border-radius:0.5rem;min-width:20rem;height:100%;background-color:rgb(var(--contrast-500))}:host(limebb-kanban-column.ungrouped-column){border:1px dashed rgb(var(--contrast-500));background-color:rgb(var(--contrast-200))}limel-header{flex-shrink:0}.items{flex-grow:1;display:flex;flex-direction:column;gap:0.5rem;padding:0.5rem;overflow-y:auto;-webkit-overflow-scrolling:touch}";

package/dist/cjs/limebb-kanban-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5aaf6970.js');
+const index = require('./index-fcfd461a.js');
 
 const kanbanItemCss = ":host(limebb-kanban-item){box-sizing:border-box;display:flex;padding:0.5rem;border-radius:0.5rem;background-color:var(--lime-elevated-surface-background-color)}.icon{width:1.25rem}";
 

package/dist/cjs/limebb-kanban.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5aaf6970.js');
+const index = require('./index-fcfd461a.js');
 
 const kanbanCss = ":host(limebb-kanban){--limebb-kanban-col-gap:1rem;box-sizing:border-box;display:flex;align-items:stretch;column-gap:var(--limebb-kanban-col-gap);width:100%;height:100%;padding:0.5rem;padding-right:calc(var(--kanban-padding-right, 0rem) + 5rem);overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scroll-padding:calc(var(--limebb-kanban-col-gap) + 0.5rem)}";
 

package/dist/cjs/limebb-limeobject-file-viewer.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5aaf6970.js');
+const index = require('./index-fcfd461a.js');
 const types = require('./types-c7646c23.js');
-const factory = require('./factory-93430f8d.js');
+const factory = require('./factory-7974f06f.js');
 const negate = require('./negate-14a67e26.js');
 
 /**

package/dist/cjs/limebb-locale-picker.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5aaf6970.js');
+const index = require('./index-fcfd461a.js');
 const types = require('./types-c7646c23.js');
 const _getTag = require('./_getTag-ef492822.js');
 

package/dist/cjs/limebb-navigation-button.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5aaf6970.js');
+const index = require('./index-fcfd461a.js');
 
 const navigationButtonCss = "@charset \"UTF-8\";.navigation-button{all:unset;isolation:isolate;position:relative;display:flex;justify-content:center;align-items:center;height:1.875rem;width:1.875rem;border-radius:50%;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--navigation-button-background-color, var(--lime-elevated-surface-background-color))}.navigation-button:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.navigation-button:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.navigation-button:focus{outline:none}.navigation-button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.navigation-button limel-icon{transition:color 0.2s ease, transform 0.2s cubic-bezier(0.84, 0.15, 0.52, 1.42);color:var(--header-menu-icon-color);width:1.25rem}.newTab limel-icon{transition:transform 0.2s ease;transform:scale(0.8);z-index:3}.newTab:before{z-index:2}.newTab::after{z-index:1}.newTab:before,.newTab:after{content:\"\";transition:transform 0.2s ease, border-color 0.2s ease;position:absolute;width:0.875rem;height:0.875rem;border:1px solid rgb(var(--contrast-900));background-color:var(--navigation-button-background-color, rgb(var(--contrast-100)))}.newTab:hover limel-icon{color:var(--mdc-theme-primary);transform:translate3d(-0.1rem, 0.1rem, 0) scale(1)}.newTab:hover:before{transform:translate3d(0.125rem, -0.125rem, 0);border-color:rgb(var(--contrast-1000));box-shadow:var(--shadow-depth-8)}.newTab:hover:after{transform:translate3d(-0.15rem, 0.15rem, 0) scale(0.9);border-color:rgb(var(--contrast-700))}.expand:after{transition:transform 0.2s ease;content:\"\";position:absolute;z-index:1;background-color:var(--navigation-button-background-color, rgb(var(--contrast-100)));width:0.75rem;height:0.75rem}.expand:hover limel-icon{color:var(--mdc-theme-primary)}.expand:hover:after{transform:scale(0.5)}.expand:hover limel-icon{transform:scale(1.18)}.minimize:before,.minimize:after,.maximize:before,.maximize:after{content:\"\";transition:transform 0.3s ease-out 0.15s, background-color 0.1s ease}.minimize limel-icon,.maximize limel-icon{transition:transform 0.2s ease 0.1s}.minimize:before,.maximize:after,.maximize:hover:before{transform:scaleY(1) scaleX(1);z-index:-1;box-sizing:border-box;position:absolute;width:70%;height:60%;border-radius:0.25rem;transform-origin:bottom}.minimize:hover:before,.maximize:before{transition:transform 0.3s ease-out 0.15s, background-color 0.1s ease;transform:scaleY(0.3) scaleX(0.7);background-color:rgb(var(--contrast-500))}.minimize:hover limel-icon,.maximize limel-icon{transform:scaleX(0.8) translate3d(0, 0.4rem, 0)}.maximize limel-icon{color:rgb(var(--contrast-900))}.maximize:hover limel-icon{color:currentColor;transform:scaleX(1.1) translate3d(0, -0.1rem, 0)}.maximize:after{z-index:-2;border:1px dashed rgb(var(--contrast-800))}.close limel-icon{transition:transform 0.2s ease, color 0.2s ease}.close:before,.close:after{transition-delay:0.1s;content:\"\";position:absolute;inset:0;border-radius:50%;opacity:0}.close:before{transition:transform 0.3s ease, opacity 0.3s ease;background-color:rgb(var(--color-orange-dark))}.close:after{transition:transform 0.6s ease, opacity 0.6s ease;background-color:rgb(var(--color-orange-light))}.close:hover limel-icon{color:rgb(var(--color-white));transform:scale(0.7) rotate(90deg)}.close:hover:before{opacity:1;transform:scale(0.4)}.close:hover:after{opacity:0.4;transform:scale(0.6)}.float:after{transition:width 0.2s ease-out, opacity 0.2s ease;content:\"\";position:absolute;inset:0 0.5rem 0 auto;border-radius:1px;opacity:0.8;transform:translate3d(0, 0, 0);background-color:rgb(var(--contrast-800));width:0.125rem;height:0.6rem;margin:auto}.float:hover:after{width:0.4rem;opacity:1;transform:translate3d(0, 0, 0)}";
 

package/dist/cjs/limebb-notification-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5aaf6970.js');
+const index = require('./index-fcfd461a.js');
 const types = require('./types-c7646c23.js');
 
 const notificationItemCss = "@charset \"UTF-8\";*{box-sizing:border-box}:host(limebb-notification-item){isolation:isolate;padding:0 0.5rem}.notification-item{position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:0.25rem;border-radius:0.75rem;border:1px solid transparent}.notification-item:before{content:\"\";display:block;position:absolute;left:-1rem;top:0.85rem;border-radius:50%;height:0.5rem;width:0.5rem;transition:background-color 0.2s ease;background-color:var(--limebb-notification-item-unread-badge-color, transparent)}:host(limebb-notification-item.is-clickable) .notification-item{transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:transparent}:host(limebb-notification-item.is-clickable) .notification-item:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}:host(limebb-notification-item.is-clickable) .notification-item:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}:host(limebb-notification-item.is-read) .notification-item{--limebb-notification-header-border-color:rgb(var(--contrast-400));border-color:rgb(var(--contrast-400))}:host(limebb-notification-item.is-read.is-clickable) .notification-item:hover{border-color:transparent}:host(limebb-notification-item:not(.is-read)) .notification-item{--limebb-notification-header-border-color:rgb(var(--contrast-500));--limebb-notification-item-unread-badge-color:rgb(\n      var(--color-red-default)\n  );background-color:rgb(var(--contrast-300))}:host(limebb-notification-item:hover) .timestamp{color:rgb(var(--contrast-1100))}:host(limebb-notification-item:hover) .body-text{opacity:1}.header{display:flex;align-items:center;gap:0.25rem;min-height:2rem;padding:0 0 0 0.25rem;margin-bottom:0.25rem;border-bottom:1px solid var(--limebb-notification-header-border-color)}.header:not(:has(.icon)){padding-left:0.75rem}.header:not(:has(.unpromoted-actions-menu)){padding-right:0.5rem}.caption,.timestamp{font-size:0.75rem}.caption{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;flex-grow:1;font-weight:600;color:rgb(var(--contrast-900))}.timestamp{flex-shrink:0;margin-left:auto;transition:color 0.4s ease, opacity 0.2s ease;color:rgb(var(--contrast-800))}.headline{display:flex;gap:0.25rem;align-items:center}.content{display:flex;min-width:0;gap:0.5rem;padding:0 0.75rem 0.5rem 0.75rem}.heading{font-size:0.875rem;--markdown-hyperlink-color:var(--mdc-theme-primary);--markdown-hyperlink-color--hovered:rgb(var(--color-teal-light))}.body{display:flex;flex-direction:column;gap:0.5rem}.body-text{transition:opacity 0.2s ease;opacity:0.7;display:flex;gap:0.25rem}.icon{--icon-background-color:var(--limebb-feed-background-color);flex-shrink:0;width:1.5rem;padding:0.125rem}.author-avatar{border-radius:50%;width:2rem;height:2rem;object-fit:cover;margin-top:auto;margin-right:-0.25rem;margin-left:auto;box-shadow:0 0 0 1px rgb(var(--contrast-600))}.author{font-weight:bold;text-decoration:none;white-space:nowrap}a.author{position:relative;cursor:pointer;transition:color 0.2s ease;color:var(--mdc-theme-primary)}a.author:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:\"\";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a.author:hover{color:rgb(var(--color-teal-light))}a.author:hover:before{opacity:0.3;transform:scale(1)}limel-chip-set{--button-shadow-normal:none;margin-left:-1rem;margin-bottom:-0.5rem}";
@@ -135,7 +135,6 @@ const NotificationListItem = class {
     var _a;
     return (_a = this.platform) === null || _a === void 0 ? void 0 : _a.get(types.PlatformServiceName.CommandBus);
   }
-  get el() { return index.getElement(this); }
 };
 NotificationListItem.style = notificationItemCss;
 

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

@@ -2,44 +2,134 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5aaf6970.js');
+const index = require('./index-fcfd461a.js');
 const types = require('./types-c7646c23.js');
 
+/**
+ * Processes a list of notifications by adding date headers and a "new items" indicator.
+ *
+ * @param {NotificationItem[]} items - The list of notification items to process. These items must be pre-sorted by their `timestamp` in descending order.
+ * @param {DateTimeFormatter} dateTimeFormatter - A service used to format dates for the date headers.
+ * @param {Date | null} lastVisitedTimestamp - The timestamp of the user's last visit. This is used to determine where the "new items" indicator should be placed.
+ *
+ * @returns {ProcessedItem[]} An array of processed items, including notifications, date headers, and a "new items" indicator if applicable.
+ *
+ * @example
+ * const processedItems = processNotificationItems(
+ *     notifications,
+ *     dateTimeFormatter,
+ *     new Date('2024-09-01T10:00:00Z')
+ * );
+ *
+ * // Output: [
+ * //   { type: 'dateHeader', date: '2024-09-01' },
+ * //   { type: 'notification', item: notification1 },
+ * //   { type: 'notification', item: notification2 },
+ * //   { type: 'newItemIndicator' },
+ * //   { type: 'dateHeader', date: '2024-08-31' },
+ * //   { type: 'notification', item: notification3 },
+ * // ]
+ */
+function processNotificationItems(items, dateTimeFormatter, lastVisitedTimestamp) {
+  const initialContext = {
+    items: items,
+    processedItems: [],
+    lastVisitedTimestamp: lastVisitedTimestamp,
+    dateTimeFormatter: dateTimeFormatter,
+    newItemIndicatorInserted: false,
+    lastProcessedDate: null,
+    hasUnseenNotifications: items.some((item) => lastVisitedTimestamp &&
+      new Date(item.timestamp) > lastVisitedTimestamp),
+  };
+  // Add processors here, in the order they should be executed
+  const processors = [
+    insertNotifications,
+    insertNewItemIndicator,
+    insertDateHeaders,
+  ];
+  const finalContext = createPipeline(initialContext, processors);
+  return finalContext.processedItems;
+}
+function createPipeline(initialContext, processors) {
+  return processors.reduce((context, processor) => processor(context), initialContext);
+}
+function insertNotifications(context) {
+  context.items.forEach((item) => {
+    context.processedItems.push({ type: 'notification', item: item });
+  });
+  return context;
+}
+function insertDateHeaders(context) {
+  const processedWithHeaders = [];
+  let lastProcessedDate = null;
+  context.processedItems.forEach((item) => {
+    if (item.type === 'notification') {
+      const currentTimestamp = new Date(item.item.timestamp);
+      const currentDate = context.dateTimeFormatter.format(currentTimestamp, 'date');
+      // Insert a date header if it's a new date
+      if (currentDate !== lastProcessedDate) {
+        processedWithHeaders.push({
+          type: 'dateHeader',
+          date: currentDate,
+        });
+        lastProcessedDate = currentDate;
+      }
+    }
+    // Always push the original item (whether it's a notification or something else)
+    processedWithHeaders.push(item);
+  });
+  context.processedItems = processedWithHeaders;
+  return context;
+}
+function insertNewItemIndicator(context) {
+  const processedWithIndicator = [];
+  let newItemIndicatorInserted = context.newItemIndicatorInserted;
+  context.processedItems.forEach((item) => {
+    if (item.type === 'notification' &&
+      context.lastVisitedTimestamp &&
+      !newItemIndicatorInserted &&
+      new Date(item.item.timestamp) <= context.lastVisitedTimestamp &&
+      context.hasUnseenNotifications) {
+      // Insert the new item indicator before the first old notification
+      processedWithIndicator.push({ type: 'newItemIndicator' });
+      newItemIndicatorInserted = true;
+    }
+    // Push the current item to the new array
+    processedWithIndicator.push(item);
+  });
+  context.processedItems = processedWithIndicator;
+  context.newItemIndicatorInserted = newItemIndicatorInserted;
+  return context;
+}
+
 const notificationListCss = ":host(limebb-notification-list){--limebb-notification-list-background-color:var(\n      --feed-background-color,\n      rgb(var(--contrast-100))\n  );--limebb-notification-list-item-background-color:var(--contrast-300);display:flex;flex-direction:column;gap:0.5rem;max-width:45rem;background-color:var(--limebb-notification-list-background-color);padding-left:1rem}.empty-state{text-align:center}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-heading{font-size:0.75rem;margin:0.5rem 0 0 0;color:rgb(var(--contrast-800))}.load-more-button{margin-top:0.5rem;margin-left:0.5rem}.new-items-indicator{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-end}.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.5rem 1rem;font-size:small;text-transform:lowercase;color:rgb(var(--color-red-default));background-color:var(--limebb-notification-list-background-color)}.new-items-indicator+.date-heading{margin-top:-0.5rem}";
 
 const NotificationList = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.loadMore = index.createEvent(this, "loadMore", 7);
     this.itemClick = index.createEvent(this, "itemClick", 7);
     /**
      * List of items to display in the feed.
+     * These items must be sorted by their `timestamp` in descending order.
      */
     this.items = [];
-    /**
-     * The number of items rendered in notification list,
-     * before pressing the "Load more" button.
-     */
-    this.paginationSize = 50;
-    this.displayedItemCount = 0;
+    this.processedItems = [];
     this.handleItemClick = (event) => {
       this.itemClick.emit(event.detail);
     };
-    this.handleLoadMore = (event) => {
-      event.stopPropagation();
-      this.displayedItemCount += this.paginationSize;
-      this.loadMore.emit();
-    };
+  }
+  handleItemsChange() {
+    let lastVisited = null;
+    if (this.lastVisitedTimestamp) {
+      lastVisited = parseToUTCDate(this.lastVisitedTimestamp);
+    }
+    this.processedItems = processNotificationItems(this.items, this.dateTimeFormatter, lastVisited);
   }
   componentWillLoad() {
-    this.displayedItemCount = this.paginationSize;
+    this.handleItemsChange();
   }
   render() {
-    return [
-      this.renderSpinner(),
-      this.renderNotificationItems(),
-      this.renderLoadMore(),
-    ];
+    return [this.renderSpinner(), this.renderNotificationItems()];
   }
   renderSpinner() {
     if (this.loading) {
@@ -47,65 +137,44 @@ const NotificationList = class {
     }
   }
   renderNotificationItems() {
-    return this.items
-      .slice(0, this.displayedItemCount)
-      .map((item, index$1) => {
-      return [
-        this.renderDateHeader(item.timestamp, index$1),
-        index.h("limebb-notification-item", { platform: this.platform, context: this.context, item: item, key: item.id, onInteract: this.handleItemClick }),
-        this.renderNewItemsIndicator(item.timestamp, index$1),
-      ];
+    return this.processedItems.map((item) => {
+      switch (item.type) {
+        case 'dateHeader':
+          return this.renderDateHeader(item.date);
+        case 'newItemIndicator':
+          return this.renderIndicator();
+        case 'notification':
+          return this.renderNotificationItem(item.item);
+        default:
+          return null;
+      }
     });
   }
-  renderNewItemsIndicator(timestamp, index) {
-    if (!this.lastVisitedTimestamp) {
-      return;
-    }
-    const totalCount = this.items.length;
-    const lastVisitedTimestamp = new Date(this.lastVisitedTimestamp);
-    const currentItemTimestamp = new Date(timestamp);
-    const isCurrentItemNewer = lastVisitedTimestamp < currentItemTimestamp;
-    if (!isCurrentItemNewer) {
-      return;
-    }
-    if (totalCount === 1 || index === 0) {
-      return this.renderIndicator();
-    }
-    const previousItemTimestamp = new Date(this.items[index - 1].timestamp);
-    const isPreviousItemNewer = lastVisitedTimestamp < previousItemTimestamp;
-    if (isPreviousItemNewer) {
-      return;
-    }
-    return this.renderIndicator();
+  renderNotificationItem(item) {
+    return (index.h("limebb-notification-item", { platform: this.platform, context: this.context, item: item, key: item.id, onInteract: this.handleItemClick }));
+  }
+  renderDateHeader(date) {
+    return index.h("a", { class: "date-heading" }, date);
   }
   renderIndicator() {
     return (index.h("div", { class: "new-items-indicator" }, index.h("hr", null), index.h("h3", null, this.translator.get('webclient.new'))));
   }
-  renderDateHeader(timestamp, index$1) {
-    const currentIndexDate = this.dateTimeFormatter.format(timestamp, 'date');
-    if (index$1 === 0) {
-      return index.h("a", { class: "date-heading" }, currentIndexDate);
-    }
-    const previousIndexDate = this.dateTimeFormatter.format(this.items[index$1 - 1].timestamp, 'date');
-    if (previousIndexDate === currentIndexDate) {
-      return;
-    }
-    return index.h("a", { class: "date-heading" }, currentIndexDate);
-  }
-  renderLoadMore() {
-    if (!this.items.length ||
-      this.displayedItemCount >= this.items.length) {
-      return;
-    }
-    return (index.h("limel-icon-button", { class: "load-more-button", icon: "more", onClick: this.handleLoadMore, elevated: true, label: this.translator.get('webclient.load-more') }));
-  }
   get dateTimeFormatter() {
     return this.platform.get(types.PlatformServiceName.DateTimeFormatter);
   }
   get translator() {
     return this.platform.get(types.PlatformServiceName.Translate);
   }
+  static get watchers() { return {
+    "items": ["handleItemsChange"]
+  }; }
 };
+function parseToUTCDate(date) {
+  if (typeof date === 'string') {
+    return new Date(Date.parse(date));
+  }
+  return new Date(date); // This will automatically be UTC
+}
 NotificationList.style = notificationListCss;
 
 exports.limebb_notification_list = NotificationList;