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

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-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: '8796e55e793db9aeb4ede2d57524bc38aa817ddf' }, !this.isContinued && (index$1.h(ChatHead.ChatHead, { key: '7018209894272b21e1f5225d7bad92de5107d0d7', name: this.message.displayName, time: this.message.time, now: this.now })), index$1.h("div", { key: 'd30878670f4e90b35578ac616761645e5744c7cd', class: {
+                body: true,
+                bubble: this.showBubble,
+            }, part: "body" }, index$1.h("div", { key: '73ba1a2b1aaacec88930605d5a826d32ad56581e', class: "file" }, index$1.h("div", { key: '17234fd57360f3a7953ce898282240e03b94eb58', class: "file-data" }, index$1.h("div", { key: '07424973ceeb567efee25cb45eca09792482cd21', class: "name" }, this.message.name), index$1.h("div", { key: '255087ceadb46be8da915d2b9134b3922f9a50b7', class: "file-data-split" }, index$1.h("div", { key: 'a01185efdf779d87548e1b7d73dfad823dbbd611', class: "ext" }, file.getExtension(this.message.name)), index$1.h("span", { key: 'a129cb26284432bbfad635dc3774309fbadc8fec', class: "divider" }), index$1.h("div", { key: '0af8af2f2d18c0a1d72bc5040bdabb1f06209840', class: "size" }, file.getFileSize(this.message.size)))), index$1.h("rtk-button", { key: '522a0378351016927ca644cce5db710336bf348b', variant: "secondary", kind: "icon", onClick: () => file.downloadFile(link, { name: this.message.name, fallbackName: 'file' }), part: "button" }, index$1.h("rtk-icon", { key: '8d49abfffb8149adc9fd3e9f214b54a1f642edc3', 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: 'bcbf806340704a0f288efdf06bc0712e2e296e1b' }, !this.isContinued && (index$1.h(ChatHead.ChatHead, { key: 'c7c64c22e4a0d37dd405d83f537e0ac858ee85f4', name: this.message.displayName, time: this.message.time, now: this.now })), index$1.h("div", { key: '61bff7a6569ea50b9c6bc54fe71c1591a4079bb0', class: {
+                body: true,
+                bubble: this.showBubble,
+            }, part: "body" }, index$1.h("div", { key: '56740ce9648a6b580c338dc69eec4f0bb09e200b', class: { image: true, loaded: this.status === 'loaded' } }, index$1.h("img", { key: '46616303b6eaca3831083a5603aade677e8e27f1', 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: 'dac71a4e7e4d02b7e92386f92e2b066d31dc1c94', class: "image-spinner", title: this.t('chat.img.loading'), "aria-label": this.t('chat.img.loading') }, index$1.h("rtk-spinner", { key: '6c7b01868932f2ed0e6602d68caecb9b38d4f47b', iconPack: this.iconPack }))), this.status === 'errored' && (index$1.h("div", { key: '87c343f4a62662bc100361acf7aba9d3df31705f', 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: '35851cf346c3d873cf0f27d8520df278c9b7cfa1', icon: this.iconPack.image_off }))), this.status === 'loaded' && (index$1.h("div", { key: '37e07aef242ef26e57a5ec96e4a127d8ad27dc82', class: "actions" }, index$1.h("rtk-button", { key: 'f32b44c453061e7ba41a67f1c266f634ad0a6cc3', class: "action", variant: "secondary", kind: "icon", onClick: () => {
+                this.stateUpdate.emit({ image: this.message });
+            } }, index$1.h("rtk-icon", { key: '4a6c1cfe87d356e1f39db04b3536f9e9e3ca1b34', icon: this.iconPack.full_screen_maximize })), index$1.h("rtk-button", { key: 'e22f94520b0ead2db124e6a65ad110ea029855f3', class: "action", variant: "secondary", kind: "icon", onClick: () => file.downloadFile(this.message.link, { fallbackName: 'image' }) }, index$1.h("rtk-icon", { key: 'a5f7b58d27a12e8754db70c9d56facc547883d4f', 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: 'd47fae980df369efeb4351a933cc4e06ebac586e' }, !this.isContinued && (index$1.h(ChatHead.ChatHead, { key: '6bf4892ca718cda199ad2a19371cd9e8724421de', name: this.message.displayName, time: this.message.time, now: this.now })), index$1.h("div", { key: 'b2b50f3f716d5cdfb45f1826c4e4fcab43a13a7c', class: {
+                body: true,
+                bubble: this.showBubble,
+            }, part: "body" }, index$1.h("div", { key: 'cc3f081fefaf8004386991bd307c61a9e5526ae6', class: { text: true, emoji: string.hasOnlyEmojis(this.message.message) } }, index$1.h(TextMessage.TextMessageView, { key: '579a167e4ae6213d84ca65a581ec88fadb1db574', 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-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-notification.cjs.entry.js

@@ -0,0 +1,71 @@
+'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 TextMessage = require('./TextMessage-7bb3e1fd.js');
+require('./chat-717e517d.js');
+
+const rtkNotificationCss = ":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{pointer-events:none;display:block;height:var(--rtk-space-10, 40px);color:rgb(var(--rtk-colors-text-1000, 255 255 255));animation:show 0.4s ease;transition:0.4s;z-index:100}.ctr{box-sizing:border-box;display:inline-flex;height:100%;min-width:var(--rtk-space-40, 160px);align-items:center;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-2, 8px);-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);--tw-shadow-color:rgb(var(--rtk-colors-background-1000, 8 8 8));--tw-shadow:var(--tw-shadow-colored);pointer-events:auto}img{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-0, 0px);width:var(--rtk-space-0, 0px);border-radius:9999px}img.loaded{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}.message{margin-right:var(--rtk-space-2, 8px);max-width:var(--rtk-space-72, 288px) !important;font-size:14px !important;overflow:hidden !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important}.message p{margin:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-1, 4px)}.message blockquote{display:none}rtk-icon.icon{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}button.dismiss{display:flex;height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);align-items:center;justify-content:center;border-width:var(--rtk-border-width-none, 0);border-style:none;padding:var(--rtk-space-0, 0px);border-radius:var(--rtk-border-radius-sm, 4px);background-color:transparent;color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));outline-width:1px;outline-color:rgb(var(--rtk-colors-text-1000, 255 255 255))}button.dismiss:hover{cursor:pointer;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}button.dismiss:focus-visible{outline-style:solid}button.dismiss{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}.dismiss rtk-icon{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}rtk-button{border-radius:var(--rtk-border-radius-sm, 4px)}.right{margin-left:auto;display:flex;align-items:center;gap:var(--rtk-space-2, 8px)}:host(.exit){animation:exit 0.4s ease}@keyframes show{0%{opacity:0;transform:translateX(-120px)}100%{opacity:1;transform:translateX(0px)}}@keyframes exit{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-120px)}}:host([size='sm']){font-size:14px}";
+const RtkNotificationStyle0 = rtkNotificationCss;
+
+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 RtkNotification = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.dismiss = index$1.createEvent(this, "rtkNotificationDismiss", 7);
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        this.imageState = 'loading';
+    }
+    connectedCallback() {
+        this.notificationChanged(this.notification);
+    }
+    pausedChanged(paused) {
+        if (paused) {
+            clearTimeout(this.timeout);
+        }
+        else {
+            this.notificationChanged(this.notification);
+        }
+    }
+    notificationChanged(notification) {
+        if (notification != null && typeof notification.duration === 'number' && !this.paused) {
+            this.timeout = window.setTimeout(() => {
+                this.dismiss.emit(notification.id);
+            }, notification.duration);
+        }
+    }
+    render() {
+        var _a;
+        return (index$1.h(index$1.Host, { key: '60c06bbf91a415227daa6df5e33ce70f70b9e96a' }, index$1.h("div", { key: '88b3028fbab2ae480d9b56169be54d7be88f283a', class: "ctr" }, this.notification.icon != null && (index$1.h("rtk-icon", { key: '2082950cbd422100eaae181089b459a228edb5b2', class: "icon", icon: this.notification.icon, variant: (_a = this.notification.iconVariant) !== null && _a !== void 0 ? _a : 'primary' })), this.notification.image != null &&
+            this.notification.icon == null &&
+            this.imageState !== 'errored' && (index$1.h("img", { key: '56e7d906bb2daf5ddce6b143ffa74a47d602ca70', src: this.notification.image, class: { loaded: this.imageState === 'loaded' }, onLoad: () => (this.imageState = 'loaded'), onError: () => (this.imageState = 'errored') })), index$1.h("p", { key: '980db1c29942c51de04eef62c519ff20402c639e', class: "message" }, index$1.h(TextMessage.TextMessageView, { key: '6b59afd62dcf6671d056ed424146c9c4c1e1bead', message: this.notification.message })), index$1.h("div", { key: 'a4399741c18093e46be3726f3514d8e8a5682ab3', class: "right" }, this.notification.button != null && (index$1.h("rtk-button", { key: 'a20046c85de2c3ee5cd7b6814c84e52a027e0cfc', size: "sm", variant: this.notification.button.variant, onClick: () => this.notification.button.onClick() }, this.notification.button.text)), index$1.h("button", { key: '83d7d13c98c68f6049321d5d0c573ea2eccf65f8', onClick: () => this.dismiss.emit(this.notification.id), class: "dismiss" }, index$1.h("rtk-icon", { key: '5a17a700a54172a10cd2398dd38853bd0c337215', "aria-label": this.t('dismiss'), icon: this.iconPack.dismiss }))))));
+    }
+    static get watchers() { return {
+        "paused": ["pausedChanged"],
+        "notification": ["notificationChanged"]
+    }; }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkNotification.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkNotification.prototype, "t", void 0);
+RtkNotification.style = RtkNotificationStyle0;
+
+exports.rtk_notification = RtkNotification;