@italia/globals 0.0.1-alpha.0 → 0.1.0-alpha.1

package/custom-elements.json

@@ -285,6 +285,12 @@
                     "text": "string"
                   },
                   "description": "The form validation status."
+                },
+                {
+                  "name": "translations",
+                  "type": {
+                    "text": "Record<string, string>"
+                  }
                 }
               ],
               "return": {
@@ -294,17 +300,6 @@
               },
               "privacy": "protected"
             },
-            {
-              "kind": "method",
-              "name": "_testValidity",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "description": "Checks if the value meets the constraints.",
-              "privacy": "protected"
-            },
             {
               "kind": "field",
               "name": "invalid",
@@ -323,37 +318,93 @@
             },
             {
               "kind": "field",
-              "name": "requiredValidityMessage",
+              "name": "validityMessage",
               "type": {
                 "text": "string"
               },
-              "description": "The special validity message for `required`."
+              "description": "The validity message."
             },
             {
               "kind": "field",
-              "name": "validityMessage",
+              "name": "_value",
               "type": {
                 "text": "string"
               },
-              "description": "The validity message."
+              "description": "The value."
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "pattern",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "description": "The value."
+              "description": "The pattern to match to be valid."
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "`true` if the element is disabled."
+            },
+            {
+              "kind": "field",
+              "name": "minlength",
+              "type": {
+                "text": "number"
+              },
+              "description": "The minimum length of the value."
+            },
+            {
+              "kind": "field",
+              "name": "maxlength",
+              "type": {
+                "text": "number"
+              },
+              "description": "The maximum length of the value."
+            },
+            {
+              "kind": "field",
+              "name": "customValidation",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "External validation."
+            },
+            {
+              "kind": "field",
+              "name": "_touched",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Field is touched"
             },
             {
               "kind": "method",
-              "name": "checkValidity",
-              "description": "Checks if the value meets the constraints.\nFires cancelable `invalid` event if it doesn't.",
+              "name": "_checkValidity",
               "return": {
                 "type": {
                   "text": ""
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "translations",
+                  "type": {
+                    "text": "Record<string, string>"
+                  }
+                },
+                {
+                  "name": "htmlValidity",
+                  "default": "true",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Checks if the value meets the constraints."
             },
             {
               "kind": "method",
@@ -368,11 +419,53 @@
                 }
               ],
               "description": "Sets the given custom validity message."
+            },
+            {
+              "kind": "method",
+              "name": "_handleBlur"
+            },
+            {
+              "kind": "method",
+              "name": "_handleFocus"
+            },
+            {
+              "kind": "method",
+              "name": "_handleClick"
+            },
+            {
+              "kind": "method",
+              "name": "_handleChange",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             }
           ],
           "events": [
             {
-              "name": "invalid",
+              "name": "blur",
+              "type": {
+                "text": "FocusEvent"
+              }
+            },
+            {
+              "name": "focus",
+              "type": {
+                "text": "FocusEvent"
+              }
+            },
+            {
+              "name": "click",
+              "type": {
+                "text": "MouseEvent"
+              }
+            },
+            {
+              "name": "change",
               "type": {
                 "text": "CustomEvent"
               }

package/dist/src/mixins/validity.d.ts

@@ -15,10 +15,26 @@ export declare enum VALIDATION_STATUS {
      * One indicating no validation error.
      */
     NO_ERROR = "",
+    /**
+     * One indicating that the value is invalid (generic).
+     */
+    INVALID = "invalid",
     /**
      * One indicating missing required value.
      */
-    ERROR_REQUIRED = "required"
+    ERROR_REQUIRED = "required",
+    /**
+     * One indicating that the value does not match the pattern.
+     */
+    PATTERN = "pattern",
+    /**
+     * One indicating that the value is shorter than the minimum length.
+     */
+    MINLENGTH = "minlength",
+    /**
+     * One indicating that the value is less than the maximum length.
+     */
+    MAXLENGTH = "maxlength"
 }
 /**
  * @param Base The base class.
@@ -30,14 +46,7 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
      * @returns The form validation error mesasages associated with the given status.
      * @protected
      */
-    _getValidityMessage(state: string): string | undefined;
-    /**
-     * Checks if the value meets the constraints.
-     *
-     * @returns `VALIDATION_STATUS.NO_ERROR` if the value meets the constraints. Some other values otherwise.
-     * @protected
-     */
-    _testValidity(): string;
+    _getValidityMessage(state: string, translations: Record<string, string>): string | undefined;
     /**
      * `true` to show the UI of the invalid state.
      */
@@ -46,10 +55,6 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
      * `true` if the value is required.
      */
     required: boolean;
-    /**
-     * The special validity message for `required`.
-     */
-    requiredValidityMessage: string;
     /**
      * The validity message.
      */
@@ -57,20 +62,47 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     /**
      * The value.
      */
-    value: string;
+    _value: string;
+    /**
+     * The pattern to match to be valid.
+     */
+    pattern?: string;
+    /**
+     * `true` if the element is disabled.
+     */
+    disabled: boolean;
+    /**
+     * The minimum length of the value.
+     */
+    minlength: number;
+    /**
+     * The maximum length of the value.
+     */
+    maxlength: number;
+    /**
+     * External validation.
+     */
+    customValidation: boolean;
+    /**
+     * Field is touched
+     */
+    _touched: boolean;
     /**
      * Checks if the value meets the constraints.
-     * Fires cancelable `invalid` event if it doesn't.
      *
      * @returns `true` if the value meets the constraints. `false` otherwise.
      */
-    checkValidity(): boolean;
+    _checkValidity(translations: Record<string, string>, htmlValidity?: boolean): boolean | undefined;
     /**
      * Sets the given custom validity message.
      *
      * @param validityMessage The custom validity message
      */
     setCustomValidity(validityMessage: string): void;
+    _handleBlur(): void;
+    _handleFocus(): void;
+    _handleClick(): void;
+    _handleChange(e: Event): void;
     accessKey: string;
     readonly accessKeyLabel: string;
     autocapitalize: string;

package/dist/src/mixins/validity.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"validity.d.ts","sourceRoot":"","sources":["../../../src/mixins/validity.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C;;;;;;;GAOG;AAEH;;GAEG;AACH,oBAAY,iBAAiB;IAC3B;;OAEG;IACH,QAAQ,KAAK;IAEb;;OAEG;IACH,cAAc,aAAa;CAC5B;AAED;;;GAGG;AACH,QAAA,MAAM,aAAa,GAAI,CAAC,SAAS,WAAW,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAI9D;;;;OAIG;+BACwB,MAAM;IASjC;;;;;OAKG;qBACc,MAAM;IAKvB;;OAEG;aACe,OAAO;IAEzB;;OAEG;cACgB,OAAO;IAE1B;;OAEG;6BAC+B,MAAM;IAExC;;OAEG;qBACuB,MAAM;IAEhC;;OAEG;WACa,MAAM;IAEtB;;;;;OAKG;;IAuBH;;;;OAIG;uCACgC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAM5C,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"validity.d.ts","sourceRoot":"","sources":["../../../src/mixins/validity.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C;;;;;;;GAOG;AAEH;;GAEG;AACH,oBAAY,iBAAiB;IAC3B;;OAEG;IACH,QAAQ,KAAK;IAEb;;OAEG;IACH,OAAO,YAAY;IAEnB;;OAEG;IACH,cAAc,aAAa;IAC3B;;OAEG;IACH,OAAO,YAAY;IAEnB;;OAEG;IACH,SAAS,cAAc;IACvB;;OAEG;IACH,SAAS,cAAc;CACxB;AAED;;;GAGG;AACH,QAAA,MAAM,aAAa,GAAI,CAAC,SAAS,WAAW,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAI9D;;;;OAIG;+BACwB,MAAM,gBAAgB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAiBvE;;OAEG;aACe,OAAO;IAEzB;;OAEG;cACgB,OAAO;IAE1B;;OAEG;qBACuB,MAAM;IAEhC;;OAEG;YACc,MAAM;IAEvB;;OAEG;cACgB,MAAM;IAEzB;;OAEG;cACgB,OAAO;IAE1B;;OAEG;eACiB,MAAM;IAE1B;;OAEG;eACiB,MAAM;IAE1B;;OAEG;sBACwB,OAAO;IAElC;;OAEG;cACO,OAAO;IAEjB;;;;OAIG;iCAC0B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,iBAAgB,OAAO,GAAU,OAAO,GAAG,SAAS;IAyCvG;;;;OAIG;uCACgC,MAAM;;;;qBAkBxB,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAqCzB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/src/mixins/validity.js

@@ -15,10 +15,26 @@ export var VALIDATION_STATUS;
      * One indicating no validation error.
      */
     VALIDATION_STATUS["NO_ERROR"] = "";
+    /**
+     * One indicating that the value is invalid (generic).
+     */
+    VALIDATION_STATUS["INVALID"] = "invalid";
     /**
      * One indicating missing required value.
      */
     VALIDATION_STATUS["ERROR_REQUIRED"] = "required";
+    /**
+     * One indicating that the value does not match the pattern.
+     */
+    VALIDATION_STATUS["PATTERN"] = "pattern";
+    /**
+     * One indicating that the value is shorter than the minimum length.
+     */
+    VALIDATION_STATUS["MINLENGTH"] = "minlength";
+    /**
+     * One indicating that the value is less than the maximum length.
+     */
+    VALIDATION_STATUS["MAXLENGTH"] = "maxlength";
 })(VALIDATION_STATUS || (VALIDATION_STATUS = {}));
 /**
  * @param Base The base class.
@@ -26,6 +42,13 @@ export var VALIDATION_STATUS;
  */
 const ValidityMixin = (Base) => {
     class ValidityMixinImpl extends Base {
+        constructor() {
+            super(...arguments);
+            /**
+             * Field is touched
+             */
+            this._touched = false;
+        }
         // Not using TypeScript `protected` due to: microsoft/TypeScript#17744
         // Using `string` instead of `VALIDATION_STATUS` until we can require TypeScript 3.8
         /**
@@ -33,46 +56,58 @@ const ValidityMixin = (Base) => {
          * @returns The form validation error mesasages associated with the given status.
          * @protected
          */
-        _getValidityMessage(state) {
+        _getValidityMessage(state, translations) {
             return {
                 [VALIDATION_STATUS.NO_ERROR]: '',
-                [VALIDATION_STATUS.ERROR_REQUIRED]: this.requiredValidityMessage,
+                [VALIDATION_STATUS.INVALID]: translations[VALIDATION_STATUS.INVALID],
+                [VALIDATION_STATUS.ERROR_REQUIRED]: translations[VALIDATION_STATUS.ERROR_REQUIRED],
+                [VALIDATION_STATUS.PATTERN]: translations[VALIDATION_STATUS.PATTERN],
+                [VALIDATION_STATUS.MINLENGTH]: translations[VALIDATION_STATUS.MINLENGTH].replace('{minlength}', this.minlength.toString()),
+                [VALIDATION_STATUS.MAXLENGTH]: translations[VALIDATION_STATUS.MAXLENGTH].replace('{maxlength}', this.maxlength.toString()),
             }[state];
         }
-        // Not using TypeScript `protected` due to: microsoft/TypeScript#17744
-        // Using `string` instead of `VALIDATION_STATUS` until we can require TypeScript 3.8
         /**
          * Checks if the value meets the constraints.
          *
-         * @returns `VALIDATION_STATUS.NO_ERROR` if the value meets the constraints. Some other values otherwise.
-         * @protected
-         */
-        _testValidity() {
-            const { required, value } = this;
-            return required && !value ? VALIDATION_STATUS.ERROR_REQUIRED : VALIDATION_STATUS.NO_ERROR;
-        }
-        /**
-         * Checks if the value meets the constraints.
-         * Fires cancelable `invalid` event if it doesn't.
-         *
          * @returns `true` if the value meets the constraints. `false` otherwise.
          */
-        checkValidity() {
-            const status = this._testValidity();
-            if (status !== VALIDATION_STATUS.NO_ERROR) {
-                if (this.dispatchEvent(new CustomEvent('invalid', {
-                    bubbles: false,
-                    cancelable: true,
-                    composed: false,
-                }))) {
-                    this.invalid = true;
-                    this.validityMessage = this._getValidityMessage(status);
+        _checkValidity(translations, htmlValidity = true) {
+            // htmlValidity = this.inputElement.checkValidity(); //check browser validity
+            if (this.customValidation) {
+                return undefined;
+            }
+            let validity = htmlValidity;
+            let message = validity
+                ? this._getValidityMessage(VALIDATION_STATUS.NO_ERROR, translations)
+                : this._getValidityMessage(VALIDATION_STATUS.INVALID, translations);
+            if (this.required || (this._value && (this.pattern || this.minlength > 0 || this.maxlength > 0))) {
+                if (this.pattern) {
+                    const regex = new RegExp(`^${this.pattern}$`, 'u');
+                    validity = regex.test(this._value.toString());
+                    if (!validity) {
+                        message = this._getValidityMessage(VALIDATION_STATUS.PATTERN, translations);
+                    }
+                }
+                if (typeof this.minlength !== 'undefined' && this.minlength > 0) {
+                    validity = validity && this._value.toString().length >= this.minlength;
+                    if (!validity) {
+                        message = this._getValidityMessage(VALIDATION_STATUS.MINLENGTH, translations);
+                    }
+                }
+                if (typeof this.maxlength !== 'undefined' && this.maxlength > 0) {
+                    validity = validity && this._value.toString().length <= this.maxlength;
+                    if (!validity) {
+                        message = this._getValidityMessage(VALIDATION_STATUS.MAXLENGTH, translations);
+                    }
+                }
+                if (this.required && !this._value) {
+                    validity = false;
+                    message = this._getValidityMessage(VALIDATION_STATUS.ERROR_REQUIRED, translations);
                 }
-                return false;
             }
-            this.invalid = false;
-            this.validityMessage = '';
-            return true;
+            this.invalid = !validity;
+            this.validityMessage = message;
+            return validity;
         }
         /**
          * Sets the given custom validity message.
@@ -83,6 +118,50 @@ const ValidityMixin = (Base) => {
             this.invalid = Boolean(validityMessage);
             this.validityMessage = validityMessage;
         }
+        _handleBlur() {
+            this._touched = true;
+            this.dispatchEvent(new FocusEvent('blur', { bubbles: true, composed: true }));
+        }
+        _handleFocus() {
+            this.dispatchEvent(new FocusEvent('focus', { bubbles: true, composed: true }));
+        }
+        _handleClick() {
+            this.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));
+        }
+        _handleChange(e) {
+            const target = e.target;
+            let value;
+            if (target instanceof HTMLInputElement) {
+                switch (target.type) {
+                    case 'checkbox':
+                    case 'radio':
+                        value = target.checked;
+                        break;
+                    case 'file':
+                        value = target.files; // FileList
+                        break;
+                    default:
+                        value = target.value;
+                }
+            }
+            else if (target instanceof HTMLSelectElement) {
+                if (target.multiple) {
+                    value = Array.from(target.selectedOptions).map((o) => o.value);
+                }
+                else {
+                    value = target.value;
+                }
+            }
+            else {
+                // textarea o altri input con value
+                value = target.value;
+            }
+            this.dispatchEvent(new CustomEvent('change', {
+                detail: { value, el: target },
+                bubbles: true,
+                composed: true,
+            }));
+        }
     }
     return ValidityMixinImpl;
 };

package/dist/src/mixins/validity.js.map

@@ -1 +1 @@
-{"version":3,"file":"validity.js","sourceRoot":"","sources":["../../../src/mixins/validity.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,CAAN,IAAY,iBAUX;AAVD,WAAY,iBAAiB;IAC3B;;OAEG;IACH,kCAAa,CAAA;IAEb;;OAEG;IACH,gDAA2B,CAAA;AAC7B,CAAC,EAVW,iBAAiB,KAAjB,iBAAiB,QAU5B;AAED;;;GAGG;AACH,MAAM,aAAa,GAAG,CAAqC,IAAO,EAAE,EAAE;IACpE,MAAe,iBAAkB,SAAQ,IAAI;QAC3C,sEAAsE;QACtE,oFAAoF;QACpF;;;;WAIG;QACH,mBAAmB,CAAC,KAAa;YAC/B,OAAO;gBACL,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,EAAE;gBAChC,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,uBAAuB;aACjE,CAAC,KAAK,CAAC,CAAC;QACX,CAAC;QAED,sEAAsE;QACtE,oFAAoF;QACpF;;;;;WAKG;QACH,aAAa;YACX,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;YACjC,OAAO,QAAQ,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,CAAC,QAAQ,CAAC;QAC5F,CAAC;QA2BD;;;;;WAKG;QACH,aAAa;YACX,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YACpC,IAAI,MAAM,KAAK,iBAAiB,CAAC,QAAQ,EAAE,CAAC;gBAC1C,IACE,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,SAAS,EAAE;oBACzB,OAAO,EAAE,KAAK;oBACd,UAAU,EAAE,IAAI;oBAChB,QAAQ,EAAE,KAAK;iBAChB,CAAC,CACH,EACD,CAAC;oBACD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;oBACpB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAW,CAAC;gBACpE,CAAC;gBACD,OAAO,KAAK,CAAC;YACf,CAAC;YACD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;YAC1B,OAAO,IAAI,CAAC;QACd,CAAC;QAED;;;;WAIG;QACH,iBAAiB,CAAC,eAAuB;YACvC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC;YACxC,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;QACzC,CAAC;KACF;IACD,OAAO,iBAAiB,CAAC;AAC3B,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { Constructor } from '../index.js';\n/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * Form validation status.\n */\nexport enum VALIDATION_STATUS {\n  /**\n   * One indicating no validation error.\n   */\n  NO_ERROR = '',\n\n  /**\n   * One indicating missing required value.\n   */\n  ERROR_REQUIRED = 'required',\n}\n\n/**\n * @param Base The base class.\n * @returns A mix-in implementing `.setCustomValidity()` method.\n */\nconst ValidityMixin = <T extends Constructor<HTMLElement>>(Base: T) => {\n  abstract class ValidityMixinImpl extends Base {\n    // Not using TypeScript `protected` due to: microsoft/TypeScript#17744\n    // Using `string` instead of `VALIDATION_STATUS` until we can require TypeScript 3.8\n    /**\n     * @param state The form validation status.\n     * @returns The form validation error mesasages associated with the given status.\n     * @protected\n     */\n    _getValidityMessage(state: string) {\n      return {\n        [VALIDATION_STATUS.NO_ERROR]: '',\n        [VALIDATION_STATUS.ERROR_REQUIRED]: this.requiredValidityMessage,\n      }[state];\n    }\n\n    // Not using TypeScript `protected` due to: microsoft/TypeScript#17744\n    // Using `string` instead of `VALIDATION_STATUS` until we can require TypeScript 3.8\n    /**\n     * Checks if the value meets the constraints.\n     *\n     * @returns `VALIDATION_STATUS.NO_ERROR` if the value meets the constraints. Some other values otherwise.\n     * @protected\n     */\n    _testValidity(): string {\n      const { required, value } = this;\n      return required && !value ? VALIDATION_STATUS.ERROR_REQUIRED : VALIDATION_STATUS.NO_ERROR;\n    }\n\n    /**\n     * `true` to show the UI of the invalid state.\n     */\n    abstract invalid: boolean;\n\n    /**\n     * `true` if the value is required.\n     */\n    abstract required: boolean;\n\n    /**\n     * The special validity message for `required`.\n     */\n    abstract requiredValidityMessage: string;\n\n    /**\n     * The validity message.\n     */\n    abstract validityMessage: string;\n\n    /**\n     * The value.\n     */\n    abstract value: string;\n\n    /**\n     * Checks if the value meets the constraints.\n     * Fires cancelable `invalid` event if it doesn't.\n     *\n     * @returns `true` if the value meets the constraints. `false` otherwise.\n     */\n    checkValidity() {\n      const status = this._testValidity();\n      if (status !== VALIDATION_STATUS.NO_ERROR) {\n        if (\n          this.dispatchEvent(\n            new CustomEvent('invalid', {\n              bubbles: false,\n              cancelable: true,\n              composed: false,\n            }),\n          )\n        ) {\n          this.invalid = true;\n          this.validityMessage = this._getValidityMessage(status) as string;\n        }\n        return false;\n      }\n      this.invalid = false;\n      this.validityMessage = '';\n      return true;\n    }\n\n    /**\n     * Sets the given custom validity message.\n     *\n     * @param validityMessage The custom validity message\n     */\n    setCustomValidity(validityMessage: string) {\n      this.invalid = Boolean(validityMessage);\n      this.validityMessage = validityMessage;\n    }\n  }\n  return ValidityMixinImpl;\n};\n\nexport default ValidityMixin;\n"]}
+{"version":3,"file":"validity.js","sourceRoot":"","sources":["../../../src/mixins/validity.ts"],"names":[],"mappings":"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","sourcesContent":["import { Constructor } from '../index.js';\n/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * Form validation status.\n */\nexport enum VALIDATION_STATUS {\n  /**\n   * One indicating no validation error.\n   */\n  NO_ERROR = '',\n\n  /**\n   * One indicating that the value is invalid (generic).\n   */\n  INVALID = 'invalid',\n\n  /**\n   * One indicating missing required value.\n   */\n  ERROR_REQUIRED = 'required',\n  /**\n   * One indicating that the value does not match the pattern.\n   */\n  PATTERN = 'pattern',\n\n  /**\n   * One indicating that the value is shorter than the minimum length.\n   */\n  MINLENGTH = 'minlength',\n  /**\n   * One indicating that the value is less than the maximum length.\n   */\n  MAXLENGTH = 'maxlength',\n}\n\n/**\n * @param Base The base class.\n * @returns A mix-in implementing `.setCustomValidity()` method.\n */\nconst ValidityMixin = <T extends Constructor<HTMLElement>>(Base: T) => {\n  abstract class ValidityMixinImpl extends Base {\n    // Not using TypeScript `protected` due to: microsoft/TypeScript#17744\n    // Using `string` instead of `VALIDATION_STATUS` until we can require TypeScript 3.8\n    /**\n     * @param state The form validation status.\n     * @returns The form validation error mesasages associated with the given status.\n     * @protected\n     */\n    _getValidityMessage(state: string, translations: Record<string, string>) {\n      return {\n        [VALIDATION_STATUS.NO_ERROR]: '',\n        [VALIDATION_STATUS.INVALID]: translations[VALIDATION_STATUS.INVALID],\n        [VALIDATION_STATUS.ERROR_REQUIRED]: translations[VALIDATION_STATUS.ERROR_REQUIRED],\n        [VALIDATION_STATUS.PATTERN]: translations[VALIDATION_STATUS.PATTERN],\n        [VALIDATION_STATUS.MINLENGTH]: translations[VALIDATION_STATUS.MINLENGTH].replace(\n          '{minlength}',\n          this.minlength.toString(),\n        ),\n        [VALIDATION_STATUS.MAXLENGTH]: translations[VALIDATION_STATUS.MAXLENGTH].replace(\n          '{maxlength}',\n          this.maxlength.toString(),\n        ),\n      }[state];\n    }\n\n    /**\n     * `true` to show the UI of the invalid state.\n     */\n    abstract invalid: boolean;\n\n    /**\n     * `true` if the value is required.\n     */\n    abstract required: boolean;\n\n    /**\n     * The validity message.\n     */\n    abstract validityMessage: string;\n\n    /**\n     * The value.\n     */\n    abstract _value: string;\n\n    /**\n     * The pattern to match to be valid.\n     */\n    abstract pattern?: string;\n\n    /**\n     * `true` if the element is disabled.\n     */\n    abstract disabled: boolean;\n\n    /**\n     * The minimum length of the value.\n     */\n    abstract minlength: number;\n\n    /**\n     * The maximum length of the value.\n     */\n    abstract maxlength: number;\n\n    /**\n     * External validation.\n     */\n    abstract customValidation: boolean;\n\n    /**\n     * Field is touched\n     */\n    _touched: boolean = false;\n\n    /**\n     * Checks if the value meets the constraints.\n     *\n     * @returns `true` if the value meets the constraints. `false` otherwise.\n     */\n    _checkValidity(translations: Record<string, string>, htmlValidity: boolean = true): boolean | undefined {\n      // htmlValidity = this.inputElement.checkValidity(); //check browser validity\n      if (this.customValidation) {\n        return undefined;\n      }\n      let validity = htmlValidity;\n      let message: string = validity\n        ? (this._getValidityMessage(VALIDATION_STATUS.NO_ERROR, translations) as string)\n        : (this._getValidityMessage(VALIDATION_STATUS.INVALID, translations) as string);\n\n      if (this.required || (this._value && (this.pattern || this.minlength > 0 || this.maxlength > 0))) {\n        if (this.pattern) {\n          const regex = new RegExp(`^${this.pattern}$`, 'u');\n          validity = regex.test(this._value.toString());\n          if (!validity) {\n            message = this._getValidityMessage(VALIDATION_STATUS.PATTERN, translations) as string;\n          }\n        }\n        if (typeof this.minlength !== 'undefined' && this.minlength > 0) {\n          validity = validity && this._value.toString().length >= this.minlength;\n          if (!validity) {\n            message = this._getValidityMessage(VALIDATION_STATUS.MINLENGTH, translations) as string;\n          }\n        }\n        if (typeof this.maxlength !== 'undefined' && this.maxlength > 0) {\n          validity = validity && this._value.toString().length <= this.maxlength;\n          if (!validity) {\n            message = this._getValidityMessage(VALIDATION_STATUS.MAXLENGTH, translations) as string;\n          }\n        }\n        if (this.required && !this._value) {\n          validity = false;\n          message = this._getValidityMessage(VALIDATION_STATUS.ERROR_REQUIRED, translations) as string;\n        }\n      }\n\n      this.invalid = !validity;\n      this.validityMessage = message;\n      return validity;\n    }\n\n    /**\n     * Sets the given custom validity message.\n     *\n     * @param validityMessage The custom validity message\n     */\n    setCustomValidity(validityMessage: string) {\n      this.invalid = Boolean(validityMessage);\n      this.validityMessage = validityMessage;\n    }\n\n    _handleBlur() {\n      this._touched = true;\n      this.dispatchEvent(new FocusEvent('blur', { bubbles: true, composed: true }));\n    }\n\n    _handleFocus() {\n      this.dispatchEvent(new FocusEvent('focus', { bubbles: true, composed: true }));\n    }\n\n    _handleClick() {\n      this.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));\n    }\n\n    _handleChange(e: Event) {\n      const target = e.target as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;\n      let value: unknown;\n\n      if (target instanceof HTMLInputElement) {\n        switch (target.type) {\n          case 'checkbox':\n          case 'radio':\n            value = target.checked;\n            break;\n          case 'file':\n            value = target.files; // FileList\n            break;\n          default:\n            value = target.value;\n        }\n      } else if (target instanceof HTMLSelectElement) {\n        if (target.multiple) {\n          value = Array.from(target.selectedOptions).map((o) => o.value);\n        } else {\n          value = target.value;\n        }\n      } else {\n        // textarea o altri input con value\n        value = (target as any).value;\n      }\n\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          detail: { value, el: target },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    }\n  }\n  return ValidityMixinImpl;\n};\n\nexport default ValidityMixin;\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@italia/globals",
   "description": "Utilities per i Web components del Design System .italia",
-  "version": "0.0.1-alpha.0",
+  "version": "0.1.0-alpha.1",
   "publishConfig": {
     "access": "public"
   },
@@ -33,7 +33,7 @@
   ],
   "dependencies": {
     "lit": "^3.3.0",
-    "@italia/i18n": "^0.0.1-alpha.0"
+    "@italia/i18n": "^0.1.0-alpha.1"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.3",