@streamscloud/embeddable 2.2.6 → 2.3.1

package/dist/core/utils/html-helper.d.ts

@@ -36,5 +36,6 @@ export declare class HtmlHelper {
      * DomHelper.insert(siblingElement, newContentField, false);
      */
     static insert(newElement: Element, siblingElement: Element, insertBefore?: boolean): void;
+    static sanitizeSvg(svg: string): string;
     static pasteIntoInput(value: string, element: HTMLInputElement | HTMLTextAreaElement): void;
 }

package/dist/core/utils/html-helper.js

@@ -1,3 +1,4 @@
+import dp from 'dompurify';
 export class HtmlHelper {
     static clearSelection() {
         if (window.getSelection) {
@@ -70,6 +71,9 @@ export class HtmlHelper {
             HtmlHelper.insertAfter(newElement, siblingElement);
         }
     }
+    static sanitizeSvg(svg) {
+        return dp.sanitize(svg, { USE_PROFILES: { svg: true, svgFilters: true }, ADD_ATTR: ['dominant-baseline'] });
+    }
     static pasteIntoInput(value, element) {
         if (element.selectionStart || element.selectionStart === 0) {
             const startPos = element.selectionStart;

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

@@ -0,0 +1,16 @@
+<script lang="ts">import { HtmlHelper } from '../../../core/utils/html-helper';
+import { generateAnnotationStyles } from '../styles-transformer';
+let { model } = $props();
+const svgValue = $derived.by(() => {
+    if (model.svg) {
+        return HtmlHelper.sanitizeSvg(model.svg);
+    }
+    return '';
+});
+</script>
+
+{#if !model.inactive}
+  <div class="annotation-stream-element" style={generateAnnotationStyles(model.styles, model.placement)}>
+    {@html svgValue}
+  </div>
+{/if}

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

@@ -0,0 +1,7 @@
+import type { AnnotationStreamElementModel } from '../elements';
+type Props = {
+    model: AnnotationStreamElementModel;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/streams/layout/element-views/cmp.image-ref-stream-element.svelte

@@ -1,11 +1,21 @@
 <script lang="ts">import { getStringValueByKey } from './data-by-key-accessor';
 import { generateImageStyles } from '../styles-transformer';
-let { model, data } = $props();
+import { default as AnnotationStreamElement } from './cmp.annotation-stream-element.svelte';
+let { model, data, annotationView } = $props();
 const value = $derived(getStringValueByKey(data, model.key));
 </script>
 
 <div class="image-ref-stream-element">
   <img class="image-ref-stream-element-image" src={value} alt={model.key} style={generateImageStyles(model.styles)} />
+  {#if model.annotations}
+    {#each model.annotations as annotationModel (annotationModel)}
+      {#if annotationView}
+        {@render annotationView({ model: annotationModel })}
+      {:else}
+        <AnnotationStreamElement model={annotationModel} />
+      {/if}
+    {/each}
+  {/if}
 </div>
 
 <style>@keyframes fadeIn {
@@ -26,7 +36,10 @@ const value = $derived(getStringValueByKey(data, model.key));
   height: 100%;
   min-height: 100%;
   max-height: 100%;
-  overflow: hidden;
+  position: relative;
+}
+.image-ref-stream-element :global(svg) {
+  overflow: visible;
 }
 
 .image-ref-stream-element-image {

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

@@ -1,8 +1,12 @@
-import type { ImageRefStreamElementModel } from '../elements';
+import type { Snippet } from 'svelte';
+import type { AnnotationStreamElementModel, ImageRefStreamElementModel } from '../elements';
 import type { StreamSlotData } from '../slot-data';
 type Props = {
     model: ImageRefStreamElementModel;
     data: StreamSlotData;
+    annotationView?: Snippet<[{
+        model: AnnotationStreamElementModel;
+    }]>;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -1,4 +1,4 @@
-<script lang="ts">import { ContainerStreamElement, ImageRefStreamElement, ImagesStreamElement, PriceStreamElement, ShortVideoStreamElement, SpacerStreamElement, TextRefStreamElement, TextStreamElement } from '.';
+<script lang="ts">import { AnnotationStreamElement, ContainerStreamElement, ImageRefStreamElement, ImagesStreamElement, PriceStreamElement, ShortVideoStreamElement, SpacerStreamElement, TextRefStreamElement, TextStreamElement } from '.';
 import { StreamElementLocalization } from './stream-element-localization.svelte';
 import { StreamComponentDataType, StreamElementStyleDirection, StreamElementType } from '../enums';
 let { model, data, constainerDirection = StreamElementStyleDirection.Vertical, localization: localizatoinInit, on } = $props();
@@ -41,7 +41,9 @@ const productModel = $derived.by(() => {
 });
 </script>
 
-{#if model.type === StreamElementType.Container}
+{#if model.type === StreamElementType.Annotation}
+  <AnnotationStreamElement model={model} />
+{:else if model.type === StreamElementType.Container}
   <ContainerStreamElement model={model} data={data} localization={localizatoinInit} />
 {:else if model.type === StreamElementType.Spacer}
   <SpacerStreamElement model={model} parentContainerDirection={constainerDirection} />
@@ -56,7 +58,7 @@ const productModel = $derived.by(() => {
     data={shortVideoModel}
     on={on
       ? {
-          progress: (progress: number) => {
+          progress: (progress: Number) => {
             on.progress?.(shortVideoModel.id, progress);
           }
         }

package/dist/streams/layout/element-views/index.d.ts

@@ -1,4 +1,5 @@
 export { default as StreamElement } from './cmp.stream-element.svelte';
+export { default as AnnotationStreamElement } from './cmp.annotation-stream-element.svelte';
 export { default as ContainerStreamElement } from './cmp.container-stream-element.svelte';
 export { default as ImageRefStreamElement } from './cmp.image-ref-stream-element.svelte';
 export { default as ImagesStreamElement } from './cmp.images-stream-element.svelte';

package/dist/streams/layout/element-views/index.js

@@ -1,4 +1,5 @@
 export { default as StreamElement } from './cmp.stream-element.svelte';
+export { default as AnnotationStreamElement } from './cmp.annotation-stream-element.svelte';
 export { default as ContainerStreamElement } from './cmp.container-stream-element.svelte';
 export { default as ImageRefStreamElement } from './cmp.image-ref-stream-element.svelte';
 export { default as ImagesStreamElement } from './cmp.images-stream-element.svelte';

package/dist/streams/layout/elements.d.ts

@@ -1,12 +1,12 @@
-import type { StreamSvgModel } from './svg';
-import { StreamElementType, ImagesStreamElementMode } from './enums';
+import { StreamElementType, ImagesStreamElementMode, AnnotationStreamElementPlacement } from './enums';
 import type { ImageStreamElementStyles, TextStreamElementStyles, ContainerStreamElementStyles, PriceStreamElementStyles, AnnotationStreamElementStyles } from './styles';
 export type StreamElementModel = AnnotationStreamElementModel | ContainerStreamElementModel | ImageRefStreamElementModel | ImagesStreamElementModel | PriceStreamElementModel | SpacerStreamElementModel | ShortVideoStreamElementModel | TextStreamElementModel | TextRefStreamElementModel;
 export type AnnotationStreamElementModel = {
     type: StreamElementType.Annotation;
     id?: string;
-    svg: StreamSvgModel;
-    showIfProductOnSaleOnly: boolean | null;
+    svg: string;
+    inactive: boolean;
+    placement: AnnotationStreamElementPlacement;
     styles: AnnotationStreamElementStyles;
 };
 export type ContainerStreamElementModel = {
@@ -25,7 +25,7 @@ export type ImageRefStreamElementModel = {
     type: StreamElementType.ImageRef;
     id?: string;
     key: string;
-    annotations?: StreamAnnotionsModel | null;
+    annotations?: AnnotationStreamElementModel[] | null;
     styles: ImageStreamElementStyles | null;
 };
 export type PriceStreamElementModel = {
@@ -58,9 +58,3 @@ export type TextRefStreamElementModel = {
     valueAfter: string | null;
     styles: TextStreamElementStyles | null;
 };
-export type StreamAnnotionsModel = {
-    topLeft?: AnnotationStreamElementModel | null;
-    topRight?: AnnotationStreamElementModel | null;
-    bottomLeft?: AnnotationStreamElementModel | null;
-    bottomRight?: AnnotationStreamElementModel | null;
-};

package/dist/streams/layout/elements.js

@@ -1 +1 @@
-import { StreamElementType, ImagesStreamElementMode } from './enums';
+import { StreamElementType, ImagesStreamElementMode, AnnotationStreamElementPlacement } from './enums';

package/dist/streams/layout/enums.d.ts

@@ -14,6 +14,12 @@ export declare enum StreamElementType {
     Text = "TEXT",
     TextRef = "TEXT_REF"
 }
+export declare enum AnnotationStreamElementPlacement {
+    TopLeft = "TOP_LEFT",
+    TopRight = "TOP_RIGHT",
+    BottomLeft = "BOTTOM_LEFT",
+    BottomRight = "BOTTOM_RIGHT"
+}
 export declare enum ImagesStreamElementMode {
     Single = "SINGLE",
     Gallery = "GALLERY",
@@ -44,3 +50,18 @@ export declare enum StreamCssValueType {
     DDU = "DDU",
     Pct = "PCT"
 }
+export declare enum StreamSvgTextValueType {
+    customText = "STREAM_SVG_CUSTOM_TEXT",
+    currency = "STREAM_SVG_CURRENCY",
+    currencySymbol = "STREAM_SVG_CURRENCY_SYMBOL",
+    price = "STREAM_SVG_PRODUCT_PRICE",
+    priceWhole = "STREAM_SVG_PRODUCT_PRICE_WHOLE",
+    priceDecimal = "STREAM_SVG_PRODUCT_PRICE_DECIMAL",
+    beforePrice = "STREAM_SVG_PRODUCT_BEFORE_PRICE",
+    beforePriceWhole = "STREAM_SVG_PRODUCT_BEFORE_PRICE_WHOLE",
+    beforePriceDecimal = "STREAM_SVG_PRODUCT_BEFORE_PRICE_DECIMAL",
+    saveValue = "STREAM_SVG_PRODUCT_SAVE_VALUE",
+    saveValueWhole = "STREAM_SVG_PRODUCT_SAVE_VALUE_WHOLE",
+    saveValueDecimal = "STREAM_SVG_PRODUCT_SAVE_VALUE_DECIMAL",
+    savePercentValue = "STREAM_SVG_PRODUCT_SAVE_PERCENT_VALUE"
+}

package/dist/streams/layout/enums.js

@@ -16,6 +16,13 @@ export var StreamElementType;
     StreamElementType["Text"] = "TEXT";
     StreamElementType["TextRef"] = "TEXT_REF";
 })(StreamElementType || (StreamElementType = {}));
+export var AnnotationStreamElementPlacement;
+(function (AnnotationStreamElementPlacement) {
+    AnnotationStreamElementPlacement["TopLeft"] = "TOP_LEFT";
+    AnnotationStreamElementPlacement["TopRight"] = "TOP_RIGHT";
+    AnnotationStreamElementPlacement["BottomLeft"] = "BOTTOM_LEFT";
+    AnnotationStreamElementPlacement["BottomRight"] = "BOTTOM_RIGHT";
+})(AnnotationStreamElementPlacement || (AnnotationStreamElementPlacement = {}));
 export var ImagesStreamElementMode;
 (function (ImagesStreamElementMode) {
     ImagesStreamElementMode["Single"] = "SINGLE";
@@ -53,3 +60,24 @@ export var StreamCssValueType;
     StreamCssValueType["DDU"] = "DDU";
     StreamCssValueType["Pct"] = "PCT";
 })(StreamCssValueType || (StreamCssValueType = {}));
+export var StreamSvgTextValueType;
+(function (StreamSvgTextValueType) {
+    /* Generic text */
+    StreamSvgTextValueType["customText"] = "STREAM_SVG_CUSTOM_TEXT";
+    /* Currency info */
+    StreamSvgTextValueType["currency"] = "STREAM_SVG_CURRENCY";
+    StreamSvgTextValueType["currencySymbol"] = "STREAM_SVG_CURRENCY_SYMBOL";
+    /* Product actual price */
+    StreamSvgTextValueType["price"] = "STREAM_SVG_PRODUCT_PRICE";
+    StreamSvgTextValueType["priceWhole"] = "STREAM_SVG_PRODUCT_PRICE_WHOLE";
+    StreamSvgTextValueType["priceDecimal"] = "STREAM_SVG_PRODUCT_PRICE_DECIMAL";
+    /* Product price before sales (if applicable) */
+    StreamSvgTextValueType["beforePrice"] = "STREAM_SVG_PRODUCT_BEFORE_PRICE";
+    StreamSvgTextValueType["beforePriceWhole"] = "STREAM_SVG_PRODUCT_BEFORE_PRICE_WHOLE";
+    StreamSvgTextValueType["beforePriceDecimal"] = "STREAM_SVG_PRODUCT_BEFORE_PRICE_DECIMAL";
+    /* “Save” / discount values */
+    StreamSvgTextValueType["saveValue"] = "STREAM_SVG_PRODUCT_SAVE_VALUE";
+    StreamSvgTextValueType["saveValueWhole"] = "STREAM_SVG_PRODUCT_SAVE_VALUE_WHOLE";
+    StreamSvgTextValueType["saveValueDecimal"] = "STREAM_SVG_PRODUCT_SAVE_VALUE_DECIMAL";
+    StreamSvgTextValueType["savePercentValue"] = "STREAM_SVG_PRODUCT_SAVE_PERCENT_VALUE";
+})(StreamSvgTextValueType || (StreamSvgTextValueType = {}));

package/dist/streams/layout/index.d.ts

@@ -2,15 +2,17 @@ import { StreamComponentDataType, StreamElementType } from './enums';
 import type { StreamLayout } from './layout';
 import type { StreamLayoutShortVideoModel } from './models';
 import type { StreamSlot } from './slot';
-import type { ContainerStreamElementStyles, ImageStreamElementStyles, PriceStreamElementStyles, TextStreamElementStyles } from './styles';
+import type { AnnotationStreamElementStyles, ContainerStreamElementStyles, ImageStreamElementStyles, PriceStreamElementStyles, TextStreamElementStyles } from './styles';
 export { default as StreamPageLayout } from './cmp.layout.svelte';
 export { default as StreamLayoutSlot } from './cmp.slot.svelte';
 export { default as StreamLayoutSlotContent } from './cmp.slot-content.svelte';
 export * from './layout';
+export * from './svg-attributes';
 export { parseToStreamLayout, stringifyToStreamLayoutInput } from './serializer';
 export declare const getAllowedDataTypesForSlot: (slot: StreamSlot) => StreamComponentDataType[];
 export declare const getSingleShortVideoFromLayout: (layout: StreamLayout) => StreamLayoutShortVideoModel | null;
 export type ElementTypeToStyles = {
+    [StreamElementType.Annotation]: AnnotationStreamElementStyles;
     [StreamElementType.Container]: ContainerStreamElementStyles;
     [StreamElementType.Price]: PriceStreamElementStyles;
     [StreamElementType.ImageRef]: ImageStreamElementStyles;

package/dist/streams/layout/index.js

@@ -3,6 +3,7 @@ export { default as StreamPageLayout } from './cmp.layout.svelte';
 export { default as StreamLayoutSlot } from './cmp.slot.svelte';
 export { default as StreamLayoutSlotContent } from './cmp.slot-content.svelte';
 export * from './layout';
+export * from './svg-attributes';
 export { parseToStreamLayout, stringifyToStreamLayoutInput } from './serializer';
 export const getAllowedDataTypesForSlot = (slot) => {
     return slot.components.flatMap((c) => c.dataType);

package/dist/streams/layout/styles-transformer.d.ts

@@ -1,7 +1,8 @@
-import { StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleHorizontalAlign } from './enums';
-import type { ContainerStreamElementStyles, ImageStreamElementStyles, StreamLayoutStyles, TextStreamElementStyles } from './styles';
+import { StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleHorizontalAlign, AnnotationStreamElementPlacement } from './enums';
+import type { AnnotationStreamElementStyles, ContainerStreamElementStyles, ImageStreamElementStyles, StreamLayoutStyles, TextStreamElementStyles } from './styles';
 export declare const generateStreamLayoutStyles: (styles: StreamLayoutStyles | null) => string;
 export declare const generateContainerStyles: (styles: Partial<ContainerStreamElementStyles> | null) => string;
+export declare const generateAnnotationStyles: (styles: AnnotationStreamElementStyles, placement: AnnotationStreamElementPlacement) => string;
 export declare const generateTextStyles: (styles: Partial<TextStreamElementStyles> | null) => string;
 export declare const generateImageStyles: (styles: Partial<ImageStreamElementStyles> | null) => string;
 export declare const mapFontFamily: (value: StreamElementStyleFontFamily | null | undefined) => string;

package/dist/streams/layout/styles-transformer.js

@@ -1,5 +1,5 @@
 import { Utils } from '../../core/utils';
-import { StreamCssValueType, StreamElementStyleDirection, StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleMediaFit, StreamElementStyleHorizontalAlign } from './enums';
+import { StreamCssValueType, StreamElementStyleDirection, StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleMediaFit, StreamElementStyleHorizontalAlign, AnnotationStreamElementPlacement } from './enums';
 export const generateStreamLayoutStyles = (styles) => {
     if (!styles) {
         return '';
@@ -32,6 +32,30 @@ export const generateContainerStyles = (styles) => {
     }
     return values.join('');
 };
+export const generateAnnotationStyles = (styles, placement) => {
+    const values = [`height: ${transformNumericValue(styles.size)};`, 'position: absolute;'];
+    switch (placement) {
+        case AnnotationStreamElementPlacement.TopLeft:
+            values.push(`top: ${transformNumericValue(styles.offsetY)};`);
+            values.push(`left: ${transformNumericValue(styles.offsetX)};`);
+            break;
+        case AnnotationStreamElementPlacement.TopRight:
+            values.push(`top: ${transformNumericValue(styles.offsetY)};`);
+            values.push(`right: ${transformNumericValue(styles.offsetX)}`);
+            break;
+        case AnnotationStreamElementPlacement.BottomLeft:
+            values.push(`bottom: ${transformNumericValue(styles.offsetY)};`);
+            values.push(`left: ${transformNumericValue(styles.offsetX)};`);
+            break;
+        case AnnotationStreamElementPlacement.BottomRight:
+            values.push(`bottom: ${transformNumericValue(styles.offsetY)};`);
+            values.push(`right: ${transformNumericValue(styles.offsetX)};`);
+            break;
+        default:
+            Utils.assertUnreachable(placement);
+    }
+    return values.join('');
+};
 export const generateTextStyles = (styles) => {
     styles = styles || {};
     const values = [

package/dist/streams/layout/styles.d.ts

@@ -6,8 +6,8 @@ export type StreamLayoutStyles = {
 };
 export type AnnotationStreamElementStyles = {
     size: number;
-    horizontalIndent: number;
-    verticalIndent: number;
+    offsetX: number;
+    offsetY: number;
 };
 export type ContainerStreamElementStyles = {
     width?: StreamCssValue | null;

package/dist/streams/layout/svg-attributes.d.ts

@@ -0,0 +1,7 @@
+export declare enum SvgAttributes {
+    customizableElement = "data-streams--customizable",
+    textElementValueType = "data-streams--text--value-type",
+    textElementCustomValue = "data-streams--text--custom-value",
+    textElementValueBefore = "data-streams--text--value-before",
+    textElementValueAfter = "data-streams--text--value-after"
+}

package/dist/streams/layout/svg-attributes.js

@@ -0,0 +1,8 @@
+export var SvgAttributes;
+(function (SvgAttributes) {
+    SvgAttributes["customizableElement"] = "data-streams--customizable";
+    SvgAttributes["textElementValueType"] = "data-streams--text--value-type";
+    SvgAttributes["textElementCustomValue"] = "data-streams--text--custom-value";
+    SvgAttributes["textElementValueBefore"] = "data-streams--text--value-before";
+    SvgAttributes["textElementValueAfter"] = "data-streams--text--value-after";
+})(SvgAttributes || (SvgAttributes = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "2.2.6",
+  "version": "2.3.1",
   "author": "StreamsCloud",
   "repository": "https://github.com/StreamsCloud/streamscloud-frontend-packages.git",
   "type": "module",
@@ -94,8 +94,9 @@
     "@fluentui/svg-icons": "^1.1.292",
     "@streamscloud/streams-analytics-collector": "latest",
     "@urql/core": "^5.1.1",
+    "dompurify": "^3.2.6",
     "mobile-detect": "^1.4.5",
-    "svelte": "^5.25.3"
+    "svelte": "^5.33.4"
   },
   "devDependencies": {
     "@eslint/compat": "^1.2.9",
@@ -131,7 +132,7 @@
     "prettier-plugin-svelte": "^3.4.0",
     "publint": "^0.3.12",
     "sass": "^1.89.0",
-    "svelte": "^5.33.1",
+    "svelte": "^5.33.4",
     "svelte-check": "^4.2.1",
     "svelte-preprocess": "^6.0.3",
     "typescript": "^5.8.3",

package/dist/streams/layout/svg.d.ts

@@ -1,18 +0,0 @@
-export type StreamSvgModel = {
-    src: string;
-    texts: {
-        id: string;
-        value: StreamSvgTextValueType;
-    }[];
-};
-export declare enum StreamSvgTextValueType {
-    currency = "STREAM_SVG_CURRENCY",
-    price = "STREAM_SVG_PRODUCT_PRICE",
-    priceInteger = "STREAM_SVG_PRODUCT_PRICE_INTEGER",
-    priceFraction = "STREAM_SVG_PRODUCT_PRICE_FRACTION",
-    beforePrice = "STREAM_SVG_PRODUCT_BEFORE_PRICE",
-    beforePriceInteger = "STREAM_SVG_PRODUCT_BEFORE_PRICE_INTEGER",
-    beforePriceFraction = "STREAM_SVG_PRODUCT_BEFORE_PRICE_FRACTION",
-    saveValue = "SVG_PRODUCT_SAVE_VALUE",
-    savePercentValue = "SVG_PRODUCT_SAVE_PERCENT_VALUE"
-}

package/dist/streams/layout/svg.js

@@ -1,12 +0,0 @@
-export var StreamSvgTextValueType;
-(function (StreamSvgTextValueType) {
-    StreamSvgTextValueType["currency"] = "STREAM_SVG_CURRENCY";
-    StreamSvgTextValueType["price"] = "STREAM_SVG_PRODUCT_PRICE";
-    StreamSvgTextValueType["priceInteger"] = "STREAM_SVG_PRODUCT_PRICE_INTEGER";
-    StreamSvgTextValueType["priceFraction"] = "STREAM_SVG_PRODUCT_PRICE_FRACTION";
-    StreamSvgTextValueType["beforePrice"] = "STREAM_SVG_PRODUCT_BEFORE_PRICE";
-    StreamSvgTextValueType["beforePriceInteger"] = "STREAM_SVG_PRODUCT_BEFORE_PRICE_INTEGER";
-    StreamSvgTextValueType["beforePriceFraction"] = "STREAM_SVG_PRODUCT_BEFORE_PRICE_FRACTION";
-    StreamSvgTextValueType["saveValue"] = "SVG_PRODUCT_SAVE_VALUE";
-    StreamSvgTextValueType["savePercentValue"] = "SVG_PRODUCT_SAVE_PERCENT_VALUE";
-})(StreamSvgTextValueType || (StreamSvgTextValueType = {}));