uapp-communication-sdk 1.0.0-dev.54

package/rtk-breakout-rooms-manager_9.entry-CWTO3XcT.js

@@ -0,0 +1,816 @@
+import { B as e, G as t, J as n, Q as r, R as i, Y as a, Z as o, g as s, m as c, t as l } from "./ui-store-4fbabb78-B6WDMKSM.js";
+import { t as u } from "./index-8be19fcf-BppFp8rx.js";
+import { t as d } from "./index-3f51790f-Cnkj1veX.js";
+//#region node_modules/@cloudflare/realtimekit-ui/dist/esm/rtk-breakout-rooms-manager_9.entry.js
+var f = ":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)}.color-brand{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-text-opacity))}.color-danger{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}.loading-content{height:var(--rtk-space-60, 240px);width:var(--rtk-space-96, 384px);padding:var(--rtk-space-9, 36px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));display:flex;align-items:center;justify-content:center}.room-config{overflow:hidden;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));display:flex;flex-direction:column;width:var(--rtk-space-96, 384px);padding-left:var(--rtk-space-9, 36px);padding-right:var(--rtk-space-9, 36px);padding-top:var(--rtk-space-10, 40px);padding-bottom:var(--rtk-space-10, 40px)}header{margin-bottom:var(--rtk-space-8, 32px);display:flex;align-items:center;gap:var(--rtk-space-2, 8px);font-size:24px;font-weight:600}header rtk-icon{height:var(--rtk-space-7, 28px);width:var(--rtk-space-7, 28px)}.create-room{margin-bottom:var(--rtk-space-4, 16px);display:flex;align-items:center;gap:var(--rtk-space-3, 12px);width:100%}.create-room p{margin:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-1, 4px);font-size:16px}.distribution-hint{margin-bottom:var(--rtk-space-8, 32px);font-size:14px;font-weight:400;color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}.distribution-hint em{font-style:normal;color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}footer{display:flex;flex-direction:row;vertical-align:middle;justify-content:center}footer rtk-button{width:100%;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}label{margin-bottom:var(--rtk-space-3, 12px);font-weight:400;color:rgb(var(--rtk-colors-text-1000, 255 255 255));opacity:0.4}.participant-config-wrapper{width:850px;min-height:595px;max-width:100%;max-height:100%;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));display:flex;flex-direction:column}.participant-config-actions{display:flex;justify-content:space-between;padding-left:var(--rtk-space-8, 32px);padding-right:var(--rtk-space-8, 32px);padding-top:var(--rtk-space-5, 20px);padding-bottom:var(--rtk-space-5, 20px);border-bottom-right-radius:var(--rtk-border-radius-md, 8px);border-bottom-left-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))}.participant-config{display:flex;flex-grow:1;flex-direction:row;overflow:hidden}aside{box-sizing:border-box;display:flex;width:var(--rtk-space-96, 384px);flex-grow:1;flex-direction:column;padding-left:var(--rtk-space-8, 32px);padding-right:var(--rtk-space-4, 16px);border-right-width:var(--rtk-border-width-sm, 1px);border-top-width:var(--rtk-border-width-none, 0);border-bottom-width:var(--rtk-border-width-none, 0);border-left-width:var(--rtk-border-width-none, 0);border-style:solid;--tw-border-opacity:1;border-right-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity))}aside header{margin-bottom:var(--rtk-space-4, 16px);width:100%;padding-left:var(--rtk-space-0, 0px);padding-right:var(--rtk-space-0, 0px);padding-top:var(--rtk-space-8, 32px);font-size:20px;font-weight:500;line-height:2rem}.shuffle-button{display:flex;flex-direction:row;align-items:center}.shuffle-button rtk-icon{height:var(--rtk-space-8, 32px)}.participants-assign-actions{display:flex;flex-direction:row;align-items:center;justify-content:space-between;font-size:14px;padding-left:var(--rtk-space-8, 32px);padding-right:var(--rtk-space-2, 8px);margin-left:calc(var(--rtk-space-8, 32px) * -1);margin-right:calc(var(--rtk-space-4, 16px) * -1);padding-top:var(--rtk-space-0\\.5, 2px);padding-bottom:var(--rtk-space-0\\.5, 2px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}.participants-assign-actions .deselect-button{height:var(--rtk-space-6, 24px)}.participants-assign-actions .deselect-button:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}.assign-rooms{padding:var(--rtk-space-8, 32px);display:flex;width:100%;flex-direction:column}.assign-rooms .disabled{opacity:0.2}.assign-rooms .back{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:flex-start;padding:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-0, 0px);font-size:14px;color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.assign-rooms .back rtk-icon{height:var(--rtk-space-5, 20px)}.assign-rooms .row{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rtk-space-3, 12px);margin-bottom:var(--rtk-space-4, 16px);font-size:14px}.assign-rooms .row-header{margin:var(--rtk-space-0, 0px);font-size:16px;line-height:2rem}.assign-rooms .cta-buttons{display:flex;align-items:center;justify-content:flex-start;gap:var(--rtk-space-2, 8px)}.assign-rooms .cta-buttons rtk-button div{display:flex;flex-direction:row;align-items:center}.assign-rooms .cta-buttons rtk-button div rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px)}.rooms{margin-bottom:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-1, 4px);display:flex;flex-grow:1;flex-direction:column;gap:var(--rtk-space-2, 8px);overflow-y:auto;max-height:500px}.rooms::-webkit-scrollbar{width:var(--rtk-space-1\\.5, 6px);border-radius:var(--rtk-border-radius-sm, 4px)}.rooms::-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))}.rooms::-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))}.breakout-actions{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:var(--rtk-space-2, 8px)}.breakout-actions .start-breakout-button{color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.breakout-actions .close-breakout-button{color:rgb(var(--rtk-colors-text-1000, 255 255 255));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-bg-opacity))}.breakout-actions .update-breakout-button{background-color:transparent;--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity));border-width:var(--rtk-border-width-sm, 1px);border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-border-opacity))}.status-bar{display:flex;align-items:center;font-size:14px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));width:var(--rtk-space-80, 320px)}.ephemeral-status{--tw-text-opacity:1;color:rgba(var(--rtk-colors-success, 98 165 4) / var(--tw-text-opacity))}.ephemeral-status rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px)}.room-switcher-container{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));width:468px;padding:var(--rtk-space-8, 32px)}.add-room-jumbo-btn div{display:flex;align-items:center;gap:var(--rtk-space-1, 4px);font-size:14px;--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-text-opacity))}.add-room-jumbo-btn div rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px)}.br-primary-btn:not([disabled]){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.br-primary-btn:not([disabled]):hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-bg-opacity))}.br-secondary-btn:not([disabled]){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.br-secondary-btn:not([disabled]):hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}", p = function(e, t, n, r) {
+	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
+}, m = 1, h = class {
+	constructor(n) {
+		r(this, n), this.stateUpdate = a(this, "rtkStateUpdate", 7), this.loading = !1, this.roomConfig = {
+			rooms: 2,
+			step: "room-config",
+			mode: "create",
+			applyingChanges: !1
+		}, this.assigningParticipants = !1, this.selectedParticipants = [], this.ephemeralStatusText = "", this.isDragMode = !1, this.iconPack = s, this.t = t(), this.permissionsUpdateListener = () => {
+			this.permissions = this.meeting.self.permissions.connectedMeetings;
+		}, this.updateLocalState = (t) => {
+			this.stateManager.updateCurrentState(t), this.draftState = this.stateManager.currentState, this.meeting.connectedMeetings.isActive && (this.roomConfig = Object.assign(Object.assign({}, this.roomConfig), { mode: "edit" })), this.roomConfig.mode === "create" && !this.meeting.connectedMeetings.isActive && e(), ["edit", "view"].includes(this.roomConfig.mode) && (this.roomConfig = Object.assign(Object.assign({}, this.roomConfig), {
+				rooms: t.meetings.length,
+				step: "participants-config"
+			}), this.selectedParticipants = []);
+		}, this.onAddNewRoom = () => {
+			this.stateManager.addNewMeeting(), this.draftState = this.stateManager.currentState, this.selectorRef.scrollTo({
+				top: this.selectorRef.scrollHeight,
+				behavior: "smooth"
+			});
+		}, this.onRoomUpdate = (e) => {
+			let { detail: t } = e;
+			this.stateManager.updateMeetingTitle(t.id, t.title), this.draftState = this.stateManager.currentState;
+		}, this.onRoomDelete = (e) => {
+			this.stateManager.allConnectedMeetings.find((t) => t.id === e) && (this.stateManager.deleteMeeting(e), this.draftState = this.stateManager.currentState);
+		}, this.unassignParticipant = (e) => {
+			this.stateManager.unassignParticipants([e]), this.draftState = this.stateManager.currentState;
+		}, this.onUnassignAll = () => {
+			this.stateManager.unassignAllParticipants(), this.draftState = this.stateManager.currentState;
+		}, this.assignParticipantsToRoom = (e) => {
+			this.selectedParticipants.length === 0 || this.assigningParticipants == 0 || (this.stateManager.assignParticipantsToMeeting(this.selectedParticipants, e), this.draftState = this.stateManager.currentState, this.selectedParticipants = [], this.assigningParticipants = !1, this.setEphemeralStatus(this.t("breakout_rooms.ephemeral_status.participants_assigned")));
+		}, this.handleClose = (e, t) => {
+			e.emit({ activeBreakoutRoomsManager: { active: !0 } }), t.activeBreakoutRoomsManager = { active: !0 };
+		}, this.enableConfirmationModal = (e = "start-breakout") => {
+			let t = {
+				active: !0,
+				header: "breakout_rooms.confirm_modal.start_breakout.header",
+				content: "breakout_rooms.confirm_modal.start_breakout.content",
+				variant: "primary",
+				cancelText: "breakout_rooms.confirm_modal.start_breakout.cancelText",
+				ctaText: "breakout_rooms.confirm_modal.start_breakout.ctaText",
+				onClick: () => this.applyChanges(),
+				onClose: this.handleClose
+			};
+			e === "close-breakout" && (t = {
+				active: !0,
+				header: "breakout_rooms.confirm_modal.close_breakout.header",
+				content: "breakout_rooms.confirm_modal.close_breakout.content",
+				variant: "danger",
+				cancelText: "cancel",
+				ctaText: "breakout_rooms.confirm_modal.close_breakout.ctaText",
+				onClick: () => this.closeBreakout(),
+				onClose: this.handleClose
+			}), this.stateUpdate.emit({
+				activeBreakoutRoomsManager: { active: !1 },
+				activeConfirmationModal: t
+			});
+		}, this.close = () => {
+			this.stateManager.discardChanges(), this.stateUpdate.emit({ activeBreakoutRoomsManager: { active: !1 } });
+		}, this.applyChanges = async () => {
+			this.roomConfig = Object.assign(Object.assign({}, this.roomConfig), { applyingChanges: !0 }), await this.stateManager.applyChanges(this.meeting), this.close(), this.roomConfig = Object.assign(Object.assign({}, this.roomConfig), { applyingChanges: !1 });
+		};
+	}
+	onSelectedParticipantsChanged(e) {
+		e.length > 0 ? this.assigningParticipants = !0 : this.assigningParticipants = !1;
+	}
+	connectedCallback() {
+		this.permissionsUpdateListener(), this.meeting.connectedMeetings.on("stateUpdate", this.updateLocalState), this.meeting.connectedMeetings.on("changingMeeting", this.close), this.meeting.self.permissions.on("permissionsUpdate", this.permissionsUpdateListener), this.stateManager = new l(), this.fetchRoomState();
+	}
+	disconnectedCallback() {
+		this.meeting.connectedMeetings.off("stateUpdate", this.updateLocalState), this.meeting.connectedMeetings.off("changingMeeting", this.close), this.meeting.self.permissions.off("permissionsUpdate", this.permissionsUpdateListener);
+	}
+	async fetchRoomState() {
+		this.loading = !0, await this.meeting.connectedMeetings.getConnectedMeetings(), this.loading = !1;
+	}
+	setEphemeralStatus(e) {
+		this.ephemeralStatusText = e, setTimeout(() => {
+			this.ephemeralStatusText = "";
+		}, 3e3);
+	}
+	onCreateRooms() {
+		this.selectedParticipants = [], this.stateManager.addNewMeetings(this.roomConfig.rooms), this.draftState = this.stateManager.currentState, this.roomConfig = Object.assign(Object.assign({}, this.roomConfig), { step: "participants-config" });
+	}
+	onParticipantDelete(e) {
+		let { detail: t } = e, n = i(t);
+		n != null && this.unassignParticipant(n);
+	}
+	toggleDragMode(e) {
+		this.isDragMode = e.detail;
+	}
+	assignParticipantsRandomly() {
+		this.stateManager.unassignedParticipants.length !== 0 && (this.stateManager.assignParticipantsRandomly(), this.draftState = this.stateManager.currentState, this.setEphemeralStatus(this.t("breakout_rooms.ephemeral_status.participants_assigned_randomly")));
+	}
+	async joinRoom(e) {
+		let t = i(this.meeting.self);
+		this.stateManager.assignParticipantsToMeeting([t], e), await this.applyChanges();
+	}
+	async closeBreakout() {
+		this.stateManager.allConnectedMeetings.forEach((e) => this.stateManager.deleteMeeting(e.id)), await this.applyChanges();
+	}
+	updateSelectedParticipants(e) {
+		this.selectedParticipants = e.detail;
+	}
+	updateAllParticipants(e) {
+		this.selectedParticipants = e.detail;
+	}
+	getStatusText() {
+		if (this.ephemeralStatusText !== "") return this.ephemeralStatusText;
+		let e = "";
+		return this.roomConfig.mode === "create" && (e = this.t("breakout_rooms.status.assign_multiple"), this.selectedParticipants.length !== 0 && (e = this.t("breakout_rooms.status.select_room"))), e;
+	}
+	getApproxDistribution() {
+		let e = this.stateManager.unassignedParticipants.length / (this.roomConfig.rooms || m);
+		return Math.max(m, Math.round(e));
+	}
+	deselectAll() {
+		this.selectedParticipants = [];
+	}
+	async discardChanges() {
+		this.stateManager.discardChanges(), await this.fetchRoomState(), this.setEphemeralStatus(this.t("breakout_rooms.ephemeral_status.changes_discarded"));
+	}
+	shouldShowOnlyRoomSwitcher() {
+		return this.permissions.canAlterConnectedMeetings === !1;
+	}
+	getPermittedRooms() {
+		return this.permissions.canAlterConnectedMeetings || this.permissions.canSwitchConnectedMeetings ? this.stateManager.allConnectedMeetings : this.stateManager.allConnectedMeetings.filter((e) => e.id === this.meeting.meta.meetingId);
+	}
+	renderMainRoomMaybe() {
+		return this.meeting.connectedMeetings.isActive && this.permissions.canSwitchToParentMeeting ? o("rtk-breakout-room-manager", {
+			key: this.stateManager.currentState.parentMeeting.id,
+			assigningParticipants: this.assigningParticipants,
+			isDragMode: this.isDragMode,
+			meeting: this.meeting,
+			mode: this.roomConfig.mode,
+			onParticipantsAdd: () => this.assignParticipantsToRoom(this.stateManager.currentState.parentMeeting.id),
+			onRoomJoin: () => this.joinRoom(this.stateManager.currentState.parentMeeting.id),
+			onUpdate: this.onRoomUpdate,
+			states: this.states,
+			room: Object.assign({}, this.stateManager.currentState.parentMeeting),
+			iconPack: this.iconPack,
+			t: this.t
+		}) : null;
+	}
+	renderRoomSwitcher() {
+		return o(n, null, o("div", { class: "room-switcher-container" }, o("header", null, o("rtk-icon", { icon: this.iconPack.breakout_rooms }), o("span", null, this.t("breakout_rooms.join_breakout_header"))), o("div", {
+			class: "rooms",
+			ref: (e) => this.selectorRef = e
+		}, this.renderMainRoomMaybe(), this.getPermittedRooms().map((e, t) => o("rtk-breakout-room-manager", {
+			key: e.id,
+			assigningParticipants: this.assigningParticipants,
+			isDragMode: this.isDragMode,
+			defaultExpanded: t === 0,
+			meeting: this.meeting,
+			mode: this.roomConfig.mode,
+			onDelete: () => this.onRoomDelete(e.id),
+			onParticipantsAdd: () => this.assignParticipantsToRoom(e.id),
+			onRoomJoin: () => this.joinRoom(e.id),
+			states: this.states,
+			room: Object.assign({}, e),
+			iconPack: this.iconPack,
+			t: this.t,
+			allowDelete: !1
+		})))));
+	}
+	renderLoading() {
+		return o(n, null, o("div", { class: "loading-content" }, o("rtk-spinner", { size: "xl" })));
+	}
+	renderRoomConfig() {
+		return o(n, null, o("div", { class: "room-config" }, o("header", null, o("rtk-icon", { icon: this.iconPack.breakout_rooms }), o("span", null, this.t("breakout_rooms.room_config_header"))), o("div", { class: "create-room" }, o("p", null, this.t("breakout_rooms.num_of_rooms")), o("rtk-counter", {
+			value: this.roomConfig.rooms,
+			minValue: m,
+			iconPack: this.iconPack,
+			t: this.t,
+			onValueChange: (e) => {
+				this.roomConfig = Object.assign(Object.assign({}, this.roomConfig), { rooms: Math.max(+e.detail, m) });
+			}
+		})), o("span", { class: "distribution-hint" }, `${this.t("breakout_rooms.approx")} `, " ", o("em", null, this.getApproxDistribution(), " ", this.t("breakout_rooms.participants_per_room")), " ", this.t("breakout_rooms.division_text")), o("footer", null, o("rtk-button", {
+			kind: "button",
+			size: "lg",
+			title: this.t("create"),
+			disabled: this.roomConfig.rooms === 0,
+			onClick: () => this.onCreateRooms()
+		}, this.t("create")))));
+	}
+	render() {
+		return this.loading ? this.renderLoading() : this.shouldShowOnlyRoomSwitcher() ? this.renderRoomSwitcher() : this.roomConfig.step === "room-config" ? this.renderRoomConfig() : o(n, null, o("div", { class: "participant-config-wrapper" }, o("div", { class: "participant-config" }, o("aside", { part: "menu" }, o("header", null, this.t("breakout_rooms.assign_participants")), o("rtk-breakout-room-participants", {
+			meeting: this.meeting,
+			iconPack: this.iconPack,
+			t: this.t,
+			participantIds: this.stateManager.unassignedParticipants.map(i),
+			selectedParticipantIds: this.selectedParticipants
+		}, o("rtk-tooltip", {
+			label: this.t("breakout_rooms.shuffle_participants"),
+			slot: "shuffle-button"
+		}, o("rtk-button", {
+			disabled: this.roomConfig.mode === "edit" || this.stateManager.unassignedParticipants.length === 0,
+			kind: "button",
+			variant: "secondary",
+			size: "md",
+			onClick: () => this.assignParticipantsRandomly(),
+			class: "shuffle-button br-primary-btn"
+		}, o("rtk-icon", { icon: this.iconPack.shuffle })))), this.selectedParticipants.length !== 0 && o("div", { class: "participants-assign-actions" }, o("span", null, `${this.selectedParticipants.length} ${this.t("breakout_rooms.selected")}`), o("rtk-button", {
+			disabled: this.roomConfig.mode === "edit",
+			kind: "button",
+			variant: "ghost",
+			size: "md",
+			onClick: () => this.deselectAll(),
+			class: "deselect-button color-danger"
+		}, this.t("breakout_rooms.deselect")))), o("div", { class: "assign-rooms" }, o("div", { class: "row" }, o("p", { class: "row-header" }, this.t("breakout_rooms.rooms"), " (", this.stateManager.allConnectedMeetings.length, ")"), !this.assigningParticipants && o("div", { class: "cta-buttons" }, o("rtk-button", {
+			kind: "button",
+			variant: "secondary",
+			class: "br-primary-btn"
+		}, o("div", { onClick: this.onAddNewRoom }, o("rtk-icon", { icon: this.iconPack.add }), this.t("breakout_rooms.add_room"))), this.stateManager.allConnectedMeetings.flatMap((e) => e.participants).length !== 0 && o("rtk-button", {
+			kind: "button",
+			variant: "ghost",
+			onClick: this.onUnassignAll
+		}, this.t("breakout_rooms.unassign_all")))), o("div", {
+			class: "rooms",
+			ref: (e) => this.selectorRef = e
+		}, this.renderMainRoomMaybe(), this.getPermittedRooms().map((e, t) => o("rtk-breakout-room-manager", {
+			key: e.id,
+			assigningParticipants: this.assigningParticipants,
+			isDragMode: this.isDragMode,
+			defaultExpanded: t === 0,
+			meeting: this.meeting,
+			mode: this.roomConfig.mode,
+			onDelete: () => this.onRoomDelete(e.id),
+			onParticipantsAdd: () => this.assignParticipantsToRoom(e.id),
+			onRoomJoin: () => this.joinRoom(e.id),
+			onUpdate: this.onRoomUpdate,
+			states: this.states,
+			room: Object.assign({}, e),
+			iconPack: this.iconPack,
+			t: this.t,
+			allowDelete: this.stateManager.allConnectedMeetings.length > m
+		})), o("rtk-button", {
+			kind: "button",
+			variant: "secondary",
+			onClick: this.onAddNewRoom,
+			class: "add-room-jumbo-btn br-secondary-btn"
+		}, o("div", null, o("rtk-icon", { icon: this.iconPack.add }), o("span", null, this.t("breakout_rooms.add_room_brief"))))))), o("div", { class: "participant-config-actions" }, o("div", { class: {
+			"status-bar": !0,
+			"ephemeral-status": this.ephemeralStatusText !== ""
+		} }, this.ephemeralStatusText !== "" && o("rtk-icon", { icon: this.iconPack.checkmark }), this.getStatusText()), o("div", { class: "breakout-actions" }, this.roomConfig.mode === "create" && this.permissions.canAlterConnectedMeetings && o("rtk-button", {
+			size: "md",
+			class: "start-breakout-button",
+			onClick: () => this.enableConfirmationModal("start-breakout")
+		}, this.t("breakout_rooms.start_breakout")), this.roomConfig.mode === "edit" && this.stateManager.hasLocalChanges && this.permissions.canAlterConnectedMeetings && o("rtk-button", {
+			size: "md",
+			class: "color-danger",
+			variant: "ghost",
+			onClick: () => this.discardChanges()
+		}, this.t("breakout_rooms.discard_changes")), this.roomConfig.mode === "edit" && this.stateManager.hasLocalChanges && this.permissions.canAlterConnectedMeetings && o("rtk-button", {
+			size: "md",
+			class: "update-breakout-button",
+			onClick: this.applyChanges
+		}, this.t("breakout_rooms.update_breakout")), this.roomConfig.mode === "edit" && !this.stateManager.hasLocalChanges && this.permissions.canAlterConnectedMeetings && o("rtk-button", {
+			size: "md",
+			class: "close-breakout-button",
+			onClick: () => this.enableConfirmationModal("close-breakout")
+		}, this.t("breakout_rooms.close_breakout"))))));
+	}
+	static get watchers() {
+		return { selectedParticipants: ["onSelectedParticipantsChanged"] };
+	}
+};
+p([u()], h.prototype, "meeting", void 0), p([u()], h.prototype, "states", void 0), p([u()], h.prototype, "iconPack", void 0), p([u()], h.prototype, "t", void 0), h.style = f;
+var g = ":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)}", _ = function(e, t, n, r) {
+	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
+}, v = class {
+	constructor(e) {
+		r(this, e), this.stateUpdate = a(this, "rtkStateUpdate", 7), this.iconPack = s, this.t = t(), this.messagePayload = {
+			to: "Everyone",
+			message: ""
+		}, this.successMessage = !1;
+	}
+	close() {
+		var e;
+		(e = this.stateUpdate) == null || e.emit({ activeBroadcastMessageModal: !1 });
+	}
+	sendMessage() {
+		this.successMessage = !0, setTimeout(() => {
+			this.close();
+		}, 2e3);
+	}
+	render() {
+		return o(n, { key: "4e136d9d78d3f21f68492c87031598c63e69de49" }, o("div", {
+			key: "1d70804567155cbe346c7bec29d5f42a31739773",
+			class: "content-col"
+		}, o("h2", { key: "07c76e6fc37cfd439f5103df702b3b0d408ba285" }, "Broadcast message to"), o("select", {
+			key: "4b5f6c4cc84cd850a9bac8ba7855d666a765d5fa",
+			onChange: (e) => {
+				this.messagePayload = Object.assign(Object.assign({}, this.messagePayload), { to: e.target.value });
+			}
+		}, o("option", { key: "8a6fe4861ce6ce84578bc62397920bd27e2eba36" }, "Everyone"), o("option", { key: "10611e0a8912125008eaba7740a8ba5a149de72f" }, "List of rooms")), o("textarea", {
+			key: "42d0ab7e930d8153d2440f8d0de69b95d7170ae3",
+			placeholder: "Type message here...",
+			onInput: (e) => {
+				this.messagePayload = Object.assign(Object.assign({}, this.messagePayload), { message: e.target.value });
+			}
+		}), this.successMessage ? o("p", null, "Message sent to ", this.messagePayload.to, o("rtk-icon", { icon: this.iconPack.checkmark })) : o("div", { class: "content-row" }, o("rtk-button", {
+			onClick: () => this.close(),
+			variant: "secondary"
+		}, "Cancel"), " ", o("rtk-button", {
+			variant: "primary",
+			onClick: () => this.sendMessage()
+		}, "Send"))));
+	}
+};
+_([u()], v.prototype, "meeting", void 0), _([u()], v.prototype, "states", void 0), _([u()], v.prototype, "iconPack", void 0), _([u()], v.prototype, "t", void 0), v.style = g;
+var y = ":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-8, 32px);width:100%;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255));width:400px;max-width:80%}.leave-modal{width:100%;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.leave-modal .header h2{margin:var(--rtk-space-0, 0px)}.leave-modal .content{font-size:14px}.leave-modal 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-4, 16px)}.leave-meeting rtk-button{color:rgb(var(--rtk-colors-text-1000, 255 255 255));flex:1 1 0%}.br-secondary-btn{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.br-secondary-btn:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}", b = function(e, t, n, r) {
+	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
+}, x = class {
+	constructor(e) {
+		r(this, e), this.stateUpdate = a(this, "rtkStateUpdate", 7), this.keyPressListener = (e) => {
+			e.key === "Escape" && this.close();
+		}, this.iconPack = s, this.t = t(), this.close = () => {
+			this.states.activeConfirmationModal.onClose(this.stateUpdate, this.states, this.meeting), this.stateUpdate.emit({ activeConfirmationModal: { active: !1 } }), this.states.activeConfirmationModal = { active: !1 };
+		}, this.onConfirmation = async () => {
+			this.states.activeConfirmationModal.onClick(this.stateUpdate, this.states, this.meeting), this.stateUpdate.emit({ activeConfirmationModal: { active: !1 } }), this.states.activeConfirmationModal = { active: !1 };
+		};
+	}
+	connectedCallback() {
+		document.addEventListener("keydown", this.keyPressListener);
+	}
+	componentDidLoad() {}
+	disconnectedCallback() {
+		document.removeEventListener("keydown", this.keyPressListener);
+	}
+	render() {
+		let e = this.states.activeConfirmationModal;
+		return o(n, { key: "2eed83d0225e57671c7039bc014556865e8df128" }, o("div", {
+			key: "0c110b2e644334e91e3e904e79f0b6792954ef82",
+			class: "leave-modal"
+		}, o("div", {
+			key: "02186a0ea5072a7144bbc80a61d60c8dd9eb0fbb",
+			class: "header"
+		}, o("h2", {
+			key: "bfaa8ae13149b4decc820663850bdbcadd3a4edf",
+			class: "title"
+		}, e.header ? this.t(e.header) : this.t("cta.confirmation"))), e.content && o("p", {
+			key: "59763c35fc925fefa3a7f30fe8918f4ff9c6dc25",
+			class: "message"
+		}, this.t(e.content)), o("div", {
+			key: "c6245c328e93a663b89d5ae61accc6484453cca5",
+			class: "content"
+		}, o("div", {
+			key: "5f48291e64473e56380e624cdfd571d56075f0b8",
+			class: "leave-meeting"
+		}, o("rtk-button", {
+			key: "4dd43baac193b83996c305e02443e5e047cd6bc5",
+			variant: "secondary",
+			title: e.cancelText ? this.t(e.cancelText) : this.t("cancel"),
+			onClick: this.close,
+			class: "br-secondary-btn"
+		}, e.cancelText ? this.t(e.cancelText) : this.t("cancel")), o("rtk-button", {
+			key: "4741c90b5191f53373657fdf184e1a1dbe15af47",
+			onClick: () => this.onConfirmation(),
+			variant: this.states.activeConfirmationModal?.variant ?? "danger",
+			title: e.ctaText ? this.t(e.ctaText) : this.t("yes")
+		}, e.ctaText ? this.t(e.ctaText) : this.t("yes"))))));
+	}
+};
+b([u()], x.prototype, "meeting", void 0), b([u()], x.prototype, "states", void 0), b([u()], x.prototype, "iconPack", void 0), b([u()], x.prototype, "t", void 0), x.style = y;
+var S = ":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{position:relative;display:flex;overflow:hidden;border-radius:var(--rtk-border-radius-md, 8px);width:100%;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255))}header{margin-right:var(--rtk-space-2, 8px);display:flex;align-items:center;justify-content:space-between;padding-top:var(--rtk-space-0, 0px);padding-bottom:var(--rtk-space-0, 0px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px)}header h3{margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-4, 16px)}.back-btn{border-radius:var(--rtk-border-radius-sm, 4px);background-color:transparent;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.back-btn:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}aside{box-sizing:border-box;display:flex;max-width:var(--rtk-space-56, 224px) !important;flex-direction:column;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));padding-left:var(--rtk-space-2, 8px)}aside button{margin-top:var(--rtk-space-4, 16px);box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:space-between;border-top-left-radius:var(--rtk-border-radius-sm, 4px);border-bottom-left-radius:var(--rtk-border-radius-sm, 4px);padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px);padding-top:var(--rtk-space-3, 12px);padding-bottom:var(--rtk-space-3, 12px);background-color:transparent;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));cursor:default;font-size:14px;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);border-width:var(--rtk-border-width-none, 0);border-style:none;outline:2px solid transparent;outline-offset:2px}aside button .right{display:flex;align-items:center}aside button .right rtk-icon{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}aside button .right rtk-icon:last-child{margin-left:var(--rtk-space-4, 16px)}aside button[type='button']{cursor:pointer;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}aside button[type='button']:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}aside button[type='button']{border-right:var(--rtk-border-width-md, 2px) solid transparent}aside button.active{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-border-opacity));background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / 0.2)}aside button.active:hover{background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / 0.2)}aside button.hidden{display:none}main{position:relative;box-sizing:border-box;display:flex;height:100%;width:100%;flex-direction:column}:host([size='sm']) aside{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));width:100% !important;max-width:100% !important;padding-left:var(--rtk-space-0, 0px)}:host([size='sm']) aside button{border-radius:var(--rtk-border-radius-none, 0)}:host([size='sm']) aside button.active{border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent}:host([size='sm']) aside button.active:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}:host([size='sm']) aside button.hidden{display:none}:host([size='sm']) aside.hide{display:none}aside button:host([size='sm']) aside.hide{display:none}:host([size='sm']) aside button:host([size='sm']) aside.hide{display:none}:host([size='sm']) main{display:none;height:100%;width:100%;padding:var(--rtk-space-0, 0px)}aside button:host([size='sm']) main{display:none}:host([size='sm']) aside button:host([size='sm']) main{display:none}:host([size='sm']) main.active{display:block}:host([size='sm']) header{margin:var(--rtk-space-0, 0px);justify-content:center}:host([size='sm']) header rtk-button{position:absolute;left:var(--rtk-space-4, 16px)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{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))}::-webkit-scrollbar-thumb{border-radius:var(--rtk-border-radius-lg, 12px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity))}::-webkit-scrollbar-thumb:hover{border-radius:var(--rtk-border-radius-lg, 12px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity))}.progress-bar{height:var(--rtk-space-1, 4px);width:100%;overflow:hidden;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.progress-indicator{height:100%;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity))}", C = function(e, t, n, r) {
+	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
+}, w = class {
+	constructor(e) {
+		r(this, e), this.stateUpdate = a(this, "rtkStateUpdate", 7), this.keyPressListener = (e) => {
+			e.key === "Escape" && this.close();
+		}, this.iconPack = s, this.t = t(), this.activeTab = "audio", this.isMobileMainVisible = !1, this.progress = 0;
+	}
+	connectedCallback() {
+		document.addEventListener("keydown", this.keyPressListener);
+	}
+	disconnectedCallback() {
+		this.keyPressListener && document.removeEventListener("keydown", this.keyPressListener);
+	}
+	progressUpdate(e) {
+		this.progress = e.detail;
+	}
+	changeTab(e) {
+		this.activeTab = e, this.size === "sm" && (this.isMobileMainVisible ||= !0);
+	}
+	close() {
+		this.stateUpdate.emit({ activeDebugger: !1 });
+	}
+	getActiveTab() {
+		switch (this.activeTab) {
+			case "audio": return this.t("debugger.audio.troubleshooting.label");
+			case "screenshare": return this.t("debugger.screenshare.troubleshooting.label");
+			case "video": return this.t("debugger.video.troubleshooting.label");
+			case "system": return this.t("debugger.system.troubleshooting.label");
+			default: return this.t("debugger.troubleshooting.label");
+		}
+	}
+	render() {
+		if (!this.meeting) return null;
+		let e = {
+			meeting: this.meeting,
+			states: this.states,
+			iconPack: this.iconPack,
+			t: this.t,
+			size: this.size
+		}, t = this.getActiveTab(), r = navigator.getBattery !== void 0;
+		return o(n, null, o("aside", {
+			class: { hide: this.isMobileMainVisible },
+			part: "menu"
+		}, o("header", null, o("h3", null, this.t("debugger.troubleshooting.label"))), o("button", {
+			type: "button",
+			class: { active: this.activeTab === "audio" },
+			onClick: () => this.changeTab("audio")
+		}, this.t("debugger.audio.label"), o("div", { class: "right" }, o("rtk-icon", { icon: this.iconPack.mic_on }), this.size === "sm" && o("rtk-icon", { icon: this.iconPack.chevron_right }))), o("button", {
+			type: "button",
+			class: { active: this.activeTab === "video" },
+			onClick: () => this.changeTab("video")
+		}, this.t("debugger.video.label"), o("div", { class: "right" }, o("rtk-icon", { icon: this.iconPack.video_on }), this.size === "sm" && o("rtk-icon", { icon: this.iconPack.chevron_right }))), o("button", {
+			type: "button",
+			class: { active: this.activeTab === "screenshare" },
+			onClick: () => this.changeTab("screenshare")
+		}, this.t("debugger.screenshare.label"), o("div", { class: "right" }, o("rtk-icon", { icon: this.iconPack.share_screen_start }), this.size === "sm" && o("rtk-icon", { icon: this.iconPack.chevron_right }))), o("button", {
+			type: "button",
+			class: {
+				active: this.activeTab === "system",
+				hidden: !r
+			},
+			onClick: () => this.changeTab("system")
+		}, this.t("debugger.system.label"), o("div", { class: "right" }, o("rtk-icon", { icon: this.iconPack.settings }), this.size === "sm" && o("rtk-icon", { icon: this.iconPack.chevron_right })))), o("main", {
+			class: { active: this.isMobileMainVisible },
+			part: "main-content"
+		}, this.size === "sm" && o("header", null, o("rtk-button", {
+			kind: "icon",
+			class: "back-btn",
+			onClick: () => this.isMobileMainVisible = !1
+		}, o("rtk-icon", { icon: this.iconPack.chevron_left })), o("h4", null, t)), this.activeTab === "audio" && o("rtk-debugger-audio", Object.assign({}, e)), this.activeTab === "video" && o("rtk-debugger-video", Object.assign({}, e)), this.activeTab === "screenshare" && o("rtk-debugger-screenshare", Object.assign({}, e)), this.activeTab === "system" && r && o("rtk-debugger-system", Object.assign({}, e))));
+	}
+};
+C([u()], w.prototype, "meeting", void 0), C([u()], w.prototype, "states", void 0), C([u()], w.prototype, "iconPack", void 0), C([u()], w.prototype, "t", void 0), w.style = S;
+var T = ":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}", E = function(e, t, n, r) {
+	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
+}, D = class {
+	constructor(e) {
+		r(this, e), this.stateUpdate = a(this, "rtkStateUpdate", 7), this.joinStage = a(this, "rtkJoinStage", 7), this.leaveStage = a(this, "rtkLeaveStage", 7), this.config = c(), this.iconPack = s, this.t = t(), 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 = !1;
+	}
+	render() {
+		let e = {
+			meeting: this.meeting,
+			size: this.size,
+			states: this.states,
+			config: this.config,
+			iconPack: this.iconPack,
+			t: this.t
+		};
+		return o(n, {
+			key: "2000c74c7b15b8ad8cc8d7b2940ee1c47c504111",
+			class: { stage: !0 }
+		}, o("header", { key: "1be2b7c17338f42472bd47c761e8a972d960eb45" }, o("h2", { key: "8a2d2e49eb154fc58f121f26c067519473007aa1" }, this.dataConfig.title)), o(d, {
+			key: "17476c475c67d3eedfce7e66a2dc1829211e6f7b",
+			element: "rtk-participant-setup",
+			defaults: e,
+			props: {
+				participant: this.meeting?.self,
+				size: "md"
+			},
+			childProps: {
+				participant: this.meeting?.self,
+				size: "md"
+			},
+			deepProps: !0
+		}), o("div", {
+			key: "708a514d2f5c903c5e01161a374455134f9c5fde",
+			class: "summary"
+		}, this.dataConfig.description), o("div", {
+			key: "690c062b55469b6d2757628cf9c841db05cb50dd",
+			class: "container"
+		}, o("rtk-button", {
+			key: "3c840601730f7c31da94f58fcc7a36fa7f2e98ac",
+			variant: "secondary",
+			onClick: () => this.leaveStage.emit(),
+			title: this.dataConfig.label.reject
+		}, this.dataConfig.label.reject), o("rtk-button", {
+			key: "d4838af3f9b36c6d91ce04d9862840ee838111de",
+			onClick: () => {
+				this.isLoading || (this.isLoading = !0, this.joinStage.emit());
+			},
+			title: this.dataConfig.label.accept
+		}, this.isLoading ? o("rtk-icon", { icon: this.iconPack.spinner }) : this.dataConfig.label.accept)));
+	}
+};
+E([u()], D.prototype, "meeting", void 0), E([u()], D.prototype, "config", void 0), E([u()], D.prototype, "states", void 0), E([u()], D.prototype, "iconPack", void 0), E([u()], D.prototype, "t", void 0), D.style = T;
+var O = ":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)}.leave-modal{width:var(--rtk-space-72, 288px)}@media (min-width: 768px){.leave-modal{width:var(--rtk-space-96, 384px)}}.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-1000, 8 8 8) / var(--tw-bg-opacity));padding:var(--rtk-space-8, 32px);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 .message{color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}.leave-modal .content{margin-top:var(--rtk-space-4, 16px);font-size:14px;display:flex;flex-wrap:wrap;gap:var(--rtk-space-4, 16px)}.leave-modal .content rtk-button{height:var(--rtk-space-9, 36px);min-width:var(--rtk-space-44, 176px);flex-grow:1}.leave-modal .content .secondary-btn{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.leave-modal .content .secondary-btn:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.leave-modal .content .secondary-danger-btn{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}", k = function(e, t, n, r) {
+	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
+}, A = class {
+	constructor(e) {
+		r(this, e), this.stateUpdate = a(this, "rtkStateUpdate", 7), this.keyPressListener = (e) => {
+			e.key === "Escape" && this.close();
+		}, this.iconPack = s, this.t = t(), this.canEndMeeting = !1, this.isBreakoutRoomsActive = !1, this.isChildMeeting = !1, this.canJoinMainRoom = !1, this.permissionsUpdateListener = () => {
+			this.canEndMeeting = this.meeting.self.permissions.kickParticipant, this.canJoinMainRoom = this.meeting.self.permissions.connectedMeetings.canSwitchToParentMeeting;
+		}, this.close = () => {
+			this.stateUpdate.emit({ activeLeaveConfirmation: !1 });
+		}, this.handleLeave = () => {
+			var e;
+			(e = this.meeting) == null || e.leaveRoom(), this.close();
+		}, this.handleJoinMainRoom = () => {
+			this.meeting.connectedMeetings.moveParticipants(this.meeting.meta.meetingId, this.meeting.connectedMeetings.parentMeeting.id, [this.meeting.self.userId]), this.close();
+		}, this.handleEndMeeting = () => {
+			var e;
+			(e = this.meeting) == null || e.participants.kickAll(), this.close();
+		};
+	}
+	connectedCallback() {
+		this.meetingChanged(this.meeting), document.addEventListener("keydown", this.keyPressListener);
+	}
+	disconnectedCallback() {
+		var e;
+		document.removeEventListener("keydown", this.keyPressListener), (e = this.meeting) == null || e.self.permissions.removeListener("permissionsUpdate", this.permissionsUpdateListener);
+	}
+	meetingChanged(e) {
+		e != null && (this.isBreakoutRoomsActive = this.meeting.connectedMeetings.supportsConnectedMeetings && this.meeting.connectedMeetings.isActive, this.isChildMeeting = this.meeting.connectedMeetings.supportsConnectedMeetings && this.meeting.connectedMeetings.meetings.some((t) => t.id === e.meta.meetingId), this.meeting.self.permissions.addListener("permissionsUpdate", this.permissionsUpdateListener), this.permissionsUpdateListener());
+	}
+	render() {
+		return o(n, { key: "293755e563aae16499172d71052c74bbf96cb7ed" }, o("div", {
+			key: "9d4ba90a9b2bcdea797c73a92cd68ff6fa4c297d",
+			class: "leave-modal"
+		}, o("div", {
+			key: "c72dc9fef1e152f4483f9a4e66dfaa4d4c203962",
+			class: "header"
+		}, o("h2", {
+			key: "536812a514d52401220329386333b97c7fc3a7ef",
+			class: "title"
+		}, this.t("leave"))), o("p", {
+			key: "59e5d6d7727a66dc805ce55eaced699da56be722",
+			class: "message"
+		}, this.isBreakoutRoomsActive && this.isChildMeeting ? this.t("breakout_rooms.leave_confirmation") : this.t("leave_confirmation")), o("div", {
+			key: "f3c11bad61b6788ca26821a2e39e14bc88978bd1",
+			class: "content"
+		}, o("rtk-button", {
+			key: "d82e86de08ef1de568ae4ba58a4b1acb2fb92b9e",
+			variant: "secondary",
+			onClick: this.close,
+			class: "secondary-btn"
+		}, this.t("cancel")), this.isBreakoutRoomsActive && this.isChildMeeting && this.canJoinMainRoom && o("rtk-button", {
+			key: "03285ca4d7272f6a4141fdd1244cdcff12ed9b0e",
+			variant: "secondary",
+			onClick: this.handleJoinMainRoom,
+			class: "secondary-btn"
+		}, this.t("breakout_rooms.leave_confirmation.main_room_btn")), o("rtk-button", {
+			key: "aeb4047e0b54363c33b610a7e8c8508869d625da",
+			variant: "danger",
+			title: this.t("leave"),
+			onClick: this.handleLeave
+		}, this.t("leave")), this.canEndMeeting && o("rtk-button", {
+			key: "c0112904cf7c411cf820653e59c57846fdfc106e",
+			variant: "danger",
+			class: "secondary-btn secondary-danger-btn",
+			onClick: this.handleEndMeeting
+		}, this.t("end.all")))));
+	}
+	static get watchers() {
+		return { meeting: ["meetingChanged"] };
+	}
+};
+k([u()], A.prototype, "meeting", void 0), k([u()], A.prototype, "states", void 0), k([u()], A.prototype, "iconPack", void 0), k([u()], A.prototype, "t", void 0), A.style = O;
+var j = ":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))}", M = function(e, t, n, r) {
+	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
+}, N = class {
+	constructor(e) {
+		r(this, e), this.stateUpdate = a(this, "rtkStateUpdate", 7), this.iconPack = s, this.t = t(), this.allowUnmute = !0, this.onClose = () => {
+			this.stateUpdate.emit({ activeMuteAllConfirmation: !1 });
+		}, this.onMuteAll = () => {
+			var e;
+			(e = this.meeting) == null || e.participants.disableAllAudio(this.allowUnmute), this.onClose();
+		};
+	}
+	render() {
+		return o(n, { key: "cc42523605a89e127a34ffb366386c96e9e8bcc8" }, o("div", {
+			key: "680059dc6adedc51406964516092716a4be9b0b8",
+			class: "leave-modal"
+		}, o("div", {
+			key: "c93fd02d2980e40ea05c2a72cde974c13313a5c6",
+			class: "header"
+		}, o("h2", {
+			key: "ed72b35943df3b6e277b072a283bc14df478334c",
+			class: "title"
+		}, this.t("mute_all.header"))), o("p", {
+			key: "5e0fad3eaa18529f9ae576d0878b81bd8ecd86ec",
+			class: "message"
+		}, this.t("mute_all.description")), o("div", {
+			key: "9d7de3d65427027e8ed91168a2d5005c4786fd03",
+			class: "content"
+		}, o("div", {
+			key: "aa6ec55ea8d2a57810c7270abeda998439339b0d",
+			class: "leave-meeting"
+		}, o("rtk-button", {
+			key: "98e75f8a7d6f929a988cb79bd4ab0edd55032933",
+			variant: "secondary",
+			title: this.t("close"),
+			onClick: this.onClose
+		}, this.t("cancel")), o("rtk-button", {
+			key: "1e4738bcc21c4f9a09f833028f25b2a9255e718d",
+			variant: "danger",
+			title: this.t("mute_all"),
+			onClick: this.onMuteAll
+		}, this.t("mute_all"))))));
+	}
+};
+M([u()], N.prototype, "meeting", void 0), M([u()], N.prototype, "states", void 0), M([u()], N.prototype, "iconPack", void 0), M([u()], N.prototype, "t", void 0), N.style = j;
+var P = ":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;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / 0.6);position:fixed;top:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);z-index:50}rtk-icon{height:var(--rtk-space-20, 80px)}h2{margin:var(--rtk-space-2, 8px);font-weight:500}p{margin:var(--rtk-space-0, 0px);font-size:16px}", F = function(e, t, n, r) {
+	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
+}, I = class {
+	constructor(e) {
+		r(this, e), this.stateUpdate = a(this, "rtkStateUpdate", 7), this.iconPack = s, this.t = t();
+	}
+	connectedCallback() {
+		this.states.activeOverlayModal.timeout && setTimeout(() => {
+			this.stateUpdate.emit({ activeOverlayModal: { active: !1 } });
+		}, this.states.activeOverlayModal.timeout);
+	}
+	render() {
+		return o(n, { key: "bfc7e1c1ff7734ac364d6394ce8805805e89f921" }, o("rtk-icon", {
+			key: "8ea30e08a80472965f0ef64a09794aaaa5dbec3a",
+			icon: this.states.activeOverlayModal.icon
+		}), o("h2", { key: "1b774f87be43982f11a5324928929ddb17744b10" }, this.states.activeOverlayModal.title), o("p", { key: "1bdd97fda2d72590c55bbdb1434dd6fa08bb1362" }, this.states.activeOverlayModal.description));
+	}
+};
+F([u()], I.prototype, "meeting", void 0), F([u()], I.prototype, "states", void 0), F([u()], I.prototype, "iconPack", void 0), F([u()], I.prototype, "t", void 0), I.style = P;
+var L = ":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:block;max-height:100%;width:600px;overflow-y:auto;padding:var(--rtk-space-6, 24px);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));overflow-wrap:break-word;color:rgb(var(--rtk-colors-text-1000, 255 255 255));word-wrap:break-word}.actions{display:flex;align-items:center;gap:var(--rtk-space-2, 8px)}.text-icon{display:inline-block;vertical-align:middle}h2{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-4, 16px)}h2 .text-icon{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}p{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-4, 16px)}.need-help-link{margin-top:var(--rtk-space-2, 8px);display:inline-block;text-underline-offset:2px;--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-400, 53 110 253) / var(--tw-text-opacity))}.need-help-link:hover{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-text-opacity))}a rtk-icon{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}:host([size='sm']) .actions{flex-direction:column;align-items:flex-start;justify-content:center}:host([size='sm']) .action{width:100%;padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px)}.actions{margin-top:var(--rtk-space-6, 24px)}.actions rtk-button{flex:1 1 0%}.svg-container{display:flex;width:100%;justify-content:center !important}.svg-ins{width:80%;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}", R = function(e, t, n, r) {
+	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
+}, z = {
+	"Chrome.Desktop.audio": [
+		"Chrome1.svg",
+		"Chrome2.svg",
+		"Chrome3.svg"
+	],
+	"Chrome.Desktop.video": [
+		"Chrome1.svg",
+		"Chrome2.svg",
+		"Chrome3.svg"
+	]
+}, B = class {
+	constructor(e) {
+		r(this, e), this.stateUpdate = a(this, "rtkStateUpdate", 7), this.t = t(), this.iconPack = s, this.currentStep = 0, this.svgSteps = [], this.continue = () => {
+			this.stateUpdate.emit({ activePermissionsMessage: { enabled: !1 } });
+		}, this.reload = () => {
+			typeof window < "u" && window.location.reload();
+		}, this.getImage = async (e) => {
+			function t(e, t, n) {
+				return e.split(t).join(n);
+			}
+			let n = await (await fetch(`https://rtk-assets.realtime.cloudflare.com/ui-kit/permissions/${e}`)).text();
+			return n = t(n, "yoursite.com", location.host), n = t(n, "Yoursite", document.title.length > 14 ? `${document.title.slice(0, 14)}...` : document.title), n;
+		}, this.nextStep = () => {
+			this.currentStep = (this.currentStep + 1) % this.svgSteps.length;
+		}, this.openMacSystemSettings = () => {
+			let e = document.createElement("a");
+			switch (this.mediaType) {
+				case "audio":
+					e.href = "x-apple.systempreferences:com.apple.preference.security?Privacy_Microphone";
+					break;
+				case "screenshare":
+					e.href = "x-apple.systempreferences:com.apple.preference.security?Privacy_ScreenCapture";
+					break;
+				case "video":
+					e.href = "x-apple.systempreferences:com.apple.preference.security?Privacy_Camera";
+					break;
+			}
+			e.click();
+		};
+	}
+	connectedCallback() {
+		this.meetingChanged(this.meeting);
+	}
+	disconnectedCallback() {
+		this.stepsTimer && clearTimeout(this.stepsTimer);
+	}
+	meetingChanged(e) {
+		if (e != null) {
+			this.device = e.self.device;
+			let t = this.device?.isMobile ? "Mobile" : "Desktop", n = z[`${this.device?.browserName}.${t}.${this.mediaType}`] ?? [];
+			Promise.all(n.map(this.getImage)).then((e) => {
+				this.svgSteps = e;
+			});
+		}
+	}
+	getLink(e) {
+		let t;
+		switch (e) {
+			case "audio":
+				t = "microphone";
+				break;
+			case "video":
+				t = "camera";
+				break;
+			default:
+				t = "screenshare";
+				break;
+		}
+		let n = `Allow+${t}+access`;
+		if (this.device != null) {
+			let { browserName: e, isMobile: t } = this.device;
+			n += "+" + e, t && (n += "+mobile");
+		}
+		return "https://www.google.com/search?q=" + n;
+	}
+	isDeniedBySystem() {
+		let e = this.meeting?.self.mediaPermissions;
+		return e == null ? !1 : e[this.mediaType] === "SYSTEM_DENIED";
+	}
+	getTitle() {
+		return this.isDeniedBySystem() ? this.t(`perm_sys_denied.${this.mediaType}`) : this.t(`perm_denied.${this.mediaType}`);
+	}
+	get mediaType() {
+		return this.states?.activePermissionsMessage?.kind ?? "audio";
+	}
+	getMessage() {
+		let { browserName: e, osName: t } = this.meeting.self.device, n = this.isDeniedBySystem(), r = e.toLowerCase() ?? "others", i = t ?? "others";
+		if (n) {
+			let e = `perm_sys_denied.${this.mediaType}.${i.toLowerCase()}.message`;
+			return this.t(e) === e ? this.t(`perm_sys_denied.${this.mediaType}.others.message`) : this.t(e);
+		}
+		let a = `perm_denied.${this.mediaType}.${r}.message`;
+		return this.t(a) === a ? this.t(`perm_denied.${this.mediaType}.others.message`) : this.t(a);
+	}
+	render() {
+		let e = this.isDeniedBySystem();
+		this.svgSteps.length > 0 && (this.stepsTimer && clearTimeout(this.stepsTimer), this.stepsTimer = setTimeout(this.nextStep, 2500));
+		let t = e && this.meeting.self.device.osName == "macOS";
+		return o(n, { key: "35c2bbad4a60f6c782ba1a2a5605f0ea09790a49" }, o("h2", { key: "4df0f8e90e1423f28b87ffc3d959027be72bb3de" }, o("rtk-icon", {
+			key: "566f697f6b9c27fc8f73e05506a80ead3791d9a9",
+			class: "text-icon",
+			icon: this.iconPack.warning
+		}), this.getTitle()), this.svgSteps.length > 0 && o("div", {
+			key: "d6872494a57e9afd5987b469a460c01f31f2ced4",
+			class: "svg-container"
+		}, this.svgSteps.map((e, t) => o("p", {
+			innerHTML: e,
+			class: "svg-ins",
+			key: this.currentStep,
+			hidden: t !== this.currentStep
+		}))), o("div", { key: "4d59413ba86ec57f834f5989856866b6305c49de" }, this.getMessage()), !e && o("a", {
+			key: "cf35ee0b4547aaae44bef3a6cd23d3aae77f3f33",
+			class: "need-help-link",
+			href: this.getLink(this.states?.activePermissionsMessage?.kind ?? "audio"),
+			target: "_blank",
+			rel: "noreferrer external noreferrer noopener"
+		}, o("rtk-icon", {
+			key: "2f35807834494cfded1462c8619053c1d2591222",
+			class: "text-icon",
+			icon: this.iconPack.attach
+		}), this.t("cta.help")), o("div", {
+			key: "aedf537b4edc2ed14072d1f9d3b88c8794357b6e",
+			class: "actions"
+		}, o("rtk-button", {
+			key: "5e603dffa66b44189da8ac80f49e2f5c209a38f8",
+			size: "lg",
+			kind: "wide",
+			variant: "secondary",
+			onClick: this.continue
+		}, this.t("cta.continue")), t ? o("rtk-button", {
+			size: "lg",
+			kind: "wide",
+			onClick: this.openMacSystemSettings
+		}, this.t("cta.system_settings")) : o("rtk-button", {
+			size: "lg",
+			kind: "wide",
+			onClick: this.reload
+		}, this.t("cta.reload"))), o("slot", { key: "d724d3c58d21d5e532a9fd025c3117cd235bd845" }));
+	}
+	static get watchers() {
+		return { meeting: ["meetingChanged"] };
+	}
+};
+R([u()], B.prototype, "meeting", void 0), R([u()], B.prototype, "t", void 0), R([u()], B.prototype, "iconPack", void 0), R([u()], B.prototype, "states", void 0), B.style = L;
+//#endregion
+export { h as rtk_breakout_rooms_manager, v as rtk_broadcast_message_modal, x as rtk_confirmation_modal, w as rtk_debugger, D as rtk_join_stage, A as rtk_leave_meeting, N as rtk_mute_all_confirmation, I as rtk_overlay_modal, B as rtk_permissions_message };
+
+//# sourceMappingURL=rtk-breakout-rooms-manager_9.entry-CWTO3XcT.js.map