@aurodesignsystem/auro-formkit 2.0.0-beta.8 → 2.0.0-beta.9

package/components/select/demo/api.min.js

@@ -252,30 +252,87 @@ class AuroFormValidation {
   }
 
   /**
-   * Determines the validity state of the element based on the common attribute restrictions (pattern).
-   * @private
-   * @param {object} elem - HTML element to validate.
+   * 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.
    */
-  validateAttributes(elem) {
-    if (elem.pattern) {
-      const pattern = new RegExp(`^${elem.pattern}$`, 'u');
-
-      if (!pattern.test(elem.value)) {
-        elem.validity = 'patternMismatch';
-        elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || '';
+  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';
     }
-
-    // Length > 0 is required to prevent the error message from showing when the input is empty
-    if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
-      elem.validity = 'tooShort';
-      elem.errorMessage = elem.setCustomValidityTooShort || elem.setCustomValidity || '';
-    }
     
-    if (elem.value?.length > elem.maxLength) {
-      elem.validity = 'tooLong';
-      elem.errorMessage = elem.setCustomValidityTooLong || elem.setCustomValidity || '';
+    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);
+          }
+        });
+      }
     }
   }
 
@@ -385,7 +442,9 @@ class AuroFormValidation {
         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);
       }
     }
 

package/components/select/demo/index.min.js

@@ -148,30 +148,87 @@ class AuroFormValidation {
   }
 
   /**
-   * Determines the validity state of the element based on the common attribute restrictions (pattern).
-   * @private
-   * @param {object} elem - HTML element to validate.
+   * 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.
    */
-  validateAttributes(elem) {
-    if (elem.pattern) {
-      const pattern = new RegExp(`^${elem.pattern}$`, 'u');
-
-      if (!pattern.test(elem.value)) {
-        elem.validity = 'patternMismatch';
-        elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || '';
+  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';
     }
-
-    // Length > 0 is required to prevent the error message from showing when the input is empty
-    if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
-      elem.validity = 'tooShort';
-      elem.errorMessage = elem.setCustomValidityTooShort || elem.setCustomValidity || '';
-    }
     
-    if (elem.value?.length > elem.maxLength) {
-      elem.validity = 'tooLong';
-      elem.errorMessage = elem.setCustomValidityTooLong || elem.setCustomValidity || '';
+    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);
+          }
+        });
+      }
     }
   }
 
@@ -281,7 +338,9 @@ class AuroFormValidation {
         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);
       }
     }
 

package/components/select/dist/index.js

@@ -148,30 +148,87 @@ class AuroFormValidation {
   }
 
   /**
-   * Determines the validity state of the element based on the common attribute restrictions (pattern).
-   * @private
-   * @param {object} elem - HTML element to validate.
+   * 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.
    */
-  validateAttributes(elem) {
-    if (elem.pattern) {
-      const pattern = new RegExp(`^${elem.pattern}$`, 'u');
-
-      if (!pattern.test(elem.value)) {
-        elem.validity = 'patternMismatch';
-        elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || '';
+  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';
     }
-
-    // Length > 0 is required to prevent the error message from showing when the input is empty
-    if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
-      elem.validity = 'tooShort';
-      elem.errorMessage = elem.setCustomValidityTooShort || elem.setCustomValidity || '';
-    }
     
-    if (elem.value?.length > elem.maxLength) {
-      elem.validity = 'tooLong';
-      elem.errorMessage = elem.setCustomValidityTooLong || elem.setCustomValidity || '';
+    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);
+          }
+        });
+      }
     }
   }
 
@@ -281,7 +338,9 @@ class AuroFormValidation {
         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);
       }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-formkit",
-  "version": "2.0.0-beta.8",
+  "version": "2.0.0-beta.9",
   "description": "A collection of web components used to build forms.",
   "type": "module",
   "license": "Apache-2.0",

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

@@ -37,30 +37,87 @@ export default class AuroFormValidation {
   }
 
   /**
-   * Determines the validity state of the element based on the common attribute restrictions (pattern).
-   * @private
-   * @param {object} elem - HTML element to validate.
+   * 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.
    */
-  validateAttributes(elem) {
-    if (elem.pattern) {
-      const pattern = new RegExp(`^${elem.pattern}$`, 'u');
-
-      if (!pattern.test(elem.value)) {
-        elem.validity = 'patternMismatch';
-        elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || '';
+  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';
     }
-
-    // Length > 0 is required to prevent the error message from showing when the input is empty
-    if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
-      elem.validity = 'tooShort';
-      elem.errorMessage = elem.setCustomValidityTooShort || elem.setCustomValidity || '';
-    }
     
-    if (elem.value?.length > elem.maxLength) {
-      elem.validity = 'tooLong';
-      elem.errorMessage = elem.setCustomValidityTooLong || elem.setCustomValidity || '';
+    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);
+          }
+        });
+      }
     }
   }
 
@@ -170,7 +227,9 @@ export default class AuroFormValidation {
         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);
       }
     }
 

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/cache/06845874cc82b186-meta.json

@@ -1 +0,0 @@
-{"hash":"06845874cc82b186","duration":27232}

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

@@ -1 +0,0 @@
-{"hash":"0a96f136af026d57","duration":12390}

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

@@ -1 +0,0 @@
-{"hash":"0c9ee13a7c863709","duration":5848}

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

@@ -1 +0,0 @@
-{"hash":"0ca9c5ccf3e90704","duration":5052}

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

@@ -1 +0,0 @@
-{"hash":"1a8d6e4cab38121a","duration":1330}

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

@@ -1 +0,0 @@
-{"hash":"1ce32edb29492636","duration":36986}

package/.turbo/cache/2ec1b6d23563659e-meta.json

@@ -1 +0,0 @@
-{"hash":"2ec1b6d23563659e","duration":4686}

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

@@ -1 +0,0 @@
-{"hash":"3afc5b2ea7c1bf51","duration":27580}

package/.turbo/cache/40de011abc31c0cf-meta.json

@@ -1 +0,0 @@
-{"hash":"40de011abc31c0cf","duration":3126}

package/.turbo/cache/426c825f57054f5f-meta.json

@@ -1 +0,0 @@
-{"hash":"426c825f57054f5f","duration":1565}

package/.turbo/cache/4524aae614598308-meta.json

@@ -1 +0,0 @@
-{"hash":"4524aae614598308","duration":6252}

package/.turbo/cache/45ea3e30ae949d53-meta.json

@@ -1 +0,0 @@
-{"hash":"45ea3e30ae949d53","duration":29872}

package/.turbo/cache/577d86e4072c01f5-meta.json

@@ -1 +0,0 @@
-{"hash":"577d86e4072c01f5","duration":27551}

package/.turbo/cache/5d770c787aa78d4d-meta.json

@@ -1 +0,0 @@
-{"hash":"5d770c787aa78d4d","duration":3115}

package/.turbo/cache/624bf5350aacae42-meta.json

@@ -1 +0,0 @@
-{"hash":"624bf5350aacae42","duration":868}

package/.turbo/cache/68060c79df03f45a-meta.json

@@ -1 +0,0 @@
-{"hash":"68060c79df03f45a","duration":27884}

package/.turbo/cache/68e3afb31feab4e9-meta.json

@@ -1 +0,0 @@
-{"hash":"68e3afb31feab4e9","duration":5985}

package/.turbo/cache/6a1c28febca6163f-meta.json

@@ -1 +0,0 @@
-{"hash":"6a1c28febca6163f","duration":5118}

package/.turbo/cache/6bc4e2d881af6ffb-meta.json

@@ -1 +0,0 @@
-{"hash":"6bc4e2d881af6ffb","duration":1479}

package/.turbo/cache/6c8ea74dc3b07640-meta.json

@@ -1 +0,0 @@
-{"hash":"6c8ea74dc3b07640","duration":919}

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

@@ -1 +0,0 @@
-{"hash":"7a6ef918375d4010","duration":4163}

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

@@ -1 +0,0 @@
-{"hash":"7da23884069695e6","duration":16054}

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

@@ -1 +0,0 @@
-{"hash":"83e1029b14af6545","duration":5140}

package/.turbo/cache/8410cd8eeadc3af7-meta.json

@@ -1 +0,0 @@
-{"hash":"8410cd8eeadc3af7","duration":8573}

package/.turbo/cache/98936c69a55361fc-meta.json

@@ -1 +0,0 @@
-{"hash":"98936c69a55361fc","duration":5271}

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

@@ -1 +0,0 @@
-{"hash":"a3db8f78e018a955","duration":4426}