@everymatrix/player-lugas-limit 1.72.0 → 1.72.2

package/dist/cjs/{index-0a905cca.js → index-bf3197ee.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'player-lugas-limit';
-const BUILD = /* player-lugas-limit */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: false, propMutable: false, propNumber: false, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* player-lugas-limit */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: false, propMutable: false, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -668,6 +668,12 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   const oldVNode = hostRef.$vnode$ || newVNode(null, null);
   const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
   hostTagName = hostElm.tagName;
+  if (cmpMeta.$attrsToReflect$) {
+    rootVnode.$attrs$ = rootVnode.$attrs$ || {};
+    cmpMeta.$attrsToReflect$.map(
+      ([propName, attribute]) => rootVnode.$attrs$[attribute] = hostElm[propName]
+    );
+  }
   if (isInitialLoad && rootVnode.$attrs$) {
     for (const key of Object.keys(rootVnode.$attrs$)) {
       if (hostElm.hasAttribute(key) && !["key", "ref", "style", "class"].includes(key)) {
@@ -927,8 +933,12 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
         /* @__PURE__ */ new Set([
           ...Object.keys((_b = cmpMeta.$watchers$) != null ? _b : {}),
           ...members.filter(([_, m]) => m[0] & 15 /* HasAttribute */).map(([propName, m]) => {
+            var _a2;
             const attrName = m[1] || propName;
             attrNameToPropName.set(attrName, propName);
+            if (m[0] & 512 /* ReflectAttr */) {
+              (_a2 = cmpMeta.$attrsToReflect$) == null ? void 0 : _a2.push([propName, attrName]);
+            }
             return attrName;
           })
         ])
@@ -1092,6 +1102,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       {
         cmpMeta.$members$ = compactMeta[2];
       }
+      {
+        cmpMeta.$attrsToReflect$ = [];
+      }
       {
         cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
       }

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a905cca.js');
+const index = require('./index-bf3197ee.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([["player-lugas-limit.cjs",[[1,"player-lugas-limit",{"userId":[1,"user-id"],"session":[1],"endpoint":[1],"currency":[1],"amount":[1],"lang":[1],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"mbSource":[1,"mb-source"],"translationUrl":[1,"translation-url"],"isLoading":[32],"showCustomAmount":[32],"isSubmitted":[32],"isUseExistingLimitOptionActive":[32],"selectedPredefinedAmount":[32],"errorMessageOnInitialization":[32],"errorMessageOnSubmit":[32],"errorMessageOnInput":[32],"hasLugasError":[32],"newAmount":[32]},null,{"translationUrl":["handleNewTranslations"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"]}]]]], options);
+  return index.bootstrapLazy([["player-lugas-limit.cjs",[[1,"player-lugas-limit",{"userId":[513,"user-id"],"session":[513],"endpoint":[513],"currency":[513],"flow":[513],"amount":[513],"lang":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"mbSource":[513,"mb-source"],"translationUrl":[513,"translation-url"],"hasValidation":[32],"kycStep":[32],"isLoading":[32],"regularDepositLimitAmount":[32],"isSubmitted":[32],"isUseExistingLimitOptionActive":[32],"selectedPredefinedAmount":[32],"errorMessageOnInitialization":[32],"errorMessageOnSubmit":[32],"errorMessageOnInput":[32],"hasLugasError":[32],"showCustomAmount":[32],"newAmount":[32]},null,{"translationUrl":["handleNewTranslations"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/player-lugas-limit.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a905cca.js');
+const index = require('./index-bf3197ee.js');
 
 const DEFAULT_LANGUAGE = 'de';
 let TRANSLATIONS = {
@@ -25,12 +25,20 @@ let TRANSLATIONS = {
         LugasNotSet: 'No deposit limit set. Please enter a new limit.',
         loading: 'Loading, please wait ...',
         error: 'It was an error while trying to fetch the data',
-        LugasF1002Error: 'We were unable to set your cross-provider deposit limit at LUGAS due to a technical error. Please <a href="https://here-will-be-the-support-link/">contact our support team</a> and provide error code F1002. We\'ll be happy to assist you in resolving this issue.'
+        kyc1: 'All deposit limit changes must be reported to LUGAS in accordance with regulatory requirements. Please note that decreases in the limit will take effect immediately, while increases will only come into effect after 8 days at the latest.',
+        kyc2: 'We were able to set your monthly deposit limit to <b>{amount} {currency}</b>. For the selected limit, we require documents that show your economic capacity. Please upload your last payslip as well as a current bank statement, including the balance, that confirms that you received the payment.',
+        kyc3: 'We have transmitted your desired limit to Lugas Please be aware that the limit will only come into effect after 8 days at the latest.',
+        kycThanks: 'Thank you!',
+        kycSure: 'Are you sure?',
+        setNewLimit: 'SET NEW LIMIT',
+        keepExistingLimit: 'KEEP EXISTING LIMIT',
+        Close: 'CLOSE',
+        UploadDocuments: 'UPLOAD DOCUMENTS',
     },
     de: {
         LugasSetLimitDialogTitle: 'Monatliches zentrales Einzahlungslimit',
         LugasInfoBox: 'Das zentrale Limit ist Ihr monatliches Einzahlungslimit für alle lizenzierten Websites in Deutschland. Beachten Sie, dass sich Ihr Limit und der verbleibende Betrag ändern können, wenn Sie auf anderen Websites Einzahlungen vornehmen oder Ihr Limit anpassen.',
-        ChooseLimit: 'Limit wählen',
+        ChooseLimit: 'Choose Limit',
         ButtonCustomValue: 'Eigener',
         ButtonMax: 'Max',
         LugasSetLimitDialogButtonSetLimit: 'LIMIT SETZEN {amount} {currency}',
@@ -44,9 +52,17 @@ let TRANSLATIONS = {
             link: 'klicken Sie hier',
         },
         LugasNotSet: 'Kein Einzahlungslimit festgelegt. Bitte geben Sie ein neues Limit ein.',
-        loading: 'Laden, bitte warten ...',
-        error: 'Beim Versuch, die Daten abzurufen, ist ein Fehler aufgetreten',
-        LugasF1002Error: 'Ihr anbieterübergreifendes Einzahlungslimit konnte aufgrund eines technischen Fehlers nicht in der LUGAS-Datenbank festgelegt werden. Bitte <a href="https://here-will-be-the-support-link/">wenden Sie sich an unseren Kundenservice</a> unter Angabe des Fehlercodes F1002. Wir helfen Ihnen dann gerne weiter.'
+        loading: "Lade, bitte warten ...",
+        error: "Beim Laden der Daten ist ein Fehler aufgetreten.",
+        kyc1: "Alle Änderungen des Einzahlungslimits müssen gemäß den gesetzlichen Anforderungen an LUGAS gemeldet werden. Bitte beachten Sie, dass eine Senkung des Limits sofort wirksam wird, während eine Erhöhung spätestens nach 8 Tagen in Kraft tritt.",
+        kyc2: "Wir konnten Ihr monatliches Einzahlungslimit auf <b>{amount} {currency}</b> festlegen. Für das gewählte Limit benötigen wir Nachweise über Ihre wirtschaftliche Leistungsfähigkeit. Bitte laden Sie Ihre letzte Gehaltsabrechnung sowie einen aktuellen Kontoauszug, einschließlich Kontostand, hoch, der den Zahlungseingang bestätigt.",
+        kyc3: "Wir haben Ihr gewünschtes Limit an LUGAS übermittelt. Bitte beachten Sie, dass das Limit spätestens nach 8 Tagen in Kraft tritt.",
+        kycThanks: "Vielen Dank!",
+        kycSure: "Sind Sie sicher?",
+        setNewLimit: "NEUES LIMIT FESTLEGEN",
+        keepExistingLimit: "AKTUELLES LIMIT BEIBEHALTEN",
+        Close: "SCHLIESSEN",
+        UploadDocuments: "DOKUMENTE HOCHLADEN"
     },
 };
 const getTranslations = (url) => {
@@ -141,73 +157,44 @@ function setStreamStyling(stylingContainer, domain, subscription) {
   }
 }
 
-const playerLugasLimitCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");\n:host {\n  font-family: \"Roboto\", sans-serif;\n}\n\n.ModalContainer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: var(--emw--font-size-small, 12px);\n  container-type: inline-size;\n}\n.ModalContainer hr {\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  margin: 10px 0px;\n}\n.ModalContainer p {\n  margin: 0;\n}\n.ModalContainer button {\n  width: 100%;\n  border: 1px solid var(--emw--color-gray-100, #E8E9EB);\n  padding: 10px 0;\n  cursor: pointer;\n  width: 100%;\n  border-radius: var(--emw--border-radius-small, 4px);\n}\n.ModalContainer button.PrimaryButton {\n  background: var(--emw--color-primary, #6BB816);\n  border: none;\n  font-weight: 500;\n}\n.ModalContainer button.PrimaryButton:not(:disabled) {\n  color: var(--emw--color-white, #FFF);\n}\n.ModalContainer button.PrimaryButton:disabled {\n  cursor: default;\n}\n.ModalContainer .Container {\n  position: fixed;\n  top: 30vh;\n  width: 320px;\n  background: var(--emw--color-white, #fff);\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  transform: scale(1.1);\n  border-radius: 4px;\n  overflow: hidden;\n}\n.ModalContainer .ValidatorContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.ModalContainer .Paragraphs:not(:last-child) {\n  margin-bottom: 20px;\n}\n.ModalContainer .ModalHeader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background-color: var(--emw--color-gray-50, #F7F8FA);\n  padding: 12px;\n}\n.ModalContainer .ModalHeader h2 {\n  font-weight: bold;\n  font-size: var(--emw--font-size-small, 12px);\n  margin: 0;\n}\n.ModalContainer .ModalBody {\n  background: var(--emw--color-white, #FFF);\n  padding: 12px;\n  container-type: inline-size;\n  border-radius: 4px;\n}\n.ModalContainer .ModalBody .ErrorContainer {\n  display: flex;\n  align-items: center;\n  color: var(--emw--color-red-100, #E10014);\n  border-bottom: 1px solid var(--emw--color-gray-100, #E8E9EB);\n  margin: -12px;\n  padding: 12px;\n  margin-bottom: 12px;\n  font-weight: bold;\n  position: relative;\n  background: linear-gradient(180deg, var(--emw--color-gray-100, #E8E9EB) 0%, rgba(255, 255, 255, 0.47) 30%);\n}\n.ModalContainer .ModalBody .DismissError {\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n}\n.ModalContainer .ModalBody .ErrorParagraph {\n  display: flex;\n  align-items: center;\n}\n.ModalContainer .ModalBody .ErrorIcon {\n  background: linear-gradient(180deg, var(--emw--color-red-100, #E10014) 0%, var(--emw--color-red-150, #D60080) 100%);\n  text-align: center;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: 6px;\n  flex-shrink: 0;\n}\n.ModalContainer .ModalBody .ErrorIcon svg {\n  width: 6px;\n  height: 6px;\n}\n.ModalContainer .ModalBody .ErrorIcon svg path {\n  fill: var(--emw--color-white, #FFF);\n}\n.ModalContainer .ModalBody .ChooseLimitLabel {\n  text-transform: uppercase;\n}\n.ModalContainer .ModalBody .LimitAmountWrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  position: relative;\n}\n.ModalContainer .ModalBody .PredefinedAmounts {\n  display: flex;\n  justify-content: space-between;\n}\n.ModalContainer .ModalBody .PredefinedAmounts button {\n  background: none;\n  margin: -1px 0 0 -1px;\n  color: var(--emw--color-gray-150, #808080);\n}\n.ModalContainer .ModalBody .PredefinedAmounts button.Active {\n  font-weight: bold;\n  background: var(--emw--color-gray-50, #F7F8FA);\n  color: var(--emw--color-gray-200, #323233);\n}\n.ModalContainer .ModalBody .PredefinedAmounts button:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.ModalContainer .ModalBody .PredefinedAmounts button:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.ModalContainer .ModalBody .CustomAmountInput {\n  width: 100%;\n  padding: 10px;\n  border: 1px solid var(--emw--color-gray-100, #E8E9EB);\n  border-radius: 4px;\n  box-sizing: border-box;\n  margin-bottom: 6px;\n  color: var(--emw--color-gray-200, #323233);\n  font-weight: bold;\n}\n.ModalContainer .ModalBody .CustomAmountInput.InvalidInput {\n  border: 1px solid var(--emw--color-red, #FF0000);\n}\n.ModalContainer .ModalBody .InvalidParagraph {\n  font-size: var(--emw--font-size-small, 12px);\n  color: var(--emw--color-red, #FF0000);\n}\n.ModalContainer .ModalBody .SetLimitBtn {\n  margin-top: 10px;\n}\n.ModalContainer .ModalFooter {\n  padding-top: 12px;\n  margin: 5px 0px;\n}\n.ModalContainer .Link {\n  color: inherit;\n  text-decoration: underline;\n  cursor: pointer;\n}\n.ModalContainer .Link.Inactive {\n  cursor: default;\n  color: var(--emw--color-gray-150, #808080);\n}\n.ModalContainer .PrivacyNote {\n  font-size: var(--emw--font-size-x-small, 10px);\n  font-style: italic;\n}\n.ModalContainer .ExistingLimit {\n  margin-bottom: 15px;\n}\n\ninput {\n  /* Firefox */\n  -moz-appearance: textfield;\n  /* Chrome, Safari, Edge, Opera */\n}\ninput::-webkit-outer-spin-button, input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n@container (max-width: 1300px) {\n  .ModalContainer .Container {\n    width: 50%;\n  }\n}\n@container (max-width: 800px) {\n  .ModalContainer .Container {\n    width: 70%;\n  }\n}\n.LoadingWrapper {\n  width: 100%;\n  height: 100%;\n  background: rgba(255, 255, 255, 0.8);\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.spinner {\n  animation: rotate 2s linear infinite;\n  z-index: 2;\n  width: 30px;\n  height: 30px;\n}\n.spinner .path {\n  stroke: var(--emw--color-primary, #6BB816);\n  stroke-linecap: round;\n  animation: dash 1.5s ease-in-out infinite;\n}\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n@keyframes dash {\n  0% {\n    stroke-dasharray: 1, 150;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -35;\n  }\n  100% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -124;\n  }\n}";
+const playerLugasLimitCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");\n:host {\n  font-family: \"Roboto\", sans-serif;\n}\n\n.ModalContainer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background-color: var(--emw--color-black-transparency-50, rgba(0, 0, 0, 0.5));\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: var(--emw--font-size-small, 12px);\n  container-type: inline-size;\n}\n.ModalContainer hr {\n  border: 1px solid var(--emw--color-black-transparency-10, rgba(0, 0, 0, 0.1));\n  margin: 10px 0px;\n}\n.ModalContainer p {\n  margin: 0;\n}\n.ModalContainer button {\n  width: 100%;\n  border: 1px solid var(--emw--color-gray-100, #E8E9EB);\n  padding: 10px 0;\n  cursor: pointer;\n  width: 100%;\n  border-radius: var(--emw--border-radius-small, 4px);\n}\n.ModalContainer button.PrimaryButton {\n  background: var(--emw--color-primary, #6BB816);\n  border: none;\n  font-weight: 500;\n}\n.ModalContainer button.PrimaryButton:not(:disabled) {\n  color: var(--emw--color-white, #FFF);\n}\n.ModalContainer button.PrimaryButton:disabled {\n  cursor: default;\n}\n.ModalContainer .Container {\n  position: fixed;\n  top: 30vh;\n  width: 320px;\n  background: var(--emw--color-white, #FFF);\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  border-radius: 4px;\n  transform: scale(1.1);\n}\n.ModalContainer .ModalHeader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background-color: var(--emw--color-gray-50, #F7F8FA);\n  padding: 12px;\n}\n.ModalContainer .ModalHeader h2 {\n  font-weight: bold;\n  font-size: var(--emw--font-size-small, 12px);\n  margin: 0;\n}\n.ModalContainer .ModalBody {\n  background: var(--emw--color-white, #FFF);\n  padding: 12px;\n  container-type: inline-size;\n  border-radius: 4px;\n}\n.ModalContainer .ModalBody .ErrorContainer {\n  display: flex;\n  align-items: center;\n  color: var(--emw--color-red-100, #E10014);\n  border-bottom: 1px solid var(--emw--color-gray-100, #E8E9EB);\n  margin: -12px;\n  padding: 12px;\n  margin-bottom: 12px;\n  font-weight: bold;\n  position: relative;\n  background: linear-gradient(180deg, var(--emw--color-gray-100, #E8E9EB) 0%, rgba(255, 255, 255, 0.47) 30%);\n}\n.ModalContainer .ModalBody .DismissError {\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n}\n.ModalContainer .ModalBody .ErrorParagraph {\n  display: flex;\n  align-items: center;\n}\n.ModalContainer .ModalBody .ErrorIcon {\n  background: linear-gradient(180deg, var(--emw--color-red-100, #E10014) 0%, var(--emw--color-red-150, #D60080) 100%);\n  text-align: center;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: 6px;\n  flex-shrink: 0;\n}\n.ModalContainer .ModalBody .ErrorIcon svg {\n  width: 6px;\n  height: 6px;\n}\n.ModalContainer .ModalBody .ErrorIcon svg path {\n  fill: var(--emw--color-white, #FFF);\n}\n.ModalContainer .ModalBody .ChooseLimitLabel {\n  text-transform: uppercase;\n}\n.ModalContainer .ModalBody .PredefinedAmounts {\n  display: flex;\n  justify-content: space-between;\n}\n.ModalContainer .ModalBody .PredefinedAmounts button {\n  background: none;\n  margin: -1px 0 0 -1px;\n  color: var(--emw--color-gray-150, #808080);\n}\n.ModalContainer .ModalBody .PredefinedAmounts button.Active {\n  font-weight: bold;\n  background: var(--emw--color-gray-50, #F7F8FA);\n  color: var(--emw--color-gray-200, #323233);\n}\n.ModalContainer .ModalBody .PredefinedAmounts button:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.ModalContainer .ModalBody .PredefinedAmounts button:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.ModalContainer .ModalBody .CustomAmountInput {\n  width: 100%;\n  padding: 10px;\n  border: 1px solid var(--emw--color-gray-100, #E8E9EB);\n  border-radius: 4px;\n  box-sizing: border-box;\n  margin-bottom: 6px;\n  color: var(--emw--color-gray-200, #323233);\n  font-weight: bold;\n}\n.ModalContainer .ModalBody .CustomAmountInput.InvalidInput {\n  border: 1px solid var(--emw--color-red, #FF0000);\n}\n.ModalContainer .ModalBody .InvalidParagraph {\n  font-size: var(--emw--font-size-small, 12px);\n  color: var(--emw--color-red, #FF0000);\n}\n.ModalContainer .ModalBody .SetLimitBtn {\n  margin-top: 10px;\n}\n.ModalContainer .ValidatorContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.ModalContainer .Paragraphs:not(:last-child) {\n  margin-bottom: 20px;\n}\n.ModalContainer .LimitAmountWrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  position: relative;\n}\n\n.ModalFooter {\n  padding-top: 12px;\n  margin: 5px 0px;\n}\n\n.Link {\n  color: inherit;\n  text-decoration: underline;\n  cursor: pointer;\n}\n.Link.Inactive {\n  cursor: default;\n  color: var(--emw--color-gray-150, #808080);\n}\n\n.ContainerButtons {\n  display: flex;\n  justify-content: space-around;\n  gap: 10px;\n  padding-top: 5px;\n}\n.ContainerButtons .FirstButton {\n  background-color: var(--emw--color-white, #FFF);\n  font-weight: bold;\n  color: var(--emw--button-color, #002554);\n  font-size: var(--emw--font-size-small, 10px);\n  border: 2.5px solid var(--emw--button-border-color, #DEE2E6);\n  width: 100%;\n  cursor: pointer;\n}\n.ContainerButtons .SecondButton {\n  background-color: var(--emw--color-primary, #6BB816);\n  border: none;\n  cursor: pointer;\n  font-weight: bold;\n  font-size: var(--emw--font-size-small, 10px);\n  color: var(--emw--color-white, #FFF);\n  width: 100%;\n}\n.ContainerButtons button {\n  width: 240px;\n  height: 30px;\n}\n\ninput {\n  /* Firefox */\n  -moz-appearance: textfield;\n  /* Chrome, Safari, Edge, Opera */\n}\ninput::-webkit-outer-spin-button, input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n@container (max-width: 1300px) {\n  .ModalContainer .Container {\n    width: 50%;\n  }\n}\n@container (max-width: 800px) {\n  .ModalContainer .Container {\n    width: 70%;\n  }\n}\n.LoadingWrapper {\n  width: 100%;\n  height: 100%;\n  background: var(--emw--color-white-transparency-80, rgba(255, 255, 255, 0.8));\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.spinner {\n  animation: rotate 2s linear infinite;\n  z-index: 2;\n  width: 30px;\n  height: 30px;\n}\n.spinner .path {\n  stroke: var(--emw--color-primary, #6BB816);\n  stroke-linecap: round;\n  animation: dash 1.5s ease-in-out infinite;\n}\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n@keyframes dash {\n  0% {\n    stroke-dasharray: 1, 150;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -35;\n  }\n  100% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -124;\n  }\n}";
 const PlayerLugasLimitStyle0 = playerLugasLimitCss;
 
 const PlayerLugasLimit = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.closeLugasModal = index.createEvent(this, "closeLugasModal", 7);
-        /** Array of predefined limit amounts */
+        this.uploadDocuments = index.createEvent(this, "uploadDocuments", 7);
+        this.closePopup = index.createEvent(this, "closePopup", 7);
+        // Internal variables
         this.predefinedAmounts = [];
-        /** Displayed currency */
         this.displayedCurrency = '';
-        /**
-         * Submits the new monthly deposit limit set by the player.
-         * @param amount - User-defined amount
-         * @param keepLimit - Whether to keep the current limit
-         * @param isInitialLimit - Whether the limit is being set initially
-         */
-        this.submitMonthlyDepositLimit = async (amount, keepLimit = false, isInitialLimit = false) => {
-            if (keepLimit && !this.isUseExistingLimitOptionActive) {
-                return;
-            }
-            this.isSubmitted = true;
-            this.errorMessageOnSubmit = '';
-            const url = new URL(`${this.endpoint}v2/player/${this.userId}/limit/lugas`);
-            const roleLimitAmount = isInitialLimit ? this.newAmount : 0;
-            const requestBody = {
-                amount,
-                keepLimit,
-                roleLimitAmount
-            };
-            const requestOptions = {
-                method: 'POST',
-                headers: {
-                    'X-SessionId': this.session,
-                    'X-Session-Type': 'others',
-                    'Content-Type': 'application/json',
-                    'Authorization': `Bearer ${this.session}`
-                },
-                body: JSON.stringify(requestBody)
-            };
-            try {
-                const response = await fetch(url.href, requestOptions);
-                if (!response.ok) {
-                    const error = await response.json();
-                    throw error;
-                }
-                this.closeLugasModal.emit();
-            }
-            catch (error) {
-                this.handleSubmissionError(error, keepLimit);
-            }
-            finally {
-                this.isSubmitted = false;
+        this.handleClick = (input) => {
+            switch (input) {
+                case 'UploadDocuments':
+                    this.uploadDocuments.emit();
+                    window.postMessage({ type: 'uploadDocuments' }, window.location.href);
+                    break;
+                case 'Close':
+                    this.closePopup.emit();
+                    window.postMessage({ type: 'closePopup' }, window.location.href);
+                    break;
             }
         };
         this.userId = '';
         this.session = '';
         this.endpoint = '';
         this.currency = 'EUR';
+        this.flow = '';
         this.amount = '';
         this.lang = undefined;
         this.clientStyling = '';
         this.clientStylingUrl = '';
         this.mbSource = undefined;
         this.translationUrl = '';
+        this.hasValidation = true;
+        this.kycStep = undefined;
         this.isLoading = false;
-        this.showCustomAmount = false;
+        this.regularDepositLimitAmount = '';
         this.isSubmitted = false;
         this.isUseExistingLimitOptionActive = true;
         this.selectedPredefinedAmount = undefined;
@@ -215,13 +202,15 @@ const PlayerLugasLimit = class {
         this.errorMessageOnSubmit = '';
         this.errorMessageOnInput = '';
         this.hasLugasError = false;
+        this.showCustomAmount = false;
         this.newAmount = '';
     }
-    /**
-     * Watch for changes in the translation URL and fetch new translations
-     */
+    // Watchers
     handleNewTranslations() {
-        getTranslations(this.translationUrl);
+        this.isLoading = true;
+        getTranslations(this.translationUrl).then(() => {
+            this.isLoading = false;
+        });
     }
     handleClientStylingChange(newValue, oldValue) {
         if (newValue != oldValue) {
@@ -234,65 +223,84 @@ const PlayerLugasLimit = class {
                 setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
         }
     }
-    /**
-     * Lifecycle method that fetches translations when the component is loaded.
-     */
+    // Lifecycle methods
     async componentWillLoad() {
         if (this.translationUrl.length > 2) {
             await getTranslations(this.translationUrl);
         }
-        await this.getMonthlyDepositLimitConfig();
+        await this.fetchDepositLimitConfig();
         this.displayedCurrency = this.currency === 'EUR' ? '€' : this.currency;
     }
     componentDidLoad() {
-        if (this.stylingContainer) {
-            if (window.emMessageBus != undefined) {
-                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
-            }
-            else {
-                if (this.clientStyling)
-                    setClientStyling(this.stylingContainer, this.clientStyling);
-                if (this.clientStylingUrl)
-                    setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
-            }
+        if (!this.stylingContainer)
+            return;
+        if (window.emMessageBus != undefined) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+        else {
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
         }
     }
     disconnectedCallback() {
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
     }
-    /**
-     * Fetches the monthly deposit limit configuration from the API.
-     *
-     * @returns Promise - Promise that resolves when the configuration is fetched
-     */
-    async getMonthlyDepositLimitConfig() {
-        const url = new URL(`${this.endpoint}api/v1/gm/legislation/config/month-deposit-limit`);
+    async fetchDepositLimitConfig() {
         this.isLoading = true;
-        return new Promise((resolve) => {
-            fetch(url.href)
-                .then((res) => {
-                if (res.status >= 300) {
-                    throw new Error('There was an error while fetching the configuration');
-                }
-                return res.json();
-            })
-                .then((data) => {
-                this.predefinedAmounts = data.preDefinedOptions;
-                this.minAmount = data.minAmount;
-                this.maxAmount = data.maxAmount;
-                resolve(true);
-            }).catch((err) => {
-                this.errorMessageOnInitialization = translate('error', this.lang);
-                console.log(err);
-            })
-                .finally(() => this.isLoading = false);
-        });
+        try {
+            const url = new URL('/api/v1/gm/legislation/config/month-deposit-limit/', this.endpoint);
+            const response = await fetch(url.href);
+            if (!response.ok)
+                throw new Error('Failed to load config');
+            const data = await response.json();
+            this.predefinedAmounts = data.preDefinedOptions;
+            this.minAmount = data.minAmount;
+            this.maxAmount = data.maxAmount;
+        }
+        catch (error) {
+            this.errorMessageOnInitialization = translate('error', this.lang);
+            console.error(error);
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    async postPlayerSituation(userAmount, keepLimit = false, initialNewLimit = false) {
+        if (keepLimit && !this.isUseExistingLimitOptionActive)
+            return;
+        this.isSubmitted = true;
+        this.errorMessageOnSubmit = '';
+        const url = new URL(`v2/player/${this.userId}/limit/lugas/`, this.endpoint);
+        const roleLimitAmount = initialNewLimit ? this.amount : 0;
+        const body = Object.assign({ softMigration: this.flow === '1', keepLimit,
+            roleLimitAmount }, (userAmount && { amount: userAmount }));
+        const options = {
+            method: 'POST',
+            headers: {
+                'X-SessionId': this.session,
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${this.session}`
+            },
+            body: JSON.stringify(body)
+        };
+        try {
+            const response = await fetch(url.href, options);
+            if (!response.ok)
+                throw new Error(`HTTP ${response.status}`);
+            const data = await response.json();
+            this.kycStep = data.popup;
+            this.hasValidation = false;
+            this.regularDepositLimitAmount = data.regulatorDepositLimitAmount || '';
+        }
+        catch (error) {
+            this.handleSubmissionError(error, keepLimit);
+        }
+        finally {
+            this.isSubmitted = false;
+        }
     }
-    /**
-     * Handles errors during the submission of the monthly deposit limit.
-     * @param error - Error response from the server
-     * @param keepLimit - Whether the user opted to keep the current limit
-     */
     handleSubmissionError(error, keepLimit) {
         var _a, _b;
         this.errorMessageOnSubmit = translate('LugasNotSet', this.lang);
@@ -312,23 +320,34 @@ const PlayerLugasLimit = class {
             console.error('Unexpected Error:', error);
         }
     }
-    /**
-     * Handles form submission.
-     * @param event - The form submission event
-     */
+    handleAmountClick(amount) {
+        this.showCustomAmount = false;
+        this.errorMessageOnInput = '';
+        this.selectedPredefinedAmount = amount;
+        switch (amount) {
+            case 'Other':
+                this.newAmount = '';
+                this.showCustomAmount = true;
+                break;
+            case 'Max':
+                this.newAmount = this.maxAmount.toString();
+                this.showCustomAmount = true;
+                break;
+            default:
+                this.newAmount = amount;
+                this.postPlayerSituation(this.newAmount, false, true);
+                break;
+        }
+    }
     handleSubmit(event) {
         event.preventDefault();
-        if (!this.errorMessageOnInput) {
-            this.submitMonthlyDepositLimit(this.newAmount, false, true);
+        if (this.errorMessageOnInput) {
+            return;
         }
+        this.postPlayerSituation(this.newAmount, false, true);
     }
-    /**
-     * Handles input changes.
-     * @param event - The input change event
-     */
-    handleInputChange(event) {
+    handleValidatorInputChange(event) {
         this.newAmount = event.target.value;
-        // Perform validation checks
         this.isValidNumber = !isNaN(Number(this.newAmount));
         this.isWithinRange = (Number(this.newAmount) >= this.minAmount) && (Number(this.newAmount) <= this.maxAmount);
         if (!this.isWithinRange || !this.isValidNumber) {
@@ -343,68 +362,50 @@ const PlayerLugasLimit = class {
             event.target.value = this.newAmount;
         }
     }
-    /**
-     * Handles predefined amount clicks.
-     * @param amount - The predefined amount to set
-     */
-    handleAmountClick(amount) {
-        this.showCustomAmount = false;
-        this.errorMessageOnInput = '';
-        this.selectedPredefinedAmount = amount;
-        switch (amount) {
-            case 'Other':
-                this.newAmount = '';
-                this.showCustomAmount = true;
-                break;
-            case 'Max':
-                this.newAmount = this.maxAmount.toString();
-                this.showCustomAmount = true;
-                break;
+    renderKYC(step) {
+        switch (step) {
+            case 0:
+                this.handleClick('Close');
+                return;
+            case 1:
+                return (index.h("div", { class: "ValidatorContainer" }, index.h("div", { class: "Paragraphs" }, index.h("p", null, translate('kycSure', this.lang, { values: { currency: this.currency } })), index.h("p", null, translate('kyc1', this.lang, { values: { currency: this.currency } })), index.h("div", { class: "ContainerButtons" }, index.h("button", { class: "FirstButton", onClick: () => this.postPlayerSituation(this.newAmount, false) }, translate('setNewLimit', this.lang, { values: { currency: this.currency } })), index.h("button", { class: "SecondButton", onClick: () => this.postPlayerSituation(this.amount, true) }, translate('keepExistingLimit', this.lang, { values: { currency: this.currency } }))))));
+            case 2:
+                return (index.h("div", { class: "ValidatorContainer" }, index.h("div", { class: "Paragraphs" }, index.h("p", null, translate('kycThanks', this.lang, { values: { currency: this.currency } })), index.h("p", { innerHTML: translate('kyc2', this.lang, { values: { currency: this.currency, amount: this.regularDepositLimitAmount } }) }), index.h("div", { class: "ContainerButtons" }, index.h("button", { class: "FirstButton", onClick: () => this.handleClick('Close') }, translate('Close', this.lang, { values: { currency: this.currency } })), index.h("button", { class: "SecondButton", onClick: () => this.handleClick('UploadDocuments') }, translate('UploadDocuments', this.lang, { values: { currency: this.currency } }))))));
             default:
-                this.newAmount = amount;
-                this.submitMonthlyDepositLimit(this.newAmount, false, true);
-                break;
+                return (index.h("div", { class: "ValidatorContainer" }, index.h("div", { class: "Paragraphs" }, index.h("p", null, translate('kycThanks', this.lang, { values: { currency: this.currency } })), index.h("p", null, translate('kyc3', this.lang, { values: { currency: this.currency } })), index.h("div", { class: "ContainerButtons" }, index.h("button", { class: "SecondButton", onClick: () => this.handleClick('Close') }, translate('Close', this.lang, { values: { currency: this.currency } }))))));
         }
     }
-    /**
-     * Navigates to the privacy policy page.
-     */
+    renderPredefinedButtons() {
+        return this.predefinedAmounts.map((currentAmount) => (index.h("button", { class: this.selectedPredefinedAmount === currentAmount ? 'Active' : '', onClick: () => this.handleAmountClick(currentAmount), disabled: this.hasLugasError }, currentAmount)));
+    }
+    ;
     goToPrivacyPolicy() {
         window.postMessage({ type: 'GoToPrivacyPolicy' });
     }
     ;
-    /**
-     * Renders the validator.
-     */
     renderValidator() {
-        const renderPredefinedButtons = () => {
-            return this.predefinedAmounts.map((currentAmount) => (index.h("button", { class: this.selectedPredefinedAmount === currentAmount ? 'Active' : '', onClick: () => this.handleAmountClick(currentAmount), disabled: this.hasLugasError }, currentAmount)));
-        };
         return (index.h("div", { class: "ValidatorContainer" }, this.errorMessageOnSubmit && (index.h("div", { class: "ErrorContainer" }, !this.hasLugasError && (index.h("span", { class: "DismissError", onClick: () => this.errorMessageOnSubmit = '' }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "9", height: "9", viewBox: "0 0 9 9", fill: "none" }, index.h("path", { d: "M8.18659 0.14708C8.37063 0.33182 8.38174 0.62421 8.21888 0.821452L8.18659 0.857219L4.87619 4.16727L8.18659 7.47732C8.27743 7.56861 8.32973 7.69132 8.33266 7.82007C8.3356 7.94883 8.28895 8.0738 8.20235 8.16913C8.11576 8.26446 7.99584 8.32288 7.86739 8.3323C7.73895 8.34172 7.61179 8.30143 7.51221 8.21975L7.47645 8.18746L4.1664 4.87706L0.856348 8.18746C0.765058 8.27831 0.64235 8.3306 0.513592 8.33354C0.384834 8.33647 0.25987 8.28982 0.164536 8.20322C0.0692018 8.11663 0.0107856 7.99671 0.00136402 7.86827C-0.00805761 7.73982 0.0322357 7.61266 0.113914 7.51308L0.146209 7.47732L3.4566 4.16727L0.146209 0.857219C0.0553613 0.765928 0.00306475 0.64322 0.000130477 0.514462C-0.0028038 0.385704 0.0438486 0.260741 0.130443 0.165407C0.217038 0.0700723 0.336953 0.0116562 0.4654 0.00223455C0.593846 -0.00718708 0.721002 0.0331062 0.820581 0.114785L0.856348 0.14708L4.1664 3.45748L7.47645 0.14708C7.52307 0.10045 7.57843 0.0634608 7.63935 0.0382248C7.70027 0.0129888 7.76557 0 7.83152 0C7.89746 0 7.96276 0.0129888 8.02368 0.0382248C8.0846 0.0634608 8.13996 0.10045 8.18659 0.14708Z", fill: "#111111" })))), index.h("p", { class: "ErrorParagraph" }, index.h("span", { class: "ErrorIcon" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "9", height: "9", viewBox: "0 0 9 9" }, index.h("path", { d: "M8.18659 0.14708C8.37063 0.33182 8.38174 0.62421 8.21888 0.821452L8.18659 0.857219L4.87619 4.16727L8.18659 7.47732C8.27743 7.56861 8.32973 7.69132 8.33266 7.82007C8.3356 7.94883 8.28895 8.0738 8.20235 8.16913C8.11576 8.26446 7.99584 8.32288 7.86739 8.3323C7.73895 8.34172 7.61179 8.30143 7.51221 8.21975L7.47645 8.18746L4.1664 4.87706L0.856348 8.18746C0.765058 8.27831 0.64235 8.3306 0.513592 8.33354C0.384834 8.33647 0.25987 8.28982 0.164536 8.20322C0.0692018 8.11663 0.0107856 7.99671 0.00136402 7.86827C-0.00805761 7.73982 0.0322357 7.61266 0.113914 7.51308L0.146209 7.47732L3.4566 4.16727L0.146209 0.857219C0.0553613 0.765928 0.00306475 0.64322 0.000130477 0.514462C-0.0028038 0.385704 0.0438486 0.260741 0.130443 0.165407C0.217038 0.0700723 0.336953 0.0116562 0.4654 0.00223455C0.593846 -0.00718708 0.721002 0.0331062 0.820581 0.114785L0.856348 0.14708L4.1664 3.45748L7.47645 0.14708C7.52307 0.10045 7.57843 0.0634608 7.63935 0.0382248C7.70027 0.0129888 7.76557 0 7.83152 0C7.89746 0 7.96276 0.0129888 8.02368 0.0382248C8.0846 0.0634608 8.13996 0.10045 8.18659 0.14708Z" }))), index.h("div", { innerHTML: this.errorMessageOnSubmit })))), index.h("div", { class: "Paragraphs" }, index.h("p", null, translate('LugasInfoBox', this.lang))), index.h("div", { class: "LimitAmountWrapper" }, this.isSubmitted
             && index.h("slot", { name: 'spinner' })
-            && index.h("div", { class: "LoadingWrapper" }, index.h("svg", { class: "spinner", viewBox: "0 0 50 50" }, index.h("circle", { class: "path", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "5" }))), index.h("p", { class: "ChooseLimitLabel" }, translate('ChooseLimit', this.lang)), index.h("div", { class: "PredefinedAmounts" }, index.h("button", { class: this.selectedPredefinedAmount === 'Other' ? 'Active' : '', onClick: () => this.handleAmountClick('Other') }, translate('ButtonCustomValue', this.lang)), renderPredefinedButtons(), index.h("button", { class: this.selectedPredefinedAmount === 'Max' ? 'Active' : '', onClick: () => this.handleAmountClick('Max') }, translate('ButtonMax', this.lang))), this.showCustomAmount && (index.h("form", { onSubmit: (event) => this.handleSubmit(event) }, this.showCustomAmount &&
-            index.h("div", null, index.h("input", { class: `CustomAmountInput ${this.errorMessageOnInput ? 'InvalidInput' : ''}`, type: "number", value: this.selectedPredefinedAmount === 'Max' ? this.maxAmount : null, step: 0.01, placeholder: "0.00", disabled: this.hasLugasError || this.selectedPredefinedAmount === 'Max', onInput: (event) => this.handleInputChange(event) }), this.errorMessageOnInput && index.h("p", { class: "InvalidParagraph" }, this.errorMessageOnInput)), this.selectedPredefinedAmount &&
+            && index.h("div", { class: "LoadingWrapper" }, index.h("svg", { class: "spinner", viewBox: "0 0 50 50" }, index.h("circle", { class: "path", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "5" }))), index.h("p", { class: "ChooseLimitLabel" }, translate('ChooseLimit', this.lang)), index.h("div", { class: "PredefinedAmounts" }, index.h("button", { class: this.selectedPredefinedAmount === 'Other' ? 'Active' : '', onClick: () => this.handleAmountClick('Other') }, translate('ButtonCustomValue', this.lang)), this.renderPredefinedButtons(), index.h("button", { class: this.selectedPredefinedAmount === 'Max' ? 'Active' : '', onClick: () => this.handleAmountClick('Max') }, translate('ButtonMax', this.lang))), this.showCustomAmount && (index.h("form", { onSubmit: (event) => this.handleSubmit(event) }, this.showCustomAmount &&
+            index.h("div", null, index.h("input", { class: `CustomAmountInput ${this.errorMessageOnInput ? 'InvalidInput' : ''}`, type: "number", value: this.selectedPredefinedAmount === 'Max' ? this.maxAmount : null, step: 0.01, placeholder: "0.00", disabled: this.hasLugasError || this.selectedPredefinedAmount === 'Max', onInput: (event) => this.handleValidatorInputChange(event) }), this.errorMessageOnInput && index.h("p", { class: "InvalidParagraph" }, this.errorMessageOnInput)), this.selectedPredefinedAmount &&
             index.h("button", { class: "PrimaryButton SetLimitBtn", type: "submit", disabled: this.hasLugasError || this.isSubmitted || !Boolean(this.newAmount) || Boolean(this.errorMessageOnInput) }, translate('LugasSetLimitDialogButtonSetLimit', this.lang, {
                 values: {
                     currency: this.displayedCurrency,
                     amount: Number.parseFloat(this.newAmount || '0').toFixed(2)
                 }
-            }))))), index.h("div", { class: "ModalFooter" }, index.h("hr", null), index.h("div", { class: "Paragraphs" }, index.h("p", { class: "ExistingLimit" }, translate('LugasSetLimitDialogExistingLimit.text', this.lang), index.h("span", { class: this.isUseExistingLimitOptionActive ? 'Link' : 'Link Inactive', onClick: () => this.submitMonthlyDepositLimit(this.amount, true) }, translate('LugasSetLimitDialogExistingLimit.link', this.lang))), index.h("p", { class: "PrivacyNote" }, translate('LugasSetLimitDialogPrivacyNote.text', this.lang), index.h("span", { class: "Link", onClick: this.goToPrivacyPolicy }, translate('LugasSetLimitDialogPrivacyNote.link', this.lang)))))));
+            })))))));
     }
-    /**
-     * Renders the component.
-     */
     render() {
+        const kycConfirmation = this.renderKYC(this.kycStep);
+        const validationContainer = this.renderValidator();
         if (this.isLoading) {
             return (index.h("div", null, index.h("p", null, translate('loading', this.lang, { values: { currency: this.currency } }))));
         }
-        else if (this.errorMessageOnInitialization) {
+        if (this.errorMessageOnInitialization) {
             return (index.h("div", null, index.h("p", null, this.errorMessageOnInitialization)));
         }
-        else {
-            const validationContainer = this.renderValidator();
-            return (index.h("div", { class: "ModalContainer", ref: el => this.stylingContainer = el }, index.h("div", { class: "Container" }, index.h("div", { class: "ModalHeader" }, index.h("h2", null, translate('LugasSetLimitDialogTitle', this.lang))), index.h("div", { class: "ModalBody" }, validationContainer))));
-        }
+        return (index.h("div", { class: "ModalContainer", ref: el => this.stylingContainer = el }, index.h("div", { class: "Container" }, index.h("div", { class: "ModalHeader" }, index.h("h2", null, translate('LugasSetLimitDialogTitle', this.lang))), index.h("div", { class: "ModalBody" }, this.hasValidation ? validationContainer : kycConfirmation, this.hasValidation &&
+            index.h("div", { class: "ModalFooter" }, index.h("hr", null), index.h("div", { class: "Paragraphs" }, index.h("p", { class: "ExistingLimit" }, translate('LugasSetLimitDialogExistingLimit.text', this.lang), index.h("span", { class: this.isUseExistingLimitOptionActive ? 'Link' : 'Link Inactive', onClick: () => this.postPlayerSituation(this.amount, true) }, translate('LugasSetLimitDialogExistingLimit.link', this.lang))), index.h("p", { class: "PrivacyNote" }, translate('LugasSetLimitDialogPrivacyNote.text', this.lang), index.h("span", { class: "Link", onClick: this.goToPrivacyPolicy }, translate('LugasSetLimitDialogPrivacyNote.link', this.lang)))))))));
     }
     static get watchers() { return {
         "translationUrl": ["handleNewTranslations"],

package/dist/cjs/player-lugas-limit.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a905cca.js');
+const index = require('./index-bf3197ee.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["player-lugas-limit.cjs",[[1,"player-lugas-limit",{"userId":[1,"user-id"],"session":[1],"endpoint":[1],"currency":[1],"amount":[1],"lang":[1],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"mbSource":[1,"mb-source"],"translationUrl":[1,"translation-url"],"isLoading":[32],"showCustomAmount":[32],"isSubmitted":[32],"isUseExistingLimitOptionActive":[32],"selectedPredefinedAmount":[32],"errorMessageOnInitialization":[32],"errorMessageOnSubmit":[32],"errorMessageOnInput":[32],"hasLugasError":[32],"newAmount":[32]},null,{"translationUrl":["handleNewTranslations"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"]}]]]], options);
+  return index.bootstrapLazy([["player-lugas-limit.cjs",[[1,"player-lugas-limit",{"userId":[513,"user-id"],"session":[513],"endpoint":[513],"currency":[513],"flow":[513],"amount":[513],"lang":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"mbSource":[513,"mb-source"],"translationUrl":[513,"translation-url"],"hasValidation":[32],"kycStep":[32],"isLoading":[32],"regularDepositLimitAmount":[32],"isSubmitted":[32],"isUseExistingLimitOptionActive":[32],"selectedPredefinedAmount":[32],"errorMessageOnInitialization":[32],"errorMessageOnSubmit":[32],"errorMessageOnInput":[32],"hasLugasError":[32],"showCustomAmount":[32],"newAmount":[32]},null,{"translationUrl":["handleNewTranslations"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;