@streamscloud/embeddable 15.0.1 → 15.0.2

package/dist/media-center/media-center/streams-in-category/streams-in-category-panel.svelte

@@ -80,19 +80,23 @@ let { handler, on } = $props();
   gap: 2rem 1.25rem;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   /* Set 'container-type: inline-size;' to reference container*/
-  /* Set 'container-type: inline-size;' to reference container*/
-  /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 992px) {
   .streams-in-category__section-content {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }
+.streams-in-category__section-content {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 768px) {
   .streams-in-category__section-content {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
+.streams-in-category__section-content {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 576px) {
   .streams-in-category__section-content {
     grid-template-columns: repeat(2, minmax(0, 1fr));

package/dist/media-page/cmp.media-page.svelte

@@ -1,19 +1,10 @@
-<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { MediaCenterProxy } from '../media-center/media-center';
+<script lang="ts">import { MediaCenterProxy } from '../media-center/media-center';
 import { MediaCenterSettings } from '../media-center/media-center/media-center-settings.svelte';
 import { CloseOrchestrator } from '../ui/player/close-orchestrator';
 import { createShadowRoot } from '../ui/shadow-dom';
-import { mount, unmount } from 'svelte';
+import { mount, unmount, untrack } from 'svelte';
 let { dataProvider, settings, dynamicActions } = $props();
-const settingsHolder = new MediaCenterSettings(settings);
+const settingsHolder = untrack(() => new MediaCenterSettings(settings));
 $effect(() => {
     settingsHolder.update(settings);
 });
@@ -27,9 +18,9 @@ const initHost = (node) => {
             modeProps: { mode: 'default' },
             dynamicActions,
             closeOrchestrator: new CloseOrchestrator({
-                closeFn: () => __awaiter(void 0, void 0, void 0, function* () {
-                    yield unmount(mounted);
-                }),
+                closeFn: async () => {
+                    await unmount(mounted);
+                },
                 canClose: false
             })
         }

package/dist/posts/controls/post-actions-generator.svelte.js

@@ -1,9 +1,10 @@
 import { PostActionsHandler } from './post-actions-handler.svelte';
+import { SvelteMap } from 'svelte/reactivity';
 export class PostActionsGenerator {
     socialInteractionsHandler;
     sharingHandler;
     callbacks;
-    handlers = new Map();
+    handlers = new SvelteMap();
     constructor(init) {
         this.socialInteractionsHandler = init.socialInteractionsHandler ?? null;
         this.sharingHandler = init.sharingHandler ?? null;

package/dist/posts/post-viewer/attachments-horizontal.svelte

@@ -29,33 +29,30 @@ const attachmentsToShow = $derived.by(() => {
     }));
     const ads = model.attachments.ads
         .filter((a) => !!a.image)
-        .map((a) => {
-        var _a;
-        return ({
-            isAd: true,
-            image: a.image,
-            link: ((_a = a.ctaButton) === null || _a === void 0 ? void 0 : _a.url) ? enrichAdLinkWithTracking({ link: a.ctaButton.url, adId: a.id, trackingParams }) : null,
-            productId: null,
-            adId: a.id,
-            price: a.price && a.currency
-                ? {
-                    amount: a.price,
-                    currency: a.currency,
-                    label: a.priceInfoLabel
-                }
-                : null,
-            title: a.title,
-            description: a.description
-        });
-    });
+        .map((a) => ({
+        isAd: true,
+        image: a.image,
+        link: a.ctaButton?.url ? enrichAdLinkWithTracking({ link: a.ctaButton.url, adId: a.id, trackingParams }) : null,
+        productId: null,
+        adId: a.id,
+        price: a.price && a.currency
+            ? {
+                amount: a.price,
+                currency: a.currency,
+                label: a.priceInfoLabel
+            }
+            : null,
+        title: a.title,
+        description: a.description
+    }));
     const result = [...ads, ...products];
     return result;
 });
 const handleAttachmentClick = (attachment) => {
-    if (attachment.productId && (on === null || on === void 0 ? void 0 : on.productClick)) {
+    if (attachment.productId && on?.productClick) {
         on.productClick(attachment.productId);
     }
-    if (attachment.adId && (on === null || on === void 0 ? void 0 : on.adClick)) {
+    if (attachment.adId && on?.adClick) {
         on.adClick(attachment.adId);
     }
     if (attachment.link) {
@@ -65,7 +62,7 @@ const handleAttachmentClick = (attachment) => {
 let attachmentElements = $state({});
 let observer = null;
 $effect(() => {
-    if (((on === null || on === void 0 ? void 0 : on.productImpression) || (on === null || on === void 0 ? void 0 : on.adImpression)) && Object.keys(attachmentElements).length > 0) {
+    if ((on?.productImpression || on?.adImpression) && Object.keys(attachmentElements).length > 0) {
         if (observer) {
             observer.disconnect();
         }
@@ -74,19 +71,19 @@ $effect(() => {
                 if (entry.isIntersecting && entry.intersectionRatio >= 0.1) {
                     const productId = entry.target.getAttribute('data-product-id');
                     const adId = entry.target.getAttribute('data-ad-id');
-                    if (productId && (on === null || on === void 0 ? void 0 : on.productImpression)) {
+                    if (productId && on?.productImpression) {
                         on.productImpression(productId, model.id);
                     }
-                    else if (adId && (on === null || on === void 0 ? void 0 : on.adImpression)) {
+                    else if (adId && on?.adImpression) {
                         on.adImpression(adId);
                     }
-                    observer === null || observer === void 0 ? void 0 : observer.unobserve(entry.target); // Only track once per session
+                    observer?.unobserve(entry.target); // Only track once per session
                 }
             });
         }, { threshold: 0.1 });
         Object.entries(attachmentElements).forEach(([key, element]) => {
             if (element && (key.startsWith('product-') || key.startsWith('ad-'))) {
-                observer === null || observer === void 0 ? void 0 : observer.observe(element);
+                observer?.observe(element);
             }
         });
     }

package/dist/posts/post-viewer/media/post-media.svelte

@@ -47,6 +47,11 @@ let { id, media, locale, autoplay = 'on-appearance', on } = $props();
 }
 .post-media {
   --_post-media--background-color: #ffffff;
+}
+:global([data-theme='dark']) .post-media {
+  --_post-media--background-color: #000000;
+}
+.post-media {
   width: 100%;
   min-width: 100%;
   max-width: 100%;
@@ -55,9 +60,6 @@ let { id, media, locale, autoplay = 'on-appearance', on } = $props();
   max-height: 100%;
   background-color: rgb(from var(--_post-media--background-color) r g b/60%);
 }
-:global([data-theme="dark"]) .post-media {
-  --_post-media--background-color: #000000;
-}
 .post-media--fit {
   --video--media-fit: contain;
   --image--object-fit: contain;

package/dist/posts/posts-player/cmp.posts-player.svelte

@@ -1,13 +1,4 @@
-<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { CloseOrchestrator } from '../../ui/player/close-orchestrator';
+<script lang="ts">import { CloseOrchestrator } from '../../ui/player/close-orchestrator';
 import { createShadowRoot } from '../../ui/shadow-dom';
 import { default as PostsPlayerProxy } from './posts-player-proxy.svelte';
 import { mount, unmount } from 'svelte';
@@ -23,9 +14,9 @@ const initHost = (node) => {
             playerSettings,
             analyticsHandler,
             closeOrchestrator: new CloseOrchestrator({
-                closeFn: () => __awaiter(void 0, void 0, void 0, function* () {
-                    yield unmount(mounted);
-                }),
+                closeFn: async () => {
+                    await unmount(mounted);
+                },
                 canClose: false
             }),
             on

package/dist/posts/posts-player/posts-player-proxy.svelte

@@ -9,10 +9,9 @@ const handleBackgroundImagedLoaded = (url) => {
     backgroundImageUrl = url;
 };
 $effect(() => {
-    void (playerSettings === null || playerSettings === void 0 ? void 0 : playerSettings.theme);
+    void playerSettings?.theme;
     untrack(() => {
-        var _a;
-        Theme.set((_a = playerSettings === null || playerSettings === void 0 ? void 0 : playerSettings.theme) !== null && _a !== void 0 ? _a : 'dark');
+        Theme.set(playerSettings?.theme ?? 'dark');
     });
 });
 </script>

package/dist/posts/posts-player/posts-player-view.svelte

@@ -1,13 +1,4 @@
-<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { PostType } from '../../core/enums';
+<script lang="ts">import { PostType } from '../../core/enums';
 import { preloadImage } from '../../core/image-preloader';
 import { PostAttachments } from '../attachments';
 import { PostActionsGenerator } from '../controls';
@@ -20,19 +11,20 @@ import { initBufferFromProvider } from '../../ui/player/providers/service';
 import IconDelete from '@fluentui/svg-icons/icons/delete_32_regular.svg?raw';
 import IconEdit from '@fluentui/svg-icons/icons/edit_32_regular.svg?raw';
 import { untrack } from 'svelte';
+import { SvelteMap } from 'svelte/reactivity';
 let { dataProvider, socialInteractionsHandler, sharingHandler, playerSettings, analyticsHandler, managementActions, closeOrchestrator, on } = $props();
 let buffer = $state.raw(null);
-let mappedPostsCache = new Map();
+let mappedPostsCache = new SvelteMap();
 $effect(() => {
     void dataProvider;
     untrack(() => {
         contentPlayerConfig.playerBuffer = null;
         buffer = null;
-        mappedPostsCache = new Map();
+        mappedPostsCache = new SvelteMap();
         initBuffer(dataProvider);
     });
 });
-const initBuffer = (dataProvider) => __awaiter(void 0, void 0, void 0, function* () {
+const initBuffer = async (dataProvider) => {
     let newBuffer;
     if (dataProvider.type === 'buffer') {
         newBuffer = dataProvider.buffer;
@@ -40,67 +32,64 @@ const initBuffer = (dataProvider) => __awaiter(void 0, void 0, void 0, function*
     else {
         newBuffer = initBufferFromProvider(dataProvider.provider);
     }
-    yield newBuffer.ensureWarmedUp();
-    if (newBuffer.loaded.length && (on === null || on === void 0 ? void 0 : on.backgroundImageLoaded)) {
+    await newBuffer.ensureWarmedUp();
+    if (newBuffer.loaded.length && on?.backgroundImageLoaded) {
         const coverUrl = getPostCoverImage(newBuffer.loaded[0]);
-        yield preloadImage(coverUrl);
+        await preloadImage(coverUrl);
         on.backgroundImageLoaded(coverUrl);
     }
     buffer = newBuffer;
     contentPlayerConfig.playerBuffer = newBuffer;
-});
+};
 const getLoadedItemById = (id) => {
     if (!buffer) {
         return null;
     }
     return buffer.loaded.find((item) => item.id === id) || null;
 };
-const contentPlayerConfig = new PlayerConfig({
+const contentPlayerConfig = untrack(() => new PlayerConfig({
     playerBuffer: null,
     settings: new PlayerSettings(playerSettings),
     closeOrchestrator,
     playerSliderCallbacks: {
         itemActivated: (id) => {
-            var _a;
             const post = getLoadedItemById(id);
             if (!post) {
                 return;
             }
-            if (on === null || on === void 0 ? void 0 : on.backgroundImageLoaded) {
+            if (on?.backgroundImageLoaded) {
                 on.backgroundImageLoaded(getPostCoverImage(post));
             }
             if (post.postType === PostType.ShortVideo) {
-                analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoView(id);
+                analyticsHandler?.trackShortVideoView(id);
             }
             else if (post.postType) {
-                analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackPostOpened(post.postType, id);
+                analyticsHandler?.trackPostOpened(post.postType, id);
             }
-            (_a = on === null || on === void 0 ? void 0 : on.postActivated) === null || _a === void 0 ? void 0 : _a.call(on, id);
+            on?.postActivated?.(id);
         }
     }
-});
-const postActionsGenerator = new PostActionsGenerator({
+}));
+const postActionsGenerator = untrack(() => new PostActionsGenerator({
     socialInteractionsHandler,
     sharingHandler,
     on: { attachmentClicked: () => (contentPlayerConfig.uiManager.attachmentsCollapsed = !contentPlayerConfig.uiManager.attachmentsCollapsed) }
-});
+}));
 const onProductClick = (id, postId) => {
-    var _a;
-    if (((_a = getLoadedItemById(postId)) === null || _a === void 0 ? void 0 : _a.postType) === PostType.ShortVideo) {
-        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductClick(id, postId);
+    if (getLoadedItemById(postId)?.postType === PostType.ShortVideo) {
+        analyticsHandler?.trackShortVideoProductClick(id, postId);
     }
 };
 const onProductImpression = (id, postId) => {
-    var _a;
-    if (((_a = getLoadedItemById(postId)) === null || _a === void 0 ? void 0 : _a.postType) === PostType.ShortVideo) {
-        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductImpression(id, postId);
+    if (getLoadedItemById(postId)?.postType === PostType.ShortVideo) {
+        analyticsHandler?.trackShortVideoProductImpression(id, postId);
     }
 };
 const onAdClick = (id) => {
-    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdClick(id);
+    analyticsHandler?.trackAdClick(id);
 };
 const onAdImpression = (id) => {
-    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdImpression(id);
+    analyticsHandler?.trackAdImpression(id);
 };
 const itemAsPostModel = (item) => {
     if (mappedPostsCache.has(item.id)) {
@@ -111,36 +100,36 @@ const itemAsPostModel = (item) => {
     return postModel;
 };
 const currentItemActions = $derived.by(() => {
-    if (!(buffer === null || buffer === void 0 ? void 0 : buffer.current)) {
+    if (!buffer?.current) {
         return [];
     }
     const result = [];
     const postModel = itemAsPostModel(buffer.current);
     const handler = postActionsGenerator.getPostActionsHandler(postModel);
     result.push(...handler.actions);
-    if ((managementActions === null || managementActions === void 0 ? void 0 : managementActions.editPost) && postModel.postType !== PostType.Article) {
+    if (managementActions?.editPost && postModel.postType !== PostType.Article) {
         result.push({
             icon: IconEdit,
-            callback: () => __awaiter(void 0, void 0, void 0, function* () {
-                yield managementActions.editPost(buffer.current.id);
-            })
+            callback: async () => {
+                await managementActions.editPost(buffer.current.id);
+            }
         });
     }
-    if ((managementActions === null || managementActions === void 0 ? void 0 : managementActions.editArticle) && postModel.postType === PostType.Article && buffer.current.articleId) {
+    if (managementActions?.editArticle && postModel.postType === PostType.Article && buffer.current.articleId) {
         result.push({
             icon: IconEdit,
-            callback: () => __awaiter(void 0, void 0, void 0, function* () {
-                yield managementActions.editArticle(buffer.current.articleId);
-            })
+            callback: async () => {
+                await managementActions.editArticle(buffer.current.articleId);
+            }
         });
     }
-    if (managementActions === null || managementActions === void 0 ? void 0 : managementActions.deletePost) {
+    if (managementActions?.deletePost) {
         result.push({
             icon: IconDelete,
             iconColor: IconColor.Red,
-            callback: () => __awaiter(void 0, void 0, void 0, function* () {
-                yield managementActions.deletePost(buffer.current.id);
-            })
+            callback: async () => {
+                await managementActions.deletePost(buffer.current.id);
+            }
         });
     }
     return result;

package/dist/products/product-card/cmp.product-card.svelte

@@ -8,12 +8,11 @@ let { product, colors, includeBeforeNowPrefix, trackingParams, inert = false, lo
 const localization = $derived(new ProductCardLocalization(locale));
 const shortDescriptionPresented = $derived(product.shortDescription && product.shortDescription.length > 0);
 const trackImpression = (node) => {
-    if (on === null || on === void 0 ? void 0 : on.impression) {
+    if (on?.impression) {
         const observer = new IntersectionObserver((entries) => {
             entries.forEach((entry) => {
-                var _a;
                 if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
-                    (_a = on.impression) === null || _a === void 0 ? void 0 : _a.call(on, product.id);
+                    on.impression?.(product.id);
                     observer.unobserve(entry.target);
                 }
             });
@@ -30,7 +29,7 @@ const enrichedLink = $derived(product.link ? enrichProductLinkWithTracking({ lin
 const onProductClicked = (event) => {
     event.preventDefault();
     event.stopPropagation();
-    if (on === null || on === void 0 ? void 0 : on.click) {
+    if (on?.click) {
         on.click(product.id);
     }
     if (enrichedLink) {
@@ -39,13 +38,13 @@ const onProductClicked = (event) => {
 };
 const styles = $derived.by(() => {
     const values = [];
-    if (colors === null || colors === void 0 ? void 0 : colors.background) {
+    if (colors?.background) {
         values.push(`--product-card--background-color: ${colors.background}`);
     }
-    if (colors === null || colors === void 0 ? void 0 : colors.price) {
+    if (colors?.price) {
         values.push(`--product-card--price-color: ${colors.price}`);
     }
-    if (colors === null || colors === void 0 ? void 0 : colors.salePrice) {
+    if (colors?.salePrice) {
         values.push(`--product-card--sale-price-color: ${colors.salePrice}`);
     }
     return values.join(';');

package/dist/short-videos/short-video-card/cmp.short-video-card.svelte

@@ -9,7 +9,7 @@ import IconPhone from '@fluentui/svg-icons/icons/phone_20_regular.svg?raw';
 import IconShoppingBag from '@fluentui/svg-icons/icons/shopping_bag_20_regular.svg?raw';
 const ADJUST_TEXT_SIZE = false;
 let { shortVideo, locale, on } = $props();
-const localization = new ShortVideoCardLocalization(locale);
+const localization = $derived(new ShortVideoCardLocalization(locale));
 const adjustTextSize = (node) => {
     if (!ADJUST_TEXT_SIZE) {
         return;

package/dist/streams/controls/stream-actions-generator.svelte.js

@@ -1,10 +1,11 @@
 import { PostActionsHandler } from '../../posts/controls';
 import IconShare from '@fluentui/svg-icons/icons/share_48_regular.svg?raw';
+import { SvelteMap } from 'svelte/reactivity';
 export class StreamActionsGenerator {
     postSocialInteractionsHandler;
     sharingHandler;
     callbacks;
-    handlers = new Map();
+    handlers = new SvelteMap();
     constructor(init) {
         this.postSocialInteractionsHandler = init.postSocialInteractionsHandler ?? null;
         this.sharingHandler = init.sharingHandler ?? null;

package/dist/streams/layout/cmp.slot-content.svelte

@@ -31,9 +31,9 @@ const dataIsFilled = $derived.by(() => {
     }
 });
 const productModel = $derived.by(() => {
-    return (slotData === null || slotData === void 0 ? void 0 : slotData.type) === StreamComponentDataType.Product ? slotData.product : undefined;
+    return slotData?.type === StreamComponentDataType.Product ? slotData.product : undefined;
 });
-const enrichedLink = $derived((productModel === null || productModel === void 0 ? void 0 : productModel.link)
+const enrichedLink = $derived(productModel?.link
     ? enrichProductLinkWithTracking({
         link: productModel.link,
         productId: productModel.id,
@@ -45,7 +45,7 @@ const handleProductClick = (e) => {
     if (!productModel) {
         return;
     }
-    if (productModel.id && (on === null || on === void 0 ? void 0 : on.productClick)) {
+    if (productModel.id && on?.productClick) {
         on.productClick(productModel.id);
     }
     if (enrichedLink) {
@@ -53,12 +53,11 @@ const handleProductClick = (e) => {
     }
 };
 const productLinkMounted = (node, productModel) => {
-    if (on === null || on === void 0 ? void 0 : on.productImpression) {
+    if (on?.productImpression) {
         const observer = new IntersectionObserver((entries) => {
             entries.forEach((entry) => {
-                var _a;
                 if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
-                    (_a = on.productImpression) === null || _a === void 0 ? void 0 : _a.call(on, productModel.id);
+                    on.productImpression?.(productModel.id);
                     observer.unobserve(entry.target);
                 }
             });

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

@@ -1,9 +1,8 @@
-<script lang="ts">var _a;
-import { PriceStreamElementLocalization } from './price-stream-element-localization';
+<script lang="ts">import { PriceStreamElementLocalization } from './price-stream-element-localization';
 import { default as PriceElementView } from './price-element-view.svelte';
 let { model, data, locale } = $props();
 const localization = $derived(new PriceStreamElementLocalization(locale));
-let baseMaxHeight = $derived(((_a = model.styles) === null || _a === void 0 ? void 0 : _a.height) || 32);
+let baseMaxHeight = $derived(model.styles?.height || 32);
 let adjustedHeight = $derived(baseMaxHeight);
 </script>
 

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

@@ -4,7 +4,7 @@ import { generateProductsSliderStyles } from '../styles-transformer';
 import { default as StreamElement } from './cmp.stream-element.svelte';
 let { model, data, trackingParams, locale } = $props();
 const getProductDataByIndex = (index) => {
-    const products = (data === null || data === void 0 ? void 0 : data.type) === StreamComponentDataType.Products ? data.products : [];
+    const products = data?.type === StreamComponentDataType.Products ? data.products : [];
     const product = products[index];
     if (!product) {
         return null;

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

@@ -1,16 +1,14 @@
-<script lang="ts">var _a;
-import { StockStreamElementLocalization } from './stock-stream-element-localization';
+<script lang="ts">import { StockStreamElementLocalization } from './stock-stream-element-localization';
 import { StockStreamElementLevel } from '../enums';
 import { mapFlexJustifyContent, transformNumericValue, transformTextColorValue } from '../styles-transformer';
 let { model, heightOverrideDdu, locale } = $props();
 const localization = $derived(new StockStreamElementLocalization(locale));
-const height = $derived(heightOverrideDdu || ((_a = model.styles) === null || _a === void 0 ? void 0 : _a.height) || 16);
+const height = $derived(heightOverrideDdu || model.styles?.height || 16);
 const containerStyles = $derived.by(() => {
-    var _a;
     const values = [
         `align-items: center;`,
         `height: ${transformNumericValue(height)}; gap: 1cqi;`,
-        `justify-content: ${mapFlexJustifyContent((_a = model.styles) === null || _a === void 0 ? void 0 : _a.horizontalAlign)};`
+        `justify-content: ${mapFlexJustifyContent(model.styles?.horizontalAlign)};`
     ];
     return values.join('');
 });
@@ -19,8 +17,7 @@ const dotCustomStyles = $derived.by(() => {
     return values.join('');
 });
 const quantityCustomStyles = $derived.by(() => {
-    var _a;
-    const values = [`font-size: ${transformNumericValue(height * 0.75)};`, `color: ${transformTextColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.color)};`];
+    const values = [`font-size: ${transformNumericValue(height * 0.75)};`, `color: ${transformTextColorValue(model.styles?.color)};`];
     return values.join('');
 });
 </script>