@everymatrix/general-registration 1.10.0

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c04f4a2a.js');
+
+/*
+ Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  return index.bootstrapLazy([["checkbox-input_11.cjs",[[1,"general-registration",{"endpoint":[1],"tenantId":[1,"tenant-id"],"clientId":[1,"client-id"],"apiKey":[1,"api-key"],"language":[1],"errorMessage":[32],"emitValue":[32],"isFormValid":[32],"listOfInputs":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[1],"name":[1],"displayName":[1,"display-name"],"action":[1],"validation":[16],"options":[8],"language":[1],"defaultValue":[8,"default-value"],"emitValue":[4,"emit-value"]}],[1,"checkbox-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"date-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"email-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"language":[1],"emitValue":[4,"emit-value"],"checkValidity":[4,"check-validity"],"errorMessage":[32],"isValid":[32]}],[1,"number-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[2,"default-value"],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"password-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}],[1,"radio-input",{"name":[1],"displayName":[1,"display-name"],"optionsGroup":[16],"validation":[16],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"select-input",{"name":[1],"displayName":[1,"display-name"],"action":[1],"options":[16],"validation":[16],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"tel-input",{"name":[1],"displayName":[1,"display-name"],"showLabels":[4,"show-labels"],"action":[1],"validation":[16],"defaultValue":[8,"default-value"],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}],[1,"text-input",{"name":[1025],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1025,"default-value"],"rules":[1],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,28 @@
+{
+  "entries": [
+    "./components/general-registration/general-registration.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.15.2",
+    "typescriptVersion": "4.5.4"
+  },
+  "collections": [
+    {
+      "name": "@everymatrix/general-input",
+      "tags": [
+        "checkbox-input",
+        "date-input",
+        "email-input",
+        "general-input",
+        "number-input",
+        "password-input",
+        "radio-input",
+        "select-input",
+        "tel-input",
+        "text-input"
+      ]
+    }
+  ],
+  "bundles": []
+}

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

@@ -0,0 +1,45 @@
+*,
+*::before,
+*::after {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.registration {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+  height: 100%;
+}
+.registration__form {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(min-content, 1fr));
+  column-gap: 65px;
+  row-gap: 30px;
+  justify-items: stretch;
+  align-content: flex-start;
+  overflow: scroll;
+  width: 100%;
+  height: 100%;
+}
+.registration__buttons-wrapper {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+}
+.registration__button {
+  background-color: #e69200;
+  border-radius: 30px;
+  text-transform: uppercase;
+  padding: 10px 50px;
+  border: none;
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
+}
+.registration__button--disabled {
+  background-color: grey;
+}
+.registration__button--done {
+  background-color: #176317;
+}

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

@@ -0,0 +1,529 @@
+import { Component, h, Listen, Prop, State, Watch } 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": "firstName",
+            "displayName": "Username",
+            "defaultValue": null,
+            "validate": {
+              "mandatory": true,
+              "minLength": 3,
+              "maxLength": 20
+            },
+            "autofill": false
+          },
+          // {
+          //   "name": "tel",
+          //   "displayName": "Telephone",
+          //   "defaultValue": null,
+          //   "validate": {
+          //     "mandatory": true
+          //   },
+          //   "autofill": false,
+          //   "inputType": "tel"
+          // },
+          // {
+          //   "name": "dateOfBirth",
+          //   "displayName": "Date of Birth",
+          //   "defaultValue": null,
+          //   "validate": {
+          //     "min": "2023-04-01",
+          //     "max":  "2023-04-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": "lastName",
+          //   "displayName": "Last name",
+          //   "defaultValue": null,
+          //   "validate": {
+          //     "mandatory": true,
+          //     "minLength": 3,
+          //     "maxLength": 20
+          //   },
+          // },
+          // {
+          //   "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",
+          //   "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"
+          //       }
+          //     ]
+          //   }
+          // },
+          // {
+          //   "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';
+    this.emitValue = false;
+    this.listOfInputs = [];
+    this.isLoading = false;
+    this.listOfInputValues = [];
+    this.listOfActions = [];
+    this.actionsStepIndex = 0;
+  }
+  validityStateHandler() {
+    console.log('bababa', this.isFormValid);
+    this.buttonReference.disabled = this.isFormValid ? false : true;
+  }
+  checkInputsValidityHandler(event) {
+    console.log('se ajunge aici');
+    // Set isValid state of the input in the list.
+    this.listOfInputs.find(input => input.name == event.detail.name).isValid = event.detail.valid;
+    // Check if any one is invalid.
+    this.isFormValid = !this.getInvalidStatus(this.listOfInputs);
+  }
+  getInputsValueHandler(event) {
+    console.log('sendInputValue');
+    this.listOfInputValues.find(input => input.name == event.detail.name).inputValue = 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*/
+  }
+  connectedCallback() {
+  }
+  componentWillLoad() {
+    // const mockCall = Promise.resolve(this.data);
+    // return mockCall.then((data) => {
+    //   this.listOfInputs = data.content.fields.map((field) => {
+    //     return { ...field, isValid: false };
+    //   });
+    // });
+    // Initial Fetch
+    return this.getRegisterConfig().then((config) => {
+      this.formatConfig(config);
+    });
+  }
+  nextHandler(e) {
+    e.preventDefault();
+    // Trigger events in subwidgets.
+    this.emitValue = true;
+    if (this.isFormValid) {
+      this.setRegisterStep();
+    }
+  }
+  getRegisterConfig(registrationID) {
+    const url = new URL(`${this.endpoint}/api/v1.0/registerCfg/`);
+    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) {
+      url.searchParams.append('registrationId', registrationID);
+    }
+    const options = {
+      method: 'GET',
+      headers
+    };
+    return new Promise((resolve, reject) => {
+      this.isLoading = true;
+      fetch(url.href, options)
+        .then((res) => res.json())
+        .then((config) => {
+        resolve(config);
+      }).catch((err) => {
+        console.error(err);
+        reject(err);
+      }).finally(() => {
+        this.isLoading = false;
+      });
+    });
+  }
+  setRegisterStep() {
+    this.emitValue = false;
+    const url = new URL(`${this.endpoint}/api/v1.0/registerStep/`);
+    const registerStep = {
+      registrationId: this.registrationID,
+      registerUserDto: this.listOfInputValues.reduce((acc, curr) => {
+        acc[curr.name] = curr.inputValue;
+        return acc;
+      }, {}),
+      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 = {
+      method: 'POST',
+      body: JSON.stringify(registerStep),
+      headers
+    };
+    fetch(url.href, options)
+      .then((res) => {
+      if (res.status >= 300) {
+        throw new Error('err');
+      }
+    })
+      .then((data) => {
+      this.registrationID = data.registrationId;
+      if (this.listOfActions.some(action => action == '/register')) {
+        this.setRegister();
+      }
+      else {
+        this.getRegisterConfig(this.registrationID).then((config) => this.formatConfig(config));
+      }
+    })
+      .catch((err) => {
+      console.error(err);
+    });
+  }
+  setRegister() {
+    const url = new URL(`${this.endpoint}/api/v1.0/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.inputValue;
+        return acc;
+      }, {}),
+      step: this.registrationStep,
+    };
+    const options = {
+      method: 'POST',
+      body: JSON.stringify(registerStep),
+      headers
+    };
+    fetch(url.href, options)
+      .then((res) => {
+      if (res.status >= 300) {
+        throw new Error('err');
+      }
+    })
+      .then((data) => {
+      console.log(data);
+    })
+      .catch((err) => {
+      console.log(err);
+    });
+  }
+  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 });
+    });
+    // Populate the list of inputs values and set as null in the beginning
+    this.listOfInputValues = config.content.fields.map(field => {
+      return { name: field.name, inputValue: null };
+    });
+    // Set the list of actions
+    this.listOfActions = config.content.actions.map(action => action);
+    this.registrationID = config.content.registrationID;
+    this.registrationStep = config.content.step;
+  }
+  getInvalidStatus(listOfInputs) {
+    return listOfInputs.filter(input => input.isValid == false).length > 0;
+  }
+  renderInputs() {
+    /*let aux = this.listOfInputs;
+    this.listOfInputs = [];
+    this.listOfInputs = aux;*/
+    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, emitValue: this.emitValue, language: this.language })));
+  }
+  ;
+  renderButtons() {
+    return (h("div", { class: 'registration__buttons-wrapper' },
+      h("button", { class: 'registration__button', type: 'submit', form: 'RegistrationForm', onClick: (e) => this.nextHandler(e), ref: (el) => this.buttonReference = el }, translate('nextButton', this.language)),
+      h("button", { class: 'registration__button' }, translate('backButton', this.language))));
+  }
+  render() {
+    return (h("div", { class: 'registration' },
+      h("form", { action: '.', id: 'RegistrationForm', class: 'registration__form' }, this.renderInputs()),
+      this.renderButtons()));
+  }
+  static get is() { return "general-registration"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["general-registration.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["general-registration.css"]
+  }; }
+  static get properties() { return {
+    "endpoint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "NorWAy Endpoint for all the calls."
+      },
+      "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": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "ClientID? OperatorID? GM knows ..."
+      },
+      "attribute": "client-id",
+      "reflect": false
+    },
+    "apiKey": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The APIKey for that endpoint"
+      },
+      "attribute": "api-key",
+      "reflect": false
+    },
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Currently selected language"
+      },
+      "attribute": "language",
+      "reflect": false,
+      "defaultValue": "'en'"
+    }
+  }; }
+  static get states() { return {
+    "errorMessage": {},
+    "emitValue": {},
+    "isFormValid": {},
+    "listOfInputs": {}
+  }; }
+  static get watchers() { return [{
+      "propName": "isFormValid",
+      "methodName": "validityStateHandler"
+    }]; }
+  static get listeners() { return [{
+      "name": "sendValidityState",
+      "method": "checkInputsValidityHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "sendInputValue",
+      "method": "getInputsValueHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/collection/utils/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+  return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
+}

package/dist/components/checkbox-input.js

@@ -0,0 +1,6 @@
+import { C as CheckboxInput$1, d as defineCustomElement$1 } from './checkbox-input2.js';
+
+const CheckboxInput = CheckboxInput$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CheckboxInput, defineCustomElement };