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

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

@@ -0,0 +1,269 @@
+/** @group Eodash */
+export interface WebComponentProps<T extends ExecutionTime = "compiletime"> {
+    /**
+     * Imports web component file, either using a URL or an import function.
+     *
+     * @example
+     *   importing `eox-itemfilter` web component, after installing `@eox/itemfilter` it can be
+     *   referenced:
+     *   ```js
+     *   link: async() => import("@eox/itemfilter")
+     *   ```
+     *
+     *   ::: warning
+     *   import maps are not available in runtime config
+     *   :::
+     */
+    link: T extends "runtime" ? string : string | (() => Promise<unknown>);
+    /**
+     * Exported Constructor, needs to be provided if the web component is not
+     * registered in by the [link](#link) provided
+     */
+    constructorProp?: string;
+    tagName: `${string}-${string}`;
+    /** Object defining all the properties and attributes of the web component */
+    properties?: Record<string, unknown>;
+    /**
+     * Triggered when the web component is mounted in the DOM.
+     *
+     * @param el - Web component
+     * @param store - Return value of the core STAC pinia store in
+     *   `/core/client/store/stac.ts`
+     */
+    onMounted?: (el: Element | null, store: ReturnType<typeof import("./store/stac.js").useSTAcStore>) => Promise<void> | void;
+    /**
+     * Triggered when the web component is unmounted from the DOM.
+     *
+     * @param el - Web component
+     * @param store - Return value of the core STAC pinia store in
+     *   `/core/client/store/stac.ts`
+     */
+    onUnmounted?: (el: Element | null, store: ReturnType<typeof import("./store/stac.js").useSTAcStore>) => Promise<void> | void;
+}
+/** @ignore */
+export interface WidgetsContainerProps {
+    widgets: Omit<Widget, "layout">[];
+}
+/** Properties of EOxLayoutItem used for setting the position and size of panels */
+export interface Layout {
+    /** Horizontal start position. Integer between 1 and 12 */
+    x: number;
+    /** Vertical start position. Integer between 1 and 12 */
+    y: number;
+    /** Width. Integer between 1 and 12 */
+    w: number;
+    /** Height. Integer between 1 and 12 */
+    h: number;
+}
+/**
+ * Widget type: `web-component` API
+ *
+ * @group Eodash
+ */
+export interface WebComponentWidget<T extends ExecutionTime = "compiletime"> {
+    id: number | string | symbol;
+    title: string;
+    /** Widget position and size. */
+    layout: Layout;
+    widget: WebComponentProps<T>;
+    type: "web-component";
+}
+/**
+ * Widget type: `internal` API. Internal widgets are Vue components provided by
+ * eodash.
+ *
+ * @group Eodash
+ */
+export interface InternalComponentWidget {
+    id: number | string | symbol;
+    title: string;
+    /** Widget position and size. */
+    layout: Layout;
+    widget: {
+        /**
+         * Internal Vue Components inside the
+         * [widgets](https://github.com/eodash/eodash/tree/main/widgets) folder.
+         * Referenced using their name without the .vue extention
+         */
+        name: string;
+        /** Specified Vue component props */
+        properties?: Record<string, unknown>;
+    };
+    type: "internal";
+}
+/** Widget type: `iframe` API Renders an external HTML file as a widget. */
+/** @group Eodash */
+export interface IFrameWidget {
+    id: number | string | symbol;
+    title: string;
+    /** Widget position and size. */
+    layout: Layout;
+    widget: {
+        /** The URL of the page to embed */
+        src: string;
+    };
+    type: "iframe";
+}
+/** @group Eodash */
+export interface FunctionalWidget<T extends ExecutionTime = "compiletime"> {
+    /**
+     * Provides a functional definition of widgets, gets triggered whenever a STAC
+     * object is selected, and only renders the returned configuration if the `id`
+     * doesn't match the currently rendered `id`
+     *
+     * @param selectedSTAC - Currently selected STAC object
+     */
+    defineWidget: (selectedSTAC: import("stac-ts").StacCatalog | import("stac-ts").StacCollection | import("stac-ts").StacItem | null) => StaticWidget<T> | undefined | null;
+}
+/**
+ * There are 3 types of Widgets:
+ *
+ * @group Eodash
+ */
+export type StaticWidget<T extends ExecutionTime = "compiletime"> = WebComponentWidget<T> | InternalComponentWidget | IFrameWidget;
+/**
+ * Widgets can be defined in 2 forms:
+ *
+ * 1. {@link StaticWidget} : This is defined as an object once, and is considered
+ *    the default form.
+ * 2. {@link FunctionalWidget} : a special form which contains the
+ *    {@link FunctionalWidget.defineWidget `defineWidget`} function that runs
+ *    when {@link EodashStore.stac `loadSelectedSTAC`} function is triggered, and
+ *    returns a value of a Static Widget or null or undefined.
+ *
+ * @group Eodash
+ */
+export type Widget<T extends ExecutionTime = "compiletime"> = StaticWidget<T> | FunctionalWidget<T>;
+/** @group Eodash */
+export type BackgroundWidget<T extends ExecutionTime = "compiletime"> = Omit<WebComponentWidget<T>, "layout" | "title" | "slidable"> | Omit<InternalComponentWidget, "layout" | "title" | "slidable"> | Omit<IFrameWidget, "layout" | "title" | "slidable"> | Omit<FunctionalWidget<T>, "layout" | "slidable">;
+/**
+ * Dashboard rendered widgets specification. 3 types of widgets are supported:
+ * `"iframe"`, `"internal"`, and `"web-component"`. A specific object should be
+ * provided based on the type of the widget.
+ *
+ * @group Eodash
+ */
+export interface SingleTemplate<T extends ExecutionTime = "compiletime"> {
+    /** Gap between widgets */
+    gap?: number;
+    /** Loading widget */
+    loading?: BackgroundWidget<T>;
+    /**
+     * Widget rendered as the dashboard background. Has the same specifications of
+     * {@link Widget} without the `title` and `layout` properties
+     */
+    background?: BackgroundWidget<T>;
+    /** Array of widgets that will be rendered as dashboard panels. */
+    widgets: Widget<T>[];
+}
+export type MultiTemplates<T extends ExecutionTime = "compiletime"> = Record<string, SingleTemplate<T>>;
+/** @ignore */
+export type StacEndpoint = `${string}/catalog.json`;
+/** @group Eodash */
+type ExecutionTime = "runtime" | "compiletime";
+/**
+ * Eodash instance API
+ *
+ * @group Eodash
+ */
+export type Eodash<T extends ExecutionTime = "compiletime"> = {
+    /** Instance ID. */
+    id?: string;
+    /** Root STAC catalog endpoint */
+    stacEndpoint: StacEndpoint;
+    /** Brand specifications. */
+    brand: {
+        /** Removes the dashboard layout */
+        noLayout?: boolean;
+        /** Custom error message to alert the users if something crashes */
+        errorMessage?: string;
+        /** Fetches the specified font family from the specified `link` property. */
+        font?: {
+            /**
+             * Link to stylesheet that defines font-face. Could be either a relative
+             * or absolute URL.
+             */
+            link: string;
+            /** Font family name. */
+            family: string;
+        };
+        /** Title that will be shown in the app header */
+        name: string;
+        /** Brand logo */
+        logo?: string;
+        /**
+         * Dashboard theme as a custom [vuetifyJs
+         * theme](https://vuetifyjs.com/en/features/theme/).
+         */
+        theme?: import("vuetify/lib/index.mjs").ThemeDefinition;
+        /** Text applied to the footer. */
+        footerText?: string;
+    };
+} & ({
+    /** Template configuration */
+    template: SingleTemplate<T>;
+} | {
+    /** Multiple templates configuration */
+    templates: MultiTemplates<T>;
+});
+/** @group EodashStore */
+export interface EodashStore {
+    /** Stateful Reactive variables */
+    states: {
+        /** Currently selected STAC endpoint */
+        currentUrl: import("vue").Ref<string>;
+        /** Currently selected datetime */
+        datetime: import("vue").Ref<string>;
+        /** Currently selected indicator */
+        indicator: import("vue").Ref<string>;
+        registeredProjections: `EPSG${number}`[];
+        /** available projection to be rendered by the Map */
+        availableMapProjection: import("vue").Ref<string>;
+    };
+    actions: {
+        /**
+         * returns the layers of the `eox-map`
+         * @param [el] - `eox-map` element selector
+         */
+        getLayers: (el?: string) => object[];
+        /**
+         * Register EPSG projection in `eox-map` and adds it to  `availableMapProjection`
+         * */
+        registerProjection: (code?: number | string | {
+            name: string;
+            def: string;
+        }) => Promise<void>;
+        /** Change `eox-map` projection from an EPSG code or a registered projection code */
+        changeMapProjection: (code?: number | string | {
+            name: string;
+            def: string;
+        }) => Promise<void>;
+    };
+    /** Pinia store definition used to navigate the root STAC catalog. */
+    stac: {
+        useSTAcStore: typeof import("./store/stac.js").useSTAcStore;
+    };
+}
+/** @group WebComponent */
+type EodashConstructor = import("vue").VueElementConstructor<import("vue").ExtractPropTypes<{
+    config: string;
+}>>;
+/**
+ * Eodash Web Component constructor
+ *
+ * @group WebComponent
+ */
+export declare const Eodash: EodashConstructor;
+/**
+ * Registers `eo-dash` as Custom Element in the window
+ *
+ * @group WebComponent
+ */
+export declare function register(): void;
+/**
+ * Eodash store @see EodashStore
+ *
+ * @group WebComponent
+ */
+export declare const store: typeof import("./store").default;
+export * from "./main.js";

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

@@ -0,0 +1,2 @@
+export function loadFont(family?: string, link?: string, isWebComponent?: boolean): Promise<string>;
+export function copyToClipBoard(text: string, showIcon: import("vue").Ref<boolean>): Promise<void>;

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

@@ -0,0 +1,8 @@
+/**
+ * `eodash` injection key.
+ *
+ * @see {@link "@/plugins/index.js"}
+ */
+export const eodashKey: unique symbol;
+/** @type {import("@vueuse/core").EventBusKey<"layers:updated"|"time:updated">} */
+export const eoxLayersKey: import("@vueuse/core").EventBusKey<"layers:updated" | "time:updated">;

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

@@ -0,0 +1,18 @@
+/**
+ * Array of eodash STAC Collections extracted from the current selected indicator.
+ * Updated in {@link file://./../store/stac.js `loadSelectedSTAC`} widget
+ *
+ * @type {import('../eodashSTAC/EodashCollection').EodashCollection[]}
+ * @private
+ */
+export const eodashCollections: import("../eodashSTAC/EodashCollection").EodashCollection[];
+/**
+ * Array of eodash STAC Collections extracted from the current selected COMPARE indicator.
+ * Updated in {@link file://./../store/stac.js ` loadSelectedCompareSTAC`} widget
+ *
+ * @type {import('../eodashSTAC/EodashCollection').EodashCollection[]}
+ * @private
+ */
+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>;

package/dist/types/core/client/views/Dashboard.vue.d.ts

@@ -0,0 +1,9 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    isWebComponent: boolean;
+    config?: string | undefined;
+    $props: {
+        readonly isWebComponent?: boolean | undefined;
+        readonly config?: string | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,13 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    hideArrows: boolean;
+    hideInputField: boolean;
+    hintText: string;
+    $props: {
+        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;
+}, HTMLDivElement>;
+export default _default;

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

@@ -0,0 +1,44 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    $emit: (event: "select", ...args: any[]) => void;
+    enableCompare: boolean;
+    cssVars: string | Record<string, any>;
+    resultType: string;
+    filtersTitle: string;
+    filterProperties: {
+        keys: string[];
+        title: string;
+        type: string;
+        expanded?: boolean;
+    }[];
+    resultsTitle: string;
+    subTitleProperty: string;
+    imageProperty: string;
+    titleProperty: string;
+    enableHighlighting: boolean;
+    expandMultipleFilters: boolean;
+    expandMultipleResults: boolean;
+    aggregateResults?: string | undefined;
+    $props: {
+        readonly enableCompare?: boolean | undefined;
+        readonly cssVars?: string | Record<string, any> | undefined;
+        readonly resultType?: string | undefined;
+        readonly filtersTitle?: string | undefined;
+        readonly filterProperties?: {
+            keys: string[];
+            title: string;
+            type: string;
+            expanded?: boolean;
+        }[] | undefined;
+        readonly resultsTitle?: string | undefined;
+        readonly subTitleProperty?: string | undefined;
+        readonly imageProperty?: string | undefined;
+        readonly titleProperty?: string | undefined;
+        readonly enableHighlighting?: boolean | undefined;
+        readonly expandMultipleFilters?: boolean | undefined;
+        readonly expandMultipleResults?: boolean | undefined;
+        readonly aggregateResults?: string | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {
+    eoxItemFilter: unknown;
+}, any>;
+export default _default;

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

@@ -0,0 +1,13 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    map: string;
+    tools: unknown[];
+    cssVars?: Record<string, any> | undefined;
+    $props: {
+        readonly map?: string | undefined;
+        readonly tools?: unknown[] | undefined;
+        readonly cssVars?: Record<string, any> | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {
+    eoxLayercontrol: unknown;
+}, HTMLSpanElement>;
+export default _default;

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

@@ -0,0 +1,11 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    icon: string;
+    target: string;
+    $props: {
+        readonly icon?: string | undefined;
+        readonly target?: string | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {
+    rootRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

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

@@ -0,0 +1,14 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    enableCompare: boolean;
+    zoom: number;
+    center?: [number, number] | undefined;
+    $props: {
+        readonly enableCompare?: boolean | undefined;
+        readonly zoom?: number | undefined;
+        readonly center?: [number, number] | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {
+    eoxMap: unknown;
+    compareMap: unknown;
+}, any>;
+export default _default;

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

@@ -0,0 +1,13 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    compareIndicators: boolean;
+    exportMap: boolean;
+    changeProjection: boolean;
+    $props: {
+        readonly compareIndicators?: boolean | undefined;
+        readonly exportMap?: boolean | undefined;
+        readonly changeProjection?: boolean | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {
+    rootRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

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

@@ -0,0 +1,4 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {
+    jsonformEl: unknown;
+}, HTMLDivElement>;
+export default _default;

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

@@ -0,0 +1,21 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    styleOverride: string;
+    tags: unknown[];
+    header: unknown[];
+    footer: unknown[];
+    body: unknown[];
+    featured: unknown[];
+    allowHtml: boolean;
+    subheader: unknown[];
+    $props: {
+        readonly styleOverride?: string | undefined;
+        readonly tags?: unknown[] | undefined;
+        readonly header?: unknown[] | undefined;
+        readonly footer?: unknown[] | undefined;
+        readonly body?: unknown[] | undefined;
+        readonly featured?: unknown[] | undefined;
+        readonly allowHtml?: boolean | undefined;
+        readonly subheader?: unknown[] | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

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

@@ -0,0 +1,19 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    layoutTarget: string;
+    layoutIcon: string;
+    itemFilterConfig: Record<string, any>;
+    showLayoutSwitcher: boolean;
+    indicatorBtnText: string;
+    showIndicatorsBtn: boolean;
+    $props: {
+        readonly layoutTarget?: string | undefined;
+        readonly layoutIcon?: string | undefined;
+        readonly itemFilterConfig?: Record<string, any> | undefined;
+        readonly showLayoutSwitcher?: boolean | undefined;
+        readonly indicatorBtnText?: string | undefined;
+        readonly showIndicatorsBtn?: boolean | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {
+    rootEl: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

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

@@ -0,0 +1,7 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    getLayers: Function;
+    $props: {
+        readonly getLayers?: Function | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLSpanElement>;
+export default _default;

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

@@ -0,0 +1,28 @@
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    height: string;
+    maxHeight: string;
+    maxWidth: string;
+    width: string;
+    widget?: import("../core/client/types").Widget<"compiletime"> | undefined;
+    $props: {
+        readonly height?: string | undefined;
+        readonly maxHeight?: string | undefined;
+        readonly maxWidth?: string | undefined;
+        readonly width?: string | undefined;
+        readonly widget?: import("../core/client/types").Widget<"compiletime"> | undefined;
+    };
+}, {}, {}, {}, 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>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLSpanElement;
+};
+declare let __VLS_inheritedAttrs: {};

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

@@ -0,0 +1,10 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    widgets: Omit<import("../core/client/types").Widget<"compiletime">, "layout">[];
+    $props: {
+        readonly widgets?: Omit<import("../core/client/types").Widget<"compiletime">, "layout">[] | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {
+    detailsEls: HTMLDetailsElement[];
+    summaryEls: HTMLElement;
+}, any>;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eodash/eodash",
-  "version": "5.0.0-rc",
+  "version": "5.0.0-rc.1.5",
   "type": "module",
   "types": "./dist/types/core/client/types.d.ts",
   "files": [
@@ -23,16 +23,13 @@
   },
   "exports": {
     ".": {
-      "types": "./dist/types/core/client/types.d.ts",
       "default": "./core/client/main.js"
     },
     "./webcomponent": {
-      "types": "./dist/types/core/client/asWebComponent.d.ts",
       "default": "./dist/client/eo-dash.js"
     },
     "./webcomponent.css": "./dist/client/eo-dash.css",
     "./config": {
-      "types": "./dist/node/types.d.ts",
       "default": "./dist/node/main.js"
     }
   },
@@ -81,9 +78,11 @@
     "commander": "^12.1.0",
     "core-js": "^3.39.0",
     "loglevel": "^1.9.2",
+    "mustache": "^4.2.0",
     "pinia": "^2.3.0",
     "sass": "^1.83.0",
     "stac-js": "^0.0.9",
+    "stac-ts": "^1.0.4",
     "v-calendar": "3.0.0",
     "vega": "^5.30.0",
     "vega-embed": "^6.29.0",
@@ -105,10 +104,8 @@
     "cypress": "^13.17.0",
     "eslint": "^9.17.0",
     "eslint-plugin-vue": "^9.32.0",
-    "mustache": "^4.2.0",
     "prettier": "^3.4.2",
     "rollup": "^4.28.1",
-    "stac-ts": "^1.0.4",
     "terminate": "^2.8.0",
     "tsc-alias": "^1.8.10",
     "typedoc": "^0.27.5",
@@ -119,12 +116,12 @@
     "unplugin-fonts": "^1.3.1",
     "vitepress": "^1.5.0",
     "vitest": "^1.6.0",
-    "vue-tsc": "2.0.22"
+    "vue-tsc": "2.2.0"
   },
   "engines": {
     "node": ">=20.15.1"
   },
   "bin": {
-    "eodash": "./dist/node/cli.js"
+    "eodash": "dist/node/cli.js"
   }
 }

package/widgets/ExportState.vue

@@ -52,9 +52,9 @@
 import { mdiClipboardCheckOutline, mdiContentCopy } from "@mdi/js";
 import PopUp from "./PopUp.vue";
 import { copyToClipBoard } from "@/utils";
-import { computed, ref } from "vue";
+import { ref } from "vue";
 import { getLayers as getLayerAction } from "@/store/actions";
-import { mapPosition } from "@/store/states";
+import { mapPosition, availableMapProjection } from "@/store/states";
 import { removeUnneededProperties } from "@/eodashSTAC/helpers";
 
 const dialog = defineModel({ type: Boolean, required: true, default: false });
@@ -71,7 +71,7 @@ const copySuccess = ref(false);
 const copyBtns = [
   {
     id: Symbol(),
-    copyFn: async () => await copyToClipBoard(mapEntryCode.value, copySuccess),
+    copyFn: async () => await copyToClipBoard(getMapEntryCode(), copySuccess),
     copyAs: "simple map",
   },
   {
@@ -82,28 +82,28 @@ const copyBtns = [
   },
   {
     id: Symbol(),
-    copyFn: async () => await copyToClipBoard(mapStepCode.value, copySuccess),
+    copyFn: async () => await copyToClipBoard(getMapStepCode(), copySuccess),
     copyAs: "map tour section",
   },
 ];
 
-const mapStepCode = computed(() => {
+const getMapStepCode = () => {
   const [x, y, z] = mapPosition.value;
   const preTag = "### <!" + "--{ layers=";
-  const endTag = `zoom="${z}" center=[${[x, y]}] animationOptions={duration:500}}-->
+  const endTag = `zoom="${z}" center=[${[x, y]}] projection="${availableMapProjection.value}" animationOptions={duration:500}}-->
 #### Tour step title
 Text describing the current step of the tour and why it is interesting what the map shows currently
 `;
   return `${preTag}'${JSON.stringify(removeUnneededProperties(props.getLayers()))}' ${endTag}`;
-});
-const mapEntryCode = computed(() => {
+};
+const getMapEntryCode = () => {
   const [x, y, z] = mapPosition.value;
   const preTag =
     "## Map Example <!" +
     '--{as="eox-map" style="width: 100%; height: 500px;" layers=';
-  const endTag = `zoom="${z}" center=[${[x, y]}] }-->`;
+  const endTag = `zoom="${z}" center=[${[x, y]}] projection="${availableMapProjection.value}" }-->`;
   return `${preTag}'${JSON.stringify(removeUnneededProperties(props.getLayers()))}' ${endTag}`;
-});
+};
 </script>
 <style scoped>
 .code-block {