@eodash/eodash 5.0.0-rc.2 → 5.0.0-rc.2.2

package/dist/client/{asWebComponent-CLUhauLl.js → asWebComponent--e4yqM3f.js}

@@ -4,6 +4,7 @@ import { setupCache } from 'axios-cache-interceptor';
 import log from 'loglevel';
 import { mdiViewDashboardVariant, mdiViewDashboard, mdiAlertCircle, mdiClose, mdiChevronRight, mdiChevronLeft, mdiMenuDown, mdiPlus } from '@mdi/js';
 import { useEventBus, createSharedComposable } from '@vueuse/core';
+import WebFontLoader from 'webfontloader';
 import { toAbsolute } from 'stac-js/src/http.js';
 import { Collection, Item } from 'stac-js';
 import VCalendar from 'v-calendar';
@@ -3783,6 +3784,16 @@ const eodash = reactive({
   brand: {
     noLayout: true,
     name: "Demo",
+    font: {
+      headers: {
+        family: "Open Sans",
+        link: "https://eox.at/fonts/opensans/opensans.css",
+      },
+      body: {
+        family: "Sintony",
+        link: "https://eox.at/fonts/sintony/sintony.css",
+      },
+    },
     theme: {
       colors: {
         primary: "#002742",
@@ -3827,7 +3838,7 @@ const eodash = reactive({
         },
       },
       background: {
-        id: Symbol(),
+        id: "background-map",
         type: "internal",
         widget: {
           name: "EodashMap",
@@ -3949,7 +3960,7 @@ const eodash = reactive({
         },
       },
       background: {
-        id: Symbol(),
+        id: "background-map",
         type: "internal",
         widget: {
           name: "EodashMap",
@@ -4015,7 +4026,7 @@ const eodash = reactive({
               ? {
                   id: "Datepicker",
                   type: "internal",
-                  layout: { x: 5, y: 8, w: 2, h: 4 },
+                  layout: { x: 5, y: 11, w: 2, h: 1 },
                   title: "Date",
                   widget: {
                     name: "EodashDatePicker",
@@ -4078,7 +4089,7 @@ const eodash = reactive({
         },
       },
       background: {
-        id: Symbol(),
+        id: "background-map",
         type: "internal",
         widget: {
           name: "EodashMap",
@@ -7590,41 +7601,119 @@ const collectionsPalette = reactive([
 /**
  * Loads font in the app using `webfontloader`
  *
- * @param {string} [family]
- * @param {string} [link]
- * @param {boolean} [isWebComponent]
- * @returns {Promise<string>} - Font family name
+ * @param {import("@/types").Eodash["brand"]["font"]} fontConfig
+ * @param {boolean} isWebComponent
+ * @returns {Promise<string[]>} - Font family name
  * @see {@link "https://github.com/typekit/webfontloader"}
  */
-const loadFont = async (
-  family = "",
-  link = "",
-  isWebComponent = false,
-) => {
-  if (family && link) {
-    const WebFontLoader = (await import('webfontloader')).default;
-    WebFontLoader.load({
-      classes: false,
-      custom: {
-        // Use FVD notation to include families https://github.com/typekit/fvd
-        families: [family],
-        // Path to stylesheet that defines font-face
-        urls: [link],
-      },
-      fontactive(familyName, _fvd) {
-        const stylesheet = new CSSStyleSheet();
-        const styles = isWebComponent
-          ? `eo-dash {font-family: ${familyName};}`
-          : `* {font-family: ${familyName};}`;
-        stylesheet.replaceSync(styles);
-        document.adoptedStyleSheets.push(stylesheet);
-      },
-      fontinactive(familyName, _fvd) {
-        throw new Error(`error loading font: ${familyName}`);
-      },
-    });
+const loadFont = async (fontConfig, isWebComponent) => {
+  if (!fontConfig) {
+    return [];
+  }
+
+  let headerFamily = "",
+    bodyFamily = "",
+    headerLink = "",
+    bodyLink = "";
+  if ("headers" in fontConfig) {
+    headerFamily = fontConfig?.headers?.family;
+    headerLink = fontConfig.headers.link ?? "";
+    bodyFamily = fontConfig?.body?.family;
+    bodyLink = fontConfig.body.link ?? "";
+  } else {
+    headerFamily = fontConfig.family;
+    headerLink = fontConfig.link ?? "";
+    bodyFamily = fontConfig?.family;
+    bodyLink = fontConfig.link ?? "";
+  }
+  const families =
+    headerFamily === bodyFamily ? [headerFamily] : [headerFamily, bodyFamily];
+  const urls = [];
+  if (bodyLink && headerLink) {
+    if (bodyLink !== headerLink) {
+      urls.push(bodyLink);
+      urls.push(headerLink);
+    } else {
+      urls.push(bodyLink);
+    }
   }
-  return family;
+
+  WebFontLoader.load({
+    classes: false,
+    custom: {
+      // Use FVD notation to include families https://github.com/typekit/fvd
+      families,
+      // Path to stylesheet that defines font-face
+      urls,
+    },
+    fontactive(familyName, _fvd) {
+      const stylesheet = new CSSStyleSheet();
+
+      const bodyRule = `
+         ${isWebComponent ? "eo-dash" : `:root`} {
+          font-family: ${bodyFamily};
+          --vc-font-family: ${bodyFamily};
+          }
+           eox-layercontrol,
+           eox-map,
+           eox-jsonform,
+           eox-timecontrol,
+           eox-itemfilter,
+           eox-chart,
+           eox-stacinfo{
+            --eox-body-font-family: ${bodyFamily};
+             font-family: ${bodyFamily}
+            ;
+           }
+            *[class*="text-body"]{
+              font-family: ${bodyFamily}
+            }
+            `;
+
+      const headersRule = `
+           ${
+             isWebComponent
+               ? `
+            eo-dash h1,
+            eo-dash h2,
+            eo-dash h3,
+            eo-dash h4,
+            eo-dash h5,
+            eo-dash *[class*="header"]
+            `
+               : `
+            h1,
+            h2,
+            h3,
+            h4,
+            h5,
+            *[class*="header"]`
+           } {
+           font-family: ${headerFamily} !important;
+         }
+           eox-layercontrol,
+           eox-map,
+           eox-jsonform,
+           eox-timecontrol,
+           eox-itemfilter,
+           eox-chart,
+           eox-stacinfo {
+          --eox-header-font-family: ${headerFamily};
+          `;
+      const isOne = headerFamily && headerFamily === bodyFamily;
+      const styles = isOne
+        ? bodyRule + "\n" + headersRule
+        : familyName == bodyFamily
+          ? bodyRule
+          : headersRule;
+      stylesheet.replaceSync(styles);
+      document?.adoptedStyleSheets?.push(stylesheet);
+    },
+    fontinactive(familyName, _fvd) {
+      throw new Error(`error loading font: ${familyName}`);
+    },
+  });
+  return families;
 };
 
 /**
@@ -8029,10 +8118,14 @@ function getStyleVariablesState(collectionId, variables) {
   }
 
   const olLayer = mapElement.getLayerById(matchingLayer.properties?.id ?? "");
-  const oldVariablesState = /** @type {import("ol/layer").WebGLTile} */ (
-    olLayer
-    //@ts-expect-error todo
-  ).getStyle()?.variables;
+  const oldVariablesState =
+    /** @type {import("ol/layer").Vector} */ (
+      olLayer
+      //@ts-expect-error variables doesn't exist in non-flat style
+    ).getStyle?.()?.variables ??
+    //@ts-expect-error (styleVariables_ is a private property)
+    /** @type {import("ol/layer").WebGLTile} */ (olLayer).styleVariables_;
+
   if (!oldVariablesState) {
     return variables;
   }
@@ -8047,8 +8140,11 @@ function getStyleVariablesState(collectionId, variables) {
   return matchingKeys ? oldVariablesState : variables;
 }
 
-/** @param {import("stac-ts").StacLink[]} [links] */
-function generateFeatures(links) {
+/**
+ *  @param {import("stac-ts").StacLink[]} [links]
+ *  @param {Record<string,any>} [extraProperties]
+ **/
+function generateFeatures(links, extraProperties = {}) {
   /**
    * @type {import("geojson").Feature[]}
    */
@@ -8064,7 +8160,7 @@ function generateFeatures(links) {
           type: "Point",
           coordinates: [lon, lat],
         },
-        properties: { id: element.id },
+        properties: { ...element, ...extraProperties },
       });
     }
   });
@@ -9184,12 +9280,16 @@ class EodashCollection {
         continue;
       }
       const collectionFeatures = generateFeatures(
-        collection.#collectionStac?.links,
+        JSON.parse(JSON.stringify(collection.#collectionStac?.links)),
+        {
+          collection_id: collection.#collectionStac?.id,
+          geoDBID: collection.#collectionStac?.geoDBID,
+          themes: collection.#collectionStac?.themes ?? [],
+        },
       ).features;
+
       if (collectionFeatures.length) {
-        allFeatures.push(
-          generateFeatures(collection.#collectionStac?.links).features,
-        );
+        allFeatures.push(collectionFeatures);
       }
     }
     if (allFeatures.length) {
@@ -9207,7 +9307,7 @@ class EodashCollection {
         type: "Vector",
         properties: {
           id: "geodb-collection",
-          title: "GeoDB Collection",
+          title: "Observation Points",
         },
         source: {
           type: "Vector",
@@ -11448,7 +11548,7 @@ const ErrorAlert = /*#__PURE__*/_export_sfc(_sfc_main$3, [['__scopeId',"data-v-a
 const internalWidgets = (() => {
   /** @type {Record<string, () => Promise<import("vue").Component>>} */
   const importMap = {
-    .../* #__PURE__ */ Object.assign({"/widgets/EodashDatePicker.vue": () => import('./EodashDatePicker-Bp5ec3BC.js'),"/widgets/EodashItemFilter.vue": () => import('./EodashItemFilter-Cx0t-qeW.js'),"/widgets/EodashLayerControl.vue": () => import('./EodashLayerControl-DERx00In.js'),"/widgets/EodashLayoutSwitcher.vue": () => import('./EodashLayoutSwitcher-DTS7otlk.js'),"/widgets/EodashMap.vue": () => import('./EodashMap-C-I6puhb.js'),"/widgets/EodashMapBtns.vue": () => import('./EodashMapBtns-CWgtJiG4.js'),"/widgets/EodashProcess.vue": () => import('./EodashProcess-DWrTIyHT.js'),"/widgets/EodashStacInfo.vue": () => import('./EodashStacInfo-Dvsk97Mz.js'),"/widgets/EodashTools.vue": () => import('./EodashTools-CdnjgTTl.js'),"/widgets/ExportState.vue": () => import('./ExportState-S4lcehm3.js'),"/widgets/PopUp.vue": () => import('./PopUp-CzqV8BFZ.js'),"/widgets/WidgetsContainer.vue": () => import('./WidgetsContainer-Cv466WUW.js')}),
+    .../* #__PURE__ */ Object.assign({"/widgets/EodashDatePicker.vue": () => import('./EodashDatePicker-DyLo_JUC.js'),"/widgets/EodashItemFilter.vue": () => import('./EodashItemFilter-BR572AaH.js'),"/widgets/EodashLayerControl.vue": () => import('./EodashLayerControl-C_mi-Hoo.js'),"/widgets/EodashLayoutSwitcher.vue": () => import('./EodashLayoutSwitcher-D4ooLbys.js'),"/widgets/EodashMap.vue": () => import('./EodashMap-CGFv4e85.js'),"/widgets/EodashMapBtns.vue": () => import('./EodashMapBtns-_M7SW7Is.js'),"/widgets/EodashProcess.vue": () => import('./EodashProcess-ZQAMi9Pc.js'),"/widgets/EodashStacInfo.vue": () => import('./EodashStacInfo-CwOCcsGl.js'),"/widgets/EodashTools.vue": () => import('./EodashTools-C_X0RPIp.js'),"/widgets/ExportState.vue": () => import('./ExportState-DNUSRJSJ.js'),"/widgets/PopUp.vue": () => import('./PopUp-CEmhdNIj.js'),"/widgets/WidgetsContainer.vue": () => import('./WidgetsContainer-GUwXMh9d.js')}),
     .../* #__PURE__ */ Object.assign({}),
   };
   for (const key in importMap) {
@@ -11540,11 +11640,16 @@ const getWidgetDefinition = (config) => {
   switch (config?.type) {
     case "internal":
       importedWidget.component = defineAsyncComponent({
-        loader:
-          internalWidgets[
+        loader: () => {
+          const widgetName =
             /** @type {import("@/types").InternalComponentWidget} * */ (config)
-              ?.widget.name
-          ],
+              ?.widget.name;
+
+          return (
+            internalWidgets[widgetName]?.() ??
+            Promise.reject(`Widget ${widgetName} not found`)
+          );
+        },
         suspensible: true,
       });
       importedWidget.props = reactive(
@@ -11556,7 +11661,7 @@ const getWidgetDefinition = (config) => {
 
     case "web-component":
       importedWidget.component = defineAsyncComponent({
-        loader: () => import('./DynamicWebComponent-BCwpocDX.js'),
+        loader: () => import('./DynamicWebComponent-BRQQ5AXV.js'),
         suspensible: true,
       });
       importedWidget.props = reactive(config.widget);
@@ -11632,11 +11737,22 @@ const useTemplate = () => {
         }
 
         const templateConfig = eodash.templates[template];
-        [definedTemplate.bgWidget] = useDefineWidgets([
+        const [importedBgWidget] = useDefineWidgets([
           templateConfig.background,
         ]);
+        if (importedBgWidget.value.id !== definedTemplate.bgWidget.value?.id) {
+          definedTemplate.bgWidget.value = importedBgWidget.value;
+        }
+
+        const [importedLoadingWidget] = useDefineWidgets([
+          templateConfig.loading,
+        ]);
 
-        [definedTemplate.loading] = useDefineWidgets([templateConfig.loading]);
+        if (
+          importedLoadingWidget.value.id !== definedTemplate.loading.value?.id
+        ) {
+          definedTemplate.loading.value = importedLoadingWidget.value;
+        }
 
         definedTemplate.importedWidgets = useDefineWidgets(
           templateConfig.widgets,
@@ -11959,6 +12075,9 @@ const _sfc_main$1 = {
 let __temp, __restore;
 
 const props = __props;
+
+useURLSearchParametersSync();
+
 const eodash = (
   ([__temp,__restore] = withAsyncContext(() => useEodashRuntime(props.config))),
   __temp = await __temp,
@@ -11966,18 +12085,12 @@ const eodash = (
   __temp
 );
 
-useURLSearchParametersSync();
-
 const theme = useUpdateTheme("dashboardTheme", {
   ...(eodash.brand?.theme ?? {}),
 });
 theme.global.name.value = "dashboardTheme";
 (
-  ([__temp,__restore] = withAsyncContext(() => loadFont(
-  eodash.brand?.font?.family,
-  eodash.brand?.font?.link,
-  props.isWebComponent,
-))),
+  ([__temp,__restore] = withAsyncContext(() => loadFont(eodash.brand?.font, props.isWebComponent))),
   await __temp,
   __restore()
 );
@@ -11992,15 +12105,15 @@ const { loadSTAC } = useSTAcStore();
 const { smAndDown } = useDisplay();
 const TemplateComponent = computed(() =>
   smAndDown.value
-    ? defineAsyncComponent(() => import('./MobileLayout-DRgyQYFz.js'))
-    : defineAsyncComponent(() => import('./DashboardLayout-VrJIbhe8.js')),
+    ? defineAsyncComponent(() => import('./MobileLayout-CUHZFLDY.js'))
+    : defineAsyncComponent(() => import('./DashboardLayout-ByVMURpM.js')),
 );
 
 const HeaderComponent = defineAsyncComponent(
-  () => import('./Header-CTiEXLi0.js'),
+  () => import('./Header-BcHAtFqr.js'),
 );
 const FooterComponent = defineAsyncComponent(
-  () => import('./Footer-DlIEbXp-.js'),
+  () => import('./Footer-FUp1Te0L.js'),
 );
 
 const templateHeight = props.isWebComponent ? "100%" : "100dvh";