@aurodesignsystem/auro-formkit 1.6.0-beta.9 → 2.0.0-beta.10

package/packages/form-validation/src/validation.js

@@ -13,25 +13,111 @@ export default class AuroFormValidation {
   }
 
   /**
-   * Determines the validity state of the element based on the common attribute restrictions (pattern).
+   * Resets the element to its initial state.
    * @private
-   * @param {object} elem - HTML element to validate.
+   * @param {object} elem - HTML element to reset.
    * @returns {void}
    */
-  validateAttributes(elem) {
-    if (elem.pattern) {
-      const pattern = new RegExp(`^${elem.pattern}$`, 'u');
+  reset(elem) {
+    elem.validity = undefined;
+    elem.value = undefined;
+
+    // Resets the second value of the datepicker in range state
+    if (elem.valueEnd) {
+      elem.valueEnd = undefined;
+    }
 
-      if (!pattern.test(elem.value)) {
-        elem.validity = 'badInput';
-        elem.setCustomValidity = elem.setCustomValidityBadInput || '';
+    // Resets selected option of element
+    if (elem.optionSelected) {
+      elem.optionSelected = undefined;
+    }
+
+    // Runs validation to handle error attribute
+    this.validate(elem);
+  }
+
+  /**
+   * Validates the attributes of a given element based on predefined validation rules.
+   *
+   * @param {HTMLElement} elem - The element to be validated.
+   * @returns {void}
+   *
+   * @example
+   * // Assuming `inputElement` is a reference to an input element in the DOM
+   * validateElementAttributes(inputElement);
+   *
+   * The function checks the element's attributes against the validation rules defined for 'input' and 'counter' types.
+   * If a validation rule is violated, it sets the element's validity state and error message accordingly.
+   *
+   * Validation rules:
+   * - input:
+   *   - length:
+   *     - tooShort: Checks if the value length is less than the minimum length.
+   *     - tooLong: Checks if the value length exceeds the maximum length.
+   *   - pattern:
+   *     - patternMismatch: Checks if the value does not match the specified pattern.
+   * - counter:
+   *   - range:
+   *     - rangeOverflow: Checks if the value exceeds the maximum value.
+   *     - rangeUnderflow: Checks if the value is less than the minimum value.
+   */
+  validateElementAttributes(elem) {
+    const validationRules = {
+      input: {
+        length: [
+          {
+            check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
+            validity: 'tooShort',
+            message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
+          },
+          {
+            check: (e) => e.value?.length > e.maxLength,
+            validity: 'tooLong',
+            message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
+          }
+        ],
+        pattern: [
+          {
+            check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
+            validity: 'patternMismatch',
+            message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
+          }
+        ]
+      },
+      counter: {
+        range: [
+          {
+            check: (e) => e.max !== undefined && Number(e.max) < Number(e.value),
+            validity: 'rangeOverflow',
+            message: e => e.getAttribute('setCustomValidityRangeOverflow') || ''
+          },
+          {
+            check: (e) => e.min !== undefined && Number(e.min) > Number(e.value),
+            validity: 'rangeUnderflow',
+            message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
+          }
+        ]
+      }
+    };
+  
+    let elementType;
+    if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
+      elementType = 'input';
+    } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
+      elementType = 'counter';
+    }
+    
+    if (elementType) {
+      const rules = validationRules[elementType];
+    
+      if (rules) {
+        Object.values(rules).flat().forEach(rule => {
+          if (rule.check(elem)) {
+            elem.validity = rule.validity;
+            elem.errorMessage = rule.message(elem);
+          }
+        });
       }
-    } else if (elem.value && elem.value.length > 0 && elem.value.length < elem.minLength) {
-      elem.validity = 'tooShort';
-      elem.setCustomValidity = elem.setCustomValidityTooShort || '';
-    } else if (elem.value && elem.value.length > elem.maxLength) {
-      elem.validity = 'tooLong';
-      elem.setCustomValidity = elem.setCustomValidityTooLong || '';
     }
   }
 
@@ -47,33 +133,32 @@ export default class AuroFormValidation {
         const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; // eslint-disable-line require-unicode-regexp
 
         if (!elem.value.match(emailRegex)) {
-          elem.validity = 'badInput';
-          elem.setCustomValidity = elem.setCustomValidityForType || '';
+          elem.validity = 'patternMismatch';
+          elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
         }
       } else if (elem.type === 'credit-card') {
         if (elem.value.length > 0 && elem.value.length < elem.validationCCLength) {
           elem.validity = 'tooShort';
-          elem.setCustomValidity = elem.setCustomValidityForType || '';
+          elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
         }
-      } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number'
+      } else if (elem.type === 'number') {
         if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
           elem.validity = 'rangeOverflow';
-          elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
+          elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
         }
 
-        if (elem.min !== undefined && Number(elem.min) > Number(elem.value)) {
+        if (elem.min !== undefined && elem.value?.length > 0 && Number(elem.min) > Number(elem.value)) {
           elem.validity = 'rangeUnderflow';
-          elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || '';
+          elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
         }
-
       } else if (elem.type === 'month-day-year' ||
                  elem.type === 'month-year' ||
                  elem.type === 'month-fullYear' ||
                  elem.type === 'year-month-day'
       ) {
-        if (elem.value && elem.value.length > 0 && elem.value.length < elem.dateStrLength) {
+        if (elem.value?.length > 0 && elem.value.length < elem.dateStrLength) {
           elem.validity = 'tooShort';
-          elem.setCustomValidity = elem.setCustomValidityForType || '';
+          elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
         } else {
           const valueDate = new Date(elem.value);
 
@@ -83,7 +168,7 @@ export default class AuroFormValidation {
 
             if (valueDate > maxDate) {
               elem.validity = 'rangeOverflow';
-              elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
+              elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
             }
           }
 
@@ -93,7 +178,7 @@ export default class AuroFormValidation {
 
             if (valueDate < minDate) {
               elem.validity = 'rangeUnderflow';
-              elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || '';
+              elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
             }
           }
         }
@@ -116,10 +201,10 @@ export default class AuroFormValidation {
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
-      elem.setCustomValidity = elem.error;
+      elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
     } else if (validationShouldRun) {
       elem.validity = 'valid';
-      elem.setCustomValidity = '';
+      elem.errorMessage = '';
 
       /**
        * Only validate once we interact with the datepicker
@@ -131,7 +216,7 @@ export default class AuroFormValidation {
       let hasValue = elem.value && elem.value.length > 0;
 
       // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
-      if (this.auroInputElements && this.auroInputElements.length === 2) {
+      if (this.auroInputElements?.length === 2) {
         if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
           hasValue = false;
         }
@@ -139,35 +224,29 @@ export default class AuroFormValidation {
 
       if (!hasValue && elem.required) {
         elem.validity = 'valueMissing';
-        elem.setCustomValidity = elem.setCustomValidityValueMissing || '';
+        elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
         this.validateType(elem);
-        this.validateAttributes(elem);
+        this.validateElementAttributes(elem);
+      } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
+        this.validateElementAttributes(elem);
       }
     }
 
-    if (this.auroInputElements && this.auroInputElements.length > 0) {
+    if (this.auroInputElements?.length > 0) {
       elem.validity = this.auroInputElements[0].validity;
-      elem.setCustomValidity = this.auroInputElements[0].setCustomValidity;
+      elem.errorMessage = this.auroInputElements[0].errorMessage;
 
-      if (elem.validity === 'valid') {
-        if (this.auroInputElements.length > 1) {
-          elem.validity = this.auroInputElements[1].validity;
-          elem.setCustomValidity = this.auroInputElements[1].setCustomValidity;
-        }
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1) {
+        elem.validity = this.auroInputElements[1].validity;
+        elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
     }
 
     if (validationShouldRun || elem.hasAttribute('error')) {
-      if (elem.validity && elem.validity !== 'valid') {
-        elem.isValid = false;
-
-        // Use the validity message override if it is declared
-        if (elem.ValidityMessageOverride) {
-          elem.setCustomValidity = elem.ValidityMessageOverride;
-        }
-      } else {
-        elem.isValid = true;
+      // Use the validity message override if it is declared
+      if (elem.validity && elem.validity !== 'valid' && elem.ValidityMessageOverride) {
+        elem.errorMessage = elem.ValidityMessageOverride;
       }
 
       this.getErrorMessage(elem);
@@ -213,18 +292,18 @@ export default class AuroFormValidation {
     if (elem.validity !== 'valid') {
       if (elem.setCustomValidity) {
         elem.errorMessage = elem.setCustomValidity;
-      } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
+      } else if (this.runtimeUtils.elementMatch(elem, 'auro-input') && elem.errorMessage === '') {
         const input = elem.renderRoot.querySelector('input');
 
         if (input.validationMessage.length > 0) {
           elem.errorMessage = input.validationMessage;
         }
-      } else if (this.inputElements && this.inputElements.length > 0) {
+      } else if (this.inputElements?.length > 0  && elem.errorMessage === '') {
         const firstInput = this.inputElements[0];
 
         if (firstInput.validationMessage.length > 0) {
           elem.errorMessage = firstInput.validationMessage;
-        } else if (this.inputElements.length === 2) {
+        } else if (this.inputElements?.length === 2) {
           const secondInput = this.inputElements[1];
 
           if (secondInput.validationMessage.length > 0) {

package/packages/utils/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@auro-formkit/utils",
+  "description": "Shared utility functions for all components in auro-formkit monorepo",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "main": "./src/index.js",
+  "types": "tsc",
+  "exports": {
+    ".": "./src/index.js"
+  }
+}

package/packages/utils/src/iconUtil.js

@@ -0,0 +1,25 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+import { html } from "lit/static-html.js";
+
+export class IconUtil {
+
+  /**
+   * Generates an HTML element containing an SVG icon based on the provided `svgContent`.
+   *
+   * @param {string} svgContent - The SVG content to be embedded.
+   * @param {Object} _attributes - Additional attributes to set on the icon element.
+   * @returns {Element} The HTML element containing the SVG icon.
+   */
+  static generateSvgHtml(svgContent) {
+    const dom = new DOMParser().parseFromString(svgContent.svg, 'text/html');
+    const svg = dom.body.firstChild;
+    
+    svg.setAttribute('slot', 'svg');
+
+    return html`${svg}`;
+  }
+}

package/packages/utils/src/index.js

@@ -0,0 +1 @@
+export { IconUtil } from './iconUtil.js';

package/turbo.json

@@ -19,25 +19,25 @@
         "*-css.js"
       ]
     },
-    "@auro-formkit/auro-combobox#build": {
+    "@aurodesignsystem/auro-combobox#build": {
       "dependsOn": [
-        "@auro-formkit/auro-input#build",
-        "@auro-formkit/auro-dropdown#build",
+        "@aurodesignsystem/auro-input#build",
+        "@aurodesignsystem/auro-dropdown#build",
         "postCss:component",
         "sass:render"
       ]
     },
-    "@auro-formkit/auro-datepicker#build": {
+    "@aurodesignsystem/auro-datepicker#build": {
       "dependsOn": [
-        "@auro-formkit/auro-input#build",
-        "@auro-formkit/auro-dropdown#build",
+        "@aurodesignsystem/auro-input#build",
+        "@aurodesignsystem/auro-dropdown#build",
         "postCss:component",
         "sass:render"
       ]
     },
-    "@auro-formkit/auro-select#build": {
+    "@aurodesignsystem/auro-select#build": {
       "dependsOn": [
-        "@auro-formkit/auro-dropdown#build",
+        "@aurodesignsystem/auro-dropdown#build",
         "postCss:component",
         "sass:render"
       ]

package/.turbo/cache/0008b92c8752bf75-meta.json

@@ -1 +0,0 @@
-{"hash":"0008b92c8752bf75","duration":18139}

package/.turbo/cache/00cb38bef1105dac-meta.json

@@ -1 +0,0 @@
-{"hash":"00cb38bef1105dac","duration":1831}

package/.turbo/cache/0157ec8abdaf2a9c-meta.json

@@ -1 +0,0 @@
-{"hash":"0157ec8abdaf2a9c","duration":2013}

package/.turbo/cache/0636e9cedc83238b-meta.json

@@ -1 +0,0 @@
-{"hash":"0636e9cedc83238b","duration":2465}

package/.turbo/cache/06f476671015e973-meta.json

@@ -1 +0,0 @@
-{"hash":"06f476671015e973","duration":8189}

package/.turbo/cache/09df74d672102662-meta.json

@@ -1 +0,0 @@
-{"hash":"09df74d672102662","duration":1766}

package/.turbo/cache/0cd109fb3183c2e6-meta.json

@@ -1 +0,0 @@
-{"hash":"0cd109fb3183c2e6","duration":1493}

package/.turbo/cache/17c429ade621ffcb-meta.json

@@ -1 +0,0 @@
-{"hash":"17c429ade621ffcb","duration":1931}

package/.turbo/cache/1c47128a0e12fcfa-meta.json

@@ -1 +0,0 @@
-{"hash":"1c47128a0e12fcfa","duration":2772}

package/.turbo/cache/1db02f756ce85784-meta.json

@@ -1 +0,0 @@
-{"hash":"1db02f756ce85784","duration":3524}

package/.turbo/cache/21705fa179d5f820-meta.json

@@ -1 +0,0 @@
-{"hash":"21705fa179d5f820","duration":3243}

package/.turbo/cache/249d9ba3ee6aa1cb-meta.json

@@ -1 +0,0 @@
-{"hash":"249d9ba3ee6aa1cb","duration":1888}

package/.turbo/cache/2666b96bfcf4e9cd-meta.json

@@ -1 +0,0 @@
-{"hash":"2666b96bfcf4e9cd","duration":2733}

package/.turbo/cache/2778d5e895240cd1-meta.json

@@ -1 +0,0 @@
-{"hash":"2778d5e895240cd1","duration":2515}

package/.turbo/cache/300b59df2de12b46-meta.json

@@ -1 +0,0 @@
-{"hash":"300b59df2de12b46","duration":5431}

package/.turbo/cache/31729e74fccaafb0-meta.json

@@ -1 +0,0 @@
-{"hash":"31729e74fccaafb0","duration":2332}

package/.turbo/cache/32702694d62a08ac-meta.json

@@ -1 +0,0 @@
-{"hash":"32702694d62a08ac","duration":2660}

package/.turbo/cache/3482a3cba9a51c2d-meta.json

@@ -1 +0,0 @@
-{"hash":"3482a3cba9a51c2d","duration":19666}

package/.turbo/cache/3a9d73752f23a40a-meta.json

@@ -1 +0,0 @@
-{"hash":"3a9d73752f23a40a","duration":2503}

package/.turbo/cache/3afe2e6f714a4fcb-meta.json

@@ -1 +0,0 @@
-{"hash":"3afe2e6f714a4fcb","duration":721}

package/.turbo/cache/408ea1754276298c-meta.json

@@ -1 +0,0 @@
-{"hash":"408ea1754276298c","duration":3431}

package/.turbo/cache/42066c793c3816f3-meta.json

@@ -1 +0,0 @@
-{"hash":"42066c793c3816f3","duration":897}

package/.turbo/cache/4bec46ffff6fd2e8-meta.json

@@ -1 +0,0 @@
-{"hash":"4bec46ffff6fd2e8","duration":2274}

package/.turbo/cache/50b275350abe14dd-meta.json

@@ -1 +0,0 @@
-{"hash":"50b275350abe14dd","duration":6026}

package/.turbo/cache/51078a087b52c65e-meta.json

@@ -1 +0,0 @@
-{"hash":"51078a087b52c65e","duration":1948}

package/.turbo/cache/593ddf689673e305-meta.json

@@ -1 +0,0 @@
-{"hash":"593ddf689673e305","duration":9065}

package/.turbo/cache/64e4f18395bd4461-meta.json

@@ -1 +0,0 @@
-{"hash":"64e4f18395bd4461","duration":3767}

package/.turbo/cache/68843ecab6e09320-meta.json

@@ -1 +0,0 @@
-{"hash":"68843ecab6e09320","duration":20169}

package/.turbo/cache/7419ef01dc18b433-meta.json

@@ -1 +0,0 @@
-{"hash":"7419ef01dc18b433","duration":2882}

package/.turbo/cache/748faca09d14fea7-meta.json

@@ -1 +0,0 @@
-{"hash":"748faca09d14fea7","duration":4333}

package/.turbo/cache/75495b0bbd6c06a7-meta.json

@@ -1 +0,0 @@
-{"hash":"75495b0bbd6c06a7","duration":1015}

package/.turbo/cache/7a6a8af4392c4b05-meta.json

@@ -1 +0,0 @@
-{"hash":"7a6a8af4392c4b05","duration":18735}

package/.turbo/cache/7e81141e0140dd3a-meta.json

@@ -1 +0,0 @@
-{"hash":"7e81141e0140dd3a","duration":2361}

package/.turbo/cache/7eb50d96639e6dd4-meta.json

@@ -1 +0,0 @@
-{"hash":"7eb50d96639e6dd4","duration":5483}

package/.turbo/cache/83bb78fec13808d0-meta.json

@@ -1 +0,0 @@
-{"hash":"83bb78fec13808d0","duration":2508}

package/.turbo/cache/8605f60efb7d3957-meta.json

@@ -1 +0,0 @@
-{"hash":"8605f60efb7d3957","duration":2494}

package/.turbo/cache/892a90b62716ded5-meta.json

@@ -1 +0,0 @@
-{"hash":"892a90b62716ded5","duration":2561}

package/.turbo/cache/8cac06ca809bd2b1-meta.json

@@ -1 +0,0 @@
-{"hash":"8cac06ca809bd2b1","duration":4276}

package/.turbo/cache/9a908bf8f82c84a6-meta.json

@@ -1 +0,0 @@
-{"hash":"9a908bf8f82c84a6","duration":2546}

package/.turbo/cache/9ed3089ffd7d0c00-meta.json

@@ -1 +0,0 @@
-{"hash":"9ed3089ffd7d0c00","duration":1765}

package/.turbo/cache/a3a879aea25debf8-meta.json

@@ -1 +0,0 @@
-{"hash":"a3a879aea25debf8","duration":1703}

package/.turbo/cache/a8dbafaf6177f677-meta.json

@@ -1 +0,0 @@
-{"hash":"a8dbafaf6177f677","duration":9626}

package/.turbo/cache/a8f6418b830ef0ba-meta.json

@@ -1 +0,0 @@
-{"hash":"a8f6418b830ef0ba","duration":1419}

package/.turbo/cache/b37b0eb5597e160f-meta.json

@@ -1 +0,0 @@
-{"hash":"b37b0eb5597e160f","duration":2239}

package/.turbo/cache/b7e7a8c425673f7c-meta.json

@@ -1 +0,0 @@
-{"hash":"b7e7a8c425673f7c","duration":6057}