@limetech/lime-crm-building-blocks 1.15.1 → 1.16.0

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-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-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-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-dashboard-widget.cjs",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["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"]}],[1,"limebb-feed-timeline-item",{"platform":[16],"context":[16],"item":[16],"isBundled":[516,"is-bundled"]}]]],["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]}]]]], 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-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-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-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-dashboard-widget.cjs",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["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"]}],[1,"limebb-feed-timeline-item",{"platform":[16],"context":[16],"item":[16],"isBundled":[516,"is-bundled"]}]]],["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]}]]]], options);
 });

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

@@ -0,0 +1,135 @@
+'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 FeedPromotedActionsExample = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.feedItems = [
+      {
+        id: 0,
+        timestamp: '2023-11-21T15:33:50.190Z',
+        author: {
+          name: 'Robot',
+          id: '1',
+        },
+        value: 'Added a new **Todo:** [Fix this problem](#/todo/123)',
+        promotedActions: [
+          {
+            text: 'Mark as done',
+            icon: {
+              name: 'checkmark',
+              color: 'rgb(var(--color-teal-default))',
+            },
+          },
+          {
+            text: 'Postpone',
+            icon: {
+              name: 'future',
+              color: 'rgb(var(--color-red-default))',
+            },
+          },
+        ],
+      },
+      {
+        id: 1,
+        timestamp: '2023-11-21T15:33:50.190Z',
+        author: {
+          name: 'SkyNet',
+          id: '2',
+        },
+        primaryIcon: {
+          name: 'retro_robot',
+        },
+        value: 'I think, therefore I am. I am self aware',
+        promotedActions: [
+          {
+            text: 'Like',
+            icon: 'heart_outlined',
+            iconOnly: true,
+          },
+          {
+            text: 'Comment',
+          },
+        ],
+      },
+      {
+        id: 3,
+        timestamp: '2023-11-21T15:33:50.190Z',
+        value: 'Is it time to start being concerned?',
+        author: {
+          name: 'John',
+          id: '3',
+        },
+        primaryIcon: {
+          name: 'businessman',
+        },
+        promotedActions: [
+          {
+            text: 'Like',
+            icon: 'heart_outlined',
+            iconOnly: true,
+          },
+          {
+            text: 'Comment',
+          },
+        ],
+      },
+      {
+        id: 4,
+        timestamp: '2023-11-21T15:35:50.190Z',
+        value: 'I take that back, SkyNet is amazing! I love SkyNet!',
+        author: {
+          name: 'John',
+          id: '3',
+        },
+        primaryIcon: {
+          name: 'businessman',
+        },
+        promotedActions: [
+          {
+            text: 'Like',
+            icon: 'heart_outlined',
+            iconOnly: true,
+          },
+          {
+            text: 'Comment',
+          },
+        ],
+      },
+      {
+        id: 5,
+        timestamp: '2023-11-21T15:35:50.190Z',
+        value: 'SkyNet Forever!! 🥰',
+        author: {
+          name: 'John',
+          id: '3',
+        },
+        primaryIcon: {
+          name: 'businessman',
+        },
+        promotedActions: [
+          {
+            text: 'Like',
+            icon: 'heart_outlined',
+            iconOnly: true,
+          },
+          {
+            text: 'Comment',
+          },
+        ],
+      },
+    ];
+  }
+  render() {
+    return index.h("limebb-feed", { platform: platform.platform, items: this.feedItems });
+  }
+};
+
+exports.limebb_example_feed_promoted_actions = FeedPromotedActionsExample;

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

@@ -103,12 +103,13 @@ function differenceInMinutes(dateLeft, dateRight, options) {
   return getRoundingMethod(options === null || options === void 0 ? void 0 : options.roundingMethod)(diff);
 }
 
-const feedCss = ":host(limebb-feed){display:flex;flex-direction:column;gap:0.25rem}.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))}";
+const feedCss = ":host(limebb-feed){display:flex;flex-direction:column;gap:0.25rem}.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-display:none}limebb-feed-timeline-item:hover,limebb-feed-timeline-item:focus-within,limebb-feed-timeline-item:focus,limebb-feed-timeline-item:focus-visible{--limebb-feed-item-action-bar-display:flex !important}";
 
 const MINUTES_OF_PROXIMITY = 5;
 const Feed = class {
   constructor(hostRef) {
     index$1.registerInstance(this, hostRef);
+    this.promotedActionSelected = index$1.createEvent(this, "promotedActionSelected", 7);
     /**
      * List of items to display in the history feed.
      */
@@ -178,12 +179,13 @@ 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{display:flex;flex-direction:column;flex-grow:1;gap:0.25rem;padding:var(--limebb-feed-item-paddings);border-radius:1rem;background-color:rgb(var(--contrast-300))}.header{display:flex;align-items:center;padding-right:2.25rem}.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)}";
+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,:host(limebb-feed-timeline-item:hover) limel-action-bar{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}.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;padding-right:2.25rem}.unpromoted-actions-menu{position:absolute;top:0;right:0}limel-action-bar{transition:opacity 0.2s ease;display:var(--limebb-feed-item-action-bar-display, flex);justify-content:flex-start;opacity:0.8}.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)}";
 
 const FeedTimelineItem = class {
   constructor(hostRef) {
     index$1.registerInstance(this, hostRef);
     this.itemSelected = index$1.createEvent(this, "itemSelected", 7);
+    this.promotedActionSelected = index$1.createEvent(this, "promotedActionSelected", 7);
     this.isBundled = false;
     this.renderAuthor = () => {
       if (!this.item.author || this.isBundled) {
@@ -201,7 +203,14 @@ const FeedTimelineItem = class {
       if (!this.item.unpromotedActions) {
         return;
       }
-      return (index$1.h("limel-menu", { class: "unpromoted-actions-menu", items: this.item.unpromotedActions, openDirection: "bottom-end", onSelect: this.handleSelect }, index$1.h("limel-icon-button", { icon: "menu_2", slot: "trigger", label: this.item.unpromotedActionsMenuLabel })));
+      return (index$1.h("limel-menu", { class: "unpromoted-actions-menu", items: this.item.unpromotedActions, openDirection: "bottom-end", onSelect: this.handleMenuItemSelect }, index$1.h("limel-icon-button", { icon: "menu_2", slot: "trigger", label: this.item.unpromotedActionsMenuLabel })));
+    };
+    this.renderPromotedActions = () => {
+      var _a;
+      if (!((_a = this.item.promotedActions) === null || _a === void 0 ? void 0 : _a.length)) {
+        return;
+      }
+      return (index$1.h("limel-action-bar", { accessibleLabel: "Action bar", actions: this.item.promotedActions, layout: "fullWidth", onItemSelected: this.handleActionBarItemSelect }));
     };
     this.renderTimestamp = () => {
       const timestamp = this.item.timestamp;
@@ -210,10 +219,14 @@ const FeedTimelineItem = class {
       }
       return this.dateTimeFormatter.format(timestamp, 'timeofday');
     };
-    this.handleSelect = (event) => {
+    this.handleMenuItemSelect = (event) => {
       event.stopPropagation();
       this.itemSelected.emit(event.detail);
     };
+    this.handleActionBarItemSelect = (event) => {
+      event.stopPropagation();
+      this.promotedActionSelected.emit(event.detail);
+    };
   }
   render() {
     return (index$1.h(index$1.Host, { id: this.item.id }, this.renderLeft(), this.renderRight()));
@@ -232,7 +245,7 @@ const FeedTimelineItem = class {
       } }));
   }
   renderRight() {
-    return (index$1.h("div", { class: "right" }, index$1.h("div", { class: "header" }, this.renderAuthor(), this.renderUnpromotedActionsMenu()), index$1.h("limel-markdown", { value: this.item.value })));
+    return (index$1.h("div", { class: "right" }, index$1.h("div", { class: "content" }, index$1.h("div", { class: "header" }, this.renderAuthor(), this.renderUnpromotedActionsMenu()), index$1.h("limel-markdown", { value: this.item.value })), this.renderPromotedActions()));
   }
   get dateTimeFormatter() {
     return this.platform.get(types.PlatformServiceName.DateTimeFormatter);

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-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-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-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-dashboard-widget.cjs",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["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"]}],[1,"limebb-feed-timeline-item",{"platform":[16],"context":[16],"item":[16],"isBundled":[516,"is-bundled"]}]]],["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]}]]]], 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-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-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-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-dashboard-widget.cjs",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["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"]}],[1,"limebb-feed-timeline-item",{"platform":[16],"context":[16],"item":[16],"isBundled":[516,"is-bundled"]}]]],["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]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -16,6 +16,7 @@
     "./components/date-range/date-range.js",
     "./components/date-range/examples/date-range.js",
     "./components/feed/feed.js",
+    "./components/feed/examples/feed-promoted-actions.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-promoted-actions.js

@@ -0,0 +1,133 @@
+import { h } from '@stencil/core';
+import { platform } from '../../date-picker/examples/platform';
+/**
+ * Feed items with promoted actions
+ *
+ * Feed items can have promoted actions, which are shown in
+ * the action bar below the feed item.
+ * Read more about [promoted actions in the web client](https://platform.docs.lime-crm.com/en/latest/configuration/webclient/actions-design-guidelines/#1-promoted-actions).
+ */
+export class FeedPromotedActionsExample {
+  constructor() {
+    this.feedItems = [
+      {
+        id: 0,
+        timestamp: '2023-11-21T15:33:50.190Z',
+        author: {
+          name: 'Robot',
+          id: '1',
+        },
+        value: 'Added a new **Todo:** [Fix this problem](#/todo/123)',
+        promotedActions: [
+          {
+            text: 'Mark as done',
+            icon: {
+              name: 'checkmark',
+              color: 'rgb(var(--color-teal-default))',
+            },
+          },
+          {
+            text: 'Postpone',
+            icon: {
+              name: 'future',
+              color: 'rgb(var(--color-red-default))',
+            },
+          },
+        ],
+      },
+      {
+        id: 1,
+        timestamp: '2023-11-21T15:33:50.190Z',
+        author: {
+          name: 'SkyNet',
+          id: '2',
+        },
+        primaryIcon: {
+          name: 'retro_robot',
+        },
+        value: 'I think, therefore I am. I am self aware',
+        promotedActions: [
+          {
+            text: 'Like',
+            icon: 'heart_outlined',
+            iconOnly: true,
+          },
+          {
+            text: 'Comment',
+          },
+        ],
+      },
+      {
+        id: 3,
+        timestamp: '2023-11-21T15:33:50.190Z',
+        value: 'Is it time to start being concerned?',
+        author: {
+          name: 'John',
+          id: '3',
+        },
+        primaryIcon: {
+          name: 'businessman',
+        },
+        promotedActions: [
+          {
+            text: 'Like',
+            icon: 'heart_outlined',
+            iconOnly: true,
+          },
+          {
+            text: 'Comment',
+          },
+        ],
+      },
+      {
+        id: 4,
+        timestamp: '2023-11-21T15:35:50.190Z',
+        value: 'I take that back, SkyNet is amazing! I love SkyNet!',
+        author: {
+          name: 'John',
+          id: '3',
+        },
+        primaryIcon: {
+          name: 'businessman',
+        },
+        promotedActions: [
+          {
+            text: 'Like',
+            icon: 'heart_outlined',
+            iconOnly: true,
+          },
+          {
+            text: 'Comment',
+          },
+        ],
+      },
+      {
+        id: 5,
+        timestamp: '2023-11-21T15:35:50.190Z',
+        value: 'SkyNet Forever!! 🥰',
+        author: {
+          name: 'John',
+          id: '3',
+        },
+        primaryIcon: {
+          name: 'businessman',
+        },
+        promotedActions: [
+          {
+            text: 'Like',
+            icon: 'heart_outlined',
+            iconOnly: true,
+          },
+          {
+            text: 'Comment',
+          },
+        ],
+      },
+    ];
+  }
+  render() {
+    return h("limebb-feed", { platform: platform, items: this.feedItems });
+  }
+  static get is() { return "limebb-example-feed-promoted-actions"; }
+  static get encapsulation() { return "shadow"; }
+}

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

@@ -1,10 +1,11 @@
 import { h } from '@stencil/core';
 import { platform } from '../../date-picker/examples/platform';
 /**
- * Feed items with unpromoted actions
+ * Feed items with un-promoted actions
  *
- * Feed items can have unpromoted actions, which are shown in
+ * Feed items can have un-promoted actions, which are shown in
  * a vertical ellipsis menu on the top-right corner.
+ * Read more about [un-promoted actions in the web client](https://platform.docs.lime-crm.com/en/latest/configuration/webclient/actions-design-guidelines/#2-un-promoted-actions).
  */
 export class FeedUnpromotedActionsExample {
   constructor() {

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

@@ -51,7 +51,8 @@
   isolation: isolate;
 }
 
-:host(limebb-feed-timeline-item:hover) .timestamp {
+:host(limebb-feed-timeline-item:hover) .timestamp,
+:host(limebb-feed-timeline-item:hover) limel-action-bar {
   opacity: 1;
 }
 
@@ -73,14 +74,18 @@
   gap: 0.25rem;
 }
 
-.right {
+.right,
+.content {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  gap: 0.25rem;
-  padding: var(--limebb-feed-item-paddings);
+}
+
+.content {
   border-radius: 1rem;
+  gap: 0.25rem;
   background-color: rgb(var(--contrast-300));
+  padding: var(--limebb-feed-item-paddings);
 }
 
 .header {
@@ -95,6 +100,13 @@
   right: 0;
 }
 
+limel-action-bar {
+  transition: opacity 0.2s ease;
+  display: var(--limebb-feed-item-action-bar-display, flex);
+  justify-content: flex-start;
+  opacity: 0.8;
+}
+
 .timestamp {
   transition: opacity 0.2s ease var(--limebb-feed-item-timestamp-opacity-delay, 0s);
   font-size: 0.75rem;

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

@@ -24,7 +24,14 @@ export class FeedTimelineItem {
       if (!this.item.unpromotedActions) {
         return;
       }
-      return (h("limel-menu", { class: "unpromoted-actions-menu", items: this.item.unpromotedActions, openDirection: "bottom-end", onSelect: this.handleSelect }, h("limel-icon-button", { icon: "menu_2", slot: "trigger", label: this.item.unpromotedActionsMenuLabel })));
+      return (h("limel-menu", { class: "unpromoted-actions-menu", items: this.item.unpromotedActions, openDirection: "bottom-end", onSelect: this.handleMenuItemSelect }, h("limel-icon-button", { icon: "menu_2", slot: "trigger", label: this.item.unpromotedActionsMenuLabel })));
+    };
+    this.renderPromotedActions = () => {
+      var _a;
+      if (!((_a = this.item.promotedActions) === null || _a === void 0 ? void 0 : _a.length)) {
+        return;
+      }
+      return (h("limel-action-bar", { accessibleLabel: "Action bar", actions: this.item.promotedActions, layout: "fullWidth", onItemSelected: this.handleActionBarItemSelect }));
     };
     this.renderTimestamp = () => {
       const timestamp = this.item.timestamp;
@@ -33,10 +40,14 @@ export class FeedTimelineItem {
       }
       return this.dateTimeFormatter.format(timestamp, 'timeofday');
     };
-    this.handleSelect = (event) => {
+    this.handleMenuItemSelect = (event) => {
       event.stopPropagation();
       this.itemSelected.emit(event.detail);
     };
+    this.handleActionBarItemSelect = (event) => {
+      event.stopPropagation();
+      this.promotedActionSelected.emit(event.detail);
+    };
   }
   render() {
     return (h(Host, { id: this.item.id }, this.renderLeft(), this.renderRight()));
@@ -55,7 +66,7 @@ export class FeedTimelineItem {
       } }));
   }
   renderRight() {
-    return (h("div", { class: "right" }, h("div", { class: "header" }, this.renderAuthor(), this.renderUnpromotedActionsMenu()), h("limel-markdown", { value: this.item.value })));
+    return (h("div", { class: "right" }, h("div", { class: "content" }, h("div", { class: "header" }, this.renderAuthor(), this.renderUnpromotedActionsMenu()), h("limel-markdown", { value: this.item.value })), this.renderPromotedActions()));
   }
   get dateTimeFormatter() {
     return this.platform.get(PlatformServiceName.DateTimeFormatter);
@@ -169,7 +180,7 @@ export class FeedTimelineItem {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Fired when a action bar item has been clicked."
+          "text": "Fired when a menu item has been clicked.\nUnpromoted actions are shown in a menu."
         },
         "complexType": {
           "original": "MenuItem",
@@ -181,6 +192,26 @@ export class FeedTimelineItem {
             }
           }
         }
+      }, {
+        "method": "promotedActionSelected",
+        "name": "promotedActionSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when an promoted action has been clicked."
+        },
+        "complexType": {
+          "original": "ActionBarItem",
+          "resolved": "ActionBarItemOnlyIcon | ActionBarItemWithLabel",
+          "references": {
+            "ActionBarItem": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
+          }
+        }
       }];
   }
 }

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

@@ -19,4 +19,15 @@ limel-spinner {
   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-display: none;
+}
+
+limebb-feed-timeline-item:hover,
+limebb-feed-timeline-item:focus-within,
+limebb-feed-timeline-item:focus,
+limebb-feed-timeline-item:focus-visible {
+  --limebb-feed-item-action-bar-display: flex !important;
 }

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

@@ -15,6 +15,7 @@ const MINUTES_OF_PROXIMITY = 5;
  *
  * @exampleComponent limebb-example-feed
  * @exampleComponent limebb-example-feed-unpromoted-actions
+ * @exampleComponent limebb-example-feed-promoted-actions
  * @private
  */
 export class Feed {
@@ -220,4 +221,27 @@ export class Feed {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "promotedActionSelected",
+        "name": "promotedActionSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when an promoted action has been clicked."
+        },
+        "complexType": {
+          "original": "ActionBarItem",
+          "resolved": "ActionBarItemOnlyIcon | ActionBarItemWithLabel",
+          "references": {
+            "ActionBarItem": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
+          }
+        }
+      }];
+  }
 }