@defra/forms-engine-plugin 5.0.0-alpha.11 → 5.0.0-alpha.13

package/.server/client/javascripts/geospatial-map.d.ts

@@ -1,9 +1,15 @@
 /**
+ * Get the map texts for the given language code
+ * @param {LanguageCode} lang - the lanugae code
+ */
+export function getTexts(lang?: LanguageCode): GeospatialLanguageTexts;
+/**
+ * @param {GeospatialPanelTexts} texts
  * @param {boolean} allowPoint
  * @param {boolean} allowLine
  * @param {boolean} allowShape
  */
-export function getHelpPanelHtml(allowPoint: boolean, allowLine: boolean, allowShape: boolean): string;
+export function getHelpPanelHtml(texts: GeospatialPanelTexts, allowPoint: boolean, allowLine: boolean, allowShape: boolean): string;
 /**
  * Extract and parses the GeoJSON from the textarea
  * @param {HTMLTextAreaElement} geospatialInput - the textarea containing the geojson
@@ -34,8 +40,9 @@ export function addFeatureToMap(feature: Feature, drawPlugin: any, map: Interact
  * @param {string} mapId - the ID of the map
  * @param {boolean} [disabled] - render the list with disabled links
  * @param {boolean} [readonly] - render the list in readonly mode
+ * @param {LanguageCode} [lang] - the language for the feature details
  */
-export function createFeaturesHTML(features: FeatureCollection, mapId: string, disabled?: boolean, readonly?: boolean): string;
+export function createFeaturesHTML(features: FeatureCollection, mapId: string, disabled?: boolean, readonly?: boolean, lang?: LanguageCode): string;
 /**
  * Focus feature
  * @param {Feature} feature - the feature
@@ -49,8 +56,9 @@ export function focusFeature(feature: Feature, mapProvider: MapLibreMap): void;
  * @param {string} mapId - the ID of the map
  * @param {boolean} [disabled] - render the list with disabled links
  * @param {boolean} [readonly] - render the list item in readonly mode
+ * @param {LanguageCode} [lang] - the language for the feature details
  */
-export function createFeatureHTML(feature: Feature, index: number, mapId: string, disabled?: boolean, readonly?: boolean): string;
+export function createFeatureHTML(feature: Feature, index: number, mapId: string, disabled?: boolean, readonly?: boolean, lang?: LanguageCode): string;
 /**
  * Factory closure to manage the UI
  * @param {GeoJSON} geojson - the features
@@ -59,8 +67,9 @@ export function createFeatureHTML(feature: Feature, index: number, mapId: string
  * @param {HTMLDivElement} listEl - where to render the feature list
  * @param {HTMLTextAreaElement} geospatialInput - the geospatial textarea
  * @param { UIManagerOptions | undefined } options - extra options such as allowable geometry types
+ * @param {LanguageCode} [lang] - the language for the feature details
  */
-export function getUIManager(geojson: GeoJSON, map: InteractiveMap, mapId: string, listEl: HTMLDivElement, geospatialInput: HTMLTextAreaElement, options: UIManagerOptions | undefined): {
+export function getUIManager(geojson: GeoJSON, map: InteractiveMap, mapId: string, listEl: HTMLDivElement, geospatialInput: HTMLTextAreaElement, options: UIManagerOptions | undefined, lang?: LanguageCode): {
     renderList: RenderList;
     renderValue: RenderValue;
     listEl: HTMLDivElement;
@@ -68,6 +77,10 @@ export function getUIManager(geojson: GeoJSON, map: InteractiveMap, mapId: strin
     focusDescriptionInput: () => void;
     getAllowableGeometryTypes: () => string[];
 };
+/**
+ * @type {Record<LanguageCode, GeospatialLanguageTexts>}
+ */
+export const languageTexts: Record<LanguageCode, GeospatialLanguageTexts>;
 export type GeoJSON = {
     /**
      * - the GeoJSON type string
@@ -113,7 +126,7 @@ export type ResetActiveFeature = () => void;
 /**
  * Renders the features into the list
  */
-export type RenderList = (disabled?: boolean | undefined) => void;
+export type RenderList = (disabled?: boolean | undefined, lang?: LanguageCode | undefined) => void;
 /**
  * Renders the features JSON into the hidden textarea
  */
@@ -192,7 +205,141 @@ export type UIManager = {
      */
     getAllowableGeometryTypes: GetAllowableGeometryTypes;
 };
+export type GeometryTexts = {
+    /**
+     * - the label for a point feature in the list
+     */
+    point: string;
+    /**
+     * - the label for a line string feature in the list
+     */
+    line: string;
+    /**
+     * - the label for a polygon feature in the list
+     */
+    polygon: string;
+};
+export type GeospatialPanelTexts = {
+    /**
+     * - the label for the info panel
+     */
+    label: string;
+    /**
+     * - the lede intro text for the info panel
+     */
+    ledeIntro: string;
+    /**
+     * - the lede outro text for the info panel
+     */
+    ledeOutro: string;
+    /**
+     * - the label for the info panel line text
+     */
+    lineText: string;
+    /**
+     * - the label for the info panel shape text
+     */
+    shapeText: string;
+    /**
+     * - the text for bullet point 1 in the info panel
+     */
+    point1: string;
+    /**
+     * - the text for bullet point 2 in the info panel
+     */
+    point2: string;
+    /**
+     * - the text for bullet point 3 in the info panel
+     */
+    point3: string;
+    /**
+     * - the text for bullet point 4 in the info panel
+     */
+    point4: string;
+    /**
+     * - the label for the info panel line or shape text
+     */
+    lineOrShapeText: string;
+    /**
+     * - the label for the info panel types phrase point
+     */
+    typesPhrasePoint: string;
+    /**
+     * - the label for the info panel types phrase line
+     */
+    typesPhraseLine: string;
+    /**
+     * - the label for the info panel types phrase shape
+     */
+    typesPhraseShape: string;
+    /**
+     * - the label for the info panel types phrase "or"
+     */
+    typesPhraseOr: string;
+};
+export type GeospatialLanguageTexts = {
+    /**
+     * - the descriptions of the geometry types
+     */
+    typeDescriptions: GeometryTexts;
+    /**
+     * - texts for the info panel
+     */
+    helpPanel: GeospatialPanelTexts;
+    /**
+     * - the labels for the action buttons
+     */
+    buttons: GeometryTexts;
+    /**
+     * - the first part of the label for a feature in the list
+     */
+    itemLabel1: string;
+    /**
+     * - the second part of the label for a feature in the list
+     */
+    itemLabel2: string;
+    /**
+     * - the label for the "update" link for a feature in the list
+     */
+    itemUpdateLink: string;
+    /**
+     * - the label for the "delete" link for a feature in the list
+     */
+    itemDeleteLink: string;
+    /**
+     * - the label for the "focus" link for a feature in the list
+     */
+    itemFocusLink: string;
+    /**
+     * - visually hidden text to add context to action links
+     */
+    itemVisuallyHidden: string;
+    /**
+     * - labels for the details section of a feature in the list
+     */
+    details: {
+        summary: string;
+        type: string;
+        centroidGridReference: string;
+        firstPointGridReference: string;
+        detailedCoordinates: string;
+    };
+};
+export type LanguageManager = {
+    /**
+     * - the language for the interactive map
+     */
+    lang: LanguageCode;
+    /**
+     * - the descriptions of the geometry types
+     */
+    texts: GeospatialLanguageTexts;
+};
 export type Context = {
+    /**
+     * - the language manager for the interactive map
+     */
+    languageManager: LanguageManager;
     /**
      * - the interactive map
      */
@@ -222,6 +369,7 @@ export type Context = {
      */
     drawPlugin: any;
 };
+import type { LanguageCode } from '../../client/javascripts/map.js';
 import type { MapsEnvironmentConfig } from '../../client/javascripts/map.js';
 import type { Feature } from '../../server/plugins/engine/types.js';
 import type { InteractiveMap } from '../../client/javascripts/map.js';

package/.server/client/javascripts/geospatial-map.js

@@ -3,13 +3,33 @@ import createDatasetsPlugin from '@defra/interactive-map/plugins/datasets';
 // @ts-expect-error - no types
 import createDrawPlugin from '@defra/interactive-map/plugins/draw-ml';
 import { bbox } from '@turf/bbox';
+import { DEFAULT_LANG, ENGLISH_LANG, WELSH_LANG } from "./map-constants.js";
 import { EVENTS, createMap, defaultConfig, getCentroidGridRef, getCoordinateGridRef, getMapCountryLayers, getMapLayers } from "./map.js";
 import sssiDataset from "./sssi-dataset.js";
 import { formatDelimtedList } from "./utils.js";
+import cy from "../../server/plugins/engine/i18n/translations/cy.json" with { type: 'json' };
+import enGB from "../../server/plugins/engine/i18n/translations/en-GB.json" with { type: 'json' };
+const englishTranslations = enGB.components.geospatialField.map;
+const welshTranslations = cy.components.geospatialField.map;
+
+/**
+ * @type {Record<LanguageCode, GeospatialLanguageTexts>}
+ */
+export const languageTexts = {
+  [ENGLISH_LANG]: englishTranslations,
+  [WELSH_LANG]: welshTranslations
+};
+
+/**
+ * Get the map texts for the given language code
+ * @param {LanguageCode} lang - the lanugae code
+ */
+export function getTexts(lang = DEFAULT_LANG) {
+  return languageTexts[lang];
+}
 const helpPanelConfig = {
   focus: false,
   showLabel: true,
-  label: 'How to use this map',
   mobile: {
     slot: 'drawer',
     open: true,
@@ -31,51 +51,70 @@ const helpPanelConfig = {
 };
 
 /**
+ * @param {GeospatialPanelTexts} texts
  * @param {boolean} allowLine
  * @param {boolean} allowShape
  */
-function getLineOrShapeText(allowLine, allowShape) {
+function getLineOrShapeText(texts, allowLine, allowShape) {
   if (allowLine && allowShape) {
-    return 'a line or shape';
+    return texts.lineOrShapeText;
   }
   if (allowLine) {
-    return 'a line';
+    return texts.lineText;
   }
   if (allowShape) {
-    return 'a shape';
+    return texts.shapeText;
   }
   return '';
 }
 
 /**
+ * @param {GeospatialPanelTexts} texts
  * @param {boolean} allowPoint
  * @param {boolean} allowLine
  * @param {boolean} allowShape
  */
-function getAllowedTypesPhrase(allowPoint, allowLine, allowShape) {
+function getAllowedTypesPhrase(texts, allowPoint, allowLine, allowShape) {
   const items = [];
   if (allowPoint) {
-    items.push('points');
+    items.push(texts.typesPhrasePoint);
   }
   if (allowLine) {
-    items.push('lines');
+    items.push(texts.typesPhraseLine);
   }
   if (allowShape) {
-    items.push('shapes');
+    items.push(texts.typesPhraseShape);
+  }
+  return formatDelimtedList(items, ',', texts.typesPhraseOr);
+}
+
+/**
+ * Gets the type description for a given feature
+ * @param {Feature} feature - the geojson feature
+ * @param {GeometryTexts} typeDescriptions
+ */
+function getTypeDescription(feature, typeDescriptions) {
+  switch (feature.geometry.type) {
+    case 'Point':
+      return typeDescriptions.point;
+    case 'LineString':
+      return typeDescriptions.line;
+    case 'Polygon':
+      return typeDescriptions.polygon;
   }
-  return formatDelimtedList(items, ',', 'or');
 }
 
 /**
+ * @param {GeospatialPanelTexts} texts
  * @param {boolean} allowPoint
  * @param {boolean} allowLine
  * @param {boolean} allowShape
  */
-export function getHelpPanelHtml(allowPoint, allowLine, allowShape) {
-  const lineOrShapeText = getLineOrShapeText(allowLine, allowShape);
-  const doneExtra = lineOrShapeText ? `<li>Double‑click, or select 'Done', when you have finished drawing ${lineOrShapeText}</li>` : '';
-  const allowedTypesText = getAllowedTypesPhrase(allowPoint, allowLine, allowShape);
-  return `<p class="govuk-body-s govuk-!-margin-bottom-2">You can add ${allowedTypesText} to the map.</p><ul class="govuk-list govuk-list--number govuk-body-s"><li>Search for a county, place or postcode</li><li>Use the + and - icons to zoom in and out</li>${doneExtra}<li>Give the location a name</li></ul>`;
+export function getHelpPanelHtml(texts, allowPoint, allowLine, allowShape) {
+  const lineOrShapeText = getLineOrShapeText(texts, allowLine, allowShape);
+  const point3 = lineOrShapeText ? `<li>${texts.point3} ${lineOrShapeText}</li>` : '';
+  const allowedTypesText = getAllowedTypesPhrase(texts, allowPoint, allowLine, allowShape);
+  return `<p class="govuk-body-s govuk-!-margin-bottom-2">${texts.ledeIntro} ${allowedTypesText} ${texts.ledeOutro}</p><ul class="govuk-list govuk-list--number govuk-body-s"><li>${texts.point1}</li><li>${texts.point2}</li>${point3}<li>${texts.point4}</li></ul>`;
 }
 const lineFeatureProperties = {
   stroke: 'rgba(0, 11, 112, 1)',
@@ -87,15 +126,6 @@ const polygonFeatureProperties = {
   fill: 'rgba(255, 221, 0, 0.2)',
   strokeWidth: 2
 };
-
-/**
- * @type {Record<'Point' | 'LineString' | 'Polygon', string>}
- */
-const typeDescriptions = {
-  Point: 'Point',
-  LineString: 'Line',
-  Polygon: 'Shape'
-};
 const POINT_SVG = '<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" /><circle cx="12" cy="10" r="3" />';
 const POLYGON_SVG = '<path d="M19.5 7v10M4.5 7v10M7 19.5h10M7 4.5h10"/><path d="M22 18v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1zm0-15v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1zM7 18v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1zM7 3v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1z"/>';
 const LINE_SVG = '<path d="M5.706 16.294L16.294 5.706"/><path d="M21 2v3c0 .549-.451 1-1 1h-3c-.549 0-1-.451-1-1V2c0-.549.451-1 1-1h3c.549 0 1 .451 1 1zM6 17v3c0 .549-.451 1-1 1H2c-.549 0-1-.451-1-1v-3c0-.549.451-1 1-1h3c.549 0 1 .451 1 1z"/>';
@@ -177,12 +207,20 @@ export function processGeospatial(config, geospatial, index) {
   const options = {
     geometryTypes
   };
-  const uiManager = getUIManager(geojson, map, mapId, listEl, geospatialInput, options);
+  const lang = /** @type {LanguageCode} */
+  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+  geospatial.dataset.lang || DEFAULT_LANG;
+  const uiManager = getUIManager(geojson, map, mapId, listEl, geospatialInput, options, lang);
+  const languageManager = {
+    lang,
+    texts: getTexts(lang)
+  };
 
   /**
    * @type {Context}
    */
   const context = {
+    languageManager,
     map,
     featuresManager,
     activeFeatureManager,
@@ -227,10 +265,11 @@ export function addFeatureToMap(feature, drawPlugin, map) {
  * @param {string} mapId - the ID of the map
  * @param {boolean} [disabled] - render the list with disabled links
  * @param {boolean} [readonly] - render the list in readonly mode
+ * @param {LanguageCode} [lang] - the language for the feature details
  */
-export function createFeaturesHTML(features, mapId, disabled = false, readonly = false) {
+export function createFeaturesHTML(features, mapId, disabled = false, readonly = false, lang = DEFAULT_LANG) {
   return `<dl class="govuk-summary-list">
-    ${features.map((feature, index) => createFeatureHTML(feature, index, mapId, disabled, readonly)).join('\n')}
+    ${features.map((feature, index) => createFeatureHTML(feature, index, mapId, disabled, readonly, lang)).join('\n')}
   </dl>`;
 }
 
@@ -250,8 +289,10 @@ export function focusFeature(feature, mapProvider) {
  * @param {string} mapId - the ID of the map
  * @param {boolean} [disabled] - render the list with disabled links
  * @param {boolean} [readonly] - render the list item in readonly mode
+ * @param {LanguageCode} [lang] - the language for the feature details
  */
-export function createFeatureHTML(feature, index, mapId, disabled = false, readonly = false) {
+export function createFeatureHTML(feature, index, mapId, disabled = false, readonly = false, lang = DEFAULT_LANG) {
+  const texts = getTexts(lang);
   const flattened = feature.geometry.coordinates.flat(2);
   const points = [];
   for (let i = 0; i < flattened.length; i += 2) {
@@ -263,25 +304,26 @@ export function createFeatureHTML(feature, index, mapId, disabled = false, reado
   // Change action link
   const changeAction = () => `<li class="govuk-summary-list__actions-list-item">
   <a class="govuk-link govuk-link--no-visited-state ${disabled ? 'govuk-link--disabled' : ''}" href="#${mapId}" data-action="edit" data-id="${feature.id}"
-    data-type="${feature.geometry.type}">Update<span class="govuk-visually-hidden"> location</span></a>
+    data-type="${feature.geometry.type}">${texts.itemUpdateLink}<span class="govuk-visually-hidden"> ${texts.itemVisuallyHidden}</span></a>
 </li>`;
 
   // Delete action link
   const deleteAction = () => `<li class="govuk-summary-list__actions-list-item">
   <a class="govuk-link govuk-link--no-visited-state ${disabled ? 'govuk-link--disabled' : ''}" href="#" data-action="delete" data-id="${feature.id}"
-    data-type="${feature.geometry.type}">Delete<span class="govuk-visually-hidden"> location</span></a>
+    data-type="${feature.geometry.type}">${texts.itemDeleteLink}<span class="govuk-visually-hidden"> ${texts.itemVisuallyHidden}</span></a>
 </li>`;
 
   // Focus action link
   const focusAction = () => `<li class="govuk-summary-list__actions-list-item">
-  <a class="govuk-link govuk-link--no-visited-state" href="#${mapId}" data-action="focus" data-id="${feature.id}">Show<span class="govuk-visually-hidden"> location</span></a>
+  <a class="govuk-link govuk-link--no-visited-state" href="#${mapId}" data-action="focus" data-id="${feature.id}">${texts.itemFocusLink}<span class="govuk-visually-hidden"> ${texts.itemVisuallyHidden}</span></a>
 </li>`;
   const links = readonly ? focusAction() : `${changeAction()}${deleteAction()}`;
   const actions = `<ul class="govuk-summary-list__actions-list">${links}</ul>`;
+  const typeDescription = getTypeDescription(feature, texts.typeDescriptions);
   return `<div class="govuk-summary-list__row govuk-summary-list__row--no-border">
   <dt class="govuk-summary-list__key">
     <div class="govuk-form-group">
-      <label class="govuk-label govuk-label--s" ${readonly ? '' : `for="description_${index}"`}>Location ${index + 1} description</label>
+      <label class="govuk-label govuk-label--s" ${readonly ? '' : `for="description_${index}"`}>${texts.itemLabel1} ${index + 1} ${texts.itemLabel2}</label>
       ${description}
     </div>
   </dt>
@@ -292,24 +334,24 @@ export function createFeatureHTML(feature, index, mapId, disabled = false, reado
 <div class="govuk-summary-list__row">
   <details class="govuk-details govuk-!-margin-bottom-2">
     <summary class="govuk-details__summary">
-      <span class="govuk-details__summary-text">Coordinates</span>
+      <span class="govuk-details__summary-text">${texts.details.summary}</span>
     </summary>
     <div class="govuk-details__text">
       <dl class="govuk-summary-list">
         <div class="govuk-summary-list__row">
-          <dt class="govuk-summary-list__key">Type</dt>
-          <dd class="govuk-summary-list__value">${typeDescriptions[feature.geometry.type]}</dd>
+          <dt class="govuk-summary-list__key">${texts.details.type}</dt>
+          <dd class="govuk-summary-list__value">${typeDescription}</dd>
         </div>
         <div class="govuk-summary-list__row">
-          <dt class="govuk-summary-list__key">Centre grid reference</dt>
+          <dt class="govuk-summary-list__key">${texts.details.centroidGridReference}</dt>
           <dd class="govuk-summary-list__value">${feature.properties.centroidGridReference}</dd>
         </div>
         <div class="govuk-summary-list__row">
-          <dt class="govuk-summary-list__key">First point grid reference</dt>
+          <dt class="govuk-summary-list__key">${texts.details.firstPointGridReference}</dt>
           <dd class="govuk-summary-list__value">${feature.properties.coordinateGridReference}</dd>
         </div>
         <div class="govuk-summary-list__row">
-          <dt class="govuk-summary-list__key">Detailed coordinates</dt>
+          <dt class="govuk-summary-list__key">${texts.details.detailedCoordinates}</dt>
           <dd class="govuk-summary-list__value">
             <ol class="govuk-list govuk-list--number">${coordinates}</ol>
           </dd>
@@ -464,11 +506,12 @@ function getFeaturesManager(geojson) {
  * @param {string} mapId - the ID of the map
  * @param {HTMLDivElement} listEl - where to render the feature list
  * @param {Function} renderValue - function that renders the features JSON into the hidden textarea
+ * @param {LanguageCode} [lang] - the language for the feature details
  * @returns {RenderList}
  */
-function getListRenderer(geojson, mapId, listEl, renderValue) {
+function getListRenderer(geojson, mapId, listEl, renderValue, lang = DEFAULT_LANG) {
   return function renderList(disabled = false) {
-    const html = createFeaturesHTML(geojson.features, mapId, disabled);
+    const html = createFeaturesHTML(geojson.features, mapId, disabled, false, lang);
     listEl.innerHTML = html;
     renderValue();
   };
@@ -494,8 +537,9 @@ function getValueRenderer(geojson, geospatialInput) {
  * @param {HTMLDivElement} listEl - where to render the feature list
  * @param {HTMLTextAreaElement} geospatialInput - the geospatial textarea
  * @param { UIManagerOptions | undefined } options - extra options such as allowable geometry types
+ * @param {LanguageCode} [lang] - the language for the feature details
  */
-export function getUIManager(geojson, map, mapId, listEl, geospatialInput, options) {
+export function getUIManager(geojson, map, mapId, listEl, geospatialInput, options, lang = DEFAULT_LANG) {
   /**
    * Get a CSV list of geometry types the user can create
    * @returns {string[]}
@@ -534,7 +578,7 @@ export function getUIManager(geojson, map, mapId, listEl, geospatialInput, optio
     }
   }
   const renderValue = getValueRenderer(geojson, geospatialInput);
-  const renderList = getListRenderer(geojson, mapId, listEl, renderValue);
+  const renderList = getListRenderer(geojson, mapId, listEl, renderValue, lang);
 
   /** @type {UIManager} */
   return {
@@ -612,16 +656,20 @@ function onMapReadyFactory(context) {
     const allowPoint = types.includes('point');
     const allowLine = types.includes('line');
     const allowShape = types.includes('shape');
+    const {
+      texts
+    } = context.languageManager;
 
     // Add info panel
     map.addPanel('info', {
       ...helpPanelConfig,
-      html: getHelpPanelHtml(allowPoint, allowLine, allowShape)
+      label: texts.helpPanel.label,
+      html: getHelpPanelHtml(texts.helpPanel, allowPoint, allowLine, allowShape)
     });
     if (allowPoint) {
       map.addButton('btnAddPoint', {
         variant: 'tertiary',
-        label: 'Add point',
+        label: texts.buttons.point,
         iconSvgContent: POINT_SVG,
         onClick: () => {
           resetActiveFeature();
@@ -643,7 +691,7 @@ function onMapReadyFactory(context) {
     if (allowShape) {
       map.addButton('btnAddPolygon', {
         variant: 'tertiary',
-        label: 'Add shape',
+        label: texts.buttons.polygon,
         iconSvgContent: POLYGON_SVG,
         onClick: () => {
           resetActiveFeature();
@@ -665,7 +713,7 @@ function onMapReadyFactory(context) {
     if (allowLine) {
       map.addButton('btnAddLine', {
         variant: 'tertiary',
-        label: 'Add line',
+        label: texts.buttons.line,
         iconSvgContent: LINE_SVG,
         onClick: () => {
           resetActiveFeature();
@@ -1138,6 +1186,7 @@ function onListElKeydownFactory() {
  * Renders the features into the list
  * @callback RenderList
  * @param {boolean} [disabled] - whether to render the list with disabled links
+ * @param {LanguageCode} [lang] - the language for the feature details
  * @returns {void}
  */
 
@@ -1192,8 +1241,59 @@ function onListElKeydownFactory() {
  * @property {GetAllowableGeometryTypes} getAllowableGeometryTypes - function that returns the array of geometry types a user can create
  */
 
+/**
+ * @typedef {object} GeometryTexts
+ * @property {string} point - the label for a point feature in the list
+ * @property {string} line - the label for a line string feature in the list
+ * @property {string} polygon - the label for a polygon feature in the list
+ */
+
+/**
+ * @typedef {object} GeospatialPanelTexts
+ * @property {string} label - the label for the info panel
+ * @property {string} ledeIntro - the lede intro text for the info panel
+ * @property {string} ledeOutro - the lede outro text for the info panel
+ * @property {string} lineText - the label for the info panel line text
+ * @property {string} shapeText - the label for the info panel shape text
+ * @property {string} point1 - the text for bullet point 1 in the info panel
+ * @property {string} point2 - the text for bullet point 2 in the info panel
+ * @property {string} point3 - the text for bullet point 3 in the info panel
+ * @property {string} point4 - the text for bullet point 4 in the info panel
+ * @property {string} lineOrShapeText - the label for the info panel line or shape text
+ * @property {string} typesPhrasePoint - the label for the info panel types phrase point
+ * @property {string} typesPhraseLine - the label for the info panel types phrase line
+ * @property {string} typesPhraseShape - the label for the info panel types phrase shape
+ * @property {string} typesPhraseOr - the label for the info panel types phrase "or"
+ */
+
+/**
+ * @typedef {object} GeospatialLanguageTexts
+ * @property {GeometryTexts} typeDescriptions - the descriptions of the geometry types
+ * @property {GeospatialPanelTexts} helpPanel - texts for the info panel
+ * @property {GeometryTexts} buttons - the labels for the action buttons
+ * @property {string} itemLabel1 - the first part of the label for a feature in the list
+ * @property {string} itemLabel2 - the second part of the label for a feature in the list
+ * @property {string} itemUpdateLink - the label for the "update" link for a feature in the list
+ * @property {string} itemDeleteLink - the label for the "delete" link for a feature in the list
+ * @property {string} itemFocusLink - the label for the "focus" link for a feature in the list
+ * @property {string} itemVisuallyHidden - visually hidden text to add context to action links
+ * @property {object} details - labels for the details section of a feature in the list
+ * @property {string} details.summary - label for the summary of a feature in the list
+ * @property {string} details.type - label for the type of a feature in the list
+ * @property {string} details.centroidGridReference - label for the centroid grid reference of a feature in the list
+ * @property {string} details.firstPointGridReference - label for the first point grid reference of a feature in the list
+ * @property {string} details.detailedCoordinates - label for the detailed coordinates of a feature in the list
+ */
+
+/**
+ * @typedef {object} LanguageManager
+ * @property {LanguageCode} lang - the language for the interactive map
+ * @property {GeospatialLanguageTexts} texts - the descriptions of the geometry types
+ */
+
 /**
  * @typedef {object} Context
+ * @property {LanguageManager} languageManager - the language manager for the interactive map
  * @property {InteractiveMap} map - the interactive map
  * @property {MapLibreMap} [mapProvider] - the interactive map provider
  * @property {FeaturesManager} featuresManager - the features manager
@@ -1204,6 +1304,7 @@ function onListElKeydownFactory() {
  */
 
 /**
+ * @import { LanguageCode } from '../../client/javascripts/map.js'
  * @import { MapLibreMap, UIManagerOptions } from '../../client/javascripts/map.js'
  */
 //# sourceMappingURL=geospatial-map.js.map