@erst-vg/dkfds-vite 8.0.1

package/src/js/components/dropdown-sort.js

@@ -0,0 +1,62 @@
+'use strict';
+import Dropdown from './dropdown';
+import '../polyfills/Function/prototype/bind';
+
+/**
+ * Add functionality to sorting variant of Overflow menu component
+ * @param {HTMLElement} container .overflow-menu element
+ */
+function DropdownSort (container){
+    this.container = container;
+    this.button = container.getElementsByClassName('button-overflow-menu')[0];
+
+    // if no value is selected, choose first option
+    if(!this.container.querySelector('.overflow-list li[aria-selected="true"]')){
+        this.container.querySelectorAll('.overflow-list li')[0].setAttribute('aria-selected', "true");
+    }
+
+    this.updateSelectedValue();
+}
+
+/**
+ * Add click events on overflow menu and options in menu
+ */
+DropdownSort.prototype.init = function(){
+    this.overflowMenu = new Dropdown(this.button).init();
+
+    let sortingOptions = this.container.querySelectorAll('.overflow-list li button');
+    for(let s = 0; s < sortingOptions.length; s++){
+        let option = sortingOptions[s];
+        option.addEventListener('click', this.onOptionClick.bind(this));
+    }
+}
+
+/**
+ * Update button text to selected value
+ */
+DropdownSort.prototype.updateSelectedValue = function(){
+    let selectedItem = this.container.querySelector('.overflow-list li[aria-selected="true"]');
+    this.container.getElementsByClassName('button-overflow-menu')[0].getElementsByClassName('selected-value')[0].innerText = selectedItem.innerText;
+}
+
+/**
+ * Triggers when choosing option in menu
+ * @param {PointerEvent} e
+ */
+DropdownSort.prototype.onOptionClick = function(e){
+    let li = e.target.parentNode;
+    li.parentNode.querySelector('li[aria-selected="true"]').removeAttribute('aria-selected');
+    li.setAttribute('aria-selected', 'true');
+
+    let button = li.parentNode.parentNode.parentNode.getElementsByClassName('button-overflow-menu')[0];
+    let eventSelected = new Event('fds.dropdown.selected');
+    eventSelected.detail = this.target;
+    button.dispatchEvent(eventSelected);
+    this.updateSelectedValue();
+
+    // hide menu
+    let overflowMenu = new Dropdown(button);
+    overflowMenu.hide();
+}
+
+export default DropdownSort;

package/src/js/components/dropdown.js

@@ -0,0 +1,311 @@
+'use strict';
+const breakpoints = require('../utils/breakpoints');
+const BUTTON = '.button-overflow-menu';
+const jsDropdownCollapseModifier = 'js-dropdown--responsive-collapse'; //option: make dropdown behave as the collapse component when on small screens (used by submenus in the header and step-dropdown).
+const TARGET = 'data-js-target';
+
+/**
+ * Add functionality to overflow menu component
+ * @param {HTMLButtonElement} buttonElement Overflow menu button
+ */
+function Dropdown (buttonElement) {
+  this.buttonElement = buttonElement;
+  this.targetEl = null;
+  this.responsiveListCollapseEnabled = false;
+
+  if(this.buttonElement === null ||this.buttonElement === undefined){
+    throw new Error(`Could not find button for overflow menu component.`);
+  }
+  let targetAttr = this.buttonElement.getAttribute(TARGET);
+  if(targetAttr === null || targetAttr === undefined){
+    throw new Error('Attribute could not be found on overflow menu component: '+TARGET);
+  }
+  let targetEl = document.getElementById(targetAttr.replace('#', ''));
+  if(targetEl === null || targetEl === undefined){
+    throw new Error('Panel for overflow menu component could not be found.');
+  }
+  this.targetEl = targetEl;
+}
+
+/**
+ * Set click events
+ */
+Dropdown.prototype.init = function (){
+  if(this.buttonElement !== null && this.buttonElement !== undefined && this.targetEl !== null && this.targetEl !== undefined){
+
+    if(this.buttonElement.parentNode.classList.contains('overflow-menu--md-no-responsive') || this.buttonElement.parentNode.classList.contains('overflow-menu--lg-no-responsive')){
+      this.responsiveListCollapseEnabled = true;
+    }
+
+    //Clicked outside dropdown -> close it
+    document.getElementsByTagName('body')[ 0 ].removeEventListener('click', outsideClose);
+    document.getElementsByTagName('body')[ 0 ].addEventListener('click', outsideClose);
+    //Clicked on dropdown open button --> toggle it
+    this.buttonElement.removeEventListener('click', toggleDropdown);
+    this.buttonElement.addEventListener('click', toggleDropdown);
+    let $module = this;
+    // set aria-hidden correctly for screenreaders (Tringuide responsive)
+    if(this.responsiveListCollapseEnabled) {
+      let element = this.buttonElement;
+      if (window.IntersectionObserver) {
+        // trigger event when button changes visibility
+        let observer = new IntersectionObserver(function (entries) {
+          // button is visible
+          if (entries[ 0 ].intersectionRatio) {
+            if (element.getAttribute('aria-expanded') === 'false') {
+              $module.targetEl.setAttribute('aria-hidden', 'true');
+            }
+          } else {
+            // button is not visible
+            if ($module.targetEl.getAttribute('aria-hidden') === 'true') {
+              $module.targetEl.setAttribute('aria-hidden', 'false');
+            }
+          }
+        }, {
+          root: document.body
+        });
+        observer.observe(element);
+      } else {
+        // IE: IntersectionObserver is not supported, so we listen for window resize and grid breakpoint instead
+        if (doResponsiveCollapse($module.triggerEl)) {
+          // small screen
+          if (element.getAttribute('aria-expanded') === 'false') {
+            $module.targetEl.setAttribute('aria-hidden', 'true');
+          } else{
+            $module.targetEl.setAttribute('aria-hidden', 'false');
+          }
+        } else {
+          // Large screen
+          $module.targetEl.setAttribute('aria-hidden', 'false');
+        }
+        window.addEventListener('resize', function () {
+          if (doResponsiveCollapse($module.triggerEl)) {
+            if (element.getAttribute('aria-expanded') === 'false') {
+              $module.targetEl.setAttribute('aria-hidden', 'true');
+            } else{
+              $module.targetEl.setAttribute('aria-hidden', 'false');
+            }
+          } else {
+            $module.targetEl.setAttribute('aria-hidden', 'false');
+          }
+        });
+      }
+    }
+
+    
+    document.removeEventListener('keyup', closeOnEscape);
+    document.addEventListener('keyup', closeOnEscape);
+  }
+}
+
+/**
+ * Hide overflow menu
+ */
+Dropdown.prototype.hide = function(){
+  toggle(this.buttonElement);
+}
+
+/**
+ * Show overflow menu
+ */
+Dropdown.prototype.show = function(){
+  toggle(this.buttonElement);
+}
+
+let closeOnEscape = function(event){
+  var key = event.which || event.keyCode;
+  if (key === 27) {
+    closeAll(event);
+  }
+};
+
+/**
+ * Get an Array of button elements belonging directly to the given
+ * accordion element.
+ * @param parent accordion element
+ * @returns {NodeListOf<SVGElementTagNameMap[[string]]> | NodeListOf<HTMLElementTagNameMap[[string]]> | NodeListOf<Element>}
+ */
+let getButtons = function (parent) {
+  return parent.querySelectorAll(BUTTON);
+};
+
+/**
+ * Close all overflow menus
+ * @param {event} event default is null
+ */
+let closeAll = function (event = null){
+  let changed = false;
+  const body = document.querySelector('body');
+
+  let overflowMenuEl = document.getElementsByClassName('overflow-menu');
+  for (let oi = 0; oi < overflowMenuEl.length; oi++) {
+    let currentOverflowMenuEL = overflowMenuEl[ oi ];
+    let triggerEl = currentOverflowMenuEL.querySelector(BUTTON+'[aria-expanded="true"]');
+    if(triggerEl !== null){
+      changed = true;
+      let targetEl = currentOverflowMenuEL.querySelector('#'+triggerEl.getAttribute(TARGET).replace('#', ''));
+
+        if (targetEl !== null && triggerEl !== null) {
+          if(doResponsiveCollapse(triggerEl)){
+            if(triggerEl.getAttribute('aria-expanded') === true){
+              let eventClose = new Event('fds.dropdown.close');
+              triggerEl.dispatchEvent(eventClose);
+            }
+            triggerEl.setAttribute('aria-expanded', 'false');
+            targetEl.classList.add('collapsed');
+            targetEl.setAttribute('aria-hidden', 'true');
+          }
+        }
+    }
+  }
+
+  if(changed && event !== null){
+    event.stopImmediatePropagation();
+  }
+};
+let offset = function (el) {
+  let rect = el.getBoundingClientRect(),
+    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
+    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+  return { top: rect.top + scrollTop, left: rect.left + scrollLeft };
+};
+
+let toggleDropdown = function (event, forceClose = false) {
+  event.stopPropagation();
+  event.preventDefault();
+
+  toggle(this, forceClose);
+
+};
+
+let toggle = function(button, forceClose = false){
+  let triggerEl = button;
+  let targetEl = null;
+  if(triggerEl !== null && triggerEl !== undefined){
+    let targetAttr = triggerEl.getAttribute(TARGET);
+    if(targetAttr !== null && targetAttr !== undefined){
+      targetEl = document.getElementById(targetAttr.replace('#', ''));
+    }
+  }
+  if(triggerEl !== null && triggerEl !== undefined && targetEl !== null && targetEl !== undefined){
+    //change state
+
+    targetEl.style.left = null;
+    targetEl.style.right = null;
+
+    if(triggerEl.getAttribute('aria-expanded') === 'true' || forceClose){
+      //close
+      triggerEl.setAttribute('aria-expanded', 'false');
+      targetEl.classList.add('collapsed');
+      targetEl.setAttribute('aria-hidden', 'true');      
+      let eventClose = new Event('fds.dropdown.close');
+      triggerEl.dispatchEvent(eventClose);
+    }else{
+      
+      if(!document.getElementsByTagName('body')[0].classList.contains('mobile_nav-active')){
+        closeAll();
+      }
+      //open
+      triggerEl.setAttribute('aria-expanded', 'true');
+      targetEl.classList.remove('collapsed');
+      targetEl.setAttribute('aria-hidden', 'false');
+      let eventOpen = new Event('fds.dropdown.open');
+      triggerEl.dispatchEvent(eventOpen);
+      let targetOffset = offset(targetEl);
+
+      if(targetOffset.left < 0){
+        targetEl.style.left = '0px';
+        targetEl.style.right = 'auto';
+      }
+      let right = targetOffset.left + targetEl.offsetWidth;
+      if(right > window.innerWidth){
+        targetEl.style.left = 'auto';
+        targetEl.style.right = '0px';
+      }
+
+      let offsetAgain = offset(targetEl);
+
+      if(offsetAgain.left < 0){
+
+        targetEl.style.left = '0px';
+        targetEl.style.right = 'auto';
+      }
+      right = offsetAgain.left + targetEl.offsetWidth;
+      if(right > window.innerWidth){
+
+        targetEl.style.left = 'auto';
+        targetEl.style.right = '0px';
+      }
+    }
+
+  }
+}
+
+let hasParent = function (child, parentTagName){
+  if(child.parentNode.tagName === parentTagName){
+    return true;
+  } else if(parentTagName !== 'BODY' && child.parentNode.tagName !== 'BODY'){
+    return hasParent(child.parentNode, parentTagName);
+  }else{
+    return false;
+  }
+};
+
+let outsideClose = function (evt){
+  if(!document.getElementsByTagName('body')[0].classList.contains('mobile_nav-active')){
+    if(document.querySelector('body.mobile_nav-active') === null && !evt.target.classList.contains('button-menu-close')) {
+      let openDropdowns = document.querySelectorAll(BUTTON+'[aria-expanded=true]');
+      for (let i = 0; i < openDropdowns.length; i++) {
+        let triggerEl = openDropdowns[i];
+        let targetEl = null;
+        let targetAttr = triggerEl.getAttribute(TARGET);
+        if (targetAttr !== null && targetAttr !== undefined) {
+          if(targetAttr.indexOf('#') !== -1){
+            targetAttr = targetAttr.replace('#', '');
+          }
+          targetEl = document.getElementById(targetAttr);
+        }
+        if (doResponsiveCollapse(triggerEl) || (hasParent(triggerEl, 'HEADER') && !evt.target.classList.contains('overlay'))) {
+          //closes dropdown when clicked outside
+          if (evt.target !== triggerEl) {
+            //clicked outside trigger, force close
+            triggerEl.setAttribute('aria-expanded', 'false');
+            targetEl.classList.add('collapsed');
+            targetEl.setAttribute('aria-hidden', 'true');          
+            let eventClose = new Event('fds.dropdown.close');
+            triggerEl.dispatchEvent(eventClose);
+          }
+        }
+      }
+    }
+  }
+};
+
+let doResponsiveCollapse = function (triggerEl){
+  if(!triggerEl.classList.contains(jsDropdownCollapseModifier)){
+    // not nav overflow menu
+    if(triggerEl.parentNode.classList.contains('overflow-menu--md-no-responsive') || triggerEl.parentNode.classList.contains('overflow-menu--lg-no-responsive')) {
+      // trinindikator overflow menu
+      if (window.innerWidth <= getTringuideBreakpoint(triggerEl)) {
+        // overflow menu på responsiv tringuide aktiveret
+        return true;
+      }
+    } else{
+      // normal overflow menu
+      return true;
+    }
+  }
+
+  return false;
+};
+
+let getTringuideBreakpoint = function (button){
+  if(button.parentNode.classList.contains('overflow-menu--md-no-responsive')){
+    return breakpoints.md;
+  }
+  if(button.parentNode.classList.contains('overflow-menu--lg-no-responsive')){
+    return breakpoints.lg;
+  }
+};
+
+export default Dropdown;

package/src/js/components/error-summary.js

@@ -0,0 +1,150 @@
+'use strict';
+/**
+ * Handle focus on input elements upon clicking link in error message
+ * @param {HTMLElement} element Error summary element
+ */
+function ErrorSummary (element) {
+  this.element = element;
+}
+
+/**
+ * Set events on links in error summary
+ */
+ErrorSummary.prototype.init = function () {
+  if (!this.element) {
+    return
+  }
+  this.element.focus()
+
+  this.element.addEventListener('click', this.handleClick.bind(this))
+}
+
+/**
+* Click event handler
+*
+* @param {MouseEvent} event - Click event
+*/
+ErrorSummary.prototype.handleClick = function (event) {
+  var target = event.target
+  if (this.focusTarget(target)) {
+    event.preventDefault()
+  }
+}
+
+/**
+ * Focus the target element
+ *
+ * By default, the browser will scroll the target into view. Because our labels
+ * or legends appear above the input, this means the user will be presented with
+ * an input without any context, as the label or legend will be off the top of
+ * the screen.
+ *
+ * Manually handling the click event, scrolling the question into view and then
+ * focussing the element solves this.
+ *
+ * This also results in the label and/or legend being announced correctly in
+ * NVDA (as tested in 2018.3.2) - without this only the field type is announced
+ * (e.g. "Edit, has autocomplete").
+ *
+ * @param {HTMLElement} $target - Event target
+ * @returns {boolean} True if the target was able to be focussed
+ */
+ErrorSummary.prototype.focusTarget = function ($target) {
+  // If the element that was clicked was not a link, return early
+  if ($target.tagName !== 'A' || $target.href === false) {
+    return false
+  }
+
+  var inputId = this.getFragmentFromUrl($target.href)
+  var $input = document.getElementById(inputId)
+  if (!$input) {
+    return false
+  }
+
+  var $legendOrLabel = this.getAssociatedLegendOrLabel($input)
+  if (!$legendOrLabel) {
+    return false
+  }
+
+  // Scroll the legend or label into view *before* calling focus on the input to
+  // avoid extra scrolling in browsers that don't support `preventScroll` (which
+  // at time of writing is most of them...)
+  $legendOrLabel.scrollIntoView()
+  $input.focus({ preventScroll: true })
+
+  return true
+}
+
+/**
+ * Get fragment from URL
+ *
+ * Extract the fragment (everything after the hash) from a URL, but not including
+ * the hash.
+ *
+ * @param {string} url - URL
+ * @returns {string} Fragment from URL, without the hash
+ */
+ErrorSummary.prototype.getFragmentFromUrl = function (url) {
+  if (url.indexOf('#') === -1) {
+    return false
+  }
+
+  return url.split('#').pop()
+}
+
+/**
+ * Get associated legend or label
+ *
+ * Returns the first element that exists from this list:
+ *
+ * - The `<legend>` associated with the closest `<fieldset>` ancestor, as long
+ *   as the top of it is no more than half a viewport height away from the
+ *   bottom of the input
+ * - The first `<label>` that is associated with the input using for="inputId"
+ * - The closest parent `<label>`
+ *
+ * @param {HTMLElement} $input - The input
+ * @returns {HTMLElement} Associated legend or label, or null if no associated
+ *                        legend or label can be found
+ */
+ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
+  var $fieldset = $input.closest('fieldset')
+
+  if ($fieldset) {
+    var legends = $fieldset.getElementsByTagName('legend')
+
+    if (legends.length) {
+      var $candidateLegend = legends[0]
+
+      // If the input type is radio or checkbox, always use the legend if there
+      // is one.
+      if ($input.type === 'checkbox' || $input.type === 'radio') {
+        return $candidateLegend
+      }
+
+      // For other input types, only scroll to the fieldset’s legend (instead of
+      // the label associated with the input) if the input would end up in the
+      // top half of the screen.
+      //
+      // This should avoid situations where the input either ends up off the
+      // screen, or obscured by a software keyboard.
+      var legendTop = $candidateLegend.getBoundingClientRect().top
+      var inputRect = $input.getBoundingClientRect()
+
+      // If the browser doesn't support Element.getBoundingClientRect().height
+      // or window.innerHeight (like IE8), bail and just link to the label.
+      if (inputRect.height && window.innerHeight) {
+        var inputBottom = inputRect.top + inputRect.height
+
+        if (inputBottom - legendTop < window.innerHeight / 2) {
+          return $candidateLegend
+        }
+      }
+    }
+  }
+
+  return document.querySelector("label[for='" + $input.getAttribute('id') + "']") ||
+    $input.closest('label')
+}
+
+export default ErrorSummary;

package/src/js/components/modal.js

@@ -0,0 +1,160 @@
+'use strict';
+/**
+ * Adds click functionality to modal
+ * @param {HTMLElement} $modal Modal element
+ */
+function Modal ($modal) {
+    this.$modal = $modal;
+    let id = this.$modal.getAttribute('id');
+    this.triggers = document.querySelectorAll('[data-module="modal"][data-target="'+id+'"]');
+}
+
+/**
+ * Set events
+ */
+Modal.prototype.init = function () {
+  let triggers = this.triggers;
+  for (let i = 0; i < triggers.length; i++){
+    let trigger = triggers[ i ];
+    trigger.addEventListener('click', this.show.bind(this));
+  }
+  let closers = this.$modal.querySelectorAll('[data-modal-close]');
+  for (let c = 0; c < closers.length; c++){
+    let closer = closers[ c ];
+    closer.addEventListener('click', this.hide.bind(this));
+  }
+};
+
+/**
+ * Hide modal
+ */
+Modal.prototype.hide = function (){
+  let modalElement = this.$modal;
+  if(modalElement !== null){
+    modalElement.setAttribute('aria-hidden', 'true');
+
+    let eventClose = document.createEvent('Event');
+    eventClose.initEvent('fds.modal.hidden', true, true);
+    modalElement.dispatchEvent(eventClose);
+
+    let $backdrop = document.querySelector('#modal-backdrop');
+    $backdrop.parentNode.removeChild($backdrop);
+
+    document.getElementsByTagName('body')[0].classList.remove('modal-open');
+    document.removeEventListener('keydown', trapFocus, true);
+
+    if(!hasForcedAction(modalElement)){
+      document.removeEventListener('keyup', handleEscape);
+    }
+    let dataModalOpener = modalElement.getAttribute('data-modal-opener');
+    if(dataModalOpener !== null){
+      let opener = document.getElementById(dataModalOpener)
+      if(opener !== null){
+        opener.focus();
+      }
+      modalElement.removeAttribute('data-modal-opener');
+    }
+  }
+};
+
+/**
+ * Show modal
+ */
+Modal.prototype.show = function (e = null){
+  let modalElement = this.$modal;
+  if(modalElement !== null){
+    if(e !== null){
+      let openerId = e.target.getAttribute('id');
+      if(openerId === null){
+        openerId = 'modal-opener-'+Math.floor(Math.random() * (9999 - 1000 + 1) + 1000);
+        e.target.setAttribute('id', openerId)
+      }
+      modalElement.setAttribute('data-modal-opener', openerId);
+    }
+
+    // Hide open modals - FDS do not recommend more than one open modal at a time
+    let activeModals = document.querySelectorAll('.fds-modal[aria-hidden=false]');
+    for(let i = 0; i < activeModals.length; i++){
+      new Modal(activeModals[i]).hide();
+    }
+
+    modalElement.setAttribute('aria-hidden', 'false');
+    modalElement.setAttribute('tabindex', '-1');
+
+    let eventOpen = document.createEvent('Event');
+    eventOpen.initEvent('fds.modal.shown', true, true);
+    modalElement.dispatchEvent(eventOpen);
+
+    let $backdrop = document.createElement('div');
+    $backdrop.classList.add('modal-backdrop');
+    $backdrop.setAttribute('id', "modal-backdrop");
+    document.getElementsByTagName('body')[0].appendChild($backdrop);
+
+    document.getElementsByTagName('body')[0].classList.add('modal-open');
+
+    modalElement.focus();
+
+    document.addEventListener('keydown', trapFocus, true);
+    if(!hasForcedAction(modalElement)){
+      document.addEventListener('keyup', handleEscape);
+    }
+
+  }
+};
+
+/**
+ * Close modal when hitting ESC
+ * @param {KeyboardEvent} event 
+ */
+let handleEscape = function (event) {
+  var key = event.which || event.keyCode;
+  let modalElement = document.querySelector('.fds-modal[aria-hidden=false]');
+  let currentModal = new Modal(document.querySelector('.fds-modal[aria-hidden=false]'));
+  if (key === 27){
+    let possibleOverflowMenus = modalElement.querySelectorAll('.button-overflow-menu[aria-expanded="true"]');
+    if(possibleOverflowMenus.length === 0){
+      currentModal.hide();
+    }
+  }
+};
+
+/**
+ * Trap focus in modal when open
+ * @param {PointerEvent} e
+ */
+ function trapFocus(e){
+  var currentDialog = document.querySelector('.fds-modal[aria-hidden=false]');
+  if(currentDialog !== null){
+    var focusableElements = currentDialog.querySelectorAll('a[href]:not([disabled]):not([aria-hidden=true]), button:not([disabled]):not([aria-hidden=true]), textarea:not([disabled]):not([aria-hidden=true]), input:not([type=hidden]):not([disabled]):not([aria-hidden=true]), select:not([disabled]):not([aria-hidden=true]), details:not([disabled]):not([aria-hidden=true]), [tabindex]:not([tabindex="-1"]):not([disabled]):not([aria-hidden=true])');
+    
+    var firstFocusableElement = focusableElements[0];
+    var lastFocusableElement = focusableElements[focusableElements.length - 1];
+
+    var isTabPressed = (e.key === 'Tab' || e.keyCode === 9);
+
+    if (!isTabPressed) { 
+      return; 
+    }
+
+    if ( e.shiftKey ) /* shift + tab */ {
+      if (document.activeElement === firstFocusableElement) {
+        lastFocusableElement.focus();
+          e.preventDefault();
+      }
+    } else /* tab */ {
+      if (document.activeElement === lastFocusableElement) {
+        firstFocusableElement.focus();
+          e.preventDefault();
+      }
+    }
+  }
+};
+
+function hasForcedAction (modal){
+  if(modal.getAttribute('data-modal-forced-action') === null){
+    return false;
+  }
+  return true;
+}
+
+export default Modal;