@streamscloud/embeddable 2.7.5 → 2.8.1

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 (6) hide show
  1. package/dist/streams/layout/element-views/cmp.price-stream-element.svelte +14 -115
  2. package/dist/streams/layout/element-views/price-element-view.svelte +168 -0
  3. package/dist/streams/layout/element-views/price-element-view.svelte.d.ts +15 -0
  4. package/dist/streams/layout/styles-transformer.js +38 -38
  5. package/dist/streams/layout/styles.d.ts +2 -1
  6. package/package.json +2 -2
package/dist/streams/layout/element-views/cmp.price-stream-element.svelte CHANGED
@@ -1,124 +1,23 @@
1
1
  <script lang="ts">var _a;
2
- import { toPriceRepresentation } from '../../../products/price-helper';
3
- import { LineClamp } from '../../../ui/line-clamp';
4
2
  import { PriceStreamElementLocalization } from './price-stream-element-localization';
5
- import { default as StockElementView } from './cmp.stock-stream-element.svelte';
6
- import { mapFlexJustifyContent, mapFontFamily, mapFontWeight, transformColorValue, transformFontSizeValue, transformNumericValue } from '../styles-transformer';
3
+ import { default as PriceElementView } from './price-element-view.svelte';
7
4
  let { model, data, localization: localizationInit } = $props();
8
5
  const localization = $derived(new PriceStreamElementLocalization(localizationInit));
9
- const lineHeight = 1.2;
10
- const elementHeight = $derived(((_a = model.styles) === null || _a === void 0 ? void 0 : _a.height) || 32);
11
- const priceHeight = $derived(model.stock ? elementHeight * 0.68 : elementHeight);
12
- const currentPrice = $derived.by(() => {
13
- if (data.salePrice) {
14
- return toPriceRepresentation(data.salePrice, data.currency, model.includeCurrency || false);
15
- }
16
- return toPriceRepresentation(data.price, data.currency, model.includeCurrency || false);
17
- });
18
- const saveValue = $derived.by(() => {
19
- if (data.salePrice) {
20
- return toPriceRepresentation(data.price - data.salePrice, data.currency, model.includeCurrency || false);
21
- }
22
- return 0;
23
- });
24
- const elementContainerStyles = $derived.by(() => {
25
- var _a, _b;
26
- const values = [
27
- 'display: flex;',
28
- 'flex-direction: column;',
29
- 'justify-content: space-between;',
30
- `align-items: ${mapFlexJustifyContent((_a = model.styles) === null || _a === void 0 ? void 0 : _a.horizontalAlign)};`,
31
- `font-family: ${mapFontFamily((_b = model.styles) === null || _b === void 0 ? void 0 : _b.fontFamily)};`,
32
- `height: ${transformNumericValue(elementHeight)};`
33
- ];
34
- return values.join('');
35
- });
36
- const priceContainerStyles = $derived.by(() => {
37
- const values = ['display: flex;', `height: ${transformNumericValue(priceHeight)};`, `align-items: center;`, 'gap: 3cqi;'];
38
- return values.join('');
39
- });
40
- const priceCustomStyles = $derived.by(() => {
41
- var _a, _b, _c;
42
- const values = [
43
- `font-size: ${transformFontSizeValue(priceHeight / lineHeight)};`,
44
- `line-height: ${lineHeight};`,
45
- `font-weight: ${mapFontWeight((_a = model.styles) === null || _a === void 0 ? void 0 : _a.fontWeight)};`,
46
- `color: ${transformColorValue(data.salePrice ? (_b = model.styles) === null || _b === void 0 ? void 0 : _b.salePriceColor : (_c = model.styles) === null || _c === void 0 ? void 0 : _c.regularPriceColor)};`
47
- ];
48
- return values.join('');
49
- });
50
- const saveValueCustomStyles = $derived.by(() => {
51
- var _a, _b;
52
- const values = [
53
- `margin-top: ${transformNumericValue((priceHeight - priceHeight / lineHeight) / 2)};`,
54
- `font-size: ${transformFontSizeValue(priceHeight / 4)};`,
55
- `font-weight: 500;`,
56
- `padding: ${transformNumericValue(priceHeight / 8)} ${transformNumericValue(priceHeight / 4)};`,
57
- `border-radius: ${transformNumericValue(priceHeight / 8)};`,
58
- `background-color: ${transformColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.saveValueBackgroundColor)};`,
59
- `color: ${transformColorValue((_b = model.styles) === null || _b === void 0 ? void 0 : _b.saveValueColor)};`
60
- ];
61
- return values.join('');
62
- });
63
- const beforeValueCustomStyles = $derived.by(() => {
64
- var _a;
65
- const values = [
66
- `font-size: ${transformFontSizeValue(priceHeight / 5)};`,
67
- `font-weight: 500;`,
68
- `color: ${transformColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.beforeValueColor)};`
69
- ];
70
- return values.join('');
71
- });
72
- const textAfterCustomStyles = $derived.by(() => {
73
- const values = [`font-size: ${transformFontSizeValue(priceHeight / lineHeight / 2)};`, `font-weight: 500;`, 'align-self: flex-end;'];
74
- return values.join('');
75
- });
76
- const stockElementHeight = $derived(elementHeight * 0.23);
6
+ let baseMaxHeight = $derived(((_a = model.styles) === null || _a === void 0 ? void 0 : _a.height) || 32);
7
+ let adjustedHeight = $derived(baseMaxHeight);
77
8
  </script>
78
9
 
79
- <div class="price-stream-element" style={elementContainerStyles}>
80
- <div class="price-stream-element__price-container" style={priceContainerStyles}>
81
- <div class="price-stream-element__price" style={priceCustomStyles}>
82
- {currentPrice}
83
- </div>
84
- {#if data.salePrice && !model.excludeBeforePrice}
85
- <div class="price-stream-element__sale-price">
86
- <div class="price-stream-element__save" style={saveValueCustomStyles}>
87
- {localization.saveValue(saveValue)}
88
- </div>
89
- <div class="price-stream-element__before-price" style={beforeValueCustomStyles}>
90
- {localization.beforeValue(toPriceRepresentation(data.price, data.currency, model.includeCurrency || false))}
91
- </div>
92
- </div>
93
- {/if}
94
- {#if model.textAfter}
95
- <div class="price-stream-element__text-after" style={textAfterCustomStyles}>
96
- <LineClamp value={model.textAfter} maxLines={1} />
97
- </div>
98
- {/if}
99
- </div>
100
- {#if model.stock}
101
- <StockElementView model={model.stock} heightOverrideDdu={stockElementHeight} localization={localization.stockLocalization} />
102
- {/if}
10
+ <div class="price-stream-element">
11
+ <PriceElementView maxElementHeight={adjustedHeight} model={model} data={data} localization={localization} />
12
+ <PriceElementView
13
+ maxElementHeight={baseMaxHeight}
14
+ model={model}
15
+ data={data}
16
+ localization={localization}
17
+ on={{ heightAdjusted: (e) => (adjustedHeight = e) }} />
103
18
  </div>
104
19
 
105
- <style>@keyframes fadeIn {
106
- 0% {
107
- opacity: 1;
108
- }
109
- 50% {
110
- opacity: 0.4;
111
- }
112
- 100% {
113
- opacity: 1;
114
- }
115
- }
116
- .price-stream-element__sale-price {
117
- display: flex;
118
- height: 100%;
119
- flex-direction: column;
120
- justify-content: space-between;
121
- }
122
- .price-stream-element__price, .price-stream-element__save, .price-stream-element__before-price {
123
- white-space: nowrap;
20
+ <style>.price-stream-element {
21
+ position: relative;
22
+ width: 100%;
124
23
  }</style>
package/dist/streams/layout/element-views/price-element-view.svelte ADDED
@@ -0,0 +1,168 @@
1
+ <script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
+ return new (P || (P = Promise))(function (resolve, reject) {
4
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
8
+ });
9
+ };
10
+ import { Utils } from '../../../core/utils';
11
+ import { toPriceRepresentation } from '../../../products/price-helper';
12
+ import { LineClamp } from '../../../ui/line-clamp';
13
+ import { PriceStreamElementLocalization } from './price-stream-element-localization';
14
+ import { default as StockElementView } from './cmp.stock-stream-element.svelte';
15
+ import { mapFlexJustifyContent, mapFontFamily, mapFontWeight, transformColorValue, transformFontSizeValue, transformNumericValue } from '../styles-transformer';
16
+ let { maxElementHeight, model, data, localization, on } = $props();
17
+ let priceElementRef = $state.raw(null);
18
+ let priceContainerRef = $state.raw(null);
19
+ const minElementHeight = 16;
20
+ let adjustedHeight = $derived(maxElementHeight);
21
+ const lineHeight = 1.2;
22
+ const elementHeight = $derived(adjustedHeight);
23
+ const priceHeight = $derived(model.stock ? elementHeight * 0.68 : elementHeight);
24
+ const adjustableHeight = $derived(!!(on === null || on === void 0 ? void 0 : on.heightAdjusted));
25
+ const currentPrice = $derived.by(() => {
26
+ if (data.salePrice) {
27
+ return toPriceRepresentation(data.salePrice, data.currency, model.includeCurrency || false);
28
+ }
29
+ return toPriceRepresentation(data.price, data.currency, model.includeCurrency || false);
30
+ });
31
+ const saveValue = $derived.by(() => {
32
+ if (data.salePrice) {
33
+ return toPriceRepresentation(data.price - data.salePrice, data.currency, model.includeCurrency || false);
34
+ }
35
+ return 0;
36
+ });
37
+ const beforeValue = $derived.by(() => {
38
+ return toPriceRepresentation(data.price, data.currency, model.includeCurrency || false);
39
+ });
40
+ const elementContainerStyles = $derived.by(() => {
41
+ var _a, _b;
42
+ const values = [
43
+ 'display: flex;',
44
+ 'flex-direction: column;',
45
+ 'justify-content: space-between;',
46
+ `align-items: ${mapFlexJustifyContent((_a = model.styles) === null || _a === void 0 ? void 0 : _a.horizontalAlign)};`,
47
+ `font-family: ${mapFontFamily((_b = model.styles) === null || _b === void 0 ? void 0 : _b.fontFamily)};`,
48
+ `height: ${transformNumericValue(elementHeight)};`
49
+ ];
50
+ return values.join('');
51
+ });
52
+ const priceContainerStyles = $derived.by(() => {
53
+ const values = ['display: flex;', `height: ${transformNumericValue(priceHeight)};`, `align-items: center;`, 'gap: 3cqi;'];
54
+ return values.join('');
55
+ });
56
+ const priceCustomStyles = $derived.by(() => {
57
+ var _a, _b, _c;
58
+ const values = [
59
+ `font-size: ${transformFontSizeValue(priceHeight / lineHeight)};`,
60
+ `line-height: ${lineHeight};`,
61
+ `font-weight: ${mapFontWeight((_a = model.styles) === null || _a === void 0 ? void 0 : _a.fontWeight)};`,
62
+ `color: ${transformColorValue(data.salePrice ? (_b = model.styles) === null || _b === void 0 ? void 0 : _b.salePriceColor : (_c = model.styles) === null || _c === void 0 ? void 0 : _c.regularPriceColor)};`
63
+ ];
64
+ return values.join('');
65
+ });
66
+ const saveValueCustomStyles = $derived.by(() => {
67
+ var _a, _b;
68
+ const values = [
69
+ `margin-top: ${transformNumericValue((priceHeight - priceHeight / lineHeight) / 2)};`,
70
+ `font-size: ${transformFontSizeValue(priceHeight / 4)};`,
71
+ `font-weight: 500;`,
72
+ `padding: ${transformNumericValue(priceHeight / 8)} ${transformNumericValue(priceHeight / 4)};`,
73
+ `border-radius: ${transformNumericValue(priceHeight / 8)};`,
74
+ `background-color: ${transformColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.saveValueBackgroundColor)};`,
75
+ `color: ${transformColorValue((_b = model.styles) === null || _b === void 0 ? void 0 : _b.saveValueColor)};`
76
+ ];
77
+ return values.join('');
78
+ });
79
+ const beforeValueCustomStyles = $derived.by(() => {
80
+ var _a;
81
+ const values = [
82
+ `font-size: ${transformFontSizeValue(priceHeight / 5)};`,
83
+ `font-weight: 500;`,
84
+ `color: ${transformColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.beforeValueColor)};`
85
+ ];
86
+ return values.join('');
87
+ });
88
+ const textAfterCustomStyles = $derived.by(() => {
89
+ const values = [`font-size: ${transformFontSizeValue(priceHeight / lineHeight / 2)};`, `font-weight: 500;`, 'align-self: flex-end;'];
90
+ return values.join('');
91
+ });
92
+ const stockElementHeight = $derived(elementHeight * 0.23);
93
+ const adjustHeightToFit = () => __awaiter(void 0, void 0, void 0, function* () {
94
+ if (!priceContainerRef || !priceElementRef || !adjustableHeight) {
95
+ return;
96
+ }
97
+ yield new Promise((resolve) => requestAnimationFrame(resolve));
98
+ let currentHeight = maxElementHeight;
99
+ while (currentHeight > minElementHeight) {
100
+ adjustedHeight = currentHeight;
101
+ yield new Promise((resolve) => requestAnimationFrame(resolve));
102
+ let hasOverflow = priceElementRef.clientWidth < priceContainerRef.clientWidth;
103
+ if (!hasOverflow) {
104
+ break;
105
+ }
106
+ currentHeight -= 1;
107
+ }
108
+ on === null || on === void 0 ? void 0 : on.heightAdjusted(currentHeight);
109
+ });
110
+ const debouncedAdjustHeightToFit = Utils.debounce(adjustHeightToFit, 400);
111
+ $effect(() => {
112
+ const references = [maxElementHeight, currentPrice, saveValue, beforeValue, model.textAfter, model.includeCurrency, model.excludeBeforePrice];
113
+ void references;
114
+ debouncedAdjustHeightToFit();
115
+ });
116
+ </script>
117
+
118
+ <div class="price-stream-element" class:price-stream-element--adjustable={adjustableHeight} style={elementContainerStyles} bind:this={priceElementRef}>
119
+ <div class="price-stream-element__price-container" style={priceContainerStyles} bind:this={priceContainerRef}>
120
+ <div class="price-stream-element__price" style={priceCustomStyles}>
121
+ {currentPrice}
122
+ </div>
123
+ {#if data.salePrice && !model.excludeBeforePrice}
124
+ <div class="price-stream-element__sale-price">
125
+ <div class="price-stream-element__save" style={saveValueCustomStyles}>
126
+ {localization.saveValue(saveValue)}
127
+ </div>
128
+ <div class="price-stream-element__before-price" style={beforeValueCustomStyles}>
129
+ {localization.beforeValue(beforeValue)}
130
+ </div>
131
+ </div>
132
+ {/if}
133
+ {#if model.textAfter}
134
+ <div class="price-stream-element__text-after" style={textAfterCustomStyles}>
135
+ <LineClamp value={model.textAfter} maxLines={1} />
136
+ </div>
137
+ {/if}
138
+ </div>
139
+ {#if model.stock}
140
+ <StockElementView model={model.stock} heightOverrideDdu={stockElementHeight} localization={localization.stockLocalization} />
141
+ {/if}
142
+ </div>
143
+
144
+ <style>@keyframes fadeIn {
145
+ 0% {
146
+ opacity: 1;
147
+ }
148
+ 50% {
149
+ opacity: 0.4;
150
+ }
151
+ 100% {
152
+ opacity: 1;
153
+ }
154
+ }
155
+ .price-stream-element--adjustable {
156
+ position: absolute;
157
+ visibility: hidden;
158
+ width: 100%;
159
+ }
160
+ .price-stream-element__sale-price {
161
+ display: flex;
162
+ height: 100%;
163
+ flex-direction: column;
164
+ justify-content: space-between;
165
+ }
166
+ .price-stream-element__price, .price-stream-element__save, .price-stream-element__before-price {
167
+ white-space: nowrap;
168
+ }</style>
package/dist/streams/layout/element-views/price-element-view.svelte.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import { PriceStreamElementLocalization } from './price-stream-element-localization';
2
+ import type { PriceStreamElementModel } from '../elements';
3
+ import type { StreamLayoutProductPriceModel } from '../models';
4
+ type Props = {
5
+ maxElementHeight: number;
6
+ model: PriceStreamElementModel;
7
+ data: StreamLayoutProductPriceModel;
8
+ localization: PriceStreamElementLocalization;
9
+ on?: {
10
+ heightAdjusted: (height: number) => void;
11
+ };
12
+ };
13
+ declare const PriceElementView: import("svelte").Component<Props, {}, "">;
14
+ type PriceElementView = ReturnType<typeof PriceElementView>;
15
+ export default PriceElementView;
package/dist/streams/layout/styles-transformer.js CHANGED
@@ -4,74 +4,74 @@ export const generateStreamLayoutStyles = (styles) => {
4
4
  if (!styles) {
5
5
  return '';
6
6
  }
7
- const values = [`background-color: ${transformColorValue(styles.backgroundColor)};`, `font-family: ${mapFontFamily(styles.fontFamily)};`];
8
- return values.join('');
7
+ const values = [`background-color: ${transformColorValue(styles.backgroundColor)}`, `font-family: ${mapFontFamily(styles.fontFamily)}`];
8
+ return values.join(';');
9
9
  };
10
10
  export const generateContainerStyles = (styles) => {
11
11
  styles = styles || {};
12
12
  const values = [
13
- 'display: flex;',
14
- 'flex-direction: column;',
15
- `width: ${transformCssValue(styles.width, 'auto')};`,
16
- `height: ${transformCssValue(styles.height, 'fit-content')};`,
17
- `aspect-ratio: ${styles.aspectRatio || 'auto'};`,
18
- `gap: ${transformNumericValue(styles.gap)};`,
19
- `padding-top: ${transformNumericValue(styles.paddingTop)};`,
20
- `padding-right: ${transformNumericValue(styles.paddingRight)};`,
21
- `padding-bottom: ${transformNumericValue(styles.paddingBottom)};`,
22
- `padding-left: ${transformNumericValue(styles.paddingLeft)};`,
23
- `background-color: ${transformColorValue(styles.backgroundColor)};`,
24
- `border-width: ${styles.borderColor ? '1px' : '0'};`,
25
- `border-radius: ${transformNumericValue(styles.borderRadius)};`,
26
- `border-color: ${transformColorValue(styles.borderColor)};`,
27
- `overflow: ${styles.borderRadius ? 'hidden' : 'visible'};`
13
+ 'display: flex',
14
+ 'flex-direction: column',
15
+ `width: ${transformCssValue(styles.width, 'auto')}`,
16
+ `height: ${transformCssValue(styles.height, 'fit-content')}`,
17
+ `aspect-ratio: ${styles.aspectRatio || 'auto'}`,
18
+ `gap: ${transformNumericValue(styles.gap)}`,
19
+ `padding-top: ${transformNumericValue(styles.paddingTop)}`,
20
+ `padding-right: ${transformNumericValue(styles.paddingRight)}`,
21
+ `padding-bottom: ${transformNumericValue(styles.paddingBottom)}`,
22
+ `padding-left: ${transformNumericValue(styles.paddingLeft)}`,
23
+ `background-color: ${transformColorValue(styles.backgroundColor)}`,
24
+ `border-width: ${styles.borderColor ? '1px' : '0'}`,
25
+ `border-radius: ${transformNumericValue(styles.borderRadius)}`,
26
+ `border-color: ${transformColorValue(styles.borderColor)}`,
27
+ `overflow: ${styles.borderRadius ? 'hidden' : 'visible'}`
28
28
  ];
29
29
  if (styles.direction) {
30
- values.push(`display: flex;`);
31
- values.push(`flex-direction: ${styles.direction === StreamElementStyleDirection.Horizontal ? 'row' : 'column'};`);
30
+ values.push(`display: flex`);
31
+ values.push(`flex-direction: ${styles.direction === StreamElementStyleDirection.Horizontal ? 'row' : 'column'}`);
32
32
  }
33
- return values.join('');
33
+ return values.join(';');
34
34
  };
35
35
  export const generateAnnotationStyles = (styles, placement) => {
36
- const values = [`height: ${transformNumericValue(styles.size)};`, 'position: absolute;'];
36
+ const values = [`height: ${transformNumericValue(styles.height)}`, `aspect-ratio: ${styles.aspectRatio}`, 'position: absolute'];
37
37
  switch (placement) {
38
38
  case AnnotationStreamElementPlacement.TopLeft:
39
- values.push(`top: ${transformNumericValue(styles.offsetY)};`);
40
- values.push(`left: ${transformNumericValue(styles.offsetX)};`);
39
+ values.push(`top: ${transformNumericValue(styles.offsetY)}`);
40
+ values.push(`left: ${transformNumericValue(styles.offsetX)}`);
41
41
  break;
42
42
  case AnnotationStreamElementPlacement.TopRight:
43
- values.push(`top: ${transformNumericValue(styles.offsetY)};`);
43
+ values.push(`top: ${transformNumericValue(styles.offsetY)}`);
44
44
  values.push(`right: ${transformNumericValue(styles.offsetX)}`);
45
45
  break;
46
46
  case AnnotationStreamElementPlacement.BottomLeft:
47
- values.push(`bottom: ${transformNumericValue(styles.offsetY)};`);
48
- values.push(`left: ${transformNumericValue(styles.offsetX)};`);
47
+ values.push(`bottom: ${transformNumericValue(styles.offsetY)}`);
48
+ values.push(`left: ${transformNumericValue(styles.offsetX)}`);
49
49
  break;
50
50
  case AnnotationStreamElementPlacement.BottomRight:
51
- values.push(`bottom: ${transformNumericValue(styles.offsetY)};`);
52
- values.push(`right: ${transformNumericValue(styles.offsetX)};`);
51
+ values.push(`bottom: ${transformNumericValue(styles.offsetY)}`);
52
+ values.push(`right: ${transformNumericValue(styles.offsetX)}`);
53
53
  break;
54
54
  default:
55
55
  Utils.assertUnreachable(placement);
56
56
  }
57
- return values.join('');
57
+ return values.join(';');
58
58
  };
59
59
  export const generateTextStyles = (styles) => {
60
60
  styles = styles || {};
61
61
  const values = [
62
- `font-family: ${mapFontFamily(styles.fontFamily)};`,
63
- `font-size: ${transformFontSizeValue(styles.fontSize)};`,
64
- `font-weight: ${mapFontWeight(styles.fontWeight)};`,
65
- `line-height: ${transformNumericValue(styles.lineHeight, '1.2')};`,
66
- `text-align: ${mapTextAlign(styles.textAlign)};`,
67
- `color: ${transformColorValue(styles.color)};`
62
+ `font-family: ${mapFontFamily(styles.fontFamily)}`,
63
+ `font-size: ${transformFontSizeValue(styles.fontSize)}`,
64
+ `font-weight: ${mapFontWeight(styles.fontWeight)}`,
65
+ `line-height: ${transformNumericValue(styles.lineHeight, '1.2')}`,
66
+ `text-align: ${mapTextAlign(styles.textAlign)}`,
67
+ `color: ${transformColorValue(styles.color)}`
68
68
  ];
69
- return values.join('');
69
+ return values.join(';');
70
70
  };
71
71
  export const generateImageStyles = (styles) => {
72
72
  styles = styles || {};
73
- const imageStyles = [`object-fit: ${mapMediaFit(styles.mediaFit)};`];
74
- return imageStyles.join('');
73
+ const imageStyles = [`object-fit: ${mapMediaFit(styles.mediaFit)}`];
74
+ return imageStyles.join(';');
75
75
  };
76
76
  export const mapFontFamily = (value) => {
77
77
  switch (value) {
package/dist/streams/layout/styles.d.ts CHANGED
@@ -5,7 +5,8 @@ export type StreamLayoutStyles = {
5
5
  fontFamily?: StreamElementStyleFontFamily | null;
6
6
  };
7
7
  export type AnnotationStreamElementStyles = {
8
- size: number;
8
+ height: number;
9
+ aspectRatio: number;
9
10
  offsetX: number;
10
11
  offsetY: number;
11
12
  };
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@streamscloud/embeddable",
3
- "version": "2.7.5",
3
+ "version": "2.8.1",
4
4
  "author": "StreamsCloud",
5
5
  "repository": "https://github.com/StreamsCloud/streamscloud-frontend-packages.git",
6
6
  "type": "module",
7
7
  "scripts": {
8
8
  "dev": "vite dev --port 3010",
9
9
  "build": "svelte-package --tsconfig ./tsconfig.app.json && prettier --write --plugin prettier-plugin-svelte . && eslint --fix .",
10
- "publish": "npm publish --access public",
10
+ "build-publish": "npm run build && npm publish --access public",
11
11
  "pack": "npm run build && npm pack",
12
12
  "preview": "vite preview",
13
13
  "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json",