@everymatrix/general-registration-hsl 0.0.1

package/dist/cjs/index.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const generalRegistrationHsl = require('./general-registration-hsl-e3c6c171.js');
+require('./index-f6112702.js');
+
+
+
+exports.GeneralRegistrationHsl = generalRegistrationHsl.GeneralRegistrationHsl;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f6112702.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["checkbox-group-input_14.cjs",[[1,"general-registration-hsl",{"endpoint":[513],"language":[513],"clientStyling":[1537,"client-styling"],"mbSource":[1,"mb-source"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"dateFormat":[513,"date-format"],"buttonInsideForm":[516,"button-inside-form"],"btag":[513],"emitOnClick":[516,"emit-on-click"],"errorMessage":[32],"isFormValid":[32],"isConsentValid":[32],"isConsentReady":[32],"isLoading":[32],"isLoadingPOST":[32],"registrationStep":[32],"forms":[32],"limitStylingAppends":[32],"autofilled":[32],"isInitalInteraction":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"],[0,"resendCode","handleRequestTwofa"],[8,"message","messageHandler"]],{"registrationStep":["sendStep"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"forms":["setFormValidity"],"btag":["addBtag"]}],[1,"general-input-hsl",{"type":[513],"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"tooltip":[513],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"hidePasswordComplexity":[516,"hide-password-complexity"],"clientStyling":[520,"client-styling"],"dateFormat":[513,"date-format"],"translationUrl":[513,"translation-url"],"emitOnClick":[516,"emit-on-click"],"twofaDestination":[513,"twofa-destination"],"twofaResendIntervalSeconds":[514,"twofa-resend-interval-seconds"]}],[1,"checkbox-group-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"selectedValues":[32],"showCheckboxes":[32]},[[4,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"selectedValues":["setValue"],"emitValue":["emitValueHandler"]}],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"dateFormat":[513,"date-format"],"emitOnClick":[516,"emit-on-click"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"hidePasswordComplexity":[516,"hide-password-complexity"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32],"passwordComplexity":[32],"showPopup":[32],"value":[32]},[[16,"sendOriginalValidityState","originalValidityChangedHandler"],[16,"sendInputValue","valueChangedHandler"],[4,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"value":["valueChanged"],"emitValue":["emitValueHandler"]}],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[520,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"],[16,"validationChange","handleValidationChange"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"toggle-checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"options":[16],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"showFields":[32]},[[4,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"]}],[1,"twofa-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"destination":[513],"resendIntervalSeconds":[514,"resend-interval-seconds"],"clientStyling":[513,"client-styling"],"limitStylingAppends":[32],"isValid":[32],"isResendButtonAvailable":[32],"showTooltip":[32],"errorMessage":[32],"code":[32],"resendIntervalSecondsLeft":[32]},[[4,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,31 @@
+{
+  "entries": [
+    "components/general-registration-hsl/general-registration-hsl.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.19.2",
+    "typescriptVersion": "5.4.5"
+  },
+  "collections": [
+    {
+      "name": "@everymatrix/general-input-hsl",
+      "tags": [
+        "checkbox-group-input",
+        "checkbox-input",
+        "date-input",
+        "email-input",
+        "general-input-hsl",
+        "number-input",
+        "password-input",
+        "radio-input",
+        "select-input",
+        "tel-input",
+        "text-input",
+        "toggle-checkbox-input",
+        "twofa-input"
+      ]
+    }
+  ],
+  "bundles": []
+}

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

@@ -0,0 +1,130 @@
+*,
+*::before,
+*::after {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.registration__form.hidden {
+  display: none;
+}
+
+.registration {
+  font-family: "Roboto";
+  font-style: normal;
+  font-family: sans-serif;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+  height: 100%;
+  container-type: inline-size;
+}
+.registration__wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.registration__error-message {
+  color: var(--emw--color-error, var(--emw--color-red, #ed0909));
+  font-size: var(--emw-font-size-small, 13px);
+  display: block;
+  justify-content: center;
+  text-align: center;
+}
+.registration__loading-message {
+  padding-top: 20px;
+  text-align: center;
+}
+.registration__form {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  gap: 40px;
+  justify-items: stretch;
+  align-content: flex-start;
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+}
+.registration__buttons-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  position: relative;
+}
+.registration__button {
+  border-radius: 5px;
+  background: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));
+  border: 1px solid var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));
+  color: var(--emw--button-typography, var(--emw--color-white, #FFFFFF));
+  text-transform: uppercase;
+  font-size: 20px;
+  height: 44px;
+  width: 100%;
+  margin: 0px auto;
+  padding: 10px 20px;
+  font-weight: normal;
+  box-shadow: none;
+  cursor: pointer;
+}
+.registration__button--disabled {
+  background: var(--emw--color-gray-100, #E6E6E6);
+  border: 1px solid var(--emw--color-gray-150, #828282);
+  pointer-events: none;
+  box-shadow: none;
+}
+.registration__button--first-step {
+  display: none;
+}
+
+@container (min-width: 450px) {
+  .registration__form {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .registration__buttons-wrapper {
+    flex-direction: row-reverse;
+    gap: 15px;
+  }
+}
+.spinner {
+  animation: rotate 2s linear infinite;
+  z-index: 2;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -25px 0 0 -25px;
+  width: 50px;
+  height: 50px;
+}
+.spinner .path {
+  stroke: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));
+  stroke-linecap: round;
+  animation: dash 1.5s ease-in-out infinite;
+}
+
+.input-description {
+  margin-top: 5px;
+  font-size: var(--emw-font-size-x-small, 12px);
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}