fix: moves auro library to dependencies in package.json #18

AlaskaAirlines · Oct 9, 2024 · 673d3d7 · 673d3d7
1 parent d119fe2
commit 673d3d7
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 302 deletions.
diff --git a/dist/validation.d.ts b/dist/validation.d.ts
@@ -1,11 +1,5 @@
-export class AuroFormValidation {
-    /**
-     * Generates a camelCase version of the tag name for an element.
-     * @private
-     * @param {object} elem - HTML element with tagname to convert.
-     * @returns {string} Tag name in camelCase syntax.
-     */
-    private getCamelCaseName;
+export default class AuroFormValidation {
+    runtimeUtils: any;
     /**
      * Determines the validity state of the element based on the common attribute restrictions (pattern).
      * @private
@@ -23,9 +17,10 @@ export class AuroFormValidation {
     /**
      * Determines the validity state of the element.
      * @param {object} elem - HTML element to validate.
+     * @param {boolean} force - Boolean that forces validation to run.
      * @returns {void}
      */
-    validate(elem: object): void;
+    validate(elem: object, force: boolean): void;
     /**
      * Gets all the HTML5 `inputs` in the element shadow DOM.
      * @private

diff --git a/dist/validation.d.ts.map b/dist/validation.d.ts.map
diff --git a/dist/validation.js b/dist/validation.js
@@ -3,24 +3,13 @@
 
 // ---------------------------------------------------------------------
 
-/* eslint-disable complexity, max-depth, no-extra-parens, no-magic-numbers, line-comment-position, no-inline-comments */
+/* eslint-disable complexity, max-depth, no-extra-parens, no-magic-numbers, line-comment-position, no-inline-comments, prefer-destructuring */
 
-export class AuroFormValidation {
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-  /**
-   * Generates a camelCase version of the tag name for an element.
-   * @private
-   * @param {object} elem - HTML element with tagname to convert.
-   * @returns {string} Tag name in camelCase syntax.
-   */
-  getCamelCaseName(elem) {
-    const tagName = elem.tagName.toLowerCase();
-    const tagNameDivider = tagName.indexOf('-');
-    const nameSpace = tagName.substring(0, tagNameDivider);
-    const name = tagName.slice(tagNameDivider + 1);
-    const camelCaseName = nameSpace + name.charAt(0).toUpperCase() + name.slice(1);
-
-    return camelCaseName;
+export default class AuroFormValidation {
+  constructor() {
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
   }
 
   /**
@@ -37,10 +26,10 @@ export class AuroFormValidation {
         elem.validity = 'badInput';
         elem.setCustomValidity = elem.setCustomValidityBadInput || '';
       }
-    } else if (elem.value.length > 0 && elem.value.length < elem.minLength) {
+    } else if (elem.value && elem.value.length > 0 && elem.value.length < elem.minLength) {
       elem.validity = 'tooShort';
       elem.setCustomValidity = elem.setCustomValidityTooShort || '';
-    } else if (elem.value.length > elem.maxLength) {
+    } else if (elem.value && elem.value.length > elem.maxLength) {
       elem.validity = 'tooLong';
       elem.setCustomValidity = elem.setCustomValidityTooLong || '';
     }
@@ -82,7 +71,7 @@ export class AuroFormValidation {
                  elem.type === 'month-fullYear' ||
                  elem.type === 'year-month-day'
       ) {
-        if (elem.value.length > 0 && elem.value.length < elem.dateStrLength) {
+        if (elem.value && elem.value.length > 0 && elem.value.length < elem.dateStrLength) {
           elem.validity = 'tooShort';
           elem.setCustomValidity = elem.setCustomValidityForType || '';
         } else {
@@ -115,14 +104,15 @@ export class AuroFormValidation {
   /**
    * Determines the validity state of the element.
    * @param {object} elem - HTML element to validate.
+   * @param {boolean} force - Boolean that forces validation to run.
    * @returns {void}
    */
-  validate(elem) {
+  validate(elem, force) {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
     // Validate only if noValidate is not true and the input does not have focus
-    const validationShouldRun = (!elem.contains(document.activeElement) && elem.value !== undefined) || elem.validateOnInput;
+    const validationShouldRun = force || (!elem.contains(document.activeElement) && elem.value !== undefined) || elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
@@ -150,7 +140,7 @@ export class AuroFormValidation {
       if (!hasValue && elem.required) {
         elem.validity = 'valueMissing';
         elem.setCustomValidity = elem.setCustomValidityValueMissing || '';
-      } else if (elem.tagName.toLowerCase() === 'auro-input') {
+      } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
         this.validateType(elem);
         this.validateAttributes(elem);
       }
@@ -182,11 +172,12 @@ export class AuroFormValidation {
 
       this.getErrorMessage(elem);
 
-      elem.dispatchEvent(new CustomEvent(`${this.getCamelCaseName(elem)}-validated`, {
+      elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
         bubbles: true,
         composed: true,
         detail: {
-          validity: elem.validity
+          validity: elem.validity,
+          message: elem.errorMessage
         }
       }));
     }
@@ -209,7 +200,7 @@ export class AuroFormValidation {
    * @returns {void}
    */
   getAuroInputs(elem) {
-    this.auroInputElements = elem.renderRoot.querySelectorAll('auro-input');
+    this.auroInputElements = elem.shadowRoot.querySelectorAll('auro-input, [auro-input]');
   }
 
   /**
@@ -220,23 +211,21 @@ export class AuroFormValidation {
    */
   getErrorMessage(elem) {
     if (elem.validity !== 'valid') {
-      this.getAuroInputs(elem);
-
       if (elem.setCustomValidity) {
         elem.errorMessage = elem.setCustomValidity;
-      } else if (elem.tagName.toLowerCase() === 'auro-input') {
+      } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
         const input = elem.renderRoot.querySelector('input');
 
         if (input.validationMessage.length > 0) {
           elem.errorMessage = input.validationMessage;
         }
-      } else if (this.auroInputElements && this.auroInputElements.length > 0) {
-        const firstInput = this.auroInputElements[0].renderRoot.querySelector('input');
+      } else if (this.inputElements && this.inputElements.length > 0) {
+        const firstInput = this.inputElements[0];
 
         if (firstInput.validationMessage.length > 0) {
           elem.errorMessage = firstInput.validationMessage;
-        } else if (this.auroInputElements.length === 2) {
-          const secondInput = this.auroInputElements[1].renderRoot.querySelector('input');
+        } else if (this.inputElements.length === 2) {
+          const secondInput = this.inputElements[1];
 
           if (secondInput.validationMessage.length > 0) {
             elem.errorMessage = secondInput.validationMessage;
@@ -246,13 +235,5 @@ export class AuroFormValidation {
     } else {
       elem.errorMessage = undefined;
     }
-
-    elem.dispatchEvent(new CustomEvent(`${this.getCamelCaseName(elem)}-helpText`, {
-      bubbles: true,
-      composed: true,
-      detail: {
-        message: this.errorMessage
-      }
-    }));
   }
 }