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

package/dist/components/p-d4e2ac64.js

@@ -1,203 +0,0 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
-import './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-47c25f64.js';
-import { d as defineCustomElement$5 } from './p-f4e75ea9.js';
-import { d as defineCustomElement$4 } from './p-3b29dda1.js';
-import { d as defineCustomElement$3 } from './p-88bef213.js';
-import { d as defineCustomElement$2 } from './p-0a35a909.js';
-import { d as defineCustomElement$1 } from './p-a94b2e67.js';
-import { d as debounce } from './p-1dca17d1.js';
-
-const rtkChannelSelectorViewCss = ".scrollbar {\n  /* For Firefox */\n  scrollbar-width: thin;\n  scrollbar-color: var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent);\n}\n\n/* For WebKit */\n.scrollbar::-webkit-scrollbar {\n  height: var(--rtk-space-1\\.5, 6px);\n  width: var(--rtk-space-1\\.5, 6px);\n  border-radius: 9999px;\n  background-color: var(--rtk-scrollbar-background, transparent);\n}\n\n.scrollbar::-webkit-scrollbar-thumb {\n  border-radius: 9999px;\n  background-color: var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)));\n}\n\n\n:host {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));\n  position: relative;\n  z-index: 10;\n  height: var(--rtk-space-12, 48px);\n  min-height: 48px;\n}\n\n.dropdown-trigger {\n  height: 100%;\n  width: 100%;\n  border-width: var(--rtk-border-width-none, 0);\n  border-style: none;\n  padding: var(--rtk-space-4, 16px);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));\n  font-size: 14px;\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n  cursor: pointer;\n  position: absolute;\n  z-index: 20;\n}\n\n.dropdown-trigger span {\n  display: flex;\n  flex: 1 1 0%;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.dropdown-trigger rtk-icon {\n  margin-left: var(--rtk-space-1, 4px);\n  height: var(--rtk-space-5, 20px);\n  width: var(--rtk-space-5, 20px);\n  flex-shrink: 0;\n}\n\n@container chatcontainer (height < 360px) {\n  .dropdown-trigger {\n    padding: var(--rtk-space-2, 8px);\n  }\n  .dropdown {\n    top: var(--rtk-space-8, 32px) !important;\n  }\n  .search-container {\n    padding-left: var(--rtk-space-0, 0px) !important;\n    padding-right: var(--rtk-space-0, 0px) !important;\n    padding-top: var(--rtk-space-0, 0px) !important;\n    padding-bottom: var(--rtk-space-0, 0px) !important;\n  }\n  input {\n    height: var(--rtk-space-8, 32px) !important;\n    border-radius: var(--rtk-border-radius-none, 0) !important;\n  }\n  .channel {\n    height: var(--rtk-space-8, 32px) !important;\n    border-radius: var(--rtk-border-radius-sm, 4px) !important;\n  }\n  .avatar-icon {\n    height: var(--rtk-space-3, 12px) !important;\n    width: var(--rtk-space-3, 12px) !important;\n    padding: var(--rtk-space-1, 4px) !important;\n  }\n\n  rtk-avatar {\n    height: var(--rtk-space-5, 20px) !important;\n    width: var(--rtk-space-5, 20px) !important;\n  }\n}\n\n.dropdown {\n  position: absolute;\n  width: 100%;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));\n  top: var(--rtk-space-12, 48px);\n  z-index: 10;\n  animation: 0.3s slide-down ease;\n}\n\n.dropdown .channels-container {\n  max-height: var(--rtk-space-80, 320px);\n}\n\n.list {\n  display: flex;\n  flex-direction: column;\n}\n\n.list .channel .channel-data {\n  align-items: flex-start;\n}\n\n.unread-count {\n  display: flex;\n  justify-content: center;\n  height: var(--rtk-space-5, 20px);\n  min-width: var(--rtk-space-3, 12px);\n  border-radius: 9999px;\n  padding-left: var(--rtk-space-1, 4px);\n  padding-right: var(--rtk-space-1, 4px);\n  font-size: 12px;\n  line-height: 1.25rem;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));\n}\n\ninput {\n  height: var(--rtk-space-9, 36px);\n  width: 100%;\n  padding-left: var(--rtk-space-3, 12px);\n  padding-right: var(--rtk-space-3, 12px);\n  box-sizing: border-box;\n  border-width: var(--rtk-border-width-none, 0);\n  border-style: none;\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  border-radius: var(--rtk-border-radius-sm, 4px);\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n}\n\n.search-container {\n  display: flex;\n  flex-shrink: 0;\n  flex-grow: 0;\n  flex-basis: auto;\n  align-items: center;\n  padding-top: var(--rtk-space-3, 12px);\n  padding-bottom: var(--rtk-space-3, 12px);\n  padding-left: var(--rtk-space-2, 8px);\n  padding-right: var(--rtk-space-2, 8px);\n  border-bottom: var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-700, 44 44 44));\n}\n\n.search-container rtk-icon {\n  margin-left: calc(var(--rtk-space-8, 32px) * -1);\n  height: var(--rtk-space-5, 20px);\n  width: var(--rtk-space-5, 20px);\n  color: rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76));\n}\n\n.channels-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rtk-space-1, 4px);\n  padding: var(--rtk-space-2, 8px);\n  flex: 1 1 auto;\n  overflow-y: auto;\n}\n\n.channel {\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border-width: var(--rtk-border-width-none, 0);\n  border-style: none;\n  background-color: transparent;\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  cursor: pointer;\n  border-radius: var(--rtk-border-radius-md, 8px);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--rtk-space-2, 8px);\n  height: var(--rtk-space-16, 64px);\n  width: 100%;\n  padding-left: var(--rtk-space-2, 8px);\n  padding-right: var(--rtk-space-3, 12px);\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.channel:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));\n}\n\n.channel .channel-data {\n  flex: 1 1 0%;\n  align-items: center;\n  justify-content: space-between;\n  display: flex;\n  gap: var(--rtk-space-2, 8px);\n}\n\n.channel .name {\n  font-size: 16px;\n}\n\n.channel .name, \n  .channel .last-message {\n  max-width: var(--rtk-space-40, 160px);\n  text-align: left;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n}\n\n.channel .no-message {\n  font-style: italic;\n}\n\n.channel rtk-avatar {\n  height: var(--rtk-space-12, 48px);\n  width: var(--rtk-space-12, 48px);\n  overflow: clip;\n  border-radius: 9999px;\n  font-size: 14px;\n}\n\n.channel .avatar-icon {\n  height: var(--rtk-space-6, 24px);\n  width: var(--rtk-space-6, 24px);\n  padding: var(--rtk-space-3, 12px);\n  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));\n  overflow: clip;\n  border-radius: 9999px;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n}\n\n.channel time, \n  .channel .last-message {\n  font-size: 12px;\n  color: rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76));\n}\n\n.channel.active {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));\n}\n\n.channel.active .unread-count {\n  background-color: rgb(var(--rtk-colors-text-on-brand-800, var(--rtk-colors-text-800, 255 255 255 / 0.76)));\n  --tw-text-opacity: 1;\n  color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity));\n}\n\n.channel.active time {\n  color: rgb(var(--rtk-colors-text-on-brand-800, var(--rtk-colors-text-800, 255 255 255 / 0.76)));\n}\n\n.channel.active .last-message {\n  color: rgb(var(--rtk-colors-text-on-brand-700, var(--rtk-colors-text-700, 255 255 255 / 0.64)));\n}\n\n.channel.active rtk-avatar {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));\n}\n\n.col {\n  gap: var(--rtk-space-1, 4px);\n  display: flex;\n  flex-direction: column;\n}\n\n.channel-meta {\n  flex-shrink: 0;\n  align-items: flex-end;\n}\n\n@keyframes slide-down {\n  from {\n    transform: translateY(-50px);\n  }\n  to {\n    transform: translateY(0%);\n  }\n}\n";
-const RtkChannelSelectorViewStyle0 = rtkChannelSelectorViewCss;
-
-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 RtkChannelSelectorView = /*@__PURE__*/ proxyCustomElement(class RtkChannelSelectorView extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.channelChange = createEvent(this, "channelChange", 7);
-        /** Disables search bar (default = false) */
-        this.disableSearch = false;
-        /** Hides avatar (default = false) */
-        this.hideAvatar = false;
-        /** Icon Pack */
-        this.iconPack = defaultIconPack;
-        /** Language */
-        this.t = useLanguage();
-        /** Render as dropdown or list (default = list) */
-        this.viewAs = 'list';
-        this.searchQuery = '';
-        this.showDropdown = false;
-        this.calculateListHeight = debounce(() => {
-            if (this.viewAs === 'list' && this.$listEl) {
-                let height = 0;
-                const slotEl = this.$el.shadowRoot.querySelector('slot[name="header"]');
-                if (slotEl) {
-                    slotEl.assignedElements().forEach((e) => (height += e.offsetHeight));
-                }
-                if (this.$searchEl) {
-                    height += this.$searchEl.offsetHeight;
-                }
-                this.$listEl.style.height = `${window.innerHeight - height - 16}px`;
-            }
-        }, 60);
-        this.getFilteredChannels = () => {
-            if (this.searchQuery.trim() === '') {
-                return this.channels;
-            }
-            return this.channels.filter((channel) => {
-                return channel['name'].toLowerCase().includes(this.searchQuery.toLowerCase());
-            });
-        };
-        this.toggleDropdown = () => {
-            this.showDropdown = !this.showDropdown;
-        };
-        this.getChannelById = (id) => {
-            return this.channels.find((channel) => channel.id === id);
-        };
-        this.getTotalUnreads = () => {
-            return this.channels.reduce((acc, curr) => {
-                return acc + curr.unreadCount;
-            }, 0);
-        };
-        this.onChannelClickHandler = (channel) => {
-            this.channelChange.emit(channel);
-            if (this.viewAs === 'dropdown') {
-                this.showDropdown = false;
-            }
-        };
-    }
-    connectedCallback() {
-        this.resizeObserver = new ResizeObserver(this.calculateListHeight);
-    }
-    componentDidLoad() {
-        this.resizeObserver.observe(this.$el);
-        this.calculateListHeight();
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this.calculateListHeight.cancel();
-    }
-    getTimeLabel(messageDate) {
-        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() {
-        const filteredChannels = this.getFilteredChannels();
-        const shouldShowDropdown = this.viewAs === 'list' || (this.viewAs === 'dropdown' && this.showDropdown);
-        return (h(Host, { key: 'adc8ab4b9c8c865998588fbd9766296f18b3e48e' }, this.viewAs === 'list' && h("slot", { key: 'e5740725a4349472ca2eb1fb0816eb2311a99838', name: "header" }), shouldShowDropdown && (h("div", { key: '425adc920c28e0421e07bb0bd9f61b31c42fcda9', class: {
-                dropdown: this.viewAs === 'dropdown',
-                scrollbar: this.viewAs === 'dropdown',
-                list: this.viewAs === 'list',
-            } }, !this.disableSearch && (h("div", { key: '9fbbc48d8489f2a6490729fac1fecdef1838e84a', class: "search-container", ref: (el) => (this.$searchEl = el) }, h("input", { key: 'f7fb43662d50274f80380b735ef9f5fc0b215442', type: "text", placeholder: this.t('chat.search_conversations'), value: this.searchQuery, onInput: (e) => (this.searchQuery = e.target.value) }), h("rtk-icon", { key: 'af76e65a1397d2a6e557a28b687e26aef641c568', icon: this.iconPack.search }))), h("div", { key: '0711a9cfcc811269a5020dc41030c0daee5cc8bf', class: "channels-container scrollbar", ref: (el) => (this.$listEl = el) }, filteredChannels.map((channel) => {
-            return (h("button", { class: { channel: true, active: this.selectedChannelId === channel.id }, onClick: () => this.onChannelClickHandler(channel) }, !this.hideAvatar && (h("div", null, channel.icon ? (h("rtk-icon", { class: "avatar-icon", icon: this.iconPack[channel.icon] })) : (h("rtk-avatar", { participant: {
-                    name: channel.name,
-                    picture: channel.avatarUrl,
-                } })))), h("div", { class: "channel-data" }, h("div", { class: "col" }, h("div", { class: "name" }, channel.name), channel.latestMessage && (h("div", { class: {
-                    'last-message': true,
-                    'no-message': !channel.latestMessage,
-                } }, h("rtk-text-message-view", { isMarkdown: true, text: channel.latestMessage })))), h("div", { class: "col channel-meta" }, channel.latestMessageTime && (h("time", { class: "time" }, this.getTimeLabel(channel.latestMessageTime))), channel.unreadCount > 0 && (h("div", { class: "unread-count" }, channel.unreadCount))))));
-        })))), this.viewAs === 'dropdown' && (h("button", { key: '0c87f90d6d0fe22284995ab7259689f80a862829', class: "dropdown-trigger", onClick: this.toggleDropdown }, h("span", { key: 'd1a364f2c5c57d19702d0b8707ca661c1dc4c14f' }, this.selectedChannelId &&
-            `${this.t('to')} ${this.getChannelById(this.selectedChannelId).name}`, this.getTotalUnreads() > 0 && (h("div", { key: 'bf789f9df82851825bc6ea12a19a5f37ab74aefe', class: "unread-count" }, this.getTotalUnreads()))), h("rtk-icon", { key: 'c0d03f883f4c46b2698be0f197751fc0470717ea', icon: this.showDropdown ? this.iconPack.chevron_up : this.iconPack.chevron_down })))));
-    }
-    get $el() { return this; }
-    static get style() { return RtkChannelSelectorViewStyle0; }
-}, [1, "rtk-channel-selector-view", {
-        "channels": [16],
-        "selectedChannelId": [1, "selected-channel-id"],
-        "disableSearch": [4, "disable-search"],
-        "hideAvatar": [4, "hide-avatar"],
-        "iconPack": [16],
-        "t": [16],
-        "viewAs": [1, "view-as"],
-        "searchQuery": [32],
-        "showDropdown": [32]
-    }]);
-__decorate([
-    SyncWithStore()
-], RtkChannelSelectorView.prototype, "iconPack", void 0);
-__decorate([
-    SyncWithStore()
-], RtkChannelSelectorView.prototype, "t", void 0);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["rtk-channel-selector-view", "rtk-avatar", "rtk-icon", "rtk-markdown-view", "rtk-spinner", "rtk-text-message-view"];
-    components.forEach(tagName => { switch (tagName) {
-        case "rtk-channel-selector-view":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, RtkChannelSelectorView);
-            }
-            break;
-        case "rtk-avatar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "rtk-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "rtk-markdown-view":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "rtk-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "rtk-text-message-view":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { RtkChannelSelectorView as R, defineCustomElement as d };

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

@@ -1,11 +0,0 @@
-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

@@ -1,214 +0,0 @@
-import { p as proxyCustomElement, H, d as createEvent, w as writeTask, f as forceUpdate, h, e as Host } from './p-c3592601.js';
-import { h as useLanguage, e as defaultIconPack } from './p-7fc0dc2f.js';
-import './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-47c25f64.js';
-import { d as defineCustomElement$5 } from './p-f4e75ea9.js';
-import { d as defineCustomElement$4 } from './p-1391bef0.js';
-import { d as defineCustomElement$3 } from './p-3b29dda1.js';
-import { d as defineCustomElement$2 } from './p-0a35a909.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$1 = /*@__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: '5d65768a72c0769857b7d817d0b555d50a5645a5' }, h("header", { key: 'f8826c58072d2ddb73ed61a1813bf62b85cb9bc8' }, this.step === 1 ? this.t('chat.new_channel') : this.t('chat.add_members')), this.step === 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(), h("footer", { key: 'd23db51c427fa67f67cc11514e241d052eb376fe' }, 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 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$1.prototype, "meeting", void 0);
-__decorate([
-    SyncWithStore()
-], RtkChannelCreator$1.prototype, "t", void 0);
-__decorate([
-    SyncWithStore()
-], RtkChannelCreator$1.prototype, "iconPack", void 0);
-function defineCustomElement$1() {
-    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$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 RtkChannelCreator = RtkChannelCreator$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { RtkChannelCreator, defineCustomElement };

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

@@ -1,11 +0,0 @@
-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

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

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

@@ -1,11 +0,0 @@
-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

@@ -1,151 +0,0 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
-import './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-47c25f64.js';
-import { d as defineCustomElement$8 } from './p-f4e75ea9.js';
-import { d as defineCustomElement$7 } from './p-1391bef0.js';
-import { d as defineCustomElement$6 } from './p-adf73364.js';
-import { d as defineCustomElement$5 } from './p-c515acba.js';
-import { d as defineCustomElement$4 } from './p-3b29dda1.js';
-import { d as defineCustomElement$3 } from './p-0a35a909.js';
-import { d as defineCustomElement$2 } from './p-fa8f6b4a.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$1 = /*@__PURE__*/ proxyCustomElement(class RtkChannelHeader extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.search = createEvent(this, "search", 7);
-        this.searchDismissed = createEvent(this, "searchDismissed", 7);
-        this.back = createEvent(this, "back", 7);
-        /** Icon pack */
-        this.iconPack = defaultIconPack;
-        /** Language */
-        this.t = 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 (h("rtk-dialog", { open: true, onRtkDialogClose: () => {
-                this.showChannelDetailsDialog = false;
-            }, iconPack: this.iconPack, t: this.t }, h("rtk-channel-details", { members: this.members, channel: this.channel })));
-    }
-    render() {
-        if (!this.channel) {
-            return null;
-        }
-        return (h(Host, null, this.showChannelDetailsDialog && this.renderChannelDetails(), h("header", { class: {
-                searching: this.showSearchBar,
-            } }, this.showBackButton && (h("rtk-button", { kind: "icon", variant: "secondary", class: "back-btn", onClick: () => {
-                this.back.emit();
-            } }, h("rtk-icon", { icon: this.iconPack.chevron_left }))), h("div", { class: "channel-details" }, h("span", { class: "name" }, this.channel.displayName), !this.channel.isDirectMessage && (h("span", { class: "members" }, this.members.map((member) => member.name).join(', ')))), h("div", { class: "channel-tools" }, !this.channel.isDirectMessage && (h("rtk-tooltip", { label: this.t('chat.channel_members'), variant: "primary" }, h("rtk-button", { kind: "button", variant: "secondary", size: "md", onClick: () => {
-                this.showChannelDetailsDialog = !this.showChannelDetailsDialog;
-            }, class: "br-primary-btn" }, h("rtk-icon", { icon: this.iconPack.people }))))))));
-    }
-    static get watchers() { return {
-        "channel": ["onChannelChanged"]
-    }; }
-    static get style() { return RtkChannelHeaderStyle0; }
-}, [0, "rtk-channel-header", {
-        "meeting": [16],
-        "channel": [16],
-        "iconPack": [16],
-        "t": [16],
-        "showBackButton": [4, "show-back-button"],
-        "showChannelDetailsDialog": [32],
-        "showSearchBar": [32],
-        "members": [32]
-    }, undefined, {
-        "channel": ["onChannelChanged"]
-    }]);
-__decorate([
-    SyncWithStore()
-], RtkChannelHeader$1.prototype, "meeting", void 0);
-__decorate([
-    SyncWithStore()
-], RtkChannelHeader$1.prototype, "iconPack", void 0);
-__decorate([
-    SyncWithStore()
-], RtkChannelHeader$1.prototype, "t", void 0);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["rtk-channel-header", "rtk-avatar", "rtk-button", "rtk-channel-details", "rtk-dialog", "rtk-icon", "rtk-spinner", "rtk-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "rtk-channel-header":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, RtkChannelHeader$1);
-            }
-            break;
-        case "rtk-avatar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "rtk-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "rtk-channel-details":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "rtk-dialog":
-            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 RtkChannelHeader = RtkChannelHeader$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { RtkChannelHeader, defineCustomElement };

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

@@ -1,11 +0,0 @@
-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;