@schukai/monster 4.39.0 → 4.40.0

package/source/components/form/select.mjs

@@ -66,6 +66,8 @@ import { positionPopper } from "./util/floating-ui.mjs";
 import { Pathfinder } from "../../data/pathfinder.mjs";
 import { TokenList } from "../../types/tokenlist.mjs";
 
+import "../datatable/pagination.mjs";
+
 export {
   getSelectionTemplate,
   getSummaryTemplate,
@@ -152,6 +154,13 @@ const changeEventHandler = Symbol("changeEventHandler");
  */
 const controlElementSymbol = Symbol("controlElement");
 
+/**
+ * local symbol
+ * @private
+ * @type {Symbol}
+ */
+const paginationElementSymbol = Symbol("paginationElement");
+
 /**
  * local symbol
  * @private
@@ -251,6 +260,17 @@ const cleanupOptionsListSymbol = Symbol("cleanupOptionsList");
 const debounceOptionsMutationObserverSymbol = Symbol(
   "debounceOptionsMutationObserver",
 );
+/**
+ * @private
+ * @type {symbol}
+ */
+const currentPageSymbol = Symbol("currentPage");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const remoteFilterFirstOpendSymbol = Symbol("remoteFilterFirstOpend");
 
 /**
  * @private
@@ -307,6 +327,9 @@ const FILTER_POSITION_INLINE = "inline";
  * @example /examples/components/form/select-fetch Fetch options
  * @example /examples/components/form/select-lazy Lazy load
  * @example /examples/components/form/select-remote-filter Remote filter
+ * @example /examples/components/form/select-remote-filter Server-side filtering with a remote URL
+ * @example /examples/components/form/select-remote-pagination Server-side filtering with pagination
+ * @example /examples/components/form/select-summary-template Using a summary template for selections
  *
  * @copyright schukai GmbH
  * @summary A beautiful select control that can make your life easier and also looks good.
@@ -322,6 +345,7 @@ class Select extends CustomControl {
    */
   constructor() {
     super();
+    this[currentPageSymbol] = 1;
     initOptionObserver.call(this);
   }
 
@@ -379,74 +403,91 @@ class Select extends CustomControl {
         addErrorAttribute(this, e);
       });
   }
-
   /**
-   * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
+   * Defines the default configuration options for the monster-control.
+   * These options can be overridden via the HTML attribute `data-monster-options`.
    * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
    *
-   * The individual configuration values can be found in the table.
-   *
-   * @property {string[]} toggleEventType Array of DOM event names (e.g. ["click","touch"]) to toggle the dropdown.
-   * @property {boolean} delegatesFocus Whether the element delegates focus to its internal control (e.g. the filter input).
-   * @property {Array<Object>} options Array of option objects {label,value,visibility?,data?} for static option list.
-   * @property {string|string[]} selection Initial selected value(s) as string, comma-separated string, or array of strings.
-   * @property {number} showMaxOptions Maximum visible options before the dropdown scrolls.
-   * @property {"radio"|"checkbox"} type Selection mode: "radio" for single, "checkbox" for multiple.
-   * @property {string} name Name of the hidden form field for form submission.
-   * @property {string|null} url URL to dynamically fetch options via HTTP when opening or filtering.
-   * @property {Object} lookup Configuration for lookup requests.
-   * @property {string} lookup.url URL template with ${filter} placeholder to fetch only selected entries on init when `url` is set and either `features.lazyLoad` or `filter.mode==="remote"`.
-   * @property {boolean} lookup.grouping Group lookup requests: true to fetch all selected values in one request, false to fetch each individually.
-   * @property {string} fetch.redirect Fetch redirect mode (e.g. "error").
-   * @property {string} fetch.method HTTP method for fetching options (e.g. "GET").
-   * @property {string} fetch.mode Fetch mode (e.g. "same-origin").
-   * @property {string} fetch.credentials Credentials policy for fetch (e.g. "same-origin").
-   * @property {Object.<string,string>} fetch.headers HTTP headers for fetch requests.
-   * @property {string} labels.cannot-be-loaded Message when options cannot be loaded.
-   * @property {string} labels.no-options-available Message when no static options are available.
-   * @property {string} labels.click-to-load-options Message prompting user to click to load options when `features.lazyLoad` is enabled.
-   * @property {string} labels.select-an-option Placeholder text when no selection is made.
-   * @property {string} labels.no-options Message when neither slots nor fetched options exist.
-   * @property {string} labels.no-options-found Message when filter yields no matching options.
-   * @property {string} labels.summary-text.zero Plural template for zero selected entries (e.g. "No entries were selected").
-   * @property {string} labels.summary-text.one Plural template for one selected entry.
-   * @property {string} labels.summary-text.other Plural template for multiple selected entries.
-   * @property {boolean} features.clearAll Show a "clear all" badge to reset selection.
-   * @property {boolean} features.clear Show remove icon on individual selection badges.
-   * @property {boolean} features.lazyLoad Lazy-load options on first open (initial fetch on show and triggers `lookup.url` preload; automatically disabled if `filter.mode==="remote"`).
-   * @property {boolean} features.closeOnSelect Automatically close dropdown after selection.
-   * @property {boolean} features.emptyValueIfNoOptions Set value to empty when no options are available.
-   * @property {boolean} features.storeFetchedData Persist raw fetched data for later retrieval via `getLastFetchedData()`.
-   * @property {boolean} features.useStrictValueComparison Use strict (`===`) comparison when matching option values.
-   * @property {boolean} features.showRemoteInfo When the filter mode is set to "remote," display a badge indicating the possibility of additional remote options.
-   * @property {Object} remoteInfo Configuration for remote info badge.
-   * @property {string} remoteInfo.url URL for total count of options when `filter.mode==="remote"` is set.
-   * @property {Object} placeholder Placeholder text for the control.
-   * @property {string} placeholder.filter Placeholder text for filter input.
-   * @property {string|null} filter.defaultValue Default filter value for remote requests; if unset or empty, disabled marker prevents request.
-   * @property {"options"|"remote"|"disabled"} filter.mode Client-side ("options"), server-side ("remote"; disables `features.lazyLoad`), or disabled filtering.
-   * @property {"inline"|"popper"} filter.position Position of filter input: inline within control or inside popper dropdown.
-   * @property {string} filter.marker.open Opening marker for embedding filter value in `filter.mode==="remote"` URLs.
-   * @property {string} filter.marker.close Closing marker for embedding filter value in URLs.
-   * @property {string|null} filter.defaultOptionsUrl URL for default options when `filter.mode==="remote"` is set and no filter value is provided.
-   * @property {string} templates.main HTML template string for rendering options and selection badges.
-   * @property {string} templateMapping.selected Template variant for selected items (e.g. badge vs summary view).
-   * @property {string} popper.placement Popper.js placement strategy for dropdown (e.g. "bottom").
-   * @property {Array<string|Object>} popper.middleware Popper.js middleware or offset configurations.
-   * @property {string} mapping.selector Data path or selector to identify entries in imported data.
-   * @property {string} mapping.labelTemplate Template for option labels using placeholders like `${name}`.
-   * @property {string} mapping.valueTemplate Template for option values using placeholders like `${name}`.
-   * @property {Function} mapping.filter Optional callback to filter imported map entries before building `options[]`.
-   * @property {string} empty.defaultValueRadio Default radio-value when no selection exists.
-   * @property {Array} empty.defaultValueCheckbox Default checkbox-values array when no selection exists.
-   * @property {Array} empty.equivalents Values considered empty (e.g. `undefined`, `null`, `""`, `NaN`) and normalized to defaults.
-   * @property {Function} formatter.selection Callback `(value)=>string` to format the display label of each selected value.
-   * @property {Object} classes CSS classes for styling.
-   * @property {string} classes.badge CSS class for the selection badge.
-   * @property {string} classes.statusOrRemoveBadge CSS class for the status or remove badge.
-   * @property {string} classes.remoteInfo CSS class for the remote info badge.
-   * @property {string} classes.noOptions CSS class for the no options available message.
-   * @property {number|null} total Total number of options available.
+   * @property {string[]} toggleEventType - Array of DOM event names (e.g., ["click", "touch"]) that toggle the dropdown.
+   * @property {boolean} delegatesFocus - If `true`, the element delegates focus to its internal control (e.g., the filter input).
+   * @property {Array<Object>} options - Array of option objects `{label, value, visibility?, data?}` for a static option list.
+   * @property {string|string[]} selection - Initial selected value(s), as a string, comma-separated string, or array of strings.
+   * @property {number} showMaxOptions - Maximum number of visible options before the list becomes scrollable.
+   * @property {"radio"|"checkbox"} type - Selection mode: "radio" for single selection, "checkbox" for multiple selections.
+   * @property {string} name - Name of the hidden form field for form submission.
+   * @property {string|null} url - URL to dynamically fetch options via HTTP when opening or filtering.
+   * @property {number|null} total - Total number of available options, useful for pagination with remote data.
+   * @property {Object} lookup - Configuration for fetching initially selected values.
+   * @property {string|null} lookup.url - URL template with a `${filter}` placeholder to look up selected entries on initialization. Used when `url` is set and either `features.lazyLoad` is active or `filter.mode` is `"remote"`.
+   * @property {boolean} lookup.grouping - If `true`, all selected values are fetched in a single request; otherwise, a separate request is sent for each value.
+   * @property {Object} fetch - Configuration for HTTP requests via `fetch`.
+   * @property {string} fetch.redirect - Fetch redirect mode (e.g., "error", "follow").
+   * @property {string} fetch.method - HTTP method for fetching options (e.g., "GET", "POST").
+   * @property {string} fetch.mode - Fetch mode (e.g., "cors", "same-origin").
+   * @property {string} fetch.credentials - Credentials policy for fetch (e.g., "include", "same-origin").
+   * @property {Object.<string, string>} fetch.headers - HTTP headers to be sent with every request.
+   * @property {Object} labels - Text labels for various states and UI elements.
+   * @property {string} labels.cannot-be-loaded - Message displayed when options cannot be loaded.
+   * @property {string} labels.no-options-available - Message displayed when no static options are provided.
+   * @property {string} labels.click-to-load-options - Prompt to load options when `features.lazyLoad` is enabled.
+   * @property {string} labels.select-an-option - Placeholder text when no selection has been made.
+   * @property {string} labels.no-options - Message displayed when no options are available from slots or fetch.
+   * @property {string} labels.no-options-found - Message displayed when the filter yields no matching options.
+   * @property {string} labels.summary-text.zero - Pluralization template for zero selected entries (e.g., "No entries selected").
+   * @property {string} labels.summary-text.one - Pluralization template for one selected entry.
+   * @property {string} labels.summary-text.other - Pluralization template for multiple selected entries.
+   * @property {Object} features - Toggles to enable/disable functionalities.
+   * @property {boolean} features.clearAll - Shows a "Clear all" button to reset the selection.
+   * @property {boolean} features.clear - Shows a "remove" icon on individual selection badges.
+   * @property {boolean} features.lazyLoad - If `true`, options are fetched from the `url` only when the dropdown is first opened. Ignored if `filter.mode` is `"remote"`.
+   * @property {boolean} features.closeOnSelect - If `true`, the dropdown closes automatically after a selection is made.
+   * @property {boolean} features.emptyValueIfNoOptions - Sets the hidden field's value to empty if no options are available.
+   * @property {boolean} features.storeFetchedData - If `true`, the raw fetched data is stored and can be retrieved via `getLastFetchedData()`.
+   * @property {boolean} features.useStrictValueComparison - Uses strict comparison (`===`) when matching option values.
+   * @property {boolean} features.showRemoteInfo - When `filter.mode === "remote"`, displays an info badge indicating that more options may exist on the server.
+   * @property {Object} remoteInfo - Configuration for the remote info display.
+   * @property {string|null} remoteInfo.url - URL to fetch the total count of remote options (used when `filter.mode === "remote"`).
+   * @property {Object} placeholder - Placeholder texts for input fields.
+   * @property {string} placeholder.filter - Placeholder text for the filter input field.
+   * @property {Object} filter - Configuration for the filtering functionality.
+   * @property {string|null} filter.defaultValue - Default filter value for remote requests. An empty string will prevent the initial request.
+   * @property {"options"|"remote"|"disabled"} filter.mode - Filter mode: `"options"` (client-side), `"remote"` (server-side, `lazyLoad` is ignored), or `"disabled"`.
+   * @property {"inline"|"popper"} filter.position - Position of the filter input: `"inline"` (inside the control) or `"popper"` (inside the dropdown).
+   * @property {string|null} filter.defaultOptionsUrl - URL to load an initial list of options when `filter.mode` is `"remote"` and no filter value has been entered.
+   * @property {Object} filter.marker - Markers for embedding the filter value into the `url` for server-side filtering.
+   * @property {string} filter.marker.open - Opening marker (e.g., `{`).
+   * @property {string} filter.marker.close - Closing marker (e.g., `}`).
+   * @property {Object} templates - HTML templates for the main components.
+   * @property {string} templates.main - HTML template string for the control's basic structure.
+   * @property {Object} templateMapping - Mapping of templates for specific use cases.
+   * @property {string} templateMapping.selected - Template variant for selected items (e.g., for rendering as a badge).
+   * @property {Object} popper - Configuration for Popper.js to position the dropdown.
+   * @property {string} popper.placement - Popper.js placement strategy (e.g., "bottom-start").
+   * @property {Array<string|Object>} popper.middleware - Array of middleware configurations for Popper.js (e.g., ["flip", "offset:1"]).
+   * @property {Object} mapping - Defines how fetched data is transformed into `options`.
+   * @property {string} mapping.selector - Path/selector to find the array of items within the fetched data (e.g., "results" for `data.results`).
+   * @property {string} mapping.labelTemplate - Template for the option label using placeholders (e.g., `Label: ${name}`).
+   * @property {string} mapping.valueTemplate - Template for the option value using placeholders (e.g., `ID: ${id}`).
+   * @property {Function|null} mapping.filter - Optional callback function `(item) => boolean` to filter fetched items before processing.
+   * @property {string|null} mapping.total - Path/selector to the total number of items for pagination (e.g., "pagination.total").
+   * @property {string|null} mapping.currentPage - Path/selector to the current page number.
+   * @property {string|null} mapping.objectsPerPage - Path/selector to the number of objects per page.
+   * @property {Object} empty - Handling of empty or undefined values.
+   * @property {string} empty.defaultValueRadio - Default value for `type="radio"` when no selection exists.
+   * @property {Array} empty.defaultValueCheckbox - Default value (empty array) for `type="checkbox"`.
+   * @property {Array} empty.equivalents - Values that are considered "empty" (e.g., `undefined`, `null`, `""`) and are normalized to the default value.
+   * @property {Object} formatter - Functions for formatting display values.
+   * @property {Function} formatter.selection - Callback `(value, option) => string` to format the display text of selected values.
+   * @property {Object} classes - CSS classes for various elements.
+   * @property {string} classes.badge - CSS class for selection badges.
+   * @property {string} classes.statusOrRemoveBadge - CSS class for the status or remove badge.
+   * @property {string} classes.remoteInfo - CSS class for the remote info badge.
+   * @property {string} classes.noOptions - CSS class for the "no options" message.
+   * @property {Object} messages - Internal messages for ARIA attributes and screen readers (should not normally be changed).
+   * @property {string|null} messages.control - Message for the main control element.
+   * @property {string|null} messages.selected - Message for the selected items area.
+   * @property {string|null} messages.emptyOptions - Message for an empty options list.
+   * @property {string|null} messages.total - Message that communicates the total number of options.
    */
   get defaults() {
     return Object.assign(
@@ -529,6 +570,8 @@ class Select extends CustomControl {
           valueTemplate: "",
           filter: null,
           total: null,
+          currentPage: null,
+          objectsPerPage: null,
         },
 
         empty: {
@@ -781,10 +824,7 @@ class Select extends CustomControl {
         addErrorAttribute(this, e);
       });
 
-    if (
-      this.parentElement &&
-      this.parentElement.nodeName === "MONSTER-BUTTON-BAR"
-    ) {
+    if (this.parentElement.nodeName === "MONSTER-BUTTON-BAR") {
       this.shadowRoot
         .querySelector("[data-monster-role=control]")
         .classList.add("in-button-bar");
@@ -847,6 +887,49 @@ class Select extends CustomControl {
   }
 }
 
+/**
+ * @private
+ * @param {object} data Die rohen Daten aus der API-Antwort.
+ */
+function processAndApplyPaginationData(data) {
+  if (!this[paginationElementSymbol]) {
+    return;
+  }
+
+  const mappingTotal = this.getOption("mapping.total");
+  const mappingCurrentPage = this.getOption("mapping.currentPage");
+  const mappingObjectsPerPage = this.getOption("mapping.objectsPerPage");
+
+  if (!mappingTotal || !mappingCurrentPage || !mappingObjectsPerPage) {
+    return;
+  }
+
+  try {
+    const pathfinder = new Pathfinder(data);
+    const total = pathfinder.getVia(mappingTotal);
+    const currentPage = pathfinder.getVia(mappingCurrentPage);
+    const objectsPerPage = pathfinder.getVia(mappingObjectsPerPage);
+
+    if (!isInteger(total)) {
+      addErrorAttribute(this, "total is not an integer");
+      return;
+    }
+
+    this.setOption("total", total);
+
+    if (
+      isInteger(currentPage) &&
+      currentPage > 0 &&
+      isInteger(objectsPerPage) &&
+      objectsPerPage > 0
+    ) {
+      updatePagination.call(this, total, currentPage, objectsPerPage);
+    }
+  } catch (e) {
+    addErrorAttribute(this, e);
+  }
+}
+
 /**
  * @private
  * @param data
@@ -911,6 +994,8 @@ function importOptionsIntern(data) {
     options = this.getOption("options", []);
   }
 
+  this[cleanupOptionsListSymbol] = false;
+
   if (!isIterable(map)) {
     throw new Error("map is not iterable");
   }
@@ -1419,6 +1504,9 @@ function getTranslations() {
   }
 }
 
+/**
+ * @private
+ */
 /**
  * @private
  */
@@ -1429,37 +1517,25 @@ function lookupSelection() {
     (entries, obs) => {
       for (const entry of entries) {
         if (entry.isIntersecting) {
-          obs.disconnect(); // Only observe once
+          obs.disconnect();
 
           setTimeout(() => {
             const selection = self.getOption("selection");
-            if (selection.length === 0) {
-              return;
-            }
-
-            if (self[isLoadingSymbol] === true) {
-              return;
-            }
-
-            if (self[lazyLoadDoneSymbol] === true) {
+            if (
+              selection.length === 0 ||
+              self[isLoadingSymbol] ||
+              self[lazyLoadDoneSymbol]
+            ) {
               return;
             }
 
-            let url = self.getOption("url");
-            const lookupUrl = self.getOption("lookup.url");
-            if (lookupUrl !== null) {
-              url = lookupUrl;
-            }
-
+            let url = self.getOption("lookup.url") || self.getOption("url");
             self[cleanupOptionsListSymbol] = false;
 
             if (self.getOption("lookup.grouping") === true) {
+              const values = selection.map((s) => s?.["value"]);
               filterFromRemoteByValue
-                .call(
-                  self,
-                  url,
-                  selection.map((s) => s?.["value"]),
-                )
+                .call(self, url, { filter: values.join(",") })
                 .catch((e) => {
                   addErrorAttribute(self, e);
                 });
@@ -1469,7 +1545,7 @@ function lookupSelection() {
             for (const s of selection) {
               if (s?.["value"]) {
                 filterFromRemoteByValue
-                  .call(self, url, s["value"])
+                  .call(self, url, { filter: s["value"] })
                   .catch((e) => {
                     addErrorAttribute(self, e);
                   });
@@ -1482,10 +1558,8 @@ function lookupSelection() {
     { threshold: 0.1 },
   );
 
-  // Beobachte das Element selbst (dieses Element muss im DOM sein)
   observer.observe(self);
 }
-
 /**
  *
  * @param url
@@ -1523,6 +1597,7 @@ function fetchIt(url, controlOptions) {
           ) {
             try {
               importOptionsIntern.call(self, map);
+              processAndApplyPaginationData.call(self, map);
             } catch (e) {
               setStatusOrRemoveBadges.call(this, "error");
               reject(e);
@@ -2252,6 +2327,7 @@ function handleFilterKeyEvents() {
     if (getFilterMode.call(this) !== FILTER_MODE_REMOTE) {
       filterOptions.call(this);
     } else {
+      this[currentPageSymbol] = 1;
       this[cleanupOptionsListSymbol] = true;
 
       filterFromRemote.call(this).catch((e) => {
@@ -2291,7 +2367,6 @@ function filterFromRemote() {
         filterValue = this[inlineFilterElementSymbol].value.toLowerCase();
       }
       showFlag = true;
-
       break;
     case FILTER_POSITION_POPPER:
     default:
@@ -2300,24 +2375,44 @@ function filterFromRemote() {
       }
   }
 
-  return filterFromRemoteByValue.call(this, url, filterValue, showFlag);
+  const params = {
+    filter: filterValue,
+    page: this[currentPageSymbol] || 1,
+  };
+
+  return filterFromRemoteByValue.call(this, url, params, showFlag);
 }
 
 /**
  * @private
  * @param url
- * @param value
+ * @param {object} params
  * @returns {string}
  */
-function formatURL(url, value) {
-  if (value === undefined || value === null || value === "") {
-    value = this.getOption("filter.defaultValue");
-    if (value === undefined || value === null) {
-      value = disabledRequestMarker.toString();
+function formatURL(url, params = {}) {
+  // Die Logik für den Default-Filterwert bleibt erhalten
+  if (
+    params.filter === undefined ||
+    params.filter === null ||
+    params.filter === ""
+  ) {
+    const defaultValue = this.getOption("filter.defaultValue");
+    if (defaultValue === undefined || defaultValue === null) {
+      params.filter = disabledRequestMarker.toString();
+    } else {
+      params.filter = defaultValue;
     }
   }
 
-  const formatter = new Formatter({ filter: encodeURI(value) });
+  const encodedParams = {};
+  for (const key in params) {
+    if (Object.hasOwn(params, key)) {
+      const value = params[key];
+      encodedParams[key] = encodeURI(String(value));
+    }
+  }
+
+  const formatter = new Formatter(encodedParams);
   const openMarker = this.getOption("filter.marker.open");
   let closeMarker = this.getOption("filter.marker.close");
   if (!closeMarker) {
@@ -2339,14 +2434,15 @@ function formatURL(url, value) {
  * @param {boolean} [openPopper] Flag indicating whether to open the popper.
  * @return {string} The formatted URL with the applied filters and markers.
  */
-function filterFromRemoteByValue(optionUrl, value, openPopper) {
+function filterFromRemoteByValue(optionUrl, params, openPopper) {
   return new Processing(() => {
-    let url = formatURL.call(this, optionUrl, value);
+    let url = formatURL.call(this, optionUrl, params);
+
     if (url.indexOf(disabledRequestMarker.toString()) !== -1) {
-      return;
+      return Promise.resolve();
     }
 
-    fetchIt
+    return fetchIt
       .call(this, url, {
         disableHiding: true,
       })
@@ -2359,12 +2455,9 @@ function filterFromRemoteByValue(optionUrl, value, openPopper) {
       .catch((e) => {
         addErrorAttribute(this, e);
         setStatusOrRemoveBadges.call(this, "error");
+        throw e;
       });
-  })
-    .run()
-    .catch((e) => {
-      throw e;
-    });
+  }).run();
 }
 
 /**
@@ -2646,7 +2739,21 @@ function areOptionsAvailableAndInitInternal() {
 
   this[areOptionsAvailableAndInitSymbol]++;
 
-  const options = this.getOption("options");
+  let options = this.getOption("options");
+
+  if (isArray(options) && Array.length === 1 && isString(options?.[0])) {
+    try {
+      const obj = JSON.parse(options[0]);
+      if (isArray(obj)) {
+        this.setOption("options", obj);
+        options = obj;
+      }
+    } catch (e) {
+      addErrorAttribute(this, e);
+      setStatusOrRemoveBadges.call(this, "error");
+      return false;
+    }
+  }
 
   if (
     options === undefined ||
@@ -2688,7 +2795,6 @@ function areOptionsAvailableAndInitInternal() {
       }
     }, 1000);
 
-    //this.setOption("messages.control", msg);
     this.setOption("messages.summary", "");
 
     if (this.getOption("features.emptyValueIfNoOptions") === true) {
@@ -2717,6 +2823,11 @@ function areOptionsAvailableAndInitInternal() {
   let updated = false;
   let valueCounter = 1;
   for (const option of options) {
+    if (isObject(option) === false) {
+      console.error("option is not an object", option);
+      continue;
+    }
+
     if (option?.visibility === undefined) {
       option.visibility = "visible";
       updated = true;
@@ -3058,6 +3169,8 @@ function hide() {
  * @private
  */
 function show() {
+  const self = this;
+
   if (this.getOption("disabled", undefined) === true) {
     return;
   }
@@ -3117,6 +3230,16 @@ function show() {
   addAttributeToken(this[controlElementSymbol], "class", "open");
 
   new Processing(() => {
+    if (!self?.[remoteFilterFirstOpendSymbol]) {
+      self[remoteFilterFirstOpendSymbol] = true;
+      setTimeout(
+        () =>
+          filterFromRemote.call(self).catch((e) => {
+            addErrorAttribute(self, e);
+          }),
+        0,
+      );
+    }
     calcAndSetOptionsDimension.call(this);
     focusFilter.call(this);
     this[popperElementSymbol].style.removeProperty("visibility");
@@ -3150,6 +3273,9 @@ function initDefaultOptionsFromUrl() {
     });
 }
 
+/**
+ * @private
+ */
 /**
  * @private
  */
@@ -3159,9 +3285,9 @@ function initTotal() {
   }
 
   const url = this.getOption("remoteInfo.url");
-  const mapping = this.getOption("mapping.total");
+  const mappingTotal = this.getOption("mapping.total");
 
-  if (!isString(mapping) || !isString(url)) {
+  if (!isString(mappingTotal) || !isString(url)) {
     return;
   }
 
@@ -3171,28 +3297,20 @@ function initTotal() {
     .fetch(url, fetchOptions)
     .then((response) => {
       if (!response.ok) {
-        // Improved status checking using `response.ok`
         addErrorAttribute(
           this,
           `HTTP error status: ${response.status} - ${response.statusText}`,
         );
         return;
       }
-
       return response.text();
     })
     .then((text) => {
+      if (!text) return;
       try {
         const data = JSON.parse(String(text));
-        const pathfinder = new Pathfinder(data);
-        const total = pathfinder.getVia(mapping);
 
-        if (!isInteger(total)) {
-          addErrorAttribute(this, "total is not an integer");
-          return;
-        }
-
-        this.setOption("total", total);
+        processAndApplyPaginationData.call(this, data);
       } catch (e) {
         addErrorAttribute(this, e);
       }
@@ -3202,6 +3320,16 @@ function initTotal() {
     });
 }
 
+function updatePagination(total, currentPage, objectsPerPage) {
+  const totalPages = Math.ceil(total / objectsPerPage);
+  this[paginationElementSymbol].style.display = "block";
+  this[paginationElementSymbol].setOption("objectsPerPage", objectsPerPage);
+  this[paginationElementSymbol].setPaginationState({
+    totalPages: totalPages,
+    currentPage: currentPage,
+  });
+}
+
 /**
  * @private
  */
@@ -3441,6 +3569,16 @@ function initEventHandler() {
     subtree: true,
   });
 
+  if (this[paginationElementSymbol]) {
+    this[paginationElementSymbol].style.display = "none";
+    this[paginationElementSymbol].setOption("callbacks.click", (page) => {
+      self[currentPageSymbol] = page;
+      self[cleanupOptionsListSymbol] = true;
+      filterFromRemote.call(self).catch((e) => {
+        addErrorAttribute(self, e);
+      });
+    });
+  }
   return self;
 }
 
@@ -3524,6 +3662,10 @@ function initControlReferences() {
     throw new Error("no shadow-root is defined");
   }
 
+  this[paginationElementSymbol] = this.shadowRoot.querySelector(
+    `[${ATTRIBUTE_ROLE}=pagination]`,
+  );
+
   this[controlElementSymbol] = this.shadowRoot.querySelector(
     `[${ATTRIBUTE_ROLE}=control]`,
   );
@@ -3648,10 +3790,12 @@ function getTemplate() {
                            autocomplete="off"
                            tabindex="0">
                 </div>
+ 
                 <div part="content" class="flex" data-monster-replace="path:content">
                     <div part="options" data-monster-role="options" data-monster-insert="options path:options"
                          tabindex="-1"></div>
                 </div>
+                <monster-pagination data-monster-role="pagination"></monster-pagination>
                 <div part="remote-info"
                      data-monster-role="remote-info"
                      data-monster-attributes="class path:classes.remoteInfo"