@streamscloud/embeddable 2.2.5 → 2.3.0

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 (25) hide show
  1. package/dist/core/utils/html-helper.d.ts +1 -0
  2. package/dist/core/utils/html-helper.js +4 -0
  3. package/dist/streams/layout/element-views/cmp.annotation-stream-element.svelte +16 -0
  4. package/dist/streams/layout/element-views/cmp.annotation-stream-element.svelte.d.ts +7 -0
  5. package/dist/streams/layout/element-views/cmp.image-ref-stream-element.svelte +15 -2
  6. package/dist/streams/layout/element-views/cmp.image-ref-stream-element.svelte.d.ts +5 -1
  7. package/dist/streams/layout/element-views/cmp.images-stream-element.svelte +2 -2
  8. package/dist/streams/layout/element-views/cmp.stream-element.svelte +5 -3
  9. package/dist/streams/layout/element-views/index.d.ts +1 -0
  10. package/dist/streams/layout/element-views/index.js +1 -0
  11. package/dist/streams/layout/elements.d.ts +13 -4
  12. package/dist/streams/layout/elements.js +1 -1
  13. package/dist/streams/layout/enums.d.ts +23 -1
  14. package/dist/streams/layout/enums.js +35 -6
  15. package/dist/streams/layout/index.d.ts +3 -1
  16. package/dist/streams/layout/index.js +1 -0
  17. package/dist/streams/layout/models/stream-layout-media-item-model.d.ts +1 -1
  18. package/dist/streams/layout/models/stream-layout-media-item-model.js +1 -1
  19. package/dist/streams/layout/models/stream-layout-post-header-model.d.ts +1 -1
  20. package/dist/streams/layout/styles-transformer.d.ts +3 -2
  21. package/dist/streams/layout/styles-transformer.js +25 -1
  22. package/dist/streams/layout/styles.d.ts +19 -14
  23. package/dist/streams/layout/svg-attributes.d.ts +7 -0
  24. package/dist/streams/layout/svg-attributes.js +8 -0
  25. package/package.json +4 -3
@@ -36,5 +36,6 @@ export declare class HtmlHelper {
36
36
  * DomHelper.insert(siblingElement, newContentField, false);
37
37
  */
38
38
  static insert(newElement: Element, siblingElement: Element, insertBefore?: boolean): void;
39
+ static sanitizeSvg(svg: string): string;
39
40
  static pasteIntoInput(value: string, element: HTMLInputElement | HTMLTextAreaElement): void;
40
41
  }
@@ -1,3 +1,4 @@
1
+ import dp from 'dompurify';
1
2
  export class HtmlHelper {
2
3
  static clearSelection() {
3
4
  if (window.getSelection) {
@@ -70,6 +71,9 @@ export class HtmlHelper {
70
71
  HtmlHelper.insertAfter(newElement, siblingElement);
71
72
  }
72
73
  }
74
+ static sanitizeSvg(svg) {
75
+ return dp.sanitize(svg, { USE_PROFILES: { svg: true, svgFilters: true }, ADD_ATTR: ['dominant-baseline'] });
76
+ }
73
77
  static pasteIntoInput(value, element) {
74
78
  if (element.selectionStart || element.selectionStart === 0) {
75
79
  const startPos = element.selectionStart;
@@ -0,0 +1,16 @@
1
+ <script lang="ts">import { HtmlHelper } from '../../../core/utils/html-helper';
2
+ import { generateAnnotationStyles } from '../styles-transformer';
3
+ let { model } = $props();
4
+ const svgValue = $derived.by(() => {
5
+ if (model.svg) {
6
+ return HtmlHelper.sanitizeSvg(model.svg);
7
+ }
8
+ return '';
9
+ });
10
+ </script>
11
+
12
+ {#if !model.inactive}
13
+ <div class="annotation-stream-element" style={generateAnnotationStyles(model.styles, model.placement)}>
14
+ {@html svgValue}
15
+ </div>
16
+ {/if}
@@ -0,0 +1,7 @@
1
+ import type { AnnotationStreamElementModel } from '../elements';
2
+ type Props = {
3
+ model: AnnotationStreamElementModel;
4
+ };
5
+ declare const Cmp: import("svelte").Component<Props, {}, "">;
6
+ type Cmp = ReturnType<typeof Cmp>;
7
+ export default Cmp;
@@ -1,11 +1,21 @@
1
1
  <script lang="ts">import { getStringValueByKey } from './data-by-key-accessor';
2
2
  import { generateImageStyles } from '../styles-transformer';
3
- let { model, data } = $props();
3
+ import { default as AnnotationStreamElement } from './cmp.annotation-stream-element.svelte';
4
+ let { model, data, annotationView } = $props();
4
5
  const value = $derived(getStringValueByKey(data, model.key));
5
6
  </script>
6
7
 
7
8
  <div class="image-ref-stream-element">
8
9
  <img class="image-ref-stream-element-image" src={value} alt={model.key} style={generateImageStyles(model.styles)} />
10
+ {#if model.annotations}
11
+ {#each model.annotations as annotationModel (annotationModel)}
12
+ {#if annotationView}
13
+ {@render annotationView({ model: annotationModel })}
14
+ {:else}
15
+ <AnnotationStreamElement model={annotationModel} />
16
+ {/if}
17
+ {/each}
18
+ {/if}
9
19
  </div>
10
20
 
11
21
  <style>@keyframes fadeIn {
@@ -26,7 +36,10 @@ const value = $derived(getStringValueByKey(data, model.key));
26
36
  height: 100%;
27
37
  min-height: 100%;
28
38
  max-height: 100%;
29
- overflow: hidden;
39
+ position: relative;
40
+ }
41
+ .image-ref-stream-element :global(svg) {
42
+ overflow: visible;
30
43
  }
31
44
 
32
45
  .image-ref-stream-element-image {
@@ -1,8 +1,12 @@
1
- import type { ImageRefStreamElementModel } from '../elements';
1
+ import type { Snippet } from 'svelte';
2
+ import type { AnnotationStreamElementModel, ImageRefStreamElementModel } from '../elements';
2
3
  import type { StreamSlotData } from '../slot-data';
3
4
  type Props = {
4
5
  model: ImageRefStreamElementModel;
5
6
  data: StreamSlotData;
7
+ annotationView?: Snippet<[{
8
+ model: AnnotationStreamElementModel;
9
+ }]>;
6
10
  };
7
11
  declare const Cmp: import("svelte").Component<Props, {}, "">;
8
12
  type Cmp = ReturnType<typeof Cmp>;
@@ -1,11 +1,11 @@
1
1
  <script lang="ts">import { Image } from '../../../ui/image';
2
- import { ImagesImagesElementMode } from '../enums';
2
+ import { ImagesStreamElementMode } from '../enums';
3
3
  let { model, data } = $props();
4
4
  </script>
5
5
 
6
6
  <div class="images-stream-element">
7
7
  {#if data.length > 0}
8
- {#if model.mode === ImagesImagesElementMode.Single || data.length === 1}
8
+ {#if model.mode === ImagesStreamElementMode.Single || data.length === 1}
9
9
  <Image src={data[0].url} />
10
10
  {:else}
11
11
  need implement multiple images
@@ -1,4 +1,4 @@
1
- <script lang="ts">import { ContainerStreamElement, ImageRefStreamElement, ImagesStreamElement, PriceStreamElement, ShortVideoStreamElement, SpacerStreamElement, TextRefStreamElement, TextStreamElement } from '.';
1
+ <script lang="ts">import { AnnotationStreamElement, ContainerStreamElement, ImageRefStreamElement, ImagesStreamElement, PriceStreamElement, ShortVideoStreamElement, SpacerStreamElement, TextRefStreamElement, TextStreamElement } from '.';
2
2
  import { StreamElementLocalization } from './stream-element-localization.svelte';
3
3
  import { StreamComponentDataType, StreamElementStyleDirection, StreamElementType } from '../enums';
4
4
  let { model, data, constainerDirection = StreamElementStyleDirection.Vertical, localization: localizatoinInit, on } = $props();
@@ -41,7 +41,9 @@ const productModel = $derived.by(() => {
41
41
  });
42
42
  </script>
43
43
 
44
- {#if model.type === StreamElementType.Container}
44
+ {#if model.type === StreamElementType.Annotation}
45
+ <AnnotationStreamElement model={model} />
46
+ {:else if model.type === StreamElementType.Container}
45
47
  <ContainerStreamElement model={model} data={data} localization={localizatoinInit} />
46
48
  {:else if model.type === StreamElementType.Spacer}
47
49
  <SpacerStreamElement model={model} parentContainerDirection={constainerDirection} />
@@ -56,7 +58,7 @@ const productModel = $derived.by(() => {
56
58
  data={shortVideoModel}
57
59
  on={on
58
60
  ? {
59
- progress: (progress: number) => {
61
+ progress: (progress: Number) => {
60
62
  on.progress?.(shortVideoModel.id, progress);
61
63
  }
62
64
  }
@@ -1,4 +1,5 @@
1
1
  export { default as StreamElement } from './cmp.stream-element.svelte';
2
+ export { default as AnnotationStreamElement } from './cmp.annotation-stream-element.svelte';
2
3
  export { default as ContainerStreamElement } from './cmp.container-stream-element.svelte';
3
4
  export { default as ImageRefStreamElement } from './cmp.image-ref-stream-element.svelte';
4
5
  export { default as ImagesStreamElement } from './cmp.images-stream-element.svelte';
@@ -1,4 +1,5 @@
1
1
  export { default as StreamElement } from './cmp.stream-element.svelte';
2
+ export { default as AnnotationStreamElement } from './cmp.annotation-stream-element.svelte';
2
3
  export { default as ContainerStreamElement } from './cmp.container-stream-element.svelte';
3
4
  export { default as ImageRefStreamElement } from './cmp.image-ref-stream-element.svelte';
4
5
  export { default as ImagesStreamElement } from './cmp.images-stream-element.svelte';
@@ -1,6 +1,14 @@
1
- import { StreamElementType, ImagesImagesElementMode } from './enums';
2
- import type { ImageStreamElementStyles, TextStreamElementStyles, ContainerStreamElementStyles, PriceStreamElementStyles } from './styles';
3
- export type StreamElementModel = ContainerStreamElementModel | ImageRefStreamElementModel | ImagesStreamElementModel | PriceStreamElementModel | SpacerStreamElementModel | ShortVideoStreamElementModel | TextStreamElementModel | TextRefStreamElementModel;
1
+ import { StreamElementType, ImagesStreamElementMode, AnnotationStreamElementPlacement } from './enums';
2
+ import type { ImageStreamElementStyles, TextStreamElementStyles, ContainerStreamElementStyles, PriceStreamElementStyles, AnnotationStreamElementStyles } from './styles';
3
+ export type StreamElementModel = AnnotationStreamElementModel | ContainerStreamElementModel | ImageRefStreamElementModel | ImagesStreamElementModel | PriceStreamElementModel | SpacerStreamElementModel | ShortVideoStreamElementModel | TextStreamElementModel | TextRefStreamElementModel;
4
+ export type AnnotationStreamElementModel = {
5
+ type: StreamElementType.Annotation;
6
+ id?: string;
7
+ svg: string;
8
+ inactive: boolean;
9
+ placement: AnnotationStreamElementPlacement;
10
+ styles: AnnotationStreamElementStyles;
11
+ };
4
12
  export type ContainerStreamElementModel = {
5
13
  type: StreamElementType.Container;
6
14
  id?: string;
@@ -11,12 +19,13 @@ export type ContainerStreamElementModel = {
11
19
  export type ImagesStreamElementModel = {
12
20
  type: StreamElementType.Images;
13
21
  id?: string;
14
- mode: ImagesImagesElementMode;
22
+ mode: ImagesStreamElementMode;
15
23
  };
16
24
  export type ImageRefStreamElementModel = {
17
25
  type: StreamElementType.ImageRef;
18
26
  id?: string;
19
27
  key: string;
28
+ annotations?: AnnotationStreamElementModel[] | null;
20
29
  styles: ImageStreamElementStyles | null;
21
30
  };
22
31
  export type PriceStreamElementModel = {
@@ -1 +1 @@
1
- import { StreamElementType, ImagesImagesElementMode } from './enums';
1
+ import { StreamElementType, ImagesStreamElementMode, AnnotationStreamElementPlacement } from './enums';
@@ -4,6 +4,7 @@ export declare enum StreamComponentDataType {
4
4
  Product = "PRODUCT"
5
5
  }
6
6
  export declare enum StreamElementType {
7
+ Annotation = "ANNOTATION",
7
8
  Container = "CONTAINER",
8
9
  ImageRef = "IMAGE_REF",
9
10
  Images = "IMAGES",
@@ -13,7 +14,13 @@ export declare enum StreamElementType {
13
14
  Text = "TEXT",
14
15
  TextRef = "TEXT_REF"
15
16
  }
16
- export declare enum ImagesImagesElementMode {
17
+ export declare enum AnnotationStreamElementPlacement {
18
+ TopLeft = "TOP_LEFT",
19
+ TopRight = "TOP_RIGHT",
20
+ BottomLeft = "BOTTOM_LEFT",
21
+ BottomRight = "BOTTOM_RIGHT"
22
+ }
23
+ export declare enum ImagesStreamElementMode {
17
24
  Single = "SINGLE",
18
25
  Gallery = "GALLERY",
19
26
  Slider = "SLIDER"
@@ -43,3 +50,18 @@ export declare enum StreamCssValueType {
43
50
  DDU = "DDU",
44
51
  Pct = "PCT"
45
52
  }
53
+ export declare enum StreamSvgTextValueType {
54
+ customText = "STREAM_SVG_CUSTOM_TEXT",
55
+ currency = "STREAM_SVG_CURRENCY",
56
+ currencySymbol = "STREAM_SVG_CURRENCY_SYMBOL",
57
+ price = "STREAM_SVG_PRODUCT_PRICE",
58
+ priceWhole = "STREAM_SVG_PRODUCT_PRICE_WHOLE",
59
+ priceDecimal = "STREAM_SVG_PRODUCT_PRICE_DECIMAL",
60
+ beforePrice = "STREAM_SVG_PRODUCT_BEFORE_PRICE",
61
+ beforePriceWhole = "STREAM_SVG_PRODUCT_BEFORE_PRICE_WHOLE",
62
+ beforePriceDecimal = "STREAM_SVG_PRODUCT_BEFORE_PRICE_DECIMAL",
63
+ saveValue = "STREAM_SVG_PRODUCT_SAVE_VALUE",
64
+ saveValueWhole = "STREAM_SVG_PRODUCT_SAVE_VALUE_WHOLE",
65
+ saveValueDecimal = "STREAM_SVG_PRODUCT_SAVE_VALUE_DECIMAL",
66
+ savePercentValue = "STREAM_SVG_PRODUCT_SAVE_PERCENT_VALUE"
67
+ }
@@ -6,6 +6,7 @@ export var StreamComponentDataType;
6
6
  })(StreamComponentDataType || (StreamComponentDataType = {}));
7
7
  export var StreamElementType;
8
8
  (function (StreamElementType) {
9
+ StreamElementType["Annotation"] = "ANNOTATION";
9
10
  StreamElementType["Container"] = "CONTAINER";
10
11
  StreamElementType["ImageRef"] = "IMAGE_REF";
11
12
  StreamElementType["Images"] = "IMAGES";
@@ -15,12 +16,19 @@ export var StreamElementType;
15
16
  StreamElementType["Text"] = "TEXT";
16
17
  StreamElementType["TextRef"] = "TEXT_REF";
17
18
  })(StreamElementType || (StreamElementType = {}));
18
- export var ImagesImagesElementMode;
19
- (function (ImagesImagesElementMode) {
20
- ImagesImagesElementMode["Single"] = "SINGLE";
21
- ImagesImagesElementMode["Gallery"] = "GALLERY";
22
- ImagesImagesElementMode["Slider"] = "SLIDER";
23
- })(ImagesImagesElementMode || (ImagesImagesElementMode = {}));
19
+ export var AnnotationStreamElementPlacement;
20
+ (function (AnnotationStreamElementPlacement) {
21
+ AnnotationStreamElementPlacement["TopLeft"] = "TOP_LEFT";
22
+ AnnotationStreamElementPlacement["TopRight"] = "TOP_RIGHT";
23
+ AnnotationStreamElementPlacement["BottomLeft"] = "BOTTOM_LEFT";
24
+ AnnotationStreamElementPlacement["BottomRight"] = "BOTTOM_RIGHT";
25
+ })(AnnotationStreamElementPlacement || (AnnotationStreamElementPlacement = {}));
26
+ export var ImagesStreamElementMode;
27
+ (function (ImagesStreamElementMode) {
28
+ ImagesStreamElementMode["Single"] = "SINGLE";
29
+ ImagesStreamElementMode["Gallery"] = "GALLERY";
30
+ ImagesStreamElementMode["Slider"] = "SLIDER";
31
+ })(ImagesStreamElementMode || (ImagesStreamElementMode = {}));
24
32
  export var StreamElementStyleMediaFit;
25
33
  (function (StreamElementStyleMediaFit) {
26
34
  StreamElementStyleMediaFit["Cover"] = "COVER";
@@ -52,3 +60,24 @@ export var StreamCssValueType;
52
60
  StreamCssValueType["DDU"] = "DDU";
53
61
  StreamCssValueType["Pct"] = "PCT";
54
62
  })(StreamCssValueType || (StreamCssValueType = {}));
63
+ export var StreamSvgTextValueType;
64
+ (function (StreamSvgTextValueType) {
65
+ /* Generic text */
66
+ StreamSvgTextValueType["customText"] = "STREAM_SVG_CUSTOM_TEXT";
67
+ /* Currency info */
68
+ StreamSvgTextValueType["currency"] = "STREAM_SVG_CURRENCY";
69
+ StreamSvgTextValueType["currencySymbol"] = "STREAM_SVG_CURRENCY_SYMBOL";
70
+ /* Product actual price */
71
+ StreamSvgTextValueType["price"] = "STREAM_SVG_PRODUCT_PRICE";
72
+ StreamSvgTextValueType["priceWhole"] = "STREAM_SVG_PRODUCT_PRICE_WHOLE";
73
+ StreamSvgTextValueType["priceDecimal"] = "STREAM_SVG_PRODUCT_PRICE_DECIMAL";
74
+ /* Product price before sales (if applicable) */
75
+ StreamSvgTextValueType["beforePrice"] = "STREAM_SVG_PRODUCT_BEFORE_PRICE";
76
+ StreamSvgTextValueType["beforePriceWhole"] = "STREAM_SVG_PRODUCT_BEFORE_PRICE_WHOLE";
77
+ StreamSvgTextValueType["beforePriceDecimal"] = "STREAM_SVG_PRODUCT_BEFORE_PRICE_DECIMAL";
78
+ /* “Save” / discount values */
79
+ StreamSvgTextValueType["saveValue"] = "STREAM_SVG_PRODUCT_SAVE_VALUE";
80
+ StreamSvgTextValueType["saveValueWhole"] = "STREAM_SVG_PRODUCT_SAVE_VALUE_WHOLE";
81
+ StreamSvgTextValueType["saveValueDecimal"] = "STREAM_SVG_PRODUCT_SAVE_VALUE_DECIMAL";
82
+ StreamSvgTextValueType["savePercentValue"] = "STREAM_SVG_PRODUCT_SAVE_PERCENT_VALUE";
83
+ })(StreamSvgTextValueType || (StreamSvgTextValueType = {}));
@@ -2,15 +2,17 @@ import { StreamComponentDataType, StreamElementType } from './enums';
2
2
  import type { StreamLayout } from './layout';
3
3
  import type { StreamLayoutShortVideoModel } from './models';
4
4
  import type { StreamSlot } from './slot';
5
- import type { ContainerStreamElementStyles, ImageStreamElementStyles, PriceStreamElementStyles, TextStreamElementStyles } from './styles';
5
+ import type { AnnotationStreamElementStyles, ContainerStreamElementStyles, ImageStreamElementStyles, PriceStreamElementStyles, TextStreamElementStyles } from './styles';
6
6
  export { default as StreamPageLayout } from './cmp.layout.svelte';
7
7
  export { default as StreamLayoutSlot } from './cmp.slot.svelte';
8
8
  export { default as StreamLayoutSlotContent } from './cmp.slot-content.svelte';
9
9
  export * from './layout';
10
+ export * from './svg-attributes';
10
11
  export { parseToStreamLayout, stringifyToStreamLayoutInput } from './serializer';
11
12
  export declare const getAllowedDataTypesForSlot: (slot: StreamSlot) => StreamComponentDataType[];
12
13
  export declare const getSingleShortVideoFromLayout: (layout: StreamLayout) => StreamLayoutShortVideoModel | null;
13
14
  export type ElementTypeToStyles = {
15
+ [StreamElementType.Annotation]: AnnotationStreamElementStyles;
14
16
  [StreamElementType.Container]: ContainerStreamElementStyles;
15
17
  [StreamElementType.Price]: PriceStreamElementStyles;
16
18
  [StreamElementType.ImageRef]: ImageStreamElementStyles;
@@ -3,6 +3,7 @@ export { default as StreamPageLayout } from './cmp.layout.svelte';
3
3
  export { default as StreamLayoutSlot } from './cmp.slot.svelte';
4
4
  export { default as StreamLayoutSlotContent } from './cmp.slot-content.svelte';
5
5
  export * from './layout';
6
+ export * from './svg-attributes';
6
7
  export { parseToStreamLayout, stringifyToStreamLayoutInput } from './serializer';
7
8
  export const getAllowedDataTypesForSlot = (slot) => {
8
9
  return slot.components.flatMap((c) => c.dataType);
@@ -1,4 +1,4 @@
1
- import { MediaType } from '../../..';
1
+ import { MediaType } from '../../../core/enums';
2
2
  export type StreamLayoutMediaItemModel = {
3
3
  url: string;
4
4
  thumbnailUrl: string | null;
@@ -1 +1 @@
1
- import { MediaType } from '../../..';
1
+ import { MediaType } from '../../../core/enums';
@@ -1,4 +1,4 @@
1
- import type { PostSourceType } from '$gql/types';
1
+ import type { PostSourceType } from '../../../core/enums';
2
2
  export type StreamLayoutPostHeaderModel = {
3
3
  sourceId: string;
4
4
  sourceName: string;
@@ -1,7 +1,8 @@
1
- import { StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleHorizontalAlign } from './enums';
2
- import type { ContainerStreamElementStyles, ImageStreamElementStyles, StreamLayoutStyles, TextStreamElementStyles } from './styles';
1
+ import { StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleHorizontalAlign, AnnotationStreamElementPlacement } from './enums';
2
+ import type { AnnotationStreamElementStyles, ContainerStreamElementStyles, ImageStreamElementStyles, StreamLayoutStyles, TextStreamElementStyles } from './styles';
3
3
  export declare const generateStreamLayoutStyles: (styles: StreamLayoutStyles | null) => string;
4
4
  export declare const generateContainerStyles: (styles: Partial<ContainerStreamElementStyles> | null) => string;
5
+ export declare const generateAnnotationStyles: (styles: AnnotationStreamElementStyles, placement: AnnotationStreamElementPlacement) => string;
5
6
  export declare const generateTextStyles: (styles: Partial<TextStreamElementStyles> | null) => string;
6
7
  export declare const generateImageStyles: (styles: Partial<ImageStreamElementStyles> | null) => string;
7
8
  export declare const mapFontFamily: (value: StreamElementStyleFontFamily | null | undefined) => string;
@@ -1,5 +1,5 @@
1
1
  import { Utils } from '../../core/utils';
2
- import { StreamCssValueType, StreamElementStyleDirection, StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleMediaFit, StreamElementStyleHorizontalAlign } from './enums';
2
+ import { StreamCssValueType, StreamElementStyleDirection, StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleMediaFit, StreamElementStyleHorizontalAlign, AnnotationStreamElementPlacement } from './enums';
3
3
  export const generateStreamLayoutStyles = (styles) => {
4
4
  if (!styles) {
5
5
  return '';
@@ -32,6 +32,30 @@ export const generateContainerStyles = (styles) => {
32
32
  }
33
33
  return values.join('');
34
34
  };
35
+ export const generateAnnotationStyles = (styles, placement) => {
36
+ const values = [`height: ${transformNumericValue(styles.size)};`, 'position: absolute;'];
37
+ switch (placement) {
38
+ case AnnotationStreamElementPlacement.TopLeft:
39
+ values.push(`top: ${transformNumericValue(styles.verticalIndent)};`);
40
+ values.push(`left: ${transformNumericValue(styles.horizontalIndent)};`);
41
+ break;
42
+ case AnnotationStreamElementPlacement.TopRight:
43
+ values.push(`top: ${transformNumericValue(styles.verticalIndent)};`);
44
+ values.push(`right: ${transformNumericValue(styles.horizontalIndent)}`);
45
+ break;
46
+ case AnnotationStreamElementPlacement.BottomLeft:
47
+ values.push(`bottom: ${transformNumericValue(styles.verticalIndent)};`);
48
+ values.push(`left: ${transformNumericValue(styles.horizontalIndent)};`);
49
+ break;
50
+ case AnnotationStreamElementPlacement.BottomRight:
51
+ values.push(`bottom: ${transformNumericValue(styles.verticalIndent)};`);
52
+ values.push(`right: ${transformNumericValue(styles.horizontalIndent)};`);
53
+ break;
54
+ default:
55
+ Utils.assertUnreachable(placement);
56
+ }
57
+ return values.join('');
58
+ };
35
59
  export const generateTextStyles = (styles) => {
36
60
  styles = styles || {};
37
61
  const values = [
@@ -4,6 +4,25 @@ export type StreamLayoutStyles = {
4
4
  backgroundColor?: string | null;
5
5
  fontFamily?: StreamElementStyleFontFamily | null;
6
6
  };
7
+ export type AnnotationStreamElementStyles = {
8
+ size: number;
9
+ horizontalIndent: number;
10
+ verticalIndent: number;
11
+ };
12
+ export type ContainerStreamElementStyles = {
13
+ width?: StreamCssValue | null;
14
+ height?: StreamCssValue | null;
15
+ aspectRatio?: number | null;
16
+ direction?: StreamElementStyleDirection | null;
17
+ gap?: number | null;
18
+ paddingTop?: number | null;
19
+ paddingRight?: number | null;
20
+ paddingBottom?: number | null;
21
+ paddingLeft?: number | null;
22
+ backgroundColor?: string | null;
23
+ borderRadius?: number | null;
24
+ borderColor?: string | null;
25
+ };
7
26
  export type ImageStreamElementStyles = {
8
27
  mediaFit?: StreamElementStyleMediaFit | null;
9
28
  };
@@ -27,17 +46,3 @@ export type TextStreamElementStyles = {
27
46
  color?: string | null;
28
47
  maxLines?: number | null;
29
48
  };
30
- export type ContainerStreamElementStyles = {
31
- width?: StreamCssValue | null;
32
- height?: StreamCssValue | null;
33
- aspectRatio?: number | null;
34
- direction?: StreamElementStyleDirection | null;
35
- gap?: number | null;
36
- paddingTop?: number | null;
37
- paddingRight?: number | null;
38
- paddingBottom?: number | null;
39
- paddingLeft?: number | null;
40
- backgroundColor?: string | null;
41
- borderRadius?: number | null;
42
- borderColor?: string | null;
43
- };
@@ -0,0 +1,7 @@
1
+ export declare enum SvgAttributes {
2
+ customizableElement = "data-streams--customizable",
3
+ textElementValueType = "data-streams--text--value-type",
4
+ textElementCustomValue = "data-streams--text--custom-value",
5
+ textElementValueBefore = "data-streams--text--value-before",
6
+ textElementValueAfter = "data-streams--text--value-after"
7
+ }
@@ -0,0 +1,8 @@
1
+ export var SvgAttributes;
2
+ (function (SvgAttributes) {
3
+ SvgAttributes["customizableElement"] = "data-streams--customizable";
4
+ SvgAttributes["textElementValueType"] = "data-streams--text--value-type";
5
+ SvgAttributes["textElementCustomValue"] = "data-streams--text--custom-value";
6
+ SvgAttributes["textElementValueBefore"] = "data-streams--text--value-before";
7
+ SvgAttributes["textElementValueAfter"] = "data-streams--text--value-after";
8
+ })(SvgAttributes || (SvgAttributes = {}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@streamscloud/embeddable",
3
- "version": "2.2.5",
3
+ "version": "2.3.0",
4
4
  "author": "StreamsCloud",
5
5
  "repository": "https://github.com/StreamsCloud/streamscloud-frontend-packages.git",
6
6
  "type": "module",
@@ -94,8 +94,9 @@
94
94
  "@fluentui/svg-icons": "^1.1.292",
95
95
  "@streamscloud/streams-analytics-collector": "latest",
96
96
  "@urql/core": "^5.1.1",
97
+ "dompurify": "^3.2.6",
97
98
  "mobile-detect": "^1.4.5",
98
- "svelte": "^5.25.3"
99
+ "svelte": "^5.33.4"
99
100
  },
100
101
  "devDependencies": {
101
102
  "@eslint/compat": "^1.2.9",
@@ -131,7 +132,7 @@
131
132
  "prettier-plugin-svelte": "^3.4.0",
132
133
  "publint": "^0.3.12",
133
134
  "sass": "^1.89.0",
134
- "svelte": "^5.33.1",
135
+ "svelte": "^5.33.4",
135
136
  "svelte-check": "^4.2.1",
136
137
  "svelte-preprocess": "^6.0.3",
137
138
  "typescript": "^5.8.3",