Add map functionality components

app/[locale]/basemap-list.tsx

@@ -0,0 +1,150 @@
+import { useRef, useEffect, RefObject } from 'react';
+
+import { useTranslation } from 'react-i18next';
+import initI18n from './i18n';
+
+import MapView from '@arcgis/core/views/MapView';
+import Basemap from '@arcgis/core/Basemap';
+import esriRequest from '@arcgis/core/request';
+import BaseTileLayer from '@arcgis/core/layers/BaseTileLayer';
+import BasemapGallery from '@arcgis/core/widgets/BasemapGallery';
+import VectorTileLayer from '@arcgis/core/layers/VectorTileLayer';
+import TileLayer from '@arcgis/core/layers/TileLayer';
+
+const BEVURL = 'https://maps.bev.gv.at/tiles/{z}/{x}/{y}.png';
+
+// load localized strings
+const match = location.pathname.match(/\/(\w+)/);
+if (match && match.length > 1) {
+  const locale = match[1];
+  initI18n(locale);
+}
+
+export default function Basemaps({ view }: { view: MapView }) {
+  const basemapGalleryContainer = useRef<HTMLDivElement | null>(null);
+  const rendered = useRef<boolean>(false);
+
+  const { t } = useTranslation();
+
+  const BEVTileLayer = (BaseTileLayer as any).createSubclass({
+    // define instance properties
+    properties: {
+      urlTemplate: null,
+    },
+
+    // generate the tile url for a given level, row and column
+    getTileUrl: function (level: number, row: number, col: number) {
+      const z = level.toString().padStart(2, '0');
+      let x = row.toString().padStart(9, '0');
+      let y = col.toString().padStart(9, '0');
+
+      // this is the BEV tiling scheme
+      x = x.substring(0, 3) + '/' + x.substring(3, 3) + '/' + x.substring(6, 3);
+      y = y.substring(0, 3) + '/' + y.substring(3, 3) + '/' + y.substring(6, 3);
+
+      return this.urlTemplate.replace(/\{z\}/g, z).replace(/\{x\}/g, y).replace(/\{y\}/g, x);
+    },
+
+    // This method fetches tiles for the specified level and size.
+    fetchTile: function (level: number, row: number, col: number, options: any) {
+      // get the url for this tile
+      const url = this.getTileUrl(level, row, col);
+
+      // request for tiles based on the generated url
+      // the signal option ensures that obsolete requests are aborted
+      return esriRequest(url, {
+        responseType: 'image',
+      }).then(
+        function (this: any, response: any) {
+          // when esri request resolves successfully
+          // get the image from the response
+          const image = response.data;
+          const width = this.tileInfo.size[0];
+          const height = this.tileInfo.size[0];
+
+          // create a canvas with 2D rendering context
+          const canvas = document.createElement('canvas');
+          const context = canvas.getContext('2d');
+          canvas.width = width;
+          canvas.height = height;
+
+          // Draw the blended image onto the canvas.
+          context?.drawImage(image, 0, 0, width, height);
+          const imageData = context?.getImageData(0, 0, canvas.width, canvas.height);
+          if (imageData) context?.putImageData(imageData, 0, 0);
+
+          return canvas;
+        }.bind(this)
+      );
+    },
+
+    copyright: t('basemaps.copyright-bev'),
+  });
+
+  useEffect(() => {
+    if (rendered.current) return;
+    rendered.current = true;
+
+    if (view) {
+      const topoLayer = new BEVTileLayer({
+        urlTemplate: BEVURL,
+        title: 'BEV-Topografie',
+      });
+
+      const basemapBEV = new Basemap({
+        baseLayers: [topoLayer],
+        title: t('basemaps.basemap-bev-title'),
+        id: 'basemap',
+        thumbnailUrl:
+          'https://gis.geosphere.at/portal/sharing/rest/content/items/1a94736328a1458abe435d23508f1822/data',
+      });
+
+      const basemapAT = new Basemap({
+        portalItem: {
+          id: 'df7d6cc9be754db8970614d2ee661f57',
+          portal: {
+            url: 'https://gis.geosphere.at/portal',
+          },
+        },
+      });
+
+      const basemapOSM = new Basemap({
+        portalItem: {
+          id: '5f6efd84434842fb9dcdcf6b9116dcd9',
+          portal: { url: 'https://gis.geosphere.at/portal' },
+        },
+      });
+
+      const lightgrayBase = new VectorTileLayer({
+        url: 'https://gis.geosphere.at/portal/sharing/rest/content/items/291da5eab3a0412593b66d384379f89f/resources/styles/root.json',
+        opacity: 0.5,
+      });
+      const lightGrayReference = new VectorTileLayer({
+        url: 'https://gis.geosphere.at/portal/sharing/rest/content/items/1768e8369a214dfab4e2167d5c5f2454/resources/styles/root.json',
+        opacity: 1,
+      });
+      const worldHillshade = new TileLayer({
+        url: 'https://services.arcgisonline.com/arcgis/rest/services/Elevation/World_Hillshade/MapServer',
+      });
+      const basemapEsri = new Basemap({
+        baseLayers: [worldHillshade, lightgrayBase, lightGrayReference],
+        title: t('basemaps.basemap-esri-title'),
+        thumbnailUrl:
+          'https://gis.geosphere.at/portal/sharing/rest/content/items/3eb1510943be4f29ae01c01ce229d8ba/data',
+      });
+
+      const basemapGalleryDiv = document.createElement('div');
+      basemapGalleryContainer.current?.append(basemapGalleryDiv);
+
+      new BasemapGallery({
+        container: basemapGalleryDiv,
+        view: view,
+        source: [basemapAT, basemapBEV, basemapOSM, basemapEsri],
+      });
+    }
+
+    return () => {};
+  });
+
+  return <div ref={basemapGalleryContainer}></div>;
+}

app/[locale]/dictionaries/de.json

@@ -1,5 +1,20 @@
 {
-  "heading": "PDF drucken",
+  "basemaps": {
+    "title": "Grundkarten",
+    "copyright-bev": "© BEV, Bundesamt für Eich- und Vermessungswesen",
+    "basemap-esri-title": "Grau mit Geländeschummerung",
+    "basemap-bev-title": "BEV Topografie"
+  },
+  "search": {
+    "placeholder": "Orts- oder Adresssuche",
+    "popup-title": "Relevante Daten"
+  },
+  "legend": {
+    "title": "Legende"
+  },
+  "print": {
+    "heading": "Drucken",
+    "sub-heading": "PDF drucken",
     "titleLabel": "Titel",
     "scaleLabel": "Maßstab",
     "formatLabel": "Format",
@@ -17,4 +32,13 @@
       "A3 Querformat": "A3 Querformat",
       "A3 Querformat mit Legende": "A3 Querformat mit Legende"
     }
+  },
+  "layers": {
+    "title": "Layer",
+    "increaseOpacity": "Deckkraft erhöhen",
+    "decreaseOpacity": "Deckkraft verringern",
+    "table": {
+      "close": "Schließen"
+    }
+  }
 }

app/[locale]/dictionaries/en.json

@@ -1,5 +1,17 @@
 {
-  "heading": "Print PDF",
+  "basemaps": {
+    "title": "Basemaps",
+    "copyright-bev": "© BEV, Federal Office of Metrology and Surveying",
+    "basemap-esri-title": "Gray with hillshade",
+    "basemap-bev-title": "BEV topography"
+  },
+  "search": {
+    "placeholder": "Search for place or address",
+    "popup-title": "Relevant data"
+  },
+  "print": {
+    "heading": "Print",
+    "sub-heading": "Print PDF",
     "titleLabel": "Title",
     "scaleLabel": "Scale",
     "formatLabel": "Format",
@@ -17,4 +29,16 @@
       "A3 Querformat": "A3 landscape",
       "A3 Querformat mit Legende": "A3 landscape with legend"
     }
+  },
+  "layers": {
+    "title": "Layers",
+    "increaseOpacity": "Increase opacity",
+    "decreaseOpacity": "Decrease opacity",
+    "table": {
+      "close": "Close"
+    }
+  },
+  "legend": {
+    "title": "Legend"
+  }
 }

app/[locale]/layer-list.tsx

@@ -0,0 +1,155 @@
+import { useRef, useEffect, RefObject } from 'react';
+
+import { useTranslation } from 'react-i18next';
+import initI18n from './i18n';
+
+import MapView from '@arcgis/core/views/MapView';
+import LayerList from '@arcgis/core/widgets/LayerList';
+import FeatureTable from '@arcgis/core/widgets/FeatureTable';
+import ImageryTileLayer from '@arcgis/core/layers/ImageryTileLayer';
+import MapImageLayer from '@arcgis/core/layers/MapImageLayer';
+import Sublayer from '@arcgis/core/layers/support/Sublayer';
+import ButtonMenuItem from '@arcgis/core/widgets/FeatureTable/Grid/support/ButtonMenuItem';
+
+// load localized strings
+const match = location.pathname.match(/\/(\w+)/);
+if (match && match.length > 1) {
+  const locale = match[1];
+  initI18n(locale);
+}
+
+export default function Layers({ view, tableRoot }: { view: MapView; tableRoot: RefObject<HTMLDivElement> }) {
+  const htmlDiv = useRef<HTMLDivElement>(null);
+  const featureTable = useRef<FeatureTable | null>(null);
+  const rendered = useRef<boolean>(false);
+
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (rendered.current) return;
+    rendered.current = true;
+
+    const createTable = async (layer: Sublayer, view: MapView) => {
+      const tableContainer = document.createElement('div');
+      tableContainer.className = 'h-full w-full';
+
+      if (tableRoot && tableRoot.current) {
+        tableRoot.current.classList.remove('hidden');
+        tableRoot.current.append(tableContainer);
+      }
+
+      const featureLayer = await layer.createFeatureLayer();
+
+      featureTable.current = new FeatureTable({
+        view: view,
+        layer: featureLayer,
+        container: tableContainer,
+        menuConfig: {
+          items: [
+            {
+              label: t('layers.table.close'),
+              iconClass: 'esri-icon-close',
+              clickFunction: function () {
+                featureTable.current?.destroy();
+                if (tableRoot && tableRoot.current) {
+                  tableRoot.current.classList.add('hidden');
+                }
+              },
+            } as unknown as ButtonMenuItem,
+          ],
+        },
+      });
+    };
+
+    if (htmlDiv.current) {
+      const arcGISAPIWidgetContainer = document.createElement('div');
+      htmlDiv.current.append(arcGISAPIWidgetContainer);
+
+      const layerList = new LayerList({
+        view,
+        container: htmlDiv.current,
+        selectionEnabled: true,
+        listItemCreatedFunction: async function (event) {
+          const item = event.item;
+          const type = item.layer.type;
+
+          if (type === 'imagery-tile' || type === 'map-image') {
+            item.actionsSections = [
+              [
+                {
+                  title: 'Info',
+                  className: 'esri-icon-description',
+                  id: 'info',
+                },
+              ],
+              [
+                {
+                  title: t('layers.increaseOpacity'),
+                  className: 'esri-icon-up',
+                  id: 'increase-opacity',
+                },
+                {
+                  title: t('layers.decreaseOpacity'),
+                  className: 'esri-icon-down',
+                  id: 'decrease-opacity',
+                },
+              ],
+            ];
+          }
+
+          if (item.layer.declaredClass === 'esri.layers.support.Sublayer') {
+            item.actionsSections = [
+              [
+                {
+                  title: 'Table',
+                  className: 'esri-icon-table',
+                  id: 'table',
+                },
+              ],
+            ];
+          }
+        },
+      });
+
+      layerList.on('trigger-action', async (event) => {
+        const id = event.action.id;
+        const item = event.item;
+        const layer = item.layer;
+        const type = layer.type;
+
+        if (id === 'info') {
+          if (type === 'imagery-tile') {
+            window.open((layer as ImageryTileLayer).portalItem?.itemPageUrl);
+          }
+
+          if (type === 'map-image') {
+            window.open((layer as MapImageLayer).portalItem?.itemPageUrl);
+          }
+        }
+
+        if (id === 'increase-opacity') {
+          if (layer.opacity < 1) {
+            layer.opacity += 0.25;
+          }
+        }
+
+        if (id === 'decrease-opacity') {
+          if (layer.opacity > 0) {
+            layer.opacity -= 0.25;
+          }
+        }
+
+        if (id === 'table') {
+          featureTable.current?.destroy();
+          try {
+            createTable(layer as unknown as Sublayer, view);
+          } catch (error) {}
+        }
+      });
+    }
+
+    return () => {};
+  });
+
+  return <div ref={htmlDiv}></div>;
+}

app/[locale]/map.tsx

@@ -1,121 +1,278 @@
-import { useRef, useEffect, lazy } from 'react';
+import { useRef, useState, useEffect, lazy } from 'react';
-import { createRoot } from 'react-dom/client';
+import { Root, createRoot } from 'react-dom/client';
 
-import '@esri/calcite-components/dist/calcite/calcite.css';
+import { useTranslation } from 'react-i18next';
+import initI18n from './i18n';
 
-import MapView from '@arcgis/core/views/MapView.js';
+import MapView from '@arcgis/core/views/MapView';
-import WebMap from '@arcgis/core/WebMap.js';
+import WebMap from '@arcgis/core/WebMap';
-import esriConfig from '@arcgis/core/config.js';
+import esriConfig from '@arcgis/core/config';
-import LayerList from '@arcgis/core/widgets/LayerList';
+import ScaleBar from '@arcgis/core/widgets/ScaleBar';
-import Expand from '@arcgis/core/widgets/Expand';
+import Legend from '@arcgis/core/widgets/Legend';
-import ScaleBar from '@arcgis/core/widgets/ScaleBar.js';
 import WMTSLayer from '@arcgis/core/layers/WMTSLayer';
+import VectorTileLayer from '@arcgis/core/layers/VectorTileLayer';
+import TileLayer from '@arcgis/core/layers/TileLayer';
 import Map from '@arcgis/core/Map.js';
 import Basemap from '@arcgis/core/Basemap';
-import * as reactiveUtils from '@arcgis/core/core/reactiveUtils.js';
+import * as intl from '@arcgis/core/intl';
-import * as intl from '@arcgis/core/intl.js';
 
 // set asset path for ArcGIS Maps SDK widgets
 esriConfig.assetsPath = './assets';
 
-let mapView: MapView;
+// ids of web map items in portal
-const webMapID = '7d0768f73d3e4be2b32c22274c600cb3';
+const webMapDEID = '7d0768f73d3e4be2b32c22274c600cb3';
+const webMapENID = 'dbf5532d06954c6a989d4f022de83f70';
 
-// lazy load Print component
+// lazy load print component
 const Print = lazy(() => import('./print'));
+const Layers = lazy(() => import('./layer-list'));
+const Basemaps = lazy(() => import('./basemap-list'));
+const Search = lazy(() => import('./search'));
+
+// import Calcite components
+import '@esri/calcite-components/dist/calcite/calcite.css';
+
+import { setAssetPath } from '@esri/calcite-components/dist/components';
+setAssetPath(window.location.href);
+
+import '@esri/calcite-components/dist/components/calcite-shell';
+import '@esri/calcite-components/dist/components/calcite-shell-panel';
+import '@esri/calcite-components/dist/components/calcite-shell-center-row';
+import '@esri/calcite-components/dist/components/calcite-action-bar';
+import '@esri/calcite-components/dist/components/calcite-action';
+import '@esri/calcite-components/dist/components/calcite-panel';
+import {
+  CalciteShell,
+  CalciteShellPanel,
+  CalciteActionBar,
+  CalciteAction,
+  CalcitePanel,
+} from '@esri/calcite-components-react';
+
+// load localized strings
+const match = location.pathname.match(/\/(\w+)/);
+if (match && match.length > 1) {
+  const locale = match[1];
+  initI18n(locale);
+}
 
 export default function MapComponent({ locale }: { locale: string }) {
-  const printRoot = useRef<any>(null);
+  const printRoot = useRef<Root | null>(null);
-  const mapRef = useRef(null);
+  const maskRoot = useRef<HTMLDivElement>(null);
-  const maskRef = useRef<HTMLDivElement>(null);
+  const tableRoot = useRef<HTMLDivElement>(null);
+  const mapView = useRef<MapView | null>(null);
+  const previousId = useRef<string | null>(null);
+
+  const [actionBarExpanded, setActionBarExpanded] = useState<boolean>(false);
+
+  const { t } = useTranslation();
 
   useEffect(() => {
-    if (mapRef.current) {
+    if (!mapView.current) {
       // set locale for ArcGIS Maps SDK widgets
       intl.setLocale(locale);
 
       const webMap = new WebMap({
         portalItem: {
-          id: webMapID,
+          id: locale === 'de' ? webMapDEID : webMapENID,
           portal: {
             url: 'https://gis.geosphere.at/portal',
           },
         },
       });
 
-      const wmtsLayer = new WMTSLayer({
+      // const wmtsLayer = new WMTSLayer({
-        url: 'https://mapsneu.wien.gv.at/basemapneu',
+      //   url: 'https://mapsneu.wien.gv.at/basemapneu',
-      });
+      // });
 
-      const basemap = new Basemap({
+      // const basemap = new Basemap({
-        baseLayers: [wmtsLayer],
+      //   baseLayers: [wmtsLayer],
+      // });
+
+      const lightgrayBase = new VectorTileLayer({
+        url: 'https://gis.geosphere.at/portal/sharing/rest/content/items/291da5eab3a0412593b66d384379f89f/resources/styles/root.json',
+        opacity: 0.5,
+      });
+      const lightGrayReference = new VectorTileLayer({
+        url: 'https://gis.geosphere.at/portal/sharing/rest/content/items/1768e8369a214dfab4e2167d5c5f2454/resources/styles/root.json',
+        opacity: 1,
+      });
+      const worldHillshade = new TileLayer({
+        url: 'https://services.arcgisonline.com/arcgis/rest/services/Elevation/World_Hillshade/MapServer',
+      });
+      const basemapEsri = new Basemap({
+        baseLayers: [worldHillshade, lightgrayBase, lightGrayReference],
+        title: 'Esri',
+        thumbnailUrl:
+          'https://gis.geosphere.at/portal/sharing/rest/content/items/3eb1510943be4f29ae01c01ce229d8ba/data',
       });
 
       const map = new Map({
-        basemap: basemap,
+        basemap: basemapEsri,
       });
 
-      const mapView = new MapView({
+      const view = new MapView({
-        container: mapRef.current,
+        container: 'map-container',
         map: map,
+        padding: {
+          left: 49,
+        },
+        popup: {
+          dockOptions: {
+            position: 'auto',
+            breakpoint: {
+              width: 5000,
+            },
+          },
+        },
+        extent: {
+          ymax: 6424330,
+          xmin: 923200,
+          xmax: 2017806,
+          ymin: 5616270,
+          spatialReference: {
+            wkid: 3857,
+          },
+        },
       });
 
+      mapView.current = view;
+      view.ui.empty('top-left');
+
       webMap.load().then(() => {
         map.layers = webMap.layers;
+        createRoot(document.createElement('div')).render(<Search view={view}></Search>);
       });
 
-      const layerList = new LayerList({
-        view: mapView,
-      });
-
-      const layerListExpand = new Expand({
-        content: layerList,
-      });
-
-      const container = document.createElement('div');
-
-      const printExpand = new Expand({
-        content: container,
-        expandIcon: 'print',
-        label: 'Print',
-      });
-
-      reactiveUtils.watch(
-        () => printExpand.expanded,
-        (expanded) => {
-          if (expanded) {
-            printRoot.current = createRoot(container);
-            printRoot.current.render(<Print view={mapView} mask={maskRef}></Print>);
-          } else {
-            maskRef.current?.classList.add('hidden');
-            printRoot.current.unmount();
-          }
-        }
-      );
-
       const scaleBar = new ScaleBar({
-        view: mapView,
+        view: view,
         unit: 'metric',
       });
 
-      mapView.ui.add([layerListExpand, printExpand], 'top-right');
+      view.ui.add([scaleBar], 'bottom-left');
-      mapView.ui.add([scaleBar], 'bottom-left');
+
+      new Legend({
+        view: view,
+        container: 'legend-container',
+      });
+    }
+
+    return () => {};
+  }, [locale]);
+
+  const handleCalciteActionBarToggle = () => {
+    setActionBarExpanded(!actionBarExpanded);
+    if (mapView.current) {
+      mapView.current.padding = !actionBarExpanded ? { left: 150 } : { left: 49 };
+    }
+
+    if (tableRoot.current) {
+      if (!actionBarExpanded) {
+        tableRoot.current.classList.add('left-40');
+        tableRoot.current.classList.remove('left-14');
+      } else {
+        tableRoot.current.classList.add('left-14');
+        tableRoot.current.classList.remove('left-40');
       }
-    return () => {
-      mapView.destroy();
-      if (printRoot.current) {
-        printRoot.current.unmount();
     }
   };
-  }, [mapRef, maskRef]);
+
+  const handleClick = (event: any) => {
+    if (event.target.tagName !== 'CALCITE-ACTION') {
+      return;
+    }
+
+    const nextId = event.target.dataset.actionId;
+
+    if (previousId.current) {
+      const previousPanel = document.querySelector(`[data-panel-id=${previousId.current}]`) as HTMLCalcitePanelElement;
+      if (previousPanel) {
+        previousPanel.hidden = true;
+      }
+
+      if (previousId.current === 'print') {
+        maskRoot.current?.classList.add('hidden');
+      }
+    }
+
+    const nextPanel = document.querySelector(`[data-panel-id=${nextId}]`) as HTMLCalcitePanelElement;
+    if (nextPanel && nextId !== previousId.current) {
+      nextPanel.hidden = false;
+      previousId.current = nextId;
+
+      if (nextId === 'print') {
+        maskRoot.current?.classList.remove('hidden');
+      }
+    } else {
+      previousId.current = null;
+    }
+  };
 
   return (
-    <div className="h-screen overflow-hidden">
+    <div>
-      <div ref={mapRef} className="h-screen"></div>
+      <CalciteShell contentBehind>
+        <h2 id="header-title" slot="header"></h2>
+        <CalciteShellPanel slot="panel-start" displayMode="float">
+          <CalciteActionBar
+            slot="action-bar"
+            onCalciteActionBarToggle={handleCalciteActionBarToggle}
+            className="border-r border-r-gray-400"
+          >
+            <CalciteAction
+              data-action-id="layers"
+              icon="layers"
+              text={t('layers.title')}
+              onClick={handleClick}
+            ></CalciteAction>
+            <CalciteAction
+              data-action-id="basemaps"
+              icon="basemap"
+              text={t('basemaps.title')}
+              onClick={handleClick}
+            ></CalciteAction>
+            <CalciteAction
+              data-action-id="legend"
+              icon="legend"
+              text={t('legend.title')}
+              onClick={handleClick}
+            ></CalciteAction>
+            <CalciteAction
+              data-action-id="print"
+              icon="print"
+              text={t('print.heading')}
+              onClick={handleClick}
+            ></CalciteAction>
+            <CalciteAction data-action-id="info" icon="information" text="Info" onClick={handleClick}></CalciteAction>
+          </CalciteActionBar>
+
+          <CalcitePanel data-panel-id="layers" heading={t('layers.title')} hidden>
+            {mapView.current && <Layers view={mapView.current} tableRoot={tableRoot}></Layers>}
+          </CalcitePanel>
+
+          <CalcitePanel data-panel-id="basemaps" heading={t('basemaps.title')} hidden>
+            {mapView.current && <Basemaps view={mapView.current}></Basemaps>}
+          </CalcitePanel>
+
+          <CalcitePanel data-panel-id="legend" heading={t('legend.title')} hidden>
+            <div id="legend-container"></div>
+          </CalcitePanel>
+
+          <CalcitePanel data-panel-id="print" heading={t('print.heading')} hidden>
+            {mapView.current && <Print view={mapView.current} maskRoot={maskRoot}></Print>}
+          </CalcitePanel>
+
+          <CalcitePanel data-panel-id="info" heading="Info" hidden>
+            <div id="info-container"></div>
+          </CalcitePanel>
+        </CalciteShellPanel>
+        <div className="h-screen w-full" id="map-container">
+          <div ref={tableRoot} className="hidden absolute left-14 bottom-5 h-1/3 right-2 border border-gray-400"></div>
+        </div>
         <div
-        ref={maskRef}
+          ref={maskRoot}
-        className="hidden absolute bg-red-300 border-2 border-red-600 pointer-events-none opacity-50"
+          className="hidden absolute bg-red-300 border-2 border-red-600 opacity-50 pointer-events-none"
         ></div>
+      </CalciteShell>
     </div>
   );
 }

app/[locale]/print.tsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, RefObject } from 'react';
-import { useTranslation } from 'react-i18next';
 
+import { useTranslation } from 'react-i18next';
 import initI18n from './i18n';
 
 import MapView from '@arcgis/core/views/MapView';
@@ -71,11 +71,14 @@ if (match && match.length > 1) {
   initI18n(locale);
 }
 
-export default function Print({ view, mask }: { view: MapView; mask: RefObject<HTMLDivElement> | null }) {
+export default function Print({ view, maskRoot }: { view: MapView; maskRoot: RefObject<HTMLDivElement> }) {
-  const [title, setTitle] = useState('GeoSphere Austria');
+  const [title, setTitle] = useState<string>('GeoSphere Austria');
   const [format, setFormat] = useState<string>(Object.keys(formats)[0]);
-  const [scale, setScale] = useState<number>(10000);
+  const [scale, setScale] = useState<number>(scales[0]);
   const [printing, setPrinting] = useState<boolean>(false);
+
+  const rendered = useRef<boolean>(false);
+
   const { t } = useTranslation();
 
   const currentScale = useRef<number>();
@@ -88,6 +91,7 @@ export default function Print({ view, mask }: { view: MapView; mask: RefObject<H
 
   const handlePrint = () => {
     setPrinting(true);
+
     const template = new PrintTemplate({
       layout: format,
       format: 'pdf',
@@ -97,7 +101,7 @@ export default function Print({ view, mask }: { view: MapView; mask: RefObject<H
         customTextElements: [],
       },
       exportOptions: {
-        dpi: 98,
+        dpi: 96,
       },
       scalePreserved: true,
       outScale: scale,
@@ -157,8 +161,10 @@ export default function Print({ view, mask }: { view: MapView; mask: RefObject<H
     setMask(width, height);
   };
 
+  // set the mask for print preview
   const setMask = (width: number, height: number) => {
     const center = view.center;
+    if (center) {
       const xmin = center.x - width / 2;
       const xmax = center.x + width / 2;
       const ymin = center.y - height / 2;
@@ -185,12 +191,12 @@ export default function Print({ view, mask }: { view: MapView; mask: RefObject<H
       const maskWidth = clamp(Math.round(lowerRight.x - upperLeft.x), 0, view.width);
       const maskHeight = clamp(Math.round(lowerRight.y - upperLeft.y), 0, view.height);
 
-    if (mask && mask.current) {
+      if (maskRoot && maskRoot.current) {
-      mask.current.classList.remove('hidden');
+        maskRoot.current.style.left = left + 'px';
-      mask.current.style.left = left + 'px';
+        maskRoot.current.style.top = top + 'px';
-      mask.current.style.top = top + 'px';
+        maskRoot.current.style.width = maskWidth + 'px';
-      mask.current.style.width = maskWidth + 'px';
+        maskRoot.current.style.height = maskHeight + 'px';
-      mask.current.style.height = maskHeight + 'px';
+      }
     }
   };
 
@@ -199,7 +205,9 @@ export default function Print({ view, mask }: { view: MapView; mask: RefObject<H
       updatePreview(currentScale.current, currentFormat.current);
     }
 
-    const handle = reactiveUtils.watch(
+    let handle: any;
+    if (!rendered.current) {
+      handle = reactiveUtils.watch(
         () => view?.extent,
         () => {
           if (currentScale.current && currentFormat.current) {
@@ -207,11 +215,13 @@ export default function Print({ view, mask }: { view: MapView; mask: RefObject<H
           }
         }
       );
+    }
 
+    rendered.current = true;
     return () => {
-      handle.remove();
+      handle?.remove();
     };
-  }, []);
+  });
 
   const handleAbort = () => {
     if (controllerRef.current) {
@@ -221,23 +231,23 @@ export default function Print({ view, mask }: { view: MapView; mask: RefObject<H
   };
 
   return (
-    <CalcitePanel heading={t('heading')} className="px-3 w-80">
+    <CalcitePanel heading={t('print.sub-heading')} className="px-3">
       <div>{printing && <CalciteProgress type="indeterminate"></CalciteProgress>}</div>
       <CalciteLabel className="mt-5 mx-5">
-        {t('titleLabel')}
+        {t('print.titleLabel')}
         <CalciteInputText
-          placeholder={t('titleLabel')}
+          placeholder={t('print.titleLabel')}
           onCalciteInputTextInput={handleTitleChange}
           className="mx-0"
         ></CalciteInputText>
       </CalciteLabel>
       <CalciteLabel className="mx-5">
-        {t('formatLabel')}
+        {t('print.formatLabel')}
         <CalciteSelect label="format" onCalciteSelectChange={handleFormatChange}>
           {Object.keys(formats).map((formatName) => {
             return (
               <CalciteOption key={`${formatName}`} value={`${formatName}`}>
-                {t(`formats.${formatName}`)}
+                {t(`print.formats.${formatName}`)}
               </CalciteOption>
             );
           })}
@@ -245,7 +255,7 @@ export default function Print({ view, mask }: { view: MapView; mask: RefObject<H
       </CalciteLabel>
 
       <CalciteLabel className="mx-5">
-        {t('scaleLabel')}
+        {t('print.scaleLabel')}
         <CalciteSelect label="scale" onCalciteSelectChange={handleScaleChange}>
           {scales.map((num) => (
             <CalciteOption value={`${num}`} key={num}>{`1:${num
@@ -258,12 +268,12 @@ export default function Print({ view, mask }: { view: MapView; mask: RefObject<H
 
       {!printing ? (
         <CalciteButton width="half" slot="footer" onClick={handlePrint}>
-          {t('button.print')}
+          {t('print.button.print')}
         </CalciteButton>
       ) : (
         <>
           <CalciteButton width="half" slot="footer" onClick={handleAbort}>
-            {t('button.cancel')}
+            {t('print.button.cancel')}
           </CalciteButton>
         </>
       )}

app/[locale]/search.tsx

@@ -0,0 +1,629 @@
+import { useRef, useState, useEffect } from 'react';
+import { Root, createRoot } from 'react-dom/client';
+
+import { useTranslation } from 'react-i18next';
+import initI18n from './i18n';
+
+// import Calcite components
+import '@esri/calcite-components/dist/calcite/calcite.css';
+
+import { setAssetPath } from '@esri/calcite-components/dist/components';
+setAssetPath(window.location.href);
+
+import '@esri/calcite-components/dist/components/calcite-accordion';
+import '@esri/calcite-components/dist/components/calcite-accordion-item';
+import '@esri/calcite-components/dist/components/calcite-link';
+import '@esri/calcite-components/dist/components/calcite-list';
+import '@esri/calcite-components/dist/components/calcite-list-item';
+import '@esri/calcite-components/dist/components/calcite-action';
+import {
+  CalciteAccordion,
+  CalciteAccordionItem,
+  CalciteLink,
+  CalciteList,
+  CalciteListItem,
+  CalciteAction,
+} from '@esri/calcite-components-react';
+
+import MapView from '@arcgis/core/views/MapView';
+import Search from '@arcgis/core/widgets/Search';
+import FeatureLayer from '@arcgis/core/layers/FeatureLayer';
+import Graphic from '@arcgis/core/Graphic';
+import { eachAlways } from '@arcgis/core/core/promiseUtils.js';
+import SearchSource from '@arcgis/core/widgets/Search/SearchSource';
+import Point from '@arcgis/core/geometry/Point';
+import Polyline from '@arcgis/core/geometry/Polyline';
+import Polygon from '@arcgis/core/geometry/Polygon';
+import { geodesicBuffer } from '@arcgis/core/geometry/geometryEngine';
+import MapImageLayer from '@arcgis/core/layers/MapImageLayer';
+import SimpleFillSymbol from '@arcgis/core/symbols/SimpleFillSymbol';
+import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol';
+import Sublayer from '@arcgis/core/layers/support/Sublayer';
+import PopupTemplate from '@arcgis/core/PopupTemplate';
+
+// create feaure layer from URL of data index layer
+const datenIndexURL = 'https://gis.geosphere.at/maps/rest/services/datenindex/raster_5000/MapServer/0';
+const indexLayer = new FeatureLayer({ url: datenIndexURL, title: 'Datenindex 1:5.000', opacity: 0 });
+
+// custom type definitions
+interface CustomLayer {
+  id: string;
+  type: string;
+  title: string;
+  visible: boolean;
+}
+
+interface CustomGroupLayer {
+  id: string;
+  type: string;
+  title: string;
+  visible: boolean;
+  layers: (CustomGroupLayer | CustomLayer)[];
+}
+
+interface LayerToFeaturesMap {
+  [key: string]: string[];
+}
+
+// load localized strings
+const match = location.pathname.match(/\/(\w+)/);
+if (match && match.length > 1) {
+  const locale = match[1];
+  initI18n(locale);
+}
+
+// custom React component
+export default function SearchComponent({ view }: { view: MapView }) {
+  const [currentTarget, setCurrentTarget] = useState<Graphic | null>(null);
+
+  const rendered = useRef<boolean>(false);
+  const currentGraphicRef = useRef<Graphic | null>(null);
+  currentGraphicRef.current = currentTarget;
+
+  const { t } = useTranslation();
+
+  // get map image layer from sublayer
+  const getMapImageLayer = (layerURL: string): MapImageLayer | undefined => {
+    if (view) {
+      const filteredLayerViews = view.allLayerViews.filter((layerView) => {
+        const regex = /^https:\/\/.+\/MapServer/g;
+        const matches = layerURL.match(regex);
+        let mapImageLayerURL;
+        if (matches && matches.length > 0) mapImageLayerURL = matches[0];
+
+        if (layerView.layer.type === 'map-image') {
+          return (layerView.layer as MapImageLayer).url === mapImageLayerURL;
+        } else {
+          return false;
+        }
+      });
+
+      let mapImageLayer;
+      if (filteredLayerViews.length > 0) {
+        mapImageLayer = filteredLayerViews.at(0).layer as MapImageLayer;
+      }
+
+      return mapImageLayer;
+    }
+  };
+
+  // handle toggle layer visibility
+  const handleToggleVisibility = (event: any) => {
+    const layerItem = event.target;
+
+    const layerId = layerItem.getAttribute('text');
+    const icon = layerItem.getAttribute('icon');
+
+    if (layerId) {
+      const layer = view.map?.findLayerById(layerId);
+      if (icon === 'view-hide') {
+        layerItem.setAttribute('icon', 'view-visible');
+        if (layer) {
+          layer.visible = true;
+        }
+      } else {
+        layerItem.setAttribute('icon', 'view-hide');
+        if (layer) {
+          layer.visible = false;
+        }
+      }
+    }
+  };
+
+  // handle zoom to feature
+  const handleZoomTo = async (event: any) => {
+    const layerURL = event.target.getAttribute('text');
+    const res = await fetch(layerURL + '?f=json');
+    const json = await res.json();
+
+    const mapImageLayer = getMapImageLayer(layerURL);
+    const sr = mapImageLayer?.spatialReference;
+    const geometry = json.feature?.geometry;
+
+    if (geometry.x && geometry.y) {
+      view.goTo(
+        new Point({
+          x: geometry.x,
+          y: geometry.y,
+          spatialReference: sr,
+        })
+      );
+      return;
+    }
+
+    if (geometry.paths) {
+      view.goTo(
+        new Polyline({
+          paths: geometry.paths,
+          spatialReference: sr,
+        })
+      );
+      return;
+    }
+
+    if (geometry.rings) {
+      view.goTo(
+        new Polygon({
+          rings: geometry.rings,
+          spatialReference: sr,
+        })
+      );
+      return;
+    }
+  };
+
+  // remove layers from layer tree by given filter
+  const removeLayers = (layers: (CustomGroupLayer | CustomLayer)[], keepLayer: any): any => {
+    return layers
+      .filter((layer) => keepLayer(layer))
+      .map((layer) => {
+        if (layer.type === 'group' && (layer as CustomGroupLayer).layers) {
+          return { ...layer, layers: removeLayers((layer as CustomGroupLayer).layers, keepLayer) };
+        } else {
+          return layer;
+        }
+      });
+  };
+
+  // get custom layer objects from layer tree
+  const getLayerObjects = (layers: any) => {
+    return layers.map((layer: any) => {
+      if (layer.layers) {
+        return {
+          id: layer.id,
+          type: layer.type,
+          title: layer.title,
+          visible: layer.visible,
+          layers: getLayerObjects(layer.layers.toArray()),
+        };
+      } else {
+        return { id: layer.id, type: layer.type, title: layer.title, visible: layer.visible };
+      }
+    });
+  };
+
+  // build query string for custom search source (BEV geocoding service)
+  const buildQueryString = (searchTerm: string) => `?term=${encodeURI(searchTerm)}`;
+
+  const url = 'https://kataster.bev.gv.at/api/all4map';
+  const customSearchSource = new SearchSource({
+    placeholder: t('search.placeholder'),
+
+    // provide suggestions to the Search widget
+    getSuggestions: async (params) => {
+      const res = await fetch(url + buildQueryString(params.suggestTerm));
+      const json = await res.json();
+
+      if (json.data && json.data.features?.length > 0) {
+        return json.data.features.map((feature: any) => {
+          return {
+            key: 'bev',
+            text: feature.properties.name,
+            sourceIndex: params.sourceIndex,
+          };
+        });
+      }
+    },
+
+    // find results from suggestions
+    getResults: async (params) => {
+      const res = await fetch(url + buildQueryString(params.suggestResult.text));
+      const json = await res.json();
+
+      if (json.data && json.data.features?.length > 0) {
+        const searchResults = json.data.features.map((feature: any) => {
+          // create a graphic for the search widget
+          if (feature.geometry.type === 'Point') {
+            const graphic = new Graphic({
+              geometry: new Point({
+                x: feature.geometry.coordinates[0],
+                y: feature.geometry.coordinates[1],
+                spatialReference: {
+                  wkid: 4326,
+                },
+              }),
+              symbol: {
+                type: 'simple-marker',
+                style: 'circle',
+                color: [51, 51, 204, 0.5],
+                size: '8px',
+                outline: {
+                  color: 'white',
+                  width: 1,
+                },
+              } as unknown as SimpleMarkerSymbol,
+            });
+
+            return {
+              extent: null,
+              feature: graphic,
+              target: new Graphic({
+                // create buffer for point geometries to allow zoom to
+                geometry: geodesicBuffer(graphic.geometry, 1000, 'meters') as Polygon,
+              }),
+              name: feature.properties.name,
+            };
+          } else {
+            const coords = feature.geometry.coordinates;
+            const graphic = new Graphic({
+              geometry: new Polygon({
+                rings: coords,
+                spatialReference: {
+                  wkid: 4326,
+                },
+              }),
+              symbol: {
+                type: 'simple-fill',
+                color: [51, 51, 204, 0.5],
+                style: 'solid',
+                outline: {
+                  color: 'white',
+                  width: 1,
+                },
+              } as unknown as SimpleFillSymbol,
+            });
+
+            return {
+              extent: graphic.geometry.extent,
+              feature: graphic,
+              target: graphic,
+              name: feature.properties.name,
+            };
+          }
+        });
+
+        // return search results
+        return searchResults;
+      }
+    },
+  });
+
+  // create query from cellcode for 3x3 neighbourhood
+  const createQueryFromCellcode = (cellcode: string) => {
+    const { north, east }: any = cellcode.match(/N(?<north>\d+)E(?<east>\d+)/)?.groups;
+    const northNumber = parseInt(north);
+    const eastNumber = parseInt(east);
+    const operations = [
+      [1, -1],
+      [1, 0],
+      [1, 1],
+      [0, -1],
+      [0, 1],
+      [-1, -1],
+      [-1, 0],
+      [-1, 1],
+    ];
+
+    const cellcodeQueries = operations.map(
+      (operation) => `cellcode = '10kmN${northNumber + operation[0]}E${eastNumber + operation[1]}'`
+    );
+    return `cellcode = '${cellcode}' OR ` + cellcodeQueries.join(' OR ');
+  };
+
+  useEffect(() => {
+    if (rendered.current) return;
+    rendered.current = true;
+
+    // add data index layer
+    view.map.layers.push(indexLayer);
+
+    // add search widget with custom search source
+    const search = new Search({
+      view: view,
+      popupEnabled: false,
+      sources: [customSearchSource],
+      includeDefaultSources: false,
+    });
+
+    view.ui.add(search, 'top-left');
+
+    // add event handler for select-result events
+    search.on('select-result', (event) => {
+      view.closePopup();
+
+      // get selected feature and display it on map
+      const graphic = event.result.feature;
+      if (graphic.geometry.type === 'point') {
+        setCurrentTarget(
+          new Graphic({
+            // create buffer for point geometries to allow zoom to
+            geometry: geodesicBuffer(graphic.geometry, 1000, 'meters') as Polygon,
+          })
+        );
+      } else {
+        setCurrentTarget(graphic);
+      }
+
+      view.graphics.removeAll();
+      view.graphics.add(graphic);
+
+      // query for intersecting features
+      indexLayer
+        .queryFeatures({
+          geometry: graphic.geometry,
+          spatialRelationship: 'intersects',
+          returnGeometry: false,
+          outFields: ['fid', 'cellcode'],
+        })
+        .then((featureSet) => {
+          if (featureSet.features.length === 0) {
+            return;
+          }
+
+          // if feature has an extent just return intersecting raster cells
+          // otherwise create a query including a 3x3 neighbourhood
+          if (event.result.extent) {
+            const objectIds = featureSet.features.map((feature) => feature.attributes['fid'] as number);
+            queryRelatedFeaturesFromOIds(objectIds, false);
+          } else {
+            const cellcode = featureSet.features[0].attributes['cellcode'];
+            const query = createQueryFromCellcode(cellcode);
+
+            indexLayer
+              .queryFeatures({
+                where: query,
+                returnGeometry: false,
+                outFields: ['fid'],
+              })
+              .then((resultSet) => {
+                const objectIds = resultSet.features.map((feature) => feature.attributes['fid']);
+                queryRelatedFeaturesFromOIds(objectIds, false);
+              });
+          }
+        });
+    });
+
+    // for each raster cell given by its OID and it each relationship class
+    // of the index layer - query related features
+    const queryRelatedFeaturesFromOIds = (objectIds: number[], isPopupContent: boolean) => {
+      const relatedFeaturesByLayer: LayerToFeaturesMap = {};
+      const promises = indexLayer.relationships.map((relationship) => {
+        return indexLayer
+          .queryRelatedFeatures({
+            outFields: ['url'],
+            relationshipId: relationship.id,
+            objectIds: objectIds,
+          })
+          .then((relatedFeatureSets) => {
+            Object.keys(relatedFeatureSets).forEach((objectId) => {
+              if (!relatedFeatureSets[objectId]) {
+                return;
+              }
+
+              const regex = /^https:\/\/.+\/MapServer\/\d+/g;
+              const relatedFeatures = relatedFeatureSets[objectId].features;
+
+              // get url of related feature layer
+              let layerURL: string = '';
+              if (relatedFeatures.length > 0) {
+                const matches = relatedFeatures[0].attributes.url.match(regex);
+                if (matches.length > 0) {
+                  layerURL = matches[0];
+                }
+              }
+              const urls = relatedFeatures.map((feature: any) => feature.attributes.url);
+
+              if (relatedFeaturesByLayer[layerURL]) {
+                relatedFeaturesByLayer[layerURL] = relatedFeaturesByLayer[layerURL].concat(urls);
+              } else {
+                relatedFeaturesByLayer[layerURL] = urls;
+              }
+            });
+          });
+      });
+
+      // wait until all promises are fulfilled
+      return eachAlways(promises).then(() => {
+        const relatedFeatures: { [key: string]: JSX.Element[] } = {};
+        const mapImageLayers: MapImageLayer[] = [];
+        Object.keys(relatedFeaturesByLayer).forEach((layerURL) => {
+          const relatedFeatureURLs = [...new Set(relatedFeaturesByLayer[layerURL])];
+          const mapImageLayer = getMapImageLayer(layerURL);
+
+          let mapImageLayerId: string = '';
+          let sublayer: Sublayer | undefined;
+          if (mapImageLayer) {
+            mapImageLayerId = mapImageLayer.id;
+            mapImageLayers.push(mapImageLayer);
+
+            mapImageLayer.sublayers.forEach((layer) => {
+              if (layer.url === layerURL) {
+                sublayer = layer;
+              }
+            });
+          }
+
+          const text = sublayer?.id ? sublayer?.id.toString() : '';
+          // create UI item for sublayer
+          const accordionItem = (
+            <CalciteAccordionItem heading={sublayer?.title} key={sublayer?.id}>
+              <CalciteAction
+                slot="actions-end"
+                icon={sublayer?.visible ? 'view-visible' : 'view-hide'}
+                text={text}
+                appearance="transparent"
+                onClick={() => {
+                  if (sublayer) {
+                    sublayer.visible = !sublayer.visible;
+                  }
+                }}
+              ></CalciteAction>
+
+              <CalciteList>
+                {relatedFeatureURLs.map((relatedFeatureURL) => {
+                  const regex = /\d+$/g;
+                  const matches = relatedFeatureURL.match(regex);
+                  let featureId;
+                  if (matches && matches.length > 0) featureId = matches[0];
+                  return (
+                    <CalciteListItem key={featureId}>
+                      <CalciteAction
+                        slot="actions-start"
+                        icon="magnifying-glass"
+                        text={relatedFeatureURL}
+                        appearance="transparent"
+                        onClick={handleZoomTo}
+                      ></CalciteAction>
+                      <CalciteLink
+                        href={relatedFeatureURL}
+                        target="_blank"
+                        slot="content"
+                      >{`Feature ${featureId}`}</CalciteLink>
+                    </CalciteListItem>
+                  );
+                })}
+              </CalciteList>
+            </CalciteAccordionItem>
+          );
+
+          if (!relatedFeatures[mapImageLayerId]) {
+            relatedFeatures[mapImageLayerId] = [accordionItem];
+          } else {
+            relatedFeatures[mapImageLayerId].push(accordionItem);
+          }
+        });
+
+        // create cutom layer objects tree
+        const layerObjects = getLayerObjects(view.map.layers.toArray());
+
+        // remove layers that are not in the seach result
+        let remainingLayers = removeLayers(layerObjects, (layer: CustomGroupLayer | CustomLayer) => {
+          if (
+            layer.type === 'map-image' &&
+            mapImageLayers.findIndex((mapImageLayer) => mapImageLayer.id === layer.id) === -1
+          ) {
+            return false;
+          } else {
+            return true;
+          }
+        });
+
+        remainingLayers = removeLayers(remainingLayers, (layer: CustomGroupLayer | CustomLayer) => {
+          if (
+            (layer.type === 'group' &&
+              ((layer as CustomGroupLayer).layers.length === 0 ||
+                (layer as CustomGroupLayer).layers.every(
+                  (child) => child.type === 'imagery' || child.type === 'imagery-tile'
+                ))) ||
+            layer.type === 'feature' ||
+            layer.type === 'imagery' ||
+            layer.type === 'imagery-tile'
+          ) {
+            return false;
+          } else {
+            return true;
+          }
+        });
+
+        // recursively build UI from remaining layers
+        const buildLayerTree = (layer: CustomGroupLayer | CustomLayer) => {
+          if (layer.type === 'group') {
+            return (
+              <CalciteAccordionItem heading={layer.title} key={layer.id}>
+                <CalciteAction
+                  slot="actions-end"
+                  icon={layer.visible ? 'view-visible' : 'view-hide'}
+                  text={layer.id}
+                  appearance="transparent"
+                  onClick={handleToggleVisibility}
+                ></CalciteAction>
+                {(layer as CustomGroupLayer).layers &&
+                  (layer as CustomGroupLayer).layers.map((sublayer) => buildLayerTree(sublayer))}
+              </CalciteAccordionItem>
+            );
+          } else if (layer.type === 'map-image') {
+            return (
+              <CalciteAccordionItem heading={layer.title} key={layer.id}>
+                <CalciteAction
+                  slot="actions-end"
+                  icon={layer.visible ? 'view-visible' : 'view-hide'}
+                  text={layer.id}
+                  appearance="transparent"
+                  onClick={handleToggleVisibility}
+                ></CalciteAction>
+                {relatedFeatures[layer.id]}
+              </CalciteAccordionItem>
+            );
+          }
+        };
+
+        const layertree = (
+          <CalciteAccordion appearance="transparent" iconPosition="start" scale="s">
+            {remainingLayers.map((layer: CustomGroupLayer | CustomLayer) => buildLayerTree(layer))}
+          </CalciteAccordion>
+        );
+
+        // render react components into div element
+        const contentDiv = document.createElement('div');
+        const root: Root = createRoot(contentDiv);
+        root.render(layertree);
+
+        if (isPopupContent) {
+          return contentDiv;
+        } else {
+          let location;
+          if (currentGraphicRef.current?.geometry?.type === 'polygon') {
+            location = (currentGraphicRef.current?.geometry as Polygon).centroid;
+          } else {
+            location = currentGraphicRef.current?.geometry;
+          }
+          view.openPopup({
+            title: t('search.popup-title'),
+            content: contentDiv,
+            location: location,
+          });
+        }
+      });
+    };
+
+    // create popup content for popup template of index layer
+    const createPopupContent = async (target: any) => {
+      const cellcode = target.graphic.attributes['cellcode'];
+      const query = createQueryFromCellcode(cellcode);
+
+      const objectIds = await indexLayer
+        .queryFeatures({
+          where: query,
+          returnGeometry: false,
+          outFields: ['fid'],
+        })
+        .then((resultSet) => {
+          // return Ids of neighbouring features (3x3 neighbourhood)
+          return resultSet.features.map((feature) => feature.attributes['fid']);
+        });
+
+      return queryRelatedFeaturesFromOIds(objectIds, true);
+    };
+
+    const popupTemplate = {
+      title: t('search.popup-title'),
+      content: createPopupContent,
+      returnGeometry: false,
+      outFields: [],
+    };
+
+    indexLayer.popupTemplate = popupTemplate as unknown as PopupTemplate;
+  });
+
+  return null;
+}

app/globals.css

@@ -22,6 +22,10 @@ body {
   background: rgb(var(--background-end-rgb));
 }
 
+body {
+  display: flex;
+}
+
 * {
   box-sizing: border-box;
 }

package-lock.json

@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@arcgis/core": "^4.27.6",
-        "@esri/calcite-components-react": "^1.4.3",
+        "@esri/calcite-components-react": "^1.8.0",
         "@formatjs/intl-localematcher": "^0.4.0",
         "@types/node": "20.4.5",
         "@types/react": "18.2.17",
@@ -19,10 +19,10 @@
         "i18next": "^23.4.4",
         "ncp": "^2.0.0",
         "negotiator": "^0.6.3",
-        "next": "13.4.12",
+        "next": "^13.5.2",
         "react": "18.2.0",
         "react-dom": "18.2.0",
-        "react-i18next": "^13.1.1",
+        "react-i18next": "^13.2.2",
         "typescript": "5.1.6"
       },
       "devDependencies": {
@@ -143,47 +143,64 @@
       "integrity": "sha512-wHQYWFtDa6c328EraXEVZvgOiaQyYr0yuaaZ0G3cB4C3lSkWefW34L/e5TLAhtuG3zJ/wR6pl5X1YYNfBc0/4Q=="
     },
     "node_modules/@esri/calcite-components": {
-      "version": "1.4.3",
+      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/@esri/calcite-components/-/calcite-components-1.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/@esri/calcite-components/-/calcite-components-1.8.0.tgz",
-      "integrity": "sha512-3Yj0ZBOPBCIEp+YPJTM0C6cBmbxFXXsG9a6yv0DKxkaERj7te+hb3DQ1fVbG/lQsMLOdrQHiE70zdXSzMKvKCg==",
+      "integrity": "sha512-zlTLEs7ex1EqeQdZIt0eDzv3kyRHgJbB5Bdxo/SQx+K2H+nOu7bndgUccF2jUv2teuljROgaVYNudaKKQzoM8Q==",
       "dependencies": {
-        "@floating-ui/dom": "1.4.1",
+        "@floating-ui/dom": "1.5.1",
         "@stencil/core": "2.22.3",
         "@types/color": "3.0.3",
         "color": "4.2.3",
         "composed-offset-position": "0.0.4",
-        "dayjs": "1.11.8",
+        "dayjs": "1.11.9",
-        "focus-trap": "7.4.3",
+        "focus-trap": "7.5.2",
         "form-request-submit-polyfill": "2.0.0",
         "lodash-es": "4.17.21",
         "sortablejs": "1.15.0"
       }
     },
     "node_modules/@esri/calcite-components-react": {
-      "version": "1.4.3",
+      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/@esri/calcite-components-react/-/calcite-components-react-1.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/@esri/calcite-components-react/-/calcite-components-react-1.8.0.tgz",
-      "integrity": "sha512-jLRgk0T/AC04gia/zNe2h2svPvyQtmN0QWJt6D4xqODuaXM+W3UTP6xCq7Z1vrUb+gCQXLTbW8oInKL/YfXGmw==",
+      "integrity": "sha512-55X4pYF6sCRJHB71deMYX0JkQtVMJminSkkmZBq3fKRE+7jxciiIN5EALD7TtdZ71BZW7qshTIZxcCGhTksrFg==",
       "dependencies": {
-        "@esri/calcite-components": "1.4.3"
+        "@esri/calcite-components": "^1.8.0"
       },
       "peerDependencies": {
         "react": ">=16.7",
         "react-dom": ">=16.7"
       }
     },
+    "node_modules/@esri/calcite-components/node_modules/focus-trap": {
+      "version": "7.5.2",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.2.tgz",
+      "integrity": "sha512-p6vGNNWLDGwJCiEjkSK6oERj/hEyI9ITsSwIUICBoKLlWiTWXJRfQibCwcoi50rTZdbi87qDtUlMCmQwsGSgPw==",
+      "dependencies": {
+        "tabbable": "^6.2.0"
+      }
+    },
     "node_modules/@floating-ui/core": {
-      "version": "1.3.1",
+      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
-      "integrity": "sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g=="
+      "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.1.3"
+      }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.4.1",
+      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.1.tgz",
-      "integrity": "sha512-loCXUOLzIC3jp50RFOKXZ/kQjjz26ryr/23M+FWG9jrmAv8lRf3DUfC2AiVZ3+K316GOhB08CR+Povwz8e9mDw==",
+      "integrity": "sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==",
       "dependencies": {
-        "@floating-ui/core": "^1.3.1"
+        "@floating-ui/core": "^1.4.1",
+        "@floating-ui/utils": "^0.1.1"
       }
     },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.4.tgz",
+      "integrity": "sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA=="
+    },
     "node_modules/@formatjs/intl-localematcher": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.4.0.tgz",
@@ -277,9 +294,9 @@
       "dev": true
     },
     "node_modules/@next/env": {
-      "version": "13.4.12",
+      "version": "13.5.2",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.12.tgz",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.2.tgz",
-      "integrity": "sha512-RmHanbV21saP/6OEPBJ7yJMuys68cIf8OBBWd7+uj40LdpmswVAwe1uzeuFyUsd6SfeITWT3XnQfn6wULeKwDQ=="
+      "integrity": "sha512-dUseBIQVax+XtdJPzhwww4GetTjlkRSsXeQnisIJWBaHsnxYcN2RGzsPHi58D6qnkATjnhuAtQTJmR1hKYQQPg=="
     },
     "node_modules/@next/eslint-plugin-next": {
       "version": "13.4.12",
@@ -290,9 +307,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "13.4.12",
+      "version": "13.5.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.12.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.2.tgz",
-      "integrity": "sha512-deUrbCXTMZ6ZhbOoloqecnUeNpUOupi8SE2tx4jPfNS9uyUR9zK4iXBvH65opVcA/9F5I/p8vDXSYbUlbmBjZg==",
+      "integrity": "sha512-7eAyunAWq6yFwdSQliWMmGhObPpHTesiKxMw4DWVxhm5yLotBj8FCR4PXGkpRP2tf8QhaWuVba+/fyAYggqfQg==",
       "cpu": [
         "arm64"
       ],
@@ -305,9 +322,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "13.4.12",
+      "version": "13.5.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.12.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.2.tgz",
-      "integrity": "sha512-WRvH7RxgRHlC1yb5oG0ZLx8F7uci9AivM5/HGGv9ZyG2Als8Ij64GC3d+mQ5sJhWjusyU6T6V1WKTUoTmOB0zQ==",
+      "integrity": "sha512-WxXYWE7zF1ch8rrNh5xbIWzhMVas6Vbw+9BCSyZvu7gZC5EEiyZNJsafsC89qlaSA7BnmsDXVWQmc+s1feSYbQ==",
       "cpu": [
         "x64"
       ],
@@ -320,9 +337,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "13.4.12",
+      "version": "13.5.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.12.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.2.tgz",
-      "integrity": "sha512-YEKracAWuxp54tKiAvvq73PUs9lok57cc8meYRibTWe/VdPB2vLgkTVWFcw31YDuRXdEhdX0fWS6Q+ESBhnEig==",
+      "integrity": "sha512-URSwhRYrbj/4MSBjLlefPTK3/tvg95TTm6mRaiZWBB6Za3hpHKi8vSdnCMw5D2aP6k0sQQIEG6Pzcfwm+C5vrg==",
       "cpu": [
         "arm64"
       ],
@@ -335,9 +352,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "13.4.12",
+      "version": "13.5.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.12.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.2.tgz",
-      "integrity": "sha512-LhJR7/RAjdHJ2Isl2pgc/JaoxNk0KtBgkVpiDJPVExVWA1c6gzY57+3zWuxuyWzTG+fhLZo2Y80pLXgIJv7g3g==",
+      "integrity": "sha512-HefiwAdIygFyNmyVsQeiJp+j8vPKpIRYDlmTlF9/tLdcd3qEL/UEBswa1M7cvO8nHcr27ZTKXz5m7dkd56/Esg==",
       "cpu": [
         "arm64"
       ],
@@ -350,9 +367,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "13.4.12",
+      "version": "13.5.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.12.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.2.tgz",
-      "integrity": "sha512-1DWLL/B9nBNiQRng+1aqs3OaZcxC16Nf+mOnpcrZZSdyKHek3WQh6j/fkbukObgNGwmCoVevLUa/p3UFTTqgqg==",
+      "integrity": "sha512-htGVVroW0tdHgMYwKWkxWvVoG2RlAdDXRO1RQxYDvOBQsaV0nZsgKkw0EJJJ3urTYnwKskn/MXm305cOgRxD2w==",
       "cpu": [
         "x64"
       ],
@@ -365,9 +382,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "13.4.12",
+      "version": "13.5.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.12.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.2.tgz",
-      "integrity": "sha512-kEAJmgYFhp0VL+eRWmUkVxLVunn7oL9Mdue/FS8yzRBVj7Z0AnIrHpTIeIUl1bbdQq1VaoOztnKicAjfkLTRCQ==",
+      "integrity": "sha512-UBD333GxbHVGi7VDJPPDD1bKnx30gn2clifNJbla7vo5nmBV+x5adyARg05RiT9amIpda6yzAEEUu+s774ldkw==",
       "cpu": [
         "x64"
       ],
@@ -380,9 +397,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "13.4.12",
+      "version": "13.5.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.12.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.2.tgz",
-      "integrity": "sha512-GMLuL/loR6yIIRTnPRY6UGbLL9MBdw2anxkOnANxvLvsml4F0HNIgvnU3Ej4BjbqMTNjD4hcPFdlEow4XHPdZA==",
+      "integrity": "sha512-Em9ApaSFIQnWXRT3K6iFnr9uBXymixLc65Xw4eNt7glgH0eiXpg+QhjmgI2BFyc7k4ZIjglfukt9saNpEyolWA==",
       "cpu": [
         "arm64"
       ],
@@ -395,9 +412,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "13.4.12",
+      "version": "13.5.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.12.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.2.tgz",
-      "integrity": "sha512-PhgNqN2Vnkm7XaMdRmmX0ZSwZXQAtamBVSa9A/V1dfKQCV1rjIZeiy/dbBnVYGdj63ANfsOR/30XpxP71W0eww==",
+      "integrity": "sha512-TBACBvvNYU+87X0yklSuAseqdpua8m/P79P0SG1fWUvWDDA14jASIg7kr86AuY5qix47nZLEJ5WWS0L20jAUNw==",
       "cpu": [
         "ia32"
       ],
@@ -410,9 +427,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "13.4.12",
+      "version": "13.5.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.12.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.2.tgz",
-      "integrity": "sha512-Z+56e/Ljt0bUs+T+jPjhFyxYBcdY2RIq9ELFU+qAMQMteHo7ymbV7CKmlcX59RI9C4YzN8PgMgLyAoi916b5HA==",
+      "integrity": "sha512-LfTHt+hTL8w7F9hnB3H4nRasCzLD/fP+h4/GUVBTxrkMJOnh/7OZ0XbYDKO/uuWwryJS9kZjhxcruBiYwc5UDw==",
       "cpu": [
         "x64"
       ],
@@ -502,9 +519,9 @@
       }
     },
     "node_modules/@swc/helpers": {
-      "version": "0.5.1",
+      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
-      "integrity": "sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==",
+      "integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==",
       "dependencies": {
         "tslib": "^2.4.0"
       }
@@ -1276,9 +1293,9 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA=="
     },
     "node_modules/dayjs": {
-      "version": "1.11.8",
+      "version": "1.11.9",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.8.tgz",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.9.tgz",
-      "integrity": "sha512-LcgxzFoWMEPO7ggRv1Y2N31hUf2R0Vj7fuy/m+Bg1K8rr+KAs1AEy4y9jd5DXe8pbHgX+srkHNS7TH6Q6ZhYeQ=="
+      "integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA=="
     },
     "node_modules/debug": {
       "version": "4.3.4",
@@ -2425,9 +2442,9 @@
       }
     },
     "node_modules/i18next": {
-      "version": "23.4.4",
+      "version": "23.5.1",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.4.4.tgz",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.5.1.tgz",
-      "integrity": "sha512-+c9B0txp/x1m5zn+QlwHaCS9vyFtmIAEXbVSFzwCX7vupm5V7va8F9cJGNJZ46X9ZtoGzhIiRC7eTIIh93TxPA==",
+      "integrity": "sha512-JelYzcaCoFDaa+Ysbfz2JsGAKkrHiMG6S61+HLBUEIPaF40WMwW9hCPymlQGrP+wWawKxKPuSuD71WZscCsWHg==",
       "funding": [
         {
           "type": "individual",
@@ -3076,12 +3093,12 @@
       }
     },
     "node_modules/next": {
-      "version": "13.4.12",
+      "version": "13.5.2",
-      "resolved": "https://registry.npmjs.org/next/-/next-13.4.12.tgz",
+      "resolved": "https://registry.npmjs.org/next/-/next-13.5.2.tgz",
-      "integrity": "sha512-eHfnru9x6NRmTMcjQp6Nz0J4XH9OubmzOa7CkWL+AUrUxpibub3vWwttjduu9No16dug1kq04hiUUpo7J3m3Xw==",
+      "integrity": "sha512-vog4UhUaMYAzeqfiAAmgB/QWLW7p01/sg+2vn6bqc/CxHFYizMzLv6gjxKzl31EVFkfl/F+GbxlKizlkTE9RdA==",
       "dependencies": {
-        "@next/env": "13.4.12",
+        "@next/env": "13.5.2",
-        "@swc/helpers": "0.5.1",
+        "@swc/helpers": "0.5.2",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001406",
         "postcss": "8.4.14",
@@ -3093,22 +3110,21 @@
         "next": "dist/bin/next"
       },
       "engines": {
-        "node": ">=16.8.0"
+        "node": ">=16.14.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "13.4.12",
+        "@next/swc-darwin-arm64": "13.5.2",
-        "@next/swc-darwin-x64": "13.4.12",
+        "@next/swc-darwin-x64": "13.5.2",
-        "@next/swc-linux-arm64-gnu": "13.4.12",
+        "@next/swc-linux-arm64-gnu": "13.5.2",
-        "@next/swc-linux-arm64-musl": "13.4.12",
+        "@next/swc-linux-arm64-musl": "13.5.2",
-        "@next/swc-linux-x64-gnu": "13.4.12",
+        "@next/swc-linux-x64-gnu": "13.5.2",
-        "@next/swc-linux-x64-musl": "13.4.12",
+        "@next/swc-linux-x64-musl": "13.5.2",
-        "@next/swc-win32-arm64-msvc": "13.4.12",
+        "@next/swc-win32-arm64-msvc": "13.5.2",
-        "@next/swc-win32-ia32-msvc": "13.4.12",
+        "@next/swc-win32-ia32-msvc": "13.5.2",
-        "@next/swc-win32-x64-msvc": "13.4.12"
+        "@next/swc-win32-x64-msvc": "13.5.2"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
-        "fibers": ">= 3.1.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "sass": "^1.3.0"
@@ -3117,9 +3133,6 @@
         "@opentelemetry/api": {
           "optional": true
         },
-        "fibers": {
-          "optional": true
-        },
         "sass": {
           "optional": true
         }
@@ -3680,9 +3693,9 @@
       }
     },
     "node_modules/react-i18next": {
-      "version": "13.1.1",
+      "version": "13.2.2",
-      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-13.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-13.2.2.tgz",
-      "integrity": "sha512-V81cspLxZd37/ltd8Md5Lz99cfeqIn7vJCAUsCXuaTi1vRPKVr0dWq1DhVFUJBHpAi3PJsmFAR3/YstpP+CDYg==",
+      "integrity": "sha512-+nFUkbRByFwnrfDcYqvzBuaeZb+nACHx+fAWN/pZMddWOCJH5hoc21+Sa/N/Lqi6ne6/9wC/qRGOoQhJa6IkEQ==",
       "dependencies": {
         "@babel/runtime": "^7.22.5",
         "html-parse-stringify": "^3.0.1"
@@ -4756,43 +4769,62 @@
       "integrity": "sha512-wHQYWFtDa6c328EraXEVZvgOiaQyYr0yuaaZ0G3cB4C3lSkWefW34L/e5TLAhtuG3zJ/wR6pl5X1YYNfBc0/4Q=="
     },
     "@esri/calcite-components": {
-      "version": "1.4.3",
+      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/@esri/calcite-components/-/calcite-components-1.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/@esri/calcite-components/-/calcite-components-1.8.0.tgz",
-      "integrity": "sha512-3Yj0ZBOPBCIEp+YPJTM0C6cBmbxFXXsG9a6yv0DKxkaERj7te+hb3DQ1fVbG/lQsMLOdrQHiE70zdXSzMKvKCg==",
+      "integrity": "sha512-zlTLEs7ex1EqeQdZIt0eDzv3kyRHgJbB5Bdxo/SQx+K2H+nOu7bndgUccF2jUv2teuljROgaVYNudaKKQzoM8Q==",
       "requires": {
-        "@floating-ui/dom": "1.4.1",
+        "@floating-ui/dom": "1.5.1",
         "@stencil/core": "2.22.3",
         "@types/color": "3.0.3",
         "color": "4.2.3",
         "composed-offset-position": "0.0.4",
-        "dayjs": "1.11.8",
+        "dayjs": "1.11.9",
-        "focus-trap": "7.4.3",
+        "focus-trap": "7.5.2",
         "form-request-submit-polyfill": "2.0.0",
         "lodash-es": "4.17.21",
         "sortablejs": "1.15.0"
+      },
+      "dependencies": {
+        "focus-trap": {
+          "version": "7.5.2",
+          "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.2.tgz",
+          "integrity": "sha512-p6vGNNWLDGwJCiEjkSK6oERj/hEyI9ITsSwIUICBoKLlWiTWXJRfQibCwcoi50rTZdbi87qDtUlMCmQwsGSgPw==",
+          "requires": {
+            "tabbable": "^6.2.0"
+          }
+        }
       }
     },
     "@esri/calcite-components-react": {
-      "version": "1.4.3",
+      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/@esri/calcite-components-react/-/calcite-components-react-1.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/@esri/calcite-components-react/-/calcite-components-react-1.8.0.tgz",
-      "integrity": "sha512-jLRgk0T/AC04gia/zNe2h2svPvyQtmN0QWJt6D4xqODuaXM+W3UTP6xCq7Z1vrUb+gCQXLTbW8oInKL/YfXGmw==",
+      "integrity": "sha512-55X4pYF6sCRJHB71deMYX0JkQtVMJminSkkmZBq3fKRE+7jxciiIN5EALD7TtdZ71BZW7qshTIZxcCGhTksrFg==",
       "requires": {
-        "@esri/calcite-components": "1.4.3"
+        "@esri/calcite-components": "^1.8.0"
       }
     },
     "@floating-ui/core": {
-      "version": "1.3.1",
+      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
-      "integrity": "sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g=="
+      "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
+      "requires": {
+        "@floating-ui/utils": "^0.1.3"
+      }
     },
     "@floating-ui/dom": {
-      "version": "1.4.1",
+      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.1.tgz",
-      "integrity": "sha512-loCXUOLzIC3jp50RFOKXZ/kQjjz26ryr/23M+FWG9jrmAv8lRf3DUfC2AiVZ3+K316GOhB08CR+Povwz8e9mDw==",
+      "integrity": "sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==",
       "requires": {
-        "@floating-ui/core": "^1.3.1"
+        "@floating-ui/core": "^1.4.1",
+        "@floating-ui/utils": "^0.1.1"
       }
     },
+    "@floating-ui/utils": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.4.tgz",
+      "integrity": "sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA=="
+    },
     "@formatjs/intl-localematcher": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.4.0.tgz",
@@ -4869,9 +4901,9 @@
       }
     },
     "@next/env": {
-      "version": "13.4.12",
+      "version": "13.5.2",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.12.tgz",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.2.tgz",
-      "integrity": "sha512-RmHanbV21saP/6OEPBJ7yJMuys68cIf8OBBWd7+uj40LdpmswVAwe1uzeuFyUsd6SfeITWT3XnQfn6wULeKwDQ=="
+      "integrity": "sha512-dUseBIQVax+XtdJPzhwww4GetTjlkRSsXeQnisIJWBaHsnxYcN2RGzsPHi58D6qnkATjnhuAtQTJmR1hKYQQPg=="
     },
     "@next/eslint-plugin-next": {
       "version": "13.4.12",
@@ -4882,57 +4914,57 @@
       }
     },
     "@next/swc-darwin-arm64": {
-      "version": "13.4.12",
+      "version": "13.5.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.12.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.2.tgz",
-      "integrity": "sha512-deUrbCXTMZ6ZhbOoloqecnUeNpUOupi8SE2tx4jPfNS9uyUR9zK4iXBvH65opVcA/9F5I/p8vDXSYbUlbmBjZg==",
+      "integrity": "sha512-7eAyunAWq6yFwdSQliWMmGhObPpHTesiKxMw4DWVxhm5yLotBj8FCR4PXGkpRP2tf8QhaWuVba+/fyAYggqfQg==",
       "optional": true
     },
     "@next/swc-darwin-x64": {
-      "version": "13.4.12",
+      "version": "13.5.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.12.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.2.tgz",
-      "integrity": "sha512-WRvH7RxgRHlC1yb5oG0ZLx8F7uci9AivM5/HGGv9ZyG2Als8Ij64GC3d+mQ5sJhWjusyU6T6V1WKTUoTmOB0zQ==",
+      "integrity": "sha512-WxXYWE7zF1ch8rrNh5xbIWzhMVas6Vbw+9BCSyZvu7gZC5EEiyZNJsafsC89qlaSA7BnmsDXVWQmc+s1feSYbQ==",
       "optional": true
     },
     "@next/swc-linux-arm64-gnu": {
-      "version": "13.4.12",
+      "version": "13.5.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.12.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.2.tgz",
-      "integrity": "sha512-YEKracAWuxp54tKiAvvq73PUs9lok57cc8meYRibTWe/VdPB2vLgkTVWFcw31YDuRXdEhdX0fWS6Q+ESBhnEig==",
+      "integrity": "sha512-URSwhRYrbj/4MSBjLlefPTK3/tvg95TTm6mRaiZWBB6Za3hpHKi8vSdnCMw5D2aP6k0sQQIEG6Pzcfwm+C5vrg==",
       "optional": true
     },
     "@next/swc-linux-arm64-musl": {
-      "version": "13.4.12",
+      "version": "13.5.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.12.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.2.tgz",
-      "integrity": "sha512-LhJR7/RAjdHJ2Isl2pgc/JaoxNk0KtBgkVpiDJPVExVWA1c6gzY57+3zWuxuyWzTG+fhLZo2Y80pLXgIJv7g3g==",
+      "integrity": "sha512-HefiwAdIygFyNmyVsQeiJp+j8vPKpIRYDlmTlF9/tLdcd3qEL/UEBswa1M7cvO8nHcr27ZTKXz5m7dkd56/Esg==",
       "optional": true
     },
     "@next/swc-linux-x64-gnu": {
-      "version": "13.4.12",
+      "version": "13.5.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.12.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.2.tgz",
-      "integrity": "sha512-1DWLL/B9nBNiQRng+1aqs3OaZcxC16Nf+mOnpcrZZSdyKHek3WQh6j/fkbukObgNGwmCoVevLUa/p3UFTTqgqg==",
+      "integrity": "sha512-htGVVroW0tdHgMYwKWkxWvVoG2RlAdDXRO1RQxYDvOBQsaV0nZsgKkw0EJJJ3urTYnwKskn/MXm305cOgRxD2w==",
       "optional": true
     },
     "@next/swc-linux-x64-musl": {
-      "version": "13.4.12",
+      "version": "13.5.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.12.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.2.tgz",
-      "integrity": "sha512-kEAJmgYFhp0VL+eRWmUkVxLVunn7oL9Mdue/FS8yzRBVj7Z0AnIrHpTIeIUl1bbdQq1VaoOztnKicAjfkLTRCQ==",
+      "integrity": "sha512-UBD333GxbHVGi7VDJPPDD1bKnx30gn2clifNJbla7vo5nmBV+x5adyARg05RiT9amIpda6yzAEEUu+s774ldkw==",
       "optional": true
     },
     "@next/swc-win32-arm64-msvc": {
-      "version": "13.4.12",
+      "version": "13.5.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.12.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.2.tgz",
-      "integrity": "sha512-GMLuL/loR6yIIRTnPRY6UGbLL9MBdw2anxkOnANxvLvsml4F0HNIgvnU3Ej4BjbqMTNjD4hcPFdlEow4XHPdZA==",
+      "integrity": "sha512-Em9ApaSFIQnWXRT3K6iFnr9uBXymixLc65Xw4eNt7glgH0eiXpg+QhjmgI2BFyc7k4ZIjglfukt9saNpEyolWA==",
       "optional": true
     },
     "@next/swc-win32-ia32-msvc": {
-      "version": "13.4.12",
+      "version": "13.5.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.12.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.2.tgz",
-      "integrity": "sha512-PhgNqN2Vnkm7XaMdRmmX0ZSwZXQAtamBVSa9A/V1dfKQCV1rjIZeiy/dbBnVYGdj63ANfsOR/30XpxP71W0eww==",
+      "integrity": "sha512-TBACBvvNYU+87X0yklSuAseqdpua8m/P79P0SG1fWUvWDDA14jASIg7kr86AuY5qix47nZLEJ5WWS0L20jAUNw==",
       "optional": true
     },
     "@next/swc-win32-x64-msvc": {
-      "version": "13.4.12",
+      "version": "13.5.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.12.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.2.tgz",
-      "integrity": "sha512-Z+56e/Ljt0bUs+T+jPjhFyxYBcdY2RIq9ELFU+qAMQMteHo7ymbV7CKmlcX59RI9C4YzN8PgMgLyAoi916b5HA==",
+      "integrity": "sha512-LfTHt+hTL8w7F9hnB3H4nRasCzLD/fP+h4/GUVBTxrkMJOnh/7OZ0XbYDKO/uuWwryJS9kZjhxcruBiYwc5UDw==",
       "optional": true
     },
     "@nodelib/fs.scandir": {
@@ -4987,9 +5019,9 @@
       "integrity": "sha512-kmVA0M/HojwsfkeHsifvHVIYe4l5tin7J5+DLgtl8h6WWfiMClND5K3ifCXXI2ETDNKiEk21p6jql3Fx9o2rng=="
     },
     "@swc/helpers": {
-      "version": "0.5.1",
+      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
-      "integrity": "sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==",
+      "integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==",
       "requires": {
         "tslib": "^2.4.0"
       }
@@ -5516,9 +5548,9 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA=="
     },
     "dayjs": {
-      "version": "1.11.8",
+      "version": "1.11.9",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.8.tgz",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.9.tgz",
-      "integrity": "sha512-LcgxzFoWMEPO7ggRv1Y2N31hUf2R0Vj7fuy/m+Bg1K8rr+KAs1AEy4y9jd5DXe8pbHgX+srkHNS7TH6Q6ZhYeQ=="
+      "integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA=="
     },
     "debug": {
       "version": "4.3.4",
@@ -6352,9 +6384,9 @@
       "integrity": "sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ=="
     },
     "i18next": {
-      "version": "23.4.4",
+      "version": "23.5.1",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.4.4.tgz",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.5.1.tgz",
-      "integrity": "sha512-+c9B0txp/x1m5zn+QlwHaCS9vyFtmIAEXbVSFzwCX7vupm5V7va8F9cJGNJZ46X9ZtoGzhIiRC7eTIIh93TxPA==",
+      "integrity": "sha512-JelYzcaCoFDaa+Ysbfz2JsGAKkrHiMG6S61+HLBUEIPaF40WMwW9hCPymlQGrP+wWawKxKPuSuD71WZscCsWHg==",
       "requires": {
         "@babel/runtime": "^7.22.5"
       }
@@ -6787,21 +6819,21 @@
       "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg=="
     },
     "next": {
-      "version": "13.4.12",
+      "version": "13.5.2",
-      "resolved": "https://registry.npmjs.org/next/-/next-13.4.12.tgz",
+      "resolved": "https://registry.npmjs.org/next/-/next-13.5.2.tgz",
-      "integrity": "sha512-eHfnru9x6NRmTMcjQp6Nz0J4XH9OubmzOa7CkWL+AUrUxpibub3vWwttjduu9No16dug1kq04hiUUpo7J3m3Xw==",
+      "integrity": "sha512-vog4UhUaMYAzeqfiAAmgB/QWLW7p01/sg+2vn6bqc/CxHFYizMzLv6gjxKzl31EVFkfl/F+GbxlKizlkTE9RdA==",
       "requires": {
-        "@next/env": "13.4.12",
+        "@next/env": "13.5.2",
-        "@next/swc-darwin-arm64": "13.4.12",
+        "@next/swc-darwin-arm64": "13.5.2",
-        "@next/swc-darwin-x64": "13.4.12",
+        "@next/swc-darwin-x64": "13.5.2",
-        "@next/swc-linux-arm64-gnu": "13.4.12",
+        "@next/swc-linux-arm64-gnu": "13.5.2",
-        "@next/swc-linux-arm64-musl": "13.4.12",
+        "@next/swc-linux-arm64-musl": "13.5.2",
-        "@next/swc-linux-x64-gnu": "13.4.12",
+        "@next/swc-linux-x64-gnu": "13.5.2",
-        "@next/swc-linux-x64-musl": "13.4.12",
+        "@next/swc-linux-x64-musl": "13.5.2",
-        "@next/swc-win32-arm64-msvc": "13.4.12",
+        "@next/swc-win32-arm64-msvc": "13.5.2",
-        "@next/swc-win32-ia32-msvc": "13.4.12",
+        "@next/swc-win32-ia32-msvc": "13.5.2",
-        "@next/swc-win32-x64-msvc": "13.4.12",
+        "@next/swc-win32-x64-msvc": "13.5.2",
-        "@swc/helpers": "0.5.1",
+        "@swc/helpers": "0.5.2",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001406",
         "postcss": "8.4.14",
@@ -7157,9 +7189,9 @@
       }
     },
     "react-i18next": {
-      "version": "13.1.1",
+      "version": "13.2.2",
-      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-13.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-13.2.2.tgz",
-      "integrity": "sha512-V81cspLxZd37/ltd8Md5Lz99cfeqIn7vJCAUsCXuaTi1vRPKVr0dWq1DhVFUJBHpAi3PJsmFAR3/YstpP+CDYg==",
+      "integrity": "sha512-+nFUkbRByFwnrfDcYqvzBuaeZb+nACHx+fAWN/pZMddWOCJH5hoc21+Sa/N/Lqi6ne6/9wC/qRGOoQhJa6IkEQ==",
       "requires": {
         "@babel/runtime": "^7.22.5",
         "html-parse-stringify": "^3.0.1"

package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@arcgis/core": "^4.27.6",
-    "@esri/calcite-components-react": "^1.4.3",
+    "@esri/calcite-components-react": "^1.8.0",
     "@formatjs/intl-localematcher": "^0.4.0",
     "@types/node": "20.4.5",
     "@types/react": "18.2.17",
@@ -21,10 +21,10 @@
     "i18next": "^23.4.4",
     "ncp": "^2.0.0",
     "negotiator": "^0.6.3",
-    "next": "13.4.12",
+    "next": "^13.5.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-i18next": "^13.1.1",
+    "react-i18next": "^13.2.2",
     "typescript": "5.1.6"
   },
   "devDependencies": {

public/assets/combobox/t9n/messages_ar.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "مسح القيمة",
   "removeTag": "إزالة علامة"
 }

public/assets/combobox/t9n/messages_bg.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Изчистване на стойност",
   "removeTag": "Премахване на таг"
 }

public/assets/combobox/t9n/messages_bs.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Očisti vrijednost",
   "removeTag": "Ukloni oznaku"
 }

public/assets/combobox/t9n/messages_ca.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Esborra el valor",
   "removeTag": "Elimina l'etiqueta"
 }

public/assets/combobox/t9n/messages_cs.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Vymazat hodnotu",
   "removeTag": "Odebrat klíčové slovo"
 }

public/assets/combobox/t9n/messages_da.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Ryd værdi",
   "removeTag": "Fjern nøgleord"
 }

public/assets/combobox/t9n/messages_de.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Wert löschen",
   "removeTag": "Tag entfernen"
 }

public/assets/combobox/t9n/messages_el.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Απαλοιφή τιμής",
   "removeTag": "Κατάργηση ετικέτας"
 }

public/assets/combobox/t9n/messages_es.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Borrar valor",
   "removeTag": "Eliminar etiqueta"
 }

public/assets/combobox/t9n/messages_et.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Eemalda väärtus",
   "removeTag": "Eemaldage märksõna"
 }

public/assets/combobox/t9n/messages_fi.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Tyhjennä arvo",
   "removeTag": "Poista tunniste"
 }

public/assets/combobox/t9n/messages_fr.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Effacer la valeur",
   "removeTag": "Supprimer la balise"
 }

public/assets/combobox/t9n/messages_he.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "נקה ערך",
   "removeTag": "הסר תג"
 }

public/assets/combobox/t9n/messages_hr.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Očisti vrijednost",
   "removeTag": "Ukloni oznaku"
 }

public/assets/combobox/t9n/messages_hu.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Érték törlése",
   "removeTag": "Címke eltávolítása"
 }

public/assets/combobox/t9n/messages_id.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Hapus nilai",
   "removeTag": "Hapus tag"
 }

public/assets/combobox/t9n/messages_it.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Cancella valore",
   "removeTag": "Rimuovere tag"
 }

public/assets/combobox/t9n/messages_ja.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "値の削除",
   "removeTag": "タグの削除"
 }

public/assets/combobox/t9n/messages_ko.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "값 지우기",
   "removeTag": "태그 제거"
 }

public/assets/combobox/t9n/messages_lt.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Išvalyti reikšmę",
   "removeTag": "Pašalinti raktažodį"
 }

public/assets/combobox/t9n/messages_lv.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Notīrīt vērtību",
   "removeTag": "Noņemt atslēgvārdu"
 }

public/assets/combobox/t9n/messages_nl.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Waarde wissen",
   "removeTag": "Tag verwijderen"
 }

public/assets/combobox/t9n/messages_no.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Fjern verdi",
   "removeTag": "Fjern tagg"
 }

public/assets/combobox/t9n/messages_pl.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Wyczyść wartość",
   "removeTag": "Usuń znacznik"
 }

public/assets/combobox/t9n/messages_pt-BR.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Apagar valor",
   "removeTag": "Remover tag"
 }

public/assets/combobox/t9n/messages_pt-PT.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Limpar valor",
   "removeTag": "Remover etiqueta"
 }

public/assets/combobox/t9n/messages_ro.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Golire valoare",
   "removeTag": "Eliminare etichetă"
 }

public/assets/combobox/t9n/messages_ru.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Очистить значение",
   "removeTag": "Удалить тег"
 }

public/assets/combobox/t9n/messages_sk.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Vymazať hodnotu",
   "removeTag": "Odstrániť štítok"
 }

public/assets/combobox/t9n/messages_sl.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Počisti vrednost",
   "removeTag": "Odstrani oznako"
 }

public/assets/combobox/t9n/messages_sr.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Izbriši vrednosti",
   "removeTag": "Ukloni oznaku"
 }

public/assets/combobox/t9n/messages_sv.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Rensa värde",
   "removeTag": "Ta bort tagg"
 }

public/assets/combobox/t9n/messages_th.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "ล้างค่า",
   "removeTag": "ลบแท็ก"
 }

public/assets/combobox/t9n/messages_tr.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Değeri temizle",
   "removeTag": "Etiketi kaldır"
 }

public/assets/combobox/t9n/messages_uk.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Очистити значення",
   "removeTag": "Вилучити тег"
 }

public/assets/combobox/t9n/messages_vi.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "Xóa giá trị",
   "removeTag": "Xóa thẻ"
 }

public/assets/combobox/t9n/messages_zh-CN.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "清除值",
   "removeTag": "移除标签"
 }

public/assets/combobox/t9n/messages_zh-HK.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "清除值",
   "removeTag": "移除標記"
 }

public/assets/combobox/t9n/messages_zh-TW.json

@@ -1,4 +1,4 @@
 {
-  "clear": "Clear value",
+  "clear": "清除值",
   "removeTag": "移除標記"
 }

public/assets/date-picker/nls/zh-CN.json

@@ -2,7 +2,7 @@
   "default-calendar": "gregorian",
   "separator": "/",
   "unitOrder": "YYYY/MM/DD",
-  "weekStart": 7,
+  "weekStart": 1,
   "placeholder": "YYYY/MM/DD",
   "days": {
     "abbreviated": ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],

public/assets/handle/t9n/index.d.ts

@@ -1,3 +1,7 @@
 export type HandleMessages = {
   dragHandle: string;
+  dragHandleActive: string;
+  dragHandleChange: string;
+  dragHandleCommit: string;
+  dragHandleIdle: string;
 };

public/assets/handle/t9n/messages.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Drag handle"
+  "dragHandle": "Drag handle",
+  "dragHandleActive": "Reordering {itemLabel}, current position {position} of {total}.",
+  "dragHandleChange": "{itemLabel}, new position {position} of {total}. Press space to confirm.",
+  "dragHandleCommit": "{itemLabel}, current position {position} of {total}.",
+  "dragHandleIdle": "{itemLabel}, press space and use arrow keys to reorder content. Current position {position} of {total}."
 }

public/assets/handle/t9n/messages_ar.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "اسحب المقبض"
+  "dragHandle": "اسحب المقبض",
+  "dragHandleActive": "إعادة ترتيب {itemLabel}، الموضع الحالي {position} من {total}.",
+  "dragHandleChange": "{itemLabel}، الموضع الجديد {position} من {total} اضغط على مفتاح المسافة للتأكيد.",
+  "dragHandleCommit": "{itemLabel}، الموضع الحالي {position} من {total}.",
+  "dragHandleIdle": "{itemLabel}، اضغط على مفتاح المسافة واستخدام مفاتيح الأسهم لإعادة ترتيب المحتوى. الموضع الحالي {position} من {total}."
 }

public/assets/handle/t9n/messages_bg.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Плъзнете маркера"
+  "dragHandle": "Плъзнете маркера",
+  "dragHandleActive": "Пренареждане {itemLabel}, текущата позиция е {position} от {total}.",
+  "dragHandleChange": "{itemLabel}, новата позиция е{position} от {total}. Натиснете интервала за потвърждаване.",
+  "dragHandleCommit": "{itemLabel}, текущата позиция е {position} от {total}.",
+  "dragHandleIdle": "{itemLabel}, натиснете интервал и използвайте клавишите със стрелки, за да промените реда на съдържанието. Текущата позиция е {position} от {total}."
 }

public/assets/handle/t9n/messages_bs.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Ručica za vuču"
+  "dragHandle": "Ručica za vuču",
+  "dragHandleActive": "Promjena redoslijeda {itemLabel}, trenutačni položaj {position} od {total}.",
+  "dragHandleChange": "{itemLabel}, novi položaj {position} od {total}. Pritisnite razmaknicu za potvrdu.",
+  "dragHandleCommit": "{itemLabel}, trenutačni položaj {position} od {total}.",
+  "dragHandleIdle": "{itemLabel}, pritisnite razmaknicu i upotrijebite tipke sa strelicama za promjenu redoslijeda sadržaja. Trenutačni položaj {position} od {total}."
 }

public/assets/handle/t9n/messages_ca.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Arrossega el controlador"
+  "dragHandle": "Arrossega el controlador",
+  "dragHandleActive": "S'està canviant l'ordre de {itemLabel}, posició actual {position} de {total}.",
+  "dragHandleChange": "{itemLabel}, posició nova {position} de {total}. Premeu la tecla d'espai per confirmar-ho.",
+  "dragHandleCommit": "{itemLabel}, posició actual {position} de {total}.",
+  "dragHandleIdle": "{itemLabel}, premeu la tecla d'espai i feu servir les tecles de fletxa per canviar l'ordre del contingut. Posició actual {position} de {total}."
 }

public/assets/handle/t9n/messages_cs.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Úchyt přetažení"
+  "dragHandle": "Přetáhnout úchyt",
+  "dragHandleActive": "Změna pořadí {itemLabel}, aktuální pozice {position} z {total}.",
+  "dragHandleChange": "{itemLabel}, nová pozice {position} z {total}. Potvrďte stisknutím mezerníku.",
+  "dragHandleCommit": "{itemLabel}, aktuální pozice {position} z {total}.",
+  "dragHandleIdle": "{itemLabel}, stiskněte mezerník a pomocí šipek změňte pořadí obsahu. Aktuální pozice {position} z {total}."
 }

public/assets/handle/t9n/messages_da.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Træk håndtag"
+  "dragHandle": "Træk håndtag",
+  "dragHandleActive": "Genbestiller {itemLabel}, aktuel position {position} for {total}.",
+  "dragHandleChange": "{itemLabel}, ny position {position} for {total}. Tryk på mellemrumstasten for at bekræfte.",
+  "dragHandleCommit": "{itemLabel}, aktuel position {position} for {total}.",
+  "dragHandleIdle": "{itemLabel}, tryk på mellemrumstasten og brug piletasterne for at bestille indholdet igen. Aktuel position {position} for {total}."
 }

public/assets/handle/t9n/messages_de.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Ziehpunkt ziehen"
+  "dragHandle": "Ziehpunkt ziehen",
+  "dragHandleActive": "{itemLabel} wird neu angeordnet, aktuelle Position {position} von {total}.",
+  "dragHandleChange": "{itemLabel}, neue Position {position} von {total}. Drücken Sie zur Bestätigung die Leertaste.",
+  "dragHandleCommit": "{itemLabel}, aktuelle Position {position} von {total}.",
+  "dragHandleIdle": "{itemLabel}, drücken Sie die Leertaste und verwenden Sie die Pfeiltasten, um die Reihenfolge des Inhalts zu ändern. Aktuelle Position {position} von {total}."
 }

public/assets/handle/t9n/messages_el.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Λαβή σύρσης"
+  "dragHandle": "Λαβή σύρσης",
+  "dragHandleActive": "Αναδιάταξη {itemLabel}, τρέχουσα θέση {position} του {total}.",
+  "dragHandleChange": "{itemLabel}, νέα θέση {position} του {total}. Πατήστε space για επιβεβαίωση.",
+  "dragHandleCommit": "{itemLabel}, τρέχουσα θέση {position} του {total}.",
+  "dragHandleIdle": "{itemLabel}, πατήστε space και χρησιμοποιήστε τα βέλη για να αναδιατάξετε το περιεχόμενο. Τρέχουσα θέση {position} του {total}."
 }

public/assets/handle/t9n/messages_en.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Drag handle"
+  "dragHandle": "Drag handle",
+  "dragHandleActive": "Reordering {itemLabel}, current position {position} of {total}.",
+  "dragHandleChange": "{itemLabel}, new position {position} of {total}. Press space to confirm.",
+  "dragHandleCommit": "{itemLabel}, current position {position} of {total}.",
+  "dragHandleIdle": "{itemLabel}, press space and use arrow keys to reorder content. Current position {position} of {total}."
 }

public/assets/handle/t9n/messages_es.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Arrastrar manipulador"
+  "dragHandle": "Arrastrar manipulador",
+  "dragHandleActive": "Reordenamiento de {itemLabel} , posición actual {position} de {total}.",
+  "dragHandleChange": "{itemLabel}, nueva posición {position} de {total}. Presione la barra espaciadora para confirmar.",
+  "dragHandleCommit": "{itemLabel}, posición actual {position} de {total}.",
+  "dragHandleIdle": "{itemLabel}, presione la barra espaciadora y utilice las teclas de flecha para reordenar el contenido. Posición actual {position} de {total}."
 }

public/assets/handle/t9n/messages_et.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Lohistamispide"
+  "dragHandle": "Lohistamispide",
+  "dragHandleActive": "Üksuse {itemLabel} ümberjärjestamine, praegune asukoht {position}/{total}.",
+  "dragHandleChange": "{itemLabel}, uus asukoht {position}/{total}. Kinnitamiseks vajutage tühikuklahvi.",
+  "dragHandleCommit": "{itemLabel}, praegune asukoht {position}/{total}.",
+  "dragHandleIdle": "{itemLabel}, sisu ümberjärjestamiseks vajutage tühikuklahvi ja kasutage nooleklahve. Praegune asukoht {position}/{total}."
 }

public/assets/handle/t9n/messages_fi.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Vedä kahvasta"
+  "dragHandle": "Vedä kahvasta",
+  "dragHandleActive": "Järjestetään uudelleen kohdetta {itemLabel}, nykyinen sijainti {position}/{total}.",
+  "dragHandleChange": "{itemLabel}, uusi sijainti {position}/{total}. Vahvista painamalla välilyöntinäppäintä.",
+  "dragHandleCommit": "{itemLabel}, nykyinen sijainti {position}/{total}.",
+  "dragHandleIdle": "{itemLabel}, paina välilyöntinäppäintä ja järjestä sisältö uudelleen käyttämällä nuolinäppäimiä. Nykyinen sijainti {total}/{position}."
 }

public/assets/handle/t9n/messages_fr.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Poignée de redimensionnement"
+  "dragHandle": "Poignée de redimensionnement",
+  "dragHandleActive": "Réorganisation de {itemLabel}, position actuelle {position} sur {total}.",
+  "dragHandleChange": "{itemLabel}, nouvelle position {position} sur {total}. Appuyez sur Espace pour confirmer.",
+  "dragHandleCommit": "{itemLabel}, position actuelle {position} sur {total}.",
+  "dragHandleIdle": "{itemLabel}, appuyez sur Espace et utilisez les touches de direction pour réorganiser le contenu. Position actuelle {position} sur {total}."
 }

public/assets/handle/t9n/messages_he.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "ידית גרירה"
+  "dragHandle": "ידית גרירה",
+  "dragHandleActive": "מסדר מחדש {itemLabel}, מיקום נוכחי {position} מתוך {total}.",
+  "dragHandleChange": "{itemLabel}, מיקום חדש {position} מתוך {total}. לחץ על רווח לאישור",
+  "dragHandleCommit": "{itemLabel}, מיקום נוכחי {position} מתוך {total}.",
+  "dragHandleIdle": "{itemLabel}, לחץ על רווח והשתמש במקשי החצים כדי לשנות את סדר התוכן. מיקום נוכחי {total} מתוך {position}."
 }

public/assets/handle/t9n/messages_hr.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Ručica za vuču"
+  "dragHandle": "Ručica za vuču",
+  "dragHandleActive": "Promjena redoslijeda {itemLabel}, trenutačni položaj {position} od {total}.",
+  "dragHandleChange": "{itemLabel}, novi položaj {position} od {total}. Pritisnite razmaknicu za potvrdu.",
+  "dragHandleCommit": "{itemLabel}, trenutačni položaj {position} od {total}.",
+  "dragHandleIdle": "{itemLabel}, pritisnite razmaknicu i upotrijebite tipke sa strelicama za promjenu redoslijeda sadržaja. Trenutačni položaj {position} od {total}."
 }

public/assets/handle/t9n/messages_hu.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Fogantyú húzása"
+  "dragHandle": "Fogantyú húzása",
+  "dragHandleActive": "{itemLabel} újrarendezése, aktuális helyzet: {position} / {total}.",
+  "dragHandleChange": "{itemLabel}, új helyzet: {position} / {total}. A megerősítéshez nyomja le a szóközbillentyűt.",
+  "dragHandleCommit": "{itemLabel}, aktuális helyzet: {position} / {total}",
+  "dragHandleIdle": "{itemLabel} a tartalmat a szóközbillentyűvel és a nyílbillentyűkkel rendezheti át. Aktuális pozíció: {position}/{total}."
 }

public/assets/handle/t9n/messages_id.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Seret handle"
+  "dragHandle": "Seret handle",
+  "dragHandleActive": "Mengurutkan ulang {itemLabel}, posisi terkini {position} dari {total}.",
+  "dragHandleChange": "{itemLabel}, posisi baru {position} dari {total}. Tekan spasi untuk mengonfirmasi.",
+  "dragHandleCommit": "{itemLabel}, posisi terkini {position} dari {total}.",
+  "dragHandleIdle": "{itemLabel}, tekan spasi dan gunakan tombol panah untuk mengurutkan ulang konten. Posisi terkini {position} dari {total}."
 }

public/assets/handle/t9n/messages_it.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Trascina maniglia"
+  "dragHandle": "Trascina maniglia",
+  "dragHandleActive": "Riordinare {itemLabel}, posizione attuale {position} di {total}.",
+  "dragHandleChange": "{itemLabel}, nuova posizione {position} di {total}. Fare clic sul tasto spaziatore per confermare.",
+  "dragHandleCommit": "{itemLabel}, posizione attuale {position} di {total}.",
+  "dragHandleIdle": "{itemLabel}, fare clic sul tasto spaziatore e utilizzare i tasti freccia per riordinare il contenuto. Posizione attuale {position} di {total}."
 }

public/assets/handle/t9n/messages_ja.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "ドラッグ ハンドル"
+  "dragHandle": "ハンドルのドラッグ",
+  "dragHandleActive": "{itemLabel} を順序変更しています、現在位置は {position}/{total} です。",
+  "dragHandleChange": "{itemLabel}、新しい位置は {position}/{total} です。 Space キーを押して確定してください。",
+  "dragHandleCommit": "{itemLabel}、現在位置は {position}/{total} です。",
+  "dragHandleIdle": "{itemLabel}、Space キーを押し、矢印キーを使用してコンテンツの順序を変更します。 現在位置は {position}/{total} です。"
 }

public/assets/handle/t9n/messages_ko.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "핸들 드래그"
+  "dragHandle": "핸들 드래그",
+  "dragHandleActive": "{itemLabel}의 순서를 바꾸는 중입니다. 현재 위치는 {total}개 중 {position}번째입니다.",
+  "dragHandleChange": "{itemLabel}, 새 위치는 {total}개 중 {position}번째입니다. 확인하려면 스페이스바를 누르세요.",
+  "dragHandleCommit": "{itemLabel}, 현재 위치는 {total}개 중 {position}번째입니다.",
+  "dragHandleIdle": "{itemLabel}, 콘텐츠 순서를 변경하려면 스페이스바를 누르고 화살표 키를 사용하세요. 현재 위치는 {total}개 중 {position}번째입니다."
 }

public/assets/handle/t9n/messages_lt.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Vilkti rankenėlę"
+  "dragHandle": "Vilkti rankenėlę",
+  "dragHandleActive": "Keičiama tvarka {itemLabel}, dabartinė pozicija {position} iš {total}.",
+  "dragHandleChange": "{itemLabel}, nauja pozicija {position} iš {total}. Norėdami patvirtinti, paspauskite tarpo klavišą.",
+  "dragHandleCommit": "{itemLabel}, dabartinė pozicija {position} iš {total}.",
+  "dragHandleIdle": "{itemLabel}, norėdami keisti turinio tvarką, paspauskite tarpo klavišą ir naudokite rodyklių klavišus. Dabartinė padėtis: {position} iš {total}."
 }

public/assets/handle/t9n/messages_lv.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Vilkt turētāju"
+  "dragHandle": "Vilkt turētāju",
+  "dragHandleActive": "{itemLabel} pārkārtošana, pašreizējā pozīcija: {position} no {total}.",
+  "dragHandleChange": "{itemLabel}, jauna pozīcija: {position} no {total}. Nospiediet atstarpes taustiņu, lai apstiprinātu.",
+  "dragHandleCommit": "{itemLabel}, pašreizējā pozīcija: {position} no {total}.",
+  "dragHandleIdle": "{itemLabel}, nospiediet atstarpes taustiņu un izmantojiet bulttaustiņus, lai pārkārtotu saturu. Pašreizējā pozīcija: {position} no {total}."
 }

public/assets/handle/t9n/messages_nl.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Knop slepen"
+  "dragHandle": "Knop slepen",
+  "dragHandleActive": "{itemLabel} opnieuw rangschikken, huidige positie {position} van {total}.",
+  "dragHandleChange": "{itemLabel}, nieuwe positie {position} van {total}. Druk op de spatiebalk om te bevestigen.",
+  "dragHandleCommit": "{itemLabel}, huidige positie {position} van {total}.",
+  "dragHandleIdle": "{itemLabel}, druk op spatiebalk en gebruik pijltjestoetsen om content opnieuw te rangschikken. Huidige positie {position} van {total}."
 }

public/assets/handle/t9n/messages_no.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Dra håndtak"
+  "dragHandle": "Dra håndtak",
+  "dragHandleActive": "Endrer rekkefølgen på {itemLabel}, gjeldende posisjon {position} av {total}.",
+  "dragHandleChange": "{itemLabel}, ny posisjon {position} av {total}. Trykk på mellomromstasten for å bekrefte.",
+  "dragHandleCommit": "{itemLabel}, gjeldende posisjon {position} av {total}.",
+  "dragHandleIdle": "{itemLabel}, trykk på mellomromstasten, og bruk piltastene for å endre innholdsrekkefølgen. Gjeldende posisjon {position} av {total}."
 }

public/assets/handle/t9n/messages_pl.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Uchwyt przeciągania"
+  "dragHandle": "Uchwyt przeciągania",
+  "dragHandleActive": "Reorganizowanie {itemLabel}, bieżąca pozycja {position} z {total}.",
+  "dragHandleChange": "{itemLabel}, nowa pozycja {position} z {total}. Naciśnij spację, aby potwierdzić.",
+  "dragHandleCommit": "{itemLabel}, bieżąca pozycja {position} z {total}.",
+  "dragHandleIdle": "{itemLabel}, naciśnij klawisz spacji i użyj klawiszy strzałek, aby zmienić kolejność zasobów. Bieżąca pozycja {position} z {total}."
 }

public/assets/handle/t9n/messages_pt-BR.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Arrastar manipulador"
+  "dragHandle": "Arrastar manipulador",
+  "dragHandleActive": "Reordenando {itemLabel}, posição atual {position} de {total}.",
+  "dragHandleChange": "{itemLabel}, nova posição {position} de {total}. Pressione espaço para confirmar.",
+  "dragHandleCommit": "{itemLabel}, posição atual {position} de {total}.",
+  "dragHandleIdle": "{itemLabel}, pressione espaço e use as teclas de seta para reordenar o conteúdo. Posição atual {position} de {total}."
 }

public/assets/handle/t9n/messages_pt-PT.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Arrastar alça"
+  "dragHandle": "Arrastar alça",
+  "dragHandleActive": "A reordenar {itemLabel}, posição atual {position} de {total}.",
+  "dragHandleChange": "{itemLabel}, nova posição {position} de {total}. Prima o espaço para continuar.",
+  "dragHandleCommit": "{itemLabel}, posição atual {position} de {total}.",
+  "dragHandleIdle": "{itemLabel}, prima o espaço e use as teclas de seta para reordenar o conteúdo. Posição atual {position} de {total}."
 }

public/assets/handle/t9n/messages_ro.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Tragere ghidaj"
+  "dragHandle": "Tragere ghidaj",
+  "dragHandleActive": "Se reordonează {itemLabel}, poziția actuală {position} din {total}.",
+  "dragHandleChange": "{itemLabel}, poziția nouă {position} din {total}. Apăsați pe tasta spațiu pentru a confirma.",
+  "dragHandleCommit": "{itemLabel}, poziția actuală {position} din {total}.",
+  "dragHandleIdle": "{itemLabel}, apăsați pe tasta spațiu și folosiți tastele cu săgeți pentru a reordona conținutul. Poziția actuală {position} din {total}."
 }

public/assets/handle/t9n/messages_ru.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Перетащить элемент управления"
+  "dragHandle": "Перетащить маркер",
+  "dragHandleActive": "Изменить порядок {itemLabel}, текущее положение {position} из {total}.",
+  "dragHandleChange": "{itemLabel}, новое положение {position} из {total}. Нажмите пробел для подтверждения.",
+  "dragHandleCommit": "{itemLabel}, текущее положение {position} из {total}.",
+  "dragHandleIdle": "{itemLabel}, нажмите пробел и используйте клавиши со стрелками, чтобы изменить порядок содержания. Текущее положение {position} из {total}."
 }

public/assets/handle/t9n/messages_sk.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Ťahací prvok"
+  "dragHandle": "Rukoväť na ťahanie",
+  "dragHandleActive": "Zmena poradia {itemLabel}, aktuálna pozícia {position} z {total}.",
+  "dragHandleChange": "{itemLabel}, nová pozícia {position} z {total}. Stlačte medzerník na potvrdenie.",
+  "dragHandleCommit": "{itemLabel}, aktuálna pozícia {position} z {total}.",
+  "dragHandleIdle": "{itemLabel}, stlačte medzerník a pomocou klávesov so šípkami zmeňte poradie obsahu. Aktuálna pozícia: {position} z {total}."
 }

public/assets/handle/t9n/messages_sl.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Povleci ročico"
+  "dragHandle": "Povleci ročico",
+  "dragHandleActive": "Preurejanje {itemLabel}, trenutni položaj {position} od {total}.",
+  "dragHandleChange": "{itemLabel}, nov položaj {position} od {total}. Za potrditev pritisnite presledek.",
+  "dragHandleCommit": "{itemLabel}, trenutni položaj {position} od {total}.",
+  "dragHandleIdle": "{itemLabel}, za preureditev vsebine pritisnite presledek in puščične tipke. Trenutni položaj {position} od {total}."
 }

public/assets/handle/t9n/messages_sr.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Regulator prevlačenja"
+  "dragHandle": "Regulator prevlačenja",
+  "dragHandleActive": "Promena redosleda {itemLabel}, trenutna pozicija {position} od {total}.",
+  "dragHandleChange": "{itemLabel}, nova pozicija {position} od {total}. Pritisnite razmak da potvrdite.",
+  "dragHandleCommit": "{itemLabel}, trenutna pozicija {position} od {total}.",
+  "dragHandleIdle": "{itemLabel}, pritisnite razmak i koristite tastere sa strelicama kako bi reorganizovali sadržaj. Trenutna pozicija {position} od {total}."
 }

public/assets/handle/t9n/messages_sv.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Dra handtag"
+  "dragHandle": "Dra handtag",
+  "dragHandleActive": "Ändrar ordning på {itemLabel}, aktuell position {position} för {total}.",
+  "dragHandleChange": "{itemLabel}, ny position {position} för {total}. Tryck på blanksteg för att bekräfta.",
+  "dragHandleCommit": "{itemLabel}, aktuell position {position} för {total}.",
+  "dragHandleIdle": "{itemLabel}, tryck på blanksteg och använd piltangenterna för att ändra ordning på innehållet. Den aktuella positionen {position} för {total}."
 }

public/assets/handle/t9n/messages_th.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "ลากที่จับ"
+  "dragHandle": "ลากที่จับ",
+  "dragHandleActive": "กำลังเรียงลำดับใหม่ {itemLabel}, ตำแหน่งปัจจุบัน {position} จาก {total}",
+  "dragHandleChange": "{itemLabel}, ตำแหน่งใหม่ {position} จาก {total} กด Space เพื่อยืนยัน",
+  "dragHandleCommit": "{itemLabel}, ตำแหน่งปัจจุบัน {position} จาก {total}",
+  "dragHandleIdle": "{itemLabel}, กด Space และใช้ปุ่มลูกศรเพื่อเรียงลำดับเนื้อหาใหม่ ตำแหน่งที่ตั้งปัจจุบัน {position} ของ {total}"
 }

public/assets/handle/t9n/messages_tr.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Kolu sürükle"
+  "dragHandle": "Kolu sürükle",
+  "dragHandleActive": "{itemLabel} yeniden sıralanıyor, geçerli konum {position} / {total}.",
+  "dragHandleChange": "{itemLabel}, yeni konum {position} / {total}. Onaylamak için boşluk tuşuna basın.",
+  "dragHandleCommit": "{itemLabel}, geçerli konum {position} / {total}.",
+  "dragHandleIdle": "{itemLabel}, içeriği yeniden sıralamak için boşluk tuşuna basın ve ok tuşlarını kullanın. Geçerli konum {position} / {total}."
 }

public/assets/handle/t9n/messages_uk.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Перетягнути маркер"
+  "dragHandle": "Перетягнути маркер",
+  "dragHandleActive": "Перевпорядкування {itemLabel}, поточне положення {position} з {total}.",
+  "dragHandleChange": "{itemLabel}, нове положення {position} з {total}. Натисніть пробіл для підтвердження.",
+  "dragHandleCommit": "{itemLabel}, поточне положення {position} з {total}.",
+  "dragHandleIdle": "{itemLabel}, натисніть пробіл і використовуйте клавіші зі стрілками, щоб змінити порядок змісту. Поточне положення {position} з {total}."
 }

public/assets/handle/t9n/messages_vi.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "Kéo thông tin"
+  "dragHandle": "Kéo thông tin",
+  "dragHandleActive": "Sắp xếp lại {itemLabel}, vị trí hiện tại {position} trên {total}.",
+  "dragHandleChange": "{itemLabel}, vị trí mới {position} trên {total}. Nhấn dấu cách để xác nhận.",
+  "dragHandleCommit": "{itemLabel}, vị trí hiện tại {position} trên {total}.",
+  "dragHandleIdle": "{itemLabel}, nhấn dấu cách và sử dụng các phím mũi tên để sắp xếp lại nội dung. Vị trí hiện tại {position} trên {total}."
 }

public/assets/handle/t9n/messages_zh-CN.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "拖动控点"
+  "dragHandle": "拖动控点",
+  "dragHandleActive": "重新排序 {itemLabel}，当前位置 {position}，共 {total} 个。",
+  "dragHandleChange": "{itemLabel}，新位置 {position}，共 {total} 个。 按空格键确认。",
+  "dragHandleCommit": "{itemLabel}，当前位置 {position}，共 {total} 个。",
+  "dragHandleIdle": "{itemLabel}，按空格键并使用方向键重新排序内容。 当前位置 {position}/{total}。"
 }

public/assets/handle/t9n/messages_zh-HK.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "拖曳控桿"
+  "dragHandle": "拖曳控桿",
+  "dragHandleActive": "正在重新排序 {itemLabel}，目前位置 {position}/{total}。",
+  "dragHandleChange": "{itemLabel}，新位置 {position}/{total}。 按空格鍵確認。",
+  "dragHandleCommit": "{itemLabel}，目前位置 {position}/{total}。",
+  "dragHandleIdle": "{itemLabel}，按空格鍵，然後使用方向鍵重新排序內容。 目前位置 {position}/{total}。"
 }

public/assets/handle/t9n/messages_zh-TW.json

@@ -1,3 +1,7 @@
 {
-  "dragHandle": "拖曳控桿"
+  "dragHandle": "拖曳控桿",
+  "dragHandleActive": "正在重新排序 {itemLabel}，目前位置 {position}/{total}。",
+  "dragHandleChange": "{itemLabel}，新位置 {position}/{total}。 按空格鍵確認。",
+  "dragHandleCommit": "{itemLabel}，目前位置 {position}/{total}。",
+  "dragHandleIdle": "{itemLabel}，按空格鍵，然後使用方向鍵重新排序內容。 目前位置 {position}/{total}。"
 }

public/assets/icon/addLayerService16.json

@@ -0,0 +1 @@
+"M10 15v1H2v-1h5v-1.678c-.895.268-1.881.478-3.207.478-2.37 0-3.793-.71-3.793-.71L2.133.487S3.556 1 5.294 1C7.982 1 8.015.014 10.706.014c1.738 0 3.161.674 3.161.674l1.114 6.579A1.979 1.979 0 0 0 14 7h-.079l-.945-5.587c-.496-.17-1.337-.399-2.27-.399-1.17 0-1.725.201-2.367.434C7.623 1.707 6.813 2 5.294 2c-.908 0-1.736-.126-2.359-.26l-1.81 10.697c.573.169 1.49.363 2.668.363 1.336 0 2.292-.235 3.207-.525V13c0 .738.405 1.376 1 1.723V15h2zm3-3V9h-1v3H9v1h3v3h1v-3h3v-1h-3z"

public/assets/icon/addLayerService24.json

@@ -0,0 +1 @@
+"M13 23h4v1H4v-1h8v-3.912c-1.558.37-3.181.712-5.576.712C3.034 19.8 1 18.783 1 18.783L4.05 1.078s2.035.722 4.52.722c3.849 0 3.893-1.6 7.74-1.6 2.487 0 4.52.878 4.52.878L23.514 17H22.5L19.941 1.815c-.703-.235-2.08-.615-3.63-.615-1.727 0-2.544.336-3.49.725-.998.41-2.129.875-4.25.875-1.496 0-2.833-.242-3.723-.457L2.124 18.15c.807.27 2.301.65 4.3.65 2.502 0 4.096-.383 5.783-.79.416-.1.837-.2 1.273-.296a1.98 1.98 0 0 0-.465 1.132L13 18.85V23zm7-4v-4h-1v4h-4v.999h4V24h1v-4.001h4V19h-4z"

public/assets/icon/addLayerService32.json

@@ -0,0 +1 @@
+"M16 30h8v1H3v-1h12v-3.184c-1.714.529-3.589.984-6.462.984C4.093 27.8 1 26 1 26L5 1.9c.7.233 2.519.968 5.34.968 4.807 0 5.59-1.657 10.734-1.657 3.26 0 5.926.689 5.926.689L30.668 24h-1.013L26.124 2.729a26.165 26.165 0 0 0-5.05-.518c-2.474 0-3.842.393-5.29.81-1.445.417-2.94.847-5.445.847a15.6 15.6 0 0 1-4.544-.65L2.107 25.433a15.984 15.984 0 0 0 6.43 1.366c3.281 0 5.163-.608 7.156-1.252 1.209-.39 2.45-.785 3.994-1.046a1.99 1.99 0 0 0-.651 1.141c-1.113.24-2.077.547-3.036.857V30zm11-4v-5h-1v5h-5v.999h5V32h1v-5.001h5V26h-5z"

public/assets/icon/applySelectionToExistingView16.json

@@ -0,0 +1 @@
+"M16 2v1h-2v2h-1V3h-2V2h2V0h1v2h2zM7 7.5c0 .237-.06.459-.159.658a1.502 1.502 0 0 0-.682.683A1.48 1.48 0 0 1 5.5 9C4.673 9 4 8.327 4 7.5c0-.215.047-.418.129-.603L2.542 5.575C2.272 5.837 1.905 6 1.5 6 .673 6 0 5.327 0 4.5S.673 3 1.5 3c.406 0 .774.164 1.044.427L4.13 2.105A1.488 1.488 0 0 1 4 1.5C4 .673 4.673 0 5.5 0S7 .673 7 1.5 6.327 3 5.5 3c-.34 0-.65-.118-.901-.309l-1.573 1.31h3.066A1.498 1.498 0 0 1 7.5 3C8.327 3 9 3.673 9 4.5S8.327 6 7.5 6a1.5 1.5 0 0 1-1.408-1H3.026l1.571 1.31C4.849 6.118 5.16 6 5.5 6 6.327 6 7 6.673 7 7.5zm0-2.75c0 .139.112.25.25.25h.5A.25.25 0 0 0 8 4.75v-.486A.263.263 0 0 0 7.737 4H7.25a.25.25 0 0 0-.25.25v.5zm-2-3c0 .139.112.25.25.25h.5A.25.25 0 0 0 6 1.75v-.486A.263.263 0 0 0 5.737 1H5.25a.25.25 0 0 0-.25.25v.5zM2 4.264A.263.263 0 0 0 1.737 4H1.25a.25.25 0 0 0-.25.25v.5c0 .139.112.25.25.25h.5A.25.25 0 0 0 2 4.75v-.486zm4 3A.263.263 0 0 0 5.737 7H5.25a.25.25 0 0 0-.25.25v.5c0 .139.112.25.25.25h.5A.25.25 0 0 0 6 7.75v-.486zM16 8.5v1a.5.5 0 0 1-.5.5h-.26l-.67 4.014c.241.035.43.235.43.486v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-.292l-3.021-.604A.493.493 0 0 1 9.5 15h-1a.5.5 0 0 1-.5-.5v-1c0-.221.146-.403.346-.469L7.838 11H7.5a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h.934L10 7.434V6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v.553l2.164 1.082A.495.495 0 0 1 14.5 8h1a.5.5 0 0 1 .5.5zM9.434 13L11 11.434v-.271l-2.031-.509a.49.49 0 0 1-.315.315L9.162 13h.272zM9 9.566v.272l2.031.507a.49.49 0 0 1 .314-.314L10.838 8h-.272L9 9.566zm2.655-1.597L12.162 10h.338c.076 0 .147.02.212.05L14 9.189v-.24l-2.164-1.083a.494.494 0 0 1-.181.104zM10 13.792l3.021.604a.493.493 0 0 1 .114-.232L12.053 12h-.496L10 13.563v.229zm3.808-.071l.622-3.735a.502.502 0 0 1-.137-.034L13 10.814v.686c0 .13-.053.247-.135.336l.943 1.885zM4 12h-.5c-.827 0-1.5-.673-1.5-1.5V10H1v.5C1 11.878 2.121 13 3.5 13H4v1.176L6.058 12.5 4 10.825V12z"

public/assets/icon/applySelectionToExistingView24.json

@@ -0,0 +1 @@
+"M9.5 11.1c-.759 0-1.428.36-1.868.911l-2.27-2.016c.231-.287.404-.622.484-.995h4.308a2.402 2.402 0 0 0 2.346 1.9c1.324 0 2.4-1.076 2.4-2.4s-1.076-2.4-2.4-2.4A2.402 2.402 0 0 0 10.154 8H5.846a2.38 2.38 0 0 0-.484-.995l2.27-2.016c.44.55 1.11.911 1.868.911 1.324 0 2.4-1.076 2.4-2.4s-1.076-2.4-2.4-2.4-2.4 1.076-2.4 2.4c0 .29.06.565.154.822L4.81 6.493A2.383 2.383 0 0 0 3.5 6.1c-1.324 0-2.4 1.076-2.4 2.4s1.076 2.4 2.4 2.4c.483 0 .932-.146 1.31-.393l2.444 2.17a2.375 2.375 0 0 0-.154.823c0 1.324 1.076 2.4 2.4 2.4s2.4-1.076 2.4-2.4-1.076-2.4-2.4-2.4zM11 8a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V8zM8 3a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V3zm-5 7a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3zm8 4a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1zm-2.646 3.66l2.847 2.846-2.847 2.848-.708-.708L9.293 21H7c-1.654 0-3-1.346-3-3v-2h1v2c0 1.103.897 2 2 2h2.281l-1.635-1.634.708-.707zM24 6v1h-3v3h-1V7h-3V6h3V3h1v3h3zm-1.5 8c-.362 0-.69.134-.949.348l-2.581-1.55A1.499 1.499 0 1 0 16 12.5c0 .23.057.447.15.643l-2.007 2.007A1.483 1.483 0 0 0 13.5 15a1.497 1.497 0 0 0-.214 2.978l.448 2.24a1.495 1.495 0 1 0 2.088 1.976l4.208.601A1.502 1.502 0 0 0 21.5 24c1.543 0 2.092-2.085.694-2.822l.601-4.208A1.502 1.502 0 0 0 24 15.5c0-.827-.673-1.5-1.5-1.5zm-3.906-.48v.011h-.01l.01-.011zm-.146.132l2.582 1.55c-.02.096-.03.196-.03.298 0 .062.011.122.018.182l-1.48.74a1.492 1.492 0 0 0-.824-.4l-.448-2.24c.065-.038.125-.082.182-.13zM19 17v1h-1v-1h1zm-2-5h1v1h-1v-1zm-.143 1.85c.134.064.277.106.429.128l.448 2.24a1.502 1.502 0 0 0-.517.516l-2.239-.448a1.482 1.482 0 0 0-.128-.429l2.007-2.007zM13 17v-1h1v1h-1zm2 5h-1v-1h1v1zm.148-1.847a1.48 1.48 0 0 0-.434-.131l-.447-2.24c.212-.127.388-.304.515-.516l2.24.448c.023.158.07.307.138.446l-2.012 1.993zm5.03 1.653l-4.208-.601a1.477 1.477 0 0 0-.12-.348l2.007-2.007c.196.093.412.15.643.15.11 0 .217-.014.32-.036l1.533 2.582a1.48 1.48 0 0 0-.175.26zm-.526-3.357c.214-.26.348-.587.348-.949 0-.062-.011-.122-.018-.182l1.48-.74c.101.098.218.178.344.244l-.6 4.208H21.2l-1.549-2.581zM22 23h-1v-1h1v1zm1-7h-1v-1h1v1z"

public/assets/icon/applySelectionToExistingView32.json

@@ -0,0 +1 @@
+"M31 7h-5v5h-1V7h-5V6h5V1h1v5h5v1zM8.34 21.646l-.707.708L10.279 25H7c-1.654 0-3-1.346-3-3v-2H3v2c0 2.206 1.794 4 4 4h3.28l-2.647 2.646.707.708 3.853-3.854-3.853-3.854zM16.9 10.5c0 1.324-1.076 2.4-2.4 2.4a2.402 2.402 0 0 1-2.346-1.9H5.846a2.38 2.38 0 0 1-.45.956l3.322 2.95A2.385 2.385 0 0 1 10.5 14.1c1.324 0 2.4 1.076 2.4 2.4s-1.076 2.4-2.4 2.4-2.4-1.076-2.4-2.4c0-.342.074-.665.203-.96l-3.448-3.062A2.385 2.385 0 0 1 3.5 12.9c-1.324 0-2.4-1.076-2.4-2.4s1.076-2.4 2.4-2.4c.503 0 .969.157 1.355.422L8.303 5.46A2.382 2.382 0 0 1 8.1 4.5c0-1.324 1.076-2.4 2.4-2.4s2.4 1.076 2.4 2.4-1.076 2.4-2.4 2.4c-.71 0-1.342-.316-1.781-.807L5.395 9.044c.215.279.375.6.45.956h6.31A2.402 2.402 0 0 1 14.5 8.1c1.324 0 2.4 1.076 2.4 2.4zM9 5a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-1a1 1 0 0 0-1 1v1zm0 11v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1h-1a1 1 0 0 0-1 1zm-5-4a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h1zm12-2a1 1 0 0 0-1-1h-1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1zm12.07 10.993l-1.164 5.234A1.995 1.995 0 0 1 28 28c0 1.103-.897 2-2 2a1.997 1.997 0 0 1-1.974-1.743l-4.17-.521A2 2 0 0 1 18 29c-1.103 0-2-.897-2-2a2 2 0 0 1 1.186-1.823l-.369-2.196A1.996 1.996 0 0 1 15 21c0-1.103.897-2 2-2 .369 0 .71.107 1.008.282l2.278-2.268A1.977 1.977 0 0 1 20 16c0-1.103.897-2 2-2s2 .897 2 2a2 2 0 0 1-.048.426l2.546 1.268c.367-.422.9-.694 1.502-.694 1.103 0 2 .897 2 2 0 1.079-.86 1.955-1.93 1.993zm-2.14 5.014l1.164-5.234a2.004 2.004 0 0 1-.495-.35l-1.69 1.014c.054.18.091.366.091.563 0 .6-.271 1.133-.691 1.5l1.273 2.546c.113-.025.23-.035.348-.039zm-1.234.49l-1.263-2.547c-.14.03-.284.05-.433.05-.37 0-.712-.108-1.01-.284l-2.274 2.275c.134.226.222.48.258.752l4.17.521c.12-.3.312-.56.552-.768zm-5.683-1.211l2.276-2.267a1.976 1.976 0 0 1-.271-.842l-2.194-.365a2.009 2.009 0 0 1-1.018 1.015l.368 2.19c.305.027.589.12.84.269zm1.982-7.567l-2.28 2.27c.148.25.24.532.267.836l2.193.365a2.01 2.01 0 0 1 1.013-1.014l-.366-2.194c-.3-.027-.58-.118-.827-.263zM24 21.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1zm3-2a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1zm-3.506-2.185a2 2 0 0 1-.685.51l.367 2.193a1.99 1.99 0 0 1 1.225.558l1.69-1.013A1.971 1.971 0 0 1 26 19c0-.142.016-.28.045-.415l-2.55-1.27zM21 16.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1zM16.5 22h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5zm2.5 4.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1zm8 1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1z"

public/assets/icon/autoLayout16.json

@@ -0,0 +1 @@
+"M6.428 0H.572A.572.572 0 0 0 0 .572v5.857A.571.571 0 0 0 .572 7h5.856A.571.571 0 0 0 7 6.43V.571A.572.572 0 0 0 6.428 0zM6 6H1V1h5zM12.5.1a3.4 3.4 0 1 0 3.396 3.4A3.402 3.402 0 0 0 12.5.1zm0 5.829A2.429 2.429 0 1 1 14.923 3.5 2.433 2.433 0 0 1 12.5 5.929zM3.5 9.1a3.4 3.4 0 1 0 3.4 3.4 3.4 3.4 0 0 0-3.4-3.4zm0 5.829A2.429 2.429 0 1 1 5.929 12.5 2.431 2.431 0 0 1 3.5 14.929zm12.257-3.274l-3.412-3.412a.488.488 0 0 0-.69 0l-3.412 3.412a.488.488 0 0 0 0 .69l3.412 3.412a.488.488 0 0 0 .69 0l3.412-3.412a.488.488 0 0 0 0-.69zM12 14.72L9.279 12 12 9.279 14.721 12z"

public/assets/icon/autoLayout24.json

@@ -0,0 +1 @@
+"M10.372 2H2.628A.628.628 0 0 0 2 2.628v7.744a.628.628 0 0 0 .628.628h7.744a.628.628 0 0 0 .628-.628V2.628A.628.628 0 0 0 10.372 2zM10 10H3V3h7zm12.65 7.125l-4.792-4.793a.5.5 0 0 0-.707 0l-4.793 4.793a.5.5 0 0 0 0 .707l4.793 4.793a.5.5 0 0 0 .707 0l4.793-4.793a.5.5 0 0 0 0-.707zm-5.146 4.44l-4.086-4.086 4.086-4.086 4.086 4.086zM6.5 13a4.5 4.5 0 1 0 4.5 4.5A4.492 4.492 0 0 0 6.5 13zm0 8a3.5 3.5 0 1 1 3.491-3.5A3.5 3.5 0 0 1 6.5 21zm11-19A4.5 4.5 0 1 0 22 6.5 4.492 4.492 0 0 0 17.5 2zm0 8a3.5 3.5 0 1 1 3.491-3.5A3.5 3.5 0 0 1 17.5 10z"