desy-html 5.3.0 → 6.2.0

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

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

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

@@ -0,0 +1,146 @@
+{% from "../skip-link/_macro.skip-link.njk" import componentSkipLink %}
+{% from "../header-mini/_macro.header-mini.njk" import componentHeaderMini %}
+{% from "../header/_macro.header.header__navigation.njk" import componentHeaderNavigation %}
+{% from "../header/_macro.header.header__dropdown.njk" import componentHeaderDropdown %}
+{% from "../nav/_macro.nav.njk" import componentNav %}
+{% from "../header/_macro.header.header__offcanvasButton.njk" import componentHeaderOffcanvasButton %}
+{% from "../header/_macro.header.header__offcanvas.njk" import componentOffcanvas %}
+
+<!-- header-advanced -->
+<header {%- if params.classes %} class="{{ params.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  <div  {%- if params.containerClasses %} class="{{ params.containerClasses }}"{% endif %}>
+    <nav aria-labelledby="{% if params.skipLink.attributes.id %}{{ params.skipLink.attributes.id }}{% else %}skip-link{% endif %}">
+      {{ componentSkipLink({
+        classes: params.skipLink.classes if params.skipLink.classes,
+        attributes: params.skipLink.attributes if params.skipLink.attributes else { "id": "skip-link" },
+        html: params.skipLink.html if params.skipLink.html,
+        text: params.skipLink.text if params.skipLink.text else "Saltar al contenido principal",
+        href: params.skipLink.href if params.skipLink.href else "#content"
+      })  }}
+    </nav>
+    {% if params.headerMini %}
+      {{ componentHeaderMini(params.headerMini)  }}
+    {% else %}
+      {{ componentHeaderMini({})  }}
+    {% endif %}
+    {% if params.super %}
+      {% if params.super.customHtml %}
+        {{ params.super.customHtml }}
+      {% else %}
+        <div class="{% if params.super.classes %}{{ params.super.classes }}{% else-%} hidden lg:block h-32 bg-cover bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.super.backgroundFullColor }}; {% if params.super.backgroundFullUrl %} background-image: url('{{ params.super.backgroundFullUrl }}'){% endif %}">
+          <div class="container h-full mx-auto px-base">
+            <div class="relative h-full bg-cover bg-no-repeat" {% if params.super.backgroundContainerUrl %} style="background-image: url('{{ params.super.backgroundContainerUrl }}')"{% endif %}>
+              {% if params.super.logo %}
+                <a href="{{ params.super.logo.href | default('/') }}" class="{% if params.super.logo.classes %}{{ params.super.logo.classes }}{% else-%} absolute top-6 left-0 focus:outline-none focus:shadow-outline-black{% endif %}">
+                  <img src="{{ params.super.logo.url}}" alt="{{ params.super.logo.alt}}">
+                </a>
+              {% endif %}
+              {{ params.super.customNavigationHtml | safe if params.super.customNavigationHtml }}
+            </div>
+          </div>
+        </div>
+      {% endif %}
+    {% endif %}
+    {% if params.noTitle != true %}
+      <div class="hidden lg:block bg-neutral-lighter">
+        <div class="container mx-auto px-base">
+          <div class="flex">
+            <h2 class="flex items-center text-2xl font-semibold">
+              <a href="{{ params.title.homepageUrl | default('/') }}" class="inline-block my-base hover:underline focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base" title="Ir a la página de inicio">{{ params.title.html | safe if params.title.html else params.title.text }}</a>
+            </h2>
+            {{ params.title.customNavigationHtml | safe if params.title.customNavigationHtml }}
+          </div>
+        </div>
+      </div>
+    {% endif %}
+    <div class="bg-neutral-lighter border-b border-neutral-base" x-data="{ isOn: false }" >
+      <div class="container mx-auto px-base">
+        <div class="flex items-center justify-between min-h-14">
+          <div class="flex flex-wrap items-center">
+            <div class="flex-1 lg:hidden">
+              <h2 class="text-base">
+                <a href="{{ params.title.homepageUrl | default('/') }}" class="inline-block my-base underline focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base" title="Ir a la página de inicio">{{ params.title.html | safe if params.title.html else params.title.text }}</a>
+              </h2>
+            </div>
+            {% if params.navigation.items %}
+              <div class="-ml-base">
+                {{ componentHeaderNavigation({
+                  classes: params.navigation.classes,
+                  idPrefix: "header-nav-item",
+                  items: params.navigation.items,
+                  attributes: {
+                    "aria-label": "Menú principal"
+                  }
+                }) | indent(12) }}
+              </div>
+            {% endif %}
+          </div>
+          {{ params.customNavigationHtml | safe if params.customNavigationHtml }}
+          {% if params.dropdown.items or params.dropdown.contentHtml %}
+          {% call componentHeaderDropdown({
+            "text": params.dropdown.text,
+            "html": params.dropdown.html,
+            "hiddenText": params.dropdown.hiddenText,
+            "classesContainer": params.dropdown.classesContainer if params.dropdown.classesContainer else "hidden lg:block",
+            "classesTooltip": params.dropdown.classesTooltip,
+            "classes": params.dropdown.classes if params.dropdown.classes else "c-dropdown--header",
+            "attributes": params.dropdown.attributes
+          }) %}
+            {% if params.dropdown.contentHtml %}
+              {{ params.dropdown.contentHtml | safe }}
+            {% else %}
+              {{ componentNav({
+                isMenu: true,
+                idPrefix: "header-dropdown-nav-item",
+                items: params.dropdown.items,
+                classes: "w-max max-w-64",
+                attributes: {
+                  "id": "id-dropdown-nav",
+                  "aria-label": "Menú de usuario"
+                }
+              }) }}
+            {% endif %}
+          {% endcall %}
+          {% endif %}
+          {% if params.offcanvas %}
+          {{ componentHeaderOffcanvasButton({
+            text: params.offcanvas.text,
+            classes: params.offcanvas.classes
+          }) | indent(14) }}
+          {% endif %}
+        </div>
+      </div>
+      {% if params.offcanvas %}
+      {% call componentOffcanvas({
+        text: params.offcanvas.textClose,
+        labelledId: params.offcanvas.labelledId
+      }) %}
+        {% if caller %}
+        {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
+        {% elseif params.caller %}
+        {{ params.caller | safe }}
+        {% endif %}
+      {% endcall %}
+      {% endif %}
+    </div>
+    {% if params.sub %}
+      {% if params.sub.customHtml %}
+        {{ params.sub.customHtml }}
+      {% else %}
+        <div class="{% if params.sub.classes %}{{ params.sub.classes }}{% else-%} hidden lg:block h-32 bg-cover bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.sub.backgroundFullColor }}; {% if params.sub.backgroundFullUrl %} background-image: url('{{ params.sub.backgroundFullUrl }}'){% endif %}">
+          <div class="container h-full mx-auto px-base">
+            <div class="relative h-full bg-cover bg-no-repeat" {% if params.sub.backgroundContainerUrl %} style="background-image: url('{{ params.sub.backgroundContainerUrl }}')"{% endif %}>
+              {% if params.sub.logo %}
+                <a href="{{ params.sub.logo.href | default('/') }}" class="{% if params.sub.logo.classes %}{{ params.sub.logo.classes }}{% else-%} absolute top-6 left-0 focus:outline-none focus:shadow-outline-black{% endif %}">
+                  <img src="{{ params.sub.logo.url}}" alt="{{ params.sub.logo.alt}}">
+                </a>
+              {% endif %}
+              {{ params.sub.customNavigationHtml | safe if params.sub.customNavigationHtml }}
+            </div>
+          </div>
+        </div>
+      {% endif %}
+    {% endif %}
+  </div>
+</header>
+<!-- /header-advanced -->

package/src/templates/components/header-advanced/params.header-advanced.yaml

@@ -0,0 +1,298 @@
+params:
+- name: skipLink
+  type: component
+  required: false
+  description: The skipLink component parameters
+- name: headerMini
+  type: component
+  required: false
+  description: The headerMini component parameters
+- name: super
+  type: object
+  required: false
+  description: This is an area over the title
+  - name: logo
+    type: object
+    required: true
+    description: options for the logo element
+    - name: url
+      type: string
+      required: true
+      description: The logo url.
+    - name: alt
+      type: string
+      required: true
+      description: The logo alt text.
+    - name: href
+      type: string
+      required: true
+      description: The url of the homepage applied to logo. Defaults to /
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the logo element.
+  - name: customNavigationHtml
+    type: string
+    required: false
+    description: HTML for the custom navigation area. If provided there will appear an embed area where you can nest custom navigation under the logo area.
+  - name: backgroundFullColor
+    type: string
+    required: true
+    description: The css color used in the background image that fills all the super area.
+  - name: backgroundFullUrl
+    type: string
+    required: false
+    description: Url used in the background image that fills all the super area.
+  - name: backgroundContainerUrl
+    type: string
+    required: false
+    description: Url used in the background image in the container of the super area and over the backgroundFull.
+  - name: customHtml
+    type: string
+    required: false
+    description: If provided, the default super content will be replaced with this.
+- name: noTitle
+  type: boolean
+  required: false
+  description: If `true` the title area will be hidden.
+- name: title
+  type: object
+  required: true
+  description: params for the title subheader. It's hidden by default in mobile.
+  - name: homepageUrl
+    type: string
+    required: true
+    description: The url of the homepage applied to title. Defaults to /
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use in the title. 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 in the title. If `html` is provided, the `text` argument will be ignored.
+  - name: customNavigationHtml
+    type: string
+    required: false
+    description: HTML for a custom navigation. If provided there will appear an embed area after the title.
+- name: dropdown
+  type: object
+  required: false
+  description: Options for the dropdown at right.
+   params:
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text for the dropdown. 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 dropdown. If `html` is provided, the `text` argument will be ignored.
+  - name: hiddenText
+    type: string
+    required: false
+    description: Text for screenreaders only after the dropdown element.
+  - name: classesContainer
+    type: string
+    required: false
+    description: Classes to add to the container div of dropdown and tooltip elements. Defaults to 'hidden lg:block'
+  - name: classesTooltip
+    type: string
+    required: false
+    description: Classes to add to the tooltip content.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the dropdown element.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the dropdown element.
+  - name: contentHtml
+    type: string
+    required: true
+    description: Html content inside the dropdown once opened.
+  - name: items
+    type: array
+    required: true
+    description: An array of navigation item objects in subnav dropdown. If `items` is provided, the `contentHtml` argument will be ignored.
+    params:
+    - name: href
+      type: string
+      required: true
+      description: Item link.
+    - name: target
+      type: string
+      required: false
+      description: The target where the item should link to.
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text to use within each nav 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 nav item. If `html` is provided, the `text` argument will be ignored.
+    - name: id
+      type: string
+      required: false
+      description: Specific id attribute for the checkbox item. If omitted, then idPrefix option will be applied.
+    - name: active
+      type: boolean
+      required: false
+      description: If true, item will be active.
+    - name: disabled
+      type: boolean
+      required: false
+      description: If true, checkbox will be disabled.
+    - name: divider
+      type: boolean
+      required: false
+      description: If true, a divider border will be shown after the item.
+    - 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: navigation
+  type: object
+  required: false
+  description: Options for the navigation main menu.
+   params:
+  - name: classes
+    type: string
+    required: false
+    description: Classes for the navigation menu component. Defaults to 'hidden lg:block'
+  - name: items
+    type: array
+    required: true
+    description: An array of navigation item objects in main menu.
+    params:
+    - name: text
+      type: string
+      required: false
+      description: Text for the navigation item. If `html` is provided, the `text` argument will be ignored.
+    - name: html
+      type: string
+      required: false
+      description: HTML for the navigation item. If `html` is provided, the `text` argument will be ignored.
+    - name: href
+      type: string
+      required: false
+      description: Url of the navigation item anchor. Both `href` and `text` attributes for navigation items need to be provided to create an item.
+    - name: target
+      type: string
+      required: false
+      description: The target where the item should link to.
+    - name: active
+      type: boolean
+      required: false
+      description: Flag to mark the navigation item as active or not.
+    - name: attributes
+      type: object
+      required: false
+      description: HTML attributes (for example data attributes) to add to the navigation item anchor.
+- name: customNavigationHtml
+  type: string
+  required: false
+  description: HTML for the custom navigation area. If provided there will appear an embed area where you can nest custom navigation after the default one.
+- name: sub
+  type: object
+  required: false
+  description: This is an area over the title
+  - name: logo
+    type: object
+    required: true
+    description: options for the logo element
+    - name: url
+      type: string
+      required: true
+      description: The logo url.
+    - name: alt
+      type: string
+      required: true
+      description: The logo alt text.
+    - name: href
+      type: string
+      required: true
+      description: The url of the homepage applied to logo. Defaults to /
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the logo element.
+  - name: customNavigationHtml
+    type: string
+    required: false
+    description: HTML for the custom navigation area. If provided there will appear an embed area where you can nest custom navigation under the logo area.
+  - name: backgroundFullColor
+    type: string
+    required: true
+    description: The css color used in the background image that fills all the super area.
+  - name: backgroundFullUrl
+    type: string
+    required: false
+    description: Url used in the background image that fills all the super area.
+  - name: backgroundContainerUrl
+    type: string
+    required: false
+    description: Url used in the background image in the container of the super area and over the backgroundFull.
+  - name: customHtml
+    type: string
+    required: false
+    description: If provided, the default super content will be replaced with this.
+- name: offcanvas
+  type: object
+  required: false
+  description: Options for the offcanvas menu.
+   params:
+  - name: text
+    type: string
+    required: true
+    description: Text for the offcanvas button.
+  - name: textClose
+    type: string
+    required: true
+    description: Text for the offcanvas button for close. Only visible in screenreaders.
+  - name: classes
+    type: string
+    required: false
+    description: Classes for the offcanvas component. Defaults to '-mr-2 flex lg:hidden'.
+- name: containerClasses
+  type: string
+  required: false
+  description: Classes for the container, useful if you want to make the header fixed width.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the header container.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the header container.
+- name: caller
+  type: nunjucks-block
+  required: false
+  description: Content inside the offcanvas. Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire header component in a `call` block.
+
+previewLayout: full-width
+accessibilityCriteria: |
+  Text and links in the Header must:
+  - have a text contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)
+
+  Links in the Header must:
+  - accept focus
+  - be focusable with a keyboard
+  - be usable with a keyboard
+  - indicate when they have focus
+  - change in appearance when touched (in the touch-down state)
+  - change in appearance when hovered
+  - have visible text
+
+  Images in the Header must:
+  - be presentational when linked to from accompanying text (crown icon).
+
+  Landmarks and Roles in the Header should:
+  - have a role of `banner` at the root of the component (<header>) (https://www.w3.org/TR/wai-aria-1.1/#banner)

package/src/templates/components/header-mini/_examples.header-mini.njk

@@ -0,0 +1,30 @@
+{% set exampleComponent = "header-mini" %}
+
+
+{% set logoUE %}
+  <svg xmlns="http://www.w3.org/2000/svg" width="44" height="36" viewBox="0 0 148 121" class="relative top-0.5 inline-block fill-current" aria-label="Unión Europea" role="img"><title>Logo de la Unión Europea</title><defs><clipPath id="a-logo-UE"><path d="M0 0h148v121H0z"/></clipPath></defs><g clip-path="url(#a-logo-UE)"><path d="M11.737 107.263H13.9v5.815a12.063 12.063 0 0 0 .081 1.794 1.739 1.739 0 0 0 .663 1.058 2.309 2.309 0 0 0 1.432.4 2.185 2.185 0 0 0 1.392-.377 1.49 1.49 0 0 0 .564-.927 12.08 12.08 0 0 0 .1-1.824v-5.94H20.3v5.638a14.491 14.491 0 0 1-.176 2.732 3.024 3.024 0 0 1-.648 1.348 3.275 3.275 0 0 1-1.263.875 5.5 5.5 0 0 1-2.065.326 5.947 5.947 0 0 1-2.333-.355 3.336 3.336 0 0 1-1.256-.923 2.958 2.958 0 0 1-.608-1.19 13.04 13.04 0 0 1-.212-2.725ZM22.606 118v-10.737h2.109l4.395 7.17v-7.17h2.014V118h-2.175l-4.329-7v7Zm10.745 0v-10.737h2.168V118Zm3.794-5.3a6.829 6.829 0 0 1 .491-2.754 5.053 5.053 0 0 1 1-1.472 4.18 4.18 0 0 1 1.388-.967 5.9 5.9 0 0 1 2.314-.425 5.041 5.041 0 0 1 3.8 1.472 5.642 5.642 0 0 1 1.422 4.092 5.624 5.624 0 0 1-1.414 4.069 5 5 0 0 1-3.779 1.468 5.053 5.053 0 0 1-3.809-1.461 5.545 5.545 0 0 1-1.413-4.022Zm2.234-.073a4.023 4.023 0 0 0 .842 2.765 2.744 2.744 0 0 0 2.139.941 2.721 2.721 0 0 0 2.127-.933 4.1 4.1 0 0 0 .831-2.8 4.037 4.037 0 0 0-.809-2.754 2.738 2.738 0 0 0-2.15-.908 2.757 2.757 0 0 0-2.161.919 4.057 4.057 0 0 0-.82 2.767Zm1.641-5.977 1.011-2.19h2.307l-2.014 2.19ZM49.273 118v-10.737h2.109l4.395 7.17v-7.17h2.014V118h-2.175l-4.329-7v7Zm14.978 0v-10.737h7.961v1.816h-5.793v2.38h5.391v1.809h-5.391v2.922h6V118Zm9.991-10.737h2.168v5.815a12.063 12.063 0 0 0 .08 1.795 1.739 1.739 0 0 0 .663 1.058 2.309 2.309 0 0 0 1.432.4 2.185 2.185 0 0 0 1.392-.377 1.49 1.49 0 0 0 .564-.927 12.08 12.08 0 0 0 .1-1.824v-5.94H82.8v5.637a14.491 14.491 0 0 1-.176 2.732 3.024 3.024 0 0 1-.644 1.35 3.275 3.275 0 0 1-1.263.875 5.5 5.5 0 0 1-2.066.326 5.947 5.947 0 0 1-2.333-.355 3.336 3.336 0 0 1-1.256-.923 2.958 2.958 0 0 1-.608-1.19 13.04 13.04 0 0 1-.212-2.725ZM85.1 118v-10.737h4.563a7.81 7.81 0 0 1 2.5.289 2.467 2.467 0 0 1 1.249 1.029 3.093 3.093 0 0 1 .469 1.692 2.866 2.866 0 0 1-.71 2 3.412 3.412 0 0 1-2.124.992 5.058 5.058 0 0 1 1.161.9 12.237 12.237 0 0 1 1.234 1.743L94.75 118h-2.593l-1.568-2.336a15.156 15.156 0 0 0-1.143-1.578 1.664 1.664 0 0 0-.652-.447 3.573 3.573 0 0 0-1.094-.121h-.439V118Zm2.168-6.2h1.6a8.283 8.283 0 0 0 1.948-.132 1.168 1.168 0 0 0 .608-.454 1.4 1.4 0 0 0 .22-.806 1.287 1.287 0 0 0-.289-.875 1.328 1.328 0 0 0-.817-.421q-.264-.037-1.582-.037h-1.692Zm8.218.894a6.829 6.829 0 0 1 .491-2.754 5.053 5.053 0 0 1 1-1.472 4.18 4.18 0 0 1 1.383-.968 5.9 5.9 0 0 1 2.314-.425 5.041 5.041 0 0 1 3.8 1.472 5.642 5.642 0 0 1 1.426 4.099 5.624 5.624 0 0 1-1.414 4.069 5 5 0 0 1-3.786 1.468 5.053 5.053 0 0 1-3.8-1.461 5.545 5.545 0 0 1-1.418-4.022Zm2.234-.073a4.023 4.023 0 0 0 .842 2.765 2.744 2.744 0 0 0 2.138.944 2.721 2.721 0 0 0 2.124-.93 4.1 4.1 0 0 0 .831-2.8 4.037 4.037 0 0 0-.809-2.754 2.738 2.738 0 0 0-2.15-.908 2.757 2.757 0 0 0-2.161.919 4.057 4.057 0 0 0-.819 2.767Zm9.869 5.379v-10.737h3.479a12.616 12.616 0 0 1 2.578.161 2.815 2.815 0 0 1 1.545 1.051 3.333 3.333 0 0 1 .623 2.091 3.5 3.5 0 0 1-.359 1.663 2.944 2.944 0 0 1-.912 1.058 3.142 3.142 0 0 1-1.124.509 12.375 12.375 0 0 1-2.249.154h-1.413V118Zm2.168-8.921v3.047h1.187a5.606 5.606 0 0 0 1.714-.168 1.423 1.423 0 0 0 .677-.527 1.443 1.443 0 0 0 .245-.831 1.387 1.387 0 0 0-.344-.967 1.5 1.5 0 0 0-.872-.476 10.42 10.42 0 0 0-1.56-.073Zm7.837 8.921v-10.737h7.961v1.816h-5.793v2.38h5.391v1.809h-5.391v2.922h6V118Zm19.687 0h-2.358l-.937-2.439h-4.293l-.886 2.439h-2.3l4.182-10.737h2.292Zm-3.991-4.248-1.48-3.984-1.45 3.984ZM2.83 2.741h141.523v94.35H2.83z" fill="#039"/><g fill="#fc0"><path d="m70.576 23.298 2.986-2.179 2.987 2.179-1.136-3.524 3.033-2.179h-3.739l-1.144-3.567-1.144 3.571h-3.737l3.031 2.179ZM55.121 27.45l2.986-2.179 2.984 2.179-1.134-3.524 3.031-2.179h-3.739l-1.144-3.571-1.144 3.575h-3.737l3.031 2.179ZM46.8 29.508l-1.144 3.575h-3.737l3.031 2.179-1.136 3.524 2.986-2.179 2.986 2.179-1.136-3.524 3.031-2.179h-3.737ZM42.652 52.039l2.984 2.179-1.134-3.524 3.031-2.179h-3.737l-1.144-3.571-1.144 3.579-3.739-.008 3.033 2.179-1.136 3.524ZM47.945 63.997l-1.144-3.571-1.144 3.575H41.92l3.031 2.179-1.136 3.524 2.986-2.183 2.986 2.183-1.136-3.524 3.031-2.179ZM59.274 75.324l-1.144-3.567-1.142 3.571h-3.739l3.031 2.179-1.135 3.524 2.986-2.179 2.984 2.179-1.134-3.524 3.031-2.179ZM74.709 79.43l-1.144-3.571-1.142 3.575h-3.739l3.031 2.179-1.134 3.524 2.986-2.179 2.985 2.179-1.137-3.524 3.033-2.179ZM90.142 75.324 89 71.757l-1.146 3.571h-3.735l3.029 2.179-1.134 3.524L89 78.852l2.986 2.179-1.138-3.524 3.033-2.179ZM101.475 63.997l-1.146-3.571-1.146 3.575h-3.735l3.033 2.179-1.138 3.524 2.986-2.183 2.986 2.183-1.138-3.524 3.033-2.179ZM109.316 48.471h-3.739l-1.146-3.571-1.142 3.575H99.55l3.033 2.179-1.134 3.524 2.982-2.183 2.986 2.183-1.134-3.524ZM97.343 38.736l2.986-2.179 2.986 2.179-1.138-3.524 3.033-2.175h-3.735l-1.146-3.571-1.146 3.575h-3.735l3.033 2.175ZM89.043 18.179l-1.142 3.575-3.739-.008 3.029 2.183-1.134 3.524 2.99-2.183 2.982 2.183-1.135-3.524 3.033-2.183h-3.743Z"/></g></g></svg>
+{% endset %}
+
+
+{% set examples =  [
+  {
+    "name": "default",
+    "description": "This is the mini header.",
+    "data": {
+    }
+  },
+  {
+    "name": "Without container class",
+    "description": "hasContainer = false",
+    "data": {
+      "hasContainer": false
+    }
+  },
+  {
+    "name": "With custom content after the logo",
+    "description": "Use customNavigationHtml to nest custom content after the logo.",
+    "data": {
+      "customNavigationHtml": '<div class="flex-1 text-right">' + logoUE | safe +'</div>'
+    }
+  }
+] %}

package/src/templates/components/header-mini/_macro.header-mini.njk

@@ -0,0 +1,3 @@
+{% macro componentHeaderMini(params) %}
+{% include "./_template.header-mini.njk" %}
+{% endmacro %}

package/src/templates/components/header-mini/_template.header-mini.njk

@@ -0,0 +1,14 @@
+<!-- header-mini -->
+<div {%- if params.classes %} class="{{ params.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  <div  {%- if params.containerClasses %} class="{{ params.containerClasses }}"{% endif %}>
+    <div class="bg-neutral-lighter border-b border-neutral-base">
+      <div class="flex items-center px-base {% if params.hasContainer != false %}container mx-auto{% endif %}">
+        <a href="{{ params.homepageUrl | default('https://www.aragon.es/') }}" class="inline-block pt-2.5 pb-2 text-black focus:outline-none focus:shadow-outline-black" title="Ir a aragon.es">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="117" height="26" class="inline-block fill-current" aria-label="Gobierno de Aragón" role="img"><title>Ir a aragon.es</title><defs><clipPath id="b-logo-expanded"><path fill="gold" d="M0 0h31.509v31.495H0z"/></clipPath><clipPath id="a-logo-expanded"><path d="M0 0h144v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-expanded)"><path fill="gold" d="M0 .205h31.509V31.7H0z"/><g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z"/></g></g><path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd"/></g></svg>
+        </a>
+        {{ params.customNavigationHtml | safe if params.customNavigationHtml }}
+      </div>
+    </div>
+  </div>
+</div>
+<!-- /header-mini -->

package/src/templates/components/header-mini/params.header-mini.yaml

@@ -0,0 +1,25 @@
+params:
+- name: homepageUrl
+  type: string
+  required: false
+  description: The url of the logo link. Defaults to `https://www.aragon.es/`
+- name: customNavigationHtml
+  type: string
+  required: false
+  description: HTML for the custom navigation area. If provided there will appear an embed area after the logo.
+- name: hasContainer
+  type: boolean
+  required: false
+  description: Defaults to `true`. If `false` the header won't use container class.
+- name: containerClasses
+  type: string
+  required: false
+  description: Classes for the container, useful if you want to make the header fixed width.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the skip link.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the skip link.

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

@@ -3,6 +3,13 @@
    ========================================================================== */
 
 @layer components {
+  .c-input--base {
+    @apply px-3;
+    @apply py-2;
+    @apply text-base;
+  }
+
+
   .c-input--sm {
     @apply pl-2;
     @apply py-1;

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

@@ -179,11 +179,36 @@
         "html": "<a class=\" c-link break-all \" href=\" # \">http://www.boa.aragon.es/cgi-bin/EBOA/BRSCGI?CMD=VEROBJ&MLKOB=1119520063030&type=pdf</a> "
       },
       "icon": {
-        "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Borrar" focusable="false" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M100.625 122.5h-61.25a8.75 8.75 0 0 1-8.75-8.75V35h78.75v78.75a8.75 8.75 0 0 1-8.75 8.75zM56.875 96.25v-35M83.125 96.25v-35M13.125 35h113.75M83.125 17.5h-26.25a8.75 8.75 0 0 0-8.75 8.75V35h43.75v-8.75a8.75 8.75 0 0 0-8.75-8.75z" stroke-width="8.749995"/></g></svg>'
+        "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"  width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Icono de papelera" focusable="false" role="img"><path d="M19.5 7.5h-15A.5.5 0 0 0 4 8v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a.5.5 0 0 0-.5-.5Zm-9.25 13a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 1.5 0Zm5 0a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 1.5 0ZM22 4h-4.75a.25.25 0 0 1-.25-.25V2.5A2.5 2.5 0 0 0 14.5 0h-5A2.5 2.5 0 0 0 7 2.5v1.25a.25.25 0 0 1-.25.25H2a1 1 0 0 0 0 2h20a1 1 0 0 0 0-2ZM9 3.75V2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v1.25a.25.25 0 0 1-.25.25h-5.5A.25.25 0 0 1 9 3.75Z" fill="currentColor" transform="scale(2)"/></svg>'
       },
       "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-6a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-6a t6">Eliminar</button></li><li><button id="b-6b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-6b t6">Editar</button></li></ul>'
     }
   },
+  {
+    "name": "with icon type document vertical aligned on top",
+    "description": "icon.containerClasses = self-start h-full mr-base",
+    "data": {
+      "title": {
+        "text": "Resolución de años anteriores",
+        "attributes": {
+          "id": "t3"
+        }
+      },
+      "content":{
+        "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+        proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+      },
+      "icon": {
+        "type": "document",
+        "containerClasses": "self-start h-full mr-base"
+      },
+      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-3a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-3a t3">Eliminar</button></li><li><button id="b-3b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-3b t3">Editar</button></li></ul>'
+    }
+  },
   {
     "name": "draggable and with icon type document",
     "data": {

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

@@ -12,15 +12,15 @@
   </div>
   {% endif %}
   {% if params.icon %}
-  <div class="self-center h-full mr-base">
+  <div class="{% if params.icon.containerClasses %}{{ params.icon.containerClasses }}{% else %}self-center h-full mr-base{% endif %}">
     {% if params.icon.html %}
     {{ params.icon.html | safe }}
     {% elseif params.icon.type == 'document' %}
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Archivo" focusable="false" role="img"><path d="M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z" fill="currentColor"/><path d="M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z" fill="currentColor"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Icono de documento" focusable="false" role="img"><path d="m15.32 2.15 4.53 4.53A.49.49 0 0 1 20 7v14.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5H15a.49.49 0 0 1 .32.15ZM15.59 0H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7L16.29.29a1 1 0 0 0-.7-.29Z" fill="currentColor" transform="scale(2)"/><path d="M16 11H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM16 15H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM11.5 19H7a1 1 0 0 1 0-2h4.5a1 1 0 0 1 0 2Z" fill="currentColor" transform="scale(2)"/></svg>
     {% elseif params.icon.type == 'link' %}
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Link" focusable="false" role="img"><path d="M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z" fill="currentColor"/><path d="M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z" fill="currentColor"/><path d="M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z" fill="currentColor"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Icono de enlace" focusable="false" role="img"><path d="M12.41 14.91a1 1 0 0 0-.55 1.3 1 1 0 0 1-.21 1.09l-2.83 2.83a2 2 0 0 1-2.83 0L3.87 18a2 2 0 0 1 0-2.83l2.83-2.82a1 1 0 0 1 1.09-.21 1 1 0 0 0 .76-1.85 3 3 0 0 0-3.27.65l-2.83 2.83a4 4 0 0 0 0 5.65l2.13 2.13a4 4 0 0 0 5.65 0l2.83-2.83a3 3 0 0 0 .65-3.27 1 1 0 0 0-1.3-.54Z" fill="currentColor" transform="scale(2)"/><path d="M7.76 16.24a1 1 0 0 0 1.41 0L17 8.46a1 1 0 0 0-1.41-1.41l-7.83 7.78a1 1 0 0 0 0 1.41Z" fill="currentColor" transform="scale(2)"/><path d="m21.55 4.57-2.13-2.12a4 4 0 0 0-5.65 0l-2.83 2.83a3 3 0 0 0-.88 2.12 3 3 0 0 0 .23 1.15 1 1 0 0 0 1.85-.76 1 1 0 0 1-.08-.39 1 1 0 0 1 .29-.7l2.83-2.83a2 2 0 0 1 2.83 0L20.13 6a2 2 0 0 1 0 2.83l-2.83 2.81a1 1 0 0 1-1.09.22 1 1 0 0 0-1.3.54 1 1 0 0 0 .54 1.31 3 3 0 0 0 3.27-.65l2.83-2.83a4 4 0 0 0 0-5.66Z" fill="currentColor" transform="scale(2)"/></svg>
     {% elseif params.icon.type == 'clipboard' %}
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Solicitud" focusable="false" role="img"><path d="M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z" fill="currentColor"/><path d="M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z" fill="currentColor"/><path d="M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z" fill="currentColor"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Icono de datos" focusable="false" role="img"><path d="M16.5 9h-9a.75.75 0 0 0 0 1.5h9a.75.75 0 0 0 0-1.5ZM17.25 13.25a.76.76 0 0 0-.75-.75h-9a.75.75 0 0 0 0 1.5h9a.76.76 0 0 0 .75-.75ZM10 6.5h4a1 1 0 0 0 1-1V3A3 3 0 0 0 13.82.62 3 3 0 0 0 9 3.09V5.5a1 1 0 0 0 1 1Zm1.25-3.75a.75.75 0 1 1 .75.75.76.76 0 0 1-.75-.75Z" fill="currentColor" transform="scale(2)"/><path d="M19.5 3h-2.75a.25.25 0 0 0-.25.25v1.5a.25.25 0 0 0 .25.25H19a.5.5 0 0 1 .5.5v12.79a.51.51 0 0 1-.15.36l-3.2 3.2a.49.49 0 0 1-.36.15H5a.5.5 0 0 1-.5-.5v-16A.5.5 0 0 1 5 5h2.25a.25.25 0 0 0 .25-.25v-1.5A.25.25 0 0 0 7.25 3H4.5a2 2 0 0 0-2 2v17a2 2 0 0 0 2 2h15a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z" fill="currentColor" transform="scale(2)"/><path d="M7.5 16a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5Z" fill="currentColor" transform="scale(2)"/></svg>
     {% endif %}
   </div>
   {% endif %}