@ons/design-system 44.0.0 → 44.1.2

package/components/address-input/_macro.njk

@@ -131,6 +131,7 @@
                             "isEditable": params.isEditable,
                             "ariaYouHaveSelected": params.ariaYouHaveSelected,
                             "ariaMinChars": params.ariaMinChars,
+                            "minChars": params.minChars,
                             "ariaResultsLabel": params.ariaResultsLabel,
                             "ariaOneResult": params.ariaOneResult,
                             "ariaNResults": params.ariaNResults,

package/components/address-input/autosuggest.address.js

@@ -54,7 +54,6 @@ export default class AutosuggestAddress {
       suggestionFunction: this.suggestAddresses.bind(this),
       sanitisedQueryReplaceChars: this.addressReplaceChars,
       sanitisedQuerySplitNumsChars: this.sanitisedQuerySplitNumsChars,
-      minChars: 3,
       suggestOnBoot: true,
       handleUpdate: true,
     });

package/components/autosuggest/_macro.njk

@@ -6,6 +6,7 @@
         class="{% if not params.externalInitialiser %}ons-js-autosuggest {% endif %}{% if params.isEditable == false %}ons-js-address-not-editable{% endif %}{% if params.mandatory is defined and params.mandatory == true %} ons-js-address-mandatory{% endif %} {% if params.containerClasses is defined and params.containerClasses %} {{ params.containerClasses }}{% endif %} ons-autosuggest-input"
         data-instructions="{{ params.instructions }}"
         data-aria-you-have-selected="{{ params.ariaYouHaveSelected }}"
+        data-min-chars="{{ params.minChars }}"
         data-aria-min-chars="{{ params.ariaMinChars }}"
         data-aria-one-result="{{ params.ariaOneResult }}"
         data-aria-n-results="{{ params.ariaNResults }}"

package/components/autosuggest/autosuggest.ui.js

@@ -52,6 +52,7 @@ export default class AutosuggestUI {
     // Settings
     this.autosuggestData = autosuggestData || context.getAttribute('data-autosuggest-data');
     this.ariaYouHaveSelected = ariaYouHaveSelected || context.getAttribute('data-aria-you-have-selected');
+    this.minChars = minChars || context.getAttribute('data-min-chars') || 3;
     this.ariaMinChars = ariaMinChars || context.getAttribute('data-aria-min-chars');
     this.ariaOneResult = ariaOneResult || context.getAttribute('data-aria-one-result');
     this.ariaNResults = ariaNResults || context.getAttribute('data-aria-n-results');
@@ -66,7 +67,6 @@ export default class AutosuggestUI {
     this.typeMore = typeMore || context.getAttribute('data-type-more');
     this.allowMultiple = context.getAttribute('data-allow-multiple') || false;
     this.listboxId = this.listbox.getAttribute('id');
-    this.minChars = minChars || 3;
     this.resultLimit = resultLimit || 10;
     this.suggestOnBoot = suggestOnBoot;
     this.lang = lang || 'en';

package/components/checkboxes/_checkbox.scss

@@ -124,7 +124,7 @@ $checkbox-padding: 11px;
   }
 
   &__input:focus + &__label::before {
-    @extend .ons-input:focus;
+    @extend %ons-input-focus;
   }
 
   &__input:not(:checked) ~ &__other {

package/components/checkboxes/_macro.njk

@@ -40,9 +40,9 @@
                 {% endif %}
                 {% if checkbox.other is defined and checkbox.other %}
                     {% set otherClass = " ons-js-other" %}
-                {% endif %}
-                {% if checkbox.other.selectAllChildren is defined and checkbox.other.selectAllChildren == true %}
-                    {% set otherClass = otherClass + " ons-js-select-all-children" %}
+                    {% if checkbox.other.selectAllChildren is defined and checkbox.other.selectAllChildren == true %}
+                        {% set otherClass = otherClass + " ons-js-select-all-children" %}
+                    {% endif %}
                 {% endif %}
                 <span class="ons-checkboxes__item{{ " ons-checkboxes__item--no-border" if params.borderless }}">
                     {% set config = {

package/components/collapsible/_collapsible.scss

@@ -17,7 +17,7 @@ $collapsible-caret-width: 1.5rem;
 
       &:focus {
         .ons-collapsible__title {
-          @extend a:focus;
+          @extend %a-focus;
           // extend collapsible focus background behind caret
           margin-left: -$collapsible-caret-width;
           padding-left: $collapsible-caret-width;

package/components/input/_input.scss

@@ -1,3 +1,8 @@
+%ons-input-focus {
+  box-shadow: 0 0 0 3px $color-focus, inset 0 0 0 1px $color-input;
+  outline: none;
+}
+
 .ons-input {
   border: $input-border-width solid $color-input;
   border-radius: $input-radius;
@@ -31,8 +36,7 @@
   }
 
   &:focus {
-    box-shadow: 0 0 0 3px $color-focus, inset 0 0 0 1px $color-input;
-    outline: none;
+    @extend %ons-input-focus;
   }
 
   &:disabled {

package/components/message/_message.scss

@@ -1,5 +1,7 @@
+@use 'sass:math';
+
 .ons-message {
-  border-radius: $grid-gutters / 2;
+  border-radius: math.div($grid-gutters, 2);
   margin-bottom: 2rem;
 
   &--sent {

package/components/modal/_macro.njk

@@ -0,0 +1,23 @@
+{% macro onsModal(params) %}    
+    {% set modalID = params.id | default('dialog') %}
+    <dialog class="ons-modal ons-js-modal {{ params.classes }}"
+        id="{{ modalID }}"
+        role="dialog"
+        aria-labelledby="ons-modal-title"
+        {% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}
+    >
+        <h1 id="ons-modal-title" class="ons-modal__title">
+            {{ params.title }}
+        </h1>
+        <div class="ons-modal__body">
+            {{ (params.body if params else "") | safe }}{{ caller() if caller }}
+        </div>
+        {% if params.btnText %}
+            {% from "components/button/_macro.njk" import onsButton %}
+            {{ onsButton({
+                "text": params.btnText,
+                "classes": "ons-js-modal-btn ons-u-mt-s"
+            }) }}
+        {% endif %}
+    </dialog>
+{% endmacro %}

package/components/modal/_modal.scss

@@ -0,0 +1,32 @@
+$backdrop-colour: rgba(0, 0, 0, 0.8);
+
+.ons-modal {
+  border: none;
+  border-radius: 0.4rem;
+  box-shadow: 0 0 7px 0 #000;
+  display: none;
+  margin-left: 2rem;
+  margin-right: 2rem;
+  max-width: 500px;
+  padding: 2rem;
+  width: auto;
+
+  @media screen and (min-width: 600px) {
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+  }
+
+  &::backdrop {
+    backdrop-filter: blur(3px);
+    background: $backdrop-colour;
+  }
+
+  & + .backdrop {
+    background: $backdrop-colour;
+  }
+}
+
+.ons-modal-overlay {
+  overflow: hidden;
+}

package/components/modal/modal.dom.js

@@ -0,0 +1,14 @@
+import domready from '../../js/domready';
+
+async function modals() {
+  const modals = [...document.querySelectorAll('.ons-js-modal')];
+  const timeouts = [...document.querySelectorAll('.ons-js-timeout-modal')];
+
+  if (modals.length && !timeouts.length) {
+    const Modal = (await import('./modal')).default;
+
+    modals.forEach(component => new Modal(component));
+  }
+}
+
+domready(modals);

package/components/modal/modal.js

@@ -0,0 +1,104 @@
+import dialogPolyfill from 'dialog-polyfill';
+
+const overLayClass = 'ons-modal-overlay';
+
+export default class Modal {
+  constructor(component) {
+    this.component = component;
+    this.launcher = document.querySelector(`[data-modal-id=${component.id}]`);
+    this.closeButton = component.querySelector('.ons-js-modal-btn');
+    this.lastFocusedEl = null;
+
+    this.initialise();
+  }
+
+  initialise() {
+    if (!this.dialogSupported()) {
+      /* istanbul ignore next */
+      return;
+    }
+
+    if (this.launcher) {
+      this.launcher.addEventListener('click', this.openDialog.bind(this));
+    }
+
+    if (this.closeButton) {
+      this.closeButton.addEventListener('click', this.closeDialog.bind(this));
+    }
+  }
+
+  dialogSupported() {
+    if (typeof HTMLDialogElement === 'function') {
+      return true;
+    } else {
+      try {
+        dialogPolyfill.registerDialog(this.component);
+        return true;
+      } catch (error) {
+        /* istanbul ignore next */
+        return false;
+      }
+    }
+  }
+
+  openDialog(event) {
+    if (!this.isDialogOpen()) {
+      this.component.classList.add('ons-u-db');
+      document.querySelector('body').className += ' ' + overLayClass;
+      this.makePageContentInert();
+      this.saveLastFocusedEl();
+      if (event) {
+        const modal = document.getElementById(event.target.getAttribute('data-modal-id'));
+        modal.showModal();
+      } else {
+        this.component.showModal();
+      }
+    }
+  }
+
+  saveLastFocusedEl() {
+    this.lastFocusedEl = document.activeElement;
+    if (!this.lastFocusedEl || this.lastFocusedEl === document.body) {
+      this.lastFocusedEl = null;
+    } else if (document.querySelector) {
+      this.lastFocusedEl = document.querySelector(':focus');
+    }
+  }
+
+  setFocusOnLastFocusedEl(lastFocusedEl) {
+    if (lastFocusedEl) {
+      lastFocusedEl.focus();
+    }
+  }
+
+  makePageContentInert() {
+    if (document.querySelector('.ons-page')) {
+      document.querySelector('.ons-page').inert = true;
+      document.querySelector('.ons-page').setAttribute('aria-hidden', 'true');
+    }
+  }
+
+  removeInertFromPageContent() {
+    if (document.querySelector('.ons-page')) {
+      document.querySelector('.ons-page').inert = false;
+      document.querySelector('.ons-page').setAttribute('aria-hidden', 'false');
+    }
+  }
+
+  isDialogOpen() {
+    return this.component['open'];
+  }
+
+  closeDialog(event) {
+    if (this.isDialogOpen()) {
+      if (event) {
+        event.preventDefault();
+      }
+      this.component.classList.remove('ons-u-db');
+      document.querySelector('body').classList.remove(overLayClass);
+      this.component.close();
+      this.setFocusOnLastFocusedEl(this.lastFocusedEl);
+      this.removeInertFromPageContent();
+    }
+  }
+}

package/components/summary/_summary.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 $summary-row-spacing: 1rem;
 $summary-col-spacing: 1rem;
 $hub-row-spacing: 1.3rem;
@@ -101,8 +103,8 @@ $hub-row-spacing: 1.3rem;
       padding-right: $summary-col-spacing;
 
       @include mq('s') {
-        padding-left: $summary-col-spacing / 2;
-        padding-right: $summary-col-spacing / 2;
+        padding-left: math.div($summary-col-spacing, 2);
+        padding-right: math.div($summary-col-spacing, 2);
 
         &:first-child {
           padding-left: $summary-col-spacing;

package/components/table/_table.scss

@@ -211,7 +211,7 @@
         }
 
         &:focus {
-          @extend a:focus;
+          @extend %a-focus;
           .ons-svg-icon {
             fill: $color-black;
           }

package/components/timeout-modal/_macro.njk

@@ -0,0 +1,26 @@
+{% from "components/modal/_macro.njk" import onsModal %}
+{% macro onsTimeoutModal(params) %}    
+    {% call onsModal({
+            "title": params.title,
+            "btnText": params.btnText,
+            "classes": "ons-js-timeout-modal",
+            "attributes": {
+                "data-redirect-url": params.redirectUrl,
+                "data-timeout-time": params.serverTimeoutTime,
+                "data-show-modal-time": params.showModalTimeInSeconds,
+                "data-server-session-expiry-endpoint": params.serverSessionExpiryEndpoint,
+                "data-countdown-text": params.countdownText,
+                "data-redirecting-text": params.redirectingText,
+                "data-minutes-text-singular": params.minutesTextSingular,
+                "data-minutes-text-plural": params.minutesTextPlural,
+                "data-seconds-text-singular": params.secondsTextSingular,
+                "data-seconds-text-plural": params.secondsTextPlural,
+                "aria-describedby": "timeout-time-remaining"
+            }
+        })
+    %}
+        <p>{{ params.textFirstLine }}</p>
+        <p class="ons-js-timeout-timer" aria-hidden="true" aria-relevant="additions"></p>
+        <p class="ons-js-timeout-timer-acc ons-u-vh" role="status" id="timeout-time-remaining"></p>
+    {% endcall %}
+{% endmacro %}

package/components/timeout-modal/timeout.dom.js

@@ -0,0 +1,16 @@
+import domready from '../../js/domready';
+
+async function modals() {
+  const timeouts = [...document.querySelectorAll('.ons-js-timeout-modal')];
+
+  if (timeouts.length) {
+    const Timeout = (await import('./timeout')).default;
+
+    timeouts.forEach(context => {
+      let url = context.getAttribute('data-server-session-expiry-endpoint');
+      new Timeout(context, url);
+    });
+  }
+}
+
+domready(modals);

package/components/timeout-modal/timeout.js

@@ -0,0 +1,289 @@
+import Modal from '../modal/modal';
+
+export default class Timeout {
+  constructor(context, url, time) {
+    this.context = context;
+    this.sessionExpiryEndpoint = url;
+    this.initialExpiryTime = time;
+    this.continueButton = context.querySelector('.ons-js-modal-btn');
+    this.countdown = context.querySelector('.ons-js-timeout-timer');
+    this.accessibleCountdown = context.querySelector('.ons-js-timeout-timer-acc');
+    this.timeOutRedirectUrl = context.getAttribute('data-redirect-url');
+    this.modalVisibleInMilliseconds = context.getAttribute('data-show-modal-time') * 1000;
+
+    // Language dependent text strings
+    this.minutesTextSingular = context.getAttribute('data-minutes-text-singular');
+    this.minutesTextPlural = context.getAttribute('data-minutes-text-plural');
+    this.secondsTextSingular = context.getAttribute('data-seconds-text-singular');
+    this.secondsTextPlural = context.getAttribute('data-seconds-text-plural');
+    this.countdownText = context.getAttribute('data-countdown-text');
+    this.redirectingText = context.getAttribute('data-redirecting-text');
+
+    // Settings
+    this.expiryTimeInMilliseconds = 0;
+    this.expiryTime = '';
+    this.showModalTimeout = null;
+    this.timers = [];
+    this.timerRunOnce = false;
+
+    // Create modal instance
+    this.modal = new Modal(this.context);
+
+    // Start module
+    this.initialise();
+  }
+
+  async initialise() {
+    this.expiryTime = await this.setNewExpiryTime();
+    this.expiryTimeInMilliseconds = this.convertTimeToMilliSeconds(this.expiryTime);
+
+    this.bindEventListeners();
+  }
+
+  bindEventListeners() {
+    window.onload = this.startTimeout();
+    window.addEventListener('focus', this.handleWindowFocus.bind(this));
+    window.addEventListener('keydown', this.escToClose.bind(this));
+    this.continueButton.addEventListener('click', this.closeModalAndRestartTimeout.bind(this));
+    this.addThrottledEvents();
+  }
+
+  startTimeout() {
+    clearTimeout(this.showModalTimeout);
+    this.showModalTimeout = setTimeout(this.openModal.bind(this), this.expiryTimeInMilliseconds - this.modalVisibleInMilliseconds);
+  }
+
+  async openModal() {
+    const modalWillOpen = await this.hasExpiryTimeResetInAnotherTab();
+    if (modalWillOpen && !this.modal.isDialogOpen()) {
+      this.modal.openDialog();
+      this.startUiCountdown();
+    }
+  }
+
+  async startUiCountdown() {
+    this.clearTimers();
+    clearInterval(this.shouldModalCloseCheck);
+
+    this.shouldModalCloseCheck = setInterval(async () => {
+      await this.hasExpiryTimeResetInAnotherTab();
+    }, 20000);
+
+    let millseconds = this.modalVisibleInMilliseconds;
+    let seconds = millseconds / 1000;
+    let timers = this.timers;
+    let $this = this;
+
+    (async function runTimer() {
+      const minutesLeft = parseInt(seconds / 60, 10);
+      const secondsLeft = parseInt(seconds % 60, 10);
+      const timerExpired = minutesLeft < 1 && secondsLeft < 1;
+
+      const minutesText =
+        minutesLeft + ' ' + (minutesLeft >= 2 ? $this.minutesTextPlural : minutesLeft === 1 ? $this.minutesTextSingular : '');
+      const secondsText =
+        secondsLeft + ' ' + (secondsLeft >= 2 ? $this.secondsTextPlural : secondsLeft === 1 ? $this.secondsTextSingular : '');
+
+      let timeLeftText =
+        $this.countdownText +
+        ' <span class="ons-u-fw-b">' +
+        (minutesLeft > 0 ? minutesText : '') +
+        (minutesLeft > 0 && secondsLeft > 0 ? ' ' : '') +
+        (secondsLeft > 0 ? secondsText : '') +
+        '</span>.';
+
+      if (timerExpired) {
+        const shouldExpire = await $this.hasExpiryTimeResetInAnotherTab();
+
+        if (shouldExpire) {
+          $this.countdown.innerHTML = '<span class="ons-u-fw-b">' + $this.redirectingText + '</span>';
+          $this.accessibleCountdown.innerHTML = $this.redirectingText;
+          setTimeout($this.redirect.bind($this), 2000);
+        }
+      } else {
+        seconds--;
+        $this.expiryTimeInMilliseconds = seconds * 1000;
+        $this.countdown.innerHTML = timeLeftText;
+
+        if (minutesLeft < 1 && secondsLeft < 20) {
+          $this.accessibleCountdown.setAttribute('aria-live', 'assertive');
+        }
+
+        if (!$this.timerRunOnce) {
+          $this.accessibleCountdown.innerHTML = timeLeftText;
+          $this.timerRunOnce = true;
+        } else if (secondsLeft % 15 === 0) {
+          $this.accessibleCountdown.innerHTML = timeLeftText;
+        }
+
+        timers.push(setTimeout(runTimer.bind($this), 1000));
+      }
+    })();
+  }
+
+  async hasExpiryTimeResetInAnotherTab() {
+    const checkExpiryTime = await this.getExpiryTime();
+
+    if (checkExpiryTime != this.expiryTime) {
+      this.expiryTime = checkExpiryTime;
+      this.expiryTimeInMilliseconds = this.convertTimeToMilliSeconds(checkExpiryTime);
+      this.closeModalAndRestartTimeout(this.expiryTimeInMilliseconds);
+    } else {
+      return true;
+    }
+  }
+
+  closeModalAndRestartTimeout(timeInMilliSeconds) {
+    if (typeof timeInMilliSeconds !== 'string') {
+      timeInMilliSeconds = false;
+    }
+    if (this.modal.isDialogOpen()) {
+      this.modal.closeDialog();
+    }
+    this.restartTimeout(timeInMilliSeconds);
+  }
+
+  async restartTimeout(timeInMilliSeconds) {
+    this.clearTimers();
+    clearInterval(this.shouldModalCloseCheck);
+
+    if (timeInMilliSeconds) {
+      this.expiryTimeInMilliseconds = timeInMilliSeconds;
+    } else {
+      const createNewExpiryTime = await this.setNewExpiryTime();
+      this.expiryTime = createNewExpiryTime;
+      this.expiryTimeInMilliseconds = this.convertTimeToMilliSeconds(createNewExpiryTime);
+    }
+
+    this.startTimeout();
+  }
+
+  async handleWindowFocus() {
+    if (this.sessionExpiryEndpoint) {
+      const canSetNewExpiry = await this.setNewExpiryTime();
+      if (!canSetNewExpiry) {
+        this.redirect();
+      } else {
+        this.closeModalAndRestartTimeout();
+      }
+    }
+  }
+
+  escToClose(event) {
+    if (this.modal.isDialogOpen() && event.keyCode === 27) {
+      this.closeModalAndRestartTimeout();
+    }
+  }
+
+  async setNewExpiryTime() {
+    let newExpiryTime;
+    if (!this.sessionExpiryEndpoint) {
+      // For demo purposes
+      const demoTime = new Date(this.initialExpiryTime ? this.initialExpiryTime : Date.now() + 60 * 1000);
+      newExpiryTime = new Date(demoTime).toISOString();
+    } else {
+      newExpiryTime = await this.fetchExpiryTime('PATCH');
+    }
+    return newExpiryTime;
+  }
+
+  async getExpiryTime() {
+    if (this.sessionExpiryEndpoint) {
+      const currentExpiryTime = await this.fetchExpiryTime('GET');
+      return currentExpiryTime;
+    } else {
+      // For demo purposes
+      return this.expiryTime;
+    }
+  }
+
+  async fetchExpiryTime(fetchMethod) {
+    let response = await fetch(this.sessionExpiryEndpoint, {
+      method: fetchMethod,
+      headers: { 'Cache-Control': 'no-cache', 'Content-type': 'application/json; charset=UTF-8' },
+    });
+    if (!response.ok) {
+      this.redirect();
+      return false;
+    }
+
+    let json = await response.json();
+
+    return json.expires_at;
+  }
+
+  convertTimeToMilliSeconds(expiryTime) {
+    const time = new Date(expiryTime);
+    const calculateTimeInMilliSeconds = Math.abs(time - new Date());
+
+    return calculateTimeInMilliSeconds;
+  }
+
+  redirect() {
+    window.location.replace(this.timeOutRedirectUrl);
+  }
+
+  clearTimers() {
+    for (let i = 0; i < this.timers.length; i++) {
+      clearTimeout(this.timers[i]);
+    }
+  }
+
+  addThrottledEvents() {
+    window.onclick = this.throttle(() => {
+      /* istanbul ignore next */
+      if (!this.modal.isDialogOpen()) {
+        this.restartTimeout();
+      }
+    }, 61000);
+
+    window.onmousemove = this.throttle(() => {
+      /* istanbul ignore next */
+      if (!this.modal.isDialogOpen()) {
+        this.restartTimeout();
+      }
+    }, 61000);
+
+    window.onmousedown = this.throttle(() => {
+      /* istanbul ignore next */
+      if (!this.modal.isDialogOpen()) {
+        this.restartTimeout();
+      }
+    }, 61000);
+
+    window.onscroll = this.throttle(() => {
+      /* istanbul ignore next */
+      if (!this.modal.isDialogOpen()) {
+        this.restartTimeout();
+      }
+    }, 61000);
+
+    window.onkeypress = this.throttle(() => {
+      /* istanbul ignore next */
+      if (!this.modal.isDialogOpen()) {
+        this.restartTimeout();
+      }
+    }, 61000);
+
+    window.onkeyup = this.throttle(() => {
+      /* istanbul ignore next */
+      if (!this.modal.isDialogOpen()) {
+        this.restartTimeout();
+      }
+    }, 61000);
+  }
+
+  throttle(func, wait) {
+    let waiting = false;
+    return function() {
+      if (waiting) {
+        return;
+      }
+      waiting = true;
+      setTimeout(async () => {
+        func.apply(this, arguments);
+        waiting = false;
+      }, wait);
+    };
+  }
+}