@vcmap/ui 5.0.0-rc.23 → 5.0.0-rc.24

package/src/featureInfo/abstractFeatureInfoView.js

@@ -49,11 +49,18 @@ export function applyValueMapping(attributes, mapping) {
     })
     .forEach((mappingKey) => {
       if (Object.hasOwn(attributes, mappingKey)) {
-        attributes[mappingKey] = getMappedValue(mapping[mappingKey], attributes[mappingKey]);
+        attributes[mappingKey] = getMappedValue(
+          mapping[mappingKey],
+          attributes[mappingKey],
+        );
       } else {
         const mappingKeys = mappingKey.split('.');
         mappingKeys.reduce((obj, key, index) => {
-          if (obj && Object.hasOwn(obj, key) && index === mappingKeys.length - 1) {
+          if (
+            obj &&
+            Object.hasOwn(obj, key) &&
+            index === mappingKeys.length - 1
+          ) {
             obj[key] = getMappedValue(mapping[mappingKey], obj[key]);
           }
           return obj?.[key];
@@ -109,7 +116,11 @@ export function applyKeyMapping(attributes, mapping) {
       } else {
         const mappingKeys = mappingKey.split('.');
         mappingKeys.reduce((obj, key, index) => {
-          if (obj && Object.hasOwn(obj, key) && index === mappingKeys.length - 1) {
+          if (
+            obj &&
+            Object.hasOwn(obj, key) &&
+            index === mappingKeys.length - 1
+          ) {
             attributes[mapping[mappingKey]] = obj[key];
             delete obj[key];
           }
@@ -152,13 +163,12 @@ export function applyAttributeFilter(attributes, keys, result = {}) {
     }
   });
 
-  Object.entries(nestedKeys)
-    .forEach(([parent, pKs]) => {
-      if (typeof attributes[parent] === 'object') {
-        result[parent] = {};
-        applyAttributeFilter(attributes[parent], pKs, result[parent]);
-      }
-    });
+  Object.entries(nestedKeys).forEach(([parent, pKs]) => {
+    if (typeof attributes[parent] === 'object') {
+      result[parent] = {};
+      applyAttributeFilter(attributes[parent], pKs, result[parent]);
+    }
+  });
   return result;
 }
 
@@ -173,7 +183,9 @@ class AbstractFeatureInfoView extends VcsObject {
   /**
    * @type {string}
    */
-  static get className() { return 'AbstractFeatureInfoView'; }
+  static get className() {
+    return 'AbstractFeatureInfoView';
+  }
 
   /** @returns {FeatureInfoViewOptions} */
   static getDefaultOptions() {
@@ -221,14 +233,18 @@ class AbstractFeatureInfoView extends VcsObject {
    * @type {WindowComponentOptions|Object}
    * @readonly
    */
-  get window() { return this._window; }
+  get window() {
+    return this._window;
+  }
 
   /**
    * component provided by a FeatureInfoView class, passed to featureInfo via `getWindowComponentOptions()`
    * @type {import("vue").Component|undefined}
    * @readonly
    */
-  get component() { return this._component; }
+  get component() {
+    return this._component;
+  }
 
   /**
    * This method returns all relevant attributes for this view.

package/src/featureInfo/addressBalloonFeatureInfoView.js

@@ -1,4 +1,6 @@
-import BalloonFeatureInfoView, { extractNestedKey } from './balloonFeatureInfoView.js';
+import BalloonFeatureInfoView, {
+  extractNestedKey,
+} from './balloonFeatureInfoView.js';
 import AddressBalloonComponent from './AddressBalloonComponent.vue';
 
 /**
@@ -20,7 +22,9 @@ class AddressBalloonFeatureInfoView extends BalloonFeatureInfoView {
   /**
    * @type {string}
    */
-  static get className() { return 'AddressBalloonFeatureInfoView'; }
+  static get className() {
+    return 'AddressBalloonFeatureInfoView';
+  }
 
   /** @returns {AddressBalloonFeatureInfoViewOptions} */
   static getDefaultOptions() {
@@ -44,15 +48,20 @@ class AddressBalloonFeatureInfoView extends BalloonFeatureInfoView {
     /**
      * @type {string|null}
      */
-    this.addressName = options.addressName !== undefined ? options.addressName : defaultOptions.addressName;
+    this.addressName =
+      options.addressName !== undefined
+        ? options.addressName
+        : defaultOptions.addressName;
     /**
      * @type {string|null}
      */
-    this.street = options.street !== undefined ? options.street : defaultOptions.street;
+    this.street =
+      options.street !== undefined ? options.street : defaultOptions.street;
     /**
      * @type {string|null}
      */
-    this.number = options.number !== undefined ? options.number : defaultOptions.number;
+    this.number =
+      options.number !== undefined ? options.number : defaultOptions.number;
     /**
      * @type {string|null}
      */
@@ -64,7 +73,8 @@ class AddressBalloonFeatureInfoView extends BalloonFeatureInfoView {
     /**
      * @type {string|null}
      */
-    this.country = options.country !== undefined ? options.country : defaultOptions.country;
+    this.country =
+      options.country !== undefined ? options.country : defaultOptions.country;
   }
 
   /**
@@ -83,7 +93,9 @@ class AddressBalloonFeatureInfoView extends BalloonFeatureInfoView {
         }
       }
     };
-    Object.keys(AddressBalloonFeatureInfoView.getDefaultOptions()).forEach(key => applyAddressKeys(key));
+    Object.keys(AddressBalloonFeatureInfoView.getDefaultOptions()).forEach(
+      (key) => applyAddressKeys(key),
+    );
     return obj;
   }
 

package/src/featureInfo/balloonFeatureInfoView.js

@@ -19,7 +19,7 @@ export function extractNestedKey(key, attrs, defaultValue = null) {
   check(attrs, Object);
 
   const keys = key.split('.');
-  const derivedValue = keys.reduce((obj, prop) => (obj[prop] || {}), attrs);
+  const derivedValue = keys.reduce((obj, prop) => obj[prop] || {}, attrs);
   return typeof derivedValue === 'string' ? derivedValue : defaultValue;
 }
 
@@ -74,7 +74,9 @@ class BalloonFeatureInfoView extends AbstractFeatureInfoView {
   /**
    * @type {string}
    */
-  static get className() { return 'BalloonFeatureInfoView'; }
+  static get className() {
+    return 'BalloonFeatureInfoView';
+  }
 
   /**
    * @param {BalloonFeatureInfoViewOptions} options
@@ -103,13 +105,24 @@ class BalloonFeatureInfoView extends AbstractFeatureInfoView {
     const properties = super.getProperties(featureInfo, layer);
     return {
       ...properties,
-      position: featureInfo.position ?? getPositionFromFeature(featureInfo.feature),
-      balloonTitle: this.balloonTitle != null ?
-        extractNestedKey(this.balloonTitle, properties.attributes, this.balloonTitle) :
-        properties.layerProperties.title,
-      balloonSubtitle: this.balloonSubtitle != null ?
-        extractNestedKey(this.balloonSubtitle, properties.attributes, this.balloonSubtitle) :
-        properties.featureId,
+      position:
+        featureInfo.position ?? getPositionFromFeature(featureInfo.feature),
+      balloonTitle:
+        this.balloonTitle != null
+          ? extractNestedKey(
+              this.balloonTitle,
+              properties.attributes,
+              this.balloonTitle,
+            )
+          : properties.layerProperties.title,
+      balloonSubtitle:
+        this.balloonSubtitle != null
+          ? extractNestedKey(
+              this.balloonSubtitle,
+              properties.attributes,
+              this.balloonSubtitle,
+            )
+          : properties.featureId,
     };
   }
 

package/src/featureInfo/balloonHelper.js

@@ -1,5 +1,15 @@
-import { Cartesian2, Cartographic, SceneTransforms } from '@vcmap-cesium/engine';
-import { CesiumMap, ObliqueMap, OpenlayersMap, Projection, transformToImage } from '@vcmap/core';
+import {
+  Cartesian2,
+  Cartographic,
+  SceneTransforms,
+} from '@vcmap-cesium/engine';
+import {
+  CesiumMap,
+  ObliqueMap,
+  OpenlayersMap,
+  Projection,
+  transformToImage,
+} from '@vcmap/core';
 import { unByKey } from 'ol/Observable.js';
 import {
   getWindowPositionOptionsFromMapEvent,
@@ -44,15 +54,14 @@ export async function getBalloonPosition(app, position) {
   const map = app.maps.activeMap;
   if (map instanceof CesiumMap) {
     const wgs84Position = Projection.mercatorToWgs84(position);
-    const cartesian = Cartographic.toCartesian(Cartographic.fromDegrees(...wgs84Position));
+    const cartesian = Cartographic.toCartesian(
+      Cartographic.fromDegrees(...wgs84Position),
+    );
     return getBalloonPositionCesium(map.getScene(), cartesian);
   } else if (map instanceof OpenlayersMap) {
     return getBalloonPositionOL(map.olMap, position);
   } else if (map instanceof ObliqueMap) {
-    const { coords } = await transformToImage(
-      map.currentImage,
-      position,
-    );
+    const { coords } = await transformToImage(map.currentImage, position);
     return getBalloonPositionOL(map.olMap, coords);
   }
   return undefined;
@@ -72,7 +81,10 @@ export function setBalloonPosition(windowManager, id, windowPosition, target) {
   windowManager.setWindowPositionOptions(
     id,
     getWindowPositionOptionsFromMapEvent(
-      new Cartesian2(windowPosition.x - balloonOffset.x, windowPosition.y - balloonOffset.y),
+      new Cartesian2(
+        windowPosition.x - balloonOffset.x,
+        windowPosition.y - balloonOffset.y,
+      ),
       target,
       WindowAlignment.BOTTOM_LEFT,
     ),
@@ -85,19 +97,25 @@ export function setBalloonPosition(windowManager, id, windowPosition, target) {
  * @param {import("ol/coordinate").Coordinate} clickedPosition - position in mercator
  * @returns {Promise<(() => void)>}
  */
-export async function setupBalloonPositionListener(vcsApp, windowId, clickedPosition) {
+export async function setupBalloonPositionListener(
+  vcsApp,
+  windowId,
+  clickedPosition,
+) {
   const listeners = [];
 
   const destroy = () => {
-    listeners.forEach(cb => cb());
+    listeners.forEach((cb) => cb());
   };
 
   const setup = async (app, id, position) => {
     destroy();
 
-    listeners.push(app.maps.mapActivated.addEventListener(
-      setup.bind(null, app, id, position),
-    ));
+    listeners.push(
+      app.maps.mapActivated.addEventListener(
+        setup.bind(null, app, id, position),
+      ),
+    );
 
     const map = app.maps.activeMap;
     if (map instanceof CesiumMap) {
@@ -106,43 +124,44 @@ export async function setupBalloonPositionListener(vcsApp, windowId, clickedPosi
         position[2] = position3D[2];
       }
       const wgs84Position = Projection.mercatorToWgs84(position);
-      const cartesian = Cartographic.toCartesian(Cartographic.fromDegrees(...wgs84Position));
-      listeners.push(map.getScene().postRender.addEventListener((scene) => {
+      const cartesian = Cartographic.toCartesian(
+        Cartographic.fromDegrees(...wgs84Position),
+      );
+      listeners.push(
+        map.getScene().postRender.addEventListener((scene) => {
+          setBalloonPosition(
+            app.windowManager,
+            windowId,
+            getBalloonPositionCesium(scene, cartesian),
+            app.maps.target,
+          );
+        }),
+      );
+    } else if (map instanceof OpenlayersMap) {
+      const handler = () =>
         setBalloonPosition(
           app.windowManager,
           windowId,
-          getBalloonPositionCesium(scene, cartesian),
+          getBalloonPositionOL(map.olMap, position),
           app.maps.target,
         );
-      }));
-    } else if (map instanceof OpenlayersMap) {
-      const handler = () => setBalloonPosition(
-        app.windowManager,
-        windowId,
-        getBalloonPositionOL(map.olMap, position),
-        app.maps.target,
-      );
-      const key = map.olMap.on(
-        'postrender',
-        handler,
-      );
+      const key = map.olMap.on('postrender', handler);
       listeners.push(() => unByKey(key));
     } else if (map instanceof ObliqueMap) {
-      const { coords } = await transformToImage(
-        map.currentImage,
-        position,
-      );
-      listeners.push(map.imageChanged.addEventListener(setup.bind(null, app, windowId, position)));
-      const handler = () => setBalloonPosition(
-        app.windowManager,
-        windowId,
-        getBalloonPositionOL(map.olMap, coords),
-        app.maps.target,
-      );
-      const key = map.olMap.on(
-        'postrender',
-        handler,
+      const { coords } = await transformToImage(map.currentImage, position);
+      listeners.push(
+        map.imageChanged.addEventListener(
+          setup.bind(null, app, windowId, position),
+        ),
       );
+      const handler = () =>
+        setBalloonPosition(
+          app.windowManager,
+          windowId,
+          getBalloonPositionOL(map.olMap, coords),
+          app.maps.target,
+        );
+      const key = map.olMap.on('postrender', handler);
       listeners.push(() => unByKey(key));
     }
   };

package/src/featureInfo/featureInfo.js

@@ -69,7 +69,9 @@ export function getHighlightStyle(feature, layer, defaultFillColor) {
     if (typeof style === 'function') {
       style = style(feature, 1);
     }
-    style = style?.clone?.() ?? new VectorStyleItem(getDefaultVectorStyleItemOptions()).style;
+    style =
+      style?.clone?.() ??
+      new VectorStyleItem(getDefaultVectorStyleItemOptions()).style;
     if (style.getText()) {
       if (style.getText().getFill()) {
         style.getText().getFill().setColor(fillColor.toCssColorString());
@@ -102,10 +104,9 @@ export function createFeatureInfoSession(app) {
   /** @type {function():void} */
   let stop;
   const interaction = new FeatureInfoInteraction(app.featureInfo);
-  const listener = eventHandler.addExclusiveInteraction(
-    interaction,
-    () => { stop?.(); },
-  );
+  const listener = eventHandler.addExclusiveInteraction(interaction, () => {
+    stop?.();
+  });
   const currentFeatureInteractionEvent = eventHandler.featureInteraction.active;
   eventHandler.featureInteraction.setActive(EventType.CLICK);
 
@@ -213,14 +214,17 @@ class FeatureInfo {
       new Collection(),
       () => this._app.dynamicModuleId,
       null,
-      config => getObjectFromClassRegistry(this._featureInfoClassRegistry, config),
+      (config) =>
+        getObjectFromClassRegistry(this._featureInfoClassRegistry, config),
       AbstractFeatureInfoView,
     );
     /**
      * @type {OverrideClassRegistry<AbstractFeatureInfoView>}
      * @private
      */
-    this._featureInfoClassRegistry = new OverrideClassRegistry(featureInfoClassRegistry);
+    this._featureInfoClassRegistry = new OverrideClassRegistry(
+      featureInfoClassRegistry,
+    );
     /**
      * @type {function():void|null}
      * @private
@@ -252,11 +256,10 @@ class FeatureInfo {
      */
     this._listeners = [
       this._app.maps.mapActivated.addEventListener((map) => {
-        if (
-          this._windowId &&
-          this._app.windowManager.has(this._windowId)
-        ) {
-          const { layerName } = this._app.windowManager.get(this._windowId).props;
+        if (this._windowId && this._app.windowManager.has(this._windowId)) {
+          const { layerName } = this._app.windowManager.get(
+            this._windowId,
+          ).props;
           const layer = this._app.layers.getByKey(layerName);
           if (layer && !layer.isSupported(map)) {
             this._app.windowManager.remove(this._windowId);
@@ -267,7 +270,8 @@ class FeatureInfo {
         if (
           this._windowId &&
           this._app.windowManager.has(this._windowId) &&
-          this._app.windowManager.get(this._windowId).props.layerName === layer.name
+          this._app.windowManager.get(this._windowId).props.layerName ===
+            layer.name
         ) {
           this._app.windowManager.remove(this._windowId);
         }
@@ -301,31 +305,41 @@ class FeatureInfo {
    * @type {import("@vcmap/core").OverrideCollection<AbstractFeatureInfoView>}
    * @readonly
    */
-  get collection() { return this._collection; }
+  get collection() {
+    return this._collection;
+  }
 
   /**
    * @type {OverrideClassRegistry<AbstractFeatureInfoView>}
    * @readonly
    */
-  get classRegistry() { return this._featureInfoClassRegistry; }
+  get classRegistry() {
+    return this._featureInfoClassRegistry;
+  }
 
   /**
    * @type {VcsEvent<null|FeatureType>}
    * @readonly
    */
-  get featureChanged() { return this._featureChanged; }
+  get featureChanged() {
+    return this._featureChanged;
+  }
 
   /**
    * @type {null|FeatureType}
    * @readonly
    */
-  get selectedFeature() { return this._selectedFeature; }
+  get selectedFeature() {
+    return this._selectedFeature;
+  }
 
   /**
    * @type {null|string}
    * @readonly
    */
-  get selectedFeatureId() { return this._selectedFeatureId; }
+  get selectedFeatureId() {
+    return this._selectedFeatureId;
+  }
 
   /**
    * The window id of the current features FeatureInfoView window
@@ -360,14 +374,18 @@ class FeatureInfo {
     const layer = this._app.layers.getByKey(feature[vcsLayerName]);
     const name = layer?.properties?.featureInfo;
     if (!name) {
-      getLogger().debug(`No view has been configured for layer '${layer?.name}'.`);
+      getLogger().debug(
+        `No view has been configured for layer '${layer?.name}'.`,
+      );
       return null;
     }
     if (!this._collection.hasKey(name)) {
       getLogger().warning(`No view with name '${name}' has been registered.`);
       return null;
     }
-    return /** @type {AbstractFeatureInfoView} */ this._collection.getByKey(name);
+    return /** @type {AbstractFeatureInfoView} */ this._collection.getByKey(
+      name,
+    );
   }
 
   /**
@@ -384,12 +402,18 @@ class FeatureInfo {
    * @returns {Promise<void>}
    */
   async selectFeature(feature, position, windowPosition, featureInfoView) {
-    check(feature, [Feature, Entity, Cesium3DTileFeature, Cesium3DTilePointFeature]);
+    check(feature, [
+      Feature,
+      Entity,
+      Cesium3DTileFeature,
+      Cesium3DTilePointFeature,
+    ]);
     checkMaybe(position, [Number]);
     checkMaybe(windowPosition, [Number]);
     checkMaybe(featureInfoView, AbstractFeatureInfoView);
 
-    const usedFeatureInfoView = feature[featureInfoViewSymbol] ??
+    const usedFeatureInfoView =
+      feature[featureInfoViewSymbol] ??
       featureInfoView ??
       this._getFeatureInfoViewForFeature(feature);
     const layer = this._app.layers.getByKey(feature[vcsLayerName]);
@@ -404,20 +428,24 @@ class FeatureInfo {
           [featureId]: getHighlightStyle(
             feature,
             layer,
-            this._app.uiConfig.config.value.primaryColor ?? getDefaultPrimaryColor(),
+            this._app.uiConfig.config.value.primaryColor ??
+              getDefaultPrimaryColor(),
           ),
         });
-        this._clearHighlightingCb = () => this._scratchLayer.featureVisibility.unHighlight([featureId]);
+        this._clearHighlightingCb = () =>
+          this._scratchLayer.featureVisibility.unHighlight([featureId]);
       } else if (layer.featureVisibility) {
         const featureId = feature.getId();
         layer.featureVisibility.highlight({
           [featureId]: getHighlightStyle(
             feature,
             layer,
-            this._app.uiConfig.config.value.primaryColor ?? getDefaultPrimaryColor(),
+            this._app.uiConfig.config.value.primaryColor ??
+              getDefaultPrimaryColor(),
           ),
         });
-        this._clearHighlightingCb = () => layer.featureVisibility.unHighlight([featureId]);
+        this._clearHighlightingCb = () =>
+          layer.featureVisibility.unHighlight([featureId]);
       }
       this._windowId = usedFeatureInfoView.className; // use className for a type based position caching
       this._app.windowManager.add(
@@ -481,7 +509,7 @@ class FeatureInfo {
       this._app.layers.remove(this._scratchLayer);
       this._scratchLayer.destroy();
     }
-    this._listeners.forEach(cb => cb());
+    this._listeners.forEach((cb) => cb());
     this._listeners.splice(0);
     this._collection.destroy();
     this._featureInfoClassRegistry.destroy();
@@ -489,7 +517,19 @@ class FeatureInfo {
 }
 
 export default FeatureInfo;
-featureInfoClassRegistry.registerClass(TableFeatureInfoView.className, TableFeatureInfoView);
-featureInfoClassRegistry.registerClass(IframeFeatureInfoView.className, IframeFeatureInfoView);
-featureInfoClassRegistry.registerClass(BalloonFeatureInfoView.className, BalloonFeatureInfoView);
-featureInfoClassRegistry.registerClass(AddressBalloonFeatureInfoView.className, AddressBalloonFeatureInfoView);
+featureInfoClassRegistry.registerClass(
+  TableFeatureInfoView.className,
+  TableFeatureInfoView,
+);
+featureInfoClassRegistry.registerClass(
+  IframeFeatureInfoView.className,
+  IframeFeatureInfoView,
+);
+featureInfoClassRegistry.registerClass(
+  BalloonFeatureInfoView.className,
+  BalloonFeatureInfoView,
+);
+featureInfoClassRegistry.registerClass(
+  AddressBalloonFeatureInfoView.className,
+  AddressBalloonFeatureInfoView,
+);

package/src/featureInfo/featureInfoInteraction.js

@@ -1,4 +1,8 @@
-import { AbstractInteraction, EventType, ModificationKeyType } from '@vcmap/core';
+import {
+  AbstractInteraction,
+  EventType,
+  ModificationKeyType,
+} from '@vcmap/core';
 
 /**
  * @class
@@ -24,13 +28,15 @@ class FeatureInfoInteraction extends AbstractInteraction {
    */
   async pipe(event) {
     if (event.feature) {
-      if (!this._featureInfo.selectedFeature || event.feature.getId() !== this._featureInfo.selectedFeatureId) {
+      if (
+        !this._featureInfo.selectedFeature ||
+        event.feature.getId() !== this._featureInfo.selectedFeatureId
+      ) {
         event.stopPropagation = true;
-        await this._featureInfo.selectFeature(
-          event.feature,
-          event.position,
-          [event.windowPosition.x, event.windowPosition.y],
-        );
+        await this._featureInfo.selectFeature(event.feature, event.position, [
+          event.windowPosition.x,
+          event.windowPosition.y,
+        ]);
       }
     } else {
       await this._featureInfo.clear();

package/src/featureInfo/iframeFeatureInfoView.js

@@ -41,7 +41,9 @@ class IframeFeatureInfoView extends AbstractFeatureInfoView {
   /**
    * @type {string}
    */
-  static get className() { return 'IframeFeatureInfoView'; }
+  static get className() {
+    return 'IframeFeatureInfoView';
+  }
 
   /**
    * @param {IframeFeatureInfoViewOptions} options

package/src/featureInfo/tableFeatureInfoView.js

@@ -27,7 +27,9 @@ class TableFeatureInfoView extends AbstractFeatureInfoView {
   /**
    * @type {string}
    */
-  static get className() { return 'TableFeatureInfoView'; }
+  static get className() {
+    return 'TableFeatureInfoView';
+  }
 
   /** @returns {TableFeatureInfoViewOptions} */
   static getDefaultOptions() {
@@ -47,13 +49,16 @@ class TableFeatureInfoView extends AbstractFeatureInfoView {
     /**
      * @type {number[]}
      */
-    this.itemsPerPageArray = options.itemsPerPageArray || defaultOptions.itemsPerPageArray;
+    this.itemsPerPageArray =
+      options.itemsPerPageArray || defaultOptions.itemsPerPageArray;
 
     const itemsPerPage = options.itemsPerPage || defaultOptions.itemsPerPage;
     /**
      * @type {number}
      */
-    this.itemsPerPage = this.itemsPerPageArray.includes(itemsPerPage) ? itemsPerPage : this.itemsPerPageArray[0];
+    this.itemsPerPage = this.itemsPerPageArray.includes(itemsPerPage)
+      ? itemsPerPage
+      : this.itemsPerPageArray[0];
     /**
      * @type {boolean}
      */
@@ -90,8 +95,13 @@ class TableFeatureInfoView extends AbstractFeatureInfoView {
   toJSON() {
     const config = super.toJSON();
     const defaultOptions = TableFeatureInfoView.getDefaultOptions();
-    if (this.itemsPerPageArray.length !== defaultOptions.itemsPerPageArray.length ||
-      this.itemsPerPageArray.some((e, idx) => e !== defaultOptions.itemsPerPageArray[idx])) {
+    if (
+      this.itemsPerPageArray.length !==
+        defaultOptions.itemsPerPageArray.length ||
+      this.itemsPerPageArray.some(
+        (e, idx) => e !== defaultOptions.itemsPerPageArray[idx],
+      )
+    ) {
       config.itemsPerPageArray = this.itemsPerPageArray;
     }
     if (this.itemsPerPage !== defaultOptions.itemsPerPage) {