fix: remove from toggled property of Switch component in UNDP Design System because of some issue of reactivity in svelte 5. Use onchange event instead.

.changeset/friendly-fishes-hunt.md

@@ -0,0 +1,8 @@
+---
+"@undp-data/svelte-geohub-static-image-controls": patch
+"@undp-data/svelte-undp-components": patch
+"@undp-data/svelte-undp-design": patch
+"geohub": patch
+---
+
+fix: remove $bindable from toggled property of Switch component in UNDP Design System because of some issue of reactivity in svelte 5. Use onchange event instead.

packages/svelte-static-image-controls/src/lib/StaticImageControl.svelte

@@ -354,7 +354,12 @@
 	<span class="is-flex my-2">
 		<span class="is-size-6 has-text-weight-bold mr-2 my-auto">Advanced settings</span>
 		<div class="ml-auto pr-1">
-			<Switch bind:toggled={showAdvanced} />
+			<Switch
+				toggled={showAdvanced}
+				onchange={(toggled) => {
+					showAdvanced = toggled;
+				}}
+			/>
 		</div>
 	</span>
 

packages/svelte-undp-components/src/lib/components/maplibre/fill-extrusion/FillExtrusionHeight.svelte

@@ -203,11 +203,14 @@
 				/>
 				<div class="pt-2">
 					<Switch
-						bind:toggled={isLogarithmic}
+						toggled={isLogarithmic}
 						toggledText="Logarithmic is enabled"
 						untoggledText="Logarithmic is disabled"
 						showValue={true}
-						onchange={handleExaggerationChanged}
+						onchange={(toggled) => {
+							isLogarithmic = toggled;
+							handleExaggerationChanged();
+						}}
 					/>
 				</div>
 			</div>

packages/svelte-undp-components/src/lib/components/ui/PropertyEditor.svelte

@@ -254,8 +254,11 @@
 			{#if type === 'boolean'}
 				<div class="field">
 					<Switch
-						bind:toggled={value as boolean}
-						onchange={handleChanged}
+						toggled={value as boolean}
+						onchange={(toggled: boolean) => {
+							value = toggled;
+							handleChanged();
+						}}
 						showValue={true}
 						toggledText="Enable {title}"
 						untoggledText="Disable {title}"

packages/svelte-undp-design/src/lib/Switch/Switch.svelte

@@ -37,7 +37,7 @@
 	}
 
 	let {
-		toggled = $bindable(false),
+		toggled = false,
 		size = 'default',
 		disabled = false,
 		showIcon = false,

sites/geohub/src/components/pages/map/layers/vector/VectorFilter.svelte

@@ -369,7 +369,13 @@
 </svelte:head>
 <div class="field is-flex is-justify-content-space-between is-align-items-center" style="">
 	<span class="is-size-6 has-text-centered mx-1">One condition must be true</span>
-	<Switch bind:toggled={combineOperator} onchange={handleCombineOperatorChanged} />
+	<Switch
+		toggled={combineOperator}
+		onchange={(toggled) => {
+			combineOperator = toggled;
+			handleCombineOperatorChanged();
+		}}
+	/>
 	<span class="is-size-6 has-text-centered mx-1">All conditions must be true</span>
 </div>
 

sites/geohub/src/components/pages/storymap/StorymapChapterLayerEventEditor.svelte

@@ -161,7 +161,12 @@
 		<FieldControl title="Show only GeoHub layers" showHelp={false}>
 			{#snippet control()}
 				<div>
-					<Switch bind:toggled={showOnlyGeoHubLayers} />
+					<Switch
+						toggled={showOnlyGeoHubLayers}
+						onchange={(toggled) => {
+							showOnlyGeoHubLayers = toggled;
+						}}
+					/>
 				</div>
 			{/snippet}
 		</FieldControl>

sites/geohub/src/components/pages/storymap/StorymapMetaEdit.svelte

@@ -85,7 +85,12 @@
 			>
 				{#snippet control()}
 					<div>
-						<Switch bind:toggled={initShowProgress} />
+						<Switch
+							toggled={initShowProgress}
+							onchange={(toggled) => {
+								initShowProgress = toggled;
+							}}
+						/>
 					</div>
 				{/snippet}
 				{#snippet help()}

sites/geohub/src/components/pages/storymap/StorymapStyleSelector.svelte

@@ -274,8 +274,11 @@
 						{#snippet control()}
 							<div>
 								<Switch
-									bind:toggled={mapConfig.hillshade}
-									onchange={handleHillshadeAndTerrainChanged}
+									toggled={mapConfig.hillshade}
+									onchange={(toggled) => {
+										mapConfig.hillshade = toggled;
+										handleHillshadeAndTerrainChanged();
+									}}
 								/>
 							</div>
 						{/snippet}
@@ -285,16 +288,6 @@
 							</div>
 						{/snippet}
 					</FieldControl>
-
-					<!-- comment terrain switch since it has problem of trasition -->
-					<!-- <FieldControl title="Terrain" showHelp={true} showHelpPopup={false}>
-						<div slot="control">
-							<Switch bind:toggled={mapConfig.terrain} on:change={handleHillshadeAndTerrainChanged} />
-						</div>
-						<div slot="help">
-							<span>Enable terrain (3D) mode in this basemap if the option is enabled.</span>
-						</div>
-					</FieldControl> -->
 				{/if}
 
 				<input

sites/geohub/src/routes/(app)/settings/+page.svelte

@@ -673,7 +673,10 @@
 							<div>
 								<div class="field">
 									<Switch
-										bind:toggled={userSettings.MaplibreDevMode}
+										toggled={userSettings.MaplibreDevMode}
+										onchange={(toggled) => {
+											userSettings.MaplibreDevMode = toggled;
+										}}
 										showValue={true}
 										toggledText="Enable devlopment mode on map editor"
 										untoggledText="Disable devlopment mode on map editor"

sites/static-image-api/src/routes/+page.svelte

@@ -210,20 +210,26 @@
 							<div>
 								<div class="pb-2">
 									<Switch
-										bind:toggled={showTileBoundaries}
+										toggled={showTileBoundaries}
 										toggledText="Tile boundaries is shown"
 										untoggledText="Tile boundaries is hidden"
 										showValue={true}
-										onchange={handleShowTileBoundaryChange}
+										onchange={(toggled) => {
+											showTileBoundaries = toggled;
+											handleShowTileBoundaryChange();
+										}}
 									/>
 								</div>
 								<div>
 									<Switch
-										bind:toggled={showCollisionBoxes}
+										toggled={showCollisionBoxes}
 										toggledText="Collision Boxes is shown"
 										untoggledText="Collision Boxes is hidden"
 										showValue={true}
-										onchange={handleShowCollisionBoxes}
+										onchange={(toggled) => {
+											showCollisionBoxes = toggled;
+											handleShowCollisionBoxes();
+										}}
 									/>
 								</div>
 							</div>