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

package/dist/components/p-63e92eda.js

@@ -0,0 +1,264 @@
+import { p as proxyCustomElement, H, d as createEvent, w as writeTask, h, e as Host } from './p-3bfd5b6d.js';
+import { a as defaultIconPack, c as useLanguage, h as getAllConnectedParticipants, p as participantIdentifier } from './p-53b020e2.js';
+import { f as formatName, s as shorten } from './p-338c7261.js';
+import { S as SyncWithStore } from './p-df6f9a3f.js';
+import { d as defineCustomElement$5 } from './p-6fa3c2fa.js';
+import { d as defineCustomElement$4 } from './p-ba1a0ebf.js';
+import { d as defineCustomElement$3 } from './p-bed2e1b5.js';
+import { d as defineCustomElement$2 } from './p-efc19d8d.js';
+import { d as defineCustomElement$1 } from './p-bffc1ba5.js';
+
+const rtkBreakoutRoomManagerCss = ":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{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));border-radius:var(--rtk-border-radius-sm, 4px)}@keyframes bg-glow{25%{background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / 0.2)}50%{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}75%{background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / 0.2)}}.glowing-card{animation:bg-glow 0.8s}.selector-mode,.assign-mode{display:flex;flex-direction:column;align-items:center;padding:var(--rtk-space-2, 8px);cursor:pointer}.selector:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.show-on-hover{display:none}.header{width:100%;display:flex;align-items:center}.header rtk-icon{margin-left:var(--rtk-space-2, 8px);height:var(--rtk-space-5, 20px);cursor:pointer}.header .danger{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}.header .hide{display:none}.header .rooms-container{display:flex;flex-grow:1;flex-direction:row;align-items:center;justify-content:flex-end}.header input{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));padding:var(--rtk-space-1, 4px);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));max-width:var(--rtk-space-36, 144px);font-size:14px;font-weight:500;border-radius:var(--rtk-border-radius-sm, 4px);border-width:var(--rtk-border-width-none, 0);border-style:none;outline:2px solid transparent;outline-offset:2px;border-bottom-width:var(--rtk-border-width-sm, 1px);border-style:solid;--tw-border-opacity:1;border-bottom-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-border-opacity))}.header input:disabled{overflow-x:visible;border-radius:var(--rtk-border-radius-none, 0);border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent}.header input:invalid{border-bottom-width:var(--rtk-border-width-sm, 1px);border-style:dashed;--tw-border-opacity:1;border-bottom-color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-border-opacity))}.header input.editing-enabled{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}.header .participant-count{display:flex;align-items:center;font-size:14px;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.header .participant-count rtk-icon{margin:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-0\\.5, 2px);width:var(--rtk-space-3, 12px)}.header .assign-button{height:var(--rtk-space-6, 24px);--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity));text-decoration-line:underline}.header .assign-button:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.participant-list{display:grid;flex-grow:1;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--rtk-space-2, 8px);margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);width:100%;border-radius:var(--rtk-border-radius-sm, 4px)}.participant-list::-webkit-scrollbar{width:var(--rtk-space-1\\.5, 6px)}.participant-list::-webkit-scrollbar-thumb{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.participant-list::-webkit-scrollbar-track{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.participant-item{display:flex;align-items:center;justify-content:space-between;margin-right:var(--rtk-space-2, 8px);height:-moz-fit-content;height:fit-content;padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px)}.participant-item:hover{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.selector-mode:hover .show-on-hover{display:flex}.message-container{margin:var(--rtk-space-0, 0px);display:flex;width:100%;padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px)}.message-container p{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-0, 0px);height:var(--rtk-space-20, 80px);display:flex;width:100%;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-sm, 4px);font-size:12px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));border-style:dashed;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity))}.message-container p:hover{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-border-opacity));background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / 0.25)}.message-container .drop-zone-active{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-border-opacity));background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / 0.25)}rtk-icon{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}.show-on-hover{margin-left:var(--rtk-space-4, 16px);height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);display:none}:host(:hover) .show-on-hover{display:flex}.peer-ui-container{position:relative;display:flex;align-items:center;gap:var(--rtk-space-2, 8px);height:var(--rtk-space-10, 40px);cursor:pointer;border-radius:var(--rtk-border-radius-sm, 4px);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.peer-ui-container rtk-avatar{height:var(--rtk-space-7, 28px);width:var(--rtk-space-7, 28px);font-size:14px;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.peer-ui-container .name{font-size:14px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}";
+const RtkBreakoutRoomManagerStyle0 = rtkBreakoutRoomManagerCss;
+
+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 ROOM_TITLE_MIN_CHARS = 3;
+const RtkBreakoutRoomManager = /*@__PURE__*/ proxyCustomElement(class RtkBreakoutRoomManager extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.onParticipantsAdd = createEvent(this, "participantsAdd", 7);
+        this.onParticipantDelete = createEvent(this, "participantDelete", 7);
+        this.onRoomJoin = createEvent(this, "roomJoin", 7);
+        this.deleteRoom = createEvent(this, "delete", 7);
+        this.updateRoom = createEvent(this, "update", 7);
+        /** allow room delete */
+        this.allowDelete = true;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** Drag mode */
+        this.isDragMode = false;
+        /** display expanded card by default */
+        this.defaultExpanded = false;
+        this.editingTitleRoomId = null;
+        this.newTitle = null;
+        this.showExpandedCard = false;
+        this.glowingCard = false;
+        this.permissionsUpdateListener = () => {
+            this.permissions = this.meeting.self.permissions.connectedMeetings;
+        };
+        this.reset = () => {
+            this.editingTitleRoomId = null;
+            this.newTitle = null;
+        };
+        this.onEditClick = () => {
+            if (this.editingTitleRoomId) {
+                if (this.newTitle.length < ROOM_TITLE_MIN_CHARS)
+                    return;
+                this.roomTitle = this.newTitle;
+                this.updateRoom.emit({
+                    title: this.newTitle,
+                    id: this.editingTitleRoomId,
+                });
+                this.glowCard();
+                this.reset();
+            }
+            else {
+                this.editingTitleRoomId = this.room.id;
+                writeTask(() => {
+                    this.inputTextEl.focus();
+                    this.inputTextEl.select();
+                });
+            }
+        };
+        this.onDrop = (e) => {
+            if (e.currentTarget instanceof HTMLParagraphElement) {
+                e.currentTarget.classList.remove('drop-zone-active');
+                this.onAssign();
+            }
+        };
+        this.onDragOver = (e) => {
+            if (e.currentTarget instanceof HTMLParagraphElement) {
+                e.currentTarget.classList.add('drop-zone-active');
+                e.preventDefault();
+            }
+        };
+    }
+    connectedCallback() {
+        var _a;
+        this.allParticipants = getAllConnectedParticipants(this.meeting);
+        this.permissionsUpdateListener();
+        this.showExpandedCard = this.defaultExpanded;
+        this.roomTitle = this.room.isParent ? this.t('breakout_rooms.main_room') : (_a = this.room) === null || _a === void 0 ? void 0 : _a.title;
+        this.canEditMeetingTitle =
+            this.permissions.canAlterConnectedMeetings &&
+                !this.room.isParent &&
+                !this.meeting.connectedMeetings.isActive; // TODO: remove this once socket supports update meetings
+        this.meeting.self.permissions.on('permissionsUpdate', this.permissionsUpdateListener);
+    }
+    disconnectedCallback() {
+        this.meeting.self.permissions.off('permissionsUpdate', this.permissionsUpdateListener);
+    }
+    onDragLeave(e) {
+        if (e.currentTarget instanceof HTMLParagraphElement) {
+            e.currentTarget.classList.remove('drop-zone-active');
+        }
+    }
+    getAssignmentHint() {
+        if (this.assigningParticipants && this.isDragMode) {
+            return this.t('breakout_rooms.drag_drop_participants');
+        }
+        if (this.assigningParticipants) {
+            return this.t('breakout_rooms.click_drop_participants');
+        }
+        if (this.room.participants.length === 0) {
+            return this.t('breakout_rooms.none_assigned');
+        }
+    }
+    toggleCardDisplay() {
+        this.showExpandedCard = !this.showExpandedCard;
+    }
+    glowCard() {
+        this.glowingCard = true;
+        setTimeout(() => {
+            this.glowingCard = false;
+        }, 2000);
+    }
+    onAssign() {
+        this.onParticipantsAdd.emit();
+        this.glowCard();
+    }
+    onJoin() {
+        this.onRoomJoin.emit();
+    }
+    onTitleChanged(e) {
+        if (e.key === 'Enter') {
+            this.newTitle = e.target.value;
+            this.onEditClick();
+        }
+    }
+    renderPeer(participant) {
+        const { displayPictureUrl: picture } = this.allParticipants.find((p) => participantIdentifier(p) === participantIdentifier(participant));
+        const name = formatName(participant.displayName || '');
+        return (h("div", { class: "peer-ui-container" }, h("rtk-avatar", { participant: { name, picture }, size: "sm" }), h("p", { class: "name", title: name }, shorten(name, 16), this.meeting.self.userId === participant.id && ` (${this.t('you')})`)));
+    }
+    renderExpandedCardMaybe() {
+        if (!this.showExpandedCard)
+            return;
+        if (this.room.isParent)
+            return;
+        if (!this.getAssignmentHint())
+            return;
+        if (!this.permissions.canAlterConnectedMeetings)
+            return;
+        return (h("div", { class: "message-container" }, h("p", { class: { 'compact-height': this.room.participants.length !== 0 }, onClick: () => this.onAssign(), onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, this.getAssignmentHint())));
+    }
+    renderParticipantsMaybe() {
+        if (!this.showExpandedCard)
+            return;
+        if (this.room.isParent)
+            return;
+        if (this.room.participants.length === 0)
+            return;
+        return (h("div", { class: "participant-list", onClick: () => {
+                this.onAssign();
+            } }, this.room.participants.map((participant) => (h("div", { class: "participant-item", role: "listitem", key: participant.id }, this.renderPeer(participant), this.permissions.canAlterConnectedMeetings && (h("rtk-icon", { class: "show-on-hover", icon: this.iconPack.dismiss, onClick: () => {
+                this.onParticipantDelete.emit(participant);
+            } })))))));
+    }
+    render() {
+        var _a, _b, _c;
+        return (h(Host, { key: '947ca9b82a497a0ce4274204dd7bcf9949d4e3c8' }, h("div", { key: 'cfd0a32bf1ad9db09edcf479e743292a064ff6e0', class: {
+                'assign-mode': this.assigningParticipants,
+                'selector-mode': !this.assigningParticipants,
+                'glowing-card': this.glowingCard,
+            } }, h("div", { key: 'f96ef6dae36d6368d9651b1b7521b5281390a1c5', class: "header" }, h("input", { key: 'ec5862c36b2a8a23b1a7bd9530418af16d044102', ref: (el) => (this.inputTextEl = el), placeholder: this.t('breakout_rooms.room_name'), disabled: !(this.editingTitleRoomId === this.room.id), value: this.roomTitle, minlength: ROOM_TITLE_MIN_CHARS, onChange: (e) => {
+                this.newTitle = e.target.value;
+            }, onKeyPress: (e) => this.onTitleChanged(e), class: { 'editing-enabled': this.editingTitleRoomId === this.room.id }, style: { width: `${this.roomTitle.length + 1}ch` } }), this.editingTitleRoomId !== this.room.id && (h("span", { key: 'b2abbce8a8b9dd49e2b72fbddd13b09763092aa4', class: "participant-count" }, "(", h("rtk-icon", { key: 'f2075dfaa059be92d5462a614e179449cf4bdf81', icon: this.iconPack.people }), (_c = (_b = (_a = this.room) === null || _a === void 0 ? void 0 : _a.participants) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : '0', ")")), this.canEditMeetingTitle && (h("rtk-tooltip", { key: '2a47492d1c1f24077ad1a861a19bec8a201cea74', label: this.editingTitleRoomId === this.room.id
+                ? this.t('breakout_rooms.save_room_name')
+                : this.t('breakout_rooms.edit_room_name') }, h("rtk-icon", { key: '1211a94dd351b33443fe430f69801cff8bf15765', icon: this.editingTitleRoomId === this.room.id
+                ? this.iconPack.checkmark
+                : this.iconPack.edit, class: "show-on-hover", onClick: this.onEditClick }))), h("div", { key: '5430f371fad9022f4a9a4de2747914958ff1d846', class: "rooms-container" }, this.permissions.canAlterConnectedMeetings &&
+            !this.room.isParent &&
+            this.allowDelete && (h("rtk-tooltip", { key: 'f807c8b6fabc2e85a9e9f023e7ac00ecd555861b', label: this.t('breakout_rooms.delete'), class: "danger" }, h("rtk-icon", { key: '171ba25bd6d0b4b418d719f2eb4555ddc301ee2e', icon: this.iconPack.delete, class: "show-on-hover", onClick: () => {
+                this.deleteRoom.emit();
+            } }))), this.assigningParticipants &&
+            this.permissions.canAlterConnectedMeetings &&
+            !this.room.isParent && (h("rtk-button", { key: '24c2023d3edeb75fdec77a145040741bbe6a90f8', kind: "button", variant: "ghost", class: "assign-button", size: "md", onClick: () => this.onAssign() }, this.t('breakout_rooms.assign'))), this.mode === 'edit' &&
+            !this.assigningParticipants &&
+            this.permissions.canSwitchConnectedMeetings && (h("rtk-button", { key: 'd93e97a19162498f797e9e237105728907eb3b75', kind: "button", variant: "ghost", class: "assign-button", size: "md", disabled: this.room.id === this.meeting.meta.meetingId, onClick: () => this.onJoin() }, this.room.id === this.meeting.meta.meetingId
+            ? this.t('joined')
+            : this.t('join'))), !this.room.isParent && (h("rtk-icon", { key: 'c020a1e894c959580104255ab81c3772af16c862', icon: this.showExpandedCard ? this.iconPack.chevron_up : this.iconPack.chevron_down, onClick: () => this.toggleCardDisplay() })))), this.renderExpandedCardMaybe(), this.renderParticipantsMaybe())));
+    }
+    static get style() { return RtkBreakoutRoomManagerStyle0; }
+}, [1, "rtk-breakout-room-manager", {
+        "meeting": [16],
+        "assigningParticipants": [4, "assigning-participants"],
+        "mode": [1],
+        "states": [16],
+        "allowDelete": [4, "allow-delete"],
+        "iconPack": [16],
+        "t": [16],
+        "isDragMode": [4, "is-drag-mode"],
+        "room": [16],
+        "defaultExpanded": [4, "default-expanded"],
+        "editingTitleRoomId": [32],
+        "newTitle": [32],
+        "showExpandedCard": [32],
+        "glowingCard": [32]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkBreakoutRoomManager.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkBreakoutRoomManager.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkBreakoutRoomManager.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkBreakoutRoomManager.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-breakout-room-manager", "rtk-avatar", "rtk-button", "rtk-icon", "rtk-spinner", "rtk-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-breakout-room-manager":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkBreakoutRoomManager);
+            }
+            break;
+        case "rtk-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkBreakoutRoomManager as R, defineCustomElement as d };

package/dist/components/p-641ba920.js

@@ -0,0 +1,61 @@
+import { p as proxyCustomElement, H, h, e as Host } from './p-3bfd5b6d.js';
+import { a as defaultIconPack, c as useLanguage } from './p-53b020e2.js';
+import { S as SyncWithStore } from './p-df6f9a3f.js';
+
+const rtkMenuItemCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:flex;align-items:center;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px);cursor:pointer;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;color:rgb(var(--rtk-colors-text-1000, 255 255 255));font-size:14px}::slotted([slot='start']){margin-right:var(--rtk-space-2, 8px)}::slotted([slot='end']){margin-left:var(--rtk-space-2, 8px)}:host(:hover){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}:host(.red){--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}";
+const RtkMenuItemStyle0 = rtkMenuItemCss;
+
+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 RtkMenuItem = /*@__PURE__*/ proxyCustomElement(class RtkMenuItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+    }
+    render() {
+        return (h(Host, { key: '16f2f9a4030f6d6b48345af4cfdb3f55c1eee39e' }, h("slot", { key: '82c4020f63a6cbf773ecee8493f3fcc6a61c3c61', name: "start" }), h("slot", { key: '55f0449e84f1833a7ef6ddb2c9d995408f0ddef3' }), h("slot", { key: 'e826a0992e53227fd3fd517bbb2684f34fed3e8c', name: "end" })));
+    }
+    static get style() { return RtkMenuItemStyle0; }
+}, [1, "rtk-menu-item", {
+        "size": [513],
+        "iconPack": [16],
+        "t": [16]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkMenuItem.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkMenuItem.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkMenuItem.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-menu-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-menu-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkMenuItem);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkMenuItem as R, defineCustomElement as d };

package/dist/components/p-6453124f.js

@@ -0,0 +1,211 @@
+import { p as proxyCustomElement, H, d as createEvent, w as writeTask, f as forceUpdate, h, e as Host } from './p-3bfd5b6d.js';
+import { c as useLanguage, a as defaultIconPack } from './p-53b020e2.js';
+import './p-a83ccdbd.js';
+import { S as SyncWithStore } from './p-df6f9a3f.js';
+import { d as defineCustomElement$4 } from './p-6fa3c2fa.js';
+import { d as defineCustomElement$3 } from './p-ba1a0ebf.js';
+import { d as defineCustomElement$2 } from './p-bed2e1b5.js';
+import { d as defineCustomElement$1 } from './p-efc19d8d.js';
+
+const rtkChannelCreatorCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));display:flex;flex-direction:column;width:var(--rtk-space-96, 384px);padding-left:var(--rtk-space-9, 36px);padding-right:var(--rtk-space-9, 36px);padding-top:var(--rtk-space-10, 40px);padding-bottom:var(--rtk-space-10, 40px)}header{margin-bottom:var(--rtk-space-8, 32px);display:flex;align-items:center;gap:var(--rtk-space-2, 8px);font-size:24px;font-weight:600}.channel-name-input{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255));border-radius:var(--rtk-border-radius-sm, 4px);border-width:var(--rtk-border-width-none, 0);border-style:none;padding:var(--rtk-space-3, 12px);font-size:16px;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1.25;outline:2px solid transparent;outline-offset:2px}.channel-name-input:focus{outline-width:2px;outline-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / 0.5)}footer{margin-top:var(--rtk-space-5, 20px);display:flex;justify-content:flex-end}.member{display:flex;align-items:center;gap:var(--rtk-space-1, 4px);padding:var(--rtk-space-2, 8px)}.member rtk-avatar{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px);font-size:14px;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.input-container{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1.25;outline:2px solid transparent;outline-offset:2px;outline-width:2px;outline-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / 0.5);border-radius:var(--rtk-border-radius-sm, 4px)}.input-container .members{margin:var(--rtk-space-0, 0px);max-height:var(--rtk-space-28, 112px);border-radius:var(--rtk-border-radius-sm, 4px);padding:var(--rtk-space-2, 8px);list-style-type:none;display:flex;flex-wrap:wrap;gap:var(--rtk-space-1, 4px);cursor:text;font-size:16px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));overflow-y:auto;min-height:var(--rtk-space-7, 28px)}.input-container .pill{display:flex;align-items:center;gap:var(--rtk-space-1, 4px);border-radius:var(--rtk-border-radius-sm, 4px);padding:var(--rtk-space-2, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.input-container .pill rtk-avatar{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px);font-size:14px;color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.input-container .pill span{max-width:var(--rtk-space-32, 128px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-container .pill rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);cursor:pointer}.input-container input{width:var(--rtk-space-24, 96px);border-radius:var(--rtk-border-radius-sm, 4px);border-width:var(--rtk-border-width-none, 0);border-style:none;padding:var(--rtk-space-1, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255));outline:2px solid transparent;outline-offset:2px;font-size:16px;line-height:1.25rem}.input-container input.wide-input{width:100%}.search-results{margin:var(--rtk-space-0, 0px);margin-top:var(--rtk-space-1, 4px);max-height:var(--rtk-space-28, 112px);width:100%;padding:var(--rtk-space-0, 0px);position:absolute;list-style-type:none;overflow-y:auto;--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-md, 8px);--tw-border-spacing-x:var(--rtk-space-2, 8px);--tw-border-spacing-y:var(--rtk-space-2, 8px);border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);border-style:solid;border-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / 0.5)}.search-results .member{cursor:pointer}.search-results .member rtk-avatar{color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.search-results .member:hover,.search-results .member.selected{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-700, 2 70 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}";
+const RtkChannelCreatorStyle0 = rtkChannelCreatorCss;
+
+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 RtkChannelCreator = /*@__PURE__*/ proxyCustomElement(class RtkChannelCreator extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
+        this.switchChannel = createEvent(this, "switchChannel", 7);
+        /** Language */
+        this.t = useLanguage();
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        this.channelName = '';
+        this.searchQuery = '';
+        this.step = 1;
+        this.loading = false;
+        this.selectedMemberIds = new Set();
+        this.focusedMemberIndex = -1;
+        this.showAllMembersList = false;
+        this.allMembers = new Map();
+        this.inputTextRef = null;
+        this.searchInputTextRef = null;
+        this.focusOnSearch = (selectText = false) => {
+            this.focusedMemberIndex = -1;
+            writeTask(() => {
+                var _a, _b;
+                (_a = this.searchInputTextRef) === null || _a === void 0 ? void 0 : _a.focus();
+                if (selectText)
+                    (_b = this.searchInputTextRef) === null || _b === void 0 ? void 0 : _b.select();
+            });
+        };
+        this.onClickHandler = async () => {
+            if (this.channelName.length === 0)
+                return;
+            if (this.step === 1) {
+                const members = this.meeting.participants.all.toArray();
+                const selfId = this.meeting.self.userId;
+                const nonSelfMembers = members.filter((member) => member.userId !== selfId);
+                nonSelfMembers.forEach((member) => this.allMembers.set(member.userId, member));
+                this.step = 2;
+                this.focusOnSearch();
+                return;
+            }
+            // step 2 - add members and create channel
+            await this.createChannel();
+        };
+        this.createChannel = async () => {
+            const members = Array.from(this.selectedMemberIds);
+            const newChannel = await this.meeting.chat.createChannel(this.channelName, members, {
+                displayPictureUrl: '',
+                visibility: 'public',
+                isDirectMessage: false,
+            });
+            this.switchChannel.emit(newChannel.id);
+            this.stateUpdate.emit({ activeChannelCreator: false });
+        };
+        this.onMemberAdd = (id) => {
+            this.showAllMembersList = false;
+            this.selectedMemberIds.add(id);
+            this.searchQuery = '';
+            this.focusOnSearch();
+        };
+        this.keyDownHandler = (e, filteredMembers) => {
+            if (e.key === 'ArrowDown') {
+                this.focusedMemberIndex = Math.min(this.focusedMemberIndex + 1, filteredMembers.length - 1);
+            }
+            else if (e.key === 'ArrowUp') {
+                if (this.focusedMemberIndex === -1)
+                    return;
+                if (this.focusedMemberIndex === 0) {
+                    this.focusOnSearch(true);
+                    return;
+                }
+                this.focusedMemberIndex = Math.max(this.focusedMemberIndex - 1, 0);
+            }
+            else if (e.key === 'Enter') {
+                this.onMemberAdd(filteredMembers[this.focusedMemberIndex].userId);
+            }
+            else if (e.key === 'Backspace') {
+                if (this.searchQuery.length !== 0)
+                    return;
+                if (this.selectedMemberIds.size === 0)
+                    return;
+                const lastMemberId = Array.from(this.selectedMemberIds.values()).at(-1);
+                this.selectedMemberIds.delete(lastMemberId);
+                forceUpdate(this.$el);
+            }
+        };
+        this.renderMemberSelector = () => {
+            const filteredMembers = Array.from(this.allMembers.values()).filter((member) => !this.selectedMemberIds.has(member.userId) &&
+                member.name.toLowerCase().includes(this.searchQuery.toLowerCase()));
+            const selectedMembers = Array.from(this.selectedMemberIds.values()).map((id) => this.allMembers.get(id));
+            const disableInput = this.selectedMemberIds.size === this.allMembers.size;
+            return (h("div", { class: "input-container" }, h("ul", { class: "members scrollbar", onClick: () => {
+                    var _a;
+                    (_a = this.searchInputTextRef) === null || _a === void 0 ? void 0 : _a.focus();
+                } }, selectedMembers.map((member) => (h("li", { class: "pill" }, h("rtk-avatar", { participant: {
+                    name: member.name,
+                    picture: member.picture,
+                }, size: "sm" }), h("span", null, member.name), h("rtk-icon", { icon: this.iconPack.dismiss, onClick: () => {
+                    this.selectedMemberIds.delete(member.userId);
+                    forceUpdate(this.$el);
+                    this.focusOnSearch();
+                } })))), !disableInput && (h("input", { type: "text", ref: (el) => (this.searchInputTextRef = el), value: this.searchQuery, placeholder: this.selectedMemberIds.size === 0 ? this.t('chat.member_name') : '', class: {
+                    'wide-input': this.selectedMemberIds.size === 0,
+                }, onInput: (e) => {
+                    this.searchQuery = e.target.value.trim();
+                }, onClick: () => {
+                    this.showAllMembersList = !this.showAllMembersList;
+                }, onKeyDown: (e) => this.keyDownHandler(e, filteredMembers) }))), (this.searchQuery.length !== 0 || this.showAllMembersList) && (h("ul", { class: "search-results" }, filteredMembers.map((member, index) => (h("li", { class: { member: true, selected: index === this.focusedMemberIndex }, onClick: () => this.onMemberAdd(member.userId), ref: ($li) => {
+                    if (index === this.focusedMemberIndex) {
+                        writeTask(() => {
+                            if ($li)
+                                $li.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });
+                        });
+                    }
+                } }, h("rtk-avatar", { participant: {
+                    name: member.name,
+                    picture: member.picture,
+                }, size: "sm" }), h("span", null, member.name)))), filteredMembers.length === 0 && (h("li", { class: "member" }, h("span", null, this.t('chat.error.empty_results'))))))));
+        };
+    }
+    componentDidLoad() {
+        var _a;
+        (_a = this.inputTextRef) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    render() {
+        return (h(Host, { key: '343bc1c61f83850b45010bb05ecb17d365345b51' }, h("header", { key: '231b89e21003207dfc890cf2210b6c230fab9390' }, this.step === 1 ? this.t('chat.new_channel') : this.t('chat.add_members')), this.step === 1 && (h("input", { key: '7a822d7fbb6946f866f12039f09159ae2b37f3e2', class: "channel-name-input", type: "text", placeholder: this.t('chat.channel_name'), ref: (el) => (this.inputTextRef = el), onInput: (e) => {
+                this.channelName = e.target.value.trim();
+            } })), this.step === 2 && this.renderMemberSelector(), h("footer", { key: '3de7edf3f52b99ce04e2f977bddaaf85a1243c43' }, h("rtk-button", { key: '601c2634e7e917246987a51e395fd870494727c1', kind: "button", size: "lg", disabled: this.channelName.length === 0, onClick: this.onClickHandler }, this.step === 1 ? this.t('chat.add_members') : this.t('create')))));
+    }
+    get $el() { return this; }
+    static get style() { return RtkChannelCreatorStyle0; }
+}, [1, "rtk-channel-creator", {
+        "meeting": [16],
+        "t": [16],
+        "iconPack": [16],
+        "channelName": [32],
+        "searchQuery": [32],
+        "step": [32],
+        "loading": [32],
+        "selectedMemberIds": [32],
+        "focusedMemberIndex": [32],
+        "showAllMembersList": [32]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkChannelCreator.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChannelCreator.prototype, "t", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChannelCreator.prototype, "iconPack", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-channel-creator", "rtk-avatar", "rtk-button", "rtk-icon", "rtk-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-channel-creator":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkChannelCreator);
+            }
+            break;
+        case "rtk-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkChannelCreator as R, defineCustomElement as d };