@cloudflare/realtimekit-ui 1.1.0-staging.1 → 1.1.0-staging.11

package/dist/types/exports.d.ts

@@ -4,13 +4,14 @@ export { provideRtkDesignSystem } from './utils/provide-design-system';
 export { extendConfig, generateConfig } from './utils/config';
 export { sendNotification } from './utils/notification';
 export { RtkUiBuilder } from './lib/builder';
-export { uiStore, uiState, getInitialStates, createPeerStore } from './utils/sync-with-store/ui-store';
+export { uiStore, uiState, getInitialStates, createPeerStore, } from './utils/sync-with-store/ui-store';
 export { registerAddons, Addon } from './lib/addons';
 export { UIConfig } from './types/ui-config';
 export { States, Notification, Size, UserPreferences, PollObject, PartialStateEvent, } from './types/props';
 export { Peer } from './types/rtk-client';
 export { defaultConfig, createDefaultConfig } from './lib/default-ui-config';
 export { IconPack, defaultIconPack } from './lib/icons';
+export { type Overrides, defaultOverrides } from './lib/overrides';
 export { LangDict, defaultLanguage, RtkI18n, useLanguage } from './lib/lang';
 export { Sound, default as RtkNotificationsAudio } from './lib/notification';
 export { generateChatGroupKey, getChatGroups, getUnreadChatCounts, getParticipantUserId, } from './utils/chat';

package/dist/types/lib/icons/default-icon-pack.d.ts

@@ -75,8 +75,6 @@ declare const _default: {
     horizontal_dots: string;
     ai_sparkle: string;
     meeting_ai: string;
-    create_channel: string;
-    create_channel_illustration: string;
     captionsOn: string;
     captionsOff: string;
     play: string;

package/dist/types/lib/lang/default-language.d.ts

@@ -308,8 +308,6 @@ export declare const defaultLanguage: {
     'chat.new': string;
     'chat.max_limit_warning': string;
     'chat.rate_limit_error': string;
-    'chat.new_channel': string;
-    'chat.channel_name': string;
     'chat.member_name': string;
     'chat.add_members': string;
     'chat.delete_msg': string;
@@ -320,7 +318,6 @@ export declare const defaultLanguage: {
     'chat.send_file': string;
     'chat.send_emoji': string;
     'chat.update_msg': string;
-    'chat.channel_members': string;
     'chat.img.loading': string;
     'chat.error.img_not_found': string;
     'chat.error.empty_results': string;
@@ -332,7 +329,7 @@ export declare const defaultLanguage: {
     'chat.search_conversations': string;
     'chat.start_conversation': string;
     'chat.empty_search': string;
-    'chat.empty_channel': string;
+    'chat.empty_chat': string;
     'chat.cancel_upload': string;
     'chat.view_chats': string;
     'chat.everyone': string;

package/dist/types/lib/overrides.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Initialisation overrides for UI component behavior.
+ * These values are passed through rtk-ui-provider or rtk-meeting
+ * and take effect across all child components.
+ */
+export interface Overrides {
+    /**
+     * Disables the emoji picker button in chat composer.
+     * When true, users cannot insert emojis into chat messages.
+     */
+    disableEmojiPicker?: boolean;
+}
+/**
+ * Default UI Kit Overrides
+ */
+export declare const defaultOverrides: Overrides;

package/dist/types/types/props.d.ts

@@ -2,7 +2,6 @@ import type { ImageMessage, Message } from '@cloudflare/realtimekit';
 import { ButtonVariant } from '../components/rtk-button/rtk-button';
 import { RoomLeftState } from './rtk-client';
 import { LangDict } from '../exports';
-import type { ChatChannel as ChatChannelWebCore } from '@cloudflare/realtimekit';
 import { RtkSidebarSection } from '../components/rtk-sidebar/rtk-sidebar';
 import { IconVariant } from '../components/rtk-icon/rtk-icon';
 import { ParticipantsTabId } from '../components/rtk-participants/rtk-participants';
@@ -73,8 +72,6 @@ export interface States {
         destinationMeetingId?: string;
     };
     activeJoinStage?: boolean;
-    /** @deprecated `activeChannelCreator` is deprecated and will be removed soon. */
-    activeChannelCreator?: boolean;
     image?: ImageMessage;
     prefs?: UserPreferences;
     sidebar?: RtkSidebarSection;
@@ -170,7 +167,6 @@ export type ConnectedMeetingState = {
         participants: ConnectedMeetingParticipant[];
     }[];
 };
-export type ChatChannel = ChatChannelWebCore;
 export interface Middlewares {
     speech?: any;
 }

package/dist/types/utils/chat.d.ts

@@ -1,6 +1,6 @@
 import type { Message } from '@cloudflare/realtimekit';
 import { Peer } from '../types/rtk-client';
-import { ChatChannel, ChatMessage } from '../types/props';
+import { ChatMessage } from '../types/props';
 export declare const parseMessageForTarget: (message: any) => Message;
 export declare function alphabeticalSorter(a: string, b: string): number;
 /**
@@ -27,8 +27,6 @@ export declare function getParticipantUserId({ groupId, selfUserId, }: {
     groupId: string;
     selfUserId: string;
 }): string;
-export declare const TEMPORARY_CHANNEL_PREFIX = "dm__";
-export declare function isDirectMessageChannel(channel: ChatChannel): boolean;
 export declare function getDMComparator(memberIds: string[]): string;
 export declare function reverse(str: string): string;
 export declare const emailPattern: RegExp;

package/dist/types/utils/flags.d.ts

@@ -1,10 +1,8 @@
 import RealtimeKitClient from '@cloudflare/realtimekit';
 export declare const FlagsmithFeatureFlags: {
     PLAY_PARTICIPANT_TILE_VIDEO_ON_PAUSE: string;
-    DISABLE_EMOJI_PICKER: string;
     FEAT_PAGINATED_CHAT: string;
     LOG_PLAYING_FAILURES: string;
-    FEAT_CHANNEL_CHAT: string;
     DISABLE_KICKING: string;
     ADMIN_CANTREMOVE_ADMIN: string;
     CANTINVITE_VIEWER: string;

package/dist/types/utils/sync-with-store/ui-store.d.ts

@@ -4,6 +4,7 @@ import { type RtkI18n } from '../../lib/lang';
 import { type IconPack } from '../../lib/icons';
 import { type States } from '../../types/props';
 import { UIConfig } from '../../exports';
+import { type Overrides } from '../../lib/overrides';
 export declare const getInitialStates: (peerId?: string) => States;
 export interface RtkUiStore {
     meeting: Meeting | undefined | null;
@@ -14,6 +15,7 @@ export interface RtkUiStore {
     peerId: string | null;
     storeType: 'global' | 'peer';
     storeId: string;
+    overrides: Overrides;
 }
 export type RtkUiStoreExtended = ObservableMap<RtkUiStore> & {
     elementsMap: Map<string, HTMLElement[]>;
@@ -21,12 +23,13 @@ export type RtkUiStoreExtended = ObservableMap<RtkUiStore> & {
 declare const uiStore: RtkUiStoreExtended;
 declare const uiState: RtkUiStore;
 export { uiStore, uiState };
-export declare function createPeerStore({ meeting, config, providerId, iconPack, t }: {
+export declare function createPeerStore({ meeting, config, providerId, iconPack, t, overrides, }: {
     meeting: RealtimeKitClient;
     config?: UIConfig;
     providerId: string;
     iconPack: IconPack;
     t: RtkI18n;
+    overrides?: Overrides;
 }): RtkUiStoreExtended;
 declare function appendElement(propName: string, element: HTMLElement, targetStore?: RtkUiStoreExtended): void;
 declare function removeElement(propName: string, element: HTMLElement, targetStore?: RtkUiStoreExtended): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudflare/realtimekit-ui",
-  "version": "1.1.0-staging.1",
+  "version": "1.1.0-staging.11",
   "description": "Pre-built, ready-to-use UI components and utilities for integrating with Cloudflare RealtimeKit",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/cjs/rtk-channel-creator.cjs.entry.js

@@ -1,163 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-1cb28da8.js');
-const index = require('./index-8d07e125.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 = class {
-    constructor(hostRef) {
-        index$1.registerInstance(this, hostRef);
-        this.stateUpdate = index$1.createEvent(this, "rtkStateUpdate", 7);
-        this.switchChannel = index$1.createEvent(this, "switchChannel", 7);
-        /** Language */
-        this.t = uiStore.useLanguage();
-        /** Icon pack */
-        this.iconPack = uiStore.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;
-            index$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);
-                index$1.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 (index$1.h("div", { class: "input-container" }, index$1.h("ul", { class: "members scrollbar", onClick: () => {
-                    var _a;
-                    (_a = this.searchInputTextRef) === null || _a === void 0 ? void 0 : _a.focus();
-                } }, selectedMembers.map((member) => (index$1.h("li", { class: "pill" }, index$1.h("rtk-avatar", { participant: {
-                    name: member.name,
-                    picture: member.picture,
-                }, size: "sm" }), index$1.h("span", null, member.name), index$1.h("rtk-icon", { icon: this.iconPack.dismiss, onClick: () => {
-                    this.selectedMemberIds.delete(member.userId);
-                    index$1.forceUpdate(this.$el);
-                    this.focusOnSearch();
-                } })))), !disableInput && (index$1.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) && (index$1.h("ul", { class: "search-results" }, filteredMembers.map((member, index) => (index$1.h("li", { class: { member: true, selected: index === this.focusedMemberIndex }, onClick: () => this.onMemberAdd(member.userId), ref: ($li) => {
-                    if (index === this.focusedMemberIndex) {
-                        index$1.writeTask(() => {
-                            if ($li)
-                                $li.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });
-                        });
-                    }
-                } }, index$1.h("rtk-avatar", { participant: {
-                    name: member.name,
-                    picture: member.picture,
-                }, size: "sm" }), index$1.h("span", null, member.name)))), filteredMembers.length === 0 && (index$1.h("li", { class: "member" }, index$1.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 (index$1.h(index$1.Host, { key: '5d65768a72c0769857b7d817d0b555d50a5645a5' }, index$1.h("header", { key: 'f8826c58072d2ddb73ed61a1813bf62b85cb9bc8' }, this.step === 1 ? this.t('chat.new_channel') : this.t('chat.add_members')), this.step === 1 && (index$1.h("input", { key: '2bad468b946a896cb28a6206d5650c1b0192f9f9', 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(), index$1.h("footer", { key: 'd23db51c427fa67f67cc11514e241d052eb376fe' }, index$1.h("rtk-button", { key: '5031f53ed0dc632d3e778f0ecaefb0165b74d74d', 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 index$1.getElement(this); }
-};
-__decorate([
-    index.SyncWithStore()
-], RtkChannelCreator.prototype, "meeting", void 0);
-__decorate([
-    index.SyncWithStore()
-], RtkChannelCreator.prototype, "t", void 0);
-__decorate([
-    index.SyncWithStore()
-], RtkChannelCreator.prototype, "iconPack", void 0);
-RtkChannelCreator.style = RtkChannelCreatorStyle0;
-
-exports.rtk_channel_creator = RtkChannelCreator;

package/dist/cjs/rtk-channel-details.cjs.entry.js

@@ -1,49 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-1cb28da8.js');
-const index = require('./index-8d07e125.js');
-
-const rtkChannelDetailsCss = ":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-72, 288px);padding-top:var(--rtk-space-5, 20px);padding-bottom:var(--rtk-space-5, 20px);padding-left:var(--rtk-space-8, 32px);padding-right:var(--rtk-space-8, 32px)}header{font-size:20px}rtk-spinner{margin-top:var(--rtk-space-10, 40px);margin-bottom:var(--rtk-space-10, 40px);margin-left:auto;margin-right:auto}ul{margin-left:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-0, 0px);margin-top:var(--rtk-space-6, 24px);margin-bottom:var(--rtk-space-4, 16px);height:var(--rtk-space-48, 192px);padding:var(--rtk-space-0, 0px);overflow-y:auto;list-style-type:none;display:flex;flex-direction:column;gap:var(--rtk-space-2, 8px)}ul li{margin-right:var(--rtk-space-2, 8px);display:flex;align-items:center;gap:var(--rtk-space-2, 8px);padding:var(--rtk-space-2, 8px);cursor:pointer;border-radius:var(--rtk-border-radius-sm, 4px)}ul li:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}ul li 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))}";
-const RtkChannelDetailsStyle0 = rtkChannelDetailsCss;
-
-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 RtkChannelDetails = class {
-    constructor(hostRef) {
-        index$1.registerInstance(this, hostRef);
-        /** Language */
-        this.t = uiStore.useLanguage();
-        /** Icon pack */
-        this.iconPack = uiStore.defaultIconPack;
-        /** List of channel members */
-        this.members = [];
-    }
-    renderMembers() {
-        return (index$1.h("ul", { class: "scrollbar" }, this.members.map((member) => {
-            return (index$1.h("li", null, index$1.h("rtk-avatar", { participant: { name: member.name, picture: member.picture }, size: "sm" }), index$1.h("span", null, member.name)));
-        })));
-    }
-    render() {
-        return (index$1.h(index$1.Host, { key: 'fd16feaf7e6dff4fbf038073e953c25d3f7b4822' }, index$1.h("header", { key: 'acb5029883e4bd77eadd22d1024cb5a9dfd8247a' }, this.t('chat.channel_members')), this.renderMembers()));
-    }
-};
-__decorate([
-    index.SyncWithStore()
-], RtkChannelDetails.prototype, "t", void 0);
-__decorate([
-    index.SyncWithStore()
-], RtkChannelDetails.prototype, "iconPack", void 0);
-RtkChannelDetails.style = RtkChannelDetailsStyle0;
-
-exports.rtk_channel_details = RtkChannelDetails;

package/dist/cjs/rtk-channel-header.cjs.entry.js

@@ -1,83 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-1cb28da8.js');
-const index = require('./index-8d07e125.js');
-
-const rtkChannelHeaderCss = "header{box-sizing:border-box;height:var(--rtk-space-16, 64px);width:100%;padding:var(--rtk-space-4, 16px);display:flex;justify-content:space-between;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));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))}header.searching{justify-content:flex-end}header.searching .channel-details{display:none}header .channel-details{display:flex;flex-grow:1;flex-direction:column;justify-content:center;height:var(--rtk-space-9, 36px);width:var(--rtk-space-1, 4px)}header .channel-details .name{font-weight:500}header .channel-details .members{margin-top:var(--rtk-space-0\\.5, 2px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}header .channel-tools{display:flex;flex-shrink:0;justify-content:flex-end;gap:var(--rtk-space-1, 4px);min-width:var(--rtk-space-24, 96px)}header .channel-tools rtk-tooltip{height:var(--rtk-space-8, 32px);width:var(--rtk-space-10, 40px);display:flex}header .search-input{height:var(--rtk-space-8, 32px);width:var(--rtk-space-48, 192px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none;outline:2px solid transparent;outline-offset:2px;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));color:rgb(var(--rtk-colors-text-1000, 255 255 255))}header .name{font-size:16px}header .br-primary-btn{background-color:transparent}header .br-primary-btn:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}@media (orientation: landscape) and (min-width: 400px){header.searching .channel-details{display:flex}}.back-btn{margin-right:var(--rtk-space-3, 12px)}";
-const RtkChannelHeaderStyle0 = rtkChannelHeaderCss;
-
-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 RtkChannelHeader = class {
-    constructor(hostRef) {
-        index$1.registerInstance(this, hostRef);
-        this.search = index$1.createEvent(this, "search", 7);
-        this.searchDismissed = index$1.createEvent(this, "searchDismissed", 7);
-        this.back = index$1.createEvent(this, "back", 7);
-        /** Icon pack */
-        this.iconPack = uiStore.defaultIconPack;
-        /** Language */
-        this.t = uiStore.useLanguage();
-        this.showChannelDetailsDialog = false;
-        this.showSearchBar = false;
-        this.members = [];
-        /** Show back button */
-        this.showBackButton = false;
-    }
-    onChannelChanged() {
-        if (this.$searchInput)
-            this.$searchInput.value = '';
-        this.showSearchBar = false;
-        if (!this.channel.isDirectMessage) {
-            this.meeting.chat.getChannelMembers(this.channel.id).then((members) => {
-                this.members = members;
-            });
-        }
-    }
-    connectedCallback() {
-        this.onChannelChanged();
-    }
-    renderChannelDetails() {
-        return (index$1.h("rtk-dialog", { open: true, onRtkDialogClose: () => {
-                this.showChannelDetailsDialog = false;
-            }, iconPack: this.iconPack, t: this.t }, index$1.h("rtk-channel-details", { members: this.members, channel: this.channel })));
-    }
-    render() {
-        if (!this.channel) {
-            return null;
-        }
-        return (index$1.h(index$1.Host, null, this.showChannelDetailsDialog && this.renderChannelDetails(), index$1.h("header", { class: {
-                searching: this.showSearchBar,
-            } }, this.showBackButton && (index$1.h("rtk-button", { kind: "icon", variant: "secondary", class: "back-btn", onClick: () => {
-                this.back.emit();
-            } }, index$1.h("rtk-icon", { icon: this.iconPack.chevron_left }))), index$1.h("div", { class: "channel-details" }, index$1.h("span", { class: "name" }, this.channel.displayName), !this.channel.isDirectMessage && (index$1.h("span", { class: "members" }, this.members.map((member) => member.name).join(', ')))), index$1.h("div", { class: "channel-tools" }, !this.channel.isDirectMessage && (index$1.h("rtk-tooltip", { label: this.t('chat.channel_members'), variant: "primary" }, index$1.h("rtk-button", { kind: "button", variant: "secondary", size: "md", onClick: () => {
-                this.showChannelDetailsDialog = !this.showChannelDetailsDialog;
-            }, class: "br-primary-btn" }, index$1.h("rtk-icon", { icon: this.iconPack.people }))))))));
-    }
-    static get watchers() { return {
-        "channel": ["onChannelChanged"]
-    }; }
-};
-__decorate([
-    index.SyncWithStore()
-], RtkChannelHeader.prototype, "meeting", void 0);
-__decorate([
-    index.SyncWithStore()
-], RtkChannelHeader.prototype, "iconPack", void 0);
-__decorate([
-    index.SyncWithStore()
-], RtkChannelHeader.prototype, "t", void 0);
-RtkChannelHeader.style = RtkChannelHeaderStyle0;
-
-exports.rtk_channel_header = RtkChannelHeader;