@cloudflare/realtimekit-ui 0.0.0 → 0.1.0

package/dist/components/p-d80915fb.js

@@ -0,0 +1,114 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
+import { d as defaultConfig, a as defaultIconPack, c as useLanguage } from './p-9bcf0d04.js';
+import { R as Render } from './p-60fdbd75.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { d as defineCustomElement$2 } from './p-92a1602c.js';
+import { d as defineCustomElement$1 } from './p-3d754c34.js';
+
+const rtkJoinStageCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host::-webkit-scrollbar{width:var(--rtk-space-1\\.5, 6px);border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity))}:host::-webkit-scrollbar-thumb{border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}:host(.stage){box-sizing:border-box;display:block;width:512px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));padding:var(--rtk-space-6, 24px);-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:auto;border-radius:var(--rtk-border-radius-md, 8px);line-height:1.25}:host(.stage) rtk-participant-setup{display:flex;flex:1 1 0%;align-items:center;justify-content:space-around;margin-left:auto;margin-right:auto}:host(.stage) .container rtk-button{flex-grow:1;padding:var(--rtk-space-1, 4px);width:50%}:host(.stage) .container rtk-button:nth-child(1){margin-right:var(--rtk-space-1\\.5, 6px)}:host(.stage) .container rtk-button:nth-child(2){margin-left:var(--rtk-space-1\\.5, 6px)}:host(.stage) h2{font-size:24px;font-weight:500;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}:host(.stage) header{padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px)}:host(.stage) .summary{padding:var(--rtk-space-4, 16px)}.deny-access{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}.container{width:100%;max-width:1080px;display:flex;flex:1 1 0%;align-items:center;justify-content:space-around}header{display:flex;align-items:center;justify-content:space-between}";
+const RtkJoinStageStyle0 = rtkJoinStageCss;
+
+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 RtkJoinStage = /*@__PURE__*/ proxyCustomElement(class RtkJoinStage extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
+        this.joinStage = createEvent(this, "rtkJoinStage", 7);
+        this.leaveStage = createEvent(this, "rtkLeaveStage", 7);
+        /** UI Config */
+        this.config = defaultConfig;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** Content Config */
+        this.dataConfig = {
+            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'),
+        };
+        this.isLoading = false;
+    }
+    render() {
+        var _a, _b;
+        const defaults = {
+            meeting: this.meeting,
+            size: this.size,
+            states: this.states,
+            config: this.config,
+            iconPack: this.iconPack,
+            t: this.t,
+        };
+        return (h(Host, { key: '5adc039e20d21d089d3b34bb67d046387c46db06', class: { stage: true } }, h("header", { key: '43d3a4d1f004ae347fa8297b808ee9318b6a6a91' }, h("h2", { key: 'bdd9070ea15b136717ae060f86b46a32adbfcc99' }, this.dataConfig.title)), h(Render, { key: '7def3aec36f8616d88f41be6e503b033c98623ad', element: "rtk-participant-setup", defaults: defaults, props: { participant: (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self, size: 'md' }, childProps: { participant: (_b = this.meeting) === null || _b === void 0 ? void 0 : _b.self, size: 'md' }, deepProps: true }), h("div", { key: 'b464fd360e42c6201f6e2cbed7107c4410648a7e', class: "summary" }, this.dataConfig.description), h("div", { key: '760a61c9d4b8284408a56818bd0d715d05bee9e6', class: "container" }, h("rtk-button", { key: '4b23c3a442fed701f66f600a1bbd1633c4036ae2', variant: "secondary", onClick: () => this.leaveStage.emit(), title: this.dataConfig.label.reject }, this.dataConfig.label.reject), h("rtk-button", { key: '8f7745aba52c737a57c2158ae23eb17f32d7b56e', onClick: () => {
+                if (this.isLoading)
+                    return;
+                this.isLoading = true;
+                this.joinStage.emit();
+            }, title: this.dataConfig.label.accept }, this.isLoading ? (h("rtk-icon", { icon: this.iconPack.spinner })) : (this.dataConfig.label.accept)))));
+    }
+    static get style() { return RtkJoinStageStyle0; }
+}, [1, "rtk-join-stage", {
+        "meeting": [16],
+        "config": [16],
+        "states": [16],
+        "size": [513],
+        "iconPack": [16],
+        "t": [16],
+        "dataConfig": [16],
+        "isLoading": [32]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkJoinStage.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkJoinStage.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkJoinStage.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkJoinStage.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkJoinStage.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-join-stage", "rtk-button", "rtk-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-join-stage":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkJoinStage);
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkJoinStage as R, defineCustomElement as d };

package/dist/components/p-de933b70.js

@@ -0,0 +1,157 @@
+import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
+import { c as useLanguage } from './p-9bcf0d04.js';
+import { C as ChatHead } from './p-febe3ebc.js';
+import { s as smoothScrollToBottom } from './p-0752f2ba.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { c as clone } from './p-c15d924f.js';
+
+const rtkAiTranscriptionsCss = ":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)}.head{display:flex;align-items:center}.head .name{margin-right:var(--rtk-space-4, 16px);font-size:12px;font-weight:700}.head .time{font-size:12px;color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}*{box-sizing:border-box;border-width:0;border-style:solid}:host{width:100%;display:flex;flex-direction:column}.processing{display:flex;flex:1 1 0%;flex-direction:column;align-items:center;justify-content:center}.content{box-sizing:border-box;display:flex;flex-direction:column;padding:var(--rtk-space-3, 12px);flex:1 0 0px;overflow-y:scroll}.started-message{margin-top:var(--rtk-space-5, 20px);margin-bottom:var(--rtk-space-5, 20px);text-align:center;font-size:12px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.search-bar{height:var(--rtk-space-14, 56px);width:100%;border-bottom-width:var(--rtk-border-width-sm, 1px);--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));padding:var(--rtk-space-3, 12px)}input{height:100%;width:100%;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);font-size:14px;border-radius:var(--rtk-border-radius-sm, 4px);color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.caption-view{height:var(--rtk-space-12, 48px);width:100%;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);padding-top:var(--rtk-space-3, 12px);padding-bottom:var(--rtk-space-3, 12px);border-bottom-width:var(--rtk-border-width-sm, 1px);border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));display:flex;align-items:center;justify-content:space-between;font-size:14px}.message .body{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);font-size:14px;word-break:break-word}.message{margin-bottom:var(--rtk-space-3, 12px)}.message:last-child{margin-bottom:var(--rtk-space-0, 0px)}";
+const RtkAiTranscriptionsStyle0 = rtkAiTranscriptionsCss;
+
+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 RtkAiTranscriptions = /*@__PURE__*/ proxyCustomElement(class RtkAiTranscriptions extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.participantQuery = '';
+        this.isProcessing = false;
+        /** Language */
+        this.t = useLanguage();
+        this.transcriptions = [];
+        this.autoScrollEnabled = true;
+        this.onScroll = (e) => {
+            const { scrollTop, clientHeight, scrollHeight } = e.target;
+            const fromTop = scrollTop + clientHeight;
+            if (fromTop + 10 >= scrollHeight) {
+                // at bottom
+                this.autoScrollEnabled = true;
+            }
+            else {
+                // not at bottom
+                this.autoScrollEnabled = false;
+            }
+        };
+        this.onTranscriptHandler = (data) => {
+            this.transcriptions = this.transcriptionsReducer(this.transcriptions, data);
+        };
+    }
+    // private transcriptionHandler(data: Transcript) {
+    //   this.transcriptions = [...this.transcriptions, data];
+    // }
+    transcriptionsReducer(acc, t) {
+        if (!acc.length || acc[acc.length - 1].peerId !== t.peerId) {
+            return acc.concat(t);
+        }
+        const lastElement = acc[acc.length - 1];
+        if (lastElement.id === t.id) {
+            lastElement.transcript = t.transcript;
+            acc.pop();
+            return acc.concat(lastElement);
+        }
+        return acc.concat(t);
+    }
+    connectedCallback() {
+        if (!this.meeting)
+            return;
+        this.meetingChanged(this.meeting);
+    }
+    componentDidLoad() {
+        var _a;
+        (_a = this.contentContainer) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', this.onScroll);
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.ai) === null || _b === void 0 ? void 0 : _b.off('transcript', this.onTranscriptHandler);
+        (_c = this.contentContainer) === null || _c === void 0 ? void 0 : _c.removeEventListener('scroll', this.onScroll);
+    }
+    meetingChanged(meeting) {
+        var _a, _b;
+        this.transcriptions = clone((_a = meeting === null || meeting === void 0 ? void 0 : meeting.ai) === null || _a === void 0 ? void 0 : _a.transcripts);
+        this.transcriptions = this.transcriptions.reduce(this.transcriptionsReducer, []);
+        (_b = meeting === null || meeting === void 0 ? void 0 : meeting.ai) === null || _b === void 0 ? void 0 : _b.on('transcript', this.onTranscriptHandler);
+    }
+    transcriptionsChanged() {
+        if (this.autoScrollEnabled) {
+            setTimeout(() => {
+                smoothScrollToBottom(this.contentContainer, false);
+            }, 100);
+        }
+    }
+    renderTranscripts() {
+        const transcripts = this.transcriptions.filter((t) => this.participantQuery
+            ? t.name.toLowerCase().includes(this.participantQuery.toLowerCase())
+            : true);
+        const renderedTranscripts = [];
+        transcripts.forEach((transcript) => {
+            const t = {
+                name: transcript.name,
+                date: transcript.date,
+                peerId: transcript.peerId,
+                transcript: transcript.transcript,
+            };
+            if (!renderedTranscripts.length) {
+                renderedTranscripts.push(t);
+                return;
+            }
+            const lastTranscript = renderedTranscripts[renderedTranscripts.length - 1];
+            if (transcript.peerId !== lastTranscript.peerId) {
+                renderedTranscripts.push(t);
+                return;
+            }
+            lastTranscript.transcript += ' ' + transcript.transcript;
+        });
+        return renderedTranscripts.map((transcription) => {
+            return (h("div", { class: "message" }, h(ChatHead, { name: transcription.name, time: new Date(transcription.date), now: new Date() }), h("div", { class: "body" }, transcription.transcript)));
+        });
+    }
+    render() {
+        return (h(Host, { key: '12573001a05a586495a63ecd420f99ad04ce780f' }, h("div", { key: '2a51f65ba7cd339aee33291c77cdf9f5d69b8f07', class: "search-bar" }, h("input", { key: '6cb5505e84ddff6e39c29012752a7309f715505c', type: "text", placeholder: "Search Participant", value: this.participantQuery, onInput: (e) => (this.participantQuery = e.target.value) })), this.isProcessing && (h("div", { key: 'b7f1c33aae0d2613e28dc328e5ccfd92ad067576', class: "processing" }, h("p", { key: 'ae8dc349ff7017a92b9c15e8c8ab051313c07e67' }, "Processing audio...."))), !this.isProcessing && (h("div", { key: 'f5d9e637661b2b10dd323c6b9d6fa7381fd7768c', class: "content scrollbar", ref: (el) => (this.contentContainer = el) }, h("div", { key: 'a029f8903f82deab573e2372f1c645de98fbc417', class: "started-message" }, "Transcription started"), this.renderTranscripts()))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"],
+        "transcriptions": ["transcriptionsChanged"]
+    }; }
+    static get style() { return RtkAiTranscriptionsStyle0; }
+}, [1, "rtk-ai-transcriptions", {
+        "t": [16],
+        "meeting": [16],
+        "initialTranscriptions": [16],
+        "participantQuery": [32],
+        "isProcessing": [32],
+        "transcriptions": [32]
+    }, undefined, {
+        "meeting": ["meetingChanged"],
+        "transcriptions": ["transcriptionsChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkAiTranscriptions.prototype, "t", void 0);
+__decorate([
+    SyncWithStore()
+], RtkAiTranscriptions.prototype, "meeting", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-ai-transcriptions"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-ai-transcriptions":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkAiTranscriptions);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkAiTranscriptions as R, defineCustomElement as d };

package/dist/components/p-dfd1dfed.js

@@ -0,0 +1,101 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
+import { a as defaultIconPack, c as useLanguage } from './p-9bcf0d04.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { d as defineCustomElement$2 } from './p-92a1602c.js';
+import { d as defineCustomElement$1 } from './p-3d754c34.js';
+
+const rtkBroadcastMessageModalCss = ":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:flex;flex-direction:column;overflow:hidden;border-radius:var(--rtk-border-radius-md, 8px);padding:var(--rtk-space-4, 16px);width:100%;--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-1000, 255 255 255));width:400px;max-width:80%}.content-col{display:flex;width:100%;flex-direction:column}h2{margin:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-2, 8px)}.content-row{display:flex;width:100%;flex-direction:row}.content-row rtk-button{margin-top:var(--rtk-space-4, 16px);width:100%}textarea{margin-top:var(--rtk-space-3, 12px);resize:none;border-radius:var(--rtk-border-radius-sm, 4px);border-width:var(--rtk-border-width-none, 0);border-style:none;font-family:var(--rtk-font-family, sans-serif);outline:2px solid transparent;outline-offset:2px;height:var(--rtk-space-16, 64px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));padding:var(--rtk-space-2, 8px);color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}textarea::-moz-placeholder{color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}textarea::placeholder{color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}select{border-radius:var(--rtk-border-radius-sm, 4px);border-width:var(--rtk-border-width-none, 0);border-style:none;padding-top:var(--rtk-space-3, 12px);padding-bottom:var(--rtk-space-3, 12px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);outline:2px solid transparent;outline-offset:2px;border-right-width:var(--rtk-border-width-md, 2px);border-style:solid;border-color:transparent;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255))}p{margin:var(--rtk-space-0, 0px);margin-top:var(--rtk-space-2, 8px);width:100%;text-align:center;font-size:14px;--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-text-opacity));display:flex;flex-direction:row;align-items:center;justify-content:center}p rtk-icon{margin-left:var(--rtk-space-1, 4px);height:var(--rtk-space-5, 20px)}";
+const RtkBroadcastMessageModalStyle0 = rtkBroadcastMessageModalCss;
+
+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 RtkBroadcastMessageModal = /*@__PURE__*/ proxyCustomElement(class RtkBroadcastMessageModal extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** Broadcast message state */
+        this.messagePayload = {
+            to: 'Everyone',
+            message: '',
+        };
+        this.successMessage = false;
+    }
+    close() {
+        var _a;
+        (_a = this.stateUpdate) === null || _a === void 0 ? void 0 : _a.emit({ activeBroadcastMessageModal: false });
+    }
+    sendMessage() {
+        // TODO:(ishita1805) Send this.messagePayload to webcore.
+        this.successMessage = true;
+        setTimeout(() => {
+            this.close();
+        }, 2000);
+    }
+    render() {
+        return (h(Host, { key: 'ebc1bb7e9831ccecba8474cfc7af14dc5cb4d916' }, h("div", { key: 'f29fc0d8cd70f0d25b58073dedc56dbfece82f6e', class: "content-col" }, h("h2", { key: '6e872c41a1735e396fec8c01286a6e551307d054' }, "Broadcast message to"), h("select", { key: 'de6fa3415f3b4fab48477ba68925981adac9d7da', onChange: (e) => {
+                this.messagePayload = Object.assign(Object.assign({}, this.messagePayload), { to: e.target.value });
+            } }, h("option", { key: '85c21decd587ecbff9623d140c7e69e335d86e4e' }, "Everyone"), h("option", { key: 'e70c43b9bedd7a66519757842524af7fdd62b3d3' }, "List of rooms")), h("textarea", { key: 'c988e01cb69f54aa447f1d643acb0f046b95d3fd', placeholder: "Type message here...", onInput: (e) => {
+                this.messagePayload = Object.assign(Object.assign({}, this.messagePayload), { message: e.target.value });
+            } }), this.successMessage ? (h("p", null, "Message sent to ", this.messagePayload.to, h("rtk-icon", { icon: this.iconPack.checkmark }))) : (h("div", { class: "content-row" }, h("rtk-button", { onClick: () => this.close(), variant: "secondary" }, "Cancel"), "\u2002", h("rtk-button", { variant: "primary", onClick: () => this.sendMessage() }, "Send"))))));
+    }
+    static get style() { return RtkBroadcastMessageModalStyle0; }
+}, [1, "rtk-broadcast-message-modal", {
+        "meeting": [16],
+        "states": [16],
+        "iconPack": [16],
+        "t": [16],
+        "messagePayload": [32],
+        "successMessage": [32]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkBroadcastMessageModal.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkBroadcastMessageModal.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkBroadcastMessageModal.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkBroadcastMessageModal.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-broadcast-message-modal", "rtk-button", "rtk-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-broadcast-message-modal":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkBroadcastMessageModal);
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkBroadcastMessageModal as R, defineCustomElement as d };

package/dist/components/p-e36ef452.js

@@ -0,0 +1,157 @@
+import { p as proxyCustomElement, H, h } from './p-c3592601.js';
+import { d as defaultConfig, a as defaultIconPack, c as useLanguage } from './p-9bcf0d04.js';
+import './p-a83ccdbd.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { d as defineCustomElement$5 } from './p-2f10ccec.js';
+import { d as defineCustomElement$4 } from './p-92a1602c.js';
+import { d as defineCustomElement$3 } from './p-3d754c34.js';
+import { d as defineCustomElement$2 } from './p-bd20259b.js';
+import { d as defineCustomElement$1 } from './p-4f0299cf.js';
+
+const rtkParticipantsWaitingListCss = ":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{margin-top:var(--rtk-space-4, 16px);margin-bottom:calc(var(--rtk-space-2, 8px) * -1);display:flex;width:100%;flex-direction:column;font-size:14px}.waiting-participants{margin-bottom:var(--rtk-space-8, 32px)}.waiting-participants .accept-all-button{--tw-text-opacity:1;color:rgba(var(--rtk-colors-success, 98 165 4) / var(--tw-text-opacity))}h3,.heading-count{margin:var(--rtk-space-0, 0px);display:flex;align-items:center;justify-content:center;padding:var(--rtk-space-0, 0px);font-size:16px;font-weight:400;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));text-align:center}.heading-count{font-size:14px}.participants{margin-top:var(--rtk-space-2, 8px);padding:var(--rtk-space-0, 0px)}.waiting-participant{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);display:flex;align-items:center}.waiting-participant .participant-details{margin-right:auto;display:flex;align-items:center}.waiting-participant .participant-details rtk-avatar{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);flex-shrink:0;font-size:14px}.waiting-participant .participant-details .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 1080px){.waiting-participant .participant-details .name{max-width:var(--rtk-space-40, 160px)}}.waiting-participant .waitlist-controls{display:flex}.waiting-participant .waitlist-controls rtk-button{margin-left:var(--rtk-space-2, 8px);cursor:pointer;border-radius:var(--rtk-border-radius-sm, 4px)}.waiting-participant .waitlist-controls rtk-icon.accept{--tw-text-opacity:1;color:rgba(var(--rtk-colors-success, 98 165 4) / var(--tw-text-opacity))}.waiting-participant .waitlist-controls rtk-icon.deny{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}";
+const RtkParticipantsWaitingListStyle0 = rtkParticipantsWaitingListCss;
+
+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 RtkParticipantsWaitlisted = /*@__PURE__*/ proxyCustomElement(class RtkParticipantsWaitlisted extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** Config */
+        this.config = defaultConfig;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** View mode for participants list */
+        this.view = 'sidebar';
+        /** Language */
+        this.t = useLanguage();
+        this.acceptWaitingRoomRequest = async (id) => {
+            await this.meeting.participants.acceptWaitingRoomRequest(id);
+        };
+        this.waitlistedParticipants = [];
+        this.acceptAllWaitingRoomRequests = async () => {
+            await this.meeting.participants.acceptAllWaitingRoomRequest(this.waitlistedParticipants.map((p) => p.id));
+        };
+        this.rejectWaitingRoomRequest = async (id) => {
+            await this.meeting.participants.rejectWaitingRoomRequest(id);
+        };
+        this.shouldShowWaitlist = () => {
+            if (this.meeting.meta.viewType === 'LIVESTREAM')
+                return false;
+            return (this.meeting.self.permissions.acceptWaitingRequests &&
+                this.waitlistedParticipants.length !== 0);
+        };
+    }
+    disconnectedCallback() {
+        const { participants } = this.meeting;
+        this.waitlistedParticipantJoinedListener &&
+            participants.waitlisted.removeListener('participantJoined', this.waitlistedParticipantJoinedListener);
+        this.waitlistedParticipantLeftListener &&
+            participants.waitlisted.removeListener('participantLeft', this.waitlistedParticipantLeftListener);
+        this.waitlistedParticipantsClearedListener &&
+            participants.waitlisted.removeListener('participantsCleared', this.waitlistedParticipantsClearedListener);
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    meetingChanged(meeting) {
+        if (meeting == null)
+            return;
+        this.waitlistedParticipants = meeting.participants.waitlisted.toArray();
+        this.waitlistedParticipantJoinedListener = (participant) => {
+            if (!this.waitlistedParticipants.some((p) => p.id === participant.id)) {
+                this.waitlistedParticipants = [...this.waitlistedParticipants, participant];
+            }
+        };
+        this.waitlistedParticipantLeftListener = (participant) => {
+            this.waitlistedParticipants = this.waitlistedParticipants.filter((p) => p.id !== participant.id);
+        };
+        this.waitlistedParticipantsClearedListener = () => {
+            this.waitlistedParticipants = [];
+        };
+        meeting.participants.waitlisted.addListener('participantJoined', this.waitlistedParticipantJoinedListener);
+        meeting.participants.waitlisted.addListener('participantLeft', this.waitlistedParticipantLeftListener);
+        meeting.participants.waitlisted.addListener('participantsCleared', this.waitlistedParticipantsClearedListener);
+    }
+    render() {
+        if (this.view !== 'sidebar' || !this.shouldShowWaitlist())
+            return;
+        return (h("div", { class: "waiting-participants" }, h("div", { class: "heading-count", part: "waitlisted-heading-count" }, this.t('waitlist.header_title'), " (", this.waitlistedParticipants.length, ")"), h("ul", { class: "participants", part: "waitlisted-participants" }, this.waitlistedParticipants.map((participant) => (h("li", { class: "waiting-participant", key: participant.id }, h("div", { class: "participant-details" }, h("rtk-avatar", { participant: participant, size: "sm", iconPack: this.iconPack, t: this.t }), h("p", { class: "name", title: participant.name }, participant.name)), h("div", { class: "waitlist-controls" }, h("rtk-tooltip", { label: this.t('waitlist.deny_request'), variant: "secondary" }, h("rtk-button", { variant: "secondary", kind: "icon", onClick: () => this.rejectWaitingRoomRequest(participant.id) }, h("rtk-icon", { class: "deny", icon: this.iconPack.dismiss }))), h("rtk-tooltip", { label: this.t('waitlist.accept_request'), variant: "secondary" }, h("rtk-button", { variant: "secondary", kind: "icon", onClick: () => this.acceptWaitingRoomRequest(participant.id) }, h("rtk-icon", { class: "accept", icon: this.iconPack.checkmark })))))))), h("rtk-button", { class: "accept-all-button", variant: "secondary", kind: "wide", onClick: this.acceptAllWaitingRoomRequests }, this.t('waitlist.accept_all'))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+    static get style() { return RtkParticipantsWaitingListStyle0; }
+}, [1, "rtk-participants-waiting-list", {
+        "meeting": [16],
+        "config": [16],
+        "size": [513],
+        "iconPack": [16],
+        "view": [1],
+        "t": [16],
+        "waitlistedParticipants": [32]
+    }, undefined, {
+        "meeting": ["meetingChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkParticipantsWaitlisted.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantsWaitlisted.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantsWaitlisted.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantsWaitlisted.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-participants-waiting-list", "rtk-avatar", "rtk-button", "rtk-icon", "rtk-spinner", "rtk-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-participants-waiting-list":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkParticipantsWaitlisted);
+            }
+            break;
+        case "rtk-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkParticipantsWaitlisted as R, defineCustomElement as d };

package/dist/components/p-e560b4b6.js

@@ -0,0 +1,82 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
+import { a as defaultIconPack, c as useLanguage } from './p-9bcf0d04.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { d as defineCustomElement$1 } from './p-92a1602c.js';
+
+const rtkMuteAllConfirmationCss = ":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;-webkit-user-select:none;-moz-user-select:none;user-select:none}.leave-modal{position:relative;display:flex;flex-direction:column;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));padding:var(--rtk-space-4, 16px);color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.leave-modal .header h2{margin:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-3, 12px)}.leave-modal .content{font-size:14px}.leave-message p{margin-top:var(--rtk-space-3, 12px);margin-bottom:var(--rtk-space-3, 12px)}.leave-meeting{display:flex;flex-direction:row;justify-content:space-between;gap:var(--rtk-space-2, 8px)}.leave-meeting rtk-button{flex:1 1 0%}.end-meeting{margin-top:var(--rtk-space-2, 8px)}.message{margin-bottom:var(--rtk-space-4, 16px)}label{display:flex;align-items:center}input[type='checkbox']{margin-right:var(--rtk-space-2, 8px);accent-color:rgb(var(--rtk-colors-brand-500, 33 96 253))}";
+const RtkMuteAllConfirmationStyle0 = rtkMuteAllConfirmationCss;
+
+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 RtkMuteAllConfirmation = /*@__PURE__*/ proxyCustomElement(class RtkMuteAllConfirmation extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.allowUnmute = true;
+        this.onClose = () => {
+            this.stateUpdate.emit({ activeMuteAllConfirmation: false });
+        };
+        this.onMuteAll = () => {
+            var _a;
+            (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.participants.disableAllAudio(this.allowUnmute);
+            this.onClose();
+        };
+    }
+    render() {
+        return (h(Host, { key: '199f56583843ca5b4e68f6a087471983c231983b' }, h("div", { key: '86b15ff17b5a9526df77d2bc9f1d1e2d938c71c4', class: "leave-modal" }, h("div", { key: '7f19f8d34586e3f8ee4661556e5f4c744facb4e8', class: "header" }, h("h2", { key: '93adfa1d849b0aa3e483c280d1078d99ac1ef73c', class: "title" }, this.t('mute_all.header'))), h("p", { key: '7532426538ef8de6280cf0246126061bff639209', class: "message" }, this.t('mute_all.description')), h("div", { key: '14f577e917ecbf867afe2e6a4f94b86122d95496', class: "content" }, h("div", { key: '2cbe2cea5befa86328d786aa3420af04bda0097e', class: "leave-meeting" }, h("rtk-button", { key: '27b26964264a4c569ef7388357623ed97dff7bdb', variant: "secondary", title: this.t('close'), onClick: this.onClose }, this.t('cancel')), h("rtk-button", { key: 'dba570b9e72a21c0b76957cac4809f61878645d3', variant: "danger", title: this.t('mute_all'), onClick: this.onMuteAll }, this.t('mute_all')))))));
+    }
+    static get style() { return RtkMuteAllConfirmationStyle0; }
+}, [1, "rtk-mute-all-confirmation", {
+        "meeting": [16],
+        "states": [16],
+        "iconPack": [16],
+        "t": [16],
+        "allowUnmute": [32]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkMuteAllConfirmation.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkMuteAllConfirmation.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkMuteAllConfirmation.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkMuteAllConfirmation.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-mute-all-confirmation", "rtk-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-mute-all-confirmation":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkMuteAllConfirmation);
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkMuteAllConfirmation as R, defineCustomElement as d };