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

package/dist/client/eo-dash.js

@@ -1,2 +1,2 @@
-export { aW as EodashConstructor, aX as register, aY as store } from './asWebComponent-BnFMd0T6.js';
+export { aX as EodashConstructor, aY as register, aZ as store } from './asWebComponent-DW1XzZkL.js';
 import 'vue';

package/dist/client/{forwardRefs-BF3Me2RX.js → forwardRefs-gx1Fzngc.js}

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

package/dist/client/{index-CRd5-RSy.js → index-DvFppNyk.js}

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

package/dist/client/{transition-Cpn_g5jE.js → transition-j2eWJYMg.js}

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

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

@@ -1,5 +1,6 @@
 export function useHandleMapMoveEnd(mapElement: import("vue").Ref<(HTMLElement & Record<string, any> & {
     map: import("ol").Map;
 }) | null>, mapPosition: import("vue").Ref<(number | undefined)[]>): void;
-export function useInitMap(mapElement: import("vue").Ref<(HTMLElement & Record<string, any>) | null>, selectedIndicator: import("vue").Ref<import("stac-ts").StacCollection | null>, eodashCols: EodashCollection[], datetime: import("vue").Ref<string>, mapLayers: import("vue").Ref<Record<string, any>[]>, partnerMap: import("vue").Ref<(HTMLElement & Record<string, any>) | null>): void;
+export function useInitMap(mapElement: import("vue").Ref<import("@eox/map").EOxMap | null>, selectedIndicator: import("vue").Ref<import("stac-ts").StacCollection | null>, eodashCols: EodashCollection[], datetime: import("vue").Ref<string>, mapLayers: import("vue").Ref<Record<string, any>[]>, partnerMap: import("vue").Ref<import("@eox/map").EOxMap | null>): void;
+export function useUpdateTooltipProperties(eodashCols: EodashCollection[], tooltipProperties: import("vue").Ref<import("../types").EodashStyleJson["tooltip"]>): void;
 import { EodashCollection } from "../eodashSTAC/EodashCollection";

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

@@ -93,42 +93,46 @@ export function processGeoTiff(links: import("stac-ts").StacLink[] | undefined,
  * @param {import("stac-ts").StacLink[] | undefined} links
  * @param {Record<string,any> | undefined} jsonformValue
  * @param {string} specUrl
- * @returns {Promise<[import("vega").Spec|null,Record<string,any>|null]>}
+ * @returns {Promise<[import("@eox/chart").EOxChart["spec"] | null,Record<string,any>|null]>}
  **/
-export function getChartValues(links: import("stac-ts").StacLink[] | undefined, jsonformValue: Record<string, any> | undefined, specUrl: string): Promise<[import("vega").Spec | null, Record<string, any> | null]>;
+export function getChartValues(links: import("stac-ts").StacLink[] | undefined, jsonformValue: Record<string, any> | undefined, specUrl: string): Promise<[import("@eox/chart").EOxChart["spec"] | null, Record<string, any> | null]>;
 /**
  * @param {Object} params
  * @param {import("vue").Ref<boolean>} params.loading
  * @param {import("vue").Ref<import("stac-ts").StacCollection | null>} params.selectedStac
  * @param {import("vue").Ref<import("@eox/jsonform").EOxJSONForm | null>} params.jsonformEl
  * @param {import("vue").Ref<Record<string,any>|null>} params.jsonformSchema
- * @param {import("vue").Ref<import("@eox/chart").EOxChart["spec"]>} params.chartSpec
+ * @param {import("vue").Ref<import("@eox/chart").EOxChart["spec"] | null>} params.chartSpec
  * @param {import("vue").Ref<Record<string, any> | null>} params.chartData
  * @param {import("vue").Ref<boolean>} params.isPolling
+ * @param {import("vue").Ref<any[]>} params.processResults
  */
-export function handleProcesses({ loading, selectedStac, jsonformEl, jsonformSchema, chartSpec, chartData, isPolling, }: {
+export function handleProcesses({ loading, selectedStac, jsonformEl, jsonformSchema, chartSpec, chartData, isPolling, processResults, }: {
     loading: import("vue").Ref<boolean>;
     selectedStac: import("vue").Ref<import("stac-ts").StacCollection | null>;
     jsonformEl: import("vue").Ref<import("@eox/jsonform").EOxJSONForm | null>;
     jsonformSchema: import("vue").Ref<Record<string, any> | null>;
-    chartSpec: import("vue").Ref<import("@eox/chart").EOxChart["spec"]>;
+    chartSpec: import("vue").Ref<import("@eox/chart").EOxChart["spec"] | null>;
     chartData: import("vue").Ref<Record<string, any> | null>;
     isPolling: import("vue").Ref<boolean>;
+    processResults: import("vue").Ref<any[]>;
 }): Promise<void>;
 /**
  * Reset the process state
  * @param {Object} params
  * @param {import("vue").Ref<boolean>} params.loading
  * @param {import("vue").Ref<boolean>} params.isProcessed
- * @param {import("vue").Ref<import("@eox/chart").EOxChart["spec"]>} params.chartSpec
+ * @param {import("vue").Ref<import("@eox/chart").EOxChart["spec"] | null>} params.chartSpec
  * @param {import("vue").Ref<boolean>} params.isPolling
+ * @param {import("vue").Ref<any[]>} params.processResults
  * @param {import("vue").Ref<Record<string,any>|null>} params.jsonformSchema
  */
-export function resetProcess({ loading, isProcessed, chartSpec, jsonformSchema, isPolling, }: {
+export function resetProcess({ loading, isProcessed, chartSpec, jsonformSchema, processResults, isPolling, }: {
     loading: import("vue").Ref<boolean>;
     isProcessed: import("vue").Ref<boolean>;
-    chartSpec: import("vue").Ref<import("@eox/chart").EOxChart["spec"]>;
+    chartSpec: import("vue").Ref<import("@eox/chart").EOxChart["spec"] | null>;
     isPolling: import("vue").Ref<boolean>;
+    processResults: import("vue").Ref<any[]>;
     jsonformSchema: import("vue").Ref<Record<string, any> | null>;
 }): void;
 /**
@@ -140,16 +144,18 @@ export function resetProcess({ loading, isProcessed, chartSpec, jsonformSchema,
  * @param {import("vue").Ref<import("stac-ts").StacCollection>} params.selectedStac
  * @param {import("vue").Ref<import("@eox/jsonform").EOxJSONForm | null>} params.jsonformEl
  * @param {import("vue").Ref<Record<string,any> | null>} params.jsonformSchema
- * @param {import("vue").Ref<import("@eox/chart").EOxChart["spec"]>} params.chartSpec
+ * @param {import("vue").Ref<import("@eox/chart").EOxChart["spec"] | null>} params.chartSpec
+ * @param {import("vue").Ref<any[]>} params.processResults
  * @param {import("vue").Ref<boolean>} params.isProcessed
  * @param {import("vue").Ref<boolean>} params.loading
  * @param {import("vue").Ref<boolean>} params.isPolling
  */
-export function initProcess({ selectedStac, jsonformEl, jsonformSchema, chartSpec, isProcessed, loading, isPolling, }: {
+export function initProcess({ selectedStac, jsonformEl, jsonformSchema, chartSpec, isProcessed, processResults, loading, isPolling, }: {
     selectedStac: import("vue").Ref<import("stac-ts").StacCollection>;
     jsonformEl: import("vue").Ref<import("@eox/jsonform").EOxJSONForm | null>;
     jsonformSchema: import("vue").Ref<Record<string, any> | null>;
-    chartSpec: import("vue").Ref<import("@eox/chart").EOxChart["spec"]>;
+    chartSpec: import("vue").Ref<import("@eox/chart").EOxChart["spec"] | null>;
+    processResults: import("vue").Ref<any[]>;
     isProcessed: import("vue").Ref<boolean>;
     loading: import("vue").Ref<boolean>;
     isPolling: import("vue").Ref<boolean>;

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

@@ -4,16 +4,16 @@ export class EodashCollection {
      *
      * @param {import("stac-ts").StacCollection} indicator */
     static getIndicatorLayers(indicator: import("stac-ts").StacCollection): Promise<(Record<string, any> | {
-        style?: import("ol/layer/WebGLTile").Style | undefined;
+        style?: import("../types").EodashStyleJson | undefined;
         type: string;
         source: {
             type: string;
-            url: string;
+            url: string | undefined;
             format: string;
         };
         properties: {
             layerConfig?: {
-                style: import("ol/layer/WebGLTile").Style | undefined;
+                style: import("../types").EodashStyleJson | undefined;
             } | undefined;
             id: string;
             title: string;
@@ -35,7 +35,7 @@ export class EodashCollection {
             layerConfig: Record<string, unknown> | undefined;
             layerDatetime: Record<string, unknown> | undefined;
         };
-        style: import("ol/layer/WebGLTile").Style | undefined;
+        style: import("../types").EodashStyleJson | undefined;
     })[]>;
     /**
      * Returns GeoDB layer from a list of EodashCollections
@@ -97,6 +97,11 @@ export class EodashCollection {
      *  @param {Date} [date]
      **/
     getItem(date?: Date): import("stac-ts").StacLink | undefined;
+    getToolTipProperties(): Promise<{
+        id: string;
+        title?: string;
+        appendix?: string;
+    }[]>;
     /**
      *
      * @param {string} datetime

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

@@ -3,22 +3,22 @@
  * @param {string} title
  * @param {Record<string,import("stac-ts").StacAsset>} assets
  * @param {import("stac-ts").StacItem } item
- * @param {import("ol/layer/WebGLTile").Style} [style]
+ * @param {import("../types").EodashStyleJson} [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, layerConfig?: Record<string, unknown>, layerDatetime?: Record<string, unknown>, extraProperties?: object | null): Promise<({
-    style?: import("ol/layer/WebGLTile").Style | undefined;
+export function createLayersFromAssets(collectionId: string, title: string, assets: Record<string, import("stac-ts").StacAsset>, item: import("stac-ts").StacItem, style?: import("../types").EodashStyleJson, layerConfig?: Record<string, unknown>, layerDatetime?: Record<string, unknown>, extraProperties?: object | null): Promise<({
+    style?: import("../types").EodashStyleJson | undefined;
     type: string;
     source: {
         type: string;
-        url: string;
+        url: string | undefined;
         format: string;
     };
     properties: {
         layerConfig?: {
-            style: import("ol/layer/WebGLTile").Style | undefined;
+            style: import("../types").EodashStyleJson | undefined;
         } | undefined;
         id: string;
         title: string;
@@ -40,6 +40,6 @@ export function createLayersFromAssets(collectionId: string, title: string, asse
         layerConfig: Record<string, unknown> | undefined;
         layerDatetime: Record<string, unknown> | undefined;
     };
-    style: import("ol/layer/WebGLTile").Style | undefined;
+    style: import("../types").EodashStyleJson | undefined;
 })[]>;
 export function createLayersFromLinks(collectionId: string, title: string, item: import("stac-ts").StacItem, layerDatetime?: Record<string, any>, extraProperties?: object | null): Promise<Record<string, any>[]>;

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

@@ -12,18 +12,13 @@ export function generateFeatures(links?: import("stac-ts").StacLink[]): {
 /**
  * Sperates and extracts layerConfig (jsonform schema & legend) from a style json
  *
- *  @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>;
-}): {
+ *  @param { import("../types").EodashStyleJson} [style] */
+export function extractLayerConfig(style?: import("../types").EodashStyleJson): {
+    layerConfig: undefined;
+    style: undefined;
+} | {
     layerConfig: Record<string, unknown> | undefined;
-    style: (import("ol/layer/WebGLTile").Style & {
-        jsonform?: Record<string, any>;
-    } & {
-        legend?: Record<string, any>;
-    }) | undefined;
+    style: import("../types").EodashStyleJson;
 };
 /**
  * Function to extract collection urls from an indicator
@@ -48,18 +43,77 @@ export function assignProjID(item: import("stac-ts").StacItem, linkOrAsset: impo
         id: string;
     } & Record<string, any>;
 } & Record<string, any>): string;
+/**
+ * @param {string[]} geojsonUrls
+ */
+export function mergeGeojsons(geojsonUrls: string[]): Promise<string | undefined>;
 export function extractRoles(properties: Record<string, any>, linkOrAsset: import("stac-ts").StacLink | import("stac-ts").StacAsset): void;
 export function fetchStyle(item: import("stac-ts").StacItem, itemUrl: string): Promise<{
-    variables?: {
-        [x: string]: string | number;
-    } | undefined;
-    color?: import("ol/expr/expression.js").ExpressionValue | undefined;
-    brightness?: import("ol/expr/expression.js").ExpressionValue | undefined;
-    contrast?: import("ol/expr/expression.js").ExpressionValue | undefined;
-    exposure?: import("ol/expr/expression.js").ExpressionValue | undefined;
-    saturation?: import("ol/expr/expression.js").ExpressionValue | undefined;
-    gamma?: import("ol/expr/expression.js").ExpressionValue | undefined;
+    filter?: import("ol/expr/expression.js").ExpressionValue | undefined;
+    "icon-src"?: string | undefined;
+    "icon-anchor"?: number[] | import("ol/expr/expression.js").ExpressionValue | undefined;
+    "icon-anchor-origin"?: import("ol/style/Icon.js").IconOrigin | undefined;
+    "icon-anchor-x-units"?: import("ol/style/Icon.js").IconAnchorUnits | undefined;
+    "icon-anchor-y-units"?: import("ol/style/Icon.js").IconAnchorUnits | undefined;
+    "icon-color"?: import("ol/style/webgl.js").ColorExpression | undefined;
+    "icon-opacity"?: import("ol/expr/expression.js").ExpressionValue | undefined;
+    "icon-cross-origin"?: string | null | undefined;
+    "icon-displacement"?: number[] | import("ol/expr/expression.js").ExpressionValue | undefined;
+    "icon-scale"?: import("ol/size.js").Size | import("ol/expr/expression.js").ExpressionValue | undefined;
+    "icon-width"?: import("ol/expr/expression.js").ExpressionValue | undefined;
+    "icon-height"?: import("ol/expr/expression.js").ExpressionValue | undefined;
+    "icon-rotation"?: import("ol/expr/expression.js").ExpressionValue | undefined;
+    "icon-rotate-with-view"?: boolean | undefined;
+    "icon-offset"?: number[] | import("ol/expr/expression.js").ExpressionValue | undefined;
+    "icon-offset-origin"?: import("ol/style/Icon.js").IconOrigin | undefined;
+    "icon-size"?: import("ol/size.js").Size | import("ol/expr/expression.js").ExpressionValue | undefined;
+    "stroke-color"?: import("ol/style/webgl.js").ColorExpression | undefined;
+    "stroke-width"?: import("ol/expr/expression.js").ExpressionValue | undefined;
+    "stroke-offset"?: import("ol/expr/expression.js").ExpressionValue | undefined;
+    "stroke-line-cap"?: string | number | boolean | any[] | import("ol/color.js").Color | undefined;
+    "stroke-line-join"?: string | number | boolean | any[] | import("ol/color.js").Color | undefined;
+    "stroke-line-dash"?: number[] | import("ol/expr/expression.js").ExpressionValue[] | undefined;
+    "stroke-line-dash-offset"?: import("ol/expr/expression.js").ExpressionValue | undefined;
+    "stroke-miter-limit"?: import("ol/expr/expression.js").ExpressionValue | undefined;
+    "stroke-pattern-src"?: string | undefined;
+    "stroke-pattern-offset"?: number[] | import("ol/expr/expression.js").ExpressionValue | undefined;
+    "stroke-pattern-offset-origin"?: import("ol/style/Icon.js").IconOrigin | undefined;
+    "stroke-pattern-size"?: import("ol/size.js").Size | import("ol/expr/expression.js").ExpressionValue | undefined;
+    "stroke-pattern-spacing"?: import("ol/expr/expression.js").ExpressionValue | undefined;
+    "fill-color"?: import("ol/style/webgl.js").ColorExpression | undefined;
+    "fill-pattern-src"?: string | undefined;
+    "fill-pattern-offset"?: number[] | import("ol/expr/expression.js").ExpressionValue | undefined;
+    "fill-pattern-offset-origin"?: import("ol/style/Icon.js").IconOrigin | undefined;
+    "fill-pattern-size"?: import("ol/size.js").Size | import("ol/expr/expression.js").ExpressionValue | undefined;
+    "circle-radius"?: import("ol/expr/expression.js").ExpressionValue | undefined;
+    "circle-fill-color"?: import("ol/style/webgl.js").ColorExpression | undefined;
+    "circle-stroke-color"?: import("ol/style/webgl.js").ColorExpression | undefined;
+    "circle-stroke-width"?: import("ol/expr/expression.js").ExpressionValue | undefined;
+    "circle-opacity"?: import("ol/expr/expression.js").ExpressionValue | undefined;
+    "circle-displacement"?: number[] | import("ol/expr/expression.js").ExpressionValue[] | undefined;
+    "circle-scale"?: import("ol/size.js").Size | import("ol/expr/expression.js").ExpressionValue | import("ol/expr/expression.js").ExpressionValue[] | undefined;
+    "circle-rotation"?: import("ol/expr/expression.js").ExpressionValue | undefined;
+    "circle-rotate-with-view"?: boolean | undefined;
+    "shape-points"?: import("ol/expr/expression.js").ExpressionValue | undefined;
+    "shape-fill-color"?: import("ol/style/webgl.js").ColorExpression | undefined;
+    "shape-stroke-color"?: import("ol/style/webgl.js").ColorExpression | undefined;
+    "shape-stroke-width"?: import("ol/expr/expression.js").ExpressionValue | undefined;
+    "shape-opacity"?: import("ol/expr/expression.js").ExpressionValue | undefined;
+    "shape-radius"?: import("ol/expr/expression.js").ExpressionValue | undefined;
+    "shape-radius2"?: import("ol/expr/expression.js").ExpressionValue | undefined;
+    "shape-angle"?: import("ol/expr/expression.js").ExpressionValue | undefined;
+    "shape-displacement"?: number[] | import("ol/expr/expression.js").ExpressionValue[] | undefined;
+    "shape-rotation"?: import("ol/expr/expression.js").ExpressionValue | undefined;
+    "shape-rotate-with-view"?: boolean | undefined;
+    "shape-scale"?: import("ol/size.js").Size | import("ol/expr/expression.js").ExpressionValue | import("ol/expr/expression.js").ExpressionValue[] | undefined;
+    variables?: Record<string, any>;
+    legend?: Record<string, any>;
     jsonform?: Record<string, any>;
+    tooltip?: {
+        id: string;
+        title?: string;
+        appendix?: string;
+    }[];
 } | undefined>;
 export function getProjectionCode(projection?: string | number | {
     name: string;
@@ -69,6 +123,7 @@ export function extractLayerDatetime(links?: import("stac-ts").StacLink[], curre
     controlValues: string[];
     currentStep: string;
     slider: boolean;
+    navigation: boolean;
     play: boolean;
     displayFormat: string;
 } | undefined;

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

@@ -267,3 +267,13 @@ export declare function register(): void;
  */
 export declare const store: typeof import("./store").default;
 export * from "./main.js";
+export type EodashStyleJson = import("ol/style/webgl.js").WebGLStyle & {
+    variables?: Record<string, any>;
+    legend?: Record<string, any>;
+    jsonform?: Record<string, any>;
+    tooltip?: {
+        id: string;
+        title?: string;
+        appendix?: string;
+    }[];
+};

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

@@ -16,3 +16,5 @@ export const eodashCollections: import("../eodashSTAC/EodashCollection").EodashC
 export const eodashCompareCollections: import("../eodashSTAC/EodashCollection").EodashCollection[];
 /** whether the map postion was set in URL params on first load */
 export const posIsSetFromUrl: import("vue").Ref<boolean, boolean>;
+/** @type {import("vue").Ref<Record<string,any>|undefined>} */
+export const layerControlFormValue: import("vue").Ref<Record<string, any> | undefined>;

package/dist/types/widgets/EodashDatePicker.vue.d.ts

@@ -1,11 +1,13 @@
 declare const _default: import("vue").DefineComponent<{}, {
+    hintText: string;
+    toggleCalendar: boolean;
     hideArrows: boolean;
     hideInputField: boolean;
-    hintText: string;
     $props: {
+        readonly hintText?: string | undefined;
+        readonly toggleCalendar?: boolean | undefined;
         readonly hideArrows?: boolean | undefined;
         readonly hideInputField?: boolean | undefined;
-        readonly hintText?: string | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {
     rootRef: HTMLDivElement;

package/dist/types/widgets/PopUp.vue.d.ts

@@ -18,11 +18,10 @@ declare const __VLS_component: import("vue").DefineComponent<{}, {
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLSpanElement>;
 type __VLS_TemplateResult = {
-    attrs: Partial<typeof __VLS_inheritedAttrs>;
+    attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
     };
     refs: {};
     rootEl: HTMLSpanElement;
 };
-declare let __VLS_inheritedAttrs: {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eodash/eodash",
-  "version": "5.0.0-rc.1.5",
+  "version": "5.0.0-rc.1.6",
   "type": "module",
   "types": "./dist/types/core/client/types.d.ts",
   "files": [
@@ -59,15 +59,15 @@
     "docs:generate": "typedoc --options typedoc.config.json"
   },
   "dependencies": {
-    "@eox/chart": "^0.3.0",
-    "@eox/drawtools": "^0.13.2",
-    "@eox/itemfilter": "^1.7.0",
+    "@eox/chart": "^0.3.1",
+    "@eox/drawtools": "^0.13.3",
+    "@eox/itemfilter": "^1.7.1",
     "@eox/jsonform": "0.11.3-dev.1734708668.0",
-    "@eox/layercontrol": "^0.28.0",
+    "@eox/layercontrol": "^0.28.2-dev.1736966655.0",
     "@eox/layout": "^0.3.0",
-    "@eox/map": "^1.19.0",
-    "@eox/stacinfo": "^0.6.0",
-    "@eox/timecontrol": "^0.12.0",
+    "@eox/map": "^1.19.1",
+    "@eox/stacinfo": "^0.6.1",
+    "@eox/timecontrol": "^0.12.2",
     "@mdi/js": "^7.4.47",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vueuse/core": "^12.0.0",

package/widgets/EodashDatePicker.vue

@@ -8,34 +8,98 @@
       class="bg-surface overflow-auto"
       style="background-color: transparent; max-width: 100%"
     >
-      <template #footer>
-        <div class="d-flex flex-row align-center justify-center pb-1">
+      <template v-if="toggleCalendar" #default="{ inputValue, inputEvents }">
+        <div
+          class="bg-surface d-flex flex-row align-center justify-center pb-1"
+          style="overflow: hidden; width: 100%"
+        >
           <v-btn
             v-if="!hideArrows"
             density="compact"
+            :size="lgAndDown ? 'x-small' : 'large'"
             v-tooltip:bottom="'Set date to oldest available dataset'"
             variant="text"
             @click="jumpDate(true)"
+            class="py-2"
+            style="flex-shrink: 1"
           >
             <v-icon :icon="[mdiRayEndArrow]" />
           </v-btn>
           <div
             class="flex rounded-lg border border-gray-300 dark:border-gray-600"
-            style="margin: 2px"
+            style="margin: 2px; min-width: 0"
+          >
+            <input
+              v-if="!hideInputField"
+              :value="inputValue"
+              v-on="inputEvents"
+              class="flex-grow px-1 py-1 dark:bg-gray-700"
+              style="
+                margin: 1px;
+                width: 100%;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              "
+            />
+          </div>
+          <v-btn
+            v-if="!hideArrows"
+            density="compact"
+            :size="lgAndDown ? 'x-small' : 'large'"
+            variant="text"
+            v-tooltip:bottom="'Set date to latest available dataset'"
+            @click="jumpDate(false)"
+            class="py-2"
+            style="flex-shrink: 1"
+          >
+            <v-icon :icon="[mdiRayStartArrow]" />
+          </v-btn>
+        </div>
+      </template>
+      <template v-else #footer>
+        <div
+          class="d-flex flex-row align-center justify-center pb-1"
+          style="overflow: hidden; width: 100%"
+        >
+          <v-btn
+            v-if="!hideArrows"
+            density="compact"
+            :size="lgAndDown ? 'x-small' : 'large'"
+            v-tooltip:bottom="'Set date to oldest available dataset'"
+            variant="text"
+            @click="jumpDate(true)"
+            class="py-2"
+            style="flex-shrink: 1"
+          >
+            <v-icon :icon="[mdiRayEndArrow]" />
+          </v-btn>
+          <div
+            class="flex rounded-lg border border-gray-300 dark:border-gray-600"
+            style="margin: 2px; min-width: 0"
           >
             <input
               v-if="!hideInputField"
               :value="new Date(currentDate).toLocaleDateString()"
-              style="margin: 1px"
               class="flex-grow px-1 py-1 dark:bg-gray-700"
+              style="
+                margin: 1px;
+                width: 100%;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              "
             />
           </div>
           <v-btn
             v-if="!hideArrows"
             density="compact"
+            :size="lgAndDown ? 'x-small' : 'large'"
             variant="text"
             v-tooltip:bottom="'Set date to latest available dataset'"
             @click="jumpDate(false)"
+            class="py-2"
+            style="flex-shrink: 1"
           >
             <v-icon :icon="[mdiRayStartArrow]" />
           </v-btn>
@@ -46,8 +110,9 @@
 </template>
 <script setup>
 import { DatePicker as VCDatePicker } from "v-calendar";
+import { useDisplay } from "vuetify";
 import "v-calendar/style.css";
-import { watch, reactive, ref, customRef, toRef } from "vue";
+import { watch, reactive, ref, customRef, toRef, onMounted } from "vue";
 import { useSTAcStore } from "@/store/stac";
 import { datetime } from "@/store/states";
 import { mdiRayStartArrow, mdiRayEndArrow } from "@mdi/js";
@@ -55,6 +120,8 @@ import { eodashCollections } from "@/utils/states";
 import log from "loglevel";
 import { makePanelTransparent } from "@/composables";
 
+const { lgAndDown } = useDisplay();
+
 // holds the number value of the datetime
 const currentDate = customRef((track, trigger) => ({
   get() {
@@ -86,6 +153,10 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  toggleCalendar: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 /**
@@ -137,7 +208,7 @@ watch(
         ];
         attributes.push({
           key: "id-" + idx.toString() + Math.random().toString(16).slice(2),
-          bar: {
+          dot: {
             style: {
               backgroundColor: wongPalette[idx % wongPalette.length],
             },
@@ -182,6 +253,14 @@ function jumpDate(reverse) {
   }
 }
 
+// fixes calendar dispalcement on lib mode
+const transform = ref("");
+onMounted(() => {
+  transform.value = document.querySelector("eo-dash")
+    ? "translate3d(50px,-80px,0)"
+    : "translate3d(0px,-80px,0)";
+});
+
 makePanelTransparent(rootRef);
 </script>
 <style>
@@ -200,4 +279,8 @@ makePanelTransparent(rootRef);
 .vc-highlight-content-solid {
   color: white !important;
 }
+
+.vc-popover-content-wrapper {
+  transform: v-bind("transform") !important;
+}
 </style>

package/widgets/EodashLayerControl.vue

@@ -9,6 +9,7 @@
       toolsAsList="true"
       style="--eox-background-color: transparent"
       ref="eoxLayercontrol"
+      @layerConfig:change="onLayerConfigChange"
     />
   </span>
 </template>
@@ -22,7 +23,11 @@ import "color-legend-element";
 import { computed, ref } from "vue";
 import { mapEl, mapCompareEl } from "@/store/states";
 import { getColFromLayer } from "@/eodashSTAC/helpers";
-import { eodashCollections, eodashCompareCollections } from "@/utils/states";
+import {
+  eodashCollections,
+  eodashCompareCollections,
+  layerControlFormValue,
+} from "@/utils/states";
 import { storeToRefs } from "pinia";
 import { useSTAcStore } from "@/store/stac";
 
@@ -108,4 +113,11 @@ const debouncedHandleDateTime = (evt) => {
   }, 500);
 };
 // ------
+/**
+ *
+ * @param {Event & {detail:{layer:import("ol/layer").Layer;jsonformValue:Record<string,any>}}} evt
+ */
+const onLayerConfigChange = (evt) => {
+  layerControlFormValue.value = evt.detail.jsonformValue;
+};
 </script>