@eodash/eodash 5.0.0-rc.1.6 → 5.0.0-rc.2

package/core/client/composables/EodashMap.js

@@ -210,6 +210,7 @@ const createLayersConfig = async (
  * @param {import("vue").Ref<string>} datetime
  * @param {import("vue").Ref<Record<string,any>[]>} mapLayers
  * @param {import("vue").Ref<import("@eox/map").EOxMap| null>} partnerMap
+ * @param {boolean} zoomToExtent
  */
 export const useInitMap = (
   mapElement,
@@ -218,6 +219,7 @@ export const useInitMap = (
   datetime,
   mapLayers,
   partnerMap,
+  zoomToExtent,
 ) => {
   log.debug(
     "InitMap",
@@ -310,29 +312,31 @@ export const useInitMap = (
           datetime.value = endInterval.toISOString();
         }
 
-        // Try to move map view to extent only when main
-        // indicator and map changes
-        if (
-          mapElement?.value?.id === "main" &&
-          updatedStac.extent?.spatial.bbox &&
-          !posIsSetFromUrl.value
-        ) {
-          // Sanitize extent,
-          const b = updatedStac.extent?.spatial.bbox[0];
-          const sanitizedExtent = [
-            b?.[0] > -180 ? b?.[0] : -180,
-            b?.[1] > -90 ? b?.[1] : -90,
-            b?.[2] < 180 ? b?.[2] : 180,
-            b?.[3] < 90 ? b?.[3] : 90,
-          ];
+        if (zoomToExtent) {
+          // Try to move map view to extent only when main
+          // indicator and map changes
+          if (
+            mapElement?.value?.id === "main" &&
+            updatedStac.extent?.spatial.bbox &&
+            !posIsSetFromUrl.value
+          ) {
+            // Sanitize extent,
+            const b = updatedStac.extent?.spatial.bbox[0];
+            const sanitizedExtent = [
+              b?.[0] > -180 ? b?.[0] : -180,
+              b?.[1] > -90 ? b?.[1] : -90,
+              b?.[2] < 180 ? b?.[2] : 180,
+              b?.[3] < 90 ? b?.[3] : 90,
+            ];
 
-          const reprojExtent = mapElement.value?.transformExtent(
-            sanitizedExtent,
-            "EPSG:4326",
-            mapElement.value?.map?.getView().getProjection(),
-          );
-          /** @type {import("@eox/map").EOxMap} */
-          (mapElement.value).zoomExtent = reprojExtent;
+            const reprojExtent = mapElement.value?.transformExtent(
+              sanitizedExtent,
+              "EPSG:4326",
+              mapElement.value?.map?.getView().getProjection(),
+            );
+            /** @type {import("@eox/map").EOxMap} */
+            (mapElement.value).zoomExtent = reprojExtent;
+          }
         }
         if (posIsSetFromUrl.value) {
           posIsSetFromUrl.value = false;
@@ -361,14 +365,15 @@ export const useInitMap = (
 /**
  *
  * @param {EodashCollection[]} eodashCols
- * @param {import("vue").Ref<import("@/types").EodashStyleJson["tooltip"]>} tooltipProperties
+ * @param {import("vue").Ref<Exclude<import("@/types").EodashStyleJson["tooltip"],undefined>>} tooltipProperties
  */
 export const useUpdateTooltipProperties = (eodashCols, tooltipProperties) => {
   useOnLayersUpdate(async () => {
-    tooltipProperties.value = [];
+    const tooltips = [];
     for (const ec of eodashCols) {
-      tooltipProperties.value.push(...(await ec.getToolTipProperties()));
+      tooltips.push(...(await ec.getToolTipProperties()));
     }
+    tooltipProperties.value = tooltips;
     log.debug("Updated tooltip properties", tooltipProperties.value);
   });
 };

package/core/client/composables/index.js

@@ -17,6 +17,7 @@ import log from "loglevel";
 import { eodashKey, eoxLayersKey } from "@/utils/keys";
 import { useEventBus } from "@vueuse/core";
 import { posIsSetFromUrl } from "@/utils/states";
+import { setCollectionsPalette } from "@/utils";
 
 /**
  * Creates an absolute URL from a relative link and assignes it to `currentUrl`
@@ -81,13 +82,19 @@ export const useCompareAbsoluteUrl = (rel = "", base = eodash.stacEndpoint) => {
  * `ThemeDefinition`
  *
  * @param {string} themeName - Name of the theme to be updated
- * @param {import("vuetify").ThemeDefinition} [themeDefinition={}] - New
+ * @param {import("@/types").Eodash["brand"]["theme"]} [themeDefinition={}] - New
  *   defintion to be updated to. Default is `{}`
  * @returns {import("vuetify").ThemeInstance}
  */
 export const useUpdateTheme = (themeName, themeDefinition = {}) => {
   const theme = useTheme();
 
+  // extract collections palette from the theme
+  if (themeDefinition.collectionsPalette?.length) {
+    setCollectionsPalette(themeDefinition.collectionsPalette);
+    delete themeDefinition.collectionsPalette;
+  }
+
   /** @type {(keyof import("vuetify").ThemeDefinition)[]} */ (
     Object.keys(themeDefinition)
   ).forEach((key) => {

package/core/client/eodash.js

@@ -30,6 +30,18 @@ export const eodash = reactive({
         "surface-opacity": 0.6,
         "primary-opacity": 0.8,
       },
+      // Bank-Wong palette
+      collectionsPalette: [
+        "#009E73",
+        "#E69F00",
+        "#56B4E9",
+        "#009E73",
+        "#F0E442",
+        "#0072B2",
+        "#D55E00",
+        "#CC79A7",
+        "#994F00",
+      ],
     },
     footerText: "Demo configuration of eodash client",
   },
@@ -149,7 +161,6 @@ export const eodash = reactive({
                     properties: {
                       hintText: `<b>Hint:</b> closest available date is displayed <br />
                             on map (see Analysis Layers)`,
-                      toggleCalendar: true,
                     },
                   },
                 }
@@ -248,6 +259,7 @@ export const eodash = reactive({
                     properties: {
                       hintText: `<b>Hint:</b> closest available date is displayed <br />
                             on map (see Analysis Layers)`,
+                      toggleCalendar: true,
                     },
                   },
                 }
@@ -420,6 +432,7 @@ export const eodash = reactive({
                     properties: {
                       hintText: `<b>Hint:</b> closest available date is displayed <br />
                                 on map (see Analysis Layers)`,
+                      toggleCalendar: true,
                     },
                   },
                 }

package/core/client/eodashSTAC/EodashCollection.js

@@ -31,9 +31,12 @@ export class EodashCollection {
    */
   selectedItem;
 
-  /** @type {import("@/types").EodashStyleJson["tooltip"]} */
+  /** @type {Exclude<import("@/types").EodashStyleJson["tooltip"],undefined>} */
   #tooltipProperties = [];
 
+  /** @type {string | undefined} */
+  color;
+
   //  read only
   get collectionStac() {
     return this.#collectionStac;
@@ -148,6 +151,7 @@ export class EodashCollection {
     // less control.
 
     let { layerConfig, style } = extractLayerConfig(
+      this.#collectionStac?.id ?? "",
       await fetchStyle(item, itemUrl),
     );
 
@@ -182,6 +186,10 @@ export class EodashCollection {
           layerLegend: this.#collectionStac["eox:colorlegend"],
         };
       }
+      extraProperties = {
+        ...extraProperties,
+        ...(this.color && { color: this.color }),
+      };
       const links = await createLayersFromLinks(
         this.#collectionStac?.id ?? "",
         title,
@@ -374,7 +382,6 @@ export class EodashCollection {
         indicator?.title || indicator.id,
         //@ts-expect-error indicator instead of item
         indicator,
-        // layerDatetime,
       )),
       ...(await createLayersFromAssets(
         indicator?.id ?? "",
@@ -382,9 +389,6 @@ export class EodashCollection {
         indicatorAssets,
         //@ts-expect-error indicator instead of item
         indicator,
-        // style,
-        // layerConfig,
-        // layerDatetime,
       )),
     ];
   }

package/core/client/eodashSTAC/createLayers.js

@@ -82,7 +82,7 @@ export async function createLayersFromAssets(
           {
             type: "select",
             options: {
-              id: "selectInteraction",
+              id: (Math.random() * 10000).toFixed() + "_selectInteraction",
               condition: "pointermove",
               style: {
                 "stroke-color": "#335267",

package/core/client/eodashSTAC/helpers.js

@@ -1,6 +1,7 @@
 import { toAbsolute } from "stac-js/src/http.js";
 import axios from "@/plugins/axios";
 import log from "loglevel";
+import { getStyleVariablesState } from "./triggers.js";
 
 /** @param {import("stac-ts").StacLink[]} [links] */
 export function generateFeatures(links) {
@@ -39,12 +40,19 @@ export function generateFeatures(links) {
 /**
  * Sperates and extracts layerConfig (jsonform schema & legend) from a style json
  *
- *  @param { import("@/types").EodashStyleJson} [style] */
-export function extractLayerConfig(style) {
+ * @param {string} collectionId
+ *  @param { import("@/types").EodashStyleJson} [style]
+ * */
+export function extractLayerConfig(collectionId, style) {
   if (!style) {
     return { layerConfig: undefined, style: undefined };
   }
   style = { ...style };
+
+  if (Object.keys(style.variables ?? {}).length) {
+    style.variables = getStyleVariablesState(collectionId, style.variables);
+  }
+
   /** @type {Record<string,unknown> | undefined} */
   let layerConfig = undefined;
 

package/core/client/eodashSTAC/triggers.js

@@ -4,7 +4,7 @@
 import { changeMapProjection, registerProjection } from "@/store/actions";
 import log from "loglevel";
 import { getProjectionCode } from "./helpers";
-import { availableMapProjection } from "@/store/states";
+import { availableMapProjection, mapEl } from "@/store/states";
 
 /**
  * checks if there's a projection on the Collection and
@@ -41,3 +41,54 @@ export const setMapProjFromCol = async (STAcCollection) => {
     await changeMapProjection((availableMapProjection.value = ""));
   }
 };
+/**
+ *
+ * @param {string} collectionId
+ * @param {import("@/types").EodashStyleJson["variables"]} variables
+ */
+export function getStyleVariablesState(collectionId, variables) {
+  const mapElement = /** @type {import("@eox/map").EOxMap} */ (mapEl.value);
+  if (!mapElement || !mapElement.layers.length || !variables) {
+    return variables;
+  }
+
+  const analysisGroup = mapElement.layers.find(
+    (layer) => layer.properties?.id === "AnalysisGroup",
+  );
+  if (!analysisGroup) {
+    return variables;
+  }
+  const matchingLayer = analysisGroup.layers?.find((layer) => {
+    const [collection, ..._other] = layer.properties?.id.split(";:;") ?? [
+      "",
+      "",
+      "",
+    ];
+    return (
+      collection === collectionId &&
+      ["Vector", "WebGLTile"].includes(layer?.type ?? "")
+    );
+  });
+
+  if (!matchingLayer) {
+    return variables;
+  }
+
+  const olLayer = mapElement.getLayerById(matchingLayer.properties?.id ?? "");
+  const oldVariablesState = /** @type {import("ol/layer").WebGLTile} */ (
+    olLayer
+    //@ts-expect-error todo
+  ).getStyle()?.variables;
+  if (!oldVariablesState) {
+    return variables;
+  }
+  const styleVariablesKeys = Object.keys(variables);
+  const matchingKeys =
+    Object.keys(oldVariablesState).every((key) =>
+      styleVariablesKeys.includes(key),
+    ) &&
+    styleVariablesKeys.every((key) =>
+      Object.keys(oldVariablesState).includes(key),
+    );
+  return matchingKeys ? oldVariablesState : variables;
+}

package/core/client/store/stac.js

@@ -5,7 +5,11 @@ import { useAbsoluteUrl, useCompareAbsoluteUrl } from "@/composables/index";
 import { eodashKey } from "@/utils/keys";
 import { indicator } from "@/store/states";
 import { extractCollectionUrls } from "@/eodashSTAC/helpers";
-import { eodashCollections, eodashCompareCollections } from "@/utils/states";
+import {
+  eodashCollections,
+  eodashCompareCollections,
+  collectionsPalette,
+} from "@/utils/states";
 import { EodashCollection } from "@/eodashSTAC/EodashCollection";
 import log from "loglevel";
 
@@ -92,9 +96,10 @@ export const useSTAcStore = defineStore("stac", () => {
         );
 
         await Promise.all(
-          collectionUrls.map((cu) => {
+          collectionUrls.map((cu, idx) => {
             const ec = new EodashCollection(cu);
             ec.fetchCollection();
+            ec.color = collectionsPalette[idx % collectionsPalette.length];
             return ec;
           }),
         ).then((collections) => {

package/core/client/types.ts

@@ -229,7 +229,9 @@ export type Eodash<T extends ExecutionTime = "compiletime"> = {
      * Dashboard theme as a custom [vuetifyJs
      * theme](https://vuetifyjs.com/en/features/theme/).
      */
-    theme?: import("vuetify/lib/index.mjs").ThemeDefinition;
+    theme?: import("vuetify/lib/index.mjs").ThemeDefinition & {
+      collectionsPalette?: string[];
+    };
     /** Text applied to the footer. */
     footerText?: string;
   };

package/core/client/utils/index.js

@@ -1,3 +1,5 @@
+import log from "loglevel";
+import { collectionsPalette } from "./states";
 /**
  * Loads font in the app using `webfontloader`
  *
@@ -49,3 +51,13 @@ export const copyToClipBoard = async (text, showIcon) => {
     showIcon.value = false;
   }, 2000);
 };
+
+/**
+ * Sets the color palette for STAC indicators
+ * @param {string[]} colors
+ **/
+export const setCollectionsPalette = (colors) => {
+  log.debug("Setting collections color palette", colors);
+  collectionsPalette.splice(0, collectionsPalette.length);
+  collectionsPalette.push(...colors);
+};

package/core/client/utils/states.js

@@ -1,4 +1,4 @@
-import { ref, shallowReactive } from "vue";
+import { reactive, ref, shallowReactive } from "vue";
 
 /**
  * Array of eodash STAC Collections extracted from the current selected indicator.
@@ -21,5 +21,19 @@ export const eodashCompareCollections = shallowReactive([]);
 /** whether the map postion was set in URL params on first load */
 export const posIsSetFromUrl = ref(false);
 
-/** @type {import("vue").Ref<Record<string,any>|undefined>} */
+/**
+ * Current value of the layer control JSON form for the latest layer the user interacted with.
+ * @type {import("vue").Ref<Record<string, any> | undefined>}
+ */
 export const layerControlFormValue = ref({});
+/**
+ * STAC indicators color palette, defaults to Bank-Wong palette
+ *  @type {string[]} */
+export const collectionsPalette = reactive([
+  "#009E73",
+  "#0072B2",
+  "#E69F00",
+  "#CC79A7",
+  "#56B4E9",
+  "#D55E00",
+]);

package/core/client/views/Dashboard.vue

@@ -35,7 +35,9 @@ const eodash = await useEodashRuntime(props.config);
 
 useURLSearchParametersSync();
 
-const theme = useUpdateTheme("dashboardTheme", eodash.brand?.theme);
+const theme = useUpdateTheme("dashboardTheme", {
+  ...(eodash.brand?.theme ?? {}),
+});
 theme.global.name.value = "dashboardTheme";
 
 await loadFont(

package/dist/client/{DashboardLayout-SZfMDUoR.js → DashboardLayout-VrJIbhe8.js}

@@ -1,7 +1,7 @@
 import { openBlock, createBlock, withCtx, createElementVNode, unref, normalizeStyle, createElementBlock, Suspense, resolveDynamicComponent, mergeProps, createCommentVNode, Fragment, renderList, Transition } from 'vue';
 import '@eox/layout';
-import { _ as _export_sfc, F as useDefineTemplate } from './asWebComponent-DW1XzZkL.js';
-import { V as VMain } from './VMain-CQpXnzDR.js';
+import { _ as _export_sfc, F as useDefineTemplate } from './asWebComponent-CLUhauLl.js';
+import { V as VMain } from './VMain-2GOqWb6m.js';
 
 const _hoisted_1 = ["gap"];
 const _hoisted_2 = ["id", "h", "w", "x", "y"];

package/dist/client/{DynamicWebComponent-I9gzMY0L.js → DynamicWebComponent-BCwpocDX.js}

@@ -1,5 +1,5 @@
 import { withAsyncContext, ref, onMounted, onUnmounted, openBlock, createElementBlock, createBlock, resolveDynamicComponent, mergeProps } from 'vue';
-import { $ as useSTAcStore } from './asWebComponent-DW1XzZkL.js';
+import { $ as useSTAcStore } from './asWebComponent-CLUhauLl.js';
 
 const _hoisted_1 = { class: "d-flex flex-column fill-height overflow-auto" };
 

package/dist/client/{EodashDatePicker-B9_u6TTm.js → EodashDatePicker-Bp5ec3BC.js}

@@ -1,9 +1,9 @@
-import { resolveComponent, render, h, mergeProps, useCssVars, customRef, ref, reactive, toRef, watch, onMounted, openBlock, createElementBlock, createVNode, unref, createSlots, withCtx, createElementVNode, withDirectives, createBlock, createCommentVNode, toHandlers } from 'vue';
+import { resolveComponent, render, h, mergeProps, useCssVars, useTemplateRef, customRef, ref, computed, reactive, toRef, watch, onMounted, openBlock, createElementBlock, createVNode, unref, createSlots, withCtx, createElementVNode, withDirectives, createBlock, createCommentVNode, toHandlers } from 'vue';
 import { DatePicker } from 'v-calendar';
-import { E as isObject, Y as consoleError, t as useDisplay, Z as datetime, $ as useSTAcStore, a0 as eodashCollections, a1 as makePanelTransparent, V as VBtn, y as VIcon } from './asWebComponent-DW1XzZkL.js';
+import { E as isObject, Y as consoleError, t as useDisplay, Z as datetime, $ as useSTAcStore, a0 as eodashCollections, a1 as collectionsPalette, a2 as makePanelTransparent, V as VBtn, y as VIcon } from './asWebComponent-CLUhauLl.js';
 import { mdiRayEndArrow, mdiRayStartArrow } from '@mdi/js';
 import log from 'loglevel';
-import { V as VTooltip } from './VTooltip-BYTlbKer.js';
+import { V as VTooltip } from './VTooltip-BWg0dxx5.js';
 
 // Utilities
 function useDirectiveComponent(component, props) {
@@ -86,23 +86,27 @@ const Tooltip = useDirectiveComponent(VTooltip, binding => {
 });
 
 const _hoisted_1 = {
+  ref: "rootRef",
+  class: "datePicker"
+};
+const _hoisted_2 = {
   class: "bg-surface d-flex flex-row align-center justify-center pb-1",
   style: {"overflow":"hidden","width":"100%"}
 };
-const _hoisted_2 = {
+const _hoisted_3 = {
   class: "flex rounded-lg border border-gray-300 dark:border-gray-600",
   style: {"margin":"2px","min-width":"0"}
 };
-const _hoisted_3 = ["value"];
-const _hoisted_4 = {
+const _hoisted_4 = ["value"];
+const _hoisted_5 = {
   class: "d-flex flex-row align-center justify-center pb-1",
   style: {"overflow":"hidden","width":"100%"}
 };
-const _hoisted_5 = {
+const _hoisted_6 = {
   class: "flex rounded-lg border border-gray-300 dark:border-gray-600",
   style: {"margin":"2px","min-width":"0"}
 };
-const _hoisted_6 = ["value"];
+const _hoisted_7 = ["value"];
 
 
 const _sfc_main = {
@@ -128,11 +132,15 @@ const _sfc_main = {
   setup(__props) {
 
 useCssVars(_ctx => ({
-  "ad11927a": (transform.value)
+  "45a34dce": (transform.value)
 }));
 
 const { lgAndDown } = useDisplay();
 
+const rootEl = useTemplateRef("rootRef");
+
+const datePickerEl = useTemplateRef("datePicker");
+
 // holds the number value of the datetime
 const currentDate = customRef((track, trigger) => ({
   get() {
@@ -143,7 +151,13 @@ const currentDate = customRef((track, trigger) => ({
   set(num) {
     trigger();
     log.debug("Datepicker setting currentDate", datetime.value);
-    datetime.value = new Date(num).toISOString();
+    const date = new Date(num);
+    datetime.value = date.toISOString();
+    //@ts-expect-error supports move method https://vcalendar.io/datepicker/basics.html#basics
+    datePickerEl.value?.move({
+      month: date.getMonth() + 1,
+      year: date.getFullYear(),
+    });
   },
 }));
 
@@ -151,6 +165,28 @@ const masks = ref({
   input: "YYYY-MM-DD",
 });
 
+/** @param {Date} date */
+const formatDate = (date) => {
+  const years = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  return `${years}-${month < 10 ? "0" + month : month}-${
+    day < 10 ? "0" + day : day
+  }`;
+};
+/**
+ *
+ * @param e {Event}
+ */
+const onInputChange = (e) => {
+  currentDate.value = new Date(
+    /** @type {HTMLInputElement} */ (e.target)?.value,
+  ).getTime();
+};
+const maskedCurrentDate = computed(() =>
+  formatDate(new Date(currentDate.value)),
+);
+
 
 
 /**
@@ -165,9 +201,6 @@ const masks = ref({
  */
 const attributes = reactive([]);
 
-/** @type {import("vue").Ref<HTMLDivElement|null>} */
-const rootRef = ref(null);
-
 const selectedStac = toRef(useSTAcStore(), "selectedStac");
 
 watch(
@@ -175,20 +208,13 @@ watch(
   async (updatedStac, previousStac) => {
     if (updatedStac && previousStac?.id !== updatedStac.id) {
       log.debug("Datepicker selected STAC change triggered");
-      const wongPalette = [
-        "#009E73",
-        "#0072B2",
-        "#E69F00",
-        "#CC79A7",
-        "#56B4E9",
-        "#D55E00",
-      ];
       // remove old values
       attributes.splice(0, attributes.length);
 
       for (let idx = 0; idx < eodashCollections.length; idx++) {
         log.debug("Retrieving dates", eodashCollections[idx]);
         await eodashCollections[idx].fetchCollection();
+
         const dates = [
           ...new Set(
             eodashCollections[idx].getItems()?.reduce((valid, it) => {
@@ -204,7 +230,8 @@ watch(
           key: "id-" + idx.toString() + Math.random().toString(16).slice(2),
           dot: {
             style: {
-              backgroundColor: wongPalette[idx % wongPalette.length],
+              backgroundColor:
+                collectionsPalette[idx % collectionsPalette.length],
             },
           },
           dates,
@@ -255,19 +282,16 @@ onMounted(() => {
     : "translate3d(0px,-80px,0)";
 });
 
-makePanelTransparent(rootRef);
+makePanelTransparent(rootEl);
 
 return (_ctx, _cache) => {
                                                        
                                                      
                                                          
 
-  return (openBlock(), createElementBlock("div", {
-    ref_key: "rootRef",
-    ref: rootRef,
-    class: "datePicker"
-  }, [
+  return (openBlock(), createElementBlock("div", _hoisted_1, [
     createVNode(unref(DatePicker), {
+      ref: "datePicker",
       modelValue: currentDate.value,
       "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => ((currentDate).value = $event)),
       modelModifiers: { number: true },
@@ -281,7 +305,7 @@ return (_ctx, _cache) => {
         ? {
             name: "default",
             fn: withCtx(({ inputValue, inputEvents }) => [
-              createElementVNode("div", _hoisted_1, [
+              createElementVNode("div", _hoisted_2, [
                 (!__props.hideArrows)
                   ? withDirectives((openBlock(), createBlock(VBtn, {
                       key: 0,
@@ -302,7 +326,7 @@ return (_ctx, _cache) => {
                       [Tooltip, 'Set date to oldest available dataset', "bottom"]
                     ])
                   : createCommentVNode("v-if", true),
-                createElementVNode("div", _hoisted_2, [
+                createElementVNode("div", _hoisted_3, [
                   (!__props.hideInputField)
                     ? (openBlock(), createElementBlock("input", mergeProps({
                         key: 0,
@@ -310,7 +334,7 @@ return (_ctx, _cache) => {
                       }, toHandlers(inputEvents, true), {
                         class: "flex-grow px-1 py-1 dark:bg-gray-700",
                         style: {"margin":"1px","width":"100%","white-space":"nowrap","overflow":"hidden","text-overflow":"ellipsis"}
-                      }), null, 16 /* FULL_PROPS */, _hoisted_3))
+                      }), null, 16 /* FULL_PROPS */, _hoisted_4))
                     : createCommentVNode("v-if", true)
                 ]),
                 (!__props.hideArrows)
@@ -340,7 +364,7 @@ return (_ctx, _cache) => {
         : {
             name: "footer",
             fn: withCtx(() => [
-              createElementVNode("div", _hoisted_4, [
+              createElementVNode("div", _hoisted_5, [
                 (!__props.hideArrows)
                   ? withDirectives((openBlock(), createBlock(VBtn, {
                       key: 0,
@@ -361,14 +385,15 @@ return (_ctx, _cache) => {
                       [Tooltip, 'Set date to oldest available dataset', "bottom"]
                     ])
                   : createCommentVNode("v-if", true),
-                createElementVNode("div", _hoisted_5, [
+                createElementVNode("div", _hoisted_6, [
                   (!__props.hideInputField)
                     ? (openBlock(), createElementBlock("input", {
                         key: 0,
-                        value: new Date(currentDate.value).toLocaleDateString(),
+                        value: maskedCurrentDate.value,
+                        onChange: onInputChange,
                         class: "flex-grow px-1 py-1 dark:bg-gray-700",
                         style: {"margin":"1px","width":"100%","white-space":"nowrap","overflow":"hidden","text-overflow":"ellipsis"}
-                      }, null, 8 /* PROPS */, _hoisted_6))
+                      }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_7))
                     : createCommentVNode("v-if", true)
                 ]),
                 (!__props.hideArrows)

package/dist/client/{EodashItemFilter-G7YsYO3B.js → EodashItemFilter-Cx0t-qeW.js}

@@ -1,5 +1,5 @@
 import { computed, ref, openBlock, createElementBlock, mergeProps, unref, createElementVNode, toDisplayString } from 'vue';
-import { t as useDisplay, $ as useSTAcStore } from './asWebComponent-DW1XzZkL.js';
+import { t as useDisplay, $ as useSTAcStore } from './asWebComponent-CLUhauLl.js';
 import '@eox/itemfilter';
 
 const _hoisted_1 = [".items"];