@eodash/eodash 5.0.0 → 5.2.0

package/dist/client/{EodashDatePicker-CALmW3SI.js → EodashDatePicker-DtngxU6s.js}

@@ -1,16 +1,20 @@
-import { useCssVars, ref, useTemplateRef, customRef, computed, reactive, toRef, watch, onMounted, createElementBlock, openBlock, createVNode, unref, createSlots, withCtx, createElementVNode, withDirectives, createCommentVNode, createBlock, mergeProps, toHandlers } from 'vue';
+import { useCssVars, ref, useTemplateRef, customRef, computed, reactive, watch, onMounted, createElementBlock, openBlock, createVNode, unref, createSlots, withCtx, createElementVNode, withDirectives, createCommentVNode, createBlock, mergeProps, toHandlers } from 'vue';
 import { DatePicker } from 'v-calendar';
-import { r as useDisplay, Y as datetime, Z as useSTAcStore, $ as eodashCollections, a0 as collectionsPalette, a1 as makePanelTransparent, V as VBtn, v as VIcon } from './asWebComponent-CLhcT715.js';
+import { _ as _export_sfc, D as useDisplay, E as useSTAcStore, F as useTransparentPanel, G as VBtn, H as VIcon, I as eodashCollections, J as eodashCompareCollections } from './asWebComponent-ZyEzWOOf.js';
+import { y as datetime, k as getDatetimeProperty } from './helpers-wXK7Ywio.js';
 import { mdiRayEndArrow, mdiRayStartArrow } from '@mdi/js';
 import log from 'loglevel';
-import { T as Tooltip } from './index-4CT7Tz83.js';
+import { storeToRefs } from 'pinia';
+import { T as Tooltip } from './index-9KR-G20t.js';
+
+const _style_0 = ".vc-popover-content{--vc-nav-hover-bg: rgba(var(--v-theme-on-surface), .1);--vc-nav-item-active-color: rgb(var(--v-theme-on-secondary));--vc-nav-item-active-bg: rgba(var(--v-theme-secondary), .8);--vc-focus-ring: 0 0 0 2px rgba(var(--v-theme-secondary), .5)}.vc-container{--vc-day-content-hover-bg: rgba(var(--v-theme-on-surface), .2);--vc-focus-ring: 0 0 0 2px rgba(var(--v-theme-secondary), .4);--vc-header-arrow-hover-bg: rgba(var(--v-theme-secondary), .1)}.vc-attr{--vc-accent-600: rgba(var(--v-theme-secondary), .8)}.datePicker{--vc-day-content-hover-bg: red}@media (min-width: 960px){.datePicker{position:absolute;bottom:0;left:0;right:0;margin-inline:auto;width:fit-content}}.vc-day-content{color:#5e5e5e;font-weight:400}.vc-highlight-content-solid{color:#fff!important}.vc-popover-content-wrapper{transform:var(--254ea936)!important}.vc-date-picker-content,.datePicker{backdrop-filter:blur(10px)!important;border-radius:8px;border:none;box-shadow:0 0 1px #18274b38,0 6px 12px -6px #18274b1f,0 8px 24px -4px #18274b14;background-color:rgba(var(--v-theme-surface),var(--v-surface-opacity, .8))!important}.vc-popover-caret.direction-top.align-left{clip-path:polygon(0% 0%,100% 0%,0% 100%,0% 100%)}.vc-bordered{border:none}";
 
 const _hoisted_1 = {
   ref: "rootRef",
   class: "datePicker"
 };
 const _hoisted_2 = {
-  class: "bg-surface d-flex flex-row align-center justify-center pb-1",
+  class: "d-flex flex-row align-center justify-center pb-1",
   style: {"overflow":"hidden","width":"100%"}
 };
 const _hoisted_3 = {
@@ -52,7 +56,7 @@ const _sfc_main = {
   setup(__props) {
 
 useCssVars(_ctx => ({
-  "f4706d8a": (transform.value)
+  "254ea936": (transform.value)
 }));
 
 const { lgAndDown } = useDisplay();
@@ -121,24 +125,49 @@ const maskedCurrentDate = computed(() =>
  */
 const attributes = reactive([]);
 
-const selectedStac = toRef(useSTAcStore(), "selectedStac");
+const { selectedCompareStac, selectedStac } = storeToRefs(useSTAcStore());
 
 watch(
-  selectedStac,
-  async (updatedStac, previousStac) => {
-    if (updatedStac && previousStac?.id !== updatedStac.id) {
-      log.debug("Datepicker selected STAC change triggered");
-      // remove old values
-      attributes.splice(0, attributes.length);
+  [selectedStac, selectedCompareStac],
+  async ([updatedStac, updatedCompareStac]) => {
+    attributes.splice(0, attributes.length);
+    if (!updatedStac && !updatedCompareStac) {
+      log.debug("No STAC selected, clearing datepicker attributes");
+      return;
+    }
 
-      for (let idx = 0; idx < eodashCollections.length; idx++) {
-        log.debug("Retrieving dates", eodashCollections[idx]);
-        await eodashCollections[idx].fetchCollection();
+    const attrs =
+      /** @type {Partial<import("v-calendar/dist/types/src/utils/attribute").AttributeConfig>[]} */ ([
+        ...(await fetchCollectionsAttributes(eodashCollections)),
+        ...(await fetchCollectionsAttributes(eodashCompareCollections)),
+      ]);
+    attributes.push(...attrs);
+  },
+  { immediate: true },
+);
+
+/**
+ *
+ * @param {import("@/eodashSTAC/EodashCollection").EodashCollection[]} eodashCollections
+ */
+async function fetchCollectionsAttributes(eodashCollections) {
+  if (!eodashCollections || !eodashCollections.length) {
+    return [];
+  }
 
+  return await Promise.all(
+    eodashCollections.map((ec, idx) => {
+      return ec.fetchCollection().then(() => {
+        const dateProperty = getDatetimeProperty(ec.getItems());
+        if (!dateProperty) {
+          return [];
+        }
         const dates = [
           ...new Set(
-            eodashCollections[idx].getItems()?.reduce((valid, it) => {
-              const parsed = Date.parse(/** @type {string} */ (it.datetime));
+            ec.getItems()?.reduce((valid, item) => {
+              const parsed = Date.parse(
+                /** @type {string} */ (item[dateProperty]),
+              );
               if (parsed) {
                 valid.push(new Date(parsed));
               }
@@ -146,12 +175,11 @@ watch(
             }, /** @type {Date[]} */ ([])),
           ),
         ];
-        attributes.push({
+        return {
           key: "id-" + idx.toString() + Math.random().toString(16).slice(2),
           dot: {
             style: {
-              backgroundColor:
-                collectionsPalette[idx % collectionsPalette.length],
+              backgroundColor: ec.color,
             },
           },
           dates,
@@ -161,13 +189,11 @@ watch(
               "font-weight": "bold",
             },
           },
-        });
-      }
-    }
-  },
-  { immediate: true },
-);
-
+        };
+      });
+    }),
+  );
+}
 /**
  * @param {boolean} reverse
  */
@@ -202,7 +228,7 @@ onMounted(() => {
     : "translate3d(0px,-80px,0)";
 });
 
-makePanelTransparent(rootEl);
+useTransparentPanel(rootEl);
 
 return (_ctx, _cache) => {
                                                        
@@ -218,7 +244,7 @@ return (_ctx, _cache) => {
       attributes: attributes,
       masks: masks.value,
       expanded: "",
-      class: "bg-surface overflow-auto",
+      class: "overflow-auto",
       style: {"background-color":"transparent","max-width":"100%"}
     }, createSlots({ _: 2 /* DYNAMIC */ }, [
       (__props.toggleCalendar)
@@ -234,7 +260,7 @@ return (_ctx, _cache) => {
                       variant: "text",
                       onClick: _cache[0] || (_cache[0] = $event => (jumpDate(true))),
                       class: "py-2",
-                      style: {"flex-shrink":"1"}
+                      style: {"flex-shrink":"1","padding":"0"}
                     }, {
                       default: withCtx(() => [
                         createVNode(VIcon, {
@@ -265,7 +291,7 @@ return (_ctx, _cache) => {
                       variant: "text",
                       onClick: _cache[1] || (_cache[1] = $event => (jumpDate(false))),
                       class: "py-2",
-                      style: {"flex-shrink":"1"}
+                      style: {"flex-shrink":"1","padding":"0"}
                     }, {
                       default: withCtx(() => [
                         createVNode(VIcon, {
@@ -346,5 +372,6 @@ return (_ctx, _cache) => {
 }
 
 };
+const EodashDatePicker = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]]]);
 
-export { _sfc_main as default };
+export { EodashDatePicker as default };

package/dist/client/{EodashItemFilter-DlQiE713.js → EodashItemFilter-ClQebJQt.js}

@@ -1,7 +1,9 @@
 import { computed, ref, createElementBlock, openBlock, mergeProps, unref, createElementVNode, toDisplayString } from 'vue';
-import { r as useDisplay, Z as useSTAcStore } from './asWebComponent-CLhcT715.js';
+import { _ as _export_sfc, E as useSTAcStore, O as isFirstLoad } from './asWebComponent-ZyEzWOOf.js';
 import '@eox/itemfilter';
 
+const _style_0 = "eox-itemfilter[data-v-1be0ec61]{--form-flex-direction: row}@media (max-width: 768px){eox-itemfilter[data-v-1be0ec61]{--form-flex-direction: column}}";
+
 const _hoisted_1 = [".items"];
 const _hoisted_2 = {
   slot: "filterstitle",
@@ -55,6 +57,7 @@ const _sfc_main = {
   enableHighlighting: { type: Boolean, default: true },
   expandMultipleFilters: { type: Boolean, default: true },
   expandMultipleResults: { type: Boolean, default: true },
+  styleOverride: { type: String, default: "" },
   filterProperties: {
     /** @type {import("vue").PropType<{
      * keys:string[];
@@ -66,13 +69,15 @@ const _sfc_main = {
     default: () => [
       {
         keys: ["title", "themes", "description"],
-        title: "Search",
+        title: "Search by name or description",
         type: "text",
+        expanded: true,
       },
       {
         key: "themes",
-        title: "Theme Filter",
+        title: "Filter by theme",
         type: "multiselect",
+        expanded: true,
       },
     ],
   },
@@ -80,6 +85,7 @@ const _sfc_main = {
   emits: ["select"],
   setup(__props, { emit: __emit }) {
 
+const store = useSTAcStore();
 const emit = __emit;
 
 const props = __props;
@@ -88,8 +94,10 @@ const props = __props;
  */
 const selectIndicator = async (item) => {
   if (item) {
-    // Reset compare stac to empty
-    store.resetSelectedCompareSTAC();
+    if (isFirstLoad.value) {
+      // prevent the map from jumping to the initial position
+      isFirstLoad.value = false;
+    }
     await store.loadSelectedSTAC(item.href);
     emit("select", item);
   } else {
@@ -103,6 +111,8 @@ const selectCompareIndicator = (item) => {
   if (item) {
     store.loadSelectedCompareSTAC(item.href);
     emit("select", item);
+  } else {
+    store.resetSelectedCompareSTAC();
   }
 };
 /** @param {any} evt*/
@@ -114,7 +124,7 @@ const onSelect = async (evt) => {
     selectIndicator(item);
   }
 };
-const { smAndDown } = useDisplay();
+
 const config = computed(() => ({
   titleProperty: props.titleProperty,
   enableHighlighting: props.enableHighlighting,
@@ -125,13 +135,12 @@ const config = computed(() => ({
   imageProperty: props.imageProperty,
   aggregateResults: props.aggregateResults,
   style: props.cssVars,
-  filterProperties: smAndDown.value ? "" : props.filterProperties,
+  filterProperties: props.filterProperties,
+  styleOverride: props.styleOverride,
 }));
 /** @type {import("vue").Ref<HTMLElement & Record<string,any> | null>} */
 const eoxItemFilter = ref(null);
 
-const store = useSTAcStore();
-
 return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("eox-itemfilter", mergeProps({ class: "fill-height" }, config.value, {
     ref_key: "eoxItemFilter",
@@ -147,5 +156,6 @@ return (_ctx, _cache) => {
 }
 
 };
+const EodashItemFilter = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-1be0ec61"]]);
 
-export { _sfc_main as default };
+export { EodashItemFilter as default };

package/dist/client/{EodashLayerControl-DEzEbft7.js → EodashLayerControl-BLBds28C.js}

@@ -1,19 +1,21 @@
-import { computed, ref, createElementBlock, openBlock, createCommentVNode, mergeProps, unref } from 'vue';
+import { computed, ref, createElementBlock, openBlock, createCommentVNode, mergeProps, unref, renderSlot, createElementVNode, toDisplayString } from 'vue';
 import '@eox/layercontrol';
 import '@eox/jsonform';
 import '@eox/timecontrol';
 import 'color-legend-element';
-import { Z as useSTAcStore, a2 as mapCompareEl, a3 as mapEl, a4 as eodashCompareCollections, $ as eodashCollections, a5 as layerControlFormValueCompare, a6 as layerControlFormValue, a7 as getColFromLayer } from './asWebComponent-CLhcT715.js';
+import { I as mapCompareEl, d as mapEl, J as getColFromLayer } from './helpers-wXK7Ywio.js';
+import { _ as _export_sfc, E as useSTAcStore, K as layerControlFormValueCompare, L as layerControlFormValue, J as eodashCompareCollections, I as eodashCollections } from './asWebComponent-ZyEzWOOf.js';
 import { storeToRefs } from 'pinia';
 
-const _hoisted_1 = { class: "d-flex flex-column fill-height overflow-auto" };
+const _style_0 = "eox-layercontrol[data-v-88d02d9c]{overflow:auto}";
+
+const _hoisted_1 = { class: "d-flex flex-column" };
 const _hoisted_2 = ["for"];
+const _hoisted_3 = {
+  key: 0,
+  class: "mt-2 mb-2"
+};
 
-const styleOverride = `
-input[type="range"] {
-  background:transparent !important;
-}
-`;
 
 const _sfc_main = {
   __name: 'EodashLayerControl',
@@ -28,6 +30,10 @@ const _sfc_main = {
     type: Array,
     default: () => ["datetime", "info", "config", "legend", "opacity"],
   },
+  title: {
+    type: String || Boolean,
+    default: "Layers",
+  },
   cssVars: {
     type: Object,
   },
@@ -66,7 +72,6 @@ const handleDatetimeUpdate = async (evt) => {
   let updatedLayers = [];
 
   if (ec) {
-    await ec.fetchCollection();
     updatedLayers = await ec.updateLayerJson(
       datetime,
       layer.get("id"),
@@ -116,26 +121,34 @@ const onLayerConfigChange = (evt) => {
   }
 };
 
-
 return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("span", _hoisted_1, [
     (showControls.value)
-      ? (openBlock(), createElementBlock("eox-layercontrol", mergeProps({ key: 0 }, config, {
+      ? (openBlock(), createElementBlock("eox-layercontrol", mergeProps({ key: unref(mapElement) }, config, {
           for: unref(mapElement),
           "onDatetime:updated": debouncedHandleDateTime,
-          class: "fill-height",
           toolsAsList: "true",
           style: {"--eox-background-color":"transparent"},
           ref_key: "eoxLayercontrol",
           ref: eoxLayercontrol,
-          "on:layerConfig:change": onLayerConfigChange,
-          ".styleOverride": styleOverride
-        }), null, 48 /* FULL_PROPS, NEED_HYDRATION */, _hoisted_2))
+          "on:layerConfig:change": onLayerConfigChange
+        }), [
+          renderSlot(_ctx.$slots, "layerstitle", {}, () => [
+            createElementVNode("div", null, [
+              (__props.title)
+                ? (openBlock(), createElementBlock("p", _hoisted_3, [
+                    createElementVNode("strong", null, toDisplayString(__props.title), 1 /* TEXT */)
+                  ]))
+                : createCommentVNode("v-if", true)
+            ])
+          ], true)
+        ], 16 /* FULL_PROPS */, _hoisted_2))
       : createCommentVNode("v-if", true)
   ]))
 }
 }
 
 };
+const EodashLayerControl = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-88d02d9c"]]);
 
-export { _sfc_main as default };
+export { EodashLayerControl as default };

package/dist/client/EodashLayoutSwitcher-DQ8SfVDd.js

@@ -0,0 +1,61 @@
+import { ref, createElementBlock, openBlock, createBlock, unref, withCtx, createVNode, mergeProps } from 'vue';
+import { A as activeTemplate } from './helpers-wXK7Ywio.js';
+import { mdiViewDashboard } from '@mdi/js';
+import { D as useDisplay, F as useTransparentPanel, H as VIcon } from './asWebComponent-ZyEzWOOf.js';
+import { V as VTooltip } from './VTooltip-J4ac48X7.js';
+
+const _sfc_main = {
+  __name: 'EodashLayoutSwitcher',
+  props: {
+  target: {
+    type: String,
+    default: "main",
+  },
+  // mdi/js icon
+  icon: {
+    type: String,
+    default: mdiViewDashboard,
+  },
+},
+  setup(__props) {
+
+const { mobile } = useDisplay();
+
+
+/** @type {import("vue").Ref<HTMLDivElement|null>} */
+const rootRef = ref(null);
+useTransparentPanel(rootRef);
+
+return (_ctx, _cache) => {
+                                                       
+                                                             
+
+  return (openBlock(), createElementBlock("div", {
+    ref_key: "rootRef",
+    ref: rootRef
+  }, [
+    (!unref(mobile))
+      ? (openBlock(), createBlock(VTooltip, {
+          key: 0,
+          text: `Switch to ${__props.target} mode`
+        }, {
+          activator: withCtx(({ props }) => [
+            createVNode(VIcon, mergeProps(props, {
+              onClick: _cache[0] || (_cache[0] = $event => (activeTemplate.value = __props.target)),
+              icon: [__props.icon]
+            }), null, 16 /* FULL_PROPS */, ["icon"])
+          ]),
+          _: 1 /* STABLE */
+        }, 8 /* PROPS */, ["text"]))
+      : (openBlock(), createBlock(VIcon, {
+          key: 1,
+          onClick: _cache[1] || (_cache[1] = $event => (activeTemplate.value = __props.target)),
+          icon: [__props.icon]
+        }, null, 8 /* PROPS */, ["icon"]))
+  ], 512 /* NEED_PATCH */))
+}
+}
+
+};
+
+export { _sfc_main as default };