@everymatrix/pam-login 0.0.1

package/dist/cjs/pam-login.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c5001c3e.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+/*
+ Stencil Client Patch Browser v4.19.2 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('pam-login.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["pam-login_2.cjs",[[1,"pam-login",{"endpoint":[513],"lang":[1537],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"mbSource":[513,"mb-source"],"translationUrl":[513,"translation-url"],"passwordReset":[513,"password-reset"],"userEmailRegex":[513,"user-email-regex"],"userEmailRegexOptions":[513,"user-email-regex-options"],"userPhoneRegex":[513,"user-phone-regex"],"userPhoneRegexOptions":[513,"user-phone-regex-options"],"passwordRegex":[513,"password-regex"],"passwordRegexOptions":[513,"password-regex-options"],"loginByPhoneNumber":[513,"login-by-phone-number"],"isLoading":[32],"contactValue":[32],"passwordValue":[32],"prefixValue":[32],"prefixOptions":[32],"isContactValid":[32],"isPasswordValid":[32],"isPasswordVisible":[32],"apiErrorMessage":[32],"captchaData":[32]},null,{"translationUrl":["handleNewTranslations"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[2,"border-radius"],"marginBottom":[2,"margin-bottom"],"marginTop":[2,"margin-top"],"marginLeft":[2,"margin-left"],"marginRight":[2,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/cjs/pam-login_2.cjs.entry.js

@@ -0,0 +1,175 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const pamLogin = require('./pam-login-45f1f99f.js');
+const index = require('./index-c5001c3e.js');
+
+const uiSkeletonCss = ":host{display:block;--emw-skeleton-rectangle-background:#c2c2c2;--emw-skeleton-circle-background:#c2c2c2;--emw-skeleton-text-background:#c2c2c2;--emw-skeleton-title-background:#c2c2c2;--emw-skeleton-image-background:#c2c2c2;--emw-skeleton-logo-background:#c2c2c2;--emw-skeleton-primary-color:#e0e0e0;--emw-skeleton-secondary-color:#f0f0f0}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 2px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 5px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:var(--emw-skeleton-text-width-100, 300px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 5px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, inherit)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 5px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, var(--emw-skeleton-color-0, #c2c2c2))}100%{background-color:var(--emw-skeleton-secondary-color, var(--emw-skeleton-color-100, #f0f0f0))}}";
+const UiSkeletonStyle0 = uiSkeletonCss;
+
+const UiSkeleton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.structure = undefined;
+        this.width = undefined;
+        this.height = undefined;
+        this.borderRadius = undefined;
+        this.marginBottom = undefined;
+        this.marginTop = undefined;
+        this.marginLeft = undefined;
+        this.marginRight = undefined;
+        this.animation = true;
+        this.rows = undefined;
+        this.size = undefined;
+        this.color = undefined;
+        this.primaryColor = undefined;
+        this.secondaryColor = undefined;
+    }
+    handleStructureChange(newValue, oldValue) {
+        if (oldValue !== newValue) {
+            this.handleStructure(newValue);
+        }
+    }
+    handleStructure(structure) {
+        switch (structure) {
+            case 'logo':
+                return this.renderLogo();
+            case 'image':
+                return this.renderImage();
+            case 'title':
+                return this.renderTitle();
+            case 'text':
+                return this.renderText();
+            case 'rectangle':
+                return this.renderRectangle();
+            case 'circle':
+                return this.renderCircle();
+            default:
+                return null;
+        }
+    }
+    renderLogo() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Logo " + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderImage() {
+        return (index.h("div", { class: "Image " + (this.animation ? 'Skeleton' : '') }));
+    }
+    renderTitle() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Title " + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderText() {
+        return (index.h("div", { class: "SkeletonContainer" }, Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index$1) => (index.h("div", { key: index$1, class: "Text " + (this.animation ? 'Skeleton' : '') })))));
+    }
+    renderRectangle() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Rectangle " + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderCircle() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Circle " + (this.animation ? 'Skeleton' : '') })));
+    }
+    render() {
+        let styleBlock = '';
+        switch (this.structure) {
+            case 'logo':
+                styleBlock = `
+          :host {
+            --emw-skeleton-logo-width: ${this.width};
+            --emw-skeleton-logo-height: ${this.height};
+            --emw-skeleton-logo-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-logo-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-logo-margin-top: ${this.marginTop}px;
+            --emw-skeleton-logo-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-logo-margin-right: ${this.marginRight}px;
+            --emw-skeleton-logo-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'image':
+                styleBlock = `
+          :host {
+            --emw-skeleton-image-width: ${this.width};
+            --emw-skeleton-image-height: ${this.height};
+            --emw-skeleton-image-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-image-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-image-margin-top: ${this.marginTop}px;
+            --emw-skeleton-image-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-image-margin-right: ${this.marginRight}px;
+            --emw-skeleton-image-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'title':
+                styleBlock = `
+          :host {
+            --emw-skeleton-title-width: ${this.width};
+            --emw-skeleton-title-height: ${this.height};
+            --emw-skeleton-title-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-title-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-title-margin-top: ${this.marginTop}px;
+            --emw-skeleton-title-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-title-margin-right: ${this.marginRight}px;
+            --emw-skeleton-title-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'text':
+                styleBlock = `
+          :host {
+            --emw-skeleton-text-width: ${this.width};
+            --emw-skeleton-text-height: ${this.height};
+            --emw-skeleton-text-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-text-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-text-margin-top: ${this.marginTop}px;
+            --emw-skeleton-text-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-text-margin-right: ${this.marginRight}px;
+            --emw-skeleton-text-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'rectangle':
+                styleBlock = `
+          :host {
+            --emw-skeleton-rectangle-width: ${this.width};
+            --emw-skeleton-rectangle-height: ${this.height};
+            --emw-skeleton-rectangle-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-rectangle-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-rectangle-margin-top: ${this.marginTop}px;
+            --emw-skeleton-rectangle-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-rectangle-margin-right: ${this.marginRight}px;
+            --emw-skeleton-rectangle-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'circle':
+                styleBlock = `
+          :host {
+            --emw-skeleton-circle-size: ${this.size};
+            --emw-skeleton-circle-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            default:
+                styleBlock = '';
+        }
+        return (index.h(index.Host, { key: '3bb792a149db7fe732d5cbfa092cdb4d6ca0689e' }, index.h("style", { key: 'a4607599b60659f385ae2660513e38b383739674' }, styleBlock), this.handleStructure(this.structure)));
+    }
+    static get watchers() { return {
+        "structure": ["handleStructureChange"]
+    }; }
+};
+UiSkeleton.style = UiSkeletonStyle0;
+
+exports.pam_login = pamLogin.PamLogin;
+exports.ui_skeleton = UiSkeleton;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,19 @@
+{
+  "entries": [
+    "components/pam-login/pam-login.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.19.2",
+    "typescriptVersion": "5.4.5"
+  },
+  "collections": [
+    {
+      "name": "@everymatrix/ui-skeleton",
+      "tags": [
+        "ui-skeleton"
+      ]
+    }
+  ],
+  "bundles": []
+}

package/dist/collection/components/pam-login/index.js

@@ -0,0 +1 @@
+export { PamLogin } from './pam-login';

package/dist/collection/components/pam-login/pam-login.css

@@ -0,0 +1,206 @@
+:host {
+  display: block;
+  font-family: "Roboto", sans-serif;
+}
+
+section {
+  height: 100%;
+  width: 100%;
+  background-position: center;
+  background-size: cover;
+}
+
+.FormValue {
+  width: 100%;
+}
+
+.FormBox {
+  height: 100%;
+  display: flex;
+  position: relative;
+  background: none;
+  border: none;
+  justify-content: center;
+  align-items: center;
+}
+
+.InputBox {
+  position: relative;
+  margin: 30px 0;
+  width: 100%;
+  border-bottom: 2px solid var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));
+}
+.InputBox .PhoneInputBox {
+  display: flex;
+  flex-direction: row;
+}
+.InputBox .PhoneInputBox .PhoneBox {
+  position: relative;
+  width: 100%;
+}
+.InputBox .PhoneInputBox .PrefixBox {
+  position: relative;
+  width: fit-content;
+}
+.InputBox.InputInvalidBox .PasswordVisibilityIcon {
+  fill: var(--emfw-w-color-error, var(--emw--color-red, #FD2839));
+}
+.InputBox.InputInvalidBox input {
+  color: var(--emfw-w-color-error, var(--emw--color-red, #FD2839));
+}
+.InputBox.InputInvalidBox::after {
+  content: "";
+  height: 2px;
+  width: 100%;
+  transition: width 0.6s linear;
+  background: var(--emfw-w-color-error, var(--emw--color-red, #FD2839));
+}
+.InputBox::after {
+  content: "";
+  display: block;
+  width: 0;
+  height: 2px;
+  position: relative;
+  top: 2px;
+}
+.InputBox .PasswordVisibilityIcon {
+  fill: var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));
+}
+.InputBox .InputIcon .TogglePasswordVisibility {
+  cursor: pointer;
+  position: absolute;
+  top: 18px;
+  right: 0;
+}
+.InputBox .InputIcon .TogglePasswordVisibility.PasswordVisible {
+  top: 19.5px;
+}
+.InputBox label {
+  position: absolute;
+  top: 50%;
+  left: 5px;
+  transform: translateY(-50%);
+  color: var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));
+  font-size: var(--emw--font-size-medium, 16px);
+  pointer-events: none;
+  transition: 0.5s;
+}
+.InputBox label.FieldInvalid {
+  color: #C23135;
+}
+.InputBox input {
+  width: 100%;
+  height: 50px;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-size: var(--emw--font-size-medium, 16px);
+  padding: 0 35px 0 5px;
+  color: var(--emw--registration-typography, var(--emw--color-typography, #000000));
+  box-sizing: border-box;
+}
+
+/* animations: start */
+input:focus ~ label,
+label.FieldFilledIn {
+  top: -3px;
+  font-size: var(--emw--font-size-x-small, 16px);
+}
+
+vaadin-combo-box:focus-within ~ label,
+label.FieldFilledIn {
+  top: -3px;
+  font-size: var(--emw--font-size-x-small, 16px);
+}
+
+/* animation:end */
+.ForgotPassword button {
+  margin: -10px 0 17px;
+  font-size: var(--emw--font-size-medium, 16px);
+  color: var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));
+  display: flex;
+  justify-content: space-between;
+  background-color: transparent;
+  padding: 0;
+  height: unset;
+  border: 0;
+  cursor: pointer;
+}
+
+.SubmitCredentials {
+  display: block;
+  margin: 0 auto;
+  outline: none;
+  cursor: pointer;
+  background: var(--emw--color-primary, #0E5924);
+  border-radius: var(--emw--button-border-radius, 10px);
+  padding: 10px 20px;
+  font-size: var(--emw--font-size-large, 20px);
+  font-family: var(--emw--button-typography);
+  color: var(--emw--button-text-color, #FFFFFF);
+}
+.SubmitCredentials:disabled {
+  background: var(--emw--color-primary, #0E5924);
+  opacity: 0.4;
+  cursor: default;
+}
+
+.InvalidField {
+  position: absolute;
+  color: var(--emfw-w-color-error, var(--emw--color-red, #FD2839));
+  font-size: var(--emw--font-size-x-small, 12px);
+}
+
+.SubmitCredentials {
+  margin-bottom: 20px;
+}
+
+.CredentialsError {
+  color: var(--emfw-w-color-error, var(--emw--color-red, #FD2839));
+  font-size: var(--emw--font-size-x-small, 12px);
+  padding: 0 0 20px 0;
+  margin: 0;
+}
+.CredentialsError input {
+  color: var(--emfw-w-color-error, var(--emw--color-red, #FD2839));
+}
+
+/* Responsiveness:Start */
+@media screen and (max-width: 480px) {
+  .FormBox {
+    width: 100%;
+    border-radius: 0px;
+  }
+}
+/* Responsiveness:End */
+.LoadingSkeleton {
+  width: 100%;
+  height: 100%;
+}
+.LoadingSkeleton .Form {
+  display: flex;
+  flex-direction: column;
+  gap: 50px;
+  width: 100%;
+  height: 100%;
+}
+.LoadingSkeleton .Form .ButtonReturn {
+  width: 150px;
+  height: 30px;
+  margin-top: 15px;
+  display: block;
+}
+.LoadingSkeleton .Form .FieldsSection {
+  display: block;
+}
+.LoadingSkeleton .Form .FieldsSection .FieldContainer .FieldTitle {
+  width: 150px;
+  margin-top: 30px;
+  margin-bottom: 15px;
+}
+.LoadingSkeleton .Form .ButtonsSection .Button {
+  border-radius: 50px;
+  background: transparent;
+  border: none;
+  overflow: hidden;
+}