@eodash/eodash 5.0.0-alpha.2.22 → 5.0.0-alpha.2.24

package/core/client/asWebComponent.js

@@ -2,7 +2,10 @@ import App from "./App.vue";
 import { defineCustomElement } from "vue";
 import { registerPlugins } from "./plugins";
 
-/** @type {import("./asWebComponent").EodashConstructor} */
+/**
+ *  @type {import("vue").VueElementConstructor<
+ *  import("vue").ExtractPropTypes<{ config: string }>>}
+ * */
 export const Eodash = defineCustomElement(App, {
   shadowRoot: false,
   configureApp(app) {

package/core/client/eodash.js

@@ -10,8 +10,8 @@ import { currentUrl } from "./store/States";
 export const eodash = reactive({
   id: "demo",
   stacEndpoint:
-    // "https://eodashcatalog.eox.at/test-style/trilateral/catalog.json",
-    "https://gtif-cerulean.github.io/catalog/cerulean/catalog.json",
+    "https://eodashcatalog.eox.at/test-style/trilateral/catalog.json",
+  // "https://gtif-cerulean.github.io/catalog/cerulean/catalog.json",
   brand: {
     noLayout: true,
     name: "Demo",

package/core/client/main.js

@@ -1,3 +1,2 @@
 export { createEodash } from "@/composables/DefineEodash";
 export { default as store } from "@/store";
-export * from "@/types";

package/core/client/store/stac.js

@@ -46,7 +46,6 @@ export const useSTAcStore = defineStore("stac", () => {
   /**
    * Fetches root stac catalog and assign it to `stac`
    *
-   * @async
    * @param {import("@/types").StacEndpoint} [url=eodash.stacEndpoint] Default
    *   is `eodash.stacEndpoint`
    * @returns {Promise<void>}
@@ -76,7 +75,6 @@ export const useSTAcStore = defineStore("stac", () => {
   /**
    * Fetches selected stac object and assign it to `selectedStac`
    *
-   * @async
    * @param {string} relativePath - Stac link href
    * @returns {Promise<void>}
    * @see {@link selectedStac}
@@ -117,7 +115,6 @@ export const useSTAcStore = defineStore("stac", () => {
   /**
    * Fetches selected stac object and assign it to `selectedCompareStac`
    *
-   * @async
    * @param {string} relativePath - Stac link href
    * @returns {Promise<void>}
    * @see {@link selectedCompareStac}

package/core/client/types.d.ts

@@ -258,7 +258,7 @@ export interface EodashStore {
     getLayers: (el?: string) => object[];
 
     /**
-     * Register EPSG projection in `eox-map` and adds it to {@link EodashStore.states.availableMapProjection `availableMapProjection`` }
+     * Register EPSG projection in `eox-map` and adds it to  `availableMapProjection`
      * */
     registerProjection: (
       code?: number | string | { name: string; def: string },
@@ -276,3 +276,4 @@ export interface EodashStore {
   };
 }
 ///////
+export { createEodash, store } from "./main.js";

package/core/client/utils/createLayers.js

@@ -16,6 +16,7 @@ import log from "loglevel";
  * @param {import("ol/layer/WebGLTile").Style} [style]
  * @param {Record<string, unknown>} [layerConfig]
  * @param {Record<string, unknown>} [layerDatetime]
+ * @param {object | null} [extraProperties]
  **/
 export async function createLayersFromAssets(
   collectionId,
@@ -25,6 +26,7 @@ export async function createLayersFromAssets(
   style,
   layerConfig,
   layerDatetime,
+  extraProperties,
 ) {
   log.debug("Creating layers from assets");
   let jsonArray = [];
@@ -64,6 +66,9 @@ export async function createLayersFromAssets(
         ...(!style?.variables && { style }),
       };
       extractRoles(layer.properties, assets[ast]);
+      if (extraProperties !== null) {
+        layer.properties = { ...layer.properties, ...extraProperties };
+      }
       jsonArray.push(layer);
     } else if (assets[ast]?.type === "image/tiff") {
       geoTIFFIdx = idx;
@@ -102,14 +107,14 @@ export async function createLayersFromAssets(
  * @param {import('stac-ts').StacItem} item
  * @param {string} title
  * @param {Record<string,any>} [layerDatetime]
- * @param {string | null} [legendInfo]
+ * @param {object | null} [extraProperties]
  */
 export const createLayersFromLinks = async (
   collectionId,
   title,
   item,
   layerDatetime,
-  legendInfo,
+  extraProperties,
 ) => {
   log.debug("Creating layers from links");
   /** @type {Record<string,any>[]} */
@@ -167,9 +172,8 @@ export const createLayersFromLinks = async (
       // Expand all dimensions into the params attribute
       Object.assign(json.source.params, wmsLink["wms:dimensions"]);
     }
-    if (legendInfo !== null) {
-      // @ts-expect-error once we have a eox-map config type we can remove this
-      json.properties.description = legendInfo;
+    if (extraProperties !== null) {
+      json.properties = { ...json.properties, ...extraProperties };
     }
     jsonArray.push(json);
   }
@@ -253,6 +257,9 @@ export const createLayersFromLinks = async (
       };
     }
     extractRoles(json.properties, wmtsLink);
+    if (extraProperties !== null) {
+      json.properties = { ...json.properties, ...extraProperties };
+    }
     jsonArray.push(json);
   }
 
@@ -286,6 +293,9 @@ export const createLayersFromLinks = async (
     };
 
     extractRoles(json.properties, xyzLink);
+    if (extraProperties !== null) {
+      json.properties = { ...json.properties, ...extraProperties };
+    }
     jsonArray.push(json);
   }
   return jsonArray;

package/core/client/utils/eodashSTAC.js

@@ -167,7 +167,7 @@ export class EodashCollection {
     // will try to extract anything it supports but for which we have
     // less control.
 
-    const { layerConfig, style } = extractLayerConfig(
+    let { layerConfig, style } = extractLayerConfig(
       await fetchStyle(item, itemUrl),
     );
 
@@ -188,19 +188,26 @@ export class EodashCollection {
 
     if (isSupported) {
       // Checking for potential legend asset
-      let legendInfo = null;
+      let extraProperties = null;
       if (this.#collectionStac?.assets?.legend?.href) {
-        legendInfo = `
-          <div style="text-align:center; width: 100%">
+        extraProperties = {
+          description: `<div style="text-align:center; width: 100%">
             <img src="${this.#collectionStac.assets.legend.href}" style="max-height:70px; margin-top:-15px; margin-bottom:-20px;" />
-          </div>`;
+          </div>`,
+        };
+      }
+      // Check if collection has eox:colorlegend definition, if yes overwrite legend description
+      if (this.#collectionStac && this.#collectionStac["eox:colorlegend"]) {
+        extraProperties = {
+          layerLegend: this.#collectionStac["eox:colorlegend"],
+        };
       }
       const links = await createLayersFromLinks(
         this.#collectionStac?.id ?? "",
         title,
         item,
         layerDatetime,
-        legendInfo,
+        extraProperties,
       );
       jsonArray.push(
         ...links,
@@ -212,6 +219,7 @@ export class EodashCollection {
           style,
           layerConfig,
           layerDatetime,
+          extraProperties,
         )),
       );
     } else {

package/core/client/utils/helpers.js

@@ -43,7 +43,7 @@ export function generateFeatures(links) {
   return geojsonObject;
 }
 
-/** @param { import("ol/layer/WebGLTile").Style & { jsonform?: Record<string,any> } } [style] */
+/** @param { import("ol/layer/WebGLTile").Style & { jsonform?: Record<string,any> } & { legend?: Record<string,any> } } [style] */
 export function extractLayerConfig(style) {
   /** @type {Record<string,unknown> | undefined} */
   let layerConfig = undefined;
@@ -51,6 +51,10 @@ export function extractLayerConfig(style) {
     layerConfig = { schema: style.jsonform, type: "style" };
     style = { ...style };
     delete style.jsonform;
+    if (style?.legend) {
+      layerConfig.legend = style.legend;
+      delete style.legend;
+    }
   }
   log.debug(
     "extracted layerConfig",

package/dist/client/{DashboardLayout-CWMOVmk3.js → DashboardLayout-DXDjBC-p.js}

@@ -1,7 +1,7 @@
 import { inject, openBlock, createBlock, withCtx, createElementVNode, unref, createElementBlock, Suspense, resolveDynamicComponent, mergeProps, createCommentVNode, Fragment, renderList, Transition } from 'vue';
-import { _ as _export_sfc, F as eodashKey, G as useDefineWidgets } from './asWebComponent-BwGwLkRd.js';
+import { _ as _export_sfc, F as eodashKey, G as useDefineWidgets } from './asWebComponent-DMuA5f9s.js';
 import '@eox/layout';
-import { V as VMain } from './VMain-B8ng5Iq2.js';
+import { V as VMain } from './VMain-B-MLcE-i.js';
 
 const _hoisted_1 = ["gap"];
 const _hoisted_2 = {

package/dist/client/{DynamicWebComponent-B-mjw5sF.js → DynamicWebComponent-BJ5-IY6R.js}

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

package/dist/client/{EodashDatePicker-txc8DnNS.js → EodashDatePicker-I6KQaEyw.js}

@@ -1,11 +1,11 @@
 import { computed, ref, mergeProps, createVNode, resolveComponent, render, h, useCssVars, customRef, reactive, watch, onMounted, openBlock, createElementBlock, Fragment, unref, createSlots, withCtx, createElementVNode, toHandlers, withDirectives, createBlock } from 'vue';
 import { DatePicker } from 'v-calendar';
 import { storeToRefs } from 'pinia';
-import { p as propsFactory, o as omit, g as genericComponent, j as useProxiedModel, Y as getUid, a as useRender, E as isObject, Z as datetime, $ as useSTAcStore, a0 as eodashCollections, a1 as VRow, V as VBtn, y as VIcon } from './asWebComponent-BwGwLkRd.js';
+import { p as propsFactory, o as omit, g as genericComponent, j as useProxiedModel, Y as getUid, a as useRender, E as isObject, Z as datetime, $ as useSTAcStore, a0 as eodashCollections, a1 as VRow, V as VBtn, y as VIcon } from './asWebComponent-DMuA5f9s.js';
 import { mdiRayEndArrow, mdiRayStartArrow } from '@mdi/js';
 import log from 'loglevel';
-import { m as makeVOverlayProps, V as VOverlay } from './VOverlay-C2dm6npC.js';
-import { b as useScopeId, f as forwardRefs } from './forwardRefs-BS7kubfY.js';
+import { m as makeVOverlayProps, V as VOverlay } from './VOverlay-BvYPb1bZ.js';
+import { b as useScopeId, f as forwardRefs } from './forwardRefs-D3tZz55-.js';
 
 const makeVTooltipProps = propsFactory({
   id: String,

package/dist/client/{EodashItemFilter-e1TSlLwN.js → EodashItemFilter-CuX_el88.js}

@@ -1,5 +1,5 @@
 import { ref, onMounted, openBlock, createElementBlock, mergeProps, createElementVNode, toDisplayString } from 'vue';
-import { $ as useSTAcStore } from './asWebComponent-BwGwLkRd.js';
+import { $ as useSTAcStore } from './asWebComponent-DMuA5f9s.js';
 import '@eox/itemfilter';
 
 const _hoisted_1 = {

package/dist/client/{EodashLayerControl-Nb534QRR.js → EodashLayerControl-QXaIbd4a.js}

@@ -2,7 +2,8 @@ import { computed, ref, openBlock, createElementBlock, unref, createCommentVNode
 import '@eox/layercontrol';
 import '@eox/jsonform';
 import '@eox/timecontrol';
-import { $ as useSTAcStore, a2 as mapCompareEl, a3 as mapEl, a4 as eodashCompareCollections, a0 as eodashCollections, a5 as getColFromLayer } from './asWebComponent-BwGwLkRd.js';
+import 'color-legend-element';
+import { $ as useSTAcStore, a2 as mapCompareEl, a3 as mapEl, a4 as eodashCompareCollections, a0 as eodashCollections, a5 as getColFromLayer } from './asWebComponent-DMuA5f9s.js';
 import { storeToRefs } from 'pinia';
 
 const _hoisted_1 = { class: "d-flex flex-column fill-height overflow-auto" };
@@ -94,7 +95,7 @@ return (_ctx, _cache) => {
       ? (openBlock(), createElementBlock("eox-layercontrol", {
           key: 0,
           for: unref(mapElement),
-          ".tools": ['datetime', 'info', 'config', 'opacity'],
+          ".tools": ['datetime', 'info', 'config', 'legend', 'opacity'],
           "onDatetime:updated": debouncedHandleDateTime,
           class: "fill-height",
           toolsAsList: "true",

package/dist/client/{EodashMap-aSeMCdc9.js → EodashMap-PD1dCjMS.js}

@@ -1,7 +1,7 @@
 import { onMounted, onUnmounted, watch, ref, computed, openBlock, createElementBlock, createElementVNode } from 'vue';
 import '@eox/map';
 import '@eox/map/dist/eox-map-advanced-layers-and-sources.js';
-import { $ as useSTAcStore, a6 as setMapProjFromCol, a7 as EodashCollection, a8 as mapPosition, a3 as mapEl, a2 as mapCompareEl, Z as datetime, a4 as eodashCompareCollections, a0 as eodashCollections } from './asWebComponent-BwGwLkRd.js';
+import { $ as useSTAcStore, a6 as setMapProjFromCol, a7 as EodashCollection, a8 as mapPosition, a3 as mapEl, a2 as mapCompareEl, Z as datetime, a4 as eodashCompareCollections, a0 as eodashCollections } from './asWebComponent-DMuA5f9s.js';
 import { storeToRefs } from 'pinia';
 import log from 'loglevel';
 

package/dist/client/{EodashMapBtns-Ca1Qhr1g.js → EodashMapBtns-DzguYarW.js}

@@ -1,7 +1,7 @@
 import { ref, openBlock, createElementBlock, createBlock, unref, createCommentVNode } from 'vue';
-import { _ as _export_sfc, a9 as makePanelTransparent, V as VBtn, aa as availableMapProjection, ab as changeMapProjection } from './asWebComponent-BwGwLkRd.js';
+import { _ as _export_sfc, a9 as makePanelTransparent, V as VBtn, aa as availableMapProjection, ab as changeMapProjection } from './asWebComponent-DMuA5f9s.js';
 import { mdiMapPlus, mdiEarthBox } from '@mdi/js';
-import ExportState from './ExportState-th1Fi4rX.js';
+import ExportState from './ExportState-CzxCA7c4.js';
 
 const _sfc_main = {
   __name: 'EodashMapBtns',

package/dist/client/{ExportState-th1Fi4rX.js → ExportState-CzxCA7c4.js}

@@ -1,9 +1,9 @@
 import { createVNode, Fragment, computed, withDirectives, mergeProps, resolveDirective, toRef, mergeModels, useModel, ref, openBlock, createBlock, withCtx, createElementVNode, createTextVNode, toDisplayString, unref, createElementBlock, createCommentVNode, renderList } from 'vue';
 import { mdiClipboardCheckOutline, mdiContentCopy } from '@mdi/js';
-import _sfc_main$1 from './PopUp-De5xHsQY.js';
-import { ac as createSimpleFunctional, g as genericComponent, b as makeComponentProps, D as provideDefaults, a as useRender, p as propsFactory, c as makeTagProps, I as IconValue, L as makeBorderProps, A as makeDensityProps, N as makeRoundedProps, ad as makeSizeProps, d as makeThemeProps, ae as makeVariantProps, e as provideTheme, O as useBorder, af as useVariant, B as useDensity, Q as useRounded, ag as useSize, y as VIcon, R as VDefaultsProvider, ah as genOverlays, J as makeDimensionProps, M as makeElevationProps, ai as makeLoaderProps, aj as makeLocationProps, ak as makePositionProps, al as makeRouterProps, am as Ripple, K as useDimension, P as useElevation, an as useLoader, ao as useLocation, ap as usePosition, aq as useLink, ar as LoaderSlot, u as useTextColor, q as convertToUnit, _ as _export_sfc, as as getLayers, a8 as mapPosition, at as removeUnneededProperties, a1 as VRow, au as VCol, V as VBtn, av as copyToClipBoard } from './asWebComponent-BwGwLkRd.js';
-import { a as VExpandTransition } from './index-B7oio0aX.js';
-import { V as VImg } from './VImg-DSVHjLea.js';
+import _sfc_main$1 from './PopUp-B62ZJOjC.js';
+import { ac as createSimpleFunctional, g as genericComponent, b as makeComponentProps, D as provideDefaults, a as useRender, p as propsFactory, c as makeTagProps, I as IconValue, L as makeBorderProps, A as makeDensityProps, N as makeRoundedProps, ad as makeSizeProps, d as makeThemeProps, ae as makeVariantProps, e as provideTheme, O as useBorder, af as useVariant, B as useDensity, Q as useRounded, ag as useSize, y as VIcon, R as VDefaultsProvider, ah as genOverlays, J as makeDimensionProps, M as makeElevationProps, ai as makeLoaderProps, aj as makeLocationProps, ak as makePositionProps, al as makeRouterProps, am as Ripple, K as useDimension, P as useElevation, an as useLoader, ao as useLocation, ap as usePosition, aq as useLink, ar as LoaderSlot, u as useTextColor, q as convertToUnit, _ as _export_sfc, as as getLayers, a8 as mapPosition, at as removeUnneededProperties, a1 as VRow, au as VCol, V as VBtn, av as copyToClipBoard } from './asWebComponent-DMuA5f9s.js';
+import { a as VExpandTransition } from './index-DsMetMaJ.js';
+import { V as VImg } from './VImg-QLk7OX01.js';
 
 // Styles
 const VSpacer = createSimpleFunctional('v-spacer', 'div', 'VSpacer');

package/dist/client/{Footer-D1svRzeT.js → Footer-DEajGQxT.js}

@@ -1,5 +1,5 @@
 import { ref, toRef, shallowRef, computed, createVNode, watchEffect, inject, openBlock, createBlock, unref, withCtx, createElementVNode, toDisplayString, createTextVNode } from 'vue';
-import { p as propsFactory, L as makeBorderProps, b as makeComponentProps, M as makeElevationProps, U as makeLayoutItemProps, N as makeRoundedProps, c as makeTagProps, d as makeThemeProps, g as genericComponent, e as provideTheme, C as useBackgroundColor, O as useBorder, P as useElevation, Q as useRounded, v as useResizeObserver, W as useToggleScope, a as useRender, q as convertToUnit, X as useLayoutItem, _ as _export_sfc, F as eodashKey, t as useDisplay } from './asWebComponent-BwGwLkRd.js';
+import { p as propsFactory, L as makeBorderProps, b as makeComponentProps, M as makeElevationProps, U as makeLayoutItemProps, N as makeRoundedProps, c as makeTagProps, d as makeThemeProps, g as genericComponent, e as provideTheme, C as useBackgroundColor, O as useBorder, P as useElevation, Q as useRounded, v as useResizeObserver, W as useToggleScope, a as useRender, q as convertToUnit, X as useLayoutItem, _ as _export_sfc, F as eodashKey, t as useDisplay } from './asWebComponent-DMuA5f9s.js';
 
 const makeVFooterProps = propsFactory({
   app: Boolean,

package/dist/client/{Header-CHbpzVuR.js → Header-B0UJlW9C.js}

@@ -1,7 +1,7 @@
 import { createVNode, toRef, shallowRef, computed, ref, watch, onMounted, onBeforeUnmount, mergeProps, watchEffect, inject, openBlock, createBlock, withCtx, createTextVNode, toDisplayString, unref } from 'vue';
-import { p as propsFactory, b as makeComponentProps, c as makeTagProps, g as genericComponent, a as useRender, L as makeBorderProps, M as makeElevationProps, N as makeRoundedProps, d as makeThemeProps, C as useBackgroundColor, O as useBorder, P as useElevation, Q as useRounded, e as provideTheme, f as useRtl, D as provideDefaults, R as VDefaultsProvider, q as convertToUnit, S as clamp, T as consoleWarn, U as makeLayoutItemProps, j as useProxiedModel, W as useToggleScope, X as useLayoutItem, _ as _export_sfc, F as eodashKey } from './asWebComponent-BwGwLkRd.js';
-import { a as VExpandTransition } from './index-B7oio0aX.js';
-import { V as VImg } from './VImg-DSVHjLea.js';
+import { p as propsFactory, b as makeComponentProps, c as makeTagProps, g as genericComponent, a as useRender, L as makeBorderProps, M as makeElevationProps, N as makeRoundedProps, d as makeThemeProps, C as useBackgroundColor, O as useBorder, P as useElevation, Q as useRounded, e as provideTheme, f as useRtl, D as provideDefaults, R as VDefaultsProvider, q as convertToUnit, S as clamp, T as consoleWarn, U as makeLayoutItemProps, j as useProxiedModel, W as useToggleScope, X as useLayoutItem, _ as _export_sfc, F as eodashKey } from './asWebComponent-DMuA5f9s.js';
+import { a as VExpandTransition } from './index-DsMetMaJ.js';
+import { V as VImg } from './VImg-QLk7OX01.js';
 import { u as useSsrBoot } from './ssrBoot-BP7SYRyC.js';
 
 const makeVToolbarTitleProps = propsFactory({

package/dist/client/{MobileLayout-gsqIEStj.js → MobileLayout-9o2BIRae.js}

@@ -1,10 +1,10 @@
 import { ref, computed, createVNode, mergeProps, Fragment, shallowRef, watch, provide, withDirectives, resolveDirective, inject, vShow, nextTick, toRef, useCssVars, onMounted, openBlock, createBlock, withCtx, Suspense, unref, resolveDynamicComponent, createCommentVNode, createElementBlock, renderList, createTextVNode, createElementVNode, toDisplayString } from 'vue';
-import { k as keys, p as propsFactory, o as omit, m as makeVBtnProps, g as genericComponent, u as useTextColor, a as useRender, V as VBtn, b as makeComponentProps, c as makeTagProps, d as makeThemeProps, e as provideTheme, f as useRtl, h as useLocale, i as useGroup, j as useProxiedModel, l as makeGroupItemProps, n as useGroupItem, q as convertToUnit, I as IconValue, r as makeDisplayProps, s as makeGroupProps, t as useDisplay, v as useResizeObserver, w as useGoTo, x as IN_BROWSER, y as VIcon, z as focusableChildren, A as makeDensityProps, B as useDensity, C as useBackgroundColor, D as provideDefaults, E as isObject, _ as _export_sfc, F as eodashKey, G as useDefineWidgets, H as useLayout } from './asWebComponent-BwGwLkRd.js';
-import { V as VMain } from './VMain-B8ng5Iq2.js';
-import { f as forwardRefs, a as animate, s as standardEasing, m as makeLazyProps, u as useLazy, b as useScopeId } from './forwardRefs-BS7kubfY.js';
+import { k as keys, p as propsFactory, o as omit, m as makeVBtnProps, g as genericComponent, u as useTextColor, a as useRender, V as VBtn, b as makeComponentProps, c as makeTagProps, d as makeThemeProps, e as provideTheme, f as useRtl, h as useLocale, i as useGroup, j as useProxiedModel, l as makeGroupItemProps, n as useGroupItem, q as convertToUnit, I as IconValue, r as makeDisplayProps, s as makeGroupProps, t as useDisplay, v as useResizeObserver, w as useGoTo, x as IN_BROWSER, y as VIcon, z as focusableChildren, A as makeDensityProps, B as useDensity, C as useBackgroundColor, D as provideDefaults, E as isObject, _ as _export_sfc, F as eodashKey, G as useDefineWidgets, H as useLayout } from './asWebComponent-DMuA5f9s.js';
+import { V as VMain } from './VMain-B-MLcE-i.js';
+import { f as forwardRefs, a as animate, s as standardEasing, m as makeLazyProps, u as useLazy, b as useScopeId } from './forwardRefs-D3tZz55-.js';
 import { u as useSsrBoot } from './ssrBoot-BP7SYRyC.js';
-import { M as MaybeTransition } from './transition-BDNLuegD.js';
-import { V as VFadeTransition } from './index-B7oio0aX.js';
+import { M as MaybeTransition } from './transition-BLWVvxR6.js';
+import { V as VFadeTransition } from './index-DsMetMaJ.js';
 
 // Utilities
 const handleGesture = wrapper => {

package/dist/client/{PopUp-De5xHsQY.js → PopUp-B62ZJOjC.js}

@@ -1,7 +1,7 @@
 import { createVNode, Transition, mergeProps, ref, watch, nextTick, toRef, mergeModels, useModel, openBlock, createElementBlock, withCtx, createBlock, resolveDynamicComponent, unref, createCommentVNode, renderSlot } from 'vue';
-import { g as genericComponent, p as propsFactory, j as useProxiedModel, x as IN_BROWSER, a as useRender, z as focusableChildren, R as VDefaultsProvider, L as makeBorderProps, b as makeComponentProps, J as makeDimensionProps, M as makeElevationProps, aj as makeLocationProps, ak as makePositionProps, N as makeRoundedProps, c as makeTagProps, d as makeThemeProps, e as provideTheme, C as useBackgroundColor, O as useBorder, K as useDimension, P as useElevation, ao as useLocation, ap as usePosition, Q as useRounded, G as useDefineWidgets } from './asWebComponent-BwGwLkRd.js';
-import { m as makeVOverlayProps, V as VOverlay } from './VOverlay-C2dm6npC.js';
-import { a as animate, d as deceleratedEasing, s as standardEasing, c as acceleratedEasing, g as getTargetBox, n as nullifyTransforms, b as useScopeId, f as forwardRefs } from './forwardRefs-BS7kubfY.js';
+import { g as genericComponent, p as propsFactory, j as useProxiedModel, x as IN_BROWSER, a as useRender, z as focusableChildren, R as VDefaultsProvider, L as makeBorderProps, b as makeComponentProps, J as makeDimensionProps, M as makeElevationProps, aj as makeLocationProps, ak as makePositionProps, N as makeRoundedProps, c as makeTagProps, d as makeThemeProps, e as provideTheme, C as useBackgroundColor, O as useBorder, K as useDimension, P as useElevation, ao as useLocation, ap as usePosition, Q as useRounded, G as useDefineWidgets } from './asWebComponent-DMuA5f9s.js';
+import { m as makeVOverlayProps, V as VOverlay } from './VOverlay-BvYPb1bZ.js';
+import { a as animate, d as deceleratedEasing, s as standardEasing, c as acceleratedEasing, g as getTargetBox, n as nullifyTransforms, b as useScopeId, f as forwardRefs } from './forwardRefs-D3tZz55-.js';
 
 const makeVDialogTransitionProps = propsFactory({
   target: [Object, Array]

package/dist/client/{VImg-DSVHjLea.js → VImg-QLk7OX01.js}

@@ -1,6 +1,6 @@
 import { createVNode, computed, toRef, shallowRef, ref, watch, onBeforeMount, nextTick, onBeforeUnmount, withDirectives, mergeProps, Fragment, resolveDirective, vShow } from 'vue';
-import { aw as SUPPORTS_INTERSECTION, p as propsFactory, b as makeComponentProps, J as makeDimensionProps, g as genericComponent, K as useDimension, a as useRender, N as makeRoundedProps, C as useBackgroundColor, Q as useRounded, ax as getCurrentInstance, q as convertToUnit } from './asWebComponent-BwGwLkRd.js';
-import { m as makeTransitionProps, M as MaybeTransition } from './transition-BDNLuegD.js';
+import { aw as SUPPORTS_INTERSECTION, p as propsFactory, b as makeComponentProps, J as makeDimensionProps, g as genericComponent, K as useDimension, a as useRender, N as makeRoundedProps, C as useBackgroundColor, Q as useRounded, ax as getCurrentInstance, q as convertToUnit } from './asWebComponent-DMuA5f9s.js';
+import { m as makeTransitionProps, M as MaybeTransition } from './transition-BLWVvxR6.js';
 
 // Utilities
 function mounted(el, binding) {

package/dist/client/{VMain-B8ng5Iq2.js → VMain-B-MLcE-i.js}

@@ -1,5 +1,5 @@
 import { createVNode } from 'vue';
-import { p as propsFactory, b as makeComponentProps, J as makeDimensionProps, c as makeTagProps, g as genericComponent, K as useDimension, H as useLayout, a as useRender } from './asWebComponent-BwGwLkRd.js';
+import { p as propsFactory, b as makeComponentProps, J as makeDimensionProps, c as makeTagProps, g as genericComponent, K as useDimension, H as useLayout, a as useRender } from './asWebComponent-DMuA5f9s.js';
 import { u as useSsrBoot } from './ssrBoot-BP7SYRyC.js';
 
 const makeVMainProps = propsFactory({

package/dist/client/{VOverlay-C2dm6npC.js → VOverlay-BvYPb1bZ.js}

@@ -1,7 +1,7 @@
 import { ref, watch, onScopeDispose, computed, nextTick, watchEffect, effectScope, inject, mergeProps, shallowRef, onMounted, reactive, provide, readonly, toRaw, warn, toRef, onBeforeUnmount, createVNode, Fragment, Teleport, withDirectives, vShow, resolveDirective, Transition } from 'vue';
-import { ay as isOn, az as eventName, p as propsFactory, x as IN_BROWSER, W as useToggleScope, aA as destructComputed, aB as parseAnchor, aC as flipSide, aD as flipAlign, aE as flipCorner, aF as consoleError, aG as getAxis, q as convertToUnit, S as clamp, aH as defer, ax as getCurrentInstance, aI as templateRef, aJ as matchesSelector, t as useDisplay, b as makeComponentProps, J as makeDimensionProps, d as makeThemeProps, g as genericComponent, j as useProxiedModel, e as provideTheme, f as useRtl, C as useBackgroundColor, K as useDimension, aK as useRouter, a as useRender, aL as useBackButton } from './asWebComponent-BwGwLkRd.js';
-import { g as getTargetBox, B as Box, e as getOverflow, n as nullifyTransforms, m as makeLazyProps, u as useLazy, b as useScopeId, a as animate, s as standardEasing } from './forwardRefs-BS7kubfY.js';
-import { m as makeTransitionProps, M as MaybeTransition } from './transition-BDNLuegD.js';
+import { ay as isOn, az as eventName, p as propsFactory, x as IN_BROWSER, W as useToggleScope, aA as destructComputed, aB as parseAnchor, aC as flipSide, aD as flipAlign, aE as flipCorner, aF as consoleError, aG as getAxis, q as convertToUnit, S as clamp, aH as defer, ax as getCurrentInstance, aI as templateRef, aJ as matchesSelector, t as useDisplay, b as makeComponentProps, J as makeDimensionProps, d as makeThemeProps, g as genericComponent, j as useProxiedModel, e as provideTheme, f as useRtl, C as useBackgroundColor, K as useDimension, aK as useRouter, a as useRender, aL as useBackButton } from './asWebComponent-DMuA5f9s.js';
+import { g as getTargetBox, B as Box, e as getOverflow, n as nullifyTransforms, m as makeLazyProps, u as useLazy, b as useScopeId, a as animate, s as standardEasing } from './forwardRefs-D3tZz55-.js';
+import { m as makeTransitionProps, M as MaybeTransition } from './transition-BLWVvxR6.js';
 
 // Utilities
 const handlers = new WeakMap();

package/dist/client/{WidgetsContainer-DGFO2398.js → WidgetsContainer-DrniIeya.js}

@@ -1,5 +1,5 @@
 import { ref, onMounted, nextTick, openBlock, createElementBlock, Fragment, renderList, unref, createElementVNode, toDisplayString, normalizeStyle, createBlock, resolveDynamicComponent, mergeProps } from 'vue';
-import { G as useDefineWidgets, H as useLayout } from './asWebComponent-BwGwLkRd.js';
+import { G as useDefineWidgets, H as useLayout } from './asWebComponent-DMuA5f9s.js';
 import 'animated-details';
 
 const _sfc_main = {

package/dist/client/{asWebComponent-BwGwLkRd.js → asWebComponent-DMuA5f9s.js}

@@ -3830,7 +3830,7 @@ function generateFeatures(links) {
   return geojsonObject;
 }
 
-/** @param { import("ol/layer/WebGLTile").Style & { jsonform?: Record<string,any> } } [style] */
+/** @param { import("ol/layer/WebGLTile").Style & { jsonform?: Record<string,any> } & { legend?: Record<string,any> } } [style] */
 function extractLayerConfig(style) {
   /** @type {Record<string,unknown> | undefined} */
   let layerConfig = undefined;
@@ -3838,6 +3838,10 @@ function extractLayerConfig(style) {
     layerConfig = { schema: style.jsonform, type: "style" };
     style = { ...style };
     delete style.jsonform;
+    if (style?.legend) {
+      layerConfig.legend = style.legend;
+      delete style.legend;
+    }
   }
   log.debug(
     "extracted layerConfig",
@@ -4236,8 +4240,8 @@ const __vite_glob_0_0 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.definePro
 const eodash = reactive({
   id: "demo",
   stacEndpoint:
-    // "https://eodashcatalog.eox.at/test-style/trilateral/catalog.json",
-    "https://gtif-cerulean.github.io/catalog/cerulean/catalog.json",
+    "https://eodashcatalog.eox.at/test-style/trilateral/catalog.json",
+  // "https://gtif-cerulean.github.io/catalog/cerulean/catalog.json",
   brand: {
     noLayout: true,
     name: "Demo",
@@ -7943,6 +7947,7 @@ const eodashCompareCollections = shallowReactive([]);
  * @param {import("ol/layer/WebGLTile").Style} [style]
  * @param {Record<string, unknown>} [layerConfig]
  * @param {Record<string, unknown>} [layerDatetime]
+ * @param {object | null} [extraProperties]
  **/
 async function createLayersFromAssets(
   collectionId,
@@ -7952,6 +7957,7 @@ async function createLayersFromAssets(
   style,
   layerConfig,
   layerDatetime,
+  extraProperties,
 ) {
   log.debug("Creating layers from assets");
   let jsonArray = [];
@@ -7991,6 +7997,9 @@ async function createLayersFromAssets(
         ...(!style?.variables && { style }),
       };
       extractRoles(layer.properties, assets[ast]);
+      if (extraProperties !== null) {
+        layer.properties = { ...layer.properties, ...extraProperties };
+      }
       jsonArray.push(layer);
     } else if (assets[ast]?.type === "image/tiff") {
       geoTIFFIdx = idx;
@@ -8029,14 +8038,14 @@ async function createLayersFromAssets(
  * @param {import('stac-ts').StacItem} item
  * @param {string} title
  * @param {Record<string,any>} [layerDatetime]
- * @param {string | null} [legendInfo]
+ * @param {object | null} [extraProperties]
  */
 const createLayersFromLinks = async (
   collectionId,
   title,
   item,
   layerDatetime,
-  legendInfo,
+  extraProperties,
 ) => {
   log.debug("Creating layers from links");
   /** @type {Record<string,any>[]} */
@@ -8094,9 +8103,8 @@ const createLayersFromLinks = async (
       // Expand all dimensions into the params attribute
       Object.assign(json.source.params, wmsLink["wms:dimensions"]);
     }
-    if (legendInfo !== null) {
-      // @ts-expect-error once we have a eox-map config type we can remove this
-      json.properties.description = legendInfo;
+    if (extraProperties !== null) {
+      json.properties = { ...json.properties, ...extraProperties };
     }
     jsonArray.push(json);
   }
@@ -8180,6 +8188,9 @@ const createLayersFromLinks = async (
       };
     }
     extractRoles(json.properties, wmtsLink);
+    if (extraProperties !== null) {
+      json.properties = { ...json.properties, ...extraProperties };
+    }
     jsonArray.push(json);
   }
 
@@ -8213,6 +8224,9 @@ const createLayersFromLinks = async (
     };
 
     extractRoles(json.properties, xyzLink);
+    if (extraProperties !== null) {
+      json.properties = { ...json.properties, ...extraProperties };
+    }
     jsonArray.push(json);
   }
   return jsonArray;
@@ -8367,7 +8381,7 @@ class EodashCollection {
     // will try to extract anything it supports but for which we have
     // less control.
 
-    const { layerConfig, style } = extractLayerConfig(
+    let { layerConfig, style } = extractLayerConfig(
       await fetchStyle(item, itemUrl),
     );
 
@@ -8388,19 +8402,26 @@ class EodashCollection {
 
     if (isSupported) {
       // Checking for potential legend asset
-      let legendInfo = null;
+      let extraProperties = null;
       if (this.#collectionStac?.assets?.legend?.href) {
-        legendInfo = `
-          <div style="text-align:center; width: 100%">
+        extraProperties = {
+          description: `<div style="text-align:center; width: 100%">
             <img src="${this.#collectionStac.assets.legend.href}" style="max-height:70px; margin-top:-15px; margin-bottom:-20px;" />
-          </div>`;
+          </div>`,
+        };
+      }
+      // Check if collection has eox:colorlegend definition, if yes overwrite legend description
+      if (this.#collectionStac && this.#collectionStac["eox:colorlegend"]) {
+        extraProperties = {
+          layerLegend: this.#collectionStac["eox:colorlegend"],
+        };
       }
       const links = await createLayersFromLinks(
         this.#collectionStac?.id ?? "",
         title,
         item,
         layerDatetime,
-        legendInfo,
+        extraProperties,
       );
       jsonArray.push(
         ...links,
@@ -8412,6 +8433,7 @@ class EodashCollection {
           style,
           layerConfig,
           layerDatetime,
+          extraProperties,
         )),
       );
     } else {
@@ -8626,7 +8648,6 @@ const useSTAcStore = defineStore("stac", () => {
   /**
    * Fetches root stac catalog and assign it to `stac`
    *
-   * @async
    * @param {import("@/types").StacEndpoint} [url=eodash.stacEndpoint] Default
    *   is `eodash.stacEndpoint`
    * @returns {Promise<void>}
@@ -8656,7 +8677,6 @@ const useSTAcStore = defineStore("stac", () => {
   /**
    * Fetches selected stac object and assign it to `selectedStac`
    *
-   * @async
    * @param {string} relativePath - Stac link href
    * @returns {Promise<void>}
    * @see {@link selectedStac}
@@ -8697,7 +8717,6 @@ const useSTAcStore = defineStore("stac", () => {
   /**
    * Fetches selected stac object and assign it to `selectedCompareStac`
    *
-   * @async
    * @param {string} relativePath - Stac link href
    * @returns {Promise<void>}
    * @see {@link selectedCompareStac}
@@ -8892,7 +8911,7 @@ const copyToClipBoard = async (text, showIcon) => {
 const internalWidgets = (() => {
   /** @type {Record<string, () => Promise<import("vue").Component>>} */
   const importMap = {
-    .../* #__PURE__ */ Object.assign({"/widgets/EodashDatePicker.vue": () => import('./EodashDatePicker-txc8DnNS.js'),"/widgets/EodashItemFilter.vue": () => import('./EodashItemFilter-e1TSlLwN.js'),"/widgets/EodashLayerControl.vue": () => import('./EodashLayerControl-Nb534QRR.js'),"/widgets/EodashMap.vue": () => import('./EodashMap-aSeMCdc9.js'),"/widgets/EodashMapBtns.vue": () => import('./EodashMapBtns-Ca1Qhr1g.js'),"/widgets/ExportState.vue": () => import('./ExportState-th1Fi4rX.js'),"/widgets/PopUp.vue": () => import('./PopUp-De5xHsQY.js'),"/widgets/WidgetsContainer.vue": () => import('./WidgetsContainer-DGFO2398.js')}),
+    .../* #__PURE__ */ Object.assign({"/widgets/EodashDatePicker.vue": () => import('./EodashDatePicker-I6KQaEyw.js'),"/widgets/EodashItemFilter.vue": () => import('./EodashItemFilter-CuX_el88.js'),"/widgets/EodashLayerControl.vue": () => import('./EodashLayerControl-QXaIbd4a.js'),"/widgets/EodashMap.vue": () => import('./EodashMap-PD1dCjMS.js'),"/widgets/EodashMapBtns.vue": () => import('./EodashMapBtns-DzguYarW.js'),"/widgets/ExportState.vue": () => import('./ExportState-CzxCA7c4.js'),"/widgets/PopUp.vue": () => import('./PopUp-B62ZJOjC.js'),"/widgets/WidgetsContainer.vue": () => import('./WidgetsContainer-DrniIeya.js')}),
     .../* #__PURE__ */ Object.assign({}),
   };
   for (const key in importMap) {
@@ -9001,7 +9020,7 @@ const getWidgetDefinition = (config) => {
 
     case "web-component":
       importedWidget.component = defineAsyncComponent({
-        loader: () => import('./DynamicWebComponent-B-mjw5sF.js'),
+        loader: () => import('./DynamicWebComponent-BJ5-IY6R.js'),
         suspensible: true,
       });
       importedWidget.props = reactive(config.widget);
@@ -11352,14 +11371,14 @@ const { loadSTAC } = useSTAcStore();
 
 const { smAndDown } = useDisplay();
 const TemplateComponent = smAndDown.value
-  ? defineAsyncComponent(() => import('./MobileLayout-gsqIEStj.js'))
-  : defineAsyncComponent(() => import('./DashboardLayout-CWMOVmk3.js'));
+  ? defineAsyncComponent(() => import('./MobileLayout-9o2BIRae.js'))
+  : defineAsyncComponent(() => import('./DashboardLayout-DXDjBC-p.js'));
 
 const HeaderComponent = defineAsyncComponent(
-  () => import('./Header-CHbpzVuR.js'),
+  () => import('./Header-B0UJlW9C.js'),
 );
 const FooterComponent = defineAsyncComponent(
-  () => import('./Footer-D1svRzeT.js'),
+  () => import('./Footer-DEajGQxT.js'),
 );
 
 const templateHeight = props.isWebComponent ? "100%" : "100dvh";
@@ -11540,7 +11559,10 @@ function registerPlugins(app) {
     .provide(eodashKey, eodash);
 }
 
-/** @type {import("./asWebComponent").EodashConstructor} */
+/**
+ *  @type {import("vue").VueElementConstructor<
+ *  import("vue").ExtractPropTypes<{ config: string }>>}
+ * */
 const Eodash = defineCustomElement(_sfc_main, {
   shadowRoot: false,
   configureApp(app) {

package/dist/client/eo-dash.js

@@ -1,2 +1,2 @@
-export { aM as Eodash, aN as register, aO as store } from './asWebComponent-BwGwLkRd.js';
+export { aM as Eodash, aN as register, aO as store } from './asWebComponent-DMuA5f9s.js';
 import 'vue';

package/dist/client/{forwardRefs-BS7kubfY.js → forwardRefs-D3tZz55-.js}

@@ -1,5 +1,5 @@
 import { shallowRef, computed, watch } from 'vue';
-import { p as propsFactory, ax as getCurrentInstance } from './asWebComponent-BwGwLkRd.js';
+import { p as propsFactory, ax as getCurrentInstance } from './asWebComponent-DMuA5f9s.js';
 
 class Box {
   constructor(_ref) {

package/dist/client/{index-B7oio0aX.js → index-DsMetMaJ.js}

@@ -1,5 +1,5 @@
 import { TransitionGroup, Transition, h, camelize } from 'vue';
-import { g as genericComponent, p as propsFactory } from './asWebComponent-BwGwLkRd.js';
+import { g as genericComponent, p as propsFactory } from './asWebComponent-DMuA5f9s.js';
 
 // Utilities
 const makeTransitionProps = propsFactory({

package/dist/client/{transition-BDNLuegD.js → transition-BLWVvxR6.js}

@@ -1,5 +1,5 @@
 import { h, mergeProps, TransitionGroup, Transition } from 'vue';
-import { p as propsFactory } from './asWebComponent-BwGwLkRd.js';
+import { p as propsFactory } from './asWebComponent-DMuA5f9s.js';
 
 // Utilities
 const makeTransitionProps = propsFactory({

package/dist/node/cli.js

@@ -17,4 +17,4 @@ ${o.lib?`<eo-dash style="height:100dvh;"/>
 <script type="module" src="${t.resolve(`/@fs/${c}`,"core/client/render.js")}"><\/script>
 `}
 </body>
-</html>`,x=w(async({mode:e,command:a})=>({base:o.base??"",cacheDir:Y,plugins:[H({template:{transformAssetUrls:J,compilerOptions:{isCustomElement:r=>!r.includes("v-")&&r.includes("-")}}}),M({autoImport:!0}),e==="development"&&{name:"inject-html",configureServer:G}],customLogger:g,define:{"process.env":{}},resolve:{alias:{"@":t.join(c,"core/client"),"^":t.join(c,"widgets"),"user:config":m,"user:widgets":D},extensions:[".js",".json",".jsx",".mjs",".ts",".tsx",".vue"]},server:{warmup:{clientFiles:[t.join(c,"core/client/**"),m]},port:o.port??3e3,open:o.open,fs:{allow:[W(process.cwd())]},host:o.host},root:c,...e==="development"&&{optimizeDeps:{include:["webfontloader","vuetify","vue","pinia","stac-js","urijs","loglevel"],noDiscovery:!0}},publicDir:o.publicDir===!1?!1:z,build:{outDir:v,emptyOutDir:!0,target:"esnext",cssMinify:!0,...o.lib&&a==="build"&&{minify:!1,lib:{entry:t.join(c,"core/client/asWebComponent.js"),fileName:"eo-dash",formats:["es"],name:"@eodash/eodash"},rollupOptions:{input:t.join(c,"core/client/asWebComponent.js"),external:r=>{const i=r.includes("vuetify")||r.endsWith(".css")||r.endsWith("styles"),n=V.some(l=>r.startsWith(l));return!i&&n}}}}})),k=w(async e=>o.vite?F(await x(e),o.vite):x(e));async function G(e){e.watcher.add([m,p,t.join(D,"**/*.vue")]);let a="";const r=g.info;return g.info=(i,n)=>{if(i.includes("core")){const l=i.split("/")[0].split(" ");l.pop();const d=l.join(" ")+" "+a.replace(s,"");return r(d,n)}return r(i,n)},e.watcher.on("change",async i=>{a=i,i===p&&e.ws.send({type:"full-reload",path:i})}),()=>{e.middlewares.use(async(i,n,l)=>{if(i.originalUrl==="/@fs/config.js"||i.originalUrl==="/config.js"){n.statusCode=200,n.setHeader("Content-Type","text/javascript"),u(p)&&await T(p).then(d=>{n.write(d)}),n.end();return}if(i.url?.endsWith(".html")){n.statusCode=200,n.setHeader("Content-Type","text/html");const d=await e.transformIndexHtml(i.url,C,i.originalUrl);n.end(d);return}l()})}}const K=async()=>{const e=await O(await k({mode:"development",command:"serve"}));await e.listen(),e.printUrls(),e.bindCLIShortcuts({print:!0})},Q=async()=>{const e=async()=>{const a=await k({mode:"production",command:"build"});await N(a),u(p)&&await A(p,t.join(v,"config.js"),{recursive:!0}).catch(r=>{console.error(r)})};if(o.lib)await e();else{const a=t.join(c,"/index.html");await $(a,C).then(async()=>{await e(),await L(a).catch(()=>{console.error("failed to remove index.html")})})}};async function X(){(await U({root:s,base:o.base??"",preview:{port:isNaN(o.port)?8080:o.port,open:o.open,host:o.host},build:{outDir:v}})).printUrls()}const Z=process.argv?.[2];(async()=>{switch(Z){case"dev":await K();break;case"build":await Q();break;case"preview":await X();break;default:console.error("command not found");break}})();
+</html>`,x=w(async({mode:e,command:a})=>({base:o.base??"",cacheDir:Y,plugins:[H({template:{transformAssetUrls:J,compilerOptions:{isCustomElement:r=>!r.includes("v-")&&r.includes("-")}}}),M({autoImport:!0}),e==="development"&&{name:"inject-html",configureServer:G}],customLogger:g,define:{"process.env":{}},resolve:{alias:{"@":t.join(c,"core/client"),"^":t.join(c,"widgets"),"user:config":m,"user:widgets":D},extensions:[".js",".json",".jsx",".mjs",".ts",".tsx",".vue"]},server:{warmup:{clientFiles:[t.join(c,"core/client/**"),m]},port:o.port??3e3,open:o.open,fs:{allow:[W(process.cwd())]},host:o.host},root:c,...e==="development"&&{optimizeDeps:{include:["webfontloader","vuetify","vue","pinia","stac-js","urijs","loglevel","color-legend-element"],noDiscovery:!0}},publicDir:o.publicDir===!1?!1:z,build:{outDir:v,emptyOutDir:!0,target:"esnext",cssMinify:!0,...o.lib&&a==="build"&&{minify:!1,lib:{entry:t.join(c,"core/client/asWebComponent.js"),fileName:"eo-dash",formats:["es"],name:"@eodash/eodash"},rollupOptions:{input:t.join(c,"core/client/asWebComponent.js"),external:r=>{const i=r.includes("vuetify")||r.endsWith(".css")||r.endsWith("styles"),n=V.some(l=>r.startsWith(l));return!i&&n}}}}})),k=w(async e=>o.vite?F(await x(e),o.vite):x(e));async function G(e){e.watcher.add([m,p,t.join(D,"**/*.vue")]);let a="";const r=g.info;return g.info=(i,n)=>{if(i.includes("core")){const l=i.split("/")[0].split(" ");l.pop();const d=l.join(" ")+" "+a.replace(s,"");return r(d,n)}return r(i,n)},e.watcher.on("change",async i=>{a=i,i===p&&e.ws.send({type:"full-reload",path:i})}),()=>{e.middlewares.use(async(i,n,l)=>{if(i.originalUrl==="/@fs/config.js"||i.originalUrl==="/config.js"){n.statusCode=200,n.setHeader("Content-Type","text/javascript"),u(p)&&await T(p).then(d=>{n.write(d)}),n.end();return}if(i.url?.endsWith(".html")){n.statusCode=200,n.setHeader("Content-Type","text/html");const d=await e.transformIndexHtml(i.url,C,i.originalUrl);n.end(d);return}l()})}}const K=async()=>{const e=await O(await k({mode:"development",command:"serve"}));await e.listen(),e.printUrls(),e.bindCLIShortcuts({print:!0})},Q=async()=>{const e=async()=>{const a=await k({mode:"production",command:"build"});await N(a),u(p)&&await A(p,t.join(v,"config.js"),{recursive:!0}).catch(r=>{console.error(r)})};if(o.lib)await e();else{const a=t.join(c,"/index.html");await $(a,C).then(async()=>{await e(),await L(a).catch(()=>{console.error("failed to remove index.html")})})}};async function X(){(await U({root:s,base:o.base??"",preview:{port:isNaN(o.port)?8080:o.port,open:o.open,host:o.host},build:{outDir:v}})).printUrls()}const Z=process.argv?.[2];(async()=>{switch(Z){case"dev":await K();break;case"build":await Q();break;case"preview":await X();break;default:console.error("command not found");break}})();

package/dist/types/core/client/asWebComponent.d.ts

@@ -1,4 +1,9 @@
 export function register(): void;
-/** @type {import("./asWebComponent").EodashConstructor} */
-export const Eodash: import("./asWebComponent").EodashConstructor;
+/**
+ *  @type {import("vue").VueElementConstructor<
+ *  import("vue").ExtractPropTypes<{ config: string }>>}
+ * */
+export const Eodash: import("vue").VueElementConstructor<import("vue").ExtractPropTypes<{
+    config: string;
+}>>;
 export { default as store } from "./store";

package/dist/types/core/client/main.d.ts

@@ -1,3 +1,2 @@
 export { createEodash } from "./composables/DefineEodash";
 export { default as store } from "./store";
-export * from "./types";

package/dist/types/core/client/types.d.ts

@@ -258,7 +258,7 @@ export interface EodashStore {
     getLayers: (el?: string) => object[];
 
     /**
-     * Register EPSG projection in `eox-map` and adds it to {@link EodashStore.states.availableMapProjection `availableMapProjection`` }
+     * Register EPSG projection in `eox-map` and adds it to  `availableMapProjection`
      * */
     registerProjection: (
       code?: number | string | { name: string; def: string },
@@ -276,3 +276,4 @@ export interface EodashStore {
   };
 }
 ///////
+export { createEodash, store } from "./main.js";

package/dist/types/core/client/utils/createLayers.d.ts

@@ -6,8 +6,9 @@
  * @param {import("ol/layer/WebGLTile").Style} [style]
  * @param {Record<string, unknown>} [layerConfig]
  * @param {Record<string, unknown>} [layerDatetime]
+ * @param {object | null} [extraProperties]
  **/
-export function createLayersFromAssets(collectionId: string, title: string, assets: Record<string, import("stac-ts").StacAsset>, item: import("stac-ts").StacItem, style?: import("ol/layer/WebGLTile").Style | undefined, layerConfig?: Record<string, unknown> | undefined, layerDatetime?: Record<string, unknown> | undefined): Promise<({
+export function createLayersFromAssets(collectionId: string, title: string, assets: Record<string, import("stac-ts").StacAsset>, item: import("stac-ts").StacItem, style?: import("ol/layer/WebGLTile").Style | undefined, layerConfig?: Record<string, unknown> | undefined, layerDatetime?: Record<string, unknown> | undefined, extraProperties?: object | null | undefined): Promise<({
     style?: import("ol/layer/WebGLTile").Style | undefined;
     type: string;
     source: {
@@ -41,4 +42,4 @@ export function createLayersFromAssets(collectionId: string, title: string, asse
     };
     style: import("ol/layer/WebGLTile").Style | undefined;
 })[]>;
-export function createLayersFromLinks(collectionId: string, title: string, item: import("stac-ts").StacItem, layerDatetime?: Record<string, any> | undefined, legendInfo?: string | null | undefined): Promise<Record<string, any>[]>;
+export function createLayersFromLinks(collectionId: string, title: string, item: import("stac-ts").StacItem, layerDatetime?: Record<string, any> | undefined, extraProperties?: object | null | undefined): Promise<Record<string, any>[]>;

package/dist/types/core/client/utils/helpers.d.ts

@@ -15,13 +15,17 @@ export function generateFeatures(links?: import("stac-ts").StacLink[] | undefine
         };
     }[];
 };
-/** @param { import("ol/layer/WebGLTile").Style & { jsonform?: Record<string,any> } } [style] */
+/** @param { import("ol/layer/WebGLTile").Style & { jsonform?: Record<string,any> } & { legend?: Record<string,any> } } [style] */
 export function extractLayerConfig(style?: (import("ol/layer/WebGLTile").Style & {
     jsonform?: Record<string, any>;
+} & {
+    legend?: Record<string, any>;
 }) | undefined): {
     layerConfig: Record<string, unknown> | undefined;
     style: (import("ol/layer/WebGLTile").Style & {
         jsonform?: Record<string, any>;
+    } & {
+        legend?: Record<string, any>;
     }) | undefined;
 };
 /**

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@eodash/eodash",
-  "version": "5.0.0-alpha.2.22",
+  "version": "5.0.0-alpha.2.24",
   "type": "module",
-  "types": "./dist/types/core/client/types.d.ts",
   "files": [
     "core/client",
     "widgets",
@@ -10,7 +9,7 @@
   ],
   "exports": {
     ".": {
-      "types": "./dist/types/core/client/main.d.ts",
+      "types": "./dist/types/core/client/types.d.ts",
       "default": "./core/client/main.js"
     },
     "./webcomponent": {
@@ -51,7 +50,7 @@
   "dependencies": {
     "@eox/itemfilter": "^1.1.1",
     "@eox/jsonform": "^0.8.2",
-    "@eox/layercontrol": "^0.21.0",
+    "@eox/layercontrol": "^0.22.0",
     "@eox/layout": "^0.1.0",
     "@eox/map": "^1.13.1",
     "@eox/stacinfo": "^0.3.3",
@@ -61,6 +60,7 @@
     "animated-details": "gist:2912bb049fa906671807415eb0e87188",
     "axios": "^1.7.7",
     "axios-cache-interceptor": "^1.6.0",
+    "color-legend-element": "^1.3.0",
     "commander": "^12.1.0",
     "core-js": "^3.38.1",
     "loglevel": "^1.9.2",

package/widgets/EodashLayerControl.vue

@@ -3,7 +3,7 @@
     <eox-layercontrol
       v-if="showControls"
       :for="mapElement"
-      .tools="['datetime', 'info', 'config', 'opacity']"
+      .tools="['datetime', 'info', 'config', 'legend', 'opacity']"
       @datetime:updated="debouncedHandleDateTime"
       class="fill-height"
       toolsAsList="true"
@@ -15,6 +15,7 @@
 import "@eox/layercontrol";
 import "@eox/jsonform";
 import "@eox/timecontrol";
+import "color-legend-element";
 
 import { computed, ref } from "vue";
 import { mapEl, mapCompareEl } from "@/store/States";