@cloudflare/realtimekit-ui 0.0.0 → 0.1.0

package/dist/collection/components/rtk-participant-tile/rtk-participant-tile.js

@@ -0,0 +1,464 @@
+var __decorate = (this && this.__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;
+};
+import { Host, h } from "@stencil/core";
+import { defaultIconPack } from "../../lib/icons";
+import { useLanguage } from "../../lib/lang";
+import { FlagsmithFeatureFlags } from "../../utils/flags";
+import { defaultConfig } from "../../exports";
+import { Render } from "../../lib/render";
+import { SyncWithStore } from "../../utils/sync-with-store";
+/**
+ * A component which plays a participants video and allows for placement
+ * of components like `rtk-name-tag`, `rtk-audio-visualizer` or any other component.
+ */
+export class RtkParticipantTile {
+    constructor() {
+        this.isPinned = false;
+        this.mediaConnectionError = false;
+        /** Position of name tag */
+        this.nameTagPosition = 'bottom-left';
+        /** Whether tile is used for preview */
+        this.isPreview = false;
+        /** Config object */
+        this.config = defaultConfig;
+        /** Variant */
+        this.variant = 'solid';
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.onPinned = ({ isPinned }) => {
+            this.isPinned = isPinned;
+        };
+        this.isSelf = () => { var _a; return this.isPreview || this.participant.id === ((_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self.id); };
+        this.onPause = (event) => {
+            var _a, _b;
+            if (this.isSelf() &&
+                ((_a = this.meeting) === null || _a === void 0 ? void 0 : _a.__internals__.features.hasFeature(FlagsmithFeatureFlags.PLAY_PARTICIPANT_TILE_VIDEO_ON_PAUSE))) {
+                this.meeting.__internals__.logger.warn(`Video player paused for ${this.participant.id} isSelf: ${this.isSelf()}`);
+                // @ts-ignore
+                (_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.play();
+            }
+        };
+        this.onPlaying = () => {
+            if (this.playTimeout)
+                clearTimeout(this.playTimeout);
+        };
+    }
+    onVideoRef(el) {
+        if (!this.participant || !this.meeting || el === this.videoEl)
+            return;
+        this.videoEl = el;
+        this.participant.registerVideoElement(this.videoEl, this.isPreview);
+        this.tileLoad.emit({ participant: this.participant, videoElement: this.videoEl });
+    }
+    connectedCallback() {
+        // set videoState before initial render and initialize listeners
+        if (this.meeting)
+            this.meetingChanged(this.meeting);
+        else
+            this.participantsChanged(this.participant);
+    }
+    disconnectedCallback() {
+        if (this.playTimeout)
+            clearTimeout(this.playTimeout);
+        if (this.participant == null)
+            return;
+        this.participant.deregisterVideoElement(this.videoEl, this.isPreview);
+        this.participant.removeListener('pinned', this.onPinned);
+        this.participant.removeListener('unpinned', this.onPinned);
+        this.meeting.meta.off('mediaConnectionUpdate', this.mediaConnectionUpdateListener);
+        this.tileUnload.emit(this.participant);
+    }
+    meetingChanged(meeting) {
+        if (meeting == undefined)
+            return;
+        this.participantsChanged(this.participant);
+    }
+    participantsChanged(participant) {
+        if (participant == undefined)
+            return;
+        if (this.meeting === undefined) {
+            if (this.isPreview) {
+                this.videoEl && this.participant.registerVideoElement(this.videoEl, this.isPreview);
+            }
+            return;
+        }
+        this.isPinned = participant.isPinned;
+        this.videoEl && this.participant.registerVideoElement(this.videoEl, this.isPreview);
+        participant.addListener('pinned', this.onPinned);
+        participant.addListener('unpinned', this.onPinned);
+        this.meeting.meta.on('mediaConnectionUpdate', this.mediaConnectionUpdateListener.bind(this));
+    }
+    mediaConnectionUpdateListener() {
+        var _a, _b, _c;
+        const { recv: consuming, send: producing } = (_c = (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.mediaState) !== null && _c !== void 0 ? _c : {};
+        if ((consuming === null || consuming === void 0 ? void 0 : consuming.state) !== 'connected' && !this.isSelf()) {
+            this.mediaConnectionError = true;
+        }
+        else if ((producing === null || producing === void 0 ? void 0 : producing.state) !== 'connected' && this.isSelf()) {
+            this.mediaConnectionError = true;
+        }
+        else
+            this.mediaConnectionError = false;
+    }
+    isMirrored() {
+        var _a;
+        if (this.participant != null) {
+            if (this.isSelf()) {
+                const states = this.states;
+                const mirrorVideo = (_a = states === null || states === void 0 ? void 0 : states.prefs) === null || _a === void 0 ? void 0 : _a.mirrorVideo;
+                if (typeof mirrorVideo === 'boolean') {
+                    return mirrorVideo;
+                }
+            }
+        }
+        return false;
+    }
+    render() {
+        var _a, _b, _c;
+        const defaults = {
+            meeting: this.meeting,
+            size: this.size,
+            states: this.states,
+            config: this.config,
+            iconPack: this.iconPack,
+            t: this.t,
+        };
+        return (h(Host, { key: '3e979a21a98a39b061612531ef9bd644d39a983e' }, h("video", { key: '3ba45f4944aafeb8673afc8daa1e15db82ec42b5', ref: (el) => this.onVideoRef(el), class: {
+                mirror: this.isMirrored(),
+                [(_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.videoFit) !== null && _c !== void 0 ? _c : 'cover']: true,
+            }, onPlaying: this.onPlaying, onPause: this.onPause, autoPlay: true, playsInline: true, muted: true, part: "video" }), this.isPinned && (h("rtk-icon", { key: '02ca6b139670e6ac3ac16a24248329a4dc09976d', class: "pinned-icon", icon: this.iconPack.pin, "aria-label": this.t('pinned'), part: "pinned-icon" })), this.mediaConnectionError && (h("div", { key: '5bf2f0b14e7d077b3ebd9bec74291bf746fcf6c9', class: "network-container", part: "network-indicator" }, h("rtk-icon", { key: '32ee83f5d08430273ae0bce3424e2e1a3206419a', class: "network-icon", icon: this.iconPack.disconnected, "aria-label": this.t('pinned'), part: "pinned-icon" }))), h("slot", { key: '781a75e98ff649fb94672cb7ce4f176ef0c1c090' }, h(Render, { key: 'b756c2269429153fbab8dd3c79978d0a2d3a153d', element: "rtk-participant-tile", defaults: defaults, childProps: {
+                participant: this.participant,
+            }, deepProps: true, onlyChildren: true }))));
+    }
+    static get is() { return "rtk-participant-tile"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["rtk-participant-tile.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["rtk-participant-tile.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "nameTagPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'bottom-left'\n    | 'bottom-right'\n    | 'bottom-center'\n    | 'top-left'\n    | 'top-right'\n    | 'top-center'",
+                    "resolved": "\"bottom-center\" | \"bottom-left\" | \"bottom-right\" | \"top-center\" | \"top-left\" | \"top-right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of name tag"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name-tag-position",
+                "reflect": true,
+                "defaultValue": "'bottom-left'"
+            },
+            "isPreview": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether tile is used for preview"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-preview",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "participant": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Peer",
+                    "resolved": "({ readonly id: string; readonly userId: string; readonly name: string; readonly picture: string; readonly isHost: boolean; readonly customParticipantId?: string; readonly clientSpecificId: string; readonly flags: { [key: string]: string | boolean; }; readonly device: DeviceConfig; readonly videoTrack: MediaStreamTrack; readonly audioTrack: MediaStreamTrack; readonly screenShareTracks: { audio: MediaStreamTrack; video: MediaStreamTrack; }; readonly videoEnabled: boolean; readonly audioEnabled: boolean; readonly screenShareEnabled: boolean; readonly producers: ProducerState[]; readonly manualProducerConfig: PeerProducerConfig; readonly supportsRemoteControl: boolean; readonly presetName?: string; readonly stageStatus: StageStatus; readonly setVideoEnabled: (videoEnabled: boolean, emitEvent?: boolean) => void; readonly setAudioEnabled: (audioEnabled: boolean, emitEvent?: boolean) => void; readonly setScreenShareEnabled: (screenShareEnabled: boolean, emitEvent?: boolean) => void; readonly pin: () => Promise<unknown>; readonly unpin: () => Promise<unknown>; readonly setIsPinned: (isPinned: boolean, emitEvent?: boolean) => void; readonly disableAudio: () => Promise<void>; readonly kick: () => Promise<void>; readonly disableVideo: () => Promise<void>; readonly getPermissions: () => Promise<Pick<_dyteinternals_utils.Permissions, \"polls\" | \"plugins\" | \"chat\">>; readonly setStageStatus: (stageStatus: StageStatus) => void; readonly isPinned: boolean; readonly registerVideoElement: (videoElem: HTMLVideoElement) => void; readonly deregisterVideoElement: (videoElem?: HTMLVideoElement) => void; readonly emit: <E extends keyof ParticipantEvents>(event: E, ...args: Parameters<ParticipantEvents[E]>) => boolean; readonly on: <E extends keyof ParticipantEvents>(event: E, callback: ParticipantEvents[E]) => RTKParticipant$1; readonly addListener: <E extends keyof ParticipantEvents>(event: E, callback: ParticipantEvents[E]) => RTKParticipant$1; readonly off: <T extends keyof ParticipantEvents>(event: T, callback: ParticipantEvents[T]) => RTKParticipant$1; readonly once: <T extends keyof ParticipantEvents>(event: T, callback: ParticipantEvents[T]) => RTKParticipant$1; readonly prependListener: <T extends keyof ParticipantEvents>(event: T, callback: ParticipantEvents[T]) => RTKParticipant$1; readonly prependOnceListener: <T extends keyof ParticipantEvents>(event: T, callback: ParticipantEvents[T]) => RTKParticipant$1; readonly removeListener: <T extends keyof ParticipantEvents>(event: T, callback: ParticipantEvents[T]) => RTKParticipant$1; readonly removeAllListeners: <T extends keyof ParticipantEvents>(event?: T) => RTKParticipant$1; readonly listeners: <T extends keyof ParticipantEvents>(event: T) => Function[]; readonly listenerCount: <T extends keyof ParticipantEvents>(event: T) => number; readonly [EventEmitter.captureRejectionSymbol]?: <K>(error: Error, event: string | symbol, ...args: AnyRest) => void; readonly setMaxListeners: (n: number) => RTKParticipant$1; readonly getMaxListeners: () => number; readonly rawListeners: <K>(eventName: string | symbol) => Function[]; readonly eventNames: () => (string | symbol)[]; }) | ({ readonly name: string; readonly picture: string; readonly customParticipantId: string; readonly waitlistStatus: \"rejected\" | \"accepted\" | \"waiting\" | \"none\"; readonly role: any; readonly userId: string; readonly organizationId: string; readonly supportsRemoteControl: boolean; readonly device: DeviceConfig; readonly hidden: boolean; readonly stageStatus: StageStatus; readonly id: string; readonly presetName: string; readonly roomState: leaveRoomState | \"joined\" | \"init\" | \"waitlisted\"; readonly cleanupEvents: () => void; readonly permissions: RTKPermissionsPreset$1; readonly config: RTKThemePreset$1; readonly roomJoined: boolean; readonly setName: (name: string) => void; readonly setupTracks: (options?: { video?: boolean; audio?: boolean; forceReset?: boolean; }) => Promise<void>; readonly destructMediaHandler: () => Promise<void>; readonly removeDocumentEventListeners: () => Promise<void>; readonly enableAudio: () => Promise<void>; readonly enableVideo: () => Promise<void>; readonly updateVideoConstraints: (resolution: VideoQualityConstraints) => Promise<void>; readonly enableScreenShare: () => Promise<void>; readonly updateScreenshareConstraints: (resolution: VideoQualityConstraints) => Promise<void>; readonly disableAudio: () => Promise<void>; readonly disableVideo: () => Promise<void>; readonly disableScreenShare: () => Promise<void>; readonly getAllDevices: () => Promise<InputDeviceInfo[]>; readonly setIsPinned: (isPinned: boolean, emitEvent?: boolean) => void; readonly isPinned: boolean; readonly pin: () => Promise<unknown>; readonly unpin: () => Promise<unknown>; readonly hide: () => Promise<void>; readonly show: () => void; readonly setDevice: (device: MediaDeviceInfo) => Promise<void>; readonly cleanUpTracks: () => void; readonly registerVideoElement: (videoElem: HTMLVideoElement, isPreview?: boolean) => void; readonly deregisterVideoElement: (videoElem?: HTMLVideoElement, isPreview?: boolean) => void; readonly init: (options?: { video?: boolean; audio?: boolean; constraints?: MediaConstraints; }, skipAwaits?: boolean, context?: Context<RTKContextState>) => Promise<void>; readonly audioTrack: MediaStreamTrack; readonly rawAudioTrack: MediaStreamTrack; readonly mediaPermissions: { audio?: MediaPermission$1; video?: MediaPermission$1; screenshare?: MediaPermission$1; }; readonly addAudioMiddleware: (audioMiddleware: AudioMiddleware) => Promise<{ success: boolean; message: string; }>; readonly removeAudioMiddleware: (audioMiddleware: AudioMiddleware) => Promise<{ success: boolean; message: string; }>; readonly removeAllAudioMiddlewares: () => Promise<{ success: boolean; message: string; }>; readonly videoTrack: MediaStreamTrack; readonly rawVideoTrack: MediaStreamTrack; readonly addVideoMiddleware: (videoMiddleware: VideoMiddleware) => Promise<{ success: boolean; message: string; }>; readonly setVideoMiddlewareGlobalConfig: (config?: VideoMiddlewareGlobalConfig) => Promise<void>; readonly removeVideoMiddleware: (videoMiddleware: VideoMiddleware) => Promise<{ success: boolean; message: string; }>; readonly removeAllVideoMiddlewares: () => Promise<{ success: boolean; message: string; }>; readonly screenShareTracks: { audio: MediaStreamTrack; video: MediaStreamTrack; }; readonly audioEnabled: boolean; readonly videoEnabled: boolean; readonly screenShareEnabled: boolean; readonly getCurrentDevices: () => { audio: MediaDeviceInfo; video: MediaDeviceInfo; speaker: MediaDeviceInfo; }; readonly getAudioDevices: () => Promise<MediaDeviceInfo[]>; readonly getVideoDevices: () => Promise<MediaDeviceInfo[]>; readonly getSpeakerDevices: () => Promise<MediaDeviceInfo[]>; readonly getDeviceById: (deviceId: string, kind: \"audio\" | \"video\" | \"speaker\") => Promise<MediaDeviceInfo>; readonly emit: <E extends keyof SelfEvents>(event: E, ...args: Parameters<SelfEvents[E]>) => boolean; readonly on: <E extends keyof SelfEvents>(event: E, callback: SelfEvents[E]) => RTKSelf$1; readonly addListener: <E extends keyof SelfEvents>(event: E, callback: SelfEvents[E]) => RTKSelf$1; readonly off: <T extends keyof SelfEvents>(event: T, callback: SelfEvents[T]) => RTKSelf$1; readonly once: <T extends keyof SelfEvents>(event: T, callback: SelfEvents[T]) => RTKSelf$1; readonly prependListener: <T extends keyof SelfEvents>(event: T, callback: SelfEvents[T]) => RTKSelf$1; readonly prependOnceListener: <T extends keyof SelfEvents>(event: T, callback: SelfEvents[T]) => RTKSelf$1; readonly removeListener: <T extends keyof SelfEvents>(event: T, callback: SelfEvents[T]) => RTKSelf$1; readonly removeAllListeners: <T extends keyof SelfEvents>(event?: T) => RTKSelf$1; readonly listeners: <T extends keyof SelfEvents>(event: T) => Function[]; readonly listenerCount: <T extends keyof SelfEvents>(event: T) => number; readonly [EventEmitter.captureRejectionSymbol]?: <K>(error: Error, event: string | symbol, ...args: AnyRest) => void; readonly setMaxListeners: (n: number) => RTKSelf$1; readonly getMaxListeners: () => number; readonly rawListeners: <K>(eventName: string | symbol) => Function[]; readonly eventNames: () => (string | symbol)[]; })",
+                    "references": {
+                        "Peer": {
+                            "location": "import",
+                            "path": "../../types/rtk-client",
+                            "id": "src/types/rtk-client.ts::Peer"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Participant object"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "meeting": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Meeting",
+                    "resolved": "RealtimeKitClient",
+                    "references": {
+                        "Meeting": {
+                            "location": "import",
+                            "path": "../../types/rtk-client",
+                            "id": "src/types/rtk-client.ts::Meeting"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Meeting object"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "states": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "States",
+                    "resolved": "States",
+                    "references": {
+                        "States": {
+                            "location": "import",
+                            "path": "../../types/props",
+                            "id": "src/types/props.ts::States"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "States object"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "config": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "UIConfig",
+                    "resolved": "UIConfig",
+                    "references": {
+                        "UIConfig": {
+                            "location": "import",
+                            "path": "../../types/ui-config",
+                            "id": "src/types/ui-config/index.ts::UIConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Config object"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "defaultConfig"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'solid' | 'gradient'",
+                    "resolved": "\"gradient\" | \"solid\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variant"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": true,
+                "defaultValue": "'solid'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Size",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\"",
+                    "references": {
+                        "Size": {
+                            "location": "import",
+                            "path": "../../types/props",
+                            "id": "src/types/props.ts::Size"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": true
+            },
+            "iconPack": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconPack",
+                    "resolved": "{ people: string; people_checked: string; chat: string; poll: string; participants: string; rocket: string; call_end: string; share: string; mic_on: string; mic_off: string; video_on: string; video_off: string; share_screen_start: string; share_screen_stop: string; share_screen_person: string; clock: string; dismiss: string; send: string; search: string; more_vertical: string; chevron_down: string; chevron_up: string; chevron_left: string; chevron_right: string; settings: string; wifi: string; speaker: string; speaker_off: string; download: string; full_screen_maximize: string; full_screen_minimize: string; copy: string; attach: string; image: string; emoji_multiple: string; image_off: string; disconnected: string; wand: string; recording: string; subtract: string; stop_recording: string; warning: string; pin: string; pin_off: string; spinner: string; breakout_rooms: string; add: string; shuffle: string; edit: string; delete: string; back: string; save: string; web: string; checkmark: string; spotlight: string; join_stage: string; leave_stage: string; pip_off: string; pip_on: string; signal_1: string; signal_2: string; signal_3: string; signal_4: string; signal_5: string; start_livestream: string; stop_livestream: string; viewers: string; debug: string; info: string; devices: string; horizontal_dots: string; ai_sparkle: string; meeting_ai: string; create_channel: string; create_channel_illustration: string; captionsOn: string; captionsOff: string; play: string; pause: string; fastForward: string; minimize: string; maximize: string; }",
+                    "references": {
+                        "IconPack": {
+                            "location": "import",
+                            "path": "../../lib/icons",
+                            "id": "src/lib/icons/index.ts::IconPack"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon pack"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "defaultIconPack"
+            },
+            "t": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "RtkI18n",
+                    "resolved": "(key: \"pin\" | \"unpin\" | \"kick\" | \"ended\" | \"disconnected\" | \"failed\" | \"(you)\" | \"everyone\" | (string & {}) | \"about_call\" | \"screen\" | \"camera\" | \"leave\" | \"dismiss\" | \"logo\" | \"page\" | \"more\" | \"page.prev\" | \"page.next\" | \"layout\" | \"layout.auto\" | \"settings\" | \"file\" | \"image\" | \"connection\" | \"leave_confirmation\" | \"cancel\" | \"yes\" | \"you\" | \"to\" | \"mute\" | \"pinned\" | \"accept\" | \"pip_on\" | \"pip_off\" | \"viewers\" | \"join\" | \"joined\" | \"create\" | \"close\" | \"ask\" | \"type\" | \"activate\" | \"requests\" | \"mic_off\" | \"disable_mic\" | \"mic_on\" | \"enable_mic\" | \"audio\" | \"test\" | \"minimize\" | \"maximize\" | \"mute_all\" | \"mute_all.description\" | \"mute_all.header\" | \"mute_all.allow_unmute\" | \"video_off\" | \"disable_video\" | \"video_on\" | \"enable_video\" | \"video\" | \"offline\" | \"offline.description\" | \"failed.description\" | \"disconnected.description\" | \"participants\" | \"participants.errors.empty_results\" | \"participants.empty_list\" | \"participants.no_pending_requests\" | \"participants.turn_off_video\" | \"polls\" | \"polls.by\" | \"polls.question\" | \"polls.question.placeholder\" | \"polls.answers\" | \"polls.option\" | \"polls.option.placeholder\" | \"polls.results.anon\" | \"polls.results.hide\" | \"polls.create\" | \"polls.cancel\" | \"polls.empty\" | \"polls.errors.question_required\" | \"polls.errors.empty_option\" | \"screenshare\" | \"screenshare.min_preview\" | \"screenshare.max_preview\" | \"screenshare.shared\" | \"screenshare.start\" | \"screenshare.stop\" | \"screenshare.error.unknown\" | \"screenshare.error.max_count\" | \"plugins\" | \"perm_denied\" | \"perm_denied.audio\" | \"perm_denied.video\" | \"perm_denied.screenshare\" | \"perm_denied.audio.chrome.message\" | \"perm_denied.video.chrome.message\" | \"perm_denied.screenshare.chrome.message\" | \"perm_denied.audio.safari.message\" | \"perm_denied.video.safari.message\" | \"perm_denied.screenshare.safari.message\" | \"perm_denied.audio.edge.message\" | \"perm_denied.video.edge.message\" | \"perm_denied.screenshare.edge.message\" | \"perm_denied.audio.microsoft edge.message\" | \"perm_denied.video.microsoft edge.message\" | \"perm_denied.screenshare.microsoft edge.message\" | \"perm_denied.audio.firefox.message\" | \"perm_denied.video.firefox.message\" | \"perm_denied.screenshare.firefox.message\" | \"perm_denied.audio.others.message\" | \"perm_denied.video.others.message\" | \"perm_denied.screenshare.others.message\" | \"perm_sys_denied\" | \"perm_sys_denied.audio\" | \"perm_sys_denied.video\" | \"perm_sys_denied.screenshare\" | \"perm_sys_denied.audio.macos.message\" | \"perm_sys_denied.video.macos.message\" | \"perm_sys_denied.screenshare.macos.message\" | \"perm_sys_denied.audio.ios.message\" | \"perm_sys_denied.video.ios.message\" | \"perm_sys_denied.screenshare.ios.message\" | \"perm_sys_denied.audio.windows.message\" | \"perm_sys_denied.video.windows.message\" | \"perm_sys_denied.screenshare.windows.message\" | \"perm_sys_denied.audio.android.message\" | \"perm_sys_denied.video.android.message\" | \"perm_sys_denied.screenshare.android.message\" | \"perm_sys_denied.audio.others.message\" | \"perm_sys_denied.video.others.message\" | \"perm_sys_denied.screenshare.others.message\" | \"perm_could_not_start\" | \"perm_could_not_start.audio\" | \"perm_could_not_start.video\" | \"perm_could_not_start.screenshare\" | \"perm_could_not_start.audio.message\" | \"perm_could_not_start.video.message\" | \"perm_could_not_start.screenshare.message\" | \"full_screen\" | \"full_screen.exit\" | \"waitlist.header_title\" | \"waitlist.body_text\" | \"waitlist.deny_request\" | \"waitlist.accept_request\" | \"waitlist.accept_all\" | \"stage_request.header_title\" | \"stage_request.deny_request\" | \"stage_request.accept_request\" | \"stage_request.accept_all\" | \"stage_request.deny_all\" | \"stage_request.approval_pending\" | \"stage_request.denied\" | \"stage_request.request\" | \"stage_request.requested\" | \"stage_request.cancel_request\" | \"stage_request.leave_stage\" | \"stage_request.request_tip\" | \"stage_request.leave_tip\" | \"stage_request.pending_tip\" | \"stage_request.denied_tip\" | \"stage.empty_host\" | \"stage.empty_host_summary\" | \"stage.empty_viewer\" | \"stage.remove_from_stage\" | \"stage.invited_notification\" | \"stage.add_to_stage\" | \"stage.join_title\" | \"stage.join_summary\" | \"stage.join_cancel\" | \"stage.join_confirm\" | \"setup_screen.join_in_as\" | \"setup_screen.joining_as\" | \"setup_screen.your_name\" | \"stage.reconnecting\" | \"recording.label\" | \"recording.indicator\" | \"recording.started\" | \"recording.stopped\" | \"recording.paused\" | \"recording.error.start\" | \"recording.error.stop\" | \"recording.error.resume\" | \"recording.start\" | \"recording.stop\" | \"recording.resume\" | \"recording.starting\" | \"recording.stopping\" | \"recording.loading\" | \"recording.idle\" | \"audio_playback\" | \"audio_playback.title\" | \"audio_playback.description\" | \"breakout_rooms\" | \"breakout_rooms.room_config_header\" | \"breakout_rooms.join_breakout_header\" | \"breakout_rooms.empty\" | \"breakout_rooms.delete\" | \"breakout_rooms.switch\" | \"breakout_rooms.main_room\" | \"breakout_rooms.shuffle_participants\" | \"breakout_rooms.deselect\" | \"breakout_rooms.selected\" | \"breakout_rooms.num_of_rooms\" | \"breakout_rooms.approx\" | \"breakout_rooms.participants_per_room\" | \"breakout_rooms.division_text\" | \"breakout_rooms.start_breakout\" | \"breakout_rooms.close_breakout\" | \"breakout_rooms.update_breakout\" | \"breakout_rooms.discard_changes\" | \"breakout_rooms.room\" | \"breakout_rooms.rooms\" | \"breakout_rooms.room_name\" | \"breakout_rooms.edit_room_name\" | \"breakout_rooms.save_room_name\" | \"breakout_rooms.add_room\" | \"breakout_rooms.add_room_brief\" | \"breakout_rooms.select_all\" | \"breakout_rooms.unassign_all\" | \"breakout_rooms.assign\" | \"breakout_rooms.assign_participants\" | \"breakout_rooms.none_assigned\" | \"breakout_rooms.drag_drop_participants\" | \"breakout_rooms.click_drop_participants\" | \"breakout_rooms.status.assign_multiple\" | \"breakout_rooms.status.select_room\" | \"breakout_rooms.ephemeral_status.participants_assigned\" | \"breakout_rooms.ephemeral_status.participants_assigned_randomly\" | \"breakout_rooms.ephemeral_status.changes_discarded\" | \"breakout_rooms.confirm_modal.start_breakout.header\" | \"breakout_rooms.confirm_modal.start_breakout.content\" | \"breakout_rooms.confirm_modal.start_breakout.cancelText\" | \"breakout_rooms.confirm_modal.start_breakout.ctaText\" | \"breakout_rooms.confirm_modal.close_breakout.header\" | \"breakout_rooms.confirm_modal.close_breakout.content\" | \"breakout_rooms.confirm_modal.close_breakout.ctaText\" | \"breakout_rooms.move_reason.started_msg\" | \"breakout_rooms.move_reason.started_desc\" | \"breakout_rooms.move_reason.closed_msg\" | \"breakout_rooms.move_reason.closed_desc\" | \"breakout_rooms.move_reason.switch_room\" | \"breakout_rooms.move_reason.switch_main_room\" | \"breakout_rooms.all_assigned\" | \"breakout_rooms.empty_main_room\" | \"breakout_rooms.leave_confirmation\" | \"breakout_rooms.leave_confirmation.main_room_btn\" | \"ai\" | \"ai.meeting_ai\" | \"ai.home\" | \"ai.transcriptions\" | \"ai.personal\" | \"ai.caption_view\" | \"ai.chat.tooltip\" | \"ai.chat.summerise\" | \"ai.chat.agenda\" | \"search\" | \"search.could_not_find\" | \"search.empty\" | \"end\" | \"end.all\" | \"ended.rejected\" | \"ended.left\" | \"ended.kicked\" | \"ended.disconnected\" | \"ended.network\" | \"ended.unauthorized\" | \"network\" | \"network.reconnecting\" | \"network.delay_extended\" | \"network.disconnected\" | \"network.leaving\" | \"network.restored\" | \"network.delay\" | \"network.lost\" | \"network.lost_extended\" | \"livestream\" | \"livestream.indicator\" | \"livestream.skip\" | \"livestream.idle\" | \"livestream.starting\" | \"livestream.stopping\" | \"livestream.waiting_on_manual_ingestion\" | \"livestream.error.not_supported\" | \"livestream.error.not_found\" | \"livestream.error.unknown\" | \"livestream.error.sync\" | \"livestream.error.start\" | \"livestream.error.stop\" | \"livestream.go_live\" | \"livestream.end_live\" | \"livestream.error\" | \"cta.help\" | \"cta.continue\" | \"cta.reload\" | \"cta.confirmation\" | \"cta.system_settings\" | \"remote_access.empty\" | \"remote_access.requests\" | \"remote_access.allow\" | \"remote_access.grant\" | \"remote_access.indicator\" | \"chat\" | \"chat.new\" | \"chat.max_limit_warning\" | \"chat.rate_limit_error\" | \"chat.new_channel\" | \"chat.channel_name\" | \"chat.member_name\" | \"chat.add_members\" | \"chat.delete_msg\" | \"chat.edit_msg\" | \"chat.send_msg\" | \"chat.send_attachment\" | \"chat.send_img\" | \"chat.send_file\" | \"chat.send_emoji\" | \"chat.update_msg\" | \"chat.channel_members\" | \"chat.img.loading\" | \"chat.error.img_not_found\" | \"chat.error.empty_results\" | \"chat.img.shared_by\" | \"chat.reply\" | \"chat.message_placeholder\" | \"chat.click_to_send\" | \"chat.search_msgs\" | \"chat.search_conversations\" | \"chat.start_conversation\" | \"chat.empty_search\" | \"chat.empty_channel\" | \"chat.cancel_upload\" | \"chat.view_chats\" | \"chat.everyone\" | \"chat.pinned_msgs\" | \"chat.toggle_pinned_msgs\" | \"date.today\" | \"date.yesteday\" | \"date.sunday\" | \"date.monday\" | \"date.tuesday\" | \"date.wednesday\" | \"date.thursday\" | \"date.friday\" | \"date.saturday\" | \"list.empty\" | \"grid.listening\" | \"transcript.off\" | \"transcript.on\" | \"settings.notification_sound\" | \"settings.microphone_input\" | \"settings.speaker_output\" | \"settings.mirror_video\" | \"settings.camera_off\" | \"dialog.close\" | \"notifications.joined\" | \"notifications.left\" | \"notifications.requesting_to_join_meeting\" | \"notifications.requested_to_join_stage\" | \"notifications.joined_stage\" | \"notifications.request_to_join_accepted\" | \"notifications.request_to_join_rejected\" | \"notifications.accept\" | \"notifications.new_poll_created_by\" | \"notifications.connected_to\" | \"notifications.plugin_switched_to\" | \"notifications.remote_control_requested\" | \"notifications.remote_control_request_sent\" | \"notifications.remote_control_request_accepted\" | \"notifications.remote_control_granted\" | \"notifications.remote_control_terminated\" | \"debugger.troubleshooting.label\" | \"debugger.quality.good\" | \"debugger.quality.average\" | \"debugger.quality.poor\" | \"debugger.stats.bitrate.label\" | \"debugger.stats.bitrate.description\" | \"debugger.stats.packet_loss.label\" | \"debugger.stats.packet_loss.description\" | \"debugger.stats.jitter.label\" | \"debugger.stats.jitter.description\" | \"debugger.stats.cpu_limitations.label\" | \"debugger.stats.cpu_limitations.description\" | \"debugger.stats.bandwidth_limitations.label\" | \"debugger.stats.bandwidth_limitations.description\" | \"debugger.audio.label\" | \"debugger.audio.troubleshooting.label\" | \"debugger.audio.messages.generating_report\" | \"debugger.audio.messages.enable_media\" | \"debugger.audio.sections.network_media\" | \"debugger.video.label\" | \"debugger.video.troubleshooting.label\" | \"debugger.video.messages.generating_report\" | \"debugger.video.messages.enable_media\" | \"debugger.video.sections.network_media\" | \"debugger.screenshare.label\" | \"debugger.screenshare.troubleshooting.label\" | \"debugger.screenshare.sections.network_media\" | \"debugger.screenshare.messages.generating_report\" | \"debugger.screenshare.messages.enable_media\" | \"debugger.system.label\" | \"debugger.system.troubleshooting.label\" | \"debugger.system.sections.battery\" | \"debugger.system.battery.level.label\" | \"debugger.system.battery.level.description\" | \"debugger.system.battery.charging.label\" | \"debugger.system.battery.charging.description\" | \"debugger.system.battery.charging.is_charging\" | \"debugger.system.battery.charging.is_not_charging\") => string",
+                    "references": {
+                        "RtkI18n": {
+                            "location": "import",
+                            "path": "../../lib/lang",
+                            "id": "src/lib/lang/index.ts::RtkI18n"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "useLanguage()"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isPinned": {},
+            "mediaConnectionError": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tileLoad",
+                "name": "tileLoad",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event triggered when tile is loaded"
+                },
+                "complexType": {
+                    "original": "{ participant: Peer; videoElement: HTMLVideoElement }",
+                    "resolved": "{ participant: Peer; videoElement: HTMLVideoElement; }",
+                    "references": {
+                        "Peer": {
+                            "location": "import",
+                            "path": "../../types/rtk-client",
+                            "id": "src/types/rtk-client.ts::Peer"
+                        },
+                        "HTMLVideoElement": {
+                            "location": "global",
+                            "id": "global::HTMLVideoElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "tileUnload",
+                "name": "tileUnload",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event triggered when tile is unloaded"
+                },
+                "complexType": {
+                    "original": "Peer",
+                    "resolved": "({ readonly id: string; readonly userId: string; readonly name: string; readonly picture: string; readonly isHost: boolean; readonly customParticipantId?: string; readonly clientSpecificId: string; readonly flags: { [key: string]: string | boolean; }; readonly device: DeviceConfig; readonly videoTrack: MediaStreamTrack; readonly audioTrack: MediaStreamTrack; readonly screenShareTracks: { audio: MediaStreamTrack; video: MediaStreamTrack; }; readonly videoEnabled: boolean; readonly audioEnabled: boolean; readonly screenShareEnabled: boolean; readonly producers: ProducerState[]; readonly manualProducerConfig: PeerProducerConfig; readonly supportsRemoteControl: boolean; readonly presetName?: string; readonly stageStatus: StageStatus; readonly setVideoEnabled: (videoEnabled: boolean, emitEvent?: boolean) => void; readonly setAudioEnabled: (audioEnabled: boolean, emitEvent?: boolean) => void; readonly setScreenShareEnabled: (screenShareEnabled: boolean, emitEvent?: boolean) => void; readonly pin: () => Promise<unknown>; readonly unpin: () => Promise<unknown>; readonly setIsPinned: (isPinned: boolean, emitEvent?: boolean) => void; readonly disableAudio: () => Promise<void>; readonly kick: () => Promise<void>; readonly disableVideo: () => Promise<void>; readonly getPermissions: () => Promise<Pick<_dyteinternals_utils.Permissions, \"polls\" | \"plugins\" | \"chat\">>; readonly setStageStatus: (stageStatus: StageStatus) => void; readonly isPinned: boolean; readonly registerVideoElement: (videoElem: HTMLVideoElement) => void; readonly deregisterVideoElement: (videoElem?: HTMLVideoElement) => void; readonly emit: <E extends keyof ParticipantEvents>(event: E, ...args: Parameters<ParticipantEvents[E]>) => boolean; readonly on: <E extends keyof ParticipantEvents>(event: E, callback: ParticipantEvents[E]) => RTKParticipant$1; readonly addListener: <E extends keyof ParticipantEvents>(event: E, callback: ParticipantEvents[E]) => RTKParticipant$1; readonly off: <T extends keyof ParticipantEvents>(event: T, callback: ParticipantEvents[T]) => RTKParticipant$1; readonly once: <T extends keyof ParticipantEvents>(event: T, callback: ParticipantEvents[T]) => RTKParticipant$1; readonly prependListener: <T extends keyof ParticipantEvents>(event: T, callback: ParticipantEvents[T]) => RTKParticipant$1; readonly prependOnceListener: <T extends keyof ParticipantEvents>(event: T, callback: ParticipantEvents[T]) => RTKParticipant$1; readonly removeListener: <T extends keyof ParticipantEvents>(event: T, callback: ParticipantEvents[T]) => RTKParticipant$1; readonly removeAllListeners: <T extends keyof ParticipantEvents>(event?: T) => RTKParticipant$1; readonly listeners: <T extends keyof ParticipantEvents>(event: T) => Function[]; readonly listenerCount: <T extends keyof ParticipantEvents>(event: T) => number; readonly [EventEmitter.captureRejectionSymbol]?: <K>(error: Error, event: string | symbol, ...args: AnyRest) => void; readonly setMaxListeners: (n: number) => RTKParticipant$1; readonly getMaxListeners: () => number; readonly rawListeners: <K>(eventName: string | symbol) => Function[]; readonly eventNames: () => (string | symbol)[]; }) | ({ readonly name: string; readonly picture: string; readonly customParticipantId: string; readonly waitlistStatus: \"rejected\" | \"accepted\" | \"waiting\" | \"none\"; readonly role: any; readonly userId: string; readonly organizationId: string; readonly supportsRemoteControl: boolean; readonly device: DeviceConfig; readonly hidden: boolean; readonly stageStatus: StageStatus; readonly id: string; readonly presetName: string; readonly roomState: leaveRoomState | \"joined\" | \"init\" | \"waitlisted\"; readonly cleanupEvents: () => void; readonly permissions: RTKPermissionsPreset$1; readonly config: RTKThemePreset$1; readonly roomJoined: boolean; readonly setName: (name: string) => void; readonly setupTracks: (options?: { video?: boolean; audio?: boolean; forceReset?: boolean; }) => Promise<void>; readonly destructMediaHandler: () => Promise<void>; readonly removeDocumentEventListeners: () => Promise<void>; readonly enableAudio: () => Promise<void>; readonly enableVideo: () => Promise<void>; readonly updateVideoConstraints: (resolution: VideoQualityConstraints) => Promise<void>; readonly enableScreenShare: () => Promise<void>; readonly updateScreenshareConstraints: (resolution: VideoQualityConstraints) => Promise<void>; readonly disableAudio: () => Promise<void>; readonly disableVideo: () => Promise<void>; readonly disableScreenShare: () => Promise<void>; readonly getAllDevices: () => Promise<InputDeviceInfo[]>; readonly setIsPinned: (isPinned: boolean, emitEvent?: boolean) => void; readonly isPinned: boolean; readonly pin: () => Promise<unknown>; readonly unpin: () => Promise<unknown>; readonly hide: () => Promise<void>; readonly show: () => void; readonly setDevice: (device: MediaDeviceInfo) => Promise<void>; readonly cleanUpTracks: () => void; readonly registerVideoElement: (videoElem: HTMLVideoElement, isPreview?: boolean) => void; readonly deregisterVideoElement: (videoElem?: HTMLVideoElement, isPreview?: boolean) => void; readonly init: (options?: { video?: boolean; audio?: boolean; constraints?: MediaConstraints; }, skipAwaits?: boolean, context?: Context<RTKContextState>) => Promise<void>; readonly audioTrack: MediaStreamTrack; readonly rawAudioTrack: MediaStreamTrack; readonly mediaPermissions: { audio?: MediaPermission$1; video?: MediaPermission$1; screenshare?: MediaPermission$1; }; readonly addAudioMiddleware: (audioMiddleware: AudioMiddleware) => Promise<{ success: boolean; message: string; }>; readonly removeAudioMiddleware: (audioMiddleware: AudioMiddleware) => Promise<{ success: boolean; message: string; }>; readonly removeAllAudioMiddlewares: () => Promise<{ success: boolean; message: string; }>; readonly videoTrack: MediaStreamTrack; readonly rawVideoTrack: MediaStreamTrack; readonly addVideoMiddleware: (videoMiddleware: VideoMiddleware) => Promise<{ success: boolean; message: string; }>; readonly setVideoMiddlewareGlobalConfig: (config?: VideoMiddlewareGlobalConfig) => Promise<void>; readonly removeVideoMiddleware: (videoMiddleware: VideoMiddleware) => Promise<{ success: boolean; message: string; }>; readonly removeAllVideoMiddlewares: () => Promise<{ success: boolean; message: string; }>; readonly screenShareTracks: { audio: MediaStreamTrack; video: MediaStreamTrack; }; readonly audioEnabled: boolean; readonly videoEnabled: boolean; readonly screenShareEnabled: boolean; readonly getCurrentDevices: () => { audio: MediaDeviceInfo; video: MediaDeviceInfo; speaker: MediaDeviceInfo; }; readonly getAudioDevices: () => Promise<MediaDeviceInfo[]>; readonly getVideoDevices: () => Promise<MediaDeviceInfo[]>; readonly getSpeakerDevices: () => Promise<MediaDeviceInfo[]>; readonly getDeviceById: (deviceId: string, kind: \"audio\" | \"video\" | \"speaker\") => Promise<MediaDeviceInfo>; readonly emit: <E extends keyof SelfEvents>(event: E, ...args: Parameters<SelfEvents[E]>) => boolean; readonly on: <E extends keyof SelfEvents>(event: E, callback: SelfEvents[E]) => RTKSelf$1; readonly addListener: <E extends keyof SelfEvents>(event: E, callback: SelfEvents[E]) => RTKSelf$1; readonly off: <T extends keyof SelfEvents>(event: T, callback: SelfEvents[T]) => RTKSelf$1; readonly once: <T extends keyof SelfEvents>(event: T, callback: SelfEvents[T]) => RTKSelf$1; readonly prependListener: <T extends keyof SelfEvents>(event: T, callback: SelfEvents[T]) => RTKSelf$1; readonly prependOnceListener: <T extends keyof SelfEvents>(event: T, callback: SelfEvents[T]) => RTKSelf$1; readonly removeListener: <T extends keyof SelfEvents>(event: T, callback: SelfEvents[T]) => RTKSelf$1; readonly removeAllListeners: <T extends keyof SelfEvents>(event?: T) => RTKSelf$1; readonly listeners: <T extends keyof SelfEvents>(event: T) => Function[]; readonly listenerCount: <T extends keyof SelfEvents>(event: T) => number; readonly [EventEmitter.captureRejectionSymbol]?: <K>(error: Error, event: string | symbol, ...args: AnyRest) => void; readonly setMaxListeners: (n: number) => RTKSelf$1; readonly getMaxListeners: () => number; readonly rawListeners: <K>(eventName: string | symbol) => Function[]; readonly eventNames: () => (string | symbol)[]; })",
+                    "references": {
+                        "Peer": {
+                            "location": "import",
+                            "path": "../../types/rtk-client",
+                            "id": "src/types/rtk-client.ts::Peer"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "meeting",
+                "methodName": "meetingChanged"
+            }, {
+                "propName": "participant",
+                "methodName": "participantsChanged"
+            }];
+    }
+}
+__decorate([
+    SyncWithStore()
+], RtkParticipantTile.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantTile.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantTile.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantTile.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantTile.prototype, "t", void 0);

package/dist/collection/components/rtk-participants/rtk-participants.css

@@ -0,0 +1,127 @@
+: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 {
+  /* For Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))
+    var(--rtk-scrollbar-background, transparent);
+}
+
+/* For WebKit */
+.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%;
+  width: 100%;
+  flex-direction: column;
+  font-size: 14px;
+}
+
+input {
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.ctr {
+  margin-top: var(--rtk-space-2, 8px);
+  margin-bottom: var(--rtk-space-2, 8px);
+  box-sizing: border-box;
+  padding-left: var(--rtk-space-3, 12px);
+  padding-right: var(--rtk-space-3, 12px);
+  padding-top: var(--rtk-space-0, 0px);
+  padding-bottom: var(--rtk-space-0, 0px);
+  overflow-y: auto;
+  flex-grow: 1;
+  flex-basis: 0;
+}
+.ctr.virtualised {
+  overflow-y: hidden;
+}
+
+.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-700, 44 44 44) / var(--tw-bg-opacity));
+  margin-left: var(--rtk-space-3, 12px);
+  margin-right: var(--rtk-space-3, 12px);
+  margin-top: var(--rtk-space-0, 0px);
+  margin-bottom: var(--rtk-space-0, 0px);
+}
+
+.search rtk-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;
+  height: var(--rtk-space-9, 36px);
+  width: 100%;
+  padding-right: var(--rtk-space-2, 8px);
+  border-width: var(--rtk-border-width-none, 0);
+  border-style: none;
+  --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));
+  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));
+}
+
+:host([size='md']) .search {
+  margin-top: var(--rtk-space-4, 16px) !important;
+  margin-bottom: var(--rtk-space-4, 16px) !important;
+}
+
+:host([size='sm']) .search {
+  margin-top: var(--rtk-space-4, 16px) !important;
+  margin-bottom: var(--rtk-space-4, 16px) !important;
+}
+.no-pending-requests {
+  margin-top: var(--rtk-space-4, 16px);
+  margin-bottom: var(--rtk-space-4, 16px);
+  text-align: center;
+  font-size: 12px;
+  color: rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));
+}