@eodash/eodash 5.0.0 → 5.1.0

package/core/client/views/Dashboard.vue

@@ -1,5 +1,5 @@
 <template>
-  <HeaderComponent v-if="!eodash.brand.noLayout" />
+  <HeaderComponent v-if="!eodash?.brand.noLayout" />
   <ErrorAlert v-model="error" />
   <EodashOverlay />
   <Suspense>
@@ -10,7 +10,7 @@
       </div>
     </template>
   </Suspense>
-  <FooterComponent v-if="!eodash.brand.noLayout" />
+  <FooterComponent v-if="!eodash?.brand.noLayout" />
 </template>
 
 <script setup>
@@ -18,7 +18,7 @@ import { useEodashRuntime } from "@/composables/DefineEodash";
 import { useURLSearchParametersSync, useUpdateTheme } from "@/composables";
 import { useSTAcStore } from "@/store/stac";
 import { computed, defineAsyncComponent, onErrorCaptured, ref } from "vue";
-import { useDisplay } from "vuetify/lib/framework.mjs";
+import { useDisplay } from "vuetify";
 import { loadFont } from "@/utils";
 import Loading from "@/components/Loading.vue";
 import ErrorAlert from "@/components/ErrorAlert.vue";
@@ -26,7 +26,7 @@ import EodashOverlay from "@/components/EodashOverlay.vue";
 
 const props = defineProps({
   config: {
-    type: String,
+    type: [String, Function],
   },
   isWebComponent: {
     type: Boolean,
@@ -37,18 +37,25 @@ const props = defineProps({
 useURLSearchParametersSync();
 
 const eodash = await useEodashRuntime(props.config);
+if (!eodash) {
+  throw new Error(
+    "Eodash configuration is not defined. Please provide a valid configuration file or object.",
+  );
+}
 
 const theme = useUpdateTheme("dashboardTheme", {
-  ...(eodash.brand?.theme ?? {}),
+  ...(eodash?.brand?.theme ?? {}),
 });
-theme.global.name.value = "dashboardTheme";
+theme.change("dashboardTheme");
 
-await loadFont(eodash.brand?.font, props.isWebComponent);
+await loadFont(eodash?.brand?.font, props.isWebComponent);
 
-const { loadSTAC } = useSTAcStore();
-await loadSTAC();
+const { loadSTAC, init } = useSTAcStore();
+init(eodash.stacEndpoint);
+await loadSTAC(eodash.stacEndpoint);
 
 const { smAndDown } = useDisplay();
+
 const TemplateComponent = computed(() =>
   smAndDown.value
     ? defineAsyncComponent(() => import(`@/components/MobileLayout.vue`))
@@ -62,7 +69,7 @@ const FooterComponent = defineAsyncComponent(
   () => import(`@/components/Footer.vue`),
 );
 
-const templateHeight = props.isWebComponent ? "100%" : "100dvh";
+const templateHeight = "100%";
 
 const error = ref("");
 onErrorCaptured((e, comp, info) => {
@@ -75,37 +82,34 @@ onErrorCaptured((e, comp, info) => {
 </script>
 <style>
 .loading-container {
-  height: 100dvh;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 div.v-application__wrap {
-  min-height: fit-content;
+  height: 100%;
+  min-height: 100%;
 }
 eo-dash {
   overflow: hidden;
+  display: block;
 }
 /* set eox-elements colors css vars to match the theme */
-/*
-eox-layercontrol,
-eox-map,
-eox-drawtools,
-eox-timecontrol,
-eox-jsonform,
-eox-chart,
-eox-stacinfo,
-eox-itemfilter {
-  --primary-color: rgb(var(--v-theme-primary));
-  --eox-primary-color: rgb(var(--v-theme-primary));
-  --eox-secondary-color: rgb(var(--v-theme-secondary));
-  --eox-accent-color: rgb(var(--v-theme-accent));
-  --eox-error-color: rgb(var(--v-theme-error));
-  --eox-info-color: rgb(var(--v-theme-info));
-  --eox-success-color: rgb(var(--v-theme-success));
-  --eox-warning-color: rgb(var(--v-theme-warning));
-  --range-slider-color: rgb(var(--v-theme-primary));
-  --range-slider-track-color: rgb(var(--v-theme-on-primary));
-} */
+:root {
+  --eox-theme-light-primary: var(--v-theme-primary) !important;
+  --eox-theme-light-on-primary: var(--v-theme-on-primary) !important;
+  --eox-theme-light-secondary: var(--v-theme-secondary) !important;
+  --eox-theme-light-on-secondary: var(--v-theme-on-secondary) !important;
+  --eox-theme-light-surface: var(--v-theme-surface) !important;
+  --eox-theme-light-on-surface: var(--v-theme-on-surface) !important;
+  --eox-theme-light-background: var(--v-theme-background) !important;
+  --eox-theme-light-on-background: var(--v-theme-on-background) !important;
+  --eox-theme-light-accent: var(--v-theme-accent) !important;
+  --eox-theme-light-error: var(--v-theme-error) !important;
+  --eox-theme-light-info: var(--v-theme-info) !important;
+  --eox-theme-light-success: var(--v-theme-success) !important;
+  --eox-theme-light-warning: var(--v-theme-warning) !important;
+}
 </style>

package/core/client/vite-env.d.ts

@@ -23,3 +23,10 @@ declare module "stac-js/src/http.js" {
   const toAbsolute: (...args: string[]) => string;
   export { toAbsolute };
 }
+
+declare const __userConfigExist__: boolean;
+declare module "@eox/ui/vuetify/blueprint.js" {
+  import type { Blueprint } from "vuetify";
+  const eox: Blueprint;
+  export { eox };
+}

package/dist/client/{DashboardLayout-CkWvOMOW.js → DashboardLayout-ByVs1DrY.js}

@@ -1,10 +1,13 @@
-import { createBlock, openBlock, withCtx, createElementVNode, normalizeStyle, unref, createElementBlock, createCommentVNode, Suspense, resolveDynamicComponent, mergeProps, Fragment, renderList, Transition } from 'vue';
+import { createBlock, openBlock, withCtx, createElementVNode, unref, createElementBlock, createCommentVNode, normalizeStyle, Suspense, resolveDynamicComponent, mergeProps, Fragment, renderList, Transition } from 'vue';
 import '@eox/layout';
-import { _ as _export_sfc, F as useDefineTemplate } from './asWebComponent-CLhcT715.js';
-import { V as VMain } from './VMain-DJKG4SvM.js';
+import { _ as _export_sfc, F as useDefineTemplate } from './asWebComponent-By_7_JjS.js';
+import { V as VMain } from './VMain-PryTLU4a.js';
+
+const _style_0 = ".panel[data-v-835b2a14]{position:relative;overflow:auto;z-index:1;pointer-events:none}.pointer[data-v-835b2a14]{pointer-events:all}.bg-panel[data-v-835b2a14]{z-index:0;border-radius:0!important}.fade-enter-active[data-v-835b2a14],.fade-leave-active[data-v-835b2a14]{transition:opacity .25s ease}.fade-enter-from[data-v-835b2a14],.fade-leave-to[data-v-835b2a14]{opacity:0}.bg-surface[data-v-835b2a14],.bg-primary[data-v-835b2a14]{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;max-height:100%;overflow:auto;scrollbar-color:rgba(var(--v-theme-on-surface),.2) transparent;scrollbar-width:thin}.bg-surface[data-v-835b2a14]{background-color:rgba(var(--v-theme-surface),var(--v-surface-opacity, .8))!important}.bg-primary[data-v-835b2a14]{background-color:rgba(var(--v-theme-primary),var(--v-primary-opacity, .8))!important}";
 
 const _hoisted_1 = ["gap"];
 const _hoisted_2 = ["id", "h", "w", "x", "y"];
+const _hoisted_3 = { class: "bg-surface pointer" };
 
 
 const _sfc_main = {
@@ -13,19 +16,26 @@ const _sfc_main = {
 
 const { bgWidget, importedWidgets, gap } = useDefineTemplate();
 
+const layoutStyle = {
+  padding: gap.value + "px",
+  overflow: "hidden !important",
+};
+
 return (_ctx, _cache) => {
                                                        
 
   return (openBlock(), createBlock(VMain, null, {
     default: withCtx(() => [
       createElementVNode("eox-layout", {
+        mediaBreakpoints: [0, 960, 1920],
         gap: unref(gap),
-        style: normalizeStyle(`padding: ${unref(gap)}px`)
+        class: "layout-container",
+        style: layoutStyle
       }, [
         (unref(bgWidget)?.component)
           ? (openBlock(), createElementBlock("eox-layout-item", {
               key: unref(bgWidget).id,
-              class: "bg-panel bg-surface",
+              class: "bg-panel",
               style: normalizeStyle(`margin: -${unref(gap) + 1}px;`),
               x: "0",
               y: "0",
@@ -50,7 +60,7 @@ return (_ctx, _cache) => {
                 ? (openBlock(), createElementBlock("eox-layout-item", {
                     id: importedWidget.value.id.toString(),
                     key: importedWidget.value.id,
-                    class: "panel bg-surface",
+                    class: "panel",
                     h: importedWidget.value.layout.h,
                     w: importedWidget.value.layout.w,
                     x: importedWidget.value.layout.x,
@@ -58,10 +68,11 @@ return (_ctx, _cache) => {
                   }, [
                     (openBlock(), createBlock(Suspense, null, {
                       default: withCtx(() => [
-                        (openBlock(), createBlock(resolveDynamicComponent(importedWidget.value.component), mergeProps({
-                          key: importedWidget.value.id,
-                          ref_for: true
-                        }, importedWidget.value.props), null, 16 /* FULL_PROPS */))
+                        createElementVNode("div", _hoisted_3, [
+                          (openBlock(), createBlock(resolveDynamicComponent(importedWidget.value.component), mergeProps({
+                            key: importedWidget.value.id
+                          }, { ref_for: true }, importedWidget.value.props), null, 16 /* FULL_PROPS */))
+                        ])
                       ]),
                       _: 2 /* DYNAMIC */
                     }, 1024 /* DYNAMIC_SLOTS */))
@@ -71,7 +82,7 @@ return (_ctx, _cache) => {
             _: 2 /* DYNAMIC */
           }, 1024 /* DYNAMIC_SLOTS */))
         }), 128 /* KEYED_FRAGMENT */))
-      ], 12 /* STYLE, PROPS */, _hoisted_1)
+      ], 8 /* PROPS */, _hoisted_1)
     ]),
     _: 1 /* STABLE */
   }))
@@ -79,6 +90,6 @@ return (_ctx, _cache) => {
 }
 
 };
-const DashboardLayout = /*#__PURE__*/_export_sfc(_sfc_main, [['__scopeId',"data-v-7294ae56"]]);
+const DashboardLayout = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-835b2a14"]]);
 
 export { DashboardLayout as default };

package/dist/client/{DynamicWebComponent-DYBbpvUK.js → DynamicWebComponent-C3W7HSQm.js}

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

package/dist/client/{EodashDatePicker-CALmW3SI.js → EodashDatePicker-BIAf1sMT.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, r as useDisplay, Y as useSTAcStore, Z as useTransparentPanel, V as VBtn, v as VIcon, $ as eodashCollections, a0 as eodashCompareCollections } from './asWebComponent-By_7_JjS.js';
+import { x as datetime, k as getDatetimeProperty } from './helpers-Dy0Q13tP.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-Dqj4tbx2.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-DPznh8UB.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, Y as useSTAcStore, a5 as isFirstLoad } from './asWebComponent-By_7_JjS.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-Bhxjw4V2.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 { H as mapCompareEl, d as mapEl, I as getColFromLayer } from './helpers-Dy0Q13tP.js';
+import { _ as _export_sfc, Y as useSTAcStore, a1 as layerControlFormValueCompare, a2 as layerControlFormValue, a0 as eodashCompareCollections, $ as eodashCollections } from './asWebComponent-By_7_JjS.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-C5qTEffW.js

@@ -0,0 +1,61 @@
+import { ref, createElementBlock, openBlock, createBlock, unref, withCtx, createVNode, mergeProps } from 'vue';
+import { z as activeTemplate } from './helpers-Dy0Q13tP.js';
+import { mdiViewDashboard } from '@mdi/js';
+import { r as useDisplay, Z as useTransparentPanel, v as VIcon } from './asWebComponent-By_7_JjS.js';
+import { V as VTooltip } from './VTooltip-DZ0fjpB3.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 };