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

package/dist/components/p-46ab4375.js

@@ -0,0 +1,180 @@
+import { p as proxyCustomElement, H, h } from './p-3bfd5b6d.js';
+import { d as defaultConfig, a as defaultIconPack, c as useLanguage } from './p-53b020e2.js';
+import './p-a83ccdbd.js';
+import { S as SyncWithStore } from './p-df6f9a3f.js';
+import { d as defineCustomElement$5 } from './p-6fa3c2fa.js';
+import { d as defineCustomElement$4 } from './p-ba1a0ebf.js';
+import { d as defineCustomElement$3 } from './p-bed2e1b5.js';
+import { d as defineCustomElement$2 } from './p-efc19d8d.js';
+import { d as defineCustomElement$1 } from './p-bffc1ba5.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-46ff9ad9.js

@@ -0,0 +1,114 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-3bfd5b6d.js';
+import { f as formatDateTime, e as elapsedDuration } from './p-382270d8.js';
+import { S as SyncWithStore } from './p-df6f9a3f.js';
+import { a as defaultIconPack } from './p-53b020e2.js';
+import './p-a83ccdbd.js';
+import { d as defineCustomElement$6 } from './p-6fa3c2fa.js';
+import { d as defineCustomElement$5 } from './p-bed2e1b5.js';
+import { d as defineCustomElement$4 } from './p-82fbdbf4.js';
+import { d as defineCustomElement$3 } from './p-641ba920.js';
+import { d as defineCustomElement$2 } from './p-1d055d3f.js';
+import { d as defineCustomElement$1 } from './p-efc19d8d.js';
+
+const rtkMessageViewCss = ":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)))}.message-wrapper{display:flex;flex-direction:row-reverse;gap:var(--rtk-space-2, 8px)}.message-wrapper.incoming{flex-direction:row}.message{display:flex;flex-direction:column}.header{margin-bottom:var(--rtk-space-1, 4px);align-self:flex-end;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));font-size:14px;font-weight:600}.incoming .header{align-self:flex-start}.body{display:flex;flex-direction:column;min-width:var(--rtk-space-24, 96px);font-family:var(--rtk-font-family, sans-serif);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));font-size:14px;line-height:1.375;position:relative}.body .metadata{margin-top:var(--rtk-space-2, 8px);align-self:flex-end;font-size:10px}.bubble{max-width:var(--rtk-space-96, 384px);padding:var(--rtk-space-2, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));border-radius:var(--rtk-border-radius-md, 8px)}.incoming .bubble{--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-900, 255 255 255 / 0.88))}.avatar{display:none}rtk-menu{position:absolute;right:var(--rtk-space-0, 0px);top:var(--rtk-space-0, 0px);border-radius:var(--rtk-border-radius-lg, 12px)}rtk-menu rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);cursor:pointer}.actions{display:flex;align-items:center;justify-content:center;padding-left:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px);padding-top:var(--rtk-space-1, 4px);padding-right:var(--rtk-space-1, 4px);border-radius:var(--rtk-border-radius-md, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none;background:radial-gradient(\n    at top right,\n    rgb(var(--rtk-colors-brand-300, 73 124 253)) 60%,\n    rgba(255, 255, 255, 0) 80%\n  )}.actions rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.incoming .actions{background:radial-gradient(\n      at top right,\n      rgb(var(--rtk-colors-background-800, 30 30 30)) 60%,\n      rgba(255, 255, 255, 0) 80%\n    )}.incoming .actions rtk-icon{color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.incoming rtk-avatar{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}@media (min-width: 400px){.avatar{display:flex;width:var(--rtk-space-6, 24px)}.avatar rtk-avatar{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);font-size:10px;overflow:clip;border-radius:9999px}}@media (hover: hover){rtk-menu{visibility:hidden}.body:hover rtk-menu{visibility:visible}}";
+const RtkMessageViewStyle0 = rtkMessageViewCss;
+
+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 RtkMessageView = /*@__PURE__*/ proxyCustomElement(class RtkMessageView extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.onAction = createEvent(this, "action", 7);
+        /** List of actions to show in menu */
+        this.actions = [];
+        /** Appearance */
+        this.variant = 'bubble';
+        /** Render */
+        this.viewType = 'outgoing';
+        /** Hides avatar */
+        this.hideAvatar = false;
+        /** Hides author display label */
+        this.hideAuthorName = false;
+        /** Hides metadata (time) */
+        this.hideMetadata = false;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+    }
+    renderActions() {
+        return (h("rtk-menu", { placement: "top-end", offset: 1 }, h("button", { slot: "trigger", class: "actions" }, h("rtk-icon", { icon: this.iconPack.chevron_down })), h("rtk-menu-list", null, this.actions.map((action) => (h("rtk-menu-item", { onClick: () => this.onAction.emit(action.id) }, action.icon && h("rtk-icon", { icon: action.icon, slot: "start" }), action.label))))));
+    }
+    render() {
+        return (h(Host, { key: 'fb4680e38de79ad40507a542c09d0b02c4691ded' }, h("div", { key: 'f6768fd2ea535e35ad86fc92d7f4595a503fdcca', class: { 'message-wrapper': true, [this.viewType]: true } }, !this.hideAvatar && (h("aside", { key: 'a524e142b020ea1d528ca57f984bb6e725b59893', class: "avatar", part: "avatar" }, h("rtk-avatar", { key: 'ee56623f64d2bb3f74ebea3357eb1af9d67cd3a3', participant: { name: this.authorName, picture: this.avatarUrl }, size: "sm" }))), h("div", { key: 'd6f5bb18ee7aa2ad174cd03c3aee4b9a94c3e63e', class: "message", part: "message" }, !this.hideAuthorName && h("div", { key: '338d4801d1ac9ce6a4dd3676148cac3c70f3b39f', class: "header" }, this.authorName), h("div", { key: '86d147a38d6582979a94536df63213730becc572', class: { body: true, bubble: this.variant === 'bubble' } }, h("slot", { key: '23a3984240643508ef10d3f2c0af5276e4cb5687' }), !this.hideMetadata && !!this.time && (h("div", { key: '35a4884867e5bdd835532f85e3a9575976aa9703', class: "metadata", title: formatDateTime(this.time) }, elapsedDuration(this.time, new Date(Date.now())))), this.actions.length !== 0 && this.renderActions())))));
+    }
+    static get style() { return RtkMessageViewStyle0; }
+}, [1, "rtk-message-view", {
+        "actions": [16],
+        "variant": [1],
+        "viewType": [1, "view-type"],
+        "avatarUrl": [1, "avatar-url"],
+        "hideAvatar": [4, "hide-avatar"],
+        "authorName": [1, "author-name"],
+        "hideAuthorName": [4, "hide-author-name"],
+        "hideMetadata": [4, "hide-metadata"],
+        "time": [16],
+        "iconPack": [16]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkMessageView.prototype, "iconPack", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-message-view", "rtk-avatar", "rtk-icon", "rtk-menu", "rtk-menu-item", "rtk-menu-list", "rtk-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-message-view":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkMessageView);
+            }
+            break;
+        case "rtk-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "rtk-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-menu-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-menu-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkMessageView as R, defineCustomElement as d };

package/dist/components/p-483752a4.js

@@ -0,0 +1,178 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-3bfd5b6d.js';
+import { a as defaultIconPack, c as useLanguage, p as participantIdentifier, h as getAllConnectedParticipants } from './p-53b020e2.js';
+import { S as SyncWithStore } from './p-df6f9a3f.js';
+import { f as formatName, s as shorten } from './p-338c7261.js';
+import { d as defineCustomElement$4 } from './p-6fa3c2fa.js';
+import { d as defineCustomElement$3 } from './p-bed2e1b5.js';
+import { d as defineCustomElement$2 } from './p-efc19d8d.js';
+import { d as defineCustomElement$1 } from './p-bffc1ba5.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-4b5caa33.js

@@ -0,0 +1,125 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-3bfd5b6d.js';
+import { a as defaultIconPack, c as useLanguage } from './p-53b020e2.js';
+import { i as isFullScreenEnabled, r as requestFullScreen, e as exitFullSreen, a as isFullScreenSupported } from './p-02f19345.js';
+import { S as SyncWithStore } from './p-df6f9a3f.js';
+import { d as defineCustomElement$3 } from './p-7ad5bf75.js';
+import { d as defineCustomElement$2 } from './p-bed2e1b5.js';
+import { d as defineCustomElement$1 } from './p-efc19d8d.js';
+
+const rtkFullscreenToggleCss = ":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}:host([data-hidden]){display:none}";
+const RtkFullscreenToggleStyle0 = rtkFullscreenToggleCss;
+
+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 RtkFullscreenToggle = /*@__PURE__*/ proxyCustomElement(class RtkFullscreenToggle extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
+        /** Variant */
+        this.variant = 'button';
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.fullScreenActive = false;
+        this.isFullScreenSupported = true;
+        this.onFullScreenchange = () => {
+            this.fullScreenActive = isFullScreenEnabled();
+        };
+        this.toggleFullScreen = () => {
+            let fullScreenElement = this.targetElement || document.querySelector('rtk-meeting');
+            if (!fullScreenElement)
+                return;
+            if (!this.fullScreenActive) {
+                requestFullScreen(fullScreenElement);
+                this.fullScreenActive = true;
+            }
+            else {
+                exitFullSreen();
+                this.fullScreenActive = false;
+            }
+            this.stateUpdate.emit({ activeMoreMenu: false });
+        };
+    }
+    connectedCallback() {
+        this.isFullScreenSupported = isFullScreenSupported();
+        this.onFullScreenchange();
+        window.addEventListener('webkitfullscreenchange', this.onFullScreenchange);
+        window.addEventListener('fullscreenchange', this.onFullScreenchange);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('webkitfullscreenchange', this.onFullScreenchange);
+        window.removeEventListener('fullscreenchange', this.onFullScreenchange);
+    }
+    render() {
+        if (!this.isFullScreenSupported) {
+            return h(Host, { "data-hidden": true });
+        }
+        return (h(Host, { title: this.t('full_screen') }, h("rtk-controlbar-button", { size: this.size, iconPack: this.iconPack, onClick: this.toggleFullScreen, icon: this.fullScreenActive
+                ? this.iconPack.full_screen_minimize
+                : this.iconPack.full_screen_maximize, label: this.fullScreenActive ? this.t('full_screen.exit') : this.t('full_screen'), variant: this.variant })));
+    }
+    static get style() { return RtkFullscreenToggleStyle0; }
+}, [1, "rtk-fullscreen-toggle", {
+        "states": [16],
+        "targetElement": [16],
+        "variant": [513],
+        "size": [513],
+        "iconPack": [16],
+        "t": [16],
+        "fullScreenActive": [32],
+        "isFullScreenSupported": [32]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkFullscreenToggle.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkFullscreenToggle.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkFullscreenToggle.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkFullscreenToggle.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-fullscreen-toggle", "rtk-controlbar-button", "rtk-icon", "rtk-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-fullscreen-toggle":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkFullscreenToggle);
+            }
+            break;
+        case "rtk-controlbar-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkFullscreenToggle as R, defineCustomElement as d };