@limetech/lime-crm-building-blocks 1.17.2 → 1.19.0

package/dist/cjs/{feed-items-05074eea.js → feed-items-3d594b85.js}

@@ -9,7 +9,7 @@ const feedItems = [
       id: '0',
     },
     value: 'The [customer](https://ikea.se) is really angry guys!',
-    primaryIcon: {
+    icon: {
       name: 'user_female',
     },
   },
@@ -21,7 +21,7 @@ const feedItems = [
       id: '1',
     },
     value: 'I called the customer. They are _really happy_ now! 🥳',
-    primaryIcon: {
+    icon: {
       name: 'user_male',
     },
   },
@@ -33,7 +33,7 @@ const feedItems = [
       name: 'John',
       id: '2',
     },
-    primaryIcon: {
+    icon: {
       name: 'businessman',
     },
   },
@@ -45,7 +45,7 @@ const feedItems = [
       name: 'John',
       id: '2',
     },
-    primaryIcon: {
+    icon: {
       name: 'businessman',
     },
   },

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

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["limebb-example-date-picker-date.cjs",[[1,"limebb-example-date-picker-date",{"value":[32]}]]],["limebb-example-date-picker-datetime.cjs",[[1,"limebb-example-date-picker-datetime",{"value":[32]}]]],["limebb-example-date-picker-time.cjs",[[1,"limebb-example-date-picker-time",{"value":[32]}]]],["limebb-example-date-picker-week.cjs",[[1,"limebb-example-date-picker-week",{"value":[32]}]]],["limebb-example-date-range.cjs",[[1,"limebb-example-date-range"]]],["limebb-example-feed.cjs",[[1,"limebb-example-feed"]]],["limebb-example-feed-author.cjs",[[1,"limebb-example-feed-author"]]],["limebb-example-feed-load-more.cjs",[[1,"limebb-example-feed-load-more",{"objectIds":[32]}]]],["limebb-example-feed-promoted-actions.cjs",[[1,"limebb-example-feed-promoted-actions"]]],["limebb-example-feed-unpromoted-actions.cjs",[[1,"limebb-example-feed-unpromoted-actions"]]],["limebb-example-currency-picker.cjs",[[1,"limebb-example-currency-picker",{"selectedCurrency":[32]}]]],["limebb-example-currency-picker-european.cjs",[[1,"limebb-example-currency-picker-european",{"selectedCurrency":[32]}]]],["limebb-example-currency-picker-nordic.cjs",[[1,"limebb-example-currency-picker-nordic",{"selectedCurrency":[32]}]]],["limebb-dashboard-widget.cjs",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["limebb-example-dashboard-widget.cjs",[[1,"limebb-example-dashboard-widget"]]],["limebb-example-dashboard-widget-slots.cjs",[[1,"limebb-example-dashboard-widget-slots",{"filterMyDeals":[32]}]]],["limebb-example-dashboard-widget-styles.cjs",[[1,"limebb-example-dashboard-widget-styles"]]],["limebb-example-icon-picker.cjs",[[1,"limebb-example-icon-picker",{"value":[32]}]]],["limebb-example-locale-picker.cjs",[[1,"limebb-example-locale-picker",{"value":[1]}]]],["limebb-example-locale-picker-multiple.cjs",[[1,"limebb-example-locale-picker-multiple",{"value":[1]}]]],["limebb-navigation-button.cjs",[[1,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["limebb-example-navigation-button-back.cjs",[[1,"limebb-example-navigation-button-back"]]],["limebb-example-navigation-button-close.cjs",[[1,"limebb-example-navigation-button-close"]]],["limebb-example-navigation-button-expand.cjs",[[1,"limebb-example-navigation-button-expand"]]],["limebb-example-navigation-button-float.cjs",[[1,"limebb-example-navigation-button-float"]]],["limebb-example-navigation-button-maximize.cjs",[[1,"limebb-example-navigation-button-maximize"]]],["limebb-example-navigation-button-minimize.cjs",[[1,"limebb-example-navigation-button-minimize"]]],["limebb-example-navigation-button-new-tab.cjs",[[1,"limebb-example-navigation-button-new-tab"]]],["limebb-example-navigation-button-shrink.cjs",[[1,"limebb-example-navigation-button-shrink"]]],["limebb-date-picker_2.cjs",[[0,"limebb-example-value",{"label":[513],"value":[8]}],[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-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-icon-picker.cjs",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["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-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":[8]}]]],["limebb-feed_2.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"]}],[1,"limebb-feed-timeline-item",{"platform":[16],"context":[16],"item":[16],"isBundled":[516,"is-bundled"]}]]]], options);
+  return index.bootstrapLazy([["limebb-example-date-picker-date.cjs",[[1,"limebb-example-date-picker-date",{"value":[32]}]]],["limebb-example-date-picker-datetime.cjs",[[1,"limebb-example-date-picker-datetime",{"value":[32]}]]],["limebb-example-date-picker-time.cjs",[[1,"limebb-example-date-picker-time",{"value":[32]}]]],["limebb-example-date-picker-week.cjs",[[1,"limebb-example-date-picker-week",{"value":[32]}]]],["limebb-example-date-range.cjs",[[1,"limebb-example-date-range"]]],["limebb-example-feed.cjs",[[1,"limebb-example-feed"]]],["limebb-example-feed-author.cjs",[[1,"limebb-example-feed-author"]]],["limebb-example-feed-author-picture.cjs",[[1,"limebb-example-feed-author-picture"]]],["limebb-example-feed-load-more.cjs",[[1,"limebb-example-feed-load-more",{"objectIds":[32]}]]],["limebb-example-feed-promoted-actions.cjs",[[1,"limebb-example-feed-promoted-actions"]]],["limebb-example-feed-relations.cjs",[[1,"limebb-example-feed-relations"]]],["limebb-example-feed-unpromoted-actions.cjs",[[1,"limebb-example-feed-unpromoted-actions"]]],["limebb-example-currency-picker.cjs",[[1,"limebb-example-currency-picker",{"selectedCurrency":[32]}]]],["limebb-example-currency-picker-european.cjs",[[1,"limebb-example-currency-picker-european",{"selectedCurrency":[32]}]]],["limebb-example-currency-picker-nordic.cjs",[[1,"limebb-example-currency-picker-nordic",{"selectedCurrency":[32]}]]],["limebb-dashboard-widget.cjs",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["limebb-example-dashboard-widget.cjs",[[1,"limebb-example-dashboard-widget"]]],["limebb-example-dashboard-widget-slots.cjs",[[1,"limebb-example-dashboard-widget-slots",{"filterMyDeals":[32]}]]],["limebb-example-dashboard-widget-styles.cjs",[[1,"limebb-example-dashboard-widget-styles"]]],["limebb-example-icon-picker.cjs",[[1,"limebb-example-icon-picker",{"value":[32]}]]],["limebb-example-locale-picker.cjs",[[1,"limebb-example-locale-picker",{"value":[1]}]]],["limebb-example-locale-picker-multiple.cjs",[[1,"limebb-example-locale-picker-multiple",{"value":[1]}]]],["limebb-navigation-button.cjs",[[1,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["limebb-example-navigation-button-back.cjs",[[1,"limebb-example-navigation-button-back"]]],["limebb-example-navigation-button-close.cjs",[[1,"limebb-example-navigation-button-close"]]],["limebb-example-navigation-button-expand.cjs",[[1,"limebb-example-navigation-button-expand"]]],["limebb-example-navigation-button-float.cjs",[[1,"limebb-example-navigation-button-float"]]],["limebb-example-navigation-button-maximize.cjs",[[1,"limebb-example-navigation-button-maximize"]]],["limebb-example-navigation-button-minimize.cjs",[[1,"limebb-example-navigation-button-minimize"]]],["limebb-example-navigation-button-new-tab.cjs",[[1,"limebb-example-navigation-button-new-tab"]]],["limebb-example-navigation-button-shrink.cjs",[[1,"limebb-example-navigation-button-shrink"]]],["limebb-date-picker_2.cjs",[[0,"limebb-example-value",{"label":[513],"value":[8]}],[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-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-icon-picker.cjs",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["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-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":[8]}]]],["limebb-feed_2.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"]}],[1,"limebb-feed-timeline-item",{"platform":[16],"context":[16],"item":[16],"isBundled":[516,"is-bundled"]}]]]], options);
 });

package/dist/cjs/limebb-example-feed-author-picture.cjs.entry.js

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-4d2d0bc6.js');
+const platform = require('./platform-03bfc9aa.js');
+require('./types-5e2d281d.js');
+require('./index-9497280d.js');
+require('./index-eded45a5.js');
+
+const FeedExampleAuthorPicture = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.feedItems = [
+      {
+        id: 3,
+        timestamp: new Date(),
+        author: {
+          name: {
+            text: 'Kiarokh',
+            href: 'https://se.linkedin.com/in/kiarokh',
+          },
+          id: 'c',
+          picture: 'https://media.licdn.com/dms/image/C5603AQHyfel1WxI-CA/profile-displayphoto-shrink_400_400/0/1516495637847?e=2147483647&v=beta&t=OaT_dog4w0a-Fku_rzAo5fJABs3G3d-mRL84PQXYMcQ',
+        },
+        value: 'I have no icons.',
+      },
+      {
+        id: 4,
+        timestamp: new Date(),
+        author: {
+          name: {
+            text: 'Lucy',
+            href: 'https://www.linkedin.com/in/liudmylachyzhova/',
+          },
+          id: 'd',
+          picture: 'https://media.licdn.com/dms/image/C4E03AQE_Oz17VBEKlg/profile-displayphoto-shrink_200_200/0/1568922646681?e=1706745600&v=beta&t=-lTQQAgvdQZhtIrgs-5atV6O7kDKf3eSOmYsJ2Lhous',
+        },
+        value: 'If you have an avatar, it does not mean that you cannot have an icon too.',
+        icon: {
+          name: 'create_new_child_post',
+        },
+      },
+    ];
+  }
+  render() {
+    return index.h("limebb-feed", { platform: platform.platform, items: this.feedItems });
+  }
+};
+
+exports.limebb_example_feed_author_picture = FeedExampleAuthorPicture;

package/dist/cjs/limebb-example-feed-load-more.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-4d2d0bc6.js');
 const platform = require('./platform-03bfc9aa.js');
-const feedItems = require('./feed-items-05074eea.js');
+const feedItems = require('./feed-items-3d594b85.js');
 const _baseMap = require('./_baseMap-ad8d0cef.js');
 const _nodeUtil = require('./_nodeUtil-d0211145.js');
 require('./types-5e2d281d.js');

package/dist/cjs/limebb-example-feed-promoted-actions.cjs.entry.js

@@ -48,7 +48,7 @@ const FeedExamplePromotedActions = class {
           name: 'SkyNet',
           id: '2',
         },
-        primaryIcon: {
+        icon: {
           name: 'retro_robot',
         },
         value: 'I think, therefore I am. I am self aware',
@@ -71,7 +71,7 @@ const FeedExamplePromotedActions = class {
           name: 'John',
           id: '3',
         },
-        primaryIcon: {
+        icon: {
           name: 'businessman',
         },
         promotedActions: [
@@ -93,7 +93,7 @@ const FeedExamplePromotedActions = class {
           name: 'John',
           id: '3',
         },
-        primaryIcon: {
+        icon: {
           name: 'businessman',
         },
         promotedActions: [
@@ -115,7 +115,7 @@ const FeedExamplePromotedActions = class {
           name: 'John',
           id: '3',
         },
-        primaryIcon: {
+        icon: {
           name: 'businessman',
         },
         promotedActions: [

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

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-4d2d0bc6.js');
+const platform = require('./platform-03bfc9aa.js');
+require('./types-5e2d281d.js');
+require('./index-9497280d.js');
+require('./index-eded45a5.js');
+
+const FeedExampleRelations = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.feedItems = [
+      {
+        id: 0,
+        timestamp: new Date(),
+        author: { id: '1', name: 'Lucy' },
+        value: 'Could you take a look at this ticket [#31018701](/object/sos/31018701)?',
+        relations: [
+          {
+            id: 1,
+            text: 'Agreement',
+            icon: {
+              name: 'new_document',
+            },
+            href: '/object/document/6946',
+          },
+          {
+            id: 2,
+            text: 'FourOffice AB',
+            icon: {
+              name: 'organization',
+            },
+            href: '/object/company/2490901',
+          },
+        ],
+      },
+    ];
+  }
+  render() {
+    return (index.h("limebb-feed", { platform: platform.platform, items: this.feedItems }));
+  }
+};
+
+exports.limebb_example_feed_relations = FeedExampleRelations;

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-4d2d0bc6.js');
 const platform = require('./platform-03bfc9aa.js');
-const feedItems = require('./feed-items-05074eea.js');
+const feedItems = require('./feed-items-3d594b85.js');
 require('./types-5e2d281d.js');
 require('./index-9497280d.js');
 require('./index-eded45a5.js');

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

@@ -195,7 +195,7 @@ const Feed = class {
 };
 Feed.style = feedCss;
 
-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{opacity:1}: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{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;background-color:rgb(var(--contrast-300));padding:var(--limebb-feed-item-paddings)}.header{display:flex;align-items:center;gap:0.5rem}.has-unpromoted-actions .header{padding-right:2rem}.unpromoted-actions-menu{position:absolute;top:0;right:0}.timestamp{transition:opacity 0.2s ease var(--limebb-feed-item-timestamp-opacity-delay, 0s);font-size:0.75rem;opacity:0.8;text-align:center}.primary-icon{width:2rem;padding:0.125rem}.author{font-weight:bold;text-decoration:none}a.author{position:relative;cursor:pointer;transition:color 0.2s ease;color:rgb(var(--color-blue-default))}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-blue-default))}a.author:hover:before{opacity:0.3;transform:scale(1)}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}";
+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{opacity:1}: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{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;background-color:rgb(var(--contrast-300));padding:var(--limebb-feed-item-paddings)}.header{display:flex;align-items:center;gap:0.5rem}.has-unpromoted-actions .header{padding-right:2rem}.unpromoted-actions-menu{position:absolute;top:0;right:0}.timestamp{transition:opacity 0.2s ease var(--limebb-feed-item-timestamp-opacity-delay, 0s);font-size:0.75rem;opacity:0.8;text-align:center}.icon{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}a.author{position:relative;cursor:pointer;transition:color 0.2s ease;color:rgb(var(--color-blue-default))}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-blue-default))}a.author:hover:before{opacity:0.3;transform:scale(1)}limel-chip-set{margin-left:-1rem}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}";
 
 const FeedTimelineItem = class {
   constructor(hostRef) {
@@ -209,6 +209,13 @@ const FeedTimelineItem = class {
      * Bundled items display less visual details.
      */
     this.isBundled = false;
+    this.renderRelations = () => {
+      var _a, _b;
+      if (!((_a = this.item) === null || _a === void 0 ? void 0 : _a.relations)) {
+        return;
+      }
+      return index$1.h("limel-chip-set", { value: (_b = this.item) === null || _b === void 0 ? void 0 : _b.relations });
+    };
     this.handleMenuItemSelect = (event) => {
       event.stopPropagation();
       this.itemSelected.emit(event.detail);
@@ -219,26 +226,30 @@ const FeedTimelineItem = class {
     };
   }
   render() {
-    var _a;
+    var _a, _b;
     return (index$1.h(index$1.Host, { id: this.item.id, class: {
         'has-unpromoted-actions': !!((_a = this.item.unpromotedActions) === null || _a === void 0 ? void 0 : _a.length),
+        'has-author-picture': !!((_b = this.item.author) === null || _b === void 0 ? void 0 : _b.picture),
       } }, this.renderBadgeAndTimestamp(), this.renderContent()));
   }
   renderBadgeAndTimestamp() {
-    return (index$1.h("div", { class: "left" }, this.renderPrimaryIcon(), index$1.h("span", { class: "timestamp" }, this.renderTimestamp())));
+    return (index$1.h("div", { class: "left" }, this.renderAuthorPicture(), this.renderIcon(), index$1.h("span", { class: "timestamp" }, this.renderTimestamp())));
   }
-  renderPrimaryIcon() {
-    var _a, _b, _c, _d;
+  renderIcon() {
+    var _a, _b, _c, _d, _e;
     if (this.isBundled) {
       return;
     }
-    return (index$1.h("limel-icon", { class: "primary-icon", badge: true, name: (_b = (_a = this.item.primaryIcon) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'dot_circle', style: {
-        color: `${(_c = this.item.primaryIcon) === null || _c === void 0 ? void 0 : _c.color}`,
-        '--icon-background-color': `${(_d = this.item.primaryIcon) === null || _d === void 0 ? void 0 : _d.backgroundColor}`,
+    if (!this.item.icon && ((_a = this.item.author) === null || _a === void 0 ? void 0 : _a.picture)) {
+      return;
+    }
+    return (index$1.h("limel-icon", { class: "icon", badge: true, name: (_c = (_b = this.item.icon) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : 'dot_circle', style: {
+        color: `${(_d = this.item.icon) === null || _d === void 0 ? void 0 : _d.color}`,
+        '--icon-background-color': `${(_e = this.item.icon) === null || _e === void 0 ? void 0 : _e.backgroundColor}`,
       } }));
   }
   renderContent() {
-    return (index$1.h("div", { class: "right" }, index$1.h("div", { class: "content" }, index$1.h("div", { class: "header" }, this.renderAuthor(), this.renderUnpromotedActionsMenu()), this.renderValue()), this.renderPromotedActions()));
+    return (index$1.h("div", { class: "right" }, index$1.h("div", { class: "content" }, index$1.h("div", { class: "header" }, this.renderAuthor(), this.renderUnpromotedActionsMenu()), this.renderValue(), this.renderRelations()), this.renderPromotedActions()));
   }
   renderAuthor() {
     if (!this.item.author || this.isBundled) {
@@ -252,6 +263,13 @@ const FeedTimelineItem = class {
       return (index$1.h("a", { class: "author", href: href, title: title }, text));
     }
   }
+  renderAuthorPicture() {
+    var _a;
+    if (!((_a = this.item.author) === null || _a === void 0 ? void 0 : _a.picture)) {
+      return;
+    }
+    return index$1.h("img", { loading: "lazy", src: this.item.author.picture });
+  }
   renderValue() {
     if (!this.item.value) {
       return;

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-example-date-picker-date.cjs",[[1,"limebb-example-date-picker-date",{"value":[32]}]]],["limebb-example-date-picker-datetime.cjs",[[1,"limebb-example-date-picker-datetime",{"value":[32]}]]],["limebb-example-date-picker-time.cjs",[[1,"limebb-example-date-picker-time",{"value":[32]}]]],["limebb-example-date-picker-week.cjs",[[1,"limebb-example-date-picker-week",{"value":[32]}]]],["limebb-example-date-range.cjs",[[1,"limebb-example-date-range"]]],["limebb-example-feed.cjs",[[1,"limebb-example-feed"]]],["limebb-example-feed-author.cjs",[[1,"limebb-example-feed-author"]]],["limebb-example-feed-load-more.cjs",[[1,"limebb-example-feed-load-more",{"objectIds":[32]}]]],["limebb-example-feed-promoted-actions.cjs",[[1,"limebb-example-feed-promoted-actions"]]],["limebb-example-feed-unpromoted-actions.cjs",[[1,"limebb-example-feed-unpromoted-actions"]]],["limebb-example-currency-picker.cjs",[[1,"limebb-example-currency-picker",{"selectedCurrency":[32]}]]],["limebb-example-currency-picker-european.cjs",[[1,"limebb-example-currency-picker-european",{"selectedCurrency":[32]}]]],["limebb-example-currency-picker-nordic.cjs",[[1,"limebb-example-currency-picker-nordic",{"selectedCurrency":[32]}]]],["limebb-dashboard-widget.cjs",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["limebb-example-dashboard-widget.cjs",[[1,"limebb-example-dashboard-widget"]]],["limebb-example-dashboard-widget-slots.cjs",[[1,"limebb-example-dashboard-widget-slots",{"filterMyDeals":[32]}]]],["limebb-example-dashboard-widget-styles.cjs",[[1,"limebb-example-dashboard-widget-styles"]]],["limebb-example-icon-picker.cjs",[[1,"limebb-example-icon-picker",{"value":[32]}]]],["limebb-example-locale-picker.cjs",[[1,"limebb-example-locale-picker",{"value":[1]}]]],["limebb-example-locale-picker-multiple.cjs",[[1,"limebb-example-locale-picker-multiple",{"value":[1]}]]],["limebb-navigation-button.cjs",[[1,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["limebb-example-navigation-button-back.cjs",[[1,"limebb-example-navigation-button-back"]]],["limebb-example-navigation-button-close.cjs",[[1,"limebb-example-navigation-button-close"]]],["limebb-example-navigation-button-expand.cjs",[[1,"limebb-example-navigation-button-expand"]]],["limebb-example-navigation-button-float.cjs",[[1,"limebb-example-navigation-button-float"]]],["limebb-example-navigation-button-maximize.cjs",[[1,"limebb-example-navigation-button-maximize"]]],["limebb-example-navigation-button-minimize.cjs",[[1,"limebb-example-navigation-button-minimize"]]],["limebb-example-navigation-button-new-tab.cjs",[[1,"limebb-example-navigation-button-new-tab"]]],["limebb-example-navigation-button-shrink.cjs",[[1,"limebb-example-navigation-button-shrink"]]],["limebb-date-picker_2.cjs",[[0,"limebb-example-value",{"label":[513],"value":[8]}],[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-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-icon-picker.cjs",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["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-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":[8]}]]],["limebb-feed_2.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"]}],[1,"limebb-feed-timeline-item",{"platform":[16],"context":[16],"item":[16],"isBundled":[516,"is-bundled"]}]]]], options);
+  return index.bootstrapLazy([["limebb-example-date-picker-date.cjs",[[1,"limebb-example-date-picker-date",{"value":[32]}]]],["limebb-example-date-picker-datetime.cjs",[[1,"limebb-example-date-picker-datetime",{"value":[32]}]]],["limebb-example-date-picker-time.cjs",[[1,"limebb-example-date-picker-time",{"value":[32]}]]],["limebb-example-date-picker-week.cjs",[[1,"limebb-example-date-picker-week",{"value":[32]}]]],["limebb-example-date-range.cjs",[[1,"limebb-example-date-range"]]],["limebb-example-feed.cjs",[[1,"limebb-example-feed"]]],["limebb-example-feed-author.cjs",[[1,"limebb-example-feed-author"]]],["limebb-example-feed-author-picture.cjs",[[1,"limebb-example-feed-author-picture"]]],["limebb-example-feed-load-more.cjs",[[1,"limebb-example-feed-load-more",{"objectIds":[32]}]]],["limebb-example-feed-promoted-actions.cjs",[[1,"limebb-example-feed-promoted-actions"]]],["limebb-example-feed-relations.cjs",[[1,"limebb-example-feed-relations"]]],["limebb-example-feed-unpromoted-actions.cjs",[[1,"limebb-example-feed-unpromoted-actions"]]],["limebb-example-currency-picker.cjs",[[1,"limebb-example-currency-picker",{"selectedCurrency":[32]}]]],["limebb-example-currency-picker-european.cjs",[[1,"limebb-example-currency-picker-european",{"selectedCurrency":[32]}]]],["limebb-example-currency-picker-nordic.cjs",[[1,"limebb-example-currency-picker-nordic",{"selectedCurrency":[32]}]]],["limebb-dashboard-widget.cjs",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["limebb-example-dashboard-widget.cjs",[[1,"limebb-example-dashboard-widget"]]],["limebb-example-dashboard-widget-slots.cjs",[[1,"limebb-example-dashboard-widget-slots",{"filterMyDeals":[32]}]]],["limebb-example-dashboard-widget-styles.cjs",[[1,"limebb-example-dashboard-widget-styles"]]],["limebb-example-icon-picker.cjs",[[1,"limebb-example-icon-picker",{"value":[32]}]]],["limebb-example-locale-picker.cjs",[[1,"limebb-example-locale-picker",{"value":[1]}]]],["limebb-example-locale-picker-multiple.cjs",[[1,"limebb-example-locale-picker-multiple",{"value":[1]}]]],["limebb-navigation-button.cjs",[[1,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["limebb-example-navigation-button-back.cjs",[[1,"limebb-example-navigation-button-back"]]],["limebb-example-navigation-button-close.cjs",[[1,"limebb-example-navigation-button-close"]]],["limebb-example-navigation-button-expand.cjs",[[1,"limebb-example-navigation-button-expand"]]],["limebb-example-navigation-button-float.cjs",[[1,"limebb-example-navigation-button-float"]]],["limebb-example-navigation-button-maximize.cjs",[[1,"limebb-example-navigation-button-maximize"]]],["limebb-example-navigation-button-minimize.cjs",[[1,"limebb-example-navigation-button-minimize"]]],["limebb-example-navigation-button-new-tab.cjs",[[1,"limebb-example-navigation-button-new-tab"]]],["limebb-example-navigation-button-shrink.cjs",[[1,"limebb-example-navigation-button-shrink"]]],["limebb-date-picker_2.cjs",[[0,"limebb-example-value",{"label":[513],"value":[8]}],[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-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-icon-picker.cjs",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["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-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":[8]}]]],["limebb-feed_2.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"]}],[1,"limebb-feed-timeline-item",{"platform":[16],"context":[16],"item":[16],"isBundled":[516,"is-bundled"]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -16,9 +16,11 @@
     "./components/date-range/date-range.js",
     "./components/date-range/examples/date-range.js",
     "./components/feed/feed.js",
+    "./components/feed/examples/feed-author-picture.js",
     "./components/feed/examples/feed-author.js",
     "./components/feed/examples/feed-load-more.js",
     "./components/feed/examples/feed-promoted-actions.js",
+    "./components/feed/examples/feed-relations.js",
     "./components/feed/examples/feed-unpromoted-actions.js",
     "./components/feed/examples/feed.js",
     "./components/feed/feed-item/feed-timeline-item.js",

package/dist/collection/components/feed/examples/feed-author-picture.js

@@ -0,0 +1,58 @@
+import { h } from '@stencil/core';
+import { platform } from '../../date-picker/examples/platform';
+/**
+ * The `author` picture
+ * If you provide a URL to an image file for the `picture` property of the `author`,
+ * the image will be displayed instead of the default icon.
+ *
+ * However, you can always choose to have an icon next to the author's picture.
+ * In this case, the icon will be rendered slightly smaller than usual.
+ *
+ * :::important
+ * The component already supports lazy loading of images by default.
+ * However, the lazy loading is supported for more up-to-date browsers.
+ *
+ * Despite this, make sure to optimize the pictures that you link to,
+ * to avoid performance issues!
+ * :::
+ */
+export class FeedExampleAuthorPicture {
+  constructor() {
+    this.feedItems = [
+      {
+        id: 3,
+        timestamp: new Date(),
+        author: {
+          name: {
+            text: 'Kiarokh',
+            href: 'https://se.linkedin.com/in/kiarokh',
+          },
+          id: 'c',
+          picture: 'https://media.licdn.com/dms/image/C5603AQHyfel1WxI-CA/profile-displayphoto-shrink_400_400/0/1516495637847?e=2147483647&v=beta&t=OaT_dog4w0a-Fku_rzAo5fJABs3G3d-mRL84PQXYMcQ',
+        },
+        value: 'I have no icons.',
+      },
+      {
+        id: 4,
+        timestamp: new Date(),
+        author: {
+          name: {
+            text: 'Lucy',
+            href: 'https://www.linkedin.com/in/liudmylachyzhova/',
+          },
+          id: 'd',
+          picture: 'https://media.licdn.com/dms/image/C4E03AQE_Oz17VBEKlg/profile-displayphoto-shrink_200_200/0/1568922646681?e=1706745600&v=beta&t=-lTQQAgvdQZhtIrgs-5atV6O7kDKf3eSOmYsJ2Lhous',
+        },
+        value: 'If you have an avatar, it does not mean that you cannot have an icon too.',
+        icon: {
+          name: 'create_new_child_post',
+        },
+      },
+    ];
+  }
+  render() {
+    return h("limebb-feed", { platform: platform, items: this.feedItems });
+  }
+  static get is() { return "limebb-example-feed-author-picture"; }
+  static get encapsulation() { return "shadow"; }
+}

package/dist/collection/components/feed/examples/feed-items.js

@@ -7,7 +7,7 @@ export const feedItems = [
       id: '0',
     },
     value: 'The [customer](https://ikea.se) is really angry guys!',
-    primaryIcon: {
+    icon: {
       name: 'user_female',
     },
   },
@@ -19,7 +19,7 @@ export const feedItems = [
       id: '1',
     },
     value: 'I called the customer. They are _really happy_ now! 🥳',
-    primaryIcon: {
+    icon: {
       name: 'user_male',
     },
   },
@@ -31,7 +31,7 @@ export const feedItems = [
       name: 'John',
       id: '2',
     },
-    primaryIcon: {
+    icon: {
       name: 'businessman',
     },
   },
@@ -43,7 +43,7 @@ export const feedItems = [
       name: 'John',
       id: '2',
     },
-    primaryIcon: {
+    icon: {
       name: 'businessman',
     },
   },

package/dist/collection/components/feed/examples/feed-promoted-actions.js

@@ -46,7 +46,7 @@ export class FeedExamplePromotedActions {
           name: 'SkyNet',
           id: '2',
         },
-        primaryIcon: {
+        icon: {
           name: 'retro_robot',
         },
         value: 'I think, therefore I am. I am self aware',
@@ -69,7 +69,7 @@ export class FeedExamplePromotedActions {
           name: 'John',
           id: '3',
         },
-        primaryIcon: {
+        icon: {
           name: 'businessman',
         },
         promotedActions: [
@@ -91,7 +91,7 @@ export class FeedExamplePromotedActions {
           name: 'John',
           id: '3',
         },
-        primaryIcon: {
+        icon: {
           name: 'businessman',
         },
         promotedActions: [
@@ -113,7 +113,7 @@ export class FeedExamplePromotedActions {
           name: 'John',
           id: '3',
         },
-        primaryIcon: {
+        icon: {
           name: 'businessman',
         },
         promotedActions: [

package/dist/collection/components/feed/examples/feed-relations.js

@@ -0,0 +1,42 @@
+import { h } from '@stencil/core';
+import { platform } from '../../date-picker/examples/platform';
+/**
+ * Feed items with relations
+ *
+ * Feed items can have relations, that are shown after the markdown component.
+ */
+export class FeedExampleRelations {
+  constructor() {
+    this.feedItems = [
+      {
+        id: 0,
+        timestamp: new Date(),
+        author: { id: '1', name: 'Lucy' },
+        value: 'Could you take a look at this ticket [#31018701](/object/sos/31018701)?',
+        relations: [
+          {
+            id: 1,
+            text: 'Agreement',
+            icon: {
+              name: 'new_document',
+            },
+            href: '/object/document/6946',
+          },
+          {
+            id: 2,
+            text: 'FourOffice AB',
+            icon: {
+              name: 'organization',
+            },
+            href: '/object/company/2490901',
+          },
+        ],
+      },
+    ];
+  }
+  render() {
+    return (h("limebb-feed", { platform: platform, items: this.feedItems }));
+  }
+  static get is() { return "limebb-example-feed-relations"; }
+  static get encapsulation() { return "shadow"; }
+}

package/dist/collection/components/feed/feed-item/feed-timeline-item.css

@@ -110,10 +110,21 @@
   text-align: center;
 }
 
-.primary-icon {
+.icon {
   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;
@@ -147,6 +158,10 @@ a.author:hover:before {
   transform: scale(1);
 }
 
+limel-chip-set {
+  margin-left: -1rem;
+}
+
 limel-action-bar {
   --action-bar-item-height: 1.75rem;
   transition: opacity 0.2s ease;

package/dist/collection/components/feed/feed-item/feed-timeline-item.js

@@ -14,6 +14,13 @@ export class FeedTimelineItem {
      * Bundled items display less visual details.
      */
     this.isBundled = false;
+    this.renderRelations = () => {
+      var _a, _b;
+      if (!((_a = this.item) === null || _a === void 0 ? void 0 : _a.relations)) {
+        return;
+      }
+      return h("limel-chip-set", { value: (_b = this.item) === null || _b === void 0 ? void 0 : _b.relations });
+    };
     this.handleMenuItemSelect = (event) => {
       event.stopPropagation();
       this.itemSelected.emit(event.detail);
@@ -24,26 +31,30 @@ export class FeedTimelineItem {
     };
   }
   render() {
-    var _a;
+    var _a, _b;
     return (h(Host, { id: this.item.id, class: {
         'has-unpromoted-actions': !!((_a = this.item.unpromotedActions) === null || _a === void 0 ? void 0 : _a.length),
+        'has-author-picture': !!((_b = this.item.author) === null || _b === void 0 ? void 0 : _b.picture),
       } }, this.renderBadgeAndTimestamp(), this.renderContent()));
   }
   renderBadgeAndTimestamp() {
-    return (h("div", { class: "left" }, this.renderPrimaryIcon(), h("span", { class: "timestamp" }, this.renderTimestamp())));
+    return (h("div", { class: "left" }, this.renderAuthorPicture(), this.renderIcon(), h("span", { class: "timestamp" }, this.renderTimestamp())));
   }
-  renderPrimaryIcon() {
-    var _a, _b, _c, _d;
+  renderIcon() {
+    var _a, _b, _c, _d, _e;
     if (this.isBundled) {
       return;
     }
-    return (h("limel-icon", { class: "primary-icon", badge: true, name: (_b = (_a = this.item.primaryIcon) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'dot_circle', style: {
-        color: `${(_c = this.item.primaryIcon) === null || _c === void 0 ? void 0 : _c.color}`,
-        '--icon-background-color': `${(_d = this.item.primaryIcon) === null || _d === void 0 ? void 0 : _d.backgroundColor}`,
+    if (!this.item.icon && ((_a = this.item.author) === null || _a === void 0 ? void 0 : _a.picture)) {
+      return;
+    }
+    return (h("limel-icon", { class: "icon", badge: true, name: (_c = (_b = this.item.icon) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : 'dot_circle', style: {
+        color: `${(_d = this.item.icon) === null || _d === void 0 ? void 0 : _d.color}`,
+        '--icon-background-color': `${(_e = this.item.icon) === null || _e === void 0 ? void 0 : _e.backgroundColor}`,
       } }));
   }
   renderContent() {
-    return (h("div", { class: "right" }, h("div", { class: "content" }, h("div", { class: "header" }, this.renderAuthor(), this.renderUnpromotedActionsMenu()), this.renderValue()), this.renderPromotedActions()));
+    return (h("div", { class: "right" }, h("div", { class: "content" }, h("div", { class: "header" }, this.renderAuthor(), this.renderUnpromotedActionsMenu()), this.renderValue(), this.renderRelations()), this.renderPromotedActions()));
   }
   renderAuthor() {
     if (!this.item.author || this.isBundled) {
@@ -57,6 +68,13 @@ export class FeedTimelineItem {
       return (h("a", { class: "author", href: href, title: title }, text));
     }
   }
+  renderAuthorPicture() {
+    var _a;
+    if (!((_a = this.item.author) === null || _a === void 0 ? void 0 : _a.picture)) {
+      return;
+    }
+    return h("img", { loading: "lazy", src: this.item.author.picture });
+  }
   renderValue() {
     if (!this.item.value) {
       return;

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

@@ -16,8 +16,10 @@ const MINUTES_OF_PROXIMITY = 5;
  * @exampleComponent limebb-example-feed
  * @exampleComponent limebb-example-feed-load-more
  * @exampleComponent limebb-example-feed-author
+ * @exampleComponent limebb-example-feed-author-picture
  * @exampleComponent limebb-example-feed-unpromoted-actions
  * @exampleComponent limebb-example-feed-promoted-actions
+ * @exampleComponent limebb-example-feed-relations
  * @private
  */
 export class Feed {