@everymatrix/player-account-controller-nd 1.59.2 → 1.59.99

package/stencil/password-input_2-5nC89CMj.js

@@ -0,0 +1,311 @@
+import { r as p, c as d, h as i, g as h } from "./index-9cd44522-BOHK5Ehb.js";
+import { t as n } from "./locale-ioQf6ZrW.js";
+import { t as u } from "./tooltipIcon-ee9760a8-BCCb4EU-.js";
+import { P as x } from "./player-change-password-gm2-039e300e-D4KfL3dW.js";
+const c = `*,
+*::before,
+*::after {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.password {
+  font-family: "Roboto";
+  font-style: normal;
+}
+.password__wrapper {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  container-type: inline-size;
+}
+.password__wrapper--autofilled {
+  pointer-events: none;
+}
+.password__wrapper--autofilled .password__label {
+  color: var(--emw--registration-typography, var(--emw--color-black, #000000));
+}
+.password__wrapper--autofilled .password__input::part(input-field) {
+  color: var(--emw--color-black, #000000);
+}
+.password__wrapper--flex {
+  display: flex;
+  gap: 5px;
+}
+.password__wrapper--relative {
+  position: relative;
+}
+.password__label {
+  font-family: inherit;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 20px;
+  color: var(--emw--registration-typography, var(--emw--color-black, #000000));
+}
+.password__label--required::after {
+  content: "*";
+  font-family: inherit;
+  color: var(--emw--login-color-primary, var(--emw--color-primary, #D0046C));
+  margin-left: 2px;
+}
+.password__input {
+  width: inherit;
+  border: none;
+}
+.password__input[focused]::part(input-field) {
+  border-color: var(--emw--login-color-primary, var(--emw--color-primary, #D0046C));
+}
+.password__input[invalid]::part(input-field) {
+  border: 1px solid var(--emw--color-error, var(--emw--color-red, #ed0909));
+}
+.password__input::part(input-field) {
+  border-radius: 4px;
+  background-color: var(--emw--color-white, #FFFFFF);
+  border: 1px solid var(--emw--color-gray-100, #E6E6E6);
+  color: var(--emw--color-black, #000000);
+  background-color: var(--emw--color-white, #FFFFFF);
+  font-family: inherit;
+  font-style: normal;
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 1.5;
+  position: relative;
+  margin-bottom: unset;
+  height: 44px;
+  padding: 0;
+  width: 100%;
+}
+.password__input::part(reveal-button) {
+  position: relative;
+  right: 10px;
+}
+.password__input::part(reveal-button)::before {
+  color: var(--emw--registration-typography, var(--emw--color-black, #000000));
+}
+.password__input > input {
+  padding: 5px 15px;
+}
+.password__input > input:placeholder-shown {
+  color: var(--emw--color-gray-150, #828282);
+}
+.password__error-message {
+  position: absolute;
+  top: calc(100% + 5px);
+  left: 0;
+  color: var(--emw--color-error, var(--emw--color-red, #ed0909));
+}
+.password__complexity {
+  height: 150px;
+  position: relative;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  justify-content: center;
+  margin-top: 20px;
+  font-weight: 300;
+  background: var(--emw--color-white, #FFFFFF);
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  border: 1px solid #B0B0B0;
+  box-sizing: content-box;
+  /* works only in this order */
+}
+.password__complexity meter {
+  border-color: transparent; /* Needed for Safari */
+}
+.password__complexity meter[value="1"]::-moz-meter-bar {
+  background-color: var(--emw--color-valid, #48952a);
+}
+.password__complexity meter[value="1"]::-webkit-meter-optimum-value {
+  background-color: var(--emw--color-valid, #48952a);
+}
+.password__complexity meter:not([value="1"])::-moz-meter-bar {
+  background-color: var(--emw--color-error, #FD2839);
+}
+.password__complexity meter:not([value="1"])::-webkit-meter-optimum-value {
+  background-color: var(--emw--color-error, #FD2839);
+}
+.password__complexity--strength {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+.password__complexity--strength meter::-moz-meter-bar { /* Firefox Pseudo Class */
+  background: #B0B0B0;
+}
+.password__complexity--hidden {
+  display: none;
+}
+.password__complexity--text-bold {
+  font-weight: 500;
+}
+.password__complexity--checkbox {
+  margin-right: 5px;
+}
+.password__complexity:after {
+  content: "";
+  position: absolute;
+  width: 25px;
+  height: 25px;
+  border-top: 1px solid var(--emw--color-gray-150, #828282);
+  border-right: 0 solid var(--emw--color-gray-150, #828282);
+  border-left: 1px solid var(--emw--color-gray-150, #828282);
+  border-bottom: 0 solid var(--emw--color-gray-150, #828282);
+  bottom: 92%;
+  left: 50%;
+  margin-left: -25px;
+  transform: rotate(45deg);
+  margin-top: -25px;
+  background-color: var(--emw--color-white, #FFFFFF);
+}
+@container (max-width: 300px) {
+  .password__complexity {
+    height: 190px;
+  }
+  .password__complexity:after {
+    width: 14px;
+    height: 14px;
+    bottom: 96%;
+    left: 57%;
+  }
+}
+.password__tooltip-icon {
+  width: 16px;
+  height: auto;
+}
+.password__tooltip {
+  position: absolute;
+  top: 0;
+  left: 20px;
+  background-color: var(--emw--color-white, #FFFFFF);
+  border: 1px solid var(--emw--color-gray-150, #828282);
+  color: #2B2D3F;
+  padding: 10px;
+  border-radius: 5px;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+  z-index: 10;
+}
+.password__tooltip.visible {
+  opacity: 1;
+}`, m = c, g = class {
+  constructor(e) {
+    p(this, e), this.sendOriginalValidityState = d(this, "sendOriginalValidityState", 7), this.sendValidityState = d(this, "sendValidityState", 7), this.sendInputValue = d(this, "sendInputValue", 7), this.touched = !1, this.originalValid = !1, this.validationPattern = "", this.duplicateInputValue = null, this.handleInput = (t) => {
+      this.value = t.target.value, this.calculateComplexity(this.value), this.showPopup = !0, this.touched = !0, this.debounceTime && clearTimeout(this.debounceTime), this.debounceTime = setTimeout(() => {
+        this.isValid = this.setValidity(), this.errorMessage = this.setErrorMessage(), this.emitValueHandler(!0);
+      }, 500);
+    }, this.handleRevealField = (t) => {
+      t.stopPropagation(), window.postMessage({ type: `registrationShow${this.name}` }, window.location.href);
+    }, this.handleBlur = (t) => {
+      this.value = t.target.value, this.showPopup = !1, this.touched = !0, this.isValid = this.setValidity(), this.errorMessage = this.setErrorMessage();
+    }, this.handleFocus = () => {
+      this.showPopup = !0, this.calculateComplexity(this.value);
+    }, this.setClientStyling = () => {
+      let t = document.createElement("style");
+      t.innerHTML = this.clientStyling, this.stylingContainer.prepend(t);
+    }, this.name = void 0, this.displayName = void 0, this.placeholder = void 0, this.defaultValue = "", this.autofilled = void 0, this.tooltip = void 0, this.validation = void 0, this.language = void 0, this.emitValue = void 0, this.isDuplicateInput = void 0, this.clientStyling = "", this.isValid = void 0, this.errorMessage = void 0, this.limitStylingAppends = !1, this.showTooltip = !1, this.passwordComplexity = void 0, this.showPopup = void 0, this.value = "";
+  }
+  handleStylingChange(e, t) {
+    e !== t && this.setClientStyling();
+  }
+  validityChanged() {
+    this.validityStateHandler({ valid: this.isValid, name: this.name }), this.emitValue == !0 && this.valueHandler({ name: this.name, value: this.value });
+  }
+  valueChanged() {
+    this.isDuplicateInput || (this.calculateComplexity(this.value), this.sendOriginalValidityState.emit({ name: this.name, valid: this.setValidity() }));
+  }
+  emitValueHandler(e) {
+    e == !0 && this.isValid && this.valueHandler({ name: this.name, value: this.value, type: "duplicate" });
+  }
+  validityStateHandler(e) {
+    this.sendValidityState.emit(e);
+  }
+  valueHandler(e) {
+    this.sendInputValue.emit(e);
+  }
+  originalValidityChangedHandler(e) {
+    this.isDuplicateInput && (e.detail.valid ? (this.originalValid = !0, this.isValid = this.setValidity()) : (this.originalValid = !1, this.isValid = !1, this.value !== "" && (this.errorMessage = this.setErrorMessage())));
+  }
+  valueChangedHandler(e) {
+    this.isDuplicateInput && this.name === e.detail.name + "Duplicate" && (this.duplicateInputValue = e.detail.value, this.touched && (this.isValid = this.setValidity(), this.errorMessage = this.setErrorMessage())), this.name === e.detail.name + "Duplicate" && this.name.replace("Duplicate", "") === e.detail.name && this.touched === !0 && (this.isValid = this.setValidity(), this.errorMessage = this.setErrorMessage());
+  }
+  handleClickOutside(e) {
+    e.composedPath()[0] !== this.tooltipIconReference && e.composedPath()[0] !== this.tooltipReference && (this.showTooltip = !1);
+  }
+  componentDidRender() {
+    !this.limitStylingAppends && this.stylingContainer && (this.clientStyling && this.setClientStyling(), this.limitStylingAppends = !0);
+  }
+  componentDidLoad() {
+    this.inputReference = this.element.shadowRoot.querySelector("input"), this.passwordButton = this.element.shadowRoot.querySelector("vaadin-password-field-button"), this.passwordButton.tabIndex = -1, this.passwordButton.addEventListener("click", (e) => {
+      this.handleRevealField(e);
+    }), this.defaultValue && (this.value = this.defaultValue, this.calculateComplexity(this.value), this.valueHandler({ name: this.name, value: this.value }), this.isDuplicateInput && (this.duplicateInputValue = this.defaultValue, this.touched = !0)), this.isValid = this.setValidity();
+  }
+  disconnectedCallback() {
+    this.passwordButton.removeEventListener("click", this.handleRevealField);
+  }
+  calculateComplexity(e) {
+    this.passwordComplexity = this.validation.custom.filter((t) => t.rule === "regex").map((t) => {
+      const r = new RegExp(t.pattern).test(e);
+      return { rule: t.displayName, ruleKey: t.errorKey, passed: r };
+    });
+  }
+  setValidity() {
+    var e, t;
+    return this.isDuplicateInput && this.duplicateInputValue !== this.value ? !1 : !((e = this.passwordComplexity) === null || e === void 0) && e.every((s) => s.passed) ? (t = this.inputReference) === null || t === void 0 ? void 0 : t.validity.valid : !1;
+  }
+  setPattern() {
+    var e, t;
+    if (((e = this.validation.custom) === null || e === void 0 ? void 0 : e.length) > 0)
+      return (t = this.validation.custom.find((s) => s.rule === "regex")) === null || t === void 0 ? void 0 : t.pattern;
+  }
+  setErrorMessage() {
+    var e, t, s, r;
+    if (this.isDuplicateInput && !this.originalValid)
+      return n("invalidOriginalPasswordError", this.language);
+    if (this.inputReference.validity.patternMismatch) {
+      const a = (e = this.validation.custom.find((o) => o.rule === "regex")) === null || e === void 0 ? void 0 : e.errorKey, l = (t = this.validation.custom.find((o) => o.rule === "regex")) === null || t === void 0 ? void 0 : t.errorMessage;
+      return n(`${a}`, this.language) ? n(`${a}`, this.language) : l;
+    }
+    if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong)
+      return n("lengthError", this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
+    if (this.inputReference.validity.valueMissing)
+      return n("requiredError", this.language);
+    if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
+      const a = (s = this.validation.custom.find((o) => o.rule === "duplicate-input")) === null || s === void 0 ? void 0 : s.errorKey, l = (r = this.validation.custom.find((o) => o.rule === "duplicate-input")) === null || r === void 0 ? void 0 : r.errorMessage;
+      return n(`${a}`, this.language) ? n(`${a}`, this.language) : l;
+    }
+  }
+  renderTooltip() {
+    return this.showTooltip ? i("div", { class: `password__tooltip ${this.showTooltip ? "visible" : ""}`, ref: (e) => this.tooltipReference = e, innerHTML: this.tooltip }) : null;
+  }
+  renderComplexityPopup() {
+    const e = this.passwordComplexity.length, s = this.passwordComplexity.filter((a) => a.passed).length / e, r = this.passwordComplexity.every((a) => a.passed);
+    return i("div", { class: `password__complexity ${this.showPopup ? "" : "password__complexity--hidden"}` }, i("div", { class: "password__complexity--strength" }, i("p", { class: "password__complexity--text" }, n("passwordStrength", this.language), " ", i("span", { class: "password__complexity--text-bold" }, n(`${r ? "passwordStrengthStrong" : "passwordStrengthWeak"}`, this.language))), i("meter", { value: s, min: "0", max: "1" })), i("div", null, this.passwordComplexity.map((a, l) => i("div", { key: l }, i("input", { class: "password__complexity--checkbox", type: "checkbox", checked: a.passed, disabled: !0 }), i("span", null, n(`${a.ruleKey}`, this.language) ? n(`${a.ruleKey}`, this.language) : a.rule)))));
+  }
+  render() {
+    let e = "";
+    return this.touched && (e = this.isValid == !0 || this.isValid == null ? "" : "text__input--invalid"), i("div", { key: "be707a0330de2fa306f4326a5b374d613e6633f5", class: `password__wrapper ${this.autofilled ? "password__wrapper--autofilled" : ""} ${this.name}__input`, ref: (t) => this.stylingContainer = t }, i("div", { key: "47a7b4a114f9ccf3c8e759f2c8e933b492053a18", class: "password__wrapper--flex" }, i("label", { key: "b51e602d00798e381eea83258812e70a6fe816a0", class: `password__label  ${this.validation.mandatory ? "password__label--required" : ""}`, htmlFor: `${this.name}__input` }, this.displayName), i("div", { key: "585a9dd0a701429b18d767dd19392ad2373e8ce3", class: "password__wrapper--relative" }, this.tooltip && i("img", { key: "637040e9773662b80b36b2d787511778ea12daf8", class: "password__tooltip-icon", src: u, alt: "", ref: (t) => this.tooltipIconReference = t, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), i("vaadin-password-field", { key: "1626a68548b795aeb709e5a3a7950f7a5017c787", type: "password", id: `${this.name}__input`, class: `password__input ${e}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), i("small", { key: "791e90e36bf2d67b2a2e68649dcf3052851f2769", class: "password__error-message" }, this.errorMessage), this.passwordComplexity && this.showPopup && !this.isDuplicateInput && this.renderComplexityPopup());
+  }
+  get element() {
+    return h(this);
+  }
+  static get watchers() {
+    return {
+      clientStyling: ["handleStylingChange"],
+      isValid: ["validityChanged"],
+      value: ["valueChanged"],
+      emitValue: ["emitValueHandler"]
+    };
+  }
+};
+g.style = m;
+export {
+  g as password_input,
+  x as player_change_password_gm2
+};

package/stencil/password-input_2-DJSgcWve.js

@@ -0,0 +1,311 @@
+import { r as p, c as d, h as i, g as h } from "./index-9cd44522-C8s3TvoU.js";
+import { t as n } from "./locale-ioQf6ZrW.js";
+import { t as u } from "./tooltipIcon-ee9760a8-BCCb4EU-.js";
+import { P as x } from "./player-change-password-gm2-039e300e-C_f58yBE.js";
+const c = `*,
+*::before,
+*::after {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.password {
+  font-family: "Roboto";
+  font-style: normal;
+}
+.password__wrapper {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  container-type: inline-size;
+}
+.password__wrapper--autofilled {
+  pointer-events: none;
+}
+.password__wrapper--autofilled .password__label {
+  color: var(--emw--registration-typography, var(--emw--color-black, #000000));
+}
+.password__wrapper--autofilled .password__input::part(input-field) {
+  color: var(--emw--color-black, #000000);
+}
+.password__wrapper--flex {
+  display: flex;
+  gap: 5px;
+}
+.password__wrapper--relative {
+  position: relative;
+}
+.password__label {
+  font-family: inherit;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 20px;
+  color: var(--emw--registration-typography, var(--emw--color-black, #000000));
+}
+.password__label--required::after {
+  content: "*";
+  font-family: inherit;
+  color: var(--emw--login-color-primary, var(--emw--color-primary, #D0046C));
+  margin-left: 2px;
+}
+.password__input {
+  width: inherit;
+  border: none;
+}
+.password__input[focused]::part(input-field) {
+  border-color: var(--emw--login-color-primary, var(--emw--color-primary, #D0046C));
+}
+.password__input[invalid]::part(input-field) {
+  border: 1px solid var(--emw--color-error, var(--emw--color-red, #ed0909));
+}
+.password__input::part(input-field) {
+  border-radius: 4px;
+  background-color: var(--emw--color-white, #FFFFFF);
+  border: 1px solid var(--emw--color-gray-100, #E6E6E6);
+  color: var(--emw--color-black, #000000);
+  background-color: var(--emw--color-white, #FFFFFF);
+  font-family: inherit;
+  font-style: normal;
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 1.5;
+  position: relative;
+  margin-bottom: unset;
+  height: 44px;
+  padding: 0;
+  width: 100%;
+}
+.password__input::part(reveal-button) {
+  position: relative;
+  right: 10px;
+}
+.password__input::part(reveal-button)::before {
+  color: var(--emw--registration-typography, var(--emw--color-black, #000000));
+}
+.password__input > input {
+  padding: 5px 15px;
+}
+.password__input > input:placeholder-shown {
+  color: var(--emw--color-gray-150, #828282);
+}
+.password__error-message {
+  position: absolute;
+  top: calc(100% + 5px);
+  left: 0;
+  color: var(--emw--color-error, var(--emw--color-red, #ed0909));
+}
+.password__complexity {
+  height: 150px;
+  position: relative;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  justify-content: center;
+  margin-top: 20px;
+  font-weight: 300;
+  background: var(--emw--color-white, #FFFFFF);
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  border: 1px solid #B0B0B0;
+  box-sizing: content-box;
+  /* works only in this order */
+}
+.password__complexity meter {
+  border-color: transparent; /* Needed for Safari */
+}
+.password__complexity meter[value="1"]::-moz-meter-bar {
+  background-color: var(--emw--color-valid, #48952a);
+}
+.password__complexity meter[value="1"]::-webkit-meter-optimum-value {
+  background-color: var(--emw--color-valid, #48952a);
+}
+.password__complexity meter:not([value="1"])::-moz-meter-bar {
+  background-color: var(--emw--color-error, #FD2839);
+}
+.password__complexity meter:not([value="1"])::-webkit-meter-optimum-value {
+  background-color: var(--emw--color-error, #FD2839);
+}
+.password__complexity--strength {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+.password__complexity--strength meter::-moz-meter-bar { /* Firefox Pseudo Class */
+  background: #B0B0B0;
+}
+.password__complexity--hidden {
+  display: none;
+}
+.password__complexity--text-bold {
+  font-weight: 500;
+}
+.password__complexity--checkbox {
+  margin-right: 5px;
+}
+.password__complexity:after {
+  content: "";
+  position: absolute;
+  width: 25px;
+  height: 25px;
+  border-top: 1px solid var(--emw--color-gray-150, #828282);
+  border-right: 0 solid var(--emw--color-gray-150, #828282);
+  border-left: 1px solid var(--emw--color-gray-150, #828282);
+  border-bottom: 0 solid var(--emw--color-gray-150, #828282);
+  bottom: 92%;
+  left: 50%;
+  margin-left: -25px;
+  transform: rotate(45deg);
+  margin-top: -25px;
+  background-color: var(--emw--color-white, #FFFFFF);
+}
+@container (max-width: 300px) {
+  .password__complexity {
+    height: 190px;
+  }
+  .password__complexity:after {
+    width: 14px;
+    height: 14px;
+    bottom: 96%;
+    left: 57%;
+  }
+}
+.password__tooltip-icon {
+  width: 16px;
+  height: auto;
+}
+.password__tooltip {
+  position: absolute;
+  top: 0;
+  left: 20px;
+  background-color: var(--emw--color-white, #FFFFFF);
+  border: 1px solid var(--emw--color-gray-150, #828282);
+  color: #2B2D3F;
+  padding: 10px;
+  border-radius: 5px;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+  z-index: 10;
+}
+.password__tooltip.visible {
+  opacity: 1;
+}`, m = c, g = class {
+  constructor(e) {
+    p(this, e), this.sendOriginalValidityState = d(this, "sendOriginalValidityState", 7), this.sendValidityState = d(this, "sendValidityState", 7), this.sendInputValue = d(this, "sendInputValue", 7), this.touched = !1, this.originalValid = !1, this.validationPattern = "", this.duplicateInputValue = null, this.handleInput = (t) => {
+      this.value = t.target.value, this.calculateComplexity(this.value), this.showPopup = !0, this.touched = !0, this.debounceTime && clearTimeout(this.debounceTime), this.debounceTime = setTimeout(() => {
+        this.isValid = this.setValidity(), this.errorMessage = this.setErrorMessage(), this.emitValueHandler(!0);
+      }, 500);
+    }, this.handleRevealField = (t) => {
+      t.stopPropagation(), window.postMessage({ type: `registrationShow${this.name}` }, window.location.href);
+    }, this.handleBlur = (t) => {
+      this.value = t.target.value, this.showPopup = !1, this.touched = !0, this.isValid = this.setValidity(), this.errorMessage = this.setErrorMessage();
+    }, this.handleFocus = () => {
+      this.showPopup = !0, this.calculateComplexity(this.value);
+    }, this.setClientStyling = () => {
+      let t = document.createElement("style");
+      t.innerHTML = this.clientStyling, this.stylingContainer.prepend(t);
+    }, this.name = void 0, this.displayName = void 0, this.placeholder = void 0, this.defaultValue = "", this.autofilled = void 0, this.tooltip = void 0, this.validation = void 0, this.language = void 0, this.emitValue = void 0, this.isDuplicateInput = void 0, this.clientStyling = "", this.isValid = void 0, this.errorMessage = void 0, this.limitStylingAppends = !1, this.showTooltip = !1, this.passwordComplexity = void 0, this.showPopup = void 0, this.value = "";
+  }
+  handleStylingChange(e, t) {
+    e !== t && this.setClientStyling();
+  }
+  validityChanged() {
+    this.validityStateHandler({ valid: this.isValid, name: this.name }), this.emitValue == !0 && this.valueHandler({ name: this.name, value: this.value });
+  }
+  valueChanged() {
+    this.isDuplicateInput || (this.calculateComplexity(this.value), this.sendOriginalValidityState.emit({ name: this.name, valid: this.setValidity() }));
+  }
+  emitValueHandler(e) {
+    e == !0 && this.isValid && this.valueHandler({ name: this.name, value: this.value, type: "duplicate" });
+  }
+  validityStateHandler(e) {
+    this.sendValidityState.emit(e);
+  }
+  valueHandler(e) {
+    this.sendInputValue.emit(e);
+  }
+  originalValidityChangedHandler(e) {
+    this.isDuplicateInput && (e.detail.valid ? (this.originalValid = !0, this.isValid = this.setValidity()) : (this.originalValid = !1, this.isValid = !1, this.value !== "" && (this.errorMessage = this.setErrorMessage())));
+  }
+  valueChangedHandler(e) {
+    this.isDuplicateInput && this.name === e.detail.name + "Duplicate" && (this.duplicateInputValue = e.detail.value, this.touched && (this.isValid = this.setValidity(), this.errorMessage = this.setErrorMessage())), this.name === e.detail.name + "Duplicate" && this.name.replace("Duplicate", "") === e.detail.name && this.touched === !0 && (this.isValid = this.setValidity(), this.errorMessage = this.setErrorMessage());
+  }
+  handleClickOutside(e) {
+    e.composedPath()[0] !== this.tooltipIconReference && e.composedPath()[0] !== this.tooltipReference && (this.showTooltip = !1);
+  }
+  componentDidRender() {
+    !this.limitStylingAppends && this.stylingContainer && (this.clientStyling && this.setClientStyling(), this.limitStylingAppends = !0);
+  }
+  componentDidLoad() {
+    this.inputReference = this.element.shadowRoot.querySelector("input"), this.passwordButton = this.element.shadowRoot.querySelector("vaadin-password-field-button"), this.passwordButton.tabIndex = -1, this.passwordButton.addEventListener("click", (e) => {
+      this.handleRevealField(e);
+    }), this.defaultValue && (this.value = this.defaultValue, this.calculateComplexity(this.value), this.valueHandler({ name: this.name, value: this.value }), this.isDuplicateInput && (this.duplicateInputValue = this.defaultValue, this.touched = !0)), this.isValid = this.setValidity();
+  }
+  disconnectedCallback() {
+    this.passwordButton.removeEventListener("click", this.handleRevealField);
+  }
+  calculateComplexity(e) {
+    this.passwordComplexity = this.validation.custom.filter((t) => t.rule === "regex").map((t) => {
+      const r = new RegExp(t.pattern).test(e);
+      return { rule: t.displayName, ruleKey: t.errorKey, passed: r };
+    });
+  }
+  setValidity() {
+    var e, t;
+    return this.isDuplicateInput && this.duplicateInputValue !== this.value ? !1 : !((e = this.passwordComplexity) === null || e === void 0) && e.every((s) => s.passed) ? (t = this.inputReference) === null || t === void 0 ? void 0 : t.validity.valid : !1;
+  }
+  setPattern() {
+    var e, t;
+    if (((e = this.validation.custom) === null || e === void 0 ? void 0 : e.length) > 0)
+      return (t = this.validation.custom.find((s) => s.rule === "regex")) === null || t === void 0 ? void 0 : t.pattern;
+  }
+  setErrorMessage() {
+    var e, t, s, r;
+    if (this.isDuplicateInput && !this.originalValid)
+      return n("invalidOriginalPasswordError", this.language);
+    if (this.inputReference.validity.patternMismatch) {
+      const a = (e = this.validation.custom.find((o) => o.rule === "regex")) === null || e === void 0 ? void 0 : e.errorKey, l = (t = this.validation.custom.find((o) => o.rule === "regex")) === null || t === void 0 ? void 0 : t.errorMessage;
+      return n(`${a}`, this.language) ? n(`${a}`, this.language) : l;
+    }
+    if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong)
+      return n("lengthError", this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
+    if (this.inputReference.validity.valueMissing)
+      return n("requiredError", this.language);
+    if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
+      const a = (s = this.validation.custom.find((o) => o.rule === "duplicate-input")) === null || s === void 0 ? void 0 : s.errorKey, l = (r = this.validation.custom.find((o) => o.rule === "duplicate-input")) === null || r === void 0 ? void 0 : r.errorMessage;
+      return n(`${a}`, this.language) ? n(`${a}`, this.language) : l;
+    }
+  }
+  renderTooltip() {
+    return this.showTooltip ? i("div", { class: `password__tooltip ${this.showTooltip ? "visible" : ""}`, ref: (e) => this.tooltipReference = e, innerHTML: this.tooltip }) : null;
+  }
+  renderComplexityPopup() {
+    const e = this.passwordComplexity.length, s = this.passwordComplexity.filter((a) => a.passed).length / e, r = this.passwordComplexity.every((a) => a.passed);
+    return i("div", { class: `password__complexity ${this.showPopup ? "" : "password__complexity--hidden"}` }, i("div", { class: "password__complexity--strength" }, i("p", { class: "password__complexity--text" }, n("passwordStrength", this.language), " ", i("span", { class: "password__complexity--text-bold" }, n(`${r ? "passwordStrengthStrong" : "passwordStrengthWeak"}`, this.language))), i("meter", { value: s, min: "0", max: "1" })), i("div", null, this.passwordComplexity.map((a, l) => i("div", { key: l }, i("input", { class: "password__complexity--checkbox", type: "checkbox", checked: a.passed, disabled: !0 }), i("span", null, n(`${a.ruleKey}`, this.language) ? n(`${a.ruleKey}`, this.language) : a.rule)))));
+  }
+  render() {
+    let e = "";
+    return this.touched && (e = this.isValid == !0 || this.isValid == null ? "" : "text__input--invalid"), i("div", { key: "be707a0330de2fa306f4326a5b374d613e6633f5", class: `password__wrapper ${this.autofilled ? "password__wrapper--autofilled" : ""} ${this.name}__input`, ref: (t) => this.stylingContainer = t }, i("div", { key: "47a7b4a114f9ccf3c8e759f2c8e933b492053a18", class: "password__wrapper--flex" }, i("label", { key: "b51e602d00798e381eea83258812e70a6fe816a0", class: `password__label  ${this.validation.mandatory ? "password__label--required" : ""}`, htmlFor: `${this.name}__input` }, this.displayName), i("div", { key: "585a9dd0a701429b18d767dd19392ad2373e8ce3", class: "password__wrapper--relative" }, this.tooltip && i("img", { key: "637040e9773662b80b36b2d787511778ea12daf8", class: "password__tooltip-icon", src: u, alt: "", ref: (t) => this.tooltipIconReference = t, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), i("vaadin-password-field", { key: "1626a68548b795aeb709e5a3a7950f7a5017c787", type: "password", id: `${this.name}__input`, class: `password__input ${e}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), i("small", { key: "791e90e36bf2d67b2a2e68649dcf3052851f2769", class: "password__error-message" }, this.errorMessage), this.passwordComplexity && this.showPopup && !this.isDuplicateInput && this.renderComplexityPopup());
+  }
+  get element() {
+    return h(this);
+  }
+  static get watchers() {
+    return {
+      clientStyling: ["handleStylingChange"],
+      isValid: ["validityChanged"],
+      value: ["valueChanged"],
+      emitValue: ["emitValueHandler"]
+    };
+  }
+};
+g.style = m;
+export {
+  g as password_input,
+  x as player_change_password_gm2
+};