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

package/dist/cjs/rtk-plugins_2.cjs.entry.js

@@ -0,0 +1,181 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-d3eba4b9.js');
+const uiStore = require('./ui-store-790d3fec.js');
+const index = require('./index-2154d3c1.js');
+const scroll = require('./scroll-c6404609.js');
+
+const rtkPluginsCss = ":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{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);display:flex;height:100%;width:100%;flex-direction:column;font-size:14px;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}h3{margin-left:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-0, 0px);margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-4, 16px);display:block;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}ul{overflow-y:auto;padding:var(--rtk-space-0, 0px);flex-grow:1;flex-basis:0}.metadata{display:flex;align-items:center}.metadata img{height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);border-radius:var(--rtk-border-radius-sm, 4px)}.metadata .name{margin-left:var(--rtk-space-2, 8px);font-weight:500}.plugin{display:flex;align-items:center;justify-content:space-between;padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px);padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px)}.plugin .buttons{display:flex;align-items:center}rtk-button:hover{--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(2px + 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-opacity:1;--tw-ring-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-ring-opacity));--tw-ring-offset-width:2px;--tw-ring-offset-color:rgb(var(--rtk-colors-background-1000, 8 8 8))}";
+const RtkPluginsStyle0 = rtkPluginsCss;
+
+var __decorate$1 = (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 RtkPlugins = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.stateUpdate = index$1.createEvent(this, "rtkStateUpdate", 7);
+        /** Config */
+        this.config = uiStore.defaultConfig;
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        this.plugins = [];
+        this.canStartPlugins = false;
+        this.canClosePlugins = false;
+        this.activatedPluginsId = [];
+        this.close = () => {
+            this.stateUpdate.emit({ activeSidebar: false, sidebar: undefined });
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.plugins.all.removeListener('stateUpdate', this.updateActivePlugins);
+    }
+    meetingChanged(meeting) {
+        if (meeting != null) {
+            this.canStartPlugins = meeting.self.permissions.plugins.canStart;
+            this.canClosePlugins = meeting.self.permissions.plugins.canClose;
+            this.plugins = meeting.plugins.all
+                .toArray()
+                .filter((plugin) => { var _a; return !((_a = meeting.self.config.disabledPlugins) === null || _a === void 0 ? void 0 : _a.includes(plugin.id)); });
+            this.updateActivePlugins = () => {
+                this.activatedPluginsId = meeting.plugins.active.toArray().map((p) => p.id);
+            };
+            this.updateActivePlugins();
+            meeting.plugins.all.addListener('stateUpdate', this.updateActivePlugins);
+        }
+    }
+    render() {
+        return (index$1.h(index$1.Host, { key: 'a4ef27530f9e18bc63f0c419219eb4ad0314a213' }, index$1.h("ul", { key: '348783b9aa3feb3a215a73a1f7fc1bb749c17da0', class: "scrollbar" }, this.plugins.map((plugin) => (index$1.h("li", { key: plugin.name, class: "plugin" }, index$1.h("div", { class: "metadata" }, index$1.h("img", { src: plugin.picture }), index$1.h("div", { class: "name" }, plugin.name)), !this.activatedPluginsId.includes(plugin.id) && this.canStartPlugins && (index$1.h("div", { class: "buttons" }, index$1.h("rtk-button", { kind: "icon", size: "lg", onClick: () => {
+                plugin.activate();
+                this.close();
+            }, "aria-label": `${this.t('activate')} ${plugin.name}` }, index$1.h("rtk-icon", { icon: this.iconPack.rocket, tabIndex: -1, "aria-hidden": true })))), this.activatedPluginsId.includes(plugin.id) && this.canClosePlugins && (index$1.h("div", { class: "buttons" }, index$1.h("rtk-button", { kind: "icon", size: "lg", onClick: () => {
+                plugin.deactivate();
+            }, "aria-label": `${this.t('close')} ${plugin.name}` }, index$1.h("rtk-icon", { icon: this.iconPack.dismiss, tabIndex: -1, "aria-hidden": true }))))))))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+};
+__decorate$1([
+    index.SyncWithStore()
+], RtkPlugins.prototype, "meeting", void 0);
+__decorate$1([
+    index.SyncWithStore()
+], RtkPlugins.prototype, "size", void 0);
+__decorate$1([
+    index.SyncWithStore()
+], RtkPlugins.prototype, "iconPack", void 0);
+__decorate$1([
+    index.SyncWithStore()
+], RtkPlugins.prototype, "t", void 0);
+RtkPlugins.style = RtkPluginsStyle0;
+
+const rtkPollsCss = ":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{margin-top:var(--rtk-space-2, 8px);display:flex;height:100%;width:100%;flex-direction:column;font-size:14px}*{box-sizing:border-box}.ctr{box-sizing:border-box;padding:var(--rtk-space-3, 12px);padding-top:var(--rtk-space-0, 0px);display:flex;flex:1 1 0%;flex-direction:column}.polls-view{overflow-y:auto;flex:1 1 0%;flex-basis:0}.empty-polls{display:flex;height:100%;width:100%;align-items:center;justify-content:center}";
+const RtkPollsStyle0 = rtkPollsCss;
+
+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 RtkPolls = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        /** Config */
+        this.config = uiStore.defaultConfig;
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        /** Create State */
+        this.create = false;
+        this.onPollsUpdate = (data) => {
+            this.polls = [...data.polls];
+        };
+        this.onUpdatePermissions = () => {
+            this.permissions = this.meeting.self.permissions;
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        var _a;
+        if (this.meeting == null)
+            return;
+        (_a = this.meeting.polls) === null || _a === void 0 ? void 0 : _a.removeListener('pollsUpdate', this.onPollsUpdate);
+        this.meeting.self.permissions.removeListener('pollsUpdate', this.onUpdatePermissions);
+    }
+    meetingChanged(meeting) {
+        if (meeting == undefined)
+            return;
+        if (meeting && !meeting.polls)
+            return;
+        this.permissions = this.meeting.self.permissions;
+        this.polls = [...meeting.polls.items];
+        meeting.polls.addListener('pollsUpdate', this.onPollsUpdate);
+        this.meeting.self.permissions.addListener('pollsUpdate', this.onUpdatePermissions);
+        this.onCreate = async (data) => {
+            this.create = false;
+            await meeting.polls.create(data.question, data.options, data.anonymous, data.hideVotes);
+        };
+        this.onVote = async (id, index) => {
+            await meeting.polls.vote(id, index);
+        };
+    }
+    toggleCreateState() {
+        this.create = !this.create;
+    }
+    componentDidRender() {
+        scroll.smoothScrollToBottom(this.pollEl);
+    }
+    render() {
+        return (index$1.h(index$1.Host, { key: '90670e63e9732cdaf7fb40b8fc5c83d23169ffc2' }, index$1.h("div", { key: 'e1b10652531d40deef0753eba00f5e42a6ace030', class: "ctr", part: "container" }, index$1.h("div", { key: 'ff8549851c499d5e52c7ea44ff02542a9216463b', class: "polls-view scrollbar", ref: (el) => (this.pollEl = el), part: "polls" }, this.polls.length == 0 && this.create !== true && (index$1.h("div", { key: 'cd06ef857955de65e4aaa60ee1b5419c379e1a9c', class: "empty-polls" }, this.t('polls.empty'))), this.polls.map((item) => {
+            var _a;
+            return (index$1.h("rtk-poll", { key: item.id, poll: item, onRtkVotePoll: (e) => {
+                    this.onVote(e.detail.id, e.detail.index);
+                }, self: (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self.userId, iconPack: this.iconPack, t: this.t, permissions: this.permissions }));
+        }), this.create && (index$1.h("rtk-poll-form", { key: '41f8908f7485faf89738cea1f2ccb816fb6c094f', part: "poll-form", onRtkCreatePoll: (e) => {
+                this.onCreate(e.detail);
+            }, iconPack: this.iconPack, t: this.t }))), this.permissions.polls.canCreate && (index$1.h("rtk-button", { key: 'd2b90f8c13da232af950d2653c1322f334df8181', kind: "wide", onClick: () => this.toggleCreateState(), variant: this.create ? 'secondary' : 'primary', part: "button" }, this.create ? this.t('polls.cancel') : this.t('polls.create'))))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkPolls.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkPolls.prototype, "size", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkPolls.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkPolls.prototype, "t", void 0);
+RtkPolls.style = RtkPollsStyle0;
+
+exports.rtk_plugins = RtkPlugins;
+exports.rtk_polls = RtkPolls;

package/dist/cjs/rtk-poll_2.cjs.entry.js

@@ -0,0 +1,142 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-d3eba4b9.js');
+const uiStore = require('./ui-store-790d3fec.js');
+const index = require('./index-2154d3c1.js');
+const string = require('./string-a410fab6.js');
+
+const rtkPollCss = ":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)))}.ctr{margin-bottom:var(--rtk-space-3, 12px);display:flex;width:100%;flex-direction:column;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.poll-title{margin-top:var(--rtk-space-3, 12px);margin-bottom:var(--rtk-space-3, 12px);margin-right:var(--rtk-space-4, 16px);font-size:12px}.poll{border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));display:flex;flex-direction:column;padding:var(--rtk-space-4, 16px)}.poll-question{padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);font-size:14px;overflow-wrap:break-word}.poll-answers{display:flex;flex-direction:row;justify-content:space-between;font-size:12px;margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-1, 4px);padding-left:var(--rtk-space-1, 4px);padding-right:var(--rtk-space-3, 12px)}.poll-option{display:flex;flex-direction:column;margin-top:var(--rtk-space-2, 8px);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));padding:var(--rtk-space-2, 8px);word-break:break-word}.poll-option.open-vote:hover{cursor:pointer}.poll-option label{display:flex;flex-direction:row;cursor:inherit}.poll-option-header{display:flex;flex-direction:row;justify-content:space-between;padding:var(--rtk-space-1, 4px)}.poll-option-header[data-disabled='true']:hover{cursor:default}.poll-option-header input{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-0, 0px);margin-left:var(--rtk-space-0\\.5, 2px);margin-right:var(--rtk-space-2, 8px);cursor:inherit}.poll-option-header .counter{color:rgb(var(--rtk-colors-text-1000, 255 255 255));font-size:12px}.votes{margin-top:var(--rtk-space-1, 4px);display:flex;flex-direction:row;flex-wrap:wrap}.vote{margin-right:var(--rtk-space-1, 4px);height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);display:flex;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-video-bg, 24 24 24) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255));border-radius:var(--rtk-border-radius-none, 0);clip-path:circle()}.active{--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-on-brand-900, var(--rtk-colors-text-900, 255 255 255 / 0.88)))}.active .counter{color:rgb(var(--rtk-colors-text-on-brand-900, var(--rtk-colors-text-900, 255 255 255 / 0.88)))}";
+const RtkPollStyle0 = rtkPollCss;
+
+var __decorate$1 = (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 RtkPolls = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.onVote = index$1.createEvent(this, "rtkVotePoll", 7);
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        this.MAX_VOTES_RENDER = 10;
+    }
+    vote(e, index) {
+        if (this.poll.voted.includes(this.self)) {
+            e.preventDefault();
+        }
+        else {
+            this.onVote.emit({ id: this.poll.id, index });
+        }
+    }
+    render() {
+        const hasVoted = this.poll.voted.includes(this.self);
+        return (index$1.h(index$1.Host, { key: 'd37f42807d5e9ff32cd1a675d917a15ef38c1a50' }, index$1.h("div", { key: '2defb5e6817c6e52ef9d174e9139106d9f971304', class: "ctr" }, index$1.h("p", { key: '1f62d9493e4412fb8120dd6a1cdac8102d4bfd3f', class: "poll-title" }, this.t('polls.by'), " ", string.shorten(string.formatName(this.poll.createdBy), 20)), index$1.h("div", { key: '75315b70802cd4040f3a9feafe424f329fd2b397', class: "poll" }, index$1.h("p", { key: '562f274b9c9a37c181491ec2a10bc60dfb9b2f2e', class: "poll-question" }, this.poll.question), index$1.h("div", { key: 'b683a6f2d4f019f2abc0ede2db00559ee251601d', class: "poll-answers" }, index$1.h("span", { key: '8470f3dfc7e3ae98af53264e395678bf4a1df7af' }, this.t('polls.answers')), index$1.h("span", { key: '2a8bbbb9b06b5ae990b6076028c1305f7c8551b8' }, this.poll.voted.length)), this.poll.options.map((item, index) => (index$1.h("div", { class: {
+                active: item.votes.some((x) => x.id === this.self),
+                'open-vote': this.permissions.polls.canVote && !hasVoted,
+                'poll-option': true,
+            } }, index$1.h("div", { class: "poll-option-header", "data-disabled": !this.permissions.polls.canVote }, index$1.h("label", null, !hasVoted && (index$1.h("input", { disabled: !this.permissions.polls.canVote, readOnly: hasVoted, type: "radio", checked: item.votes.some((x) => x.id === this.self), onClick: (e) => this.vote(e, index) })), index$1.h("p", null, item.text)), index$1.h("span", { class: "counter" }, item.count)), index$1.h("div", { class: "votes" }, item.votes.slice(0, this.MAX_VOTES_RENDER).map((vote) => {
+            if (this.poll.anonymous && this.self !== this.poll.createdByUserId)
+                return;
+            return (index$1.h("rtk-tooltip", { label: vote.name }, index$1.h("div", { class: "vote" }, string.getInitials(vote.name))));
+        }), item.votes.length > this.MAX_VOTES_RENDER && (index$1.h("rtk-tooltip", { label: `+${item.votes.length - this.MAX_VOTES_RENDER} more ` }, index$1.h("div", { class: "vote" }, "+", item.votes.length - this.MAX_VOTES_RENDER)))))))))));
+    }
+};
+__decorate$1([
+    index.SyncWithStore()
+], RtkPolls.prototype, "iconPack", void 0);
+__decorate$1([
+    index.SyncWithStore()
+], RtkPolls.prototype, "t", void 0);
+RtkPolls.style = RtkPollStyle0;
+
+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 = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.onCreate = index$1.createEvent(this, "rtkCreatePoll", 7);
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.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 (index$1.h(index$1.Host, { key: 'ce91372243197e68b2323889fe6768afcb13712d' }, index$1.h("div", { key: 'd7e688b9e924ed8677eea21f7ba7fde844d8127a', class: "create-poll" }, index$1.h("p", { key: 'c240dde8fc2e10b092990a24a4c48205927f6661' }, this.t('polls.question')), index$1.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) => (index$1.h("div", { class: "option" }, index$1.h("input", { placeholder: this.t('polls.option.placeholder'), value: item, onInput: (event) => this.updateOption(event, index) }), index > 1 && (index$1.h("rtk-button", { kind: "icon", class: "auto remove-option", variant: "secondary", onClick: () => this.removeOption(index) }, index$1.h("rtk-icon", { icon: this.iconPack.subtract })))))), index$1.h("rtk-button", { key: '18b094e5ed57c3fc67719820c21e04ce5a322bf7', class: "add-option", variant: "secondary", onClick: () => this.addOption() }, this.t('polls.option')), index$1.h("label", { key: '7466c849dbd7146fbc2e919ca240cf5b4ca87948' }, index$1.h("input", { key: '3523addb0bef26dd203ff0ace9cbc5c8e438a4dc', id: "anonymous", type: "checkbox", onChange: (e) => (this.anonymous = e.target.checked) }), this.t('polls.results.anon')), index$1.h("label", { key: '0948aeedab995e2807f65da59db206620e559677' }, index$1.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')), index$1.h("rtk-button", { key: 'ed358c58d852a658d5a32681ac948b3bcdc06935', kind: "wide", onClick: () => this.handleSubmit() }, this.t('polls.create')), this.error && index$1.h("span", { key: 'ff82ffba979eef3ed1e4c234e8a0656fa454d2c9', class: "error-text" }, this.error.message))));
+    }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkPoll.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkPoll.prototype, "t", void 0);
+RtkPoll.style = RtkPollFormStyle0;
+
+exports.rtk_poll = RtkPolls;
+exports.rtk_poll_form = RtkPoll;

package/dist/cjs/rtk-polls-toggle.cjs.entry.js

@@ -0,0 +1,110 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-d3eba4b9.js');
+const uiStore = require('./ui-store-790d3fec.js');
+const sidebar = require('./sidebar-864a0b7a.js');
+const index = require('./index-2154d3c1.js');
+
+const rtkPollsToggleCss = ":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:block}:host([data-hidden]){display:none}.unread-count{position:absolute;right:var(--rtk-space-3, 12px);box-sizing:border-box;padding:var(--rtk-space-0\\.5, 2px);-webkit-user-select:none;-moz-user-select:none;user-select:none;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));font-size:12px;color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));display:flex;height:var(--rtk-space-5, 20px);min-width:var(--rtk-space-5, 20px);align-items:center;justify-content:center;border-radius:9999px;z-index:1}:host([variant='horizontal']) .unread-count{right:var(--rtk-space-4, 16px);top:auto}";
+const RtkPollsToggleStyle0 = rtkPollsToggleCss;
+
+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 RtkPollsToggle = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.stateUpdate = index$1.createEvent(this, "rtkStateUpdate", 7);
+        /** Variant */
+        this.variant = 'button';
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        this.pollsActive = false;
+        this.unreadPollsCount = 0;
+        this.canViewPolls = false;
+        this.onPollsUpdate = ({ newPoll }) => {
+            if (newPoll === true)
+                this.unreadPollsCount += 1;
+        };
+        this.updateCanView = () => {
+            this.canViewPolls = sidebar.canViewPolls(this.meeting);
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+        this.statesChanged(this.states);
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d, _e, _f;
+        (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.polls) === null || _b === void 0 ? void 0 : _b.removeListener('pollsUpdate', this.onPollsUpdate);
+        (_d = (_c = this.meeting) === null || _c === void 0 ? void 0 : _c.self) === null || _d === void 0 ? void 0 : _d.permissions.removeListener('pollsUpdate', this.updateCanView);
+        (_f = (_e = this.meeting) === null || _e === void 0 ? void 0 : _e.stage) === null || _f === void 0 ? void 0 : _f.removeListener('stageStatusUpdate', this.updateCanView);
+    }
+    meetingChanged(meeting) {
+        var _a, _b;
+        if (meeting && meeting.polls) {
+            this.unreadPollsCount = meeting.polls.items.length;
+            this.meeting.polls.addListener('pollsUpdate', this.onPollsUpdate);
+            (_a = meeting === null || meeting === void 0 ? void 0 : meeting.self) === null || _a === void 0 ? void 0 : _a.permissions.addListener('pollsUpdate', this.updateCanView);
+            this.canViewPolls = sidebar.canViewPolls(meeting);
+            (_b = meeting === null || meeting === void 0 ? void 0 : meeting.stage) === null || _b === void 0 ? void 0 : _b.on('stageStatusUpdate', this.updateCanView);
+        }
+    }
+    statesChanged(states) {
+        if (states != null) {
+            this.pollsActive = states.activeSidebar === true && states.sidebar === 'polls';
+        }
+    }
+    togglePollsTab() {
+        const states = this.states;
+        this.unreadPollsCount = 0;
+        this.pollsActive = !((states === null || states === void 0 ? void 0 : states.activeSidebar) && (states === null || states === void 0 ? void 0 : states.sidebar) === 'polls');
+        this.stateUpdate.emit({
+            activeSidebar: this.pollsActive,
+            sidebar: this.pollsActive ? 'polls' : undefined,
+            activeMoreMenu: false,
+            activeAI: false,
+        });
+    }
+    render() {
+        if (!this.canViewPolls)
+            return index$1.h(index$1.Host, { "data-hidden": true });
+        const text = this.t('polls');
+        // TODO(callmetarush): Just showing polls for all V2 users irrespective of themes
+        // untill we get ui theme for V2.
+        return (index$1.h(index$1.Host, { title: text }, this.unreadPollsCount !== 0 && !this.pollsActive && (index$1.h("div", { class: "unread-count", part: "unread-count" }, index$1.h("span", null, this.unreadPollsCount <= 100 ? this.unreadPollsCount : '99+'))), index$1.h("rtk-controlbar-button", { part: "controlbar-button", size: this.size, iconPack: this.iconPack, class: { active: this.pollsActive }, onClick: () => this.togglePollsTab(), icon: this.iconPack.poll, label: text, variant: this.variant })));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"],
+        "states": ["statesChanged"]
+    }; }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkPollsToggle.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkPollsToggle.prototype, "states", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkPollsToggle.prototype, "size", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkPollsToggle.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkPollsToggle.prototype, "t", void 0);
+RtkPollsToggle.style = RtkPollsToggleStyle0;
+
+exports.rtk_polls_toggle = RtkPollsToggle;

package/dist/cjs/rtk-recording-indicator.cjs.entry.js

@@ -0,0 +1,70 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-d3eba4b9.js');
+const uiStore = require('./ui-store-790d3fec.js');
+const index = require('./index-2154d3c1.js');
+
+const rtkRecordingIndicatorCss = ":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{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);display:block}:host[size='sm']{margin-left:var(--rtk-space-1, 4px);margin-right:var(--rtk-space-1, 4px)}.indicator{display:flex;flex-direction:row;align-items:center;font-size:14px;--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}rtk-icon{margin-right:var(--rtk-space-1, 4px);height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px);animation:blink 4s linear infinite}:host([size='sm']) rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px)}:host([size='sm']) .indicator span{display:none}@keyframes blink{0%,10%{opacity:0}11%,100%{opacity:1}}";
+const RtkRecordingIndicatorStyle0 = rtkRecordingIndicatorCss;
+
+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 RtkRecordingIndicator = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        /** Language */
+        this.t = uiStore.useLanguage();
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        this.setIsRecording = (recordingState) => {
+            this.isRecording = recordingState === 'RECORDING';
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.recording.removeListener('recordingUpdate', this.updateRecordingStatus);
+    }
+    meetingChanged(meeting) {
+        if (meeting != null) {
+            this.setIsRecording(meeting.recording.recordingState);
+            this.updateRecordingStatus = (recordingState) => {
+                this.setIsRecording(recordingState);
+            };
+            meeting.recording.addListener('recordingUpdate', this.updateRecordingStatus);
+        }
+    }
+    render() {
+        return (index$1.h(index$1.Host, { key: 'b08cb38ca93d2db33679ac266e18063c4a2756cf' }, this.isRecording && (index$1.h("div", { key: '5ba29ae19d2b338f32ec07ec2ef2662c61a7b5f9', class: "indicator", "aria-label": this.t('recording.indicator'), part: "indicator" }, index$1.h("rtk-icon", { key: '6ed9ed4a1191ee245f4d1315fcf9f9a6c958687e', icon: this.iconPack.recording, "aria-hidden": true, tabIndex: -1, part: "icon" }), index$1.h("span", { key: 'c7bb79757e0b9ce8b4637645efbef75fb22e2a33' }, this.t('recording.label'))))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkRecordingIndicator.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkRecordingIndicator.prototype, "size", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkRecordingIndicator.prototype, "t", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkRecordingIndicator.prototype, "iconPack", void 0);
+RtkRecordingIndicator.style = RtkRecordingIndicatorStyle0;
+
+exports.rtk_recording_indicator = RtkRecordingIndicator;