Fix scroll buttons disabled/enabled states in the Kiosk mode

packages/components/src/components.d.ts

@@ -853,6 +853,10 @@ export namespace Components {
         "unit": UnitSystem;
     }
     interface MiScrollButtons {
+        /**
+          * Items that are rendered inside a specific element.
+         */
+        "elementItems": any;
         /**
           * Reference to the element with scroll on parent element.
           * @type {HTMLDivElement}
@@ -863,6 +867,10 @@ export namespace Components {
           * @type {number}
          */
         "scrollLength": number;
+        /**
+          * Updates scroll buttons enabled/disabled states when elementItems amount changes.
+         */
+        "updateScrollButtons": (elementItems: any) => Promise<any>;
         /**
           * Updates enable/disable state for scroll up and down buttons.
           * @returns
@@ -2226,6 +2234,10 @@ declare namespace LocalJSX {
         "unit"?: UnitSystem;
     }
     interface MiScrollButtons {
+        /**
+          * Items that are rendered inside a specific element.
+         */
+        "elementItems"?: any;
         /**
           * Reference to the element with scroll on parent element.
           * @type {HTMLDivElement}

packages/components/src/components/scroll-buttons/readme.md

@@ -72,12 +72,23 @@ A `updateScrollButtonsState` method can be called on the `<mi-scroll-buttons>` e
 
 | Property                    | Attribute       | Description                                                                          | Type             | Default     |
 | --------------------------- | --------------- | ------------------------------------------------------------------------------------ | ---------------- | ----------- |
+| `elementItems`              | `element-items` | Items that are rendered inside a specific element.                                   | `any`            | `undefined` |
 | `scrollContainerElementRef` | --              | Reference to the element with scroll on parent element.                              | `HTMLDivElement` | `undefined` |
 | `scrollLength`              | `scroll-length` | Determines how far to scroll when clicking one of the buttons. Default value is 100. | `number`         | `100`       |
 
 
 ## Methods
 
+### `updateScrollButtons(elementItems: any) => Promise<any>`
+
+Updates scroll buttons enabled/disabled states when elementItems amount changes.
+
+#### Returns
+
+Type: `Promise<any>`
+
+
+
 ### `updateScrollButtonsState() => Promise<void>`
 
 Updates enable/disable state for scroll up and down buttons.

packages/components/src/components/scroll-buttons/scroll-buttons.tsx

@@ -5,12 +5,32 @@ import { Component, h, JSX, Method, Prop, Watch } from '@stencil/core';
     styleUrl: 'scroll-buttons.scss',
     shadow: true
 })
+
 export class ScrollButtons {
     /**
      * Reference to the element with scroll on parent element.
+     *
      * @type {HTMLDivElement}
      */
     @Prop() scrollContainerElementRef: HTMLDivElement;
+
+    /**
+     * Items that are rendered inside a specific element.
+     */
+    @Prop() elementItems;
+
+    /**
+     * Updates scroll buttons enabled/disabled states when elementItems amount changes.
+     */
+    @Method()
+    public async updateScrollButtons(elementItems): Promise<any> {
+        this.elementItems = elementItems;
+        this.updateScrollButtonsState();
+    }
+
+    /**
+     * Watch for container scroll events.
+     */
     @Watch('scrollContainerElementRef')
     addScrollEventListener(): void {
         this.resizeObserver?.disconnect();
@@ -36,12 +56,16 @@ export class ScrollButtons {
         this.addScrollEventListener();
     }
 
+    /**
+     * Disconnects ResizeObserver.
+     */
     disconnectedCallback(): void {
         this.resizeObserver?.disconnect();
     }
 
     /**
      * Determines how far to scroll when clicking one of the buttons. Default value is 100.
+     *
      * @type {number}
      */
     @Prop() scrollLength = 100;
@@ -53,6 +77,7 @@ export class ScrollButtons {
 
     /**
      * Updates enable/disable state for scroll up and down buttons.
+     *
      * @returns {Promise<void>}
      */
     @Method()
@@ -63,17 +88,26 @@ export class ScrollButtons {
         } else if (this.upButtonElement.disabled) {
             this.upButtonElement.disabled = false;
         }
-
         // Disable or enable the scroll down button
-        if (this.scrollContainerElementRef.scrollHeight - this.scrollContainerElementRef.scrollTop === this.scrollContainerElementRef.clientHeight) {
-            this.downButtonElement.disabled = true;
-        } else if (this.downButtonElement.disabled) {
+        // length 8 is just that maxiumum amount of element items visible without a scroll possibility
+        if (this.scrollContainerElementRef.scrollHeight - this.scrollContainerElementRef.scrollTop === this.scrollContainerElementRef.clientHeight
+            && this.upButtonElement.disabled === true && this.elementItems > 8
+        ) {
+            this.downButtonElement.disabled = false;
+        } else if (this.scrollContainerElementRef.scrollHeight - this.scrollContainerElementRef.scrollTop > this.scrollContainerElementRef.clientHeight) {
             this.downButtonElement.disabled = false;
+            // length 8 is just that maxiumum amount of element items visible without a scroll possibility
+        } else if (this.scrollContainerElementRef.scrollHeight - this.scrollContainerElementRef.scrollTop === this.scrollContainerElementRef.clientHeight
+            && this.upButtonElement.disabled === true && this.elementItems < 8) {
+            this.downButtonElement.disabled = true;
+        } else {
+            this.downButtonElement.disabled = true;
         }
     }
 
     /**
      * Update scroll position.
+     *
      * @param {number} value - Value to scroll.
      */
     updateScrollPosition(value: number): void {
@@ -87,22 +121,31 @@ export class ScrollButtons {
         }
     }
 
+    /**
+     * Render scoll buttons.
+     *
+     * @returns {JSX.Element}
+     */
     render(): JSX.Element {
         return (
             <div part="container" class="scroll-buttons">
                 <button part="button button-up" class="mi-button mi-button--base btn btn-up"
                     type="button"
                     disabled
                     aria-label="Scroll Up"
-                    ref={(el) => this.upButtonElement = el as HTMLButtonElement}
-                    onClick={() => this.updateScrollPosition(-this.scrollLength)}>
+                    ref={(el: HTMLButtonElement | null): void => {
+                        this.upButtonElement = el as HTMLButtonElement | null;
+                    }}
+                    onClick={(): void => this.updateScrollPosition(-this.scrollLength)}>
                     <mi-icon icon-name="chevron-up" />
                 </button>
                 <button part="button button-down" class="mi-button mi-button--base btn btn-down"
                     type="button"
                     aria-label="Scroll Down"
-                    ref={(el) => this.downButtonElement = el as HTMLButtonElement}
-                    onClick={() => this.updateScrollPosition(this.scrollLength)}>
+                    ref={(el: HTMLButtonElement | null): void => {
+                        this.downButtonElement = el as HTMLButtonElement | null;
+                    }}
+                    onClick={(): void => this.updateScrollPosition(this.scrollLength)}>
                     <mi-icon icon-name="chevron-down" />
                 </button>
             </div>

packages/map-template/src/components/Map/MapboxMap/ViewmodeSwitch/ViewModeSwitch.jsx

@@ -35,18 +35,18 @@ function ViewModeSwitch({ mapView }) {
                 setViewMode(ViewModes.initial3D);
             }
             switch (viewMode) {
-                    // If the 2D View Mode has been clicked, hide the 3D features and tilt the map to 0 degrees. 
+                    // If the 2D View Mode has been clicked, hide the 3D features and tilt the map to 0 degrees.
                 case ViewModes.clicked2D:
                     mapView.tilt(0, 2000);
                     mapView.hideFeatures([mapView.FeatureType.MODEL3D, mapView.FeatureType.WALLS3D, mapView.FeatureType.EXTRUSION3D, mapView.FeatureType.EXTRUDEDBUILDINGS]);
                     break;
                     // If the Visibility Switch has not been interacted with, hide the 2D features
-                    // Tilt the map to the 'currentPitch' value - this is the value that the timeout property resets to. 
+                    // Tilt the map to the 'currentPitch' value - this is the value that the timeout property resets to.
                 case ViewModes.initial3D:
                     mapView.tilt(currentPitch, 2000);
                     mapView.hideFeatures([mapView.FeatureType.MODEL2D, mapView.FeatureType.WALLS2D]);
                     break;
-                    // If the 3D View Mode has been clicked, hide the 2D features and tilt the map to 45 degrees. 
+                    // If the 3D View Mode has been clicked, hide the 2D features and tilt the map to 45 degrees.
                 case ViewModes.clicked3D:
                     mapView.tilt(45, 2000);
                     mapView.hideFeatures([mapView.FeatureType.MODEL2D, mapView.FeatureType.WALLS2D]);

packages/map-template/src/components/Search/Search.jsx

@@ -140,6 +140,15 @@ function Search({ onSetSize, isOpen }) {
         setSearchResults(locations);
         setFilteredLocations(locations);
         setShowNotFoundMessage(locations.length === 0);
+
+        // Handles updates to scroll buttons when the category changes.
+        // When a category changes, the scroll buttons need to have their enabled/disabled states updated.
+        // Since some categories might load before the DOM element is fully rendered, we listen for the 'transitionend' event.
+        // The 'transitionend' event is triggered when the DOM element changes its size, which can occur as a result of new categories being fetched.
+        // Upon completion of the size transition, the 'updateKioskScrollButtons' function is triggered to handle the updated state.
+        searchRef.current?.addEventListener('transitionend', () => {
+            scrollButtonsRef?.current?.updateKioskScrollButtons(locations);
+        });
     }
 
     /**