npm - @cloudflare/realtimekit-ui - Versions diffs - 1.0.6-staging.2 → 1.0.6-staging.4 - Mend

@cloudflare/realtimekit-ui 1.0.6-staging.2 → 1.0.6-staging.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (115) hide show

package/dist/esm/{floating-ui.dom.esm-a2dc8eef.js → floating-ui.dom.esm-21c3d54e.js} RENAMED Viewed

@@ -607,7 +607,7 @@ const flip$1 = function (options) {
           if (!ignoreCrossAxisOverflow ||
           // We leave the current main axis only if every placement on that axis
           // overflows the main axis.
-          overflowsData.every(d => d.overflows[0] > 0 && getSideAxis(d.placement) === initialSideAxis)) {
+          overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
             // Try next placement and re-run the lifecycle.
             return {
               data: {
@@ -1231,7 +1231,7 @@ function isOverflowElement(element) {
     overflowX,
     overflowY,
     display
-  } = getComputedStyle(element);
+  } = getComputedStyle$1(element);
   return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
 }
 const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
@@ -1253,7 +1253,7 @@ const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspect
 const containValues = ['paint', 'layout', 'strict', 'content'];
 function isContainingBlock(elementOrCss) {
   const webkit = isWebKit();
-  const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
+  const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   // https://drafts.csswg.org/css-transforms-2/#individual-transforms
@@ -1279,7 +1279,7 @@ const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#documen
 function isLastTraversableNode(node) {
   return lastTraversableNodeNames.has(getNodeName(node));
 }
-function getComputedStyle(element) {
+function getComputedStyle$1(element) {
   return getWindow(element).getComputedStyle(element);
 }
 function getNodeScroll(element) {
@@ -1341,7 +1341,7 @@ function getFrameElement(win) {
 }
 function getCssDimensions(element) {
-  const css = getComputedStyle(element);
+  const css = getComputedStyle$1(element);
   // In testing environments, the `width` and `height` properties are empty
   // strings for SVG elements, returning NaN. Fallback to `0` in this case.
   let width = parseFloat(css.width) || 0;
@@ -1446,7 +1446,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
-      const css = getComputedStyle(currentIFrame);
+      const css = getComputedStyle$1(currentIFrame);
       const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
       const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
@@ -1477,14 +1477,9 @@ function getWindowScrollBarX(element, rect) {
   return rect.left + leftScroll;
 }
-function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
-  if (ignoreScrollbarX === void 0) {
-    ignoreScrollbarX = false;
-  }
+function getHTMLOffset(documentElement, scroll) {
   const htmlRect = documentElement.getBoundingClientRect();
-  const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 :
-  // RTL <body> scrollbar.
-  getWindowScrollBarX(documentElement, htmlRect));
+  const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
   const y = htmlRect.top + scroll.scrollTop;
   return {
     x,
@@ -1523,7 +1518,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
       offsets.y = offsetRect.y + offsetParent.clientTop;
     }
   }
-  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
   return {
     width: rect.width * scale.x,
     height: rect.height * scale.y,
@@ -1546,7 +1541,7 @@ function getDocumentRect(element) {
   const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
   let x = -scroll.scrollLeft + getWindowScrollBarX(element);
   const y = -scroll.scrollTop;
-  if (getComputedStyle(body).direction === 'rtl') {
+  if (getComputedStyle$1(body).direction === 'rtl') {
     x += max(html.clientWidth, body.clientWidth) - width;
   }
   return {
@@ -1557,6 +1552,10 @@ function getDocumentRect(element) {
   };
 }
+// Safety check: ensure the scrollbar space is reasonable in case this
+// calculation is affected by unusual styles.
+// Most scrollbars leave 15-18px of space.
+const SCROLLBAR_MAX = 25;
 function getViewportRect(element, strategy) {
   const win = getWindow(element);
   const html = getDocumentElement(element);
@@ -1574,6 +1573,24 @@ function getViewportRect(element, strategy) {
       y = visualViewport.offsetTop;
     }
   }
+  const windowScrollbarX = getWindowScrollBarX(html);
+  // <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
+  // visual width of the <html> but this is not considered in the size
+  // of `html.clientWidth`.
+  if (windowScrollbarX <= 0) {
+    const doc = html.ownerDocument;
+    const body = doc.body;
+    const bodyStyles = getComputedStyle(body);
+    const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
+    const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
+    if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
+      width -= clippingStableScrollbarWidth;
+    }
+  } else if (windowScrollbarX <= SCROLLBAR_MAX) {
+    // If the <body> scrollbar is on the left, the width needs to be extended
+    // by the scrollbar amount so there isn't extra space on the right.
+    width += windowScrollbarX;
+  }
   return {
     width,
     height,
@@ -1624,7 +1641,7 @@ function hasFixedPositionAncestor(element, stopNode) {
   if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
     return false;
   }
-  return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
+  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
 }
 // A "clipping ancestor" is an `overflow` element with the characteristic of
@@ -1637,12 +1654,12 @@ function getClippingElementAncestors(element, cache) {
   }
   let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
   let currentContainingBlockComputedStyle = null;
-  const elementIsFixed = getComputedStyle(element).position === 'fixed';
+  const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
   let currentNode = elementIsFixed ? getParentNode(element) : element;
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
-    const computedStyle = getComputedStyle(currentNode);
+    const computedStyle = getComputedStyle$1(currentNode);
     const currentNodeIsContaining = isContainingBlock(currentNode);
     if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
       currentContainingBlockComputedStyle = null;
@@ -1743,11 +1760,11 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
 }
 function isStaticPositioned(element) {
-  return getComputedStyle(element).position === 'static';
+  return getComputedStyle$1(element).position === 'static';
 }
 function getTrueOffsetParent(element, polyfill) {
-  if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {
+  if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
     return null;
   }
   if (polyfill) {
@@ -1808,7 +1825,7 @@ const getElementRects = async function (data) {
 };
 function isRTL(element) {
-  return getComputedStyle(element).direction === 'rtl';
+  return getComputedStyle$1(element).direction === 'rtl';
 }
 const platform = {

package/dist/esm/loader.js CHANGED Viewed

@@ -9557,7 +9557,7 @@ const flip$1 = function (options) {
           if (!ignoreCrossAxisOverflow ||
           // We leave the current main axis only if every placement on that axis
           // overflows the main axis.
-          overflowsData.every(d => d.overflows[0] > 0 && getSideAxis(d.placement) === initialSideAxis)) {
+          overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
             // Try next placement and re-run the lifecycle.
             return {
               data: {
@@ -10141,14 +10141,9 @@ function getWindowScrollBarX(element, rect) {
   return rect.left + leftScroll;
 }
-function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
-  if (ignoreScrollbarX === void 0) {
-    ignoreScrollbarX = false;
-  }
+function getHTMLOffset(documentElement, scroll) {
   const htmlRect = documentElement.getBoundingClientRect();
-  const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 :
-  // RTL <body> scrollbar.
-  getWindowScrollBarX(documentElement, htmlRect));
+  const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
   const y = htmlRect.top + scroll.scrollTop;
   return {
     x,
@@ -10187,7 +10182,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
       offsets.y = offsetRect.y + offsetParent.clientTop;
     }
   }
-  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
   return {
     width: rect.width * scale.x,
     height: rect.height * scale.y,
@@ -10221,6 +10216,10 @@ function getDocumentRect(element) {
   };
 }
+// Safety check: ensure the scrollbar space is reasonable in case this
+// calculation is affected by unusual styles.
+// Most scrollbars leave 15-18px of space.
+const SCROLLBAR_MAX = 25;
 function getViewportRect(element, strategy) {
   const win = getWindow(element);
   const html = getDocumentElement(element);
@@ -10238,6 +10237,24 @@ function getViewportRect(element, strategy) {
       y = visualViewport.offsetTop;
     }
   }
+  const windowScrollbarX = getWindowScrollBarX(html);
+  // <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
+  // visual width of the <html> but this is not considered in the size
+  // of `html.clientWidth`.
+  if (windowScrollbarX <= 0) {
+    const doc = html.ownerDocument;
+    const body = doc.body;
+    const bodyStyles = getComputedStyle(body);
+    const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
+    const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
+    if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
+      width -= clippingStableScrollbarWidth;
+    }
+  } else if (windowScrollbarX <= SCROLLBAR_MAX) {
+    // If the <body> scrollbar is on the left, the width needs to be extended
+    // by the scrollbar amount so there isn't extra space on the right.
+    width += windowScrollbarX;
+  }
   return {
     width,
     height,
@@ -14117,7 +14134,7 @@ const RtkDialogManager = class {
         (_a = this.meeting.stage) === null || _a === void 0 ? void 0 : _a.removeListener('stageStatusUpdate', this.stageStatusUpdateListener);
     }
     meetingChanged(meeting) {
-        if (meeting == undefined)
+        if (!meeting)
             return;
         const { stage } = meeting;
         stage === null || stage === void 0 ? void 0 : stage.addListener('stageStatusUpdate', this.stageStatusUpdateListener);
@@ -17986,7 +18003,7 @@ const RtkCaptionToggle = class {
         this.meetingChanged(this.meeting);
     }
     meetingChanged(meeting) {
-        if (meeting === null)
+        if (!meeting)
             return;
         this.permissionsUpdateListener();
         this.meeting.self.permissions.addListener('permissionsUpdate', this.permissionsUpdateListener);
@@ -61396,7 +61413,7 @@ const RtkPluginMain = class {
         this.pluginChanged(this.plugin);
     }
     meetingChanged(meeting) {
-        if (meeting == undefined)
+        if (!meeting)
             return;
         const enabled = this.canInteractWithPlugin();
         this.viewModeEnabled = !enabled;
@@ -61626,6 +61643,8 @@ const RtkPolls$1 = class RtkPolls {
         this.t = useLanguage();
         /** Create State */
         this.create = false;
+        /** Polls */
+        this.polls = [];
         this.onPollsUpdate = (data) => {
             this.polls = [...data.polls];
         };
@@ -61644,9 +61663,9 @@ const RtkPolls$1 = class RtkPolls {
         this.meeting.self.permissions.removeListener('pollsUpdate', this.onUpdatePermissions);
     }
     meetingChanged(meeting) {
-        if (meeting == undefined)
+        if (!meeting)
             return;
-        if (meeting && !meeting.polls)
+        if (!meeting.polls)
             return;
         this.permissions = this.meeting.self.permissions;
         this.polls = [...meeting.polls.items];
@@ -61667,14 +61686,15 @@ const RtkPolls$1 = class RtkPolls {
         smoothScrollToBottom(this.pollEl);
     }
     render() {
-        return (h(Host, { key: '32f9a66439b84ad236368f1aa09c2aaa2dad71c0' }, h("div", { key: '0703028114fffd45a29dc4b952588356039f105d', class: "ctr", part: "container" }, h("div", { key: '45aecbd2b846b297add5b267b9798e69da1a1028', class: "polls-view scrollbar", ref: (el) => (this.pollEl = el), part: "polls" }, this.polls.length == 0 && this.create !== true && (h("div", { key: 'c2d3dbf8e58715dd67043fad64b2859a1674754d', class: "empty-polls" }, this.t('polls.empty'))), this.polls.map((item) => {
+        var _a, _b;
+        return (h(Host, { key: 'f259b6fa652fe2e81c18d3a0fb85a15d0c091de3' }, h("div", { key: '6cc127127307bcb1a5482a260fe7ccaf65bb1e3d', class: "ctr", part: "container" }, h("div", { key: 'ef9df557e4a5fb99ea2ce66172b7a889410daeea', class: "polls-view scrollbar", ref: (el) => (this.pollEl = el), part: "polls" }, this.polls.length == 0 && this.create !== true && (h("div", { key: '0eb92f8f60ab00fb849b2d656a9d8bafb26195de', 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: '6ac47131bb1c34b5f00771183c5738759093133b', part: "poll-form", onRtkCreatePoll: (e) => {
+        }), this.create && (h("rtk-poll-form", { key: '71fc9e183684f5cafee5f0885af3d679d099a8ec', part: "poll-form", onRtkCreatePoll: (e) => {
                 this.onCreate(e.detail);
-            }, iconPack: this.iconPack, t: this.t }))), this.permissions.polls.canCreate && (h("rtk-button", { key: '1e8ec7c85707c1f0db18b89c069190cc43963b11', 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: '0639577353327ded0d1e7db08cbaadac47ec296c', 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"]
@@ -62459,7 +62479,7 @@ var rtkFullscreenToggle_entry = /*#__PURE__*/Object.freeze({
   rtk_fullscreen_toggle: RtkFullscreenToggle
 });
-const rtkParticipantCss = ":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:flex;height:var(--rtk-space-14, 56px);align-items:center;justify-content:space-between;cursor:pointer;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}:host rtk-avatar{height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);font-size:14px}.left{display:flex;align-items:center}.left>*{margin-right:var(--rtk-space-2, 8px)}.left>*:last-child{margin-right:var(--rtk-space-0, 0px)}.right{display:flex;align-items:center;justify-content:flex-end}.right>*{margin-left:var(--rtk-space-2, 8px)}.right>*:first-child{margin-left:var(--rtk-space-0, 0px)}.name{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}rtk-icon{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}rtk-icon.red{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}rtk-icon.more{cursor:pointer}.menu{position:relative;display:inline-block;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}#menu-list{position:absolute;top:var(--rtk-space-8, 32px) !important;right:var(--rtk-space-4, 16px) !important;z-index:20}";
+const rtkParticipantCss = ":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:flex;height:var(--rtk-space-14, 56px);align-items:center;justify-content:space-between;cursor:pointer;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}:host rtk-avatar{height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);font-size:14px}.left{display:flex;align-items:center}.left>*{margin-right:var(--rtk-space-2, 8px)}.left>*:last-child{margin-right:var(--rtk-space-0, 0px)}.right{display:flex;align-items:center;justify-content:flex-end}.right>*{margin-left:var(--rtk-space-2, 8px)}.right>*:first-child{margin-left:var(--rtk-space-0, 0px)}.name{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}rtk-icon{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}rtk-icon.red{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}rtk-icon.more{cursor:pointer}.menu{position:relative;display:inline-block;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}#menu-list{position:absolute;z-index:20}";
 const RtkParticipantStyle0 = rtkParticipantCss;
 var __decorate$5 = function (decorators, target, key, desc) {
@@ -63056,14 +63076,14 @@ const RtkParticipantTile = class {
         this.tileUnload.emit(this.participant);
     }
     meetingChanged(meeting) {
-        if (meeting == undefined)
+        if (!meeting)
             return;
         this.participantsChanged(this.participant);
     }
     participantsChanged(participant) {
-        if (participant == undefined)
+        if (!participant)
             return;
-        if (this.meeting === undefined) {
+        if (!this.meeting) {
             if (this.isPreview) {
                 this.videoEl && this.participant.registerVideoElement(this.videoEl, this.isPreview);
             }
@@ -63317,7 +63337,18 @@ const RtkSidebarUi = class {
         /** Language */
         this.t = useLanguage();
         this.onClose = () => {
+            var _a;
             this.sidebarClose.emit();
+            /**
+             * NOTE(ravindra-cloudflare):
+             * If the sidebar was opened from a RealtimeKit component, apply a blur (remove focus/active class).
+             * This helps remove the active border from RTK toggles, such as rtk-polls-toggle, rtk-chat-toggle, etc.
+             */
+            if (document.activeElement instanceof HTMLElement &&
+                ((_a = document.activeElement.tagName) === null || _a === void 0 ? void 0 : _a.includes('RTK-')) &&
+                document.activeElement.blur instanceof Function) {
+                document.activeElement.blur();
+            }
         };
     }
     componentDidLoad() {
@@ -63340,11 +63371,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: '4afc881e8aeb5f51014817e1287aed7700bb56fb', ref: (el) => (this.hostEl = el), class: this.view }, !this.hideCloseAction && (h("rtk-button", { key: 'e95b2c25d32535630e0ccf30b46f067395c41a7f', ref: (el) => (this.closeButton = el), variant: "ghost", kind: "icon", class: "close", onClick: this.onClose, "aria-label": this.t('close') }, h("rtk-icon", { key: '0d6398171fbebd8d9b0895fc2e9f0b08e7980ab2', icon: this.iconPack.dismiss }))), activeTab && !this.hideHeader && (h("header", { key: 'e92a6c60fa280a36b4643873d48adca3210e3c51', class: "main-header" }, h("h3", { key: '8097b3e815c3005c7750c7076eb54242406034a9' }, activeTab.name), h("slot", { key: 'f91814a6fb62726790ae5c91111be0f6d1ea121c', name: "pinned-state" }))), isFullScreen && (h("header", { key: '5ec434bbc22ffa7acf8a76361e02718080c7a99d', class: "mobile-tabs" }, this.tabs.map((tab) => (h("button", { onClick: () => {
+        return (h(Host, { key: 'bc9969254516bb334f0bbc6216432121d675a83e', ref: (el) => (this.hostEl = el), class: this.view }, !this.hideCloseAction && (h("rtk-button", { key: 'ce9dabf448e0914fa516c717825ee00ad476d412', ref: (el) => (this.closeButton = el), variant: "ghost", kind: "icon", class: "close", onClick: this.onClose, "aria-label": this.t('close') }, h("rtk-icon", { key: '5966e4c6a7bbdea25fa64e197c47fcded0625754', icon: this.iconPack.dismiss }))), activeTab && !this.hideHeader && (h("header", { key: '3b7109ba37e019a3da3a0aeb07b54fcf28e869b4', class: "main-header" }, h("h3", { key: 'c57a8719fe6dca4ed092fbb21733c0d0ac074dc3' }, activeTab.name), h("slot", { key: 'f95589b898e0b4a8001d45d5b4c833576fab4fd8', name: "pinned-state" }))), isFullScreen && (h("header", { key: '72cd52ea2a27caf4dc826d4222738325853281c8', 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: '77ee9da399e6991cc7bf3e0d979ffeec47e4b769', name: this.currentTab })));
+            } }, tab.name))))), h("slot", { key: '266ec59a2d04803b2d035f7929394e66e92aa542', name: this.currentTab })));
     }
     static get watchers() { return {
         "currentTab": ["handleFocusCloseButton"]

package/dist/esm/rtk-avatar_54.entry.js CHANGED Viewed

@@ -11,7 +11,7 @@ import { g as getExtension, a as getFileSize, d as downloadFile } from './file-1
 import { p as provideRtkDesignSystem, d as deepMerge } from './merge-5ff8860a.js';
 import { g as generateConfig, R as RTKNotificationsAudio } from './notification-ae21c8fc.js';
 import { i as index } from './ResizeObserver.es-02979d4e.js';
-import { c as computePosition, o as offset, f as flip, s as shift, a as arrow } from './floating-ui.dom.esm-a2dc8eef.js';
+import { c as computePosition, o as offset, f as flip, s as shift, a as arrow } from './floating-ui.dom.esm-21c3d54e.js';
 import { T as TextMessageView } from './TextMessage-1a4c6c6c.js';
 const rtkAvatarCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:flex;height:var(--rtk-space-32, 128px);width:var(--rtk-space-32, 128px);align-items:center;justify-content:center;font-size:28px;--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-1000, var(--rtk-colors-text-1000, 255 255 255)));overflow:clip;border-radius:9999px;-webkit-user-select:none;-moz-user-select:none;user-select:none}rtk-icon{height:50%;width:50%}.image-ctr{display:flex;height:100%;width:100%;align-items:center;justify-content:center;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}img{height:var(--rtk-space-0, 0px);width:var(--rtk-space-0, 0px);-o-object-fit:cover;object-fit:cover}img.loaded{height:100%;width:100%}.initials{display:flex;height:100%;width:100%;align-items:center;justify-content:center;text-transform:uppercase}.image{display:flex;height:100%;width:100%;align-items:center;justify-content:center}.image img{display:none;height:100%;width:100%;-o-object-fit:cover;object-fit:cover}.image img.loaded{display:block}:host([variant='hexagon']){border-radius:var(--rtk-border-radius-none, 0);clip-path:polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%)}:host([variant='square']){border-radius:var(--rtk-border-radius-none, 0);clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)}:host([size='sm']){height:var(--rtk-space-14, 56px);width:var(--rtk-space-14, 56px);font-size:12px}:host([size='md']){height:var(--rtk-space-28, 112px);width:var(--rtk-space-28, 112px)}:host([size='lg']){height:var(--rtk-space-32, 128px);width:var(--rtk-space-32, 128px)}";
@@ -3529,7 +3529,7 @@ const RtkDialogManager = class {
         (_a = this.meeting.stage) === null || _a === void 0 ? void 0 : _a.removeListener('stageStatusUpdate', this.stageStatusUpdateListener);
     }
     meetingChanged(meeting) {
-        if (meeting == undefined)
+        if (!meeting)
             return;
         const { stage } = meeting;
         stage === null || stage === void 0 ? void 0 : stage.addListener('stageStatusUpdate', this.stageStatusUpdateListener);

package/dist/esm/rtk-camera-selector_2.entry.js CHANGED Viewed

@@ -187,14 +187,14 @@ const RtkParticipantTile = class {
         this.tileUnload.emit(this.participant);
     }
     meetingChanged(meeting) {
-        if (meeting == undefined)
+        if (!meeting)
             return;
         this.participantsChanged(this.participant);
     }
     participantsChanged(participant) {
-        if (participant == undefined)
+        if (!participant)
             return;
-        if (this.meeting === undefined) {
+        if (!this.meeting) {
             if (this.isPreview) {
                 this.videoEl && this.participant.registerVideoElement(this.videoEl, this.isPreview);
             }

package/dist/esm/rtk-caption-toggle.entry.js CHANGED Viewed

@@ -38,7 +38,7 @@ const RtkCaptionToggle = class {
         this.meetingChanged(this.meeting);
     }
     meetingChanged(meeting) {
-        if (meeting === null)
+        if (!meeting)
             return;
         this.permissionsUpdateListener();
         this.meeting.self.permissions.addListener('permissionsUpdate', this.permissionsUpdateListener);

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

@@ -2,11 +2,11 @@ import { r as registerInstance, c as createEvent, h, H as Host, a as getElement
 import { e as defaultIconPack, h as useLanguage, c as createDefaultConfig, L as FlagsmithFeatureFlags } from './ui-store-0098d5c6.js';
 import { l as lenChildren, R as Render } from './index-d31a2e33.js';
 import { f as formatName, s as shorten } from './string-ed1380fb.js';
-import { c as computePosition, b as autoPlacement, o as offset, s as shift, h as hide } from './floating-ui.dom.esm-a2dc8eef.js';
+import { c as computePosition, b as autoPlacement, o as offset, s as shift, h as hide } from './floating-ui.dom.esm-21c3d54e.js';
 import { S as SyncWithStore } from './index-914449da.js';
 import { d as debounce } from './debounce-3ef43cb6.js';
-const rtkParticipantCss = ":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:flex;height:var(--rtk-space-14, 56px);align-items:center;justify-content:space-between;cursor:pointer;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}:host rtk-avatar{height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);font-size:14px}.left{display:flex;align-items:center}.left>*{margin-right:var(--rtk-space-2, 8px)}.left>*:last-child{margin-right:var(--rtk-space-0, 0px)}.right{display:flex;align-items:center;justify-content:flex-end}.right>*{margin-left:var(--rtk-space-2, 8px)}.right>*:first-child{margin-left:var(--rtk-space-0, 0px)}.name{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}rtk-icon{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}rtk-icon.red{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}rtk-icon.more{cursor:pointer}.menu{position:relative;display:inline-block;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}#menu-list{position:absolute;top:var(--rtk-space-8, 32px) !important;right:var(--rtk-space-4, 16px) !important;z-index:20}";
+const rtkParticipantCss = ":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:flex;height:var(--rtk-space-14, 56px);align-items:center;justify-content:space-between;cursor:pointer;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}:host rtk-avatar{height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);font-size:14px}.left{display:flex;align-items:center}.left>*{margin-right:var(--rtk-space-2, 8px)}.left>*:last-child{margin-right:var(--rtk-space-0, 0px)}.right{display:flex;align-items:center;justify-content:flex-end}.right>*{margin-left:var(--rtk-space-2, 8px)}.right>*:first-child{margin-left:var(--rtk-space-0, 0px)}.name{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}rtk-icon{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}rtk-icon.red{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}rtk-icon.more{cursor:pointer}.menu{position:relative;display:inline-block;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}#menu-list{position:absolute;z-index:20}";
 const RtkParticipantStyle0 = rtkParticipantCss;
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {

package/dist/esm/rtk-plugin-main_2.entry.js CHANGED Viewed

@@ -66,7 +66,7 @@ const RtkPluginMain = class {
         this.pluginChanged(this.plugin);
     }
     meetingChanged(meeting) {
-        if (meeting == undefined)
+        if (!meeting)
             return;
         const enabled = this.canInteractWithPlugin();
         this.viewModeEnabled = !enabled;

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

@@ -105,6 +105,8 @@ const RtkPolls = class {
         this.t = useLanguage();
         /** Create State */
         this.create = false;
+        /** Polls */
+        this.polls = [];
         this.onPollsUpdate = (data) => {
             this.polls = [...data.polls];
         };
@@ -123,9 +125,9 @@ const RtkPolls = class {
         this.meeting.self.permissions.removeListener('pollsUpdate', this.onUpdatePermissions);
     }
     meetingChanged(meeting) {
-        if (meeting == undefined)
+        if (!meeting)
             return;
-        if (meeting && !meeting.polls)
+        if (!meeting.polls)
             return;
         this.permissions = this.meeting.self.permissions;
         this.polls = [...meeting.polls.items];
@@ -146,14 +148,15 @@ const RtkPolls = class {
         smoothScrollToBottom(this.pollEl);
     }
     render() {
-        return (h(Host, { key: '32f9a66439b84ad236368f1aa09c2aaa2dad71c0' }, h("div", { key: '0703028114fffd45a29dc4b952588356039f105d', class: "ctr", part: "container" }, h("div", { key: '45aecbd2b846b297add5b267b9798e69da1a1028', class: "polls-view scrollbar", ref: (el) => (this.pollEl = el), part: "polls" }, this.polls.length == 0 && this.create !== true && (h("div", { key: 'c2d3dbf8e58715dd67043fad64b2859a1674754d', class: "empty-polls" }, this.t('polls.empty'))), this.polls.map((item) => {
+        var _a, _b;
+        return (h(Host, { key: 'f259b6fa652fe2e81c18d3a0fb85a15d0c091de3' }, h("div", { key: '6cc127127307bcb1a5482a260fe7ccaf65bb1e3d', class: "ctr", part: "container" }, h("div", { key: 'ef9df557e4a5fb99ea2ce66172b7a889410daeea', class: "polls-view scrollbar", ref: (el) => (this.pollEl = el), part: "polls" }, this.polls.length == 0 && this.create !== true && (h("div", { key: '0eb92f8f60ab00fb849b2d656a9d8bafb26195de', 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: '6ac47131bb1c34b5f00771183c5738759093133b', part: "poll-form", onRtkCreatePoll: (e) => {
+        }), this.create && (h("rtk-poll-form", { key: '71fc9e183684f5cafee5f0885af3d679d099a8ec', part: "poll-form", onRtkCreatePoll: (e) => {
                 this.onCreate(e.detail);
-            }, iconPack: this.iconPack, t: this.t }))), this.permissions.polls.canCreate && (h("rtk-button", { key: '1e8ec7c85707c1f0db18b89c069190cc43963b11', 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: '0639577353327ded0d1e7db08cbaadac47ec296c', 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-sidebar-ui.entry.js CHANGED Viewed

@@ -35,7 +35,18 @@ const RtkSidebarUi = class {
         /** Language */
         this.t = useLanguage();
         this.onClose = () => {
+            var _a;
             this.sidebarClose.emit();
+            /**
+             * NOTE(ravindra-cloudflare):
+             * If the sidebar was opened from a RealtimeKit component, apply a blur (remove focus/active class).
+             * This helps remove the active border from RTK toggles, such as rtk-polls-toggle, rtk-chat-toggle, etc.
+             */
+            if (document.activeElement instanceof HTMLElement &&
+                ((_a = document.activeElement.tagName) === null || _a === void 0 ? void 0 : _a.includes('RTK-')) &&
+                document.activeElement.blur instanceof Function) {
+                document.activeElement.blur();
+            }
         };
     }
     componentDidLoad() {
@@ -58,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: '4afc881e8aeb5f51014817e1287aed7700bb56fb', ref: (el) => (this.hostEl = el), class: this.view }, !this.hideCloseAction && (h("rtk-button", { key: 'e95b2c25d32535630e0ccf30b46f067395c41a7f', ref: (el) => (this.closeButton = el), variant: "ghost", kind: "icon", class: "close", onClick: this.onClose, "aria-label": this.t('close') }, h("rtk-icon", { key: '0d6398171fbebd8d9b0895fc2e9f0b08e7980ab2', icon: this.iconPack.dismiss }))), activeTab && !this.hideHeader && (h("header", { key: 'e92a6c60fa280a36b4643873d48adca3210e3c51', class: "main-header" }, h("h3", { key: '8097b3e815c3005c7750c7076eb54242406034a9' }, activeTab.name), h("slot", { key: 'f91814a6fb62726790ae5c91111be0f6d1ea121c', name: "pinned-state" }))), isFullScreen && (h("header", { key: '5ec434bbc22ffa7acf8a76361e02718080c7a99d', class: "mobile-tabs" }, this.tabs.map((tab) => (h("button", { onClick: () => {
+        return (h(Host, { key: 'bc9969254516bb334f0bbc6216432121d675a83e', ref: (el) => (this.hostEl = el), class: this.view }, !this.hideCloseAction && (h("rtk-button", { key: 'ce9dabf448e0914fa516c717825ee00ad476d412', ref: (el) => (this.closeButton = el), variant: "ghost", kind: "icon", class: "close", onClick: this.onClose, "aria-label": this.t('close') }, h("rtk-icon", { key: '5966e4c6a7bbdea25fa64e197c47fcded0625754', icon: this.iconPack.dismiss }))), activeTab && !this.hideHeader && (h("header", { key: '3b7109ba37e019a3da3a0aeb07b54fcf28e869b4', class: "main-header" }, h("h3", { key: 'c57a8719fe6dca4ed092fbb21733c0d0ac074dc3' }, activeTab.name), h("slot", { key: 'f95589b898e0b4a8001d45d5b4c833576fab4fd8', name: "pinned-state" }))), isFullScreen && (h("header", { key: '72cd52ea2a27caf4dc826d4222738325853281c8', 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: '77ee9da399e6991cc7bf3e0d979ffeec47e4b769', name: this.currentTab })));
+            } }, tab.name))))), h("slot", { key: '266ec59a2d04803b2d035f7929394e66e92aa542', name: this.currentTab })));
     }
     static get watchers() { return {
         "currentTab": ["handleFocusCloseButton"]

package/dist/realtimekit-ui/{p-6271e03b.entry.js → p-1b626699.entry.js} RENAMED Viewed

	@@ -1 +1 @@
1	- import{r as t,c as r,h as a,H as i}from"./p-0ee570cd.js";import{c as s,e,h as o}from"./p-3c9aa206.js";import{S as l}from"./p-e51bb952.js";import{s as n}from"./p-0752f2ba.js";var c=function(t,r,a,i){var s,e=arguments.length,o=e<3?r:null===i?i=Object.getOwnPropertyDescriptor(r,a):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,r,a,i);else for(var l=t.length-1;l>=0;l--)(s=t[l])&&(o=(e<3?s(o):e>3?s(r,a,o):s(r,a))\|\|o);return e>3&&o&&Object.defineProperty(r,a,o),o};const d=class{constructor(a){t(this,a),this.stateUpdate=r(this,"rtkStateUpdate",7),this.config=s(),this.iconPack=e,this.t=o(),this.plugins=[],this.canStartPlugins=!1,this.canClosePlugins=!1,this.activatedPluginsId=[],this.close=()=>{this.stateUpdate.emit({activeSidebar:!1,sidebar:void 0})}}connectedCallback(){this.meetingChanged(this.meeting)}disconnectedCallback(){var t;null===(t=this.meeting)\|\|void 0===t\|\|t.plugins.all.removeListener("stateUpdate",this.updateActivePlugins)}meetingChanged(t){null!=t&&(this.canStartPlugins=t.self.permissions.plugins.canStart,this.canClosePlugins=t.self.permissions.plugins.canClose,this.plugins=t.plugins.all.toArray().filter((r=>{var a;return!(null===(a=t.self.config.disabledPlugins)\|\|void 0===a?void 0:a.includes(r.id))})),this.updateActivePlugins=()=>{this.activatedPluginsId=t.plugins.active.toArray().map((t=>t.id))},this.updateActivePlugins(),t.plugins.all.addListener("stateUpdate",this.updateActivePlugins))}render(){return a(i,{key:"4df38ce202b9551b38746e549824ff800ffc9fc1"},a("ul",{key:"19ad38b73ff77459cfda3227a013c2e28823386f",class:"scrollbar"},this.plugins.map((t=>a("li",{key:t.name,class:"plugin"},a("div",{class:"metadata"},a("img",{src:t.picture}),a("div",{class:"name"},t.name)),!this.activatedPluginsId.includes(t.id)&&this.canStartPlugins&&a("div",{class:"buttons"},a("rtk-button",{kind:"icon",size:"lg",onClick:()=>{t.activate(),this.close()},"aria-label":`${this.t("activate")} ${t.name}`},a("rtk-icon",{icon:this.iconPack.rocket,tabIndex:-1,"aria-hidden":!0}))),this.activatedPluginsId.includes(t.id)&&this.canClosePlugins&&a("div",{class:"buttons"},a("rtk-button",{kind:"icon",size:"lg",onClick:()=>{t.deactivate()},"aria-label":`${this.t("close")} ${t.name}`},a("rtk-icon",{icon:this.iconPack.dismiss,tabIndex:-1,"aria-hidden":!0}))))))))}static get watchers(){return{meeting:["meetingChanged"]}}};c([l()],d.prototype,"meeting",void 0),c([l()],d.prototype,"config",void 0),c([l()],d.prototype,"iconPack",void 0),c([l()],d.prototype,"t",void 0),d.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)))}: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))}";var p=function(t,r,a,i){var s,e=arguments.length,o=e<3?r:null===i?i=Object.getOwnPropertyDescriptor(r,a):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,r,a,i);else for(var l=t.length-1;l>=0;l--)(s=t[l])&&(o=(e<3?s(o):e>3?s(r,a,o):s(r,a))\|\|o);return e>3&&o&&Object.defineProperty(r,a,o),o};const h=class{constructor(r){t(this,r),this.config=s(),this.iconPack=e,this.t=o(),this.create=!1,this.onPollsUpdate=t=>{this.polls=[...t.polls]},this.onUpdatePermissions=()=>{this.permissions=this.meeting.self.permissions}}connectedCallback(){this.meetingChanged(this.meeting)}disconnectedCallback(){var t;this.meeting&&(null===(t=this.meeting.polls)\|\|void 0===t\|\|t.removeListener("pollsUpdate",this.onPollsUpdate),this.meeting.self.permissions.removeListener("pollsUpdate",this.onUpdatePermissions))}meetingChanged(t){~~null!=~~t&&(t~~&&!t~~.polls\|\|(this.permissions=this.meeting.self.permissions,this.polls=[...t.polls.items],t.polls.addListener("pollsUpdate",this.onPollsUpdate),this.meeting.self.permissions.addListener("pollsUpdate",this.onUpdatePermissions),this.onCreate=async r=>{this.create=!1,await t.polls.create(r.question,r.options,r.anonymous,r.hideVotes)},this.onVote=async(r,a)=>{await t.polls.vote(r,a)}))}toggleCreateState(){this.create=!this.create}componentDidRender(){n(this.pollEl)}render(){return a(i,{key:"~~32f9a66439b84ad236368f1aa09c2aaa2dad71c0~~"},a("div",{key:"~~0703028114fffd45a29dc4b952588356039f105d~~",class:"ctr",part:"container"},a("div",{key:"~~45aecbd2b846b297add5b267b9798e69da1a1028~~",class:"polls-view scrollbar",ref:t=>this.pollEl=t,part:"polls"},0==this.polls.length&&!0!==this.create&&a("div",{key:"~~c2d3dbf8e58715dd67043fad64b2859a1674754d~~",class:"empty-polls"},this.t("polls.empty")),this.polls.map((t=>{var r;return a("rtk-poll",{key:t.id,poll:t,onRtkVotePoll:t=>{this.onVote(t.detail.id,t.detail.index)},self:null===(r=this.meeting)\|\|void 0===r?void 0:r.self.userId,iconPack:this.iconPack,t:this.t,permissions:this.permissions})})),this.create&&a("rtk-poll-form",{key:"~~6ac47131bb1c34b5f00771183c5738759093133b~~",part:"poll-form",onRtkCreatePoll:t=>{this.onCreate(t.detail)},iconPack:this.iconPack,t:this.t})),this.permissions.polls.canCreate&&a("rtk-button",{key:"~~1e8ec7c85707c1f0db18b89c069190cc43963b11~~",kind:"wide",onClick:()=>this.toggleCreateState(),variant:this.create?"secondary":"primary",part:"button"},this.t(this.create?"polls.cancel":"polls.create"))))}static get watchers(){return{meeting:["meetingChanged"]}}};p([l()],h.prototype,"meeting",void 0),p([l()],h.prototype,"config",void 0),p([l()],h.prototype,"iconPack",void 0),p([l()],h.prototype,"t",void 0),h.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)))}: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}";export{d as rtk_plugins,h as rtk_polls}
1	+ import{r as t,c as r,h as a,H as i}from"./p-0ee570cd.js";import{c as s,e,h as o}from"./p-3c9aa206.js";import{S as l}from"./p-e51bb952.js";import{s as n}from"./p-0752f2ba.js";var c=function(t,r,a,i){var s,e=arguments.length,o=e<3?r:null===i?i=Object.getOwnPropertyDescriptor(r,a):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,r,a,i);else for(var l=t.length-1;l>=0;l--)(s=t[l])&&(o=(e<3?s(o):e>3?s(r,a,o):s(r,a))\|\|o);return e>3&&o&&Object.defineProperty(r,a,o),o};const d=class{constructor(a){t(this,a),this.stateUpdate=r(this,"rtkStateUpdate",7),this.config=s(),this.iconPack=e,this.t=o(),this.plugins=[],this.canStartPlugins=!1,this.canClosePlugins=!1,this.activatedPluginsId=[],this.close=()=>{this.stateUpdate.emit({activeSidebar:!1,sidebar:void 0})}}connectedCallback(){this.meetingChanged(this.meeting)}disconnectedCallback(){var t;null===(t=this.meeting)\|\|void 0===t\|\|t.plugins.all.removeListener("stateUpdate",this.updateActivePlugins)}meetingChanged(t){null!=t&&(this.canStartPlugins=t.self.permissions.plugins.canStart,this.canClosePlugins=t.self.permissions.plugins.canClose,this.plugins=t.plugins.all.toArray().filter((r=>{var a;return!(null===(a=t.self.config.disabledPlugins)\|\|void 0===a?void 0:a.includes(r.id))})),this.updateActivePlugins=()=>{this.activatedPluginsId=t.plugins.active.toArray().map((t=>t.id))},this.updateActivePlugins(),t.plugins.all.addListener("stateUpdate",this.updateActivePlugins))}render(){return a(i,{key:"4df38ce202b9551b38746e549824ff800ffc9fc1"},a("ul",{key:"19ad38b73ff77459cfda3227a013c2e28823386f",class:"scrollbar"},this.plugins.map((t=>a("li",{key:t.name,class:"plugin"},a("div",{class:"metadata"},a("img",{src:t.picture}),a("div",{class:"name"},t.name)),!this.activatedPluginsId.includes(t.id)&&this.canStartPlugins&&a("div",{class:"buttons"},a("rtk-button",{kind:"icon",size:"lg",onClick:()=>{t.activate(),this.close()},"aria-label":`${this.t("activate")} ${t.name}`},a("rtk-icon",{icon:this.iconPack.rocket,tabIndex:-1,"aria-hidden":!0}))),this.activatedPluginsId.includes(t.id)&&this.canClosePlugins&&a("div",{class:"buttons"},a("rtk-button",{kind:"icon",size:"lg",onClick:()=>{t.deactivate()},"aria-label":`${this.t("close")} ${t.name}`},a("rtk-icon",{icon:this.iconPack.dismiss,tabIndex:-1,"aria-hidden":!0}))))))))}static get watchers(){return{meeting:["meetingChanged"]}}};c([l()],d.prototype,"meeting",void 0),c([l()],d.prototype,"config",void 0),c([l()],d.prototype,"iconPack",void 0),c([l()],d.prototype,"t",void 0),d.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)))}: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))}";var p=function(t,r,a,i){var s,e=arguments.length,o=e<3?r:null===i?i=Object.getOwnPropertyDescriptor(r,a):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,r,a,i);else for(var l=t.length-1;l>=0;l--)(s=t[l])&&(o=(e<3?s(o):e>3?s(r,a,o):s(r,a))\|\|o);return e>3&&o&&Object.defineProperty(r,a,o),o};const h=class{constructor(r){t(this,r),this.config=s(),this.iconPack=e,this.t=o(),this.create=!1,this.polls=[],this.onPollsUpdate=t=>{this.polls=[...t.polls]},this.onUpdatePermissions=()=>{this.permissions=this.meeting.self.permissions}}connectedCallback(){this.meetingChanged(this.meeting)}disconnectedCallback(){var t;this.meeting&&(null===(t=this.meeting.polls)\|\|void 0===t\|\|t.removeListener("pollsUpdate",this.onPollsUpdate),this.meeting.self.permissions.removeListener("pollsUpdate",this.onUpdatePermissions))}meetingChanged(t){t&&t.polls&&(this.permissions=this.meeting.self.permissions,this.polls=[...t.polls.items],t.polls.addListener("pollsUpdate",this.onPollsUpdate),this.meeting.self.permissions.addListener("pollsUpdate",this.onUpdatePermissions),this.onCreate=async r=>{this.create=!1,await t.polls.create(r.question,r.options,r.anonymous,r.hideVotes)},this.onVote=async(r,a)=>{await t.polls.vote(r,a)})}toggleCreateState(){this.create=!this.create}componentDidRender(){n(this.pollEl)}render(){var t,r;return a(i,{key:"f259b6fa652fe2e81c18d3a0fb85a15d0c091de3"},a("div",{key:"6cc127127307bcb1a5482a260fe7ccaf65bb1e3d",class:"ctr",part:"container"},a("div",{key:"ef9df557e4a5fb99ea2ce66172b7a889410daeea",class:"polls-view scrollbar",ref:t=>this.pollEl=t,part:"polls"},0==this.polls.length&&!0!==this.create&&a("div",{key:"0eb92f8f60ab00fb849b2d656a9d8bafb26195de",class:"empty-polls"},this.t("polls.empty")),this.polls.map((t=>{var r;return a("rtk-poll",{key:t.id,poll:t,onRtkVotePoll:t=>{this.onVote(t.detail.id,t.detail.index)},self:null===(r=this.meeting)\|\|void 0===r?void 0:r.self.userId,iconPack:this.iconPack,t:this.t,permissions:this.permissions})})),this.create&&a("rtk-poll-form",{key:"71fc9e183684f5cafee5f0885af3d679d099a8ec",part:"poll-form",onRtkCreatePoll:t=>{this.onCreate(t.detail)},iconPack:this.iconPack,t:this.t})),(null===(r=null===(t=this.permissions)\|\|void 0===t?void 0:t.polls)\|\|void 0===r?void 0:r.canCreate)&&a("rtk-button",{key:"0639577353327ded0d1e7db08cbaadac47ec296c",kind:"wide",onClick:()=>this.toggleCreateState(),variant:this.create?"secondary":"primary",part:"button"},this.t(this.create?"polls.cancel":"polls.create"))))}static get watchers(){return{meeting:["meetingChanged"]}}};p([l()],h.prototype,"meeting",void 0),p([l()],h.prototype,"config",void 0),p([l()],h.prototype,"iconPack",void 0),p([l()],h.prototype,"t",void 0),h.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)))}: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}";export{d as rtk_plugins,h as rtk_polls}

package/dist/realtimekit-ui/p-4d40567d.entry.js ADDED Viewed

@@ -0,0 +1 @@

+ import{r as t,w as n,h as i,H as r,c as a}from"./p-0ee570cd.js";import{e,h as o,c as s,L as p}from"./p-3c9aa206.js";import{S as d}from"./p-e51bb952.js";import{R as c}from"./p-c8eaa707.js";var l=function(t,n,i,r){var a,e=arguments.length,o=e<3?n:null===r?r=Object.getOwnPropertyDescriptor(n,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,n,i,r);else for(var s=t.length-1;s>=0;s--)(a=t[s])&&(o=(e<3?a(o):e>3?a(n,i,o):a(n,i))||o);return e>3&&o&&Object.defineProperty(n,i,o),o};const h=class{constructor(n){t(this,n),this.iconPack=e,this.variant="full",this.t=o(),this.videoDevices=[],this.canProduceVideo=!0,this.stageStateListener=()=>{this.canProduceVideo="ALLOWED"===this.meeting.self.permissions.canProduceVideo},this.deviceListUpdateListener=({devices:t})=>{this.videoDevices=t.filter((t=>"videoinput"===t.kind))},this.deviceUpdateListener=({device:t})=>{"videoinput"===t.kind&&(this.currentDevice=t)},this.mediaPermissionUpdateListener=async({kind:t,message:n})=>{this.meeting&&"video"===t&&"ACCEPTED"===n&&(this.videoDevices=await this.meeting.self.getVideoDevices())}}meetingChanged(t){var i,r,a;t&&(null===(i=t.self)||void 0===i||i.addListener("deviceListUpdate",this.deviceListUpdateListener),null===(r=t.self)||void 0===r||r.addListener("deviceUpdate",this.deviceUpdateListener),null===(a=t.self)||void 0===a||a.addListener("mediaPermissionUpdate",this.mediaPermissionUpdateListener),n((async()=>{var n,i;const r=await t.self.getVideoDevices(),a=null===(n=t.self.getCurrentDevices())||void 0===n?void 0:n.video;this.videoDevices=null!=a?[null!==(i=r.find((t=>t.deviceId===a.deviceId)))&&void 0!==i?i:a,...r.filter((t=>t.deviceId!==a.deviceId))]:r})))}connectedCallback(){this.meetingChanged(this.meeting)}disconnectedCallback(){var t,n,i,r,a;null===(n=null===(t=this.meeting)||void 0===t?void 0:t.stage)||void 0===n||n.removeListener("stageStatusUpdate",this.stageStateListener),null===(i=this.meeting)||void 0===i||i.self.removeListener("deviceListUpdate",this.deviceListUpdateListener),null===(r=this.meeting)||void 0===r||r.self.removeListener("deviceUpdate",this.deviceUpdateListener),null===(a=this.meeting)||void 0===a||a.self.removeListener("mediaPermissionUpdate",this.mediaPermissionUpdateListener)}async setDevice(t){var n;const i=this.videoDevices.find((n=>n.deviceId===t));this.currentDevice=i,null!=i&&await(null===(n=this.meeting)||void 0===n?void 0:n.self.setDevice(i))}render(){if(!this.meeting)return null;let t=0;return i(r,null,this.canProduceVideo&&i("div",{class:"group container "+this.variant,part:"camera-selection"},i("label",null,"inline"!==this.variant&&this.t("camera"),i("rtk-icon",{icon:this.iconPack.video_on,size:"sm"})),i("div",{class:"row"},i("select",{class:"rtk-select",onChange:t=>this.setDevice(t.target.value)},this.videoDevices.map((({deviceId:n,label:r})=>{var a;return i("option",{selected:(null===(a=this.currentDevice)||void 0===a?void 0:a.deviceId)===n,value:n},r||"Camera "+ ++t)}))))))}static get watchers(){return{meeting:["meetingChanged"]}}};l([d()],h.prototype,"meeting",void 0),l([d()],h.prototype,"iconPack",void 0),l([d()],h.prototype,"t",void 0),h.style=".rtk-select{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.rtk-select:focus{--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(0px + 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)}.rtk-select{display:block;border-radius:var(--rtk-border-radius-sm, 4px);border-width:var(--rtk-border-width-none, 0);border-style:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--rtk-space-3, 12px);font-size:16px;--icon-size:var(--rtk-select-chevron-size, var(--rtk-space-6, 24px));--icon-right-position:var(--rtk-select-chevron-right-position, var(--rtk-space-2, 8px));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\");background-position:right var(--icon-right-position) center;background-repeat:no-repeat;background-size:var(--icon-size) var(--icon-size);padding-right:calc(var(--icon-right-position) * 5);width:100%;max-width:100%;text-overflow:ellipsis}.inline .rtk-select{margin-top:var(--rtk-space-1, 4px);width:100%;padding-top:var(--rtk-space-1, 4px);padding-bottom:var(--rtk-space-1, 4px);padding-left:var(--rtk-space-1\\.5, 6px);padding-right:var(--rtk-space-1\\.5, 6px);padding-right:var(--rtk-space-8, 32px);font-size:14px}.row{margin-bottom:var(--rtk-space-2, 8px);display:flex;width:100%;align-items:center;justify-content:space-between;gap:var(--rtk-space-3, 12px)}.group{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px)}.group>*{margin-bottom:var(--rtk-space-2, 8px)}.group>*:last-child{margin-bottom:var(--rtk-space-0, 0px)}.group select{flex:1 1 0%}.group{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-0, 0px)}.group>*{margin-bottom:var(--rtk-space-0, 0px)}label{display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;gap:var(--rtk-space-1, 4px);font-size:14px}.inline.container{display:flex;align-items:center;justify-content:flex-start;gap:var(--rtk-space-2, 8px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px)}";var v=function(t,n,i,r){var a,e=arguments.length,o=e<3?n:null===r?r=Object.getOwnPropertyDescriptor(n,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,n,i,r);else for(var s=t.length-1;s>=0;s--)(a=t[s])&&(o=(e<3?a(o):e>3?a(n,i,o):a(n,i))||o);return e>3&&o&&Object.defineProperty(n,i,o),o};const g=class{constructor(n){t(this,n),this.tileLoad=a(this,"tileLoad",7),this.tileUnload=a(this,"tileUnload",7),this.isPinned=!1,this.mediaConnectionError=!1,this.nameTagPosition="bottom-left",this.isPreview=!1,this.config=s(),this.variant="solid",this.iconPack=e,this.t=o(),this.onPinned=({isPinned:t})=>{this.isPinned=t},this.isSelf=()=>{var t;return this.isPreview||this.participant.id===(null===(t=this.meeting)||void 0===t?void 0:t.self.id)},this.onPause=t=>{var n,i;this.isSelf()&&(null===(n=this.meeting)||void 0===n?void 0:n.__internals__.features.hasFeature(p.PLAY_PARTICIPANT_TILE_VIDEO_ON_PAUSE))&&(this.meeting.__internals__.logger.warn(`Video player paused for ${this.participant.id} isSelf: ${this.isSelf()}`),null===(i=null==t?void 0:t.target)||void 0===i||i.play())},this.onPlaying=()=>{this.playTimeout&&clearTimeout(this.playTimeout)}}onVideoRef(t){this.participant&&this.meeting&&t!==this.videoEl&&(this.videoEl=t,this.participant.registerVideoElement(this.videoEl,this.isPreview),this.tileLoad.emit({participant:this.participant,videoElement:this.videoEl}))}connectedCallback(){this.meeting?this.meetingChanged(this.meeting):this.participantsChanged(this.participant)}disconnectedCallback(){this.playTimeout&&clearTimeout(this.playTimeout),null!=this.participant&&(this.participant.deregisterVideoElement(this.videoEl,this.isPreview),this.participant.removeListener("pinned",this.onPinned),this.participant.removeListener("unpinned",this.onPinned),this.meeting.meta.off("mediaConnectionUpdate",this.mediaConnectionUpdateListener),this.tileUnload.emit(this.participant))}meetingChanged(t){t&&this.participantsChanged(this.participant)}participantsChanged(t){t&&(this.meeting?(this.isPinned=t.isPinned,this.videoEl&&this.participant.registerVideoElement(this.videoEl,this.isPreview),t.addListener("pinned",this.onPinned),t.addListener("unpinned",this.onPinned),this.meeting.meta.on("mediaConnectionUpdate",this.mediaConnectionUpdateListener.bind(this))):this.isPreview&&this.videoEl&&this.participant.registerVideoElement(this.videoEl,this.isPreview))}mediaConnectionUpdateListener(){var t,n,i;const{recv:r,send:a}=null!==(i=null===(n=null===(t=this.meeting)||void 0===t?void 0:t.meta)||void 0===n?void 0:n.mediaState)&&void 0!==i?i:{};this.mediaConnectionError="connected"!==(null==r?void 0:r.state)&&!this.isSelf()||!("connected"===(null==a?void 0:a.state)||!this.isSelf())}isMirrored(){var t;if(null!=this.participant&&this.isSelf()){const n=this.states,i=null===(t=null==n?void 0:n.prefs)||void 0===t?void 0:t.mirrorVideo;if("boolean"==typeof i)return i}return!1}render(){var t,n,a;if(!this.meeting)return null;const e={meeting:this.meeting,size:this.size,states:this.states,config:this.config,iconPack:this.iconPack,t:this.t};return i(r,null,i("video",{ref:t=>this.onVideoRef(t),class:{mirror:this.isMirrored(),[null!==(a=null===(n=null===(t=this.config)||void 0===t?void 0:t.config)||void 0===n?void 0:n.videoFit)&&void 0!==a?a:"cover"]:!0},onPlaying:this.onPlaying,onPause:this.onPause,autoPlay:!0,playsInline:!0,muted:!0,part:"video"}),this.isPinned&&i("rtk-icon",{class:"pinned-icon",icon:this.iconPack.pin,"aria-label":this.t("pinned"),part:"pinned-icon"}),this.mediaConnectionError&&i("div",{class:"network-container",part:"network-indicator"},i("rtk-icon",{class:"network-icon",icon:this.iconPack.disconnected,"aria-label":this.t("pinned"),part:"pinned-icon"})),i("slot",null,i(c,{element:"rtk-participant-tile",defaults:e,childProps:{participant:this.participant},deepProps:!0,onlyChildren:!0})))}static get watchers(){return{meeting:["meetingChanged"],participant:["participantsChanged"]}}};v([d()],g.prototype,"meeting",void 0),v([d()],g.prototype,"states",void 0),v([d()],g.prototype,"config",void 0),v([d()],g.prototype,"iconPack",void 0),v([d()],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 position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 16 / 9;\n height: var(--rtk-space-56, 224px);\n overflow: hidden;\n border-radius: var(--rtk-border-radius-lg, 12px);\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-video-bg, 24 24 24) / var(--tw-bg-opacity));\n\n transition-property: var(--rtk-transition-property, all);\n transition-duration: 150ms;\n container-type: inline-size;\n container-name: participanttile;\n}\n\n@media (prefers-reduced-motion) {\n /* No transitions when disabled */\n :host {\n --rtk-transition-property: none;\n }\n}\n\nrtk-avatar {\n z-index: -1;\n}\n\n/**\n NOTE: provided :slotted(rtk-name-tag) & rtk-name-tag separately\n because ::slotted isn't applied on default slots.\n*/\n\n::slotted(rtk-name-tag), \nrtk-name-tag {\n position: absolute;\n left: var(--rtk-space-3, 12px);\n bottom: var(--rtk-space-3, 12px);\n}\n\n:host([size='sm'][variant='solid']) ::slotted(rtk-name-tag), \n :host([size='sm'][variant='solid']) rtk-name-tag {\n left: var(--rtk-space-2, 8px);\n bottom: var(--rtk-space-2, 8px);\n height: var(--rtk-space-4, 16px);\n}\n\n::slotted(rtk-network-indicator), \nrtk-network-indicator {\n position: absolute;\n right: var(--rtk-space-3, 12px);\n bottom: var(--rtk-space-3, 12px);\n}\n\n:host([size='sm']) ::slotted(rtk-network-indicator), \n :host([size='sm']) rtk-network-indicator {\n right: var(--rtk-space-2, 8px);\n bottom: var(--rtk-space-2, 8px);\n}\n\nvideo {\n position: absolute;\n height: 100%;\n width: 100%;\n border-radius: var(--rtk-border-radius-lg, 12px);\n}\n\nvideo.contain {\n -o-object-fit: contain;\n object-fit: contain;\n}\n\nvideo.cover {\n -o-object-fit: cover;\n object-fit: cover;\n}\n\nvideo::-webkit-media-controls {\n display: none !important;\n}\n\n.pinned-icon {\n position: absolute;\n left: var(--rtk-space-3, 12px);\n top: var(--rtk-space-3, 12px);\n height: var(--rtk-space-5, 20px);\n width: var(--rtk-space-5, 20px);\n padding: var(--rtk-space-1, 4px);\n border-radius: var(--rtk-border-radius-md, 8px);\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));\n}\n\n.network-container {\n position: absolute;\n right: var(--rtk-space-3, 12px);\n bottom: var(--rtk-space-3, 12px);\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: var(--rtk-space-2, 8px);\n font-size: 12px;\n border-radius: var(--rtk-border-radius-md, 8px);\n --tw-bg-opacity: 1;\n background-color: rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));\n}\n.network-icon {\n height: var(--rtk-space-5, 20px);\n width: var(--rtk-space-5, 20px);\n --tw-text-opacity: 1;\n color: rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity));\n}\n\n:host([size='sm']) .pinned-icon {\n top: var(--rtk-space-2, 8px);\n left: var(--rtk-space-2, 8px);\n}\n\n:host([variant='gradient']) ::slotted(rtk-audio-visualizer), \n :host([variant='gradient']) 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 :host([variant='gradient']) 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\nvideo.mirror {\n transform: scaleX(-1);\n}\n\n/** Name tag positions */\n\n:host([name-tag-position='bottom-right']) ::slotted(rtk-name-tag), \n :host([name-tag-position='bottom-right']) 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 :host([name-tag-position='bottom-center']) rtk-name-tag {\n left: auto;\n right: auto;\n}\n\n:host([name-tag-position='top-left']) ::slotted(rtk-name-tag), \n :host([name-tag-position='top-left']) 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 :host([name-tag-position='top-right']) 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 :host([name-tag-position='top-center']) rtk-name-tag {\n left: auto;\n right: auto;\n bottom: auto;\n top: var(--rtk-space-3, 12px);\n}\n\n@media only screen and (max-height: 480px) and (orientation: landscape) {\n :host([size='sm']) {\n border-radius: var(--rtk-border-radius-sm, 4px);\n }\n\n :host([size='sm']) > video {\n border-radius: var(--rtk-border-radius-sm, 4px);\n }\n\n ::slotted(rtk-avatar), \n rtk-avatar {\n height: var(--rtk-space-12, 48px);\n width: var(--rtk-space-12, 48px);\n }\n :host([size='sm'][variant='solid']) ::slotted(rtk-name-tag),\n :host([size='sm'][variant='solid']) rtk-name-tag {\n transform-origin: -2% 100%;\n transform: scale(0.6);\n z-index: 10;\n left: var(--rtk-space-0, 0px);\n bottom: var(--rtk-space-0, 0px);\n border-radius: var(--rtk-border-radius-none, 0);\n }\n}\n\n@media only screen and (max-width: 480px) and (orientation: portrait) {\n :host([size='sm']) {\n border-radius: var(--rtk-border-radius-sm, 4px);\n }\n\n :host([size='sm']) > video {\n border-radius: var(--rtk-border-radius-sm, 4px);\n }\n\n ::slotted(rtk-avatar), \n rtk-avatar {\n height: var(--rtk-space-12, 48px);\n width: var(--rtk-space-12, 48px);\n }\n :host([size='sm'][variant='solid']) ::slotted(rtk-name-tag),\n :host([size='sm'][variant='solid']) rtk-name-tag {\n transform-origin: -5% 110%;\n transform: scale(0.6);\n z-index: 10;\n left: var(--rtk-space-0, 0px);\n bottom: var(--rtk-space-0, 0px);\n border-radius: var(--rtk-border-radius-none, 0);\n }\n}\n\n@container participanttile (max-width: 300px) {\n ::slotted(rtk-name-tag),\n rtk-name-tag {\n transform-origin: 0 100%;\n transform: scale(0.8);\n }\n\n ::slotted(rtk-avatar), \n rtk-avatar {\n height: var(--rtk-space-8, 32px) !important;\n width: var(--rtk-space-8, 32px) !important;\n }\n}\n\n@container participanttile (max-width: 150px) {\n ::slotted(rtk-name-tag),\n rtk-name-tag[variant='solid'] {\n transform-origin: -10% 130%;\n transform: scale(0.6);\n z-index: 10;\n border-radius: 9999px;\n }\n\n ::slotted(rtk-avatar), \n rtk-avatar {\n height: 6 !important;\n width: 6 !important;\n }\n}\n";export{h as rtk_camera_selector,g as rtk_participant_tile}