@limetech/lime-crm-building-blocks 1.115.1 → 1.116.1

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

@@ -1,34 +1,27 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-519b904a.js');
-const index_esm = require('./index.esm-e01e9bd4.js');
+var index = require('./index-C_OnxXhP.js');
+var index_esm = require('./index.esm-DhBVH875.js');
 
+function isIconList(item) {
+    return 'type' in item && item.type === 'iconList';
+}
+function getProcessedItemTimestamp(item) {
+    if (item.type === 'chat' || item.type === 'iconList') {
+        return item.item.timestamp;
+    }
+    return undefined;
+}
 /**
- * Processes a list of notifications by adding date headers and a "new items" indicator.
+ * Processes a list of chat list inputs by adding date headers and a "new items" indicator.
  *
- * @param items - The list of notification items to process. These items must be pre-sorted by their `timestamp` in descending order.
+ * @param items - The list of items to process. Pre-sorted by `timestamp` in descending order.
  * @param dateTimeFormatter - A service used to format dates for the date headers.
- * @param lastVisitedTimestamp - The timestamp of the user's last visit. This is used to determine where the "new items" indicator should be placed.
- *
- * @returns An array of processed items, including notifications, date headers, and a "new items" indicator if applicable.
- *
- * @example
- * const processedItems = processNotificationItems(
- *     notifications,
- *     dateTimeFormatter,
- *     new Date('2024-09-01T10:00:00Z')
- * );
+ * @param lastVisitedTimestamp - The timestamp of the user's last visit. Used to position the
+ *   "new items" indicator.
  *
- * // Output: [
- * //   { type: 'dateHeader', date: '2024-09-01' },
- * //   { type: 'notification', item: notification1 },
- * //   { type: 'notification', item: notification2 },
- * //   { type: 'newItemIndicator' },
- * //   { type: 'dateHeader', date: '2024-08-31' },
- * //   { type: 'notification', item: notification3 },
- * // ]
+ * @returns An array of processed items, including chat items, icon lists, date headers,
+ *   and a "new items" indicator if applicable.
  */
 function processChatItems(items, dateTimeFormatter, lastVisitedTimestamp) {
     const initialContext = {
@@ -60,7 +53,12 @@ function createPipeline(initialContext, processors) {
  */
 function insertNotifications(context) {
     for (const item of context.items) {
-        context.processedItems.push({ type: 'chat', item: item });
+        if (isIconList(item)) {
+            context.processedItems.push({ type: 'iconList', item: item });
+        }
+        else {
+            context.processedItems.push({ type: 'chat', item: item });
+        }
     }
     return context;
 }
@@ -72,16 +70,15 @@ function insertNewItemIndicator(context) {
     const processedWithIndicator = [];
     let newItemIndicatorInserted = context.newItemIndicatorInserted;
     for (const item of context.processedItems) {
-        if (item.type === 'chat' &&
+        const timestamp = getProcessedItemTimestamp(item);
+        if (timestamp !== undefined &&
             context.lastVisitedTimestamp &&
             !newItemIndicatorInserted &&
-            new Date(item.item.timestamp) <= context.lastVisitedTimestamp &&
+            new Date(timestamp) <= context.lastVisitedTimestamp &&
             context.hasUnseenNotifications) {
-            // Insert the new item indicator before the first old notification
             processedWithIndicator.push({ type: 'newItemIndicator' });
             newItemIndicatorInserted = true;
         }
-        // Push the current item to the new array
         processedWithIndicator.push(item);
     }
     context.processedItems = processedWithIndicator;
@@ -97,12 +94,10 @@ function insertDateGroups(context) {
     const newProcessedItems = [];
     let currentGroup = null;
     let lastProcessedDate = null;
-    // Iterate through the notifications in processedItems
     for (const item of context.processedItems) {
-        if (item.type === 'chat') {
+        if (item.type === 'chat' || item.type === 'iconList') {
             const currentTimestamp = new Date(item.item.timestamp);
             const currentDate = context.dateTimeFormatter.format(currentTimestamp, 'date');
-            // If the date changes, push the previous group and create a new group
             if (currentDate !== lastProcessedDate) {
                 if (currentGroup) {
                     newProcessedItems.push(currentGroup);
@@ -115,31 +110,26 @@ function insertDateGroups(context) {
                 };
                 lastProcessedDate = currentDate;
             }
-            // Add the notification to the current group
             if (currentGroup) {
                 currentGroup.items.push(item);
             }
         }
         else if (item.type === 'newItemIndicator') {
-            // Insert the newItemIndicator within the current group if it exists
             if (currentGroup) {
                 currentGroup.items.push(item);
             }
             else {
-                newProcessedItems.push(item); // Edge case: no group exists, just add the indicator
+                newProcessedItems.push(item);
             }
         }
     }
-    // Push the last group, if it exists
     if (currentGroup) {
         newProcessedItems.push(currentGroup);
     }
-    // Return updated context with grouped items
     return Object.assign(Object.assign({}, context), { processedItems: newProcessedItems });
 }
 
-const chatListCss = "@charset \"UTF-8\";:host(limebb-chat-list){--limel-top-edge-fade-height:0.75rem;isolation:isolate;--limel-overflow-mask-vertical:linear-gradient(\n      to bottom,\n      transparent 0%,\n      black calc(0% + var(--limel-top-edge-fade-height, 1rem)),\n      black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),\n      transparent 100%\n  );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);box-sizing:border-box;display:flex;gap:0.5rem;height:100%;width:100%;min-width:0;min-height:0;padding:var(--limel-top-edge-fade-height) 0.5rem;overflow:hidden auto}:host(limebb-chat-list.is-empty){padding:0}:host(limebb-chat-list[order=oldest-on-top]){flex-direction:column-reverse}:host(limebb-chat-list[order=newest-on-top]){flex-direction:column}*{box-sizing:border-box}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-group{isolation:isolate;display:flex;flex-direction:inherit;gap:0.5rem}.date-heading{position:sticky;z-index:1;top:0.25rem;display:flex;border-radius:9rem;padding:0.25rem 0.5rem;margin:0 auto;width:fit-content;font-size:0.75rem;line-height:1;color:rgb(var(--contrast-900));backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);transition:color 0.2s ease, border-color 0.4s ease}.date-heading:hover{color:rgb(var(--contrast-1000));border-color:rgb(var(--contrast-500))}.date-heading:hover:before{opacity:1}.date-heading:before{transition:opacity 0.2s ease;content:\"\";position:absolute;z-index:-1;inset:0;opacity:0.6;border-radius:inherit;background-color:rgb(var(--contrast-100))}.new-items-indicator{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;margin:0.25rem 0}.new-items-indicator hr{border:none;position:absolute;width:100%;height:1px;background-color:rgb(var(--color-red-lighter))}.new-items-indicator h3{z-index:1;padding:0 0.5rem;border-radius:1rem;margin:0 1rem;font-size:small;line-height:0.75rem;text-transform:lowercase;color:rgb(var(--color-red-default));background-color:rgb(var(--contrast-100))}.typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.1s;--limebb-chat-typing-opacity-transition-delay:0s;--limebb-chat-typing-grid-template-rows-transition-speed:0.3s;position:sticky;top:0;z-index:1;transition:grid-template-rows var(--limebb-chat-typing-grid-template-rows-transition-speed) ease;display:grid;grid-template-rows:0}.typing-indicator-height-animation div{transition:opacity var(--limebb-chat-typing-opacity-transition-speed) ease var(--limebb-chat-typing-opacity-transition-delay);overflow:hidden;opacity:0}:host(limebb-chat-list[is-typing-indicator-visible]) .typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.4s;--limebb-chat-typing-opacity-transition-delay:0.3s;--limebb-chat-typing-grid-template-rows-transition-speed:0.46s;grid-template-rows:1.5rem}:host(limebb-chat-list[is-typing-indicator-visible]) .typing-indicator-height-animation div{opacity:1}.date-group limebb-chat-item{--limebb-promoted-action-bar-grid-template-rows:0fr}:host(limebb-chat-list[order=oldest-on-top]) .date-group:first-of-type limebb-chat-item:first-of-type{--limebb-promoted-action-bar-grid-template-rows:1fr}:host(limebb-chat-list[order=newest-on-top]) .date-group:first-of-type limebb-chat-item:first-of-type{--limebb-promoted-action-bar-grid-template-rows:1fr}";
-const LimebbChatListStyle0 = chatListCss;
+const chatListCss = () => `@charset "UTF-8";:host(limebb-chat-list){--limel-top-edge-fade-height:0.75rem;isolation:isolate;--limel-overflow-mask-vertical:linear-gradient(       to bottom,       transparent 0%,       black calc(0% + var(--limel-top-edge-fade-height, 1rem)),       black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),       transparent 100%   );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);box-sizing:border-box;display:flex;gap:0.5rem;height:100%;width:100%;min-width:0;min-height:0;padding:var(--limel-top-edge-fade-height) 0.5rem;overflow:hidden auto}:host(limebb-chat-list.is-empty){padding:0}:host(limebb-chat-list[order=oldest-on-top]){flex-direction:column-reverse}:host(limebb-chat-list[order=newest-on-top]){flex-direction:column}*{box-sizing:border-box}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-group{isolation:isolate;display:flex;flex-direction:inherit;gap:0.5rem}.date-heading{position:sticky;z-index:1;top:0.25rem;display:flex;border-radius:9rem;padding:0.25rem 0.5rem;margin:0 auto;width:fit-content;font-size:0.75rem;line-height:1;color:rgb(var(--contrast-900));backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);transition:color 0.2s ease, border-color 0.4s ease}.date-heading:hover{color:rgb(var(--contrast-1000));border-color:rgb(var(--contrast-500))}.date-heading:hover:before{opacity:1}.date-heading:before{transition:opacity 0.2s ease;content:"";position:absolute;z-index:-1;inset:0;opacity:0.6;border-radius:inherit;background-color:rgb(var(--contrast-100))}.new-items-indicator{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;margin:0.25rem 0}.new-items-indicator hr{border:none;position:absolute;width:100%;height:1px;background-color:rgb(var(--color-red-lighter))}.new-items-indicator h3{z-index:1;padding:0 0.5rem;border-radius:1rem;margin:0 1rem;font-size:small;line-height:0.75rem;text-transform:lowercase;color:rgb(var(--color-red-default));background-color:rgb(var(--contrast-100))}.typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.1s;--limebb-chat-typing-opacity-transition-delay:0s;--limebb-chat-typing-grid-template-rows-transition-speed:0.3s;position:sticky;top:0;z-index:1;transition:grid-template-rows var(--limebb-chat-typing-grid-template-rows-transition-speed) ease;display:grid;grid-template-rows:0}.typing-indicator-height-animation div{transition:opacity var(--limebb-chat-typing-opacity-transition-speed) ease var(--limebb-chat-typing-opacity-transition-delay);overflow:hidden;opacity:0}:host(limebb-chat-list[is-typing-indicator-visible]) .typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.4s;--limebb-chat-typing-opacity-transition-delay:0.3s;--limebb-chat-typing-grid-template-rows-transition-speed:0.46s;grid-template-rows:1.5rem}:host(limebb-chat-list[is-typing-indicator-visible]) .typing-indicator-height-animation div{opacity:1}.date-group limebb-chat-item{--limebb-promoted-action-bar-grid-template-rows:0fr}:host(limebb-chat-list[order=oldest-on-top]) .date-group:first-of-type limebb-chat-item:first-of-type{--limebb-promoted-action-bar-grid-template-rows:1fr}:host(limebb-chat-list[order=newest-on-top]) .date-group:first-of-type limebb-chat-item:first-of-type{--limebb-promoted-action-bar-grid-template-rows:1fr}`;
 
 const ChatList = class {
     constructor(hostRef) {
@@ -147,6 +137,9 @@ const ChatList = class {
         /**
          * List of items to display in the feed.
          * These items must be sorted by their `timestamp` in descending order.
+         *
+         * See the [ChatListItem](#/type/ChatListItem/) type for the kinds of
+         * items that can appear in the list.
          */
         this.items = [];
         /**
@@ -176,10 +169,10 @@ const ChatList = class {
         this.handleItemsChange();
     }
     render() {
-        return (index.h(index.Host, { key: '1aa955956f1efb361777c52b27047a3169bb7492', class: {
+        return (index.h(index.Host, { key: '83ddfe2912d25cf344f63b56f4fe4a65c20b575e', class: {
                 'is-empty': this.items.length === 0 &&
                     !this.isTypingIndicatorVisible,
-            }, "aria-busy": this.isBusy(), role: "log" }, this.renderSpinner(), index.h("div", { key: 'ca0412d181544f901b0741ce5753aba56cf35081', class: "typing-indicator-height-animation" }, index.h("div", { key: '107508f3a978f7cd8dd671fa12d6a57c86e8af82' }, this.renderTypingIndicator())), this.renderChatItems()));
+            }, "aria-busy": this.isBusy(), role: "log" }, this.renderSpinner(), index.h("div", { key: 'a4eec0bad09789e93c695680cf6fc0e0eab24465', class: "typing-indicator-height-animation" }, index.h("div", { key: '0895e2f0afce0465513a8c89191128732304b008' }, this.renderTypingIndicator())), this.renderChatItems()));
     }
     renderSpinner() {
         if (!this.loading) {
@@ -213,6 +206,9 @@ const ChatList = class {
             if (item.type === 'chat') {
                 return this.renderChatItem(item.item);
             }
+            else if (item.type === 'iconList') {
+                return this.renderIconList(item.item);
+            }
             else if (item.type === 'newItemIndicator') {
                 return this.renderIndicator();
             }
@@ -231,6 +227,9 @@ const ChatList = class {
     renderChatItem(item) {
         return (index.h("limebb-chat-item", { platform: this.platform, context: this.context, item: item, helperText: item.helperText, hasError: item.hasError, key: item.id }));
     }
+    renderIconList(item) {
+        return index.h("limebb-chat-icon-list", { item: item, key: item.id });
+    }
     renderIndicator() {
         return (index.h("div", { class: "new-items-indicator", role: "separator" }, index.h("hr", null), index.h("h3", null, this.translator.get('webclient.new'))));
     }
@@ -238,13 +237,15 @@ const ChatList = class {
         return this.loading || this.isTypingIndicatorVisible ? 'true' : 'false';
     }
     get dateTimeFormatter() {
-        return this.platform.get(index_esm.c.DateTimeFormatter);
+        return this.platform.get(index_esm.n.DateTimeFormatter);
     }
     get translator() {
-        return this.platform.get(index_esm.c.Translate);
+        return this.platform.get(index_esm.n.Translate);
     }
     static get watchers() { return {
-        "items": ["handleItemsChange"]
+        "items": [{
+                "handleItemsChange": 0
+            }]
     }; }
 };
 function parseToUTCDate(date) {
@@ -253,6 +254,6 @@ function parseToUTCDate(date) {
     }
     return new Date(date); // This will automatically be UTC
 }
-ChatList.style = LimebbChatListStyle0;
+ChatList.style = chatListCss();
 
 exports.limebb_chat_list = ChatList;

package/dist/cjs/limebb-component-config.cjs.entry.js

@@ -1,13 +1,11 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-519b904a.js');
-const index_esm = require('./index.esm-e01e9bd4.js');
-const get = require('./get-932b213e.js');
-require('./_Map-60aae0ed.js');
-require('./isSymbol-5b36aeee.js');
-require('./_MapCache-8b125fbb.js');
+var index = require('./index-C_OnxXhP.js');
+var index_esm = require('./index.esm-DhBVH875.js');
+var get = require('./get-BRGtX379.js');
+require('./_Map-BlpAtLvq.js');
+require('./isSymbol-D8S28StA.js');
+require('./_MapCache-De1Fwe0H.js');
 
 const LimeWebComponentTemplate = (props, children) => {
     const Name = props.name;
@@ -22,13 +20,12 @@ function getComponentProps(props) {
     return Object.assign({ context: props.context, platform: props.platform }, componentProps);
 }
 
-const componentConfigCss = ":host(*){--header-background-color:rgb(var(--contrast-600));display:flex;flex-direction:column;border:1px dashed rgb(var(--contrast-700));overflow:clip;border-radius:0.75rem;background-color:rgb(var(--contrast-500))}*{box-sizing:border-box}.label{margin-top:1rem;margin-bottom:1rem}.config-component{display:grid;column-gap:1rem;row-gap:1rem;margin:1rem;grid-template-columns:repeat(3, minmax(0, 1fr))}";
-const LimebbComponentConfigStyle0 = componentConfigCss;
+const componentConfigCss = () => `:host(*){--header-background-color:rgb(var(--contrast-600));display:flex;flex-direction:column;border:1px dashed rgb(var(--contrast-700));overflow:clip;border-radius:0.75rem;background-color:rgb(var(--contrast-500))}*{box-sizing:border-box}.label{margin-top:1rem;margin-bottom:1rem}.config-component{display:grid;column-gap:1rem;row-gap:1rem;margin:1rem;grid-template-columns:repeat(3, minmax(0, 1fr))}`;
 
 const ComponentConfig = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.change = index.createEvent(this, "change", 7);
+        this.change = index.createEvent(this, "change");
         this.value = {};
         /**
          * If the value should be fetched from the commandbus or the web component registry
@@ -133,16 +130,20 @@ const ComponentConfig = class {
         return fields[this.type];
     }
     get registry() {
-        return this.platform.get(index_esm.c.WebComponentRegistry);
+        return this.platform.get(index_esm.n.WebComponentRegistry);
     }
     get commandbus() {
-        return this.platform.get(index_esm.c.CommandBus);
+        return this.platform.get(index_esm.n.CommandBus);
     }
     static get watchers() { return {
-        "formInfo": ["watchFormInfo"],
-        "configComponent": ["watchconfigComponent"]
+        "formInfo": [{
+                "watchFormInfo": 0
+            }],
+        "configComponent": [{
+                "watchconfigComponent": 0
+            }]
     }; }
 };
-ComponentConfig.style = LimebbComponentConfigStyle0;
+ComponentConfig.style = componentConfigCss();
 
 exports.limebb_component_config = ComponentConfig;

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

@@ -1,18 +1,15 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-C_OnxXhP.js');
+var index_esm = require('./index.esm-DhBVH875.js');
 
-const index = require('./index-519b904a.js');
-const index_esm = require('./index.esm-e01e9bd4.js');
-
-const componentPickerCss = ":host(limebb-component-picker){position:relative;display:flex;align-items:center}:host(limebb-component-picker) limel-picker{flex-grow:1;min-width:0}:host(limebb-component-picker) limel-icon-button{position:absolute;right:0.25rem}";
-const LimebbComponentPickerStyle0 = componentPickerCss;
+const componentPickerCss = () => `:host(limebb-component-picker){position:relative;display:flex;align-items:center}:host(limebb-component-picker) limel-picker{flex-grow:1;min-width:0}:host(limebb-component-picker) limel-icon-button{position:absolute;right:0.25rem}`;
 
 const ComponentPicker = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.change = index.createEvent(this, "change", 7);
-        this.copy = index.createEvent(this, "copy", 7);
+        this.change = index.createEvent(this, "change");
+        this.copy = index.createEvent(this, "copy");
         /**
          * The type of items to display in the picker
          */
@@ -138,16 +135,16 @@ const ComponentPicker = class {
         return ((_g = (_f = (_e = (_d = (_c = (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('limel-picker')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('limel-chip-set')) === null || _d === void 0 ? void 0 : _d.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('input')) === null || _f === void 0 ? void 0 : _f.value) !== null && _g !== void 0 ? _g : '');
     }
     get webComponentRegistry() {
-        return this.platform.get(index_esm.c.WebComponentRegistry);
+        return this.platform.get(index_esm.n.WebComponentRegistry);
     }
     get commandbus() {
-        return this.platform.get(index_esm.c.CommandBus);
+        return this.platform.get(index_esm.n.CommandBus);
     }
     get translator() {
-        return this.platform.get(index_esm.c.Translate);
+        return this.platform.get(index_esm.n.Translate);
     }
     get host() { return index.getElement(this); }
 };
-ComponentPicker.style = LimebbComponentPickerStyle0;
+ComponentPicker.style = componentPickerCss();
 
 exports.limebb_component_picker = ComponentPicker;

package/dist/cjs/limebb-composer-toolbar.cjs.entry.js

@@ -1,12 +1,9 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-C_OnxXhP.js');
+var index_esm = require('./index.esm-DhBVH875.js');
 
-const index = require('./index-519b904a.js');
-const index_esm = require('./index.esm-e01e9bd4.js');
-
-const composerToolbarCss = "*{box-sizing:border-box;min-width:0}:host(limebb-composer-toolbar){box-sizing:border-box;display:flex;align-items:center;width:100%;max-width:100%;gap:0.5rem}.actions{display:flex;align-items:center;flex-wrap:nowrap;flex-grow:1}limel-icon-button,::slotted(limel-icon-button){display:inline-block;scale:0.86}limel-file-input{flex-shrink:0}";
-const LimebbComposerToolbarStyle0 = composerToolbarCss;
+const composerToolbarCss = () => `*{box-sizing:border-box;min-width:0}:host(limebb-composer-toolbar){box-sizing:border-box;display:flex;align-items:center;width:100%;max-width:100%;gap:0.5rem}.actions{display:flex;align-items:center;flex-wrap:nowrap;flex-grow:1}limel-icon-button,::slotted(limel-icon-button){display:inline-block;scale:0.86}limel-file-input{flex-shrink:0}`;
 
 const TRIGGER_DEFINITIONS = [
     {
@@ -36,8 +33,8 @@ const TRIGGER_DEFINITIONS = [
 const ComposerToolbar = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.triggerInsert = index.createEvent(this, "triggerInsert", 7);
-        this.filesSelected = index.createEvent(this, "filesSelected", 7);
+        this.triggerInsert = index.createEvent(this, "triggerInsert");
+        this.filesSelected = index.createEvent(this, "filesSelected");
         /**
          * When `true`, displays a button that triggers
          * the mention character (`@`) in the text editor.
@@ -69,13 +66,13 @@ const ComposerToolbar = class {
     }
     render() {
         return [
-            index.h("div", { key: '7b2b399e4dde1bb090dcdec3021fbbf669ea7d74', class: "actions" }, index.h("slot", { key: '4c019b51586bb3256ac59ad46e5e996ef10bd890', name: "leading" }), this.renderFileInput(), this.renderTriggerActions(), index.h("slot", { key: '8daa1e5d6e5093042b46fbd5dd9f22e276ea08f1', name: "trailing" })),
-            index.h("slot", { key: 'c59850954e112e1aac342f3dd1544d2f94e696ee', name: "primary-action" }),
+            index.h("div", { key: '62fa9154e6593b46509a4b4185c425c416fbf1de', class: "actions" }, index.h("slot", { key: '97476b607eb583b8c26e0164836174b9aeb8faa9', name: "leading" }), this.renderFileInput(), this.renderTriggerActions(), index.h("slot", { key: '14c2388e0cb0d1ec2a1cd548d11994475da5e949', name: "trailing" })),
+            index.h("slot", { key: 'bc290147db27a9a6454cb32031bfe0990fe59e77', name: "primary-action" }),
         ];
     }
     get translator() {
         var _a;
-        return (_a = this.platform) === null || _a === void 0 ? void 0 : _a.get(index_esm.c.Translate);
+        return (_a = this.platform) === null || _a === void 0 ? void 0 : _a.get(index_esm.n.Translate);
     }
     get triggerActions() {
         const enabledFlags = {
@@ -110,6 +107,6 @@ const ComposerToolbar = class {
         return (index.h("limel-file-input", { accept: (_a = this.fileInput.accept) !== null && _a !== void 0 ? _a : '*', multiple: (_b = this.fileInput.multiple) !== null && _b !== void 0 ? _b : false, disabled: (_c = this.fileInput.disabled) !== null && _c !== void 0 ? _c : false, onFilesSelected: this.handleFilesSelected }, index.h("limel-icon-button", { icon: "attach", disabled: (_d = this.fileInput.disabled) !== null && _d !== void 0 ? _d : false, label: (_e = this.translator) === null || _e === void 0 ? void 0 : _e.get('webclient.attach-files'), helperLabel: (_f = this.translator) === null || _f === void 0 ? void 0 : _f.get('webclient.attach-files-helper') })));
     }
 };
-ComposerToolbar.style = LimebbComposerToolbarStyle0;
+ComposerToolbar.style = composerToolbarCss();
 
 exports.limebb_composer_toolbar = ComposerToolbar;