maint(pat-validation): Change to class based pattern.

This is needed for better customization in deriving projects.

Author: thet

src/pat/auto-suggest/auto-suggest.test.js

@@ -464,7 +464,8 @@ describe("pat-autosuggest", function () {
             const form = document.querySelector("form");
             const input = document.querySelector("input");
 
-            new pattern_validation(form);
+            const instance_validation = new pattern_validation(form);
+            await events.await_pattern_init(instance_validation);
             new pattern(input);
             await utils.timeout(1); // wait a tick for async to settle.
 
@@ -497,7 +498,8 @@ describe("pat-autosuggest", function () {
             const form = document.querySelector("form");
             const input = document.querySelector("input");
 
-            new pattern_validation(form);
+            const instance_validation = new pattern_validation(form);
+            await events.await_pattern_init(instance_validation);
             new pattern(input);
             await utils.timeout(1); // wait a tick for async to settle.
 

src/pat/date-picker/date-picker.test.js

@@ -1,4 +1,5 @@
 import $ from "jquery";
+import events from "../../core/events";
 import pattern from "./date-picker";
 import pattern_auto_submit from "../auto-submit/auto-submit";
 import utils from "../../core/utils";
@@ -604,8 +605,9 @@ describe("pat-date-picker", function () {
         const el = document.querySelector("input[type=date]");
 
         const pattern_validation = (await import("../validation/validation")).default;
+        const instance_validation = new pattern_validation(form);
+        await events.await_pattern_init(instance_validation);
 
-        new pattern_validation(form);
         new pattern(el);
         await utils.timeout(1); // wait a tick for async to settle.
 

src/pat/validation/validation.js

@@ -1,12 +1,13 @@
 // Patterns validate - Form vlidation
 import "../../core/polyfills"; // SubmitEvent.submitter for Safari < 15.4 and jsDOM
 import $ from "jquery";
-import Base from "../../core/base";
+import { BasePattern } from "../../core/basepattern";
 import Parser from "../../core/parser";
 import dom from "../../core/dom";
 import events from "../../core/events";
 import logging from "../../core/logging";
 import utils from "../../core/utils";
+import registry from "../../core/registry";
 
 const logger = logging.getLogger("pat-validation");
 //logger.setLevel(logging.Level.DEBUG);
@@ -34,12 +35,12 @@ parser.addArgument("error-template");
 const KEY_ERROR_EL = "__patternslib__input__error__el";
 const KEY_ERROR_MSG = "__patternslib__input__error__msg";
 
-export default Base.extend({
-    name: "validation",
-    trigger: "form.pat-validation",
+class Pattern extends BasePattern {
+    static name = "validation";
+    static trigger = "form.pat-validation";
+    static parser = parser;
 
     init() {
-        this.options = parser.parse(this.el, this.options);
         events.add_event_listener(
             this.el,
             "submit",
@@ -63,7 +64,7 @@ export default Base.extend({
         // Set ``novalidate`` attribute to disable the browser's validation
         // bubbles but not disable the validation API.
         this.el.setAttribute("novalidate", "");
-    },
+    }
 
     initialize_inputs() {
         this.inputs = [
@@ -99,7 +100,7 @@ export default Base.extend({
                 (e) => debouncer(e)
             );
         }
-    },
+    }
 
     check_input({ input, event, stop = false }) {
         if (input.disabled) {
@@ -320,7 +321,7 @@ export default Base.extend({
             event.stopImmediatePropagation();
         }
         this.set_error_message(input);
-    },
+    }
 
     set_validity({ input, msg, attribute = null, min = null, max = null }) {
         // Replace some variables, as like validate.js
@@ -340,7 +341,7 @@ export default Base.extend({
         // Hidden inputs do not participate in validation but we need this
         // (e.g. styled date input).
         input[KEY_ERROR_MSG] = msg;
-    },
+    }
 
     remove_error(input, all_of_group = false) {
         // Remove error message and related referencesfrom input.
@@ -365,7 +366,7 @@ export default Base.extend({
                 }
             }
         }
-    },
+    }
 
     set_error_message(input) {
         this.remove_error(input);
@@ -416,10 +417,15 @@ export default Base.extend({
                 this.check_input({ input: _input, stop: true });
             }
         }
-    },
+    }
 
     error_template(message) {
         // Template for the validation message
         return `<em class="validation warning message">${message}</em>`;
-    },
-});
+    }
+}
+
+registry.register(Pattern);
+
+export default Pattern;
+export { Pattern };