@streamscloud/embeddable 2.1.0 → 2.1.1

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

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

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

@@ -1,51 +0,0 @@
-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

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

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

@@ -1,45 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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/layout.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,6 +0,0 @@
-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';

package/dist/streams/layout/models/index.js

@@ -1 +0,0 @@
-export { mapToShortVideoViewerModel } from './mapper';

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

@@ -1,3 +0,0 @@
-import type { ShortVideoViewerModel } from '../../../short-videos/short-video-viewer';
-import type { StreamLayoutShortVideoModel } from '../models/stream-layout-short-video-model';
-export declare const mapToShortVideoViewerModel: (model: StreamLayoutShortVideoModel) => ShortVideoViewerModel;

package/dist/streams/layout/models/mapper.js

@@ -1,62 +0,0 @@
-import { MediaType } from '../../../core/enums';
-export const mapToShortVideoViewerModel = (model) => {
-    return {
-        id: model.id,
-        media: model.media.type === MediaType.Image
-            ? { isImage: true, url: model.media.url }
-            : {
-                isImage: false,
-                url: model.media.url,
-                thumbnailUrl: model.media.thumbnailUrl
-            },
-        text: model.text,
-        heading: {
-            image: model.header.sourceImage,
-            name: model.header.sourceName,
-            displayDate: model.header.postDisplayDate,
-            viewsCount: model.header.postViewsCount
-        },
-        ad: model.ad ? mapToAdViewModel(model.ad) : null,
-        products: model.products.map(mapToProductCardModel)
-        // uncomment if you want to test many products behavior
-        /*.flatMap((x) => [
-          { ...x, id: x.id + '1' },
-          { ...x, id: x.id + '2' },
-          { ...x, id: x.id + '3' },
-          { ...x, id: x.id + '4' },
-          { ...x, id: x.id + '5' },
-          { ...x, id: x.id + '6' },
-          { ...x, id: x.id + '7' },
-          { ...x, id: x.id + '8' },
-          { ...x, id: x.id + '9' },
-          { ...x, id: x.id + '10' },
-          { ...x, id: x.id + '11' },
-          { ...x, id: x.id + '12' },
-          { ...x, id: x.id + '13' },
-          { ...x, id: x.id + '14' },
-          { ...x, id: x.id + '15' }
-        ])*/
-    };
-};
-const mapToAdViewModel = (model) => {
-    return {
-        id: model.id,
-        image: model.image,
-        title: model.title,
-        description: model.description,
-        buttonText: model.buttonText,
-        buttonUrl: model.buttonUrl,
-        openLinkInNewWindow: model.openLinkInNewWindow
-    };
-};
-const mapToProductCardModel = (model) => {
-    return {
-        id: model.id,
-        title: model.title,
-        image: model.image,
-        link: model.link,
-        currency: model.currency,
-        price: model.price,
-        salePrice: model.salePrice
-    };
-};

package/dist/streams/layout/models/stream-layout-blob-model.d.ts

@@ -1,4 +0,0 @@
-export type StreamLayoutBlobModel = {
-    id: string;
-    url: string;
-};

package/dist/streams/layout/models/stream-layout-blob-model.js

@@ -1 +0,0 @@
-export {};

package/dist/streams/layout/models/stream-layout-media-item-model.d.ts

@@ -1,6 +0,0 @@
-import { MediaType } from '../../..';
-export type StreamLayoutMediaItemModel = {
-    url: string;
-    thumbnailUrl: string | null;
-    type: MediaType;
-};

package/dist/streams/layout/models/stream-layout-media-item-model.js

@@ -1 +0,0 @@
-import { MediaType } from '../../..';

package/dist/streams/layout/models/stream-layout-post-header-model.d.ts

@@ -1,11 +0,0 @@
-import type { PostSourceType } from '$gql/types';
-export type StreamLayoutPostHeaderModel = {
-    sourceId: string;
-    sourceName: string;
-    sourceImage: string;
-    sourceHandle: string;
-    sourceType: PostSourceType;
-    postDisplayDate: string;
-    postViewsCount: number;
-    sourceIsRemoved: boolean;
-};

package/dist/streams/layout/models/stream-layout-post-header-model.js

@@ -1 +0,0 @@
-export {};

package/dist/streams/layout/models/stream-layout-product-model.d.ts

@@ -1,19 +0,0 @@
-import type { Currency } from '../../../core/enums';
-export type StreamLayoutProductModel = {
-    id: string;
-    title: string;
-    description: string | null;
-    image: string | null;
-    link: string | null;
-    price: StreamLayoutProductPriceModel;
-};
-type StreamLayoutProductPriceModel = {
-    price: number;
-    currency: Currency;
-    salePrice: number | null;
-    currentPriceValue: string;
-    beforePriceValue: string | null;
-    saveValue: string | null;
-    savePercentValue: string | null;
-};
-export {};

package/dist/streams/layout/models/stream-layout-product-model.js

@@ -1 +0,0 @@
-export {};

package/dist/streams/layout/models/stream-layout-short-video-model.d.ts

@@ -1,31 +0,0 @@
-import type { Currency } from '../../../core/enums';
-import type { StreamLayoutMediaItemModel } from './stream-layout-media-item-model';
-import type { StreamLayoutPostHeaderModel } from './stream-layout-post-header-model';
-export type StreamLayoutShortVideoModel = {
-    id: string;
-    media: StreamLayoutMediaItemModel;
-    text: string | null;
-    header: StreamLayoutPostHeaderModel;
-    enableSocialInteractions: boolean;
-    bookmarksCount: number;
-    products: StreamLayoutShortVideoProductModel[];
-    ad: StreamLayoutShortVideoAdModel | null;
-};
-export type StreamLayoutShortVideoAdModel = {
-    id: string;
-    image: string | null;
-    title: string;
-    description: string | null;
-    buttonText: string | null;
-    buttonUrl: string | null;
-    openLinkInNewWindow: boolean | null;
-};
-export type StreamLayoutShortVideoProductModel = {
-    id: string;
-    title: string;
-    image: string | null;
-    link: string | null;
-    price: number;
-    currency: Currency;
-    salePrice: number | null;
-};

package/dist/streams/layout/models/stream-layout-short-video-model.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,3 +0,0 @@
-import type { StreamLayout } from './layout';
-export declare const parseToStreamLayout: (value: string) => StreamLayout;
-export declare const stringifyToStreamLayoutInput: (layout: StreamLayout) => string;

package/dist/streams/layout/serializer.js

@@ -1,6 +0,0 @@
-export const parseToStreamLayout = (value) => {
-    return JSON.parse(value);
-};
-export const stringifyToStreamLayoutInput = (layout) => {
-    return JSON.stringify(layout);
-};

package/dist/streams/layout/slot-data-input.d.ts

@@ -1,14 +0,0 @@
-import { StreamComponentDataType } from './enums';
-export type StreamSlotDataInput = ImagesStreamSlotDataInput | ProductStreamSlotDataInput | ShortVideoStreamSlotDataInput;
-export interface ImagesStreamSlotDataInput {
-    type: StreamComponentDataType.Images;
-    ids: string[];
-}
-export interface ProductStreamSlotDataInput {
-    type: StreamComponentDataType.Product;
-    id: string;
-}
-export interface ShortVideoStreamSlotDataInput {
-    type: StreamComponentDataType.ShortVideo;
-    id: string;
-}

package/dist/streams/layout/slot-data-input.js

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

package/dist/streams/layout/slot-data.d.ts

@@ -1,18 +0,0 @@
-import { StreamComponentDataType } from './enums';
-import type { StreamLayoutBlobModel, StreamLayoutProductModel, StreamLayoutShortVideoModel } from './models';
-export type StreamSlotData = ImagesStreamSlotData | ProductStreamSlotData | ShortVideoStreamSlotData;
-export type ImagesStreamSlotData = {
-    type: StreamComponentDataType.Images;
-    ids: string[];
-    items: StreamLayoutBlobModel[];
-};
-export type ProductStreamSlotData = {
-    type: StreamComponentDataType.Product;
-    id: string;
-    product: StreamLayoutProductModel | null;
-};
-export type ShortVideoStreamSlotData = {
-    type: StreamComponentDataType.ShortVideo;
-    id: string;
-    shortVideo: StreamLayoutShortVideoModel | null;
-};

package/dist/streams/layout/slot-data.js

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

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

@@ -1,16 +0,0 @@
-import type { StreamComponent } from './component';
-import type { StreamSlotData } from './slot-data';
-import type { StreamSlotDataInput } from './slot-data-input';
-export type StreamSlotTemplate = {
-    top: number;
-    left: number;
-    width: number;
-    height: number;
-    components: StreamComponent[];
-};
-export type StreamSlotInput = StreamSlotTemplate & {
-    data: StreamSlotDataInput | null;
-};
-export type StreamSlot = StreamSlotTemplate & {
-    data: StreamSlotData | null;
-};

package/dist/streams/layout/slot.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,13 +0,0 @@
-import { StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleHorizontalAlign } from './enums';
-import type { 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 generateTextStyles: (styles: Partial<TextStreamElementStyles> | null) => string;
-export declare const generateImageStyles: (styles: Partial<ImageStreamElementStyles> | null) => string;
-export declare const mapFontFamily: (value: StreamElementStyleFontFamily | null | undefined) => string;
-export declare const mapFontWeight: (value: StreamElementStyleFontWeight | null | undefined) => "normal" | "600" | "500";
-export declare const mapTextAlign: (value: StreamElementStyleHorizontalAlign | null | undefined) => "center" | "left" | "right";
-export declare const mapFlexJustifyContent: (value: StreamElementStyleHorizontalAlign | null | undefined) => "center" | "flex-start" | "flex-end";
-export declare const transformFontSizeValue: (value: number | null | undefined) => string;
-export declare const transformNumericValue: (value: number | null | undefined, fallback?: string) => string;
-export declare const transformColorValue: (value: string | null | undefined) => string;

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

@@ -1,140 +0,0 @@
-import { Utils } from '../../core/utils';
-import { StreamCssValueType, StreamElementStyleDirection, StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleMediaFit, StreamElementStyleHorizontalAlign } from './enums';
-export const generateStreamLayoutStyles = (styles) => {
-    if (!styles) {
-        return '';
-    }
-    const values = [`background-color: ${transformColorValue(styles.backgroundColor)};`, `font-family: ${mapFontFamily(styles.fontFamily)};`];
-    return values.join('');
-};
-export const generateContainerStyles = (styles) => {
-    styles = styles || {};
-    const values = [
-        'display: flex;',
-        'flex-direction: column;',
-        `width: ${transformCssValue(styles.width, 'auto')};`,
-        `height: ${transformCssValue(styles.height, 'fit-content')};`,
-        `aspect-ratio: ${styles.aspectRatio || 'auto'};`,
-        `gap: ${transformNumericValue(styles.gap)};`,
-        `padding-top: ${transformNumericValue(styles.paddingTop)};`,
-        `padding-right: ${transformNumericValue(styles.paddingRight)};`,
-        `padding-bottom: ${transformNumericValue(styles.paddingBottom)};`,
-        `padding-left: ${transformNumericValue(styles.paddingLeft)};`,
-        `background-color: ${transformColorValue(styles.backgroundColor)};`,
-        `border-width: ${styles.borderColor ? '1px' : '0'};`,
-        `border-radius: ${transformNumericValue(styles.borderRadius)};`,
-        `border-color: ${transformColorValue(styles.borderColor)};`,
-        `overflow: ${styles.borderRadius ? 'hidden' : 'visible'};`
-    ];
-    if (styles.direction) {
-        values.push(`display: flex;`);
-        values.push(`flex-direction: ${styles.direction === StreamElementStyleDirection.Horizontal ? 'row' : 'column'};`);
-    }
-    return values.join('');
-};
-export const generateTextStyles = (styles) => {
-    styles = styles || {};
-    const values = [
-        `font-family: ${mapFontFamily(styles.fontFamily)};`,
-        `font-size: ${transformFontSizeValue(styles.fontSize)};`,
-        `font-weight: ${mapFontWeight(styles.fontWeight)};`,
-        `line-height: ${transformNumericValue(styles.lineHeight, '1.2')};`,
-        `text-align: ${mapTextAlign(styles.textAlign)};`,
-        `color: ${transformColorValue(styles.color)};`
-    ];
-    return values.join('');
-};
-export const generateImageStyles = (styles) => {
-    styles = styles || {};
-    const imageStyles = [`object-fit: ${mapMediaFit(styles.mediaFit)};`];
-    return imageStyles.join('');
-};
-export const mapFontFamily = (value) => {
-    switch (value) {
-        case StreamElementStyleFontFamily.System:
-            return 'inherit';
-        default: {
-            return 'inherit';
-        }
-    }
-};
-export const mapFontWeight = (value) => {
-    switch (value) {
-        case StreamElementStyleFontWeight.Bold:
-            return '600';
-        case StreamElementStyleFontWeight.SemiBold:
-            return '500';
-        default: {
-            return 'normal';
-        }
-    }
-};
-export const mapTextAlign = (value) => {
-    switch (value) {
-        case StreamElementStyleHorizontalAlign.Left:
-            return 'left';
-        case StreamElementStyleHorizontalAlign.Center:
-            return 'center';
-        case StreamElementStyleHorizontalAlign.Right:
-            return 'right';
-        default: {
-            return 'left';
-        }
-    }
-};
-export const mapFlexJustifyContent = (value) => {
-    switch (value) {
-        case StreamElementStyleHorizontalAlign.Left:
-            return 'flex-start';
-        case StreamElementStyleHorizontalAlign.Center:
-            return 'center';
-        case StreamElementStyleHorizontalAlign.Right:
-            return 'flex-end';
-        default: {
-            return 'flex-start';
-        }
-    }
-};
-const mapMediaFit = (value) => {
-    switch (value) {
-        case StreamElementStyleMediaFit.Cover:
-            return 'cover';
-        case StreamElementStyleMediaFit.Contain:
-            return 'contain';
-        default: {
-            return 'cover';
-        }
-    }
-};
-const transformCssValue = (value, fallback = '0') => {
-    if (value === null || value === undefined) {
-        return fallback;
-    }
-    switch (value.type) {
-        case StreamCssValueType.DDU:
-            return transformNumericValue(value.value, fallback);
-        case StreamCssValueType.Pct:
-            return `${value.value}%`;
-        default:
-            Utils.assertUnreachable(value);
-    }
-};
-export const transformFontSizeValue = (value) => {
-    if (value === null || value === undefined) {
-        value = 16;
-    }
-    return transformNumericValue(value);
-};
-const baseContainerWidth = 400;
-export const transformNumericValue = (value, fallback = '0') => {
-    if (value === null || value === undefined) {
-        return fallback;
-    }
-    return `${(value / baseContainerWidth) * 100}cqi`;
-};
-export const transformColorValue = (value) => {
-    if (value === null || value === undefined) {
-        return 'transparent';
-    }
-    return value;
-};