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

package/dist/esm/rtk-leave-button.entry.js

@@ -31,7 +31,7 @@ const RtkLeaveButton = class {
     }
     render() {
         const text = this.t('leave');
-        return (h(Host, { key: 'ba1140c49eac63f9121a5b91f2a437b27e7e7d5e', label: text }, h("rtk-controlbar-button", { key: '1cc8dac1ea7130c47364c966af69c2d9dad3f96f', size: this.size, iconPack: this.iconPack, class: "leave red-icon", onClick: this.leave, icon: this.iconPack.call_end, label: text, variant: this.variant, part: "controlbar-button" })));
+        return (h(Host, { key: 'f9d5f5cbd3323721da299d2422fee1bd17c65535', label: text }, h("rtk-controlbar-button", { key: 'f33758dc5b8d3f31cfeefed9b7fd8e0a10b9fd76', size: this.size, iconPack: this.iconPack, class: "leave red-icon", onClick: this.leave, icon: this.iconPack.call_end, label: text, variant: this.variant, part: "controlbar-button" })));
     }
 };
 __decorate([

package/dist/esm/rtk-message-list-view.entry.js

@@ -262,11 +262,11 @@ const RtkMessageListView = class {
         this.updateTotalHeight();
     }
     render() {
-        return (h("div", { key: 'f01cd22002f542b67a7ca26773cf729a11969ebd', class: "scrollbar content-wrapper", ref: (el) => (this.$listRef = el), onScroll: this.handleScroll }, h("div", { key: '0f689c170ef60c6504b60b97003c8357e96c55f0', class: "scroller" }, h("div", { key: 'fd6049a7ef01203befb164ca74195c58de6af1e8', style: {
+        return (h("div", { key: '9c8a4073886acf540a8beeea0ac31f865231f771', class: "scrollbar content-wrapper", ref: (el) => (this.$listRef = el), onScroll: this.handleScroll }, h("div", { key: 'c64abddfc09ec7c88305b732df889f9de0597b53', class: "scroller" }, h("div", { key: 'c3e94f33890509b22f2b89022a76865f6776b217', style: {
                 height: `${this.totalHeight}px`,
-            } }), h("div", { key: 'd8e7bcadcb7fc673c10340a833aa6f165c002822', class: "smallest-dom-element", id: "list-end", ref: (el) => (this.$listEndRef = el) })), h("div", { key: '60ffb8b2bd40c001e72982830b523efe43784c07', class: "content", style: {
+            } }), h("div", { key: 'f8c95faa0af4b1f31465a113707f0e4f753dadad', class: "smallest-dom-element", id: "list-end", ref: (el) => (this.$listEndRef = el) })), h("div", { key: '02d045f8c54072388c3c7df52ff4c92f2438a545', class: "content", style: {
                 transform: `translateY(${this.getRangeSize(0, this.range.start)}px)`,
-            } }, this.isFetching && (h("div", { key: '65952d03af783bc807d6fd54047bfbffadf075e3', class: "loader" }, h("rtk-spinner", { key: 'f90da04d11e84ea6b2218df02eb5daa55fd7dfe7', size: "md" }))), this.getVisibleItems().map((msg, index) => (h("div", { key: msg.id, ref: (el) => this.rendererInternal(el, msg, index) }))))));
+            } }, this.isFetching && (h("div", { key: '7ba90240987e1ecfb553d69bd7465cb20bb86274', class: "loader" }, h("rtk-spinner", { key: '2fa19c46da125e4c5280625aefdf555f09ce2faa', size: "md" }))), this.getVisibleItems().map((msg, index) => (h("div", { key: msg.id, ref: (el) => this.rendererInternal(el, msg, index) }))))));
     }
     static get watchers() { return {
         "messages": ["messagesUpdated"]

package/dist/esm/rtk-more-toggle.entry.js

@@ -49,10 +49,10 @@ const RtkMoreToggle = class {
     }
     render() {
         const text = this.t('more');
-        return (h(Host, { key: 'e38ef12edf602c1c0a2f747e037559d91a2bb758', title: text }, this.states.activeMoreMenu && (h("div", { key: 'cbe27d79e4f10a0f7d35b94c80d378b251ae9005', class: "more-menu" }, h("slot", { key: '42f1083f8b554489bdf5795a595191f157048f5a', name: "more-elements" }))), h("rtk-controlbar-button", { key: 'd65281e925c0a77e22fb7f53518a915ddccdaf04', size: this.size, iconPack: this.iconPack, onClick: (e) => {
+        return (h(Host, { key: '16c3abc8550c71c16a99c3fccab792f102995142', title: text }, this.states.activeMoreMenu && (h("div", { key: 'bbe79e428f395a429586776c1cd53f3a4dafde72', class: "more-menu" }, h("slot", { key: '54bd0e016bce80d279d8e4214e8bf978e14f1c0a', name: "more-elements" }))), h("rtk-controlbar-button", { key: '242815c9b79d2f3c99f3289125756dbc2cff835f', size: this.size, iconPack: this.iconPack, onClick: (e) => {
                 e.stopPropagation();
                 this.toggleMoreMenu();
-            }, icon: this.iconPack.horizontal_dots, label: text, part: "controlbar-button" }), h("slot", { key: 'e2b04a67f5556cb41542ac8ca5c412f3a56db094', name: "expanded" })));
+            }, icon: this.iconPack.horizontal_dots, label: text, part: "controlbar-button" }), h("slot", { key: '7bd36f0994c7fd9ffe5591fd8b325ed521fbda6c', name: "expanded" })));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/rtk-notification.entry.js

@@ -47,9 +47,9 @@ const RtkNotification = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '4d38d6d1cd77ba50b1d4d45b116e81d2766b9f1e' }, h("div", { key: '62c6d20c5636933df92cec162cd865f1a50350b7', class: "ctr" }, this.notification.icon != null && (h("rtk-icon", { key: 'd6d97ebb84af555140a1e10e7e7141cbb8a47395', class: "icon", icon: this.notification.icon, variant: (_a = this.notification.iconVariant) !== null && _a !== void 0 ? _a : 'primary' })), this.notification.image != null &&
+        return (h(Host, { key: 'd8f87edf560d58d8c50524a8d5d15b78372e2f0a' }, h("div", { key: '0d1590baa03f69ae6b7aeb8ecfb0227393e68296', class: "ctr" }, this.notification.icon != null && (h("rtk-icon", { key: '65f2e9ca0e53e0d5f41301346930f60983218bff', class: "icon", icon: this.notification.icon, variant: (_a = this.notification.iconVariant) !== null && _a !== void 0 ? _a : 'primary' })), this.notification.image != null &&
             this.notification.icon == null &&
-            this.imageState !== 'errored' && (h("img", { key: 'ab54904adcba0be957260f86bc782fd2e58fcdeb', src: this.notification.image, class: { loaded: this.imageState === 'loaded' }, onLoad: () => (this.imageState = 'loaded'), onError: () => (this.imageState = 'errored') })), h("p", { key: '95b3ccba650df3098c7366c6c64ab58bde3bc128', class: "message" }, h(TextMessageView, { key: 'e958e9c20ab4646ebaf825bc2ba6875f86f459cf', message: this.notification.message })), h("div", { key: '9ae125712ac04f44ff92de8c5422b7644e65067a', class: "right" }, this.notification.button != null && (h("rtk-button", { key: '3da741b4ba6016743439d1e4fd7167d0a1681120', size: "sm", variant: this.notification.button.variant, onClick: () => this.notification.button.onClick() }, this.notification.button.text)), h("button", { key: 'cb1c277c825dca4cd9eb185475dc617d9efde90e', onClick: () => this.dismiss.emit(this.notification.id), class: "dismiss" }, h("rtk-icon", { key: '7b1b81d1aed31fab4ebb2b47d1adb512ceb9984f', "aria-label": this.t('dismiss'), icon: this.iconPack.dismiss }))))));
+            this.imageState !== 'errored' && (h("img", { key: '728d4bc0a6ba7978a7bf922dab208b0a53cca149', src: this.notification.image, class: { loaded: this.imageState === 'loaded' }, onLoad: () => (this.imageState = 'loaded'), onError: () => (this.imageState = 'errored') })), h("p", { key: 'f0908696b480de954e8d87f8588fb2d7caa05c9e', class: "message" }, h(TextMessageView, { key: '6727949c1a6100f04c58dfbceb32b65268dfbfd3', message: this.notification.message })), h("div", { key: '00f22a20100da8c6faa3d94b5cda8c37a201b953', class: "right" }, this.notification.button != null && (h("rtk-button", { key: 'd8e609d225ba6c8ff0aedad1efcaf84fd8f0183e', size: "sm", variant: this.notification.button.variant, onClick: () => this.notification.button.onClick() }, this.notification.button.text)), h("button", { key: '1fb7a3610c1197359f4c9f9e0a40ae67c2874447', onClick: () => this.dismiss.emit(this.notification.id), class: "dismiss" }, h("rtk-icon", { key: 'a13f8cb2e31921910b29aa53df15741cd78b860e', "aria-label": this.t('dismiss'), icon: this.iconPack.dismiss }))))));
     }
     static get watchers() { return {
         "paused": ["pausedChanged"],

package/dist/esm/rtk-participant-setup.entry.js

@@ -86,11 +86,11 @@ const RtkParticipantSetup = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '70cefbcd224011d31984bbccef75e7c389b39c53' }, h("video", { key: 'e86b57ba45fe602499522ad4d2ccdb0a9206f0b8', ref: (el) => (this.videoEl = el), class: {
+        return (h(Host, { key: '496e80e4d4c85229f6acc90d7caa46305c92e101' }, h("video", { key: 'b09d1e7ace8f7bb561997fcbddc41a7acbe91e51', ref: (el) => (this.videoEl = el), class: {
                 visible: (_a = this.videoState) === null || _a === void 0 ? void 0 : _a.videoEnabled,
                 mirror: this.isMirrored(),
                 [(_d = (_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.config) === null || _c === void 0 ? void 0 : _c.videoFit) !== null && _d !== void 0 ? _d : 'cover']: true,
-            }, autoPlay: true, playsInline: true, muted: true }), h("slot", { key: 'a685f9e334d4fb351d69917212634ef04d560ce9' })));
+            }, autoPlay: true, playsInline: true, muted: true }), h("slot", { key: 'da2678d7a8c226b23ffc6258fd90f3632efec30c' })));
     }
     static get watchers() { return {
         "participant": ["participantsChanged"],

package/dist/esm/rtk-participant_2.entry.js

@@ -399,12 +399,12 @@ const RtkVirtualizedParticipantList = class {
     render() {
         var _a;
         const totalHeight = this.items.length * this.itemHeight; // Total height of the list
-        return (h("div", { key: '80594f2356826b50b6f5ff18da86eca5c449f57d', class: "virtual-list-container", style: {
+        return (h("div", { key: '279498eedaa6605456a2fffc004bd0204179ffde', class: "virtual-list-container", style: {
                 position: 'relative',
                 height: '100%',
                 overflowX: 'hidden',
                 overflowY: 'auto',
-            } }, h("div", { key: '83a41cbae84dc79b3f13bcc7fffce56b56428258', style: { height: `${totalHeight}px`, position: 'relative' } }, !((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) ? this.emptyListElement : this.renderItems()), h("div", { key: '57078e5373c356494f77e38503d334d921181cca', style: { height: `${this.itemHeight}px` } })));
+            } }, h("div", { key: 'debb114c51c7c229b72cfcd7e87aa845ab6647e1', style: { height: `${totalHeight}px`, position: 'relative' } }, !((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) ? this.emptyListElement : this.renderItems()), h("div", { key: '7a97a5dd632fe6d4227674e46e091a1466c725bf', style: { height: `${this.itemHeight}px` } })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/rtk-participants-audio.entry.js

@@ -180,7 +180,7 @@ const RtkParticipantsAudio = class {
         await this.handleEvents(meeting);
     }
     render() {
-        return (h(Host, { key: 'a8475add44d320a002841f1a2dc5721b570640d6' }, this.showPlayDialog && (h("rtk-dialog", { key: 'ca12cb71cf7219ab280db551540f27ae20d06a03', open: true, onRtkDialogClose: this.onRtkDialogClose, hideCloseButton: true, disableEscapeKey: true, iconPack: this.iconPack, t: this.t }, h("div", { key: '55dfd687bcb08e7626b90fd8e746ce91278ca966', class: "modal" }, h("h3", { key: 'bcf35de807db566f3769f1537765ab04ced9ea3e' }, this.t('audio_playback.title')), h("p", { key: 'de10113d870ca2d7ea2673c6892e1ddae5276a86' }, this.t('audio_playback.description')), h("rtk-button", { key: '2197a6affa6ad0298cbd7c08fc3ecc43ac488cf6', kind: "wide", onClick: () => {
+        return (h(Host, { key: 'b4dc66ad5570492c73e3fc2d88f92c67de90c392' }, this.showPlayDialog && (h("rtk-dialog", { key: 'b0e893eee0ce675ba927f4bbb817ab7c0c4473f6', open: true, onRtkDialogClose: this.onRtkDialogClose, hideCloseButton: true, disableEscapeKey: true, iconPack: this.iconPack, t: this.t }, h("div", { key: 'a0f78ba76265d38a77dfbbe0bc680052f3d0393c', class: "modal" }, h("h3", { key: 'b150dc2862b2c626ecf27a5e78de86c98309ddee' }, this.t('audio_playback.title')), h("p", { key: 'f4a8eb77ba14a074eb105741240e3cb6765364bf' }, this.t('audio_playback.description')), h("rtk-button", { key: 'c6fc0f2d1e4d48f2d187fca780fafee841e69175', kind: "wide", onClick: () => {
                 this.audio.play();
                 this.onRtkDialogClose();
             }, title: this.t('audio_playback') }, this.t('audio_playback')))))));

package/dist/esm/rtk-participants-stage-list_4.entry.js

@@ -104,7 +104,7 @@ const RtkParticipants = class {
         }
     }
     render() {
-        return (h(Host, { key: 'ecc05db9075b4b8a70c3255c27958fc20bcf87cf' }, h("div", { key: '2bdf1aa213682d4ea175e10ccd2f87e437ace5c9', class: "participants-container" }, !this.hideHeader && (h("div", { key: '239593a2d551ab92d5cda3bcc3105d642b0c9c21', class: "heading-count", part: "heading-count" }, this.t('participants'), " (", this.participants.length, ")")), h("rtk-virtualized-participant-list", { key: '8ade637f0728fceb723370c8c7dd6e675eac0678', items: this.participants, renderItem: this.createParticipantNode, part: "participants", class: "participants", emptyListElement: h("div", { class: "empty-stage-list" }, this.search.length > 0 ? this.t('search.could_not_find') : this.t('search.empty')) }))));
+        return (h(Host, { key: '82b79281405ea4012121471e245fd23b3b9c7bc6' }, h("div", { key: '231fbe8a811f49a92f6b16fb06e7246aebee7b77', class: "participants-container" }, !this.hideHeader && (h("div", { key: '0398c09c5c203bb6e581d3c016910542f36ba0d5', class: "heading-count", part: "heading-count" }, this.t('participants'), " (", this.participants.length, ")")), h("rtk-virtualized-participant-list", { key: '7e33ce03b36d42fd91f360e7bcd19d08d77a5ac0', items: this.participants, renderItem: this.createParticipantNode, part: "participants", class: "participants", emptyListElement: h("div", { class: "empty-stage-list" }, this.search.length > 0 ? this.t('search.could_not_find') : this.t('search.empty')) }))));
     }
     static get watchers() { return {
         "meeting": ["meetingChanged"],

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

@@ -56,7 +56,7 @@ const RtkPlugins = class {
         }
     }
     render() {
-        return (h(Host, { key: 'b8623c629040c0554f3f49631c8af224327e04d8' }, h("ul", { key: '25c5ba591bb4ab8c516b9b839bd801489e6b6780', class: "scrollbar" }, this.plugins.map((plugin) => (h("li", { key: plugin.name, class: "plugin" }, h("div", { class: "metadata" }, h("img", { src: plugin.picture }), h("div", { class: "name" }, plugin.name)), !this.activatedPluginsId.includes(plugin.id) && this.canStartPlugins && (h("div", { class: "buttons" }, h("rtk-button", { kind: "icon", size: "lg", onClick: () => {
+        return (h(Host, { key: '14fa34c2c6d5ef9f1739b4b3a916ebf418b6f1e1' }, h("ul", { key: '705bf03c63c0848f80874277024ec91fad2ccfa1', class: "scrollbar" }, this.plugins.map((plugin) => (h("li", { key: plugin.name, class: "plugin" }, h("div", { class: "metadata" }, h("img", { src: plugin.picture }), h("div", { class: "name" }, plugin.name)), !this.activatedPluginsId.includes(plugin.id) && this.canStartPlugins && (h("div", { class: "buttons" }, h("rtk-button", { kind: "icon", size: "lg", onClick: () => {
                 plugin.activate();
                 this.close();
             }, "aria-label": `${this.t('activate')} ${plugin.name}` }, h("rtk-icon", { icon: this.iconPack.rocket, tabIndex: -1, "aria-hidden": true })))), this.activatedPluginsId.includes(plugin.id) && this.canClosePlugins && (h("div", { class: "buttons" }, h("rtk-button", { kind: "icon", size: "lg", onClick: () => {
@@ -149,14 +149,14 @@ const RtkPolls = class {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'fef552b1147fd9e2c225afdf34b9aba0c0e2e4b5' }, h("div", { key: '87dd153ca64208a012de65778f43b1d855b73bac', class: "ctr", part: "container" }, h("div", { key: 'cb58918d2c1d4cac8be9d8cba04b2860dcd80cd7', class: "polls-view scrollbar", ref: (el) => (this.pollEl = el), part: "polls" }, this.polls.length == 0 && this.create !== true && (h("div", { key: 'e03792733786017f2ddb8f75d7852dc417491025', class: "empty-polls" }, this.t('polls.empty'))), this.polls.map((item) => {
+        return (h(Host, { key: '0e868573a28a637e9df91a0c2e10bc1a73da2848' }, h("div", { key: '63cf282074f7c9eb248c4a645f6798001379907b', class: "ctr", part: "container" }, h("div", { key: '3237128bcbff4b513970e9832f26326a8be1cf56', class: "polls-view scrollbar", ref: (el) => (this.pollEl = el), part: "polls" }, this.polls.length == 0 && this.create !== true && (h("div", { key: '12b3c463d0f63f0a62ab33f17c0f18bb44fa0408', class: "empty-polls" }, this.t('polls.empty'))), this.polls.map((item) => {
             var _a;
             return (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 && (h("rtk-poll-form", { key: 'b7489db77028a96177a6e8df6ba1bfc81893ff99', part: "poll-form", onRtkCreatePoll: (e) => {
+        }), this.create && (h("rtk-poll-form", { key: 'fb8b90bb86654aa8742ced745f88e5fbdc9282bf', part: "poll-form", onRtkCreatePoll: (e) => {
                 this.onCreate(e.detail);
-            }, iconPack: this.iconPack, t: this.t }))), ((_b = (_a = this.permissions) === null || _a === void 0 ? void 0 : _a.polls) === null || _b === void 0 ? void 0 : _b.canCreate) && (h("rtk-button", { key: '135391084ad419b455a173f2b6dcbea2a14725b5', kind: "wide", onClick: () => this.toggleCreateState(), variant: this.create ? 'secondary' : 'primary', part: "button" }, this.create ? this.t('polls.cancel') : this.t('polls.create'))))));
+            }, iconPack: this.iconPack, t: this.t }))), ((_b = (_a = this.permissions) === null || _a === void 0 ? void 0 : _a.polls) === null || _b === void 0 ? void 0 : _b.canCreate) && (h("rtk-button", { key: '7fffe35088db7620b4301145c6efa2f6da05153c', 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"]

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

@@ -36,7 +36,7 @@ const RtkPolls = class {
     }
     render() {
         const hasVoted = this.poll.voted.includes(this.self);
-        return (h(Host, { key: 'f825c3370a59a54fc09a618f9902909c99c1897b' }, h("div", { key: '6f50f60ba0dd91522bad0354fa0d3f439e8673f4', class: "ctr" }, h("p", { key: '76188610303bc72ff364c5c6ce47dc0ab27cc5db', class: "poll-title" }, this.t('polls.by'), " ", shorten(formatName(this.poll.createdBy), 20)), h("div", { key: '4274bb5f2f45e4974d57ebe97e05bfafa06b680f', class: "poll" }, h("p", { key: '13abbdfb31636c3c884ac8890b5af55772b6db63', class: "poll-question" }, this.poll.question), h("div", { key: 'b656224c72f15911e797a902d70900a4f7c4e6f3', class: "poll-answers" }, h("span", { key: '8a4ce79b941317f2064325d35e3fa238ce674002' }, this.t('polls.answers')), h("span", { key: '5326355795e2b01397d00e6bf227854d8d0bb344' }, this.poll.voted.length)), this.poll.options.map((item, index) => (h("div", { class: {
+        return (h(Host, { key: '69e61c49e0f7f2015538447a8862bdb7fd3b4840' }, h("div", { key: '00dec58cb19f30a4fc01926dd383edb270cd61c3', class: "ctr" }, h("p", { key: '04d88ddf1f20e1a7e5b017f058b585723498f474', class: "poll-title" }, this.t('polls.by'), " ", shorten(formatName(this.poll.createdBy), 20)), h("div", { key: '5432167291df04bc4a4bfa23117df79c8512027d', class: "poll" }, h("p", { key: 'bee55a8193f96f582cf1c3006393740ab652dea7', class: "poll-question" }, this.poll.question), h("div", { key: 'aefe01131512e992e756196b5b451d4423bb9635', class: "poll-answers" }, h("span", { key: '973f566c9d84a6519f7ab307fd072215fe76f72d' }, this.t('polls.answers')), h("span", { key: '2a87b4bd72b99916cf20070c792742d04c1a44ca' }, this.poll.voted.length)), this.poll.options.map((item, index) => (h("div", { class: {
                 active: item.votes.some((x) => x.id === this.self),
                 'open-vote': this.permissions.polls.canVote && !hasVoted,
                 'poll-option': true,
@@ -120,10 +120,10 @@ const RtkPoll = class {
         this.onCreate.emit(pollObject);
     }
     render() {
-        return (h(Host, { key: '5e4a500a4c7b96e628435f658a9442cee8754dba' }, h("div", { key: 'aafaec9249f0930c7595ed50849cec99dad8fa43', class: "create-poll" }, h("p", { key: '936655c0b3f39bb809a721e61feddf0cf4035d35' }, this.t('polls.question')), h("textarea", { key: '4c1d38f04b0e2a8c5479988866343fd16598e6bd', onInput: () => {
+        return (h(Host, { key: 'ff160dd70e52bfa8a0c5116acea73a16cb84b9b8' }, h("div", { key: '2f14946249e12cbc38db8cca86d370030286dc8e', class: "create-poll" }, h("p", { key: 'a6e3704c58e3526aa2e0f517f529c7ee48627f30' }, this.t('polls.question')), h("textarea", { key: '6b076d162f80cc4e08ecc9379e829f37d43d06bb', 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: '168d81435e110be82fb4999d2e1570b64b4dba58', class: "add-option", variant: "secondary", onClick: () => this.addOption() }, this.t('polls.option')), h("label", { key: 'f63479661285aa0e5b1d5493d1a07e5e72548f82' }, h("input", { key: '7a32324160cded505eebcaf8871221d932d6d3ba', id: "anonymous", type: "checkbox", onChange: (e) => (this.anonymous = e.target.checked) }), this.t('polls.results.anon')), h("label", { key: 'b867ec10897e8e8a7b482350a09d9cf8025edb69' }, h("input", { key: 'ab9648514667805df67eb1f63cb803759ff3250f', 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: 'afbb0724017966cd5e1923baf0c1d21d26a6d9ec', kind: "wide", onClick: () => this.handleSubmit() }, this.t('polls.create')), this.error && h("span", { key: '0247f46fbcaa64c5148f21a547fdc91da940b457', class: "error-text" }, this.error.message))));
+            }, 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: 'be4055b21c6c810d0721fe2daf3308011b2c6d8f', class: "add-option", variant: "secondary", onClick: () => this.addOption() }, this.t('polls.option')), h("label", { key: '0e22f9da27289adf831d5a9458237aa11758fd41' }, h("input", { key: '577da1d275259a4e9ebffedf153f52e799172c42', id: "anonymous", type: "checkbox", onChange: (e) => (this.anonymous = e.target.checked) }), this.t('polls.results.anon')), h("label", { key: 'c06bcbfb6d15125c614764002985d20713e672a4' }, h("input", { key: '9e9bb29126ed51c0bbd06481b44f690d737fbb64', 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: 'ab48323f46db1f6e485bea960f6d7ec6bb684075', kind: "wide", onClick: () => this.handleSubmit() }, this.t('polls.create')), this.error && h("span", { key: '1d61b167ee24001d0b66acdb361262bf7f2ffcc6', class: "error-text" }, this.error.message))));
     }
 };
 __decorate([

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

@@ -43,7 +43,7 @@ const RtkRecordingIndicator = class {
         }
     }
     render() {
-        return (h(Host, { key: '440f9571742424afdd5a8a359d3dda3e606c11b2', "data-hidden": !this.isRecording }, this.isRecording && (h("div", { key: '0ce171e7f3f0ace231e2ddec4df84123834799b9', class: "indicator", "aria-label": this.t('recording.indicator'), part: "indicator" }, h("rtk-icon", { key: 'ad80d15b7c8790082ff77923fd4efefe85cbac02', icon: this.iconPack.recording, "aria-hidden": true, tabIndex: -1, part: "icon" }), h("span", { key: '46325b55914de856f06be2465af456d1caa7ba6d' }, this.t('recording.label'))))));
+        return (h(Host, { key: 'c4246e4721b0ca5fbc689a90688f1239df60ecad', "data-hidden": !this.isRecording }, this.isRecording && (h("div", { key: 'ce19b3649bba8a91cd22770534762c932b934557', class: "indicator", "aria-label": this.t('recording.indicator'), part: "indicator" }, h("rtk-icon", { key: '9d2ae89fef0d4e1e0d3546f765f48be8a6da6b5a', icon: this.iconPack.recording, "aria-hidden": true, tabIndex: -1, part: "icon" }), h("span", { key: 'cedf044a1a96c164022d734be2baf7e568fb849e' }, this.t('recording.label'))))));
     }
     static get watchers() { return {
         "meeting": ["meetingChanged"]

package/dist/esm/rtk-screenshare-view.entry.js

@@ -105,7 +105,7 @@ const RtkScreenshareView = class {
         const icon = this.isFullScreen
             ? this.iconPack.full_screen_minimize
             : this.iconPack.full_screen_maximize;
-        return (h(Host, { key: 'df55771dd36de2c1014e47c8d713b6d1d7ef08ad', class: { isSelf } }, h("div", { key: "video-container", id: "video-container", class: { expand: this.videoExpanded } }, h("video", { key: '83fe484dc37fce119266950f3584b8af79fcc14b', ref: (el) => (this.videoEl = el), class: {
+        return (h(Host, { key: '9ee4407d83a5b437f91813eedec6fd0836620a8c', class: { isSelf } }, h("div", { key: "video-container", id: "video-container", class: { expand: this.videoExpanded } }, h("video", { key: 'bfbee68ee2700aba43d1aae85a8456c40dc55244', ref: (el) => (this.videoEl = el), class: {
                 visible: this.screenShareEnabled,
                 'fit-in-container': this.participant.supportsRemoteControl,
             }, playsInline: true, onPlay: () => {
@@ -113,15 +113,15 @@ const RtkScreenshareView = class {
                     screenshareParticipant: this.participant,
                     participant: this.meeting.self,
                 });
-            }, autoPlay: true, muted: true, id: `screen-share-video-${this.participant.id}` })), h("div", { id: "controls", key: "controls" }, !this.hideFullScreenButton && !isSelf && isFullScreenSupported() && (h("rtk-tooltip", { key: '6b27dd39bea31267c5e3167aa3e5d922955c27cd', label: text }, h("rtk-button", { key: '2421ac7332eac3ff164412adcabfad0a0260a4af', id: "full-screen-btn", kind: "icon", onClick: this.toggleFullScreen, title: text }, h("rtk-icon", { key: '98480f5f702d93bdcfaa98afd317eccaa053a5d1', icon: icon, "aria-hidden": true, tabIndex: -1 }))))), isSelf && (h("div", { id: "self-message", key: "self-message" }, h("h3", { key: '66d58882193ac51ee9527934a9203fd66d7d7c52' }, this.t('screenshare.shared')), h("div", { key: '023c29fddee876bccef4052c51197b759a6bab2e', class: "actions" }, this.meeting != null && (h("rtk-button", { key: 'c267d7178808f282c7c6d275c449bcaab934bc08', variant: "danger", onClick: () => {
+            }, autoPlay: true, muted: true, id: `screen-share-video-${this.participant.id}` })), h("div", { id: "controls", key: "controls" }, !this.hideFullScreenButton && !isSelf && isFullScreenSupported() && (h("rtk-tooltip", { key: '25d8a59dae9afe875761f4ecaaae6d8f0c12792c', label: text }, h("rtk-button", { key: '9b294b9b0a987c8e54f6bca1ab3edc3e1a5238f9', id: "full-screen-btn", kind: "icon", onClick: this.toggleFullScreen, title: text }, h("rtk-icon", { key: 'd768caec415a0b75f42d39cfb15f3821264046da', icon: icon, "aria-hidden": true, tabIndex: -1 }))))), isSelf && (h("div", { id: "self-message", key: "self-message" }, h("h3", { key: '7f4802409d87bb07dedac257e75f3e1d23ca4757' }, this.t('screenshare.shared')), h("div", { key: 'acd80c0b62e14b88c1a0c717814dcdc49c1c5a40', class: "actions" }, this.meeting != null && (h("rtk-button", { key: '721fc83372b3a9752b06fbffa61072f88aa9e1b0', variant: "danger", onClick: () => {
                 this.meeting.self.disableScreenShare();
-            } }, h("rtk-icon", { key: 'bc63ef8e2f217a6b87e99d99e7e4098474d05b39', icon: this.iconPack.share_screen_stop, slot: "start" }), this.t('screenshare.stop'))), h("rtk-button", { key: '397f312bbd347f61566df2659c75f82de34b3808', variant: "secondary", id: "expand-btn", onClick: () => {
+            } }, h("rtk-icon", { key: '7aa2e4a597a1411e000209c6db95babf9c7f0366', icon: this.iconPack.share_screen_stop, slot: "start" }), this.t('screenshare.stop'))), h("rtk-button", { key: '4243b29230fc663db287f7db50dd4b5a8345a9bd', variant: "secondary", id: "expand-btn", onClick: () => {
                 this.videoExpanded = !this.videoExpanded;
-            } }, h("rtk-icon", { key: 'feaf388308067f245ec3ed422d2591db23001ba3', icon: this.videoExpanded
+            } }, h("rtk-icon", { key: '09c4a34f83662e5d1749e1dfd449d25da92c9976', icon: this.videoExpanded
                 ? this.iconPack.full_screen_minimize
                 : this.iconPack.full_screen_maximize, slot: "start" }), this.videoExpanded
             ? this.t('screenshare.min_preview')
-            : this.t('screenshare.max_preview'))))), h("slot", { key: '794b21a6d0df0eb104a56efd930e7e52ee1c5fcb' })));
+            : this.t('screenshare.max_preview'))))), h("slot", { key: 'a2046aecd50bc6fc0b8fb94a781bdd25c1d491ea' })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/rtk-settings-toggle.entry.js

@@ -33,7 +33,7 @@ const RtkSettingsToggle = class {
     }
     render() {
         const text = this.t('settings');
-        return (h(Host, { key: '61f238a38d98cee571d84ea45c45a9bebd9cea51', title: text }, h("rtk-controlbar-button", { key: 'f1610cd64dd69d941b4d58eea5ec02b52e811bfe', part: "controlbar-button", size: this.size, iconPack: this.iconPack, onClick: () => this.toggleSettings(), icon: this.iconPack.settings, label: text, variant: this.variant })));
+        return (h(Host, { key: '921afc41ed4a6019ff882c896855ab455b3edfb7', title: text }, h("rtk-controlbar-button", { key: '88d4194fee24f1b96769e06e3a935d516ad543b0', part: "controlbar-button", size: this.size, iconPack: this.iconPack, onClick: () => this.toggleSettings(), icon: this.iconPack.settings, label: text, variant: this.variant })));
     }
 };
 __decorate([

package/dist/esm/rtk-setup-screen.entry.js

@@ -32,13 +32,26 @@ const RtkSetupScreen = class {
         this.canProduceAudio = true;
         this.socketStateUpdate = ({ state }) => {
             this.connectionState = state;
+            if (state === 'connected') {
+                this.joinError = undefined;
+            }
             if (state === 'failed')
                 this.isJoining = false;
         };
         this.join = async () => {
             var _a, _b, _c;
             if (((_a = this.displayName) === null || _a === void 0 ? void 0 : _a.trim()) !== '' && !this.isJoining) {
+                if (this.connectionState !== 'connected') {
+                    if (this.connectionState) {
+                        this.joinError =
+                            this.connectionState === 'failed'
+                                ? this.t('network.lost_extended')
+                                : this.t('network.lost');
+                    }
+                    return;
+                }
                 this.isJoining = true;
+                this.joinError = undefined;
                 (_b = this.meeting) === null || _b === void 0 ? void 0 : _b.self.setName(this.displayName);
                 gracefulStorage.setItem('rtk-display-name', this.displayName);
                 try {
@@ -46,6 +59,7 @@ const RtkSetupScreen = class {
                 }
                 catch (e) {
                     this.isJoining = false;
+                    this.joinError = (e === null || e === void 0 ? void 0 : e.message) ? e.message : this.t('network.lost_extended');
                 }
             }
         };
@@ -74,6 +88,12 @@ const RtkSetupScreen = class {
         if (!this.meeting) {
             return;
         }
+        const showSocketError = !!this.connectionState && this.connectionState !== 'connected' && !this.joinError;
+        const errorText = this.joinError
+            ? this.joinError
+            : this.connectionState === 'failed'
+                ? this.t('network.lost_extended')
+                : this.t('network.lost');
         const disabled = ((_a = this.displayName) === null || _a === void 0 ? void 0 : _a.trim()) === '' || this.connectionState !== 'connected' || this.isJoining;
         const defaults = {
             meeting: this.meeting,
@@ -92,9 +112,7 @@ const RtkSetupScreen = class {
                 if (e.key === 'Enter') {
                     this.join();
                 }
-            } }))) : (h("div", { class: "uneditable-name" }, h("span", { class: "text" }, this.t('setup_screen.join_in_as'), " "), ' ', h("div", { class: "name" }, shorten(this.displayName, 20)))), h("rtk-button", { size: "lg", kind: "wide", onClick: this.join, disabled: disabled }, this.isJoining ? h("rtk-spinner", { iconPack: this.iconPack }) : this.t('join')), this.connectionState !== 'connected' && (h("div", { class: "no-network-badge" }, h("rtk-icon", { size: "md", variant: "danger", icon: this.iconPack.disconnected }), this.connectionState === 'failed'
-            ? this.t('network.lost_extended')
-            : this.t('network.lost')))))));
+            } }))) : (h("div", { class: "uneditable-name" }, h("span", { class: "text" }, this.t('setup_screen.join_in_as'), " "), ' ', h("div", { class: "name" }, shorten(this.displayName, 20)))), h("rtk-button", { size: "lg", kind: "wide", onClick: this.join, disabled: disabled }, this.isJoining ? h("rtk-spinner", { iconPack: this.iconPack }) : this.t('join')), (this.joinError || showSocketError) && (h("div", { class: "no-network-badge" }, h("rtk-icon", { size: "md", variant: "danger", icon: this.iconPack.disconnected }), errorText))))));
     }
     static get watchers() { return {
         "meeting": ["meetingChanged"]

package/dist/esm/rtk-sidebar-ui.entry.js

@@ -69,11 +69,11 @@ const RtkSidebarUi = class {
     render() {
         const isFullScreen = this.view === 'full-screen';
         const activeTab = this.tabs.find((tab) => tab.id === this.currentTab);
-        return (h(Host, { key: 'c82b2c0115417c6da59813f5dda1f306cf8ddba6', ref: (el) => (this.hostEl = el), class: this.view }, !this.hideCloseAction && (h("rtk-button", { key: '3edc83cd51bc361031bc3a6ef6790c8f8158c696', ref: (el) => (this.closeButton = el), variant: "ghost", kind: "icon", class: "close", onClick: this.onClose, "aria-label": this.t('close') }, h("rtk-icon", { key: 'd519be5840e46b9b0ca594fb7783f4432ee2df2a', icon: this.iconPack.dismiss }))), activeTab && !this.hideHeader && (h("header", { key: '097e785b39dd9fdc678e7029638faa7b897878b1', class: "main-header" }, h("h3", { key: 'bf75453843c0fe9ec2df142cfc08e9e1767768a6' }, activeTab.name), h("slot", { key: 'fadc034a7574c72cba40f1e1a365b044622b9ebb', name: "pinned-state" }))), isFullScreen && (h("header", { key: 'd75a18fc3bf34d462e036d0ffd235a3cdd59cc22', class: "mobile-tabs" }, this.tabs.map((tab) => (h("button", { onClick: () => {
+        return (h(Host, { key: '239f279ceccceeaa57181d4a71f3e04ede4132ce', ref: (el) => (this.hostEl = el), class: this.view }, !this.hideCloseAction && (h("rtk-button", { key: '921847fd946de305dce6f1fc7fe8a9ff175e38ee', ref: (el) => (this.closeButton = el), variant: "ghost", kind: "icon", class: "close", onClick: this.onClose, "aria-label": this.t('close') }, h("rtk-icon", { key: '1de9f1edf8ecce2d0390b7b8a1253de02affd9d1', icon: this.iconPack.dismiss }))), activeTab && !this.hideHeader && (h("header", { key: '4cd288feeb658e62d3ad1efd47aea237119918e1', class: "main-header" }, h("h3", { key: 'd6c4129537b4e090f3c429c66057be9a1072a864' }, activeTab.name), h("slot", { key: 'dfb1ea30cfa476b515a3a4b628c036083f1fe0a5', name: "pinned-state" }))), isFullScreen && (h("header", { key: '7dafb426628960ba26718530417854a533de3664', class: "mobile-tabs" }, this.tabs.map((tab) => (h("button", { onClick: () => {
                 this.tabChange.emit(tab.id);
             }, class: {
                 active: this.currentTab === tab.id,
-            } }, tab.name))))), h("slot", { key: 'b11a84e677553f44e51b0f0b7209ddc769a8094e', name: this.currentTab })));
+            } }, tab.name))))), h("slot", { key: '2696ccd9fcad418ad7738164cd5a9e6305320899', name: this.currentTab })));
     }
     static get watchers() { return {
         "currentTab": ["handleFocusCloseButton"]

package/dist/esm/rtk-spotlight-grid.entry.js

@@ -67,13 +67,13 @@ const RtkSpotlightGrid = class {
             t: this.t,
         };
         const nonPinnedParticipants = this.participants.filter((p) => this.pinnedParticipants.some((pt) => pt.id != p.id));
-        return (h(Host, { key: 'ae7a59ab30389858e0e858e45715703b5ff70a64' }, h("main", { key: 'c654fa973b878dfedcbf50d4cd721ead7c934823', part: "main" }, h(Render, { key: '76977fe2c71d9f5bb6fc1db0ea3b0a1fec953342', element: "rtk-simple-grid", defaults: defaults, props: {
+        return (h(Host, { key: '1cb846cc92b660a8244d16a74f48dfadcef903b6' }, h("main", { key: '8564f8b0bf6e7bd668132e2833fe73c73855d090', part: "main" }, h(Render, { key: '61b96f305727dc74de15f4c3c645069d6300afd9', element: "rtk-simple-grid", defaults: defaults, props: {
                 part: 'main-grid',
                 participants: this.pinnedParticipants,
                 aspectRatio: this.aspectRatio,
                 gap: this.gap,
                 size: this.getAdaptiveSize(this.pinnedParticipants.length),
-            } })), nonPinnedParticipants.length > 0 && (h("aside", { key: 'c4472ba092926b8252309ccb705ab176c9f778d3', part: "aside", class: this.gridSize.spotlight ? `grid-width-${this.gridSize.spotlight}` : 'grid-width-md' }, h(Render, { key: 'e7b636cc6dd46a7c4b9771070df8531d239fc0c0', element: "rtk-simple-grid", defaults: defaults, props: {
+            } })), nonPinnedParticipants.length > 0 && (h("aside", { key: '2e297a8d83c1f7241d8688b643c055331d69299b', part: "aside", class: this.gridSize.spotlight ? `grid-width-${this.gridSize.spotlight}` : 'grid-width-md' }, h(Render, { key: '2c1969c610018dfb0a23308316f072e3b8d87a6e', element: "rtk-simple-grid", defaults: defaults, props: {
                 part: 'aside-grid',
                 participants: nonPinnedParticipants,
                 aspectRatio: this.aspectRatio,

package/dist/esm/rtk-stage.entry.js

@@ -25,7 +25,7 @@ const RtkStage = class {
         this.t = useLanguage();
     }
     render() {
-        return (h(Host, { key: '080bd127c4c95f790680c3c7a7fc3b017d338c63' }, h("slot", { key: '7de16a4fbc2940c4b5dd7a9f564ecc1792f7c0fc' })));
+        return (h(Host, { key: '681977138d7984d09fce875a7de3ccf763dbe3f7' }, h("slot", { key: '8412278c7a9491758d6cc0b96b262b616a8ba04f' })));
     }
 };
 __decorate([

package/dist/esm/rtk-transcript.entry.js

@@ -40,7 +40,7 @@ const RtkTranscript = class {
         }, 10000);
     }
     render() {
-        return (h(Host, { key: '1ef3069a15bd4ad0a8640e4caca8848827caae76' }, h("div", { key: 'f83ec302741a682c167759499a96827e860d4d10', class: "ctr" }, h("p", { key: 'e2f8c1217b7356c9ac1512d5b7829665811aec23', class: "message" }, h("span", { key: 'facedc310aadcbd93f2739e08eaa269c7ec11432', class: "name" }, this.transcript.name), ": ", this.transcript.transcript))));
+        return (h(Host, { key: '0c5388d7f66dc55a13ccd85b83292bacfe4d1c7a' }, h("div", { key: '3b1684efa2f6b9e5653cec33572ffe41654460e9', class: "ctr" }, h("p", { key: 'b055b2371877d999c7ac60ff67f1c7ece9e4ec42', class: "message" }, h("span", { key: '283903c7e3cd282f6f377e93bd13faba265acdd8', class: "name" }, this.transcript.name), ": ", this.transcript.transcript))));
     }
     static get watchers() { return {
         "transcript": ["transcriptChanged"]

package/dist/esm/rtk-waiting-screen.entry.js

@@ -26,7 +26,7 @@ const RtkWaitingScreen = class {
         this.t = useLanguage();
     }
     render() {
-        return (h(Host, { key: '3dabde5229cc774205c261f4d75898fabb13664c' }, h("slot", { key: 'aee4650d8108dd7ca85a1894aed69585c56dc071' }, h("div", { key: '81675717c6d563e24ab0768ca2ee2d42f82951d1', class: "centered", part: "content" }, h("rtk-logo", { key: '7bfa23389008d7174a2ab2538c046d8e11c74d89', meeting: this.meeting, config: this.config, part: "logo", t: this.t }), h("p", { key: 'ee05c7dfd65465ea9bf8f0064793f7c77b8fb3c8' }, this.t('waitlist.body_text'))))));
+        return (h(Host, { key: 'ac7096bd5df59387dcef15bbd4ef8955a4a42298' }, h("slot", { key: '6dd0f5b9555c956c1371311ef3c4ac8f661e9523' }, h("div", { key: '07925b636545e1196b10512cd504516df2cfbbf4', class: "centered", part: "content" }, h("rtk-logo", { key: '9b3fcf182d7c68aaf525a8170dbab9e59fc40404', meeting: this.meeting, config: this.config, part: "logo", t: this.t }), h("p", { key: '763a6403bc98a16f020101090bbed250041ae7cd' }, this.t('waitlist.body_text'))))));
     }
 };
 __decorate([

package/dist/realtimekit-ui/{p-10d4354c.entry.js → p-0511529f.entry.js}

@@ -1 +1 @@
-import{r as n,d as t,e,h as a,a as i,g as r}from"./p-a599f720.js";import{e as o,i as s}from"./p-8fc79c56.js";import{i as c,r as d,e as l,a as p}from"./p-02f19345.js";import{S as h}from"./p-315cd380.js";var f=function(n,t,e,a){var i,r=arguments.length,o=r<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,e):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(n,t,e,a);else for(var s=n.length-1;s>=0;s--)(i=n[s])&&(o=(r<3?i(o):r>3?i(t,e,o):i(t,e))||o);return r>3&&o&&Object.defineProperty(t,e,o),o};const g=class{constructor(e){n(this,e),this.stateUpdate=t(this,"rtkStateUpdate",7),this.play=t(this,"screensharePlay",7),this.fullScreenListener=()=>{this.isFullScreen=c()},this.participantScreenshareUpdate=n=>{n.id===this.participant.id&&this.screenShareListener(n)},this.hideFullScreenButton=!1,this.nameTagPosition="bottom-left",this.variant="solid",this.iconPack=o,this.t=s(),this.videoExpanded=!1,this.screenShareEnabled=!1,this.isFullScreen=!1,this.toggleFullScreen=()=>{this.isFullScreen?(l(),this.isFullScreen=!1):(d(this.host),this.isFullScreen=!0)}}connectedCallback(){null===window||void 0===window||window.addEventListener("fullscreenchange",this.fullScreenListener),null===window||void 0===window||window.addEventListener("webkitfullscreenchange",this.fullScreenListener)}componentDidLoad(){this.participantChanged(this.participant)}disconnectedCallback(){if(!this.meeting)return;const{self:n}=this.meeting;this.participant.id===n.id&&this.screenShareListener?this.participant.removeListener("screenShareUpdate",this.screenShareListener):this.meeting.participants.joined.removeListener("screenShareUpdate",this.participantScreenshareUpdate),null===window||void 0===window||window.removeEventListener("fullscreenchange",this.fullScreenListener),null===window||void 0===window||window.removeEventListener("webkitfullscreenchange",this.fullScreenListener)}participantChanged(n){if(null!=n&&this.meeting){const{self:t}=this.meeting;this.screenShareListener=({screenShareEnabled:n,screenShareTracks:t})=>{const a=n&&null!=t.video;if(e((()=>{this.screenShareEnabled=a})),a){const n=new MediaStream;n.addTrack(t.video),null!=this.videoEl&&(this.videoEl.srcObject=n,this.videoEl.play())}else null!=this.videoEl&&(this.videoEl.srcObject=void 0)},this.screenShareListener(n),n.id===t.id?n.addListener("screenShareUpdate",this.screenShareListener):this.meeting.participants.joined.addListener("screenShareUpdate",this.participantScreenshareUpdate)}}render(){var n,t;const e=(null===(n=this.participant)||void 0===n?void 0:n.id)===(null===(t=this.meeting)||void 0===t?void 0:t.self.id),r=this.t(this.isFullScreen?"full_screen.exit":"full_screen"),o=this.isFullScreen?this.iconPack.full_screen_minimize:this.iconPack.full_screen_maximize;return a(i,{key:"df55771dd36de2c1014e47c8d713b6d1d7ef08ad",class:{isSelf:e}},a("div",{key:"video-container",id:"video-container",class:{expand:this.videoExpanded}},a("video",{key:"83fe484dc37fce119266950f3584b8af79fcc14b",ref:n=>this.videoEl=n,class:{visible:this.screenShareEnabled,"fit-in-container":this.participant.supportsRemoteControl},playsInline:!0,onPlay:()=>{this.play.emit({screenshareParticipant:this.participant,participant:this.meeting.self})},autoPlay:!0,muted:!0,id:`screen-share-video-${this.participant.id}`})),a("div",{id:"controls",key:"controls"},!this.hideFullScreenButton&&!e&&p()&&a("rtk-tooltip",{key:"6b27dd39bea31267c5e3167aa3e5d922955c27cd",label:r},a("rtk-button",{key:"2421ac7332eac3ff164412adcabfad0a0260a4af",id:"full-screen-btn",kind:"icon",onClick:this.toggleFullScreen,title:r},a("rtk-icon",{key:"98480f5f702d93bdcfaa98afd317eccaa053a5d1",icon:o,"aria-hidden":!0,tabIndex:-1})))),e&&a("div",{id:"self-message",key:"self-message"},a("h3",{key:"66d58882193ac51ee9527934a9203fd66d7d7c52"},this.t("screenshare.shared")),a("div",{key:"023c29fddee876bccef4052c51197b759a6bab2e",class:"actions"},null!=this.meeting&&a("rtk-button",{key:"c267d7178808f282c7c6d275c449bcaab934bc08",variant:"danger",onClick:()=>{this.meeting.self.disableScreenShare()}},a("rtk-icon",{key:"bc63ef8e2f217a6b87e99d99e7e4098474d05b39",icon:this.iconPack.share_screen_stop,slot:"start"}),this.t("screenshare.stop")),a("rtk-button",{key:"397f312bbd347f61566df2659c75f82de34b3808",variant:"secondary",id:"expand-btn",onClick:()=>{this.videoExpanded=!this.videoExpanded}},a("rtk-icon",{key:"feaf388308067f245ec3ed422d2591db23001ba3",icon:this.videoExpanded?this.iconPack.full_screen_minimize:this.iconPack.full_screen_maximize,slot:"start"}),this.t(this.videoExpanded?"screenshare.min_preview":"screenshare.max_preview")))),a("slot",{key:"794b21a6d0df0eb104a56efd930e7e52ee1c5fcb"}))}get host(){return r(this)}static get watchers(){return{participant:["participantChanged"]}}};f([h()],g.prototype,"meeting",void 0),f([h()],g.prototype,"iconPack",void 0),f([h()],g.prototype,"t",void 0),g.style=":host {\n  line-height: initial;\n  font-family: var(--rtk-font-family, sans-serif);\n\n  font-feature-settings: normal;\n  font-variation-settings: normal;\n}\n\np {\n  margin: var(--rtk-space-0, 0px);\n  padding: var(--rtk-space-0, 0px);\n}\n\n\n:host {\n  height: 100%;\n  width: 100%;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  border-radius: var(--rtk-border-radius-lg, 12px);\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-video-bg, 24 24 24) / var(--tw-bg-opacity));\n  container-type: inline-size;\n  container-name: screentile;\n}\n\n::slotted(rtk-name-tag) {\n  position: absolute;\n  left: var(--rtk-space-3, 12px);\n  bottom: var(--rtk-space-3, 12px);\n  opacity: 0.8;\n}\n\n#video-container {\n  position: absolute;\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n\n#video-container .fit-in-container {\n  -o-object-fit: fill;\n     object-fit: fill;\n}\n\nvideo {\n  height: 100%;\n  width: 100%;\n  -o-object-fit: contain;\n     object-fit: contain;\n}\n\n:host([variant='gradient']) ::slotted(rtk-audio-visualizer) {\n  position: absolute;\n  top: var(--rtk-space-2, 8px);\n  right: var(--rtk-space-2, 8px);\n  border-radius: 9999px;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n  padding: var(--rtk-space-2, 8px);\n}\n\n:host([variant='gradient']) ::slotted(rtk-name-tag) {\n  bottom: var(--rtk-space-0, 0px);\n  left: var(--rtk-space-0, 0px);\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  background-color: transparent;\n  background-image: linear-gradient(to top, var(--tw-gradient-stops));\n  --tw-gradient-from: rgb(var(--rtk-colors-background-1000, 8 8 8));\n  --tw-gradient-to: rgba(var(--rtk-colors-background-1000, 8 8 8) / 0);\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n  --tw-gradient-to: transparent;\n}\n\n:host([size='sm'][variant='gradient']) ::slotted(rtk-audio-visualizer) {\n  height: var(--rtk-space-5, 20px);\n  width: var(--rtk-space-5, 20px);\n}\n\nvideo.visible {\n  animation: video-fadein 0.4s ease;\n}\n\n#controls {\n  display: none;\n  position: absolute;\n  top: var(--rtk-space-3, 12px);\n  right: var(--rtk-space-3, 12px);\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--rtk-space-2, 8px);\n}\n\n:host(:hover) #controls, \n:host(:active) #controls, \n:host(:focus-visible) #controls {\n  display: flex;\n}\n\n#full-screen-btn {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));\n}\n\n/** For self view */\n\nh3 {\n  margin-top: var(--rtk-space-10, 40px);\n  margin-bottom: var(--rtk-space-6, 24px);\n  text-align: center;\n  font-size: 20px;\n  font-weight: 500;\n}\n\n:host([size='sm']) h3 {\n  font-size: 16px;\n}\n\n#self-message {\n  padding-left: var(--rtk-space-4, 16px);\n  padding-right: var(--rtk-space-4, 16px);\n}\n\n:host(.isSelf) #self-view {\n  flex: 1 1 0%;\n}\n\n:host(.isSelf) #video-container {\n  position: static;\n  aspect-ratio: auto;\n  height: auto;\n  width: 50%;\n  max-width: var(--rtk-space-96, 384px);\n  border-radius: var(--rtk-border-radius-md, 8px);\n  transition: 0.6s ease;\n}\n\n:host(.isSelf) #video-container.expand {\n  width: 60%;\n  max-width: 100%;\n}\n\n.actions {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--rtk-space-2, 8px);\n}\n\n:host([size='sm'].isSelf) #video-container,\n:host([size='md'].isSelf) #video-container,\n:host([size='sm'].isSelf) #expand-btn,\n:host([size='md'].isSelf) #expand-btn {\n  /** Hide video, fullscreen buttons in sm and md breakpoints */\n  display: none;\n}\n\n/** Remote control */\n\np {\n  margin: var(--rtk-space-0, 0px);\n  padding: var(--rtk-space-0, 0px);\n}\n\n.remote-control {\n  z-index: 10;\n  height: 100%;\n  max-height: 100%;\n  flex: 0 1 auto;\n}\n\n#remote-control-self {\n  position: absolute;\n  top: var(--rtk-space-0, 0px);\n  left: 50%;\n  z-index: 10;\n  width: -moz-max-content;\n  width: max-content;\n  max-width: 100%;\n  box-sizing: border-box;\n  display: flex;\n  height: var(--rtk-space-8, 32px);\n  align-items: center;\n  overflow: hidden;\n  border-radius: var(--rtk-border-radius-sm, 4px);\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-warning, 255 205 7) / var(--tw-bg-opacity));\n  font-size: 12px;\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n  transform: translateX(-50%);\n}\n\n#remote-control-self p {\n  padding-left: var(--rtk-space-3, 12px);\n  padding-right: var(--rtk-space-3, 12px);\n  padding-top: var(--rtk-space-2, 8px);\n  padding-bottom: var(--rtk-space-2, 8px);\n}\n\n#remote-control-self rtk-button {\n  height: 100%;\n  border-radius: var(--rtk-border-radius-none, 0);\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-bg-opacity));\n  font-size: 12px;\n}\n\n:host([size='sm']) #remote-control-self {\n  height: auto;\n  flex-direction: column;\n}\n\n:host([size='sm']) #remote-control-self rtk-button {\n  width: 100%;\n  padding-top: var(--rtk-space-1, 4px);\n  padding-bottom: var(--rtk-space-1, 4px);\n}\n\n/** Name tag positions */\n\n:host([name-tag-position='bottom-right']) ::slotted(rtk-name-tag) {\n  left: auto;\n  right: var(--rtk-space-3, 12px);\n}\n\n:host([name-tag-position='bottom-center']) ::slotted(rtk-name-tag) {\n  left: auto;\n  right: auto;\n}\n\n:host([name-tag-position='top-left']) ::slotted(rtk-name-tag) {\n  top: var(--rtk-space-3, 12px);\n  bottom: auto;\n}\n\n:host([name-tag-position='top-right']) ::slotted(rtk-name-tag) {\n  top: var(--rtk-space-3, 12px);\n  right: var(--rtk-space-3, 12px);\n  left: auto;\n  bottom: auto;\n}\n\n:host([name-tag-position='top-center']) ::slotted(rtk-name-tag) {\n  left: auto;\n  right: auto;\n  bottom: auto;\n  top: var(--rtk-space-3, 12px);\n}\n\n/** Keyframes */\n\n@keyframes video-fadein {\n  0% {\n    opacity: 0;\n    transform: scale(1.4) translateY(20px);\n  }\n\n  100% {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n::slotted(rtk-network-indicator) {\n  position: absolute;\n  right: var(--rtk-space-3, 12px);\n  bottom: var(--rtk-space-3, 12px);\n}\n\n@media only screen and (max-height: 480px) and (orientation: landscape) {\n    :host([size='sm'][variant='solid']) ::slotted(rtk-name-tag), \n    :host([size='sm'][variant='solid']) rtk-name-tag {\n    left: var(--rtk-space-0, 0px);\n    bottom: var(--rtk-space-0, 0px);\n    border-radius: var(--rtk-border-radius-none, 0);\n      transform-origin: 0% 110%;\n      transform: scale(0.6);\n  }\n}\n\n@container screentile (max-width: 400px) {\n  ::slotted(rtk-name-tag) {\n    transform-origin: 0 130%;\n    transform: scale(0.7);\n  }\n}\n";export{g as rtk_screenshare_view}
+import{r as n,d as t,e,h as a,a as i,g as r}from"./p-a599f720.js";import{e as o,i as s}from"./p-8fc79c56.js";import{i as c,r as d,e as l,a as p}from"./p-02f19345.js";import{S as h}from"./p-315cd380.js";var f=function(n,t,e,a){var i,r=arguments.length,o=r<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,e):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(n,t,e,a);else for(var s=n.length-1;s>=0;s--)(i=n[s])&&(o=(r<3?i(o):r>3?i(t,e,o):i(t,e))||o);return r>3&&o&&Object.defineProperty(t,e,o),o};const g=class{constructor(e){n(this,e),this.stateUpdate=t(this,"rtkStateUpdate",7),this.play=t(this,"screensharePlay",7),this.fullScreenListener=()=>{this.isFullScreen=c()},this.participantScreenshareUpdate=n=>{n.id===this.participant.id&&this.screenShareListener(n)},this.hideFullScreenButton=!1,this.nameTagPosition="bottom-left",this.variant="solid",this.iconPack=o,this.t=s(),this.videoExpanded=!1,this.screenShareEnabled=!1,this.isFullScreen=!1,this.toggleFullScreen=()=>{this.isFullScreen?(l(),this.isFullScreen=!1):(d(this.host),this.isFullScreen=!0)}}connectedCallback(){null===window||void 0===window||window.addEventListener("fullscreenchange",this.fullScreenListener),null===window||void 0===window||window.addEventListener("webkitfullscreenchange",this.fullScreenListener)}componentDidLoad(){this.participantChanged(this.participant)}disconnectedCallback(){if(!this.meeting)return;const{self:n}=this.meeting;this.participant.id===n.id&&this.screenShareListener?this.participant.removeListener("screenShareUpdate",this.screenShareListener):this.meeting.participants.joined.removeListener("screenShareUpdate",this.participantScreenshareUpdate),null===window||void 0===window||window.removeEventListener("fullscreenchange",this.fullScreenListener),null===window||void 0===window||window.removeEventListener("webkitfullscreenchange",this.fullScreenListener)}participantChanged(n){if(null!=n&&this.meeting){const{self:t}=this.meeting;this.screenShareListener=({screenShareEnabled:n,screenShareTracks:t})=>{const a=n&&null!=t.video;if(e((()=>{this.screenShareEnabled=a})),a){const n=new MediaStream;n.addTrack(t.video),null!=this.videoEl&&(this.videoEl.srcObject=n,this.videoEl.play())}else null!=this.videoEl&&(this.videoEl.srcObject=void 0)},this.screenShareListener(n),n.id===t.id?n.addListener("screenShareUpdate",this.screenShareListener):this.meeting.participants.joined.addListener("screenShareUpdate",this.participantScreenshareUpdate)}}render(){var n,t;const e=(null===(n=this.participant)||void 0===n?void 0:n.id)===(null===(t=this.meeting)||void 0===t?void 0:t.self.id),r=this.t(this.isFullScreen?"full_screen.exit":"full_screen"),o=this.isFullScreen?this.iconPack.full_screen_minimize:this.iconPack.full_screen_maximize;return a(i,{key:"9ee4407d83a5b437f91813eedec6fd0836620a8c",class:{isSelf:e}},a("div",{key:"video-container",id:"video-container",class:{expand:this.videoExpanded}},a("video",{key:"bfbee68ee2700aba43d1aae85a8456c40dc55244",ref:n=>this.videoEl=n,class:{visible:this.screenShareEnabled,"fit-in-container":this.participant.supportsRemoteControl},playsInline:!0,onPlay:()=>{this.play.emit({screenshareParticipant:this.participant,participant:this.meeting.self})},autoPlay:!0,muted:!0,id:`screen-share-video-${this.participant.id}`})),a("div",{id:"controls",key:"controls"},!this.hideFullScreenButton&&!e&&p()&&a("rtk-tooltip",{key:"25d8a59dae9afe875761f4ecaaae6d8f0c12792c",label:r},a("rtk-button",{key:"9b294b9b0a987c8e54f6bca1ab3edc3e1a5238f9",id:"full-screen-btn",kind:"icon",onClick:this.toggleFullScreen,title:r},a("rtk-icon",{key:"d768caec415a0b75f42d39cfb15f3821264046da",icon:o,"aria-hidden":!0,tabIndex:-1})))),e&&a("div",{id:"self-message",key:"self-message"},a("h3",{key:"7f4802409d87bb07dedac257e75f3e1d23ca4757"},this.t("screenshare.shared")),a("div",{key:"acd80c0b62e14b88c1a0c717814dcdc49c1c5a40",class:"actions"},null!=this.meeting&&a("rtk-button",{key:"721fc83372b3a9752b06fbffa61072f88aa9e1b0",variant:"danger",onClick:()=>{this.meeting.self.disableScreenShare()}},a("rtk-icon",{key:"7aa2e4a597a1411e000209c6db95babf9c7f0366",icon:this.iconPack.share_screen_stop,slot:"start"}),this.t("screenshare.stop")),a("rtk-button",{key:"4243b29230fc663db287f7db50dd4b5a8345a9bd",variant:"secondary",id:"expand-btn",onClick:()=>{this.videoExpanded=!this.videoExpanded}},a("rtk-icon",{key:"09c4a34f83662e5d1749e1dfd449d25da92c9976",icon:this.videoExpanded?this.iconPack.full_screen_minimize:this.iconPack.full_screen_maximize,slot:"start"}),this.t(this.videoExpanded?"screenshare.min_preview":"screenshare.max_preview")))),a("slot",{key:"a2046aecd50bc6fc0b8fb94a781bdd25c1d491ea"}))}get host(){return r(this)}static get watchers(){return{participant:["participantChanged"]}}};f([h()],g.prototype,"meeting",void 0),f([h()],g.prototype,"iconPack",void 0),f([h()],g.prototype,"t",void 0),g.style=":host {\n  line-height: initial;\n  font-family: var(--rtk-font-family, sans-serif);\n\n  font-feature-settings: normal;\n  font-variation-settings: normal;\n}\n\np {\n  margin: var(--rtk-space-0, 0px);\n  padding: var(--rtk-space-0, 0px);\n}\n\n\n:host {\n  height: 100%;\n  width: 100%;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  border-radius: var(--rtk-border-radius-lg, 12px);\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-video-bg, 24 24 24) / var(--tw-bg-opacity));\n  container-type: inline-size;\n  container-name: screentile;\n}\n\n::slotted(rtk-name-tag) {\n  position: absolute;\n  left: var(--rtk-space-3, 12px);\n  bottom: var(--rtk-space-3, 12px);\n  opacity: 0.8;\n}\n\n#video-container {\n  position: absolute;\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n\n#video-container .fit-in-container {\n  -o-object-fit: fill;\n     object-fit: fill;\n}\n\nvideo {\n  height: 100%;\n  width: 100%;\n  -o-object-fit: contain;\n     object-fit: contain;\n}\n\n:host([variant='gradient']) ::slotted(rtk-audio-visualizer) {\n  position: absolute;\n  top: var(--rtk-space-2, 8px);\n  right: var(--rtk-space-2, 8px);\n  border-radius: 9999px;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n  padding: var(--rtk-space-2, 8px);\n}\n\n:host([variant='gradient']) ::slotted(rtk-name-tag) {\n  bottom: var(--rtk-space-0, 0px);\n  left: var(--rtk-space-0, 0px);\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  background-color: transparent;\n  background-image: linear-gradient(to top, var(--tw-gradient-stops));\n  --tw-gradient-from: rgb(var(--rtk-colors-background-1000, 8 8 8));\n  --tw-gradient-to: rgba(var(--rtk-colors-background-1000, 8 8 8) / 0);\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n  --tw-gradient-to: transparent;\n}\n\n:host([size='sm'][variant='gradient']) ::slotted(rtk-audio-visualizer) {\n  height: var(--rtk-space-5, 20px);\n  width: var(--rtk-space-5, 20px);\n}\n\nvideo.visible {\n  animation: video-fadein 0.4s ease;\n}\n\n#controls {\n  display: none;\n  position: absolute;\n  top: var(--rtk-space-3, 12px);\n  right: var(--rtk-space-3, 12px);\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--rtk-space-2, 8px);\n}\n\n:host(:hover) #controls, \n:host(:active) #controls, \n:host(:focus-visible) #controls {\n  display: flex;\n}\n\n#full-screen-btn {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));\n}\n\n/** For self view */\n\nh3 {\n  margin-top: var(--rtk-space-10, 40px);\n  margin-bottom: var(--rtk-space-6, 24px);\n  text-align: center;\n  font-size: 20px;\n  font-weight: 500;\n}\n\n:host([size='sm']) h3 {\n  font-size: 16px;\n}\n\n#self-message {\n  padding-left: var(--rtk-space-4, 16px);\n  padding-right: var(--rtk-space-4, 16px);\n}\n\n:host(.isSelf) #self-view {\n  flex: 1 1 0%;\n}\n\n:host(.isSelf) #video-container {\n  position: static;\n  aspect-ratio: auto;\n  height: auto;\n  width: 50%;\n  max-width: var(--rtk-space-96, 384px);\n  border-radius: var(--rtk-border-radius-md, 8px);\n  transition: 0.6s ease;\n}\n\n:host(.isSelf) #video-container.expand {\n  width: 60%;\n  max-width: 100%;\n}\n\n.actions {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--rtk-space-2, 8px);\n}\n\n:host([size='sm'].isSelf) #video-container,\n:host([size='md'].isSelf) #video-container,\n:host([size='sm'].isSelf) #expand-btn,\n:host([size='md'].isSelf) #expand-btn {\n  /** Hide video, fullscreen buttons in sm and md breakpoints */\n  display: none;\n}\n\n/** Remote control */\n\np {\n  margin: var(--rtk-space-0, 0px);\n  padding: var(--rtk-space-0, 0px);\n}\n\n.remote-control {\n  z-index: 10;\n  height: 100%;\n  max-height: 100%;\n  flex: 0 1 auto;\n}\n\n#remote-control-self {\n  position: absolute;\n  top: var(--rtk-space-0, 0px);\n  left: 50%;\n  z-index: 10;\n  width: -moz-max-content;\n  width: max-content;\n  max-width: 100%;\n  box-sizing: border-box;\n  display: flex;\n  height: var(--rtk-space-8, 32px);\n  align-items: center;\n  overflow: hidden;\n  border-radius: var(--rtk-border-radius-sm, 4px);\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-warning, 255 205 7) / var(--tw-bg-opacity));\n  font-size: 12px;\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n  transform: translateX(-50%);\n}\n\n#remote-control-self p {\n  padding-left: var(--rtk-space-3, 12px);\n  padding-right: var(--rtk-space-3, 12px);\n  padding-top: var(--rtk-space-2, 8px);\n  padding-bottom: var(--rtk-space-2, 8px);\n}\n\n#remote-control-self rtk-button {\n  height: 100%;\n  border-radius: var(--rtk-border-radius-none, 0);\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-bg-opacity));\n  font-size: 12px;\n}\n\n:host([size='sm']) #remote-control-self {\n  height: auto;\n  flex-direction: column;\n}\n\n:host([size='sm']) #remote-control-self rtk-button {\n  width: 100%;\n  padding-top: var(--rtk-space-1, 4px);\n  padding-bottom: var(--rtk-space-1, 4px);\n}\n\n/** Name tag positions */\n\n:host([name-tag-position='bottom-right']) ::slotted(rtk-name-tag) {\n  left: auto;\n  right: var(--rtk-space-3, 12px);\n}\n\n:host([name-tag-position='bottom-center']) ::slotted(rtk-name-tag) {\n  left: auto;\n  right: auto;\n}\n\n:host([name-tag-position='top-left']) ::slotted(rtk-name-tag) {\n  top: var(--rtk-space-3, 12px);\n  bottom: auto;\n}\n\n:host([name-tag-position='top-right']) ::slotted(rtk-name-tag) {\n  top: var(--rtk-space-3, 12px);\n  right: var(--rtk-space-3, 12px);\n  left: auto;\n  bottom: auto;\n}\n\n:host([name-tag-position='top-center']) ::slotted(rtk-name-tag) {\n  left: auto;\n  right: auto;\n  bottom: auto;\n  top: var(--rtk-space-3, 12px);\n}\n\n/** Keyframes */\n\n@keyframes video-fadein {\n  0% {\n    opacity: 0;\n    transform: scale(1.4) translateY(20px);\n  }\n\n  100% {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n::slotted(rtk-network-indicator) {\n  position: absolute;\n  right: var(--rtk-space-3, 12px);\n  bottom: var(--rtk-space-3, 12px);\n}\n\n@media only screen and (max-height: 480px) and (orientation: landscape) {\n    :host([size='sm'][variant='solid']) ::slotted(rtk-name-tag), \n    :host([size='sm'][variant='solid']) rtk-name-tag {\n    left: var(--rtk-space-0, 0px);\n    bottom: var(--rtk-space-0, 0px);\n    border-radius: var(--rtk-border-radius-none, 0);\n      transform-origin: 0% 110%;\n      transform: scale(0.6);\n  }\n}\n\n@container screentile (max-width: 400px) {\n  ::slotted(rtk-name-tag) {\n    transform-origin: 0 130%;\n    transform: scale(0.7);\n  }\n}\n";export{g as rtk_screenshare_view}

package/dist/realtimekit-ui/{p-be0cae77.entry.js → p-07860158.entry.js}

@@ -1 +1 @@
-import{r as t,e as s,h as i}from"./p-a599f720.js";import{e as r}from"./p-8fc79c56.js";import{S as e}from"./p-315cd380.js";import{d as h}from"./p-d6126ff7.js";const a=class{constructor(i){t(this,i),this.visibleItemsCount=20,this.estimateItemSize=100,this.iconPack=r,this.isFetching=!1,this.autoScroll=!0,this.totalHeight=0,this.sizes=new Map,this.lastScrollTop=0,this.scrollToBottomRetries=0,this.elementObserver=(()=>{let t=null;const s=()=>t||("undefined"!=typeof ResizeObserver?t=new ResizeObserver((t=>{t.forEach((t=>{this.measureElement(t.target,t)}))})):null);return{disconnect:()=>{var t;return null===(t=s())||void 0===t?void 0:t.disconnect()},observe:t=>{var i;return null===(i=s())||void 0===i?void 0:i.observe(t,{box:"border-box"})},unobserve:t=>{var i;return null===(i=s())||void 0===i?void 0:i.unobserve(t)}}})(),this.measureElement=(t,s)=>{if(!t)return;const i=t.dataset.id;if(this.sizes.has(i))return void this.elementObserver.unobserve(t);if(s){const r=s.borderBoxSize[0];if(r&&r.blockSize>0)return this.saveItemSize(i,r.blockSize),void this.elementObserver.unobserve(t)}const r=t.getBoundingClientRect();r.height>0&&this.saveItemSize(i,r.height)},this.getVisibleItems=()=>this.messages.slice(this.range.start,this.range.end+1),this.updateVisibleItems=(t,s)=>{const i=this.messages.length;let r=t,e=s;i<=this.visibleItemsCount?(r=0,e=i-1):s-t<this.visibleItemsCount-1&&(r=this.range.end-this.visibleItemsCount+1),this.range.start!==r&&(this.range={start:r,end:e},this.totalHeight=this.getRangeSize(0,i))},this.getEstimatedItemSize=()=>this.estimateItemSize,this.getRangeSize=(t,s)=>{let i=0,r=0;for(let e=t;e<s;e++)r=this.sizes.get(this.messages[e].id),i+=r||this.getEstimatedItemSize();return i},this.getScrollTop=()=>this.$listRef?Math.ceil(this.$listRef.scrollTop):0,this.getClientHeight=()=>this.$listRef?Math.ceil(this.$listRef.clientHeight):0,this.getScrollHeight=()=>this.$listRef?Math.ceil(this.$listRef.scrollHeight):0,this.getItemsScrolled=()=>{const t=this.lastScrollTop;if(t<=0)return 0;let s=0,i=0,r=0,e=this.messages.length;for(;s<=e;){if(i=s+e>>>1,r=this.getRangeSize(0,i),r===t)return i;r<t?s=i+1:r>t&&(e=i-1)}return s>0?--s:0},this.getEndByStart=t=>Math.min(t+this.visibleItemsCount,this.messages.length-1),this.scrollToOffset=t=>{this.$listRef&&(this.$listRef.scrollTop=t)},this.scrollToIndex=t=>{if(t>=this.messages.length-1)this.scrollToBottom();else{const s=t<1?0:this.getRangeSize(0,t);this.scrollToOffset(s)}},this.scrollToBottom=()=>{this.$listEndRef&&s((()=>{this.$listEndRef.scrollIntoView(),this.getScrollHeight()-(this.getScrollTop()+this.getClientHeight())>0&&this.scrollToBottomRetries<10?setTimeout((()=>{this.scrollToBottom()}),1e3/60):(this.scrollToBottomRetries=0,this.autoScroll=!0)}))},this.handleScroll=async()=>{if(this.isFetching)return;const t=this.getScrollTop(),s=t<this.lastScrollTop||0===t?"UP":"DOWN";if(this.lastScrollTop=t,this.loadMore&&0===t&&"UP"===s&&!1===this.isFetching){this.isFetching=!0;const t=await this.loadMore(this.messages[0]);t&&t.length&&(this.messages=[...t,...this.messages]),this.isFetching=!1}"UP"===s?this.handleTop():"DOWN"===s&&this.handleBottom()},this.handleTop=()=>{const t=this.getItemsScrolled();if(t<=this.range.end-5&&(this.autoScroll=!1),t>this.range.start+5)return;const s=Math.max(this.range.start-5,0);this.updateVisibleItems(s,this.getEndByStart(s))},this.handleBottom=()=>{if(this.getItemsScrolled()<this.range.start+5)return;const t=this.range.start+5,s=this.getEndByStart(t);this.updateVisibleItems(s===this.messages.length-1?s-this.visibleItemsCount:t,s)},this.updateTotalHeight=h((()=>{this.totalHeight=this.getRangeSize(0,this.messages.length)}),1e3/30,{leading:!0}),this.rendererInternal=(t,s,i)=>{if(!t)return;if(t.dataset.id===s.id)return;const r=this.renderer(s,i);t.hasChildNodes&&(t.innerHTML=""),this.elementObserver.observe(t),t.dataset.id=s.id,t.appendChild(r)}}connectedCallback(){const t=this.messages.length-1;this.range={start:t-this.visibleItemsCount,end:t},this.updateVisibleItems(this.range.start,this.range.end),this.totalHeight=this.getRangeSize(0,t)}componentDidLoad(){this.autoScroll&&this.scrollToBottom()}messagesUpdated(t,s){if(t.length>s.length){const i=t.length-s.length;this.updateVisibleItems(i,this.getEndByStart(i)),this.scrollToIndex(this.range.start)}}saveItemSize(t,s){this.sizes.set(t,Math.round(s)),this.updateTotalHeight()}render(){return i("div",{key:"f01cd22002f542b67a7ca26773cf729a11969ebd",class:"scrollbar content-wrapper",ref:t=>this.$listRef=t,onScroll:this.handleScroll},i("div",{key:"0f689c170ef60c6504b60b97003c8357e96c55f0",class:"scroller"},i("div",{key:"fd6049a7ef01203befb164ca74195c58de6af1e8",style:{height:`${this.totalHeight}px`}}),i("div",{key:"d8e7bcadcb7fc673c10340a833aa6f165c002822",class:"smallest-dom-element",id:"list-end",ref:t=>this.$listEndRef=t})),i("div",{key:"60ffb8b2bd40c001e72982830b523efe43784c07",class:"content",style:{transform:`translateY(${this.getRangeSize(0,this.range.start)}px)`}},this.isFetching&&i("div",{key:"65952d03af783bc807d6fd54047bfbffadf075e3",class:"loader"},i("rtk-spinner",{key:"f90da04d11e84ea6b2218df02eb5daa55fd7dfe7",size:"md"})),this.getVisibleItems().map(((t,s)=>i("div",{key:t.id,ref:i=>this.rendererInternal(i,t,s)})))))}static get watchers(){return{messages:["messagesUpdated"]}}};(function(t,s,i,r){var e,h=arguments.length,a=h<3?s:null===r?r=Object.getOwnPropertyDescriptor(s,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,s,i,r);else for(var o=t.length-1;o>=0;o--)(e=t[o])&&(a=(h<3?e(a):h>3?e(s,i,a):e(s,i))||a);h>3&&a&&Object.defineProperty(s,i,a)})([e()],a.prototype,"iconPack",void 0),a.style=":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)))}.loading{cursor:wait}.content-wrapper{height:100%;overflow-y:auto;position:relative;contain:strict}.scroller{width:1px;opacity:0}.content{position:absolute;top:0;width:100%}.smallest-dom-element{width:100%;height:2px;background:red}.loader{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);display:flex;justify-content:center}";export{a as rtk_message_list_view}
+import{r as t,e as s,h as i}from"./p-a599f720.js";import{e as r}from"./p-8fc79c56.js";import{S as e}from"./p-315cd380.js";import{d as h}from"./p-d6126ff7.js";const a=class{constructor(i){t(this,i),this.visibleItemsCount=20,this.estimateItemSize=100,this.iconPack=r,this.isFetching=!1,this.autoScroll=!0,this.totalHeight=0,this.sizes=new Map,this.lastScrollTop=0,this.scrollToBottomRetries=0,this.elementObserver=(()=>{let t=null;const s=()=>t||("undefined"!=typeof ResizeObserver?t=new ResizeObserver((t=>{t.forEach((t=>{this.measureElement(t.target,t)}))})):null);return{disconnect:()=>{var t;return null===(t=s())||void 0===t?void 0:t.disconnect()},observe:t=>{var i;return null===(i=s())||void 0===i?void 0:i.observe(t,{box:"border-box"})},unobserve:t=>{var i;return null===(i=s())||void 0===i?void 0:i.unobserve(t)}}})(),this.measureElement=(t,s)=>{if(!t)return;const i=t.dataset.id;if(this.sizes.has(i))return void this.elementObserver.unobserve(t);if(s){const r=s.borderBoxSize[0];if(r&&r.blockSize>0)return this.saveItemSize(i,r.blockSize),void this.elementObserver.unobserve(t)}const r=t.getBoundingClientRect();r.height>0&&this.saveItemSize(i,r.height)},this.getVisibleItems=()=>this.messages.slice(this.range.start,this.range.end+1),this.updateVisibleItems=(t,s)=>{const i=this.messages.length;let r=t,e=s;i<=this.visibleItemsCount?(r=0,e=i-1):s-t<this.visibleItemsCount-1&&(r=this.range.end-this.visibleItemsCount+1),this.range.start!==r&&(this.range={start:r,end:e},this.totalHeight=this.getRangeSize(0,i))},this.getEstimatedItemSize=()=>this.estimateItemSize,this.getRangeSize=(t,s)=>{let i=0,r=0;for(let e=t;e<s;e++)r=this.sizes.get(this.messages[e].id),i+=r||this.getEstimatedItemSize();return i},this.getScrollTop=()=>this.$listRef?Math.ceil(this.$listRef.scrollTop):0,this.getClientHeight=()=>this.$listRef?Math.ceil(this.$listRef.clientHeight):0,this.getScrollHeight=()=>this.$listRef?Math.ceil(this.$listRef.scrollHeight):0,this.getItemsScrolled=()=>{const t=this.lastScrollTop;if(t<=0)return 0;let s=0,i=0,r=0,e=this.messages.length;for(;s<=e;){if(i=s+e>>>1,r=this.getRangeSize(0,i),r===t)return i;r<t?s=i+1:r>t&&(e=i-1)}return s>0?--s:0},this.getEndByStart=t=>Math.min(t+this.visibleItemsCount,this.messages.length-1),this.scrollToOffset=t=>{this.$listRef&&(this.$listRef.scrollTop=t)},this.scrollToIndex=t=>{if(t>=this.messages.length-1)this.scrollToBottom();else{const s=t<1?0:this.getRangeSize(0,t);this.scrollToOffset(s)}},this.scrollToBottom=()=>{this.$listEndRef&&s((()=>{this.$listEndRef.scrollIntoView(),this.getScrollHeight()-(this.getScrollTop()+this.getClientHeight())>0&&this.scrollToBottomRetries<10?setTimeout((()=>{this.scrollToBottom()}),1e3/60):(this.scrollToBottomRetries=0,this.autoScroll=!0)}))},this.handleScroll=async()=>{if(this.isFetching)return;const t=this.getScrollTop(),s=t<this.lastScrollTop||0===t?"UP":"DOWN";if(this.lastScrollTop=t,this.loadMore&&0===t&&"UP"===s&&!1===this.isFetching){this.isFetching=!0;const t=await this.loadMore(this.messages[0]);t&&t.length&&(this.messages=[...t,...this.messages]),this.isFetching=!1}"UP"===s?this.handleTop():"DOWN"===s&&this.handleBottom()},this.handleTop=()=>{const t=this.getItemsScrolled();if(t<=this.range.end-5&&(this.autoScroll=!1),t>this.range.start+5)return;const s=Math.max(this.range.start-5,0);this.updateVisibleItems(s,this.getEndByStart(s))},this.handleBottom=()=>{if(this.getItemsScrolled()<this.range.start+5)return;const t=this.range.start+5,s=this.getEndByStart(t);this.updateVisibleItems(s===this.messages.length-1?s-this.visibleItemsCount:t,s)},this.updateTotalHeight=h((()=>{this.totalHeight=this.getRangeSize(0,this.messages.length)}),1e3/30,{leading:!0}),this.rendererInternal=(t,s,i)=>{if(!t)return;if(t.dataset.id===s.id)return;const r=this.renderer(s,i);t.hasChildNodes&&(t.innerHTML=""),this.elementObserver.observe(t),t.dataset.id=s.id,t.appendChild(r)}}connectedCallback(){const t=this.messages.length-1;this.range={start:t-this.visibleItemsCount,end:t},this.updateVisibleItems(this.range.start,this.range.end),this.totalHeight=this.getRangeSize(0,t)}componentDidLoad(){this.autoScroll&&this.scrollToBottom()}messagesUpdated(t,s){if(t.length>s.length){const i=t.length-s.length;this.updateVisibleItems(i,this.getEndByStart(i)),this.scrollToIndex(this.range.start)}}saveItemSize(t,s){this.sizes.set(t,Math.round(s)),this.updateTotalHeight()}render(){return i("div",{key:"9c8a4073886acf540a8beeea0ac31f865231f771",class:"scrollbar content-wrapper",ref:t=>this.$listRef=t,onScroll:this.handleScroll},i("div",{key:"c64abddfc09ec7c88305b732df889f9de0597b53",class:"scroller"},i("div",{key:"c3e94f33890509b22f2b89022a76865f6776b217",style:{height:`${this.totalHeight}px`}}),i("div",{key:"f8c95faa0af4b1f31465a113707f0e4f753dadad",class:"smallest-dom-element",id:"list-end",ref:t=>this.$listEndRef=t})),i("div",{key:"02d045f8c54072388c3c7df52ff4c92f2438a545",class:"content",style:{transform:`translateY(${this.getRangeSize(0,this.range.start)}px)`}},this.isFetching&&i("div",{key:"7ba90240987e1ecfb553d69bd7465cb20bb86274",class:"loader"},i("rtk-spinner",{key:"2fa19c46da125e4c5280625aefdf555f09ce2faa",size:"md"})),this.getVisibleItems().map(((t,s)=>i("div",{key:t.id,ref:i=>this.rendererInternal(i,t,s)})))))}static get watchers(){return{messages:["messagesUpdated"]}}};(function(t,s,i,r){var e,h=arguments.length,a=h<3?s:null===r?r=Object.getOwnPropertyDescriptor(s,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,s,i,r);else for(var o=t.length-1;o>=0;o--)(e=t[o])&&(a=(h<3?e(a):h>3?e(s,i,a):e(s,i))||a);h>3&&a&&Object.defineProperty(s,i,a)})([e()],a.prototype,"iconPack",void 0),a.style=":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)))}.loading{cursor:wait}.content-wrapper{height:100%;overflow-y:auto;position:relative;contain:strict}.scroller{width:1px;opacity:0}.content{position:absolute;top:0;width:100%}.smallest-dom-element{width:100%;height:2px;background:red}.loader{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);display:flex;justify-content:center}";export{a as rtk_message_list_view}