@cloudflare/realtimekit-ui 0.0.0 → 0.1.0

package/dist/components/rtk-camera-toggle.js

@@ -0,0 +1,237 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
+import { a as defaultIconPack, c as useLanguage } from './p-9bcf0d04.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { d as defineCustomElement$5 } from './p-24ac331b.js';
+import { d as defineCustomElement$4 } from './p-3d754c34.js';
+import { d as defineCustomElement$3 } from './p-bd20259b.js';
+import { d as defineCustomElement$2 } from './p-4f0299cf.js';
+
+const rtkCameraToggleCss = ":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 RtkCameraToggleStyle0 = rtkCameraToggleCss;
+
+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 RtkCameraToggle$1 = /*@__PURE__*/ proxyCustomElement(class RtkCameraToggle extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
+        this.videoUpdateListener = ({ videoEnabled }) => {
+            this.videoEnabled = videoEnabled;
+        };
+        this.stageStatusListener = () => {
+            this.stageStatus = this.meeting.stage.status;
+            this.canProduceVideo = this.meeting.self.permissions.canProduceVideo === 'ALLOWED';
+        };
+        this.mediaPermissionUpdateListener = ({ kind, message }) => {
+            if (kind === 'video') {
+                this.cameraPermission = message;
+            }
+        };
+        this.meetingPermissionsUpdateListener = (patch) => {
+            var _a;
+            if ((_a = patch === null || patch === void 0 ? void 0 : patch.media) === null || _a === void 0 ? void 0 : _a.video) {
+                this.canProduceVideo = this.meeting.self.permissions.canProduceVideo === 'ALLOWED';
+            }
+        };
+        /** Variant */
+        this.variant = 'button';
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.videoEnabled = false;
+        this.canProduceVideo = false;
+        this.cameraPermission = 'NOT_REQUESTED';
+        this.stageStatus = 'OFF_STAGE';
+        this.toggleCamera = () => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.__internals__.logger.info('rtkCameraToggle::toggleCamera', {
+                media: {
+                    video: {
+                        enabled: Boolean((_c = (_b = this.meeting) === null || _b === void 0 ? void 0 : _b.self) === null || _c === void 0 ? void 0 : _c.videoEnabled),
+                        permission: this.cameraPermission,
+                        canProduce: (_f = (_e = (_d = this.meeting) === null || _d === void 0 ? void 0 : _d.self) === null || _e === void 0 ? void 0 : _e.permissions) === null || _f === void 0 ? void 0 : _f.canProduceVideo,
+                    },
+                },
+                webinar: {
+                    stageStatus: (_g = this.meeting) === null || _g === void 0 ? void 0 : _g.stage.status,
+                },
+                livestream: {
+                    stageStatus: (_j = (_h = this.meeting) === null || _h === void 0 ? void 0 : _h.stage) === null || _j === void 0 ? void 0 : _j.status,
+                },
+                moduleExists: {
+                    self: Boolean((_k = this.meeting) === null || _k === void 0 ? void 0 : _k.self),
+                },
+            });
+            if (this.hasPermissionError()) {
+                const permissionModalSettings = {
+                    enabled: true,
+                    kind: 'video',
+                };
+                this.stateUpdate.emit({ activePermissionsMessage: permissionModalSettings });
+                return false;
+            }
+            const self = (_l = this.meeting) === null || _l === void 0 ? void 0 : _l.self;
+            if (self == null || !this.canProduceVideo) {
+                return;
+            }
+            if (self.videoEnabled) {
+                self.disableVideo();
+            }
+            else {
+                self.enableVideo();
+            }
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self.removeListener('videoUpdate', this.videoUpdateListener);
+        (_b = this.meeting) === null || _b === void 0 ? void 0 : _b.self.removeListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
+        (_d = (_c = this.meeting) === null || _c === void 0 ? void 0 : _c.stage) === null || _d === void 0 ? void 0 : _d.removeListener('stageStatusUpdate', this.stageStatusListener);
+        (_g = (_f = (_e = this.meeting) === null || _e === void 0 ? void 0 : _e.self) === null || _f === void 0 ? void 0 : _f.permissions) === null || _g === void 0 ? void 0 : _g.removeListener('permissionsUpdate', this.meetingPermissionsUpdateListener);
+    }
+    meetingChanged(meeting) {
+        var _a, _b;
+        if (meeting != null) {
+            const { self, stage } = meeting;
+            this.canProduceVideo = this.meeting.self.permissions.canProduceVideo === 'ALLOWED';
+            this.cameraPermission = self.mediaPermissions.video || 'NOT_REQUESTED';
+            this.videoEnabled = self.videoEnabled;
+            this.stageStatus = meeting.stage.status;
+            self.addListener('videoUpdate', this.videoUpdateListener);
+            self.addListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
+            stage === null || stage === void 0 ? void 0 : stage.addListener('stageStatusUpdate', this.stageStatusListener);
+            (_b = (_a = meeting === null || meeting === void 0 ? void 0 : meeting.self) === null || _a === void 0 ? void 0 : _a.permissions) === null || _b === void 0 ? void 0 : _b.addListener('permissionsUpdate', this.meetingPermissionsUpdateListener);
+        }
+    }
+    hasPermissionError() {
+        return this.cameraPermission === 'DENIED' || this.cameraPermission === 'SYSTEM_DENIED';
+    }
+    getState() {
+        let tooltipLabel = '';
+        let label = '';
+        let icon = '';
+        let classList = {};
+        let hasError = this.hasPermissionError();
+        let couldNotStart = this.cameraPermission === 'COULD_NOT_START';
+        if (this.videoEnabled && !hasError) {
+            label = this.t('video_on');
+            icon = this.iconPack.video_on;
+        }
+        else {
+            label = this.t('video_off');
+            icon = this.iconPack.video_off;
+            classList['red-icon'] = true;
+        }
+        if (couldNotStart) {
+            tooltipLabel = this.t('perm_could_not_start.video');
+        }
+        else if (this.cameraPermission === 'SYSTEM_DENIED') {
+            tooltipLabel = this.t('perm_sys_denied.video');
+        }
+        else if (this.cameraPermission === 'DENIED') {
+            tooltipLabel = this.t('perm_denied.video');
+        }
+        else {
+            tooltipLabel = this.videoEnabled ? this.t('disable_video') : this.t('enable_video');
+        }
+        return {
+            tooltipLabel,
+            label,
+            icon,
+            classList,
+            showWarning: hasError || couldNotStart,
+            disable: hasError,
+        };
+    }
+    render() {
+        var _a;
+        if (!this.canProduceVideo ||
+            ((_a = this.meeting) === null || _a === void 0 ? void 0 : _a.meta.viewType) === 'AUDIO_ROOM' ||
+            ['OFF_STAGE', 'REQUESTED_TO_JOIN_STAGE'].includes(this.stageStatus)) {
+            return h(Host, { "data-hidden": true });
+        }
+        const { tooltipLabel, label, icon, classList, showWarning, disable } = this.getState();
+        return (h(Host, { title: label }, h("rtk-tooltip", { kind: "block", label: tooltipLabel, part: "tooltip" }, h("rtk-controlbar-button", { part: "controlbar-button", size: this.size, iconPack: this.iconPack, class: classList, variant: this.variant, label: label, icon: icon, onClick: this.toggleCamera, showWarning: showWarning, disabled: disable }))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+    static get style() { return RtkCameraToggleStyle0; }
+}, [1, "rtk-camera-toggle", {
+        "variant": [513],
+        "meeting": [16],
+        "size": [513],
+        "iconPack": [16],
+        "t": [16],
+        "videoEnabled": [32],
+        "canProduceVideo": [32],
+        "cameraPermission": [32],
+        "stageStatus": [32]
+    }, undefined, {
+        "meeting": ["meetingChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkCameraToggle$1.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkCameraToggle$1.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkCameraToggle$1.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkCameraToggle$1.prototype, "t", void 0);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-camera-toggle", "rtk-controlbar-button", "rtk-icon", "rtk-spinner", "rtk-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-camera-toggle":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkCameraToggle$1);
+            }
+            break;
+        case "rtk-controlbar-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const RtkCameraToggle = RtkCameraToggle$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { RtkCameraToggle, defineCustomElement };

package/dist/components/rtk-caption-toggle.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RtkCaptionToggle extends Components.RtkCaptionToggle, HTMLElement {}
+export const RtkCaptionToggle: {
+    prototype: RtkCaptionToggle;
+    new (): RtkCaptionToggle;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/rtk-caption-toggle.js

@@ -0,0 +1,129 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
+import { d as defaultConfig, a as defaultIconPack, c as useLanguage } from './p-9bcf0d04.js';
+import './p-a83ccdbd.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { d as defineCustomElement$4 } from './p-24ac331b.js';
+import { d as defineCustomElement$3 } from './p-3d754c34.js';
+import { d as defineCustomElement$2 } from './p-bd20259b.js';
+
+const rtkCaptionToggleCss = ":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}";
+const RtkCaptionToggleStyle0 = rtkCaptionToggleCss;
+
+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 RtkCaptionToggle$1 = /*@__PURE__*/ proxyCustomElement(class RtkCaptionToggle extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
+        /** Variant */
+        this.variant = 'button';
+        /** Config */
+        this.config = defaultConfig;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.captionEnabled = false;
+        this.permissionsUpdateListener = () => {
+            var _a;
+            this.captionEnabled =
+                (_a = this.meeting.self.permissions.transcriptionEnabled) !== null && _a !== void 0 ? _a : false;
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    meetingChanged(meeting) {
+        if (meeting === null)
+            return;
+        this.permissionsUpdateListener();
+        this.meeting.self.permissions.addListener('permissionsUpdate', this.permissionsUpdateListener);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self.permissions.removeListener('permissionsUpdate', this.permissionsUpdateListener);
+    }
+    toggleCaptions() {
+        this.stateUpdate.emit({ activeCaptions: !this.states.activeCaptions, activeMoreMenu: false });
+    }
+    render() {
+        if (!this.captionEnabled)
+            return null;
+        const captionsEnabled = this.states.activeCaptions;
+        return (h(Host, { tabIndex: 0, role: "log", "aria-label": `Picture-in-Picture mode` }, h("rtk-controlbar-button", { part: "controlbar-button", size: this.size, iconPack: this.iconPack, onClick: () => this.toggleCaptions(), icon: captionsEnabled ? this.iconPack.captionsOff : this.iconPack.captionsOn, label: captionsEnabled ? this.t('transcript.off') : this.t('transcript.on'), variant: this.variant })));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+    static get style() { return RtkCaptionToggleStyle0; }
+}, [1, "rtk-caption-toggle", {
+        "variant": [513],
+        "meeting": [16],
+        "states": [16],
+        "config": [16],
+        "iconPack": [16],
+        "size": [513],
+        "t": [16],
+        "captionEnabled": [32]
+    }, undefined, {
+        "meeting": ["meetingChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkCaptionToggle$1.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkCaptionToggle$1.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkCaptionToggle$1.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkCaptionToggle$1.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkCaptionToggle$1.prototype, "t", void 0);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-caption-toggle", "rtk-controlbar-button", "rtk-icon", "rtk-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-caption-toggle":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkCaptionToggle$1);
+            }
+            break;
+        case "rtk-controlbar-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;
+    } });
+}
+defineCustomElement$1();
+
+const RtkCaptionToggle = RtkCaptionToggle$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { RtkCaptionToggle, defineCustomElement };

package/dist/components/rtk-channel-creator.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RtkChannelCreator extends Components.RtkChannelCreator, HTMLElement {}
+export const RtkChannelCreator: {
+    prototype: RtkChannelCreator;
+    new (): RtkChannelCreator;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/rtk-channel-creator.js

@@ -0,0 +1,6 @@
+import { R as RtkChannelCreator$1, d as defineCustomElement$1 } from './p-736ab8a0.js';
+
+const RtkChannelCreator = RtkChannelCreator$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { RtkChannelCreator, defineCustomElement };

package/dist/components/rtk-channel-details.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RtkChannelDetails extends Components.RtkChannelDetails, HTMLElement {}
+export const RtkChannelDetails: {
+    prototype: RtkChannelDetails;
+    new (): RtkChannelDetails;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/rtk-channel-details.js

@@ -0,0 +1,6 @@
+import { R as RtkChannelDetails$1, d as defineCustomElement$1 } from './p-400d8f0d.js';
+
+const RtkChannelDetails = RtkChannelDetails$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { RtkChannelDetails, defineCustomElement };

package/dist/components/rtk-channel-header.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RtkChannelHeader extends Components.RtkChannelHeader, HTMLElement {}
+export const RtkChannelHeader: {
+    prototype: RtkChannelHeader;
+    new (): RtkChannelHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/rtk-channel-header.js

@@ -0,0 +1,6 @@
+import { R as RtkChannelHeader$1, d as defineCustomElement$1 } from './p-ee490919.js';
+
+const RtkChannelHeader = RtkChannelHeader$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { RtkChannelHeader, defineCustomElement };

package/dist/components/rtk-channel-selector-ui.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RtkChannelSelectorUi extends Components.RtkChannelSelectorUi, HTMLElement {}
+export const RtkChannelSelectorUi: {
+    prototype: RtkChannelSelectorUi;
+    new (): RtkChannelSelectorUi;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/rtk-channel-selector-ui.js

@@ -0,0 +1,194 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
+import { a as defaultIconPack, c as useLanguage } from './p-9bcf0d04.js';
+import './p-a83ccdbd.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { T as TextMessageView } from './p-a2f4f9e3.js';
+import { d as defineCustomElement$5 } from './p-2f10ccec.js';
+import { d as defineCustomElement$4 } from './p-92a1602c.js';
+import { d as defineCustomElement$3 } from './p-3d754c34.js';
+import { d as defineCustomElement$2 } from './p-bd20259b.js';
+
+const rtkChannelSelectorUiCss = ".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}.container{display:flex;height:100%;width:var(--rtk-space-96, 384px);flex-direction:column;position:absolute;--tw-translate-x:calc(var(--rtk-space-96, 384px) * -1);transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));border-top-width:var(--rtk-border-width-none, 0);border-bottom-width:var(--rtk-border-width-none, 0);border-right-width:var(--rtk-border-width-sm, 1px);border-left-width:var(--rtk-border-width-none, 0);border-style:solid;--tw-border-opacity:1;border-right-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-border-opacity));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}@keyframes fade{0%{opacity:0}100%{opacity:1}}.overlay-container{width:100vw;--tw-translate-x:var(--rtk-space-96, 384px);transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;animation:fade 0.8s}.overlay-container .sidebar-btn{position:static;padding:var(--rtk-space-4, 16px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.sidebar-btn{position:absolute;right:calc(var(--rtk-space-9, 36px) * -1);top:var(--rtk-space-4, 16px);height:var(--rtk-space-8, 32px);width:var(--rtk-space-7, 28px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));border-radius:var(--rtk-border-radius-sm, 4px)}@media (orientation: landscape) and (min-width: 400px){.container{position:static;--tw-translate-x:var(--rtk-space-0, 0px);transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.sidebar-btn,.overlay-container{display:none}}.search-wrapper{display:flex;align-items:center;gap:var(--rtk-space-2, 8px);padding:var(--rtk-space-2, 8px);border-left-width:var(--rtk-border-width-none, 0);border-right-width:var(--rtk-border-width-none, 0);border-bottom-width:var(--rtk-border-width-sm, 1px);border-top-width:var(--rtk-border-width-none, 0);border-style:solid;--tw-border-opacity:1;border-bottom-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-border-opacity))}.search{position:sticky;box-sizing:border-box;display:flex;align-items:center;border-radius:var(--rtk-border-radius-sm, 4px);margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-0, 0px);height:var(--rtk-space-8, 32px);width:100%}.search .search-icon{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px);padding:var(--rtk-space-2, 8px);--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-600, 255 255 255 / 0.52));border-top-right-radius:var(--rtk-border-radius-sm, 4px);border-bottom-right-radius:var(--rtk-border-radius-sm, 4px)}.search input{box-sizing:border-box;width:100%;padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px);padding-left:var(--rtk-space-2, 8px);--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));border-width:var(--rtk-border-width-none, 0);border-style:none;outline:2px solid transparent;outline-offset:2px;font-size:14px;line-height:1.25rem}.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))}.search input{border-top-left-radius:var(--rtk-border-radius-sm, 4px);border-bottom-left-radius:var(--rtk-border-radius-sm, 4px)}.channel-container{box-sizing:border-box;display:flex;flex-direction:column;padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px);overflow-y:scroll}.channel-container .channel{display:flex;align-items:center;justify-content:space-between;gap:var(--rtk-space-2, 8px);padding:var(--rtk-space-0, 0px);border-left-width:var(--rtk-border-width-none, 0);border-right-width:var(--rtk-border-width-none, 0);border-bottom-width:var(--rtk-border-width-sm, 1px);border-top-width:var(--rtk-border-width-none, 0);border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-border-opacity))}.channel-container .channel:hover{cursor:pointer;--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-900, var(--rtk-colors-text-900, 255 255 255 / 0.88)))}.channel-container .channel:hover .latest-msg-time,.channel-container .channel:hover .latest-msg,.channel-container .channel:hover .latest-msg.new{color:rgb(var(--rtk-colors-text-on-brand-700, var(--rtk-colors-text-700, 255 255 255 / 0.64)))}.channel-container .channel-display{display:flex;gap:var(--rtk-space-2, 8px);align-self:center;padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-0, 0px)}.channel-container .channel-display rtk-avatar{height:var(--rtk-space-9, 36px);width:var(--rtk-space-9, 36px);flex-shrink:0;font-size:12px}.channel-container .channel-display rtk-icon{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px);flex-shrink:0;padding:var(--rtk-space-2, 8px);border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.channel-container .channel-card{width:100%;padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);padding-left:var(--rtk-space-1, 4px)}.channel-container .channel-card .channel-name{max-width:var(--rtk-space-60, 240px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500}.channel-container .channel-card .latest-msg{margin:var(--rtk-space-0, 0px);max-width:var(--rtk-space-56, 224px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.channel-container .channel-card .latest-msg.new{font-weight:200;font-style:italic;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.channel-container .channel-card .latest-msg-time{font-size:12px;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.channel-container .channel-meta{width:var(--rtk-space-12, 48px);display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:var(--rtk-space-1\\.5, 6px);font-size:12px;font-weight:600}.channel-container .new-msgs-count{height:var(--rtk-space-4, 16px);min-width:var(--rtk-space-4, 16px);padding-top:1px;padding-bottom:1px;padding-left:2px;padding-right:2px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-success, 98 165 4) / 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-sm, 4px);text-align:center;font-size:12px}.channel-container .selected{--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-900, var(--rtk-colors-text-900, 255 255 255 / 0.88)))}.channel-container .selected .latest-msg-time,.channel-container .selected .latest-msg,.channel-container .selected .latest-msg.new{color:rgb(var(--rtk-colors-text-on-brand-700, var(--rtk-colors-text-700, 255 255 255 / 0.64)))}.channel-container .highlight .channel-title span{font-weight:700}.latest-msg p{margin:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-1, 4px);display:inline-block}.latest-msg blockquote{display:none}.recent-message-row{margin-bottom:var(--rtk-space-2, 8px);display:flex;width:100%;flex-direction:row;justify-content:space-between}";
+const RtkChannelSelectorUiStyle0 = rtkChannelSelectorUiCss;
+
+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 RtkChannelSelectorUi$1 = /*@__PURE__*/ proxyCustomElement(class RtkChannelSelectorUi extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.channelChanged = createEvent(this, "channelChanged", 7);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** show recent message in channel */
+        this.showRecentMessage = false;
+        this.isHidden = false;
+        this.searchQuery = '';
+        this.handleResize = (e) => {
+            this.isHidden = !e.matches;
+        };
+        this.channelSelected = (channelId) => {
+            this.channelChanged.emit(channelId);
+            this.onRevealClicked();
+        };
+        this.onSearchInput = (e) => {
+            this.searchQuery = e.target.value;
+        };
+        this.onRevealClicked = () => {
+            if (this.matchMedia.matches)
+                return;
+            this.isHidden = !this.isHidden;
+        };
+        this.renderChannelDisplayPic = (channel) => {
+            const hasDisplayPic = channel.displayPictureUrl && channel.displayPictureUrl.length !== 0;
+            if (channel.isDirectMessage || hasDisplayPic) {
+                return (h("div", { class: "channel-display" }, h("rtk-avatar", { participant: {
+                        name: channel.displayName,
+                        picture: channel.displayPictureUrl,
+                    } })));
+            }
+            else {
+                return (h("div", { class: "channel-display" }, h("rtk-icon", { icon: this.iconPack.people, slot: "start" })));
+            }
+        };
+        this.renderRecentMessage = (channel) => {
+            if (!channel.latestMessage)
+                return h("p", { class: "latest-msg new" }, this.t('chat.start_conversation'));
+            let senderFragment = channel.isDirectMessage ? '' : `${channel.latestMessage.displayName}: `;
+            if (channel.latestMessage.type === 'text') {
+                return (h("p", { class: "latest-msg" }, senderFragment, h(TextMessageView, { message: channel.latestMessage.message })));
+            }
+            // non text
+            let messageFragment = '';
+            if (channel.latestMessage.type === 'image') {
+                messageFragment = this.t('image');
+            }
+            else if (channel.latestMessage.type === 'file') {
+                messageFragment = this.t('file');
+            }
+            return h("p", { class: "latest-msg" }, `${senderFragment}${messageFragment}`);
+        };
+    }
+    connectedCallback() {
+        this.matchMedia = window.matchMedia(`(orientation: landscape) and (min-width: 400px)`);
+        this.matchMedia.addEventListener('change', this.handleResize);
+        this.isHidden = !this.matchMedia.matches;
+    }
+    disconnectedCallback() {
+        this.matchMedia.removeEventListener('change', this.handleResize);
+    }
+    componentDidRender() {
+        this.$el.style.transform = this.isHidden ? 'translateX(-380px)' : 'translateX(0)';
+    }
+    getTimeLabel(message) {
+        const messageDate = message.time;
+        const today = new Date();
+        const yesterday = new Date(today);
+        yesterday.setDate(today.getDate() - 1);
+        const firstDayOfWeek = new Date(today);
+        firstDayOfWeek.setDate(today.getDate() - today.getDay() - 1);
+        if (messageDate.toDateString() === today.toDateString()) {
+            return messageDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        }
+        else if (messageDate.toDateString() === yesterday.toDateString()) {
+            return this.t('date.yesteday');
+        }
+        else if (messageDate > firstDayOfWeek) {
+            const weekdays = [
+                'date.sunday',
+                'date.monday',
+                'date.tuesday',
+                'date.wednesday',
+                'date.thursday',
+                'date.friday',
+                'date.saturday',
+            ];
+            return this.t(weekdays[messageDate.getDay()]);
+        }
+        else {
+            return Intl.DateTimeFormat([], {
+                day: '2-digit',
+                month: '2-digit',
+                year: '2-digit',
+            }).format(messageDate);
+        }
+    }
+    render() {
+        return (h(Host, { key: 'b6684ad536955380fd011a8db8ed74508ce5c4e2' }, h("div", { key: '0b9bd04166de85df7043026fe6f80d8980d09fd8', class: "container", ref: (el) => (this.$el = el) }, this.isHidden && (h("rtk-button", { key: '5b2af8c992ae39a097db0c6bcb79f73720c0baf6', kind: "icon", variant: "ghost", size: "md", onClick: this.onRevealClicked, class: "sidebar-btn" }, h("rtk-icon", { key: '0713628a2ab34e4c7dbc8bf15a760331e0a4501b', icon: this.isHidden ? this.iconPack.chevron_left : this.iconPack.dismiss }))), h("slot", { key: 'cba2cb4ec34adb4c852362af9aa6feef0c4f11b7', name: "header" }), h("div", { key: 'ca23085817b6b0ca7bcd7cbe87d5788bc3b091d6', class: "search-wrapper" }, h("div", { key: 'ac28f333fb7625024441c06039c86a651bf31a51', class: "search" }, h("input", { key: '34f1a069108d1610209bdc902afd40f168fd24a0', type: "search", autocomplete: "off", placeholder: this.t('chat.search_conversations'), onInput: this.onSearchInput }), h("rtk-icon", { key: '479b07ba42bbd7825e33f59efb4da26301553616', icon: this.iconPack.search, class: "search-icon" }))), h("div", { key: '4f97ff09587ab50ad957e6748ee31673f9097564', class: "channel-container scrollbar", role: "list" }, this.channels
+            .filter((channel) => this.searchQuery === '' || channel.displayName.includes(this.searchQuery))
+            .map((channel) => {
+            return (h("div", { class: {
+                    channel: true,
+                    selected: channel.id === this.selectedChannelId,
+                    highlight: !!channel.unreadCount,
+                }, role: "listitem", onClick: () => {
+                    this.channelSelected(channel.id);
+                } }, this.renderChannelDisplayPic(channel), h("div", { class: "channel-card", "is-direct-message": channel.isDirectMessage }, h("div", { class: 'recent-message-row' }, h("span", { class: "channel-name" }, channel.displayName), channel.latestMessage && (h("span", { class: "latest-msg-time" }, this.getTimeLabel(channel.latestMessage)))), h("div", { class: 'recent-message-row' }, this.renderRecentMessage(channel), channel.unreadCount > 0 && channel.id !== this.selectedChannelId ? (h("span", { class: "new-msgs-count" }, channel.unreadCount < 99 ? channel.unreadCount : '99+')) : null))));
+        }))), !this.isHidden && (h("div", { key: 'dbf1235ca2393f7978906cbbcd2530ea38801157', class: "overlay-container" }, h("rtk-button", { key: 'd2a37c163f32a251597ee8dd1332c48bacad1883', kind: "icon", variant: "ghost", size: "md", onClick: this.onRevealClicked, class: "sidebar-btn" }, h("rtk-icon", { key: 'a13daad18a52bd8846dba2bbeab753d0a060463e', icon: this.isHidden ? this.iconPack.chevron_left : this.iconPack.dismiss }))))));
+    }
+    static get style() { return RtkChannelSelectorUiStyle0; }
+}, [1, "rtk-channel-selector-ui", {
+        "channels": [16],
+        "selectedChannelId": [1, "selected-channel-id"],
+        "iconPack": [16],
+        "t": [16],
+        "showRecentMessage": [4, "show-recent-message"],
+        "isHidden": [32],
+        "searchQuery": [32]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkChannelSelectorUi$1.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChannelSelectorUi$1.prototype, "t", void 0);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-channel-selector-ui", "rtk-avatar", "rtk-button", "rtk-icon", "rtk-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-channel-selector-ui":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkChannelSelectorUi$1);
+            }
+            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;
+    } });
+}
+defineCustomElement$1();
+
+const RtkChannelSelectorUi = RtkChannelSelectorUi$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { RtkChannelSelectorUi, defineCustomElement };