@cloudflare/realtimekit-ui 0.0.0 → 1.0.0-staging.10

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

@@ -0,0 +1,138 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-3ddce955.js');
+const sidebar = require('./sidebar-a3c87828.js');
+const index = require('./index-daae8cee.js');
+
+const rtkChatToggleCss = ":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{position:relative;display:block}:host([data-hidden]){display:none}.unread-count{position:absolute;right:var(--rtk-space-3, 12px);box-sizing:border-box;padding:var(--rtk-space-0\\.5, 2px);-webkit-user-select:none;-moz-user-select:none;user-select:none;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));font-size:12px;color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));display:flex;height:var(--rtk-space-5, 20px);min-width:var(--rtk-space-5, 20px);align-items:center;justify-content:center;border-radius:9999px;z-index:1}.unread-count-dot{position:absolute;right:var(--rtk-space-3, 12px);z-index:10;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));border-radius:50%;display:flex;height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);align-items:center;justify-content:center}:host([variant='horizontal']) .unread-count{right:var(--rtk-space-4, 16px);top:50%;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}";
+const RtkChatToggleStyle0 = rtkChatToggleCss;
+
+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 RtkChatToggle = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.stateUpdate = index$1.createEvent(this, "rtkStateUpdate", 7);
+        this.unreadMessageCount = 0;
+        /** Variant */
+        this.variant = 'button';
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        this.chatActive = false;
+        this.canViewChat = false;
+        /**
+         * Only used when paginated chat is enabled
+         */
+        this.hasNewMessages = false;
+        this.onChatUpdate = ({ action, message }) => {
+            var _a;
+            if (this.chatActive)
+                return;
+            if (action === 'add' && message.userId !== ((_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self.userId)) {
+                this.hasNewMessages = true;
+                this.unreadMessageCount += 1;
+            }
+        };
+        this.toggleChat = () => {
+            const states = this.states;
+            this.chatActive = !((states === null || states === void 0 ? void 0 : states.activeSidebar) && (states === null || states === void 0 ? void 0 : states.sidebar) === 'chat');
+            if (this.chatActive) {
+                this.unreadMessageCount = 0;
+                this.hasNewMessages = false;
+            }
+            this.stateUpdate.emit({
+                activeSidebar: this.chatActive,
+                sidebar: this.chatActive ? 'chat' : undefined,
+                activeMoreMenu: false,
+                activeAI: false,
+            });
+        };
+        this.updateCanView = () => {
+            this.canViewChat = sidebar.canViewChat(this.meeting);
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+        this.statesChanged(this.states);
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d, _e, _f;
+        (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.chat) === null || _b === void 0 ? void 0 : _b.removeListener('chatUpdate', this.onChatUpdate);
+        (_d = (_c = this.meeting) === null || _c === void 0 ? void 0 : _c.stage) === null || _d === void 0 ? void 0 : _d.removeListener('stageStatusUpdate', this.updateCanView);
+        (_f = (_e = this.meeting) === null || _e === void 0 ? void 0 : _e.self) === null || _f === void 0 ? void 0 : _f.permissions.removeListener('chatUpdate', this.updateCanView);
+    }
+    meetingChanged(meeting) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (meeting == null)
+            return;
+        if (uiStore.usePaginatedChat(meeting)) {
+            (_a = meeting.chat) === null || _a === void 0 ? void 0 : _a.getMessages(new Date().getTime(), 1, true).then((res) => {
+                var _a;
+                if ((_a = res === null || res === void 0 ? void 0 : res.messages) === null || _a === void 0 ? void 0 : _a.length)
+                    this.hasNewMessages = true;
+            });
+        }
+        const meetingStartedTimeMs = (_c = (_b = meeting.meta) === null || _b === void 0 ? void 0 : _b.meetingStartedTimestamp.getTime()) !== null && _c !== void 0 ? _c : 0;
+        const newMessages = (_d = meeting.chat) === null || _d === void 0 ? void 0 : _d.messages.filter((m) => m.timeMs > meetingStartedTimeMs);
+        this.unreadMessageCount = newMessages.length || 0;
+        (_e = meeting.chat) === null || _e === void 0 ? void 0 : _e.addListener('chatUpdate', this.onChatUpdate);
+        this.canViewChat = sidebar.canViewChat(meeting);
+        (_f = meeting === null || meeting === void 0 ? void 0 : meeting.stage) === null || _f === void 0 ? void 0 : _f.on('stageStatusUpdate', this.updateCanView);
+        (_g = meeting === null || meeting === void 0 ? void 0 : meeting.self) === null || _g === void 0 ? void 0 : _g.permissions.on('chatUpdate', this.updateCanView);
+    }
+    statesChanged(states) {
+        if (states != null) {
+            this.chatActive = states.activeSidebar === true && states.sidebar === 'chat';
+        }
+    }
+    handleChatActiveChange() {
+        // Chat sidebar closed without opening a different sidebar
+        if (!this.chatActive && !this.states.activeSidebar) {
+            this.buttonEl.focus();
+        }
+    }
+    render() {
+        if (!this.canViewChat)
+            return index$1.h(index$1.Host, { "data-hidden": true });
+        return (index$1.h(index$1.Host, { title: this.t('chat') }, uiStore.usePaginatedChat(this.meeting)
+            ? this.hasNewMessages && index$1.h("div", { class: "unread-count-dot", part: "unread-count-dot" })
+            : this.unreadMessageCount !== 0 &&
+                !this.chatActive && (index$1.h("div", { class: "unread-count", part: "unread-count" }, index$1.h("span", null, this.unreadMessageCount <= 100 ? this.unreadMessageCount : '99+'))), index$1.h("rtk-controlbar-button", { ref: (el) => (this.buttonEl = el), part: "controlbar-button", size: this.size, iconPack: this.iconPack, class: { active: this.chatActive }, onClick: this.toggleChat, icon: this.iconPack.chat, label: this.t('chat'), variant: this.variant })));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"],
+        "states": ["statesChanged"],
+        "chatActive": ["handleChatActiveChange"]
+    }; }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkChatToggle.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkChatToggle.prototype, "states", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkChatToggle.prototype, "size", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkChatToggle.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkChatToggle.prototype, "t", void 0);
+RtkChatToggle.style = RtkChatToggleStyle0;
+
+exports.rtk_chat_toggle = RtkChatToggle;

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

@@ -0,0 +1,98 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-3ddce955.js');
+const index = require('./index-daae8cee.js');
+
+const rtkClockCss = ":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:inline-flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;font-size:14px;color:rgb(var(--rtk-colors-text-1000, 255 255 255));font-variant-numeric:tabular-nums}:host([data-hidden]){display:none}:host([size='sm']){font-size:12px}rtk-icon{margin-right:var(--rtk-space-1, 4px);height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}:host([size='sm']) rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px)}";
+const RtkClockStyle0 = rtkClockCss;
+
+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 addZero = (n) => Math.trunc(n).toString().padStart(2, '0');
+const RtkClock = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        this.disconnectMeeting = () => {
+            var _a, _b;
+            this.timeout && clearTimeout(this.timeout);
+            typeof this.request === 'number' && cancelAnimationFrame(this.request);
+            (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.removeListener('meetingStartTimeUpdate', this.startedTimeUpdateListener);
+        };
+        this.startedTimeUpdateListener = () => {
+            var _a, _b, _c;
+            this.startedTime = (_c = (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.meetingStartedTimestamp) === null || _c === void 0 ? void 0 : _c.toISOString();
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        this.disconnectMeeting();
+    }
+    meetingChanged(meeting) {
+        var _a, _b, _c;
+        this.disconnectMeeting();
+        if (meeting != null) {
+            this.startedTime = (_b = (_a = meeting.meta) === null || _a === void 0 ? void 0 : _a.meetingStartedTimestamp) === null || _b === void 0 ? void 0 : _b.toISOString();
+            (_c = meeting.meta) === null || _c === void 0 ? void 0 : _c.addListener('meetingStartTimeUpdate', this.startedTimeUpdateListener);
+        }
+    }
+    startedTimeChanged(startedTime) {
+        if (startedTime !== undefined) {
+            const animate = () => {
+                this.timeDiff = (Date.now() - new Date(this.startedTime).getTime()) / 1000;
+                this.timeout = setTimeout(() => {
+                    if (this.request != null) {
+                        this.request = requestAnimationFrame(animate);
+                    }
+                }, 500);
+            };
+            this.request = requestAnimationFrame(animate);
+        }
+    }
+    getFormattedTime() {
+        if (this.timeDiff == null) {
+            return null;
+        }
+        const diff = this.timeDiff;
+        let time = '';
+        if (diff >= 3600) {
+            time = `${addZero(diff / 3600)}:`;
+        }
+        time += `${addZero((diff % 3600) / 60)}:${addZero(diff % 60)}`;
+        return time;
+    }
+    render() {
+        const showClock = this.startedTime !== undefined;
+        return (index$1.h(index$1.Host, { key: '2775471382c6d07aae0ba8e18677d6850fd9cb34', "data-hidden": !showClock, tabIndex: 0, role: "timer", "aria-live": "off" }, this.startedTime !== undefined && [
+            index$1.h("rtk-icon", { key: '48b8bdfeef973d7f3eb4cdd526e386226a4b999a', icon: this.iconPack.clock, "aria-hidden": true, tabIndex: -1, part: "icon" }),
+            index$1.h("span", { key: '9f2bb7aa7adc6ecb65c5fef57e406801e6592e59', part: "text" }, this.getFormattedTime()),
+        ]));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"],
+        "startedTime": ["startedTimeChanged"]
+    }; }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkClock.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkClock.prototype, "iconPack", void 0);
+RtkClock.style = RtkClockStyle0;
+
+exports.rtk_clock = RtkClock;

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

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-3ddce955.js');
+const index = require('./index-daae8cee.js');
+
+const rtkControlbarButtonCss = ":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{--background-color:var(\n    --rtk-controlbar-button-background-color,\n    rgb(var(--rtk-colors-background-1000, 8 8 8))\n  );--icon-size:var(--rtk-controlbar-button-icon-size, var(--rtk-space-7, 28px));position:relative;box-sizing:border-box;display:inline-flex;height:100%;width:auto;min-width:var(--rtk-space-20, 80px);-webkit-user-select:none;-moz-user-select:none;user-select:none;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;color:rgb(var(--rtk-colors-text-1000, 255 255 255));background-color:var(--background-color)}button{padding:var(--rtk-space-1, 4px)}:host(.red-icon) #icon{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}:host([disabled]){color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}button{box-sizing:border-box;display:inline-flex;height:100%;width:100%;flex:1 1 0%;flex-direction:column;gap:var(--rtk-space-1, 4px);padding-left:var(--rtk-space-1, 4px);padding-right:var(--rtk-space-1, 4px);align-items:center;justify-content:center;cursor:pointer;border-radius:var(--rtk-border-radius-md, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent;color:inherit;outline-offset:-2px;border:var(--rtk-border-width-md, 2px) solid transparent}.label{text-align:center;font-size:12px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}#warning-indicator{position:absolute;top:var(--rtk-space-1, 4px);right:var(--rtk-space-2, 8px);height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);--tw-text-opacity:1;color:rgba(var(--rtk-colors-warning, 255 205 7) / var(--tw-text-opacity))}:host([size='sm']) #warning-indicator{right:var(--rtk-space-0, 0px);top:var(--rtk-space-0, 0px);height:var(--rtk-space-3, 12px);width:var(--rtk-space-3, 12px)}:host(:hover) button{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}#icon{width:var(--icon-size);height:var(--icon-size)}:host(.leave:hover) button{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity));border:var(--rtk-border-width-md, 2px) solid rgb(var(--rtk-colors-danger, 255 45 45))}:host(.active) button{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-400, 53 110 253) / var(--tw-text-opacity));border:var(--rtk-border-width-md, 2px) solid rgb(var(--rtk-colors-brand-400, 53 110 253))}button:focus-visible{outline:2px solid rgb(var(--rtk-colors-brand-400, 53 110 253))}:host(.active-livestream){--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}:host([size='sm']){min-width:var(--rtk-space-14, 56px)}:host([size='sm']) .label{display:none}:host([variant='horizontal']){width:100%}:host([variant='horizontal']) button{border-radius:7px;height:var(--rtk-space-12, 48px);width:100%;padding-left:var(--rtk-space-5, 20px);padding-right:var(--rtk-space-5, 20px);padding-top:var(--rtk-space-3, 12px);padding-bottom:var(--rtk-space-3, 12px);flex-direction:row;justify-content:flex-start;gap:var(--rtk-space-3, 12px)}:host([variant='horizontal']) #icon{width:var(--rtk-space-6, 24px)}:host([variant='horizontal']) .label{display:block;font-size:14px;line-height:1.25rem}:host([variant='horizontal']) #warning-indicator{right:auto;left:var(--rtk-space-4, 16px)}:host([brand-icon]) rtk-icon#icon{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity))}@media only screen and (max-device-height: 480px) and (orientation: landscape){:host .label{display:none}:slotted(rtk-icon){height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px)}}";
+const RtkControlbarButtonStyle0 = rtkControlbarButtonCss;
+
+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 RtkControlbarButton = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        /** Variant */
+        this.variant = 'button';
+        /** Whether to show warning icon */
+        this.showWarning = false;
+        /** Whether button is disabled */
+        this.disabled = false;
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Whether icon requires brand color */
+        this.brandIcon = false;
+    }
+    render() {
+        return (index$1.h(index$1.Host, { key: '9a1150fd8a0fbd0022f33f325e7413d0670d0820' }, index$1.h("button", { key: '0fabd8a63a8013e1630dd3838f0c2f1378f423f7', "aria-label": this.label, part: "button" }, this.isLoading ? (index$1.h("rtk-spinner", { id: "icon", part: "spinner", iconPack: this.iconPack })) : (index$1.h("rtk-icon", { id: "icon", icon: this.icon, tabIndex: -1, "aria-hidden": true, part: "icon" })), index$1.h("span", { key: '117f1bff41fb719a832ef89d000b2abef6f1388a', class: "label", part: "label" }, this.label), this.showWarning && (index$1.h("rtk-icon", { key: '4d8b9170c833a930e013613089755ec768df0695', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" })))));
+    }
+    static get delegatesFocus() { return true; }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkControlbarButton.prototype, "size", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkControlbarButton.prototype, "iconPack", void 0);
+RtkControlbarButton.style = RtkControlbarButtonStyle0;
+
+exports.rtk_controlbar_button = RtkControlbarButton;

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

@@ -0,0 +1,66 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-3ddce955.js');
+const index$2 = require('./index-821d14b7.js');
+const index = require('./index-daae8cee.js');
+
+const rtkControlbarCss = ":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{box-sizing:border-box;display:flex;align-items:center;gap:var(--rtk-space-0\\.5, 2px);--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);position:relative;z-index:10}@media only screen and (max-device-height: 480px) and (orientation: landscape){:host{padding-top:var(--rtk-space-0, 0px) !important}}";
+const RtkControlbarStyle0 = rtkControlbarCss;
+
+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 RtkControlbar = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        /** Variant */
+        this.variant = 'solid';
+        /** Whether to render the default UI */
+        this.disableRender = false;
+        /** Config */
+        this.config = uiStore.defaultConfig;
+        /** Icon Pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+    }
+    render() {
+        const defaults = {
+            meeting: this.meeting,
+            config: this.config,
+            states: this.states,
+            t: this.t,
+            iconPack: this.iconPack,
+            size: this.size,
+        };
+        return (index$1.h(index$1.Host, { key: '03a753b729584aee302a0e76f7961ae057dc0746' }, !this.disableRender && (index$1.h(index$2.Render, { key: '488995338fff693e38de3f98f72a656cd71a5882', element: "rtk-controlbar", defaults: defaults, onlyChildren: true })), index$1.h("slot", { key: '6fb547f8c56b9a610c532d66aa3582d16b3b40ef' })));
+    }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkControlbar.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkControlbar.prototype, "states", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkControlbar.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkControlbar.prototype, "t", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkControlbar.prototype, "size", void 0);
+RtkControlbar.style = RtkControlbarStyle0;
+
+exports.rtk_controlbar = RtkControlbar;

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

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-3ddce955.js');
+const index = require('./index-daae8cee.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;
+
+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 RtkDebuggerToggle = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.stateUpdate = index$1.createEvent(this, "rtkStateUpdate", 7);
+        /** Variant */
+        this.variant = 'button';
+        /** Language */
+        this.t = uiStore.useLanguage();
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+    }
+    toggleDebugger() {
+        var _a;
+        this.stateUpdate.emit({
+            activeDebugger: !((_a = this.states) === null || _a === void 0 ? void 0 : _a.activeDebugger),
+            activeMoreMenu: false,
+        });
+    }
+    render() {
+        return (index$1.h(index$1.Host, { key: 'e46722c024802f6c96cebb487c9049e8834c48f8', title: this.t('Troubleshooting') }, index$1.h("rtk-controlbar-button", { key: 'ee3d60dd6993d2757f763a0ae8ba173887c9ceba', size: this.size, iconPack: this.iconPack, onClick: () => this.toggleDebugger(), icon: this.iconPack.debug, label: this.t('Troubleshooting'), variant: this.variant })));
+    }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkDebuggerToggle.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkDebuggerToggle.prototype, "states", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkDebuggerToggle.prototype, "t", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkDebuggerToggle.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkDebuggerToggle.prototype, "size", void 0);
+RtkDebuggerToggle.style = RtkDebuggerToggleStyle0;
+
+exports.rtk_debugger_toggle = RtkDebuggerToggle;

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

@@ -0,0 +1,109 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-3ddce955.js');
+const index = require('./index-daae8cee.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;
+
+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 RtkEndedScreen = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        /** Config object */
+        this.config = uiStore.defaultConfig;
+        /** Icon */
+        this.icon = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        this.message = '';
+    }
+    connectedCallback() {
+        this.statesChanged(this.states);
+    }
+    getBreakoutRoomsMessage(states) {
+        var _a;
+        let message;
+        if ((states === null || states === void 0 ? void 0 : states.roomLeftState) === 'connected-meeting') {
+            if (((_a = this.states.activeBreakoutRoomsManager) === null || _a === void 0 ? void 0 : _a.destinationMeetingId) ===
+                this.meeting.connectedMeetings.parentMeeting.id) {
+                message = 'breakout_rooms.move_reason.switch_main_room';
+            }
+            else {
+                message = 'breakout_rooms.move_reason.switch_room';
+            }
+        }
+        return message;
+    }
+    statesChanged(states) {
+        if (states != null) {
+            switch (states === null || states === void 0 ? void 0 : states.roomLeftState) {
+                case 'left':
+                    this.message = 'ended.left';
+                    break;
+                case 'kicked':
+                    this.message = 'ended.kicked';
+                    break;
+                case 'disconnected':
+                    this.message = 'ended.disconnected';
+                    break;
+                case 'rejected':
+                    this.message = 'ended.rejected';
+                    break;
+                case 'connected-meeting':
+                    this.message = this.getBreakoutRoomsMessage(states);
+                    break;
+                case 'unauthorized':
+                    this.message = 'ended.unauthorized';
+                    break;
+                default:
+                    this.message = 'ended';
+            }
+        }
+    }
+    renderBreakoutRoomScreen() {
+        return (index$1.h(index$1.Host, null, index$1.h("div", { class: "ctr", part: "container" }, index$1.h("rtk-icon", { icon: this.iconPack.breakout_rooms }), index$1.h("p", { part: "message", class: "breakout" }, this.t(this.message)))));
+    }
+    render() {
+        const states = this.states;
+        if (states.roomLeftState === 'connected-meeting') {
+            return this.renderBreakoutRoomScreen();
+        }
+        return (index$1.h(index$1.Host, null, index$1.h("div", { class: "ctr", part: "container" }, index$1.h("rtk-logo", { meeting: this.meeting, config: this.config, part: "logo", t: this.t }), index$1.h("p", { part: "message" }, this.t(this.message)), (states === null || states === void 0 ? void 0 : states.roomLeftState) === 'disconnected' && (index$1.h("span", { part: "description" }, this.t('ended.network'))))));
+    }
+    static get watchers() { return {
+        "states": ["statesChanged"]
+    }; }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkEndedScreen.prototype, "size", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkEndedScreen.prototype, "states", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkEndedScreen.prototype, "t", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkEndedScreen.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkEndedScreen.prototype, "meeting", void 0);
+RtkEndedScreen.style = RtkEndedScreenStyle0;
+
+exports.rtk_ended_screen = RtkEndedScreen;

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

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-3ddce955.js');
+const index = require('./index-daae8cee.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;
+
+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 RtkFileDropzone = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.onDropCallback = index$1.createEvent(this, "dropCallback", 7);
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        this.dropzoneActivated = false;
+    }
+    connectedCallback() {
+        if (!this.hostEl)
+            throw new Error('hostEl prop is required');
+        this.hostEl.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            this.dropzoneActivated = true;
+        });
+        this.hostEl.addEventListener('dragleave', () => {
+            this.dropzoneActivated = false;
+        });
+        this.hostEl.addEventListener('drop', (e) => {
+            e.preventDefault();
+            this.dropzoneActivated = false;
+            this.onDropCallback.emit(e);
+        });
+    }
+    render() {
+        return (index$1.h(index$1.Host, { key: '197cf2a1b1deff5e45125b4e489d020d474a02dd' }, index$1.h("div", { key: '84e88151d3080dc0bd9f44f22b401d605f7f286f', id: "dropzone", class: { active: this.dropzoneActivated }, part: "dropzone" }, index$1.h("rtk-icon", { key: 'debea53f3376bb54bca692aed0450cf218f576d3', icon: this.iconPack.attach }), index$1.h("p", { key: '19b161b26bd4acc13447c47f5ee17b9645f91cc3' }, this.t('chat.send_attachment')))));
+    }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkFileDropzone.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkFileDropzone.prototype, "t", void 0);
+RtkFileDropzone.style = RtkFileDropzoneStyle0;
+
+exports.rtk_file_dropzone = RtkFileDropzone;