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

package/dist/cjs/rtk-breakout-room-manager_3.cjs.entry.js

@@ -0,0 +1,397 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-1cb28da8.js');
+const string = require('./string-9bce3253.js');
+const index = require('./index-8d07e125.js');
+
+const rtkBreakoutRoomManagerCss = ":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{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));border-radius:var(--rtk-border-radius-sm, 4px)}@keyframes bg-glow{25%{background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / 0.2)}50%{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}75%{background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / 0.2)}}.glowing-card{animation:bg-glow 0.8s}.selector-mode,.assign-mode{display:flex;flex-direction:column;align-items:center;padding:var(--rtk-space-2, 8px);cursor:pointer}.selector:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.show-on-hover{display:none}.header{width:100%;display:flex;align-items:center}.header rtk-icon{margin-left:var(--rtk-space-2, 8px);height:var(--rtk-space-5, 20px);cursor:pointer}.header .danger{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}.header .hide{display:none}.header .rooms-container{display:flex;flex-grow:1;flex-direction:row;align-items:center;justify-content:flex-end}.header input{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));padding:var(--rtk-space-1, 4px);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));max-width:var(--rtk-space-36, 144px);font-size:14px;font-weight:500;border-radius:var(--rtk-border-radius-sm, 4px);border-width:var(--rtk-border-width-none, 0);border-style:none;outline:2px solid transparent;outline-offset:2px;border-bottom-width:var(--rtk-border-width-sm, 1px);border-style:solid;--tw-border-opacity:1;border-bottom-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-border-opacity))}.header input:disabled{overflow-x:visible;border-radius:var(--rtk-border-radius-none, 0);border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent}.header input:invalid{border-bottom-width:var(--rtk-border-width-sm, 1px);border-style:dashed;--tw-border-opacity:1;border-bottom-color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-border-opacity))}.header input.editing-enabled{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}.header .participant-count{display:flex;align-items:center;font-size:14px;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.header .participant-count rtk-icon{margin:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-0\\.5, 2px);width:var(--rtk-space-3, 12px)}.header .assign-button{height:var(--rtk-space-6, 24px);--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity));text-decoration-line:underline}.header .assign-button:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.participant-list{display:grid;flex-grow:1;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--rtk-space-2, 8px);margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);width:100%;border-radius:var(--rtk-border-radius-sm, 4px)}.participant-list::-webkit-scrollbar{width:var(--rtk-space-1\\.5, 6px)}.participant-list::-webkit-scrollbar-thumb{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.participant-list::-webkit-scrollbar-track{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.participant-item{display:flex;align-items:center;justify-content:space-between;margin-right:var(--rtk-space-2, 8px);height:-moz-fit-content;height:fit-content;padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px)}.participant-item:hover{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.selector-mode:hover .show-on-hover{display:flex}.message-container{margin:var(--rtk-space-0, 0px);display:flex;width:100%;padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px)}.message-container p{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-0, 0px);height:var(--rtk-space-20, 80px);display:flex;width:100%;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-sm, 4px);font-size:12px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));border-style:dashed;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity))}.message-container p:hover{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-border-opacity));background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / 0.25)}.message-container .drop-zone-active{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-border-opacity));background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / 0.25)}rtk-icon{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}.show-on-hover{margin-left:var(--rtk-space-4, 16px);height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);display:none}:host(:hover) .show-on-hover{display:flex}.peer-ui-container{position:relative;display:flex;align-items:center;gap:var(--rtk-space-2, 8px);height:var(--rtk-space-10, 40px);cursor:pointer;border-radius:var(--rtk-border-radius-sm, 4px);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.peer-ui-container rtk-avatar{height:var(--rtk-space-7, 28px);width:var(--rtk-space-7, 28px);font-size:14px;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.peer-ui-container .name{font-size:14px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}";
+const RtkBreakoutRoomManagerStyle0 = rtkBreakoutRoomManagerCss;
+
+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 ROOM_TITLE_MIN_CHARS = 3;
+const RtkBreakoutRoomManager = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.onParticipantsAdd = index$1.createEvent(this, "participantsAdd", 7);
+        this.onParticipantDelete = index$1.createEvent(this, "participantDelete", 7);
+        this.onRoomJoin = index$1.createEvent(this, "roomJoin", 7);
+        this.deleteRoom = index$1.createEvent(this, "delete", 7);
+        this.updateRoom = index$1.createEvent(this, "update", 7);
+        /** allow room delete */
+        this.allowDelete = true;
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        /** Drag mode */
+        this.isDragMode = false;
+        /** display expanded card by default */
+        this.defaultExpanded = false;
+        this.editingTitleRoomId = null;
+        this.newTitle = null;
+        this.showExpandedCard = false;
+        this.glowingCard = false;
+        this.permissionsUpdateListener = () => {
+            this.permissions = this.meeting.self.permissions.connectedMeetings;
+        };
+        this.reset = () => {
+            this.editingTitleRoomId = null;
+            this.newTitle = null;
+        };
+        this.onEditClick = () => {
+            if (this.editingTitleRoomId) {
+                if (this.newTitle.length < ROOM_TITLE_MIN_CHARS)
+                    return;
+                this.roomTitle = this.newTitle;
+                this.updateRoom.emit({
+                    title: this.newTitle,
+                    id: this.editingTitleRoomId,
+                });
+                this.glowCard();
+                this.reset();
+            }
+            else {
+                this.editingTitleRoomId = this.room.id;
+                index$1.writeTask(() => {
+                    this.inputTextEl.focus();
+                    this.inputTextEl.select();
+                });
+            }
+        };
+        this.onDrop = (e) => {
+            if (e.currentTarget instanceof HTMLParagraphElement) {
+                e.currentTarget.classList.remove('drop-zone-active');
+                this.onAssign();
+            }
+        };
+        this.onDragOver = (e) => {
+            if (e.currentTarget instanceof HTMLParagraphElement) {
+                e.currentTarget.classList.add('drop-zone-active');
+                e.preventDefault();
+            }
+        };
+    }
+    connectedCallback() {
+        var _a;
+        this.allParticipants = uiStore.getAllConnectedParticipants(this.meeting);
+        this.permissionsUpdateListener();
+        this.showExpandedCard = this.defaultExpanded;
+        this.roomTitle = this.room.isParent ? this.t('breakout_rooms.main_room') : (_a = this.room) === null || _a === void 0 ? void 0 : _a.title;
+        this.canEditMeetingTitle =
+            this.permissions.canAlterConnectedMeetings &&
+                !this.room.isParent &&
+                !this.meeting.connectedMeetings.isActive; // TODO: remove this once socket supports update meetings
+        this.meeting.self.permissions.on('permissionsUpdate', this.permissionsUpdateListener);
+    }
+    disconnectedCallback() {
+        this.meeting.self.permissions.off('permissionsUpdate', this.permissionsUpdateListener);
+    }
+    onDragLeave(e) {
+        if (e.currentTarget instanceof HTMLParagraphElement) {
+            e.currentTarget.classList.remove('drop-zone-active');
+        }
+    }
+    getAssignmentHint() {
+        if (this.assigningParticipants && this.isDragMode) {
+            return this.t('breakout_rooms.drag_drop_participants');
+        }
+        if (this.assigningParticipants) {
+            return this.t('breakout_rooms.click_drop_participants');
+        }
+        if (this.room.participants.length === 0) {
+            return this.t('breakout_rooms.none_assigned');
+        }
+    }
+    toggleCardDisplay() {
+        this.showExpandedCard = !this.showExpandedCard;
+    }
+    glowCard() {
+        this.glowingCard = true;
+        setTimeout(() => {
+            this.glowingCard = false;
+        }, 2000);
+    }
+    onAssign() {
+        this.onParticipantsAdd.emit();
+        this.glowCard();
+    }
+    onJoin() {
+        this.onRoomJoin.emit();
+    }
+    onTitleChanged(e) {
+        if (e.key === 'Enter') {
+            this.newTitle = e.target.value;
+            this.onEditClick();
+        }
+    }
+    renderPeer(participant) {
+        const { displayPictureUrl: picture } = this.allParticipants.find((p) => uiStore.participantIdentifier(p) === uiStore.participantIdentifier(participant));
+        const name = string.formatName(participant.displayName || '');
+        return (index$1.h("div", { class: "peer-ui-container" }, index$1.h("rtk-avatar", { participant: { name, picture }, size: "sm" }), index$1.h("p", { class: "name", title: name }, string.shorten(name, 16), this.meeting.self.userId === participant.id && ` (${this.t('you')})`)));
+    }
+    renderExpandedCardMaybe() {
+        if (!this.showExpandedCard)
+            return;
+        if (this.room.isParent)
+            return;
+        if (!this.getAssignmentHint())
+            return;
+        if (!this.permissions.canAlterConnectedMeetings)
+            return;
+        return (index$1.h("div", { class: "message-container" }, index$1.h("p", { class: { 'compact-height': this.room.participants.length !== 0 }, onClick: () => this.onAssign(), onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, this.getAssignmentHint())));
+    }
+    renderParticipantsMaybe() {
+        if (!this.showExpandedCard)
+            return;
+        if (this.room.isParent)
+            return;
+        if (this.room.participants.length === 0)
+            return;
+        return (index$1.h("div", { class: "participant-list", onClick: () => {
+                this.onAssign();
+            } }, this.room.participants.map((participant) => (index$1.h("div", { class: "participant-item", role: "listitem", key: participant.id }, this.renderPeer(participant), this.permissions.canAlterConnectedMeetings && (index$1.h("rtk-icon", { class: "show-on-hover", icon: this.iconPack.dismiss, onClick: () => {
+                this.onParticipantDelete.emit(participant);
+            } })))))));
+    }
+    render() {
+        var _a, _b, _c;
+        if (!this.meeting || !this.room || !this.permissions)
+            return null;
+        /* NOTE(ravindra-cloudflare):
+         *  Checking if user can switch to this room
+         *  Check 1: if user has full access.
+         *  Check 2: For non-parent room, user has "switch meeting" access.
+         *  Check 3: For parent room, user has "switch to parent meeting" access.
+         */
+        const canSwitchToThisRoom = this.permissions.canAlterConnectedMeetings ||
+            (this.permissions.canSwitchConnectedMeetings && !this.room.isParent) ||
+            (this.permissions.canSwitchToParentMeeting && this.room.isParent);
+        return (index$1.h(index$1.Host, null, index$1.h("div", { class: {
+                'assign-mode': this.assigningParticipants,
+                'selector-mode': !this.assigningParticipants,
+                'glowing-card': this.glowingCard,
+            } }, index$1.h("div", { class: "header" }, index$1.h("input", { ref: (el) => (this.inputTextEl = el), placeholder: this.t('breakout_rooms.room_name'), disabled: !(this.editingTitleRoomId === this.room.id), value: this.roomTitle, minlength: ROOM_TITLE_MIN_CHARS, onChange: (e) => {
+                this.newTitle = e.target.value;
+            }, onKeyPress: (e) => this.onTitleChanged(e), class: { 'editing-enabled': this.editingTitleRoomId === this.room.id }, style: { width: `${this.roomTitle.length + 1}ch` } }), this.editingTitleRoomId !== this.room.id && (index$1.h("span", { class: "participant-count" }, "(", index$1.h("rtk-icon", { icon: this.iconPack.people }), (_c = (_b = (_a = this.room) === null || _a === void 0 ? void 0 : _a.participants) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : '0', ")")), this.canEditMeetingTitle && (index$1.h("rtk-tooltip", { label: this.editingTitleRoomId === this.room.id
+                ? this.t('breakout_rooms.save_room_name')
+                : this.t('breakout_rooms.edit_room_name') }, index$1.h("rtk-icon", { icon: this.editingTitleRoomId === this.room.id
+                ? this.iconPack.checkmark
+                : this.iconPack.edit, class: "show-on-hover", onClick: this.onEditClick }))), index$1.h("div", { class: "rooms-container" }, this.permissions.canAlterConnectedMeetings &&
+            !this.room.isParent &&
+            this.allowDelete && (index$1.h("rtk-tooltip", { label: this.t('breakout_rooms.delete'), class: "danger" }, index$1.h("rtk-icon", { icon: this.iconPack.delete, class: "show-on-hover", onClick: () => {
+                this.deleteRoom.emit();
+            } }))), this.assigningParticipants &&
+            this.permissions.canAlterConnectedMeetings &&
+            !this.room.isParent && (index$1.h("rtk-button", { kind: "button", variant: "ghost", class: "assign-button", size: "md", onClick: () => this.onAssign() }, this.t('breakout_rooms.assign'))), this.mode === 'edit' && !this.assigningParticipants && canSwitchToThisRoom && (index$1.h("rtk-button", { kind: "button", variant: "ghost", class: "assign-button", size: "md", disabled: this.room.id === this.meeting.meta.meetingId, onClick: () => this.onJoin() }, this.room.id === this.meeting.meta.meetingId ? this.t('joined') : this.t('join'))), !this.room.isParent && (index$1.h("rtk-icon", { icon: this.showExpandedCard ? this.iconPack.chevron_up : this.iconPack.chevron_down, onClick: () => this.toggleCardDisplay() })))), this.renderExpandedCardMaybe(), this.renderParticipantsMaybe())));
+    }
+};
+__decorate$2([
+    index.SyncWithStore()
+], RtkBreakoutRoomManager.prototype, "meeting", void 0);
+__decorate$2([
+    index.SyncWithStore()
+], RtkBreakoutRoomManager.prototype, "states", void 0);
+__decorate$2([
+    index.SyncWithStore()
+], RtkBreakoutRoomManager.prototype, "iconPack", void 0);
+__decorate$2([
+    index.SyncWithStore()
+], RtkBreakoutRoomManager.prototype, "t", void 0);
+RtkBreakoutRoomManager.style = RtkBreakoutRoomManagerStyle0;
+
+const rtkBreakoutRoomParticipantsCss = ":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{display:flex;height:100%;flex-direction:column;font-size:14px}:host input[type='checkbox']{margin:var(--rtk-space-0, 0px);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--rtk-border-radius-sm, 4px);position:relative;height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);border-width:var(--rtk-border-width-sm, 1px);border-style:solid;border-color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}:host input[type='checkbox']:checked{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity))}:host input[type='checkbox']:checked::before{position:absolute;top:1px;left:1px;height:var(--rtk-space-3, 12px);width:var(--rtk-space-3, 12px);background-color:rgb(var(--rtk-colors-text-1000, 255 255 255));content:'';clip-path:polygon(5% 60%, 35% 93%, 100% 19%, 86% 4%, 36% 62%, 19% 44%)}*{box-sizing:border-box}.participants{margin-top:var(--rtk-space-2, 8px);padding:var(--rtk-space-0, 0px)}.ctr{box-sizing:border-box;padding-top:var(--rtk-space-0, 0px);padding-bottom:var(--rtk-space-0, 0px);overflow-y:auto;flex-grow:1;flex-basis:0}.empty-message{margin-top:var(--rtk-space-10, 40px);margin-bottom:var(--rtk-space-10, 40px);text-align:center;font-size:14px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.empty-room{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--rtk-space-2, 8px);height:100%;text-align:center;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.empty-room rtk-icon{height:var(--rtk-space-7, 28px);width:var(--rtk-space-7, 28px)}.empty-room p{font-size:16px;font-weight:500;margin:var(--rtk-space-0, 0px)}.empty-room span{font-size:12px;color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}.search-wrapper{margin-bottom:var(--rtk-space-1, 4px);display:flex;align-items:center;gap:var(--rtk-space-2, 8px)}.search{position:sticky;box-sizing:border-box;display:flex;align-items:center;border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-0, 0px);height:var(--rtk-space-8, 32px)}.search .search-icon{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px);color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}.search input{box-sizing:border-box;width:100%;padding-right:var(--rtk-space-2, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:inherit;color:rgb(var(--rtk-colors-text-1000, 255 255 255));outline:2px solid transparent;outline-offset:2px;border-radius:var(--rtk-border-radius-sm, 4px);font-size:14px}.search input::-moz-placeholder{color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.search input::placeholder{color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.header{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-1\\.5, 6px);height:var(--rtk-space-9, 36px);padding-top:var(--rtk-space-3, 12px);padding-bottom:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-0\\.5, 2px);border-bottom-width:var(--rtk-border-width-sm, 1px);border-top-width:var(--rtk-border-width-none, 0);border-right-width:var(--rtk-border-width-none, 0);border-left-width:var(--rtk-border-width-none, 0);border-style:solid;--tw-border-opacity:1;border-bottom-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));font-size:12px;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));display:flex;align-items:center;justify-content:space-between}.title-wrapper{display:flex;align-items:center;gap:var(--rtk-space-2, 8px)}.participant-count{display:flex;align-items:center;font-size:14px}.participant-count rtk-icon{margin-right:var(--rtk-space-0\\.5, 2px);width:var(--rtk-space-3, 12px)}.participant-item{display:flex;align-items:center;justify-content:space-between;margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-1, 4px);border-radius:var(--rtk-border-radius-sm, 4px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);cursor:pointer}.participant-item input.hide-checkbox{display:none}.participant-item input:checked{display:inline-block}.dragging input{display:none}.participant-item:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.participant-item:hover input{display:inline-block}.peer-ui-container{position:relative;display:flex;align-items:center;gap:var(--rtk-space-2, 8px);height:var(--rtk-space-10, 40px);cursor:pointer;border-radius:var(--rtk-border-radius-sm, 4px);color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.peer-ui-container rtk-avatar{height:var(--rtk-space-7, 28px);width:var(--rtk-space-7, 28px);font-size:14px;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.peer-ui-container .name{font-size:14px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}";
+const RtkBreakoutRoomParticipantsStyle0 = rtkBreakoutRoomParticipantsCss;
+
+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 RtkBreakoutRoomParticipants = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.onSelectedParticipantsUpdate = index$1.createEvent(this, "selectedParticipantsUpdate", 7);
+        this.onAllToggled = index$1.createEvent(this, "allParticipantsToggleUpdate", 7);
+        this.onParticipantsDragging = index$1.createEvent(this, "participantsDragging", 7);
+        /** Participant ids */
+        this.participantIds = [];
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        this.search = '';
+        this.participantsToShow = [];
+        /** selected participants */
+        this.selectedParticipantIds = [];
+        this.isDragging = false;
+        this.onSearchInput = (e) => {
+            this.search = e.target.value;
+        };
+        this.onDragStart = (participant) => {
+            this.isDragging = true;
+            this.onParticipantsDragging.emit(true);
+            this.updateSelectedParticipants(participant, true);
+        };
+        this.onDragEnd = (participant) => {
+            this.isDragging = false;
+            this.onParticipantsDragging.emit(false);
+            this.updateSelectedParticipants(participant, false);
+        };
+        this.onClick = (participant) => {
+            const selected = this.selectedParticipantIds.includes(uiStore.participantIdentifier(participant));
+            this.updateSelectedParticipants(participant, !selected);
+        };
+        this.onToggleAll = (checked) => {
+            const selectedParticipants = checked ? this.participantsToShow.map(uiStore.participantIdentifier) : [];
+            this.onAllToggled.emit(selectedParticipants);
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+        this.searchChanged(this.search);
+    }
+    disconnectedCallback() {
+        if (!this.meeting)
+            return;
+    }
+    updateSelectedParticipants(participant, selected) {
+        const id = uiStore.participantIdentifier(participant);
+        let selectedParticipants = [];
+        if (selected && !this.selectedParticipantIds.includes(id)) {
+            selectedParticipants = [...this.selectedParticipantIds, id];
+        }
+        else {
+            selectedParticipants = [...this.selectedParticipantIds.filter((x) => x !== id)];
+        }
+        this.onSelectedParticipantsUpdate.emit(selectedParticipants);
+    }
+    meetingChanged(meeting) {
+        if (!meeting)
+            return;
+        this.getParticipants(this.search);
+    }
+    participantsChanged() {
+        this.getParticipants(this.search);
+    }
+    searchChanged(search) {
+        this.getParticipants(search);
+    }
+    getParticipants(search) {
+        const allParticipants = uiStore.getAllConnectedParticipants(this.meeting);
+        this.participantsToShow = allParticipants.filter((participant) => {
+            var _a;
+            return (this.participantIds.includes(uiStore.participantIdentifier(participant)) &&
+                ((_a = participant.displayName) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(search.toLowerCase()));
+        });
+    }
+    renderPeer(participant) {
+        const name = string.formatName(participant.displayName || '');
+        return (index$1.h("div", { class: "peer-ui-container" }, index$1.h("rtk-avatar", { participant: {
+                name: participant.displayName,
+                picture: participant.displayPictureUrl,
+            }, size: "sm" }), index$1.h("p", { class: "name", title: name }, string.shorten(name, 16), this.meeting.self.userId === participant.id && ` (${this.t('you')})`)));
+    }
+    render() {
+        return (index$1.h(index$1.Host, { key: '3d6466a85fa946d5c0d064d22431e3c7bf044787' }, index$1.h("div", { key: '8626af199d5290ce595212817ee06c1ef00d91bf', class: "search-wrapper" }, index$1.h("div", { key: '9ac706f201f5975b7d36b4dde7fd9504321b7d5f', class: "search", part: "search" }, index$1.h("rtk-icon", { key: '0ccba51717c665364934ea1bfdd7eeea3c5e96b7', icon: this.iconPack.search, part: "search-icon", class: "search-icon" }), index$1.h("input", { key: '01c85631f3e1823d1ab384bad4a9efbd86514894', type: "search", autocomplete: "off", placeholder: this.t('search'), onInput: this.onSearchInput, part: "search-input" })), index$1.h("slot", { key: '9d3a00a2bd167d053025d979bb0a498028b664de', name: "shuffle-button" })), index$1.h("div", { key: '38defd0577bedacd300e8cb558b42727b7817420', class: "header" }, index$1.h("div", { key: 'e11f58aae66a50800625464b79517e59094e5f1d', class: "title-wrapper" }, index$1.h("span", { key: '99ec80653bc7045fd08c4e95ac15f95dc3ca90ad' }, this.t('breakout_rooms.main_room')), index$1.h("span", { key: '40617acc26b95df49c2f221846ee811046709908', class: "participant-count" }, "(", index$1.h("rtk-icon", { key: 'aa8c4c4281635c998ea7c254b611341fd28e65cc', icon: this.iconPack.people }), this.participantsToShow.length, ")")), this.selectedParticipantIds.length !== 0 && (index$1.h("rtk-tooltip", { key: 'ce8eb895411d27003cafccb8ed694851df0ec52e', label: this.t('breakout_rooms.select_all') }, index$1.h("input", { key: '76ba09891936c9dfbfbd216f030c32b38c3160ee', type: "checkbox", checked: this.selectedParticipantIds.length === this.participantsToShow.length, onChange: (e) => this.onToggleAll(!!e.target.checked) })))), index$1.h("div", { key: '2ac3f88bd10747f453a626837a8806072ccc283d', class: "ctr scrollbar", part: "container" }, this.participantsToShow.length > 0 && (index$1.h("ul", { key: '01e08e47d7b52a1805561b3efc4e97713f542a4d', class: "participants", part: "participants" }, this.participantsToShow.map((participant) => (index$1.h("li", { class: { 'participant-item': true, dragging: this.isDragging }, onClick: () => this.onClick(participant), onDragStart: () => this.onDragStart(participant), onDragEnd: () => this.onDragEnd(participant), draggable: this.selectedParticipantIds.length === 0, role: "listitem", key: participant.id }, this.renderPeer(participant), !this.isDragging && (index$1.h("input", { type: "checkbox", class: {
+                'hide-checkbox': this.selectedParticipantIds.length === 0,
+            }, checked: this.selectedParticipantIds.includes(uiStore.participantIdentifier(participant)) }))))))), this.participantsToShow.length === 0 && this.search.length > 0 && (index$1.h("div", { key: 'aa14388c88e230528364d906d97972abdb4a5d7c', class: "empty-message" }, this.t('participants.errors.empty_results'))), this.participantsToShow.length === 0 && this.search.length === 0 && (index$1.h("div", { key: '0b10bd982a32001549df0d38cb76f0fcc112fb3d', class: "empty-room" }, index$1.h("rtk-icon", { key: 'bc7ce0cfa9f46e0d793f9b9a6b3866325963d017', icon: this.iconPack.people_checked, part: "search-icon", class: "search-icon" }), index$1.h("p", { key: '6ff4827b2df19620c677fdbf432669fd60200bb1' }, this.t('breakout_rooms.all_assigned')), index$1.h("span", { key: 'ea6e1b05bfaf16842687fbdf1b680cb64fe2a9ef' }, this.t('breakout_rooms.empty_main_room')))))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"],
+        "participantIds": ["participantsChanged"],
+        "search": ["searchChanged"]
+    }; }
+};
+__decorate$1([
+    index.SyncWithStore()
+], RtkBreakoutRoomParticipants.prototype, "meeting", void 0);
+__decorate$1([
+    index.SyncWithStore()
+], RtkBreakoutRoomParticipants.prototype, "iconPack", void 0);
+__decorate$1([
+    index.SyncWithStore()
+], RtkBreakoutRoomParticipants.prototype, "t", void 0);
+RtkBreakoutRoomParticipants.style = RtkBreakoutRoomParticipantsStyle0;
+
+const rtkCounterCss = ":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:row;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));width:-moz-fit-content;width:fit-content;border-radius:var(--rtk-border-radius-sm, 4px);padding:var(--rtk-space-1, 4px)}p{margin:var(--rtk-space-0, 0px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px)}input{margin:var(--rtk-space-0, 0px);width:var(--rtk-space-6, 24px);padding:var(--rtk-space-2, 8px);border-width:var(--rtk-border-width-sm, 1px);border-style:solid;border-color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));text-align:center;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));border-radius:var(--rtk-border-radius-sm, 4px);font-size:16px;outline:2px solid transparent;outline-offset:2px;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:var(--rtk-space-0, 0px);appearance:none;-webkit-appearance:none}input[type='number']{-moz-appearance:textfield}";
+const RtkCounterStyle0 = rtkCounterCss;
+
+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 RtkCounter = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.onChange = index$1.createEvent(this, "valueChange", 7);
+        /** Input */
+        this.input = '1';
+        /** Minimum value */
+        this.minValue = 0;
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+    }
+    connectedCallback() {
+        this.watchStateHandler(this.input);
+        this.input = this.value.toString();
+    }
+    watchStateHandler(input) {
+        this.onChange.emit(input);
+    }
+    increment() {
+        this.input = Math.max(parseInt(this.input) + 1, this.minValue).toString();
+    }
+    decrement() {
+        this.input = Math.max(this.minValue, parseInt(this.input) - 1).toString();
+    }
+    render() {
+        return (index$1.h(index$1.Host, { key: '151ffb29ae91788d05b46f4c795b817c20a35b90' }, index$1.h("rtk-button", { key: '9568cb52875c92f57597033cc7b396fa5c2d0371', kind: "icon", variant: "ghost", onClick: () => this.decrement() }, index$1.h("rtk-icon", { key: '8ef248b64e90f01bd1f78db5048db148d7c374c9', icon: this.iconPack.subtract })), index$1.h("input", { key: '376d604bb62a6c9013e7361da51de8f05f34c870', type: "number", value: this.input, min: this.minValue, onInput: (e) => {
+                const val = parseInt(e.target.value, 10);
+                if (isNaN(val) || val < this.minValue) {
+                    this.input = this.minValue.toString();
+                }
+                else {
+                    this.input = val.toString();
+                }
+            } }), index$1.h("rtk-button", { key: 'cea8491840c69cf3856e97d97b5c4f34abf45e55', kind: "icon", variant: "ghost", onClick: () => this.increment() }, index$1.h("rtk-icon", { key: 'cb2146960e8c8368cce69fb8d8a696078bcea2fc', icon: this.iconPack.add }))));
+    }
+    static get watchers() { return {
+        "input": ["watchStateHandler"]
+    }; }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkCounter.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkCounter.prototype, "t", void 0);
+RtkCounter.style = RtkCounterStyle0;
+
+exports.rtk_breakout_room_manager = RtkBreakoutRoomManager;
+exports.rtk_breakout_room_participants = RtkBreakoutRoomParticipants;
+exports.rtk_counter = RtkCounter;