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

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

@@ -1,181 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-519b904a.js');
-const index_esm = require('./index.esm-e01e9bd4.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 = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /**
-         * 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 (index.h(index.Host, { key: 'df64ed9c4080499035f5d599fbf03edf2fc711bd', id: this.item.id, "aria-describedby": this.helperText ? helperTextId : undefined, "aria-live": this.hasError ? 'assertive' : 'off', class: {
-                [`${this.item.ui}`]: true,
-            } }, index.h("div", { key: 'b615241104c1c5b93b4ead5adcb0ff40a6d61271', class: "bubble-content" }, index.h("div", { key: '2e23b9a4e8bc0709bfeb795cfe2590c244979b6f', class: "icon-picture" }, this.renderIcon(), this.renderAuthorPicture()), this.renderErrorSign(), index.h("div", { key: '2d2692e9d0627956a99e8486e44ca7fa9267a25e', class: "item" }, this.renderHeader(), this.renderValue(), index.h("footer", { key: '3b68b893d3c8a8e113ca3c15bf1d336e0722839f' }, this.renderHelperText(helperTextId), this.renderTimestamp()))), this.renderPromotedAction()));
-    }
-    renderErrorSign() {
-        if (!this.hasError) {
-            return;
-        }
-        return index.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 (index.h("header", null, this.renderAuthorName(), index.h("div", { class: "action-buttons" }, this.renderUnpromotedActionsMenu())));
-    }
-    renderIcon() {
-        var _a, _b, _c, _d;
-        if (!this.item.icon) {
-            return;
-        }
-        return (index.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 (index.h("span", { class: "helper-text", id: helperTextId }, this.helperText));
-    }
-    renderValue() {
-        if (!this.item.value) {
-            return;
-        }
-        return (index.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 index.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 (index.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 index.h("limel-ai-avatar", { class: "author-avatar" });
-        }
-        return (index.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 (index.h("limel-menu", { class: "unpromoted-actions-menu", items: items, openDirection: "bottom-end", onSelect: this.handleMenuItemSelect }, index.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 (index.h("div", { class: "action-bar" }, index.h("div", { class: "action-bar-hider" }, index.h("limel-action-bar", { accessibleLabel: "Action bar", actions: actions, layout: "fullWidth", onItemSelected: this.handleActionBarItemSelect }))));
-    }
-    renderTimestamp() {
-        const timestamp = this.item.timestamp;
-        if (!timestamp) {
-            return;
-        }
-        return (index.h("span", { class: "timestamp" }, this.dateTimeFormatter.format(timestamp, 'timeofday')));
-    }
-    get dateTimeFormatter() {
-        return this.platform.get(index_esm.c.DateTimeFormatter);
-    }
-    get translator() {
-        var _a;
-        return (_a = this.platform) === null || _a === void 0 ? void 0 : _a.get(index_esm.c.Translate);
-    }
-    get commandbus() {
-        var _a;
-        return (_a = this.platform) === null || _a === void 0 ? void 0 : _a.get(index_esm.c.CommandBus);
-    }
-};
-ChatListItem.style = LimebbChatItemStyle0;
-
-const typingIndicatorCss = "*{box-sizing:border-box}.typing-ellipsis{position:relative;display:inline-flex;align-items:center;gap:0.25rem;height:1.5rem;padding:0 0.5rem;border-radius:10rem;border-bottom-left-radius:0.125rem;background-color:rgb(var(--contrast-600), 0.4);backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem)}.circle{position:relative;height:0.5rem;width:0.5rem;background:rgb(var(--contrast-800));border-radius:50%}.circle:first-of-type{animation:ellipsis-typing-indicator 1.2s infinite}.circle:nth-of-type(2){animation:ellipsis-typing-indicator 1.2s infinite 0.2s}.circle:nth-of-type(3){animation:ellipsis-typing-indicator 1.2s infinite 0.4s}@keyframes ellipsis-typing-indicator{0%{top:0}6.25%{top:-1px}12.5%{top:0;background:rgb(var(--contrast-1000))}18.75%{top:1px}25%{top:0}}";
-const LimebbTypingIndicatorStyle0 = typingIndicatorCss;
-
-const TypingIndicator = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    render() {
-        return (index.h("div", { key: 'b935ce2320a2be224b39409f8787554acdc4118c', class: "typing-ellipsis" }, index.h("div", { key: '906f4069dda78564797563f516fa4f7202e280e2', class: "circle" }), index.h("div", { key: '9aa4aec7fef5b6194fe9ed200f77419435e4a68c', class: "circle" }), index.h("div", { key: 'b4993c098ffffc9fae8e5e32665bda523450409d', class: "circle" })));
-    }
-};
-TypingIndicator.style = LimebbTypingIndicatorStyle0;
-
-exports.limebb_chat_item = ChatListItem;
-exports.limebb_typing_indicator = TypingIndicator;