desy-html 12.1.0 → 13.0.0

package/src/templates/components/datepicker/_examples.datepicker.njk

@@ -1,330 +1,330 @@
-{% from "components/button/_macro.button.njk" import componentButton %}
-{% from "components/select/_macro.select.njk" import componentSelect %}
-
-{% macro headingYears(id='id') %}
-  <div slot="heading" class="order-first w-full flex justify-center">
-    {{ componentSelect({
-      "id": "select-years-" + id,
-      "name": "select-years-" + id,
-      "formGroup": {
-        "classes": "-mb-12"
-      },
-      "classes": "c-select--sm w-full",
-      "label": {
-        "text": "Selecciona un año para cargar sus datos",
-        "classes": "max-w-40 text-sm"
-      },
-      "items": [
-        {
-          "value": 2024,
-          "text": "2024",
-          "selected": true
-        },
-        {
-          "value": 2025,
-          "text": "2025"
-        },
-        {
-          "value": 2026,
-          "text": "2026"
-        }
-      ]
-    }) }}
-  </div>
-{% endmacro %}
-
-{% set buttonLeft %}
-  <div slot="previous">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes anterior"><path d="M4.00001 7.97945C4.00001 7.63023 4.14967 7.3309 4.39911 7.13135L9.93669 2.19243C10.3358 1.8931 10.9345 1.94298 11.2338 2.34209C11.5331 2.74119 11.5331 3.28996 11.134 3.58929L6.24497 7.87967C6.19508 7.92956 6.19508 7.97945 6.24497 8.07922L11.134 12.3696C11.5331 12.7188 11.583 13.2676 11.2338 13.6667C10.8846 14.0658 10.3358 14.1157 9.93669 13.7665C9.93669 13.7665 9.93669 13.7665 9.8868 13.7166L4.34922 8.82754C4.14967 8.62799 4.00001 8.27877 4.00001 7.97945Z" fill="currentColor"></path></svg>
-  </div>
-{% endset %}
-
-{% set buttonRight %}
-  <div slot="next">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes siguiente"><path d="M11.4673 8.02055C11.4673 8.36977 11.3176 8.6691 11.0682 8.86865L5.53062 13.8076C5.13152 14.1069 4.53286 14.057 4.23353 13.6579C3.9342 13.2588 3.9342 12.71 4.33331 12.4107L9.22234 8.12033C9.27223 8.07044 9.27223 8.02055 9.22234 7.92078L4.33331 3.6304C3.9342 3.28118 3.88432 2.73241 4.23353 2.33331C4.58275 1.9342 5.13152 1.88432 5.53062 2.23353C5.53062 2.23353 5.53062 2.23353 5.58051 2.28342L11.1181 7.17246C11.3176 7.37201 11.4673 7.72123 11.4673 8.02055Z" fill="currentColor"></path></svg>
-  </div>
-{% endset %}
-
-{% set calendarDateExample %}
-  <calendar-date
-    min="01-01-2024"
-    max="01-01-2025"
-    locale="es"
-    format="DD-MM-YYYY"
-  >
-    {{ buttonLeft | safe }}
-    {{ buttonRight | safe }}
-    <div class="flex flex-wrap justify-center gap-lg">
-      <calendar-month></calendar-month>
-    </div>
-  </calendar-date>
-{% endset %}
-
-{% macro calendarDateYearsExample(id='id') %}
-  <calendar-date
-    value="01-10-2024"
-    min="01-01-2024"
-    max="12-31-2024"
-    locale="es"
-  >
-    {{ buttonLeft | safe }}
-    {{ buttonRight | safe }}
-    {{ headingYears(id) | safe }}
-    <div class="flex flex-wrap justify-center gap-lg">
-      <calendar-month></calendar-month>
-    </div>
-  </calendar-date>
-{% endmacro %}
-
-{% set calendarMultiExample %}
-  <calendar-multi
-    value="10-01-2024 20-01-2024"
-    min="01-01-2024"
-    max="31-12-2024"
-    locale="es"
-  >
-    {{ buttonLeft | safe }}
-    {{ buttonRight | safe }}
-    <div class="flex flex-wrap justify-center gap-lg">
-      <calendar-month></calendar-month>
-    </div>
-  </calendar-multi>
-{% endset %}
-
-{% set calendarRangeExample %}
-  <calendar-range
-    value="10-01-2024/20-01-2024"
-    min="01-01-2024"
-    max="21-12-2024"
-    locale="es"
-  >
-    {{ buttonLeft | safe }}
-    {{ buttonRight | safe }}
-    <div class="flex flex-wrap justify-center gap-lg">
-      <calendar-month></calendar-month>
-    </div>
-  </calendar-range>
-{% endset %}
-
-{% macro calendarRangeExample2(id='id') %}
-  <calendar-range
-    months="2"
-    value="01-01-2025/16-01-2025"
-    min="01-01-2025"
-    max="31-12-2025"
-    locale="es"
-  >
-    {{ buttonLeft | safe }}
-    {{ buttonRight | safe }}
-    {{ headingYears(id) | safe }}
-    <div class="flex flex-wrap justify-center gap-lg">
-      <calendar-month></calendar-month>
-      <calendar-month offset="1"></calendar-month>
-    </div>
-  </calendar-range>
-{% endmacro %}
-
-{% set exampleComponent = "datepicker" %}
-{% set examples =  [
-  {
-    "name": "standalone fecha única",
-    "description": "Usa el parámetro <code>standalone: true</code> para mostrar solo el calendario sin el input. Usa la documentación de la librería <a href='https://wicky.nillia.ms/cally/' class='c-link' title='Se abre en ventana nueva' target='_blank'>Cally<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='0.8em' width='0.8em' class='inline-block mx-xs no-underline align-baseline' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z' clip-rule='evenodd' stroke-width='1'></path></g></svg></a> para añadir el calendario como un caller de este componente.",
-    "data": {
-      "id": "datepicker-date",
-      "standalone": true,
-      "caller": calendarDateExample | safe
-    }
-  },
-  {
-    "name": "standalone fecha única y selector de año",
-    "description": "Usa el parámetro <code>standalone: true</code> para mostrar solo el calendario sin el input. Usa la documentación de la librería <a href='https://wicky.nillia.ms/cally/' class='c-link' title='Se abre en ventana nueva' target='_blank'>Cally<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='0.8em' width='0.8em' class='inline-block mx-xs no-underline align-baseline' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z' clip-rule='evenodd' stroke-width='1'></path></g></svg></a> para añadir el calendario como un caller de este componente. En este ejemplo hemos personalizado el slot 'header' del calendario de Cally para añadirle un componente Select como selector de año.",
-    "data": {
-      "id": "datepicker-years",
-      "standalone": true,
-      "caller": calendarDateYearsExample('datepicker-years') | safe
-    }
-  },
-  {
-    "name": "standalone fechas múltiples",
-    "description": "Usa el parámetro <code>standalone: true</code> para mostrar solo el calendario sin el input. Usa la documentación de la librería <a href='https://wicky.nillia.ms/cally/' class='c-link' title='Se abre en ventana nueva' target='_blank'>Cally<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='0.8em' width='0.8em' class='inline-block mx-xs no-underline align-baseline' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z' clip-rule='evenodd' stroke-width='1'></path></g></svg></a> para añadir el calendario como un caller de este componente. En este ejemplo hemos usado el componente <code>&#x3C;calendar-multi&#x3E;</code> de Cally para se puedan seleccionar múltiples fechas.",
-    "data": {
-      "id": "datepicker-multi",
-      "standalone": true,
-      "caller": calendarMultiExample | safe
-    }
-  },
-  {
-    "name": "standalone rango de fechas",
-    "description": "Usa el parámetro <code>standalone: true</code> para mostrar solo el calendario sin el input. Usa la documentación de la librería <a href='https://wicky.nillia.ms/cally/' class='c-link' title='Se abre en ventana nueva' target='_blank'>Cally<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='0.8em' width='0.8em' class='inline-block mx-xs no-underline align-baseline' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z' clip-rule='evenodd' stroke-width='1'></path></g></svg></a> para añadir el calendario como un caller de este componente. En este ejemplo hemos usado el componente <code>&#x3C;calendar-range&#x3E;</code> de Cally para que tenga un selector de rangos de fecha.",
-    "data": {
-      "id": "datepicker-range",
-      "standalone": true,
-      "caller": calendarRangeExample | safe
-    }
-  },
-  {
-    "name": "standalone rango de fechas 2 meses y selector de año",
-    "description": "Usa el parámetro <code>standalone: true</code> para mostrar solo el calendario sin el input. Usa la documentación de la librería <a href='https://wicky.nillia.ms/cally/' class='c-link' title='Se abre en ventana nueva' target='_blank'>Cally<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='0.8em' width='0.8em' class='inline-block mx-xs no-underline align-baseline' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z' clip-rule='evenodd' stroke-width='1'></path></g></svg></a> para añadir el calendario como un caller de este componente. En este ejemplo hemos usado los componentes <code>&#x3C;calendar-range months='2'&#x3E;</code> y <code>&#x3C;calendar-month offset='1'&#x3E;</code> de Cally para que tenga un selector de rangos de fecha mostrando 2 meses.",
-    "data": {
-      "id": "datepicker-range2",
-      "standalone": true,
-      "caller": calendarRangeExample2('datepicker-range2') | safe
-    }
-  },
-  {
-    "name": "por defecto",
-    "data": {
-      "id": "datepicker-default",
-      "name": "test-name",
-      "label": {
-        "text": "Elige fecha de inicio"
-      },
-      "hint": {
-        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>"
-      },
-      "caller": calendarDateExample | safe
-    }
-  },
-  {
-    "name": "Fechas múltiples",
-    "data": {
-      "id": "datepicker-multiple-dates",
-      "name": "test-name",
-      "label": {
-        "text": "Elige tus días disponibles"
-      },
-      "hint": {
-        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa tus fechas con un espacio."
-      },
-      "value": "10-01-2024 20-01-2024",
-      "caller": calendarMultiExample | safe
-    }
-  },
-  {
-    "name": "Rango de fechas",
-    "data": {
-      "id": "datepicker-range3",
-      "name": "test-name",
-      "label": {
-        "text": "Elige tus días disponibles"
-      },
-      "hint": {
-        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa la fecha inicial de la final con una barra /."
-      },
-      "value": "10-01-2024/20-01-2024",
-      "caller": calendarRangeExample | safe
-    }
-  },
-  {
-    "name": "Rango de fechas 2 meses y selector de año",
-    "data": {
-      "id": "datepicker-with-hint-text-and-year",
-      "name": "test-name",
-      "label": {
-        "text": "Elige tus días disponibles"
-      },
-      "hint": {
-        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa la fecha inicial de la final con una /."
-      },
-      "value": "16-01-2024/04-02-2024",
-      "caller": calendarRangeExample2('datepicker-with-hint-text-and-year') | safe
-    }
-  },
-  {
-    "name": "deshabilitado",
-    "data": {
-      "id": "datepicker-disabled",
-      "name": "test-name",
-      "label": {
-        "text": "Elige fecha de inicio"
-      },
-      "hint": {
-        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>"
-      },
-      "disabled": true,
-      "pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))",
-      "caller": calendarDateExample | safe
-    }
-  },
-  {
-    "name": "Con mensaje de error",
-    "data": {
-      "id": "datepicker-with-error-message",
-      "name": "test-name",
-      "label": {
-        "text": "Elige fecha de inicio"
-      },
-      "hint": {
-        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>"
-      },
-      "errorMessage": {
-        "text": "Error: Esto es un mensaje de error",
-        "classes": "mt-xs"
-      },
-      "pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))",
-      "caller": calendarDateExample | safe
-    }
-  },
-  {
-    "name": "peque",
-    "data": {
-      "id": "datepicker-small",
-      "name": "test-name",
-      "label": {
-        "text": "Elige fecha de inicio",
-        "classes": "text-sm"
-      },
-      "hint": {
-        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>",
-        "classes": "text-sm"
-      },
-      "classes": "c-input--sm",
-      "dropdownClasses": "c-dropdown--sm c-dropdown--transparent",
-      "pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))",
-      "caller": calendarDateExample | safe
-    }
-  },
-  {
-    "name": "Botón personalizado",
-    "description": "Añade parámetros del componente Botón para sustituir el icono del calendario con un botón junto al input.",
-    "data": {
-      "id": "datepicker-with-personalized-button",
-      "name": "test-name",
-      "label": {
-        "text": "Elige fecha de inicio"
-      },
-      "hint": {
-        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>"
-      },
-      "dropdown": {
-        "html": "Seleccionar fecha<span class='sr-only'> con tabla de calendario</span>"
-      },
-      "classes": "flex-1",
-      "pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))",
-      "caller": calendarDateExample | safe
-    }
-  },
-  {
-    "name": "Botón personalizado pequeño",
-    "description": "Usamos los parámetros del componente Botón para personalizarlo, en este ejemplo botón peque.",
-    "data": {
-      "id": "datepicker-with-button-small",
-      "name": "test-name",
-      "label": {
-        "text": "Elige fecha de inicio",
-        "classes": "text-sm"
-      },
-      "hint": {
-        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>",
-        "classes": "text-sm"
-      },
-      "dropdown": {
-        "html": "Seleccionar fecha<span class='sr-only'> con tabla de calendario</span>",
-        "classes": "c-dropdown--sm"
-      },
-      "classes": "flex-1 c-input--sm",
-      "pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))",
-      "caller": calendarDateExample | safe
-    }
-  }
+{% from "components/button/_macro.button.njk" import componentButton %}
+{% from "components/select/_macro.select.njk" import componentSelect %}
+
+{% macro headingYears(id='id') %}
+  <div slot="heading" class="order-first w-full flex justify-center">
+    {{ componentSelect({
+      "id": "select-years-" + id,
+      "name": "select-years-" + id,
+      "formGroup": {
+        "classes": "-mb-12"
+      },
+      "classes": "c-select--sm w-full",
+      "label": {
+        "text": "Selecciona un año para cargar sus datos",
+        "classes": "max-w-40 text-sm"
+      },
+      "items": [
+        {
+          "value": 2024,
+          "text": "2024",
+          "selected": true
+        },
+        {
+          "value": 2025,
+          "text": "2025"
+        },
+        {
+          "value": 2026,
+          "text": "2026"
+        }
+      ]
+    }) }}
+  </div>
+{% endmacro %}
+
+{% set buttonLeft %}
+  <div slot="previous">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes anterior"><path d="M4.00001 7.97945C4.00001 7.63023 4.14967 7.3309 4.39911 7.13135L9.93669 2.19243C10.3358 1.8931 10.9345 1.94298 11.2338 2.34209C11.5331 2.74119 11.5331 3.28996 11.134 3.58929L6.24497 7.87967C6.19508 7.92956 6.19508 7.97945 6.24497 8.07922L11.134 12.3696C11.5331 12.7188 11.583 13.2676 11.2338 13.6667C10.8846 14.0658 10.3358 14.1157 9.93669 13.7665C9.93669 13.7665 9.93669 13.7665 9.8868 13.7166L4.34922 8.82754C4.14967 8.62799 4.00001 8.27877 4.00001 7.97945Z" fill="currentColor"></path></svg>
+  </div>
+{% endset %}
+
+{% set buttonRight %}
+  <div slot="next">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes siguiente"><path d="M11.4673 8.02055C11.4673 8.36977 11.3176 8.6691 11.0682 8.86865L5.53062 13.8076C5.13152 14.1069 4.53286 14.057 4.23353 13.6579C3.9342 13.2588 3.9342 12.71 4.33331 12.4107L9.22234 8.12033C9.27223 8.07044 9.27223 8.02055 9.22234 7.92078L4.33331 3.6304C3.9342 3.28118 3.88432 2.73241 4.23353 2.33331C4.58275 1.9342 5.13152 1.88432 5.53062 2.23353C5.53062 2.23353 5.53062 2.23353 5.58051 2.28342L11.1181 7.17246C11.3176 7.37201 11.4673 7.72123 11.4673 8.02055Z" fill="currentColor"></path></svg>
+  </div>
+{% endset %}
+
+{% set calendarDateExample %}
+  <calendar-date
+    min="01-01-2024"
+    max="01-01-2025"
+    locale="es"
+    format="DD-MM-YYYY"
+  >
+    {{ buttonLeft | safe }}
+    {{ buttonRight | safe }}
+    <div class="flex flex-wrap justify-center gap-lg">
+      <calendar-month></calendar-month>
+    </div>
+  </calendar-date>
+{% endset %}
+
+{% macro calendarDateYearsExample(id='id') %}
+  <calendar-date
+    value="01-10-2024"
+    min="01-01-2024"
+    max="12-31-2024"
+    locale="es"
+  >
+    {{ buttonLeft | safe }}
+    {{ buttonRight | safe }}
+    {{ headingYears(id) | safe }}
+    <div class="flex flex-wrap justify-center gap-lg">
+      <calendar-month></calendar-month>
+    </div>
+  </calendar-date>
+{% endmacro %}
+
+{% set calendarMultiExample %}
+  <calendar-multi
+    value="10-01-2024 20-01-2024"
+    min="01-01-2024"
+    max="31-12-2024"
+    locale="es"
+  >
+    {{ buttonLeft | safe }}
+    {{ buttonRight | safe }}
+    <div class="flex flex-wrap justify-center gap-lg">
+      <calendar-month></calendar-month>
+    </div>
+  </calendar-multi>
+{% endset %}
+
+{% set calendarRangeExample %}
+  <calendar-range
+    value="10-01-2024/20-01-2024"
+    min="01-01-2024"
+    max="21-12-2024"
+    locale="es"
+  >
+    {{ buttonLeft | safe }}
+    {{ buttonRight | safe }}
+    <div class="flex flex-wrap justify-center gap-lg">
+      <calendar-month></calendar-month>
+    </div>
+  </calendar-range>
+{% endset %}
+
+{% macro calendarRangeExample2(id='id') %}
+  <calendar-range
+    months="2"
+    value="01-01-2025/16-01-2025"
+    min="01-01-2025"
+    max="31-12-2025"
+    locale="es"
+  >
+    {{ buttonLeft | safe }}
+    {{ buttonRight | safe }}
+    {{ headingYears(id) | safe }}
+    <div class="flex flex-wrap justify-center gap-lg">
+      <calendar-month></calendar-month>
+      <calendar-month offset="1"></calendar-month>
+    </div>
+  </calendar-range>
+{% endmacro %}
+
+{% set exampleComponent = "datepicker" %}
+{% set examples =  [
+  {
+    "name": "standalone fecha única",
+    "description": "Usa el parámetro <code>standalone: true</code> para mostrar solo el calendario sin el input. Usa la documentación de la librería <a href='https://wicky.nillia.ms/cally/' class='c-link' title='Se abre en ventana nueva' target='_blank'>Cally<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='0.8em' width='0.8em' class='inline-block mx-xs no-underline align-baseline' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z' clip-rule='evenodd' stroke-width='1'></path></g></svg></a> para añadir el calendario como un caller de este componente.",
+    "data": {
+      "id": "datepicker-date",
+      "standalone": true,
+      "caller": calendarDateExample | safe
+    }
+  },
+  {
+    "name": "standalone fecha única y selector de año",
+    "description": "Usa el parámetro <code>standalone: true</code> para mostrar solo el calendario sin el input. Usa la documentación de la librería <a href='https://wicky.nillia.ms/cally/' class='c-link' title='Se abre en ventana nueva' target='_blank'>Cally<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='0.8em' width='0.8em' class='inline-block mx-xs no-underline align-baseline' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z' clip-rule='evenodd' stroke-width='1'></path></g></svg></a> para añadir el calendario como un caller de este componente. En este ejemplo hemos personalizado el slot 'header' del calendario de Cally para añadirle un componente Select como selector de año.",
+    "data": {
+      "id": "datepicker-years",
+      "standalone": true,
+      "caller": calendarDateYearsExample('datepicker-years') | safe
+    }
+  },
+  {
+    "name": "standalone fechas múltiples",
+    "description": "Usa el parámetro <code>standalone: true</code> para mostrar solo el calendario sin el input. Usa la documentación de la librería <a href='https://wicky.nillia.ms/cally/' class='c-link' title='Se abre en ventana nueva' target='_blank'>Cally<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='0.8em' width='0.8em' class='inline-block mx-xs no-underline align-baseline' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z' clip-rule='evenodd' stroke-width='1'></path></g></svg></a> para añadir el calendario como un caller de este componente. En este ejemplo hemos usado el componente <code>&#x3C;calendar-multi&#x3E;</code> de Cally para se puedan seleccionar múltiples fechas.",
+    "data": {
+      "id": "datepicker-multi",
+      "standalone": true,
+      "caller": calendarMultiExample | safe
+    }
+  },
+  {
+    "name": "standalone rango de fechas",
+    "description": "Usa el parámetro <code>standalone: true</code> para mostrar solo el calendario sin el input. Usa la documentación de la librería <a href='https://wicky.nillia.ms/cally/' class='c-link' title='Se abre en ventana nueva' target='_blank'>Cally<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='0.8em' width='0.8em' class='inline-block mx-xs no-underline align-baseline' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z' clip-rule='evenodd' stroke-width='1'></path></g></svg></a> para añadir el calendario como un caller de este componente. En este ejemplo hemos usado el componente <code>&#x3C;calendar-range&#x3E;</code> de Cally para que tenga un selector de rangos de fecha.",
+    "data": {
+      "id": "datepicker-range",
+      "standalone": true,
+      "caller": calendarRangeExample | safe
+    }
+  },
+  {
+    "name": "standalone rango de fechas 2 meses y selector de año",
+    "description": "Usa el parámetro <code>standalone: true</code> para mostrar solo el calendario sin el input. Usa la documentación de la librería <a href='https://wicky.nillia.ms/cally/' class='c-link' title='Se abre en ventana nueva' target='_blank'>Cally<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='0.8em' width='0.8em' class='inline-block mx-xs no-underline align-baseline' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z' clip-rule='evenodd' stroke-width='1'></path></g></svg></a> para añadir el calendario como un caller de este componente. En este ejemplo hemos usado los componentes <code>&#x3C;calendar-range months='2'&#x3E;</code> y <code>&#x3C;calendar-month offset='1'&#x3E;</code> de Cally para que tenga un selector de rangos de fecha mostrando 2 meses.",
+    "data": {
+      "id": "datepicker-range2",
+      "standalone": true,
+      "caller": calendarRangeExample2('datepicker-range2') | safe
+    }
+  },
+  {
+    "name": "por defecto",
+    "data": {
+      "id": "datepicker-default",
+      "name": "test-name",
+      "label": {
+        "text": "Elige fecha de inicio"
+      },
+      "hint": {
+        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>"
+      },
+      "caller": calendarDateExample | safe
+    }
+  },
+  {
+    "name": "Fechas múltiples",
+    "data": {
+      "id": "datepicker-multiple-dates",
+      "name": "test-name",
+      "label": {
+        "text": "Elige tus días disponibles"
+      },
+      "hint": {
+        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa tus fechas con un espacio."
+      },
+      "value": "10-01-2024 20-01-2024",
+      "caller": calendarMultiExample | safe
+    }
+  },
+  {
+    "name": "Rango de fechas",
+    "data": {
+      "id": "datepicker-range3",
+      "name": "test-name",
+      "label": {
+        "text": "Elige tus días disponibles"
+      },
+      "hint": {
+        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa la fecha inicial de la final con una barra /."
+      },
+      "value": "10-01-2024/20-01-2024",
+      "caller": calendarRangeExample | safe
+    }
+  },
+  {
+    "name": "Rango de fechas 2 meses y selector de año",
+    "data": {
+      "id": "datepicker-with-hint-text-and-year",
+      "name": "test-name",
+      "label": {
+        "text": "Elige tus días disponibles"
+      },
+      "hint": {
+        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa la fecha inicial de la final con una /."
+      },
+      "value": "16-01-2024/04-02-2024",
+      "caller": calendarRangeExample2('datepicker-with-hint-text-and-year') | safe
+    }
+  },
+  {
+    "name": "deshabilitado",
+    "data": {
+      "id": "datepicker-disabled",
+      "name": "test-name",
+      "label": {
+        "text": "Elige fecha de inicio"
+      },
+      "hint": {
+        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>"
+      },
+      "disabled": true,
+      "pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))",
+      "caller": calendarDateExample | safe
+    }
+  },
+  {
+    "name": "Con mensaje de error",
+    "data": {
+      "id": "datepicker-with-error-message",
+      "name": "test-name",
+      "label": {
+        "text": "Elige fecha de inicio"
+      },
+      "hint": {
+        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>"
+      },
+      "errorMessage": {
+        "text": "Error: Esto es un mensaje de error",
+        "classes": "mt-xs"
+      },
+      "pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))",
+      "caller": calendarDateExample | safe
+    }
+  },
+  {
+    "name": "peque",
+    "data": {
+      "id": "datepicker-small",
+      "name": "test-name",
+      "label": {
+        "text": "Elige fecha de inicio",
+        "classes": "text-sm"
+      },
+      "hint": {
+        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>",
+        "classes": "text-sm"
+      },
+      "classes": "c-input--sm",
+      "dropdownClasses": "c-dropdown--sm c-dropdown--transparent",
+      "pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))",
+      "caller": calendarDateExample | safe
+    }
+  },
+  {
+    "name": "Botón personalizado",
+    "description": "Añade parámetros del componente Botón para sustituir el icono del calendario con un botón junto al input.",
+    "data": {
+      "id": "datepicker-with-personalized-button",
+      "name": "test-name",
+      "label": {
+        "text": "Elige fecha de inicio"
+      },
+      "hint": {
+        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>"
+      },
+      "dropdown": {
+        "html": "Seleccionar fecha<span class='sr-only'> con tabla de calendario</span>"
+      },
+      "classes": "flex-1",
+      "pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))",
+      "caller": calendarDateExample | safe
+    }
+  },
+  {
+    "name": "Botón personalizado pequeño",
+    "description": "Usamos los parámetros del componente Botón para personalizarlo, en este ejemplo botón peque.",
+    "data": {
+      "id": "datepicker-with-button-small",
+      "name": "test-name",
+      "label": {
+        "text": "Elige fecha de inicio",
+        "classes": "text-sm"
+      },
+      "hint": {
+        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>",
+        "classes": "text-sm"
+      },
+      "dropdown": {
+        "html": "Seleccionar fecha<span class='sr-only'> con tabla de calendario</span>",
+        "classes": "c-dropdown--sm"
+      },
+      "classes": "flex-1 c-input--sm",
+      "pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))",
+      "caller": calendarDateExample | safe
+    }
+  }
 ] %}