@streamscloud/embeddable 1.2.0 → 2.0.1

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

@@ -0,0 +1,97 @@
+<script lang="ts">var _a;
+import { toPriceRepresentation } from '../../../products/price-helper';
+import { PriceStreamElementLocalization } from './price-stream-element-localization.svelte.js';
+import { mapFlexJustifyContent, mapFontFamily, mapFontWeight, transformColorValue, transformFontSizeValue, transformNumericValue } from '../styles-transformer';
+let { model, data, localization: localizationInit } = $props();
+const localization = $derived(new PriceStreamElementLocalization(localizationInit));
+const lineHeight = 1.2;
+const height = $derived(((_a = model.styles) === null || _a === void 0 ? void 0 : _a.height) || 16);
+const currentPrice = $derived.by(() => {
+    if (data.price.salePrice) {
+        return toPriceRepresentation(data.price.salePrice, data.price.currency, model.includeCurrency || false);
+    }
+    return toPriceRepresentation(data.price.price, data.price.currency, model.includeCurrency || false);
+});
+const saveValue = $derived.by(() => {
+    if (data.price.salePrice) {
+        return toPriceRepresentation(data.price.price - data.price.salePrice, data.price.currency, model.includeCurrency || false);
+    }
+    return 0;
+});
+const containerStyles = $derived.by(() => {
+    var _a, _b;
+    const values = [
+        `font-family: ${mapFontFamily((_a = model.styles) === null || _a === void 0 ? void 0 : _a.fontFamily)};`,
+        `justify-content: ${mapFlexJustifyContent((_b = model.styles) === null || _b === void 0 ? void 0 : _b.horizontalAlign)};`,
+        `align-items: center;`,
+        `height: ${transformNumericValue(height)};`
+    ];
+    return values.join('');
+});
+const priceCustomStyles = $derived.by(() => {
+    var _a, _b, _c;
+    const values = [
+        `font-size: ${transformFontSizeValue(height / lineHeight)};`,
+        `line-height: ${lineHeight};`,
+        `font-weight: ${mapFontWeight((_a = model.styles) === null || _a === void 0 ? void 0 : _a.fontWeight)};`,
+        `color: ${transformColorValue(data.price.salePrice ? (_b = model.styles) === null || _b === void 0 ? void 0 : _b.salePriceColor : (_c = model.styles) === null || _c === void 0 ? void 0 : _c.regularPriceColor)};`
+    ];
+    return values.join('');
+});
+const saveValueCustomStyles = $derived.by(() => {
+    var _a, _b;
+    const values = [
+        `margin-top: ${transformNumericValue((height - height / lineHeight) / 2)};`,
+        `font-size: ${transformFontSizeValue(height / 4)};`,
+        `font-weight: 500;`,
+        `padding: ${transformNumericValue(height / 8)} ${transformNumericValue(height / 4)};`,
+        `border-radius: ${transformNumericValue(height / 8)};`,
+        `background-color: ${transformColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.saveValueBackgroundColor)};`,
+        `color: ${transformColorValue((_b = model.styles) === null || _b === void 0 ? void 0 : _b.saveValueColor)};`
+    ];
+    return values.join('');
+});
+const beforeValueCustomStyles = $derived.by(() => {
+    var _a;
+    const values = [`font-size: ${transformFontSizeValue(height / 5)};`, `font-weight: 500;`, `color: ${transformColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.beforeValueColor)};`];
+    return values.join('');
+});
+</script>
+
+<div class="price-stream-element" style={containerStyles}>
+  <div class="price-stream-element__price" style={priceCustomStyles}>
+    {currentPrice}
+  </div>
+  {#if data.price.salePrice && !model.excludeBeforePrice}
+    <div class="price-stream-element__sale-price">
+      <div class="price-stream-element__save" style={saveValueCustomStyles}>
+        {localization.saveValue(saveValue)}
+      </div>
+      <div class="price-stream-element__before-price" style={beforeValueCustomStyles}>
+        {localization.beforeValue(toPriceRepresentation(data.price.price, data.price.currency, model.includeCurrency || false))}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.price-stream-element {
+  display: flex;
+  gap: 4cqi;
+}
+.price-stream-element__sale-price {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: space-between;
+}</style>

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

@@ -0,0 +1,11 @@
+import { type IPriceStreamElementLocalization } from './price-stream-element-localization.svelte.js';
+import type { PriceStreamElementModel } from '../elements';
+import type { StreamLayoutProductModel } from '../models';
+type Props = {
+    model: PriceStreamElementModel;
+    data: StreamLayoutProductModel;
+    localization?: IPriceStreamElementLocalization;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,6 @@
+<script lang="ts">import { ShortVideoViewer } from '../../../short-videos/short-video-viewer';
+import { mapToShortVideoViewerModel } from '../models';
+let { data } = $props();
+</script>
+
+<ShortVideoViewer model={mapToShortVideoViewerModel(data)} autoplay={false} />

package/dist/streams/{components/product/cmp.product-component.svelte.d.ts → layout/element-views/cmp.short-video-stream-element.svelte.d.ts}

@@ -1,7 +1,6 @@
-import type { ProductComponentData } from './types';
+import { type StreamLayoutShortVideoModel } from '../models';
 type Props = {
-    model: ProductComponentData;
-    fitToContainer?: boolean;
+    data: StreamLayoutShortVideoModel;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -0,0 +1,45 @@
+<script lang="ts">import { Utils } from '../../../core/utils';
+import { StreamElementStyleDirection } from '../enums';
+import { transformNumericValue } from '../styles-transformer';
+let { model, parentContainerDirection } = $props();
+const styles = $derived.by(() => {
+    const values = [];
+    if (!model.value) {
+        values.push(`flex-grow: 1`);
+    }
+    else {
+        switch (parentContainerDirection) {
+            case StreamElementStyleDirection.Vertical: {
+                values.push(`height: ${transformNumericValue(model.value)};`);
+                values.push(`min-height: ${transformNumericValue(model.value)};`);
+                break;
+            }
+            case StreamElementStyleDirection.Horizontal: {
+                values.push(`width: ${transformNumericValue(model.value)};`);
+                values.push(`min-width: ${transformNumericValue(model.value)};`);
+                break;
+            }
+            default:
+                Utils.assertUnreachable(parentContainerDirection);
+        }
+    }
+    return values.join('');
+});
+</script>
+
+<div class="spacer-stream-element" style={styles}>&nbsp;</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.spacer-stream-element {
+  line-height: 0;
+}</style>

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

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

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

@@ -0,0 +1,60 @@
+<script lang="ts">import { 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 } = $props();
+const localization = $derived(new StreamElementLocalization(localizatoinInit));
+const shortVideoModel = $derived.by(() => {
+    if (!data) {
+        return null;
+    }
+    switch (data.type) {
+        case StreamComponentDataType.ShortVideo: {
+            return data.shortVideo;
+        }
+        default:
+            return null;
+    }
+});
+const imagesModel = $derived.by(() => {
+    if (!data) {
+        return null;
+    }
+    switch (data.type) {
+        case StreamComponentDataType.Images: {
+            return data.items;
+        }
+        default:
+            return null;
+    }
+});
+const productModel = $derived.by(() => {
+    if (!data) {
+        return null;
+    }
+    switch (data.type) {
+        case StreamComponentDataType.Product: {
+            return data.product;
+        }
+        default:
+            return null;
+    }
+});
+</script>
+
+{#if model.type === StreamElementType.Container}
+  <ContainerStreamElement model={model} data={data} localization={localizatoinInit} />
+{:else if model.type === StreamElementType.Spacer}
+  <SpacerStreamElement model={model} parentContainerDirection={constainerDirection} />
+{:else if model.type === StreamElementType.ImageRef}
+  <ImageRefStreamElement model={model} data={data} />
+{:else if model.type === StreamElementType.Images && imagesModel?.length}
+  <ImagesStreamElement model={model} data={imagesModel} />
+{:else if model.type === StreamElementType.Price && productModel}
+  <PriceStreamElement model={model} data={productModel} localization={localization.priceElementLocalization} />
+{:else if model.type === StreamElementType.ShortVideo && shortVideoModel}
+  <ShortVideoStreamElement data={shortVideoModel} />
+{:else if model.type === StreamElementType.Text}
+  <TextStreamElement model={model} />
+{:else if model.type === StreamElementType.TextRef}
+  <TextRefStreamElement model={model} data={data} />
+{/if}

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

@@ -0,0 +1,13 @@
+import { type IStreamElementLocalization } from './stream-element-localization.svelte';
+import type { StreamElementModel } from '../elements';
+import { StreamElementStyleDirection } from '../enums';
+import type { StreamSlotData } from '../slot-data';
+type Props = {
+    model: StreamElementModel;
+    data: StreamSlotData;
+    constainerDirection?: StreamElementStyleDirection;
+    localization?: IStreamElementLocalization;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,23 @@
+<script lang="ts">import { LineClamp } from '../../../ui/line-clamp';
+import { getStringValueByKey } from './data-by-key-accessor';
+import { generateTextStyles } from '../styles-transformer';
+let { model, data } = $props();
+const value = $derived.by(() => {
+    const values = [];
+    const value = getStringValueByKey(data, model.key);
+    if (model.valueBefore) {
+        values.push(model.valueBefore);
+    }
+    if (value) {
+        values.push(value);
+    }
+    if (model.valueAfter) {
+        values.push(model.valueAfter);
+    }
+    return values.join(' ');
+});
+</script>
+
+<div class="text-ref-stream-element" style={generateTextStyles(model.styles)}>
+  <LineClamp value={value} maxLines={model.styles?.maxLines || 'auto'} />
+</div>

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

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

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

@@ -0,0 +1,8 @@
+<script lang="ts">import { LineClamp } from '../../../ui/line-clamp';
+import { generateTextStyles } from '../styles-transformer';
+let { model } = $props();
+</script>
+
+<div class="text-stream-element" style={generateTextStyles(model.styles)}>
+  <LineClamp value={model.value} maxLines={model.styles?.maxLines || 'auto'} />
+</div>

package/dist/{ui/shadow-dom/cmp.shadow-dom.svelte.d.ts → streams/layout/element-views/cmp.text-stream-element.svelte.d.ts}

@@ -1,6 +1,6 @@
-import { DynamicComponentModel } from '../dynamic-component';
+import type { TextStreamElementModel } from '../elements';
 type Props = {
-    model: DynamicComponentModel;
+    model: TextStreamElementModel;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/streams/layout/element-views/data-by-key-accessor.d.ts

@@ -0,0 +1,3 @@
+import type { StreamSlotData } from '../slot-data';
+export declare const getStringValueByKey: (data: StreamSlotData, key: string) => string;
+export declare const getNumberValueByKey: (data: StreamSlotData, key: string) => number;

package/dist/streams/layout/element-views/data-by-key-accessor.js

@@ -0,0 +1,55 @@
+export const getStringValueByKey = (data, key) => {
+    const value = getValueByKey(data, key);
+    if (!value) {
+        return '';
+    }
+    if (typeof value === 'string') {
+        return value;
+    }
+    return value.toString();
+};
+export const getNumberValueByKey = (data, key) => {
+    const value = getValueByKey(data, key);
+    if (typeof value === 'number') {
+        return value;
+    }
+    return 0;
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const getValueByKey = (data, key) => {
+    // Remove leading #
+    const path = key.replace(/^#/, '');
+    // Split path into parts, handling indices in brackets
+    // Example: products[0].title -> ['products', '0', 'title']
+    const parts = [];
+    path.split('.').forEach((segment) => {
+        const regex = /^([^[\]]+)|\[(\d+)]$/g;
+        let match;
+        while ((match = regex.exec(segment)) !== null) {
+            if (match[1]) {
+                parts.push(match[1]);
+            }
+            else if (match[2]) {
+                parts.push(match[2]);
+            }
+        }
+    });
+    // Traverse the path parts
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let result = data;
+    for (const part of parts) {
+        if (!result) {
+            return undefined;
+        }
+        if (Array.isArray(result) && !isNaN(Number(part))) {
+            result = result[Number(part)];
+        }
+        else if (typeof result === 'object' && part in result) {
+            result = result[part];
+        }
+        else {
+            return undefined;
+        }
+    }
+    return result;
+};

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

@@ -0,0 +1,11 @@
+export { default as StreamElement } from './cmp.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';
+export { default as PriceStreamElement } from './cmp.price-stream-element.svelte';
+export { default as ShortVideoStreamElement } from './cmp.short-video-stream-element.svelte';
+export { default as SpacerStreamElement } from './cmp.spacer-stream-element.svelte';
+export { default as TextRefStreamElement } from './cmp.text-ref-stream-element.svelte';
+export { default as TextStreamElement } from './cmp.text-stream-element.svelte';
+export type { IStreamElementLocalization } from './stream-element-localization.svelte';
+export type { IPriceStreamElementLocalization } from './price-stream-element-localization.svelte';

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

@@ -0,0 +1,9 @@
+export { default as StreamElement } from './cmp.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';
+export { default as PriceStreamElement } from './cmp.price-stream-element.svelte';
+export { default as ShortVideoStreamElement } from './cmp.short-video-stream-element.svelte';
+export { default as SpacerStreamElement } from './cmp.spacer-stream-element.svelte';
+export { default as TextRefStreamElement } from './cmp.text-ref-stream-element.svelte';
+export { default as TextStreamElement } from './cmp.text-stream-element.svelte';

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

@@ -0,0 +1,9 @@
+export interface IPriceStreamElementLocalization {
+    saveValue?: (value: string | number) => string;
+    beforeValue?: (value: string) => string;
+}
+export declare class PriceStreamElementLocalization {
+    saveValue: (value: string | number) => string;
+    beforeValue: (value: string) => string;
+    constructor(init?: IPriceStreamElementLocalization);
+}

package/dist/streams/layout/element-views/price-stream-element-localization.svelte.js

@@ -0,0 +1,8 @@
+export class PriceStreamElementLocalization {
+    saveValue = $state((value) => `Save ${value}`);
+    beforeValue = $state((value) => `Before ${value}`);
+    constructor(init) {
+        this.saveValue = init?.saveValue ?? this.saveValue;
+        this.beforeValue = init?.beforeValue ?? this.beforeValue;
+    }
+}

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

@@ -0,0 +1,8 @@
+import type { IPriceStreamElementLocalization } from './price-stream-element-localization.svelte';
+export interface IStreamElementLocalization {
+    priceElementLocalization?: IPriceStreamElementLocalization;
+}
+export declare class StreamElementLocalization {
+    priceElementLocalization: IPriceStreamElementLocalization | undefined;
+    constructor(init?: IStreamElementLocalization);
+}

package/dist/streams/layout/element-views/stream-element-localization.svelte.js

@@ -0,0 +1,6 @@
+export class StreamElementLocalization {
+    priceElementLocalization = $state(undefined);
+    constructor(init) {
+        this.priceElementLocalization = init?.priceElementLocalization ?? this.priceElementLocalization;
+    }
+}

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

@@ -0,0 +1,51 @@
+import { StreamElementType, ImagesImagesElementMode } from './enums';
+import type { ImageStreamElementStyles, TextStreamElementStyles, ContainerStreamElementStyles, PriceStreamElementStyles } from './styles';
+export type StreamElementModel = ContainerStreamElementModel | ImageRefStreamElementModel | ImagesStreamElementModel | PriceStreamElementModel | SpacerStreamElementModel | ShortVideoStreamElementModel | TextStreamElementModel | TextRefStreamElementModel;
+export type ContainerStreamElementModel = {
+    type: StreamElementType.Container;
+    id?: string;
+    elements: StreamElementModel[];
+    customizable: boolean | null;
+    styles: ContainerStreamElementStyles | null;
+};
+export type ImagesStreamElementModel = {
+    type: StreamElementType.Images;
+    id?: string;
+    mode: ImagesImagesElementMode;
+};
+export type ImageRefStreamElementModel = {
+    type: StreamElementType.ImageRef;
+    id?: string;
+    key: string;
+    styles: ImageStreamElementStyles | null;
+};
+export type PriceStreamElementModel = {
+    type: StreamElementType.Price;
+    id?: string;
+    excludeBeforePrice: boolean | null;
+    includeCurrency: boolean | null;
+    styles: PriceStreamElementStyles | null;
+};
+export type ShortVideoStreamElementModel = {
+    type: StreamElementType.ShortVideo;
+    id?: string;
+};
+export type SpacerStreamElementModel = {
+    type: StreamElementType.Spacer;
+    id?: string;
+    value: number | null;
+};
+export type TextStreamElementModel = {
+    type: StreamElementType.Text;
+    id?: string;
+    value: string | null;
+    styles: TextStreamElementStyles | null;
+};
+export type TextRefStreamElementModel = {
+    type: StreamElementType.TextRef;
+    id?: string;
+    key: string;
+    valueBefore: string | null;
+    valueAfter: string | null;
+    styles: TextStreamElementStyles | null;
+};

package/dist/streams/layout/elements.js

@@ -0,0 +1 @@
+import { StreamElementType, ImagesImagesElementMode } from './enums';

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

@@ -0,0 +1,45 @@
+export declare enum StreamComponentDataType {
+    Images = "IMAGES",
+    ShortVideo = "SHORT_VIDEO",
+    Product = "PRODUCT"
+}
+export declare enum StreamElementType {
+    Container = "CONTAINER",
+    ImageRef = "IMAGE_REF",
+    Images = "IMAGES",
+    Price = "PRICE",
+    Spacer = "SPACER",
+    ShortVideo = "SHORT_VIDEO",
+    Text = "TEXT",
+    TextRef = "TEXT_REF"
+}
+export declare enum ImagesImagesElementMode {
+    Single = "SINGLE",
+    Gallery = "GALLERY",
+    Slider = "SLIDER"
+}
+export declare enum StreamElementStyleMediaFit {
+    Cover = "COVER",
+    Contain = "CONTAIN"
+}
+export declare enum StreamElementStyleHorizontalAlign {
+    Left = "LEFT",
+    Center = "CENTER",
+    Right = "RIGHT"
+}
+export declare enum StreamElementStyleFontWeight {
+    Regular = "REGULAR",
+    SemiBold = "SEMI_BOLD",
+    Bold = "BOLD"
+}
+export declare enum StreamElementStyleFontFamily {
+    System = "SYSTEM"
+}
+export declare enum StreamElementStyleDirection {
+    Horizontal = "HORIZONTAL",
+    Vertical = "VERTICAL"
+}
+export declare enum StreamCssValueType {
+    DDU = "DDU",
+    Pct = "PCT"
+}

package/dist/streams/layout/enums.js

@@ -0,0 +1,54 @@
+export var StreamComponentDataType;
+(function (StreamComponentDataType) {
+    StreamComponentDataType["Images"] = "IMAGES";
+    StreamComponentDataType["ShortVideo"] = "SHORT_VIDEO";
+    StreamComponentDataType["Product"] = "PRODUCT";
+})(StreamComponentDataType || (StreamComponentDataType = {}));
+export var StreamElementType;
+(function (StreamElementType) {
+    StreamElementType["Container"] = "CONTAINER";
+    StreamElementType["ImageRef"] = "IMAGE_REF";
+    StreamElementType["Images"] = "IMAGES";
+    StreamElementType["Price"] = "PRICE";
+    StreamElementType["Spacer"] = "SPACER";
+    StreamElementType["ShortVideo"] = "SHORT_VIDEO";
+    StreamElementType["Text"] = "TEXT";
+    StreamElementType["TextRef"] = "TEXT_REF";
+})(StreamElementType || (StreamElementType = {}));
+export var ImagesImagesElementMode;
+(function (ImagesImagesElementMode) {
+    ImagesImagesElementMode["Single"] = "SINGLE";
+    ImagesImagesElementMode["Gallery"] = "GALLERY";
+    ImagesImagesElementMode["Slider"] = "SLIDER";
+})(ImagesImagesElementMode || (ImagesImagesElementMode = {}));
+export var StreamElementStyleMediaFit;
+(function (StreamElementStyleMediaFit) {
+    StreamElementStyleMediaFit["Cover"] = "COVER";
+    StreamElementStyleMediaFit["Contain"] = "CONTAIN";
+})(StreamElementStyleMediaFit || (StreamElementStyleMediaFit = {}));
+export var StreamElementStyleHorizontalAlign;
+(function (StreamElementStyleHorizontalAlign) {
+    StreamElementStyleHorizontalAlign["Left"] = "LEFT";
+    StreamElementStyleHorizontalAlign["Center"] = "CENTER";
+    StreamElementStyleHorizontalAlign["Right"] = "RIGHT";
+})(StreamElementStyleHorizontalAlign || (StreamElementStyleHorizontalAlign = {}));
+export var StreamElementStyleFontWeight;
+(function (StreamElementStyleFontWeight) {
+    StreamElementStyleFontWeight["Regular"] = "REGULAR";
+    StreamElementStyleFontWeight["SemiBold"] = "SEMI_BOLD";
+    StreamElementStyleFontWeight["Bold"] = "BOLD";
+})(StreamElementStyleFontWeight || (StreamElementStyleFontWeight = {}));
+export var StreamElementStyleFontFamily;
+(function (StreamElementStyleFontFamily) {
+    StreamElementStyleFontFamily["System"] = "SYSTEM";
+})(StreamElementStyleFontFamily || (StreamElementStyleFontFamily = {}));
+export var StreamElementStyleDirection;
+(function (StreamElementStyleDirection) {
+    StreamElementStyleDirection["Horizontal"] = "HORIZONTAL";
+    StreamElementStyleDirection["Vertical"] = "VERTICAL";
+})(StreamElementStyleDirection || (StreamElementStyleDirection = {}));
+export var StreamCssValueType;
+(function (StreamCssValueType) {
+    StreamCssValueType["DDU"] = "DDU";
+    StreamCssValueType["Pct"] = "PCT";
+})(StreamCssValueType || (StreamCssValueType = {}));

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

@@ -0,0 +1,19 @@
+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';
+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 { parseToStreamLayout, stringifyToStreamLayoutInput } from './serializer';
+export declare const getAllowedDataTypesForSlot: (slot: StreamSlot) => StreamComponentDataType[];
+export declare const getSingleShortVideoFromLayout: (layout: StreamLayout) => StreamLayoutShortVideoModel | null;
+export type ElementTypeToStyles = {
+    [StreamElementType.Container]: ContainerStreamElementStyles;
+    [StreamElementType.Price]: PriceStreamElementStyles;
+    [StreamElementType.ImageRef]: ImageStreamElementStyles;
+    [StreamElementType.Text]: TextStreamElementStyles;
+    [StreamElementType.TextRef]: TextStreamElementStyles;
+};

package/dist/streams/layout/index.js

@@ -0,0 +1,15 @@
+import { StreamComponentDataType, StreamElementType } from './enums';
+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 { parseToStreamLayout, stringifyToStreamLayoutInput } from './serializer';
+export const getAllowedDataTypesForSlot = (slot) => {
+    return slot.components.flatMap((c) => c.dataType);
+};
+export const getSingleShortVideoFromLayout = (layout) => {
+    if (layout.slots.length === 1 && layout.slots[0].data?.type === StreamComponentDataType.ShortVideo && layout.slots[0].data.shortVideo) {
+        return layout.slots[0].data.shortVideo;
+    }
+    return null;
+};

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

@@ -0,0 +1,13 @@
+import type { StreamSlot, StreamSlotInput, StreamSlotTemplate } from './slot';
+import type { StreamLayoutStyles } from './styles';
+export type StreamLayoutTemplate = {
+    styles: StreamLayoutStyles | null;
+    slots: StreamSlotTemplate[];
+};
+export type StreamLayoutInput = Omit<StreamLayoutTemplate, 'slots'> & {
+    slots: StreamSlotInput[];
+};
+export type StreamLayout = Omit<StreamLayoutTemplate, 'slots'> & {
+    id?: string;
+    slots: StreamSlot[];
+};

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

@@ -0,0 +1,6 @@
+export { mapToShortVideoViewerModel } from './mapper';
+export type { StreamLayoutBlobModel } from './stream-layout-blob-model';
+export type { StreamLayoutMediaItemModel } from './stream-layout-media-item-model';
+export type { StreamLayoutPostHeaderModel } from './stream-layout-post-header-model';
+export type { StreamLayoutProductModel } from './stream-layout-product-model';
+export type { StreamLayoutShortVideoModel, StreamLayoutShortVideoProductModel, StreamLayoutShortVideoAdModel } from './stream-layout-short-video-model';