desy-html 12.0.0 → 12.1.0

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

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

package/src/templates/components/datepicker/_styles.datepicker.css

@@ -1,89 +1,89 @@
-/* ==========================================================================
-   _styles.datepicker.css
-   ========================================================================== */
-
-@layer components {
-  .c-datepicker {
-    calendar-month {
-      --color-accent: theme(colors.primary.base);
-      --color-text-on-accent: theme(colors.white);
-
-      &::part(button){
-        @apply mx-px;
-        @apply rounded;
-
-        &:focus-visible {
-          @apply focus:bg-warning-base;
-          @apply focus:border-warning-base;
-          @apply focus:shadow-outline-black;
-          @apply focus:text-black;
-          @apply focus:outline-none;
-        }
-      }
-
-      &::part(today){
-        @apply font-bold underline;
-      }
-    }
-
-    calendar-date,
-    calendar-range,
-    calendar-multi {
-      &::part(header){
-        @apply flex;
-        @apply flex-wrap;
-        @apply gap-base;
-      }
-
-      &::part(next),
-      &::part(previous)  {
-        @apply inline-flex;
-        @apply items-baseline;
-        @apply px-3;
-        @apply py-2;
-        @apply bg-white;
-        @apply border;
-        @apply border-primary-base;
-        @apply rounded;
-        @apply align-baseline;
-        @apply font-semibold;
-        @apply text-primary-base;
-        @apply transition-all;
-        @apply duration-100;
-        @apply ease-out;
-        @apply whitespace-nowrap;
-        @apply cursor-pointer;
-
-        @apply focus:bg-warning-base;
-        @apply focus:border-warning-base;
-        @apply focus:shadow-outline-black;
-        @apply focus:text-black;
-        @apply focus:outline-none;
-
-        &:hover:not(disabled),
-        &:active:not(disabled) {
-          @apply bg-neutral-light;
-          @apply border-primary-base;
-          @apply text-primary-base;
-        }
-
-        &:active:not(disabled) {
-          @apply relative;
-          @apply top-px;
-        }
-
-        &[disabled],
-        &[disabled]:hover,
-        &[disabled]:focus {
-          @apply bg-white;
-          @apply opacity-50;
-          @apply cursor-not-allowed;
-        }
-
-        @apply px-2;
-        @apply py-1;
-        @apply text-sm;
-      }
-    }
-  }
-}
+/* ==========================================================================
+   _styles.datepicker.css
+   ========================================================================== */
+
+@layer components {
+  .c-datepicker {
+    calendar-month {
+      --color-accent: theme(colors.primary.base);
+      --color-text-on-accent: theme(colors.white);
+
+      &::part(button){
+        @apply mx-px;
+        @apply rounded;
+
+        &:focus-visible {
+          @apply focus:bg-warning-base;
+          @apply focus:border-warning-base;
+          @apply focus:shadow-outline-black;
+          @apply focus:text-black;
+          @apply focus:outline-none;
+        }
+      }
+
+      &::part(today){
+        @apply font-bold underline;
+      }
+    }
+
+    calendar-date,
+    calendar-range,
+    calendar-multi {
+      &::part(header){
+        @apply flex;
+        @apply flex-wrap;
+        @apply gap-base;
+      }
+
+      &::part(next),
+      &::part(previous)  {
+        @apply inline-flex;
+        @apply items-baseline;
+        @apply px-3;
+        @apply py-2;
+        @apply bg-white;
+        @apply border;
+        @apply border-primary-base;
+        @apply rounded;
+        @apply align-baseline;
+        @apply font-semibold;
+        @apply text-primary-base;
+        @apply transition-all;
+        @apply duration-100;
+        @apply ease-out;
+        @apply whitespace-nowrap;
+        @apply cursor-pointer;
+
+        @apply focus:bg-warning-base;
+        @apply focus:border-warning-base;
+        @apply focus:shadow-outline-black;
+        @apply focus:text-black;
+        @apply focus:outline-none;
+
+        &:hover:not(disabled),
+        &:active:not(disabled) {
+          @apply bg-neutral-light;
+          @apply border-primary-base;
+          @apply text-primary-base;
+        }
+
+        &:active:not(disabled) {
+          @apply relative;
+          @apply top-px;
+        }
+
+        &[disabled],
+        &[disabled]:hover,
+        &[disabled]:focus {
+          @apply bg-white;
+          @apply opacity-50;
+          @apply cursor-not-allowed;
+        }
+
+        @apply px-2;
+        @apply py-1;
+        @apply text-sm;
+      }
+    }
+  }
+}

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

@@ -1,132 +1,132 @@
-{% from "components/button/_macro.button.njk" import componentButton %}
-{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
-{% from "../error-message/_macro.error-message.njk" import componentErrorMessage -%}
-{% from "../hint/_macro.hint.njk" import componentHint %}
-{% from "../input/_macro.input.njk" import componentInput %}
-{% from "../label/_macro.label.njk" import componentLabel %}
-
-{% set describedBy = params.describedBy if params.describedBy else "" %}
-{% if params.errorMessage %}
-  {% set errorId = params.id + '-error' %}
-  {% set describedBy = describedBy + " " + errorId if describedBy else errorId %}
-{% endif %}
-{% set datepickerContent %}
-  {% if caller %}
-    {% set myCaller = caller() %}
-    {% if myCaller | string != '' %}
-  <div class="p-sm overflow-x-auto">
-    {{ myCaller }}
-  </div>
-    {% endif %}
-  {% elseif params.caller %}
-  <div class="p-sm overflow-x-auto">
-    {{ params.caller | safe }}
-  </div>
-  {% endif %}
-{% endset %}
-
-<!-- datepicker -->
-<div data-module="c-datepicker" class="c-datepicker {%- if params.containerClasses %} {{ params.containerClasses }}{% endif %}" {%- for attribute, value in params.containerAttributes %} {{attribute}}="{{value}}"{% endfor %}>
-  {% if params.standalone %}
-    {{ datepickerContent | safe }}
-  {% else %}
-    <div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
-      {{ componentLabel({
-        html: params.label.html,
-        text: params.label.text,
-        classes: params.label.classes,
-        isPageHeading: params.label.isPageHeading,
-        attributes: params.label.attributes,
-        for: params.id
-      }) }}
-    {% if params.hint %}
-      {% set hintId = params.id + '-hint' %}
-      {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
-      {{ componentHint({
-        id: hintId,
-        classes: params.hint.classes,
-        attributes: params.hint.attributes,
-        html: params.hint.html,
-        text: params.hint.text
-      }) }}
-    {% endif %}
-    {% if params.errorMessage %}
-      {% if not params.errorId %}
-      {% set errorId = params.id + '-error' %}
-      {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
-      {% endif %}
-      {{ componentErrorMessage({
-        id: errorId,
-        classes: params.errorMessage.classes,
-        attributes: params.errorMessage.attributes,
-        html: params.errorMessage.html,
-        text: params.errorMessage.text,
-        visuallyHiddenText: params.errorMessage.visuallyHiddenText
-      }) }}
-    {% endif %}
-    <div class="relative {%- if params.dropdown %} flex flex-wrap items-end gap-sm{% endif %}">
-      <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base {%- if not params.dropdown %} pr-16 w-full{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} border-alert-base ring-2 ring-alert-base {% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
-        {%- if params.value %} value="{{ params.value}}"{% endif %}
-        {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
-        {%- if params.errorMessage or params.errorId %} aria-errormessage="{{ errorId }}" aria-invalid="true" {%- if not describedBy %} aria-describedby="{{ errorId }}"{% endif %}{% endif %}
-        {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
-        {%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
-        {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
-        {%- if params.placeholder %} placeholder="{{ params.placeholder }}"{% endif %}
-        {{-" disabled" if params.disabled }}
-        {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-      {% set dropdownActionButtons %}
-        <ul class="flex flex-wrap justify-between gap-sm p-sm">
-          <li>
-            {{ componentButton({
-              "text": "Aceptar",
-              "classes": "c-button--primary c-button--sm",
-              "attributes": {
-                "id": params.id + "-submit"
-              }
-            }) }}
-          </li>
-          <li>
-            {{ componentButton({
-              "text": "Cancelar",
-              "classes": " c-button--sm",
-              "attributes": {
-                "id": params.id + "-cancel"
-              }
-            }) }}
-          </li>
-        </ul>
-      {% endset %}
-      {% if params.dropdown %}
-        {% call componentDropdown(params.dropdown) %}
-          {{ datepickerContent | safe }}
-          {{ dropdownActionButtons | safe }}
-        {% endcall  %}
-      {% else %}
-        <div class="absolute top-0 right-0">
-          {% call componentDropdown({
-            "html": "<span class='sr-only'>Seleccionar fecha con una tabla de calendario</span><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' width='1.375em' height='1.375em' aria-hidden='true'><g><path fill='currentColor' fill-rule='evenodd' d='M4.5 1.5c0 -0.552285 -0.44772 -1 -1 -1s-1 0.447715 -1 1v1H2C1.17157 2.5 0.5 3.17157 0.5 4v8c0 0.8284 0.67157 1.5 1.5 1.5h10c0.8284 0 1.5 -0.6716 1.5 -1.5V4c0 -0.82843 -0.6716 -1.5 -1.5 -1.5h-0.5v-1c0 -0.552285 -0.4477 -1 -1 -1 -0.55229 0 -1 0.447715 -1 1v1h-5v-1Zm-1 5.75c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm3.5 0c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm-2.5 3c0 0.5523 -0.44772 1 -1 1s-1 -0.4477 -1 -1c0 -0.55229 0.44772 -1 1 -1s1 0.44771 1 1Zm2.5 1c0.55228 0 1 -0.4477 1 -1 0 -0.55229 -0.44772 -1 -1 -1s-1 0.44771 -1 1c0 0.5523 0.44772 1 1 1Zm4.5 -5c0 0.55228 -0.4477 1 -1 1 -0.55229 0 -1 -0.44772 -1 -1s0.44771 -1 1 -1c0.5523 0 1 0.44772 1 1Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
-            "classes": params.dropdownClasses if params.dropdownClasses else "c-dropdown--transparent",
-            "disabled": params.disabled,
-            "attributes": {
-              "id": params.id + "-dropdown",
-              "data-aria-haspopup": "dialog",
-              "data-role": "dialog",
-              "data-aria-modal": "false",
-              "data-aria-label": "Selección de fecha"
-            }
-          }) %}
-            {{ datepickerContent | safe }}
-            {{ dropdownActionButtons | safe }}
-          {% endcall  %}
-          {# Change the dropdown aria-haspopup="true" to "dialog" #}
-          <script>
-              document.getElementById('{{params.id}}-dropdown').setAttribute('aria-haspopup', 'dialog');
-          </script>
-        </div>
-      {% endif %}
-    </div>
-  </div>
-  {% endif %}
-</div>
+{% from "components/button/_macro.button.njk" import componentButton %}
+{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
+{% from "../error-message/_macro.error-message.njk" import componentErrorMessage -%}
+{% from "../hint/_macro.hint.njk" import componentHint %}
+{% from "../input/_macro.input.njk" import componentInput %}
+{% from "../label/_macro.label.njk" import componentLabel %}
+
+{% set describedBy = params.describedBy if params.describedBy else "" %}
+{% if params.errorMessage %}
+  {% set errorId = params.id + '-error' %}
+  {% set describedBy = describedBy + " " + errorId if describedBy else errorId %}
+{% endif %}
+{% set datepickerContent %}
+  {% if caller %}
+    {% set myCaller = caller() %}
+    {% if myCaller | string != '' %}
+  <div class="p-sm overflow-x-auto">
+    {{ myCaller }}
+  </div>
+    {% endif %}
+  {% elseif params.caller %}
+  <div class="p-sm overflow-x-auto">
+    {{ params.caller | safe }}
+  </div>
+  {% endif %}
+{% endset %}
+
+<!-- datepicker -->
+<div data-module="c-datepicker" class="c-datepicker {%- if params.containerClasses %} {{ params.containerClasses }}{% endif %}" {%- for attribute, value in params.containerAttributes %} {{attribute}}="{{value}}"{% endfor %}>
+  {% if params.standalone %}
+    {{ datepickerContent | safe }}
+  {% else %}
+    <div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+      {{ componentLabel({
+        html: params.label.html,
+        text: params.label.text,
+        classes: params.label.classes,
+        isPageHeading: params.label.isPageHeading,
+        attributes: params.label.attributes,
+        for: params.id
+      }) }}
+    {% if params.hint %}
+      {% set hintId = params.id + '-hint' %}
+      {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
+      {{ componentHint({
+        id: hintId,
+        classes: params.hint.classes,
+        attributes: params.hint.attributes,
+        html: params.hint.html,
+        text: params.hint.text
+      }) }}
+    {% endif %}
+    {% if params.errorMessage %}
+      {% if not params.errorId %}
+      {% set errorId = params.id + '-error' %}
+      {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
+      {% endif %}
+      {{ componentErrorMessage({
+        id: errorId,
+        classes: params.errorMessage.classes,
+        attributes: params.errorMessage.attributes,
+        html: params.errorMessage.html,
+        text: params.errorMessage.text,
+        visuallyHiddenText: params.errorMessage.visuallyHiddenText
+      }) }}
+    {% endif %}
+    <div class="relative {%- if params.dropdown %} flex flex-wrap items-end gap-sm{% endif %}">
+      <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base {%- if not params.dropdown %} pr-16 w-full{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} border-alert-base ring-2 ring-alert-base {% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
+        {%- if params.value %} value="{{ params.value}}"{% endif %}
+        {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
+        {%- if params.errorMessage or params.errorId %} aria-errormessage="{{ errorId }}" aria-invalid="true" {%- if not describedBy %} aria-describedby="{{ errorId }}"{% endif %}{% endif %}
+        {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
+        {%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
+        {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
+        {%- if params.placeholder %} placeholder="{{ params.placeholder }}"{% endif %}
+        {{-" disabled" if params.disabled }}
+        {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+      {% set dropdownActionButtons %}
+        <ul class="flex flex-wrap justify-between gap-sm p-sm">
+          <li>
+            {{ componentButton({
+              "text": "Aceptar",
+              "classes": "c-button--primary c-button--sm",
+              "attributes": {
+                "id": params.id + "-submit"
+              }
+            }) }}
+          </li>
+          <li>
+            {{ componentButton({
+              "text": "Cancelar",
+              "classes": " c-button--sm",
+              "attributes": {
+                "id": params.id + "-cancel"
+              }
+            }) }}
+          </li>
+        </ul>
+      {% endset %}
+      {% if params.dropdown %}
+        {% call componentDropdown(params.dropdown) %}
+          {{ datepickerContent | safe }}
+          {{ dropdownActionButtons | safe }}
+        {% endcall  %}
+      {% else %}
+        <div class="absolute top-0 right-0">
+          {% call componentDropdown({
+            "html": "<span class='sr-only'>Seleccionar fecha con una tabla de calendario</span><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' width='1.375em' height='1.375em' aria-hidden='true'><g><path fill='currentColor' fill-rule='evenodd' d='M4.5 1.5c0 -0.552285 -0.44772 -1 -1 -1s-1 0.447715 -1 1v1H2C1.17157 2.5 0.5 3.17157 0.5 4v8c0 0.8284 0.67157 1.5 1.5 1.5h10c0.8284 0 1.5 -0.6716 1.5 -1.5V4c0 -0.82843 -0.6716 -1.5 -1.5 -1.5h-0.5v-1c0 -0.552285 -0.4477 -1 -1 -1 -0.55229 0 -1 0.447715 -1 1v1h-5v-1Zm-1 5.75c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm3.5 0c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm-2.5 3c0 0.5523 -0.44772 1 -1 1s-1 -0.4477 -1 -1c0 -0.55229 0.44772 -1 1 -1s1 0.44771 1 1Zm2.5 1c0.55228 0 1 -0.4477 1 -1 0 -0.55229 -0.44772 -1 -1 -1s-1 0.44771 -1 1c0 0.5523 0.44772 1 1 1Zm4.5 -5c0 0.55228 -0.4477 1 -1 1 -0.55229 0 -1 -0.44772 -1 -1s0.44771 -1 1 -1c0.5523 0 1 0.44772 1 1Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
+            "classes": params.dropdownClasses if params.dropdownClasses else "c-dropdown--transparent",
+            "disabled": params.disabled,
+            "attributes": {
+              "id": params.id + "-dropdown",
+              "data-aria-haspopup": "dialog",
+              "data-role": "dialog",
+              "data-aria-modal": "false",
+              "data-aria-label": "Selección de fecha"
+            }
+          }) %}
+            {{ datepickerContent | safe }}
+            {{ dropdownActionButtons | safe }}
+          {% endcall  %}
+          {# Change the dropdown aria-haspopup="true" to "dialog" #}
+          <script>
+              document.getElementById('{{params.id}}-dropdown').setAttribute('aria-haspopup', 'dialog');
+          </script>
+        </div>
+      {% endif %}
+    </div>
+  </div>
+  {% endif %}
+</div>
 <!-- /datepicker -->