@hydrogen-design-system/system/dist/import/0042/components/forms/scripts/forms.js

Hydrogen's full design system and component library.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.h2FormValidationEvent = h2FormValidationEvent;
exports.h2FormAccordionToggleEvent = h2FormAccordionToggleEvent;
exports.h2FormPasswordToggleEvent = h2FormPasswordToggleEvent;
exports.h2FormIndicateRequiredFields = h2FormIndicateRequiredFields;
exports.h2FormValidationCheck = h2FormValidationCheck;
exports.h2FormAccordionToggle = h2FormAccordionToggle;
exports.h2FormPasswordToggle = h2FormPasswordToggle;

// Hydrogen / Component / Module JS
// This file is designed to be the location in which all scripting for the component's functionality exists. This file should export all relevant functionality so that it can be imported by Hydrogen and other systems.
// Development Notes:
// - please ensure all functions are defined with "" at the end of their name.
// - please ensure all references to the parent component's selector also include "" (e.g. [data-h2-accordion])
//   This is so that when the component is built, it produces a version-locked set of code that can me manually imported to override newer versions.
// - please ensure that when event listeners are added to a trigger, that the script is checking for the system variable (see an example below).
// System Check Script
function h2FormSystemCheck(version, target, targetComponentType, targetComponentTrigger, errorMessage) {
  var triggers = [];

  if (target == "all") {
    // Determine where the module is being loaded from. If the module is being loaded from the system, the event should only be applied to the component when it exists within the system's enabler selector (data-h2-system). This check ensures that any code that is loaded by the system is instanced and can be overridden by previous versions if need be.
    if (version == "latest") {
      if (targetComponentTrigger != null) {
        triggers = document.querySelectorAll(targetComponentType + " " + targetComponentTrigger);
        return triggers;
      } else {
        triggers = document.querySelectorAll(targetComponentType);
        return triggers;
      }
    } else if (version == null || version == false || version == "") {
      console.log("Hydrogen (" + errorMessage + "): no version value has been specified. Please specify \"latest\" or a version number.");
      return false;
    } else {
      var components = [];

      if (targetComponentTrigger != null) {
        components = document.querySelectorAll(targetComponentType + " " + targetComponentTrigger);
      } else {
        components = document.querySelectorAll(targetComponentType);
      }

      components.forEach(function (component) {
        if (component.closest("[data-h2-system]").getAttribute("data-h2-system") == version) {
          triggers.push(component);
        }
      });

      if (triggers.length == 0) {
        console.log("Hydrogen (" + errorMessage + "): no components were found within the system version you've specified. Please double check the version value being passed matches the version of the system installation on your project.");
        return false;
      } else {
        return triggers;
      }
    }
  } else if (target == null || target == false || target == "") {
    console.log("Hydrogen (" + errorMessage + "): no target has been specified. Please pass an HTMLelement object, a NodeList of elements, or \"all\".");
    return false;
  } else {
    // Check to see if the target is an HTMLelement object.
    if (target.nodeType == Node.ELEMENT_NODE) {
      if (targetComponentTrigger != null) {
        triggers.push(target.querySelector(targetComponentTrigger));
        return triggers;
      } else {
        triggers.push(target);
        return triggers;
      }
    } else {
      // Check to see if the target is a NodeList.
      if (NodeList.prototype.isPrototypeOf(target) == true) {
        target.forEach(function (trigger) {
          if (targetComponentTrigger != null) {
            triggers.push(trigger.querySelector(targetComponentTrigger));
          } else {
            triggers.push(trigger);
          }
        });
        return triggers;
      } else {
        // The target isn't a usable value.
        console.log("Hydrogen (" + errorMessage + "): you've passed an invalid target format. Targets must be a valid HTMLelement object or NodeList of elements.");
        return false;
      }
    }
  }
} // Events
// Validate fields.


function h2FormValidationEvent(e) {
  var input = e.target;
  var parent = input.closest("[data-h2-form-item]");

  if (parent.hasAttribute("data-h2-no-js") == false) {
    // Check to see if the input is required.
    if (input.hasAttribute("required")) {
      // Check if the input is empty.
      if (input.value == "") {
        parent.classList.add("h2-invalid");
      } // Since it has content, validate it.
      else {
          // If valid...
          if (input.checkValidity() == true) {
            parent.classList.remove("h2-invalid");
          } // If invalid...
          else {
              parent.classList.add("h2-invalid");
            }
        }
    } else {
      // If valid...
      if (input.checkValidity() == true) {
        parent.classList.remove("h2-invalid");
      } // If invalid...
      else {
          parent.classList.add("h2-invalid");
        }
    }
  }
} // Open/Close the more information accordion.


function h2FormAccordionToggleEvent(e) {
  e.preventDefault();
  var trigger = e.target;
  var accordion = trigger.closest("[data-h2-form-item]");
  var content = trigger.closest("[data-h2-form-item]").querySelector("[data-h2-input-info-wrapper]");
  var focusTarget = trigger;

  if (accordion.classList.contains("h2-active") == false) {
    // Open the accordion and set the proper accessibility features.
    trigger.setAttribute("aria-expanded", true);
    accordion.classList.add("h2-active");
    content.setAttribute("aria-hidden", false); // Check for a manual focus target and ensure it's focusable, and then focus it.

    if (content.querySelector("[data-h2-focus]") != null) {
      focusTarget = content.querySelector("[data-h2-focus]");
      focusTarget.setAttribute("tabindex", "0");
    } else {
      // Find the focusable items in the content and focus the first item.
      var focusList = content.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])"); // Ensure that there are in fact items to be focused in the content.

      if (focusList.length != 0) {
        focusTarget = focusList[0];
      }
    }

    focusTarget.focus();
  } else {
    // Check for a manual focus target and ensure it's removed from the tab order.
    if (content.querySelector("[data-h2-focus]") != null) {
      content.querySelector("[data-h2-focus]").setAttribute("tabindex", "-1");
    } // Close the accordion and remove accessibility values.


    trigger.setAttribute("aria-expanded", false);
    accordion.classList.remove("h2-active");
    content.setAttribute("aria-hidden", true);
  }
} // Toggle password inputs.


function h2FormPasswordToggleEvent(e) {
  var trigger = e.target;
  var parent = trigger.closest("[data-h2-form-item]");
  var input = parent.querySelector("input");

  if (parent.hasAttribute("data-h2-no-js") == false) {
    e.preventDefault();

    if (input.getAttribute("type") == "password") {
      input.setAttribute("type", "text");
      parent.classList.add("h2-password-show");
    } else {
      input.setAttribute("type", "password");
      parent.classList.remove("h2-password-show");
    }
  }
} // Event Listeners
// Indicate Required Inputs


function h2FormIndicateRequiredFields(targetForm) {
  var version = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "latest";
  // Set system check values.
  var targetComponentType = "[data-h2-form]";
  var targetComponentTrigger = null;
  var errorMessage = "Forms / Initialize Required Fields Script"; // Check to see if a target has been specified.

  var forms = h2FormSystemCheck(version, targetForm, targetComponentType, targetComponentTrigger, errorMessage); // Loop through the available forms and activate required fields.

  if (forms != false) {
    forms.forEach(function (form) {
      // Find all the H2 fields inside the form.
      var fields = form.querySelectorAll("input:required, textarea:required, select:required");

      if (fields != false && fields != null && fields.length > 0) {
        fields.forEach(function (field) {
          if (field.closest("[data-h2-form-item]").hasAttribute("data-h2-no-js") == false) {
            field.closest("[data-h2-form-item]").classList.add("h2-required");
          }
        });
      }
    });
  }
} // Vaidation event trigger.


function h2FormValidationCheck(targetInput) {
  var version = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "latest";
  // Set system check values.
  var targetComponentType = "[data-h2-form]" + " input," + "[data-h2-form]" + " textarea," + "[data-h2-form]" + " select";
  var targetComponentTrigger = null;
  var errorMessage = "Forms / Field Validation Script"; // Check for target inputs.

  var inputs = h2FormSystemCheck(version, targetInput, targetComponentType, targetComponentTrigger, errorMessage); // Loop through available inputs and add the validationg event.

  if (inputs != false) {
    inputs.forEach(function (input) {
      input.removeEventListener("focusout", h2FormValidationEvent);
      input.addEventListener("focusout", h2FormValidationEvent);
    });
  }
} // Add the more info event trigger.


function h2FormAccordionToggle(targetInfoTrigger) {
  var version = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "latest";
  // Set system check values.
  var targetComponentType = "[data-h2-form] [data-h2-form-item] [data-h2-input-info-trigger]";
  var targetComponentTrigger = null;
  var errorMessage = "Forms / Activate Input Extra Info Script"; // Check to see if triggers have been specified.

  var triggers = h2FormSystemCheck(version, targetInfoTrigger, targetComponentType, targetComponentTrigger, errorMessage); // Loop through available inputs and add the validationg event.

  if (triggers != false) {
    triggers.forEach(function (trigger) {
      trigger.removeEventListener("click", h2FormAccordionToggleEvent);
      trigger.addEventListener("click", h2FormAccordionToggleEvent);
    });
  }
} // Add the event listener.


function h2FormPasswordToggle(targetPasswordTrigger) {
  var version = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "latest";
  // Set system check values.
  var targetComponentType = "[data-h2-form] [data-h2-form-item*=\"password\"] [data-h2-input-password-trigger]";
  var targetComponentTrigger = null;
  var errorMessage = "Forms / Activate Password Reveal Triggers Script"; // Check to see if inputs have been specified.

  var inputs = h2FormSystemCheck(version, targetPasswordTrigger, targetComponentType, targetComponentTrigger, errorMessage); // Loop through available inputs and add the validationg event.

  if (inputs != false) {
    inputs.forEach(function (input) {
      input.removeEventListener("click", h2FormPasswordToggleEvent);
      input.addEventListener("click", h2FormPasswordToggleEvent);
    });
  }
} // Exports