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

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

@@ -38,7 +38,7 @@ const RtkDebuggerToggle = class {
         });
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '5675d28a2da23df6c54e79827b0adf37ef128cd9', title: this.t('Troubleshooting') }, index$1.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 (index$1.h(index$1.Host, { key: 'cc9ec6cade76093abba3a48502d12a82868a875a', title: this.t('Troubleshooting') }, index$1.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/cjs/rtk-dialog-manager.cjs.entry.js

@@ -0,0 +1,154 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-1cb28da8.js');
+const index = require('./index-8d07e125.js');
+const index$2 = require('./index-821d14b7.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;
+
+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 RtkDialogManager = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.stateUpdate = index$1.createEvent(this, "rtkStateUpdate", 7);
+        /** UI Config */
+        this.config = uiStore.createDefaultConfig();
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        this.updateStoreState = (state, value) => {
+            this.stateUpdate.emit({ [state]: value });
+        };
+        this.cancelJoinStage = async () => {
+            var _a, _b, _c;
+            if (((_a = this.meeting.stage) === null || _a === void 0 ? void 0 : _a.status) === 'ACCEPTED_TO_JOIN_STAGE') {
+                await ((_c = (_b = this.meeting) === null || _b === void 0 ? void 0 : _b.stage) === null || _c === void 0 ? void 0 : _c.leave());
+            }
+            this.updateStoreState('activeJoinStage', false);
+        };
+        this.joinStage = async () => {
+            await this.meeting.stage.join();
+            /** NOTE(ishita1805): We close the modal once the status has changed */
+        };
+        this.stageStatusUpdateListener = (status) => {
+            var _a;
+            if (!((_a = this.states) === null || _a === void 0 ? void 0 : _a.activeJoinStage))
+                return;
+            if (status === 'ON_STAGE')
+                this.updateStoreState('activeJoinStage', false);
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.meeting.stage) === null || _a === void 0 ? void 0 : _a.removeListener('stageStatusUpdate', this.stageStatusUpdateListener);
+    }
+    meetingChanged(meeting) {
+        if (!meeting)
+            return;
+        const { stage } = meeting;
+        stage === null || stage === void 0 ? void 0 : stage.addListener('stageStatusUpdate', this.stageStatusUpdateListener);
+    }
+    render() {
+        var _a, _b, _c, _d;
+        if (!this.meeting) {
+            return;
+        }
+        const defaults = {
+            meeting: this.meeting,
+            states: this.states,
+            config: this.config,
+            size: this.size,
+            iconPack: this.iconPack,
+            t: this.t,
+        };
+        const states = this.states;
+        if ((states === null || states === void 0 ? void 0 : states.image) != null) {
+            const image = states.image;
+            const onImageClose = () => {
+                this.stateUpdate.emit({ image: null });
+            };
+            return (index$1.h(index$1.Host, null, index$1.h("rtk-dialog", { open: true, onRtkDialogClose: onImageClose, hideCloseButton: true, iconPack: this.iconPack, t: this.t }, index$1.h(index$2.Render, { element: "rtk-image-viewer", defaults: defaults, props: { image, onClose: onImageClose } }))));
+        }
+        else if ((states === null || states === void 0 ? void 0 : states.activeSettings) === true) {
+            return (index$1.h(index$1.Host, null, index$1.h("rtk-dialog", { open: true, onRtkDialogClose: () => this.updateStoreState('activeSettings', false), iconPack: this.iconPack, t: this.t }, index$1.h(index$2.Render, { element: "rtk-settings", defaults: defaults }))));
+        }
+        else if ((states === null || states === void 0 ? void 0 : states.activeDebugger) === true) {
+            return (index$1.h(index$1.Host, null, index$1.h("rtk-dialog", { open: true, onRtkDialogClose: () => this.updateStoreState('activeDebugger', false), iconPack: this.iconPack, t: this.t }, index$1.h("rtk-debugger", Object.assign({}, defaults)))));
+        }
+        else if ((states === null || states === void 0 ? void 0 : states.activeLeaveConfirmation) === true) {
+            return (index$1.h(index$1.Host, null, index$1.h("rtk-dialog", { open: true, onRtkDialogClose: () => this.updateStoreState('activeLeaveConfirmation', false), iconPack: this.iconPack, t: this.t }, index$1.h("rtk-leave-meeting", Object.assign({}, defaults)))));
+        }
+        else if (((_a = states === null || states === void 0 ? void 0 : states.activePermissionsMessage) === null || _a === void 0 ? void 0 : _a.enabled) === true) {
+            return (index$1.h(index$1.Host, null, index$1.h("rtk-dialog", { open: true, hideCloseButton: true, iconPack: this.iconPack, t: this.t }, index$1.h("rtk-permissions-message", Object.assign({}, defaults)))));
+        }
+        else if (((_b = states === null || states === void 0 ? void 0 : states.activeBreakoutRoomsManager) === null || _b === void 0 ? void 0 : _b.active) === true) {
+            return (index$1.h(index$1.Host, null, index$1.h("rtk-dialog", { open: true, onRtkDialogClose: () => this.updateStoreState('activeBreakoutRoomsManager', {
+                    active: false,
+                    data: undefined,
+                }), iconPack: this.iconPack, t: this.t }, index$1.h("rtk-breakout-rooms-manager", Object.assign({}, defaults)))));
+        }
+        else if (((_c = states === null || states === void 0 ? void 0 : states.activeConfirmationModal) === null || _c === void 0 ? void 0 : _c.active) === true) {
+            return (index$1.h(index$1.Host, null, index$1.h("rtk-dialog", { open: true, onRtkDialogClose: () => this.updateStoreState('activeConfirmationModal', false), iconPack: this.iconPack, t: this.t }, index$1.h("rtk-confirmation-modal", Object.assign({}, defaults)))));
+        }
+        else if (((_d = states === null || states === void 0 ? void 0 : states.activeOverlayModal) === null || _d === void 0 ? void 0 : _d.active) === true) {
+            return (index$1.h(index$1.Host, null, index$1.h("rtk-overlay-modal", { meeting: this.meeting, states: this.states, iconPack: this.iconPack, t: this.t })));
+        }
+        else if (states === null || states === void 0 ? void 0 : states.activeBroadcastMessageModal) {
+            return (index$1.h(index$1.Host, null, index$1.h("rtk-dialog", { open: true, onRtkDialogClose: () => this.updateStoreState('activeBroadcastMessageModal', false), iconPack: this.iconPack, t: this.t }, index$1.h("rtk-broadcast-message-modal", Object.assign({}, defaults)))));
+        }
+        else if ((states === null || states === void 0 ? void 0 : states.activeJoinStage) === true) {
+            const dataState = {
+                title: this.t('stage.join_title'),
+                label: {
+                    accept: this.t('stage.join_confirm'),
+                    reject: this.t('stage.join_cancel'),
+                },
+                description: this.t('stage.join_summary'),
+            };
+            return (index$1.h(index$1.Host, null, index$1.h("rtk-dialog", { open: true, onRtkDialogClose: this.cancelJoinStage, iconPack: this.iconPack, t: this.t }, index$1.h("rtk-join-stage", Object.assign({ dataConfig: dataState, onRtkJoinStage: this.joinStage, onRtkLeaveStage: this.cancelJoinStage }, defaults)))));
+        }
+        else if ((states === null || states === void 0 ? void 0 : states.activeMuteAllConfirmation) === true) {
+            return (index$1.h(index$1.Host, null, index$1.h("rtk-dialog", { open: true, onRtkDialogClose: () => {
+                    this.updateStoreState('activeMuteAllConfirmation', false);
+                }, iconPack: this.iconPack, t: this.t }, index$1.h("rtk-mute-all-confirmation", Object.assign({}, defaults)))));
+        }
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkDialogManager.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkDialogManager.prototype, "config", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkDialogManager.prototype, "states", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkDialogManager.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkDialogManager.prototype, "t", void 0);
+RtkDialogManager.style = RtkDialogManagerStyle0;
+
+exports.rtk_dialog_manager = RtkDialogManager;

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

@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-1cb28da8.js');
+const index = require('./index-8d07e125.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) {
+        index$1.registerInstance(this, hostRef);
+        this.onClose = index$1.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 = uiStore.createDefaultConfig();
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.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 (index$1.h(index$1.Host, null, index$1.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();
+                }
+            } }, index$1.h("slot", null), !this.hideCloseButton && (index$1.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" }, index$1.h("rtk-icon", { icon: this.iconPack.dismiss }))))));
+    }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkDialog.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkDialog.prototype, "config", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkDialog.prototype, "states", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkDialog.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkDialog.prototype, "t", void 0);
+RtkDialog.style = RtkDialogStyle0;
+
+exports.rtk_dialog = RtkDialog;

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

@@ -46,7 +46,7 @@ const RtkFileDropzone = class {
         });
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'b48025cbb3461f9eb95eb3731d3cf0e0b7c370c7' }, index$1.h("div", { key: '00112e25f54a6b0a1c66530abcf232bf553d02d2', id: "dropzone", class: { active: this.dropzoneActivated }, part: "dropzone" }, index$1.h("rtk-icon", { key: '57b13d941c10854e3144d6107135e610734ed9f1', icon: this.iconPack.attach }), index$1.h("p", { key: '5f803ce1f2938255b865a6b905658463f6870060' }, this.t('chat.send_attachment')))));
+        return (index$1.h(index$1.Host, { key: 'd3fd9af2a148277b2481c94305104e43088a9b42' }, index$1.h("div", { key: 'f889ddc5635013ae7f364a6d36ef51936e179f7d', id: "dropzone", class: { active: this.dropzoneActivated }, part: "dropzone" }, index$1.h("rtk-icon", { key: 'ceb747a5fba7aa40ef108d404a7b8b02e6ab25b9', icon: this.iconPack.attach }), index$1.h("p", { key: '711b8a1ace2d73714f9abdbaba8c031e204fe07e' }, this.t('chat.send_attachment')))));
     }
 };
 __decorate([

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

@@ -0,0 +1,148 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const ChatHead = require('./ChatHead-e13f3b0e.js');
+const string = require('./string-9bce3253.js');
+const uiStore = require('./ui-store-1cb28da8.js');
+const file = require('./file-0b9afa34.js');
+const index = require('./index-8d07e125.js');
+const TextMessage = require('./TextMessage-7bb3e1fd.js');
+require('./date-61ffcd0a.js');
+require('./chat-717e517d.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) {
+        index$1.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 = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        /** show message in bubble */
+        this.showBubble = false;
+    }
+    render() {
+        const link = string.sanitizeLink(this.message.link);
+        return (index$1.h(index$1.Host, { key: '915330674d273f2c45ece29cb5e7c9408ee5cbe8' }, !this.isContinued && (index$1.h(ChatHead.ChatHead, { key: 'eb2877f6224de9be1c975f0d2dc010f29fef3bc9', name: this.message.displayName, time: this.message.time, now: this.now })), index$1.h("div", { key: '87d7f309379f23b76e404da2039cd2fd3fb7c95a', class: {
+                body: true,
+                bubble: this.showBubble,
+            }, part: "body" }, index$1.h("div", { key: '7683a17adf5784ef0e6af8f396c58c005a369f6b', class: "file" }, index$1.h("div", { key: '3005eb72a09ba4d241ec919f957b95f26077ed13', class: "file-data" }, index$1.h("div", { key: 'ca5fc3700f868fd321793d4da672e9c7aad38056', class: "name" }, this.message.name), index$1.h("div", { key: '463c37838eec7b9ee9b096803cb785445206041a', class: "file-data-split" }, index$1.h("div", { key: '9470b898708fc78ca01c2926f8fb6a3c6fae6eea', class: "ext" }, file.getExtension(this.message.name)), index$1.h("span", { key: '35fa7f199b45bb6e64a72614ca1eceaafa6044e7', class: "divider" }), index$1.h("div", { key: 'b19a9d32151bb1ddbbb7689dc6d8e09b021d0612', class: "size" }, file.getFileSize(this.message.size)))), index$1.h("rtk-button", { key: '6bb6a3223801a944fb9018765385ebadeae15e0f', variant: "secondary", kind: "icon", onClick: () => file.downloadFile(link, { name: this.message.name, fallbackName: 'file' }), part: "button" }, index$1.h("rtk-icon", { key: '9a7335c6720295a7f0b9073e35ac86014be53316', icon: this.iconPack.download }))))));
+    }
+};
+__decorate$2([
+    index.SyncWithStore()
+], RtkFileMessage.prototype, "iconPack", void 0);
+__decorate$2([
+    index.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) {
+        index$1.registerInstance(this, hostRef);
+        this.stateUpdate = index$1.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 = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        /** show message in bubble */
+        this.showBubble = false;
+        this.status = 'loading';
+    }
+    render() {
+        return (index$1.h(index$1.Host, { key: '1267763841d7162f1ad4152a5c4cdd809aaa3808' }, !this.isContinued && (index$1.h(ChatHead.ChatHead, { key: '9b415f65f456f8624cd4f981d7f8ae191772a3ce', name: this.message.displayName, time: this.message.time, now: this.now })), index$1.h("div", { key: '38ea5e45140f543ae6d16d2d00b0bf0c9a671910', class: {
+                body: true,
+                bubble: this.showBubble,
+            }, part: "body" }, index$1.h("div", { key: '3c842144038f9612fc46c3f5d18f87342f8376c4', class: { image: true, loaded: this.status === 'loaded' } }, index$1.h("img", { key: '39b2978696328d6ed6ac3bbbdc83a57fc7fa7d88', src: string.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' && (index$1.h("div", { key: 'd83ca52f9330ddef301be3d4a84b663f91864ea3', class: "image-spinner", title: this.t('chat.img.loading'), "aria-label": this.t('chat.img.loading') }, index$1.h("rtk-spinner", { key: '6333ce5847ecd62793d5777a886a3a1a33641fab', iconPack: this.iconPack }))), this.status === 'errored' && (index$1.h("div", { key: 'e4063e68ad477069d8acaa03d0dd1c692f82c76f', class: "image-errored", title: this.t('chat.error.img_not_found'), "aria-label": this.t('chat.error.img_not_found') }, index$1.h("rtk-icon", { key: '010562aee164fdb63e45da4c0eaa29ad1cbdf66c', icon: this.iconPack.image_off }))), this.status === 'loaded' && (index$1.h("div", { key: '14773362280e9dd167db61e58b3f729e0a86d88d', class: "actions" }, index$1.h("rtk-button", { key: '8e0cd659fd47074729fa3e63897e3e8eab3193a3', class: "action", variant: "secondary", kind: "icon", onClick: () => {
+                this.stateUpdate.emit({ image: this.message });
+            } }, index$1.h("rtk-icon", { key: '9db76d4971f2b6b45d87b6015b7ef449fa46ba85', icon: this.iconPack.full_screen_maximize })), index$1.h("rtk-button", { key: '978934fd136ab2c364521ec55d25e578940e5c7c', class: "action", variant: "secondary", kind: "icon", onClick: () => file.downloadFile(this.message.link, { fallbackName: 'image' }) }, index$1.h("rtk-icon", { key: '55be50aff54309a76e5348f437805e2872bcf548', icon: this.iconPack.download }))))))));
+    }
+};
+__decorate$1([
+    index.SyncWithStore()
+], RtkImageMessage.prototype, "iconPack", void 0);
+__decorate$1([
+    index.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) {
+        index$1.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 = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        /** show message in bubble */
+        this.showBubble = false;
+    }
+    render() {
+        return (index$1.h(index$1.Host, { key: '4182f98abea77690fb9159047ef66c9ca0dbefbf' }, !this.isContinued && (index$1.h(ChatHead.ChatHead, { key: '1132b1b04efd80d172e172cfa2c6a8c0de3ff9aa', name: this.message.displayName, time: this.message.time, now: this.now })), index$1.h("div", { key: '01736d14164f0b10c50243f721f82914012a47a9', class: {
+                body: true,
+                bubble: this.showBubble,
+            }, part: "body" }, index$1.h("div", { key: 'fa971c508e884fc58c434d14a5e398e04f046168', class: { text: true, emoji: string.hasOnlyEmojis(this.message.message) } }, index$1.h(TextMessage.TextMessageView, { key: '2ffdf13b83faef9f39f8cd2825ec042a92c6e6a6', message: this.message.message })))));
+    }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkTextMessage.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkTextMessage.prototype, "t", void 0);
+
+exports.rtk_file_message = RtkFileMessage;
+exports.rtk_image_message = RtkImageMessage;
+exports.rtk_text_message = RtkTextMessage;

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

@@ -43,7 +43,7 @@ const RtkHeader = class {
             iconPack: this.iconPack,
             size: this.size,
         };
-        return (index$1.h(index$1.Host, { key: '1f3b7e1a0a0895e6429c12ddb44470ef35a30d23' }, !this.disableRender && index$1.h(index$2.Render, { key: '3b1525e4f4aaac177b466e4c72be4b7492bd404f', element: "rtk-header", defaults: defaults, onlyChildren: true }), index$1.h("slot", { key: '6f770052362e6daa803638e0857de41c2c894ed3' })));
+        return (index$1.h(index$1.Host, { key: '00cfd80dbffa3f1c9c66e00397c7db1e7292664c' }, !this.disableRender && index$1.h(index$2.Render, { key: '521ab0493477836b0a5ce6de5ed85a842c71d32a', element: "rtk-header", defaults: defaults, onlyChildren: true }), index$1.h("slot", { key: 'f73693073b8a7162a5db2ec73e93de6bbccea7dd' })));
     }
 };
 __decorate([

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

@@ -30,7 +30,7 @@ const RtkIdleScreen = class {
         this.t = uiStore.useLanguage();
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'c5eff1252dc42e20190130962994d713b95b922b' }, index$1.h("slot", { key: '99a385d737fba394bcce3340d7ceaa49fe290580' }, index$1.h("div", { key: '484cfb782b699eea5be2eac7c003dcaea922177a', class: "ctr", part: "container" }, index$1.h("rtk-logo", { key: '0e190078187680faec1df09a7a50bc80d405a978', meeting: this.meeting, config: this.config, t: this.t, part: "logo" }), index$1.h("rtk-spinner", { key: 'f00bae50ccb13120714d2d94c9629747824b5eaa', "aria-label": "Idle, waiting for meeting data", part: "spinner", iconPack: this.iconPack })))));
+        return (index$1.h(index$1.Host, { key: '1243feb830c4b40ddbb41409ba5e4f5259d4aba2' }, index$1.h("slot", { key: 'e5c674091393508a202d514e9ad41ccae687a660' }, index$1.h("div", { key: 'bd6e459fc18148edf47ed45df3e9f1f3d3356383', class: "ctr", part: "container" }, index$1.h("rtk-logo", { key: '9b3211860563ef93307902744b37985908f71cdf', meeting: this.meeting, config: this.config, t: this.t, part: "logo" }), index$1.h("rtk-spinner", { key: '584a3355b5a023ae9bc66f1eafbd85f3d3b9bb92', "aria-label": "Idle, waiting for meeting data", part: "spinner", iconPack: this.iconPack })))));
     }
 };
 __decorate([

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

@@ -45,7 +45,7 @@ const RtkImageViewer = class {
         document.removeEventListener('click', this.handleOutsideClick);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'f7d65ee86716b9bea4ff1839df12647fa03bc053', class: "scrollbar", onClick: (e) => e.stopPropagation() }, index$1.h("div", { key: '30715a0e1d52250815411be7a4339c47a9c050ff', class: "header" }, index$1.h("div", { key: '69bcd74cea972c9663f46549b1c62b08afd94558', class: "shared-by-user" }, this.t('chat.img.shared_by'), ' ', index$1.h("span", { key: '86b7f0095054d490e0a534d2c5df3733503dde72', class: "displayName" }, string.formatName(string.shorten(this.image.displayName)))), index$1.h("div", { key: '84b428b667da741f420753a0c58ef6a04169f765', class: "actions" }, index$1.h("rtk-button", { key: 'dce9d2b6c6e4b7dcfb429839762a0f350dc474df', onClick: () => file.downloadFile(this.image.link, { fallbackName: 'image' }) }, index$1.h("rtk-icon", { key: 'f9a6b1fbd5f770555ba4bc7267fff7ca6102f097', icon: this.iconPack.download, slot: "start" }), "Download"), index$1.h("rtk-button", { key: '4051efa57da483dc628769fdd1e754a49fd389b7', kind: "icon", variant: "secondary", onClick: () => this.close.emit() }, index$1.h("rtk-icon", { key: 'ee1e43b0f89ad76c5cad6db21d6f8759c5d87a89', icon: this.iconPack.dismiss })))), index$1.h("div", { key: '752ab0206aa1b1e9447f9814210bcaa346dfab5d', class: "image-ctr" }, index$1.h("img", { key: '7de531b58aa5aad94ab03d500d34d13c37b43ba1', src: this.image.link }))));
+        return (index$1.h(index$1.Host, { key: '6e6e27bf5529ef5af5b0b7f02c0fcda77dba492c', class: "scrollbar", onClick: (e) => e.stopPropagation() }, index$1.h("div", { key: '53b1df2b76fb58d37154f246c09c38f17c4ac6b3', class: "header" }, index$1.h("div", { key: 'e5707219faa115dfccd330643d022c90abdcfc5b', class: "shared-by-user" }, this.t('chat.img.shared_by'), ' ', index$1.h("span", { key: '8387ffa67b78746a8d94f130ff23241313b5c1d8', class: "displayName" }, string.formatName(string.shorten(this.image.displayName)))), index$1.h("div", { key: 'cd70a8a95e264a533d2d093e4d32df49dfc3f2c7', class: "actions" }, index$1.h("rtk-button", { key: '404da530999c81a7754c07ed48ffb73eb8f915e3', onClick: () => file.downloadFile(this.image.link, { fallbackName: 'image' }) }, index$1.h("rtk-icon", { key: '5d7806419e55072fcfb8735229cef5b9b0816669', icon: this.iconPack.download, slot: "start" }), "Download"), index$1.h("rtk-button", { key: '6ac87cb0172f319706d8e8d4591a76d3fa60a2b9', kind: "icon", variant: "secondary", onClick: () => this.close.emit() }, index$1.h("rtk-icon", { key: 'd25982c4b4f3c422df8187782a762b12fffb76df', icon: this.iconPack.dismiss })))), index$1.h("div", { key: '968d31b08e5113419bbdc63c3887a8537d198284', class: "image-ctr" }, index$1.h("img", { key: 'a806265d98e09094dd267afc3dc6018f6cf692c4', src: this.image.link }))));
     }
 };
 __decorate([

package/dist/cjs/rtk-information-tooltip.cjs.entry.js

@@ -26,7 +26,7 @@ const RtkInformationTooltip = class {
         this.iconPack = uiStore.defaultIconPack;
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '71ecafbad168eb980530eb5e524f9b243ac49fc7' }, index$1.h("div", { key: 'beb675be20de89080d7fdeefb47367c5ab201a73', class: "tooltip-container" }, index$1.h("rtk-icon", { key: '8e135030eb60115c1f2a49ad71caedbd9e1b50e8', icon: this.iconPack.info, size: "sm" }), index$1.h("div", { key: '9b4c277f0d2c9311258c24f1001bf763936adde3', class: "tooltip" }, index$1.h("slot", { key: '66c6b7895cd23271cca393cc12dc075c1bf14923', name: "tootlip-text" })))));
+        return (index$1.h(index$1.Host, { key: '182572b0e68a80a504b3aed40ae526ae371a9921' }, index$1.h("div", { key: 'c46d1aedd29c015e36c0496dd36ccd7d2afcd4ee', class: "tooltip-container" }, index$1.h("rtk-icon", { key: '25465b17d5b97a102273621e6e942fb34f542d53', icon: this.iconPack.info, size: "sm" }), index$1.h("div", { key: '9f3e5eea9a21b1ff48e8a3e7e91e3f81e748af79', class: "tooltip" }, index$1.h("slot", { key: 'a0f42e3681ffddf9287ddacd111ea3fa64f77c01', name: "tootlip-text" })))));
     }
 };
 __decorate([

package/dist/cjs/rtk-leave-button.cjs.entry.js

@@ -35,7 +35,7 @@ const RtkLeaveButton = class {
     }
     render() {
         const text = this.t('leave');
-        return (index$1.h(index$1.Host, { key: '9a760243cdb8a409f96b2e44b07e84495ecf8ba6', label: text }, index$1.h("rtk-controlbar-button", { key: '5a45791756d7e448493b4968876820230d7ce81f', size: this.size, iconPack: this.iconPack, class: "leave red-icon", onClick: this.leave, icon: this.iconPack.call_end, label: text, variant: this.variant, part: "controlbar-button" })));
+        return (index$1.h(index$1.Host, { key: '27ea1d3f7593e32d53b8160537e00147be6e2a2d', label: text }, index$1.h("rtk-controlbar-button", { key: 'f0952b09acd1f7cff04fd521252ecf75715e9a74', size: this.size, iconPack: this.iconPack, class: "leave red-icon", onClick: this.leave, icon: this.iconPack.call_end, label: text, variant: this.variant, part: "controlbar-button" })));
     }
 };
 __decorate([

package/dist/cjs/rtk-logo.cjs.entry.js

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-1cb28da8.js');
+const index = require('./index-8d07e125.js');
+
+const rtkLogoCss = ":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;flex-direction:column;align-items:center;justify-content:center;color:rgb(var(--rtk-colors-text-1000, 255 255 255));height:100%;width:auto}svg,img{height:100%;width:auto}.brand-color{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity))}";
+const RtkLogoStyle0 = rtkLogoCss;
+
+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 RtkLogo = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        /** Config object */
+        this.config = uiStore.createDefaultConfig();
+        /** Language */
+        this.t = uiStore.useLanguage();
+    }
+    connectedCallback() {
+        this.configChanged(this.config);
+        this.meetingChanged(this.meeting);
+    }
+    configChanged(config) {
+        var _a;
+        if (config != null) {
+            const configLogo = (_a = config === null || config === void 0 ? void 0 : config.designTokens) === null || _a === void 0 ? void 0 : _a.logo;
+            // NOTE(callmetarush): Only update logo if not passed via prop
+            if (configLogo != null && this.logoUrl == null) {
+                this.logoUrl = configLogo;
+            }
+        }
+    }
+    meetingChanged(meeting) {
+        var _a, _b, _c, _d;
+        if (meeting != null) {
+            const meetingLogo = (_d = (_c = (_b = (_a = meeting.self) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.header) === null || _c === void 0 ? void 0 : _c.elements) === null || _d === void 0 ? void 0 : _d.logo;
+            if (meetingLogo != null && this.logoUrl == null) {
+                this.logoUrl = meetingLogo;
+            }
+        }
+    }
+    render() {
+        if (!this.logoUrl || this.logoUrl === '') {
+            return null;
+        }
+        const logo = this.logoUrl;
+        const text = this.t('logo');
+        return (index$1.h(index$1.Host, { class: "loaded" }, index$1.h("img", { src: logo, alt: text })));
+    }
+    static get watchers() { return {
+        "config": ["configChanged"],
+        "meeting": ["meetingChanged"]
+    }; }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkLogo.prototype, "config", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkLogo.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkLogo.prototype, "t", void 0);
+RtkLogo.style = RtkLogoStyle0;
+
+exports.rtk_logo = RtkLogo;

package/dist/cjs/rtk-message-list-view.cjs.entry.js

@@ -266,11 +266,11 @@ const RtkMessageListView = class {
         this.updateTotalHeight();
     }
     render() {
-        return (index$1.h("div", { key: '4da03366f085b87729d946b1633d031e4656f2ac', class: "scrollbar content-wrapper", ref: (el) => (this.$listRef = el), onScroll: this.handleScroll }, index$1.h("div", { key: '7a8268e8a3d5326d359f4722c341e6487e1f21f6', class: "scroller" }, index$1.h("div", { key: 'b856c5ec8c602963ab9bd74e9838b4ce6bf05f85', style: {
+        return (index$1.h("div", { key: '413771e98d7ce6f8c2af3d6cadf6ad3484586929', class: "scrollbar content-wrapper", ref: (el) => (this.$listRef = el), onScroll: this.handleScroll }, index$1.h("div", { key: '4e4eb3729e574f555e844266803338e5b8a5aff9', class: "scroller" }, index$1.h("div", { key: 'c4389d8636465efef4cb1e15b63c2f52eb457942', style: {
                 height: `${this.totalHeight}px`,
-            } }), index$1.h("div", { key: 'a7fe4267408199ffe0f81b56c00f3dffb5e2e59f', class: "smallest-dom-element", id: "list-end", ref: (el) => (this.$listEndRef = el) })), index$1.h("div", { key: 'bcd29a59a370c975ab344cabeefdd7ce905f37fe', class: "content", style: {
+            } }), index$1.h("div", { key: 'dd6b9b2cb812f817bdf66f4abf5f2c81f0664fa0', class: "smallest-dom-element", id: "list-end", ref: (el) => (this.$listEndRef = el) })), index$1.h("div", { key: 'e07b23728210f7708bf5c65ae2007b28779954e7', class: "content", style: {
                 transform: `translateY(${this.getRangeSize(0, this.range.start)}px)`,
-            } }, this.isFetching && (index$1.h("div", { key: '6529fdc824381737d75e489f262dcf90bd12e186', class: "loader" }, index$1.h("rtk-spinner", { key: '8785a6b44007f8ce834639b5e6ae9221a6df704c', size: "md" }))), this.getVisibleItems().map((msg, index) => (index$1.h("div", { key: msg.id, ref: (el) => this.rendererInternal(el, msg, index) }))))));
+            } }, this.isFetching && (index$1.h("div", { key: '3957d510fcc88770169f5378e8180c168645d954', class: "loader" }, index$1.h("rtk-spinner", { key: '30a85f8744f51150940abf19b3dcfb9587f50c7f', size: "md" }))), this.getVisibleItems().map((msg, index) => (index$1.h("div", { key: msg.id, ref: (el) => this.rendererInternal(el, msg, index) }))))));
     }
     static get watchers() { return {
         "messages": ["messagesUpdated"]

package/dist/cjs/rtk-more-toggle.cjs.entry.js

@@ -53,10 +53,10 @@ const RtkMoreToggle = class {
     }
     render() {
         const text = this.t('more');
-        return (index$1.h(index$1.Host, { key: '8cee20061968a6658b164929fa725c0d56f3c5f4', title: text }, this.states.activeMoreMenu && (index$1.h("div", { key: '1cf7d2a85d4d1626a0c469d77c91131e9f86b451', class: "more-menu" }, index$1.h("slot", { key: '3c1507fa6561127f2d1a4f9d53899dece5d933a2', name: "more-elements" }))), index$1.h("rtk-controlbar-button", { key: '76ea4f7d1a55abc6928c6b6c55d89382d46b34e3', size: this.size, iconPack: this.iconPack, onClick: (e) => {
+        return (index$1.h(index$1.Host, { key: '3b07eaaee77053c8bc68edf517adbc2928244680', title: text }, this.states.activeMoreMenu && (index$1.h("div", { key: '31f641a909685ce4f561b107e6dfd380a6d5ec86', class: "more-menu" }, index$1.h("slot", { key: 'c78477d0c4db136d6dfb4c3fe63ceb7dc678205e', name: "more-elements" }))), index$1.h("rtk-controlbar-button", { key: '41bbfa76720797850c8f540720eaeaed7e9f2a12', size: this.size, iconPack: this.iconPack, onClick: (e) => {
                 e.stopPropagation();
                 this.toggleMoreMenu();
-            }, icon: this.iconPack.horizontal_dots, label: text, part: "controlbar-button" }), index$1.h("slot", { key: 'e38000e817552abd2b20668885effaf8a0b73592', name: "expanded" })));
+            }, icon: this.iconPack.horizontal_dots, label: text, part: "controlbar-button" }), index$1.h("slot", { key: '207388a5e3c71f27d54f54b42d41339c19bb202d', name: "expanded" })));
     }
     get host() { return index$1.getElement(this); }
 };