@limetech/lime-crm-building-blocks 1.32.4-dev.7 → 1.33.0

package/CHANGELOG.md

@@ -1,70 +1,10 @@
-### [1.32.4-dev.7](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.32.4-dev.6...v1.32.4-dev.7) (2024-04-19)
+## [1.33.0](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.32.3...v1.33.0) (2024-04-22)
 
 
-### Bug Fixes
-
-
-* trigger release ([9441cef](https://github.com/Lundalogik/lime-crm-building-blocks/commit/9441cef20ffc8e0564d203fe5aac1d87405135c5))
-* trigger release ([e31a907](https://github.com/Lundalogik/lime-crm-building-blocks/commit/e31a907ffe026477cebd602fe23379c84e7ce740))
-
-### [1.32.4-dev.6](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.32.4-dev.5...v1.32.4-dev.6) (2024-04-16)
-
-
-### Bug Fixes
-
-
-* trigger release ([8898f5a](https://github.com/Lundalogik/lime-crm-building-blocks/commit/8898f5a740f753f1c2f78e7dbf7b416f9a6aa6a5))
-
-### [1.32.4-dev.5](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.32.4-dev.4...v1.32.4-dev.5) (2024-04-16)
-
-
-### Bug Fixes
-
-
-* trigger release ([3a23cdc](https://github.com/Lundalogik/lime-crm-building-blocks/commit/3a23cdc52f2aa88c3b5e7f4bf7b16e28b99a04b8))
-
-### [1.32.4-dev.4](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.32.4-dev.3...v1.32.4-dev.4) (2024-04-16)
-
-
-### Bug Fixes
-
-
-* trigger release ([fa2e5fd](https://github.com/Lundalogik/lime-crm-building-blocks/commit/fa2e5fde7238ffc5b512066c239f7cb83a744262))
-
-### Reverts
-
-
-* Revert "ci(release.yml): publish releases on s3" ([45a4e00](https://github.com/Lundalogik/lime-crm-building-blocks/commit/45a4e003b4c9e883be7ac77d04d987948d557320))
-
-### [1.32.4-dev.3](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.32.4-dev.2...v1.32.4-dev.3) (2024-04-15)
-
-
-### Bug Fixes
-
-
-* trigger release ([f48fd46](https://github.com/Lundalogik/lime-crm-building-blocks/commit/f48fd467526e8988dc07a43c3a51d0544392064d))
-
-### Reverts
-
-
-* Revert "ci(release.yml): publish releases on s3" ([33b8bd3](https://github.com/Lundalogik/lime-crm-building-blocks/commit/33b8bd3d924ed167b604d7ef2a4ae74f5606640c))
-* Revert "fix(release.yml): publish releases on s3" ([2740fb8](https://github.com/Lundalogik/lime-crm-building-blocks/commit/2740fb8f98e004a3bf408e934272ebafb90ad373))
-
-### [1.32.4-dev.2](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.32.4-dev.1...v1.32.4-dev.2) (2024-04-15)
-
-
-### Bug Fixes
-
-
-* **release.yml:** publish releases on s3 ([d94fe5b](https://github.com/Lundalogik/lime-crm-building-blocks/commit/d94fe5be9c1f96db4fb6cdcbc471d781cb809b17))
-
-### [1.32.4-dev.1](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.32.3...v1.32.4-dev.1) (2024-04-15)
-
-
-### Bug Fixes
+### Features
 
 
-* trigger release ([3d6b937](https://github.com/Lundalogik/lime-crm-building-blocks/commit/3d6b9379ad1036616df800c2c23a73d39e1d33ec))
+* **feed:** indicate new items since last time user visited the feed ([ef54fed](https://github.com/Lundalogik/lime-crm-building-blocks/commit/ef54feda0e47abe960cc797ac45004f1369bb6e6))
 
 ### [1.32.3](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.32.2...v1.32.3) (2024-03-21)
 

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

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["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"]}]]],["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-icon-picker.cjs",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["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",[[1,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["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]}]]]], options);
+  return index.bootstrapLazy([["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-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-icon-picker.cjs",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["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",[[1,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["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]}]]]], options);
 });

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

@@ -164,7 +164,7 @@ function differenceInMinutes(dateLeft, dateRight, options) {
   return getRoundingMethod(options?.roundingMethod)(diff);
 }
 
-const feedCss = ":host(limebb-feed){--limebb-feed-background-color:var(\n      --feed-background-color,\n      rgb(var(--contrast-100))\n  );--limebb-feed-item-background-color:var(--contrast-300);display:flex;flex-direction:column;gap:0.25rem;max-width:45rem;background-color:var(--limebb-feed-background-color)}.empty-state{text-align:center}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-heading{font-weight:600;font-size:0.875rem;margin:1.25rem 0 0.5rem 0;color:rgb(var(--contrast-900))}limebb-feed-timeline-item:has(+limebb-feed-timeline-item[is-bundled]){--limebb-feed-item-action-bar-grid-template-rows:0fr}.load-more-button{margin-top:0.5rem}";
+const feedCss = ":host(limebb-feed){--limebb-feed-background-color:var(\n      --feed-background-color,\n      rgb(var(--contrast-100))\n  );--limebb-feed-item-background-color:var(--contrast-300);display:flex;flex-direction:column;gap:0.25rem;max-width:45rem;background-color:var(--limebb-feed-background-color)}.empty-state{text-align:center}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-heading{font-weight:600;font-size:0.875rem;margin:1.25rem 0 0.5rem 0;color:rgb(var(--contrast-900))}limebb-feed-timeline-item:has(+limebb-feed-timeline-item[is-bundled]){--limebb-feed-item-action-bar-grid-template-rows:0fr}.load-more-button{margin-top: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-feed-background-color)}.new-items-indicator+.date-heading{margin-top:-0.5rem}";
 
 const MINUTES_OF_PROXIMITY = 5;
 const Feed = class {
@@ -235,11 +235,36 @@ const Feed = class {
   renderFeedItems() {
     return this.items.map((item, index$1) => {
       return [
+        this.renderNewItemsIndicator(item.timestamp, index$1),
         this.renderDateHeader(item.timestamp, index$1),
         index.h("limebb-feed-timeline-item", { platform: this.platform, context: this.context, item: item, key: item.id, ui: item === null || item === void 0 ? void 0 : item.ui, isBundled: this.isBundled(item, index$1) }),
       ];
     });
   }
+  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();
+  }
+  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) {

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["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"]}]]],["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-icon-picker.cjs",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["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",[[1,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["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]}]]]], options);
+  return index.bootstrapLazy([["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-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-icon-picker.cjs",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["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",[[1,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["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]}]]]], options);
   });
 };
 

package/dist/collection/components/feed/feed.css

@@ -37,4 +37,32 @@ limebb-feed-timeline-item:has(+ limebb-feed-timeline-item[is-bundled]) {
 
 .load-more-button {
   margin-top: 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-feed-background-color);
+}
+.new-items-indicator + .date-heading {
+  margin-top: -0.5rem;
 }

package/dist/collection/components/feed/feed.js

@@ -1,3 +1,4 @@
+/* eslint-disable multiline-ternary */
 import { h } from '@stencil/core';
 import { PlatformServiceName, } from '@limetech/lime-web-components';
 import { differenceInMinutes } from 'date-fns/differenceInMinutes.mjs';
@@ -25,6 +26,7 @@ const MINUTES_OF_PROXIMITY = 5;
  * @exampleComponent limebb-example-feed-tall-item
  * @exampleComponent limebb-example-feed-item-types
  * @exampleComponent limebb-example-feed-item-color-coding
+ * @exampleComponent limebb-example-feed-new-items
  * @private
  */
 export class Feed {
@@ -93,11 +95,36 @@ export class Feed {
   renderFeedItems() {
     return this.items.map((item, index) => {
       return [
+        this.renderNewItemsIndicator(item.timestamp, index),
         this.renderDateHeader(item.timestamp, index),
         h("limebb-feed-timeline-item", { platform: this.platform, context: this.context, item: item, key: item.id, ui: item === null || item === void 0 ? void 0 : item.ui, isBundled: this.isBundled(item, index) }),
       ];
     });
   }
+  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();
+  }
+  renderIndicator() {
+    return (h("div", { class: "new-items-indicator" }, h("hr", null), h("h3", null, this.translator.get('webclient.new'))));
+  }
   renderDateHeader(timestamp, index) {
     const currentIndexDate = this.dateTimeFormatter.format(timestamp, 'date');
     if (index === 0) {
@@ -274,6 +301,27 @@ export class Feed {
         "attribute": "total-count",
         "reflect": false,
         "defaultValue": "0"
+      },
+      "lastVisitedTimestamp": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | Date | null",
+          "resolved": "Date | null | string | undefined",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The date and time of the last time the user visited the feed.\nWhen provided, the feed will display a divider line between the\nlast visited items (the old items which have a date and time earlier than\n`lastVisitedTimestamp`) and the newer items.\n\nIf there are no newer items, the divider line will not be displayed."
+        },
+        "attribute": "last-visited-timestamp",
+        "reflect": false
       }
     };
   }

package/dist/components/limebb-feed.js

@@ -161,7 +161,7 @@ function differenceInMinutes(dateLeft, dateRight, options) {
   return getRoundingMethod(options?.roundingMethod)(diff);
 }
 
-const feedCss = ":host(limebb-feed){--limebb-feed-background-color:var(\n      --feed-background-color,\n      rgb(var(--contrast-100))\n  );--limebb-feed-item-background-color:var(--contrast-300);display:flex;flex-direction:column;gap:0.25rem;max-width:45rem;background-color:var(--limebb-feed-background-color)}.empty-state{text-align:center}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-heading{font-weight:600;font-size:0.875rem;margin:1.25rem 0 0.5rem 0;color:rgb(var(--contrast-900))}limebb-feed-timeline-item:has(+limebb-feed-timeline-item[is-bundled]){--limebb-feed-item-action-bar-grid-template-rows:0fr}.load-more-button{margin-top:0.5rem}";
+const feedCss = ":host(limebb-feed){--limebb-feed-background-color:var(\n      --feed-background-color,\n      rgb(var(--contrast-100))\n  );--limebb-feed-item-background-color:var(--contrast-300);display:flex;flex-direction:column;gap:0.25rem;max-width:45rem;background-color:var(--limebb-feed-background-color)}.empty-state{text-align:center}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-heading{font-weight:600;font-size:0.875rem;margin:1.25rem 0 0.5rem 0;color:rgb(var(--contrast-900))}limebb-feed-timeline-item:has(+limebb-feed-timeline-item[is-bundled]){--limebb-feed-item-action-bar-grid-template-rows:0fr}.load-more-button{margin-top: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-feed-background-color)}.new-items-indicator+.date-heading{margin-top:-0.5rem}";
 
 const MINUTES_OF_PROXIMITY = 5;
 const Feed = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -234,11 +234,36 @@ const Feed = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   renderFeedItems() {
     return this.items.map((item, index) => {
       return [
+        this.renderNewItemsIndicator(item.timestamp, index),
         this.renderDateHeader(item.timestamp, index),
         h("limebb-feed-timeline-item", { platform: this.platform, context: this.context, item: item, key: item.id, ui: item === null || item === void 0 ? void 0 : item.ui, isBundled: this.isBundled(item, index) }),
       ];
     });
   }
+  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();
+  }
+  renderIndicator() {
+    return (h("div", { class: "new-items-indicator" }, h("hr", null), h("h3", null, this.translator.get('webclient.new'))));
+  }
   renderDateHeader(timestamp, index) {
     const currentIndexDate = this.dateTimeFormatter.format(timestamp, 'date');
     if (index === 0) {
@@ -273,7 +298,8 @@ const Feed = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "emptyStateMessage": [1, "empty-state-message"],
     "loading": [4],
     "minutesOfProximity": [2, "minutes-of-proximity"],
-    "totalCount": [2, "total-count"]
+    "totalCount": [2, "total-count"],
+    "lastVisitedTimestamp": [1, "last-visited-timestamp"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

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

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["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-feed",[[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"]}]]],["limebb-currency-picker",[[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",[[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-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-navigation-button",[[1,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["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-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]}]]]], options);
+  return bootstrapLazy([["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-feed",[[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-currency-picker",[[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",[[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-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-navigation-button",[[1,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["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-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]}]]]], options);
 });

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

@@ -160,7 +160,7 @@ function differenceInMinutes(dateLeft, dateRight, options) {
   return getRoundingMethod(options?.roundingMethod)(diff);
 }
 
-const feedCss = ":host(limebb-feed){--limebb-feed-background-color:var(\n      --feed-background-color,\n      rgb(var(--contrast-100))\n  );--limebb-feed-item-background-color:var(--contrast-300);display:flex;flex-direction:column;gap:0.25rem;max-width:45rem;background-color:var(--limebb-feed-background-color)}.empty-state{text-align:center}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-heading{font-weight:600;font-size:0.875rem;margin:1.25rem 0 0.5rem 0;color:rgb(var(--contrast-900))}limebb-feed-timeline-item:has(+limebb-feed-timeline-item[is-bundled]){--limebb-feed-item-action-bar-grid-template-rows:0fr}.load-more-button{margin-top:0.5rem}";
+const feedCss = ":host(limebb-feed){--limebb-feed-background-color:var(\n      --feed-background-color,\n      rgb(var(--contrast-100))\n  );--limebb-feed-item-background-color:var(--contrast-300);display:flex;flex-direction:column;gap:0.25rem;max-width:45rem;background-color:var(--limebb-feed-background-color)}.empty-state{text-align:center}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-heading{font-weight:600;font-size:0.875rem;margin:1.25rem 0 0.5rem 0;color:rgb(var(--contrast-900))}limebb-feed-timeline-item:has(+limebb-feed-timeline-item[is-bundled]){--limebb-feed-item-action-bar-grid-template-rows:0fr}.load-more-button{margin-top: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-feed-background-color)}.new-items-indicator+.date-heading{margin-top:-0.5rem}";
 
 const MINUTES_OF_PROXIMITY = 5;
 const Feed = class {
@@ -231,11 +231,36 @@ const Feed = class {
   renderFeedItems() {
     return this.items.map((item, index) => {
       return [
+        this.renderNewItemsIndicator(item.timestamp, index),
         this.renderDateHeader(item.timestamp, index),
         h("limebb-feed-timeline-item", { platform: this.platform, context: this.context, item: item, key: item.id, ui: item === null || item === void 0 ? void 0 : item.ui, isBundled: this.isBundled(item, index) }),
       ];
     });
   }
+  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();
+  }
+  renderIndicator() {
+    return (h("div", { class: "new-items-indicator" }, h("hr", null), h("h3", null, this.translator.get('webclient.new'))));
+  }
   renderDateHeader(timestamp, index) {
     const currentIndexDate = this.dateTimeFormatter.format(timestamp, 'date');
     if (index === 0) {

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["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-feed",[[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"]}]]],["limebb-currency-picker",[[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",[[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-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-navigation-button",[[1,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["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-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]}]]]], options);
+  return bootstrapLazy([["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-feed",[[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-currency-picker",[[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",[[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-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-navigation-button",[[1,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["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-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]}]]]], options);
   });
 };
 

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

@@ -1 +1 @@
-import{p as e,b as t}from"./p-2912b7e7.js";(()=>{const t=import.meta.url,l={};return""!==t&&(l.resourcesUrl=new URL(".",t).href),e(l)})().then((e=>t([["p-81bfe796",[[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-102dd265",[[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"]}]]],["p-31668b58",[[1,"limebb-currency-picker",{label:[513],platform:[16],currencies:[16],helperText:[513,"helper-text"],required:[516],readonly:[516],invalid:[516],disabled:[516],value:[16]}]]],["p-0f8928a9",[[1,"limebb-dashboard-widget",{heading:[513],subheading:[513],supportingText:[513,"supporting-text"],icon:[513]}]]],["p-9f986917",[[1,"limebb-icon-picker",{value:[1],required:[4],readonly:[4],invalid:[4],disabled:[4],label:[1],helperText:[1,"helper-text"]}]]],["p-575e0050",[[1,"limebb-limeobject-file-viewer",{platform:[16],context:[16],property:[1],fileTypes:[16],limeobject:[32],limetype:[32]}]]],["p-5e0a5876",[[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-6ad70097",[[1,"limebb-navigation-button",{href:[513],tooltipLabel:[513,"tooltip-label"],tooltipHelperLabel:[513,"tooltip-helper-label"],type:[513]}]]],["p-7b0263f8",[[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-654da86c",[[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]}]]]],e)));
+import{p as e,b as t}from"./p-2912b7e7.js";(()=>{const t=import.meta.url,l={};return""!==t&&(l.resourcesUrl=new URL(".",t).href),e(l)})().then((e=>t([["p-81bfe796",[[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-220c28d8",[[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"]}]]],["p-31668b58",[[1,"limebb-currency-picker",{label:[513],platform:[16],currencies:[16],helperText:[513,"helper-text"],required:[516],readonly:[516],invalid:[516],disabled:[516],value:[16]}]]],["p-0f8928a9",[[1,"limebb-dashboard-widget",{heading:[513],subheading:[513],supportingText:[513,"supporting-text"],icon:[513]}]]],["p-9f986917",[[1,"limebb-icon-picker",{value:[1],required:[4],readonly:[4],invalid:[4],disabled:[4],label:[1],helperText:[1,"helper-text"]}]]],["p-575e0050",[[1,"limebb-limeobject-file-viewer",{platform:[16],context:[16],property:[1],fileTypes:[16],limeobject:[32],limetype:[32]}]]],["p-5e0a5876",[[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-6ad70097",[[1,"limebb-navigation-button",{href:[513],tooltipLabel:[513,"tooltip-label"],tooltipHelperLabel:[513,"tooltip-helper-label"],type:[513]}]]],["p-7b0263f8",[[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-654da86c",[[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]}]]]],e)));

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

@@ -0,0 +1 @@
+import{r as e,c as t,h as i}from"./p-2912b7e7.js";import{P as r}from"./p-11eb7b1e.js";function n(e){const t=Object.prototype.toString.call(e);return e instanceof Date||"object"==typeof e&&"[object Date]"===t?new e.constructor(+e):"number"==typeof e||"[object Number]"===t||"string"==typeof e||"[object String]"===t?new Date(e):new Date(NaN)}const o=class{constructor(i){e(this,i),this.loadMore=t(this,"loadMore",7),this.items=[],this.minutesOfProximity=5,this.totalCount=0,this.isBundled=(e,t)=>{var i,r,o,s,a,l;if(0===t)return!1;if((null===(r=null===(i=this.items[t-1])||void 0===i?void 0:i.author)||void 0===r?void 0:r.id)!==(null===(o=null==e?void 0:e.author)||void 0===o?void 0:o.id))return!1;if((null===(a=null===(s=this.items[t-1])||void 0===s?void 0:s.icon)||void 0===a?void 0:a.name)!==(null===(l=null==e?void 0:e.icon)||void 0===l?void 0:l.name))return!1;const d=new Date(e.timestamp),c=new Date(this.items[t-1].timestamp),m=new Date(c);return function(e,t,i){const r=function(e,t){return+n(e)-+n(t)}(e,t)/6e4;return(o=i?.roundingMethod,e=>{const t=(o?Math[o]:Math.trunc)(e);return 0===t?0:t})(r);var o}(new Date(d),m)<=this.minutesOfProximity},this.handleLoadMore=e=>{e.stopPropagation(),this.loadMore.emit()}}render(){return[this.renderLoadMore(),this.renderEmptyFeedMessage(),this.renderSpinner(),this.renderFeedItems()]}renderSpinner(){if(this.loading)return i("limel-spinner",{size:"small"})}renderEmptyFeedMessage(){if(!this.loading)return 0===this.items.length?i("p",{class:"empty-state"},this.emptyStateMessage):void 0}renderFeedItems(){return this.items.map(((e,t)=>[this.renderNewItemsIndicator(e.timestamp,t),this.renderDateHeader(e.timestamp,t),i("limebb-feed-timeline-item",{platform:this.platform,context:this.context,item:e,key:e.id,ui:null==e?void 0:e.ui,isBundled:this.isBundled(e,t)})]))}renderNewItemsIndicator(e,t){if(!this.lastVisitedTimestamp)return;const i=this.items.length,r=new Date(this.lastVisitedTimestamp);return r<new Date(e)?1===i||0===t?this.renderIndicator():r<new Date(this.items[t-1].timestamp)?void 0:this.renderIndicator():void 0}renderIndicator(){return i("div",{class:"new-items-indicator"},i("hr",null),i("h3",null,this.translator.get("webclient.new")))}renderDateHeader(e,t){const r=this.dateTimeFormatter.format(e,"date");return 0===t||this.dateTimeFormatter.format(this.items[t-1].timestamp,"date")!==r?i("a",{class:"date-heading"},r):void 0}renderLoadMore(){if(this.items.length&&!(this.totalCount<=this.items.length))return i("limel-icon-button",{class:"load-more-button",icon:"more",onClick:this.handleLoadMore,elevated:!0,label:this.loadMoreLabel})}get dateTimeFormatter(){return this.platform.get(r.DateTimeFormatter)}get loadMoreLabel(){return this.translator.get("webclient.load-more")}get translator(){return this.platform.get(r.Translate)}};o.style=":host(limebb-feed){--limebb-feed-background-color:var(\n      --feed-background-color,\n      rgb(var(--contrast-100))\n  );--limebb-feed-item-background-color:var(--contrast-300);display:flex;flex-direction:column;gap:0.25rem;max-width:45rem;background-color:var(--limebb-feed-background-color)}.empty-state{text-align:center}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-heading{font-weight:600;font-size:0.875rem;margin:1.25rem 0 0.5rem 0;color:rgb(var(--contrast-900))}limebb-feed-timeline-item:has(+limebb-feed-timeline-item[is-bundled]){--limebb-feed-item-action-bar-grid-template-rows:0fr}.load-more-button{margin-top: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-feed-background-color)}.new-items-indicator+.date-heading{margin-top:-0.5rem}";export{o as limebb_feed}

package/dist/types/components/feed/feed.d.ts

@@ -24,6 +24,7 @@ import { LimeWebComponent, LimeWebComponentContext, LimeWebComponentPlatform } f
  * @exampleComponent limebb-example-feed-tall-item
  * @exampleComponent limebb-example-feed-item-types
  * @exampleComponent limebb-example-feed-item-color-coding
+ * @exampleComponent limebb-example-feed-new-items
  * @private
  */
 export declare class Feed implements LimeWebComponent {
@@ -56,6 +57,15 @@ export declare class Feed implements LimeWebComponent {
    * The total number of items available
    */
   totalCount: number;
+  /**
+   * The date and time of the last time the user visited the feed.
+   * When provided, the feed will display a divider line between the
+   * last visited items (the old items which have a date and time earlier than
+   * `lastVisitedTimestamp`) and the newer items.
+   *
+   * If there are no newer items, the divider line will not be displayed.
+   */
+  lastVisitedTimestamp?: string | Date | null;
   /**
    * Emitted when the load more button is clicked
    */
@@ -64,6 +74,8 @@ export declare class Feed implements LimeWebComponent {
   private renderSpinner;
   private renderEmptyFeedMessage;
   private renderFeedItems;
+  private renderNewItemsIndicator;
+  private renderIndicator;
   private renderDateHeader;
   private isBundled;
   private renderLoadMore;

package/dist/types/components.d.ts

@@ -169,6 +169,10 @@ export namespace Components {
           * List of items to display in the feed.
          */
         "items": FeedItem[];
+        /**
+          * The date and time of the last time the user visited the feed. When provided, the feed will display a divider line between the last visited items (the old items which have a date and time earlier than `lastVisitedTimestamp`) and the newer items.  If there are no newer items, the divider line will not be displayed.
+         */
+        "lastVisitedTimestamp"?: string | Date | null;
         /**
           * True if items have not finished loading.
          */
@@ -603,6 +607,10 @@ declare namespace LocalJSX {
           * List of items to display in the feed.
          */
         "items"?: FeedItem[];
+        /**
+          * The date and time of the last time the user visited the feed. When provided, the feed will display a divider line between the last visited items (the old items which have a date and time earlier than `lastVisitedTimestamp`) and the newer items.  If there are no newer items, the divider line will not be displayed.
+         */
+        "lastVisitedTimestamp"?: string | Date | null;
         /**
           * True if items have not finished loading.
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-crm-building-blocks",
-  "version": "1.32.4-dev.7",
+  "version": "1.33.0",
   "description": "A home for shared components meant for use with Lime CRM",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -41,7 +41,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@limetech/lime-elements": "^37.17.1",
+    "@limetech/lime-elements": "^37.18.0",
     "@limetech/lime-web-components": "^5.31.0",
     "@lundalogik/lime-icons8": "^2.21.0",
     "@lundalogik/limeclient.js": "^1.64.0",

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

@@ -1 +0,0 @@
-import{r as e,c as t,h as i}from"./p-2912b7e7.js";import{P as r}from"./p-11eb7b1e.js";function n(e){const t=Object.prototype.toString.call(e);return e instanceof Date||"object"==typeof e&&"[object Date]"===t?new e.constructor(+e):"number"==typeof e||"[object Number]"===t||"string"==typeof e||"[object String]"===t?new Date(e):new Date(NaN)}const o=class{constructor(i){e(this,i),this.loadMore=t(this,"loadMore",7),this.items=[],this.minutesOfProximity=5,this.totalCount=0,this.isBundled=(e,t)=>{var i,r,o,s,a,l;if(0===t)return!1;if((null===(r=null===(i=this.items[t-1])||void 0===i?void 0:i.author)||void 0===r?void 0:r.id)!==(null===(o=null==e?void 0:e.author)||void 0===o?void 0:o.id))return!1;if((null===(a=null===(s=this.items[t-1])||void 0===s?void 0:s.icon)||void 0===a?void 0:a.name)!==(null===(l=null==e?void 0:e.icon)||void 0===l?void 0:l.name))return!1;const d=new Date(e.timestamp),m=new Date(this.items[t-1].timestamp),c=new Date(m);return function(e,t,i){const r=function(e,t){return+n(e)-+n(t)}(e,t)/6e4;return(o=i?.roundingMethod,e=>{const t=(o?Math[o]:Math.trunc)(e);return 0===t?0:t})(r);var o}(new Date(d),c)<=this.minutesOfProximity},this.handleLoadMore=e=>{e.stopPropagation(),this.loadMore.emit()}}render(){return[this.renderLoadMore(),this.renderEmptyFeedMessage(),this.renderSpinner(),this.renderFeedItems()]}renderSpinner(){if(this.loading)return i("limel-spinner",{size:"small"})}renderEmptyFeedMessage(){if(!this.loading)return 0===this.items.length?i("p",{class:"empty-state"},this.emptyStateMessage):void 0}renderFeedItems(){return this.items.map(((e,t)=>[this.renderDateHeader(e.timestamp,t),i("limebb-feed-timeline-item",{platform:this.platform,context:this.context,item:e,key:e.id,ui:null==e?void 0:e.ui,isBundled:this.isBundled(e,t)})]))}renderDateHeader(e,t){const r=this.dateTimeFormatter.format(e,"date");return 0===t||this.dateTimeFormatter.format(this.items[t-1].timestamp,"date")!==r?i("a",{class:"date-heading"},r):void 0}renderLoadMore(){if(this.items.length&&!(this.totalCount<=this.items.length))return i("limel-icon-button",{class:"load-more-button",icon:"more",onClick:this.handleLoadMore,elevated:!0,label:this.loadMoreLabel})}get dateTimeFormatter(){return this.platform.get(r.DateTimeFormatter)}get loadMoreLabel(){return this.translator.get("webclient.load-more")}get translator(){return this.platform.get(r.Translate)}};o.style=":host(limebb-feed){--limebb-feed-background-color:var(\n      --feed-background-color,\n      rgb(var(--contrast-100))\n  );--limebb-feed-item-background-color:var(--contrast-300);display:flex;flex-direction:column;gap:0.25rem;max-width:45rem;background-color:var(--limebb-feed-background-color)}.empty-state{text-align:center}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-heading{font-weight:600;font-size:0.875rem;margin:1.25rem 0 0.5rem 0;color:rgb(var(--contrast-900))}limebb-feed-timeline-item:has(+limebb-feed-timeline-item[is-bundled]){--limebb-feed-item-action-bar-grid-template-rows:0fr}.load-more-button{margin-top:0.5rem}";export{o as limebb_feed}