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

package/dist/components/p-a83ccdbd.js

@@ -0,0 +1,40 @@
+const handler = {
+    get: (target, name, receiver) => (...args) => {
+        try {
+            return Reflect.get(target, name, receiver).apply(target, args);
+        }
+        catch (_a) {
+            return null;
+        }
+    },
+};
+let gracefulStorage;
+try {
+    gracefulStorage = new Proxy(localStorage, handler);
+}
+catch (_a) {
+    gracefulStorage = new Proxy({}, handler);
+}
+const gracefulStorage$1 = gracefulStorage;
+
+const KEY = 'rtk-prefs';
+const setPreference = (key, value) => {
+    const data = JSON.parse(gracefulStorage$1.getItem(KEY) || '{}');
+    data[key] = JSON.stringify(value);
+    gracefulStorage$1.setItem('rtk-prefs', JSON.stringify(data));
+};
+const getPreference = (key) => {
+    const data = JSON.parse(gracefulStorage$1.getItem(KEY) || '{}');
+    return data[key];
+};
+const getUserPreferences = () => {
+    const prefs = JSON.parse(gracefulStorage$1.getItem(KEY) || '{}');
+    const mirrorVideo = prefs['mirror-video'] ? prefs['mirror-video'] === 'true' : true;
+    const muteNotificationSounds = prefs['mute-notification-sounds']
+        ? prefs['mute-notification-sounds'] === 'true'
+        : false;
+    return { mirrorVideo, muteNotificationSounds };
+};
+const chatUnreadTimestamps = {};
+
+export { gracefulStorage$1 as a, getPreference as b, chatUnreadTimestamps as c, getUserPreferences as g, setPreference as s };

package/dist/components/p-aa9ee9a5.js

@@ -0,0 +1,180 @@
+import { p as proxyCustomElement, H, h } from './p-c3592601.js';
+import { d as defaultConfig, a as defaultIconPack, c as useLanguage } from './p-e6d09c50.js';
+import './p-a83ccdbd.js';
+import { S as SyncWithStore } from './p-d5791958.js';
+import { d as defineCustomElement$5 } from './p-9c17c7ce.js';
+import { d as defineCustomElement$4 } from './p-4cc0e9a5.js';
+import { d as defineCustomElement$3 } from './p-2f2fb96d.js';
+import { d as defineCustomElement$2 } from './p-81f4e985.js';
+import { d as defineCustomElement$1 } from './p-e3b59650.js';
+
+const rtkParticipantsStageQueueCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{margin-top:var(--rtk-space-2, 8px);display:flex;width:100%;flex-direction:column;font-size:14px}.stage-requested-participants{margin-bottom:var(--rtk-space-8, 32px)}.stage-requested-participants .bulk-actions{display:flex;gap:var(--rtk-space-2, 8px)}.stage-requested-participants .bulk-actions .accept-all-button{--tw-text-opacity:1;color:rgba(var(--rtk-colors-success, 98 165 4) / var(--tw-text-opacity))}.stage-requested-participants .bulk-actions rtk-button{flex:1 1 0%}h3,.heading-count{margin:var(--rtk-space-0, 0px);display:flex;align-items:center;justify-content:center;padding:var(--rtk-space-0, 0px);font-size:16px;font-weight:400;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));text-align:center}.heading-count{font-size:14px}.participants{margin-top:var(--rtk-space-2, 8px);padding:var(--rtk-space-0, 0px)}.waiting-participant{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);display:flex;align-items:center}.waiting-participant .participant-details{margin-right:auto;display:flex;align-items:center}.waiting-participant .participant-details rtk-avatar{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);flex-shrink:0;font-size:14px}.waiting-participant .participant-details .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}@media (min-width: 1080px){.waiting-participant .participant-details .name{max-width:var(--rtk-space-40, 160px)}}.waiting-participant .waitlist-controls{display:flex}.waiting-participant .waitlist-controls rtk-button{margin-left:var(--rtk-space-2, 8px);cursor:pointer;border-radius:var(--rtk-border-radius-sm, 4px)}.waiting-participant .waitlist-controls rtk-icon.accept{--tw-text-opacity:1;color:rgba(var(--rtk-colors-success, 98 165 4) / var(--tw-text-opacity))}.waiting-participant .waitlist-controls rtk-icon.deny{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}";
+const RtkParticipantsStageQueueStyle0 = rtkParticipantsStageQueueCss;
+
+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 RtkParticipantsStaged = /*@__PURE__*/ proxyCustomElement(class RtkParticipantsStaged extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** Config */
+        this.config = defaultConfig;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** View mode for participants list */
+        this.view = 'sidebar';
+        /** Language */
+        this.t = useLanguage();
+        this.stageRequestedParticipants = [];
+        this.updateStageRequestedParticipants = () => {
+            this.stageRequestedParticipants = this.meeting.participants.joined
+                .toArray()
+                .filter((p) => p.stageStatus === 'REQUESTED_TO_JOIN_STAGE');
+        };
+        this.acceptStageRequest = async (p) => {
+            const { userId } = p;
+            await this.meeting.stage.grantAccess([userId]);
+            this.updateStageRequestedParticipants();
+        };
+        this.rejectStageRequest = async (p) => {
+            const { userId } = p;
+            await this.meeting.stage.denyAccess([userId]);
+            this.updateStageRequestedParticipants();
+        };
+        this.acceptAllStageRequest = async () => {
+            await this.meeting.stage.grantAccess(this.stageRequestedParticipants.map((p) => p.userId));
+            this.updateStageRequestedParticipants();
+        };
+        this.denyAllStageRequest = async () => {
+            var _a;
+            await ((_a = this.meeting.stage) === null || _a === void 0 ? void 0 : _a.denyAccess(this.stageRequestedParticipants.map((p) => p.userId)));
+            this.updateStageRequestedParticipants();
+        };
+        this.shouldShowStageRequests = () => {
+            return (this.meeting.self.permissions.stageEnabled &&
+                this.meeting.self.permissions.acceptStageRequests &&
+                this.stageRequestedParticipants.length > 0);
+        };
+        this.updateRequestList = async (stageRequests) => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            if (!this.meeting.self.permissions.acceptStageRequests ||
+                !this.meeting.self.permissions.stageEnabled) {
+                this.stageRequestedParticipants = [];
+                return;
+            }
+            if (this.meeting.meta.viewType === 'LIVESTREAM' ||
+                ((_c = (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.permissions) === null || _c === void 0 ? void 0 : _c.mediaRoomType) === 'HIVE') {
+                if (!stageRequests) {
+                    stageRequests = (_f = (_e = (await ((_d = this.meeting.stage) === null || _d === void 0 ? void 0 : _d.getAccessRequests()))) === null || _e === void 0 ? void 0 : _e.stageRequests) !== null && _f !== void 0 ? _f : [];
+                }
+                /**
+                 * NOTE(ishita1805): Temporarily mapping `displayName` to `name` till socket service sends the correct key.
+                 */
+                this.stageRequestedParticipants = stageRequests.map((p) => {
+                    return Object.assign(Object.assign({}, p), { name: p.displayName });
+                });
+            }
+            else {
+                this.stageRequestedParticipants = (_g = [
+                    this.meeting.self,
+                    ...this.meeting.participants.joined.toArray(),
+                ]) === null || _g === void 0 ? void 0 : _g.filter((p) => p.stageStatus === 'REQUESTED_TO_JOIN_STAGE');
+            }
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        const { stage } = this.meeting;
+        stage === null || stage === void 0 ? void 0 : stage.removeListener('stageAccessRequestUpdate', this.updateRequestList);
+    }
+    meetingChanged(meeting) {
+        var _a;
+        if (meeting == null)
+            return;
+        this.updateRequestList();
+        (_a = meeting.stage) === null || _a === void 0 ? void 0 : _a.on('stageAccessRequestUpdate', this.updateRequestList);
+    }
+    render() {
+        if (this.view !== 'sidebar' || !this.shouldShowStageRequests())
+            return;
+        return (h("div", { class: "stage-requested-participants" }, h("div", { class: "heading-count", part: "staged-heading-count" }, this.t('stage_request.header_title'), " (", this.stageRequestedParticipants.length, ")"), h("ul", { class: "participants", part: "staged-participants" }, this.stageRequestedParticipants.map((participant) => (h("li", { class: "waiting-participant", key: participant.id }, h("div", { class: "participant-details" }, h("rtk-avatar", { participant: participant, size: "sm", iconPack: this.iconPack, t: this.t }), h("p", { class: "name", title: participant.name }, participant.name)), h("div", { class: "waitlist-controls" }, h("rtk-tooltip", { label: this.t('stage_request.deny_request'), variant: "secondary" }, h("rtk-button", { variant: "secondary", kind: "icon", onClick: () => this.rejectStageRequest(participant) }, h("rtk-icon", { class: "deny", icon: this.iconPack.dismiss }))), h("rtk-tooltip", { label: this.t('stage_request.accept_request'), variant: "secondary" }, h("rtk-button", { variant: "secondary", kind: "icon", onClick: () => this.acceptStageRequest(participant) }, h("rtk-icon", { class: "accept", icon: this.iconPack.checkmark })))))))), h("div", { class: "bulk-actions" }, h("rtk-button", { class: "accept-all-button", variant: "secondary", onClick: this.acceptAllStageRequest }, this.t('stage_request.accept_all')), h("rtk-button", { class: "deny-all-button", variant: "danger", onClick: this.denyAllStageRequest }, this.t('stage_request.deny_all')))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+    static get style() { return RtkParticipantsStageQueueStyle0; }
+}, [1, "rtk-participants-stage-queue", {
+        "meeting": [16],
+        "config": [16],
+        "size": [513],
+        "iconPack": [16],
+        "view": [1],
+        "t": [16],
+        "stageRequestedParticipants": [32]
+    }, undefined, {
+        "meeting": ["meetingChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkParticipantsStaged.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantsStaged.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantsStaged.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantsStaged.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-participants-stage-queue", "rtk-avatar", "rtk-button", "rtk-icon", "rtk-spinner", "rtk-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-participants-stage-queue":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkParticipantsStaged);
+            }
+            break;
+        case "rtk-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkParticipantsStaged as R, defineCustomElement as d };

package/dist/components/p-ab87c5be.js

@@ -0,0 +1,178 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
+import { a as defaultIconPack, c as useLanguage, p as participantIdentifier, h as getAllConnectedParticipants } from './p-e6d09c50.js';
+import { S as SyncWithStore } from './p-d5791958.js';
+import { f as formatName, s as shorten } from './p-338c7261.js';
+import { d as defineCustomElement$4 } from './p-9c17c7ce.js';
+import { d as defineCustomElement$3 } from './p-2f2fb96d.js';
+import { d as defineCustomElement$2 } from './p-81f4e985.js';
+import { d as defineCustomElement$1 } from './p-e3b59650.js';
+
+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 = (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 = /*@__PURE__*/ proxyCustomElement(class RtkBreakoutRoomParticipants extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.onSelectedParticipantsUpdate = createEvent(this, "selectedParticipantsUpdate", 7);
+        this.onAllToggled = createEvent(this, "allParticipantsToggleUpdate", 7);
+        this.onParticipantsDragging = createEvent(this, "participantsDragging", 7);
+        /** Participant ids */
+        this.participantIds = [];
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = 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(participantIdentifier(participant));
+            this.updateSelectedParticipants(participant, !selected);
+        };
+        this.onToggleAll = (checked) => {
+            const selectedParticipants = checked ? this.participantsToShow.map(participantIdentifier) : [];
+            this.onAllToggled.emit(selectedParticipants);
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+        this.searchChanged(this.search);
+    }
+    disconnectedCallback() {
+        if (this.meeting == null)
+            return;
+    }
+    updateSelectedParticipants(participant, selected) {
+        const id = 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 == null)
+            return;
+        this.getParticipants(this.search);
+    }
+    participantsChanged() {
+        this.getParticipants(this.search);
+    }
+    searchChanged(search) {
+        this.getParticipants(search);
+    }
+    getParticipants(search) {
+        const allParticipants = getAllConnectedParticipants(this.meeting);
+        this.participantsToShow = allParticipants.filter((participant) => {
+            var _a;
+            return (this.participantIds.includes(participantIdentifier(participant)) &&
+                ((_a = participant.displayName) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(search.toLowerCase()));
+        });
+    }
+    renderPeer(participant) {
+        const name = formatName(participant.displayName || '');
+        return (h("div", { class: "peer-ui-container" }, h("rtk-avatar", { participant: {
+                name: participant.displayName,
+                picture: participant.displayPictureUrl,
+            }, size: "sm" }), h("p", { class: "name", title: name }, shorten(name, 16), this.meeting.self.userId === participant.id && ` (${this.t('you')})`)));
+    }
+    render() {
+        return (h(Host, { key: 'f52879701d8a87899b877c28d53254b3bc56b299' }, h("div", { key: '91d45e76f9f147c8ca30584bbb6c7816c189e0ce', class: "search-wrapper" }, h("div", { key: 'b4ae06fd6ce269008cdb4512590e5df8a39f5c9a', class: "search", part: "search" }, h("rtk-icon", { key: '0018db4e3febb44ccef2b7891d13fb76e18573b6', icon: this.iconPack.search, part: "search-icon", class: "search-icon" }), h("input", { key: '61fddb7cde11b23976e7485c17f23d34d2f14379', type: "search", autocomplete: "off", placeholder: this.t('search'), onInput: this.onSearchInput, part: "search-input" })), h("slot", { key: '8b2bb46621a8f148e22e6ce34b4d2a47a3b3c707', name: "shuffle-button" })), h("div", { key: '9803b94e75d829ac1f95527b16ba7381807b630b', class: "header" }, h("div", { key: 'c1b21d875ec8cc2e0625f7e21191b78ffce9e4e3', class: "title-wrapper" }, h("span", { key: '3f87be86358d89b288294cb09846a09f2182df11' }, this.t('breakout_rooms.main_room')), h("span", { key: 'f5a0d206f12479e064d20dc414532d88a24bd62e', class: "participant-count" }, "(", h("rtk-icon", { key: '8c8302bd28b84dc72c98086905ae2416d5044216', icon: this.iconPack.people }), this.participantsToShow.length, ")")), this.selectedParticipantIds.length !== 0 && (h("rtk-tooltip", { key: 'a40167a7356b4c9d52cd795d5a2c8985a896a473', label: this.t('breakout_rooms.select_all') }, h("input", { key: '754d9265dc605ecb460eddaa91f6673690a372c1', type: "checkbox", checked: this.selectedParticipantIds.length === this.participantsToShow.length, onChange: (e) => this.onToggleAll(!!e.target.checked) })))), h("div", { key: '94373ef76a5ebd0fcf6d34fe34c0aa7ee1c38159', class: "ctr scrollbar", part: "container" }, this.participantsToShow.length > 0 && (h("ul", { key: '5293af5ca10e9ccd031cfd4b43494a6b7d112084', class: "participants", part: "participants" }, this.participantsToShow.map((participant) => (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 && (h("input", { type: "checkbox", class: {
+                'hide-checkbox': this.selectedParticipantIds.length === 0,
+            }, checked: this.selectedParticipantIds.includes(participantIdentifier(participant)) }))))))), this.participantsToShow.length === 0 && this.search.length > 0 && (h("div", { key: '2940a7bb997d27028dbafb8796dd9db3a55869d3', class: "empty-message" }, this.t('participants.errors.empty_results'))), this.participantsToShow.length === 0 && this.search.length === 0 && (h("div", { key: 'e3a7539e969f0f5369079bac5c01d6ad4a4fdb50', class: "empty-room" }, h("rtk-icon", { key: '92b2b7022d9e2961e6ccfc9b721b8369d09bdbb9', icon: this.iconPack.people_checked, part: "search-icon", class: "search-icon" }), h("p", { key: '629b7fb160ec79432d5f7e1b3fd50972589cda7a' }, this.t('breakout_rooms.all_assigned')), h("span", { key: '54c84669c543b7a12ee33e6aba25b30c271727b9' }, this.t('breakout_rooms.empty_main_room')))))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"],
+        "participantIds": ["participantsChanged"],
+        "search": ["searchChanged"]
+    }; }
+    static get style() { return RtkBreakoutRoomParticipantsStyle0; }
+}, [1, "rtk-breakout-room-participants", {
+        "meeting": [16],
+        "participantIds": [16],
+        "iconPack": [16],
+        "t": [16],
+        "selectedParticipantIds": [16],
+        "search": [32],
+        "participantsToShow": [32],
+        "isDragging": [32]
+    }, undefined, {
+        "meeting": ["meetingChanged"],
+        "participantIds": ["participantsChanged"],
+        "search": ["searchChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkBreakoutRoomParticipants.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkBreakoutRoomParticipants.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkBreakoutRoomParticipants.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-breakout-room-participants", "rtk-avatar", "rtk-icon", "rtk-spinner", "rtk-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-breakout-room-participants":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkBreakoutRoomParticipants);
+            }
+            break;
+        case "rtk-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkBreakoutRoomParticipants as R, defineCustomElement as d };

package/dist/components/p-ae239151.js

@@ -0,0 +1,150 @@
+import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
+import { a as defaultIconPack, c as useLanguage } from './p-e6d09c50.js';
+import './p-a83ccdbd.js';
+import { S as SyncWithStore } from './p-d5791958.js';
+import { d as getBatteryLevelVerdict, e as getBatteryChargingVerdict, f as getOverallBatteryVerdict } from './p-0e02697c.js';
+
+const rtkDebuggerSystemCss = ":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;flex-direction:column;overflow:hidden;height:100%;width:100%;color:rgb(var(--rtk-colors-text-1000, 255 255 255));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.tab-body::-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))}.tab-body::-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))}h3{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px);font-size:16px;font-weight:600}#header{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-5, 20px);display:flex;align-items:center;justify-content:space-evenly}.tab-body{margin:var(--rtk-space-4, 16px);display:flex;height:100%;flex-direction:column;justify-content:space-between;overflow-y:auto}.status-container{border:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));border-radius:8px;padding:16px}.status-section{margin-bottom:12px}.section-header{display:flex;justify-content:space-between;align-items:center;font-weight:bold;padding:8px 0}.section-body.missing-stats{display:flex;text-align:center;justify-content:center}.section-header .status{color:rgba(var(--rtk-colors-success));font-weight:bold}.section-header .arrow{font-size:14px}.battery-table{border:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));border-radius:8px;margin-top:8px;overflow:hidden}.battery-row{display:flex;justify-content:space-between;padding:12px;border-bottom:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60))}.battery-row:last-child{border-bottom:none}.battery-cell{display:flex;flex-direction:column}.battery-cell.label strong{font-size:14px}.battery-cell.label .description{font-size:12px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));margin-top:4px}.battery-cell.value{text-align:right}.status.good{color:rgba(var(--rtk-colors-success))}.status.average{color:rgba(var(--rtk-colors-warning))}.status.poor{color:rgba(var(--rtk-colors-danger))}.value{font-size:14px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));margin-top:4px}rtk-settings-video{display:flex;flex-direction:column}";
+const RtkDebuggerSystemStyle0 = rtkDebuggerSystemCss;
+
+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 RtkDebuggerSystem = /*@__PURE__*/ proxyCustomElement(class RtkDebuggerSystem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** Is Network section expanded */
+        this.isBatterySectionOpen = true;
+        /** Summarised health of network stats */
+        this.batterySectionHealth = null;
+        /** Battery manager */
+        this.battery = null;
+        /** Stats as formatted array to display */
+        this.batteryFormattedStats = [];
+        this.batteryUpdateListener = () => {
+            const batteryLevelPercentage = Math.round(this.battery.level * 100);
+            const newBatteryStats = [];
+            newBatteryStats.push({
+                name: this.t('debugger.system.battery.level.label'),
+                value: `${batteryLevelPercentage}%`,
+                description: this.t('debugger.system.battery.level.description'),
+                verdict: getBatteryLevelVerdict({
+                    batteryLevelPercentage,
+                }),
+            });
+            newBatteryStats.push({
+                name: this.t('debugger.system.battery.charging.label'),
+                value: `${this.battery.charging
+                    ? this.t('debugger.system.battery.charging.is_charging')
+                    : this.t('debugger.system.battery.charging.is_not_charging')}`,
+                description: this.t('debugger.system.battery.charging.description'),
+                verdict: getBatteryChargingVerdict({
+                    batteryLevelPercentage,
+                    chargingTimeInSeconds: this.battery.chargingTime,
+                    dischargingTimeInSeconds: this.battery.dischargingTime,
+                    charging: this.battery.charging,
+                }),
+            });
+            this.batterySectionHealth = getOverallBatteryVerdict({
+                stats: newBatteryStats,
+            });
+            this.batteryFormattedStats = newBatteryStats;
+        };
+    }
+    toggleSection(section) {
+        if (section === 'battery')
+            this.isBatterySectionOpen = !this.isBatterySectionOpen;
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        if (!this.meeting) {
+            return;
+        }
+        if (this.battery) {
+            this.battery.removeEventListener('levelchange', this.batteryUpdateListener);
+            this.battery.removeEventListener('chargingchange', this.batteryUpdateListener);
+        }
+    }
+    async meetingChanged(meeting) {
+        if (!meeting)
+            return;
+        if (typeof navigator.getBattery !== 'undefined') {
+            this.battery = await navigator.getBattery();
+            this.battery.addEventListener('levelchange', this.batteryUpdateListener);
+            this.battery.addEventListener('chargingchange', this.batteryUpdateListener);
+            this.batteryUpdateListener();
+        }
+    }
+    render() {
+        var _a, _b;
+        if (!this.meeting) {
+            return;
+        }
+        return (h(Host, null, h("div", { id: "header" }), h("div", { class: "tab-body" }, h("div", { class: "status-container" }, h("div", { class: "status-section" }, h("div", { class: "section-header", onClick: () => this.toggleSection('battery') }, h("span", null, this.t('debugger.system.sections.battery')), this.batterySectionHealth && (h("span", { class: `status ${(_a = this.batterySectionHealth) === null || _a === void 0 ? void 0 : _a.toLowerCase()}` }, this.t(`debugger.quality.${(_b = this.batterySectionHealth) === null || _b === void 0 ? void 0 : _b.toLowerCase()}`)))), this.isBatterySectionOpen && !!this.batteryFormattedStats.length && (h("div", { class: "section-body battery-table" }, this.batteryFormattedStats.map((formattedStatsObj) => {
+            var _a, _b;
+            return (h("div", { class: "battery-row" }, h("div", { class: "battery-cell label" }, h("strong", null, formattedStatsObj.name), h("span", { class: "description" }, formattedStatsObj.description)), h("div", { class: "battery-cell value" }, h("span", { class: `status ${(_a = formattedStatsObj.verdict) === null || _a === void 0 ? void 0 : _a.toLowerCase()}` }, this.t(`debugger.quality.${(_b = formattedStatsObj.verdict) === null || _b === void 0 ? void 0 : _b.toLowerCase()}`)), h("span", { class: "value" }, formattedStatsObj.value))));
+        }))))))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+    static get style() { return RtkDebuggerSystemStyle0; }
+}, [1, "rtk-debugger-system", {
+        "meeting": [16],
+        "states": [16],
+        "size": [513],
+        "iconPack": [16],
+        "t": [16],
+        "isBatterySectionOpen": [32],
+        "batterySectionHealth": [32],
+        "battery": [32],
+        "batteryFormattedStats": [32]
+    }, undefined, {
+        "meeting": ["meetingChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerSystem.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerSystem.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerSystem.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerSystem.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerSystem.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-debugger-system"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-debugger-system":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkDebuggerSystem);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkDebuggerSystem as R, defineCustomElement as d };