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

package/dist/components/p-ba1a0ebf.js

@@ -0,0 +1,63 @@
+import { p as proxyCustomElement, H, h, e as Host } from './p-3bfd5b6d.js';
+import { S as SyncWithStore } from './p-df6f9a3f.js';
+
+const rtkButtonCss = ":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{--icon-size:var(--rtk-button-icon-size, var(--rtk-space-5, 20px));--transition-property:var(--rtk-transition-property, all);--transition-duration:100ms;display:inline-flex;height:var(--rtk-space-8, 32px);cursor:pointer;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255));font-size:14px;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--rtk-border-radius-sm, 4px);transition-property:var(--transition-property);transition-duration:var(--transition-duration)}button{box-sizing:border-box;background-color:transparent;color:inherit;border:var(--rtk-border-width-sm, 1px) solid transparent;padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);display:inline-flex;flex-grow:1;justify-content:center;vertical-align:baseline;gap:var(--rtk-space-1, 4px);transition-property:var(--transition-property);transition-duration:var(--transition-duration);outline:none;height:inherit;border-radius:inherit;fill:inherit;cursor:inherit;font-weight:inherit;font-family:inherit;font-size:inherit;line-height:inherit}.start,.content,.end{align-self:center}::slotted(rtk-icon),::slotted(rtk-spinner){height:var(--icon-size);width:var(--icon-size)}:host([variant='primary']){color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}:host(:hover){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-bg-opacity))}button:focus-visible{border-color:rgb(var(--rtk-colors-text-1000, 255 255 255))}:host(:active){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-700, 2 70 253) / var(--tw-bg-opacity))}:host([disabled]:not([disabled='false'])){cursor:not-allowed;opacity:0.6}:host([variant='secondary']){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}:host([variant='secondary']:hover){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}:host([variant='secondary']:active){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}:host([variant='danger']){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-bg-opacity))}:host([variant='danger']:hover){background-color:rgba(var(--rtk-colors-danger, 255 45 45) / 0.7)}:host([variant='danger']:active){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-bg-opacity))}:host([variant='ghost']){background-color:transparent;color:inherit}:host([variant='ghost'].active){--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-text-opacity))}:host([variant='ghost']:hover){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}:host([variant='ghost']:active){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}:host([kind='icon']){--icon-size:var(--rtk-space-5, 20px);width:var(--rtk-space-8, 32px)}:host([kind='icon']) button{padding-left:var(--rtk-space-0, 0px);padding-right:var(--rtk-space-0, 0px)}:host([kind='wide']){width:100%}:host([size='lg']){--icon-size:var(--rtk-space-5, 20px);height:var(--rtk-space-10, 40px);font-size:16px}:host([size='lg'][kind='icon']){--icon-size:var(--rtk-space-6, 24px);height:var(--rtk-space-10, 40px);width:var(--rtk-space-10, 40px)}:host([size='sm']){--icon-size:var(--rtk-space-4, 16px);height:var(--rtk-space-6, 24px);font-size:12px}:host([size='sm'][kind='icon']){height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}";
+const RtkButtonStyle0 = rtkButtonCss;
+
+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 RtkButton = /*@__PURE__*/ proxyCustomElement(class RtkButton extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** Button variant */
+        this.variant = 'primary';
+        /** Button type */
+        this.kind = 'button';
+        /** Whether to reverse order of children */
+        this.reverse = false;
+        /** Where the button is disabled or not */
+        this.disabled = false;
+        /** Button type */
+        this.type = 'button';
+    }
+    render() {
+        return (h(Host, { key: 'a75698a2fea0a57713401fad47f7f637e6e7a0de' }, h("button", { key: 'e4d9a8c8bf2a18dd271e9e857b1a8239efdcfb48', part: "button", type: this.type, disabled: this.disabled }, h("span", { key: 'bc4886ff0aae6e20adc32c130fa90cfeeeddc40c', class: "start" }, h("slot", { key: '13a7629dfcc14cacebdbde86cafc8e8d85003daa', name: "start" })), h("span", { key: '4b621dcce5e777048ccb519f26db32430d59fdd2', class: "content", part: "content" }, h("slot", { key: 'a94f9ff0e4a3d58e9c50780e35899181e051c260' })), h("span", { key: 'c7a1430740bb23e5835c834704d1eb5aacd62bf9', class: "end" }, h("slot", { key: 'ecfc59b45264186785789b81ecab35f62c04d33d', name: "end" })))));
+    }
+    static get style() { return RtkButtonStyle0; }
+}, [1, "rtk-button", {
+        "size": [513],
+        "variant": [513],
+        "kind": [513],
+        "reverse": [516],
+        "disabled": [516],
+        "type": [513]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkButton.prototype, "size", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkButton);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkButton as R, defineCustomElement as d };

package/dist/components/p-baea3e90.js

@@ -0,0 +1,119 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-3bfd5b6d.js';
+import { a as defaultIconPack, c as useLanguage } from './p-53b020e2.js';
+import { S as SyncWithStore } from './p-df6f9a3f.js';
+import { d as defineCustomElement$2 } from './p-ba1a0ebf.js';
+import { d as defineCustomElement$1 } from './p-bed2e1b5.js';
+
+const rtkPollFormCss = ":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)))}.create-poll{margin-top:var(--rtk-space-3, 12px);margin-bottom:var(--rtk-space-3, 12px);display:flex;flex:1 1 0%;flex-direction:column;padding:var(--rtk-space-3, 12px);border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}.create-poll p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px);text-align:center}.create-poll textarea{display:flex;border-radius:var(--rtk-border-radius-sm, 4px);padding:var(--rtk-space-2, 8px);font-family:var(--rtk-font-family, sans-serif);border-width:var(--rtk-border-width-none, 0);border-style:none;font-weight:500;outline:2px solid transparent;outline-offset:2px;margin-top:var(--rtk-space-3, 12px);margin-bottom:var(--rtk-space-3, 12px);resize:vertical;--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-700, 255 255 255 / 0.64))}.create-poll textarea:focus{outline-style:solid;outline-offset:2px;outline-color:rgb(var(--rtk-colors-background-600, 60 60 60))}.option{display:flex;flex-direction:row;align-items:center;margin-bottom:var(--rtk-space-3, 12px);width:100%}.option input{width:100%;border-radius:var(--rtk-border-radius-sm, 4px);padding:var(--rtk-space-2, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none;outline:2px solid transparent;outline-offset:2px;--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-700, 255 255 255 / 0.64))}.remove-option{margin-left:var(--rtk-space-2, 8px);width:var(--rtk-space-10, 40px);border-radius:var(--rtk-border-radius-sm, 4px)}.add-option{margin-bottom:var(--rtk-space-3, 12px)}label{margin-bottom:var(--rtk-space-3, 12px)}.error-text{margin-top:var(--rtk-space-3, 12px);text-align:center;font-size:12px;--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}";
+const RtkPollFormStyle0 = rtkPollFormCss;
+
+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 RtkPoll = /*@__PURE__*/ proxyCustomElement(class RtkPoll extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.onCreate = createEvent(this, "rtkCreatePoll", 7);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** Options */
+        this.options = ['', ''];
+        this.anonymous = false;
+        this.hideVotes = true;
+    }
+    removeOption(index) {
+        var _a;
+        this.options = this.options.filter((_, ind) => ind !== index);
+        if (((_a = this.error) === null || _a === void 0 ? void 0 : _a.code) === 1)
+            this.error = undefined;
+    }
+    addOption() {
+        this.options = [...this.options, ''];
+    }
+    updateOption(ev, index) {
+        var _a;
+        this.options[index] = ev.target.value;
+        if (((_a = this.error) === null || _a === void 0 ? void 0 : _a.code) === 1)
+            this.error = undefined;
+    }
+    handleSubmit() {
+        const pollObject = {
+            question: this.question.value,
+            options: this.options,
+            anonymous: this.anonymous,
+            hideVotes: this.anonymous ? true : this.hideVotes,
+        };
+        if (!pollObject.question) {
+            this.error = {
+                code: 0,
+                message: this.t('polls.errors.question_required'),
+            };
+            return;
+        }
+        if (this.options.filter((op) => op.trim() === '').length > 0) {
+            this.error = {
+                code: 1,
+                message: this.t('polls.errors.empty_option'),
+            };
+            return;
+        }
+        this.onCreate.emit(pollObject);
+    }
+    render() {
+        return (h(Host, { key: 'ce91372243197e68b2323889fe6768afcb13712d' }, h("div", { key: 'd7e688b9e924ed8677eea21f7ba7fde844d8127a', class: "create-poll" }, h("p", { key: 'c240dde8fc2e10b092990a24a4c48205927f6661' }, this.t('polls.question')), h("textarea", { key: '52f17471f4e00db0f72aeaf5637b0d282170c905', onInput: () => {
+                if (this.error && this.error.code === 0)
+                    this.error = undefined;
+            }, ref: (e) => (this.question = e), placeholder: this.t('polls.question.placeholder') }), this.options.map((item, index) => (h("div", { class: "option" }, h("input", { placeholder: this.t('polls.option.placeholder'), value: item, onInput: (event) => this.updateOption(event, index) }), index > 1 && (h("rtk-button", { kind: "icon", class: "auto remove-option", variant: "secondary", onClick: () => this.removeOption(index) }, h("rtk-icon", { icon: this.iconPack.subtract })))))), h("rtk-button", { key: '18b094e5ed57c3fc67719820c21e04ce5a322bf7', class: "add-option", variant: "secondary", onClick: () => this.addOption() }, this.t('polls.option')), h("label", { key: '7466c849dbd7146fbc2e919ca240cf5b4ca87948' }, h("input", { key: '3523addb0bef26dd203ff0ace9cbc5c8e438a4dc', id: "anonymous", type: "checkbox", onChange: (e) => (this.anonymous = e.target.checked) }), this.t('polls.results.anon')), h("label", { key: '0948aeedab995e2807f65da59db206620e559677' }, h("input", { key: '24c695b457b095f11ab25f2866dfdbad7e3445f3', id: "hideVotes", type: "checkbox", disabled: this.anonymous, checked: this.anonymous ? true : this.hideVotes, onChange: (e) => (this.hideVotes = e.target.checked) }), this.t('polls.results.hide')), h("rtk-button", { key: 'ed358c58d852a658d5a32681ac948b3bcdc06935', kind: "wide", onClick: () => this.handleSubmit() }, this.t('polls.create')), this.error && h("span", { key: 'ff82ffba979eef3ed1e4c234e8a0656fa454d2c9', class: "error-text" }, this.error.message))));
+    }
+    static get style() { return RtkPollFormStyle0; }
+}, [1, "rtk-poll-form", {
+        "iconPack": [16],
+        "t": [16],
+        "options": [32],
+        "anonymous": [32],
+        "hideVotes": [32],
+        "error": [32]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkPoll.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkPoll.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-poll-form", "rtk-button", "rtk-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-poll-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkPoll);
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkPoll as R, defineCustomElement as d };

package/dist/components/p-bb4322af.js

@@ -0,0 +1,131 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-3bfd5b6d.js';
+import { d as defaultConfig, a as defaultIconPack, c as useLanguage } from './p-53b020e2.js';
+import { f as formatName, s as shorten } from './p-338c7261.js';
+import { S as SyncWithStore } from './p-df6f9a3f.js';
+import { d as defineCustomElement$4 } from './p-ba1a0ebf.js';
+import { d as defineCustomElement$3 } from './p-bed2e1b5.js';
+import { d as defineCustomElement$2 } from './p-a4182a97.js';
+import { d as defineCustomElement$1 } from './p-bffc1ba5.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-bb7c5e38.js

@@ -0,0 +1,134 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-3bfd5b6d.js';
+import { a as defaultIconPack, c as useLanguage } from './p-53b020e2.js';
+import { S as SyncWithStore } from './p-df6f9a3f.js';
+import { d as defineCustomElement$1 } from './p-ba1a0ebf.js';
+
+const rtkLeaveMeetingCss = ":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)}.leave-modal{width:var(--rtk-space-72, 288px)}@media (min-width: 768px){.leave-modal{width:var(--rtk-space-96, 384px)}}.leave-modal{position:relative;display:flex;flex-direction:column;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));padding:var(--rtk-space-8, 32px);color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.leave-modal .header h2{margin:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-3, 12px)}.leave-modal .message{color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}.leave-modal .content{margin-top:var(--rtk-space-4, 16px);font-size:14px;display:flex;flex-wrap:wrap;gap:var(--rtk-space-4, 16px)}.leave-modal .content rtk-button{height:var(--rtk-space-9, 36px);min-width:var(--rtk-space-44, 176px);flex-grow:1}.leave-modal .content .secondary-btn{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.leave-modal .content .secondary-btn:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.leave-modal .content .secondary-danger-btn{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}";
+const RtkLeaveMeetingStyle0 = rtkLeaveMeetingCss;
+
+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 RtkLeaveMeeting = /*@__PURE__*/ proxyCustomElement(class RtkLeaveMeeting extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
+        this.keyPressListener = (e) => {
+            if (e.key === 'Escape') {
+                this.close();
+            }
+        };
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.canEndMeeting = false;
+        this.isBreakoutRoomsActive = false;
+        this.isChildMeeting = false;
+        this.canJoinMainRoom = false;
+        this.permissionsUpdateListener = () => {
+            this.canEndMeeting = this.meeting.self.permissions.kickParticipant;
+            this.canJoinMainRoom = this.meeting.self.permissions.connectedMeetings.canSwitchToParentMeeting;
+        };
+        this.close = () => {
+            this.stateUpdate.emit({ activeLeaveConfirmation: false });
+        };
+        this.handleLeave = () => {
+            var _a;
+            (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.leaveRoom();
+            this.close();
+        };
+        this.handleJoinMainRoom = () => {
+            this.meeting.connectedMeetings.moveParticipants(this.meeting.meta.meetingId, this.meeting.connectedMeetings.parentMeeting.id, [this.meeting.self.userId]);
+            this.close();
+        };
+        this.handleEndMeeting = () => {
+            var _a;
+            (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.participants.kickAll();
+            this.close();
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+        document.addEventListener('keydown', this.keyPressListener);
+    }
+    disconnectedCallback() {
+        var _a;
+        document.removeEventListener('keydown', this.keyPressListener);
+        (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self.permissions.removeListener('permissionsUpdate', this.permissionsUpdateListener);
+    }
+    meetingChanged(meeting) {
+        if (meeting != null) {
+            this.isBreakoutRoomsActive =
+                this.meeting.connectedMeetings.supportsConnectedMeetings &&
+                    this.meeting.connectedMeetings.isActive;
+            this.isChildMeeting =
+                this.meeting.connectedMeetings.supportsConnectedMeetings &&
+                    this.meeting.connectedMeetings.meetings.some((cMeet) => cMeet.id === meeting.meta.meetingId);
+            this.meeting.self.permissions.addListener('permissionsUpdate', this.permissionsUpdateListener);
+            this.permissionsUpdateListener();
+        }
+    }
+    render() {
+        return (h(Host, { key: 'd6e7a2eba47854f5f3da4008137081383769d159' }, h("div", { key: 'afffb6ce1dd2b38dd3cf2731723dbd0c8e68e046', class: "leave-modal" }, h("div", { key: 'f60a1660e94307fdf36e5e52a513648adc741aa5', class: "header" }, h("h2", { key: '5e80bd3031ed95929d6560e79e5edfcca607b169', class: "title" }, this.t('leave'))), h("p", { key: 'adfd75ca8e0408f90687f39de5de3b237378deb0', class: "message" }, this.isBreakoutRoomsActive && this.isChildMeeting
+            ? this.t('breakout_rooms.leave_confirmation')
+            : this.t('leave_confirmation')), h("div", { key: '395b4f29350512c4c9d512984482bb934aadf983', class: "content" }, h("rtk-button", { key: '85adbf49f8ae02e05e16a349c99152b525ff6520', variant: "secondary", onClick: this.close, class: "secondary-btn" }, this.t('cancel')), this.isBreakoutRoomsActive && this.isChildMeeting && this.canJoinMainRoom && (h("rtk-button", { key: '6a965a9e4cad6f07624c7ac5255207b7b021b47c', variant: "secondary", onClick: this.handleJoinMainRoom, class: "secondary-btn" }, this.t('breakout_rooms.leave_confirmation.main_room_btn'))), h("rtk-button", { key: 'c34600d27f421992e9c473d1ef9f5bae80f189a4', variant: this.canEndMeeting ? 'secondary' : 'danger', title: this.t('leave'), onClick: this.handleLeave, class: {
+                'secondary-btn': this.canEndMeeting,
+                'secondary-danger-btn': this.canEndMeeting,
+            } }, this.t('leave')), this.canEndMeeting && (h("rtk-button", { key: '8a90f55894d6922573209dcda4cd70d78b7d67d0', variant: "danger", onClick: this.handleEndMeeting }, this.t('end.all')))))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+    static get style() { return RtkLeaveMeetingStyle0; }
+}, [1, "rtk-leave-meeting", {
+        "meeting": [16],
+        "states": [16],
+        "iconPack": [16],
+        "t": [16],
+        "canEndMeeting": [32]
+    }, undefined, {
+        "meeting": ["meetingChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkLeaveMeeting.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkLeaveMeeting.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkLeaveMeeting.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkLeaveMeeting.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-leave-meeting", "rtk-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-leave-meeting":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkLeaveMeeting);
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkLeaveMeeting as R, defineCustomElement as d };

package/dist/components/p-bc68e74e.js

@@ -0,0 +1,128 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-3bfd5b6d.js';
+import { a as defaultIconPack, c as useLanguage } from './p-53b020e2.js';
+import { S as SyncWithStore } from './p-df6f9a3f.js';
+import { d as defineCustomElement$3 } from './p-ba1a0ebf.js';
+import { d as defineCustomElement$2 } from './p-bed2e1b5.js';
+import { d as defineCustomElement$1 } from './p-efc19d8d.js';
+
+const 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 };