desy-html 16.0.4 → 17.0.0

package/src/templates/components/table-advanced/_macro.table-advanced.njk

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

package/src/templates/components/table-advanced/_styles.table-advanced.css

@@ -1,63 +1,63 @@
-/* ==========================================================================
-   _styles.table-advanced.css
-   ========================================================================== */
-
-@layer components {
-  .c-table-advanced {
-    [role="button"] {
-      cursor: pointer;
-    }
-
-
-    [aria-sort="ascending"],
-    [aria-sort="descending"],
-    [aria-sort="none"] {
-      .c-table-advanced__order {
-        @apply inline-block pointer-events-none;
-      }
-    }
-
-
-    [aria-sort="ascending"] {
-      @apply font-bold text-black;
-
-      .c-table-advanced__ascending {
-        @apply inline-block pointer-events-none;
-      }
-    }
-
-
-    [aria-sort="descending"] {
-      @apply font-bold text-black;
-
-      .c-table-advanced__descending {
-        @apply inline-block pointer-events-none;
-      }
-    }
-
-
-    [aria-sort="none"] {
-      @apply font-normal text-neutral-dark;
-
-      .c-table-advanced__none {
-        @apply inline-block;
-      }
-    }
-
-
-    & [tabindex="0"]:focus {
-      @apply bg-warning-base;
-      @apply outline-hidden;
-      @apply shadow-outline-black;
-      @apply text-black;
-    }
-  }
-
-
-  .c-table-advanced__order,
-  .c-table-advanced__ascending,
-  .c-table-advanced__descending,
-  .c-table-advanced__none {
-    @apply hidden;
-  }
-}
+/* ==========================================================================
+   _styles.table-advanced.css
+   ========================================================================== */
+
+@layer components {
+  .c-table-advanced {
+    [role="button"] {
+      cursor: pointer;
+    }
+
+
+    [aria-sort="ascending"],
+    [aria-sort="descending"],
+    [aria-sort="none"] {
+      .c-table-advanced__order {
+        @apply inline-block pointer-events-none;
+      }
+    }
+
+
+    [aria-sort="ascending"] {
+      @apply font-bold text-black;
+
+      .c-table-advanced__ascending {
+        @apply inline-block pointer-events-none;
+      }
+    }
+
+
+    [aria-sort="descending"] {
+      @apply font-bold text-black;
+
+      .c-table-advanced__descending {
+        @apply inline-block pointer-events-none;
+      }
+    }
+
+
+    [aria-sort="none"] {
+      @apply font-normal text-neutral-dark;
+
+      .c-table-advanced__none {
+        @apply inline-block;
+      }
+    }
+
+
+    & [tabindex="0"]:focus {
+      @apply bg-warning-base;
+      @apply outline-hidden;
+      @apply shadow-outline-black;
+      @apply text-black;
+    }
+  }
+
+
+  .c-table-advanced__order,
+  .c-table-advanced__ascending,
+  .c-table-advanced__descending,
+  .c-table-advanced__none {
+    @apply hidden;
+  }
+}

package/src/templates/components/table-advanced/_template.table-advanced.njk

@@ -1,210 +1,210 @@
-{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}
-{% from "components/select/_macro.select.njk" import componentSelect %}
-
-{#- If an id 'prefix' is not passed, fall back to using a generic one
-   instead. -#}
-{% set idPrefix = params.idPrefix if params.idPrefix else 'id-table-row' %}
-{% set hasFilters = false %}
-{% set hasSelects = false %}
-{% set hasFiltersOrSelects = false %}
-
-{% for item in params.head %}
-  {% if item.hasFilter %}
-    {% set hasFilters = true %}
-    {% set hasFiltersOrSelects = true %}
-  {% endif %}
-  {% if item.select %}
-    {% set hasSelects = true %}
-    {% set hasFiltersOrSelects = true %}
-  {% endif %}
-{% endfor %}
-
-{#- Capture the HTML so we can optionally nest it in a wrapper -#}
-{% set innerHtml %}
-  <table class="c-table-advanced border-t-2 border-b-2 border-neutral-base
-    {%- if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="c-table-advanced" role="grid" aria-readonly="true">
-    {% if params.caption %}
-    <caption {%- if params.captionClasses %} class="{{ params.captionClasses }}"{% endif %}>{{ params.caption }}</caption>
-    {% endif %}
-    {% if params.head %}
-    <thead>
-      <tr class="border-t border-neutral-base divide-x divide-neutral-base">
-        {% if params.hasCheckboxes %}
-        <th scope="col" class="align-top px-base py-xs {%- if params.checkboxesClasses %} {{ params.checkboxesClasses }}{% endif %}">
-          <span class="sr-only">Seleccionar fila</span>
-        </th>
-        {% endif %}
-      {% for item in params.head %}
-        {%-set idHeader = idPrefix + "-header-" + loop.index0 %}
-        {% set idHeaderCheckbox = idPrefix + "-header-checkbox-" + loop.index0 %}
-        <th {%- if item.orderBy %} aria-sort="{% if item.orderBy == 'asc' %}ascending{% elseif item.orderBy == 'desc' %}descending{% elseif item.orderBy == 'none' %}none{% endif %}"{% endif %} scope="col" id="{{ idHeader }}" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark {%- if item.classes %} {{ item.classes }}{% endif %}"
-        {%- if item.colspan %} colspan="{{ item.colspan }}"{% endif %}
-        {%- if item.rowspan %} rowspan="{{ item.rowspan }}"{% endif %}{% for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-          <span class="inline-block relative" {%- if item.orderBy %} tabindex="-1" role="button"{% endif %}>
-            {{ item.html |safe if item.html else item.text }}
-            {% if item.orderBy %}
-            <span class="c-table-advanced__order">
-              <span class="sr-only">Pulsa para ordenar por esta columna</span>
-              <span class="c-table-advanced__ascending">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em"><path d="M112.07 37.93l-35-35a10 10 0 00-14.14 0l-35 35a10 10 0 0014.14 14.14l13.66-13.66A2.5 2.5 0 0160 40.18V130a10 10 0 0020 0V40.18a2.5 2.5 0 014.27-1.77l13.66 13.66a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
-              </span>
-              <span class="c-table-advanced__descending">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em"><path d="M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z" fill="currentColor"/></svg>
-              </span>
-              <span class="c-table-advanced__none">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="text-neutral-dark" aria-hidden="true" width="1em" height="1em"><path d="M94.7 97.2l-17.2 17.19V25.61L94.7 42.8a7.5 7.5 0 0010.6-10.6l-30-30a7.49 7.49 0 00-10.6 0l-30 30a7.5 7.5 0 0010.6 10.6l17.2-17.19v88.78L45.3 97.2a7.5 7.5 0 10-10.6 10.6l30 30a7.48 7.48 0 0010.6 0l30-30a7.5 7.5 0 00-10.6-10.6z" fill="currentColor"/></svg>
-              </span>
-            </span>
-            {% endif %}
-          </span>
-        </th>
-      {% endfor %}
-      </tr>
-    </thead>
-    {% endif %}
-    <tbody>
-      {% if hasFilters or hasSelects %}
-      <tr class="divide-x divide-neutral-base">
-        {% if params.hasCheckboxes %}
-        <td {%- if params.checkboxesClasses %} class="{{ params.checkboxesClasses }}"{% endif %}></td>
-        {% endif %}
-        {% for item in params.head %}
-          {% set idHeader = idPrefix + "-header-" + loop.index0 %}
-          {% set idFilter = idPrefix + "-header-filter-" + loop.index0 %}
-          {% set idSelect = idPrefix + "-header-select-" + loop.index0 %}
-        <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark {%- if item.classes %} {{ item.classes }}{% endif %}">
-          {% if item.select %}
-          {{ componentSelect({
-            "formGroup": {
-              "classes": "-mt-sm mb-0"
-            },
-            "label": {
-              "text":  item.filterText if item.filterText else "Filtrar en esta columna",
-              "classes": "sr-only"
-            },
-            "id": item.select.id if item.select.id else idSelect,
-            "name": item.select.name if item.select.name else idSelect,
-            "items": item.select.items,
-            "describedBy": idHeader,
-            "disabled": item.select.disabled,
-            "classes": item.select.classes if item.select.classes else "c-select--sm w-full",
-            "attributes": item.select.attributes
-          }) | indent(10)  }}
-          {% endif %}
-          {% if item.select and item.hasFilter %}
-          <div class="pb-sm"></div>
-          {% endif %}
-          {% if item.hasFilter %}
-          {{ componentSearchbar({
-            "formGroup": {
-              "classes": "mb-0"
-            },
-            "label": {
-              "text": item.filterText if item.filterText else "Filtrar en esta columna",
-              "classes": "sr-only"
-            },
-            "id": idFilter,
-            "name": idFilter,
-            "placeholder": item.filterText if item.filterText else "Filtrar",
-            "classes": "c-input--sm " + item.filterClasses if item.filterClasses else "c-input--sm",
-            "buttonClasses": "m-xs p-0.5 text-xs",
-            "attributes": {
-              "aria-describedby": idHeader
-            }
-          }) | indent(10)  }}
-          {% endif %}
-        </td>
-        {% endfor %}
-      </tr>
-      {% endif %}
-      {% for row in params.rows %}
-        {%- set idCheckbox = idPrefix + "-checkbox-" + loop.index0 -%}
-        {% if row %}
-      <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
-        {% if params.hasCheckboxes %}
-        <td class="px-base py-sm {%- if params.checkboxesClasses %} {{ params.checkboxesClasses }}{% endif %}" tabindex="-1">
-          <div class="c-checkboxes c-checkboxes--sm">
-            <div>
-              <div class="relative flex items-start">
-                <div class="flex items-center mx-sm">
-                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base" id="{{ idCheckbox }}" name="{{ idCheckbox }}" type="checkbox" value="table-checkbox">
-                </div>
-                <div class="pt-0.5 leading-5">
-                  <label class="sr-only block text-sm -mt-1" for="{{ idCheckbox }}">Selecciona fila {% if hasFiltersOrSelects %}{{ loop.index + 2 }}{% else %}{{ loop.index + 1 }}{% endif %}</label>
-                </div>
-              </div>
-            </div>
-          </div>
-        </td>
-        {% endif %}
-      {% for cell in row %}
-        {% set commonAttributes %}
-          {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
-          {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}{% for attribute, value in cell.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
-        {% endset %}
-        {% if loop.first and params.firstCellIsHeader %}
-        <th scope="row" class="px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark{%- if cell.classes %} {{ cell.classes }}{% endif %}"
-          {{- commonAttributes | safe -}}
-        >{{ cell.html | filterquotes | safe if cell.html else cell.text }}</th>
-        {% else %}
-        <td  tabindex="-1" class="px-base py-sm {%- if cell.classes %} {{ cell.classes }}{% endif %}"
-          {{- commonAttributes | safe -}}
-        >{{ cell.html | filterquotes | safe if cell.html else cell.text }}</td>
-        {% endif %}
-      {% endfor %}
-      </tr>
-        {% endif %}
-      {% endfor %}
-    </tbody>
-    <tfoot>
-      {% for row in params.foot %}
-        {%- set idCheckbox = idPrefix + "-tfoot-checkbox-" + loop.index0 -%}
-        {% if row %}
-      <tr class="border-t-2 border-b border-neutral-base hover:bg-neutral-lighter">
-        {% if params.hasCheckboxes %}
-        <td class="px-base py-sm {%- if params.checkboxesClasses %} {{ params.checkboxesClasses }}{% endif %}" tabindex="-1">
-          <div class="c-checkboxes c-checkboxes--sm">
-            <div>
-              <div class="relative flex items-start">
-                <div class="flex items-center mx-sm">
-                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base" id="{{ idCheckbox }}" name="{{ idCheckbox }}" type="checkbox" value="table-checkbox">
-                </div>
-                <div class="pt-0.5 leading-5">
-                  <label class="sr-only block text-sm -mt-1" for="{{ idCheckbox }}">Selecciona fila {{ loop.index + 1 }}</label>
-                </div>
-              </div>
-            </div>
-          </div>
-        </td>
-        {% endif %}
-      {% for cell in row %}
-        {% set commonAttributes %}
-          {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
-          {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}{% for attribute, value in cell.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
-        {% endset %}
-        {% if loop.first and params.firstCellIsHeader %}
-        <th scope="row" class="px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark{%- if cell.classes %} {{ cell.classes }}{% endif %}"
-          {{- commonAttributes | safe -}}
-        >{{ cell.html | filterquotes | safe if cell.html else cell.text }}</th>
-        {% else %}
-        <td  tabindex="-1" class="px-base py-sm {%- if cell.classes %} {{ cell.classes }}{% endif %}"
-          {{- commonAttributes | safe -}}
-        >{{ cell.html | filterquotes | safe if cell.html else cell.text }}</td>
-        {% endif %}
-      {% endfor %}
-      </tr>
-        {% endif %}
-      {% endfor %}
-    </tfoot>
-  </table>
-{% endset %}
-
-<!-- table-advanced -->
-{% if params.wrapper %}
-<div {%- if params.wrapper.classes %} class="{{ params.wrapper.classes }}"{% endif %}>
-  {{ innerHtml | trim | safe }}
-</div>
-{% else %}
-  {{ innerHtml | trim | safe }}
-{% endif %}
-<!-- /table-advanced -->
+{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}
+{% from "components/select/_macro.select.njk" import componentSelect %}
+
+{#- If an id 'prefix' is not passed, fall back to using a generic one
+   instead. -#}
+{% set idPrefix = params.idPrefix if params.idPrefix else 'id-table-row' %}
+{% set hasFilters = false %}
+{% set hasSelects = false %}
+{% set hasFiltersOrSelects = false %}
+
+{% for item in params.head %}
+  {% if item.hasFilter %}
+    {% set hasFilters = true %}
+    {% set hasFiltersOrSelects = true %}
+  {% endif %}
+  {% if item.select %}
+    {% set hasSelects = true %}
+    {% set hasFiltersOrSelects = true %}
+  {% endif %}
+{% endfor %}
+
+{#- Capture the HTML so we can optionally nest it in a wrapper -#}
+{% set innerHtml %}
+  <table class="c-table-advanced border-t-2 border-b-2 border-neutral-base
+    {%- if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="c-table-advanced" role="grid" aria-readonly="true">
+    {% if params.caption %}
+    <caption {%- if params.captionClasses %} class="{{ params.captionClasses }}"{% endif %}>{{ params.caption }}</caption>
+    {% endif %}
+    {% if params.head %}
+    <thead>
+      <tr class="border-t border-neutral-base divide-x divide-neutral-base">
+        {% if params.hasCheckboxes %}
+        <th scope="col" class="align-top px-base py-xs {%- if params.checkboxesClasses %} {{ params.checkboxesClasses }}{% endif %}">
+          <span class="sr-only">Seleccionar fila</span>
+        </th>
+        {% endif %}
+      {% for item in params.head %}
+        {%-set idHeader = idPrefix + "-header-" + loop.index0 %}
+        {% set idHeaderCheckbox = idPrefix + "-header-checkbox-" + loop.index0 %}
+        <th {%- if item.orderBy %} aria-sort="{% if item.orderBy == 'asc' %}ascending{% elseif item.orderBy == 'desc' %}descending{% elseif item.orderBy == 'none' %}none{% endif %}"{% endif %} scope="col" id="{{ idHeader }}" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark {%- if item.classes %} {{ item.classes }}{% endif %}"
+        {%- if item.colspan %} colspan="{{ item.colspan }}"{% endif %}
+        {%- if item.rowspan %} rowspan="{{ item.rowspan }}"{% endif %}{% for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+          <span class="inline-block relative" {%- if item.orderBy %} tabindex="-1" role="button"{% endif %}>
+            {{ item.html |safe if item.html else item.text }}
+            {% if item.orderBy %}
+            <span class="c-table-advanced__order">
+              <span class="sr-only">Pulsa para ordenar por esta columna</span>
+              <span class="c-table-advanced__ascending">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em"><path d="M112.07 37.93l-35-35a10 10 0 00-14.14 0l-35 35a10 10 0 0014.14 14.14l13.66-13.66A2.5 2.5 0 0160 40.18V130a10 10 0 0020 0V40.18a2.5 2.5 0 014.27-1.77l13.66 13.66a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
+              </span>
+              <span class="c-table-advanced__descending">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em"><path d="M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z" fill="currentColor"/></svg>
+              </span>
+              <span class="c-table-advanced__none">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="text-neutral-dark" aria-hidden="true" width="1em" height="1em"><path d="M94.7 97.2l-17.2 17.19V25.61L94.7 42.8a7.5 7.5 0 0010.6-10.6l-30-30a7.49 7.49 0 00-10.6 0l-30 30a7.5 7.5 0 0010.6 10.6l17.2-17.19v88.78L45.3 97.2a7.5 7.5 0 10-10.6 10.6l30 30a7.48 7.48 0 0010.6 0l30-30a7.5 7.5 0 00-10.6-10.6z" fill="currentColor"/></svg>
+              </span>
+            </span>
+            {% endif %}
+          </span>
+        </th>
+      {% endfor %}
+      </tr>
+    </thead>
+    {% endif %}
+    <tbody>
+      {% if hasFilters or hasSelects %}
+      <tr class="divide-x divide-neutral-base">
+        {% if params.hasCheckboxes %}
+        <td {%- if params.checkboxesClasses %} class="{{ params.checkboxesClasses }}"{% endif %}></td>
+        {% endif %}
+        {% for item in params.head %}
+          {% set idHeader = idPrefix + "-header-" + loop.index0 %}
+          {% set idFilter = idPrefix + "-header-filter-" + loop.index0 %}
+          {% set idSelect = idPrefix + "-header-select-" + loop.index0 %}
+        <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark {%- if item.classes %} {{ item.classes }}{% endif %}">
+          {% if item.select %}
+          {{ componentSelect({
+            "formGroup": {
+              "classes": "-mt-sm mb-0"
+            },
+            "label": {
+              "text":  item.filterText if item.filterText else "Filtrar en esta columna",
+              "classes": "sr-only"
+            },
+            "id": item.select.id if item.select.id else idSelect,
+            "name": item.select.name if item.select.name else idSelect,
+            "items": item.select.items,
+            "describedBy": idHeader,
+            "disabled": item.select.disabled,
+            "classes": item.select.classes if item.select.classes else "c-select--sm w-full",
+            "attributes": item.select.attributes
+          }) | indent(10)  }}
+          {% endif %}
+          {% if item.select and item.hasFilter %}
+          <div class="pb-sm"></div>
+          {% endif %}
+          {% if item.hasFilter %}
+          {{ componentSearchbar({
+            "formGroup": {
+              "classes": "mb-0"
+            },
+            "label": {
+              "text": item.filterText if item.filterText else "Filtrar en esta columna",
+              "classes": "sr-only"
+            },
+            "id": idFilter,
+            "name": idFilter,
+            "placeholder": item.filterText if item.filterText else "Filtrar",
+            "classes": "c-input--sm " + item.filterClasses if item.filterClasses else "c-input--sm",
+            "buttonClasses": "m-xs p-0.5 text-xs",
+            "attributes": {
+              "aria-describedby": idHeader
+            }
+          }) | indent(10)  }}
+          {% endif %}
+        </td>
+        {% endfor %}
+      </tr>
+      {% endif %}
+      {% for row in params.rows %}
+        {%- set idCheckbox = idPrefix + "-checkbox-" + loop.index0 -%}
+        {% if row %}
+      <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
+        {% if params.hasCheckboxes %}
+        <td class="px-base py-sm {%- if params.checkboxesClasses %} {{ params.checkboxesClasses }}{% endif %}" tabindex="-1">
+          <div class="c-checkboxes c-checkboxes--sm">
+            <div>
+              <div class="relative flex items-start">
+                <div class="flex items-center mx-sm">
+                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base" id="{{ idCheckbox }}" name="{{ idCheckbox }}" type="checkbox" value="table-checkbox">
+                </div>
+                <div class="pt-0.5 leading-5">
+                  <label class="sr-only block text-sm -mt-1" for="{{ idCheckbox }}">Selecciona fila {% if hasFiltersOrSelects %}{{ loop.index + 2 }}{% else %}{{ loop.index + 1 }}{% endif %}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </td>
+        {% endif %}
+      {% for cell in row %}
+        {% set commonAttributes %}
+          {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
+          {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}{% for attribute, value in cell.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
+        {% endset %}
+        {% if loop.first and params.firstCellIsHeader %}
+        <th scope="row" class="px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark{%- if cell.classes %} {{ cell.classes }}{% endif %}"
+          {{- commonAttributes | safe -}}
+        >{{ cell.html | filterquotes | safe if cell.html else cell.text }}</th>
+        {% else %}
+        <td  tabindex="-1" class="px-base py-sm {%- if cell.classes %} {{ cell.classes }}{% endif %}"
+          {{- commonAttributes | safe -}}
+        >{{ cell.html | filterquotes | safe if cell.html else cell.text }}</td>
+        {% endif %}
+      {% endfor %}
+      </tr>
+        {% endif %}
+      {% endfor %}
+    </tbody>
+    <tfoot>
+      {% for row in params.foot %}
+        {%- set idCheckbox = idPrefix + "-tfoot-checkbox-" + loop.index0 -%}
+        {% if row %}
+      <tr class="border-t-2 border-b border-neutral-base hover:bg-neutral-lighter">
+        {% if params.hasCheckboxes %}
+        <td class="px-base py-sm {%- if params.checkboxesClasses %} {{ params.checkboxesClasses }}{% endif %}" tabindex="-1">
+          <div class="c-checkboxes c-checkboxes--sm">
+            <div>
+              <div class="relative flex items-start">
+                <div class="flex items-center mx-sm">
+                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base" id="{{ idCheckbox }}" name="{{ idCheckbox }}" type="checkbox" value="table-checkbox">
+                </div>
+                <div class="pt-0.5 leading-5">
+                  <label class="sr-only block text-sm -mt-1" for="{{ idCheckbox }}">Selecciona fila {{ loop.index + 1 }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </td>
+        {% endif %}
+      {% for cell in row %}
+        {% set commonAttributes %}
+          {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
+          {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}{% for attribute, value in cell.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
+        {% endset %}
+        {% if loop.first and params.firstCellIsHeader %}
+        <th scope="row" class="px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark{%- if cell.classes %} {{ cell.classes }}{% endif %}"
+          {{- commonAttributes | safe -}}
+        >{{ cell.html | filterquotes | safe if cell.html else cell.text }}</th>
+        {% else %}
+        <td  tabindex="-1" class="px-base py-sm {%- if cell.classes %} {{ cell.classes }}{% endif %}"
+          {{- commonAttributes | safe -}}
+        >{{ cell.html | filterquotes | safe if cell.html else cell.text }}</td>
+        {% endif %}
+      {% endfor %}
+      </tr>
+        {% endif %}
+      {% endfor %}
+    </tfoot>
+  </table>
+{% endset %}
+
+<!-- table-advanced -->
+{% if params.wrapper %}
+<div {%- if params.wrapper.classes %} class="{{ params.wrapper.classes }}"{% endif %}>
+  {{ innerHtml | trim | safe }}
+</div>
+{% else %}
+  {{ innerHtml | trim | safe }}
+{% endif %}
+<!-- /table-advanced -->