@cloudflare/realtimekit-ui 0.0.0 → 0.1.0

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

@@ -0,0 +1,68 @@
+import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
+import { a as defaultIconPack, c as useLanguage } from './p-9bcf0d04.js';
+import { h as hasOnlyEmojis } from './p-338c7261.js';
+import { C as ChatHead } from './p-febe3ebc.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { T as TextMessageView } from './p-a2f4f9e3.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 RtkTextMessage = /*@__PURE__*/ proxyCustomElement(class RtkTextMessage 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() {
+        return (h(Host, { key: 'c21acb6c8645f4397b468f9f3bd687049503eb50' }, !this.isContinued && (h(ChatHead, { key: 'b7fa598be7d197a761bbb77617d4c9d8a255c48d', name: this.message.displayName, time: this.message.time, now: this.now })), h("div", { key: 'dc13b5f61ff5ecdece68abc33444d5a4e6852d92', class: {
+                body: true,
+                bubble: this.showBubble,
+            }, part: "body" }, h("div", { key: 'a51406f8da3eda94b35b4ed878dffe4bd3f8d5a2', class: { text: true, emoji: hasOnlyEmojis(this.message.message) } }, h(TextMessageView, { key: '65b20790e134d5149c20815e47ab79c039afd437', message: this.message.message })))));
+    }
+}, [0, "rtk-text-message", {
+        "message": [16],
+        "now": [16],
+        "isContinued": [516, "is-continued"],
+        "iconPack": [16],
+        "t": [16],
+        "showBubble": [4, "show-bubble"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkTextMessage.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkTextMessage.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-text-message"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-text-message":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkTextMessage);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkTextMessage as R, defineCustomElement as d };

package/dist/components/p-2134aa95.js

@@ -0,0 +1,95 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
+import { a as defaultIconPack, c as useLanguage } from './p-9bcf0d04.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+
+const rtkSwitchCss = ":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{box-sizing:border-box;display:inline-flex;height:var(--rtk-space-6, 24px);width:var(--rtk-space-10, 40px);align-items:center;padding:var(--rtk-space-1, 4px);border-radius:9999px;background-color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));cursor:pointer}.switch{box-sizing:border-box;height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);background-color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));border-radius:9999px;transition-property:var(--rtk-transition-property, all);transition-duration:200ms}:host(.checked){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity))}:host(.checked) .switch{transform:translateX(100%)}:host([readonly]),:host([disabled]){cursor:not-allowed;opacity:0.6}";
+const RtkSwitchStyle0 = rtkSwitchCss;
+
+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 RtkSwitch = /*@__PURE__*/ proxyCustomElement(class RtkSwitch extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.onChange = createEvent(this, "rtkChange", 4);
+        /** Whether the switch is enabled/checked */
+        this.checked = false;
+        /** Whether switch is readonly */
+        this.readonly = false;
+        /** Whether switch is readonly */
+        this.disabled = false;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.onClick = () => {
+            if (!this.readonly && !this.disabled) {
+                this.checked = !this.checked;
+            }
+        };
+        this.onKeyPress = (e) => {
+            if (this.readonly)
+                return;
+            switch (e.key) {
+                // Enter or Space
+                case 'Enter':
+                case ' ':
+                    this.checked = !this.checked;
+                    break;
+            }
+        };
+    }
+    connectedCallback() {
+        this.checkedChange(this.checked);
+    }
+    checkedChange(checked) {
+        this.checked = checked;
+        this.onChange.emit(checked);
+    }
+    render() {
+        return (h(Host, { key: 'd52144d4eeaf1f93dc3f83971f014e4e31e80c0e', role: "switch", tabIndex: this.disabled && 0, "aria-readonly": this.readonly, "aria-checked": this.checked, "aria-disabled": this.disabled, class: { checked: this.checked }, onClick: this.onClick, onKeyPress: this.onKeyPress }, h("div", { key: 'aa51da6304b98be4d6d7c109ff488c1a684f6bb3', class: "switch", part: "switch" })));
+    }
+    static get watchers() { return {
+        "checked": ["checkedChange"]
+    }; }
+    static get style() { return RtkSwitchStyle0; }
+}, [1, "rtk-switch", {
+        "checked": [1028],
+        "readonly": [4],
+        "disabled": [516],
+        "iconPack": [16],
+        "t": [16]
+    }, undefined, {
+        "checked": ["checkedChange"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkSwitch.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkSwitch.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-switch"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-switch":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkSwitch);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkSwitch as R, defineCustomElement as d };

package/dist/components/p-2283539e.js

@@ -0,0 +1,105 @@
+import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
+import { c as computePosition, o as offset, f as flip, s as shift } from './p-31964573.js';
+import { a as defaultIconPack, c as useLanguage } from './p-9bcf0d04.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+
+const rtkMenuCss = ":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{position:relative;display:inline-block;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}#menu-list{position:absolute;z-index:20;display:none}";
+const RtkMenuStyle0 = rtkMenuCss;
+
+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 RtkMenu = /*@__PURE__*/ proxyCustomElement(class RtkMenu extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.clickedThis = false;
+        /** Placement of menu */
+        this.placement = 'bottom-end';
+        /** Offset in px */
+        this.offset = 10;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.handleOutsideClick = () => {
+            // handles clicking on other menu triggers
+            if (!this.clickedThis) {
+                // if other trigger is clicked, hide this menu-list
+                this.menuListEl.style.display = 'none';
+            }
+            // reset the value
+            this.clickedThis = false;
+        };
+    }
+    componentDidLoad() {
+        document.addEventListener('click', this.handleOutsideClick);
+        this.update();
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleOutsideClick);
+    }
+    update() {
+        computePosition(this.triggerEl, this.menuListEl, {
+            placement: this.placement,
+            middleware: [offset(this.offset), flip(), shift({ padding: 5 })],
+        }).then(({ x, y }) => {
+            Object.assign(this.menuListEl.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+        });
+    }
+    render() {
+        return (h(Host, { key: 'b276110eb5171b15f815bfe7a96663e01f899e96' }, h("span", { key: '8bfa076de490cee6929b3a5da3d90f7741795dd5', id: "trigger", ref: (el) => (this.triggerEl = el), onClick: () => {
+                this.clickedThis = true;
+                if (this.menuListEl.style.display !== 'block') {
+                    this.menuListEl.style.display = 'block';
+                    this.update();
+                }
+                else {
+                    this.menuListEl.style.display = 'none';
+                }
+            } }, h("slot", { key: 'e287328ba8515ddd37a21645aef25e83e6484e6b', name: "trigger" })), h("span", { key: 'cc7025445296778b3dd0ad3eceb24b03eb0c2924', part: "menu-list", id: "menu-list", ref: (el) => (this.menuListEl = el) }, h("slot", { key: '0d26db850bffc2cdf9b4142fdfa2f4113d180078' }))));
+    }
+    static get style() { return RtkMenuStyle0; }
+}, [1, "rtk-menu", {
+        "size": [513],
+        "placement": [1],
+        "offset": [2],
+        "iconPack": [16],
+        "t": [16]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkMenu.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkMenu.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkMenu.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-menu"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-menu":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkMenu);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkMenu as R, defineCustomElement as d };

package/dist/components/p-24ac331b.js

@@ -0,0 +1,83 @@
+import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
+import { a as defaultIconPack } from './p-9bcf0d04.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { d as defineCustomElement$2 } from './p-3d754c34.js';
+import { d as defineCustomElement$1 } from './p-bd20259b.js';
+
+const rtkControlbarButtonCss = ":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{--background-color:var(\n    --rtk-controlbar-button-background-color,\n    rgb(var(--rtk-colors-background-1000, 8 8 8))\n  );--icon-size:var(--rtk-controlbar-button-icon-size, var(--rtk-space-7, 28px));position:relative;box-sizing:border-box;display:inline-flex;height:100%;width:auto;min-width:var(--rtk-space-20, 80px);-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--rtk-border-radius-md, 8px);transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;color:rgb(var(--rtk-colors-text-1000, 255 255 255));background-color:var(--background-color)}button{padding:var(--rtk-space-1, 4px)}:host(.red-icon) #icon{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}:host([disabled]){color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}button{box-sizing:border-box;display:inline-flex;height:100%;width:100%;flex:1 1 0%;flex-direction:column;gap:var(--rtk-space-1, 4px);padding-left:var(--rtk-space-1, 4px);padding-right:var(--rtk-space-1, 4px);align-items:center;justify-content:center;cursor:pointer;border-radius:var(--rtk-border-radius-md, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent;color:inherit;outline-offset:-2px;border:var(--rtk-border-width-md, 2px) solid transparent}.label{text-align:center;font-size:12px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}#warning-indicator{position:absolute;top:var(--rtk-space-1, 4px);right:var(--rtk-space-2, 8px);height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);--tw-text-opacity:1;color:rgba(var(--rtk-colors-warning, 255 205 7) / var(--tw-text-opacity))}:host([size='sm']) #warning-indicator{right:var(--rtk-space-0, 0px);top:var(--rtk-space-0, 0px);height:var(--rtk-space-3, 12px);width:var(--rtk-space-3, 12px)}:host(:hover) button{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}#icon{width:var(--icon-size);height:var(--icon-size)}:host(.leave:hover) button{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity));border:var(--rtk-border-width-md, 2px) solid rgb(var(--rtk-colors-danger, 255 45 45))}:host(.active) button{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-400, 53 110 253) / var(--tw-text-opacity));border:var(--rtk-border-width-md, 2px) solid rgb(var(--rtk-colors-brand-400, 53 110 253))}button:focus-visible{outline:2px solid rgb(var(--rtk-colors-brand-400, 53 110 253))}:host(.active-livestream){--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}:host([size='sm']){min-width:var(--rtk-space-14, 56px)}:host([size='sm']) .label{display:none}:host([variant='horizontal']){width:100%}:host([variant='horizontal']) button{border-radius:7px;height:var(--rtk-space-12, 48px);width:100%;padding-left:var(--rtk-space-5, 20px);padding-right:var(--rtk-space-5, 20px);padding-top:var(--rtk-space-3, 12px);padding-bottom:var(--rtk-space-3, 12px);flex-direction:row;justify-content:flex-start;gap:var(--rtk-space-3, 12px)}:host([variant='horizontal']) #icon{width:var(--rtk-space-6, 24px)}:host([variant='horizontal']) .label{display:block;font-size:14px;line-height:1.25rem}:host([variant='horizontal']) #warning-indicator{right:auto;left:var(--rtk-space-4, 16px)}:host([brand-icon]) rtk-icon#icon{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity))}@media only screen and (max-device-height: 480px) and (orientation: landscape){:host .label{display:none}:slotted(rtk-icon){height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px)}}";
+const RtkControlbarButtonStyle0 = rtkControlbarButtonCss;
+
+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 RtkControlbarButton = /*@__PURE__*/ proxyCustomElement(class RtkControlbarButton extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** Variant */
+        this.variant = 'button';
+        /** Whether to show warning icon */
+        this.showWarning = false;
+        /** Whether button is disabled */
+        this.disabled = false;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Whether icon requires brand color */
+        this.brandIcon = false;
+    }
+    render() {
+        return (h(Host, { key: '9a1150fd8a0fbd0022f33f325e7413d0670d0820' }, h("button", { key: '0fabd8a63a8013e1630dd3838f0c2f1378f423f7', "aria-label": this.label, part: "button" }, this.isLoading ? (h("rtk-spinner", { id: "icon", part: "spinner", iconPack: this.iconPack })) : (h("rtk-icon", { id: "icon", icon: this.icon, tabIndex: -1, "aria-hidden": true, part: "icon" })), h("span", { key: '117f1bff41fb719a832ef89d000b2abef6f1388a', class: "label", part: "label" }, this.label), this.showWarning && (h("rtk-icon", { key: '4d8b9170c833a930e013613089755ec768df0695', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" })))));
+    }
+    static get delegatesFocus() { return true; }
+    static get style() { return RtkControlbarButtonStyle0; }
+}, [17, "rtk-controlbar-button", {
+        "variant": [513],
+        "showWarning": [4, "show-warning"],
+        "size": [513],
+        "label": [1],
+        "icon": [1],
+        "isLoading": [4, "is-loading"],
+        "disabled": [516],
+        "iconPack": [16],
+        "brandIcon": [516, "brand-icon"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkControlbarButton.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkControlbarButton.prototype, "iconPack", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-controlbar-button", "rtk-icon", "rtk-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-controlbar-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkControlbarButton);
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkControlbarButton as R, defineCustomElement as d };

package/dist/components/p-282cc869.js

@@ -0,0 +1,128 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
+import { a as defaultIconPack, c as useLanguage } from './p-9bcf0d04.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { d as defineCustomElement$3 } from './p-92a1602c.js';
+import { d as defineCustomElement$2 } from './p-3d754c34.js';
+import { d as defineCustomElement$1 } from './p-bd20259b.js';
+
+const EMOJI_ASSET_URL = 'https://cdn.dyte.in/assets/emojis-data.json';
+let cachedEmojis;
+/**
+ * fetches the latest emoji list from CDN
+ * @returns list of emojis
+ */
+const fetchEmojis = async () => {
+    if (!cachedEmojis) {
+        const emojis = await fetch(EMOJI_ASSET_URL);
+        cachedEmojis = emojis.json();
+    }
+    return cachedEmojis;
+};
+
+const rtkEmojiPickerCss = ":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{width:100%}.emoji-parent{box-sizing:border-box;display:inline-flex;height:var(--rtk-space-64, 256px);width:100%;max-width:640px;flex-direction:column;padding:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-0, 0px);-webkit-user-select:none;-moz-user-select:none;user-select:none;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;--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))}.close-parent{display:flex;flex:1 1 0%;justify-content:flex-end;padding:var(--rtk-space-0, 0px);--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))}#emoji-grid{margin-top:var(--rtk-space-2, 8px);box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;overflow-x:hidden;overflow-y:scroll;height:100%;grid-auto-rows:minmax(min-content, max-content)}#loader{display:flex;height:100%;width:100%;align-items:center;justify-content:center}input{display:block;height:var(--rtk-space-8, 32px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);font-size:14px;border-width:var(--rtk-border-width-none, 0);border-style:solid;border-style:none;border-color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));--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))}input::-moz-placeholder{color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}input::placeholder{color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}input{border-radius:var(--rtk-border-radius-sm, 4px);outline:2px solid transparent;outline-offset:2px;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;border:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60))}input:focus{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-border-opacity));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-ring-opacity));--tw-ring-opacity:0.3}.emoji{height:var(--rtk-space-10, 40px);width:var(--rtk-space-10, 40px);font-size:20px;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}";
+const RtkEmojiPickerStyle0 = rtkEmojiPickerCss;
+
+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 RtkEmojiPicker = /*@__PURE__*/ proxyCustomElement(class RtkEmojiPicker extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.pickerClose = createEvent(this, "pickerClose", 7);
+        this.emojiClicked = createEvent(this, "rtkEmojiClicked", 7);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** Controls whether or not to focus on mount */
+        this.focusWhenOpened = true;
+        this.filterVal = '';
+        this.filteredEmojis = [];
+    }
+    componentWillLoad() {
+        // Don't use async here as it will block the render
+        fetchEmojis().then((e) => {
+            this.emojiList = e;
+            this.handleInputChange(this.inputElement);
+        });
+    }
+    componentDidLoad() {
+        if (this.focusWhenOpened) {
+            this.inputElement.focus();
+        }
+    }
+    handleInputChange(target) {
+        this.filterVal = target.value;
+        const regex = new RegExp(`([^,]*?${this.filterVal}[^,]*):(\\d+)`, 'g');
+        this.filteredEmojis = Array.from(this.emojiList['search'].matchAll(regex)).map((m) => {
+            return { name: m[1], emoji: this.emojiList['emojis'][m[2]] };
+        });
+    }
+    handleEmojiClick(emoji) {
+        this.emojiClicked.emit(emoji);
+    }
+    mapEmojiList() {
+        var _a;
+        if (((_a = this.emojiList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            return (h("div", { id: "loader" }, h("rtk-spinner", { iconPack: this.iconPack })));
+        }
+        return (h("div", { id: "emoji-grid", class: "scrollbar max-w-40" }, this.filteredEmojis.map((e) => (h("rtk-button", { key: `emoji-button-${e.name}`, class: "emoji", variant: "ghost", kind: "icon", title: e.name, onClick: () => this.handleEmojiClick(e.emoji) }, e.emoji)))));
+    }
+    render() {
+        return (h(Host, { key: '989c0508bb88941926f29091895707e7b4a3e139' }, h("div", { key: '83a90c6b73ca11fb6e864a59362d15bf83391d20', class: 'close-parent' }, h("rtk-button", { key: '446a4c1a343eb11032b9ea2bf5b4cd5bef6f7f1b', variant: "ghost", kind: "icon", class: "close", onClick: () => { var _a; return (_a = this.pickerClose) === null || _a === void 0 ? void 0 : _a.emit(); }, "aria-label": this.t('close') }, h("rtk-icon", { key: 'cacfe97be0590e840d332fc9197bb473fef22d9f', icon: this.iconPack.dismiss }))), h("div", { key: '461a263d19a60547aff16689d3c6f4f31aea8a3a', class: 'emoji-parent' }, h("input", { key: 'c9a111769b48d5ff12ac48d8c172a8d3f371df2c', value: this.filterVal, onInput: (event) => this.handleInputChange(event.target), placeholder: this.t('search'), ref: (el) => (this.inputElement = el) }), this.mapEmojiList())));
+    }
+    static get style() { return RtkEmojiPickerStyle0; }
+}, [1, "rtk-emoji-picker", {
+        "iconPack": [16],
+        "t": [16],
+        "focusWhenOpened": [4, "focus-when-opened"],
+        "emojiList": [32],
+        "filterVal": [32],
+        "filteredEmojis": [32]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkEmojiPicker.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkEmojiPicker.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-emoji-picker", "rtk-button", "rtk-icon", "rtk-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-emoji-picker":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkEmojiPicker);
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkEmojiPicker as R, defineCustomElement as d };

package/dist/components/p-291cbe98.js

@@ -0,0 +1,92 @@
+import { p as proxyCustomElement, H, d as createEvent, h } from './p-c3592601.js';
+import { a as defaultIconPack, c as useLanguage } from './p-9bcf0d04.js';
+import './p-a83ccdbd.js';
+import { a as sanitizeLink } from './p-338c7261.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { d as downloadFile } from './p-9fc565cf.js';
+import { d as defineCustomElement$3 } from './p-92a1602c.js';
+import { d as defineCustomElement$2 } from './p-3d754c34.js';
+import { d as defineCustomElement$1 } from './p-bd20259b.js';
+
+const rtkImageMessageViewCss = ":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)}.image-spinner{cursor:wait}.image-errored{cursor:not-allowed}.image{display:block;font-family:var(--rtk-font-family, sans-serif);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));position:relative;height:var(--rtk-space-40, 160px);max-width:var(--rtk-space-64, 256px);cursor:pointer}.image img{display:none;height:100%;width:100%;border-radius:var(--rtk-border-radius-sm, 4px);-o-object-fit:cover;object-fit:cover}.image .image-spinner{display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center;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))}.image .image-spinner rtk-spinner{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity))}.image .image-errored{display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-sm, 4px);background-color:rgba(var(--rtk-colors-danger, 255 45 45) / 0.1);--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}.image .actions{display:none;height:var(--rtk-space-8, 32px);align-items:center;position:absolute;top:var(--rtk-space-2, 8px);right:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 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));overflow:hidden;--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.image .actions .action{height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);border-radius:var(--rtk-border-radius-none, 0);border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.image .actions .action:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.image.loaded img{display:block}.image.loaded .image-spinner{display:none}.image:hover .actions,.image:focus .actions{display:flex}";
+const RtkImageMessageViewStyle0 = rtkImageMessageViewCss;
+
+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 RtkImageMessageView = /*@__PURE__*/ proxyCustomElement(class RtkImageMessageView extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.onPreview = createEvent(this, "preview", 7);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.status = 'loading';
+    }
+    render() {
+        return (h("div", { key: '9d7c32348bb52dc60533d9d99cfbd4099d89fad0', class: { image: true, loaded: this.status === 'loaded' } }, h("img", { key: '1c66e60f69842cc1c372545759201ae8e70cbfe8', src: sanitizeLink(this.url), onLoad: () => {
+                this.status = 'loaded';
+            }, onError: () => {
+                this.status = 'errored';
+            }, onClick: () => {
+                if (this.status === 'loaded') {
+                    this.onPreview.emit(this.url);
+                }
+            } }), this.status === 'loading' && (h("div", { key: 'ee5cce91357ec2974c691ea95faacc78db9fa796', class: "image-spinner", title: this.t('chat.img.loading'), "aria-label": this.t('chat.img.loading') }, h("rtk-spinner", { key: '3c9236319042a7b9c5ff45dd196b4e14c38a7b0a', iconPack: this.iconPack }))), this.status === 'errored' && (h("div", { key: 'a176782a3ea63795ed154d8bf4cc3342cb20cd32', class: "image-errored", title: this.t('chat.error.img_not_found'), "aria-label": this.t('chat.error.img_not_found') }, h("rtk-icon", { key: '4d4275e21b280a3b981634a8da7b2d752a620be1', icon: this.iconPack.image_off }))), this.status === 'loaded' && (h("div", { key: 'ca5468642912ad5407e3b828083b6e3f232b42e5', class: "actions" }, h("rtk-button", { key: '3b8a485a435023cb9819d98541cd9b1f40a96911', class: "action", variant: "secondary", kind: "icon", onClick: () => {
+                this.onPreview.emit(this.url);
+            } }, h("rtk-icon", { key: '31e7ff096ca3e1db148f2808ad79aa79f56fa91e', icon: this.iconPack.full_screen_maximize })), h("rtk-button", { key: 'a1de648d80f8ac6d4d2197f0148e9708123434f3', class: "action", variant: "secondary", kind: "icon", onClick: () => downloadFile(this.url, { fallbackName: 'image' }) }, h("rtk-icon", { key: '4a06af4520a81fce102397907b66202a18f0c191', icon: this.iconPack.download }))))));
+    }
+    static get style() { return RtkImageMessageViewStyle0; }
+}, [1, "rtk-image-message-view", {
+        "url": [1],
+        "iconPack": [16],
+        "t": [16],
+        "status": [32]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkImageMessageView.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkImageMessageView.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-image-message-view", "rtk-button", "rtk-icon", "rtk-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-image-message-view":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkImageMessageView);
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkImageMessageView as R, defineCustomElement as d };