fix npm i

Author: haiping-chen

.npmrc

@@ -1 +1,2 @@
 engine-strict=true
+legacy-peer-deps=true

package-lock.json

@@ -70,7 +70,7 @@
 		"svelte-codemirror-editor": "^2.1.0",
 		"svelte-collapse": "^0.1.2",
 		"svelte-file-dropzone": "^2.0.2",
-		"svelte-flatpickr": "^3.3.3",
+		"flatpickr": "^4.6.13",
 		"svelte-i18n": "^4.0.0",
 		"svelte-json-tree": "^2.2.0",
 		"svelte-jsoneditor": "^3.11.0",

package.json

@@ -1,7 +1,7 @@
 <script>
 	import { onMount, createEventDispatcher } from 'svelte';
 	import { Button, Input } from '@sveltestrap/sveltestrap';
-	import Flatpickr from 'svelte-flatpickr';
+	import flatpickr from 'flatpickr';
 	import 'flatpickr/dist/flatpickr.css';
 	import { TIME_RANGE_OPTIONS, CUSTOM_DATE_RANGE } from '$lib/helpers/constants';
 	import { clickoutsideDirective } from '$lib/helpers/directives';
@@ -141,6 +141,19 @@
 		value: x.value
 	}));
 
+	/** @param {HTMLElement} node */
+	function initFlatpickr(node) {
+		flatpickrInstance = flatpickr(node, flatpickrOptions);
+		return {
+			destroy() {
+				if (flatpickrInstance) {
+					flatpickrInstance.destroy();
+					flatpickrInstance = null;
+				}
+			}
+		};
+	}
+
 	onMount(() => {
 		loadRecentTimeRanges();
 	});
@@ -487,7 +500,7 @@
 				<div class="p-2">
 					<!-- Calendar Grid -->
 					<div class="mb-3">
-						<Flatpickr options={flatpickrOptions} bind:flatpickr={flatpickrInstance} />
+						<div use:initFlatpickr></div>
 					</div>
 
 					<!-- Date Input Fields -->