govuk_publishing_components 29.9.0 → 29.10.0

data/node_modules/govuk-frontend/govuk-esm/components/button/button.mjs

@@ -0,0 +1,64 @@
+import '../../vendor/polyfills/Event' // addEventListener and event.target normaliziation
+import '../../vendor/polyfills/Function/prototype/bind'
+
+var KEY_SPACE = 32
+var DEBOUNCE_TIMEOUT_IN_SECONDS = 1
+
+function Button ($module) {
+  this.$module = $module
+  this.debounceFormSubmitTimer = null
+}
+
+/**
+* JavaScript 'shim' to trigger the click event of element(s) when the space key is pressed.
+*
+* Created since some Assistive Technologies (for example some Screenreaders)
+* will tell a user to press space on a 'button', so this functionality needs to be shimmed
+* See https://github.com/alphagov/govuk_elements/pull/272#issuecomment-233028270
+*
+* @param {object} event event
+*/
+Button.prototype.handleKeyDown = function (event) {
+  // get the target element
+  var target = event.target
+  // if the element has a role='button' and the pressed key is a space, we'll simulate a click
+  if (target.getAttribute('role') === 'button' && event.keyCode === KEY_SPACE) {
+    event.preventDefault()
+    // trigger the target's click event
+    target.click()
+  }
+}
+
+/**
+* If the click quickly succeeds a previous click then nothing will happen.
+* This stops people accidentally causing multiple form submissions by
+* double clicking buttons.
+*/
+Button.prototype.debounce = function (event) {
+  var target = event.target
+  // Check the button that is clicked on has the preventDoubleClick feature enabled
+  if (target.getAttribute('data-prevent-double-click') !== 'true') {
+    return
+  }
+
+  // If the timer is still running then we want to prevent the click from submitting the form
+  if (this.debounceFormSubmitTimer) {
+    event.preventDefault()
+    return false
+  }
+
+  this.debounceFormSubmitTimer = setTimeout(function () {
+    this.debounceFormSubmitTimer = null
+  }.bind(this), DEBOUNCE_TIMEOUT_IN_SECONDS * 1000)
+}
+
+/**
+* Initialise an event listener for keydown at document level
+* this will help listening for later inserted elements with a role="button"
+*/
+Button.prototype.init = function () {
+  this.$module.addEventListener('keydown', this.handleKeyDown)
+  this.$module.addEventListener('click', this.debounce)
+}
+
+export default Button

data/node_modules/govuk-frontend/govuk-esm/components/character-count/character-count.mjs

@@ -0,0 +1,251 @@
+import '../../vendor/polyfills/Function/prototype/bind'
+import '../../vendor/polyfills/Event' // addEventListener and event.target normaliziation
+import '../../vendor/polyfills/Element/prototype/classList'
+
+function CharacterCount ($module) {
+  this.$module = $module
+  this.$textarea = $module.querySelector('.govuk-js-character-count')
+  this.$visibleCountMessage = null
+  this.$screenReaderCountMessage = null
+  this.lastInputTimestamp = null
+}
+
+CharacterCount.prototype.defaults = {
+  characterCountAttribute: 'data-maxlength',
+  wordCountAttribute: 'data-maxwords'
+}
+
+// Initialize component
+CharacterCount.prototype.init = function () {
+  // Check that required elements are present
+  if (!this.$textarea) {
+    return
+  }
+
+  // Check for module
+  var $module = this.$module
+  var $textarea = this.$textarea
+  var $fallbackLimitMessage = document.getElementById($textarea.id + '-info')
+
+  // Move the fallback count message to be immediately after the textarea
+  // Kept for backwards compatibility
+  $textarea.insertAdjacentElement('afterend', $fallbackLimitMessage)
+
+  // Create the *screen reader* specific live-updating counter
+  // This doesn't need any styling classes, as it is never visible
+  var $screenReaderCountMessage = document.createElement('div')
+  $screenReaderCountMessage.className = 'govuk-character-count__sr-status govuk-visually-hidden'
+  $screenReaderCountMessage.setAttribute('aria-live', 'polite')
+  this.$screenReaderCountMessage = $screenReaderCountMessage
+  $fallbackLimitMessage.insertAdjacentElement('afterend', $screenReaderCountMessage)
+
+  // Create our live-updating counter element, copying the classes from the
+  // fallback element for backwards compatibility as these may have been configured
+  var $visibleCountMessage = document.createElement('div')
+  $visibleCountMessage.className = $fallbackLimitMessage.className
+  $visibleCountMessage.classList.add('govuk-character-count__status')
+  $visibleCountMessage.setAttribute('aria-hidden', 'true')
+  this.$visibleCountMessage = $visibleCountMessage
+  $fallbackLimitMessage.insertAdjacentElement('afterend', $visibleCountMessage)
+
+  // Hide the fallback limit message
+  $fallbackLimitMessage.classList.add('govuk-visually-hidden')
+
+  // Read options set using dataset ('data-' values)
+  this.options = this.getDataset($module)
+
+  // Determine the limit attribute (characters or words)
+  var countAttribute = this.defaults.characterCountAttribute
+  if (this.options.maxwords) {
+    countAttribute = this.defaults.wordCountAttribute
+  }
+
+  // Save the element limit
+  this.maxLength = $module.getAttribute(countAttribute)
+
+  // Check for limit
+  if (!this.maxLength) {
+    return
+  }
+
+  // Remove hard limit if set
+  $textarea.removeAttribute('maxlength')
+
+  this.bindChangeEvents()
+
+  // When the page is restored after navigating 'back' in some browsers the
+  // state of the character count is not restored until *after* the DOMContentLoaded
+  // event is fired, so we need to manually update it after the pageshow event
+  // in browsers that support it.
+  if ('onpageshow' in window) {
+    window.addEventListener('pageshow', this.updateCountMessage.bind(this))
+  } else {
+    window.addEventListener('DOMContentLoaded', this.updateCountMessage.bind(this))
+  }
+  this.updateCountMessage()
+}
+
+// Read data attributes
+CharacterCount.prototype.getDataset = function (element) {
+  var dataset = {}
+  var attributes = element.attributes
+  if (attributes) {
+    for (var i = 0; i < attributes.length; i++) {
+      var attribute = attributes[i]
+      var match = attribute.name.match(/^data-(.+)/)
+      if (match) {
+        dataset[match[1]] = attribute.value
+      }
+    }
+  }
+  return dataset
+}
+
+// Counts characters or words in text
+CharacterCount.prototype.count = function (text) {
+  var length
+  if (this.options.maxwords) {
+    var tokens = text.match(/\S+/g) || [] // Matches consecutive non-whitespace chars
+    length = tokens.length
+  } else {
+    length = text.length
+  }
+  return length
+}
+
+// Bind input propertychange to the elements and update based on the change
+CharacterCount.prototype.bindChangeEvents = function () {
+  var $textarea = this.$textarea
+  $textarea.addEventListener('keyup', this.handleKeyUp.bind(this))
+
+  // Bind focus/blur events to start/stop polling
+  $textarea.addEventListener('focus', this.handleFocus.bind(this))
+  $textarea.addEventListener('blur', this.handleBlur.bind(this))
+}
+
+// Speech recognition software such as Dragon NaturallySpeaking will modify the
+// fields by directly changing its `value`. These changes don't trigger events
+// in JavaScript, so we need to poll to handle when and if they occur.
+CharacterCount.prototype.checkIfValueChanged = function () {
+  if (!this.$textarea.oldValue) this.$textarea.oldValue = ''
+  if (this.$textarea.value !== this.$textarea.oldValue) {
+    this.$textarea.oldValue = this.$textarea.value
+    this.updateCountMessage()
+  }
+}
+
+// Helper function to update both the visible and screen reader-specific
+// counters simultaneously (e.g. on init)
+CharacterCount.prototype.updateCountMessage = function () {
+  this.updateVisibleCountMessage()
+  this.updateScreenReaderCountMessage()
+}
+
+// Update visible counter
+CharacterCount.prototype.updateVisibleCountMessage = function () {
+  var $textarea = this.$textarea
+  var $visibleCountMessage = this.$visibleCountMessage
+  var remainingNumber = this.maxLength - this.count($textarea.value)
+
+  // If input is over the threshold, remove the disabled class which renders the
+  // counter invisible.
+  if (this.isOverThreshold()) {
+    $visibleCountMessage.classList.remove('govuk-character-count__message--disabled')
+  } else {
+    $visibleCountMessage.classList.add('govuk-character-count__message--disabled')
+  }
+
+  // Update styles
+  if (remainingNumber < 0) {
+    $textarea.classList.add('govuk-textarea--error')
+    $visibleCountMessage.classList.remove('govuk-hint')
+    $visibleCountMessage.classList.add('govuk-error-message')
+  } else {
+    $textarea.classList.remove('govuk-textarea--error')
+    $visibleCountMessage.classList.remove('govuk-error-message')
+    $visibleCountMessage.classList.add('govuk-hint')
+  }
+
+  // Update message
+  $visibleCountMessage.innerHTML = this.formattedUpdateMessage()
+}
+
+// Update screen reader-specific counter
+CharacterCount.prototype.updateScreenReaderCountMessage = function () {
+  var $screenReaderCountMessage = this.$screenReaderCountMessage
+
+  // If over the threshold, remove the aria-hidden attribute, allowing screen
+  // readers to announce the content of the element.
+  if (this.isOverThreshold()) {
+    $screenReaderCountMessage.removeAttribute('aria-hidden')
+  } else {
+    $screenReaderCountMessage.setAttribute('aria-hidden', true)
+  }
+
+  // Update message
+  $screenReaderCountMessage.innerHTML = this.formattedUpdateMessage()
+}
+
+// Format update message
+CharacterCount.prototype.formattedUpdateMessage = function () {
+  var $textarea = this.$textarea
+  var options = this.options
+  var remainingNumber = this.maxLength - this.count($textarea.value)
+
+  var charVerb = 'remaining'
+  var charNoun = 'character'
+  var displayNumber = remainingNumber
+  if (options.maxwords) {
+    charNoun = 'word'
+  }
+  charNoun = charNoun + ((remainingNumber === -1 || remainingNumber === 1) ? '' : 's')
+
+  charVerb = (remainingNumber < 0) ? 'too many' : 'remaining'
+  displayNumber = Math.abs(remainingNumber)
+
+  return 'You have ' + displayNumber + ' ' + charNoun + ' ' + charVerb
+}
+
+// Checks whether the value is over the configured threshold for the input.
+// If there is no configured threshold, it is set to 0 and this function will
+// always return true.
+CharacterCount.prototype.isOverThreshold = function () {
+  var $textarea = this.$textarea
+  var options = this.options
+
+  // Determine the remaining number of characters/words
+  var currentLength = this.count($textarea.value)
+  var maxLength = this.maxLength
+
+  // Set threshold if presented in options
+  var thresholdPercent = options.threshold ? options.threshold : 0
+  var thresholdValue = maxLength * thresholdPercent / 100
+
+  return (thresholdValue <= currentLength)
+}
+
+// Update the visible character counter and keep track of when the last update
+// happened for each keypress
+CharacterCount.prototype.handleKeyUp = function () {
+  this.updateVisibleCountMessage()
+  this.lastInputTimestamp = Date.now()
+}
+
+CharacterCount.prototype.handleFocus = function () {
+  // If the field is focused, and a keyup event hasn't been detected for at
+  // least 1000 ms (1 second), then run the manual change check.
+  // This is so that the update triggered by the manual comparison doesn't
+  // conflict with debounced KeyboardEvent updates.
+  this.valueChecker = setInterval(function () {
+    if (!this.lastInputTimestamp || (Date.now() - 500) >= this.lastInputTimestamp) {
+      this.checkIfValueChanged()
+    }
+  }.bind(this), 1000)
+}
+
+CharacterCount.prototype.handleBlur = function () {
+  // Cancel value checking on blur
+  clearInterval(this.valueChecker)
+}
+
+export default CharacterCount

data/node_modules/govuk-frontend/govuk-esm/components/checkboxes/checkboxes.mjs

@@ -0,0 +1,164 @@
+import '../../vendor/polyfills/Function/prototype/bind'
+// addEventListener, event.target normalization and DOMContentLoaded
+import '../../vendor/polyfills/Event'
+import '../../vendor/polyfills/Element/prototype/classList'
+import { nodeListForEach } from '../../common'
+
+function Checkboxes ($module) {
+  this.$module = $module
+  this.$inputs = $module.querySelectorAll('input[type="checkbox"]')
+}
+
+/**
+ * Initialise Checkboxes
+ *
+ * Checkboxes can be associated with a 'conditionally revealed' content block –
+ * for example, a checkbox for 'Phone' could reveal an additional form field for
+ * the user to enter their phone number.
+ *
+ * These associations are made using a `data-aria-controls` attribute, which is
+ * promoted to an aria-controls attribute during initialisation.
+ *
+ * We also need to restore the state of any conditional reveals on the page (for
+ * example if the user has navigated back), and set up event handlers to keep
+ * the reveal in sync with the checkbox state.
+ */
+Checkboxes.prototype.init = function () {
+  var $module = this.$module
+  var $inputs = this.$inputs
+
+  nodeListForEach($inputs, function ($input) {
+    var target = $input.getAttribute('data-aria-controls')
+
+    // Skip checkboxes without data-aria-controls attributes, or where the
+    // target element does not exist.
+    if (!target || !document.getElementById(target)) {
+      return
+    }
+
+    // Promote the data-aria-controls attribute to a aria-controls attribute
+    // so that the relationship is exposed in the AOM
+    $input.setAttribute('aria-controls', target)
+    $input.removeAttribute('data-aria-controls')
+  })
+
+  // When the page is restored after navigating 'back' in some browsers the
+  // state of form controls is not restored until *after* the DOMContentLoaded
+  // event is fired, so we need to sync after the pageshow event in browsers
+  // that support it.
+  if ('onpageshow' in window) {
+    window.addEventListener('pageshow', this.syncAllConditionalReveals.bind(this))
+  } else {
+    window.addEventListener('DOMContentLoaded', this.syncAllConditionalReveals.bind(this))
+  }
+
+  // Although we've set up handlers to sync state on the pageshow or
+  // DOMContentLoaded event, init could be called after those events have fired,
+  // for example if they are added to the page dynamically, so sync now too.
+  this.syncAllConditionalReveals()
+
+  $module.addEventListener('click', this.handleClick.bind(this))
+}
+
+/**
+ * Sync the conditional reveal states for all inputs in this $module.
+ */
+Checkboxes.prototype.syncAllConditionalReveals = function () {
+  nodeListForEach(this.$inputs, this.syncConditionalRevealWithInputState.bind(this))
+}
+
+/**
+ * Sync conditional reveal with the input state
+ *
+ * Synchronise the visibility of the conditional reveal, and its accessible
+ * state, with the input's checked state.
+ *
+ * @param {HTMLInputElement} $input Checkbox input
+ */
+Checkboxes.prototype.syncConditionalRevealWithInputState = function ($input) {
+  var $target = document.getElementById($input.getAttribute('aria-controls'))
+
+  if ($target && $target.classList.contains('govuk-checkboxes__conditional')) {
+    var inputIsChecked = $input.checked
+
+    $input.setAttribute('aria-expanded', inputIsChecked)
+    $target.classList.toggle('govuk-checkboxes__conditional--hidden', !inputIsChecked)
+  }
+}
+
+/**
+ * Uncheck other checkboxes
+ *
+ * Find any other checkbox inputs with the same name value, and uncheck them.
+ * This is useful for when a “None of these" checkbox is checked.
+ */
+Checkboxes.prototype.unCheckAllInputsExcept = function ($input) {
+  var allInputsWithSameName = document.querySelectorAll('input[type="checkbox"][name="' + $input.name + '"]')
+
+  nodeListForEach(allInputsWithSameName, function ($inputWithSameName) {
+    var hasSameFormOwner = ($input.form === $inputWithSameName.form)
+    if (hasSameFormOwner && $inputWithSameName !== $input) {
+      $inputWithSameName.checked = false
+      this.syncConditionalRevealWithInputState($inputWithSameName)
+    }
+  }.bind(this))
+}
+
+/**
+ * Uncheck exclusive inputs
+ *
+ * Find any checkbox inputs with the same name value and the 'exclusive' behaviour,
+ * and uncheck them. This helps prevent someone checking both a regular checkbox and a
+ * "None of these" checkbox in the same fieldset.
+ */
+Checkboxes.prototype.unCheckExclusiveInputs = function ($input) {
+  var allInputsWithSameNameAndExclusiveBehaviour = document.querySelectorAll(
+    'input[data-behaviour="exclusive"][type="checkbox"][name="' + $input.name + '"]'
+  )
+
+  nodeListForEach(allInputsWithSameNameAndExclusiveBehaviour, function ($exclusiveInput) {
+    var hasSameFormOwner = ($input.form === $exclusiveInput.form)
+    if (hasSameFormOwner) {
+      $exclusiveInput.checked = false
+      this.syncConditionalRevealWithInputState($exclusiveInput)
+    }
+  }.bind(this))
+}
+
+/**
+ * Click event handler
+ *
+ * Handle a click within the $module – if the click occurred on a checkbox, sync
+ * the state of any associated conditional reveal with the checkbox state.
+ *
+ * @param {MouseEvent} event Click event
+ */
+Checkboxes.prototype.handleClick = function (event) {
+  var $target = event.target
+
+  // Ignore clicks on things that aren't checkbox inputs
+  if ($target.type !== 'checkbox') {
+    return
+  }
+
+  // If the checkbox conditionally-reveals some content, sync the state
+  var hasAriaControls = $target.getAttribute('aria-controls')
+  if (hasAriaControls) {
+    this.syncConditionalRevealWithInputState($target)
+  }
+
+  // No further behaviour needed for unchecking
+  if (!$target.checked) {
+    return
+  }
+
+  // Handle 'exclusive' checkbox behaviour (ie "None of these")
+  var hasBehaviourExclusive = ($target.getAttribute('data-behaviour') === 'exclusive')
+  if (hasBehaviourExclusive) {
+    this.unCheckAllInputsExcept($target)
+  } else {
+    this.unCheckExclusiveInputs($target)
+  }
+}
+
+export default Checkboxes

data/node_modules/govuk-frontend/govuk-esm/components/details/details.mjs

@@ -0,0 +1,147 @@
+/**
+ * JavaScript 'polyfill' for HTML5's <details> and <summary> elements
+ * and 'shim' to add accessiblity enhancements for all browsers
+ *
+ * http://caniuse.com/#feat=details
+ */
+import '../../vendor/polyfills/Function/prototype/bind'
+import '../../vendor/polyfills/Event' // addEventListener and event.target normaliziation
+import { generateUniqueID } from '../../common'
+
+var KEY_ENTER = 13
+var KEY_SPACE = 32
+
+function Details ($module) {
+  this.$module = $module
+}
+
+Details.prototype.init = function () {
+  if (!this.$module) {
+    return
+  }
+
+  // If there is native details support, we want to avoid running code to polyfill native behaviour.
+  var hasNativeDetails = typeof this.$module.open === 'boolean'
+
+  if (hasNativeDetails) {
+    return
+  }
+
+  this.polyfillDetails()
+}
+
+Details.prototype.polyfillDetails = function () {
+  var $module = this.$module
+
+  // Save shortcuts to the inner summary and content elements
+  var $summary = this.$summary = $module.getElementsByTagName('summary').item(0)
+  var $content = this.$content = $module.getElementsByTagName('div').item(0)
+
+  // If <details> doesn't have a <summary> and a <div> representing the content
+  // it means the required HTML structure is not met so the script will stop
+  if (!$summary || !$content) {
+    return
+  }
+
+  // If the content doesn't have an ID, assign it one now
+  // which we'll need for the summary's aria-controls assignment
+  if (!$content.id) {
+    $content.id = 'details-content-' + generateUniqueID()
+  }
+
+  // Add ARIA role="group" to details
+  $module.setAttribute('role', 'group')
+
+  // Add role=button to summary
+  $summary.setAttribute('role', 'button')
+
+  // Add aria-controls
+  $summary.setAttribute('aria-controls', $content.id)
+
+  // Set tabIndex so the summary is keyboard accessible for non-native elements
+  //
+  // We have to use the camelcase `tabIndex` property as there is a bug in IE6/IE7 when we set the correct attribute lowercase:
+  // See http://web.archive.org/web/20170120194036/http://www.saliences.com/browserBugs/tabIndex.html for more information.
+  $summary.tabIndex = 0
+
+  // Detect initial open state
+  var openAttr = $module.getAttribute('open') !== null
+  if (openAttr === true) {
+    $summary.setAttribute('aria-expanded', 'true')
+    $content.setAttribute('aria-hidden', 'false')
+  } else {
+    $summary.setAttribute('aria-expanded', 'false')
+    $content.setAttribute('aria-hidden', 'true')
+    $content.style.display = 'none'
+  }
+
+  // Bind an event to handle summary elements
+  this.polyfillHandleInputs($summary, this.polyfillSetAttributes.bind(this))
+}
+
+/**
+* Define a statechange function that updates aria-expanded and style.display
+* @param {object} summary element
+*/
+Details.prototype.polyfillSetAttributes = function () {
+  var $module = this.$module
+  var $summary = this.$summary
+  var $content = this.$content
+
+  var expanded = $summary.getAttribute('aria-expanded') === 'true'
+  var hidden = $content.getAttribute('aria-hidden') === 'true'
+
+  $summary.setAttribute('aria-expanded', (expanded ? 'false' : 'true'))
+  $content.setAttribute('aria-hidden', (hidden ? 'false' : 'true'))
+
+  $content.style.display = (expanded ? 'none' : '')
+
+  var hasOpenAttr = $module.getAttribute('open') !== null
+  if (!hasOpenAttr) {
+    $module.setAttribute('open', 'open')
+  } else {
+    $module.removeAttribute('open')
+  }
+
+  return true
+}
+
+/**
+* Handle cross-modal click events
+* @param {object} node element
+* @param {function} callback function
+*/
+Details.prototype.polyfillHandleInputs = function (node, callback) {
+  node.addEventListener('keypress', function (event) {
+    var target = event.target
+    // When the key gets pressed - check if it is enter or space
+    if (event.keyCode === KEY_ENTER || event.keyCode === KEY_SPACE) {
+      if (target.nodeName.toLowerCase() === 'summary') {
+        // Prevent space from scrolling the page
+        // and enter from submitting a form
+        event.preventDefault()
+        // Click to let the click event do all the necessary action
+        if (target.click) {
+          target.click()
+        } else {
+          // except Safari 5.1 and under don't support .click() here
+          callback(event)
+        }
+      }
+    }
+  })
+
+  // Prevent keyup to prevent clicking twice in Firefox when using space key
+  node.addEventListener('keyup', function (event) {
+    var target = event.target
+    if (event.keyCode === KEY_SPACE) {
+      if (target.nodeName.toLowerCase() === 'summary') {
+        event.preventDefault()
+      }
+    }
+  })
+
+  node.addEventListener('click', callback)
+}
+
+export default Details