desy-html 11.1.2 → 12.0.0

package/docs/ds/_ds.example.tabs.njk

@@ -90,4 +90,48 @@
       ]
     })  }}
   </div>
+</div>
+<div class="grid lg:grid-cols-1 gap-xl mb-lg">
+  <div>
+    <p class="c-paragraph-base">Ejemplo con aspecto de lista de enlaces:</p>
+    {{ componentTabs({
+      "tablistClasses": "flex flex-col col-span-2 lg:col-span-1 lg:divide-y lg:divide-neutral-base mb-base lg:mb-0",
+      "tablistAriaLabel": "Ejemplo de tab con aspecto de links list dispuesto en horizontal",
+      "idPrefix": "tab-links-list",
+      "items": [
+        {
+          "html": "<div class=\"flex gap-base justify-between items-center flex-1 c-link\">Tab 1</div><div class=\"self-center h-full text-primary-base\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"hidden lg:block self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z\" fill=\"currentColor\"></path></svg></div>",
+          "panel": {
+            "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>",
+            "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
+          }
+        },
+        {
+          "html": "<div class=\"flex gap-base justify-between items-center flex-1 c-link\">Tab 2</div><div class=\"self-center h-full text-primary-base\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"hidden lg:block self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z\" fill=\"currentColor\"></path></svg></div>",
+          "panel": {
+            "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
+            "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
+          }
+        },
+        {
+          "html": "<div class=\"flex gap-base justify-between items-center flex-1 c-link\">Tab 3</div><div class=\"self-center h-full text-primary-base\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"hidden lg:block self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z\" fill=\"currentColor\"></path></svg></div>",
+          "panel": {
+            "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
+            "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
+          }
+        },
+        {
+          "html": "<div class=\"flex gap-base justify-between items-center flex-1 c-link\">Tab 4</div><div class=\"self-center h-full text-primary-base\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"hidden lg:block self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z\" fill=\"currentColor\"></path></svg></div>",
+          "panel": {
+            "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
+            "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
+          }
+        }
+      ],
+      "classes": "c-tabs--reset c-tabs--list grid grid-cols-2 lg:grid-cols-4 lg:gap-lg",
+      "attributes": {
+        "id": "tabs-list"
+      }
+    }) }}
+  </div>
 </div>

package/docs/ds/_ds.example.textos.njk

@@ -6,6 +6,11 @@
 <p>Esto es un <a href="#" class="c-link">link</a> en un texto</p>
 <p>Esto es un <a href="#" class="c-link" title="Se abre en ventana nueva" target="_blank">enlace en ventana nueva<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> en un texto.</p>
 <p>Esto es un <a href="#" class="c-link c-link--alert">link</a> en una notificación de error</p>
+<p class="text-neutral-dark">Esto es un <a href="#" class="c-link c-link--neutral">enlace</a> en un texto secundario.</p>
+<p>Esto es un <a href="#" class="c-link c-link--no-underline">enlace</a> sin subrayado (sólo en hover).</p>
+<div class="col-span-2 lg:col-span-2 p-base border border-neutral-base rounded relative hover:bg-neutral-light">
+  <p><a href="#" class="c-link c-link--full">Esto es un contenedor con enlace</a></p>
+</div>
 <p class="c-paragraph-lg">Párrafo destacados</p>
 <p class="c-paragraph-base">Párrafo por defecto</p>
 <p class="c-paragraph-base text-neutral-dark">Párrafo secundario</p>

package/docs/ds/_ds.section.botones.njk

@@ -45,4 +45,9 @@
       title: "Botones pequeños alerta"
     }) }}
   {% include "ds/_ds.example.botones-alert-sm.njk" %}
+  <div class="pb-lg"></div>
+    {{ DSSubsectionTitle({
+      title: "Botones grandes primarios"
+    }) }}
+  {% include "ds/_ds.example.botones-primary-lg.njk" %}
 </div>

package/docs/ds/_ds.section.textos.njk

@@ -4,7 +4,7 @@
 <!--  _ds.section.textos.njk -->
 
 <div class="container mx-auto">
-  
+
   <div class="pb-lg"></div>
   {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
   {{ DSSubsectionTitle({
@@ -209,6 +209,16 @@
         </dd>
       </dl>
     </li>
+    <li>
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
+        <dt class="col-span-2 lg:col-span-2">
+          <p>Esto es un <a href="#" class="c-link c-link--no-underline">enlace</a> sin subrayado (sólo en hover).</p>
+        </dt>
+        <dd class="col-span-2 lg:col-span-2">
+          <p class="text-neutral-dark text-sm"><code>.c-link.c-link--no-underline</code> - <code>normal</code> - <code>no-underline</code> - <code>text-primary-base</code> - hover: <code>primary-dark.underline</code></p>
+        </dd>
+      </dl>
+    </li>
     <li>
       <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
         <dt class="col-span-2 lg:col-span-2 p-base border border-neutral-base rounded relative hover:bg-neutral-light">

package/docs/index.html

@@ -7,6 +7,7 @@
 <div class="prose pb-xl">
 <div class="pb-lg"></div>
   <h1>desy-html</h1>
+  <p>Versión: {{ '' | filterversion }}</p>
   <p>desy-html es una librería NPM que sirve para construir la interfaz de usuario de las aplicaciones web del Gobierno de Aragón. Utiliza <a href="https://gulpjs.com/">Gulp</a>, <a href="https://postcss.org/">PostCSS</a>, <a href="https://tailwindcss.com/">Tailwind CSS</a> y <a href="https://mozilla.github.io/nunjucks/">Nunjucks</a> para renderizar componentes HTML+CSS+JS. Es útil para crear aplicaciones web ligeras o maquetas html.</p>
   <p>Si necesitas una librería con más potencia para construir tu aplicación web, te recomendamos mejor, que uses su versión traducida a Angular: <a href="https://bitbucket.org/sdaragon/desy-angular">desy-angular librería NPM</a>, <a href="https://desy.aragon.es/desy-angular">Ejemplos de desy-angular</a></p>
   <p>Mira ejemplos de componentes y plantillas de página en la documentación: <a href="https://desy.aragon.es/">https://desy.aragon.es/</a></p>
@@ -38,6 +39,24 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.12.0.0</h3>
+  <ul class="text-sm">
+    <li>Datepicker now uses Spanish date format: DD-MM-AAAA.</li>
+    <li>Dropdowns that has no menu, now has the correct arias using data attributes.</li>
+    <li>Accesibility fixes in Header mini, Datepicker, Dropdown, Tooltip and Links list.</li>
+    <li>Docs examples in Nunjucks have single quotes in attributes instead of escaped double quotes.</li>
+    <li>Docs improvements for AI and robots.</li>
+    <li>Validation fixes.</li>
+  </ul>
+  <h3>v.11.2.0</h3>
+  <ul class="text-sm">
+    <li>Added global function to Links list and Tree navigation to activate items.</li>
+    <li>Added parameter in Table advanced to customize filter texts in table head.</li>
+    <li>Added parameter in Tabs to improve customization.</li>
+    <li>Added large modifier in Button, Button loader, Dropdown, Listbox, Menu navigation and Menebar.</li>
+    <li>Added style for links.</li>
+    <li>Validation fixes.</li>
+  </ul>
   <h3>v.11.1.2</h3>
   <ul class="text-sm">
     <li>Improved initial tooltip visualization in Dropdown, Listbox, Menu navigation, Menubar and Tooltip.</li>

package/docs/pagina-prueba.html

@@ -47,7 +47,7 @@
         "text": "Ejemplo de modal"
       },
       "description": {
-        "html": ''
+        "html": ""
       },
       "itemsPrimary": [
         {
@@ -57,7 +57,7 @@
       ],
       "itemsSecondary": [
         {
-          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>',
+          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>",
           "attributes": {
             "onclick": "closeDialog(this)"
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "11.1.2",
+  "version": "12.0.0",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "type": "module",
   "author": {
@@ -38,10 +38,10 @@
     "autoprefixer": "^10.4.19",
     "hex-rgb": "^5.0.0",
     "highlight.js": "^11.9.0",
-    "postcss": "^8.4.38",
+    "postcss": "^8.5.0",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
-    "tailwindcss": "^3.4.4"
+    "tailwindcss": "^3.4.15"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",

package/src/css/component.text.css

@@ -9,43 +9,43 @@
       @apply font-bold;
       @apply leading-tight;
     }
-  
+
     .c-h1 {
       @apply mb-lg;
       @apply text-3xl;
       @apply font-bold;
       @apply leading-tight;
     }
-  
+
     .c-h2 {
       @apply mb-base;
       @apply text-2xl;
       @apply font-bold;
       @apply leading-tight;
     }
-  
+
     .c-h3 {
       @apply mb-sm;
       @apply text-lg;
       @apply font-bold;
       @apply leading-tight;
     }
-  
+
     .c-h4 {
       @apply mb-sm;
       @apply text-base;
       @apply font-bold;
       @apply leading-tight;
     }
-  
+
     .c-link {
       @apply text-primary-base;
       @apply underline;
-  
+
       &:hover {
         @apply text-primary-dark;
       }
-  
+
       &:focus {
         @apply bg-warning-base;
         @apply shadow-outline-focus;
@@ -53,26 +53,26 @@
         @apply text-black;
       }
     }
-  
+
     .c-link--alert {
       @apply text-alert-base;
       @apply underline;
       @apply font-semibold;
-  
+
       &:hover {
         @apply text-alert-dark;
       }
     }
-  
+
     .c-link--neutral {
       @apply text-neutral-dark;
       @apply underline;
-  
+
       &:hover {
         @apply text-black;
       }
     }
-  
+
     .c-link--full {
       &::after {
         content:"";
@@ -80,31 +80,39 @@
         @apply inset-0;
       }
     }
-  
+
+    .c-link--no-underline {
+      @apply no-underline;
+
+      &:hover {
+        @apply underline;
+      }
+    }
+
     .c-paragraph-lg {
       @apply mb-lg;
       @apply text-lg;
     }
-  
+
     .c-paragraph-base {
       @apply mb-base;
       @apply text-base;
     }
-  
+
     .c-paragraph-sm {
       @apply mb-sm;
       @apply text-sm;
     }
-  
+
     .c-ul {
       @apply mb-base;
       @apply list-none;
-  
+
       li {
         @apply relative;
         @apply mb-base;
         @apply pl-8;
-  
+
         &::before {
           content: "";
           @apply absolute;
@@ -115,32 +123,32 @@
           @apply bg-black;
           @apply rounded-full;
         }
-  
+
         &:last-of-type {
           @apply mb-0;
         }
       }
     }
-  
+
     .c-ul--no-bullets {
       li {
         @apply pl-0;
-  
+
         &::before {
           @apply hidden;
         }
       }
     }
-  
+
     .c-ol {
       @apply mb-base;
       counter-reset: list-counter;
-  
+
       li {
         @apply relative;
         @apply mb-base;
         @apply pl-8;
-  
+
         &::before {
           counter-increment: list-counter;
           content: counter(list-counter) ".";
@@ -148,11 +156,10 @@
           left: .25rem;
           @apply text-black;
         }
-  
+
         &:last-of-type {
           @apply mb-0;
         }
       }
     }
   }
-  

package/src/js/aria/linksList.js

@@ -0,0 +1,42 @@
+export function LinksList(aria) {
+
+  aria.linksListInit = function (domNode) {
+    this.rootEl = domNode;
+  };
+
+  window.activateItemLinksList = function (wrapperId, activeItemId) {
+    const activeItem = document.querySelector(`#${wrapperId} #${activeItemId}`);
+    if (activeItem) {
+      activateElement(wrapperId, activeItemId);
+      return [activeItem];
+    } else {
+      console.log('There is no element with this id in the menu.');
+      return null;
+    }
+  };
+
+  function activateElement(wrapperId, elementActive) {
+    const getWrapper = document.getElementById(wrapperId);
+    getWrapper.querySelectorAll('li').forEach((element) => {
+      const getLink = element.querySelector('a');
+      if (getLink) {
+        if (getLink.id === elementActive) {
+          wrapActiveElement(getLink);
+        } else {
+          deactivateElement(getLink);
+        }
+      }
+    });
+  };
+
+  function wrapActiveElement(elementActive) {
+    const getText = elementActive.querySelector('div[data-element="c-links-list__text"]');
+    getText.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
+  };
+
+  function deactivateElement(elementDeactivated) {
+    const getText = elementDeactivated.querySelector('div[data-element="c-links-list__text"]');
+    const replaceStrong = getText.textContent.replace('<strong class="font-bold">', '').replace('<strong/>', '');
+    getText.textContent = `${replaceStrong}`;
+  };
+}

package/src/js/aria/treeitem.js

@@ -285,9 +285,11 @@ export function Treeitem(aria) {
     }
 
     if(typeof itemsIds !== 'object' && open !== null) {
+      const getElement = document.querySelector(`nav #${elementId}`);
+      const isTreeNavigation = getElement.hasAttribute('data-tree-navigation');
       const selectItem = document.querySelector(`#${elementId} #${itemsIds}`)
       if(selectItem) {
-        activateElement(selectItem, open)
+        activateElement(selectItem, open, isTreeNavigation)
       } else {
         returnMessage()
       }
@@ -306,9 +308,14 @@ export function Treeitem(aria) {
     }
   }
 
-  function activateElement(item, open) {
+  function activateElement(item, open, treeNav = false) {
     if(open === true) {
       item.setAttribute('aria-expanded', 'true');
+      if(treeNav) {
+        const getLink = item.querySelector('a')
+        getLink.setAttribute("aria-current", "page");
+        getLink.innerHTML = `<strong class="font-bold">${getLink.textContent}</strong>`;
+      }
       recursiveParent(item)
     } else {
       item.setAttribute('aria-expanded', 'false');

package/src/js/aria/utils.js

@@ -1,4 +1,3 @@
-
 export function utils(aria) {
   /**
    * @namespace aria
@@ -29,7 +28,7 @@ export function utils(aria) {
 
 
   // Polyfill src https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
-  aria.Utils.matches = function (element, selector) {
+  aria.Utils.matches = function(element, selector) {
     if (!Element.prototype.matches) {
       Element.prototype.matches =
         Element.prototype.matchesSelector ||
@@ -37,7 +36,7 @@ export function utils(aria) {
         Element.prototype.msMatchesSelector ||
         Element.prototype.oMatchesSelector ||
         Element.prototype.webkitMatchesSelector ||
-        function (s) {
+        function(s) {
           var matches = element.parentNode.querySelectorAll(s);
           var i = matches.length;
           while (--i >= 0 && matches.item(i) !== this) {}
@@ -48,19 +47,19 @@ export function utils(aria) {
     return element.matches(selector);
   };
 
-  aria.Utils.remove = function (item) {
+  aria.Utils.remove = function(item) {
     if (item.remove && typeof item.remove === 'function') {
       return item.remove();
     }
     if (item.parentNode &&
-        item.parentNode.removeChild &&
-        typeof item.parentNode.removeChild === 'function') {
+      item.parentNode.removeChild &&
+      typeof item.parentNode.removeChild === 'function') {
       return item.parentNode.removeChild(item);
     }
     return false;
   };
 
-  aria.Utils.isFocusable = function (element) {
+  aria.Utils.isFocusable = function(element) {
     if (element.tabIndex > 0 || (element.tabIndex === 0 && element.getAttribute('tabIndex') !== null)) {
       return true;
     }
@@ -83,7 +82,7 @@ export function utils(aria) {
     }
   };
 
-  aria.Utils.getAncestorBySelector = function (element, selector) {
+  aria.Utils.getAncestorBySelector = function(element, selector) {
     if (!aria.Utils.matches(element, selector + ' ' + element.tagName)) {
       // Element is not inside an element that matches selector
       return null;
@@ -95,8 +94,7 @@ export function utils(aria) {
     while (ancestor === null) {
       if (aria.Utils.matches(currentNode.parentNode, selector)) {
         ancestor = currentNode.parentNode;
-      }
-      else {
+      } else {
         currentNode = currentNode.parentNode;
       }
     }
@@ -104,25 +102,92 @@ export function utils(aria) {
     return ancestor;
   };
 
-  aria.Utils.hasClass = function (element, className) {
+  aria.Utils.hasClass = function(element, className) {
     return (new RegExp('(\\s|^)' + className + '(\\s|$)')).test(element.className);
   };
 
-  aria.Utils.addClass = function (element, className) {
+  aria.Utils.addClass = function(element, className) {
     if (!aria.Utils.hasClass(element, className)) {
       element.className += ' ' + className;
     }
   };
 
-  aria.Utils.removeClass = function (element, className) {
+  aria.Utils.removeClass = function(element, className) {
     var classRegex = new RegExp('(\\s|^)' + className + '(\\s|$)');
     element.className = element.className.replace(classRegex, ' ').trim();
   };
 
-  aria.Utils.bindMethods = function (object /* , ...methodNames */) {
+  aria.Utils.bindMethods = function(object /* , ...methodNames */ ) {
     var methodNames = Array.prototype.slice.call(arguments, 1);
-    methodNames.forEach(function (method) {
+    methodNames.forEach(function(method) {
       object[method] = object[method].bind(object);
     });
   };
 }
+
+// Function to convert ISO date(s) to DD-MM-YYYY format
+export function formatDateToDDMMYYYY(isoDate) {
+  if (!isoDate) return '';
+  try {
+    // Case 1: Multiple dates separated by space
+    if (isoDate.includes(' ')) {
+      return isoDate
+        .split(' ')
+        .map(date => formatSingleDate(date))
+        .join(' ');
+    }
+    // Case 2: Date range separated by /
+    if (isoDate.includes('/')) {
+      const [startDate, endDate] = isoDate.split('/');
+      return `${formatSingleDate(startDate)}/${formatSingleDate(endDate)}`;
+    }
+    // Case 3: Single date
+    return formatSingleDate(isoDate);
+  } catch (error) {
+    console.error('Error formatting date:', error);
+    return '';
+  }
+}
+
+// Helper function to format a single date
+export function formatSingleDate(isoDate) {
+  const date = new Date(isoDate);
+  if (isNaN(date.getTime())) {
+    return '';
+  }
+  const day = String(date.getDate()).padStart(2, '0');
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const year = date.getFullYear();
+  return `${day}-${month}-${year}`;
+}
+
+// Function to convert DD-MM-YYYY format to ISO
+export function convertToISOFormat(ddmmyyyyDate) {
+  if (!ddmmyyyyDate) return '';
+  try {
+    // For multiple dates
+    if (ddmmyyyyDate.includes(' ')) {
+      return ddmmyyyyDate
+        .split(' ')
+        .map(date => convertSingleDateToISO(date))
+        .join(' ');
+    }
+    // For date ranges
+    if (ddmmyyyyDate.includes('/')) {
+      const [startDate, endDate] = ddmmyyyyDate.split('/');
+      return `${convertSingleDateToISO(startDate)}/${convertSingleDateToISO(endDate)}`;
+    }
+    // For single date
+    return convertSingleDateToISO(ddmmyyyyDate);
+  } catch (error) {
+    console.error('Error converting to ISO format:', error);
+    return '';
+  }
+}
+
+// Helper function to convert a single date to ISO
+function convertSingleDateToISO(ddmmyyyyDate) {
+  if (!ddmmyyyyDate) return '';
+  const [day, month, year] = ddmmyyyyDate.split('-');
+  return `${year}-${month}-${day}`;
+}