From 1a5fcef757d2c999580fbc7e3babd8094054c253 Mon Sep 17 00:00:00 2001
From: Sudev Kiyada <sudev.kiyada@thomsonreuters.com>
Date: Fri, 5 Dec 2025 16:56:17 +0530
Subject: [PATCH] expose width and height

---
 src/components/Lottie/Lottie.svelte            | 18 ++++++++++++++++--
 .../Lottie/demo/withScrollerBase.svelte        | 13 +++++++++++++
 src/components/Lottie/ts/types.ts              |  2 ++
 src/components/Lottie/ts/utils.ts              | 16 ++++++++++++++++
 4 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/src/components/Lottie/Lottie.svelte b/src/components/Lottie/Lottie.svelte
index a49c870f..c3c1856a 100644
--- a/src/components/Lottie/Lottie.svelte
+++ b/src/components/Lottie/Lottie.svelte
@@ -11,6 +11,7 @@
     isReverseMode,
     createRenderConfig,
     isNullish,
+    isContainerWidth,
   } from './ts/utils';
   import { Tween } from 'svelte/motion';
 
@@ -49,7 +50,8 @@
     layout = { fit: 'contain', align: [0.5, 0.5] },
     animationId = '',
     lottiePlayer = $bindable(undefined),
-    height = '100lvh',
+    width = 'fluid',
+    height = 'auto',
     showDebugInfo = false,
     lottieState = createLottieState(),
     progress = $bindable(0),
@@ -396,7 +398,12 @@
   });
 </script>
 
-<div class="lottie-block">
+<div
+  class="lottie-block"
+  style="max-width: {isContainerWidth(width) ?
+    `var(--${width}-column-width)`
+  : width};"
+>
   {#if showDebugInfo && lottiePlayer}
     <Debug componentState={lottieState} />
   {/if}
@@ -420,11 +427,18 @@
   :global(.lottie-block) {
     position: relative;
     height: 100%;
+    width: 100%;
+    margin: 0 auto;
+    // to remove
+    border: 2px solid green;
 
     .lottie-container {
       width: 100%;
       height: 100%;
+      // to remove
+      border: 2px solid red;
     }
+
     canvas {
       width: 100%;
       height: 100%;
diff --git a/src/components/Lottie/demo/withScrollerBase.svelte b/src/components/Lottie/demo/withScrollerBase.svelte
index c878921a..5b792e89 100644
--- a/src/components/Lottie/demo/withScrollerBase.svelte
+++ b/src/components/Lottie/demo/withScrollerBase.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import BodyText from '../../BodyText/BodyText.svelte';
   import ScrollerBase from '../../ScrollerBase/ScrollerBase.svelte';
   import Lottie from '../Lottie.svelte';
   import LottieSample from '../lottie/themesLottie.zip?url';
@@ -11,8 +12,14 @@
   let top = $state(0);
   let threshold = $state(0.5);
   let bottom = $state(1);
+
+  const dummyText = `Greetings, earthling. This placeholder text is running in debug mode. All bugs have been upgraded to features, and all features downgraded to TODOs. If you find yourself reading this, you are now the sysadmin of your own destiny. 
+  
+  Remember the network is down because someone tripped over the Ethernet cable.  Keep calm and RTFM before summoning the wizard. In case of panic, type 'kill -9' and hope for the best. End of line. Insert witty comment here.`;
 </script>
 
+<BodyText text={dummyText} />
+
 <ScrollerBase
   {top}
   {threshold}
@@ -35,6 +42,8 @@
   {/snippet}
 </ScrollerBase>
 
+<BodyText text={dummyText} />
+
 <style lang="scss">
   @use '../../../scss/mixins' as mixins;
 
@@ -42,8 +51,12 @@
     height: 100lvh;
     width: 50%;
     margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     h3 {
+      width: 100%;
       background-color: antiquewhite;
       text-align: center;
     }
diff --git a/src/components/Lottie/ts/types.ts b/src/components/Lottie/ts/types.ts
index c8cdc2ee..f4b088fb 100644
--- a/src/components/Lottie/ts/types.ts
+++ b/src/components/Lottie/ts/types.ts
@@ -5,6 +5,7 @@ import {
   type DotLottie as DotLottieType,
 } from '@lottiefiles/dotlottie-web';
 import { type LottieState } from './lottieState.svelte';
+import type { ContainerWidth } from '../../@types/global';
 
 type DotlottieProps = {
   autoplay?: Config['autoplay'];
@@ -33,6 +34,7 @@ export type Props = DotlottieProps & {
   // Additional properties can be added here if needed
   lottiePlayer?: DotLottieType | undefined;
   showDebugInfo?: boolean;
+  width?: string | ContainerWidth;
   height?: string;
   lottieState?: LottieState;
   progress?: number;
diff --git a/src/components/Lottie/ts/utils.ts b/src/components/Lottie/ts/utils.ts
index afdb7b3b..0c011fc5 100644
--- a/src/components/Lottie/ts/utils.ts
+++ b/src/components/Lottie/ts/utils.ts
@@ -1,5 +1,6 @@
 import type { DotLottie } from '@lottiefiles/dotlottie-web';
 import type { LottieState } from './lottieState.svelte';
+import type { ContainerWidth } from '$lib/components/@types/global';
 
 function constrain(n: number, low: number, high: number) {
   return Math.max(Math.min(n, high), low);
@@ -109,3 +110,18 @@ export function createRenderConfig() {
 export function isNullish(value: unknown): boolean {
   return value === null || value === undefined || value === '';
 }
+
+/**
+ * Checks if a value is of type ContainerWidth
+ */
+export function isContainerWidth(string: any): string is ContainerWidth {
+  return (
+    string === 'narrower' ||
+    string === 'narrow' ||
+    string === 'normal' ||
+    string === 'wide' ||
+    string === 'wider' ||
+    string === 'widest' ||
+    string === 'fluid'
+  );
+}