@geops/rvf-mobility-web-component 0.1.46 → 0.1.47-beta.0

package/input.css

@@ -1,6 +1,24 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config './tailwind.config.mjs';
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
 
 ::-webkit-scrollbar {
   width: 3px;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@geops/rvf-mobility-web-component",
   "license": "UNLICENSED",
   "description": "Web components for rvf in the domains of mobility and logistics.",
-  "version": "0.1.46",
+  "version": "0.1.47-beta.0",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",
@@ -11,65 +11,62 @@
     "graphql-request": "^7.1.2",
     "jspdf": "^2.5.2",
     "lodash.debounce": "^4.0.8",
-    "maplibre-gl": "^4.7.1",
-    "mobility-toolbox-js": "3.3.1",
-    "ol": "^10.3.1",
-    "preact": "^10.25.4",
-    "preact-custom-element": "^4.3.0",
+    "maplibre-gl": "^5.7.2",
+    "mobility-toolbox-js": "3.3.4-beta.21",
+    "ol": "^10.6.1",
+    "preact": "^10.27.2",
+    "preact-custom-element": "^4.5.1",
     "react": "npm:@preact/compat@^18.3.1",
     "react-dom": "npm:@preact/compat@^18.3.1",
-    "react-icons": "^5.4.0",
+    "react-icons": "^5.5.0",
     "react-spatial": "^1.12.2",
     "rosetta": "^1.1.0",
-    "showdown": "^2.1.0",
-    "tailwind-merge": "^2.6.0"
+    "showdown": "^2.1.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.6.1",
-    "@commitlint/config-conventional": "^19.6.0",
-    "@eslint/js": "^9.17.0",
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/js": "^9.35.0",
+    "@geops/eslint-config-react": "^1.5.0",
+    "@tailwindcss/cli": "^4.1.13",
     "@tailwindcss/container-queries": "^0.1.1",
     "@testing-library/preact": "^3.2.4",
-    "@types/geojson": "^7946.0.15",
-    "@types/jest": "^29.5.14",
+    "@types/geojson": "^7946.0.16",
+    "@types/jest": "^30.0.0",
     "@types/preact-custom-element": "^4.0.4",
-    "concurrently": "^9.1.2",
-    "esbuild": "^0.24.2",
+    "concurrently": "^9.2.1",
+    "esbuild": "^0.25.10",
     "esbuild-sass-plugin": "^3.3.1",
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-perfectionist": "^4.5.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.3",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-tailwindcss": "^3.17.5",
+    "eslint": "^9.35.0",
+    "eslint-plugin-tailwindcss": "^4.0.0-beta.0",
     "fixpack": "^4.0.0",
     "generact": "^0.4.0",
     "husky": "^9.1.7",
-    "jest": "^29.7.0",
+    "jest": "^30.1.3",
     "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^29.7.0",
+    "jest-environment-jsdom": "^30.1.2",
     "jest-preset-preact": "^4.1.1",
-    "next": "15.0.3",
-    "preact-render-to-string": "^6.5.12",
-    "prettier": "^3.4.2",
+    "next": "15.5.2",
+    "preact-render-to-string": "^6.6.1",
+    "prettier": "^3.6.2",
+    "prettier-plugin-tailwindcss": "^0.6.14",
     "standard-version": "^9.5.0",
-    "tailwindcss": "^3.4.17",
-    "ts-jest": "^29.2.5",
-    "typescript": "^5.7.2",
-    "typescript-eslint": "^8.19.0"
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.13",
+    "ts-jest": "^29.4.3",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.44.0"
   },
   "scripts": {
-    "build": "yarn build:css && yarn build:js",
+    "build": "yarn build:css && yarn build:js && cp index*.js* doc/public/",
     "build:css": "yarn tailwind:component && yarn tailwind:website",
     "build:js": "node scripts/build.mjs",
     "cp": "generact --root src",
     "dev": "node scripts/dev.mjs",
-    "doc": "yarn build && cp index.js doc/public/index.js && cd doc && yarn build",
-    "doc:dev": "yarn build && cp index.js doc/public/index.js && cp index.js.map doc/public/index.js.map && cd doc && yarn dev",
-    "format": "prettier --write 'src/**/*.(tsx|ts)' && eslint src/**/*.tsx src/**/*.ts --fix ",
-    "lint": "eslint src/**/*.tsx",
+    "doc": "yarn build && cd doc && yarn build",
+    "doc:dev": "yarn build && cd doc && yarn dev",
+    "format": "prettier --write 'src/**/*.(tsx|ts)' && eslint 'src/**/*.tsx' 'src/**/*.ts' --fix ",
+    "lint": "eslint 'src/**/*.tsx' 'src/**/*.ts'",
     "prepare": "husky",
     "publish:beta": "HUSKY=0 yarn release -- --prerelease beta --skip.changelog && yarn run build && HUSKY=0 yarn publish --access public --tag beta && git push origin HEAD && git push --tags ",
     "publish:beta:dryrun": "yarn release -- --prerelease beta --dry-run --skip.changelog",
@@ -77,8 +74,8 @@
     "publish:public:dryrun": "yarn release --dry-run",
     "release": "standard-version",
     "start": "concurrently \"yarn tailwind:component --watch\" \"yarn tailwind:website --watch\" \"yarn dev\"",
-    "tailwind:component": "tailwindcss --input=./input.css --output=src/style.css --content=src/**/*.tsx",
-    "tailwind:website": "tailwindcss --input=./input.css --output=output.css --content=*.html --minify",
+    "tailwind:component": "npx @tailwindcss/cli --input=./input.css --output=src/style.css --content=src/**/*.tsx",
+    "tailwind:website": "npx @tailwindcss/cli --input=./input.css --output=output.css --content=*.html --minify",
     "test": "TZ=UTC jest",
     "up": "yarn upgrade-interactive --latest",
     "upstream": "git fetch upstream && git merge upstream/main"

package/scripts/build.mjs

@@ -3,14 +3,14 @@ import { sassPlugin } from "esbuild-sass-plugin";
 
 await esbuild.build({
   bundle: true,
-  entryPoints: ["./src/index.js"],
+  entryPoints: ["./src/index.js", "./src/indexDoc.js"],
   external: ["mapbox-gl"],
   loader: {
     ".png": "dataurl",
     ".svg": "dataurl",
   },
   minify: true,
-  outfile: "index.js",
+  outdir: "./",
   plugins: [sassPlugin({ type: "css-text" })],
   sourcemap: false,
 });

package/scripts/dev.mjs

@@ -3,13 +3,13 @@ import { sassPlugin } from "esbuild-sass-plugin";
 
 const ctx = await esbuild.context({
   bundle: true,
-  entryPoints: ["./src/index.js"],
+  entryPoints: ["./src/index.js", "./src/indexDoc.js"],
   external: ["mapbox-gl"],
   loader: {
     ".png": "dataurl",
     ".svg": "dataurl",
   },
-  outfile: "index.js",
+  outdir: "./",
   plugins: [sassPlugin({ type: "css-text" })],
   sourcemap: true,
 });
@@ -23,6 +23,6 @@ await ctx.watch();
 // eslint-disable-next-line no-undef
 console.log(
   `watching... and running at ${
-    host === "0.0.0.0" ? "http://localhost" : host
+    !host || host === "0.0.0.0" ? "http://localhost" : host
   }:${port}`,
 );

package/search.html

@@ -16,6 +16,7 @@
       }
     </script>
     <script type="module" src="./index.js"></script>
+    <script type="module" src="./indexDoc.js"></script>
     <script src="./docutils.js"></script>
     <link rel="stylesheet" type="text/css" href="./output.css" />
     <style>
@@ -82,32 +83,78 @@
       const pkgSrc = "https://www.unpkg.com/@geops/mobility-web-component";
       const wc = document.querySelector("geops-mobility-search");
 
-      const attrs = [
-        "apikey",
-        "bbox",
-        "countrycode",
-        "event",
-        "field",
-        "limit",
-        "mots",
-        "onselect",
-        "params",
-        "prefagencies",
-        "reflocation",
-        "url",
-      ];
+      window.addEventListener("load", () => {
 
-      const events = [
-        "mwc:stopssearchselect",
-      ];
+        // Add special parameters
+        window.MobilityMapAttributes.fullscreen = {
+          type: "boolean",
+          defaultValue: "false",
+          description: `Load the page in fullscreen mode.`,
+          reload: true,
+        };
 
-      document.querySelector('#attributes').innerHTML = generateAttributesTable(wc, attrs);
-      document.querySelector('#events').innerHTML = generateEventsTable(wc, events);
-      document.querySelector('#code').innerHTML = generateCodeText(wc, attrs, pkgSrc);
-      wc.addEventListener('mwc:attribute', (event) => {
-        document.querySelector('#code').innerHTML = generateCodeText(wc, attrs, pkgSrc);
+        /* Attributes */
+        const attrs = Object.keys(MobilitySearchAttributes);
+        const booleanAttrs = Object.entries(MobilitySearchAttributes)
+          .filter(([, attr]) => attr.type === "boolean")
+          .map(([key]) => key);
+        const booleanTrueByDefault = booleanAttrs.filter(
+          (key) => MobilitySearchAttributes[key].defaultValue === "true",
+        );
+        const reloadAttrs = Object.entries(MobilitySearchAttributes)
+          .filter(([key, attr]) => !!attr.reload)
+          .map(([key]) => key);
+
+        const descriptionByAttr = Object.entries(MobilitySearchAttributes).reduce((acc, [key, attr]) => {
+            acc[key] = attr.description;
+            return acc;
+          }, {});
+
+        /* Events */
+        const events = [
+          "mwc:stopssearchselect",
+          "mwc:attribute",
+        ];
+        const descriptionByEvent = {
+          "mwc:stopssearchselect":
+            "Only when search attribute is 'true'. Event fired when a stop is selected in the stops search results. The event data contains the selected stop.",
+          "mwc:attribute":
+            "Event fired when an web component's attribute is changed. The event data contains the list of all attributes and their values.",
+        };
+
+        document.querySelector("#attributes").innerHTML =
+          generateAttributesTable(
+            wc,
+            attrs,
+            booleanAttrs,
+            booleanTrueByDefault,
+            descriptionByAttr,
+            reloadAttrs,
+          );
+        document.querySelector("#events").innerHTML = generateEventsTable(
+          wc,
+          events,
+          descriptionByEvent,
+        );
+        document.querySelector("#code").innerHTML = generateCodeText(
+          wc,
+          attrs,
+          pkgSrc,
+        );
+        wc.addEventListener("mwc:attribute", (event) => {
+          document.querySelector("#code").innerHTML = generateCodeText(
+            wc,
+            attrs,
+            pkgSrc,
+          );
+        });
+        applyPermalinkParameters(wc);
+        events.forEach((eventName) => {
+          wc.addEventListener(eventName, (event) => {
+            console.log(`${eventName} event`, event);
+          });
+        });
       });
-      applyPermalinkParameters(wc);
     </script>
   </body>
 </html>

package/src/BaseLayer/BaseLayer.tsx

@@ -1,10 +1,11 @@
 import { MaplibreLayer } from "mobility-toolbox-js/ol";
-import { MaplibreLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreLayer";
 import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
 import useMapContext from "../utils/hooks/useMapContext";
 
+import type { MaplibreLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreLayer";
+
 export type BaseLayerProps = MaplibreLayerOptions;
 
 function BaseLayer(props: BaseLayerProps) {

package/src/Copyright/Copyright.tsx

@@ -1,12 +1,14 @@
 import { CopyrightControl } from "mobility-toolbox-js/ol";
-import { CopyrightControlOptions } from "mobility-toolbox-js/ol/controls/CopyrightControl";
-import { JSX, PreactDOMAttributes } from "preact";
 import { useEffect, useMemo, useState } from "preact/hooks";
 
 import useMapContext from "../utils/hooks/useMapContext";
+
 // @ts-expect-error bad type definition
 import style from "./index.css";
 
+import type { CopyrightControlOptions } from "mobility-toolbox-js/ol/controls/CopyrightControl";
+import type { JSX, PreactDOMAttributes } from "preact";
+
 export type CopyrightProps = {
   options?: CopyrightControlOptions;
 } & JSX.HTMLAttributes<HTMLDivElement> &

package/src/DebugDeparture/DebugDeparture.tsx

@@ -1,8 +1,11 @@
-import { JSX, PreactDOMAttributes } from "preact";
-
 import useDebug from "../utils/hooks/useDebug";
 import useDeparture from "../utils/hooks/useDeparture";
 
+import type { RealtimeDeparture } from "mobility-toolbox-js/types";
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import type { StationFeature } from "../StopsSearch";
+
 export type DebugDepartureProps = JSX.HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 
@@ -13,7 +16,7 @@ const pad = (n: number) => {
   return `0${n}`.slice(-2);
 };
 
-const formatDebugTime = (time, excludeSeconds = false) => {
+const formatDebugTime = (time: string, excludeSeconds = false) => {
   const d = new Date(time);
 
   return !time || Number.isNaN(d)
@@ -37,34 +40,35 @@ function DebugDeparture(props: DebugDepartureProps) {
     return null;
   }
   const {
-    // @ts-expect-error bad type definition
     arrivalTime,
     at_station_ds100: atStationDs100,
-    // @ts-expect-error bad type definition
     departureTime,
     fzo_estimated_time: fzoEstimatedTime,
     has_fzo: hasFzo,
-    // @ts-expect-error bad type definition
     last_boarding_time: lastBoardingTime,
     min_arrival_time: minArrivalTime,
     ris_aimed_time: risAimedTime,
     ris_estimated_time: risEstimatedTime,
     state,
-    // @ts-expect-error bad type definition
     station,
-    // @ts-expect-error bad type definition
     stations_in_between: stationsInBetween,
     time,
     train_number: trainNumber,
-  } = departure;
+  } = departure as {
+    arrivalTime: string;
+    departureTime: string;
+    last_boarding_time: string;
+    station: StationFeature;
+    stations_in_between: number;
+  } & RealtimeDeparture;
 
   const risTime = new Date(risAimedTime);
   const urlDate = Number.isNaN(risTime)
     ? ""
     : [
-        (risTime as Date).getFullYear(),
-        pad((risTime as Date).getMonth() + 1),
-        pad((risTime as Date).getDate()),
+        risTime.getFullYear(),
+        pad(risTime.getMonth() + 1),
+        pad(risTime.getDate()),
       ].join("-");
 
   const risLink = [

package/src/DebugStop/DebugStop.tsx

@@ -1,8 +1,8 @@
-import { JSX, PreactDOMAttributes } from "preact";
-
 import useDebug from "../utils/hooks/useDebug";
 import useRouteStop from "../utils/hooks/useRouteStop";
 
+import type { JSX, PreactDOMAttributes } from "preact";
+
 export type DebugStopProps = JSX.HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 

package/src/Departure/Departure.tsx

@@ -1,5 +1,3 @@
-import type { RealtimeDeparture } from "mobility-toolbox-js/types";
-
 import { memo, useMemo } from "preact/compat";
 
 import DebugDeparture from "../DebugDeparture";
@@ -8,6 +6,8 @@ import getHoursAndMinutes from "../utils/getHoursAndMinutes";
 import { DepartureContext } from "../utils/hooks/useDeparture";
 import useMapContext from "../utils/hooks/useMapContext";
 
+import type { RealtimeDeparture } from "mobility-toolbox-js/types";
+
 export interface DepartureProps {
   departure: RealtimeDeparture;
   index: number;
@@ -28,7 +28,6 @@ function Departure({ departure, index, ...props }: DepartureProps) {
           setTrainId(departure.train_id);
           setStationId();
         }}
-        type="button"
         {...props}
       >
         <div

package/src/EmbedNavigation/DragPanWarning.ts

@@ -0,0 +1,125 @@
+import { Control } from "ol/control";
+import { DragPan } from "ol/interaction";
+import { unByKey } from "ol/Observable";
+
+import type { Map, MapBrowserEvent } from "ol";
+import type { Options } from "ol/control/Control";
+import type { EventsKey } from "ol/events";
+
+type DragPanWarningOptions = {
+  className?: string;
+} & Options;
+
+class DragPanWarning extends Control {
+  dragPan?: DragPan;
+
+  icon: HTMLDivElement;
+
+  onPointerDragRef?: EventsKey;
+
+  text: HTMLParagraphElement;
+
+  constructor(options: DragPanWarningOptions = {}) {
+    const element = document.createElement("div");
+    element.className =
+      options.className !== undefined
+        ? options.className
+        : "ol-drag-pan-warning";
+    element.style.display = "none";
+    element.style.pointerEvents = "auto";
+
+    super({
+      element,
+      render: options.render,
+      target: options.target,
+    });
+
+    this.icon = document.createElement("div");
+    this.icon.className = `${element.className}-icon`;
+
+    // sbb icons: sbb/two-finger-tap-large.svg';
+    this.icon.innerHTML = `
+      <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+        <path fill="none" stroke="currentColor" stroke-width="2" d="M22.999,25 L22.997,13.002 C22.997,11.896 23.893,11 24.999,11 C26.105,11 27.001,11.896 27.001,13.002 L26.999,26.002 M31,25.003 C31,23.897 31.896,23.001 33.002,23.001 C34.11,23.001 35.006,23.897 35.006,25.003 C35.006,25.003 35,26.125 35,32.001 C35,37.875 33.2,41.001 33.2,41.001 L19,41.001 C19,41.001 12.21,29.483 11.586,28.419 C10.962,27.355 10.804,26.369 11.586,25.587 C12.37,24.805 13.636,24.805 14.418,25.587 L18.998,30.169 L19,30.169 L19,25.001 L18.996,15.003 C18.996,13.897 19.894,13.001 21,13.001 C22.106,13.001 23.002,13.897 23.002,15.003 L23,26.015 M26.9942,22.997 C26.9942,21.891 27.8902,20.995 28.9962,20.995 C30.1042,20.995 31.0002,21.891 31.0002,22.997 L31.0002,26.001 M30,16.3046 C30.632,15.3606 31,14.2246 31,13.0006 C31,9.6846 28.314,7.0006 25,7.0006 C23.208,7.0006 21.616,7.8026 20.518,9.0486 C17.432,9.2986 15,11.8506 15,15.0006 C15,16.2166 15.368,17.3426 15.988,18.2866"/>
+      </svg>
+    `;
+    this.element.appendChild(this.icon);
+
+    this.text = document.createElement("p");
+    this.text.className = `${element.className}-text`;
+    this.text.innerHTML = "Benutzen Sie 2 Finger um die Karte zu bedienen.";
+    this.element.appendChild(this.text);
+
+    this.dragPan = undefined;
+    this.onPointerDragRef = undefined;
+    this.onPointerDrag = this.onPointerDrag.bind(this);
+    this.onTouchEnd = this.onTouchEnd.bind(this);
+  }
+
+  onPointerDrag(event: MapBrowserEvent<PointerEvent>) {
+    // Show the warning on next pointerdrag events.
+    if (event.activePointers?.length !== 1) {
+      return true;
+    }
+    this.element.style.display = "flex";
+    document.addEventListener("touchend", this.onTouchEnd, { once: true });
+    return false;
+  }
+
+  onTouchEnd() {
+    unByKey(this.onPointerDragRef);
+    this.element.style.display = "none";
+  }
+
+  setMap(map: Map) {
+    super.setMap(map);
+    document.removeEventListener("touchend", this.onTouchEnd);
+    unByKey(this.onPointerDragRef);
+
+    if (map) {
+      const viewport = map.getViewport();
+
+      // We allow default scroll behavior for touch events.
+      viewport.style.touchAction = "pan-x pan-y";
+
+      // Deactivate drag pan only on touch events.
+      this.dragPan = map
+        .getInteractions()
+        .getArray()
+        .find((interaction) => {
+          return interaction instanceof DragPan;
+        });
+
+      if (!this.dragPan) {
+        // eslint-disable-next-line no-console
+        console.error(
+          "Impossible to find the DragPan interaction, DragPanWarning will not work as expected.",
+        );
+        return;
+      }
+
+      this.listenerKeys.push(
+        // @ts-expect-error - we need to listen to pointerdown events
+        map.on("pointerdown", (evt: MapBrowserEvent<PointerEvent>) => {
+          document.removeEventListener("touchend", this.onTouchEnd);
+
+          if (
+            evt.originalEvent.pointerType !== "touch" ||
+            // @ts-expect-error - condition_ is a private method
+            !this.dragPan?.condition_(evt)
+          ) {
+            this.element.style.display = "none";
+            return true;
+          }
+
+          this.onPointerDragRef = map.on("pointerdrag", this.onPointerDrag);
+
+          return true;
+        }),
+      );
+      this.element.addEventListener("click", this.onTouchEnd);
+    }
+  }
+}
+
+export default DragPanWarning;

package/src/EmbedNavigation/EmbedNavigation.tsx

@@ -0,0 +1,52 @@
+import { MouseWheelZoom } from "ol/interaction";
+import { useEffect, useState } from "preact/hooks";
+
+import useMapContext from "../utils/hooks/useMapContext";
+
+import DragPanWarning from "./DragPanWarning";
+
+function EmbedNavigation() {
+  const { isEmbed, map } = useMapContext();
+  const [target, setTarget] = useState(null);
+
+  useEffect(() => {
+    let dragPanWarningControl = null;
+
+    if (!map || !target || !isEmbed) {
+      return;
+    }
+
+    // Deactivates mouse wheel zoom
+    map.getInteractions().forEach((interaction) => {
+      if (interaction instanceof MouseWheelZoom) {
+        interaction.setActive(false);
+      }
+    });
+
+    dragPanWarningControl = new DragPanWarning({ target: target });
+    map.addControl(dragPanWarningControl);
+
+    return () => {
+      if (dragPanWarningControl) {
+        map.removeControl(dragPanWarningControl);
+      }
+
+      // Deactivates mouse wheel zoom
+      map.getInteractions().forEach((interaction) => {
+        if (interaction instanceof MouseWheelZoom) {
+          interaction.setActive(true);
+        }
+      });
+    };
+  }, [map, target, isEmbed]);
+
+  return (
+    <div
+      ref={(node) => {
+        return setTarget(node);
+      }}
+    ></div>
+  );
+}
+
+export default EmbedNavigation;

package/src/EmbedNavigation/index.js

@@ -0,0 +1 @@
+export { default } from "./EmbedNavigation";

package/src/EmbedNavigation/index.tsx

@@ -0,0 +1 @@
+export { default } from "./EmbedNavigation";