@streamscloud/embeddable 2.1.2 → 2.1.4

package/dist/short-videos/short-videos-player/action-button.svelte

@@ -18,19 +18,19 @@ export {};
   }
 }
 .action-button {
-  --_short-video-player--action-button--size: var(--short-video-player--action-button--size);
-  --_action-button--background: var(--action-button-background, #1c1c1c);
-  width: var(--_short-video-player--action-button--size);
-  min-width: var(--_short-video-player--action-button--size);
-  max-width: var(--_short-video-player--action-button--size);
-  height: var(--_short-video-player--action-button--size);
-  min-height: var(--_short-video-player--action-button--size);
-  max-height: var(--_short-video-player--action-button--size);
+  --_short-videos-player--action-button--size: var(--short-videos-player--action-button--size);
+  --_short-videos-player--action-button--background: var(--action-button-background, #1c1c1c);
+  width: var(--_short-videos-player--action-button--size);
+  min-width: var(--_short-videos-player--action-button--size);
+  max-width: var(--_short-videos-player--action-button--size);
+  height: var(--_short-videos-player--action-button--size);
+  min-height: var(--_short-videos-player--action-button--size);
+  max-height: var(--_short-videos-player--action-button--size);
   display: flex;
   justify-content: center;
   align-items: center;
   line-height: 0;
-  background: var(--_action-button--background);
+  background: var(--_short-videos-player--action-button--background);
   border-radius: 50%;
   --icon--size: 1.25rem;
   z-index: 1;

package/dist/short-videos/short-videos-player/cmp.short-videos-player.svelte

@@ -12,12 +12,12 @@ import { PlayerBuffer, PlayerSlider } from '../../ui/player';
 import { SpotlightLayout } from '../../ui/spotlight-layout';
 import { default as Controls } from './controls.svelte';
 import { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';
-import { ShortVideoPlayerUiManager } from './ui-manager.svelte';
+import { ShortVideosPlayerUiManager } from './ui-manager.svelte';
 import { onDestroy, onMount } from 'svelte';
 let { shortVideosProvider, localization: localizationInit, on } = $props();
 const localization = $derived(new ShortVideosPlayerLocalization(localizationInit));
 const buffer = $derived(new PlayerBuffer(shortVideosProvider));
-const uiManager = new ShortVideoPlayerUiManager();
+const uiManager = new ShortVideosPlayerUiManager();
 onMount(() => __awaiter(void 0, void 0, void 0, function* () {
     uiManager.detailsCollapsed = window && window.innerWidth < window.innerHeight;
 }));

package/dist/short-videos/short-videos-player/controls.svelte

@@ -3,12 +3,12 @@ import { Icon } from '../../ui/icon';
 import { MediaVolumeManager } from '../../ui/media-playback';
 import { default as ActionButton } from './action-button.svelte';
 import { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte.js';
-import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg';
-import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_20_regular.svg';
-import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg';
-import IconPanelRightGallery from '@fluentui/svg-icons/icons/panel_right_gallery_20_regular.svg';
-import IconSpeaker2 from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg';
-import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.svg';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
+import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_20_regular.svg?raw';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
+import IconPanelRightGallery from '@fluentui/svg-icons/icons/panel_right_gallery_20_regular.svg?raw';
+import IconSpeaker2 from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg?raw';
+import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.svg?raw';
 let { buffer, uiManager, localization, on } = $props();
 const toggleMuted = () => {
     MediaVolumeManager.isMuted = !MediaVolumeManager.isMuted;
@@ -16,16 +16,16 @@ const toggleMuted = () => {
 const shortVideo = $derived(buffer.current);
 </script>
 
-<div class="short-video-player-controls">
-  <div class="short-video-player-controls__left">
+<div class="short-videos-player-controls">
+  <div class="short-videos-player-controls__left">
     {#if shortVideo && uiManager.detailsCollapsed && !uiManager.showShortVideoOverlay}
-      <div class="short-video-player-controls__short-video-overlay">
-        <div class="short-video-player-controls__short-video-attachments-inline">
+      <div class="short-videos-player-controls__short-video-overlay">
+        <div class="short-videos-player-controls__short-video-attachments-inline">
           <ShortVideoViewerAttachmentsInline model={shortVideo} />
         </div>
       </div>
     {/if}
-    <div class="short-video-player-controls__navigation-buttons">
+    <div class="short-videos-player-controls__navigation-buttons">
       <button type="button" class="navigation-button" disabled={!buffer.canLoadPrevious} onclick={buffer.loadPrevious}>
         <Icon src={IconChevronUp} />
       </button>
@@ -34,13 +34,13 @@ const shortVideo = $derived(buffer.current);
       </button>
     </div>
   </div>
-  <div class="short-video-player-controls__right">
+  <div class="short-videos-player-controls__right">
     {#if shortVideo}
-      <div class="short-video-player-controls__short-video-attachments">
+      <div class="short-videos-player-controls__short-video-attachments">
         <ShortVideoViewerAttachments shortVideo={shortVideo} localization={localization.shortVideoDetailsLocalization?.attachmentsLocalization} />
       </div>
     {/if}
-    <div class="short-video-player-controls__controls">
+    <div class="short-videos-player-controls__controls">
       {#if shortVideo}
         <ActionButton on={{ click: toggleMuted }}>
           {#if MediaVolumeManager.isMuted}
@@ -79,37 +79,37 @@ const shortVideo = $derived(buffer.current);
 }
 .close-button {
   position: absolute;
-  top: var(--short-video-player--controls--offset-vertical);
-  right: var(--short-video-player--controls--offset-horizontal);
+  top: var(--short-videos-player--controls--offset-vertical);
+  right: var(--short-videos-player--controls--offset-horizontal);
   z-index: 1;
 }
 
 .toggle-collapsed-button {
   position: absolute;
-  bottom: var(--short-video-player--controls--offset-vertical);
-  right: var(--short-video-player--controls--offset-horizontal);
+  bottom: var(--short-videos-player--controls--offset-vertical);
+  right: var(--short-videos-player--controls--offset-horizontal);
   z-index: 1;
 }
 
-.short-video-player-controls {
+.short-videos-player-controls {
   position: absolute;
   top: 0;
   right: 0;
   height: 100%;
-  width: var(--short-video-player--sidebar--available-space);
+  width: var(--short-videos-player--sidebar--available-space);
   display: flex;
   justify-content: space-between;
   gap: 2.5rem;
-  padding: var(--short-video-player--controls--offset-vertical) var(--short-video-player--controls--offset-horizontal);
+  padding: var(--short-videos-player--controls--offset-vertical) var(--short-videos-player--controls--offset-horizontal);
   container-type: inline-size;
 }
-.short-video-player-controls__left {
+.short-videos-player-controls__left {
   display: flex;
   flex-direction: column;
   gap: 2.5rem;
   justify-content: flex-end;
 }
-.short-video-player-controls__right {
+.short-videos-player-controls__right {
   flex: 1;
   display: flex;
   justify-content: space-between;
@@ -119,11 +119,11 @@ const shortVideo = $derived(buffer.current);
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 9.375rem) {
-  .short-video-player-controls__right {
+  .short-videos-player-controls__right {
     display: none;
   }
 }
-.short-video-player-controls__short-video-overlay {
+.short-videos-player-controls__short-video-overlay {
   gap: 2.5rem;
   display: flex;
   flex: 1;
@@ -131,21 +131,21 @@ const shortVideo = $derived(buffer.current);
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-end;
-  --short-video-viewer--interactions--icon--size: var(--short-video-player--navigation-button--size);
+  --short-video-viewer--interactions--icon--size: var(--short-videos-player--navigation-button--size);
   --short-video-viewer--interactions--background--color: #1c1c1c;
   --short-video-viewer--interactions--counter--color: #f3f4f6;
   --short-video-viewer--interactions--icon--font-color: #f3f4f6;
 }
-.short-video-player-controls__short-video-attachments-inline {
+.short-videos-player-controls__short-video-attachments-inline {
   display: none;
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < calc(21.875rem + 3.75rem)) {
-  .short-video-player-controls__short-video-attachments-inline {
+  .short-videos-player-controls__short-video-attachments-inline {
     display: contents;
   }
 }
-.short-video-player-controls__short-video-attachments {
+.short-videos-player-controls__short-video-attachments {
   flex: 1;
   overflow-x: hidden;
   overflow-y: auto;
@@ -155,34 +155,34 @@ const shortVideo = $derived(buffer.current);
   max-width: 21.875rem;
   /* Set 'container-type: inline-size;' to reference container*/
 }
-.short-video-player-controls__short-video-attachments::-webkit-scrollbar {
+.short-videos-player-controls__short-video-attachments::-webkit-scrollbar {
   width: 3px;
   height: 3px;
   background: var(--custom-scrollbar-background, transparent);
   visibility: hidden;
 }
-.short-video-player-controls__short-video-attachments::-webkit-scrollbar-thumb {
+.short-videos-player-controls__short-video-attachments::-webkit-scrollbar-thumb {
   background: transparent;
 }
-.short-video-player-controls__short-video-attachments:hover {
+.short-videos-player-controls__short-video-attachments:hover {
   scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
   scrollbar-width: thin;
 }
-.short-video-player-controls__short-video-attachments:hover::-webkit-scrollbar {
+.short-videos-player-controls__short-video-attachments:hover::-webkit-scrollbar {
   width: 3px;
   height: 3px;
   background: var(--custom-scrollbar-background, transparent);
   visibility: hidden;
 }
-.short-video-player-controls__short-video-attachments:hover::-webkit-scrollbar-thumb {
+.short-videos-player-controls__short-video-attachments:hover::-webkit-scrollbar-thumb {
   background: var(--custom-scrollbar-color, #7d7d7d);
 }
 @container (width < calc(21.875rem + 3.75rem)) {
-  .short-video-player-controls__short-video-attachments {
+  .short-videos-player-controls__short-video-attachments {
     display: none;
   }
 }
-.short-video-player-controls__navigation-buttons {
+.short-videos-player-controls__navigation-buttons {
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -191,11 +191,11 @@ const shortVideo = $derived(buffer.current);
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 6.25rem) {
-  .short-video-player-controls__navigation-buttons {
+  .short-videos-player-controls__navigation-buttons {
     visibility: hidden;
   }
 }
-.short-video-player-controls__controls {
+.short-videos-player-controls__controls {
   display: flex;
   margin-top: auto;
   gap: 1rem;
@@ -203,12 +203,12 @@ const shortVideo = $derived(buffer.current);
 }
 
 .navigation-button {
-  width: var(--short-video-player--navigation-button--size);
-  min-width: var(--short-video-player--navigation-button--size);
-  max-width: var(--short-video-player--navigation-button--size);
-  height: var(--short-video-player--navigation-button--size);
-  min-height: var(--short-video-player--navigation-button--size);
-  max-height: var(--short-video-player--navigation-button--size);
+  width: var(--short-videos-player--navigation-button--size);
+  min-width: var(--short-videos-player--navigation-button--size);
+  max-width: var(--short-videos-player--navigation-button--size);
+  height: var(--short-videos-player--navigation-button--size);
+  min-height: var(--short-videos-player--navigation-button--size);
+  max-height: var(--short-videos-player--navigation-button--size);
   background-color: #000000;
   border: 1px solid #1c1c1c;
   border-radius: 50%;

package/dist/short-videos/short-videos-player/controls.svelte.d.ts

@@ -1,10 +1,10 @@
 import { type ShortVideoViewerModel } from '../short-video-viewer';
 import type { IPlayerBuffer } from '../../ui/player';
 import { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte.js';
-import type { ShortVideoPlayerUiManager } from './ui-manager.svelte';
+import type { ShortVideosPlayerUiManager } from './ui-manager.svelte';
 type Props = {
     buffer: IPlayerBuffer<ShortVideoViewerModel>;
-    uiManager: ShortVideoPlayerUiManager;
+    uiManager: ShortVideosPlayerUiManager;
     localization: ShortVideosPlayerLocalization;
     on: {
         closePlayer: () => void;

package/dist/short-videos/short-videos-player/ui-manager.svelte.d.ts

@@ -1,4 +1,4 @@
-export declare class ShortVideoPlayerUiManager {
+export declare class ShortVideosPlayerUiManager {
     detailsCollapsed: boolean;
     globalCssVariables: string;
     isMobileView: boolean;

package/dist/short-videos/short-videos-player/ui-manager.svelte.js

@@ -1,12 +1,12 @@
-export class ShortVideoPlayerUiManager {
+export class ShortVideosPlayerUiManager {
     detailsCollapsed = $state(true);
     globalCssVariables = $derived.by(() => {
         const values = [
-            `--short-video-player--action-button--size: ${this.actionButtonSize}px`,
-            `--short-video-player--navigation-button--size: ${this.navigationButtonSize}px`,
-            `--short-video-player--controls--offset-horizontal: ${this.controlsOffsetHorizontal}px`,
-            `--short-video-player--controls--offset-vertical: ${this.controlsOffsetVertical}px`,
-            `--short-video-player--sidebar--available-space: ${(this.viewTotalWidth - this.mainViewColumnWidth) / 2}px`
+            `--short-videos-player--action-button--size: ${this.actionButtonSize}px`,
+            `--short-videos-player--navigation-button--size: ${this.navigationButtonSize}px`,
+            `--short-videos-player--controls--offset-horizontal: ${this.controlsOffsetHorizontal}px`,
+            `--short-videos-player--controls--offset-vertical: ${this.controlsOffsetVertical}px`,
+            `--short-videos-player--sidebar--available-space: ${(this.viewTotalWidth - this.mainViewColumnWidth) / 2}px`
         ];
         return values.join(';');
     });

package/dist/streams/layout/cmp.slot-content.svelte

@@ -23,10 +23,55 @@ const dataIsFilled = $derived.by(() => {
             Utils.assertUnreachable(model.data);
     }
 });
+const productModel = $derived.by(() => {
+    var _a;
+    return ((_a = model.data) === null || _a === void 0 ? void 0 : _a.type) === StreamComponentDataType.Product ? model.data.product : undefined;
+});
+const handleProductClick = (e) => {
+    e.preventDefault();
+    if (!productModel) {
+        return;
+    }
+    if (productModel.id && (on === null || on === void 0 ? void 0 : on.productClick)) {
+        on.productClick(productModel.id);
+    }
+    if (productModel.link) {
+        window.open(productModel.link, '_blank', 'noopener noreferrer');
+    }
+};
 </script>
 
-{#if component && model.data && dataIsFilled}
-  {#each component.elements as element (element)}
-    <StreamElement model={element} data={model.data} localization={localization} on={on} />
-  {/each}
+{#snippet slotContent()}
+  {#if component && model.data && dataIsFilled}
+    {#each component.elements as element (element)}
+      <StreamElement model={element} data={model.data} localization={localization} on={on} />
+    {/each}
+  {/if}
+{/snippet}
+{#if productModel?.link}
+  <a class="stream-slot-content-product-link" href={productModel.link} onclick={handleProductClick} target="_blank" rel="noopener noreferrer">
+    {@render slotContent()}
+  </a>
+{:else}
+  {@render slotContent()}
 {/if}
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.stream-slot-content-product-link {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+}</style>

package/dist/streams/layout/element-views/cmp.stream-element.svelte.d.ts

@@ -8,7 +8,6 @@ type Props = {
     constainerDirection?: StreamElementStyleDirection;
     localization?: IStreamElementLocalization;
     on?: {
-        productClick: (productId: string) => void;
         progress?: (videoId: string, progress: number) => void;
     };
 };

package/dist/streams/stream-player/action-button.svelte

@@ -19,7 +19,7 @@ export {};
 }
 .action-button {
   --_stream-player--action-button--size: var(--stream-player--action-button--size);
-  --_action-button--background: var(--action-button-background, #1c1c1c);
+  --_stream-player--action-button--background: var(--action-button-background, #1c1c1c);
   width: var(--_stream-player--action-button--size);
   min-width: var(--_stream-player--action-button--size);
   max-width: var(--_stream-player--action-button--size);
@@ -30,7 +30,7 @@ export {};
   justify-content: center;
   align-items: center;
   line-height: 0;
-  background: var(--_action-button--background);
+  background: var(--_stream-player--action-button--background);
   border-radius: 50%;
   --icon--size: 1.25rem;
   z-index: 1;

package/dist/streams/stream-player/controls.svelte

@@ -5,13 +5,13 @@ import { Icon } from '../../ui/icon';
 import { MediaVolumeManager } from '../../ui/media-playback';
 import { default as ActionButton } from './action-button.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization.svelte';
-import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg';
-import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_20_regular.svg';
-import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg';
-import IconFullScreenMaximize from '@fluentui/svg-icons/icons/full_screen_maximize_20_regular.svg';
-import IconPanelRightGallery from '@fluentui/svg-icons/icons/panel_right_gallery_20_regular.svg';
-import IconSpeaker2 from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg';
-import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.svg';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
+import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_20_regular.svg?raw';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
+import IconFullScreenMaximize from '@fluentui/svg-icons/icons/full_screen_maximize_20_regular.svg?raw';
+import IconPanelRightGallery from '@fluentui/svg-icons/icons/panel_right_gallery_20_regular.svg?raw';
+import IconSpeaker2 from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg?raw';
+import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.svg?raw';
 let { buffer, uiManager, localization, on } = $props();
 const toggleMuted = () => {
     MediaVolumeManager.isMuted = !MediaVolumeManager.isMuted;

package/dist/streams/stream-player/stream-overview.svelte

@@ -7,7 +7,7 @@ import { ProportionalContainer } from '../../ui/proportional-container';
 import { TimeAgo } from '../../ui/time-ago';
 import { default as ActionButton } from './action-button.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization.svelte';
-import IconPanelLeftText from '@fluentui/svg-icons/icons/panel_left_text_20_regular.svg';
+import IconPanelLeftText from '@fluentui/svg-icons/icons/panel_left_text_20_regular.svg?raw';
 let { model, buffer, activePageId, on, uiManager, localization } = $props();
 </script>
 

package/dist/ui/icon/cmp.icon.svelte

@@ -13,9 +13,9 @@ const fillSvg = (node) => {
 };
 </script>
 
-<div style="display: contents">
-  {#if src.startsWith('fa-')}
-    <i class="{src} font-awesome-icon-to-replace"></i>
+<div class="icon" style="display: contents">
+  {#if src.startsWith('<svg')}
+    {@html src}
   {:else}
     <svg
       class="icon"
@@ -45,15 +45,6 @@ const fillSvg = (node) => {
   --_icon--color: var(--icon--color);
   --_icon--size: var(--icon--size, 1.25em);
   --_icon--stroke-width: var(--icon--stroke-width, 0);
-  display: inline-block;
-  color: inherit;
-  fill: var(--_icon--color, currentColor);
-  height: var(--_icon--size);
-  min-height: var(--_icon--size);
-  max-height: var(--_icon--size);
-  width: var(--_icon--size);
-  min-width: var(--_icon--size);
-  max-width: var(--_icon--size);
 }
 .icon--white {
   --_icon--color: #ffffff;
@@ -97,6 +88,17 @@ const fillSvg = (node) => {
 :global([data-theme="dark"]) .icon--blue {
   --_icon--color: #91b3f3;
 }
+.icon :global(svg) {
+  display: inline-block;
+  color: inherit;
+  fill: var(--_icon--color, currentColor);
+  height: var(--_icon--size);
+  min-height: var(--_icon--size);
+  max-height: var(--_icon--size);
+  width: var(--_icon--size);
+  min-width: var(--_icon--size);
+  max-width: var(--_icon--size);
+}
 .icon :global(path) {
   stroke: var(--_icon--color);
   stroke-width: var(--_icon--stroke-width);
@@ -104,10 +106,4 @@ const fillSvg = (node) => {
 :global([data-theme="dark"]) .icon :global(path) {
   stroke: var(--_icon--color);
   stroke-width: var(--_icon--stroke-width);
-}
-
-.font-awesome-icon-to-replace {
-  font-size: 1em;
-  transform: scale(2);
-  color: red;
 }</style>

package/dist/ui/image/cmp.image-stub.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { Icon } from '../icon';
-import IconImage from '@fluentui/svg-icons/icons/image_20_regular.svg';
+import IconImage from '@fluentui/svg-icons/icons/image_20_regular.svg?raw';
 </script>
 
 <div class="image-stub">

package/dist/ui/image/cmp.image.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { Icon } from '../icon';
 import { calculateImageState, ImageState } from './image-state';
-import IconImageOff from '@fluentui/svg-icons/icons/image_off_20_regular.svg';
+import IconImageOff from '@fluentui/svg-icons/icons/image_off_20_regular.svg?raw';
 let { src, alt = '', showStubOnError = false, on, stub } = $props();
 let hasError = $state(false);
 const imageState = $derived(calculateImageState(src, hasError, showStubOnError));

package/dist/ui/video/cmp.video.svelte

@@ -12,10 +12,10 @@ import { Icon, IconColor } from '../icon';
 import { MediaVolumeManager, PlaybackManager } from '../media-playback';
 import { Progress } from '../progress';
 import { SeekBar } from '../seek-bar';
-import IconPause from '@fluentui/svg-icons/icons/pause_20_regular.svg';
-import IconPlay from '@fluentui/svg-icons/icons/play_20_regular.svg';
-import IconSpeaker from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg';
-import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.svg';
+import IconPause from '@fluentui/svg-icons/icons/pause_20_regular.svg?raw';
+import IconPlay from '@fluentui/svg-icons/icons/play_20_regular.svg?raw';
+import IconSpeaker from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg?raw';
+import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.svg?raw';
 import { onDestroy, onMount, untrack } from 'svelte';
 import { slide } from 'svelte/transition';
 let { src, poster, id = randomNanoid(), controls = true, autoplay = false, loop = false, inert = false, intersectionContainer, on } = $props();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "author": "StreamsCloud",
   "repository": "https://github.com/StreamsCloud/streamscloud-frontend-packages.git",
   "type": "module",