desy-html 10.2.2 → 11.0.1

package/src/templates/components/pagination/_macro.pagination.njk

@@ -1,3 +1,3 @@
-{% macro componentPagination(params) %}
-{% include "./_template.pagination.njk" %}
-{% endmacro %}
+{% macro componentPagination(params) %}
+{% include "./_template.pagination.njk" %}
+{% endmacro %}

package/src/templates/components/pagination/_template.pagination.njk

@@ -1,154 +1,159 @@
-{% from "../button/_macro.button.njk" import componentButton %}
-{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
-
-
-{#- If an id 'prefix' is not passed, fall back to using a default one
-   instead -#}
-{% set idPrefix = params.idPrefix if params.idPrefix else "pagination-item" %}
-
-{% set activePosition = "1" %}
-{% for item in params.items %}
-  {% if item.active %}
-    {% set activePosition = loop.index0 %}
-  {% endif %}
-{% endfor %}
-{% set disabledPrevious = not params.hasPrevious if params.hasPrevious != undefined else false %}
-{% set disabledNext = not params.hasNext if params.hasNext != undefined else false %}
-{% set disabledFirst = not params.hasFirst if params.hasFirst != undefined else false %}
-{% set disabledLast = not params.hasLast if params.hasLast != undefined else false %}
-
-{% set commonAttributes %} class="flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm{%- if params.classes %} {{ params.classes }}{% endif %}"
-{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}{% endset %}
-
-
-
-
-{#- Capture the HTML so we can optionally nest it in a fieldset -#}
-{% set innerHtml %}
-  {% for item in params.items %}
-  {% if item %}
-  {% set id = idPrefix + "-" + loop.index %}
-  <li>
-    {% set prefix %}<span class="sr-only">Página&nbsp;</span>{% endset %}
-    {% set suffix %}<span class="sr-only">&nbsp;(resultados del {{ loop.index | int * params.itemsPerPage | int }} al {% if ((loop.index | int + 1)  * params.itemsPerPage | int) > ( params.totalItems | int ) %}{{ params.totalItems }}{% else %}{{ (loop.index | int + 1)  * params.itemsPerPage | int }}{% endif %})</span>{% endset %}
-    {% if item.active %}
-    {{ componentButton({
-      "html": '<strong>' + prefix | trim + loop.index + suffix | trim + '</strong>',
-      "classes": "c-button--primary c-button--disabled mb-sm mr-sm",
-      "disabled": true,
-      "attributes": {
-        "id": id,
-        "aria-current": "page",
-        "tabindex": "-1"
-      }
-    }) | trim | indent(4)  }}
-    {% else %}
-    {{ componentButton({
-      "html": prefix + loop.index + suffix,
-      "classes": "mb-sm mr-sm",
-      "attributes": {
-        "id": id
-      }
-    }) | trim | indent(4)  }}
-    {% endif %}
-  </li>
-  {% endif %}
-  {% endfor %}
-{% endset -%}
-
-<!-- pagination -->
-{% set prefix %}
-  <span class="sr-only">Página&nbsp;</span>
-{% endset %}
-{% set previousSuffix %}
-  {% if activePosition > 0 %}<span class="sr-only">:&nbsp;Página {{ activePosition }} con los resultados del {{ (activePosition - 1) | int * params.itemsPerPage | int }} al {% if (((activePosition - 1) | int + 1)  * params.itemsPerPage | int) > ( params.totalItems | int ) %}{{ params.totalItems }}{% else %}{{ ((activePosition - 1) | int + 1)  * params.itemsPerPage | int }}{% endif %}</span>{% endif %}
-{% endset %}
-{% set nextSuffix %}
-  {% if (((activePosition + 2) | int + 1)  * params.itemsPerPage | int) < ( params.totalItems | int ) %}<span class="sr-only">:&nbsp;Página {{ activePosition + 2 }} con los resultados del {{ (activePosition + 1) | int * params.itemsPerPage | int }} al {% if (((activePosition + 1) | int + 1)  * params.itemsPerPage | int) > ( params.totalItems | int ) %}{{ params.totalItems }}{% else %}{{ ((activePosition + 1) | int + 1)  * params.itemsPerPage | int }}{% endif %}</span>{% endif %}
-{% endset %}
-<div id="{{ params.id }}" class="lg:flex lg:flex-wrap lg:items-center lg:gap-base{%- if params.containerClasses %} {{ params.containerClasses }}{% endif %}">
-  {% if params.hasSelect %}
-  <p class="w-full mb-xs text-sm text-neutral-dark">
-    Selecciona cargar datos automáticamente
-  </p>
-  <nav {{- commonAttributes | safe }}>
-    {% if params.showFirst %}
-    {{ componentButton({
-      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="self-center h-2.5 w-2.5 mr-2" aria-hidden="true" focusable="false"><g><path d="M10.42,12a2.64,2.64,0,0,1,.77-1.88L20.73.58a1.77,1.77,0,0,1,2.5,2.5l-8.74,8.74a.27.27,0,0,0,0,.36l8.74,8.74a1.77,1.77,0,0,1-2.5,2.5l-9.54-9.54A2.64,2.64,0,0,1,10.42,12Z" fill="currentColor"></path><path d="M.25,12A2.65,2.65,0,0,1,1,10.12L10.57.58a1.77,1.77,0,0,1,2.5,2.5L4.33,11.82a.25.25,0,0,0,0,.36l8.74,8.74a1.77,1.77,0,0,1-2.5,2.5L1,13.88A2.65,2.65,0,0,1,.25,12Z" fill="currentColor"></path></g></svg>' + prefix + params.firstText + previousSuffix,
-      "disabled": disabledFirst,
-      "classes": "c-button--sm c-button--transparent mr-xs",
-      "attributes": {
-        "id": params.idPrefix + "-first"
-      }
-    }) | trim | indent(4)  }}
-    {% endif %}
-    {% if params.showPrevious != false %}
-    {{ componentButton({
-      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"  width="1em" height="1em" class="self-center h-2.5 w-2.5 mr-2" aria-hidden="true" focusable="false"><path d="M54.87 71.77a2.5 2.5 0 010-3.54L106 17.07A10 10 0 1091.89 2.93L35.43 59.39a15 15 0 000 21.22l56.46 56.46A10 10 0 10106 122.93z" fill="currentColor" /></svg>' + prefix + params.previousText + previousSuffix,
-      "disabled": disabledPrevious,
-      "classes": "c-button--sm c-button--transparent mr-xs",
-      "attributes": {
-        "id": params.idPrefix + "-previous"
-      }
-    }) | trim | indent(4)  }}
-    {% endif %}
-    <div class="flex flex-wrap items-center {%- if params.showFirst or params.showLast %} w-full lg:w-auto{% endif %} pl-sm">
-      {% if params.showFirst or params.showLast %}
-      <p class="lg:hidden mr-xs text-sm text-neutral-dark">Página actual:</p>
-      {% endif %}
-      {{ componentListbox({
-        "id": params.id + "-listbox",
-        "idPrefix": params.idPrefix,
-        "text": "Página " + params.items[activePosition].text,
-        "classes": "c-listbox--sm c-listbox--transparent mr-xs",
-        "classesTooltip": "max-h-52 overflow-y-auto",
-        "doesChangeButtonText": true,
-        "items": params.items
-      }) | trim | indent(4)  }}
-    </div>
-    {% if params.showNext != false %}
-    {{ componentButton({
-      "html": prefix + params.nextText + nextSuffix + '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="self-center h-2.5 w-2.5 ml-2" aria-hidden="true" focusable="false"><path d="M34 137.07a10 10 0 010-14.14l51.13-51.16a2.5 2.5 0 000-3.54L34 17.07A10 10 0 0148.11 2.93l56.46 56.46a15 15 0 010 21.22l-56.46 56.46a10 10 0 01-14.11 0z" fill="currentColor" /></svg>',
-      "disabled": disabledNext,
-      "classes": "c-button--sm c-button--transparent mr-xs",
-      "attributes": {
-        "id": params.idPrefix + "-next"
-      }
-    }) | trim | indent(4)  }}
-    {% endif %}
-    {% if params.showLast %}
-    {{ componentButton({
-      "html": prefix + params.lastText + nextSuffix + '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="self-center h-2.5 w-2.5 ml-2" aria-hidden="true" focusable="false"><g><path d="M13.58,12a2.64,2.64,0,0,1-.77,1.88L3.27,23.42a1.77,1.77,0,0,1-2.5-2.5l8.74-8.74a.27.27,0,0,0,0-.36L.77,3.08A1.77,1.77,0,0,1,3.27.58l9.54,9.54A2.64,2.64,0,0,1,13.58,12Z" fill="currentColor"></path><path d="M23.75,12A2.65,2.65,0,0,1,23,13.88l-9.54,9.54a1.77,1.77,0,0,1-2.5-2.5l8.74-8.74a.25.25,0,0,0,0-.36L10.93,3.08a1.77,1.77,0,0,1,2.5-2.5L23,10.12A2.65,2.65,0,0,1,23.75,12Z" fill="currentColor"></path></g></svg>',
-      "disabled": disabledLast,
-      "classes": "c-button--sm c-button--transparent mr-xs",
-      "attributes": {
-        "id": params.idPrefix + "-last"
-      }
-    }) | trim | indent(4)  }}
-    {% endif %}
-  </nav>
-  {% else %}
-  <nav {{- commonAttributes | safe }}>
-    <ul class="flex flex-wrap">
-      {{ innerHtml | trim | safe | indent(4) }}
-    </ul>
-  </nav>
-  {% endif %}
-  {% if params.itemsListbox %}
-  <div class="block relative -top-xs lg:ml-auto text-sm text-neutral-dark">
-    {{ componentListbox({
-      "id": "items-listbox-" + idPrefix,
-      "text": params.itemsPerPage,
-      "label": params.itemsListbox.label if params.itemsListbox.label else { "text": "Items por página: ", "classes": "inline-block flex align-middle mb-[0]" },
-      "doesChangeButtonText": true,
-      "classesContainer": "flex flex-wrap items-center gap-xs",
-      "classes": "c-listbox--sm c-listbox--transparent",
-      "items": params.itemsListbox.items
-    }) | indent(4)  }}
-  </div>
-  {% endif %}
-  <p class="block relative -top-xs lg:ml-auto text-sm text-neutral-dark">
-    <span class="sr-only">Posición de paginación: </span>{{ activePosition | int * params.itemsPerPage | int }} - {{ (activePosition | int + 1)  * params.itemsPerPage | int }} de {{ params.totalItems }}
-  </p>
-</div>
+{% from "../button/_macro.button.njk" import componentButton %}
+{% from "components/select/_macro.select.njk" import componentSelect %}
+
+
+{#- If an id 'prefix' is not passed, fall back to using a default one
+   instead -#}
+{% set idPrefix = params.idPrefix if params.idPrefix else "pagination-item" %}
+
+{% set activePosition = "1" %}
+{% for item in params.items %}
+  {% if item.selected %}
+    {% set activePosition = loop.index0 %}
+  {% endif %}
+{% endfor %}
+{% set disabledPrevious = not params.hasPrevious if params.hasPrevious != undefined else false %}
+{% set disabledNext = not params.hasNext if params.hasNext != undefined else false %}
+{% set disabledFirst = not params.hasFirst if params.hasFirst != undefined else false %}
+{% set disabledLast = not params.hasLast if params.hasLast != undefined else false %}
+
+{% set commonAttributes %} class="flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm{%- if params.classes %} {{ params.classes }}{% endif %}"
+{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}{% endset %}
+
+
+
+
+{#- Capture the HTML so we can optionally nest it in a fieldset -#}
+{% set innerHtml %}
+  {% for item in params.items %}
+  {% if item %}
+  {% set id = idPrefix + "-" + loop.index %}
+  <li>
+    {% set prefix %}<span class="sr-only">Página&nbsp;</span>{% endset %}
+    {% set suffix %}<span class="sr-only">&nbsp;(resultados del {{ loop.index | int * params.itemsPerPage | int }} al {% if ((loop.index | int + 1)  * params.itemsPerPage | int) > ( params.totalItems | int ) %}{{ params.totalItems }}{% else %}{{ (loop.index | int + 1)  * params.itemsPerPage | int }}{% endif %})</span>{% endset %}
+    {% if item.selected %}
+    {{ componentButton({
+      "html": '<strong>' + prefix | trim + loop.index + suffix | trim + '</strong>',
+      "classes": "c-button--primary c-button--disabled mb-sm mr-sm",
+      "disabled": true,
+      "attributes": {
+        "id": id,
+        "aria-current": "page",
+        "tabindex": "-1"
+      }
+    }) | trim | indent(4)  }}
+    {% else %}
+    {{ componentButton({
+      "html": prefix + loop.index + suffix,
+      "classes": "mb-sm mr-sm",
+      "attributes": {
+        "id": id
+      }
+    }) | trim | indent(4)  }}
+    {% endif %}
+  </li>
+  {% endif %}
+  {% endfor %}
+{% endset -%}
+
+<!-- pagination -->
+{% set prefix %}
+  <span class="sr-only">Página&nbsp;</span>
+{% endset %}
+{% set previousSuffix %}
+  {% if activePosition > 0 %}<span class="sr-only">:&nbsp;Página {{ activePosition }} con los resultados del {{ (activePosition - 1) | int * params.itemsPerPage | int }} al {% if (((activePosition - 1) | int + 1)  * params.itemsPerPage | int) > ( params.totalItems | int ) %}{{ params.totalItems }}{% else %}{{ ((activePosition - 1) | int + 1)  * params.itemsPerPage | int }}{% endif %}</span>{% endif %}
+{% endset %}
+{% set nextSuffix %}
+  {% if (((activePosition + 2) | int + 1)  * params.itemsPerPage | int) < ( params.totalItems | int ) %}<span class="sr-only">:&nbsp;Página {{ activePosition + 2 }} con los resultados del {{ (activePosition + 1) | int * params.itemsPerPage | int }} al {% if (((activePosition + 1) | int + 1)  * params.itemsPerPage | int) > ( params.totalItems | int ) %}{{ params.totalItems }}{% else %}{{ ((activePosition + 1) | int + 1)  * params.itemsPerPage | int }}{% endif %}</span>{% endif %}
+{% endset %}
+<div id="{{ params.id }}" class="lg:flex lg:flex-wrap lg:items-center lg:gap-base{%- if params.containerClasses %} {{ params.containerClasses }}{% endif %}">
+  {% if params.hasSelect %}
+  <p id="{{ params.id }}-label" class="w-full mb-xs text-sm text-neutral-dark">
+    Selecciona para cargar datos automáticamente
+  </p>
+  <nav {{- commonAttributes | safe }}>
+    {% if params.showFirst %}
+    {{ componentButton({
+      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="self-center h-2.5 w-2.5 mr-2" aria-hidden="true" focusable="false"><g><path d="M10.42,12a2.64,2.64,0,0,1,.77-1.88L20.73.58a1.77,1.77,0,0,1,2.5,2.5l-8.74,8.74a.27.27,0,0,0,0,.36l8.74,8.74a1.77,1.77,0,0,1-2.5,2.5l-9.54-9.54A2.64,2.64,0,0,1,10.42,12Z" fill="currentColor"></path><path d="M.25,12A2.65,2.65,0,0,1,1,10.12L10.57.58a1.77,1.77,0,0,1,2.5,2.5L4.33,11.82a.25.25,0,0,0,0,.36l8.74,8.74a1.77,1.77,0,0,1-2.5,2.5L1,13.88A2.65,2.65,0,0,1,.25,12Z" fill="currentColor"></path></g></svg>' + prefix + params.firstText + previousSuffix,
+      "disabled": disabledFirst,
+      "classes": "c-button--sm c-button--transparent mr-xs",
+      "attributes": {
+        "id": params.idPrefix + "-first"
+      }
+    }) | trim | indent(4)  }}
+    {% endif %}
+    {% if params.showPrevious != false %}
+    {{ componentButton({
+      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"  width="1em" height="1em" class="self-center h-2.5 w-2.5 mr-2" aria-hidden="true" focusable="false"><path d="M54.87 71.77a2.5 2.5 0 010-3.54L106 17.07A10 10 0 1091.89 2.93L35.43 59.39a15 15 0 000 21.22l56.46 56.46A10 10 0 10106 122.93z" fill="currentColor" /></svg>' + prefix + params.previousText + previousSuffix,
+      "disabled": disabledPrevious,
+      "classes": "c-button--sm c-button--transparent mr-xs",
+      "attributes": {
+        "id": params.idPrefix + "-previous"
+      }
+    }) | trim | indent(4)  }}
+    {% endif %}
+    <div class="flex flex-wrap items-center {%- if params.showFirst or params.showLast %} w-full lg:w-auto{% endif %} pl-sm">
+      {% if params.showFirst or params.showLast %}
+      <p class="lg:hidden mr-xs text-sm text-neutral-dark">Página actual:</p>
+      {% endif %}
+      {{ componentSelect({
+        "id": params.id + "-listbox",
+        "name": params.id + "-listbox",
+        "text": "Página " + params.items[activePosition].text,
+        "classes": "c-select--sm c-select--transparent",
+        "formGroup": {
+          "classes": "-mt-sm mb-0 mr-xs"
+        },
+        "items": params.items,
+        "describedBy": params.id + "-label"
+      }) | trim | indent(4)  }}
+    </div>
+    {% if params.showNext != false %}
+    {{ componentButton({
+      "html": prefix + params.nextText + nextSuffix + '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="self-center h-2.5 w-2.5 ml-2" aria-hidden="true" focusable="false"><path d="M34 137.07a10 10 0 010-14.14l51.13-51.16a2.5 2.5 0 000-3.54L34 17.07A10 10 0 0148.11 2.93l56.46 56.46a15 15 0 010 21.22l-56.46 56.46a10 10 0 01-14.11 0z" fill="currentColor" /></svg>',
+      "disabled": disabledNext,
+      "classes": "c-button--sm c-button--transparent mr-xs",
+      "attributes": {
+        "id": params.idPrefix + "-next"
+      }
+    }) | trim | indent(4)  }}
+    {% endif %}
+    {% if params.showLast %}
+    {{ componentButton({
+      "html": prefix + params.lastText + nextSuffix + '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="self-center h-2.5 w-2.5 ml-2" aria-hidden="true" focusable="false"><g><path d="M13.58,12a2.64,2.64,0,0,1-.77,1.88L3.27,23.42a1.77,1.77,0,0,1-2.5-2.5l8.74-8.74a.27.27,0,0,0,0-.36L.77,3.08A1.77,1.77,0,0,1,3.27.58l9.54,9.54A2.64,2.64,0,0,1,13.58,12Z" fill="currentColor"></path><path d="M23.75,12A2.65,2.65,0,0,1,23,13.88l-9.54,9.54a1.77,1.77,0,0,1-2.5-2.5l8.74-8.74a.25.25,0,0,0,0-.36L10.93,3.08a1.77,1.77,0,0,1,2.5-2.5L23,10.12A2.65,2.65,0,0,1,23.75,12Z" fill="currentColor"></path></g></svg>',
+      "disabled": disabledLast,
+      "classes": "c-button--sm c-button--transparent mr-xs",
+      "attributes": {
+        "id": params.idPrefix + "-last"
+      }
+    }) | trim | indent(4)  }}
+    {% endif %}
+  </nav>
+  {% else %}
+  <nav {{- commonAttributes | safe }}>
+    <ul class="flex flex-wrap">
+      {{ innerHtml | trim | safe | indent(4) }}
+    </ul>
+  </nav>
+  {% endif %}
+  {% if params.itemsPerPageSelector %}
+  <div class="block relative -top-xs lg:ml-auto text-sm text-neutral-dark">
+    {{ componentSelect({
+      "id": "items-listbox-" + idPrefix,
+      "name": "items-listbox-" + idPrefix,
+      "text": params.itemsPerPage,
+      "label": params.itemsPerPageSelector.label if params.itemsPerPageSelector.label else { "text": "Items por página: ", "classes": "inline-block flex align-middle mb-[0]" },
+      "classes": "c-select--sm c-select--transparent",
+      "formGroup": {
+        "classes": "flex flex-wrap place-items-baseline gap-xs -mt-sm mb-0 mr-xs"
+      },
+      "items": params.itemsPerPageSelector.items,
+      "describedBy": params.id + "-label"
+    }) | indent(4)  }}
+  </div>
+  {% endif %}
+  <p class="block relative -top-xs lg:ml-auto text-sm text-neutral-dark">
+    <span class="sr-only">Posición de paginación: </span>{{ activePosition | int * params.itemsPerPage | int }} - {{ (activePosition | int + 1)  * params.itemsPerPage | int }} de {{ params.totalItems }}
+  </p>
+</div>
 <!-- /pagination -->

package/src/templates/components/pagination/params.pagination.yaml

@@ -1,151 +1,151 @@
-params:
-- name: id
-  type: string
-  required: true
-  description: The id of the pagination.
-- name: hasSelect
-  type: boolean
-  required: false
-  description: If true, the pagination appearance shows a select to select active page instead of a button group.
-- name: ariaLabel
-  type: string
-  required: true
-  description: String to add an aria-label to the nav.
-- name: classesContainer
-  type: string
-  required: false
-  description: Classes to add to the container div.
-- name: totalItems
-  type: string
-  required: true
-  description: Total number of items.
-- name: itemsPerPage
-  type: string
-  required: true
-  description: Number of items per each page.
-- name: showPrevious
-  type: boolean
-  required: false
-  description: If true, shows the Previous button if hasSelect is true. Defaults to true.
-- name: hasPrevious
-  type: boolean
-  required: false
-  description: If false, the Previous button is disabled. Defaults to true.
-- name: previousText
-  type: string
-  required: false
-  description: Text for the previous button. Defaults to "Anterior".
-- name: showNext
-  type: boolean
-  required: false
-  description: If true, shows the Next button if hasSelect is true. Defaults to true.
-- name: hasNext
-  type: boolean
-  required: false
-  description: If false, the Next button is disabled. Defaults to true.
-- name: nextText
-  type: string
-  required: false
-  description: Text for the previous button. Defaults to "Siguiente".
-- name: showFirst
-  type: boolean
-  required: false
-  description: If true, shows the First button if hasSelect is true. Defaults to false.
-- name: hasFirst
-  type: boolean
-  required: false
-  description: If false, the First button is disabled. Defaults to true.
-- name: firstText
-  type: string
-  required: false
-  description: Text for the first button. Defaults to "Primera".
-- name: showLast
-  type: boolean
-  required: false
-  description: If true, shows the Last button if hasSelect is true. Defaults to false.
-- name: hasLast
-  type: boolean
-  required: false
-  description: If false, the Last button is disabled. Defaults to true.
-- name: lastText
-  type: string
-  required: false
-  description: Text for the last button. Defaults to "Última".
-- name: itemsListbox
-  type: object
-  required: false
-  description: Options for a listbox component to choose number of items per page.
-  - name: label
-    type: object
-    required: true
-    description: Label text or HTML by specifying value for either text or html keys.
-    - name: text
-      type: string
-      required: true
-      description: If `html` is set, this is not required. Text for the button. If `html` is provided, the `text` argument will be ignored.
-    - name: html
-      type: string
-      required: true
-      description: If `text` is set, this is not required. HTML for the button. If `html` is provided, the `text` argument will be ignored.
-    - name: classes
-      type: string
-      required: false
-      description: Classes to add to the element that acts as label.
-  - name: items
-    type: array
-    required: true
-    description: Array of items objects.
-    params:
-    - name: text
-      type: string
-      required: true
-      description: If `html` is set, this is not required. Text to use within each item. If `html` is provided, the `text` argument will be ignored.
-    - name: html
-      type: string
-      required: true
-      description: If `text` is set, this is not required. HTML to use within each item. If `html` is provided, the `text` argument will be ignored.
-    - name: id
-      type: string
-      required: false
-      description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.
-    - name: active
-      type: boolean
-      required: false
-      description: If true, item will be active.
-    - name: classes
-      type: string
-      required: false
-      description: Classes to add to the item.
-    - name: attributes
-      type: object
-      required: false
-      description: HTML attributes (for example data attributes) to add to the item.
-- name: items
-  type: array
-  required: true
-  description: Array of items objects.
-  params:
-  - name: href
-    type: string
-    required: true
-    description: Item link.
-  - name: active
-    type: boolean
-    required: false
-    description: If true, item will be active.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the item.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to the item.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the pagination nav container tag.
-- name: attributes
-  type: object
-  required: false
+params:
+- name: id
+  type: string
+  required: true
+  description: The id of the pagination.
+- name: hasSelect
+  type: boolean
+  required: false
+  description: If true, the pagination appearance shows a select to select active page instead of a button group.
+- name: ariaLabel
+  type: string
+  required: true
+  description: String to add an aria-label to the nav.
+- name: classesContainer
+  type: string
+  required: false
+  description: Classes to add to the container div.
+- name: totalItems
+  type: string
+  required: true
+  description: Total number of items.
+- name: itemsPerPage
+  type: string
+  required: true
+  description: Number of items per each page.
+- name: showPrevious
+  type: boolean
+  required: false
+  description: If true, shows the Previous button if hasSelect is true. Defaults to true.
+- name: hasPrevious
+  type: boolean
+  required: false
+  description: If false, the Previous button is disabled. Defaults to true.
+- name: previousText
+  type: string
+  required: false
+  description: Text for the previous button. Defaults to "Anterior".
+- name: showNext
+  type: boolean
+  required: false
+  description: If true, shows the Next button if hasSelect is true. Defaults to true.
+- name: hasNext
+  type: boolean
+  required: false
+  description: If false, the Next button is disabled. Defaults to true.
+- name: nextText
+  type: string
+  required: false
+  description: Text for the previous button. Defaults to "Siguiente".
+- name: showFirst
+  type: boolean
+  required: false
+  description: If true, shows the First button if hasSelect is true. Defaults to false.
+- name: hasFirst
+  type: boolean
+  required: false
+  description: If false, the First button is disabled. Defaults to true.
+- name: firstText
+  type: string
+  required: false
+  description: Text for the first button. Defaults to "Primera".
+- name: showLast
+  type: boolean
+  required: false
+  description: If true, shows the Last button if hasSelect is true. Defaults to false.
+- name: hasLast
+  type: boolean
+  required: false
+  description: If false, the Last button is disabled. Defaults to true.
+- name: lastText
+  type: string
+  required: false
+  description: Text for the last button. Defaults to "Última".
+- name: itemsPerPageSelector
+  type: object
+  required: false
+  description: Options for a select component to choose number of items per page.
+  - name: label
+    type: object
+    required: true
+    description: Label text or HTML by specifying value for either text or html keys.
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text for the button. If `html` is provided, the `text` argument will be ignored.
+    - name: html
+      type: string
+      required: true
+      description: If `text` is set, this is not required. HTML for the button. If `html` is provided, the `text` argument will be ignored.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the element that acts as label.
+  - name: items
+    type: array
+    required: true
+    description: Array of items objects.
+    params:
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text to use within each item. If `html` is provided, the `text` argument will be ignored.
+    - name: html
+      type: string
+      required: true
+      description: If `text` is set, this is not required. HTML to use within each item. If `html` is provided, the `text` argument will be ignored.
+    - name: id
+      type: string
+      required: false
+      description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.
+    - name: active
+      type: boolean
+      required: false
+      description: If true, item will be active.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the item.
+    - name: attributes
+      type: object
+      required: false
+      description: HTML attributes (for example data attributes) to add to the item.
+- name: items
+  type: array
+  required: true
+  description: Array of items objects.
+  params:
+  - name: href
+    type: string
+    required: true
+    description: Item link.
+  - name: active
+    type: boolean
+    required: false
+    description: If true, item will be active.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the item.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the item.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the pagination nav container tag.
+- name: attributes
+  type: object
+  required: false
   description: HTML attributes (for example data attributes) to add to the pagination nav container tag.