@everymatrix/general-registration 1.10.4 → 1.10.10

package/dist/collection/components/general-registration/general-registration.js

@@ -1,235 +1,49 @@
-import { Component, h, Listen, Prop, State, Watch } from '@stencil/core';
+import { Component, h, Listen, Prop, State, Watch, Event } from '@stencil/core';
 import { translate } from '../../../../general-input/src/utils/locale.utils';
 import '@everymatrix/general-input';
 export class GeneralRegistration {
   constructor() {
-    this.data = {
-      "type": "default",
-      "content": {
-        "step": "step1",
-        "fields": [
-          {
-            "name": "firstName",
-            "displayName": "Username",
-            "defaultValue": null,
-            "validate": {
-              "mandatory": true,
-              "minLength": 3,
-              "maxLength": 20
-            },
-            "autofill": false
-          },
-          {
-            "name": "lastName",
-            "displayName": "Last name",
-            "defaultValue": null,
-            "validate": {
-              "mandatory": true,
-              "minLength": 3,
-              "maxLength": 20
-            },
-          },
-          {
-            "name": "telephone",
-            "displayName": "Telephone",
-            "action": "GET https://demo-api.stage.norway.everymatrix.com/v1/player/phonecodes",
-            "defaultValue": null,
-            "validate": {
-              "mandatory": true
-            },
-            "autofill": false,
-            "inputType": "tel"
-          },
-          {
-            "name": "dateOfBirth",
-            "displayName": "Date of Birth",
-            "defaultValue": null,
-            "validate": {
-              "min": "2022-05-01",
-              "max": "2022-05-29",
-              "mandatory": true,
-            },
-            "inputType": "datetime"
-          },
-          {
-            "name": "email",
-            "displayName": "Email",
-            "defaultValue": 'a@a.com',
-            "validate": {
-              "mandatory": true,
-              "custom": [
-                {
-                  "rule": "regex",
-                  "pattern": "^[a-zA-Z0-9._%+-]+@[a-zA-Z-9.-]+\\.[a-zA-Z]{2,3}$",
-                  "errorMessage": "Please enter a valid email address"
-                }
-              ]
-            },
-            "inputType": "email"
-          },
-          {
-            "name": "password",
-            "displayName": "Password",
-            "defaultValue": null,
-            "validate": {
-              "mandatory": true,
-              "minLength": 3,
-              "maxLength": 20,
-              "type": "password",
-              "custom": [
-                {
-                  "rule": "regex",
-                  "pattern": "(?=.*\\d+)(?=.*[A-Za-z]+).{8,20}",
-                  "errorMessage": "Password must contain at least 1 letter and 1 digit, and its minimal length is 8."
-                }
-              ]
-            },
-            "inputType": "password"
-          },
-          {
-            "name": "email",
-            "displayName": "Email",
-            "defaultValue": null,
-            "validate": {
-              "mandatory": true,
-              "type": "email",
-              "custom": [
-                {
-                  "rule": "unique-email",
-                  "errorMessage": "Please check your email"
-                },
-                {
-                  "rule": "regex",
-                  "pattern": "^[a-zA-Z0-9._%+-]+@[a-zA-Z-9.-]+\\.[a-zA-Z]{2,3}$",
-                  "errorMessage": "Please enter a valid email address"
-                },
-                {
-                  "rule": "duplicate-input",
-                  "displayName": "pt al doilea input gen: Confirm Email",
-                  "errorMessage": "Different Email! Pls."
-                }
-              ]
-            }
-          },
-          {
-            "name": "termsAndConditions",
-            "displayName": "Terms and Conditions",
-            "validate": {
-              "mandatory": true,
-              "type": "boolean"
-            },
-            "inputType": "checkbox"
-          },
-          {
-            "name": "pepCheck",
-            "validate": {
-              "mandatory": true
-            },
-            "inputType": "checkbox"
-          },
-          {
-            "name": "gender",
-            "data": {
-              "values": [
-                {
-                  "label": "🍆",
-                  "value": "m"
-                },
-                {
-                  "label": "🍑",
-                  "value": "f"
-                }
-              ]
-            },
-            "validate": {
-              "mandatory": true
-            },
-            "inputType": "radio"
-          },
-          {
-            "name": "dateOfBirth",
-            "validate": {
-              "mandatory": true,
-              "custom": [
-                {
-                  "rule": "regex",
-                  "pattern": "(?:19\\d{2}|20[01][0-9]|2020)[-/.](?:0[1-9]|1[012])[-/.](?:0[1-9]|[12][0-9]|3[01])",
-                  "errorMessage": "Invalid date format"
-                },
-                {
-                  "rule": "min-18-years",
-                  "errorMessage": "Not old enough to ride the roller coaster"
-                }
-              ]
-            }
-          },
-          {
-            "name": "city",
-            "displayName": "Cities",
-            "action": null,
-            "data": {
-              "values": [
-                {
-                  "label": "Budapest",
-                  "value": "Budapest"
-                },
-                {
-                  "label": "Debrecen",
-                  "value": "Debrecen"
-                },
-                {
-                  "label": "Miskolc",
-                  "value": "Miskolc"
-                },
-                {
-                  "label": "Szeged",
-                  "value": "Szeged"
-                },
-                {
-                  "label": "Zuglo",
-                  "value": "Zuglo"
-                }
-              ]
-            },
-            "validate": {
-              "mandatory": true
-            },
-            "inputType": "dropdown"
-          },
-          {
-            "name": "city",
-            "displayName": "Cities",
-            "data": null,
-            "action": "GET https://demo-api.stage.norway.everymatrix.com/v1/player/countries",
-            "validate": {
-              "mandatory": true
-            },
-            "inputType": "dropdown"
-          }
-        ],
-        "actions": [
-          "get-next-step",
-          "some-async-action-before-submitting",
-          "submit-step-data"
-        ]
-      }
-    };
     /**
     * Currently selected language
     */
     this.language = 'en';
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrl = '';
     this.emitValue = false;
     this.listOfInputs = [];
     this.isLoading = true;
+    this.limitStylingAppends = false;
     this.listOfInputValues = [];
     this.listOfActions = [];
-    this.steps = [];
+    this.indexStep = 0;
     this.registrationStepsState = {
       regId: null
     };
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let url = new URL(this.clientStylingUrl);
+      let cssFile = document.createElement('style');
+      fetch(url.href)
+        .then((res) => res.text())
+        .then((data) => {
+        cssFile.innerHTML = data;
+        setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
+      });
+    };
   }
-  logger() {
-    console.log(this.registrationStep);
+  sendStep() {
+    this.registrationStepUpdated.emit(this.registrationStep);
+    window.postMessage({ type: 'registrationStepUpdated', step: this.registrationStep }, window.location.href);
   }
   checkInputsValidityHandler(event) {
     // Set isValid state of the input in the list.
@@ -238,25 +52,30 @@ export class GeneralRegistration {
     this.isFormValid = !this.getInvalidStatus(this.listOfInputs);
   }
   getInputsValueHandler(event) {
-    this.listOfInputValues.find(input => input.name == event.detail.name).value = event.detail.value;
-    /*Note to self: -- what about the inputs that received a default value.
-    They will send an undefined because there was no input
-    Handle it somehow!!!!!, one idea can be that value equals defaultValue but dependes on how the api wants stuff*/
+    this.listOfInputValues.find(input => {
+      if (input.name == event.detail.name) {
+        input.value = event.detail.value;
+      }
+    });
     this.stepsStateMachine({ event: 'set', type: 'values' });
   }
   componentWillLoad() {
-    // const mockCall = Promise.resolve(this.data);
-    // return mockCall.then((data) => {
-    //   this.listOfInputs = data.content.fields.map((field) => {
-    //     this.isLoading = false;
-    //     return { ...field, isValid: false };
-    //   });
-    // });
     return this.getRegisterConfig().then((config) => {
       this.formatConfig(config);
       this.stepsStateMachine({ event: 'set', type: 'inputs' });
     });
   }
+  componentDidRender() {
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      this.setClientStyling();
+      this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+  }
+  componentDidLoad() {
+    this.registrationWidgetLoaded.emit();
+    window.postMessage({ type: 'registrationWidgetLoaded' }, window.location.href);
+  }
   nextHandler(e) {
     e.preventDefault();
     // Trigger events in subwidgets.
@@ -265,8 +84,8 @@ export class GeneralRegistration {
   }
   backHandler(e) {
     e.preventDefault();
-    this.steps.pop();
-    this.registrationStep = this.steps.at(-1);
+    this.isLastStep = false;
+    this.registrationStep = this.stepChange('decrement');
     this.stepsStateMachine({ event: 'get', type: 'inputs' });
     this.stepsStateMachine({ event: 'get', type: 'values' });
   }
@@ -275,13 +94,11 @@ export class GeneralRegistration {
       case 'set':
         if (state.type == 'inputs') {
           this.registrationStepsState[this.registrationStep].fields = this.listOfInputs;
+          this.registrationStepsState[this.registrationStep].actions = this.listOfActions;
         }
         if (state.type == 'values') {
           this.registrationStepsState[this.registrationStep].registerUserData = this.listOfInputValues.reduce((acc, curr) => {
-            // @TODO remove this once GMCore is smart enough to understand the concept of UNIQUE KEYS
-            if (curr.value != null) {
-              acc[curr.name] = curr.value;
-            }
+            acc[curr.name] = { value: curr.value, isDuplicate: curr.isDuplicate };
             return acc;
           }, {});
         }
@@ -293,17 +110,19 @@ export class GeneralRegistration {
           return;
         if (state.type == 'inputs') {
           this.listOfInputs = this.registrationStepsState[this.registrationStep].fields;
+          this.listOfActions = this.registrationStepsState[this.registrationStep].actions;
         }
         if (state.type == 'values') {
           const savedValues = savedUserData[this.registrationStep].registerUserData;
           this.listOfInputValues = Object.keys(savedValues).map(name => {
-            return { name, value: savedValues[name] };
+            return { name, value: savedValues[name].value, isDuplicate: savedValues[name].isDuplicate };
           });
           // Give to each field the user input as the default value.
           this.listOfInputValues.forEach(inputValue => {
             const input = this.listOfInputs.find(input => input.name === inputValue.name);
             if (input) {
               input.defaultValue = inputValue.value;
+              console.log(input);
             }
           });
         }
@@ -313,9 +132,6 @@ export class GeneralRegistration {
   getRegisterConfig(registrationID) {
     const url = new URL(`${this.endpoint}/v1/player/legislation/registration/config`);
     const headers = new Headers();
-    // headers.append('X-Tenant-ID', this.tenantId);
-    // headers.append('X-Client-ID', this.clientId);
-    // headers.append('X-Api-Key', this.apiKey);
     headers.append('Content-Type', 'application/json');
     headers.append('Accept', 'application/json');
     if (registrationID) {
@@ -344,9 +160,15 @@ export class GeneralRegistration {
     const url = new URL(`${this.endpoint}/v1/player/legislation/registration/step`);
     const registerStep = {
       registrationId: this.registrationID,
-      registerUserDto: this.listOfInputValues.reduce((acc, curr) => {
-        // @TODO remove this once GMCore is smart enough to understand the concept of UNIQUE KEYS
-        if (curr.value != null) {
+      registerUserDto: this.listOfInputValues
+        .filter(input => !input.isDuplicate)
+        .reduce((acc, curr) => {
+        // Special case for "Mobile" as it needs to be split in two values -- API expects it this way.
+        if (curr.name == "Mobile") {
+          acc['MobilePrefix'] = curr.value.split('|')[0];
+          acc[curr.name] = curr.value.split('|')[1];
+        }
+        else {
           acc[curr.name] = curr.value;
         }
         return acc;
@@ -354,9 +176,6 @@ export class GeneralRegistration {
       step: this.registrationStep,
     };
     const headers = new Headers();
-    // headers.append('X-Tenant-ID', this.tenantId);
-    // headers.append('X-Client-ID', this.clientId);
-    // headers.append('X-Api-Key', this.apiKey);
     headers.append('Content-Type', 'application/json');
     headers.append('Accept', 'application/json');
     const options = {
@@ -377,12 +196,22 @@ export class GeneralRegistration {
         this.setRegister();
       }
       else {
-        this.getRegisterConfig(this.registrationID).then((config) => {
-          // Format the new step config.
-          this.formatConfig(config);
-          // Set it in local storage
-          this.stepsStateMachine({ event: 'set', type: 'inputs' });
-        });
+        // After sending the current step, increment and check if the next one is in state.
+        this.registrationStep = this.stepChange('increment');
+        // If step is present in state do NOT fetch the next config.
+        if (Object.keys(this.registrationStepsState).find(key => key == this.registrationStep)) {
+          // Use the one from state
+          this.stepsStateMachine({ event: 'get', type: 'inputs' });
+          this.stepsStateMachine({ event: 'get', type: 'values' });
+        }
+        else {
+          this.getRegisterConfig(this.registrationID).then((config) => {
+            // Format the new step config.
+            this.formatConfig(config);
+            // Set it in local storage.
+            this.stepsStateMachine({ event: 'set', type: 'inputs' });
+          });
+        }
       }
     })
       .catch((err) => {
@@ -396,19 +225,8 @@ export class GeneralRegistration {
     this.isLoading = true;
     const url = new URL(`${this.endpoint}/v1/player/legislation/register`);
     const headers = new Headers();
-    // headers.append('X-Tenant-ID', this.tenantId);
-    // headers.append('X-Client-ID', this.clientId);
-    // headers.append('X-Api-Key', this.apiKey);
     headers.append('Content-Type', 'application/json');
     headers.append('Accept', 'application/json');
-    // const registerStep = {
-    //   registrationId: this.registrationID,
-    //   registerUserDto: this.listOfInputValues.reduce((acc, curr) => {
-    //     acc[curr.name] = curr.value;
-    //     return acc;
-    //   }, {}),
-    //   step: this.registrationStep,
-    // };
     const options = {
       method: 'PUT',
       body: JSON.stringify({ registrationId: this.registrationID }),
@@ -435,45 +253,63 @@ export class GeneralRegistration {
   }
   formatConfig(config) {
     // Populate the list of inputs and set as invalid in the beginning
-    this.listOfInputs = config.content.fields.map((field) => {
-      return Object.assign(Object.assign({}, field), { isValid: false });
+    this.listOfInputs = config.content.fields.flatMap((field) => {
+      // Special case for inputs that need to be duplicated.
+      const duplicateInputRule = field.validate.custom.find(customRule => customRule.rule === 'duplicate-input');
+      const inputElement = Object.assign(Object.assign({}, field), { isValid: false });
+      if (duplicateInputRule) {
+        const duplicateInput = Object.assign(Object.assign({}, field), { name: `${field.name}Duplicate`, displayName: duplicateInputRule.displayName, isValid: false, isDuplicateInput: true });
+        return [inputElement, duplicateInput];
+      }
+      else {
+        return [inputElement];
+      }
     });
     // Populate the list of inputs values and set as null in the beginning
-    this.listOfInputValues = config.content.fields.map(field => {
-      return { name: field.name, value: null };
+    this.listOfInputValues = this.listOfInputs.map(field => {
+      return { name: field.name, value: null, isDuplicate: field.isDuplicateInput || false };
     });
     // Set the list of actions
     this.listOfActions = config.content.actions.map(action => action);
     this.isLastStep = this.listOfActions.some(action => action == '/register');
     this.registrationID = config.content.registrationID;
     this.registrationStep = config.content.step;
-    this.steps.push(this.registrationStep);
     // Add the step to the registrationStepsData
     this.registrationStepsState.regId = this.registrationID;
     if (!this.registrationStepsState[this.registrationStep]) {
       this.registrationStepsState[this.registrationStep] = {
         fields: [],
-        registerUserData: {}
+        registerUserData: {},
+        actions: []
       };
     }
   }
+  stepChange(action) {
+    const stepNum = parseInt(this.registrationStep.replace('Step', ''));
+    if (action === 'increment') {
+      return 'Step' + (stepNum + 1);
+    }
+    if (action === 'decrement') {
+      return 'Step' + (stepNum - 1);
+    }
+  }
   getInvalidStatus(listOfInputs) {
     return listOfInputs.filter(input => input.isValid == false).length > 0;
   }
   renderInputs() {
-    return (this.listOfInputs.map(input => h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data ? input.data.values : [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language })));
+    return (this.listOfInputs.map(input => h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data ? input.data.values : [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language, isDuplicateInput: input.isDuplicateInput })));
   }
   ;
   renderButtons() {
     return (h("div", { class: 'registration__buttons-wrapper' },
-      h("button", { class: `registration__button ${this.isLastStep ? 'registration__button--done' : ''}`, type: 'submit', form: 'RegistrationForm', onClick: (e) => this.nextHandler(e) }, this.isLastStep ? translate('doneButton', this.language) : translate('nextButton', this.language)),
-      this.registrationStep !== 'Step1' && h("button", { class: 'registration__button', onClick: (e) => this.backHandler(e) }, translate('backButton', this.language))));
+      h("button", { class: `registration__button registration__button--next`, type: 'submit', form: 'RegistrationForm', onClick: (e) => this.nextHandler(e) }, this.isLastStep ? translate('doneButton', this.language) : translate('nextButton', this.language)),
+      h("button", { class: `registration__button registration__button--back ${this.registrationStep == 'Step1' ? 'registration__button--first-step' : ''}`, onClick: (e) => this.backHandler(e) }, translate('backButton', this.language))));
   }
   render() {
     if (this.isLoading) {
       return h("p", null, "Please wait, loading ...");
     }
-    return (h("div", { class: 'registration' },
+    return (h("div", { class: `registration  registration__${this.registrationStep}`, ref: el => this.stylingContainer = el },
       h("form", { action: '.', id: 'RegistrationForm', class: 'registration__form' }, this.renderInputs()),
       this.renderButtons()));
   }
@@ -494,7 +330,7 @@ export class GeneralRegistration {
         "resolved": "string",
         "references": {}
       },
-      "required": false,
+      "required": true,
       "optional": false,
       "docs": {
         "tags": [],
@@ -503,24 +339,7 @@ export class GeneralRegistration {
       "attribute": "endpoint",
       "reflect": false
     },
-    "tenantId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The tenandId of the domain"
-      },
-      "attribute": "tenant-id",
-      "reflect": false
-    },
-    "clientId": {
+    "language": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -532,12 +351,13 @@ export class GeneralRegistration {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "ClientID? OperatorID? GM knows ..."
+        "text": "Currently selected language"
       },
-      "attribute": "client-id",
-      "reflect": false
+      "attribute": "language",
+      "reflect": false,
+      "defaultValue": "'en'"
     },
-    "apiKey": {
+    "clientStyling": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -549,12 +369,13 @@ export class GeneralRegistration {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The APIKey for that endpoint"
+        "text": "Client custom styling via string"
       },
-      "attribute": "api-key",
-      "reflect": false
+      "attribute": "client-styling",
+      "reflect": false,
+      "defaultValue": "''"
     },
-    "language": {
+    "clientStylingUrl": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -566,11 +387,11 @@ export class GeneralRegistration {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Currently selected language"
+        "text": "Client custom styling via url content"
       },
-      "attribute": "language",
+      "attribute": "client-styling-url",
       "reflect": false,
-      "defaultValue": "'en'"
+      "defaultValue": "''"
     }
   }; }
   static get states() { return {
@@ -579,11 +400,43 @@ export class GeneralRegistration {
     "isFormValid": {},
     "listOfInputs": {},
     "isLoading": {},
+    "limitStylingAppends": {},
     "registrationStep": {}
   }; }
+  static get events() { return [{
+      "method": "registrationWidgetLoaded",
+      "name": "registrationWidgetLoaded",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "registrationStepUpdated",
+      "name": "registrationStepUpdated",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
   static get watchers() { return [{
       "propName": "registrationStep",
-      "methodName": "logger"
+      "methodName": "sendStep"
     }]; }
   static get listeners() { return [{
       "name": "sendValidityState",

package/dist/components/checkbox-input2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate } from './locale.utils.js';
 
-const checkboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:red}";
+const checkboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox{font-family:\"Roboto\";font-style:normal}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:#2B2D3F;line-height:14px}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}";
 
 const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -32,6 +32,12 @@ const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   valueHandler(inputValueEvent) {
     this.sendInputValue.emit(inputValueEvent);
   }
+  componentDidLoad() {
+    if (this.defaultValue) {
+      this.value = this.defaultValue;
+      this.valueHandler({ name: this.name, value: this.value });
+    }
+  }
   handleClick() {
     this.value = this.inputReference.checked.toString();
     this.errorMessage = this.setErrorMessage();
@@ -48,7 +54,7 @@ const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   render() {
-    return h("div", { class: 'checkbox__wrapper' }, h("input", { type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, checked: !!this.defaultValue, readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), h("label", { htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h("small", { class: 'checkbox__error-message' }, this.errorMessage));
+    return h("div", { class: 'checkbox__wrapper' }, h("input", { type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, checked: !!this.defaultValue, readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h("small", { class: 'checkbox__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],