diff --git a/app/assets/javascripts/collapsibleCheckboxes.js b/app/assets/javascripts/collapsibleCheckboxes.js index aef44d734..864701d19 100644 --- a/app/assets/javascripts/collapsibleCheckboxes.js +++ b/app/assets/javascripts/collapsibleCheckboxes.js @@ -118,7 +118,8 @@ CollapsibleCheckboxes.prototype.addHeadingHideLegend = function() { const headingLevel = this.$component.data('heading-level') || '2'; - this.$heading = $(`${this.legendText}`); + this.$heading = $(``); + this.$heading.text(this.legendText); this.$fieldset.before(this.$heading); this.$fieldset.find('legend').addClass('usa-sr-only'); diff --git a/app/assets/javascripts/radioSlider.js b/app/assets/javascripts/radioSlider.js index d0dffce99..b0269843a 100644 --- a/app/assets/javascripts/radioSlider.js +++ b/app/assets/javascripts/radioSlider.js @@ -14,8 +14,8 @@ if (valuesInLabel.length === 2) { leftValue = valuesInLabel[0]; rightValue = valuesInLabel[1]; - $(this).find('.radio-slider-left-value').html(leftValue); - $(this).find('.radio-slider-right-value').html(rightValue); + $(this).find('.radio-slider-left-value').text(leftValue); + $(this).find('.radio-slider-right-value').text(rightValue); } }) diff --git a/app/assets/js/uswds.js b/app/assets/js/uswds.js deleted file mode 100644 index 8052650c7..000000000 --- a/app/assets/js/uswds.js +++ /dev/null @@ -1,7072 +0,0 @@ -(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i'], - 191: ['/', '?'], - 192: ['`', '~'], - 219: ['[', '{'], - 220: ['\\', '|'], - 221: [']', '}'], - 222: ["'", '"'], - 224: 'Meta', - 225: 'AltGraph', - 246: 'Attn', - 247: 'CrSel', - 248: 'ExSel', - 249: 'EraseEof', - 250: 'Play', - 251: 'ZoomOut' - } - }; - - // Function keys (F1-24). - var i; - for (i = 1; i < 25; i++) { - keyboardeventKeyPolyfill.keys[111 + i] = 'F' + i; - } - - // Printable ASCII characters. - var letter = ''; - for (i = 65; i < 91; i++) { - letter = String.fromCharCode(i); - keyboardeventKeyPolyfill.keys[i] = [letter.toLowerCase(), letter.toUpperCase()]; - } - function polyfill() { - if (!('KeyboardEvent' in window) || 'key' in KeyboardEvent.prototype) { - return false; - } - - // Polyfill `key` on `KeyboardEvent`. - var proto = { - get: function (x) { - var key = keyboardeventKeyPolyfill.keys[this.which || this.keyCode]; - if (Array.isArray(key)) { - key = key[+this.shiftKey]; - } - return key; - } - }; - Object.defineProperty(KeyboardEvent.prototype, 'key', proto); - return proto; - } - if (typeof define === 'function' && define.amd) { - define('keyboardevent-key-polyfill', keyboardeventKeyPolyfill); - } else if (typeof exports !== 'undefined' && typeof module !== 'undefined') { - module.exports = keyboardeventKeyPolyfill; - } else if (window) { - window.keyboardeventKeyPolyfill = keyboardeventKeyPolyfill; - } -})(); - -},{}],4:[function(require,module,exports){ -/* -object-assign -(c) Sindre Sorhus -@license MIT -*/ - -'use strict'; - -/* eslint-disable no-unused-vars */ -var getOwnPropertySymbols = Object.getOwnPropertySymbols; -var hasOwnProperty = Object.prototype.hasOwnProperty; -var propIsEnumerable = Object.prototype.propertyIsEnumerable; -function toObject(val) { - if (val === null || val === undefined) { - throw new TypeError('Object.assign cannot be called with null or undefined'); - } - return Object(val); -} -function shouldUseNative() { - try { - if (!Object.assign) { - return false; - } - - // Detect buggy property enumeration order in older V8 versions. - - // https://bugs.chromium.org/p/v8/issues/detail?id=4118 - var test1 = new String('abc'); // eslint-disable-line no-new-wrappers - test1[5] = 'de'; - if (Object.getOwnPropertyNames(test1)[0] === '5') { - return false; - } - - // https://bugs.chromium.org/p/v8/issues/detail?id=3056 - var test2 = {}; - for (var i = 0; i < 10; i++) { - test2['_' + String.fromCharCode(i)] = i; - } - var order2 = Object.getOwnPropertyNames(test2).map(function (n) { - return test2[n]; - }); - if (order2.join('') !== '0123456789') { - return false; - } - - // https://bugs.chromium.org/p/v8/issues/detail?id=3056 - var test3 = {}; - 'abcdefghijklmnopqrst'.split('').forEach(function (letter) { - test3[letter] = letter; - }); - if (Object.keys(Object.assign({}, test3)).join('') !== 'abcdefghijklmnopqrst') { - return false; - } - return true; - } catch (err) { - // We don't expect any of the above to throw, but better to be safe. - return false; - } -} -module.exports = shouldUseNative() ? Object.assign : function (target, source) { - var from; - var to = toObject(target); - var symbols; - for (var s = 1; s < arguments.length; s++) { - from = Object(arguments[s]); - for (var key in from) { - if (hasOwnProperty.call(from, key)) { - to[key] = from[key]; - } - } - if (getOwnPropertySymbols) { - symbols = getOwnPropertySymbols(from); - for (var i = 0; i < symbols.length; i++) { - if (propIsEnumerable.call(from, symbols[i])) { - to[symbols[i]] = from[symbols[i]]; - } - } - } - } - return to; -}; - -},{}],5:[function(require,module,exports){ -"use strict"; - -const assign = require('object-assign'); -const delegate = require('../delegate'); -const delegateAll = require('../delegateAll'); -const DELEGATE_PATTERN = /^(.+):delegate\((.+)\)$/; -const SPACE = ' '; -const getListeners = function (type, handler) { - var match = type.match(DELEGATE_PATTERN); - var selector; - if (match) { - type = match[1]; - selector = match[2]; - } - var options; - if (typeof handler === 'object') { - options = { - capture: popKey(handler, 'capture'), - passive: popKey(handler, 'passive') - }; - } - var listener = { - selector: selector, - delegate: typeof handler === 'object' ? delegateAll(handler) : selector ? delegate(selector, handler) : handler, - options: options - }; - if (type.indexOf(SPACE) > -1) { - return type.split(SPACE).map(function (_type) { - return assign({ - type: _type - }, listener); - }); - } else { - listener.type = type; - return [listener]; - } -}; -var popKey = function (obj, key) { - var value = obj[key]; - delete obj[key]; - return value; -}; -module.exports = function behavior(events, props) { - const listeners = Object.keys(events).reduce(function (memo, type) { - var listeners = getListeners(type, events[type]); - return memo.concat(listeners); - }, []); - return assign({ - add: function addBehavior(element) { - listeners.forEach(function (listener) { - element.addEventListener(listener.type, listener.delegate, listener.options); - }); - }, - remove: function removeBehavior(element) { - listeners.forEach(function (listener) { - element.removeEventListener(listener.type, listener.delegate, listener.options); - }); - } - }, props); -}; - -},{"../delegate":7,"../delegateAll":8,"object-assign":4}],6:[function(require,module,exports){ -"use strict"; - -module.exports = function compose(functions) { - return function (e) { - return functions.some(function (fn) { - return fn.call(this, e) === false; - }, this); - }; -}; - -},{}],7:[function(require,module,exports){ -"use strict"; - -// polyfill Element.prototype.closest -require('element-closest'); -module.exports = function delegate(selector, fn) { - return function delegation(event) { - var target = event.target.closest(selector); - if (target) { - return fn.call(target, event); - } - }; -}; - -},{"element-closest":2}],8:[function(require,module,exports){ -"use strict"; - -const delegate = require('../delegate'); -const compose = require('../compose'); -const SPLAT = '*'; -module.exports = function delegateAll(selectors) { - const keys = Object.keys(selectors); - - // XXX optimization: if there is only one handler and it applies to - // all elements (the "*" CSS selector), then just return that - // handler - if (keys.length === 1 && keys[0] === SPLAT) { - return selectors[SPLAT]; - } - const delegates = keys.reduce(function (memo, selector) { - memo.push(delegate(selector, selectors[selector])); - return memo; - }, []); - return compose(delegates); -}; - -},{"../compose":6,"../delegate":7}],9:[function(require,module,exports){ -"use strict"; - -module.exports = function ignore(element, fn) { - return function ignorance(e) { - if (element !== e.target && !element.contains(e.target)) { - return fn.call(this, e); - } - }; -}; - -},{}],10:[function(require,module,exports){ -"use strict"; - -module.exports = { - behavior: require('./behavior'), - delegate: require('./delegate'), - delegateAll: require('./delegateAll'), - ignore: require('./ignore'), - keymap: require('./keymap') -}; - -},{"./behavior":5,"./delegate":7,"./delegateAll":8,"./ignore":9,"./keymap":11}],11:[function(require,module,exports){ -"use strict"; - -require('keyboardevent-key-polyfill'); - -// these are the only relevant modifiers supported on all platforms, -// according to MDN: -// -const MODIFIERS = { - 'Alt': 'altKey', - 'Control': 'ctrlKey', - 'Ctrl': 'ctrlKey', - 'Shift': 'shiftKey' -}; -const MODIFIER_SEPARATOR = '+'; -const getEventKey = function (event, hasModifiers) { - var key = event.key; - if (hasModifiers) { - for (var modifier in MODIFIERS) { - if (event[MODIFIERS[modifier]] === true) { - key = [modifier, key].join(MODIFIER_SEPARATOR); - } - } - } - return key; -}; -module.exports = function keymap(keys) { - const hasModifiers = Object.keys(keys).some(function (key) { - return key.indexOf(MODIFIER_SEPARATOR) > -1; - }); - return function (event) { - var key = getEventKey(event, hasModifiers); - return [key, key.toLowerCase()].reduce(function (result, _key) { - if (_key in keys) { - result = keys[key].call(this, event); - } - return result; - }, undefined); - }; -}; -module.exports.MODIFIERS = MODIFIERS; - -},{"keyboardevent-key-polyfill":3}],12:[function(require,module,exports){ -"use strict"; - -module.exports = function once(listener, options) { - var wrapped = function wrappedOnce(e) { - e.currentTarget.removeEventListener(e.type, wrapped, options); - return listener.call(this, e); - }; - return wrapped; -}; - -},{}],13:[function(require,module,exports){ -'use strict'; - -var RE_TRIM = /(^\s+)|(\s+$)/g; -var RE_SPLIT = /\s+/; -var trim = String.prototype.trim ? function (str) { - return str.trim(); -} : function (str) { - return str.replace(RE_TRIM, ''); -}; -var queryById = function (id) { - return this.querySelector('[id="' + id.replace(/"/g, '\\"') + '"]'); -}; -module.exports = function resolveIds(ids, doc) { - if (typeof ids !== 'string') { - throw new Error('Expected a string but got ' + typeof ids); - } - if (!doc) { - doc = window.document; - } - var getElementById = doc.getElementById ? doc.getElementById.bind(doc) : queryById.bind(doc); - ids = trim(ids).split(RE_SPLIT); - - // XXX we can short-circuit here because trimming and splitting a - // string of just whitespace produces an array containing a single, - // empty string - if (ids.length === 1 && ids[0] === '') { - return []; - } - return ids.map(function (id) { - var el = getElementById(id); - if (!el) { - throw new Error('no element with id: "' + id + '"'); - } - return el; - }); -}; - -},{}],14:[function(require,module,exports){ -"use strict"; - -const behavior = require("../../uswds-core/src/js/utils/behavior"); -const toggleFormInput = require("../../uswds-core/src/js/utils/toggle-form-input"); -const { - CLICK -} = require("../../uswds-core/src/js/events"); -const { - prefix: PREFIX -} = require("../../uswds-core/src/js/config"); -const LINK = `.${PREFIX}-show-password`; -function toggle(event) { - event.preventDefault(); - toggleFormInput(this); -} -module.exports = behavior({ - [CLICK]: { - [LINK]: toggle - } -}); - -},{"../../uswds-core/src/js/config":35,"../../uswds-core/src/js/events":36,"../../uswds-core/src/js/utils/behavior":45,"../../uswds-core/src/js/utils/toggle-form-input":55}],15:[function(require,module,exports){ -"use strict"; - -const select = require("../../uswds-core/src/js/utils/select"); -const behavior = require("../../uswds-core/src/js/utils/behavior"); -const toggle = require("../../uswds-core/src/js/utils/toggle"); -const isElementInViewport = require("../../uswds-core/src/js/utils/is-in-viewport"); -const { - CLICK -} = require("../../uswds-core/src/js/events"); -const { - prefix: PREFIX -} = require("../../uswds-core/src/js/config"); -const ACCORDION = `.${PREFIX}-accordion, .${PREFIX}-accordion--bordered`; -const BUTTON = `.${PREFIX}-accordion__button[aria-controls]`; -const EXPANDED = "aria-expanded"; -const MULTISELECTABLE = "data-allow-multiple"; - -/** - * Get an Array of button elements belonging directly to the given - * accordion element. - * @param {HTMLElement} accordion - * @return {array} - */ -const getAccordionButtons = accordion => { - const buttons = select(BUTTON, accordion); - return buttons.filter(button => button.closest(ACCORDION) === accordion); -}; - -/** - * Toggle a button's "pressed" state, optionally providing a target - * state. - * - * @param {HTMLButtonElement} button - * @param {boolean?} expanded If no state is provided, the current - * state will be toggled (from false to true, and vice-versa). - * @return {boolean} the resulting state - */ -const toggleButton = (button, expanded) => { - const accordion = button.closest(ACCORDION); - let safeExpanded = expanded; - if (!accordion) { - throw new Error(`${BUTTON} is missing outer ${ACCORDION}`); - } - safeExpanded = toggle(button, expanded); - - // XXX multiselectable is opt-in, to preserve legacy behavior - const multiselectable = accordion.hasAttribute(MULTISELECTABLE); - if (safeExpanded && !multiselectable) { - getAccordionButtons(accordion).forEach(other => { - if (other !== button) { - toggle(other, false); - } - }); - } -}; - -/** - * @param {HTMLButtonElement} button - * @return {boolean} true - */ -const showButton = button => toggleButton(button, true); - -/** - * @param {HTMLButtonElement} button - * @return {boolean} false - */ -const hideButton = button => toggleButton(button, false); -const accordion = behavior({ - [CLICK]: { - [BUTTON]() { - toggleButton(this); - if (this.getAttribute(EXPANDED) === "true") { - // We were just expanded, but if another accordion was also just - // collapsed, we may no longer be in the viewport. This ensures - // that we are still visible, so the user isn't confused. - if (!isElementInViewport(this)) this.scrollIntoView(); - } - } - } -}, { - init(root) { - select(BUTTON, root).forEach(button => { - const expanded = button.getAttribute(EXPANDED) === "true"; - toggleButton(button, expanded); - }); - }, - ACCORDION, - BUTTON, - show: showButton, - hide: hideButton, - toggle: toggleButton, - getButtons: getAccordionButtons -}); -module.exports = accordion; - -},{"../../uswds-core/src/js/config":35,"../../uswds-core/src/js/events":36,"../../uswds-core/src/js/utils/behavior":45,"../../uswds-core/src/js/utils/is-in-viewport":48,"../../uswds-core/src/js/utils/select":53,"../../uswds-core/src/js/utils/toggle":56}],16:[function(require,module,exports){ -"use strict"; - -const behavior = require("../../uswds-core/src/js/utils/behavior"); -const { - CLICK -} = require("../../uswds-core/src/js/events"); -const { - prefix: PREFIX -} = require("../../uswds-core/src/js/config"); -const HEADER = `.${PREFIX}-banner__header`; -const EXPANDED_CLASS = `${PREFIX}-banner__header--expanded`; -const toggleBanner = function toggleEl(event) { - event.preventDefault(); - this.closest(HEADER).classList.toggle(EXPANDED_CLASS); -}; -module.exports = behavior({ - [CLICK]: { - [`${HEADER} [aria-controls]`]: toggleBanner - } -}); - -},{"../../uswds-core/src/js/config":35,"../../uswds-core/src/js/events":36,"../../uswds-core/src/js/utils/behavior":45}],17:[function(require,module,exports){ -"use strict"; - -const select = require("../../uswds-core/src/js/utils/select"); -const behavior = require("../../uswds-core/src/js/utils/behavior"); -const debounce = require("../../uswds-core/src/js/utils/debounce"); -const { - prefix: PREFIX -} = require("../../uswds-core/src/js/config"); -const CHARACTER_COUNT_CLASS = `${PREFIX}-character-count`; -const CHARACTER_COUNT = `.${CHARACTER_COUNT_CLASS}`; -const INPUT = `.${PREFIX}-character-count__field`; -const MESSAGE = `.${PREFIX}-character-count__message`; -const VALIDATION_MESSAGE = "The content is too long."; -const MESSAGE_INVALID_CLASS = `${PREFIX}-character-count__status--invalid`; -const STATUS_MESSAGE_CLASS = `${CHARACTER_COUNT_CLASS}__status`; -const STATUS_MESSAGE_SR_ONLY_CLASS = `${CHARACTER_COUNT_CLASS}__sr-status`; -const STATUS_MESSAGE = `.${STATUS_MESSAGE_CLASS}`; -const STATUS_MESSAGE_SR_ONLY = `.${STATUS_MESSAGE_SR_ONLY_CLASS}`; -const DEFAULT_STATUS_LABEL = `characters allowed`; - -/** - * Returns the root and message element for an character count input - * - * @param {HTMLInputElement|HTMLTextAreaElement} inputEl The character count input element - * @returns {CharacterCountElements} elements The root and message element. - */ -const getCharacterCountElements = inputEl => { - const characterCountEl = inputEl.closest(CHARACTER_COUNT); - if (!characterCountEl) { - throw new Error(`${INPUT} is missing outer ${CHARACTER_COUNT}`); - } - const messageEl = characterCountEl.querySelector(MESSAGE); - if (!messageEl) { - throw new Error(`${CHARACTER_COUNT} is missing inner ${MESSAGE}`); - } - return { - characterCountEl, - messageEl - }; -}; - -/** - * Move maxlength attribute to a data attribute on usa-character-count - * - * @param {HTMLInputElement|HTMLTextAreaElement} inputEl The character count input element - */ -const setDataLength = inputEl => { - const { - characterCountEl - } = getCharacterCountElements(inputEl); - const maxlength = inputEl.getAttribute("maxlength"); - if (!maxlength) return; - inputEl.removeAttribute("maxlength"); - characterCountEl.setAttribute("data-maxlength", maxlength); -}; - -/** - * Create and append status messages for visual and screen readers - * - * @param {HTMLDivElement} characterCountEl - Div with `.usa-character-count` class - * @description Create two status messages for number of characters left; - * one visual status and another for screen readers - */ -const createStatusMessages = characterCountEl => { - const statusMessage = document.createElement("div"); - const srStatusMessage = document.createElement("div"); - const maxLength = characterCountEl.dataset.maxlength; - const defaultMessage = `${maxLength} ${DEFAULT_STATUS_LABEL}`; - statusMessage.classList.add(`${STATUS_MESSAGE_CLASS}`, "usa-hint"); - srStatusMessage.classList.add(`${STATUS_MESSAGE_SR_ONLY_CLASS}`, "usa-sr-only"); - statusMessage.setAttribute("aria-hidden", true); - srStatusMessage.setAttribute("aria-live", "polite"); - statusMessage.textContent = defaultMessage; - srStatusMessage.textContent = defaultMessage; - characterCountEl.append(statusMessage, srStatusMessage); -}; - -/** - * Returns message with how many characters are left - * - * @param {number} currentLength - The number of characters used - * @param {number} maxLength - The total number of characters allowed - * @returns {string} A string description of how many characters are left - */ -const getCountMessage = (currentLength, maxLength) => { - let newMessage = ""; - if (currentLength === 0) { - newMessage = `${maxLength} ${DEFAULT_STATUS_LABEL}`; - } else { - const difference = Math.abs(maxLength - currentLength); - const characters = `character${difference === 1 ? "" : "s"}`; - const guidance = currentLength > maxLength ? "over limit" : "left"; - newMessage = `${difference} ${characters} ${guidance}`; - } - return newMessage; -}; - -/** - * Updates the character count status for screen readers after a 1000ms delay. - * - * @param {HTMLElement} msgEl - The screen reader status message element - * @param {string} statusMessage - A string of the current character status - */ -const srUpdateStatus = debounce((msgEl, statusMessage) => { - const srStatusMessage = msgEl; - srStatusMessage.textContent = statusMessage; -}, 1000); - -/** - * Update the character count component - * - * @description On input, it will update visual status, screenreader - * status and update input validation (if over character length) - * @param {HTMLInputElement|HTMLTextAreaElement} inputEl The character count input element - */ -const updateCountMessage = inputEl => { - const { - characterCountEl - } = getCharacterCountElements(inputEl); - const currentLength = inputEl.value.length; - const maxLength = parseInt(characterCountEl.getAttribute("data-maxlength"), 10); - const statusMessage = characterCountEl.querySelector(STATUS_MESSAGE); - const srStatusMessage = characterCountEl.querySelector(STATUS_MESSAGE_SR_ONLY); - const currentStatusMessage = getCountMessage(currentLength, maxLength); - if (!maxLength) return; - const isOverLimit = currentLength && currentLength > maxLength; - statusMessage.textContent = currentStatusMessage; - srUpdateStatus(srStatusMessage, currentStatusMessage); - if (isOverLimit && !inputEl.validationMessage) { - inputEl.setCustomValidity(VALIDATION_MESSAGE); - } - if (!isOverLimit && inputEl.validationMessage === VALIDATION_MESSAGE) { - inputEl.setCustomValidity(""); - } - statusMessage.classList.toggle(MESSAGE_INVALID_CLASS, isOverLimit); -}; - -/** - * Initialize component - * - * @description On init this function will create elements and update any - * attributes so it can tell the user how many characters are left. - * @param {HTMLInputElement|HTMLTextAreaElement} inputEl the components input - */ -const enhanceCharacterCount = inputEl => { - const { - characterCountEl, - messageEl - } = getCharacterCountElements(inputEl); - - // Hide hint and remove aria-live for backwards compatibility - messageEl.classList.add("usa-sr-only"); - messageEl.removeAttribute("aria-live"); - setDataLength(inputEl); - createStatusMessages(characterCountEl); -}; -const characterCount = behavior({ - input: { - [INPUT]() { - updateCountMessage(this); - } - } -}, { - init(root) { - select(INPUT, root).forEach(input => enhanceCharacterCount(input)); - }, - MESSAGE_INVALID_CLASS, - VALIDATION_MESSAGE, - STATUS_MESSAGE_CLASS, - STATUS_MESSAGE_SR_ONLY_CLASS, - DEFAULT_STATUS_LABEL, - createStatusMessages, - getCountMessage, - updateCountMessage -}); -module.exports = characterCount; - -},{"../../uswds-core/src/js/config":35,"../../uswds-core/src/js/utils/behavior":45,"../../uswds-core/src/js/utils/debounce":46,"../../uswds-core/src/js/utils/select":53}],18:[function(require,module,exports){ -"use strict"; - -const keymap = require("receptor/keymap"); -const selectOrMatches = require("../../uswds-core/src/js/utils/select-or-matches"); -const behavior = require("../../uswds-core/src/js/utils/behavior"); -const Sanitizer = require("../../uswds-core/src/js/utils/sanitizer"); -const { - prefix: PREFIX -} = require("../../uswds-core/src/js/config"); -const { - CLICK -} = require("../../uswds-core/src/js/events"); -const COMBO_BOX_CLASS = `${PREFIX}-combo-box`; -const COMBO_BOX_PRISTINE_CLASS = `${COMBO_BOX_CLASS}--pristine`; -const SELECT_CLASS = `${COMBO_BOX_CLASS}__select`; -const INPUT_CLASS = `${COMBO_BOX_CLASS}__input`; -const CLEAR_INPUT_BUTTON_CLASS = `${COMBO_BOX_CLASS}__clear-input`; -const CLEAR_INPUT_BUTTON_WRAPPER_CLASS = `${CLEAR_INPUT_BUTTON_CLASS}__wrapper`; -const INPUT_BUTTON_SEPARATOR_CLASS = `${COMBO_BOX_CLASS}__input-button-separator`; -const TOGGLE_LIST_BUTTON_CLASS = `${COMBO_BOX_CLASS}__toggle-list`; -const TOGGLE_LIST_BUTTON_WRAPPER_CLASS = `${TOGGLE_LIST_BUTTON_CLASS}__wrapper`; -const LIST_CLASS = `${COMBO_BOX_CLASS}__list`; -const LIST_OPTION_CLASS = `${COMBO_BOX_CLASS}__list-option`; -const LIST_OPTION_FOCUSED_CLASS = `${LIST_OPTION_CLASS}--focused`; -const LIST_OPTION_SELECTED_CLASS = `${LIST_OPTION_CLASS}--selected`; -const STATUS_CLASS = `${COMBO_BOX_CLASS}__status`; -const COMBO_BOX = `.${COMBO_BOX_CLASS}`; -const SELECT = `.${SELECT_CLASS}`; -const INPUT = `.${INPUT_CLASS}`; -const CLEAR_INPUT_BUTTON = `.${CLEAR_INPUT_BUTTON_CLASS}`; -const TOGGLE_LIST_BUTTON = `.${TOGGLE_LIST_BUTTON_CLASS}`; -const LIST = `.${LIST_CLASS}`; -const LIST_OPTION = `.${LIST_OPTION_CLASS}`; -const LIST_OPTION_FOCUSED = `.${LIST_OPTION_FOCUSED_CLASS}`; -const LIST_OPTION_SELECTED = `.${LIST_OPTION_SELECTED_CLASS}`; -const STATUS = `.${STATUS_CLASS}`; -const DEFAULT_FILTER = ".*{{query}}.*"; -const noop = () => {}; - -/** - * set the value of the element and dispatch a change event - * - * @param {HTMLInputElement|HTMLSelectElement} el The element to update - * @param {string} value The new value of the element - */ -const changeElementValue = function (el) { - let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ""; - const elementToChange = el; - elementToChange.value = value; - const event = new CustomEvent("change", { - bubbles: true, - cancelable: true, - detail: { - value - } - }); - elementToChange.dispatchEvent(event); -}; - -/** - * The elements within the combo box. - * @typedef {Object} ComboBoxContext - * @property {HTMLElement} comboBoxEl - * @property {HTMLSelectElement} selectEl - * @property {HTMLInputElement} inputEl - * @property {HTMLUListElement} listEl - * @property {HTMLDivElement} statusEl - * @property {HTMLLIElement} focusedOptionEl - * @property {HTMLLIElement} selectedOptionEl - * @property {HTMLButtonElement} toggleListBtnEl - * @property {HTMLButtonElement} clearInputBtnEl - * @property {boolean} isPristine - * @property {boolean} disableFiltering - */ - -/** - * Get an object of elements belonging directly to the given - * combo box component. - * - * @param {HTMLElement} el the element within the combo box - * @returns {ComboBoxContext} elements - */ -const getComboBoxContext = el => { - const comboBoxEl = el.closest(COMBO_BOX); - if (!comboBoxEl) { - throw new Error(`Element is missing outer ${COMBO_BOX}`); - } - const selectEl = comboBoxEl.querySelector(SELECT); - const inputEl = comboBoxEl.querySelector(INPUT); - const listEl = comboBoxEl.querySelector(LIST); - const statusEl = comboBoxEl.querySelector(STATUS); - const focusedOptionEl = comboBoxEl.querySelector(LIST_OPTION_FOCUSED); - const selectedOptionEl = comboBoxEl.querySelector(LIST_OPTION_SELECTED); - const toggleListBtnEl = comboBoxEl.querySelector(TOGGLE_LIST_BUTTON); - const clearInputBtnEl = comboBoxEl.querySelector(CLEAR_INPUT_BUTTON); - const isPristine = comboBoxEl.classList.contains(COMBO_BOX_PRISTINE_CLASS); - const disableFiltering = comboBoxEl.dataset.disableFiltering === "true"; - return { - comboBoxEl, - selectEl, - inputEl, - listEl, - statusEl, - focusedOptionEl, - selectedOptionEl, - toggleListBtnEl, - clearInputBtnEl, - isPristine, - disableFiltering - }; -}; - -/** - * Disable the combo-box component - * - * @param {HTMLInputElement} el An element within the combo box component - */ -const disable = el => { - const { - inputEl, - toggleListBtnEl, - clearInputBtnEl - } = getComboBoxContext(el); - clearInputBtnEl.hidden = true; - clearInputBtnEl.disabled = true; - toggleListBtnEl.disabled = true; - inputEl.disabled = true; -}; - -/** - * Enable the combo-box component - * - * @param {HTMLInputElement} el An element within the combo box component - */ -const enable = el => { - const { - inputEl, - toggleListBtnEl, - clearInputBtnEl - } = getComboBoxContext(el); - clearInputBtnEl.hidden = false; - clearInputBtnEl.disabled = false; - toggleListBtnEl.disabled = false; - inputEl.disabled = false; -}; - -/** - * Enhance a select element into a combo box component. - * - * @param {HTMLElement} _comboBoxEl The initial element of the combo box component - */ -const enhanceComboBox = _comboBoxEl => { - const comboBoxEl = _comboBoxEl.closest(COMBO_BOX); - if (comboBoxEl.dataset.enhanced) return; - const selectEl = comboBoxEl.querySelector("select"); - if (!selectEl) { - throw new Error(`${COMBO_BOX} is missing inner select`); - } - const selectId = selectEl.id; - const selectLabel = document.querySelector(`label[for="${selectId}"]`); - const listId = `${selectId}--list`; - const listIdLabel = `${selectId}-label`; - const assistiveHintID = `${selectId}--assistiveHint`; - const additionalAttributes = []; - const { - defaultValue - } = comboBoxEl.dataset; - const { - placeholder - } = comboBoxEl.dataset; - let selectedOption; - if (placeholder) { - additionalAttributes.push({ - placeholder - }); - } - if (defaultValue) { - for (let i = 0, len = selectEl.options.length; i < len; i += 1) { - const optionEl = selectEl.options[i]; - if (optionEl.value === defaultValue) { - selectedOption = optionEl; - break; - } - } - } - - /** - * Throw error if combobox is missing a label or label is missing - * `for` attribute. Otherwise, set the ID to match the
    aria-labelledby - */ - if (!selectLabel || !selectLabel.matches(`label[for="${selectId}"]`)) { - throw new Error(`${COMBO_BOX} for ${selectId} is either missing a label or a "for" attribute`); - } else { - selectLabel.setAttribute("id", listIdLabel); - } - selectLabel.setAttribute("id", listIdLabel); - selectEl.setAttribute("aria-hidden", "true"); - selectEl.setAttribute("tabindex", "-1"); - selectEl.classList.add("usa-sr-only", SELECT_CLASS); - selectEl.id = ""; - selectEl.value = ""; - ["required", "aria-label", "aria-labelledby"].forEach(name => { - if (selectEl.hasAttribute(name)) { - const value = selectEl.getAttribute(name); - additionalAttributes.push({ - [name]: value - }); - selectEl.removeAttribute(name); - } - }); - - // sanitize doesn't like functions in template literals - const input = document.createElement("input"); - input.setAttribute("id", selectId); - input.setAttribute("aria-owns", listId); - input.setAttribute("aria-controls", listId); - input.setAttribute("aria-autocomplete", "list"); - input.setAttribute("aria-describedby", assistiveHintID); - input.setAttribute("aria-expanded", "false"); - input.setAttribute("autocapitalize", "off"); - input.setAttribute("autocomplete", "off"); - input.setAttribute("class", INPUT_CLASS); - input.setAttribute("type", "text"); - input.setAttribute("role", "combobox"); - additionalAttributes.forEach(attr => Object.keys(attr).forEach(key => { - const value = Sanitizer.escapeHTML`${attr[key]}`; - input.setAttribute(key, value); - })); - comboBoxEl.insertAdjacentElement("beforeend", input); - comboBoxEl.insertAdjacentHTML("beforeend", Sanitizer.escapeHTML` - - - -   - - - - -
    - - When autocomplete results are available use up and down arrows to review and enter to select. - Touch device users, explore by touch or with swipe gestures. - `); - if (selectedOption) { - const { - inputEl - } = getComboBoxContext(comboBoxEl); - changeElementValue(selectEl, selectedOption.value); - changeElementValue(inputEl, selectedOption.text); - comboBoxEl.classList.add(COMBO_BOX_PRISTINE_CLASS); - } - if (selectEl.disabled) { - disable(comboBoxEl); - selectEl.disabled = false; - } - comboBoxEl.dataset.enhanced = "true"; -}; - -/** - * Manage the focused element within the list options when - * navigating via keyboard. - * - * @param {HTMLElement} el An anchor element within the combo box component - * @param {HTMLElement} nextEl An element within the combo box component - * @param {Object} options options - * @param {boolean} options.skipFocus skip focus of highlighted item - * @param {boolean} options.preventScroll should skip procedure to scroll to element - */ -const highlightOption = function (el, nextEl) { - let { - skipFocus, - preventScroll - } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; - const { - inputEl, - listEl, - focusedOptionEl - } = getComboBoxContext(el); - if (focusedOptionEl) { - focusedOptionEl.classList.remove(LIST_OPTION_FOCUSED_CLASS); - focusedOptionEl.setAttribute("tabIndex", "-1"); - } - if (nextEl) { - inputEl.setAttribute("aria-activedescendant", nextEl.id); - nextEl.setAttribute("tabIndex", "0"); - nextEl.classList.add(LIST_OPTION_FOCUSED_CLASS); - if (!preventScroll) { - const optionBottom = nextEl.offsetTop + nextEl.offsetHeight; - const currentBottom = listEl.scrollTop + listEl.offsetHeight; - if (optionBottom > currentBottom) { - listEl.scrollTop = optionBottom - listEl.offsetHeight; - } - if (nextEl.offsetTop < listEl.scrollTop) { - listEl.scrollTop = nextEl.offsetTop; - } - } - if (!skipFocus) { - nextEl.focus({ - preventScroll - }); - } - } else { - inputEl.setAttribute("aria-activedescendant", ""); - inputEl.focus(); - } -}; - -/** - * Generate a dynamic regular expression based off of a replaceable and possibly filtered value. - * - * @param {string} el An element within the combo box component - * @param {string} query The value to use in the regular expression - * @param {object} extras An object of regular expressions to replace and filter the query - */ -const generateDynamicRegExp = function (filter) { - let query = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ""; - let extras = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; - const escapeRegExp = text => text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); - let find = filter.replace(/{{(.*?)}}/g, (m, $1) => { - const key = $1.trim(); - const queryFilter = extras[key]; - if (key !== "query" && queryFilter) { - const matcher = new RegExp(queryFilter, "i"); - const matches = query.match(matcher); - if (matches) { - return escapeRegExp(matches[1]); - } - return ""; - } - return escapeRegExp(query); - }); - find = `^(?:${find})$`; - return new RegExp(find, "i"); -}; - -/** - * Display the option list of a combo box component. - * - * @param {HTMLElement} el An element within the combo box component - */ -const displayList = el => { - const { - comboBoxEl, - selectEl, - inputEl, - listEl, - statusEl, - isPristine, - disableFiltering - } = getComboBoxContext(el); - let selectedItemId; - let firstFoundId; - const listOptionBaseId = `${listEl.id}--option-`; - const inputValue = (inputEl.value || "").toLowerCase(); - const filter = comboBoxEl.dataset.filter || DEFAULT_FILTER; - const regex = generateDynamicRegExp(filter, inputValue, comboBoxEl.dataset); - const options = []; - for (let i = 0, len = selectEl.options.length; i < len; i += 1) { - const optionEl = selectEl.options[i]; - const optionId = `${listOptionBaseId}${options.length}`; - if (optionEl.value && (disableFiltering || isPristine || !inputValue || regex.test(optionEl.text))) { - if (selectEl.value && optionEl.value === selectEl.value) { - selectedItemId = optionId; - } - if (disableFiltering && !firstFoundId && regex.test(optionEl.text)) { - firstFoundId = optionId; - } - options.push(optionEl); - } - } - const numOptions = options.length; - const optionHtml = options.map((option, index) => { - const optionId = `${listOptionBaseId}${index}`; - const classes = [LIST_OPTION_CLASS]; - let tabindex = "-1"; - let ariaSelected = "false"; - if (optionId === selectedItemId) { - classes.push(LIST_OPTION_SELECTED_CLASS, LIST_OPTION_FOCUSED_CLASS); - tabindex = "0"; - ariaSelected = "true"; - } - if (!selectedItemId && index === 0) { - classes.push(LIST_OPTION_FOCUSED_CLASS); - tabindex = "0"; - } - const li = document.createElement("li"); - li.setAttribute("aria-setsize", options.length); - li.setAttribute("aria-posinset", index + 1); - li.setAttribute("aria-selected", ariaSelected); - li.setAttribute("id", optionId); - li.setAttribute("class", classes.join(" ")); - li.setAttribute("tabindex", tabindex); - li.setAttribute("role", "option"); - li.setAttribute("data-value", option.value); - li.textContent = option.text; - return li; - }); - const noResults = document.createElement("li"); - noResults.setAttribute("class", `${LIST_OPTION_CLASS}--no-results`); - noResults.textContent = "No results found"; - listEl.hidden = false; - if (numOptions) { - listEl.innerHTML = ""; - optionHtml.forEach(item => listEl.insertAdjacentElement("beforeend", item)); - } else { - listEl.innerHTML = ""; - listEl.insertAdjacentElement("beforeend", noResults); - } - inputEl.setAttribute("aria-expanded", "true"); - statusEl.textContent = numOptions ? `${numOptions} result${numOptions > 1 ? "s" : ""} available.` : "No results."; - let itemToFocus; - if (isPristine && selectedItemId) { - itemToFocus = listEl.querySelector(`#${selectedItemId}`); - } else if (disableFiltering && firstFoundId) { - itemToFocus = listEl.querySelector(`#${firstFoundId}`); - } - if (itemToFocus) { - highlightOption(listEl, itemToFocus, { - skipFocus: true - }); - } -}; - -/** - * Hide the option list of a combo box component. - * - * @param {HTMLElement} el An element within the combo box component - */ -const hideList = el => { - const { - inputEl, - listEl, - statusEl, - focusedOptionEl - } = getComboBoxContext(el); - statusEl.innerHTML = ""; - inputEl.setAttribute("aria-expanded", "false"); - inputEl.setAttribute("aria-activedescendant", ""); - if (focusedOptionEl) { - focusedOptionEl.classList.remove(LIST_OPTION_FOCUSED_CLASS); - } - listEl.scrollTop = 0; - listEl.hidden = true; -}; - -/** - * Select an option list of the combo box component. - * - * @param {HTMLElement} listOptionEl The list option being selected - */ -const selectItem = listOptionEl => { - const { - comboBoxEl, - selectEl, - inputEl - } = getComboBoxContext(listOptionEl); - changeElementValue(selectEl, listOptionEl.dataset.value); - changeElementValue(inputEl, listOptionEl.textContent); - comboBoxEl.classList.add(COMBO_BOX_PRISTINE_CLASS); - hideList(comboBoxEl); - inputEl.focus(); -}; - -/** - * Clear the input of the combo box - * - * @param {HTMLButtonElement} clearButtonEl The clear input button - */ -const clearInput = clearButtonEl => { - const { - comboBoxEl, - listEl, - selectEl, - inputEl - } = getComboBoxContext(clearButtonEl); - const listShown = !listEl.hidden; - if (selectEl.value) changeElementValue(selectEl); - if (inputEl.value) changeElementValue(inputEl); - comboBoxEl.classList.remove(COMBO_BOX_PRISTINE_CLASS); - if (listShown) displayList(comboBoxEl); - inputEl.focus(); -}; - -/** - * Reset the select based off of currently set select value - * - * @param {HTMLElement} el An element within the combo box component - */ -const resetSelection = el => { - const { - comboBoxEl, - selectEl, - inputEl - } = getComboBoxContext(el); - const selectValue = selectEl.value; - const inputValue = (inputEl.value || "").toLowerCase(); - if (selectValue) { - for (let i = 0, len = selectEl.options.length; i < len; i += 1) { - const optionEl = selectEl.options[i]; - if (optionEl.value === selectValue) { - if (inputValue !== optionEl.text) { - changeElementValue(inputEl, optionEl.text); - } - comboBoxEl.classList.add(COMBO_BOX_PRISTINE_CLASS); - return; - } - } - } - if (inputValue) { - changeElementValue(inputEl); - } -}; - -/** - * Select an option list of the combo box component based off of - * having a current focused list option or - * having test that completely matches a list option. - * Otherwise it clears the input and select. - * - * @param {HTMLElement} el An element within the combo box component - */ -const completeSelection = el => { - const { - comboBoxEl, - selectEl, - inputEl, - statusEl - } = getComboBoxContext(el); - statusEl.textContent = ""; - const inputValue = (inputEl.value || "").toLowerCase(); - if (inputValue) { - for (let i = 0, len = selectEl.options.length; i < len; i += 1) { - const optionEl = selectEl.options[i]; - if (optionEl.text.toLowerCase() === inputValue) { - changeElementValue(selectEl, optionEl.value); - changeElementValue(inputEl, optionEl.text); - comboBoxEl.classList.add(COMBO_BOX_PRISTINE_CLASS); - return; - } - } - } - resetSelection(comboBoxEl); -}; - -/** - * Handle the escape event within the combo box component. - * - * @param {KeyboardEvent} event An event within the combo box component - */ -const handleEscape = event => { - const { - comboBoxEl, - inputEl - } = getComboBoxContext(event.target); - hideList(comboBoxEl); - resetSelection(comboBoxEl); - inputEl.focus(); -}; - -/** - * Handle the down event within the combo box component. - * - * @param {KeyboardEvent} event An event within the combo box component - */ -const handleDownFromInput = event => { - const { - comboBoxEl, - listEl - } = getComboBoxContext(event.target); - if (listEl.hidden) { - displayList(comboBoxEl); - } - const nextOptionEl = listEl.querySelector(LIST_OPTION_FOCUSED) || listEl.querySelector(LIST_OPTION); - if (nextOptionEl) { - highlightOption(comboBoxEl, nextOptionEl); - } - event.preventDefault(); -}; - -/** - * Handle the enter event from an input element within the combo box component. - * - * @param {KeyboardEvent} event An event within the combo box component - */ -const handleEnterFromInput = event => { - const { - comboBoxEl, - listEl - } = getComboBoxContext(event.target); - const listShown = !listEl.hidden; - completeSelection(comboBoxEl); - if (listShown) { - hideList(comboBoxEl); - } - event.preventDefault(); -}; - -/** - * Handle the down event within the combo box component. - * - * @param {KeyboardEvent} event An event within the combo box component - */ -const handleDownFromListOption = event => { - const focusedOptionEl = event.target; - const nextOptionEl = focusedOptionEl.nextSibling; - if (nextOptionEl) { - highlightOption(focusedOptionEl, nextOptionEl); - } - event.preventDefault(); -}; - -/** - * Handle the tab event from an list option element within the combo box component. - * - * @param {KeyboardEvent} event An event within the combo box component - */ -const handleTabFromListOption = event => { - selectItem(event.target); - event.preventDefault(); -}; - -/** - * Handle the enter event from list option within the combo box component. - * - * @param {KeyboardEvent} event An event within the combo box component - */ -const handleEnterFromListOption = event => { - selectItem(event.target); - event.preventDefault(); -}; - -/** - * Handle the up event from list option within the combo box component. - * - * @param {KeyboardEvent} event An event within the combo box component - */ -const handleUpFromListOption = event => { - const { - comboBoxEl, - listEl, - focusedOptionEl - } = getComboBoxContext(event.target); - const nextOptionEl = focusedOptionEl && focusedOptionEl.previousSibling; - const listShown = !listEl.hidden; - highlightOption(comboBoxEl, nextOptionEl); - if (listShown) { - event.preventDefault(); - } - if (!nextOptionEl) { - hideList(comboBoxEl); - } -}; - -/** - * Select list option on the mouseover event. - * - * @param {MouseEvent} event The mouseover event - * @param {HTMLLIElement} listOptionEl An element within the combo box component - */ -const handleMouseover = listOptionEl => { - const isCurrentlyFocused = listOptionEl.classList.contains(LIST_OPTION_FOCUSED_CLASS); - if (isCurrentlyFocused) return; - highlightOption(listOptionEl, listOptionEl, { - preventScroll: true - }); -}; - -/** - * Toggle the list when the button is clicked - * - * @param {HTMLElement} el An element within the combo box component - */ -const toggleList = el => { - const { - comboBoxEl, - listEl, - inputEl - } = getComboBoxContext(el); - if (listEl.hidden) { - displayList(comboBoxEl); - } else { - hideList(comboBoxEl); - } - inputEl.focus(); -}; - -/** - * Handle click from input - * - * @param {HTMLInputElement} el An element within the combo box component - */ -const handleClickFromInput = el => { - const { - comboBoxEl, - listEl - } = getComboBoxContext(el); - if (listEl.hidden) { - displayList(comboBoxEl); - } -}; -const comboBox = behavior({ - [CLICK]: { - [INPUT]() { - if (this.disabled) return; - handleClickFromInput(this); - }, - [TOGGLE_LIST_BUTTON]() { - if (this.disabled) return; - toggleList(this); - }, - [LIST_OPTION]() { - if (this.disabled) return; - selectItem(this); - }, - [CLEAR_INPUT_BUTTON]() { - if (this.disabled) return; - clearInput(this); - } - }, - focusout: { - [COMBO_BOX](event) { - if (!this.contains(event.relatedTarget)) { - resetSelection(this); - hideList(this); - } - } - }, - keydown: { - [COMBO_BOX]: keymap({ - Escape: handleEscape - }), - [INPUT]: keymap({ - Enter: handleEnterFromInput, - ArrowDown: handleDownFromInput, - Down: handleDownFromInput - }), - [LIST_OPTION]: keymap({ - ArrowUp: handleUpFromListOption, - Up: handleUpFromListOption, - ArrowDown: handleDownFromListOption, - Down: handleDownFromListOption, - Enter: handleEnterFromListOption, - Tab: handleTabFromListOption, - "Shift+Tab": noop - }) - }, - input: { - [INPUT]() { - const comboBoxEl = this.closest(COMBO_BOX); - comboBoxEl.classList.remove(COMBO_BOX_PRISTINE_CLASS); - displayList(this); - } - }, - mouseover: { - [LIST_OPTION]() { - handleMouseover(this); - } - } -}, { - init(root) { - selectOrMatches(COMBO_BOX, root).forEach(comboBoxEl => { - enhanceComboBox(comboBoxEl); - }); - }, - getComboBoxContext, - enhanceComboBox, - generateDynamicRegExp, - disable, - enable, - displayList, - hideList, - COMBO_BOX_CLASS -}); -module.exports = comboBox; - -},{"../../uswds-core/src/js/config":35,"../../uswds-core/src/js/events":36,"../../uswds-core/src/js/utils/behavior":45,"../../uswds-core/src/js/utils/sanitizer":50,"../../uswds-core/src/js/utils/select-or-matches":52,"receptor/keymap":11}],19:[function(require,module,exports){ -"use strict"; - -const keymap = require("receptor/keymap"); -const behavior = require("../../uswds-core/src/js/utils/behavior"); -const select = require("../../uswds-core/src/js/utils/select"); -const selectOrMatches = require("../../uswds-core/src/js/utils/select-or-matches"); -const { - prefix: PREFIX -} = require("../../uswds-core/src/js/config"); -const { - CLICK -} = require("../../uswds-core/src/js/events"); -const activeElement = require("../../uswds-core/src/js/utils/active-element"); -const isIosDevice = require("../../uswds-core/src/js/utils/is-ios-device"); -const Sanitizer = require("../../uswds-core/src/js/utils/sanitizer"); -const DATE_PICKER_CLASS = `${PREFIX}-date-picker`; -const DATE_PICKER_WRAPPER_CLASS = `${DATE_PICKER_CLASS}__wrapper`; -const DATE_PICKER_INITIALIZED_CLASS = `${DATE_PICKER_CLASS}--initialized`; -const DATE_PICKER_ACTIVE_CLASS = `${DATE_PICKER_CLASS}--active`; -const DATE_PICKER_INTERNAL_INPUT_CLASS = `${DATE_PICKER_CLASS}__internal-input`; -const DATE_PICKER_EXTERNAL_INPUT_CLASS = `${DATE_PICKER_CLASS}__external-input`; -const DATE_PICKER_BUTTON_CLASS = `${DATE_PICKER_CLASS}__button`; -const DATE_PICKER_CALENDAR_CLASS = `${DATE_PICKER_CLASS}__calendar`; -const DATE_PICKER_STATUS_CLASS = `${DATE_PICKER_CLASS}__status`; -const CALENDAR_DATE_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__date`; -const CALENDAR_DATE_FOCUSED_CLASS = `${CALENDAR_DATE_CLASS}--focused`; -const CALENDAR_DATE_SELECTED_CLASS = `${CALENDAR_DATE_CLASS}--selected`; -const CALENDAR_DATE_PREVIOUS_MONTH_CLASS = `${CALENDAR_DATE_CLASS}--previous-month`; -const CALENDAR_DATE_CURRENT_MONTH_CLASS = `${CALENDAR_DATE_CLASS}--current-month`; -const CALENDAR_DATE_NEXT_MONTH_CLASS = `${CALENDAR_DATE_CLASS}--next-month`; -const CALENDAR_DATE_RANGE_DATE_CLASS = `${CALENDAR_DATE_CLASS}--range-date`; -const CALENDAR_DATE_TODAY_CLASS = `${CALENDAR_DATE_CLASS}--today`; -const CALENDAR_DATE_RANGE_DATE_START_CLASS = `${CALENDAR_DATE_CLASS}--range-date-start`; -const CALENDAR_DATE_RANGE_DATE_END_CLASS = `${CALENDAR_DATE_CLASS}--range-date-end`; -const CALENDAR_DATE_WITHIN_RANGE_CLASS = `${CALENDAR_DATE_CLASS}--within-range`; -const CALENDAR_PREVIOUS_YEAR_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__previous-year`; -const CALENDAR_PREVIOUS_MONTH_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__previous-month`; -const CALENDAR_NEXT_YEAR_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__next-year`; -const CALENDAR_NEXT_MONTH_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__next-month`; -const CALENDAR_MONTH_SELECTION_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__month-selection`; -const CALENDAR_YEAR_SELECTION_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__year-selection`; -const CALENDAR_MONTH_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__month`; -const CALENDAR_MONTH_FOCUSED_CLASS = `${CALENDAR_MONTH_CLASS}--focused`; -const CALENDAR_MONTH_SELECTED_CLASS = `${CALENDAR_MONTH_CLASS}--selected`; -const CALENDAR_YEAR_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__year`; -const CALENDAR_YEAR_FOCUSED_CLASS = `${CALENDAR_YEAR_CLASS}--focused`; -const CALENDAR_YEAR_SELECTED_CLASS = `${CALENDAR_YEAR_CLASS}--selected`; -const CALENDAR_PREVIOUS_YEAR_CHUNK_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__previous-year-chunk`; -const CALENDAR_NEXT_YEAR_CHUNK_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__next-year-chunk`; -const CALENDAR_DATE_PICKER_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__date-picker`; -const CALENDAR_MONTH_PICKER_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__month-picker`; -const CALENDAR_YEAR_PICKER_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__year-picker`; -const CALENDAR_TABLE_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__table`; -const CALENDAR_ROW_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__row`; -const CALENDAR_CELL_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__cell`; -const CALENDAR_CELL_CENTER_ITEMS_CLASS = `${CALENDAR_CELL_CLASS}--center-items`; -const CALENDAR_MONTH_LABEL_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__month-label`; -const CALENDAR_DAY_OF_WEEK_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__day-of-week`; -const DATE_PICKER = `.${DATE_PICKER_CLASS}`; -const DATE_PICKER_BUTTON = `.${DATE_PICKER_BUTTON_CLASS}`; -const DATE_PICKER_INTERNAL_INPUT = `.${DATE_PICKER_INTERNAL_INPUT_CLASS}`; -const DATE_PICKER_EXTERNAL_INPUT = `.${DATE_PICKER_EXTERNAL_INPUT_CLASS}`; -const DATE_PICKER_CALENDAR = `.${DATE_PICKER_CALENDAR_CLASS}`; -const DATE_PICKER_STATUS = `.${DATE_PICKER_STATUS_CLASS}`; -const CALENDAR_DATE = `.${CALENDAR_DATE_CLASS}`; -const CALENDAR_DATE_FOCUSED = `.${CALENDAR_DATE_FOCUSED_CLASS}`; -const CALENDAR_DATE_CURRENT_MONTH = `.${CALENDAR_DATE_CURRENT_MONTH_CLASS}`; -const CALENDAR_PREVIOUS_YEAR = `.${CALENDAR_PREVIOUS_YEAR_CLASS}`; -const CALENDAR_PREVIOUS_MONTH = `.${CALENDAR_PREVIOUS_MONTH_CLASS}`; -const CALENDAR_NEXT_YEAR = `.${CALENDAR_NEXT_YEAR_CLASS}`; -const CALENDAR_NEXT_MONTH = `.${CALENDAR_NEXT_MONTH_CLASS}`; -const CALENDAR_YEAR_SELECTION = `.${CALENDAR_YEAR_SELECTION_CLASS}`; -const CALENDAR_MONTH_SELECTION = `.${CALENDAR_MONTH_SELECTION_CLASS}`; -const CALENDAR_MONTH = `.${CALENDAR_MONTH_CLASS}`; -const CALENDAR_YEAR = `.${CALENDAR_YEAR_CLASS}`; -const CALENDAR_PREVIOUS_YEAR_CHUNK = `.${CALENDAR_PREVIOUS_YEAR_CHUNK_CLASS}`; -const CALENDAR_NEXT_YEAR_CHUNK = `.${CALENDAR_NEXT_YEAR_CHUNK_CLASS}`; -const CALENDAR_DATE_PICKER = `.${CALENDAR_DATE_PICKER_CLASS}`; -const CALENDAR_MONTH_PICKER = `.${CALENDAR_MONTH_PICKER_CLASS}`; -const CALENDAR_YEAR_PICKER = `.${CALENDAR_YEAR_PICKER_CLASS}`; -const CALENDAR_MONTH_FOCUSED = `.${CALENDAR_MONTH_FOCUSED_CLASS}`; -const CALENDAR_YEAR_FOCUSED = `.${CALENDAR_YEAR_FOCUSED_CLASS}`; -const VALIDATION_MESSAGE = "Please enter a valid date"; -const MONTH_LABELS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; -const DAY_OF_WEEK_LABELS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; -const ENTER_KEYCODE = 13; -const YEAR_CHUNK = 12; -const DEFAULT_MIN_DATE = "0000-01-01"; -const DEFAULT_EXTERNAL_DATE_FORMAT = "MM/DD/YYYY"; -const INTERNAL_DATE_FORMAT = "YYYY-MM-DD"; -const NOT_DISABLED_SELECTOR = ":not([disabled])"; -const processFocusableSelectors = function () { - for (var _len = arguments.length, selectors = new Array(_len), _key = 0; _key < _len; _key++) { - selectors[_key] = arguments[_key]; - } - return selectors.map(query => query + NOT_DISABLED_SELECTOR).join(", "); -}; -const DATE_PICKER_FOCUSABLE = processFocusableSelectors(CALENDAR_PREVIOUS_YEAR, CALENDAR_PREVIOUS_MONTH, CALENDAR_YEAR_SELECTION, CALENDAR_MONTH_SELECTION, CALENDAR_NEXT_YEAR, CALENDAR_NEXT_MONTH, CALENDAR_DATE_FOCUSED); -const MONTH_PICKER_FOCUSABLE = processFocusableSelectors(CALENDAR_MONTH_FOCUSED); -const YEAR_PICKER_FOCUSABLE = processFocusableSelectors(CALENDAR_PREVIOUS_YEAR_CHUNK, CALENDAR_NEXT_YEAR_CHUNK, CALENDAR_YEAR_FOCUSED); - -// #region Date Manipulation Functions - -/** - * Keep date within month. Month would only be over by 1 to 3 days - * - * @param {Date} dateToCheck the date object to check - * @param {number} month the correct month - * @returns {Date} the date, corrected if needed - */ -const keepDateWithinMonth = (dateToCheck, month) => { - if (month !== dateToCheck.getMonth()) { - dateToCheck.setDate(0); - } - return dateToCheck; -}; - -/** - * Set date from month day year - * - * @param {number} year the year to set - * @param {number} month the month to set (zero-indexed) - * @param {number} date the date to set - * @returns {Date} the set date - */ -const setDate = (year, month, date) => { - const newDate = new Date(0); - newDate.setFullYear(year, month, date); - return newDate; -}; - -/** - * todays date - * - * @returns {Date} todays date - */ -const today = () => { - const newDate = new Date(); - const day = newDate.getDate(); - const month = newDate.getMonth(); - const year = newDate.getFullYear(); - return setDate(year, month, day); -}; - -/** - * Set date to first day of the month - * - * @param {number} date the date to adjust - * @returns {Date} the adjusted date - */ -const startOfMonth = date => { - const newDate = new Date(0); - newDate.setFullYear(date.getFullYear(), date.getMonth(), 1); - return newDate; -}; - -/** - * Set date to last day of the month - * - * @param {number} date the date to adjust - * @returns {Date} the adjusted date - */ -const lastDayOfMonth = date => { - const newDate = new Date(0); - newDate.setFullYear(date.getFullYear(), date.getMonth() + 1, 0); - return newDate; -}; - -/** - * Add days to date - * - * @param {Date} _date the date to adjust - * @param {number} numDays the difference in days - * @returns {Date} the adjusted date - */ -const addDays = (_date, numDays) => { - const newDate = new Date(_date.getTime()); - newDate.setDate(newDate.getDate() + numDays); - return newDate; -}; - -/** - * Subtract days from date - * - * @param {Date} _date the date to adjust - * @param {number} numDays the difference in days - * @returns {Date} the adjusted date - */ -const subDays = (_date, numDays) => addDays(_date, -numDays); - -/** - * Add weeks to date - * - * @param {Date} _date the date to adjust - * @param {number} numWeeks the difference in weeks - * @returns {Date} the adjusted date - */ -const addWeeks = (_date, numWeeks) => addDays(_date, numWeeks * 7); - -/** - * Subtract weeks from date - * - * @param {Date} _date the date to adjust - * @param {number} numWeeks the difference in weeks - * @returns {Date} the adjusted date - */ -const subWeeks = (_date, numWeeks) => addWeeks(_date, -numWeeks); - -/** - * Set date to the start of the week (Sunday) - * - * @param {Date} _date the date to adjust - * @returns {Date} the adjusted date - */ -const startOfWeek = _date => { - const dayOfWeek = _date.getDay(); - return subDays(_date, dayOfWeek); -}; - -/** - * Set date to the end of the week (Saturday) - * - * @param {Date} _date the date to adjust - * @param {number} numWeeks the difference in weeks - * @returns {Date} the adjusted date - */ -const endOfWeek = _date => { - const dayOfWeek = _date.getDay(); - return addDays(_date, 6 - dayOfWeek); -}; - -/** - * Add months to date and keep date within month - * - * @param {Date} _date the date to adjust - * @param {number} numMonths the difference in months - * @returns {Date} the adjusted date - */ -const addMonths = (_date, numMonths) => { - const newDate = new Date(_date.getTime()); - const dateMonth = (newDate.getMonth() + 12 + numMonths) % 12; - newDate.setMonth(newDate.getMonth() + numMonths); - keepDateWithinMonth(newDate, dateMonth); - return newDate; -}; - -/** - * Subtract months from date - * - * @param {Date} _date the date to adjust - * @param {number} numMonths the difference in months - * @returns {Date} the adjusted date - */ -const subMonths = (_date, numMonths) => addMonths(_date, -numMonths); - -/** - * Add years to date and keep date within month - * - * @param {Date} _date the date to adjust - * @param {number} numYears the difference in years - * @returns {Date} the adjusted date - */ -const addYears = (_date, numYears) => addMonths(_date, numYears * 12); - -/** - * Subtract years from date - * - * @param {Date} _date the date to adjust - * @param {number} numYears the difference in years - * @returns {Date} the adjusted date - */ -const subYears = (_date, numYears) => addYears(_date, -numYears); - -/** - * Set months of date - * - * @param {Date} _date the date to adjust - * @param {number} month zero-indexed month to set - * @returns {Date} the adjusted date - */ -const setMonth = (_date, month) => { - const newDate = new Date(_date.getTime()); - newDate.setMonth(month); - keepDateWithinMonth(newDate, month); - return newDate; -}; - -/** - * Set year of date - * - * @param {Date} _date the date to adjust - * @param {number} year the year to set - * @returns {Date} the adjusted date - */ -const setYear = (_date, year) => { - const newDate = new Date(_date.getTime()); - const month = newDate.getMonth(); - newDate.setFullYear(year); - keepDateWithinMonth(newDate, month); - return newDate; -}; - -/** - * Return the earliest date - * - * @param {Date} dateA date to compare - * @param {Date} dateB date to compare - * @returns {Date} the earliest date - */ -const min = (dateA, dateB) => { - let newDate = dateA; - if (dateB < dateA) { - newDate = dateB; - } - return new Date(newDate.getTime()); -}; - -/** - * Return the latest date - * - * @param {Date} dateA date to compare - * @param {Date} dateB date to compare - * @returns {Date} the latest date - */ -const max = (dateA, dateB) => { - let newDate = dateA; - if (dateB > dateA) { - newDate = dateB; - } - return new Date(newDate.getTime()); -}; - -/** - * Check if dates are the in the same year - * - * @param {Date} dateA date to compare - * @param {Date} dateB date to compare - * @returns {boolean} are dates in the same year - */ -const isSameYear = (dateA, dateB) => dateA && dateB && dateA.getFullYear() === dateB.getFullYear(); - -/** - * Check if dates are the in the same month - * - * @param {Date} dateA date to compare - * @param {Date} dateB date to compare - * @returns {boolean} are dates in the same month - */ -const isSameMonth = (dateA, dateB) => isSameYear(dateA, dateB) && dateA.getMonth() === dateB.getMonth(); - -/** - * Check if dates are the same date - * - * @param {Date} dateA the date to compare - * @param {Date} dateA the date to compare - * @returns {boolean} are dates the same date - */ -const isSameDay = (dateA, dateB) => isSameMonth(dateA, dateB) && dateA.getDate() === dateB.getDate(); - -/** - * return a new date within minimum and maximum date - * - * @param {Date} date date to check - * @param {Date} minDate minimum date to allow - * @param {Date} maxDate maximum date to allow - * @returns {Date} the date between min and max - */ -const keepDateBetweenMinAndMax = (date, minDate, maxDate) => { - let newDate = date; - if (date < minDate) { - newDate = minDate; - } else if (maxDate && date > maxDate) { - newDate = maxDate; - } - return new Date(newDate.getTime()); -}; - -/** - * Check if dates is valid. - * - * @param {Date} date date to check - * @param {Date} minDate minimum date to allow - * @param {Date} maxDate maximum date to allow - * @return {boolean} is there a day within the month within min and max dates - */ -const isDateWithinMinAndMax = (date, minDate, maxDate) => date >= minDate && (!maxDate || date <= maxDate); - -/** - * Check if dates month is invalid. - * - * @param {Date} date date to check - * @param {Date} minDate minimum date to allow - * @param {Date} maxDate maximum date to allow - * @return {boolean} is the month outside min or max dates - */ -const isDatesMonthOutsideMinOrMax = (date, minDate, maxDate) => lastDayOfMonth(date) < minDate || maxDate && startOfMonth(date) > maxDate; - -/** - * Check if dates year is invalid. - * - * @param {Date} date date to check - * @param {Date} minDate minimum date to allow - * @param {Date} maxDate maximum date to allow - * @return {boolean} is the month outside min or max dates - */ -const isDatesYearOutsideMinOrMax = (date, minDate, maxDate) => lastDayOfMonth(setMonth(date, 11)) < minDate || maxDate && startOfMonth(setMonth(date, 0)) > maxDate; - -/** - * Parse a date with format M-D-YY - * - * @param {string} dateString the date string to parse - * @param {string} dateFormat the format of the date string - * @param {boolean} adjustDate should the date be adjusted - * @returns {Date} the parsed date - */ -const parseDateString = function (dateString) { - let dateFormat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : INTERNAL_DATE_FORMAT; - let adjustDate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; - let date; - let month; - let day; - let year; - let parsed; - if (dateString) { - let monthStr; - let dayStr; - let yearStr; - if (dateFormat === DEFAULT_EXTERNAL_DATE_FORMAT) { - [monthStr, dayStr, yearStr] = dateString.split("/"); - } else { - [yearStr, monthStr, dayStr] = dateString.split("-"); - } - if (yearStr) { - parsed = parseInt(yearStr, 10); - if (!Number.isNaN(parsed)) { - year = parsed; - if (adjustDate) { - year = Math.max(0, year); - if (yearStr.length < 3) { - const currentYear = today().getFullYear(); - const currentYearStub = currentYear - currentYear % 10 ** yearStr.length; - year = currentYearStub + parsed; - } - } - } - } - if (monthStr) { - parsed = parseInt(monthStr, 10); - if (!Number.isNaN(parsed)) { - month = parsed; - if (adjustDate) { - month = Math.max(1, month); - month = Math.min(12, month); - } - } - } - if (month && dayStr && year != null) { - parsed = parseInt(dayStr, 10); - if (!Number.isNaN(parsed)) { - day = parsed; - if (adjustDate) { - const lastDayOfTheMonth = setDate(year, month, 0).getDate(); - day = Math.max(1, day); - day = Math.min(lastDayOfTheMonth, day); - } - } - } - if (month && day && year != null) { - date = setDate(year, month - 1, day); - } - } - return date; -}; - -/** - * Format a date to format MM-DD-YYYY - * - * @param {Date} date the date to format - * @param {string} dateFormat the format of the date string - * @returns {string} the formatted date string - */ -const formatDate = function (date) { - let dateFormat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : INTERNAL_DATE_FORMAT; - const padZeros = (value, length) => `0000${value}`.slice(-length); - const month = date.getMonth() + 1; - const day = date.getDate(); - const year = date.getFullYear(); - if (dateFormat === DEFAULT_EXTERNAL_DATE_FORMAT) { - return [padZeros(month, 2), padZeros(day, 2), padZeros(year, 4)].join("/"); - } - return [padZeros(year, 4), padZeros(month, 2), padZeros(day, 2)].join("-"); -}; - -// #endregion Date Manipulation Functions - -/** - * Create a grid string from an array of html strings - * - * @param {string[]} htmlArray the array of html items - * @param {number} rowSize the length of a row - * @returns {string} the grid string - */ -const listToGridHtml = (htmlArray, rowSize) => { - const grid = []; - let row = []; - let i = 0; - while (i < htmlArray.length) { - row = []; - const tr = document.createElement("tr"); - while (i < htmlArray.length && row.length < rowSize) { - const td = document.createElement("td"); - td.insertAdjacentElement("beforeend", htmlArray[i]); - row.push(td); - i += 1; - } - row.forEach(element => { - tr.insertAdjacentElement("beforeend", element); - }); - grid.push(tr); - } - return grid; -}; -const createTableBody = grid => { - const tableBody = document.createElement("tbody"); - grid.forEach(element => { - tableBody.insertAdjacentElement("beforeend", element); - }); - return tableBody; -}; - -/** - * set the value of the element and dispatch a change event - * - * @param {HTMLInputElement} el The element to update - * @param {string} value The new value of the element - */ -const changeElementValue = function (el) { - let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ""; - const elementToChange = el; - elementToChange.value = value; - const event = new CustomEvent("change", { - bubbles: true, - cancelable: true, - detail: { - value - } - }); - elementToChange.dispatchEvent(event); -}; - -/** - * The properties and elements within the date picker. - * @typedef {Object} DatePickerContext - * @property {HTMLDivElement} calendarEl - * @property {HTMLElement} datePickerEl - * @property {HTMLInputElement} internalInputEl - * @property {HTMLInputElement} externalInputEl - * @property {HTMLDivElement} statusEl - * @property {HTMLDivElement} firstYearChunkEl - * @property {Date} calendarDate - * @property {Date} minDate - * @property {Date} maxDate - * @property {Date} selectedDate - * @property {Date} rangeDate - * @property {Date} defaultDate - */ - -/** - * Get an object of the properties and elements belonging directly to the given - * date picker component. - * - * @param {HTMLElement} el the element within the date picker - * @returns {DatePickerContext} elements - */ -const getDatePickerContext = el => { - const datePickerEl = el.closest(DATE_PICKER); - if (!datePickerEl) { - throw new Error(`Element is missing outer ${DATE_PICKER}`); - } - const internalInputEl = datePickerEl.querySelector(DATE_PICKER_INTERNAL_INPUT); - const externalInputEl = datePickerEl.querySelector(DATE_PICKER_EXTERNAL_INPUT); - const calendarEl = datePickerEl.querySelector(DATE_PICKER_CALENDAR); - const toggleBtnEl = datePickerEl.querySelector(DATE_PICKER_BUTTON); - const statusEl = datePickerEl.querySelector(DATE_PICKER_STATUS); - const firstYearChunkEl = datePickerEl.querySelector(CALENDAR_YEAR); - const inputDate = parseDateString(externalInputEl.value, DEFAULT_EXTERNAL_DATE_FORMAT, true); - const selectedDate = parseDateString(internalInputEl.value); - const calendarDate = parseDateString(calendarEl.dataset.value); - const minDate = parseDateString(datePickerEl.dataset.minDate); - const maxDate = parseDateString(datePickerEl.dataset.maxDate); - const rangeDate = parseDateString(datePickerEl.dataset.rangeDate); - const defaultDate = parseDateString(datePickerEl.dataset.defaultDate); - if (minDate && maxDate && minDate > maxDate) { - throw new Error("Minimum date cannot be after maximum date"); - } - return { - calendarDate, - minDate, - toggleBtnEl, - selectedDate, - maxDate, - firstYearChunkEl, - datePickerEl, - inputDate, - internalInputEl, - externalInputEl, - calendarEl, - rangeDate, - defaultDate, - statusEl - }; -}; - -/** - * Disable the date picker component - * - * @param {HTMLElement} el An element within the date picker component - */ -const disable = el => { - const { - externalInputEl, - toggleBtnEl - } = getDatePickerContext(el); - toggleBtnEl.disabled = true; - externalInputEl.disabled = true; -}; - -/** - * Enable the date picker component - * - * @param {HTMLElement} el An element within the date picker component - */ -const enable = el => { - const { - externalInputEl, - toggleBtnEl - } = getDatePickerContext(el); - toggleBtnEl.disabled = false; - externalInputEl.disabled = false; -}; - -// #region Validation - -/** - * Validate the value in the input as a valid date of format M/D/YYYY - * - * @param {HTMLElement} el An element within the date picker component - */ -const isDateInputInvalid = el => { - const { - externalInputEl, - minDate, - maxDate - } = getDatePickerContext(el); - const dateString = externalInputEl.value; - let isInvalid = false; - if (dateString) { - isInvalid = true; - const dateStringParts = dateString.split("/"); - const [month, day, year] = dateStringParts.map(str => { - let value; - const parsed = parseInt(str, 10); - if (!Number.isNaN(parsed)) value = parsed; - return value; - }); - if (month && day && year != null) { - const checkDate = setDate(year, month - 1, day); - if (checkDate.getMonth() === month - 1 && checkDate.getDate() === day && checkDate.getFullYear() === year && dateStringParts[2].length === 4 && isDateWithinMinAndMax(checkDate, minDate, maxDate)) { - isInvalid = false; - } - } - } - return isInvalid; -}; - -/** - * Validate the value in the input as a valid date of format M/D/YYYY - * - * @param {HTMLElement} el An element within the date picker component - */ -const validateDateInput = el => { - const { - externalInputEl - } = getDatePickerContext(el); - const isInvalid = isDateInputInvalid(externalInputEl); - if (isInvalid && !externalInputEl.validationMessage) { - externalInputEl.setCustomValidity(VALIDATION_MESSAGE); - } - if (!isInvalid && externalInputEl.validationMessage === VALIDATION_MESSAGE) { - externalInputEl.setCustomValidity(""); - } -}; - -// #endregion Validation - -/** - * Enable the date picker component - * - * @param {HTMLElement} el An element within the date picker component - */ -const reconcileInputValues = el => { - const { - internalInputEl, - inputDate - } = getDatePickerContext(el); - let newValue = ""; - if (inputDate && !isDateInputInvalid(el)) { - newValue = formatDate(inputDate); - } - if (internalInputEl.value !== newValue) { - changeElementValue(internalInputEl, newValue); - } -}; - -/** - * Select the value of the date picker inputs. - * - * @param {HTMLButtonElement} el An element within the date picker component - * @param {string} dateString The date string to update in YYYY-MM-DD format - */ -const setCalendarValue = (el, dateString) => { - const parsedDate = parseDateString(dateString); - if (parsedDate) { - const formattedDate = formatDate(parsedDate, DEFAULT_EXTERNAL_DATE_FORMAT); - const { - datePickerEl, - internalInputEl, - externalInputEl - } = getDatePickerContext(el); - changeElementValue(internalInputEl, dateString); - changeElementValue(externalInputEl, formattedDate); - validateDateInput(datePickerEl); - } -}; - -/** - * Enhance an input with the date picker elements - * - * @param {HTMLElement} el The initial wrapping element of the date picker component - */ -const enhanceDatePicker = el => { - const datePickerEl = el.closest(DATE_PICKER); - const { - defaultValue - } = datePickerEl.dataset; - const internalInputEl = datePickerEl.querySelector(`input`); - if (!internalInputEl) { - throw new Error(`${DATE_PICKER} is missing inner input`); - } - if (internalInputEl.value) { - internalInputEl.value = ""; - } - const minDate = parseDateString(datePickerEl.dataset.minDate || internalInputEl.getAttribute("min")); - datePickerEl.dataset.minDate = minDate ? formatDate(minDate) : DEFAULT_MIN_DATE; - const maxDate = parseDateString(datePickerEl.dataset.maxDate || internalInputEl.getAttribute("max")); - if (maxDate) { - datePickerEl.dataset.maxDate = formatDate(maxDate); - } - const calendarWrapper = document.createElement("div"); - calendarWrapper.classList.add(DATE_PICKER_WRAPPER_CLASS); - const externalInputEl = internalInputEl.cloneNode(); - externalInputEl.classList.add(DATE_PICKER_EXTERNAL_INPUT_CLASS); - externalInputEl.type = "text"; - calendarWrapper.appendChild(externalInputEl); - calendarWrapper.insertAdjacentHTML("beforeend", Sanitizer.escapeHTML` - - -
    `); - internalInputEl.setAttribute("aria-hidden", "true"); - internalInputEl.setAttribute("tabindex", "-1"); - internalInputEl.style.display = "none"; - internalInputEl.classList.add(DATE_PICKER_INTERNAL_INPUT_CLASS); - internalInputEl.removeAttribute("id"); - internalInputEl.removeAttribute("name"); - internalInputEl.required = false; - datePickerEl.appendChild(calendarWrapper); - datePickerEl.classList.add(DATE_PICKER_INITIALIZED_CLASS); - if (defaultValue) { - setCalendarValue(datePickerEl, defaultValue); - } - if (internalInputEl.disabled) { - disable(datePickerEl); - internalInputEl.disabled = false; - } -}; - -// #region Calendar - Date Selection View - -/** - * render the calendar. - * - * @param {HTMLElement} el An element within the date picker component - * @param {Date} _dateToDisplay a date to render on the calendar - * @returns {HTMLElement} a reference to the new calendar element - */ -const renderCalendar = (el, _dateToDisplay) => { - const { - datePickerEl, - calendarEl, - statusEl, - selectedDate, - maxDate, - minDate, - rangeDate - } = getDatePickerContext(el); - const todaysDate = today(); - let dateToDisplay = _dateToDisplay || todaysDate; - const calendarWasHidden = calendarEl.hidden; - const focusedDate = addDays(dateToDisplay, 0); - const focusedMonth = dateToDisplay.getMonth(); - const focusedYear = dateToDisplay.getFullYear(); - const prevMonth = subMonths(dateToDisplay, 1); - const nextMonth = addMonths(dateToDisplay, 1); - const currentFormattedDate = formatDate(dateToDisplay); - const firstOfMonth = startOfMonth(dateToDisplay); - const prevButtonsDisabled = isSameMonth(dateToDisplay, minDate); - const nextButtonsDisabled = isSameMonth(dateToDisplay, maxDate); - const rangeConclusionDate = selectedDate || dateToDisplay; - const rangeStartDate = rangeDate && min(rangeConclusionDate, rangeDate); - const rangeEndDate = rangeDate && max(rangeConclusionDate, rangeDate); - const withinRangeStartDate = rangeDate && addDays(rangeStartDate, 1); - const withinRangeEndDate = rangeDate && subDays(rangeEndDate, 1); - const monthLabel = MONTH_LABELS[focusedMonth]; - const generateDateHtml = dateToRender => { - const classes = [CALENDAR_DATE_CLASS]; - const day = dateToRender.getDate(); - const month = dateToRender.getMonth(); - const year = dateToRender.getFullYear(); - const dayOfWeek = dateToRender.getDay(); - const formattedDate = formatDate(dateToRender); - let tabindex = "-1"; - const isDisabled = !isDateWithinMinAndMax(dateToRender, minDate, maxDate); - const isSelected = isSameDay(dateToRender, selectedDate); - if (isSameMonth(dateToRender, prevMonth)) { - classes.push(CALENDAR_DATE_PREVIOUS_MONTH_CLASS); - } - if (isSameMonth(dateToRender, focusedDate)) { - classes.push(CALENDAR_DATE_CURRENT_MONTH_CLASS); - } - if (isSameMonth(dateToRender, nextMonth)) { - classes.push(CALENDAR_DATE_NEXT_MONTH_CLASS); - } - if (isSelected) { - classes.push(CALENDAR_DATE_SELECTED_CLASS); - } - if (isSameDay(dateToRender, todaysDate)) { - classes.push(CALENDAR_DATE_TODAY_CLASS); - } - if (rangeDate) { - if (isSameDay(dateToRender, rangeDate)) { - classes.push(CALENDAR_DATE_RANGE_DATE_CLASS); - } - if (isSameDay(dateToRender, rangeStartDate)) { - classes.push(CALENDAR_DATE_RANGE_DATE_START_CLASS); - } - if (isSameDay(dateToRender, rangeEndDate)) { - classes.push(CALENDAR_DATE_RANGE_DATE_END_CLASS); - } - if (isDateWithinMinAndMax(dateToRender, withinRangeStartDate, withinRangeEndDate)) { - classes.push(CALENDAR_DATE_WITHIN_RANGE_CLASS); - } - } - if (isSameDay(dateToRender, focusedDate)) { - tabindex = "0"; - classes.push(CALENDAR_DATE_FOCUSED_CLASS); - } - const monthStr = MONTH_LABELS[month]; - const dayStr = DAY_OF_WEEK_LABELS[dayOfWeek]; - const btn = document.createElement("button"); - btn.setAttribute("type", "button"); - btn.setAttribute("tabindex", tabindex); - btn.setAttribute("class", classes.join(" ")); - btn.setAttribute("data-day", day); - btn.setAttribute("data-month", month + 1); - btn.setAttribute("data-year", year); - btn.setAttribute("data-value", formattedDate); - btn.setAttribute("aria-label", Sanitizer.escapeHTML`${day} ${monthStr} ${year} ${dayStr}`); - btn.setAttribute("aria-selected", isSelected ? "true" : "false"); - if (isDisabled === true) { - btn.disabled = true; - } - btn.textContent = day; - return btn; - }; - - // set date to first rendered day - dateToDisplay = startOfWeek(firstOfMonth); - const days = []; - while (days.length < 28 || dateToDisplay.getMonth() === focusedMonth || days.length % 7 !== 0) { - days.push(generateDateHtml(dateToDisplay)); - dateToDisplay = addDays(dateToDisplay, 1); - } - const datesGrid = listToGridHtml(days, 7); - const newCalendar = calendarEl.cloneNode(); - newCalendar.dataset.value = currentFormattedDate; - newCalendar.style.top = `${datePickerEl.offsetHeight}px`; - newCalendar.hidden = false; - newCalendar.innerHTML = Sanitizer.escapeHTML` -
    -
    -
    - -
    -
    - -
    -
    - - -
    -
    - -
    -
    - -
    -
    -
    - `; - const table = document.createElement("table"); - table.setAttribute("class", CALENDAR_TABLE_CLASS); - table.setAttribute("role", "presentation"); - const tableHead = document.createElement("thead"); - table.insertAdjacentElement("beforeend", tableHead); - const tableHeadRow = document.createElement("tr"); - tableHead.insertAdjacentElement("beforeend", tableHeadRow); - const daysOfWeek = { - Sunday: "S", - Monday: "M", - Tuesday: "T", - Wednesday: "W", - Thursday: "Th", - Friday: "Fr", - Saturday: "S" - }; - Object.keys(daysOfWeek).forEach(key => { - const th = document.createElement("th"); - th.setAttribute("class", CALENDAR_DAY_OF_WEEK_CLASS); - th.setAttribute("scope", "presentation"); - th.setAttribute("aria-label", key); - th.textContent = daysOfWeek[key]; - tableHeadRow.insertAdjacentElement("beforeend", th); - }); - const tableBody = createTableBody(datesGrid); - table.insertAdjacentElement("beforeend", tableBody); - - // Container for Years, Months, and Days - const datePickerCalendarContainer = newCalendar.querySelector(CALENDAR_DATE_PICKER); - datePickerCalendarContainer.insertAdjacentElement("beforeend", table); - calendarEl.parentNode.replaceChild(newCalendar, calendarEl); - datePickerEl.classList.add(DATE_PICKER_ACTIVE_CLASS); - const statuses = []; - if (isSameDay(selectedDate, focusedDate)) { - statuses.push("Selected date"); - } - if (calendarWasHidden) { - statuses.push("You can navigate by day using left and right arrows", "Weeks by using up and down arrows", "Months by using page up and page down keys", "Years by using shift plus page up and shift plus page down", "Home and end keys navigate to the beginning and end of a week"); - statusEl.textContent = ""; - } else { - statuses.push(`${monthLabel} ${focusedYear}`); - } - statusEl.textContent = statuses.join(". "); - return newCalendar; -}; - -/** - * Navigate back one year and display the calendar. - * - * @param {HTMLButtonElement} _buttonEl An element within the date picker component - */ -const displayPreviousYear = _buttonEl => { - if (_buttonEl.disabled) return; - const { - calendarEl, - calendarDate, - minDate, - maxDate - } = getDatePickerContext(_buttonEl); - let date = subYears(calendarDate, 1); - date = keepDateBetweenMinAndMax(date, minDate, maxDate); - const newCalendar = renderCalendar(calendarEl, date); - let nextToFocus = newCalendar.querySelector(CALENDAR_PREVIOUS_YEAR); - if (nextToFocus.disabled) { - nextToFocus = newCalendar.querySelector(CALENDAR_DATE_PICKER); - } - nextToFocus.focus(); -}; - -/** - * Navigate back one month and display the calendar. - * - * @param {HTMLButtonElement} _buttonEl An element within the date picker component - */ -const displayPreviousMonth = _buttonEl => { - if (_buttonEl.disabled) return; - const { - calendarEl, - calendarDate, - minDate, - maxDate - } = getDatePickerContext(_buttonEl); - let date = subMonths(calendarDate, 1); - date = keepDateBetweenMinAndMax(date, minDate, maxDate); - const newCalendar = renderCalendar(calendarEl, date); - let nextToFocus = newCalendar.querySelector(CALENDAR_PREVIOUS_MONTH); - if (nextToFocus.disabled) { - nextToFocus = newCalendar.querySelector(CALENDAR_DATE_PICKER); - } - nextToFocus.focus(); -}; - -/** - * Navigate forward one month and display the calendar. - * - * @param {HTMLButtonElement} _buttonEl An element within the date picker component - */ -const displayNextMonth = _buttonEl => { - if (_buttonEl.disabled) return; - const { - calendarEl, - calendarDate, - minDate, - maxDate - } = getDatePickerContext(_buttonEl); - let date = addMonths(calendarDate, 1); - date = keepDateBetweenMinAndMax(date, minDate, maxDate); - const newCalendar = renderCalendar(calendarEl, date); - let nextToFocus = newCalendar.querySelector(CALENDAR_NEXT_MONTH); - if (nextToFocus.disabled) { - nextToFocus = newCalendar.querySelector(CALENDAR_DATE_PICKER); - } - nextToFocus.focus(); -}; - -/** - * Navigate forward one year and display the calendar. - * - * @param {HTMLButtonElement} _buttonEl An element within the date picker component - */ -const displayNextYear = _buttonEl => { - if (_buttonEl.disabled) return; - const { - calendarEl, - calendarDate, - minDate, - maxDate - } = getDatePickerContext(_buttonEl); - let date = addYears(calendarDate, 1); - date = keepDateBetweenMinAndMax(date, minDate, maxDate); - const newCalendar = renderCalendar(calendarEl, date); - let nextToFocus = newCalendar.querySelector(CALENDAR_NEXT_YEAR); - if (nextToFocus.disabled) { - nextToFocus = newCalendar.querySelector(CALENDAR_DATE_PICKER); - } - nextToFocus.focus(); -}; - -/** - * Hide the calendar of a date picker component. - * - * @param {HTMLElement} el An element within the date picker component - */ -const hideCalendar = el => { - const { - datePickerEl, - calendarEl, - statusEl - } = getDatePickerContext(el); - datePickerEl.classList.remove(DATE_PICKER_ACTIVE_CLASS); - calendarEl.hidden = true; - statusEl.textContent = ""; -}; - -/** - * Select a date within the date picker component. - * - * @param {HTMLButtonElement} calendarDateEl A date element within the date picker component - */ -const selectDate = calendarDateEl => { - if (calendarDateEl.disabled) return; - const { - datePickerEl, - externalInputEl - } = getDatePickerContext(calendarDateEl); - setCalendarValue(calendarDateEl, calendarDateEl.dataset.value); - hideCalendar(datePickerEl); - externalInputEl.focus(); -}; - -/** - * Toggle the calendar. - * - * @param {HTMLButtonElement} el An element within the date picker component - */ -const toggleCalendar = el => { - if (el.disabled) return; - const { - calendarEl, - inputDate, - minDate, - maxDate, - defaultDate - } = getDatePickerContext(el); - if (calendarEl.hidden) { - const dateToDisplay = keepDateBetweenMinAndMax(inputDate || defaultDate || today(), minDate, maxDate); - const newCalendar = renderCalendar(calendarEl, dateToDisplay); - newCalendar.querySelector(CALENDAR_DATE_FOCUSED).focus(); - } else { - hideCalendar(el); - } -}; - -/** - * Update the calendar when visible. - * - * @param {HTMLElement} el an element within the date picker - */ -const updateCalendarIfVisible = el => { - const { - calendarEl, - inputDate, - minDate, - maxDate - } = getDatePickerContext(el); - const calendarShown = !calendarEl.hidden; - if (calendarShown && inputDate) { - const dateToDisplay = keepDateBetweenMinAndMax(inputDate, minDate, maxDate); - renderCalendar(calendarEl, dateToDisplay); - } -}; - -// #endregion Calendar - Date Selection View - -// #region Calendar - Month Selection View -/** - * Display the month selection screen in the date picker. - * - * @param {HTMLButtonElement} el An element within the date picker component - * @returns {HTMLElement} a reference to the new calendar element - */ -const displayMonthSelection = (el, monthToDisplay) => { - const { - calendarEl, - statusEl, - calendarDate, - minDate, - maxDate - } = getDatePickerContext(el); - const selectedMonth = calendarDate.getMonth(); - const focusedMonth = monthToDisplay == null ? selectedMonth : monthToDisplay; - const months = MONTH_LABELS.map((month, index) => { - const monthToCheck = setMonth(calendarDate, index); - const isDisabled = isDatesMonthOutsideMinOrMax(monthToCheck, minDate, maxDate); - let tabindex = "-1"; - const classes = [CALENDAR_MONTH_CLASS]; - const isSelected = index === selectedMonth; - if (index === focusedMonth) { - tabindex = "0"; - classes.push(CALENDAR_MONTH_FOCUSED_CLASS); - } - if (isSelected) { - classes.push(CALENDAR_MONTH_SELECTED_CLASS); - } - const btn = document.createElement("button"); - btn.setAttribute("type", "button"); - btn.setAttribute("tabindex", tabindex); - btn.setAttribute("class", classes.join(" ")); - btn.setAttribute("data-value", index); - btn.setAttribute("data-label", month); - btn.setAttribute("aria-selected", isSelected ? "true" : "false"); - if (isDisabled === true) { - btn.disabled = true; - } - btn.textContent = month; - return btn; - }); - const monthsHtml = document.createElement("div"); - monthsHtml.setAttribute("tabindex", "-1"); - monthsHtml.setAttribute("class", CALENDAR_MONTH_PICKER_CLASS); - const table = document.createElement("table"); - table.setAttribute("class", CALENDAR_TABLE_CLASS); - table.setAttribute("role", "presentation"); - const monthsGrid = listToGridHtml(months, 3); - const tableBody = createTableBody(monthsGrid); - table.insertAdjacentElement("beforeend", tableBody); - monthsHtml.insertAdjacentElement("beforeend", table); - const newCalendar = calendarEl.cloneNode(); - newCalendar.insertAdjacentElement("beforeend", monthsHtml); - calendarEl.parentNode.replaceChild(newCalendar, calendarEl); - statusEl.textContent = "Select a month."; - return newCalendar; -}; - -/** - * Select a month in the date picker component. - * - * @param {HTMLButtonElement} monthEl An month element within the date picker component - */ -const selectMonth = monthEl => { - if (monthEl.disabled) return; - const { - calendarEl, - calendarDate, - minDate, - maxDate - } = getDatePickerContext(monthEl); - const selectedMonth = parseInt(monthEl.dataset.value, 10); - let date = setMonth(calendarDate, selectedMonth); - date = keepDateBetweenMinAndMax(date, minDate, maxDate); - const newCalendar = renderCalendar(calendarEl, date); - newCalendar.querySelector(CALENDAR_DATE_FOCUSED).focus(); -}; - -// #endregion Calendar - Month Selection View - -// #region Calendar - Year Selection View - -/** - * Display the year selection screen in the date picker. - * - * @param {HTMLButtonElement} el An element within the date picker component - * @param {number} yearToDisplay year to display in year selection - * @returns {HTMLElement} a reference to the new calendar element - */ -const displayYearSelection = (el, yearToDisplay) => { - const { - calendarEl, - statusEl, - calendarDate, - minDate, - maxDate - } = getDatePickerContext(el); - const selectedYear = calendarDate.getFullYear(); - const focusedYear = yearToDisplay == null ? selectedYear : yearToDisplay; - let yearToChunk = focusedYear; - yearToChunk -= yearToChunk % YEAR_CHUNK; - yearToChunk = Math.max(0, yearToChunk); - const prevYearChunkDisabled = isDatesYearOutsideMinOrMax(setYear(calendarDate, yearToChunk - 1), minDate, maxDate); - const nextYearChunkDisabled = isDatesYearOutsideMinOrMax(setYear(calendarDate, yearToChunk + YEAR_CHUNK), minDate, maxDate); - const years = []; - let yearIndex = yearToChunk; - while (years.length < YEAR_CHUNK) { - const isDisabled = isDatesYearOutsideMinOrMax(setYear(calendarDate, yearIndex), minDate, maxDate); - let tabindex = "-1"; - const classes = [CALENDAR_YEAR_CLASS]; - const isSelected = yearIndex === selectedYear; - if (yearIndex === focusedYear) { - tabindex = "0"; - classes.push(CALENDAR_YEAR_FOCUSED_CLASS); - } - if (isSelected) { - classes.push(CALENDAR_YEAR_SELECTED_CLASS); - } - const btn = document.createElement("button"); - btn.setAttribute("type", "button"); - btn.setAttribute("tabindex", tabindex); - btn.setAttribute("class", classes.join(" ")); - btn.setAttribute("data-value", yearIndex); - btn.setAttribute("aria-selected", isSelected ? "true" : "false"); - if (isDisabled === true) { - btn.disabled = true; - } - btn.textContent = yearIndex; - years.push(btn); - yearIndex += 1; - } - const newCalendar = calendarEl.cloneNode(); - - // create the years calendar wrapper - const yearsCalendarWrapper = document.createElement("div"); - yearsCalendarWrapper.setAttribute("tabindex", "-1"); - yearsCalendarWrapper.setAttribute("class", CALENDAR_YEAR_PICKER_CLASS); - - // create table parent - const yearsTableParent = document.createElement("table"); - yearsTableParent.setAttribute("role", "presentation"); - yearsTableParent.setAttribute("class", CALENDAR_TABLE_CLASS); - - // create table body and table row - const yearsHTMLTableBody = document.createElement("tbody"); - const yearsHTMLTableBodyRow = document.createElement("tr"); - - // create previous button - const previousYearsBtn = document.createElement("button"); - previousYearsBtn.setAttribute("type", "button"); - previousYearsBtn.setAttribute("class", CALENDAR_PREVIOUS_YEAR_CHUNK_CLASS); - previousYearsBtn.setAttribute("aria-label", `Navigate back ${YEAR_CHUNK} years`); - if (prevYearChunkDisabled === true) { - previousYearsBtn.disabled = true; - } - previousYearsBtn.innerHTML = Sanitizer.escapeHTML` `; - - // create next button - const nextYearsBtn = document.createElement("button"); - nextYearsBtn.setAttribute("type", "button"); - nextYearsBtn.setAttribute("class", CALENDAR_NEXT_YEAR_CHUNK_CLASS); - nextYearsBtn.setAttribute("aria-label", `Navigate forward ${YEAR_CHUNK} years`); - if (nextYearChunkDisabled === true) { - nextYearsBtn.disabled = true; - } - nextYearsBtn.innerHTML = Sanitizer.escapeHTML` `; - - // create the actual years table - const yearsTable = document.createElement("table"); - yearsTable.setAttribute("class", CALENDAR_TABLE_CLASS); - yearsTable.setAttribute("role", "presentation"); - - // create the years child table - const yearsGrid = listToGridHtml(years, 3); - const yearsTableBody = createTableBody(yearsGrid); - - // append the grid to the years child table - yearsTable.insertAdjacentElement("beforeend", yearsTableBody); - - // create the prev button td and append the prev button - const yearsHTMLTableBodyDetailPrev = document.createElement("td"); - yearsHTMLTableBodyDetailPrev.insertAdjacentElement("beforeend", previousYearsBtn); - - // create the years td and append the years child table - const yearsHTMLTableBodyYearsDetail = document.createElement("td"); - yearsHTMLTableBodyYearsDetail.setAttribute("colspan", "3"); - yearsHTMLTableBodyYearsDetail.insertAdjacentElement("beforeend", yearsTable); - - // create the next button td and append the next button - const yearsHTMLTableBodyDetailNext = document.createElement("td"); - yearsHTMLTableBodyDetailNext.insertAdjacentElement("beforeend", nextYearsBtn); - - // append the three td to the years child table row - yearsHTMLTableBodyRow.insertAdjacentElement("beforeend", yearsHTMLTableBodyDetailPrev); - yearsHTMLTableBodyRow.insertAdjacentElement("beforeend", yearsHTMLTableBodyYearsDetail); - yearsHTMLTableBodyRow.insertAdjacentElement("beforeend", yearsHTMLTableBodyDetailNext); - - // append the table row to the years child table body - yearsHTMLTableBody.insertAdjacentElement("beforeend", yearsHTMLTableBodyRow); - - // append the years table body to the years parent table - yearsTableParent.insertAdjacentElement("beforeend", yearsHTMLTableBody); - - // append the parent table to the calendar wrapper - yearsCalendarWrapper.insertAdjacentElement("beforeend", yearsTableParent); - - // append the years calender to the new calendar - newCalendar.insertAdjacentElement("beforeend", yearsCalendarWrapper); - - // replace calendar - calendarEl.parentNode.replaceChild(newCalendar, calendarEl); - statusEl.textContent = Sanitizer.escapeHTML`Showing years ${yearToChunk} to ${yearToChunk + YEAR_CHUNK - 1}. Select a year.`; - return newCalendar; -}; - -/** - * Navigate back by years and display the year selection screen. - * - * @param {HTMLButtonElement} el An element within the date picker component - */ -const displayPreviousYearChunk = el => { - if (el.disabled) return; - const { - calendarEl, - calendarDate, - minDate, - maxDate - } = getDatePickerContext(el); - const yearEl = calendarEl.querySelector(CALENDAR_YEAR_FOCUSED); - const selectedYear = parseInt(yearEl.textContent, 10); - let adjustedYear = selectedYear - YEAR_CHUNK; - adjustedYear = Math.max(0, adjustedYear); - const date = setYear(calendarDate, adjustedYear); - const cappedDate = keepDateBetweenMinAndMax(date, minDate, maxDate); - const newCalendar = displayYearSelection(calendarEl, cappedDate.getFullYear()); - let nextToFocus = newCalendar.querySelector(CALENDAR_PREVIOUS_YEAR_CHUNK); - if (nextToFocus.disabled) { - nextToFocus = newCalendar.querySelector(CALENDAR_YEAR_PICKER); - } - nextToFocus.focus(); -}; - -/** - * Navigate forward by years and display the year selection screen. - * - * @param {HTMLButtonElement} el An element within the date picker component - */ -const displayNextYearChunk = el => { - if (el.disabled) return; - const { - calendarEl, - calendarDate, - minDate, - maxDate - } = getDatePickerContext(el); - const yearEl = calendarEl.querySelector(CALENDAR_YEAR_FOCUSED); - const selectedYear = parseInt(yearEl.textContent, 10); - let adjustedYear = selectedYear + YEAR_CHUNK; - adjustedYear = Math.max(0, adjustedYear); - const date = setYear(calendarDate, adjustedYear); - const cappedDate = keepDateBetweenMinAndMax(date, minDate, maxDate); - const newCalendar = displayYearSelection(calendarEl, cappedDate.getFullYear()); - let nextToFocus = newCalendar.querySelector(CALENDAR_NEXT_YEAR_CHUNK); - if (nextToFocus.disabled) { - nextToFocus = newCalendar.querySelector(CALENDAR_YEAR_PICKER); - } - nextToFocus.focus(); -}; - -/** - * Select a year in the date picker component. - * - * @param {HTMLButtonElement} yearEl A year element within the date picker component - */ -const selectYear = yearEl => { - if (yearEl.disabled) return; - const { - calendarEl, - calendarDate, - minDate, - maxDate - } = getDatePickerContext(yearEl); - const selectedYear = parseInt(yearEl.innerHTML, 10); - let date = setYear(calendarDate, selectedYear); - date = keepDateBetweenMinAndMax(date, minDate, maxDate); - const newCalendar = renderCalendar(calendarEl, date); - newCalendar.querySelector(CALENDAR_DATE_FOCUSED).focus(); -}; - -// #endregion Calendar - Year Selection View - -// #region Calendar Event Handling - -/** - * Hide the calendar. - * - * @param {KeyboardEvent} event the keydown event - */ -const handleEscapeFromCalendar = event => { - const { - datePickerEl, - externalInputEl - } = getDatePickerContext(event.target); - hideCalendar(datePickerEl); - externalInputEl.focus(); - event.preventDefault(); -}; - -// #endregion Calendar Event Handling - -// #region Calendar Date Event Handling - -/** - * Adjust the date and display the calendar if needed. - * - * @param {function} adjustDateFn function that returns the adjusted date - */ -const adjustCalendar = adjustDateFn => event => { - const { - calendarEl, - calendarDate, - minDate, - maxDate - } = getDatePickerContext(event.target); - const date = adjustDateFn(calendarDate); - const cappedDate = keepDateBetweenMinAndMax(date, minDate, maxDate); - if (!isSameDay(calendarDate, cappedDate)) { - const newCalendar = renderCalendar(calendarEl, cappedDate); - newCalendar.querySelector(CALENDAR_DATE_FOCUSED).focus(); - } - event.preventDefault(); -}; - -/** - * Navigate back one week and display the calendar. - * - * @param {KeyboardEvent} event the keydown event - */ -const handleUpFromDate = adjustCalendar(date => subWeeks(date, 1)); - -/** - * Navigate forward one week and display the calendar. - * - * @param {KeyboardEvent} event the keydown event - */ -const handleDownFromDate = adjustCalendar(date => addWeeks(date, 1)); - -/** - * Navigate back one day and display the calendar. - * - * @param {KeyboardEvent} event the keydown event - */ -const handleLeftFromDate = adjustCalendar(date => subDays(date, 1)); - -/** - * Navigate forward one day and display the calendar. - * - * @param {KeyboardEvent} event the keydown event - */ -const handleRightFromDate = adjustCalendar(date => addDays(date, 1)); - -/** - * Navigate to the start of the week and display the calendar. - * - * @param {KeyboardEvent} event the keydown event - */ -const handleHomeFromDate = adjustCalendar(date => startOfWeek(date)); - -/** - * Navigate to the end of the week and display the calendar. - * - * @param {KeyboardEvent} event the keydown event - */ -const handleEndFromDate = adjustCalendar(date => endOfWeek(date)); - -/** - * Navigate forward one month and display the calendar. - * - * @param {KeyboardEvent} event the keydown event - */ -const handlePageDownFromDate = adjustCalendar(date => addMonths(date, 1)); - -/** - * Navigate back one month and display the calendar. - * - * @param {KeyboardEvent} event the keydown event - */ -const handlePageUpFromDate = adjustCalendar(date => subMonths(date, 1)); - -/** - * Navigate forward one year and display the calendar. - * - * @param {KeyboardEvent} event the keydown event - */ -const handleShiftPageDownFromDate = adjustCalendar(date => addYears(date, 1)); - -/** - * Navigate back one year and display the calendar. - * - * @param {KeyboardEvent} event the keydown event - */ -const handleShiftPageUpFromDate = adjustCalendar(date => subYears(date, 1)); - -/** - * display the calendar for the mouseover date. - * - * @param {MouseEvent} event The mouseover event - * @param {HTMLButtonElement} dateEl A date element within the date picker component - */ -const handleMouseoverFromDate = dateEl => { - if (dateEl.disabled) return; - const calendarEl = dateEl.closest(DATE_PICKER_CALENDAR); - const currentCalendarDate = calendarEl.dataset.value; - const hoverDate = dateEl.dataset.value; - if (hoverDate === currentCalendarDate) return; - const dateToDisplay = parseDateString(hoverDate); - const newCalendar = renderCalendar(calendarEl, dateToDisplay); - newCalendar.querySelector(CALENDAR_DATE_FOCUSED).focus(); -}; - -// #endregion Calendar Date Event Handling - -// #region Calendar Month Event Handling - -/** - * Adjust the month and display the month selection screen if needed. - * - * @param {function} adjustMonthFn function that returns the adjusted month - */ -const adjustMonthSelectionScreen = adjustMonthFn => event => { - const monthEl = event.target; - const selectedMonth = parseInt(monthEl.dataset.value, 10); - const { - calendarEl, - calendarDate, - minDate, - maxDate - } = getDatePickerContext(monthEl); - const currentDate = setMonth(calendarDate, selectedMonth); - let adjustedMonth = adjustMonthFn(selectedMonth); - adjustedMonth = Math.max(0, Math.min(11, adjustedMonth)); - const date = setMonth(calendarDate, adjustedMonth); - const cappedDate = keepDateBetweenMinAndMax(date, minDate, maxDate); - if (!isSameMonth(currentDate, cappedDate)) { - const newCalendar = displayMonthSelection(calendarEl, cappedDate.getMonth()); - newCalendar.querySelector(CALENDAR_MONTH_FOCUSED).focus(); - } - event.preventDefault(); -}; - -/** - * Navigate back three months and display the month selection screen. - * - * @param {KeyboardEvent} event the keydown event - */ -const handleUpFromMonth = adjustMonthSelectionScreen(month => month - 3); - -/** - * Navigate forward three months and display the month selection screen. - * - * @param {KeyboardEvent} event the keydown event - */ -const handleDownFromMonth = adjustMonthSelectionScreen(month => month + 3); - -/** - * Navigate back one month and display the month selection screen. - * - * @param {KeyboardEvent} event the keydown event - */ -const handleLeftFromMonth = adjustMonthSelectionScreen(month => month - 1); - -/** - * Navigate forward one month and display the month selection screen. - * - * @param {KeyboardEvent} event the keydown event - */ -const handleRightFromMonth = adjustMonthSelectionScreen(month => month + 1); - -/** - * Navigate to the start of the row of months and display the month selection screen. - * - * @param {KeyboardEvent} event the keydown event - */ -const handleHomeFromMonth = adjustMonthSelectionScreen(month => month - month % 3); - -/** - * Navigate to the end of the row of months and display the month selection screen. - * - * @param {KeyboardEvent} event the keydown event - */ -const handleEndFromMonth = adjustMonthSelectionScreen(month => month + 2 - month % 3); - -/** - * Navigate to the last month (December) and display the month selection screen. - * - * @param {KeyboardEvent} event the keydown event - */ -const handlePageDownFromMonth = adjustMonthSelectionScreen(() => 11); - -/** - * Navigate to the first month (January) and display the month selection screen. - * - * @param {KeyboardEvent} event the keydown event - */ -const handlePageUpFromMonth = adjustMonthSelectionScreen(() => 0); - -/** - * update the focus on a month when the mouse moves. - * - * @param {MouseEvent} event The mouseover event - * @param {HTMLButtonElement} monthEl A month element within the date picker component - */ -const handleMouseoverFromMonth = monthEl => { - if (monthEl.disabled) return; - if (monthEl.classList.contains(CALENDAR_MONTH_FOCUSED_CLASS)) return; - const focusMonth = parseInt(monthEl.dataset.value, 10); - const newCalendar = displayMonthSelection(monthEl, focusMonth); - newCalendar.querySelector(CALENDAR_MONTH_FOCUSED).focus(); -}; - -// #endregion Calendar Month Event Handling - -// #region Calendar Year Event Handling - -/** - * Adjust the year and display the year selection screen if needed. - * - * @param {function} adjustYearFn function that returns the adjusted year - */ -const adjustYearSelectionScreen = adjustYearFn => event => { - const yearEl = event.target; - const selectedYear = parseInt(yearEl.dataset.value, 10); - const { - calendarEl, - calendarDate, - minDate, - maxDate - } = getDatePickerContext(yearEl); - const currentDate = setYear(calendarDate, selectedYear); - let adjustedYear = adjustYearFn(selectedYear); - adjustedYear = Math.max(0, adjustedYear); - const date = setYear(calendarDate, adjustedYear); - const cappedDate = keepDateBetweenMinAndMax(date, minDate, maxDate); - if (!isSameYear(currentDate, cappedDate)) { - const newCalendar = displayYearSelection(calendarEl, cappedDate.getFullYear()); - newCalendar.querySelector(CALENDAR_YEAR_FOCUSED).focus(); - } - event.preventDefault(); -}; - -/** - * Navigate back three years and display the year selection screen. - * - * @param {KeyboardEvent} event the keydown event - */ -const handleUpFromYear = adjustYearSelectionScreen(year => year - 3); - -/** - * Navigate forward three years and display the year selection screen. - * - * @param {KeyboardEvent} event the keydown event - */ -const handleDownFromYear = adjustYearSelectionScreen(year => year + 3); - -/** - * Navigate back one year and display the year selection screen. - * - * @param {KeyboardEvent} event the keydown event - */ -const handleLeftFromYear = adjustYearSelectionScreen(year => year - 1); - -/** - * Navigate forward one year and display the year selection screen. - * - * @param {KeyboardEvent} event the keydown event - */ -const handleRightFromYear = adjustYearSelectionScreen(year => year + 1); - -/** - * Navigate to the start of the row of years and display the year selection screen. - * - * @param {KeyboardEvent} event the keydown event - */ -const handleHomeFromYear = adjustYearSelectionScreen(year => year - year % 3); - -/** - * Navigate to the end of the row of years and display the year selection screen. - * - * @param {KeyboardEvent} event the keydown event - */ -const handleEndFromYear = adjustYearSelectionScreen(year => year + 2 - year % 3); - -/** - * Navigate to back 12 years and display the year selection screen. - * - * @param {KeyboardEvent} event the keydown event - */ -const handlePageUpFromYear = adjustYearSelectionScreen(year => year - YEAR_CHUNK); - -/** - * Navigate forward 12 years and display the year selection screen. - * - * @param {KeyboardEvent} event the keydown event - */ -const handlePageDownFromYear = adjustYearSelectionScreen(year => year + YEAR_CHUNK); - -/** - * update the focus on a year when the mouse moves. - * - * @param {MouseEvent} event The mouseover event - * @param {HTMLButtonElement} dateEl A year element within the date picker component - */ -const handleMouseoverFromYear = yearEl => { - if (yearEl.disabled) return; - if (yearEl.classList.contains(CALENDAR_YEAR_FOCUSED_CLASS)) return; - const focusYear = parseInt(yearEl.dataset.value, 10); - const newCalendar = displayYearSelection(yearEl, focusYear); - newCalendar.querySelector(CALENDAR_YEAR_FOCUSED).focus(); -}; - -// #endregion Calendar Year Event Handling - -// #region Focus Handling Event Handling - -const tabHandler = focusable => { - const getFocusableContext = el => { - const { - calendarEl - } = getDatePickerContext(el); - const focusableElements = select(focusable, calendarEl); - const firstTabIndex = 0; - const lastTabIndex = focusableElements.length - 1; - const firstTabStop = focusableElements[firstTabIndex]; - const lastTabStop = focusableElements[lastTabIndex]; - const focusIndex = focusableElements.indexOf(activeElement()); - const isLastTab = focusIndex === lastTabIndex; - const isFirstTab = focusIndex === firstTabIndex; - const isNotFound = focusIndex === -1; - return { - focusableElements, - isNotFound, - firstTabStop, - isFirstTab, - lastTabStop, - isLastTab - }; - }; - return { - tabAhead(event) { - const { - firstTabStop, - isLastTab, - isNotFound - } = getFocusableContext(event.target); - if (isLastTab || isNotFound) { - event.preventDefault(); - firstTabStop.focus(); - } - }, - tabBack(event) { - const { - lastTabStop, - isFirstTab, - isNotFound - } = getFocusableContext(event.target); - if (isFirstTab || isNotFound) { - event.preventDefault(); - lastTabStop.focus(); - } - } - }; -}; -const datePickerTabEventHandler = tabHandler(DATE_PICKER_FOCUSABLE); -const monthPickerTabEventHandler = tabHandler(MONTH_PICKER_FOCUSABLE); -const yearPickerTabEventHandler = tabHandler(YEAR_PICKER_FOCUSABLE); - -// #endregion Focus Handling Event Handling - -// #region Date Picker Event Delegation Registration / Component - -const datePickerEvents = { - [CLICK]: { - [DATE_PICKER_BUTTON]() { - toggleCalendar(this); - }, - [CALENDAR_DATE]() { - selectDate(this); - }, - [CALENDAR_MONTH]() { - selectMonth(this); - }, - [CALENDAR_YEAR]() { - selectYear(this); - }, - [CALENDAR_PREVIOUS_MONTH]() { - displayPreviousMonth(this); - }, - [CALENDAR_NEXT_MONTH]() { - displayNextMonth(this); - }, - [CALENDAR_PREVIOUS_YEAR]() { - displayPreviousYear(this); - }, - [CALENDAR_NEXT_YEAR]() { - displayNextYear(this); - }, - [CALENDAR_PREVIOUS_YEAR_CHUNK]() { - displayPreviousYearChunk(this); - }, - [CALENDAR_NEXT_YEAR_CHUNK]() { - displayNextYearChunk(this); - }, - [CALENDAR_MONTH_SELECTION]() { - const newCalendar = displayMonthSelection(this); - newCalendar.querySelector(CALENDAR_MONTH_FOCUSED).focus(); - }, - [CALENDAR_YEAR_SELECTION]() { - const newCalendar = displayYearSelection(this); - newCalendar.querySelector(CALENDAR_YEAR_FOCUSED).focus(); - } - }, - keyup: { - [DATE_PICKER_CALENDAR](event) { - const keydown = this.dataset.keydownKeyCode; - if (`${event.keyCode}` !== keydown) { - event.preventDefault(); - } - } - }, - keydown: { - [DATE_PICKER_EXTERNAL_INPUT](event) { - if (event.keyCode === ENTER_KEYCODE) { - validateDateInput(this); - } - }, - [CALENDAR_DATE]: keymap({ - Up: handleUpFromDate, - ArrowUp: handleUpFromDate, - Down: handleDownFromDate, - ArrowDown: handleDownFromDate, - Left: handleLeftFromDate, - ArrowLeft: handleLeftFromDate, - Right: handleRightFromDate, - ArrowRight: handleRightFromDate, - Home: handleHomeFromDate, - End: handleEndFromDate, - PageDown: handlePageDownFromDate, - PageUp: handlePageUpFromDate, - "Shift+PageDown": handleShiftPageDownFromDate, - "Shift+PageUp": handleShiftPageUpFromDate, - Tab: datePickerTabEventHandler.tabAhead - }), - [CALENDAR_DATE_PICKER]: keymap({ - Tab: datePickerTabEventHandler.tabAhead, - "Shift+Tab": datePickerTabEventHandler.tabBack - }), - [CALENDAR_MONTH]: keymap({ - Up: handleUpFromMonth, - ArrowUp: handleUpFromMonth, - Down: handleDownFromMonth, - ArrowDown: handleDownFromMonth, - Left: handleLeftFromMonth, - ArrowLeft: handleLeftFromMonth, - Right: handleRightFromMonth, - ArrowRight: handleRightFromMonth, - Home: handleHomeFromMonth, - End: handleEndFromMonth, - PageDown: handlePageDownFromMonth, - PageUp: handlePageUpFromMonth - }), - [CALENDAR_MONTH_PICKER]: keymap({ - Tab: monthPickerTabEventHandler.tabAhead, - "Shift+Tab": monthPickerTabEventHandler.tabBack - }), - [CALENDAR_YEAR]: keymap({ - Up: handleUpFromYear, - ArrowUp: handleUpFromYear, - Down: handleDownFromYear, - ArrowDown: handleDownFromYear, - Left: handleLeftFromYear, - ArrowLeft: handleLeftFromYear, - Right: handleRightFromYear, - ArrowRight: handleRightFromYear, - Home: handleHomeFromYear, - End: handleEndFromYear, - PageDown: handlePageDownFromYear, - PageUp: handlePageUpFromYear - }), - [CALENDAR_YEAR_PICKER]: keymap({ - Tab: yearPickerTabEventHandler.tabAhead, - "Shift+Tab": yearPickerTabEventHandler.tabBack - }), - [DATE_PICKER_CALENDAR](event) { - this.dataset.keydownKeyCode = event.keyCode; - }, - [DATE_PICKER](event) { - const keyMap = keymap({ - Escape: handleEscapeFromCalendar - }); - keyMap(event); - } - }, - focusout: { - [DATE_PICKER_EXTERNAL_INPUT]() { - validateDateInput(this); - }, - [DATE_PICKER](event) { - if (!this.contains(event.relatedTarget)) { - hideCalendar(this); - } - } - }, - input: { - [DATE_PICKER_EXTERNAL_INPUT]() { - reconcileInputValues(this); - updateCalendarIfVisible(this); - } - } -}; -if (!isIosDevice()) { - datePickerEvents.mouseover = { - [CALENDAR_DATE_CURRENT_MONTH]() { - handleMouseoverFromDate(this); - }, - [CALENDAR_MONTH]() { - handleMouseoverFromMonth(this); - }, - [CALENDAR_YEAR]() { - handleMouseoverFromYear(this); - } - }; -} -const datePicker = behavior(datePickerEvents, { - init(root) { - selectOrMatches(DATE_PICKER, root).forEach(datePickerEl => { - enhanceDatePicker(datePickerEl); - }); - }, - getDatePickerContext, - disable, - enable, - isDateInputInvalid, - setCalendarValue, - validateDateInput, - renderCalendar, - updateCalendarIfVisible -}); - -// #endregion Date Picker Event Delegation Registration / Component - -module.exports = datePicker; - -},{"../../uswds-core/src/js/config":35,"../../uswds-core/src/js/events":36,"../../uswds-core/src/js/utils/active-element":44,"../../uswds-core/src/js/utils/behavior":45,"../../uswds-core/src/js/utils/is-ios-device":49,"../../uswds-core/src/js/utils/sanitizer":50,"../../uswds-core/src/js/utils/select":53,"../../uswds-core/src/js/utils/select-or-matches":52,"receptor/keymap":11}],20:[function(require,module,exports){ -"use strict"; - -const behavior = require("../../uswds-core/src/js/utils/behavior"); -const select = require("../../uswds-core/src/js/utils/select"); -const selectOrMatches = require("../../uswds-core/src/js/utils/select-or-matches"); -const { - prefix: PREFIX -} = require("../../uswds-core/src/js/config"); -const { - getDatePickerContext, - isDateInputInvalid, - updateCalendarIfVisible -} = require("../../usa-date-picker/src/index"); -const DATE_PICKER_CLASS = `${PREFIX}-date-picker`; -const DATE_RANGE_PICKER_CLASS = `${PREFIX}-date-range-picker`; -const DATE_RANGE_PICKER_RANGE_START_CLASS = `${DATE_RANGE_PICKER_CLASS}__range-start`; -const DATE_RANGE_PICKER_RANGE_END_CLASS = `${DATE_RANGE_PICKER_CLASS}__range-end`; -const DATE_PICKER = `.${DATE_PICKER_CLASS}`; -const DATE_RANGE_PICKER = `.${DATE_RANGE_PICKER_CLASS}`; -const DATE_RANGE_PICKER_RANGE_START = `.${DATE_RANGE_PICKER_RANGE_START_CLASS}`; -const DATE_RANGE_PICKER_RANGE_END = `.${DATE_RANGE_PICKER_RANGE_END_CLASS}`; -const DEFAULT_MIN_DATE = "0000-01-01"; - -/** - * The properties and elements within the date range picker. - * @typedef {Object} DateRangePickerContext - * @property {HTMLElement} dateRangePickerEl - * @property {HTMLElement} rangeStartEl - * @property {HTMLElement} rangeEndEl - */ - -/** - * Get an object of the properties and elements belonging directly to the given - * date picker component. - * - * @param {HTMLElement} el the element within the date picker - * @returns {DateRangePickerContext} elements - */ -const getDateRangePickerContext = el => { - const dateRangePickerEl = el.closest(DATE_RANGE_PICKER); - if (!dateRangePickerEl) { - throw new Error(`Element is missing outer ${DATE_RANGE_PICKER}`); - } - const rangeStartEl = dateRangePickerEl.querySelector(DATE_RANGE_PICKER_RANGE_START); - const rangeEndEl = dateRangePickerEl.querySelector(DATE_RANGE_PICKER_RANGE_END); - return { - dateRangePickerEl, - rangeStartEl, - rangeEndEl - }; -}; - -/** - * handle update from range start date picker - * - * @param {HTMLElement} el an element within the date range picker - */ -const handleRangeStartUpdate = el => { - const { - dateRangePickerEl, - rangeStartEl, - rangeEndEl - } = getDateRangePickerContext(el); - const { - internalInputEl - } = getDatePickerContext(rangeStartEl); - const updatedDate = internalInputEl.value; - if (updatedDate && !isDateInputInvalid(internalInputEl)) { - rangeEndEl.dataset.minDate = updatedDate; - rangeEndEl.dataset.rangeDate = updatedDate; - rangeEndEl.dataset.defaultDate = updatedDate; - } else { - rangeEndEl.dataset.minDate = dateRangePickerEl.dataset.minDate || ""; - rangeEndEl.dataset.rangeDate = ""; - rangeEndEl.dataset.defaultDate = ""; - } - updateCalendarIfVisible(rangeEndEl); -}; - -/** - * handle update from range start date picker - * - * @param {HTMLElement} el an element within the date range picker - */ -const handleRangeEndUpdate = el => { - const { - dateRangePickerEl, - rangeStartEl, - rangeEndEl - } = getDateRangePickerContext(el); - const { - internalInputEl - } = getDatePickerContext(rangeEndEl); - const updatedDate = internalInputEl.value; - if (updatedDate && !isDateInputInvalid(internalInputEl)) { - rangeStartEl.dataset.maxDate = updatedDate; - rangeStartEl.dataset.rangeDate = updatedDate; - rangeStartEl.dataset.defaultDate = updatedDate; - } else { - rangeStartEl.dataset.maxDate = dateRangePickerEl.dataset.maxDate || ""; - rangeStartEl.dataset.rangeDate = ""; - rangeStartEl.dataset.defaultDate = ""; - } - updateCalendarIfVisible(rangeStartEl); -}; - -/** - * Enhance an input with the date picker elements - * - * @param {HTMLElement} el The initial wrapping element of the date range picker component - */ -const enhanceDateRangePicker = el => { - const dateRangePickerEl = el.closest(DATE_RANGE_PICKER); - const [rangeStart, rangeEnd] = select(DATE_PICKER, dateRangePickerEl); - if (!rangeStart) { - throw new Error(`${DATE_RANGE_PICKER} is missing inner two '${DATE_PICKER}' elements`); - } - if (!rangeEnd) { - throw new Error(`${DATE_RANGE_PICKER} is missing second '${DATE_PICKER}' element`); - } - rangeStart.classList.add(DATE_RANGE_PICKER_RANGE_START_CLASS); - rangeEnd.classList.add(DATE_RANGE_PICKER_RANGE_END_CLASS); - if (!dateRangePickerEl.dataset.minDate) { - dateRangePickerEl.dataset.minDate = DEFAULT_MIN_DATE; - } - const { - minDate - } = dateRangePickerEl.dataset; - rangeStart.dataset.minDate = minDate; - rangeEnd.dataset.minDate = minDate; - const { - maxDate - } = dateRangePickerEl.dataset; - if (maxDate) { - rangeStart.dataset.maxDate = maxDate; - rangeEnd.dataset.maxDate = maxDate; - } - handleRangeStartUpdate(dateRangePickerEl); - handleRangeEndUpdate(dateRangePickerEl); -}; -const dateRangePicker = behavior({ - "input change": { - [DATE_RANGE_PICKER_RANGE_START]() { - handleRangeStartUpdate(this); - }, - [DATE_RANGE_PICKER_RANGE_END]() { - handleRangeEndUpdate(this); - } - } -}, { - init(root) { - selectOrMatches(DATE_RANGE_PICKER, root).forEach(dateRangePickerEl => { - enhanceDateRangePicker(dateRangePickerEl); - }); - } -}); -module.exports = dateRangePicker; - -},{"../../usa-date-picker/src/index":19,"../../uswds-core/src/js/config":35,"../../uswds-core/src/js/utils/behavior":45,"../../uswds-core/src/js/utils/select":53,"../../uswds-core/src/js/utils/select-or-matches":52}],21:[function(require,module,exports){ -"use strict"; - -const selectOrMatches = require("../../uswds-core/src/js/utils/select-or-matches"); -const behavior = require("../../uswds-core/src/js/utils/behavior"); -const Sanitizer = require("../../uswds-core/src/js/utils/sanitizer"); -const { - prefix: PREFIX -} = require("../../uswds-core/src/js/config"); -const DROPZONE_CLASS = `${PREFIX}-file-input`; -const DROPZONE = `.${DROPZONE_CLASS}`; -const INPUT_CLASS = `${PREFIX}-file-input__input`; -const TARGET_CLASS = `${PREFIX}-file-input__target`; -const INPUT = `.${INPUT_CLASS}`; -const BOX_CLASS = `${PREFIX}-file-input__box`; -const INSTRUCTIONS_CLASS = `${PREFIX}-file-input__instructions`; -const PREVIEW_CLASS = `${PREFIX}-file-input__preview`; -const PREVIEW_HEADING_CLASS = `${PREFIX}-file-input__preview-heading`; -const DISABLED_CLASS = `${PREFIX}-file-input--disabled`; -const CHOOSE_CLASS = `${PREFIX}-file-input__choose`; -const ACCEPTED_FILE_MESSAGE_CLASS = `${PREFIX}-file-input__accepted-files-message`; -const DRAG_TEXT_CLASS = `${PREFIX}-file-input__drag-text`; -const DRAG_CLASS = `${PREFIX}-file-input--drag`; -const LOADING_CLASS = "is-loading"; -const HIDDEN_CLASS = "display-none"; -const INVALID_FILE_CLASS = "has-invalid-file"; -const GENERIC_PREVIEW_CLASS_NAME = `${PREFIX}-file-input__preview-image`; -const GENERIC_PREVIEW_CLASS = `${GENERIC_PREVIEW_CLASS_NAME}--generic`; -const PDF_PREVIEW_CLASS = `${GENERIC_PREVIEW_CLASS_NAME}--pdf`; -const WORD_PREVIEW_CLASS = `${GENERIC_PREVIEW_CLASS_NAME}--word`; -const VIDEO_PREVIEW_CLASS = `${GENERIC_PREVIEW_CLASS_NAME}--video`; -const EXCEL_PREVIEW_CLASS = `${GENERIC_PREVIEW_CLASS_NAME}--excel`; -const SPACER_GIF = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"; -let TYPE_IS_VALID = Boolean(true); // logic gate for change listener - -/** - * The properties and elements within the file input. - * @typedef {Object} FileInputContext - * @property {HTMLDivElement} dropZoneEl - * @property {HTMLInputElement} inputEl - */ - -/** - * Get an object of the properties and elements belonging directly to the given - * file input component. - * - * @param {HTMLElement} el the element within the file input - * @returns {FileInputContext} elements - */ -const getFileInputContext = el => { - const dropZoneEl = el.closest(DROPZONE); - if (!dropZoneEl) { - throw new Error(`Element is missing outer ${DROPZONE}`); - } - const inputEl = dropZoneEl.querySelector(INPUT); - return { - dropZoneEl, - inputEl - }; -}; - -/** - * Disable the file input component - * - * @param {HTMLElement} el An element within the file input component - */ -const disable = el => { - const { - dropZoneEl, - inputEl - } = getFileInputContext(el); - inputEl.disabled = true; - dropZoneEl.classList.add(DISABLED_CLASS); - dropZoneEl.setAttribute("aria-disabled", "true"); -}; - -/** - * Enable the file input component - * - * @param {HTMLElement} el An element within the file input component - */ -const enable = el => { - const { - dropZoneEl, - inputEl - } = getFileInputContext(el); - inputEl.disabled = false; - dropZoneEl.classList.remove(DISABLED_CLASS); - dropZoneEl.removeAttribute("aria-disabled"); -}; - -/** - * - * @param {String} s special characters - * @returns {String} replaces specified values - */ -const replaceName = s => { - const c = s.charCodeAt(0); - if (c === 32) return "-"; - if (c >= 65 && c <= 90) return `img_${s.toLowerCase()}`; - return `__${("000", c.toString(16)).slice(-4)}`; -}; - -/** - * Creates an ID name for each file that strips all invalid characters. - * @param {String} name - name of the file added to file input (searchvalue) - * @returns {String} same characters as the name with invalid chars removed (newvalue) - */ -const makeSafeForID = name => name.replace(/[^a-z0-9]/g, replaceName); - -// Takes a generated safe ID and creates a unique ID. -const createUniqueID = name => `${name}-${Math.floor(Date.now().toString() / 1000)}`; - -/** - * Builds full file input component - * @param {HTMLElement} fileInputEl - original file input on page - * @returns {HTMLElement|HTMLElement} - Instructions, target area div - */ -const buildFileInput = fileInputEl => { - const acceptsMultiple = fileInputEl.hasAttribute("multiple"); - const fileInputParent = document.createElement("div"); - const dropTarget = document.createElement("div"); - const box = document.createElement("div"); - const instructions = document.createElement("div"); - const disabled = fileInputEl.hasAttribute("disabled"); - let defaultAriaLabel; - - // Adds class names and other attributes - fileInputEl.classList.remove(DROPZONE_CLASS); - fileInputEl.classList.add(INPUT_CLASS); - fileInputParent.classList.add(DROPZONE_CLASS); - box.classList.add(BOX_CLASS); - instructions.classList.add(INSTRUCTIONS_CLASS); - instructions.setAttribute("aria-hidden", "true"); - dropTarget.classList.add(TARGET_CLASS); - // Encourage screenreader to read out aria changes immediately following upload status change - fileInputEl.setAttribute("aria-live", "polite"); - - // Adds child elements to the DOM - fileInputEl.parentNode.insertBefore(dropTarget, fileInputEl); - fileInputEl.parentNode.insertBefore(fileInputParent, dropTarget); - dropTarget.appendChild(fileInputEl); - fileInputParent.appendChild(dropTarget); - fileInputEl.parentNode.insertBefore(instructions, fileInputEl); - fileInputEl.parentNode.insertBefore(box, fileInputEl); - - // Disabled styling - if (disabled) { - disable(fileInputEl); - } - - // Sets instruction test and aria-label based on whether or not multiple files are accepted - if (acceptsMultiple) { - defaultAriaLabel = "No files selected"; - instructions.innerHTML = Sanitizer.escapeHTML`Drag files here or choose from folder`; - fileInputEl.setAttribute("aria-label", defaultAriaLabel); - fileInputEl.setAttribute("data-default-aria-label", defaultAriaLabel); - } else { - defaultAriaLabel = "No file selected"; - instructions.innerHTML = Sanitizer.escapeHTML`Drag file here or choose from folder`; - fileInputEl.setAttribute("aria-label", defaultAriaLabel); - fileInputEl.setAttribute("data-default-aria-label", defaultAriaLabel); - } - - // IE11 and Edge do not support drop files on file inputs, so we've removed text that indicates that - if (/rv:11.0/i.test(navigator.userAgent) || /Edge\/\d./i.test(navigator.userAgent)) { - fileInputParent.querySelector(`.${DRAG_TEXT_CLASS}`).outerHTML = ""; - } - return { - instructions, - dropTarget - }; -}; - -/** - * Removes image previews, we want to start with a clean list every time files are added to the file input - * @param {HTMLElement} dropTarget - target area div that encases the input - * @param {HTMLElement} instructions - text to inform users to drag or select files - */ -const removeOldPreviews = (dropTarget, instructions, inputAriaLabel) => { - const filePreviews = dropTarget.querySelectorAll(`.${PREVIEW_CLASS}`); - const fileInputElement = dropTarget.querySelector(INPUT); - const currentPreviewHeading = dropTarget.querySelector(`.${PREVIEW_HEADING_CLASS}`); - const currentErrorMessage = dropTarget.querySelector(`.${ACCEPTED_FILE_MESSAGE_CLASS}`); - - /** - * finds the parent of the passed node and removes the child - * @param {HTMLElement} node - */ - const removeImages = node => { - node.parentNode.removeChild(node); - }; - - // Remove the heading above the previews - if (currentPreviewHeading) { - currentPreviewHeading.outerHTML = ""; - } - - // Remove existing error messages - if (currentErrorMessage) { - currentErrorMessage.outerHTML = ""; - dropTarget.classList.remove(INVALID_FILE_CLASS); - } - - // Get rid of existing previews if they exist, show instructions - if (filePreviews !== null) { - if (instructions) { - instructions.classList.remove(HIDDEN_CLASS); - } - fileInputElement.setAttribute("aria-label", inputAriaLabel); - Array.prototype.forEach.call(filePreviews, removeImages); - } -}; - -/** - * When new files are applied to file input, this function generates previews - * and removes old ones. - * @param {event} e - * @param {HTMLElement} fileInputEl - file input element - * @param {HTMLElement} instructions - text to inform users to drag or select files - * @param {HTMLElement} dropTarget - target area div that encases the input - */ - -const handleChange = (e, fileInputEl, instructions, dropTarget) => { - const fileNames = e.target.files; - const filePreviewsHeading = document.createElement("div"); - const inputAriaLabel = fileInputEl.dataset.defaultAriaLabel; - const fileStore = []; - - // First, get rid of existing previews - removeOldPreviews(dropTarget, instructions, inputAriaLabel); - - // Then, iterate through files list and: - // 1. Add selected file list names to aria-label - // 2. Create previews - for (let i = 0; i < fileNames.length; i += 1) { - const reader = new FileReader(); - const fileName = fileNames[i].name; - - // Push updated file names into the store array - fileStore.push(fileName); - - // read out the store array via aria-label, wording options vary based on file count - if (i === 0) { - fileInputEl.setAttribute("aria-label", `You have selected the file: ${fileName}`); - } else if (i >= 1) { - fileInputEl.setAttribute("aria-label", `You have selected ${fileNames.length} files: ${fileStore.join(", ")}`); - } - - // Starts with a loading image while preview is created - reader.onloadstart = function createLoadingImage() { - const imageId = createUniqueID(makeSafeForID(fileName)); - instructions.insertAdjacentHTML("afterend", Sanitizer.escapeHTML`