@cloudflare/realtimekit-ui 1.0.9-staging.2 → 1.0.9-staging.4

package/dist/esm/rtk-debugger-toggle.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-c1fb98bb.js';
-import { h as useLanguage, e as defaultIconPack } from './ui-store-2965ff1a.js';
-import { S as SyncWithStore } from './index-849b9dd9.js';
+import { h as useLanguage, e as defaultIconPack } from './ui-store-9e486e1b.js';
+import { S as SyncWithStore } from './index-e65afca5.js';
 
 const rtkDebuggerToggleCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:block}";
 const RtkDebuggerToggleStyle0 = rtkDebuggerToggleCss;
@@ -34,7 +34,7 @@ const RtkDebuggerToggle = class {
         });
     }
     render() {
-        return (h(Host, { key: '5675d28a2da23df6c54e79827b0adf37ef128cd9', title: this.t('Troubleshooting') }, h("rtk-controlbar-button", { key: 'b8e16bbfb77fe9c4d50e872ed4eaecf351816a98', size: this.size, iconPack: this.iconPack, onClick: () => this.toggleDebugger(), icon: this.iconPack.debug, label: this.t('Troubleshooting'), variant: this.variant })));
+        return (h(Host, { key: 'cc9ec6cade76093abba3a48502d12a82868a875a', title: this.t('Troubleshooting') }, h("rtk-controlbar-button", { key: '6b8bcf2e363dfcdfb8e0f90c8602d95cdf338544', size: this.size, iconPack: this.iconPack, onClick: () => this.toggleDebugger(), icon: this.iconPack.debug, label: this.t('Troubleshooting'), variant: this.variant })));
     }
 };
 __decorate([

package/dist/{components/p-3042f998.js → esm/rtk-dialog-manager.entry.js}

@@ -1,30 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage } from './p-037e572f.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
-import { R as Render } from './p-60fdbd75.js';
-import { d as defineCustomElement$n } from './p-6fe2233b.js';
-import { d as defineCustomElement$m } from './p-e2e22bf8.js';
-import { d as defineCustomElement$l } from './p-aba9b612.js';
-import { d as defineCustomElement$k } from './p-fb46d041.js';
-import { d as defineCustomElement$j } from './p-511ed3f8.js';
-import { d as defineCustomElement$i } from './p-1391bef0.js';
-import { d as defineCustomElement$h } from './p-c9a7cf06.js';
-import { d as defineCustomElement$g } from './p-f46a0782.js';
-import { d as defineCustomElement$f } from './p-9ea5df8f.js';
-import { d as defineCustomElement$e } from './p-4edd666b.js';
-import { d as defineCustomElement$d } from './p-6d49cf9f.js';
-import { d as defineCustomElement$c } from './p-ed8955d0.js';
-import { d as defineCustomElement$b } from './p-a5a40d7e.js';
-import { d as defineCustomElement$a } from './p-dc4b6fc4.js';
-import { d as defineCustomElement$9 } from './p-40c5ca62.js';
-import { d as defineCustomElement$8 } from './p-3b29dda1.js';
-import { d as defineCustomElement$7 } from './p-cc5ecd67.js';
-import { d as defineCustomElement$6 } from './p-c663f9b1.js';
-import { d as defineCustomElement$5 } from './p-0a7f6a8a.js';
-import { d as defineCustomElement$4 } from './p-d2c3870a.js';
-import { d as defineCustomElement$3 } from './p-17867774.js';
-import { d as defineCustomElement$2 } from './p-34b580c9.js';
-import { d as defineCustomElement$1 } from './p-03bdc4c0.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-c1fb98bb.js';
+import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage } from './ui-store-9e486e1b.js';
+import { S as SyncWithStore } from './index-e65afca5.js';
+import { R as Render } from './index-d31a2e33.js';
 
 const rtkDialogManagerCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:block}";
 const RtkDialogManagerStyle0 = rtkDialogManagerCss;
@@ -39,11 +16,9 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const RtkDialogManager = /*@__PURE__*/ proxyCustomElement(class RtkDialogManager extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
+const RtkDialogManager = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
         this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
         /** UI Config */
         this.config = createDefaultConfig();
@@ -150,27 +125,11 @@ const RtkDialogManager = /*@__PURE__*/ proxyCustomElement(class RtkDialogManager
                     this.updateStoreState('activeMuteAllConfirmation', false);
                 }, iconPack: this.iconPack, t: this.t }, h("rtk-mute-all-confirmation", Object.assign({}, defaults)))));
         }
-        else if (states === null || states === void 0 ? void 0 : states.activeChannelCreator) {
-            return (h(Host, null, h("rtk-dialog", { open: true, onRtkDialogClose: () => {
-                    this.updateStoreState('activeChannelCreator', false);
-                }, iconPack: this.iconPack, t: this.t }, h("rtk-channel-creator", Object.assign({}, defaults)))));
-        }
-        return null;
     }
     static get watchers() { return {
         "meeting": ["meetingChanged"]
     }; }
-    static get style() { return RtkDialogManagerStyle0; }
-}, [1, "rtk-dialog-manager", {
-        "meeting": [16],
-        "config": [16],
-        "states": [16],
-        "size": [513],
-        "iconPack": [16],
-        "t": [16]
-    }, undefined, {
-        "meeting": ["meetingChanged"]
-    }]);
+};
 __decorate([
     SyncWithStore()
 ], RtkDialogManager.prototype, "meeting", void 0);
@@ -186,134 +145,6 @@ __decorate([
 __decorate([
     SyncWithStore()
 ], RtkDialogManager.prototype, "t", void 0);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["rtk-dialog-manager", "rtk-avatar", "rtk-breakout-room-manager", "rtk-breakout-room-participants", "rtk-breakout-rooms-manager", "rtk-broadcast-message-modal", "rtk-button", "rtk-channel-creator", "rtk-confirmation-modal", "rtk-counter", "rtk-debugger", "rtk-debugger-audio", "rtk-debugger-screenshare", "rtk-debugger-system", "rtk-debugger-video", "rtk-dialog", "rtk-icon", "rtk-join-stage", "rtk-leave-meeting", "rtk-mute-all-confirmation", "rtk-overlay-modal", "rtk-permissions-message", "rtk-spinner", "rtk-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "rtk-dialog-manager":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, RtkDialogManager);
-            }
-            break;
-        case "rtk-avatar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$n();
-            }
-            break;
-        case "rtk-breakout-room-manager":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$m();
-            }
-            break;
-        case "rtk-breakout-room-participants":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$l();
-            }
-            break;
-        case "rtk-breakout-rooms-manager":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$k();
-            }
-            break;
-        case "rtk-broadcast-message-modal":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$j();
-            }
-            break;
-        case "rtk-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$i();
-            }
-            break;
-        case "rtk-channel-creator":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$h();
-            }
-            break;
-        case "rtk-confirmation-modal":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$g();
-            }
-            break;
-        case "rtk-counter":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$f();
-            }
-            break;
-        case "rtk-debugger":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$e();
-            }
-            break;
-        case "rtk-debugger-audio":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$d();
-            }
-            break;
-        case "rtk-debugger-screenshare":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$c();
-            }
-            break;
-        case "rtk-debugger-system":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "rtk-debugger-video":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "rtk-dialog":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "rtk-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "rtk-join-stage":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "rtk-leave-meeting":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "rtk-mute-all-confirmation":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "rtk-overlay-modal":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "rtk-permissions-message":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "rtk-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "rtk-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
+RtkDialogManager.style = RtkDialogManagerStyle0;
 
-export { RtkDialogManager as R, defineCustomElement as d };
+export { RtkDialogManager as rtk_dialog_manager };

package/dist/esm/rtk-dialog.entry.js

@@ -0,0 +1,89 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-c1fb98bb.js';
+import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage } from './ui-store-9e486e1b.js';
+import { S as SyncWithStore } from './index-e65afca5.js';
+
+const rtkDialogCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{word-wrap:break-word;overflow-wrap:break-word}#dialog{position:relative;max-height:100%;max-width:100%;padding:var(--rtk-space-0, 0px);border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}#dialog::backdrop{background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / 0.5);-webkit-backdrop-filter:blur(12px) saturate(180%);backdrop-filter:blur(12px) saturate(180%)}#dismiss-btn{position:absolute;top:var(--rtk-space-3, 12px);right:var(--rtk-space-3, 12px);z-index:50}::slotted(*){max-width:100%;height:auto;min-height:-moz-fit-content;min-height:fit-content}";
+const RtkDialogStyle0 = rtkDialogCss;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const RtkDialog = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.onClose = createEvent(this, "rtkDialogClose", 7);
+        /** Whether to show the close button */
+        this.hideCloseButton = false;
+        /** Whether Escape key can close the modal */
+        this.disableEscapeKey = false;
+        /** UI Config */
+        this.config = createDefaultConfig();
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** Whether a dialog is open or not */
+        this.open = true;
+        this.close = () => {
+            this.open = false;
+            this.onClose.emit();
+        };
+        this.keydownListener = (e) => {
+            if (!this.disableEscapeKey && e.key === 'Escape' && this.open) {
+                this.close();
+            }
+        };
+    }
+    connectedCallback() {
+        document.addEventListener('keydown', this.keydownListener);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('keydown', this.keydownListener);
+    }
+    componentDidRender() {
+        if (this.open && !this.dialogEl.open) {
+            // we need to call showModal() to get the ::backdrop
+            this.dialogEl.showModal();
+        }
+    }
+    render() {
+        if (!this.open) {
+            return null;
+        }
+        return (h(Host, null, h("dialog", { ref: (el) => (this.dialogEl = el), id: "dialog", part: "container", onClose: this.close, onClick: (e) => {
+                // clicked outside the children of dialog
+                if (!this.disableEscapeKey && e.target === this.dialogEl) {
+                    this.close();
+                }
+            }, onKeyDown: (e) => {
+                if (this.disableEscapeKey && e.key === 'Escape') {
+                    e.preventDefault();
+                }
+            } }, h("slot", null), !this.hideCloseButton && (h("rtk-button", { part: "close-button", id: "dismiss-btn", kind: "icon", variant: "ghost", onClick: () => this.close(), type: "button", "aria-label": this.t('dialog.close'), role: "button" }, h("rtk-icon", { icon: this.iconPack.dismiss }))))));
+    }
+};
+__decorate([
+    SyncWithStore()
+], RtkDialog.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDialog.prototype, "config", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDialog.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDialog.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDialog.prototype, "t", void 0);
+RtkDialog.style = RtkDialogStyle0;
+
+export { RtkDialog as rtk_dialog };

package/dist/esm/rtk-ended-screen.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-c1fb98bb.js';
-import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage } from './ui-store-2965ff1a.js';
-import { S as SyncWithStore } from './index-849b9dd9.js';
+import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage } from './ui-store-9e486e1b.js';
+import { S as SyncWithStore } from './index-e65afca5.js';
 
 const rtkEndedScreenCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{height:100%;width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;flex-direction:column;align-items:center;justify-content:center}.ctr{display:flex;flex-direction:column;align-items:center;gap:var(--rtk-space-8, 32px)}rtk-logo.loaded{height:var(--rtk-space-12, 48px)}.rejoin-button{margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-4, 16px);padding-top:var(--rtk-space-6, 24px);padding-bottom:var(--rtk-space-6, 24px);padding-left:var(--rtk-space-16, 64px);padding-right:var(--rtk-space-16, 64px)}.rejoin-icon{margin-right:var(--rtk-space-2, 8px)}p{font-size:16px;border-radius:var(--rtk-border-radius-lg, 12px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));padding-left:var(--rtk-space-8, 32px);padding-right:var(--rtk-space-8, 32px);padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px);color:rgb(var(--rtk-colors-text-1000, 255 255 255))}p.breakout{font-size:20px;display:flex;flex-direction:column;align-items:center}p.breakout span{margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-0, 0px);color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}span{margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-4, 16px);font-size:14px}";
 const RtkEndedScreenStyle0 = rtkEndedScreenCss;

package/dist/esm/rtk-file-dropzone.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-c1fb98bb.js';
-import { e as defaultIconPack, h as useLanguage } from './ui-store-2965ff1a.js';
-import { S as SyncWithStore } from './index-849b9dd9.js';
+import { e as defaultIconPack, h as useLanguage } from './ui-store-9e486e1b.js';
+import { S as SyncWithStore } from './index-e65afca5.js';
 
 const rtkFileDropzoneCss = "#dropzone{position:absolute;top:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);bottom:var(--rtk-space-0, 0px);left:var(--rtk-space-0, 0px);z-index:10;display:none;flex-direction:column;align-items:center;justify-content:center;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}#dropzone.active{display:flex;animation:0.2s slide-up ease-in}";
 const RtkFileDropzoneStyle0 = rtkFileDropzoneCss;
@@ -42,7 +42,7 @@ const RtkFileDropzone = class {
         });
     }
     render() {
-        return (h(Host, { key: 'b48025cbb3461f9eb95eb3731d3cf0e0b7c370c7' }, h("div", { key: '00112e25f54a6b0a1c66530abcf232bf553d02d2', id: "dropzone", class: { active: this.dropzoneActivated }, part: "dropzone" }, h("rtk-icon", { key: '57b13d941c10854e3144d6107135e610734ed9f1', icon: this.iconPack.attach }), h("p", { key: '5f803ce1f2938255b865a6b905658463f6870060' }, this.t('chat.send_attachment')))));
+        return (h(Host, { key: 'd3fd9af2a148277b2481c94305104e43088a9b42' }, h("div", { key: 'f889ddc5635013ae7f364a6d36ef51936e179f7d', id: "dropzone", class: { active: this.dropzoneActivated }, part: "dropzone" }, h("rtk-icon", { key: 'ceb747a5fba7aa40ef108d404a7b8b02e6ab25b9', icon: this.iconPack.attach }), h("p", { key: '711b8a1ace2d73714f9abdbaba8c031e204fe07e' }, this.t('chat.send_attachment')))));
     }
 };
 __decorate([

package/dist/esm/rtk-file-message_3.entry.js

@@ -0,0 +1,142 @@
+import { r as registerInstance, h, H as Host, c as createEvent } from './index-c1fb98bb.js';
+import { C as ChatHead } from './ChatHead-15c2f8d4.js';
+import { s as sanitizeLink, h as hasOnlyEmojis } from './string-068ce30a.js';
+import { e as defaultIconPack, h as useLanguage } from './ui-store-9e486e1b.js';
+import { g as getExtension, a as getFileSize, d as downloadFile } from './file-6114f1a9.js';
+import { S as SyncWithStore } from './index-e65afca5.js';
+import { T as TextMessageView } from './TextMessage-ca92045e.js';
+import './date-b1f78dea.js';
+import './chat-ff185374.js';
+
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const RtkFileMessage = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Date object of now, to calculate distance between dates */
+        this.now = new Date();
+        /** Whether the message is continued by same user */
+        this.isContinued = false;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** show message in bubble */
+        this.showBubble = false;
+    }
+    render() {
+        const link = sanitizeLink(this.message.link);
+        return (h(Host, { key: '915330674d273f2c45ece29cb5e7c9408ee5cbe8' }, !this.isContinued && (h(ChatHead, { key: 'eb2877f6224de9be1c975f0d2dc010f29fef3bc9', name: this.message.displayName, time: this.message.time, now: this.now })), h("div", { key: '87d7f309379f23b76e404da2039cd2fd3fb7c95a', class: {
+                body: true,
+                bubble: this.showBubble,
+            }, part: "body" }, h("div", { key: '7683a17adf5784ef0e6af8f396c58c005a369f6b', class: "file" }, h("div", { key: '3005eb72a09ba4d241ec919f957b95f26077ed13', class: "file-data" }, h("div", { key: 'ca5fc3700f868fd321793d4da672e9c7aad38056', class: "name" }, this.message.name), h("div", { key: '463c37838eec7b9ee9b096803cb785445206041a', class: "file-data-split" }, h("div", { key: '9470b898708fc78ca01c2926f8fb6a3c6fae6eea', class: "ext" }, getExtension(this.message.name)), h("span", { key: '35fa7f199b45bb6e64a72614ca1eceaafa6044e7', class: "divider" }), h("div", { key: 'b19a9d32151bb1ddbbb7689dc6d8e09b021d0612', class: "size" }, getFileSize(this.message.size)))), h("rtk-button", { key: '6bb6a3223801a944fb9018765385ebadeae15e0f', variant: "secondary", kind: "icon", onClick: () => downloadFile(link, { name: this.message.name, fallbackName: 'file' }), part: "button" }, h("rtk-icon", { key: '9a7335c6720295a7f0b9073e35ac86014be53316', icon: this.iconPack.download }))))));
+    }
+};
+__decorate$2([
+    SyncWithStore()
+], RtkFileMessage.prototype, "iconPack", void 0);
+__decorate$2([
+    SyncWithStore()
+], RtkFileMessage.prototype, "t", void 0);
+
+const rtkImageMessageCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.image-spinner{cursor:wait}.image-errored{cursor:not-allowed}";
+const RtkImageMessageStyle0 = rtkImageMessageCss;
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const RtkImageMessage = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
+        /** Date object of now, to calculate distance between dates */
+        this.now = new Date();
+        /** Whether the message is continued by same user */
+        this.isContinued = false;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** show message in bubble */
+        this.showBubble = false;
+        this.status = 'loading';
+    }
+    render() {
+        return (h(Host, { key: '1267763841d7162f1ad4152a5c4cdd809aaa3808' }, !this.isContinued && (h(ChatHead, { key: '9b415f65f456f8624cd4f981d7f8ae191772a3ce', name: this.message.displayName, time: this.message.time, now: this.now })), h("div", { key: '38ea5e45140f543ae6d16d2d00b0bf0c9a671910', class: {
+                body: true,
+                bubble: this.showBubble,
+            }, part: "body" }, h("div", { key: '3c842144038f9612fc46c3f5d18f87342f8376c4', class: { image: true, loaded: this.status === 'loaded' } }, h("img", { key: '39b2978696328d6ed6ac3bbbdc83a57fc7fa7d88', src: sanitizeLink(this.message.link), onLoad: () => {
+                this.status = 'loaded';
+            }, onError: () => {
+                this.status = 'errored';
+            }, onClick: () => {
+                if (this.status === 'loaded') {
+                    this.stateUpdate.emit({ image: this.message });
+                }
+            } }), this.status === 'loading' && (h("div", { key: 'd83ca52f9330ddef301be3d4a84b663f91864ea3', class: "image-spinner", title: this.t('chat.img.loading'), "aria-label": this.t('chat.img.loading') }, h("rtk-spinner", { key: '6333ce5847ecd62793d5777a886a3a1a33641fab', iconPack: this.iconPack }))), this.status === 'errored' && (h("div", { key: 'e4063e68ad477069d8acaa03d0dd1c692f82c76f', class: "image-errored", title: this.t('chat.error.img_not_found'), "aria-label": this.t('chat.error.img_not_found') }, h("rtk-icon", { key: '010562aee164fdb63e45da4c0eaa29ad1cbdf66c', icon: this.iconPack.image_off }))), this.status === 'loaded' && (h("div", { key: '14773362280e9dd167db61e58b3f729e0a86d88d', class: "actions" }, h("rtk-button", { key: '8e0cd659fd47074729fa3e63897e3e8eab3193a3', class: "action", variant: "secondary", kind: "icon", onClick: () => {
+                this.stateUpdate.emit({ image: this.message });
+            } }, h("rtk-icon", { key: '9db76d4971f2b6b45d87b6015b7ef449fa46ba85', icon: this.iconPack.full_screen_maximize })), h("rtk-button", { key: '978934fd136ab2c364521ec55d25e578940e5c7c', class: "action", variant: "secondary", kind: "icon", onClick: () => downloadFile(this.message.link, { fallbackName: 'image' }) }, h("rtk-icon", { key: '55be50aff54309a76e5348f437805e2872bcf548', icon: this.iconPack.download }))))))));
+    }
+};
+__decorate$1([
+    SyncWithStore()
+], RtkImageMessage.prototype, "iconPack", void 0);
+__decorate$1([
+    SyncWithStore()
+], RtkImageMessage.prototype, "t", void 0);
+RtkImageMessage.style = RtkImageMessageStyle0;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const RtkTextMessage = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Date object of now, to calculate distance between dates */
+        this.now = new Date();
+        /** Whether the message is continued by same user */
+        this.isContinued = false;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** show message in bubble */
+        this.showBubble = false;
+    }
+    render() {
+        return (h(Host, { key: '4182f98abea77690fb9159047ef66c9ca0dbefbf' }, !this.isContinued && (h(ChatHead, { key: '1132b1b04efd80d172e172cfa2c6a8c0de3ff9aa', name: this.message.displayName, time: this.message.time, now: this.now })), h("div", { key: '01736d14164f0b10c50243f721f82914012a47a9', class: {
+                body: true,
+                bubble: this.showBubble,
+            }, part: "body" }, h("div", { key: 'fa971c508e884fc58c434d14a5e398e04f046168', class: { text: true, emoji: hasOnlyEmojis(this.message.message) } }, h(TextMessageView, { key: '2ffdf13b83faef9f39f8cd2825ec042a92c6e6a6', message: this.message.message })))));
+    }
+};
+__decorate([
+    SyncWithStore()
+], RtkTextMessage.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkTextMessage.prototype, "t", void 0);
+
+export { RtkFileMessage as rtk_file_message, RtkImageMessage as rtk_image_message, RtkTextMessage as rtk_text_message };

package/dist/esm/rtk-fullscreen-toggle.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-c1fb98bb.js';
-import { e as defaultIconPack, h as useLanguage } from './ui-store-2965ff1a.js';
+import { e as defaultIconPack, h as useLanguage } from './ui-store-9e486e1b.js';
 import { i as isFullScreenEnabled, r as requestFullScreen, e as exitFullSreen, a as isFullScreenSupported } from './full-screen-1f58c594.js';
-import { S as SyncWithStore } from './index-849b9dd9.js';
+import { S as SyncWithStore } from './index-e65afca5.js';
 
 const rtkFullscreenToggleCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:block}:host([data-hidden]){display:none}";
 const RtkFullscreenToggleStyle0 = rtkFullscreenToggleCss;

package/dist/esm/rtk-grid-pagination.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-c1fb98bb.js';
-import { e as defaultIconPack, h as useLanguage } from './ui-store-2965ff1a.js';
-import { S as SyncWithStore } from './index-849b9dd9.js';
+import { e as defaultIconPack, h as useLanguage } from './ui-store-9e486e1b.js';
+import { S as SyncWithStore } from './index-e65afca5.js';
 import { d as debounce_1 } from './debounce-0169a54d.js';
 
 const rtkGridPaginationCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;font-size:16px}:host([data-hidden]){display:none}:host([size='sm']){font-size:12px}:host([size='sm']) .center{margin-left:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-0, 0px)}:host([size='sm']) rtk-button{height:var(--rtk-space-7, 28px);width:var(--rtk-space-7, 28px)}:host([size='sm']) rtk-button rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px)}rtk-button{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.center{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.center .page{color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.center .slash{margin-left:var(--rtk-space-0\\.5, 2px);margin-right:var(--rtk-space-0\\.5, 2px)}.center .pages{align-self:flex-end;font-size:12px}:host([variant='rounded']){overflow:hidden;border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}:host([variant='rounded']) rtk-button{border-radius:9999px;border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}:host([variant='rounded']) rtk-button:not([disabled]):hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}:host([variant='rounded']) rtk-button:not([disabled]):focus{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}:host([variant='grid']) rtk-button{position:absolute;top:50%;height:var(--rtk-space-20, 80px);width:var(--rtk-space-20, 80px);opacity:0.2;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}:host([variant='grid']) rtk-button:hover{opacity:1}:host([variant='grid']) rtk-button{transform:translateY(-50%)}:host([variant='grid']) rtk-button.prev{left:var(--rtk-space-0, 0px);border-top-right-radius:9999px;border-bottom-right-radius:9999px}:host([variant='grid']) rtk-button.next{right:var(--rtk-space-0, 0px);border-top-left-radius:9999px;border-bottom-left-radius:9999px}:host([variant='grid']) rtk-button.auto{left:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);border-top-right-radius:9999px;border-bottom-right-radius:9999px}:host([variant='grid']) .dots{position:absolute;left:50%;bottom:var(--rtk-space-3, 12px);display:flex;align-items:center;transform:translateX(-50%)}:host([variant='grid']) .dots .dot{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-2, 8px);width:var(--rtk-space-2, 8px);cursor:pointer;border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}:host([variant='grid']) .dots .dot:last-child{margin-right:var(--rtk-space-0, 0px)}:host([variant='grid']) .dots .dot.active{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity))}:host([variant='grid'][size='sm']) rtk-button{height:var(--rtk-space-14, 56px);width:var(--rtk-space-14, 56px);opacity:0.1}";

package/dist/esm/rtk-grid.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-c1fb98bb.js';
-import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage, R as isLiveStreamViewer } from './ui-store-2965ff1a.js';
+import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage, N as isLiveStreamViewer } from './ui-store-9e486e1b.js';
 import { d as debounce_1 } from './debounce-0169a54d.js';
 import { R as Render } from './index-d31a2e33.js';
-import { S as SyncWithStore } from './index-849b9dd9.js';
+import { S as SyncWithStore } from './index-e65afca5.js';
 import { d as defaultGridSize } from './grid-a3ca5a3e.js';
 
 const rtkGridCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:block;height:100%;width:100%}.offline-grid{display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center}.offline-grid h3{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);margin-left:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-0, 0px);font-size:20px;font-weight:500;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.offline-grid p{margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-1, 4px);margin-left:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-0, 0px);text-align:center;font-size:16px;font-weight:400;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.offline-grid rtk-icon{margin-bottom:var(--rtk-space-2, 8px)}.webinar-stage{box-sizing:border-box;height:100%;display:flex;align-content:center;align-items:center;justify-content:center;text-align:center}.webinar-stage h2{margin:var(--rtk-space-0, 0px);font-weight:normal}rtk-viewer-count{display:none}.ctr{display:flex;flex-direction:column;align-items:center}.message{font-size:16px;border-radius:var(--rtk-border-radius-lg, 12px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));padding-left:var(--rtk-space-8, 32px);padding-right:var(--rtk-space-8, 32px);padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px);color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.description{margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-4, 16px);font-size:14px}rtk-livestream-indicator{display:none}@media only screen and (max-device-height: 480px) and (orientation: landscape){rtk-viewer-count[variant='embedded']{position:absolute;top:var(--rtk-space-0, 0px);right:var(--rtk-space-2, 8px);z-index:20;margin-top:var(--rtk-space-0, 0px);margin-left:var(--rtk-space-0, 0px);display:flex}rtk-livestream-indicator{position:absolute;top:var(--rtk-space-0, 0px);left:var(--rtk-space-2, 8px);z-index:20;margin-top:var(--rtk-space-0, 0px);margin-left:var(--rtk-space-0, 0px);display:flex}}";

package/dist/esm/rtk-header.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host } from './index-c1fb98bb.js';
-import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage } from './ui-store-2965ff1a.js';
+import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage } from './ui-store-9e486e1b.js';
 import { R as Render } from './index-d31a2e33.js';
-import { S as SyncWithStore } from './index-849b9dd9.js';
+import { S as SyncWithStore } from './index-e65afca5.js';
 
 const rtkHeaderCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:flex;height:var(--rtk-space-12, 48px);align-items:center;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px)}@media only screen and (max-device-height: 480px) and (orientation: landscape){:host{display:none !important}}@media only screen and (max-height: 480px) and (orientation: landscape){:host{display:none !important}}";
 const RtkHeaderStyle0 = rtkHeaderCss;
@@ -39,7 +39,7 @@ const RtkHeader = class {
             iconPack: this.iconPack,
             size: this.size,
         };
-        return (h(Host, { key: '1f3b7e1a0a0895e6429c12ddb44470ef35a30d23' }, !this.disableRender && h(Render, { key: '3b1525e4f4aaac177b466e4c72be4b7492bd404f', element: "rtk-header", defaults: defaults, onlyChildren: true }), h("slot", { key: '6f770052362e6daa803638e0857de41c2c894ed3' })));
+        return (h(Host, { key: '00cfd80dbffa3f1c9c66e00397c7db1e7292664c' }, !this.disableRender && h(Render, { key: '521ab0493477836b0a5ce6de5ed85a842c71d32a', element: "rtk-header", defaults: defaults, onlyChildren: true }), h("slot", { key: 'f73693073b8a7162a5db2ec73e93de6bbccea7dd' })));
     }
 };
 __decorate([

package/dist/esm/rtk-idle-screen.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-c1fb98bb.js';
-import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage } from './ui-store-2965ff1a.js';
-import { S as SyncWithStore } from './index-849b9dd9.js';
+import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage } from './ui-store-9e486e1b.js';
+import { S as SyncWithStore } from './index-e65afca5.js';
 
 const rtkIdleScreenCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.ctr{display:flex;flex-direction:column;align-items:center;gap:var(--rtk-space-8, 32px)}rtk-logo.loaded{height:var(--rtk-space-12, 48px)}rtk-spinner{height:var(--rtk-space-12, 48px);width:var(--rtk-space-12, 48px);--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity))}";
 const RtkIdleScreenStyle0 = rtkIdleScreenCss;
@@ -26,7 +26,7 @@ const RtkIdleScreen = class {
         this.t = useLanguage();
     }
     render() {
-        return (h(Host, { key: 'c5eff1252dc42e20190130962994d713b95b922b' }, h("slot", { key: '99a385d737fba394bcce3340d7ceaa49fe290580' }, h("div", { key: '484cfb782b699eea5be2eac7c003dcaea922177a', class: "ctr", part: "container" }, h("rtk-logo", { key: '0e190078187680faec1df09a7a50bc80d405a978', meeting: this.meeting, config: this.config, t: this.t, part: "logo" }), h("rtk-spinner", { key: 'f00bae50ccb13120714d2d94c9629747824b5eaa', "aria-label": "Idle, waiting for meeting data", part: "spinner", iconPack: this.iconPack })))));
+        return (h(Host, { key: '1243feb830c4b40ddbb41409ba5e4f5259d4aba2' }, h("slot", { key: 'e5c674091393508a202d514e9ad41ccae687a660' }, h("div", { key: 'bd6e459fc18148edf47ed45df3e9f1f3d3356383', class: "ctr", part: "container" }, h("rtk-logo", { key: '9b3211860563ef93307902744b37985908f71cdf', meeting: this.meeting, config: this.config, t: this.t, part: "logo" }), h("rtk-spinner", { key: '584a3355b5a023ae9bc66f1eafbd85f3d3b9bb92', "aria-label": "Idle, waiting for meeting data", part: "spinner", iconPack: this.iconPack })))));
     }
 };
 __decorate([

package/dist/esm/rtk-image-viewer.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-c1fb98bb.js';
-import { h as useLanguage, e as defaultIconPack } from './ui-store-2965ff1a.js';
-import { d as downloadFile } from './file-849468c1.js';
-import { S as SyncWithStore } from './index-849b9dd9.js';
-import { f as formatName, s as shorten } from './string-5e8dab07.js';
+import { h as useLanguage, e as defaultIconPack } from './ui-store-9e486e1b.js';
+import { d as downloadFile } from './file-6114f1a9.js';
+import { S as SyncWithStore } from './index-e65afca5.js';
+import { f as formatName, a as shorten } from './string-068ce30a.js';
 
 const rtkImageViewerCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{width:1140px;max-width:100%;box-sizing:border-box;display:flex;flex-direction:column;padding:var(--rtk-space-6, 24px);padding-top:var(--rtk-space-5, 20px);overflow-y:auto;color:rgb(var(--rtk-colors-text-1000, 255 255 255));z-index:40;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}.displayName{font-weight:700}.image-ctr{margin-top:var(--rtk-space-2, 8px);box-sizing:border-box;display:flex;justify-content:center;overflow:hidden}.actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--rtk-space-2, 8px)}img{box-sizing:border-box;display:block;max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain}.header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--rtk-space-4, 16px)}.shared-by-user{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}:host([size='sm']) .header{flex-direction:column}:host([size='sm']) .header .actions{margin-top:var(--rtk-space-4, 16px)}";
 const RtkImageViewerStyle0 = rtkImageViewerCss;
@@ -41,7 +41,7 @@ const RtkImageViewer = class {
         document.removeEventListener('click', this.handleOutsideClick);
     }
     render() {
-        return (h(Host, { key: 'f7d65ee86716b9bea4ff1839df12647fa03bc053', class: "scrollbar", onClick: (e) => e.stopPropagation() }, h("div", { key: '30715a0e1d52250815411be7a4339c47a9c050ff', class: "header" }, h("div", { key: '69bcd74cea972c9663f46549b1c62b08afd94558', class: "shared-by-user" }, this.t('chat.img.shared_by'), ' ', h("span", { key: '86b7f0095054d490e0a534d2c5df3733503dde72', class: "displayName" }, formatName(shorten(this.image.displayName)))), h("div", { key: '84b428b667da741f420753a0c58ef6a04169f765', class: "actions" }, h("rtk-button", { key: 'dce9d2b6c6e4b7dcfb429839762a0f350dc474df', onClick: () => downloadFile(this.image.link, { fallbackName: 'image' }) }, h("rtk-icon", { key: 'f9a6b1fbd5f770555ba4bc7267fff7ca6102f097', icon: this.iconPack.download, slot: "start" }), "Download"), h("rtk-button", { key: '4051efa57da483dc628769fdd1e754a49fd389b7', kind: "icon", variant: "secondary", onClick: () => this.close.emit() }, h("rtk-icon", { key: 'ee1e43b0f89ad76c5cad6db21d6f8759c5d87a89', icon: this.iconPack.dismiss })))), h("div", { key: '752ab0206aa1b1e9447f9814210bcaa346dfab5d', class: "image-ctr" }, h("img", { key: '7de531b58aa5aad94ab03d500d34d13c37b43ba1', src: this.image.link }))));
+        return (h(Host, { key: '6e6e27bf5529ef5af5b0b7f02c0fcda77dba492c', class: "scrollbar", onClick: (e) => e.stopPropagation() }, h("div", { key: '53b1df2b76fb58d37154f246c09c38f17c4ac6b3', class: "header" }, h("div", { key: 'e5707219faa115dfccd330643d022c90abdcfc5b', class: "shared-by-user" }, this.t('chat.img.shared_by'), ' ', h("span", { key: '8387ffa67b78746a8d94f130ff23241313b5c1d8', class: "displayName" }, formatName(shorten(this.image.displayName)))), h("div", { key: 'cd70a8a95e264a533d2d093e4d32df49dfc3f2c7', class: "actions" }, h("rtk-button", { key: '404da530999c81a7754c07ed48ffb73eb8f915e3', onClick: () => downloadFile(this.image.link, { fallbackName: 'image' }) }, h("rtk-icon", { key: '5d7806419e55072fcfb8735229cef5b9b0816669', icon: this.iconPack.download, slot: "start" }), "Download"), h("rtk-button", { key: '6ac87cb0172f319706d8e8d4591a76d3fa60a2b9', kind: "icon", variant: "secondary", onClick: () => this.close.emit() }, h("rtk-icon", { key: 'd25982c4b4f3c422df8187782a762b12fffb76df', icon: this.iconPack.dismiss })))), h("div", { key: '968d31b08e5113419bbdc63c3887a8537d198284', class: "image-ctr" }, h("img", { key: 'a806265d98e09094dd267afc3dc6018f6cf692c4', src: this.image.link }))));
     }
 };
 __decorate([