@cloudflare/realtimekit-ui 0.0.0 → 0.1.0

package/dist/components/p-11a9a3ec.js

@@ -0,0 +1,81 @@
+import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
+import { C as ChatHead } from './p-febe3ebc.js';
+import { a as sanitizeLink } from './p-338c7261.js';
+import { a as defaultIconPack, c as useLanguage } from './p-9bcf0d04.js';
+import { g as getExtension, a as getFileSize, d as downloadFile } from './p-9fc565cf.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { d as defineCustomElement$2 } from './p-92a1602c.js';
+import { d as defineCustomElement$1 } from './p-3d754c34.js';
+
+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 RtkFileMessage = /*@__PURE__*/ proxyCustomElement(class RtkFileMessage extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        /** Date object of now, to calculate distance between dates */
+        this.now = new Date();
+        /** Whether the message is continued by same user */
+        this.isContinued = false;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** show message in bubble */
+        this.showBubble = false;
+    }
+    render() {
+        const link = sanitizeLink(this.message.link);
+        return (h(Host, { key: '25ff2cd29b951ffee9fb266ec4937258db527ef4' }, !this.isContinued && (h(ChatHead, { key: '50dc45f56ac2837215619c597f557c0e71e5fd85', name: this.message.displayName, time: this.message.time, now: this.now })), h("div", { key: '5b300ea679f835b6d7421568dde80aa38cbbc821', class: {
+                body: true,
+                bubble: this.showBubble,
+            }, part: "body" }, h("div", { key: '895f033df99c8d9dfc1241bbaf5f20137b905395', class: "file" }, h("div", { key: '345bd0370a81c50c1ef46fa7119fa321213ad741', class: "file-data" }, h("div", { key: 'fb30c6c130af584d2f4294029c4304e213ddd339', class: "name" }, this.message.name), h("div", { key: 'd0de234e1697b196fe248bbfbad18109b59c20df', class: "file-data-split" }, h("div", { key: '635343bd7dbcbfeea1a7534c943be355decf20c4', class: "ext" }, getExtension(this.message.name)), h("span", { key: 'bd7772e273ae55297c99d8564cfa44e6dd1b43d0', class: "divider" }), h("div", { key: 'd6df3a4fca8932d3bcdeb805ef7b3bed1c3e8c15', class: "size" }, getFileSize(this.message.size)))), h("rtk-button", { key: '4b4d9be6f228e5deda5590f2aa6038b3501623d7', variant: "secondary", kind: "icon", onClick: () => downloadFile(link, { name: this.message.name, fallbackName: 'file' }), part: "button" }, h("rtk-icon", { key: '187e0b8f903bd7cd8b5f9e25ef2d6841299fe87f', icon: this.iconPack.download }))))));
+    }
+}, [0, "rtk-file-message", {
+        "message": [16],
+        "now": [16],
+        "isContinued": [516, "is-continued"],
+        "iconPack": [16],
+        "t": [16],
+        "showBubble": [4, "show-bubble"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkFileMessage.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkFileMessage.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-file-message", "rtk-button", "rtk-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-file-message":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkFileMessage);
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkFileMessage as R, defineCustomElement as d };

package/dist/components/p-132d39f6.js

@@ -0,0 +1,131 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
+import { d as defaultConfig, a as defaultIconPack, c as useLanguage } from './p-9bcf0d04.js';
+import { f as formatName, s as shorten } from './p-338c7261.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { d as defineCustomElement$4 } from './p-92a1602c.js';
+import { d as defineCustomElement$3 } from './p-3d754c34.js';
+import { d as defineCustomElement$2 } from './p-b1f57d50.js';
+import { d as defineCustomElement$1 } from './p-4f0299cf.js';
+
+const rtkTabBarCss = ".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{box-sizing:border-box;display:flex;height:100%;width:var(--rtk-space-16, 64px);flex-direction:column;gap:var(--rtk-space-2, 8px);overflow-y:auto;font-family:var(--rtk-font-family, sans-serif)}rtk-button{z-index:10}.col{display:flex;flex-direction:column;align-items:center}.tab{display:flex;height:var(--rtk-space-16, 64px);width:var(--rtk-space-16, 64px);align-items:center;justify-content:center;margin-bottom:var(--rtk-space-2, 8px);font-size:12px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}.tab.active{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity))}.tab img{height:var(--rtk-space-7, 28px);width:var(--rtk-space-7, 28px);border-radius:var(--rtk-border-radius-sm, 4px)}.tab .name{margin-top:var(--rtk-space-0\\.5, 2px)}:host([size='sm']){flex-direction:column;margin-top:var(--rtk-space-4, 16px);height:var(--rtk-space-16, 64px);width:100%;flex-direction:row;gap:var(--rtk-space-2, 8px);overflow-x:auto}:host([size='sm']) .tab{margin:var(--rtk-space-0, 0px);text-overflow:clip;min-width:100px;height:40px}:host([size='sm']) .tab .col{display:flex;flex-direction:row;align-items:center;gap:var(--rtk-space-2, 8px)}:host([size='sm']) .tab .col img,:host([size='sm']) .tab .col rtk-icon{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}:host([size='sm']) .tab .col .name{gap:var(--rtk-space-1, 4px)}:host([layout='column']){flex-direction:column}:host([layout='column']) .aside{flex:2;max-width:100%;width:100%}@media (orientation: portrait){:host([size='sm']){margin-top:var(--rtk-space-2, 8px);height:var(--rtk-space-16, 64px);width:100%;flex-direction:row;transition:all 0.3s linear}:host([size='md']){height:var(--rtk-space-24, 96px);width:100%;flex-direction:row;transition:all 0.3s linear}:host .tab{margin:var(--rtk-space-0, 0px)}}@media (orientation: landscape){:host([size='sm']){margin-right:var(--rtk-space-4, 16px);height:100%;width:var(--rtk-space-14, 56px);flex-direction:row;gap:var(--rtk-space-2, 8px);overflow-y:auto;overflow-x:hidden;transition:all 0.3s linear}:host([size='md']){margin-right:var(--rtk-space-4, 16px);height:100%;width:var(--rtk-space-14, 56px);flex-direction:row;gap:var(--rtk-space-2, 8px);overflow-y:auto;overflow-x:hidden;transition:all 0.3s linear}:host .tab{margin:var(--rtk-space-0, 0px)}:host([size='sm']) .tab{margin:var(--rtk-space-0, 0px);width:100%;text-overflow:clip;min-width:0px;min-height:40px}:host([size='sm']) .tab .col{display:flex;flex-direction:column;align-items:center;gap:var(--rtk-space-2, 8px);font-size:10px}:host([size='sm']) .tab .col img,:host([size='sm']) .tab .col rtk-icon{height:var(--rtk-space-3, 12px);width:var(--rtk-space-3, 12px)}:host([size='sm']) .tab .col .name{gap:var(--rtk-space-1, 4px)}}";
+const RtkTabBarStyle0 = rtkTabBarCss;
+
+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 RtkTabBar = /*@__PURE__*/ proxyCustomElement(class RtkTabBar extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.tabChange = createEvent(this, "tabChange", 7);
+        /** UI Config */
+        this.config = defaultConfig;
+        /** Grid Layout */
+        this.layout = 'row';
+        /** Icon Pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** Tabs */
+        this.tabs = [];
+    }
+    render() {
+        return (h(Host, { key: 'd80fd5c45bdae491e9bfe398f7ba9d7ede356e02' }, h("rtk-spotlight-indicator", { key: '17d7a10e6d34c0b89fe5b7b5270eb24116e1c237', meeting: this.meeting, iconPack: this.iconPack, t: this.t, size: this.size }), this.tabs.map((tab) => {
+            var _a, _b, _c, _d, _e;
+            let isActive = false;
+            if (((_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.type) === 'plugin' &&
+                tab.plugin &&
+                ((_b = this.activeTab) === null || _b === void 0 ? void 0 : _b.plugin.id) === tab.plugin.id)
+                isActive = true;
+            else if (((_c = this.activeTab) === null || _c === void 0 ? void 0 : _c.type) === 'screenshare' &&
+                tab.participant &&
+                ((_d = this.activeTab) === null || _d === void 0 ? void 0 : _d.participant.id) === tab.participant.id)
+                isActive = true;
+            if (tab.type === 'screenshare') {
+                const participant = tab.participant;
+                const name = formatName(participant.name);
+                return (h("rtk-button", { title: `${name}'s Screen Share`, key: tab.participant.id, kind: "icon", variant: isActive ? 'primary' : 'secondary', class: {
+                        tab: true,
+                        active: isActive,
+                    }, onClick: () => this.tabChange.emit(tab) }, h("div", { class: "center col" }, h("rtk-icon", { icon: this.iconPack.share_screen_person }), h("span", { class: "name" }, participant.id === ((_e = this.meeting) === null || _e === void 0 ? void 0 : _e.self.id) ? this.t('you') : shorten(name, 6)))));
+            }
+            else if (tab.type === 'plugin') {
+                const plugin = tab.plugin;
+                return (h("rtk-button", { title: plugin.name, key: plugin.id, kind: "icon", variant: isActive ? 'primary' : 'secondary', class: {
+                        tab: true,
+                        active: isActive,
+                    }, onClick: () => this.tabChange.emit(tab) }, h("div", { class: "center col" }, h("img", { src: plugin.picture }), h("span", { class: "name" }, shorten(plugin.name, 6)))));
+            }
+        })));
+    }
+    static get style() { return RtkTabBarStyle0; }
+}, [1, "rtk-tab-bar", {
+        "size": [513],
+        "meeting": [16],
+        "states": [16],
+        "config": [16],
+        "layout": [513],
+        "iconPack": [16],
+        "t": [16],
+        "activeTab": [16],
+        "tabs": [16]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkTabBar.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkTabBar.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkTabBar.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkTabBar.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkTabBar.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-tab-bar", "rtk-button", "rtk-icon", "rtk-spotlight-indicator", "rtk-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-tab-bar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkTabBar);
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-spotlight-indicator":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkTabBar as R, defineCustomElement as d };

package/dist/components/p-18164a2e.js

@@ -0,0 +1,114 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
+import { f as formatDateTime, e as elapsedDuration } from './p-382270d8.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { a as defaultIconPack } from './p-9bcf0d04.js';
+import './p-a83ccdbd.js';
+import { d as defineCustomElement$6 } from './p-2f10ccec.js';
+import { d as defineCustomElement$5 } from './p-3d754c34.js';
+import { d as defineCustomElement$4 } from './p-2283539e.js';
+import { d as defineCustomElement$3 } from './p-a5737efc.js';
+import { d as defineCustomElement$2 } from './p-96d5823f.js';
+import { d as defineCustomElement$1 } from './p-bd20259b.js';
+
+const rtkMessageViewCss = ":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)))}.message-wrapper{display:flex;flex-direction:row-reverse;gap:var(--rtk-space-2, 8px)}.message-wrapper.incoming{flex-direction:row}.message{display:flex;flex-direction:column}.header{margin-bottom:var(--rtk-space-1, 4px);align-self:flex-end;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));font-size:14px;font-weight:600}.incoming .header{align-self:flex-start}.body{display:flex;flex-direction:column;min-width:var(--rtk-space-24, 96px);font-family:var(--rtk-font-family, sans-serif);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));font-size:14px;line-height:1.375;position:relative}.body .metadata{margin-top:var(--rtk-space-2, 8px);align-self:flex-end;font-size:10px}.bubble{max-width:var(--rtk-space-96, 384px);padding:var(--rtk-space-2, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));border-radius:var(--rtk-border-radius-md, 8px)}.incoming .bubble{--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-900, 255 255 255 / 0.88))}.avatar{display:none}rtk-menu{position:absolute;right:var(--rtk-space-0, 0px);top:var(--rtk-space-0, 0px);border-radius:var(--rtk-border-radius-lg, 12px)}rtk-menu rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);cursor:pointer}.actions{display:flex;align-items:center;justify-content:center;padding-left:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px);padding-top:var(--rtk-space-1, 4px);padding-right:var(--rtk-space-1, 4px);border-radius:var(--rtk-border-radius-md, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none;background:radial-gradient(\n    at top right,\n    rgb(var(--rtk-colors-brand-300, 73 124 253)) 60%,\n    rgba(255, 255, 255, 0) 80%\n  )}.actions rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.incoming .actions{background:radial-gradient(\n      at top right,\n      rgb(var(--rtk-colors-background-800, 30 30 30)) 60%,\n      rgba(255, 255, 255, 0) 80%\n    )}.incoming .actions rtk-icon{color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.incoming rtk-avatar{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}@media (min-width: 400px){.avatar{display:flex;width:var(--rtk-space-6, 24px)}.avatar rtk-avatar{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);font-size:10px;overflow:clip;border-radius:9999px}}@media (hover: hover){rtk-menu{visibility:hidden}.body:hover rtk-menu{visibility:visible}}";
+const RtkMessageViewStyle0 = rtkMessageViewCss;
+
+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 RtkMessageView = /*@__PURE__*/ proxyCustomElement(class RtkMessageView extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.onAction = createEvent(this, "action", 7);
+        /** List of actions to show in menu */
+        this.actions = [];
+        /** Appearance */
+        this.variant = 'bubble';
+        /** Render */
+        this.viewType = 'outgoing';
+        /** Hides avatar */
+        this.hideAvatar = false;
+        /** Hides author display label */
+        this.hideAuthorName = false;
+        /** Hides metadata (time) */
+        this.hideMetadata = false;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+    }
+    renderActions() {
+        return (h("rtk-menu", { placement: "top-end", offset: 1 }, h("button", { slot: "trigger", class: "actions" }, h("rtk-icon", { icon: this.iconPack.chevron_down })), h("rtk-menu-list", null, this.actions.map((action) => (h("rtk-menu-item", { onClick: () => this.onAction.emit(action.id) }, action.icon && h("rtk-icon", { icon: action.icon, slot: "start" }), action.label))))));
+    }
+    render() {
+        return (h(Host, { key: 'fb4680e38de79ad40507a542c09d0b02c4691ded' }, h("div", { key: 'f6768fd2ea535e35ad86fc92d7f4595a503fdcca', class: { 'message-wrapper': true, [this.viewType]: true } }, !this.hideAvatar && (h("aside", { key: 'a524e142b020ea1d528ca57f984bb6e725b59893', class: "avatar", part: "avatar" }, h("rtk-avatar", { key: 'ee56623f64d2bb3f74ebea3357eb1af9d67cd3a3', participant: { name: this.authorName, picture: this.avatarUrl }, size: "sm" }))), h("div", { key: 'd6f5bb18ee7aa2ad174cd03c3aee4b9a94c3e63e', class: "message", part: "message" }, !this.hideAuthorName && h("div", { key: '338d4801d1ac9ce6a4dd3676148cac3c70f3b39f', class: "header" }, this.authorName), h("div", { key: '86d147a38d6582979a94536df63213730becc572', class: { body: true, bubble: this.variant === 'bubble' } }, h("slot", { key: '23a3984240643508ef10d3f2c0af5276e4cb5687' }), !this.hideMetadata && !!this.time && (h("div", { key: '35a4884867e5bdd835532f85e3a9575976aa9703', class: "metadata", title: formatDateTime(this.time) }, elapsedDuration(this.time, new Date(Date.now())))), this.actions.length !== 0 && this.renderActions())))));
+    }
+    static get style() { return RtkMessageViewStyle0; }
+}, [1, "rtk-message-view", {
+        "actions": [16],
+        "variant": [1],
+        "viewType": [1, "view-type"],
+        "avatarUrl": [1, "avatar-url"],
+        "hideAvatar": [4, "hide-avatar"],
+        "authorName": [1, "author-name"],
+        "hideAuthorName": [4, "hide-author-name"],
+        "hideMetadata": [4, "hide-metadata"],
+        "time": [16],
+        "iconPack": [16]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkMessageView.prototype, "iconPack", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-message-view", "rtk-avatar", "rtk-icon", "rtk-menu", "rtk-menu-item", "rtk-menu-list", "rtk-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-message-view":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkMessageView);
+            }
+            break;
+        case "rtk-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "rtk-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-menu-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-menu-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkMessageView as R, defineCustomElement as d };

package/dist/components/p-190af711.js

@@ -0,0 +1,125 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
+import { a as defaultIconPack, c as useLanguage } from './p-9bcf0d04.js';
+import { i as isFullScreenEnabled, r as requestFullScreen, e as exitFullSreen, a as isFullScreenSupported } from './p-02f19345.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { d as defineCustomElement$3 } from './p-24ac331b.js';
+import { d as defineCustomElement$2 } from './p-3d754c34.js';
+import { d as defineCustomElement$1 } from './p-bd20259b.js';
+
+const rtkFullscreenToggleCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:block}:host([data-hidden]){display:none}";
+const RtkFullscreenToggleStyle0 = rtkFullscreenToggleCss;
+
+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 RtkFullscreenToggle = /*@__PURE__*/ proxyCustomElement(class RtkFullscreenToggle extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
+        /** Variant */
+        this.variant = 'button';
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.fullScreenActive = false;
+        this.isFullScreenSupported = true;
+        this.onFullScreenchange = () => {
+            this.fullScreenActive = isFullScreenEnabled();
+        };
+        this.toggleFullScreen = () => {
+            let fullScreenElement = this.targetElement || document.querySelector('rtk-meeting');
+            if (!fullScreenElement)
+                return;
+            if (!this.fullScreenActive) {
+                requestFullScreen(fullScreenElement);
+                this.fullScreenActive = true;
+            }
+            else {
+                exitFullSreen();
+                this.fullScreenActive = false;
+            }
+            this.stateUpdate.emit({ activeMoreMenu: false });
+        };
+    }
+    connectedCallback() {
+        this.isFullScreenSupported = isFullScreenSupported();
+        this.onFullScreenchange();
+        window.addEventListener('webkitfullscreenchange', this.onFullScreenchange);
+        window.addEventListener('fullscreenchange', this.onFullScreenchange);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('webkitfullscreenchange', this.onFullScreenchange);
+        window.removeEventListener('fullscreenchange', this.onFullScreenchange);
+    }
+    render() {
+        if (!this.isFullScreenSupported) {
+            return h(Host, { "data-hidden": true });
+        }
+        return (h(Host, { title: this.t('full_screen') }, h("rtk-controlbar-button", { size: this.size, iconPack: this.iconPack, onClick: this.toggleFullScreen, icon: this.fullScreenActive
+                ? this.iconPack.full_screen_minimize
+                : this.iconPack.full_screen_maximize, label: this.fullScreenActive ? this.t('full_screen.exit') : this.t('full_screen'), variant: this.variant })));
+    }
+    static get style() { return RtkFullscreenToggleStyle0; }
+}, [1, "rtk-fullscreen-toggle", {
+        "states": [16],
+        "targetElement": [16],
+        "variant": [513],
+        "size": [513],
+        "iconPack": [16],
+        "t": [16],
+        "fullScreenActive": [32],
+        "isFullScreenSupported": [32]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkFullscreenToggle.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkFullscreenToggle.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkFullscreenToggle.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkFullscreenToggle.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-fullscreen-toggle", "rtk-controlbar-button", "rtk-icon", "rtk-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-fullscreen-toggle":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkFullscreenToggle);
+            }
+            break;
+        case "rtk-controlbar-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 { RtkFullscreenToggle as R, defineCustomElement as d };

package/dist/components/p-1b5e871d.js

@@ -0,0 +1,199 @@
+import { p as proxyCustomElement, H, h } from './p-c3592601.js';
+import { d as defaultConfig, a as defaultIconPack, c as useLanguage } from './p-9bcf0d04.js';
+import './p-a83ccdbd.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { d as defineCustomElement$8 } from './p-2f10ccec.js';
+import { d as defineCustomElement$7 } from './p-92a1602c.js';
+import { d as defineCustomElement$6 } from './p-3d754c34.js';
+import { d as defineCustomElement$5 } from './p-a5737efc.js';
+import { d as defineCustomElement$4 } from './p-96d5823f.js';
+import { d as defineCustomElement$3 } from './p-c746a8bd.js';
+import { d as defineCustomElement$2 } from './p-bd20259b.js';
+import { d as defineCustomElement$1 } from './p-31a1dc4d.js';
+
+const rtkParticipantsViewerListCss = ":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;height:100%;width:100%;flex-direction:column;font-size:14px}.list{margin-bottom:var(--rtk-space-4, 16px);display:flex;height:100%;flex-direction:column}h3,.heading-count{margin:var(--rtk-space-0, 0px);align-items:center;justify-content:center;padding:var(--rtk-space-0, 0px);font-size:16px;font-weight:400;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));text-align:center}.heading-count{font-size:14px}.participants{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.empty-viewers-list{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);text-align:center;font-size:12px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}";
+const RtkParticipantsViewerListStyle0 = rtkParticipantsViewerListCss;
+
+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 RtkParticipantsViewers = /*@__PURE__*/ proxyCustomElement(class RtkParticipantsViewers extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.updateStageViewers = () => {
+            this.getViewers(this.search);
+        };
+        /** Config */
+        this.config = defaultConfig;
+        /** Hide Viewer Count Header */
+        this.hideHeader = false;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** View mode for participants list */
+        this.view = 'sidebar';
+        /** Search */
+        this.search = '';
+        /** Language */
+        this.t = useLanguage();
+        this.stageViewers = [];
+        this.createParticipantNode = (participant) => {
+            return (h("rtk-participant", { role: "listitem", key: participant.id, meeting: this.meeting, participant: participant, view: this.view, iconPack: this.iconPack, config: this.config, t: this.t }));
+        };
+        // TODO: (ishita1805) Remove viewtype check when we start supporting viewers in livestream.
+        this.shouldShowViewers = () => {
+            var _a, _b, _c;
+            return (_c = (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.permissions) === null || _c === void 0 ? void 0 : _c.stageEnabled;
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+        this.searchChanged(this.search);
+    }
+    meetingChanged(meeting) {
+        if (meeting == null)
+            return;
+        this.participantJoinedListener = (participant) => {
+            if (participant.stageStatus === 'ON_STAGE')
+                return;
+            // Do not append if participant name or id does not match search query
+            const lowerCaseSearch = this.search.toLowerCase();
+            if (lowerCaseSearch.length > 0 && !participant.name.toLowerCase().includes(lowerCaseSearch))
+                return;
+            this.stageViewers = [
+                ...this.stageViewers.filter((p) => p.id !== participant.id),
+                participant,
+            ];
+        };
+        this.participantLeftListener = (participant) => {
+            this.stageViewers = this.stageViewers.filter((p) => p.id !== participant.id);
+        };
+        meeting.participants.joined.addListener('participantJoined', this.participantJoinedListener);
+        meeting.participants.joined.addListener('participantLeft', this.participantLeftListener);
+        meeting.participants.joined.on('stageStatusUpdate', this.updateStageViewers);
+        meeting.stage.on('stageStatusUpdate', this.updateStageViewers);
+    }
+    searchChanged(search) {
+        this.getViewers(search);
+    }
+    disconnectedCallback() {
+        const { participants, stage } = this.meeting;
+        this.participantJoinedListener &&
+            this.meeting.participants.joined.removeListener('participantJoined', this.participantJoinedListener);
+        this.participantLeftListener &&
+            this.meeting.participants.joined.removeListener('participantLeft', this.participantLeftListener);
+        participants.joined.removeListener('stageStatusUpdate', this.updateStageViewers);
+        stage.removeListener('stageStatusUpdate', this.updateStageViewers);
+    }
+    getViewers(search) {
+        let list = this.meeting.stage.status === 'ON_STAGE' ? [] : [this.meeting.self];
+        list = [...list, ...this.meeting.participants.joined.toArray()].filter((p) => p.stageStatus !== 'ON_STAGE');
+        if (search === '') {
+            this.stageViewers = list;
+        }
+        else {
+            this.stageViewers = list.filter((p) => { var _a; return ((_a = p.name) !== null && _a !== void 0 ? _a : p.id).toLowerCase().includes(search.toLowerCase()); });
+        }
+    }
+    render() {
+        if (this.view !== 'sidebar' || !this.shouldShowViewers())
+            return;
+        return (h("div", { class: "list" }, !this.hideHeader && (h("div", { class: "heading-count", part: "heading-count" }, this.t('viewers'), " (", this.stageViewers.length, ")")), h("rtk-virtualized-participant-list", { items: this.stageViewers, renderItem: this.createParticipantNode, class: "participants", part: "participants", style: { height: '100%' }, emptyListElement: h("div", { class: "empty-viewers-list" }, this.search.length > 0
+                ? this.t('participants.errors.empty_results')
+                : this.t('participants.empty_list')) })));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"],
+        "search": ["searchChanged"]
+    }; }
+    static get style() { return RtkParticipantsViewerListStyle0; }
+}, [1, "rtk-participants-viewer-list", {
+        "meeting": [16],
+        "config": [16],
+        "size": [513],
+        "hideHeader": [4, "hide-header"],
+        "iconPack": [16],
+        "view": [1],
+        "search": [1],
+        "t": [16],
+        "stageViewers": [32]
+    }, undefined, {
+        "meeting": ["meetingChanged"],
+        "search": ["searchChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkParticipantsViewers.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantsViewers.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantsViewers.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantsViewers.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-participants-viewer-list", "rtk-avatar", "rtk-button", "rtk-icon", "rtk-menu-item", "rtk-menu-list", "rtk-participant", "rtk-spinner", "rtk-virtualized-participant-list"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-participants-viewer-list":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkParticipantsViewers);
+            }
+            break;
+        case "rtk-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "rtk-menu-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "rtk-menu-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-participant":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-virtualized-participant-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkParticipantsViewers as R, defineCustomElement as d };