@limetech/lime-crm-building-blocks 1.116.0 → 1.116.2

package/dist/components/chat-item.js

@@ -1,184 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c } from './index.esm.js';
-
-const chatItemCss = "@charset \"UTF-8\";*{box-sizing:border-box}:host(limebb-chat-item){display:flex;flex-direction:column;gap:0.25rem;min-width:0;min-height:0;max-width:calc(100% - 2rem)}.bubble-content{display:flex;gap:0.25rem;min-width:0;min-height:0}:host(limebb-chat-item:hover) .helper-text,:host(limebb-chat-item:hover) .timestamp,:host(limebb-chat-item:focus-within) .helper-text,:host(limebb-chat-item:focus-within) .timestamp{opacity:1}:host(limebb-chat-item.mine){margin-left:auto}:host(limebb-chat-item.mine) .item{border-bottom-right-radius:0.125rem;background-color:rgb(var(--color-sky-default), 0.2)}:host(limebb-chat-item.mine) .bubble-content{justify-content:end}:host(limebb-chat-item.mine) .icon-picture{order:2}:host(limebb-chat-item.theirs){margin-right:auto}:host(limebb-chat-item.theirs) .item{border-bottom-left-radius:0.125rem;background-color:rgb(var(--contrast-300), 0.7)}.item{display:flex;flex-direction:column;border-radius:1.25rem;padding:0 0.25rem 0.25rem 0.25rem;backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem)}.icon-picture{display:flex;flex-direction:column;gap:0.5rem;align-items:center;justify-content:flex-end}.icon-picture:has(.author-avatar) limel-icon{width:1.25rem;padding:0.125rem}.icon{--icon-background-color:rgb(var(--contrast-500), 0.5);flex-shrink:0;padding:0.375rem;width:2.25rem;backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem)}limel-ai-avatar.author-avatar{background-color:rgb(var(--color-glaucous-darker))}header{display:flex;justify-content:space-between;align-items:center;min-height:2rem;padding-left:0.5rem}header:not(:has(.unpromoted-actions-menu)){padding-right:0.5rem}.body-text{padding:0.25rem 0.5rem}footer{display:flex;justify-content:space-between;align-items:end;gap:0.5rem;font-size:x-small}footer:not(:empty){padding:0 0.25rem 0.125rem 0.5rem}footer *{transition:opacity 0.2s ease;opacity:0.4}.timestamp{margin-left:auto}.author-avatar{border-radius:50%;width:2rem;height:2rem;object-fit:cover;box-shadow:0 0 0 1px rgb(var(--contrast-600))}.author{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:500;text-decoration:none}a.author{position:relative;cursor:pointer;transition:color 0.2s ease;color:var(--mdc-theme-primary)}a.author:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:\"\";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a.author:hover{color:rgb(var(--color-teal-light))}a.author:hover:before{opacity:0.3;transform:scale(1)}limel-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-promoted-action-bar-grid-template-rows-transition-speed, 0.2s) cubic-bezier(1, 0.09, 0, 0.89) var(--limebb-promoted-action-bar-grid-template-rows-transition-delay, 0s);grid-template-rows:var(--limebb-promoted-action-bar-grid-template-rows, 1fr)}.action-bar-hider{overflow:hidden}limel-action-bar{transition:padding var(--limebb-promoted-action-bar-grid-template-rows-transition-speed) cubic-bezier(1, 0.09, 0, 0.89) var(--limebb-promoted-action-bar-grid-template-rows-transition-delay);padding-top:0;padding-bottom:0.75rem}:host(limebb-chat-item:hover) .action-bar,:host(limebb-chat-item:focus-within) .action-bar,:host(limebb-chat-item:focus-visible) .action-bar{--limebb-promoted-action-bar-grid-template-rows:1fr;will-change:grid-template-rows}:host(limebb-chat-item:hover) limel-action-bar,:host(limebb-chat-item:focus-within) limel-action-bar,:host(limebb-chat-item:focus-visible) limel-action-bar{will-change:opacity;opacity:1}:host(limebb-chat-item:hover),:host(limebb-chat-item:focus-within){--limebb-promoted-action-bar-grid-template-rows-transition-speed:0.46s;--limebb-promoted-action-bar-grid-template-rows-transition-delay:0.7s}.action-bar{min-width:0;width:calc(100% - calc(2rem + 0.25rem))}:host(limebb-chat-item.theirs) .action-bar{margin-left:calc(2rem + 0.25rem)}:host(limebb-chat-item[has-error]:not([has-error=false])) .bubble-content{cursor:help}:host(limebb-chat-item[has-error]:not([has-error=false])) .item{border:1px solid rgb(var(--color-red-default))}:host(limebb-chat-item[has-error]:not([has-error=false])) .error-sign{color:rgb(var(--color-red-default));flex-shrink:0;width:1.25rem;align-self:center}:host(limebb-chat-item.mine[has-error]:not([has-error=false])) .action-bar{padding-left:1.25rem}:host(limebb-chat-item.mine[has-error]:not([has-error=false])) .helper-text{opacity:1;color:rgb(var(--color-red-default))}";
-const LimebbChatItemStyle0 = chatItemCss;
-
-const ChatListItem = /*@__PURE__*/ proxyCustomElement(class ChatListItem extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /**
-         * Indicates whether there is an error,
-         * for example when message was not sent or delivered.
-         */
-        this.hasError = false;
-        this.createActionBarItem = (action) => {
-            var _a, _b;
-            if ('separator' in action) {
-                return action;
-            }
-            let item = {
-                value: action,
-                text: (_a = action.label) !== null && _a !== void 0 ? _a : '',
-                secondaryText: action.description,
-                disabled: action.disabled,
-            };
-            if (!action.label && action.icon) {
-                item = Object.assign(Object.assign({}, item), { icon: action.icon, text: (_b = action.description) !== null && _b !== void 0 ? _b : item.text, iconOnly: true });
-            }
-            else if (action.icon) {
-                item = Object.assign(Object.assign({}, item), { icon: action.icon });
-            }
-            return item;
-        };
-        this.handleActionBarItemSelect = (event) => {
-            var _a;
-            event.stopPropagation();
-            const command = (_a = event.detail.value) === null || _a === void 0 ? void 0 : _a.command;
-            if (command) {
-                this.commandbus.handle(command);
-            }
-        };
-        this.createMenuItem = (action) => {
-            var _a, _b;
-            if ('separator' in action) {
-                return action;
-            }
-            return {
-                value: action,
-                text: (_a = action.label) !== null && _a !== void 0 ? _a : '',
-                secondaryText: action.description,
-                disabled: action.disabled,
-                icon: (_b = action.icon) !== null && _b !== void 0 ? _b : '',
-            };
-        };
-        this.handleMenuItemSelect = (event) => {
-            var _a;
-            event.stopPropagation();
-            const command = (_a = event.detail.value) === null || _a === void 0 ? void 0 : _a.command;
-            if (command) {
-                this.commandbus.handle(command);
-            }
-        };
-    }
-    render() {
-        const helperTextId = `helper-text-${this.item.id}`;
-        return (h(Host, { key: '9833e3133c71a3c8f3d08e76b4d5411aff3620c3', id: this.item.id, "aria-describedby": this.helperText ? helperTextId : undefined, "aria-live": this.hasError ? 'assertive' : 'off', class: {
-                [`${this.item.ui}`]: true,
-            } }, h("div", { key: '8598c560099d2980d7f9231613855e99053b4768', class: "bubble-content" }, h("div", { key: 'ae3df9343207f62d1d2a24b5bdf43ec42a58a5ee', class: "icon-picture" }, this.renderIcon(), this.renderAuthorPicture()), this.renderErrorSign(), h("div", { key: '15695f67beef723d5891cf56876c582f8a9b3dad', class: "item" }, this.renderHeader(), this.renderValue(), h("footer", { key: '4157f62d9d48f451068652fab65a968af7a44bde' }, this.renderHelperText(helperTextId), this.renderTimestamp()))), this.renderPromotedAction()));
-    }
-    renderErrorSign() {
-        if (!this.hasError) {
-            return;
-        }
-        return h("limel-icon", { class: "error-sign", name: "brake_warning" });
-    }
-    renderHeader() {
-        var _a;
-        if (!((_a = this.item.author) === null || _a === void 0 ? void 0 : _a.name)) {
-            return;
-        }
-        return (h("header", null, this.renderAuthorName(), h("div", { class: "action-buttons" }, this.renderUnpromotedActionsMenu())));
-    }
-    renderIcon() {
-        var _a, _b, _c, _d;
-        if (!this.item.icon) {
-            return;
-        }
-        return (h("limel-icon", { class: "icon", badge: true, name: (_b = (_a = this.item.icon) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'dot_circle', style: {
-                color: `${(_c = this.item.icon) === null || _c === void 0 ? void 0 : _c.color}`,
-                'background-color': `${(_d = this.item.icon) === null || _d === void 0 ? void 0 : _d.backgroundColor}`,
-            } }));
-    }
-    renderHelperText(helperTextId) {
-        if (!this.helperText) {
-            return;
-        }
-        return (h("span", { class: "helper-text", id: helperTextId }, this.helperText));
-    }
-    renderValue() {
-        if (!this.item.value) {
-            return;
-        }
-        return (h("limel-markdown", { class: "body-text reset-img-height", value: this.item.value }));
-    }
-    renderAuthorName() {
-        var _a, _b;
-        if (typeof ((_a = this.item.author) === null || _a === void 0 ? void 0 : _a.name) === 'string') {
-            return h("span", { class: "author" }, this.item.author.name);
-        }
-        if (typeof ((_b = this.item.author) === null || _b === void 0 ? void 0 : _b.name) === 'object') {
-            const { href, title, text } = this.item.author.name;
-            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;
-        }
-        // If the "picture url" is set to "limel-ai-avatar",
-        // we render a limel-ai-avatar component instead of an image.
-        if (this.item.author.picture === 'limel-ai-avatar') {
-            return h("limel-ai-avatar", { class: "author-avatar" });
-        }
-        return (h("img", { class: "author-avatar", loading: "lazy", src: this.item.author.picture }));
-    }
-    renderUnpromotedActionsMenu() {
-        var _a, _b;
-        if (!((_a = this.item.unpromotedActions) === null || _a === void 0 ? void 0 : _a.length)) {
-            return;
-        }
-        const items = this.item.unpromotedActions.map(this.createMenuItem);
-        return (h("limel-menu", { class: "unpromoted-actions-menu", items: items, openDirection: "bottom-end", onSelect: this.handleMenuItemSelect }, h("limel-icon-button", { icon: "menu_2", slot: "trigger", label: (_b = this.translator) === null || _b === void 0 ? void 0 : _b.get('webclient.more-actions') })));
-    }
-    renderPromotedAction() {
-        if (!this.item.promotedActions) {
-            return;
-        }
-        const actions = this.item.promotedActions.map(this.createActionBarItem);
-        return (h("div", { class: "action-bar" }, h("div", { class: "action-bar-hider" }, h("limel-action-bar", { accessibleLabel: "Action bar", actions: actions, layout: "fullWidth", onItemSelected: this.handleActionBarItemSelect }))));
-    }
-    renderTimestamp() {
-        const timestamp = this.item.timestamp;
-        if (!timestamp) {
-            return;
-        }
-        return (h("span", { class: "timestamp" }, this.dateTimeFormatter.format(timestamp, 'timeofday')));
-    }
-    get dateTimeFormatter() {
-        return this.platform.get(c.DateTimeFormatter);
-    }
-    get translator() {
-        var _a;
-        return (_a = this.platform) === null || _a === void 0 ? void 0 : _a.get(c.Translate);
-    }
-    get commandbus() {
-        var _a;
-        return (_a = this.platform) === null || _a === void 0 ? void 0 : _a.get(c.CommandBus);
-    }
-    static get style() { return LimebbChatItemStyle0; }
-}, [1, "limebb-chat-item", {
-        "platform": [16],
-        "context": [16],
-        "item": [16],
-        "helperText": [1, "helper-text"],
-        "hasError": [516, "has-error"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["limebb-chat-item"];
-    components.forEach(tagName => { switch (tagName) {
-        case "limebb-chat-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ChatListItem);
-            }
-            break;
-    } });
-}
-
-export { ChatListItem as C, defineCustomElement as d };
+import{proxyCustomElement as e,HTMLElement as t,h as i,Host as r,transformTag as o}from"@stencil/core/internal/client";import{n as a}from"./index.esm.js";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.hasError=!1,this.createActionBarItem=e=>{var t,i;if("separator"in e)return e;let r={value:e,text:null!==(t=e.label)&&void 0!==t?t:"",secondaryText:e.description,disabled:e.disabled};return!e.label&&e.icon?r=Object.assign(Object.assign({},r),{icon:e.icon,text:null!==(i=e.description)&&void 0!==i?i:r.text,iconOnly:!0}):e.icon&&(r=Object.assign(Object.assign({},r),{icon:e.icon})),r},this.handleActionBarItemSelect=e=>{var t;e.stopPropagation();const i=null===(t=e.detail.value)||void 0===t?void 0:t.command;i&&this.commandbus.handle(i)},this.createMenuItem=e=>{var t,i;return"separator"in e?e:{value:e,text:null!==(t=e.label)&&void 0!==t?t:"",secondaryText:e.description,disabled:e.disabled,icon:null!==(i=e.icon)&&void 0!==i?i:""}},this.handleMenuItemSelect=e=>{var t;e.stopPropagation();const i=null===(t=e.detail.value)||void 0===t?void 0:t.command;i&&this.commandbus.handle(i)}}render(){const e=`helper-text-${this.item.id}`;return i(r,{key:"51fec84e9e040ca74c86e1f6f75a6bd5e3dbdf2f",id:this.item.id,"aria-describedby":this.helperText?e:void 0,"aria-live":this.hasError?"assertive":"off",class:{[`${this.item.ui}`]:!0}},i("div",{key:"c1ec1c4dd88749a09f0a65d66aa73bca6b6ba528",class:"bubble-content"},i("div",{key:"77540f47512a984dfdfee196c1327c622b10a9ae",class:"icon-picture"},this.renderIcon(),this.renderAuthorPicture()),this.renderErrorSign(),i("div",{key:"d95119ccf3ce6f9a621e1e099c6378671211931b",class:"item"},this.renderHeader(),this.renderValue(),i("footer",{key:"4c0f76598ba669f72b14ff2c81b1dbf9fb2e84f0"},this.renderHelperText(e),this.renderTimestamp()))),this.renderPromotedAction())}renderErrorSign(){if(this.hasError)return i("limel-icon",{class:"error-sign",name:"brake_warning"})}renderHeader(){var e;if(null===(e=this.item.author)||void 0===e?void 0:e.name)return i("header",null,this.renderAuthorName(),i("div",{class:"action-buttons"},this.renderUnpromotedActionsMenu()))}renderIcon(){var e,t,r,o;if(this.item.icon)return i("limel-icon",{class:"icon",badge:!0,name:null!==(t=null===(e=this.item.icon)||void 0===e?void 0:e.name)&&void 0!==t?t:"dot_circle",style:{color:`${null===(r=this.item.icon)||void 0===r?void 0:r.color}`,"background-color":`${null===(o=this.item.icon)||void 0===o?void 0:o.backgroundColor}`}})}renderHelperText(e){if(this.helperText)return i("span",{class:"helper-text",id:e},this.helperText)}renderValue(){if(this.item.value)return i("limel-markdown",{class:"body-text reset-img-height",value:this.item.value})}renderAuthorName(){var e,t;if("string"==typeof(null===(e=this.item.author)||void 0===e?void 0:e.name))return i("span",{class:"author"},this.item.author.name);if("object"==typeof(null===(t=this.item.author)||void 0===t?void 0:t.name)){const{href:e,title:t,text:r}=this.item.author.name;return i("a",{class:"author",href:e,title:t},r)}}renderAuthorPicture(){var e;if(null===(e=this.item.author)||void 0===e?void 0:e.picture)return"limel-ai-avatar"===this.item.author.picture?i("limel-ai-avatar",{class:"author-avatar"}):i("img",{class:"author-avatar",loading:"lazy",src:this.item.author.picture})}renderUnpromotedActionsMenu(){var e,t;if(!(null===(e=this.item.unpromotedActions)||void 0===e?void 0:e.length))return;const r=this.item.unpromotedActions.map(this.createMenuItem);return i("limel-menu",{class:"unpromoted-actions-menu",items:r,openDirection:"bottom-end",onSelect:this.handleMenuItemSelect},i("limel-icon-button",{icon:"menu_2",slot:"trigger",label:null===(t=this.translator)||void 0===t?void 0:t.get("webclient.more-actions")}))}renderPromotedAction(){if(!this.item.promotedActions)return;const e=this.item.promotedActions.map(this.createActionBarItem);return i("div",{class:"action-bar"},i("div",{class:"action-bar-hider"},i("limel-action-bar",{accessibleLabel:"Action bar",actions:e,layout:"fullWidth",onItemSelected:this.handleActionBarItemSelect})))}renderTimestamp(){const e=this.item.timestamp;if(e)return i("span",{class:"timestamp"},this.dateTimeFormatter.format(e,"timeofday"))}get dateTimeFormatter(){return this.platform.get(a.DateTimeFormatter)}get translator(){var e;return null===(e=this.platform)||void 0===e?void 0:e.get(a.Translate)}get commandbus(){var e;return null===(e=this.platform)||void 0===e?void 0:e.get(a.CommandBus)}static get style(){return'@charset "UTF-8";*{box-sizing:border-box}:host(limebb-chat-item){display:flex;flex-direction:column;gap:0.25rem;min-width:0;min-height:0;max-width:calc(100% - 2rem)}.bubble-content{display:flex;gap:0.25rem;min-width:0;min-height:0}:host(limebb-chat-item:hover) .helper-text,:host(limebb-chat-item:hover) .timestamp,:host(limebb-chat-item:focus-within) .helper-text,:host(limebb-chat-item:focus-within) .timestamp{opacity:1}:host(limebb-chat-item.mine){margin-left:auto}:host(limebb-chat-item.mine) .item{border-bottom-right-radius:0.125rem;background-color:rgb(var(--color-sky-default), 0.2)}:host(limebb-chat-item.mine) .bubble-content{justify-content:end}:host(limebb-chat-item.mine) .icon-picture{order:2}:host(limebb-chat-item.theirs){margin-right:auto}:host(limebb-chat-item.theirs) .item{border-bottom-left-radius:0.125rem;background-color:rgb(var(--contrast-300), 0.7)}.item{display:flex;flex-direction:column;border-radius:1.25rem;padding:0 0.25rem 0.25rem 0.25rem;backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem)}.icon-picture{display:flex;flex-direction:column;gap:0.5rem;align-items:center;justify-content:flex-end}.icon-picture:has(.author-avatar) limel-icon{width:1.25rem;padding:0.125rem}.icon{--icon-background-color:rgb(var(--contrast-500), 0.5);flex-shrink:0;padding:0.375rem;width:2.25rem;backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem)}limel-ai-avatar.author-avatar{background-color:rgb(var(--color-glaucous-darker))}header{display:flex;justify-content:space-between;align-items:center;min-height:2rem;padding-left:0.5rem}header:not(:has(.unpromoted-actions-menu)){padding-right:0.5rem}.body-text{padding:0.25rem 0.5rem}footer{display:flex;justify-content:space-between;align-items:end;gap:0.5rem;font-size:x-small}footer:not(:empty){padding:0 0.25rem 0.125rem 0.5rem}footer *{transition:opacity 0.2s ease;opacity:0.4}.timestamp{margin-left:auto}.author-avatar{border-radius:50%;width:2rem;height:2rem;object-fit:cover;box-shadow:0 0 0 1px rgb(var(--contrast-600))}.author{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:500;text-decoration:none}a.author{position:relative;cursor:pointer;transition:color 0.2s ease;color:var(--mdc-theme-primary)}a.author:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:"";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a.author:hover{color:rgb(var(--color-teal-light))}a.author:hover:before{opacity:0.3;transform:scale(1)}limel-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-promoted-action-bar-grid-template-rows-transition-speed, 0.2s) cubic-bezier(1, 0.09, 0, 0.89) var(--limebb-promoted-action-bar-grid-template-rows-transition-delay, 0s);grid-template-rows:var(--limebb-promoted-action-bar-grid-template-rows, 1fr)}.action-bar-hider{overflow:hidden}limel-action-bar{transition:padding var(--limebb-promoted-action-bar-grid-template-rows-transition-speed) cubic-bezier(1, 0.09, 0, 0.89) var(--limebb-promoted-action-bar-grid-template-rows-transition-delay);padding-top:0;padding-bottom:0.75rem}:host(limebb-chat-item:hover) .action-bar,:host(limebb-chat-item:focus-within) .action-bar,:host(limebb-chat-item:focus-visible) .action-bar{--limebb-promoted-action-bar-grid-template-rows:1fr;will-change:grid-template-rows}:host(limebb-chat-item:hover) limel-action-bar,:host(limebb-chat-item:focus-within) limel-action-bar,:host(limebb-chat-item:focus-visible) limel-action-bar{will-change:opacity;opacity:1}:host(limebb-chat-item:hover),:host(limebb-chat-item:focus-within){--limebb-promoted-action-bar-grid-template-rows-transition-speed:0.46s;--limebb-promoted-action-bar-grid-template-rows-transition-delay:0.7s}.action-bar{min-width:0;width:calc(100% - calc(2rem + 0.25rem))}:host(limebb-chat-item.theirs) .action-bar{margin-left:calc(2rem + 0.25rem)}:host(limebb-chat-item[has-error]:not([has-error=false])) .bubble-content{cursor:help}:host(limebb-chat-item[has-error]:not([has-error=false])) .item{border:1px solid rgb(var(--color-red-default))}:host(limebb-chat-item[has-error]:not([has-error=false])) .error-sign{color:rgb(var(--color-red-default));flex-shrink:0;width:1.25rem;align-self:center}:host(limebb-chat-item.mine[has-error]:not([has-error=false])) .action-bar{padding-left:1.25rem}:host(limebb-chat-item.mine[has-error]:not([has-error=false])) .helper-text{opacity:1;color:rgb(var(--color-red-default))}'}},[1,"limebb-chat-item",{platform:[16],context:[16],item:[16],helperText:[1,"helper-text"],hasError:[516,"has-error"]}]);function n(){"undefined"!=typeof customElements&&["limebb-chat-item"].forEach((e=>{"limebb-chat-item"===e&&(customElements.get(o(e))||customElements.define(o(e),s))}))}export{s as C,n as d}