desy-html 8.13.1 → 9.0.1

package/src/js/desy-html.js

@@ -435,3 +435,91 @@ export function NavComponent(aria) {
     nav.init(null);
   });
 }
+
+export function DatepickerComponent(aria) {
+  const modules = document.querySelectorAll('[data-module="c-datepicker"]');
+  [...modules].forEach((module) => {
+    const inputElement = module.getElementsByTagName('input')[0];
+    if (inputElement) {
+      const dropdownId = inputElement.getAttribute('id');
+      const datepickerDropdown = inputElement.parentNode.querySelector('[data-module="c-dropdown-button"]');
+      let datepickerCalendar = null;
+      let isOpen = false;
+
+      const focusCalendar = () => {
+        const inputInitialValue = inputElement.value;
+        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;
+            });
+          }
+          if(datepickerSelect != undefined) {
+            datepickerSelect.addEventListener('change', function() {
+              const selectedValue = this.value;
+              datepickerCalendar.min = selectedValue + "-01-01";
+              datepickerCalendar.max = selectedValue + "-31-12";
+              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;
+              closeDropdown();
+            }
+          }
+          if (datepickerSubmit != undefined) {
+            datepickerSubmit.onclick = function() {
+              closeDropdown();
+            }
+          }
+        });
+      }
+
+      const closeDropdown = () => {
+        setTimeout(() => {
+          isOpen = false;
+          inputElement.focus();
+        }, 300);
+      };
+
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === 'attributes' && mutation.attributeName === 'aria-expanded') {
+            const currentExpandedValue = mutation.target.getAttribute('aria-expanded');
+            if (currentExpandedValue !== isOpen) {
+              const datepickerTimeout = setTimeout(focusCalendar, 500);
+              isOpen = currentExpandedValue;
+              if(!isOpen) {
+                clearTimeout(datepickerTimeout);
+                closeDropdown();
+              }
+            }
+          }
+        });
+      });
+
+      observer.observe(datepickerDropdown, { attributes: true, attributeFilter: ['aria-expanded'] });
+    } else {
+      const datepickerSelect = module.querySelector(':is(select)');
+      const datepickerCalendar = module.querySelector(':is(calendar-date, calendar-multi, calendar-range)');
+      if(datepickerSelect != undefined) {
+        datepickerSelect.addEventListener('change', function() {
+          const selectedValue = this.value;
+          datepickerCalendar.min = selectedValue + "-01-01";
+          datepickerCalendar.max = selectedValue + "-31-12";
+          datepickerCalendar.focusedDate = datepickerCalendar.min;
+        });
+      }
+    }
+  });
+}

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

@@ -1,6 +1,6 @@
-function filterCaller (params) {
+function filtercaller (params) {
   delete params.caller;
   return params
 }
 
-module.exports = filterCaller
+export default filtercaller;

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

@@ -1,4 +1,4 @@
-function filterSlugify(str) {
+function filterslugify(str) {
   // Replace spaces with hyphens
   let slug = str.replace(/\s+/g, '-');
   // Remove special characters
@@ -8,4 +8,4 @@ function filterSlugify(str) {
   return slug;
 }
 
-module.exports = filterSlugify
+export default filterslugify;

package/src/js/filters/highlight.js

@@ -1,4 +1,4 @@
-const hljs = require('highlight.js')
+import hljs from 'highlight.js';
 
 /**
  * Format code with syntax highlighting
@@ -7,8 +7,8 @@ const hljs = require('highlight.js')
  * @param {string} [language] - Code programming language
  * @returns {string} Code with syntax highlighting
  */
-function highlight (code, language) {
-  return hljs.highlight(code.trim(), { language: language || 'plaintext' }).value
+function highlight(code, language) {
+  return hljs.highlight(code.trim(), { language: language || 'plaintext' }).value;
 }
 
-module.exports = highlight
+export default highlight;

package/src/js/filters/index.js

@@ -1,12 +1,13 @@
 /**
  * Nunjucks filters
  */
-const highlight = require('./highlight')
-const filtercaller = require('./filter-caller')
-const filterslugify = require('./filter-slugify')
 
-module.exports = {
+import highlight from './highlight.js';
+import filtercaller from './filter-caller.js';
+import filterslugify from './filter-slugify.js';
+
+export const SOURCE_NUNJUCKS_FILTERS = {
   highlight,
   filtercaller,
   filterslugify
-}
+};

package/src/js/globals/get-html-code-from-example.js

@@ -1,4 +1,5 @@
-const beautify = require('js-beautify')
+import beautify from 'js-beautify';
+
 /**
  * Component HTML code (formatted)
  *
@@ -6,14 +7,15 @@ const beautify = require('js-beautify')
  * @param {unknown} params - Component macro params
  * @param {unknown} pathName - path name
  */
-function getHTMLCodeFromExample (componentName, params, pathName) {
+
+function getHTMLCodeFromExample(componentName, params, pathName) {
   const templatePath = `${pathName}s/${componentName}/_template.${componentName}.njk`;
 
   // Render to HTML
-  const html = this.env.render(templatePath, { params }).trim()
+  const html = this.env.render(templatePath, { params }).trim();
 
   // Default beautify options
-  const options = beautify.html.defaultOptions()
+  const options = beautify.html.defaultOptions();
 
   return beautify.html(html, {
     indent_size: 2,
@@ -23,7 +25,7 @@ function getHTMLCodeFromExample (componentName, params, pathName) {
     max_preserve_newlines: 0,
     // Ensure attribute wrapping in header SVG is preserved
     wrap_attributes: 'preserve'
-  })
+  });
 }
 
-module.exports = getHTMLCodeFromExample
+export default getHTMLCodeFromExample;

package/src/js/globals/get-html-code-from-file.js

@@ -1,16 +1,16 @@
-const beautify = require('js-beautify')
+import beautify from 'js-beautify';
+
 /**
  * Component HTML code (formatted)
  *
  * @param {string} templatePath - Path to nunjucks file. Eg: `includes/_loremipsum-large.njk`;
  */
-function getHTMLCodeFromFile (templatePath) {
-
+function getHTMLCodeFromFile(templatePath) {
   // Render to HTML
-  const html = this.env.render(templatePath).trim()
+  const html = this.env.render(templatePath).trim();
 
   // Default beautify options
-  const options = beautify.html.defaultOptions()
+  const options = beautify.html.defaultOptions();
 
   return beautify.html(html, {
     indent_size: 2,
@@ -20,7 +20,7 @@ function getHTMLCodeFromFile (templatePath) {
     max_preserve_newlines: 0,
     // Ensure attribute wrapping in header SVG is preserved
     wrap_attributes: 'preserve'
-  })
+  });
 }
 
-module.exports = getHTMLCodeFromFile
+export default getHTMLCodeFromFile;

package/src/js/globals/get-nunjucks-code-from-example.js

@@ -1,5 +1,4 @@
-const { outdent } = require('outdent')
-
+import { outdent } from 'outdent';
 
 /**
  * Component Nunjucks code (formatted)
@@ -8,25 +7,25 @@ const { outdent } = require('outdent')
  * @param {unknown} params - Component macro params
  * @returns {string} Nunjucks code
  */
-function getNunjucksCodeFromExample (componentName, params, pathName) {
-  const macroName = kebabCaseToPascalCase(componentName)
+function getNunjucksCodeFromExample(componentName, params, pathName) {
+  const macroName = kebabCaseToPascalCase(componentName);
 
   return outdent`
     {% from "${pathName}s/${componentName}/_macro.${componentName}.njk" import ${pathName}${macroName} %}
 
     {{ ${pathName}${macroName}(${
-      JSON.stringify(params, undefined, 2)
-    }) }}
-  `
+    JSON.stringify(params, undefined, 2)
+  }) }}
+  `;
 }
 
-function kebabCaseToPascalCase (value) {
+function kebabCaseToPascalCase(value) {
   return value
     .toLowerCase()
     .split('-')
     // capitalize each 'word'
     .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join('')
+    .join('');
 }
 
-module.exports = getNunjucksCodeFromExample
+export default getNunjucksCodeFromExample;

package/src/js/globals/get-nunjucks-code-from-file.js

@@ -1,4 +1,5 @@
-const { outdent } = require('outdent')
+import { outdent } from 'outdent';
+import fs from 'fs';
 
 /**
  * Component Nunjucks code (formatted)
@@ -6,9 +7,8 @@ const { outdent } = require('outdent')
  * @param {string} templatePath - Path to nunjucks file. Eg: `includes/_loremipsum-large.njk`;
  * @returns {string} Nunjucks code
  */
-function getNunjucksCodeFromFile (templatePath) {
-  const fs = require('fs');
-  let codeFromFile
+function getNunjucksCodeFromFile(templatePath) {
+  let codeFromFile;
 
   try {
     codeFromFile = fs.readFileSync(`src/templates/${templatePath}`, 'utf8');
@@ -18,7 +18,7 @@ function getNunjucksCodeFromFile (templatePath) {
 
   return outdent`
     ${codeFromFile}
-  `
+  `;
 }
 
-module.exports = getNunjucksCodeFromFile
+export default getNunjucksCodeFromFile;

package/src/js/globals/index.js

@@ -1,14 +1,14 @@
 /**
  * Nunjucks globals
  */
-const getHTMLCodeFromExample = require('./get-html-code-from-example.js')
-const getNunjucksCodeFromExample = require('./get-nunjucks-code-from-example.js')
-const getHTMLCodeFromFile = require('./get-html-code-from-file.js')
-const getNunjucksCodeFromFile = require('./get-nunjucks-code-from-file.js')
+import getHTMLCodeFromExample from './get-html-code-from-example.js';
+import getNunjucksCodeFromExample from './get-nunjucks-code-from-example.js';
+import getHTMLCodeFromFile from './get-html-code-from-file.js';
+import getNunjucksCodeFromFile from './get-nunjucks-code-from-file.js';
 
-module.exports = {
+export const SOURCE_NUNJUCKS_GLOBALS = {
   getNunjucksCodeFromExample,
   getHTMLCodeFromExample,
   getNunjucksCodeFromFile,
   getHTMLCodeFromFile
-}
+};

package/src/js/index.js

@@ -23,7 +23,8 @@ import {
   MenuHorizontalComponent,
   MenuNavigationComponent,
   HeaderNavigationComponent,
-  NavComponent
+  NavComponent,
+  DatepickerComponent
 } from './desy-html.js';
 
 var aria = aria || {};
@@ -48,6 +49,7 @@ MenuHorizontalComponent(aria);
 MenuNavigationComponent(aria);
 HeaderNavigationComponent(aria);
 NavComponent(aria);
+DatepickerComponent(aria);
 
 //Using the browser API to copy code to the clipboard
 const copyButtons = document.querySelectorAll('[data-module = "c-button-copy"]');