desy-html 11.2.0 → 12.0.0

package/src/js/desy-html.js

@@ -1,4 +1,4 @@
-import { utils } from './aria/utils.js';
+import { utils, formatDateToDDMMYYYY, convertToISOFormat } from './aria/utils.js';
 import { accordion } from './aria/accordion.js';
 import { dataGrid } from './aria/dataGrid.js';
 import { dialog } from './aria/dialog.js';
@@ -58,6 +58,10 @@ export function dropdownComponent(aria) {
     if (moduleValue == 'c-dropdown'){
       const buttonDropdown = modules[item].querySelector('[data-module = "c-dropdown-button"]');
       const tooltip = modules[item].querySelector('[data-module = "c-dropdown-tooltip"]');
+      const roleCustom = buttonDropdown.getAttribute('data-role');
+      const ariaLabel = buttonDropdown.getAttribute('data-aria-label');
+      const ariaModal = buttonDropdown.getAttribute('data-aria-modal');
+      const ariaHasPopup = buttonDropdown.getAttribute('data-aria-haspopup');
       if(buttonDropdown && tooltip) {
         const hideOnPopperBlur = {
           /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonpopperblur */
@@ -114,12 +118,23 @@ export function dropdownComponent(aria) {
           offset: [0, -10],
           theme: '',
           plugins: [hideOnEsc,hideOnPopperBlur],
-          role: false,
+          role: roleCustom ? roleCustom : false,
           aria: {
             content: 'auto'
           },
+          onCreate(instance) {
+            if(ariaHasPopup){
+              instance.reference.setAttribute('aria-haspopup', ariaHasPopup);
+            }
+          },
           onShown(instance) {
             aria.Utils.focusFirstDescendant(tooltip);
+            if(ariaLabel){
+              instance.popper.firstElementChild.setAttribute('aria-label', ariaLabel);
+            }
+            if(ariaModal){
+              instance.popper.firstElementChild.setAttribute('aria-modal', ariaModal);
+            }
           }
         });
       }
@@ -131,120 +146,121 @@ export function listboxComponent(aria) {
   listbox(aria);
   const modules = document.querySelectorAll('[data-module]');
   let activeButton;
-  for (const item in modules) if (modules.hasOwnProperty(item)) {
-    const moduleValue = modules[item].getAttribute('data-module');
-
-    if (moduleValue == 'c-listbox'){
-      const buttonListbox = modules[item].querySelector('[data-module = "c-listbox-button"]');
-      const tooltip = modules[item].querySelector('[data-module = "c-listbox-tooltip"]');
-      const list = modules[item].querySelector('[data-module = "c-listbox-list"]');
-      if(buttonListbox && tooltip) {
-        const listbox = new aria.Listbox(list);
-        const hideOnClick = {
-          name: 'hideOnClick',
-          defaultValue: true,
-          fn(instance) {
-            return {
-              onCreate() {
-                buttonListbox.addEventListener("click", (event) => {
-                  if(!buttonListbox.classList.contains('open')){
-                    instance.show();
-                    list.focus()
-                    buttonListbox.classList.add('open');
-                  } else {
-                    list.blur();
-                    instance.hide();
-                  }
-                });
-              },
-            };
-          },
-        };
-        const hideOnPopperBlur = {
-          /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonpopperblur */
-          name: 'hideOnPopperBlur',
-          defaultValue: true,
-          fn(instance) {
-            return {
-              onCreate() {
-                instance.popper.addEventListener('focusout', (event) => {
-                  if (
-                    instance.props.hideOnPopperBlur &&
-                    event.relatedTarget &&
-                    !instance.popper.contains(event.relatedTarget)
-                  ) {
-                    instance.hide();
-                  }
-                });
-              },
-            };
-          },
-        };
-        const hideOnEscOrEnter = {
-          /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonesc */
-          name: 'hideOnEsc',
-          defaultValue: true,
-          fn({hide}) {
-            function onKeyDown(event) {
-              if ((event.keyCode === 27)||(event.keyCode === 13)) {
-                hide();
+  for (const item in modules)
+    if (modules.hasOwnProperty(item)) {
+      const moduleValue = modules[item].getAttribute('data-module');
+
+      if (moduleValue == 'c-listbox') {
+        const buttonListbox = modules[item].querySelector('[data-module = "c-listbox-button"]');
+        const tooltip = modules[item].querySelector('[data-module = "c-listbox-tooltip"]');
+        const list = modules[item].querySelector('[data-module = "c-listbox-list"]');
+        if (buttonListbox && tooltip) {
+          const listbox = new aria.Listbox(list);
+          const hideOnClick = {
+            name: 'hideOnClick',
+            defaultValue: true,
+            fn(instance) {
+              return {
+                onCreate() {
+                  buttonListbox.addEventListener("click", (event) => {
+                    if (!buttonListbox.classList.contains('open')) {
+                      instance.show();
+                      list.focus()
+                      buttonListbox.classList.add('open');
+                    } else {
+                      list.blur();
+                      instance.hide();
+                    }
+                  });
+                },
+              };
+            },
+          };
+          const hideOnPopperBlur = {
+            /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonpopperblur */
+            name: 'hideOnPopperBlur',
+            defaultValue: true,
+            fn(instance) {
+              return {
+                onCreate() {
+                  instance.popper.addEventListener('focusout', (event) => {
+                    if (
+                      instance.props.hideOnPopperBlur &&
+                      event.relatedTarget &&
+                      !instance.popper.contains(event.relatedTarget)
+                    ) {
+                      instance.hide();
+                    }
+                  });
+                },
+              };
+            },
+          };
+          const hideOnEscOrEnter = {
+            /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonesc */
+            name: 'hideOnEsc',
+            defaultValue: true,
+            fn({ hide }) {
+              function onKeyDown(event) {
+                if ((event.keyCode === 27) || (event.keyCode === 13)) {
+                  hide();
+                }
               }
-            }
 
-            return {
-              onShow() {
-                document.addEventListener('keydown', onKeyDown);
-              },
-              onHide() {
-                document.removeEventListener('keydown', onKeyDown);
+              return {
+                onShow() {
+                  document.addEventListener('keydown', onKeyDown);
+                },
+                onHide() {
+                  document.removeEventListener('keydown', onKeyDown);
+                }
+              };
+            }
+          };
+
+          // https://atomiks.github.io/tippyjs/v6/all-props/
+          tippy(buttonListbox, {
+            placement: 'bottom-start',
+            inlinePositioning: true,
+            content: tooltip,
+            allowHTML: true, // Make sure you are sanitizing any user data if rendering HTML to prevent XSS attacks.
+            trigger: 'manual',
+            interactive: true,
+            arrow: false,
+            offset: [0, -10],
+            theme: '',
+            plugins: [hideOnEscOrEnter, hideOnPopperBlur, hideOnClick],
+            role: false,
+            aria: {
+              content: 'auto'
+            },
+            onMount(instance) {
+              if (list.querySelectorAll('[aria-selected="true"]')[0]) {
+                listbox.focusItem(list.querySelectorAll('[aria-selected="true"]')[0]);
               }
-            };
-          }
-        };
-
-        // https://atomiks.github.io/tippyjs/v6/all-props/
-        tippy(buttonListbox, {
-          placement: 'bottom-start',
-          inlinePositioning: true,
-          content: tooltip,
-          allowHTML: true, // Make sure you are sanitizing any user data if rendering HTML to prevent XSS attacks.
-          trigger: 'manual',
-          interactive: true,
-          arrow: false,
-          offset: [0, -10],
-          theme: '',
-          plugins: [hideOnEscOrEnter,hideOnPopperBlur, hideOnClick],
-          role: false,
-          aria: {
-            content: 'auto'
-          },
-          onMount(instance) {
-            if (list.querySelectorAll('[aria-selected="true"]')[0]) {
-              listbox.focusItem(list.querySelectorAll('[aria-selected="true"]')[0]);
+            },
+            onHidden(instance) {
+              buttonListbox.classList.remove('open');
             }
-          },
-          onHidden(instance){
-            buttonListbox.classList.remove('open');
-          }
-        });
+          });
 
-        listbox.setHandleFocusChange(function(evt){
-          if ((!list.hasAttribute('aria-multiselectable')) && (buttonListbox.getAttribute('data-change')=='change')){
-            buttonListbox.firstElementChild.innerHTML = evt.innerHTML;
-          }
-        });
+          listbox.setHandleFocusChange(function(evt) {
+            if ((!list.hasAttribute('aria-multiselectable')) && (buttonListbox.getAttribute('data-change') == 'change')) {
+              buttonListbox.firstElementChild.innerHTML = evt.innerHTML;
+            }
+          });
 
-        const getMultiSelectable = buttonListbox.getAttribute('aria-labelledby');
-        const allowMultiple = getMultiSelectable.includes('is-multiselectable-label');
+          const getMultiSelectable = buttonListbox.getAttribute('aria-labelledby');
+          const allowMultiple = getMultiSelectable.includes('is-multiselectable-label');
 
-        if(!allowMultiple) {
-          list.addEventListener("click", (event) => {
-            buttonListbox.click();
-          })
+          if (!allowMultiple) {
+            list.addEventListener("click", (event) => {
+              buttonListbox.click();
+            })
+          }
         }
       }
     }
-  }
 }
 
 export function linksListComponent(aria) {
@@ -287,96 +303,98 @@ export function tabsComponent(aria) {
 
 export function tooltipComponent(aria) {
   const modules = document.querySelectorAll('[data-module]');
-  for (const item in modules) if (modules.hasOwnProperty(item)) {
-    const moduleValue = modules[item].getAttribute('data-module');
-
-
-    if (moduleValue == 'c-tooltip'){
-      const tooltipButton = modules[item].querySelector('[data-module = "c-tooltip-button"]');
-      const ariaContent = tooltipButton.matches('[data-type = "c-tooltip-button-complex"]') ? 'describedby' : 'labelledby';
-      const tooltipTooltip = modules[item].querySelector('[data-module = "c-tooltip-tooltip"]');
-      if(tooltipButton && tooltipTooltip) {
-        const hideOnPopperBlur = {
-          /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonpopperblur */
-          name: 'hideOnPopperBlur',
-          defaultValue: true,
-          fn(instance) {
-            return {
-              onCreate() {
-                instance.popper.addEventListener('focusout', (event) => {
-                  if (
-                    instance.props.hideOnPopperBlur &&
-                    event.relatedTarget &&
-                    !instance.popper.contains(event.relatedTarget)
-                  ) {
-                    instance.hide();
-                  }
-                });
-              },
-            };
-          },
-        };
-        const hideOnEsc = {
-          /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonesc */
-          name: 'hideOnEsc',
-          defaultValue: true,
-          fn({hide}) {
-            function onKeyDown(event) {
-              if (event.keyCode === 27) {
-                hide();
+  for (const item in modules)
+    if (modules.hasOwnProperty(item)) {
+      const moduleValue = modules[item].getAttribute('data-module');
+
+
+      if (moduleValue == 'c-tooltip') {
+        const tooltipButton = modules[item].querySelector('[data-module = "c-tooltip-button"]');
+        const ariaContent = tooltipButton.matches('[data-type = "c-tooltip-button-complex"]') ? 'describedby' : 'labelledby';
+        const tooltipTooltip = modules[item].querySelector('[data-module = "c-tooltip-tooltip"]');
+        if (tooltipButton && tooltipTooltip) {
+          const hideOnPopperBlur = {
+            /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonpopperblur */
+            name: 'hideOnPopperBlur',
+            defaultValue: true,
+            fn(instance) {
+              return {
+                onCreate() {
+                  instance.popper.addEventListener('focusout', (event) => {
+                    if (
+                      instance.props.hideOnPopperBlur &&
+                      event.relatedTarget &&
+                      !instance.popper.contains(event.relatedTarget)
+                    ) {
+                      instance.hide();
+                    }
+                  });
+                },
+              };
+            },
+          };
+          const hideOnEsc = {
+            /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonesc */
+            name: 'hideOnEsc',
+            defaultValue: true,
+            fn({ hide }) {
+              function onKeyDown(event) {
+                if (event.keyCode === 27) {
+                  hide();
+                }
               }
-            }
 
-            return {
-              onShow() {
-                document.addEventListener('keydown', onKeyDown);
-              },
-              onHide() {
-                document.removeEventListener('keydown', onKeyDown);
-              }
-            };
-          }
-        };
-
-        // https://atomiks.github.io/tippyjs/v6/all-props/
-        tippy(tooltipButton, {
-          placement: 'top',
-          inlinePositioning: true,
-          content: tooltipTooltip,
-          allowHTML: true, // Make sure you are sanitizing any user data if rendering HTML to prevent XSS attacks.
-          trigger: 'mouseenter focus',
-          hideOnClick: false,
-          theme: '',
-          plugins: [hideOnEsc,hideOnPopperBlur],
-          role: 'tooltip',
-          interactive: true,
-          aria: {
-            content: ariaContent
-          }
-        });
+              return {
+                onShow() {
+                  document.addEventListener('keydown', onKeyDown);
+                },
+                onHide() {
+                  document.removeEventListener('keydown', onKeyDown);
+                }
+              };
+            }
+          };
+
+          // https://atomiks.github.io/tippyjs/v6/all-props/
+          tippy(tooltipButton, {
+            placement: 'top',
+            inlinePositioning: true,
+            content: tooltipTooltip,
+            allowHTML: true, // Make sure you are sanitizing any user data if rendering HTML to prevent XSS attacks.
+            trigger: 'mouseenter focus',
+            hideOnClick: false,
+            theme: '',
+            plugins: [hideOnEsc, hideOnPopperBlur],
+            role: 'tooltip',
+            interactive: true,
+            aria: {
+              content: ariaContent
+            }
+          });
+        }
       }
     }
-  }
 }
 
 export function treeComponent(aria) {
   Treeitem(aria);
   Tree(aria);
   const modules = document.querySelectorAll('[data-module]');
-  for (const item in modules) if (modules.hasOwnProperty(item)) {
-    const moduleValue = modules[item].getAttribute('data-module');
+  for (const item in modules)
+    if (modules.hasOwnProperty(item)) {
+      const moduleValue = modules[item].getAttribute('data-module');
 
-    if (moduleValue == 'c-tree'){
-      const tree = new aria.Tree(modules[item]);
-      tree.init();
-    }
+      if (moduleValue == 'c-tree') {
+        const tree = new aria.Tree(modules[item]);
+        tree.init();
+      }
 
-    if (moduleValue == 'c-tree__item'){
-      modules[item].addEventListener('click', function (event) {
-        event.stopPropagation();
-      });
+      if (moduleValue == 'c-tree__item') {
+        modules[item].addEventListener('click', function(event) {
+          event.stopPropagation();
+        });
+      }
     }
-  }
 }
 
 export function notificationComponent(aria) {
@@ -450,39 +468,64 @@ export function DatepickerComponent(aria) {
       let datepickerCalendar = null;
       let isOpen = false;
 
+      // Variable to store the initial value only when the calendar opens
+      let storedInitialValue = '';
+      let storedInitialFormat = ''; // 'iso' or 'dd-mm-yyyy'
+
       const focusCalendar = () => {
-        const inputInitialValue = inputElement.value;
+        const datepickerSelect = module.querySelector(':is(select)');
+        const datepickerCalendar = module.querySelector(':is(calendar-date, calendar-multi, calendar-range)');
+
+        // Store the initial value only when the calendar opens
+        if (!storedInitialValue) {
+          storedInitialValue = datepickerCalendar === null ? "" : datepickerCalendar.value;
+          // Detect initial format
+          storedInitialFormat = storedInitialValue.includes('-') &&
+            storedInitialValue.split('-')[0].length === 4 ? 'iso' : 'dd-mm-yyyy';
+        }
+
         requestAnimationFrame(() => {
-          const datepickerSelect = module.querySelector(':is(select)');
-          const datepickerCalendar = module.querySelector(':is(calendar-date, calendar-multi, calendar-range)');
-          const datepickerInitialValue = datepickerCalendar.value;
           if (datepickerCalendar != undefined) {
             datepickerCalendar.focus();
             datepickerCalendar.addEventListener('change', (e) => {
-              inputElement.value = e.target.value;
+              inputElement.value = formatDateToDDMMYYYY(e.target.value);
             });
           }
-          if(datepickerSelect != undefined) {
+
+          if (datepickerSelect != undefined) {
             datepickerSelect.addEventListener('change', function() {
               const selectedValue = this.value;
               datepickerCalendar.min = selectedValue + "-01-01";
-              datepickerCalendar.max = selectedValue + "-31-12";
+              datepickerCalendar.max = selectedValue + "-12-31";
               datepickerCalendar.focusedDate = datepickerCalendar.min;
             });
             datepickerSelect.focus();
           }
+
           const datepickerCancel = module.querySelector('#' + dropdownId + '-cancel');
           const datepickerSubmit = module.querySelector('#' + dropdownId + '-submit');
+
           if (datepickerCancel != undefined) {
             datepickerCancel.onclick = function() {
-              inputElement.value = inputInitialValue;
-              datepickerCalendar.tentative ="";
-              datepickerCalendar.value = datepickerInitialValue;
+              // Restore values according to original format
+              if (storedInitialFormat === 'iso') {
+                datepickerCalendar.value = storedInitialValue;
+                inputElement.value = formatDateToDDMMYYYY(storedInitialValue);
+              } else {
+                datepickerCalendar.value = convertToISOFormat(storedInitialValue);
+                inputElement.value = storedInitialValue;
+              }
+
+              datepickerCalendar.tentative = "";
               closeDropdown();
             }
           }
+
           if (datepickerSubmit != undefined) {
             datepickerSubmit.onclick = function() {
+              // On submit, clear stored value for next opening
+              storedInitialValue = '';
+              storedInitialFormat = '';
               closeDropdown();
             }
           }
@@ -503,7 +546,7 @@ export function DatepickerComponent(aria) {
             if (currentExpandedValue !== isOpen) {
               const datepickerTimeout = setTimeout(focusCalendar, 500);
               isOpen = currentExpandedValue;
-              if(!isOpen) {
+              if (!isOpen) {
                 clearTimeout(datepickerTimeout);
                 closeDropdown();
               }
@@ -516,11 +559,11 @@ export function DatepickerComponent(aria) {
     } else {
       const datepickerSelect = module.querySelector(':is(select)');
       const datepickerCalendar = module.querySelector(':is(calendar-date, calendar-multi, calendar-range)');
-      if(datepickerSelect != undefined) {
+      if (datepickerSelect != undefined) {
         datepickerSelect.addEventListener('change', function() {
           const selectedValue = this.value;
           datepickerCalendar.min = selectedValue + "-01-01";
-          datepickerCalendar.max = selectedValue + "-31-12";
+          datepickerCalendar.max = selectedValue + "-12-31";
           datepickerCalendar.focusedDate = datepickerCalendar.min;
         });
       }

package/src/js/filters/filter-caller.js

@@ -1,6 +1,8 @@
 function filtercaller (params) {
-  delete params.caller;
-  return params
+  const newParams = {};
+  for(var k in params) newParams[k]=params[k];
+  delete newParams.caller;
+  return newParams;
 }
 
 export default filtercaller;

package/src/js/filters/filter-escape-ltgt.js

@@ -0,0 +1,7 @@
+function filterescapeltgt(str) {
+  if (typeof str !== 'string' && typeof str !== 'object') return str;
+  if (typeof str !== 'string') str = JSON.stringify(str);
+  return str.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+export default filterescapeltgt;

package/src/js/filters/filter-quotes.js

@@ -0,0 +1,50 @@
+function filterquotes(str) {
+  if (typeof str !== 'string') return str;
+
+  // State to track if we are inside an HTML tag
+  let inTag = false;
+  let result = '';
+  let currentQuote = null;
+
+  for (let i = 0; i < str.length; i++) {
+    const char = str[i];
+
+    if (char === '<') {
+      inTag = true;
+      result += char;
+      continue;
+    }
+
+    if (char === '>') {
+      inTag = false;
+      result += char;
+      continue;
+    }
+
+    if (inTag) {
+      // If we find a quote inside a tag
+      if (char === "'" || char === '"') {
+        if (currentQuote === null) {
+          // Starting an attribute value
+          currentQuote = char;
+          result += '"'; // Always use double quotes
+        } else if (currentQuote === char) {
+          // Closing the attribute value
+          currentQuote = null;
+          result += '"';
+        } else {
+          // It's a quote inside the attribute value
+          result += char;
+        }
+      } else {
+        result += char;
+      }
+    } else {
+      result += char;
+    }
+  }
+
+  return result;
+}
+
+export default filterquotes;

package/src/js/filters/filter-version.js

@@ -0,0 +1,8 @@
+
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+export default function() {
+  const pkg = JSON.parse(readFileSync(join(process.cwd(), 'package.json'), 'utf8'));
+  return pkg.version;
+}

package/src/js/filters/index.js

@@ -5,9 +5,15 @@
 import highlight from './highlight.js';
 import filtercaller from './filter-caller.js';
 import filterslugify from './filter-slugify.js';
+import filterquotes from './filter-quotes.js';
+import filterescapeltgt from './filter-escape-ltgt.js'
+import filterversion from './filter-version.js'
 
 export const SOURCE_NUNJUCKS_FILTERS = {
   highlight,
   filtercaller,
-  filterslugify
+  filterslugify,
+  filterquotes,
+  filterescapeltgt,
+  filterversion
 };