@everymatrix/pam-player-documents 0.11.2 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/dist/cjs/index.cjs.js +1 -1
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/{pam-player-documents-bc881ad5.js → pam-player-documents-79925553.js} +43 -9
  4. package/dist/cjs/pam-player-documents.cjs.js +1 -1
  5. package/dist/cjs/pam-player-documents_2.cjs.entry.js +6 -26
  6. package/dist/collection/components/pam-player-documents/pam-player-documents.css +18 -0
  7. package/dist/collection/components/pam-player-documents/pam-player-documents.js +47 -9
  8. package/dist/esm/index.js +1 -1
  9. package/dist/esm/loader.js +1 -1
  10. package/dist/esm/{pam-player-documents-7540c613.js → pam-player-documents-6c00caa8.js} +43 -9
  11. package/dist/esm/pam-player-documents.js +1 -1
  12. package/dist/esm/pam-player-documents_2.entry.js +6 -26
  13. package/dist/pam-player-documents/index.esm.js +1 -1
  14. package/dist/pam-player-documents/pam-player-documents-6c00caa8.js +1 -0
  15. package/dist/pam-player-documents/pam-player-documents.esm.js +1 -1
  16. package/dist/pam-player-documents/pam-player-documents_2.entry.js +1 -1
  17. package/dist/types/components/pam-player-documents/pam-player-documents.d.ts +8 -0
  18. package/package.json +1 -1
  19. package/dist/pam-player-documents/pam-player-documents-7540c613.js +0 -1
package/dist/cjs/index.cjs.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const pamPlayerDocuments = require('./pam-player-documents-bc881ad5.js');
5
+ const pamPlayerDocuments = require('./pam-player-documents-79925553.js');
6
6
  require('./index-84b76e65.js');
7
7
 
8
8
 
package/dist/cjs/loader.cjs.js CHANGED
@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
8
8
  const defineCustomElements = async (win, options) => {
9
9
  if (typeof window === 'undefined') return undefined;
10
10
  await appGlobals.globalScripts();
11
- return index.bootstrapLazy([["pam-player-documents_2.cjs",[[1,"pam-player-documents",{"userId":[513,"user-id"],"session":[513],"endpoint":[513],"lang":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"isEditable":[513,"is-editable"],"isStandAlone":[513,"is-stand-alone"],"limitStylingAppends":[32],"isSkeletonLoading":[32],"isSubmitButtonAvailable":[32],"invalidFields":[32],"isMobile":[32]},null,{"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"]}]]]], options);
11
+ return index.bootstrapLazy([["pam-player-documents_2.cjs",[[1,"pam-player-documents",{"userId":[513,"user-id"],"session":[513],"endpoint":[513],"lang":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"isEditable":[513,"is-editable"],"isStandAlone":[513,"is-stand-alone"],"limitStylingAppends":[32],"isSkeletonLoading":[32],"isSubmitButtonAvailable":[32],"invalidFields":[32],"isMobile":[32],"isError":[32],"errorMessage":[32],"errorCode":[32]},null,{"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
12
12
  };
13
13
 
14
14
  exports.setNonce = index.setNonce;
package/dist/cjs/{pam-player-documents-bc881ad5.js → pam-player-documents-79925553.js} RENAMED
@@ -187,7 +187,7 @@ const isMobile = (userAgent) => {
187
187
  userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
188
188
  };
189
189
 
190
- const pamPlayerDocumentsCss = ":host {\n display: block;\n}\n\nbutton {\n font-family: var(--emw--button-typography);\n}\n\ninput, select, option {\n font-family: inherit;\n}\n\n.PlayerDocumentsWrapper {\n color: var(--emw--pam-typography, var(--emw-color-contrast, #07072A));\n background: var(--emw-color-pale, var(--emw--color-gray-50, #F1F1F1));\n padding: 50px;\n height: 100%;\n border-radius: var(--emw--border-radius-large, 10px);\n container-type: inline-size;\n opacity: 1;\n animation-name: fadeIn;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n animation-duration: 0.3s;\n}\n.PlayerDocumentsWrapper .ReturnButton {\n display: none;\n}\n.PlayerDocumentsWrapper h2 {\n font-size: var(--emw--font-size-x-large, 24px);\n color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n text-transform: capitalize;\n font-weight: var(--emw--font-weight-semibold, 500);\n}\n.PlayerDocumentsWrapper .Section {\n background: var(--emw-color-pale, var(--emw--color-gray-100, #E6E6E6));\n border-radius: var(--emw--border-radius-large, 10px);\n padding: 10px;\n margin-bottom: 10px;\n}\n.PlayerDocumentsWrapper .Section .SectionTitle {\n font-size: var(--emw--font-size-large, 20px);\n color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n text-transform: capitalize;\n font-weight: var(--emw--font-weight-semibold, 500);\n padding: 0;\n border: 0;\n margin-top: 10px;\n margin-bottom: 10px;\n background: transparent;\n cursor: pointer;\n}\n.PlayerDocumentsWrapper .Section .SectionContent {\n display: grid;\n column-gap: 50px;\n row-gap: 25px;\n grid-template-rows: auto;\n grid-template-columns: 1fr;\n padding-bottom: 30px;\n margin-top: 10px;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field {\n width: 100%;\n display: flex;\n flex-direction: column;\n /* Chrome, Safari, Edge, Opera */\n /* Firefox */\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field label {\n font-size: var(--emw--size-small, 14px);\n font-weight: var(--emw--font-weight-semibold, 500);\n margin-bottom: 5px;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field input {\n font-size: var(--emw--size-small, 14px);\n font-weight: var(--emw--font-weight-light, 300);\n color: var(--emw--pam-contrast, var(--emw-color-contrast, #07072A));\n padding: 10px;\n line-height: 16px;\n background: var(--emw-color-white, #FFFFFF);\n outline: none;\n transition-duration: var(--emw--transition-medium, 250ms);\n border: 1px solid var(--emw--color-gray-100, #353535);\n border-radius: var(--emw--border-radius-medium, 10px);\n width: 100%;\n box-sizing: border-box;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field input:focus, .PlayerDocumentsWrapper .Section .SectionContent .Field input :focus-within, .PlayerDocumentsWrapper .Section .SectionContent .Field input :focus-visible, .PlayerDocumentsWrapper .Section .SectionContent .Field input :visited {\n border: 1px solid var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n box-shadow: 0 0 0 1pt var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field input::-webkit-outer-spin-button,\n.PlayerDocumentsWrapper .Section .SectionContent .Field input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field input[type=number] {\n -moz-appearance: textfield;\n appearance: textfield;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field.Invalid input {\n border: 1px solid var(--emw-color-error, var(--emw-color-red, #FD2839));\n background: var(--emw-color-pale, #FBECF4);\n color: var(--emw-color-error, var(--emw-color-red, #FD2839));\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field .Error {\n color: var(--emw-color-error, var(--emw-color-red, #FD2839));\n font-size: var(--emw--font-size-x-small, 12px);\n line-height: 10px;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field.Disabled input {\n opacity: 0.5;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .CompoundField {\n width: 100%;\n display: flex;\n gap: 10px;\n flex-direction: row;\n}\n.PlayerDocumentsWrapper .ButtonsArea {\n grid-column-gap: 10px;\n grid-template-rows: auto;\n grid-template-columns: 1fr;\n margin-top: 20px;\n width: 50%;\n}\n.PlayerDocumentsWrapper .ButtonsArea .SaveButton {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n cursor: pointer;\n background-image: linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 20%), var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, white 30%));\n border: 2px solid var(--emw--button-border-color, #0E5924);\n color: var(--emw--button-text-color, #FFFFFF);\n border-radius: var(--emw--button-border-radius, 10px);\n font-size: var(--emw--size-standard, 16px);\n text-transform: uppercase;\n transition-duration: var(--emw--transition-medium, 250ms);\n max-width: 400px;\n min-width: 200px;\n padding: 13px 0;\n width: 100%;\n}\n.PlayerDocumentsWrapper .ButtonsArea .SaveButton:active {\n background: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n}\n.PlayerDocumentsWrapper .ButtonsArea .SaveButton.Disabled {\n opacity: 0.3;\n cursor: not-allowed;\n}\n.PlayerDocumentsWrapper.skeleton .ReturnButton {\n display: block;\n width: 200px;\n margin-top: 15px;\n margin-bottom: 20px;\n}\n.PlayerDocumentsWrapper.skeleton .Section .SectionContent {\n grid-template-columns: 1fr 1fr;\n max-height: 100%;\n overflow: hidden;\n}\n.PlayerDocumentsWrapper.skeleton .Section .SectionContent .Field {\n height: 60px;\n overflow: hidden;\n}\n.PlayerDocumentsWrapper.skeleton .ButtonsArea .SaveButton {\n width: 500px;\n border-radius: 30px;\n overflow: hidden;\n display: block;\n background-image: none;\n border: none;\n}\n@container (max-width: 425px) {\n .PlayerDocumentsWrapper {\n padding: 20px 15px;\n background: var(--emw-color-gray-50, #F9F8F8);\n max-width: unset;\n border-radius: var(--emw--border-radius-small, 5px);\n }\n .PlayerDocumentsWrapper .ReturnButton {\n color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n display: inline-flex;\n align-items: center;\n column-gap: 10px;\n margin-bottom: 10px;\n }\n .PlayerDocumentsWrapper .ReturnButton svg {\n fill: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n }\n .PlayerDocumentsWrapper .HeaderText {\n display: none;\n }\n .PlayerDocumentsWrapper h2 {\n color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n font-size: var(--emw--font-size-large, 20px);\n font-weight: var(--emw--font-weight-semibold, 500);\n }\n .PlayerDocumentsWrapper .Section .SectionContent {\n row-gap: 15px;\n grid-template-columns: 1fr;\n }\n .PlayerDocumentsWrapper .Section .SectionContent .CompoundField {\n width: 100%;\n display: flex;\n gap: 10px;\n flex-direction: column;\n }\n .PlayerDocumentsWrapper .Section .SectionTitle {\n margin-top: 5px;\n margin-bottom: 5px;\n font-size: var(--emw--font-size-medium, 16px);\n }\n .PlayerDocumentsWrapper .Section .Field label {\n color: var(--emw-color-gray-300, #58586B);\n font-size: var(--emw--size-x-small, 12px);\n font-weight: var(-emw--font-weight-normal, 400);\n }\n .PlayerDocumentsWrapper .Section .Field input {\n color: var(--emw-color-gray-300, #58586B);\n font-size: var(--emw--size-x-small, 12px);\n font-weight: var(--emw--font-weight-light, 300);\n }\n .PlayerDocumentsWrapper .ButtonsArea {\n grid-column-gap: 10px;\n width: 100%;\n grid-template-columns: 1fr 1fr;\n }\n .PlayerDocumentsWrapper .ButtonsArea .SaveButton {\n font-size: var(--emw--size-x-small, 12px);\n height: 40px;\n color: var(--emw-button-typography, var(--emw-color-white, #FFFFFF));\n }\n .PlayerDocumentsWrapper .ButtonsArea .SaveButton.Disabled {\n color: var(--emw-color-gray-300, #58586B);\n }\n .PlayerDocumentsWrapper.skeleton .Section .SectionContent {\n display: block;\n }\n .PlayerDocumentsWrapper.skeleton .Section .SectionContent .Field {\n margin-bottom: 15px;\n }\n .PlayerDocumentsWrapper.skeleton .ButtonsArea .SaveButton {\n width: 100%;\n height: 100%;\n border-radius: 20px;\n }\n}";
190
+ const pamPlayerDocumentsCss = ":host {\n display: block;\n}\n\nbutton {\n font-family: var(--emw--button-typography);\n}\n\ninput, select, option {\n font-family: inherit;\n}\n\n.errorContainer {\n font-family: \"Roboto\";\n font-style: normal;\n font-family: sans-serif;\n display: flex;\n flex-direction: column;\n gap: 24px;\n width: 100%;\n height: 100%;\n}\n.errorContainer .errorMessage {\n color: var(--emw--color-error, var(--emw--color-red, #ed0909));\n font-size: var(--emw-font-size-small, 13px);\n display: block;\n justify-content: center;\n text-align: center;\n}\n\n.PlayerDocumentsWrapper {\n color: var(--emw--pam-typography, var(--emw-color-contrast, #07072A));\n background: var(--emw-color-pale, var(--emw--color-gray-50, #F1F1F1));\n padding: 50px;\n height: 100%;\n border-radius: var(--emw--border-radius-large, 10px);\n container-type: inline-size;\n opacity: 1;\n animation-name: fadeIn;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n animation-duration: 0.3s;\n}\n.PlayerDocumentsWrapper .ReturnButton {\n display: none;\n}\n.PlayerDocumentsWrapper h2 {\n font-size: var(--emw--font-size-x-large, 24px);\n color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n text-transform: capitalize;\n font-weight: var(--emw--font-weight-semibold, 500);\n}\n.PlayerDocumentsWrapper .Section {\n background: var(--emw-color-pale, var(--emw--color-gray-100, #E6E6E6));\n border-radius: var(--emw--border-radius-large, 10px);\n padding: 10px;\n margin-bottom: 10px;\n}\n.PlayerDocumentsWrapper .Section .SectionTitle {\n font-size: var(--emw--font-size-large, 20px);\n color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n text-transform: capitalize;\n font-weight: var(--emw--font-weight-semibold, 500);\n padding: 0;\n border: 0;\n margin-top: 10px;\n margin-bottom: 10px;\n background: transparent;\n cursor: pointer;\n}\n.PlayerDocumentsWrapper .Section .SectionContent {\n display: grid;\n column-gap: 50px;\n row-gap: 25px;\n grid-template-rows: auto;\n grid-template-columns: 1fr;\n padding-bottom: 30px;\n margin-top: 10px;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field {\n width: 100%;\n display: flex;\n flex-direction: column;\n /* Chrome, Safari, Edge, Opera */\n /* Firefox */\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field label {\n font-size: var(--emw--size-small, 14px);\n font-weight: var(--emw--font-weight-semibold, 500);\n margin-bottom: 5px;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field input {\n font-size: var(--emw--size-small, 14px);\n font-weight: var(--emw--font-weight-light, 300);\n color: var(--emw--pam-contrast, var(--emw-color-contrast, #07072A));\n padding: 10px;\n line-height: 16px;\n background: var(--emw-color-white, #FFFFFF);\n outline: none;\n transition-duration: var(--emw--transition-medium, 250ms);\n border: 1px solid var(--emw--color-gray-100, #353535);\n border-radius: var(--emw--border-radius-medium, 10px);\n width: 100%;\n box-sizing: border-box;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field input:focus, .PlayerDocumentsWrapper .Section .SectionContent .Field input :focus-within, .PlayerDocumentsWrapper .Section .SectionContent .Field input :focus-visible, .PlayerDocumentsWrapper .Section .SectionContent .Field input :visited {\n border: 1px solid var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n box-shadow: 0 0 0 1pt var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field input::-webkit-outer-spin-button,\n.PlayerDocumentsWrapper .Section .SectionContent .Field input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field input[type=number] {\n -moz-appearance: textfield;\n appearance: textfield;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field.Invalid input {\n border: 1px solid var(--emw-color-error, var(--emw-color-red, #FD2839));\n background: var(--emw-color-pale, #FBECF4);\n color: var(--emw-color-error, var(--emw-color-red, #FD2839));\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field .Error {\n color: var(--emw-color-error, var(--emw-color-red, #FD2839));\n font-size: var(--emw--font-size-x-small, 12px);\n line-height: 10px;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field.Disabled input {\n opacity: 0.5;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .CompoundField {\n width: 100%;\n display: flex;\n gap: 10px;\n flex-direction: row;\n}\n.PlayerDocumentsWrapper .ButtonsArea {\n grid-column-gap: 10px;\n grid-template-rows: auto;\n grid-template-columns: 1fr;\n margin-top: 20px;\n width: 50%;\n}\n.PlayerDocumentsWrapper .ButtonsArea .SaveButton {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n cursor: pointer;\n background-image: linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 20%), var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, white 30%));\n border: 2px solid var(--emw--button-border-color, #0E5924);\n color: var(--emw--button-text-color, #FFFFFF);\n border-radius: var(--emw--button-border-radius, 10px);\n font-size: var(--emw--size-standard, 16px);\n text-transform: uppercase;\n transition-duration: var(--emw--transition-medium, 250ms);\n max-width: 400px;\n min-width: 200px;\n padding: 13px 0;\n width: 100%;\n}\n.PlayerDocumentsWrapper .ButtonsArea .SaveButton:active {\n background: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n}\n.PlayerDocumentsWrapper .ButtonsArea .SaveButton.Disabled {\n opacity: 0.3;\n cursor: not-allowed;\n}\n.PlayerDocumentsWrapper.skeleton .ReturnButton {\n display: block;\n width: 200px;\n margin-top: 15px;\n margin-bottom: 20px;\n}\n.PlayerDocumentsWrapper.skeleton .Section .SectionContent {\n grid-template-columns: 1fr 1fr;\n max-height: 100%;\n overflow: hidden;\n}\n.PlayerDocumentsWrapper.skeleton .Section .SectionContent .Field {\n height: 60px;\n overflow: hidden;\n}\n.PlayerDocumentsWrapper.skeleton .ButtonsArea .SaveButton {\n width: 500px;\n border-radius: 30px;\n overflow: hidden;\n display: block;\n background-image: none;\n border: none;\n}\n@container (max-width: 425px) {\n .PlayerDocumentsWrapper {\n padding: 20px 15px;\n background: var(--emw-color-gray-50, #F9F8F8);\n max-width: unset;\n border-radius: var(--emw--border-radius-small, 5px);\n }\n .PlayerDocumentsWrapper .ReturnButton {\n color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n display: inline-flex;\n align-items: center;\n column-gap: 10px;\n margin-bottom: 10px;\n }\n .PlayerDocumentsWrapper .ReturnButton svg {\n fill: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n }\n .PlayerDocumentsWrapper .HeaderText {\n display: none;\n }\n .PlayerDocumentsWrapper h2 {\n color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n font-size: var(--emw--font-size-large, 20px);\n font-weight: var(--emw--font-weight-semibold, 500);\n }\n .PlayerDocumentsWrapper .Section .SectionContent {\n row-gap: 15px;\n grid-template-columns: 1fr;\n }\n .PlayerDocumentsWrapper .Section .SectionContent .CompoundField {\n width: 100%;\n display: flex;\n gap: 10px;\n flex-direction: column;\n }\n .PlayerDocumentsWrapper .Section .SectionTitle {\n margin-top: 5px;\n margin-bottom: 5px;\n font-size: var(--emw--font-size-medium, 16px);\n }\n .PlayerDocumentsWrapper .Section .Field label {\n color: var(--emw-color-gray-300, #58586B);\n font-size: var(--emw--size-x-small, 12px);\n font-weight: var(-emw--font-weight-normal, 400);\n }\n .PlayerDocumentsWrapper .Section .Field input {\n color: var(--emw-color-gray-300, #58586B);\n font-size: var(--emw--size-x-small, 12px);\n font-weight: var(--emw--font-weight-light, 300);\n }\n .PlayerDocumentsWrapper .ButtonsArea {\n grid-column-gap: 10px;\n width: 100%;\n grid-template-columns: 1fr 1fr;\n }\n .PlayerDocumentsWrapper .ButtonsArea .SaveButton {\n font-size: var(--emw--size-x-small, 12px);\n height: 40px;\n color: var(--emw-button-typography, var(--emw-color-white, #FFFFFF));\n }\n .PlayerDocumentsWrapper .ButtonsArea .SaveButton.Disabled {\n color: var(--emw-color-gray-300, #58586B);\n }\n .PlayerDocumentsWrapper.skeleton .Section .SectionContent {\n display: block;\n }\n .PlayerDocumentsWrapper.skeleton .Section .SectionContent .Field {\n margin-bottom: 15px;\n }\n .PlayerDocumentsWrapper.skeleton .ButtonsArea .SaveButton {\n width: 100%;\n height: 100%;\n border-radius: 20px;\n }\n}";
191
191
  const PamPlayerDocumentsStyle0 = pamPlayerDocumentsCss;
192
192
 
193
193
  const PamPlayerDocuments = class {
@@ -223,6 +223,35 @@ const PamPlayerDocuments = class {
223
223
  break;
224
224
  }
225
225
  };
226
+ /**
227
+ * Promise for fetching the response and returning the response or the erorr message
228
+ * @param res - response from the API
229
+ */
230
+ this.handleFetchResponse = async (res) => {
231
+ var _a;
232
+ if (res.status >= 300) {
233
+ this.isError = true;
234
+ let response = await res.json();
235
+ this.errorCode = (_a = response.thirdPartyResponse) === null || _a === void 0 ? void 0 : _a.errorCode;
236
+ this.errorMessage = this.errorCode ? translate(this.errorCode, this.lang) : translate('errorMessageFetch', this.lang);
237
+ window.postMessage({
238
+ type: 'WidgetNotification',
239
+ data: {
240
+ type: 'error',
241
+ message: this.errorMessage
242
+ }
243
+ }, window.location.href);
244
+ return Promise.reject(this.errorMessage);
245
+ }
246
+ else {
247
+ this.isError = false;
248
+ if (res.headers.get('content-type')) {
249
+ let response = await res.json();
250
+ return Promise.resolve(response);
251
+ }
252
+ return Promise.resolve();
253
+ }
254
+ };
226
255
  this.getData = () => {
227
256
  const url = new URL(`/api/v1/players/${this.userId}/player-identifiable-information/documents/`, this.endpoint);
228
257
  const headers = new Headers();
@@ -231,17 +260,16 @@ const PamPlayerDocuments = class {
231
260
  method: 'GET',
232
261
  headers: headers
233
262
  };
234
- return new Promise((resolve) => {
263
+ return new Promise((resolve, reject) => {
235
264
  fetch(url.href, options)
236
- .then(res => {
237
- if (res.ok) {
238
- return res.json();
239
- }
240
- this.sendErrorNotification('errorMessageFetch');
241
- })
265
+ .then((res) => this.handleFetchResponse(res))
242
266
  .then(res => {
243
267
  this.data = res;
244
268
  resolve();
269
+ })
270
+ .catch((error) => {
271
+ console.error(error);
272
+ reject(error);
245
273
  });
246
274
  });
247
275
  };
@@ -341,6 +369,9 @@ const PamPlayerDocuments = class {
341
369
  this.isSubmitButtonAvailable = false;
342
370
  this.invalidFields = 0;
343
371
  this.isMobile = isMobile(window.navigator.userAgent);
372
+ this.isError = false;
373
+ this.errorMessage = '';
374
+ this.errorCode = '';
344
375
  }
345
376
  handleStylingChange(newValue, oldValue) {
346
377
  if (newValue !== oldValue)
@@ -397,7 +428,10 @@ const PamPlayerDocuments = class {
397
428
  }
398
429
  }
399
430
  render() {
400
- return (index.h("div", { key: '7abe1ef66b345689e5b12f56c8c563f21bf31862', ref: el => this.stylingContainer = el }, this.isSkeletonLoading
431
+ if (!this.isSkeletonLoading && this.isError) {
432
+ return (index.h("div", { class: "errorContainer" }, index.h("p", { class: "errorMessage", innerHTML: this.errorMessage })));
433
+ }
434
+ return (index.h("div", { ref: el => this.stylingContainer = el }, this.isSkeletonLoading
401
435
  ? index.h("form", { class: "PlayerDocumentsWrapper skeleton" }, index.h("div", { class: "ReturnButton" }, index.h("ui-skeleton", { structure: "title", width: "auto", height: "30px" })), index.h("div", { class: "Section" }, index.h("section", { class: "SectionContent" }, index.h("div", { class: "Field" }, index.h("ui-skeleton", { structure: "text", width: "auto", "margin-bottom": "10px", height: "10px" }), index.h("ui-skeleton", { structure: "title", width: "100%", height: "40px" })), index.h("div", { class: "Field" }, index.h("ui-skeleton", { structure: "text", width: "auto", "margin-bottom": "10px", height: "10px" }), index.h("ui-skeleton", { structure: "title", width: "100%", height: "40px" })))), index.h("section", { class: "ButtonsArea" }, index.h("div", { class: "SaveButton" }, index.h("ui-skeleton", { structure: "rectangle", width: "auto", height: "40px" }))))
402
436
  : index.h("form", { class: `PlayerDocumentsWrapper ${this.isMobile ? 'Mobile' : ''}` }, index.h("div", { class: "ReturnButton", onClick: this.toggleScreen }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15" }, index.h("g", { transform: "translate(-20 -158)" }, index.h("g", { transform: "translate(20 158)" }, index.h("path", { class: "aaa", d: "M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z", transform: "translate(15 15) rotate(180)" })))), index.h("h2", null, translate('title', this.lang))), index.h("h2", { class: "HeaderText" }, translate('title', this.lang)), index.h("div", { class: "Section" }, index.h("section", { class: "SectionContent" }, Object.keys(this.dataRef).map(documentType => {
403
437
  return (index.h("div", { class: "CompoundField" }, this.staticField(documentType, 'documentType', 'documentType'), this.isEditable === 'true'
package/dist/cjs/pam-player-documents.cjs.js CHANGED
@@ -19,7 +19,7 @@ var patchBrowser = () => {
19
19
 
20
20
  patchBrowser().then(async (options) => {
21
21
  await appGlobals.globalScripts();
22
- return index.bootstrapLazy([["pam-player-documents_2.cjs",[[1,"pam-player-documents",{"userId":[513,"user-id"],"session":[513],"endpoint":[513],"lang":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"isEditable":[513,"is-editable"],"isStandAlone":[513,"is-stand-alone"],"limitStylingAppends":[32],"isSkeletonLoading":[32],"isSubmitButtonAvailable":[32],"invalidFields":[32],"isMobile":[32]},null,{"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"]}]]]], options);
22
+ return index.bootstrapLazy([["pam-player-documents_2.cjs",[[1,"pam-player-documents",{"userId":[513,"user-id"],"session":[513],"endpoint":[513],"lang":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"isEditable":[513,"is-editable"],"isStandAlone":[513,"is-stand-alone"],"limitStylingAppends":[32],"isSkeletonLoading":[32],"isSubmitButtonAvailable":[32],"invalidFields":[32],"isMobile":[32],"isError":[32],"errorMessage":[32],"errorCode":[32]},null,{"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
23
23
  });
24
24
 
25
25
  exports.setNonce = index.setNonce;
package/dist/cjs/pam-player-documents_2.cjs.entry.js CHANGED
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const pamPlayerDocuments = require('./pam-player-documents-bc881ad5.js');
5
+ const pamPlayerDocuments = require('./pam-player-documents-79925553.js');
6
6
  const index = require('./index-84b76e65.js');
7
7
 
8
- 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))}}";
8
+ const uiSkeletonCss = ":host{display:block}.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, 10px)}.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, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.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, 10px);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, unset)}.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, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}";
9
9
  const UiSkeletonStyle0 = uiSkeletonCss;
10
10
 
11
11
  const UiSkeleton = class {
@@ -18,7 +18,8 @@ const UiSkeleton = class {
18
18
  marginBottom: this.handleStylingProps(this.marginBottom),
19
19
  marginTop: this.handleStylingProps(this.marginTop),
20
20
  marginLeft: this.handleStylingProps(this.marginLeft),
21
- marginRight: this.handleStylingProps(this.marginRight)
21
+ marginRight: this.handleStylingProps(this.marginRight),
22
+ size: this.handleStylingProps(this.size)
22
23
  };
23
24
  this.structure = undefined;
24
25
  this.width = 'unset';
@@ -31,9 +32,6 @@ const UiSkeleton = class {
31
32
  this.animation = true;
32
33
  this.rows = 0;
33
34
  this.size = '100%';
34
- this.color = '#c2c2c2';
35
- this.primaryColor = '#c2c2c2';
36
- this.secondaryColor = '#ffffff';
37
35
  }
38
36
  handleStructureChange(newValue, oldValue) {
39
37
  if (oldValue !== newValue) {
@@ -108,9 +106,6 @@ const UiSkeleton = class {
108
106
  --emw-skeleton-logo-margin-top: ${this.stylingValue.marginTop};
109
107
  --emw-skeleton-logo-margin-left: ${this.stylingValue.marginLeft};
110
108
  --emw-skeleton-logo-margin-right: ${this.stylingValue.marginRight};
111
- --emw-skeleton-logo-background: ${this.color};
112
- --emw-skeleton-primary-color: ${this.primaryColor};
113
- --emw-skeleton-secondary-color: ${this.secondaryColor};
114
109
  }
115
110
  `;
116
111
  break;
@@ -124,9 +119,6 @@ const UiSkeleton = class {
124
119
  --emw-skeleton-image-margin-top: ${this.stylingValue.marginTop};
125
120
  --emw-skeleton-image-margin-left: ${this.stylingValue.marginLeft};
126
121
  --emw-skeleton-image-margin-right: ${this.stylingValue.marginRight};
127
- --emw-skeleton-image-background: ${this.color};
128
- --emw-skeleton-primary-color: ${this.primaryColor};
129
- --emw-skeleton-secondary-color: ${this.secondaryColor};
130
122
  }
131
123
  `;
132
124
  break;
@@ -140,9 +132,6 @@ const UiSkeleton = class {
140
132
  --emw-skeleton-title-margin-top: ${this.stylingValue.marginTop};
141
133
  --emw-skeleton-title-margin-left: ${this.stylingValue.marginLeft};
142
134
  --emw-skeleton-title-margin-right: ${this.stylingValue.marginRight};
143
- --emw-skeleton-title-background: ${this.color};
144
- --emw-skeleton-primary-color: ${this.primaryColor};
145
- --emw-skeleton-secondary-color: ${this.secondaryColor};
146
135
  }
147
136
  `;
148
137
  break;
@@ -156,9 +145,6 @@ const UiSkeleton = class {
156
145
  --emw-skeleton-text-margin-top: ${this.stylingValue.marginTop};
157
146
  --emw-skeleton-text-margin-left: ${this.stylingValue.marginLeft};
158
147
  --emw-skeleton-text-margin-right: ${this.stylingValue.marginRight};
159
- --emw-skeleton-text-background: ${this.color};
160
- --emw-skeleton-primary-color: ${this.primaryColor};
161
- --emw-skeleton-secondary-color: ${this.secondaryColor};
162
148
  }
163
149
  `;
164
150
  break;
@@ -172,26 +158,20 @@ const UiSkeleton = class {
172
158
  --emw-skeleton-rectangle-margin-top: ${this.stylingValue.marginTop};
173
159
  --emw-skeleton-rectangle-margin-left: ${this.stylingValue.marginLeft};
174
160
  --emw-skeleton-rectangle-margin-right: ${this.stylingValue.marginRight};
175
- --emw-skeleton-rectangle-background: ${this.color};
176
- --emw-skeleton-primary-color: ${this.primaryColor};
177
- --emw-skeleton-secondary-color: ${this.secondaryColor};
178
161
  }
179
162
  `;
180
163
  break;
181
164
  case 'circle':
182
165
  styleBlock = `
183
166
  :host {
184
- --emw-skeleton-circle-size: ${this.size};
185
- --emw-skeleton-circle-background: ${this.color};
186
- --emw-skeleton-primary-color: ${this.primaryColor};
187
- --emw-skeleton-secondary-color: ${this.secondaryColor};
167
+ --emw-skeleton-circle-size: ${this.stylingValue.size};
188
168
  }
189
169
  `;
190
170
  break;
191
171
  default:
192
172
  styleBlock = '';
193
173
  }
194
- return (index.h(index.Host, { key: '5c185b76c438d20d4ad88bc48d94ff5628410bb7' }, index.h("style", { key: 'de95e60a5955d5b2af83710423fe40329c187f7e' }, styleBlock), this.handleStructure(this.structure)));
174
+ return (index.h(index.Host, { key: 'e6b885bfd985ce7663d990756fe9101e25eb97f0' }, index.h("style", { key: '06ae24c7bb74f4dacfc12ae58085333f9dc89da5' }, styleBlock), this.handleStructure(this.structure)));
195
175
  }
196
176
  static get watchers() { return {
197
177
  "structure": ["handleStructureChange"]
package/dist/collection/components/pam-player-documents/pam-player-documents.css CHANGED
@@ -10,6 +10,24 @@ input, select, option {
10
10
  font-family: inherit;
11
11
  }
12
12
 
13
+ .errorContainer {
14
+ font-family: "Roboto";
15
+ font-style: normal;
16
+ font-family: sans-serif;
17
+ display: flex;
18
+ flex-direction: column;
19
+ gap: 24px;
20
+ width: 100%;
21
+ height: 100%;
22
+ }
23
+ .errorContainer .errorMessage {
24
+ color: var(--emw--color-error, var(--emw--color-red, #ed0909));
25
+ font-size: var(--emw-font-size-small, 13px);
26
+ display: block;
27
+ justify-content: center;
28
+ text-align: center;
29
+ }
30
+
13
31
  .PlayerDocumentsWrapper {
14
32
  color: var(--emw--pam-typography, var(--emw-color-contrast, #07072A));
15
33
  background: var(--emw-color-pale, var(--emw--color-gray-50, #F1F1F1));
package/dist/collection/components/pam-player-documents/pam-player-documents.js CHANGED
@@ -35,6 +35,35 @@ export class PamPlayerDocuments {
35
35
  break;
36
36
  }
37
37
  };
38
+ /**
39
+ * Promise for fetching the response and returning the response or the erorr message
40
+ * @param res - response from the API
41
+ */
42
+ this.handleFetchResponse = async (res) => {
43
+ var _a;
44
+ if (res.status >= 300) {
45
+ this.isError = true;
46
+ let response = await res.json();
47
+ this.errorCode = (_a = response.thirdPartyResponse) === null || _a === void 0 ? void 0 : _a.errorCode;
48
+ this.errorMessage = this.errorCode ? translate(this.errorCode, this.lang) : translate('errorMessageFetch', this.lang);
49
+ window.postMessage({
50
+ type: 'WidgetNotification',
51
+ data: {
52
+ type: 'error',
53
+ message: this.errorMessage
54
+ }
55
+ }, window.location.href);
56
+ return Promise.reject(this.errorMessage);
57
+ }
58
+ else {
59
+ this.isError = false;
60
+ if (res.headers.get('content-type')) {
61
+ let response = await res.json();
62
+ return Promise.resolve(response);
63
+ }
64
+ return Promise.resolve();
65
+ }
66
+ };
38
67
  this.getData = () => {
39
68
  const url = new URL(`/api/v1/players/${this.userId}/player-identifiable-information/documents/`, this.endpoint);
40
69
  const headers = new Headers();
@@ -43,17 +72,17 @@ export class PamPlayerDocuments {
43
72
  method: 'GET',
44
73
  headers: headers
45
74
  };
46
- return new Promise((resolve) => {
75
+ return new Promise((resolve, reject) => {
47
76
  fetch(url.href, options)
48
- .then(res => {
49
- if (res.ok) {
50
- return res.json();
51
- }
52
- this.sendErrorNotification('errorMessageFetch');
53
- })
77
+ .then((res) => this.handleFetchResponse(res))
54
78
  .then(res => {
55
79
  this.data = res;
56
80
  resolve();
81
+ })
82
+ .catch((error) => {
83
+ console.error(error);
84
+ reject(error);
85
+ ;
57
86
  });
58
87
  });
59
88
  };
@@ -153,6 +182,9 @@ export class PamPlayerDocuments {
153
182
  this.isSubmitButtonAvailable = false;
154
183
  this.invalidFields = 0;
155
184
  this.isMobile = isMobile(window.navigator.userAgent);
185
+ this.isError = false;
186
+ this.errorMessage = '';
187
+ this.errorCode = '';
156
188
  }
157
189
  handleStylingChange(newValue, oldValue) {
158
190
  if (newValue !== oldValue)
@@ -209,7 +241,10 @@ export class PamPlayerDocuments {
209
241
  }
210
242
  }
211
243
  render() {
212
- return (h("div", { key: '7abe1ef66b345689e5b12f56c8c563f21bf31862', ref: el => this.stylingContainer = el }, this.isSkeletonLoading
244
+ if (!this.isSkeletonLoading && this.isError) {
245
+ return (h("div", { class: "errorContainer" }, h("p", { class: "errorMessage", innerHTML: this.errorMessage })));
246
+ }
247
+ return (h("div", { ref: el => this.stylingContainer = el }, this.isSkeletonLoading
213
248
  ? h("form", { class: "PlayerDocumentsWrapper skeleton" }, h("div", { class: "ReturnButton" }, h("ui-skeleton", { structure: "title", width: "auto", height: "30px" })), h("div", { class: "Section" }, h("section", { class: "SectionContent" }, h("div", { class: "Field" }, h("ui-skeleton", { structure: "text", width: "auto", "margin-bottom": "10px", height: "10px" }), h("ui-skeleton", { structure: "title", width: "100%", height: "40px" })), h("div", { class: "Field" }, h("ui-skeleton", { structure: "text", width: "auto", "margin-bottom": "10px", height: "10px" }), h("ui-skeleton", { structure: "title", width: "100%", height: "40px" })))), h("section", { class: "ButtonsArea" }, h("div", { class: "SaveButton" }, h("ui-skeleton", { structure: "rectangle", width: "auto", height: "40px" }))))
214
249
  : h("form", { class: `PlayerDocumentsWrapper ${this.isMobile ? 'Mobile' : ''}` }, h("div", { class: "ReturnButton", onClick: this.toggleScreen }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15" }, h("g", { transform: "translate(-20 -158)" }, h("g", { transform: "translate(20 158)" }, h("path", { class: "aaa", d: "M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z", transform: "translate(15 15) rotate(180)" })))), h("h2", null, translate('title', this.lang))), h("h2", { class: "HeaderText" }, translate('title', this.lang)), h("div", { class: "Section" }, h("section", { class: "SectionContent" }, Object.keys(this.dataRef).map(documentType => {
215
250
  return (h("div", { class: "CompoundField" }, this.staticField(documentType, 'documentType', 'documentType'), this.isEditable === 'true'
@@ -413,7 +448,10 @@ export class PamPlayerDocuments {
413
448
  "isSkeletonLoading": {},
414
449
  "isSubmitButtonAvailable": {},
415
450
  "invalidFields": {},
416
- "isMobile": {}
451
+ "isMobile": {},
452
+ "isError": {},
453
+ "errorMessage": {},
454
+ "errorCode": {}
417
455
  };
418
456
  }
419
457
  static get watchers() {
package/dist/esm/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export { P as PamPlayerDocuments } from './pam-player-documents-7540c613.js';
1
+ export { P as PamPlayerDocuments } from './pam-player-documents-6c00caa8.js';
2
2
  import './index-3f96eae4.js';
package/dist/esm/loader.js CHANGED
@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
5
5
  const defineCustomElements = async (win, options) => {
6
6
  if (typeof window === 'undefined') return undefined;
7
7
  await globalScripts();
8
- return bootstrapLazy([["pam-player-documents_2",[[1,"pam-player-documents",{"userId":[513,"user-id"],"session":[513],"endpoint":[513],"lang":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"isEditable":[513,"is-editable"],"isStandAlone":[513,"is-stand-alone"],"limitStylingAppends":[32],"isSkeletonLoading":[32],"isSubmitButtonAvailable":[32],"invalidFields":[32],"isMobile":[32]},null,{"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"]}]]]], options);
8
+ return bootstrapLazy([["pam-player-documents_2",[[1,"pam-player-documents",{"userId":[513,"user-id"],"session":[513],"endpoint":[513],"lang":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"isEditable":[513,"is-editable"],"isStandAlone":[513,"is-stand-alone"],"limitStylingAppends":[32],"isSkeletonLoading":[32],"isSubmitButtonAvailable":[32],"invalidFields":[32],"isMobile":[32],"isError":[32],"errorMessage":[32],"errorCode":[32]},null,{"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
9
9
  };
10
10
 
11
11
  export { defineCustomElements };
package/dist/esm/{pam-player-documents-7540c613.js → pam-player-documents-6c00caa8.js} RENAMED
@@ -185,7 +185,7 @@ const isMobile = (userAgent) => {
185
185
  userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
186
186
  };
187
187
 
188
- const pamPlayerDocumentsCss = ":host {\n display: block;\n}\n\nbutton {\n font-family: var(--emw--button-typography);\n}\n\ninput, select, option {\n font-family: inherit;\n}\n\n.PlayerDocumentsWrapper {\n color: var(--emw--pam-typography, var(--emw-color-contrast, #07072A));\n background: var(--emw-color-pale, var(--emw--color-gray-50, #F1F1F1));\n padding: 50px;\n height: 100%;\n border-radius: var(--emw--border-radius-large, 10px);\n container-type: inline-size;\n opacity: 1;\n animation-name: fadeIn;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n animation-duration: 0.3s;\n}\n.PlayerDocumentsWrapper .ReturnButton {\n display: none;\n}\n.PlayerDocumentsWrapper h2 {\n font-size: var(--emw--font-size-x-large, 24px);\n color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n text-transform: capitalize;\n font-weight: var(--emw--font-weight-semibold, 500);\n}\n.PlayerDocumentsWrapper .Section {\n background: var(--emw-color-pale, var(--emw--color-gray-100, #E6E6E6));\n border-radius: var(--emw--border-radius-large, 10px);\n padding: 10px;\n margin-bottom: 10px;\n}\n.PlayerDocumentsWrapper .Section .SectionTitle {\n font-size: var(--emw--font-size-large, 20px);\n color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n text-transform: capitalize;\n font-weight: var(--emw--font-weight-semibold, 500);\n padding: 0;\n border: 0;\n margin-top: 10px;\n margin-bottom: 10px;\n background: transparent;\n cursor: pointer;\n}\n.PlayerDocumentsWrapper .Section .SectionContent {\n display: grid;\n column-gap: 50px;\n row-gap: 25px;\n grid-template-rows: auto;\n grid-template-columns: 1fr;\n padding-bottom: 30px;\n margin-top: 10px;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field {\n width: 100%;\n display: flex;\n flex-direction: column;\n /* Chrome, Safari, Edge, Opera */\n /* Firefox */\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field label {\n font-size: var(--emw--size-small, 14px);\n font-weight: var(--emw--font-weight-semibold, 500);\n margin-bottom: 5px;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field input {\n font-size: var(--emw--size-small, 14px);\n font-weight: var(--emw--font-weight-light, 300);\n color: var(--emw--pam-contrast, var(--emw-color-contrast, #07072A));\n padding: 10px;\n line-height: 16px;\n background: var(--emw-color-white, #FFFFFF);\n outline: none;\n transition-duration: var(--emw--transition-medium, 250ms);\n border: 1px solid var(--emw--color-gray-100, #353535);\n border-radius: var(--emw--border-radius-medium, 10px);\n width: 100%;\n box-sizing: border-box;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field input:focus, .PlayerDocumentsWrapper .Section .SectionContent .Field input :focus-within, .PlayerDocumentsWrapper .Section .SectionContent .Field input :focus-visible, .PlayerDocumentsWrapper .Section .SectionContent .Field input :visited {\n border: 1px solid var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n box-shadow: 0 0 0 1pt var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field input::-webkit-outer-spin-button,\n.PlayerDocumentsWrapper .Section .SectionContent .Field input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field input[type=number] {\n -moz-appearance: textfield;\n appearance: textfield;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field.Invalid input {\n border: 1px solid var(--emw-color-error, var(--emw-color-red, #FD2839));\n background: var(--emw-color-pale, #FBECF4);\n color: var(--emw-color-error, var(--emw-color-red, #FD2839));\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field .Error {\n color: var(--emw-color-error, var(--emw-color-red, #FD2839));\n font-size: var(--emw--font-size-x-small, 12px);\n line-height: 10px;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field.Disabled input {\n opacity: 0.5;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .CompoundField {\n width: 100%;\n display: flex;\n gap: 10px;\n flex-direction: row;\n}\n.PlayerDocumentsWrapper .ButtonsArea {\n grid-column-gap: 10px;\n grid-template-rows: auto;\n grid-template-columns: 1fr;\n margin-top: 20px;\n width: 50%;\n}\n.PlayerDocumentsWrapper .ButtonsArea .SaveButton {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n cursor: pointer;\n background-image: linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 20%), var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, white 30%));\n border: 2px solid var(--emw--button-border-color, #0E5924);\n color: var(--emw--button-text-color, #FFFFFF);\n border-radius: var(--emw--button-border-radius, 10px);\n font-size: var(--emw--size-standard, 16px);\n text-transform: uppercase;\n transition-duration: var(--emw--transition-medium, 250ms);\n max-width: 400px;\n min-width: 200px;\n padding: 13px 0;\n width: 100%;\n}\n.PlayerDocumentsWrapper .ButtonsArea .SaveButton:active {\n background: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n}\n.PlayerDocumentsWrapper .ButtonsArea .SaveButton.Disabled {\n opacity: 0.3;\n cursor: not-allowed;\n}\n.PlayerDocumentsWrapper.skeleton .ReturnButton {\n display: block;\n width: 200px;\n margin-top: 15px;\n margin-bottom: 20px;\n}\n.PlayerDocumentsWrapper.skeleton .Section .SectionContent {\n grid-template-columns: 1fr 1fr;\n max-height: 100%;\n overflow: hidden;\n}\n.PlayerDocumentsWrapper.skeleton .Section .SectionContent .Field {\n height: 60px;\n overflow: hidden;\n}\n.PlayerDocumentsWrapper.skeleton .ButtonsArea .SaveButton {\n width: 500px;\n border-radius: 30px;\n overflow: hidden;\n display: block;\n background-image: none;\n border: none;\n}\n@container (max-width: 425px) {\n .PlayerDocumentsWrapper {\n padding: 20px 15px;\n background: var(--emw-color-gray-50, #F9F8F8);\n max-width: unset;\n border-radius: var(--emw--border-radius-small, 5px);\n }\n .PlayerDocumentsWrapper .ReturnButton {\n color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n display: inline-flex;\n align-items: center;\n column-gap: 10px;\n margin-bottom: 10px;\n }\n .PlayerDocumentsWrapper .ReturnButton svg {\n fill: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n }\n .PlayerDocumentsWrapper .HeaderText {\n display: none;\n }\n .PlayerDocumentsWrapper h2 {\n color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n font-size: var(--emw--font-size-large, 20px);\n font-weight: var(--emw--font-weight-semibold, 500);\n }\n .PlayerDocumentsWrapper .Section .SectionContent {\n row-gap: 15px;\n grid-template-columns: 1fr;\n }\n .PlayerDocumentsWrapper .Section .SectionContent .CompoundField {\n width: 100%;\n display: flex;\n gap: 10px;\n flex-direction: column;\n }\n .PlayerDocumentsWrapper .Section .SectionTitle {\n margin-top: 5px;\n margin-bottom: 5px;\n font-size: var(--emw--font-size-medium, 16px);\n }\n .PlayerDocumentsWrapper .Section .Field label {\n color: var(--emw-color-gray-300, #58586B);\n font-size: var(--emw--size-x-small, 12px);\n font-weight: var(-emw--font-weight-normal, 400);\n }\n .PlayerDocumentsWrapper .Section .Field input {\n color: var(--emw-color-gray-300, #58586B);\n font-size: var(--emw--size-x-small, 12px);\n font-weight: var(--emw--font-weight-light, 300);\n }\n .PlayerDocumentsWrapper .ButtonsArea {\n grid-column-gap: 10px;\n width: 100%;\n grid-template-columns: 1fr 1fr;\n }\n .PlayerDocumentsWrapper .ButtonsArea .SaveButton {\n font-size: var(--emw--size-x-small, 12px);\n height: 40px;\n color: var(--emw-button-typography, var(--emw-color-white, #FFFFFF));\n }\n .PlayerDocumentsWrapper .ButtonsArea .SaveButton.Disabled {\n color: var(--emw-color-gray-300, #58586B);\n }\n .PlayerDocumentsWrapper.skeleton .Section .SectionContent {\n display: block;\n }\n .PlayerDocumentsWrapper.skeleton .Section .SectionContent .Field {\n margin-bottom: 15px;\n }\n .PlayerDocumentsWrapper.skeleton .ButtonsArea .SaveButton {\n width: 100%;\n height: 100%;\n border-radius: 20px;\n }\n}";
188
+ const pamPlayerDocumentsCss = ":host {\n display: block;\n}\n\nbutton {\n font-family: var(--emw--button-typography);\n}\n\ninput, select, option {\n font-family: inherit;\n}\n\n.errorContainer {\n font-family: \"Roboto\";\n font-style: normal;\n font-family: sans-serif;\n display: flex;\n flex-direction: column;\n gap: 24px;\n width: 100%;\n height: 100%;\n}\n.errorContainer .errorMessage {\n color: var(--emw--color-error, var(--emw--color-red, #ed0909));\n font-size: var(--emw-font-size-small, 13px);\n display: block;\n justify-content: center;\n text-align: center;\n}\n\n.PlayerDocumentsWrapper {\n color: var(--emw--pam-typography, var(--emw-color-contrast, #07072A));\n background: var(--emw-color-pale, var(--emw--color-gray-50, #F1F1F1));\n padding: 50px;\n height: 100%;\n border-radius: var(--emw--border-radius-large, 10px);\n container-type: inline-size;\n opacity: 1;\n animation-name: fadeIn;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n animation-duration: 0.3s;\n}\n.PlayerDocumentsWrapper .ReturnButton {\n display: none;\n}\n.PlayerDocumentsWrapper h2 {\n font-size: var(--emw--font-size-x-large, 24px);\n color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n text-transform: capitalize;\n font-weight: var(--emw--font-weight-semibold, 500);\n}\n.PlayerDocumentsWrapper .Section {\n background: var(--emw-color-pale, var(--emw--color-gray-100, #E6E6E6));\n border-radius: var(--emw--border-radius-large, 10px);\n padding: 10px;\n margin-bottom: 10px;\n}\n.PlayerDocumentsWrapper .Section .SectionTitle {\n font-size: var(--emw--font-size-large, 20px);\n color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n text-transform: capitalize;\n font-weight: var(--emw--font-weight-semibold, 500);\n padding: 0;\n border: 0;\n margin-top: 10px;\n margin-bottom: 10px;\n background: transparent;\n cursor: pointer;\n}\n.PlayerDocumentsWrapper .Section .SectionContent {\n display: grid;\n column-gap: 50px;\n row-gap: 25px;\n grid-template-rows: auto;\n grid-template-columns: 1fr;\n padding-bottom: 30px;\n margin-top: 10px;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field {\n width: 100%;\n display: flex;\n flex-direction: column;\n /* Chrome, Safari, Edge, Opera */\n /* Firefox */\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field label {\n font-size: var(--emw--size-small, 14px);\n font-weight: var(--emw--font-weight-semibold, 500);\n margin-bottom: 5px;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field input {\n font-size: var(--emw--size-small, 14px);\n font-weight: var(--emw--font-weight-light, 300);\n color: var(--emw--pam-contrast, var(--emw-color-contrast, #07072A));\n padding: 10px;\n line-height: 16px;\n background: var(--emw-color-white, #FFFFFF);\n outline: none;\n transition-duration: var(--emw--transition-medium, 250ms);\n border: 1px solid var(--emw--color-gray-100, #353535);\n border-radius: var(--emw--border-radius-medium, 10px);\n width: 100%;\n box-sizing: border-box;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field input:focus, .PlayerDocumentsWrapper .Section .SectionContent .Field input :focus-within, .PlayerDocumentsWrapper .Section .SectionContent .Field input :focus-visible, .PlayerDocumentsWrapper .Section .SectionContent .Field input :visited {\n border: 1px solid var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n box-shadow: 0 0 0 1pt var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field input::-webkit-outer-spin-button,\n.PlayerDocumentsWrapper .Section .SectionContent .Field input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field input[type=number] {\n -moz-appearance: textfield;\n appearance: textfield;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field.Invalid input {\n border: 1px solid var(--emw-color-error, var(--emw-color-red, #FD2839));\n background: var(--emw-color-pale, #FBECF4);\n color: var(--emw-color-error, var(--emw-color-red, #FD2839));\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field .Error {\n color: var(--emw-color-error, var(--emw-color-red, #FD2839));\n font-size: var(--emw--font-size-x-small, 12px);\n line-height: 10px;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field.Disabled input {\n opacity: 0.5;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .CompoundField {\n width: 100%;\n display: flex;\n gap: 10px;\n flex-direction: row;\n}\n.PlayerDocumentsWrapper .ButtonsArea {\n grid-column-gap: 10px;\n grid-template-rows: auto;\n grid-template-columns: 1fr;\n margin-top: 20px;\n width: 50%;\n}\n.PlayerDocumentsWrapper .ButtonsArea .SaveButton {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n cursor: pointer;\n background-image: linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 20%), var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, white 30%));\n border: 2px solid var(--emw--button-border-color, #0E5924);\n color: var(--emw--button-text-color, #FFFFFF);\n border-radius: var(--emw--button-border-radius, 10px);\n font-size: var(--emw--size-standard, 16px);\n text-transform: uppercase;\n transition-duration: var(--emw--transition-medium, 250ms);\n max-width: 400px;\n min-width: 200px;\n padding: 13px 0;\n width: 100%;\n}\n.PlayerDocumentsWrapper .ButtonsArea .SaveButton:active {\n background: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n}\n.PlayerDocumentsWrapper .ButtonsArea .SaveButton.Disabled {\n opacity: 0.3;\n cursor: not-allowed;\n}\n.PlayerDocumentsWrapper.skeleton .ReturnButton {\n display: block;\n width: 200px;\n margin-top: 15px;\n margin-bottom: 20px;\n}\n.PlayerDocumentsWrapper.skeleton .Section .SectionContent {\n grid-template-columns: 1fr 1fr;\n max-height: 100%;\n overflow: hidden;\n}\n.PlayerDocumentsWrapper.skeleton .Section .SectionContent .Field {\n height: 60px;\n overflow: hidden;\n}\n.PlayerDocumentsWrapper.skeleton .ButtonsArea .SaveButton {\n width: 500px;\n border-radius: 30px;\n overflow: hidden;\n display: block;\n background-image: none;\n border: none;\n}\n@container (max-width: 425px) {\n .PlayerDocumentsWrapper {\n padding: 20px 15px;\n background: var(--emw-color-gray-50, #F9F8F8);\n max-width: unset;\n border-radius: var(--emw--border-radius-small, 5px);\n }\n .PlayerDocumentsWrapper .ReturnButton {\n color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n display: inline-flex;\n align-items: center;\n column-gap: 10px;\n margin-bottom: 10px;\n }\n .PlayerDocumentsWrapper .ReturnButton svg {\n fill: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n }\n .PlayerDocumentsWrapper .HeaderText {\n display: none;\n }\n .PlayerDocumentsWrapper h2 {\n color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n font-size: var(--emw--font-size-large, 20px);\n font-weight: var(--emw--font-weight-semibold, 500);\n }\n .PlayerDocumentsWrapper .Section .SectionContent {\n row-gap: 15px;\n grid-template-columns: 1fr;\n }\n .PlayerDocumentsWrapper .Section .SectionContent .CompoundField {\n width: 100%;\n display: flex;\n gap: 10px;\n flex-direction: column;\n }\n .PlayerDocumentsWrapper .Section .SectionTitle {\n margin-top: 5px;\n margin-bottom: 5px;\n font-size: var(--emw--font-size-medium, 16px);\n }\n .PlayerDocumentsWrapper .Section .Field label {\n color: var(--emw-color-gray-300, #58586B);\n font-size: var(--emw--size-x-small, 12px);\n font-weight: var(-emw--font-weight-normal, 400);\n }\n .PlayerDocumentsWrapper .Section .Field input {\n color: var(--emw-color-gray-300, #58586B);\n font-size: var(--emw--size-x-small, 12px);\n font-weight: var(--emw--font-weight-light, 300);\n }\n .PlayerDocumentsWrapper .ButtonsArea {\n grid-column-gap: 10px;\n width: 100%;\n grid-template-columns: 1fr 1fr;\n }\n .PlayerDocumentsWrapper .ButtonsArea .SaveButton {\n font-size: var(--emw--size-x-small, 12px);\n height: 40px;\n color: var(--emw-button-typography, var(--emw-color-white, #FFFFFF));\n }\n .PlayerDocumentsWrapper .ButtonsArea .SaveButton.Disabled {\n color: var(--emw-color-gray-300, #58586B);\n }\n .PlayerDocumentsWrapper.skeleton .Section .SectionContent {\n display: block;\n }\n .PlayerDocumentsWrapper.skeleton .Section .SectionContent .Field {\n margin-bottom: 15px;\n }\n .PlayerDocumentsWrapper.skeleton .ButtonsArea .SaveButton {\n width: 100%;\n height: 100%;\n border-radius: 20px;\n }\n}";
189
189
  const PamPlayerDocumentsStyle0 = pamPlayerDocumentsCss;
190
190
 
191
191
  const PamPlayerDocuments = class {
@@ -221,6 +221,35 @@ const PamPlayerDocuments = class {
221
221
  break;
222
222
  }
223
223
  };
224
+ /**
225
+ * Promise for fetching the response and returning the response or the erorr message
226
+ * @param res - response from the API
227
+ */
228
+ this.handleFetchResponse = async (res) => {
229
+ var _a;
230
+ if (res.status >= 300) {
231
+ this.isError = true;
232
+ let response = await res.json();
233
+ this.errorCode = (_a = response.thirdPartyResponse) === null || _a === void 0 ? void 0 : _a.errorCode;
234
+ this.errorMessage = this.errorCode ? translate(this.errorCode, this.lang) : translate('errorMessageFetch', this.lang);
235
+ window.postMessage({
236
+ type: 'WidgetNotification',
237
+ data: {
238
+ type: 'error',
239
+ message: this.errorMessage
240
+ }
241
+ }, window.location.href);
242
+ return Promise.reject(this.errorMessage);
243
+ }
244
+ else {
245
+ this.isError = false;
246
+ if (res.headers.get('content-type')) {
247
+ let response = await res.json();
248
+ return Promise.resolve(response);
249
+ }
250
+ return Promise.resolve();
251
+ }
252
+ };
224
253
  this.getData = () => {
225
254
  const url = new URL(`/api/v1/players/${this.userId}/player-identifiable-information/documents/`, this.endpoint);
226
255
  const headers = new Headers();
@@ -229,17 +258,16 @@ const PamPlayerDocuments = class {
229
258
  method: 'GET',
230
259
  headers: headers
231
260
  };
232
- return new Promise((resolve) => {
261
+ return new Promise((resolve, reject) => {
233
262
  fetch(url.href, options)
234
- .then(res => {
235
- if (res.ok) {
236
- return res.json();
237
- }
238
- this.sendErrorNotification('errorMessageFetch');
239
- })
263
+ .then((res) => this.handleFetchResponse(res))
240
264
  .then(res => {
241
265
  this.data = res;
242
266
  resolve();
267
+ })
268
+ .catch((error) => {
269
+ console.error(error);
270
+ reject(error);
243
271
  });
244
272
  });
245
273
  };
@@ -339,6 +367,9 @@ const PamPlayerDocuments = class {
339
367
  this.isSubmitButtonAvailable = false;
340
368
  this.invalidFields = 0;
341
369
  this.isMobile = isMobile(window.navigator.userAgent);
370
+ this.isError = false;
371
+ this.errorMessage = '';
372
+ this.errorCode = '';
342
373
  }
343
374
  handleStylingChange(newValue, oldValue) {
344
375
  if (newValue !== oldValue)
@@ -395,7 +426,10 @@ const PamPlayerDocuments = class {
395
426
  }
396
427
  }
397
428
  render() {
398
- return (h("div", { key: '7abe1ef66b345689e5b12f56c8c563f21bf31862', ref: el => this.stylingContainer = el }, this.isSkeletonLoading
429
+ if (!this.isSkeletonLoading && this.isError) {
430
+ return (h("div", { class: "errorContainer" }, h("p", { class: "errorMessage", innerHTML: this.errorMessage })));
431
+ }
432
+ return (h("div", { ref: el => this.stylingContainer = el }, this.isSkeletonLoading
399
433
  ? h("form", { class: "PlayerDocumentsWrapper skeleton" }, h("div", { class: "ReturnButton" }, h("ui-skeleton", { structure: "title", width: "auto", height: "30px" })), h("div", { class: "Section" }, h("section", { class: "SectionContent" }, h("div", { class: "Field" }, h("ui-skeleton", { structure: "text", width: "auto", "margin-bottom": "10px", height: "10px" }), h("ui-skeleton", { structure: "title", width: "100%", height: "40px" })), h("div", { class: "Field" }, h("ui-skeleton", { structure: "text", width: "auto", "margin-bottom": "10px", height: "10px" }), h("ui-skeleton", { structure: "title", width: "100%", height: "40px" })))), h("section", { class: "ButtonsArea" }, h("div", { class: "SaveButton" }, h("ui-skeleton", { structure: "rectangle", width: "auto", height: "40px" }))))
400
434
  : h("form", { class: `PlayerDocumentsWrapper ${this.isMobile ? 'Mobile' : ''}` }, h("div", { class: "ReturnButton", onClick: this.toggleScreen }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15" }, h("g", { transform: "translate(-20 -158)" }, h("g", { transform: "translate(20 158)" }, h("path", { class: "aaa", d: "M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z", transform: "translate(15 15) rotate(180)" })))), h("h2", null, translate('title', this.lang))), h("h2", { class: "HeaderText" }, translate('title', this.lang)), h("div", { class: "Section" }, h("section", { class: "SectionContent" }, Object.keys(this.dataRef).map(documentType => {
401
435
  return (h("div", { class: "CompoundField" }, this.staticField(documentType, 'documentType', 'documentType'), this.isEditable === 'true'
package/dist/esm/pam-player-documents.js CHANGED
@@ -16,5 +16,5 @@ var patchBrowser = () => {
16
16
 
17
17
  patchBrowser().then(async (options) => {
18
18
  await globalScripts();
19
- return bootstrapLazy([["pam-player-documents_2",[[1,"pam-player-documents",{"userId":[513,"user-id"],"session":[513],"endpoint":[513],"lang":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"isEditable":[513,"is-editable"],"isStandAlone":[513,"is-stand-alone"],"limitStylingAppends":[32],"isSkeletonLoading":[32],"isSubmitButtonAvailable":[32],"invalidFields":[32],"isMobile":[32]},null,{"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"]}]]]], options);
19
+ return bootstrapLazy([["pam-player-documents_2",[[1,"pam-player-documents",{"userId":[513,"user-id"],"session":[513],"endpoint":[513],"lang":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"isEditable":[513,"is-editable"],"isStandAlone":[513,"is-stand-alone"],"limitStylingAppends":[32],"isSkeletonLoading":[32],"isSubmitButtonAvailable":[32],"invalidFields":[32],"isMobile":[32],"isError":[32],"errorMessage":[32],"errorCode":[32]},null,{"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
20
20
  });
package/dist/esm/pam-player-documents_2.entry.js CHANGED
@@ -1,7 +1,7 @@
1
- export { P as pam_player_documents } from './pam-player-documents-7540c613.js';
1
+ export { P as pam_player_documents } from './pam-player-documents-6c00caa8.js';
2
2
  import { r as registerInstance, h, H as Host } from './index-3f96eae4.js';
3
3
 
4
- 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))}}";
4
+ const uiSkeletonCss = ":host{display:block}.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, 10px)}.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, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.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, 10px);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, unset)}.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, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}";
5
5
  const UiSkeletonStyle0 = uiSkeletonCss;
6
6
 
7
7
  const UiSkeleton = class {
@@ -14,7 +14,8 @@ const UiSkeleton = class {
14
14
  marginBottom: this.handleStylingProps(this.marginBottom),
15
15
  marginTop: this.handleStylingProps(this.marginTop),
16
16
  marginLeft: this.handleStylingProps(this.marginLeft),
17
- marginRight: this.handleStylingProps(this.marginRight)
17
+ marginRight: this.handleStylingProps(this.marginRight),
18
+ size: this.handleStylingProps(this.size)
18
19
  };
19
20
  this.structure = undefined;
20
21
  this.width = 'unset';
@@ -27,9 +28,6 @@ const UiSkeleton = class {
27
28
  this.animation = true;
28
29
  this.rows = 0;
29
30
  this.size = '100%';
30
- this.color = '#c2c2c2';
31
- this.primaryColor = '#c2c2c2';
32
- this.secondaryColor = '#ffffff';
33
31
  }
34
32
  handleStructureChange(newValue, oldValue) {
35
33
  if (oldValue !== newValue) {
@@ -104,9 +102,6 @@ const UiSkeleton = class {
104
102
  --emw-skeleton-logo-margin-top: ${this.stylingValue.marginTop};
105
103
  --emw-skeleton-logo-margin-left: ${this.stylingValue.marginLeft};
106
104
  --emw-skeleton-logo-margin-right: ${this.stylingValue.marginRight};
107
- --emw-skeleton-logo-background: ${this.color};
108
- --emw-skeleton-primary-color: ${this.primaryColor};
109
- --emw-skeleton-secondary-color: ${this.secondaryColor};
110
105
  }
111
106
  `;
112
107
  break;
@@ -120,9 +115,6 @@ const UiSkeleton = class {
120
115
  --emw-skeleton-image-margin-top: ${this.stylingValue.marginTop};
121
116
  --emw-skeleton-image-margin-left: ${this.stylingValue.marginLeft};
122
117
  --emw-skeleton-image-margin-right: ${this.stylingValue.marginRight};
123
- --emw-skeleton-image-background: ${this.color};
124
- --emw-skeleton-primary-color: ${this.primaryColor};
125
- --emw-skeleton-secondary-color: ${this.secondaryColor};
126
118
  }
127
119
  `;
128
120
  break;
@@ -136,9 +128,6 @@ const UiSkeleton = class {
136
128
  --emw-skeleton-title-margin-top: ${this.stylingValue.marginTop};
137
129
  --emw-skeleton-title-margin-left: ${this.stylingValue.marginLeft};
138
130
  --emw-skeleton-title-margin-right: ${this.stylingValue.marginRight};
139
- --emw-skeleton-title-background: ${this.color};
140
- --emw-skeleton-primary-color: ${this.primaryColor};
141
- --emw-skeleton-secondary-color: ${this.secondaryColor};
142
131
  }
143
132
  `;
144
133
  break;
@@ -152,9 +141,6 @@ const UiSkeleton = class {
152
141
  --emw-skeleton-text-margin-top: ${this.stylingValue.marginTop};
153
142
  --emw-skeleton-text-margin-left: ${this.stylingValue.marginLeft};
154
143
  --emw-skeleton-text-margin-right: ${this.stylingValue.marginRight};
155
- --emw-skeleton-text-background: ${this.color};
156
- --emw-skeleton-primary-color: ${this.primaryColor};
157
- --emw-skeleton-secondary-color: ${this.secondaryColor};
158
144
  }
159
145
  `;
160
146
  break;
@@ -168,26 +154,20 @@ const UiSkeleton = class {
168
154
  --emw-skeleton-rectangle-margin-top: ${this.stylingValue.marginTop};
169
155
  --emw-skeleton-rectangle-margin-left: ${this.stylingValue.marginLeft};
170
156
  --emw-skeleton-rectangle-margin-right: ${this.stylingValue.marginRight};
171
- --emw-skeleton-rectangle-background: ${this.color};
172
- --emw-skeleton-primary-color: ${this.primaryColor};
173
- --emw-skeleton-secondary-color: ${this.secondaryColor};
174
157
  }
175
158
  `;
176
159
  break;
177
160
  case 'circle':
178
161
  styleBlock = `
179
162
  :host {
180
- --emw-skeleton-circle-size: ${this.size};
181
- --emw-skeleton-circle-background: ${this.color};
182
- --emw-skeleton-primary-color: ${this.primaryColor};
183
- --emw-skeleton-secondary-color: ${this.secondaryColor};
163
+ --emw-skeleton-circle-size: ${this.stylingValue.size};
184
164
  }
185
165
  `;
186
166
  break;
187
167
  default:
188
168
  styleBlock = '';
189
169
  }
190
- return (h(Host, { key: '5c185b76c438d20d4ad88bc48d94ff5628410bb7' }, h("style", { key: 'de95e60a5955d5b2af83710423fe40329c187f7e' }, styleBlock), this.handleStructure(this.structure)));
170
+ return (h(Host, { key: 'e6b885bfd985ce7663d990756fe9101e25eb97f0' }, h("style", { key: '06ae24c7bb74f4dacfc12ae58085333f9dc89da5' }, styleBlock), this.handleStructure(this.structure)));
191
171
  }
192
172
  static get watchers() { return {
193
173
  "structure": ["handleStructureChange"]
package/dist/pam-player-documents/index.esm.js CHANGED
@@ -1 +1 @@
1
- export{P as PamPlayerDocuments}from"./pam-player-documents-7540c613.js";import"./index-3f96eae4.js";
1
+ export{P as PamPlayerDocuments}from"./pam-player-documents-6c00caa8.js";import"./index-3f96eae4.js";
package/dist/pam-player-documents/pam-player-documents-6c00caa8.js ADDED
@@ -0,0 +1 @@
1
+ import{r as e,h as t}from"./index-3f96eae4.js";function n(e,t){if(e){const n=document.createElement("style");n.innerHTML=t,e.appendChild(n)}}function o(e,t){const n=new URL(t);fetch(n.href).then((e=>e.text())).then((t=>{const n=document.createElement("style");n.innerHTML=t,e&&e.appendChild(n)})).catch((e=>{console.error("There was an error while trying to load client styling from URL",e)}))}const r={en:{title:"Documents",documentType:"Document Type",documentNumber:"Document Number",documentNumberError:"Document number is invalid",saveButton:"Save Changes",successMessage:"Your changes have been saved!",errorMessageUpdate:"An error has occured when attempting to update the documents information",errorMessageFetch:"An error has occured when attempting to fetch the documents information"},"zh-hk":{title:"文件",documentType:"文件類型",documentNumber:"文件號碼",documentNumberError:"文件號碼無效",saveButton:"保存更改",successMessage:"您的更改已保存！",errorMessageUpdate:"嘗試更新文件信息時發生錯誤",errorMessageFetch:"在嘗試獲取文件信息時發生錯誤"},fr:{title:"Documents",documentType:"Type de document",documentNumber:"Numéro de document",documentNumberError:"Le numéro de document est invalide",saveButton:"Enregistrer les modifications",successMessage:"Vos modifications ont été enregistrées !",errorMessageUpdate:"Une erreur s'est produite lors de la tentative de mise à jour des informations des documents",errorMessageFetch:"Une erreur est survenue lors de la tentative de récupération des informations sur les documents"},ro:{title:"Documente",documentType:"Tip document",documentNumber:"Număr document",documentNumberError:"Numărul documentului este invalid",saveButton:"Salvează modificările",successMessage:"Modificările dvs. au fost salvate!",errorMessageUpdate:"A apărut o eroare la încercarea de a actualiza informațiile documentelor",errorMessageFetch:"A apărut o eroare la încercarea de a obține informațiile documentelor"},tr:{title:"Belgeler",documentType:"Belge Türü",documentNumber:"Belge Numarası",documentNumberError:"Belge numarası geçersiz",saveButton:"Değişiklikleri Kaydet",successMessage:"Değişiklikleriniz kaydedildi!",errorMessageUpdate:"Belgelerin bilgilerini güncellemeye çalışırken bir hata oluştu",errorMessageFetch:"Belgelerin bilgilerini almak için yapılan işlemde bir hata oluştu"},es:{title:"Documentos",documentType:"Tipo de documento",documentNumber:"Número de documento",documentNumberError:"El número de documento no es válido",saveButton:"Guardar cambios",successMessage:"¡Tus cambios han sido guardados!",errorMessageUpdate:"Se ha producido un error al intentar actualizar la información de los documentos",errorMessageFetch:"Se ha producido un error al intentar obtener la información de los documentos"},pt:{title:"Documentos",documentType:"Tipo de documento",documentNumber:"Número do documento",documentNumberError:"O número do documento é inválido",saveButton:"Salvar alterações",successMessage:"Suas alterações foram salvas!",errorMessageUpdate:"Ocorreu um erro ao tentar atualizar as informações dos documentos",errorMessageFetch:"Ocorreu um erro ao tentar buscar as informações dos documentos"},hr:{title:"Dokumenti",documentType:"Vrsta dokumenta",documentNumber:"Broj dokumenta",documentNumberError:"Broj dokumenta je nevažeći",saveButton:"Spremi promjene",successMessage:"Vaše promjene su spremljene!",errorMessageUpdate:"Došlo je do pogreške prilikom pokušaja ažuriranja informacija o dokumentima",errorMessageFetch:"Došlo je do greške prilikom pokušaja dobijanja informacija o dokumentima"},"pt-br":{title:"Documentos",documentType:"Tipo de documento",documentNumber:"Número do documento",documentNumberError:"O número do documento é inválido",saveButton:"Salvar alterações",successMessage:"Suas alterações foram salvas!",errorMessageUpdate:"Ocorreu um erro ao tentar atualizar as informações dos documentos",errorMessageFetch:"Ocorreu um erro ao tentar buscar as informações dos documentos"},"es-mx":{title:"Documentos",documentType:"Tipo de documento",documentNumber:"Número de documento",documentNumberError:"El número de documento no es válido",saveButton:"Guardar cambios",successMessage:"¡Tus cambios han sido guardados!",errorMessageUpdate:"Se ha producido un error al intentar actualizar la información de los documentos",errorMessageFetch:"Se ha producido un error al intentar obtener la información de los documentos"}},i=(e,t,n)=>{let o=r[r[t]?t:"en"][e];if(void 0!==n)for(const[e,t]of Object.entries(n.values)){const n=new RegExp(`{${e}}`,"g");o=o.replace(n,t)}return o},a=class{constructor(n){var o;e(this,n),this.dataRef={},this.fieldsState={},this.sendLoadedMessage=()=>{window.postMessage({type:"DOCUMENTS_LOADED"})},this.sendValidMessage=()=>{window.postMessage({type:"DOCUMENTS_VALIDITY",data:this.isSubmitButtonAvailable})},this.sendSuccessNotification=()=>{window.postMessage({type:"WidgetNotification",data:{type:"success",message:i("successMessage",this.lang)}},window.location.href)},this.sendErrorNotification=e=>{window.postMessage({type:"WidgetNotification",data:{type:"error",message:i(e,this.lang)}},window.location.href)},this.sendData=()=>{window.postMessage({type:"DOCUMENTS_UPDATE_DATA",data:this.data},window.location.href)},this.messageHandler=e=>{var t;switch(null===(t=e.data)||void 0===t?void 0:t.type){case"DOCUMENTS_DATA":this.data=e.data.data,this.resetState(),this.isSkeletonLoading=!1;break;case"DOCUMENTS_SEND_DATA":this.sendData()}},this.handleFetchResponse=async e=>{var t;if(e.status>=300){this.isError=!0;let n=await e.json();return this.errorCode=null===(t=n.thirdPartyResponse)||void 0===t?void 0:t.errorCode,this.errorMessage=i(this.errorCode?this.errorCode:"errorMessageFetch",this.lang),window.postMessage({type:"WidgetNotification",data:{type:"error",message:this.errorMessage}},window.location.href),Promise.reject(this.errorMessage)}if(this.isError=!1,e.headers.get("content-type")){let t=await e.json();return Promise.resolve(t)}return Promise.resolve()},this.getData=()=>{const e=new URL(`/api/v1/players/${this.userId}/player-identifiable-information/documents/`,this.endpoint),t=new Headers;t.append("X-SessionID",this.session);const n={method:"GET",headers:t};return new Promise(((t,o)=>{fetch(e.href,n).then((e=>this.handleFetchResponse(e))).then((e=>{this.data=e,t()})).catch((e=>{console.error(e),o(e)}))}))},this.buildFieldState=(e,t,n)=>Object.assign({isValid:e,initialValue:t,rule:n}),this.resetState=()=>{this.initData(),this.initEditableFieldsState(),this.invalidFields=0,this.isSubmitButtonAvailable=!1},this.updateState=e=>t=>{this.dataRef[e].documentNumber=t.target.value;const n=this.fieldsState[e].data.documentNumber,o=t.target.value,r=n.rule(o);r&&!n.isValid?(n.isValid=!0,this.invalidFields-=1):!r&&n.isValid&&(n.isValid=!1,this.invalidFields+=1),this.fieldsState[e].hasChanged=o!==n.initialValue;const i=this.isSubmitButtonAvailable;this.updateSubmitButtonStatus(),"true"!==this.isStandAlone&&this.isSubmitButtonAvailable!==i&&this.sendValidMessage()},this.updateData=e=>{e&&e.preventDefault();const t=[];for(const e of Object.keys(this.fieldsState)){if(!this.fieldsState[e].hasChanged)continue;const n=this.dataRef[e],o=new URL(`/api/v1/players/${this.userId}/player-identifiable-information/documents/${n.documentId}/`,this.endpoint),r=new Headers;r.append("X-SessionId",this.session),r.append("Content-Type","application/json-patch+json");const i={method:"PUT",headers:r,body:JSON.stringify(n)};t.push(fetch(o,i))}Promise.all(t).then((e=>{if(e.some((e=>!e.ok)))return this.sendErrorNotification("errorMessageUpdate");this.sendSuccessNotification(),this.getData().then((()=>this.resetState()))}))},this.updateSubmitButtonStatus=()=>{this.isSubmitButtonAvailable=0===this.invalidFields&&Object.values(this.fieldsState).some((e=>e.hasChanged))},this.editableField=(e,n,o,r)=>{const a=this.fieldsState[e].data[n],s=this.dataRef[e];return a?t("div",{class:"Field "+(a.isValid?"":"Invalid")},t("label",null,i(o,this.lang)),t("input",{type:"text",value:s[n],onKeyUp:this.updateState(e)}),!a.isValid&&t("p",{class:"Error"},i(r,this.lang))):null},this.staticField=(e,n,o)=>{const r=this.dataRef[e];return r&&r[n]?t("div",{class:"Field Disabled"},t("label",null,i(o,this.lang)),t("input",{type:"text",value:r[n],readonly:!0})):null},this.toggleScreen=()=>{window.postMessage({type:"PlayerAccountMenuActive",isMobile:this.isMobile},window.location.href)},this.userId=void 0,this.session=void 0,this.endpoint=void 0,this.lang="en",this.mbSource=void 0,this.clientStyling=void 0,this.clientStylingUrl=void 0,this.translationUrl=void 0,this.isEditable="false",this.isStandAlone="true",this.limitStylingAppends=!1,this.isSkeletonLoading=!0,this.isSubmitButtonAvailable=!1,this.invalidFields=0,this.isMobile=!!((o=window.navigator.userAgent).toLowerCase().match(/android/i)||o.toLowerCase().match(/blackberry|bb/i)||o.toLowerCase().match(/iphone|ipad|ipod/i)||o.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i)),this.isError=!1,this.errorMessage="",this.errorCode=""}handleStylingChange(e,t){e!==t&&n(this.stylingContainer,this.clientStyling)}handleStylingUrlChange(e,t){e!==t&&o(this.stylingContainer,this.clientStylingUrl)}async componentWillLoad(){"true"===this.isStandAlone&&await this.getData().then((()=>{this.initData(),this.initEditableFieldsState()})).finally((()=>this.isSkeletonLoading=!1))}componentDidLoad(){this.stylingContainer&&(null!=window.emMessageBuss?function(e,t){if(window.emMessageBus){const n=document.createElement("style");window.emMessageBus.subscribe(t,(t=>{n.innerHTML=t,e&&e.appendChild(n)}))}}(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&n(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&o(this.stylingContainer,this.clientStylingUrl))),"true"!==this.isStandAlone&&(window.addEventListener("message",this.messageHandler,!1),this.sendLoadedMessage())}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe(),"true"!==this.isStandAlone&&window.removeEventListener("message",this.messageHandler,!1)}initData(){for(const e of this.data.documents)this.dataRef[e.documentType]=e}initEditableFieldsState(){for(const[e,t]of Object.entries(this.dataRef))this.fieldsState[e]={},this.fieldsState[e].data={},this.fieldsState[e].data.documentNumber=this.buildFieldState(!0,t.documentNumber,(e=>e&&/^(?=.*[a-zA-Z0-9])[a-zA-Z0-9\s]+$/.test(e)&&e.length<=50)),this.fieldsState[e].hasChanged=!1}render(){return!this.isSkeletonLoading&&this.isError?t("div",{class:"errorContainer"},t("p",{class:"errorMessage",innerHTML:this.errorMessage})):t("div",{ref:e=>this.stylingContainer=e},this.isSkeletonLoading?t("form",{class:"PlayerDocumentsWrapper skeleton"},t("div",{class:"ReturnButton"},t("ui-skeleton",{structure:"title",width:"auto",height:"30px"})),t("div",{class:"Section"},t("section",{class:"SectionContent"},t("div",{class:"Field"},t("ui-skeleton",{structure:"text",width:"auto","margin-bottom":"10px",height:"10px"}),t("ui-skeleton",{structure:"title",width:"100%",height:"40px"})),t("div",{class:"Field"},t("ui-skeleton",{structure:"text",width:"auto","margin-bottom":"10px",height:"10px"}),t("ui-skeleton",{structure:"title",width:"100%",height:"40px"})))),t("section",{class:"ButtonsArea"},t("div",{class:"SaveButton"},t("ui-skeleton",{structure:"rectangle",width:"auto",height:"40px"})))):t("form",{class:"PlayerDocumentsWrapper "+(this.isMobile?"Mobile":"")},t("div",{class:"ReturnButton",onClick:this.toggleScreen},t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"15",height:"15",viewBox:"0 0 15 15"},t("g",{transform:"translate(-20 -158)"},t("g",{transform:"translate(20 158)"},t("path",{class:"aaa",d:"M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z",transform:"translate(15 15) rotate(180)"})))),t("h2",null,i("title",this.lang))),t("h2",{class:"HeaderText"},i("title",this.lang)),t("div",{class:"Section"},t("section",{class:"SectionContent"},Object.keys(this.dataRef).map((e=>t("div",{class:"CompoundField"},this.staticField(e,"documentType","documentType"),"true"===this.isEditable?this.editableField(e,"documentNumber","documentNumber","documentNumberError"):this.staticField(e,"documentNumber","documentNumber")))))),"true"===this.isStandAlone&&t("section",{class:"ButtonsArea"},t("button",{class:"SaveButton "+(this.isSubmitButtonAvailable?"":"Disabled"),onClick:this.updateData},i("saveButton")))))}static get watchers(){return{clientStyling:["handleStylingChange"],clientStylingUrl:["handleStylingUrlChange"]}}};a.style=':host {\n display: block;\n}\n\nbutton {\n font-family: var(--emw--button-typography);\n}\n\ninput, select, option {\n font-family: inherit;\n}\n\n.errorContainer {\n font-family: "Roboto";\n font-style: normal;\n font-family: sans-serif;\n display: flex;\n flex-direction: column;\n gap: 24px;\n width: 100%;\n height: 100%;\n}\n.errorContainer .errorMessage {\n color: var(--emw--color-error, var(--emw--color-red, #ed0909));\n font-size: var(--emw-font-size-small, 13px);\n display: block;\n justify-content: center;\n text-align: center;\n}\n\n.PlayerDocumentsWrapper {\n color: var(--emw--pam-typography, var(--emw-color-contrast, #07072A));\n background: var(--emw-color-pale, var(--emw--color-gray-50, #F1F1F1));\n padding: 50px;\n height: 100%;\n border-radius: var(--emw--border-radius-large, 10px);\n container-type: inline-size;\n opacity: 1;\n animation-name: fadeIn;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n animation-duration: 0.3s;\n}\n.PlayerDocumentsWrapper .ReturnButton {\n display: none;\n}\n.PlayerDocumentsWrapper h2 {\n font-size: var(--emw--font-size-x-large, 24px);\n color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n text-transform: capitalize;\n font-weight: var(--emw--font-weight-semibold, 500);\n}\n.PlayerDocumentsWrapper .Section {\n background: var(--emw-color-pale, var(--emw--color-gray-100, #E6E6E6));\n border-radius: var(--emw--border-radius-large, 10px);\n padding: 10px;\n margin-bottom: 10px;\n}\n.PlayerDocumentsWrapper .Section .SectionTitle {\n font-size: var(--emw--font-size-large, 20px);\n color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n text-transform: capitalize;\n font-weight: var(--emw--font-weight-semibold, 500);\n padding: 0;\n border: 0;\n margin-top: 10px;\n margin-bottom: 10px;\n background: transparent;\n cursor: pointer;\n}\n.PlayerDocumentsWrapper .Section .SectionContent {\n display: grid;\n column-gap: 50px;\n row-gap: 25px;\n grid-template-rows: auto;\n grid-template-columns: 1fr;\n padding-bottom: 30px;\n margin-top: 10px;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field {\n width: 100%;\n display: flex;\n flex-direction: column;\n /* Chrome, Safari, Edge, Opera */\n /* Firefox */\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field label {\n font-size: var(--emw--size-small, 14px);\n font-weight: var(--emw--font-weight-semibold, 500);\n margin-bottom: 5px;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field input {\n font-size: var(--emw--size-small, 14px);\n font-weight: var(--emw--font-weight-light, 300);\n color: var(--emw--pam-contrast, var(--emw-color-contrast, #07072A));\n padding: 10px;\n line-height: 16px;\n background: var(--emw-color-white, #FFFFFF);\n outline: none;\n transition-duration: var(--emw--transition-medium, 250ms);\n border: 1px solid var(--emw--color-gray-100, #353535);\n border-radius: var(--emw--border-radius-medium, 10px);\n width: 100%;\n box-sizing: border-box;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field input:focus, .PlayerDocumentsWrapper .Section .SectionContent .Field input :focus-within, .PlayerDocumentsWrapper .Section .SectionContent .Field input :focus-visible, .PlayerDocumentsWrapper .Section .SectionContent .Field input :visited {\n border: 1px solid var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n box-shadow: 0 0 0 1pt var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field input::-webkit-outer-spin-button,\n.PlayerDocumentsWrapper .Section .SectionContent .Field input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field input[type=number] {\n -moz-appearance: textfield;\n appearance: textfield;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field.Invalid input {\n border: 1px solid var(--emw-color-error, var(--emw-color-red, #FD2839));\n background: var(--emw-color-pale, #FBECF4);\n color: var(--emw-color-error, var(--emw-color-red, #FD2839));\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field .Error {\n color: var(--emw-color-error, var(--emw-color-red, #FD2839));\n font-size: var(--emw--font-size-x-small, 12px);\n line-height: 10px;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field.Disabled input {\n opacity: 0.5;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .CompoundField {\n width: 100%;\n display: flex;\n gap: 10px;\n flex-direction: row;\n}\n.PlayerDocumentsWrapper .ButtonsArea {\n grid-column-gap: 10px;\n grid-template-rows: auto;\n grid-template-columns: 1fr;\n margin-top: 20px;\n width: 50%;\n}\n.PlayerDocumentsWrapper .ButtonsArea .SaveButton {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n cursor: pointer;\n background-image: linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 20%), var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, white 30%));\n border: 2px solid var(--emw--button-border-color, #0E5924);\n color: var(--emw--button-text-color, #FFFFFF);\n border-radius: var(--emw--button-border-radius, 10px);\n font-size: var(--emw--size-standard, 16px);\n text-transform: uppercase;\n transition-duration: var(--emw--transition-medium, 250ms);\n max-width: 400px;\n min-width: 200px;\n padding: 13px 0;\n width: 100%;\n}\n.PlayerDocumentsWrapper .ButtonsArea .SaveButton:active {\n background: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n}\n.PlayerDocumentsWrapper .ButtonsArea .SaveButton.Disabled {\n opacity: 0.3;\n cursor: not-allowed;\n}\n.PlayerDocumentsWrapper.skeleton .ReturnButton {\n display: block;\n width: 200px;\n margin-top: 15px;\n margin-bottom: 20px;\n}\n.PlayerDocumentsWrapper.skeleton .Section .SectionContent {\n grid-template-columns: 1fr 1fr;\n max-height: 100%;\n overflow: hidden;\n}\n.PlayerDocumentsWrapper.skeleton .Section .SectionContent .Field {\n height: 60px;\n overflow: hidden;\n}\n.PlayerDocumentsWrapper.skeleton .ButtonsArea .SaveButton {\n width: 500px;\n border-radius: 30px;\n overflow: hidden;\n display: block;\n background-image: none;\n border: none;\n}\n@container (max-width: 425px) {\n .PlayerDocumentsWrapper {\n padding: 20px 15px;\n background: var(--emw-color-gray-50, #F9F8F8);\n max-width: unset;\n border-radius: var(--emw--border-radius-small, 5px);\n }\n .PlayerDocumentsWrapper .ReturnButton {\n color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n display: inline-flex;\n align-items: center;\n column-gap: 10px;\n margin-bottom: 10px;\n }\n .PlayerDocumentsWrapper .ReturnButton svg {\n fill: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n }\n .PlayerDocumentsWrapper .HeaderText {\n display: none;\n }\n .PlayerDocumentsWrapper h2 {\n color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n font-size: var(--emw--font-size-large, 20px);\n font-weight: var(--emw--font-weight-semibold, 500);\n }\n .PlayerDocumentsWrapper .Section .SectionContent {\n row-gap: 15px;\n grid-template-columns: 1fr;\n }\n .PlayerDocumentsWrapper .Section .SectionContent .CompoundField {\n width: 100%;\n display: flex;\n gap: 10px;\n flex-direction: column;\n }\n .PlayerDocumentsWrapper .Section .SectionTitle {\n margin-top: 5px;\n margin-bottom: 5px;\n font-size: var(--emw--font-size-medium, 16px);\n }\n .PlayerDocumentsWrapper .Section .Field label {\n color: var(--emw-color-gray-300, #58586B);\n font-size: var(--emw--size-x-small, 12px);\n font-weight: var(-emw--font-weight-normal, 400);\n }\n .PlayerDocumentsWrapper .Section .Field input {\n color: var(--emw-color-gray-300, #58586B);\n font-size: var(--emw--size-x-small, 12px);\n font-weight: var(--emw--font-weight-light, 300);\n }\n .PlayerDocumentsWrapper .ButtonsArea {\n grid-column-gap: 10px;\n width: 100%;\n grid-template-columns: 1fr 1fr;\n }\n .PlayerDocumentsWrapper .ButtonsArea .SaveButton {\n font-size: var(--emw--size-x-small, 12px);\n height: 40px;\n color: var(--emw-button-typography, var(--emw-color-white, #FFFFFF));\n }\n .PlayerDocumentsWrapper .ButtonsArea .SaveButton.Disabled {\n color: var(--emw-color-gray-300, #58586B);\n }\n .PlayerDocumentsWrapper.skeleton .Section .SectionContent {\n display: block;\n }\n .PlayerDocumentsWrapper.skeleton .Section .SectionContent .Field {\n margin-bottom: 15px;\n }\n .PlayerDocumentsWrapper.skeleton .ButtonsArea .SaveButton {\n width: 100%;\n height: 100%;\n border-radius: 20px;\n }\n}';export{a as P}
package/dist/pam-player-documents/pam-player-documents.esm.js CHANGED
@@ -1 +1 @@
1
- import{p as i,b as n}from"./index-3f96eae4.js";export{s as setNonce}from"./index-3f96eae4.js";import{g as e}from"./app-globals-0f993ce5.js";(()=>{const n=import.meta.url,e={};return""!==n&&(e.resourcesUrl=new URL(".",n).href),i(e)})().then((async i=>(await e(),n([["pam-player-documents_2",[[1,"pam-player-documents",{userId:[513,"user-id"],session:[513],endpoint:[513],lang:[513],mbSource:[513,"mb-source"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],translationUrl:[513,"translation-url"],isEditable:[513,"is-editable"],isStandAlone:[513,"is-stand-alone"],limitStylingAppends:[32],isSkeletonLoading:[32],isSubmitButtonAvailable:[32],invalidFields:[32],isMobile:[32]},null,{clientStyling:["handleStylingChange"],clientStylingUrl:["handleStylingUrlChange"]}],[0,"ui-skeleton",{structure:[1],width:[1],height:[1],borderRadius:[8,"border-radius"],marginBottom:[8,"margin-bottom"],marginTop:[8,"margin-top"],marginLeft:[8,"margin-left"],marginRight:[8,"margin-right"],animation:[4],rows:[2],size:[1],color:[1],primaryColor:[1,"primary-color"],secondaryColor:[1,"secondary-color"]},null,{structure:["handleStructureChange"]}]]]],i))));
1
+ import{p as i,b as e}from"./index-3f96eae4.js";export{s as setNonce}from"./index-3f96eae4.js";import{g as n}from"./app-globals-0f993ce5.js";(()=>{const e=import.meta.url,n={};return""!==e&&(n.resourcesUrl=new URL(".",e).href),i(n)})().then((async i=>(await n(),e([["pam-player-documents_2",[[1,"pam-player-documents",{userId:[513,"user-id"],session:[513],endpoint:[513],lang:[513],mbSource:[513,"mb-source"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],translationUrl:[513,"translation-url"],isEditable:[513,"is-editable"],isStandAlone:[513,"is-stand-alone"],limitStylingAppends:[32],isSkeletonLoading:[32],isSubmitButtonAvailable:[32],invalidFields:[32],isMobile:[32],isError:[32],errorMessage:[32],errorCode:[32]},null,{clientStyling:["handleStylingChange"],clientStylingUrl:["handleStylingUrlChange"]}],[0,"ui-skeleton",{structure:[1],width:[1],height:[1],borderRadius:[8,"border-radius"],marginBottom:[8,"margin-bottom"],marginTop:[8,"margin-top"],marginLeft:[8,"margin-left"],marginRight:[8,"margin-right"],animation:[4],rows:[2],size:[1]},null,{structure:["handleStructureChange"]}]]]],i))));
package/dist/pam-player-documents/pam-player-documents_2.entry.js CHANGED
@@ -1 +1 @@
1
- export{P as pam_player_documents}from"./pam-player-documents-7540c613.js";import{r as e,h as t,H as n}from"./index-3f96eae4.js";const r=class{constructor(t){e(this,t),this.stylingValue={width:this.handleStylingProps(this.width),height:this.handleStylingProps(this.height),borderRadius:this.handleStylingProps(this.borderRadius),marginBottom:this.handleStylingProps(this.marginBottom),marginTop:this.handleStylingProps(this.marginTop),marginLeft:this.handleStylingProps(this.marginLeft),marginRight:this.handleStylingProps(this.marginRight)},this.structure=void 0,this.width="unset",this.height="unset",this.borderRadius="unset",this.marginBottom="unset",this.marginTop="unset",this.marginLeft="unset",this.marginRight="unset",this.animation=!0,this.rows=0,this.size="100%",this.color="#c2c2c2",this.primaryColor="#c2c2c2",this.secondaryColor="#ffffff"}handleStructureChange(e,t){t!==e&&this.handleStructure(e)}handleStylingProps(e){switch(typeof e){case"number":return 0===e?0:`${e}px`;case"undefined":default:return"unset";case"string":return["auto","unset","none","inherit","initial"].includes(e)||e.endsWith("px")||e.endsWith("%")?e:"unset"}}handleStructure(e){switch(e){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 t("div",{class:"SkeletonContainer"},t("div",{class:"Logo "+(this.animation?"Skeleton":"")}))}renderImage(){return t("div",{class:"Image "+(this.animation?"Skeleton":"")})}renderTitle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Title "+(this.animation?"Skeleton":"")}))}renderText(){return t("div",{class:"SkeletonContainer"},Array.from({length:this.rows>0?this.rows:1}).map(((e,n)=>t("div",{key:n,class:"Text "+(this.animation?"Skeleton":"")}))))}renderRectangle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Rectangle "+(this.animation?"Skeleton":"")}))}renderCircle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Circle "+(this.animation?"Skeleton":"")}))}render(){let e="";switch(this.structure){case"logo":e=`\n :host {\n --emw-skeleton-logo-width: ${this.stylingValue.width};\n --emw-skeleton-logo-height: ${this.stylingValue.height};\n --emw-skeleton-logo-border-radius: ${this.stylingValue.borderRadius};\n --emw-skeleton-logo-margin-bottom: ${this.stylingValue.marginBottom};\n --emw-skeleton-logo-margin-top: ${this.stylingValue.marginTop};\n --emw-skeleton-logo-margin-left: ${this.stylingValue.marginLeft};\n --emw-skeleton-logo-margin-right: ${this.stylingValue.marginRight};\n --emw-skeleton-logo-background: ${this.color};\n --emw-skeleton-primary-color: ${this.primaryColor};\n --emw-skeleton-secondary-color: ${this.secondaryColor};\n }\n `;break;case"image":e=`\n :host {\n --emw-skeleton-image-width: ${this.stylingValue.width};\n --emw-skeleton-image-height: ${this.stylingValue.height};\n --emw-skeleton-image-border-radius: ${this.stylingValue.borderRadius};\n --emw-skeleton-image-margin-bottom: ${this.stylingValue.marginBottom};\n --emw-skeleton-image-margin-top: ${this.stylingValue.marginTop};\n --emw-skeleton-image-margin-left: ${this.stylingValue.marginLeft};\n --emw-skeleton-image-margin-right: ${this.stylingValue.marginRight};\n --emw-skeleton-image-background: ${this.color};\n --emw-skeleton-primary-color: ${this.primaryColor};\n --emw-skeleton-secondary-color: ${this.secondaryColor};\n }\n `;break;case"title":e=`\n :host {\n --emw-skeleton-title-width: ${this.stylingValue.width};\n --emw-skeleton-title-height: ${this.stylingValue.height};\n --emw-skeleton-title-border-radius: ${this.stylingValue.borderRadius};\n --emw-skeleton-title-margin-bottom: ${this.stylingValue.marginBottom};\n --emw-skeleton-title-margin-top: ${this.stylingValue.marginTop};\n --emw-skeleton-title-margin-left: ${this.stylingValue.marginLeft};\n --emw-skeleton-title-margin-right: ${this.stylingValue.marginRight};\n --emw-skeleton-title-background: ${this.color};\n --emw-skeleton-primary-color: ${this.primaryColor};\n --emw-skeleton-secondary-color: ${this.secondaryColor};\n }\n `;break;case"text":e=`\n :host {\n --emw-skeleton-text-width: ${this.stylingValue.width};\n --emw-skeleton-text-height: ${this.stylingValue.height};\n --emw-skeleton-text-border-radius: ${this.stylingValue.borderRadius};\n --emw-skeleton-text-margin-bottom: ${this.stylingValue.marginBottom};\n --emw-skeleton-text-margin-top: ${this.stylingValue.marginTop};\n --emw-skeleton-text-margin-left: ${this.stylingValue.marginLeft};\n --emw-skeleton-text-margin-right: ${this.stylingValue.marginRight};\n --emw-skeleton-text-background: ${this.color};\n --emw-skeleton-primary-color: ${this.primaryColor};\n --emw-skeleton-secondary-color: ${this.secondaryColor};\n }\n `;break;case"rectangle":e=`\n :host {\n --emw-skeleton-rectangle-width: ${this.stylingValue.width};\n --emw-skeleton-rectangle-height: ${this.stylingValue.height};\n --emw-skeleton-rectangle-border-radius: ${this.stylingValue.borderRadius};\n --emw-skeleton-rectangle-margin-bottom: ${this.stylingValue.marginBottom};\n --emw-skeleton-rectangle-margin-top: ${this.stylingValue.marginTop};\n --emw-skeleton-rectangle-margin-left: ${this.stylingValue.marginLeft};\n --emw-skeleton-rectangle-margin-right: ${this.stylingValue.marginRight};\n --emw-skeleton-rectangle-background: ${this.color};\n --emw-skeleton-primary-color: ${this.primaryColor};\n --emw-skeleton-secondary-color: ${this.secondaryColor};\n }\n `;break;case"circle":e=`\n :host {\n --emw-skeleton-circle-size: ${this.size};\n --emw-skeleton-circle-background: ${this.color};\n --emw-skeleton-primary-color: ${this.primaryColor};\n --emw-skeleton-secondary-color: ${this.secondaryColor};\n }\n `;break;default:e=""}return t(n,{key:"5c185b76c438d20d4ad88bc48d94ff5628410bb7"},t("style",{key:"de95e60a5955d5b2af83710423fe40329c187f7e"},e),this.handleStructure(this.structure))}static get watchers(){return{structure:["handleStructureChange"]}}};r.style=":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))}}";export{r as ui_skeleton}
1
+ export{P as pam_player_documents}from"./pam-player-documents-6c00caa8.js";import{r as e,h as t,H as n}from"./index-3f96eae4.js";const i=class{constructor(t){e(this,t),this.stylingValue={width:this.handleStylingProps(this.width),height:this.handleStylingProps(this.height),borderRadius:this.handleStylingProps(this.borderRadius),marginBottom:this.handleStylingProps(this.marginBottom),marginTop:this.handleStylingProps(this.marginTop),marginLeft:this.handleStylingProps(this.marginLeft),marginRight:this.handleStylingProps(this.marginRight),size:this.handleStylingProps(this.size)},this.structure=void 0,this.width="unset",this.height="unset",this.borderRadius="unset",this.marginBottom="unset",this.marginTop="unset",this.marginLeft="unset",this.marginRight="unset",this.animation=!0,this.rows=0,this.size="100%"}handleStructureChange(e,t){t!==e&&this.handleStructure(e)}handleStylingProps(e){switch(typeof e){case"number":return 0===e?0:`${e}px`;case"undefined":default:return"unset";case"string":return["auto","unset","none","inherit","initial"].includes(e)||e.endsWith("px")||e.endsWith("%")?e:"unset"}}handleStructure(e){switch(e){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 t("div",{class:"SkeletonContainer"},t("div",{class:"Logo "+(this.animation?"Skeleton":"")}))}renderImage(){return t("div",{class:"Image "+(this.animation?"Skeleton":"")})}renderTitle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Title "+(this.animation?"Skeleton":"")}))}renderText(){return t("div",{class:"SkeletonContainer"},Array.from({length:this.rows>0?this.rows:1}).map(((e,n)=>t("div",{key:n,class:"Text "+(this.animation?"Skeleton":"")}))))}renderRectangle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Rectangle "+(this.animation?"Skeleton":"")}))}renderCircle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Circle "+(this.animation?"Skeleton":"")}))}render(){let e="";switch(this.structure){case"logo":e=`\n :host {\n --emw-skeleton-logo-width: ${this.stylingValue.width};\n --emw-skeleton-logo-height: ${this.stylingValue.height};\n --emw-skeleton-logo-border-radius: ${this.stylingValue.borderRadius};\n --emw-skeleton-logo-margin-bottom: ${this.stylingValue.marginBottom};\n --emw-skeleton-logo-margin-top: ${this.stylingValue.marginTop};\n --emw-skeleton-logo-margin-left: ${this.stylingValue.marginLeft};\n --emw-skeleton-logo-margin-right: ${this.stylingValue.marginRight};\n }\n `;break;case"image":e=`\n :host {\n --emw-skeleton-image-width: ${this.stylingValue.width};\n --emw-skeleton-image-height: ${this.stylingValue.height};\n --emw-skeleton-image-border-radius: ${this.stylingValue.borderRadius};\n --emw-skeleton-image-margin-bottom: ${this.stylingValue.marginBottom};\n --emw-skeleton-image-margin-top: ${this.stylingValue.marginTop};\n --emw-skeleton-image-margin-left: ${this.stylingValue.marginLeft};\n --emw-skeleton-image-margin-right: ${this.stylingValue.marginRight};\n }\n `;break;case"title":e=`\n :host {\n --emw-skeleton-title-width: ${this.stylingValue.width};\n --emw-skeleton-title-height: ${this.stylingValue.height};\n --emw-skeleton-title-border-radius: ${this.stylingValue.borderRadius};\n --emw-skeleton-title-margin-bottom: ${this.stylingValue.marginBottom};\n --emw-skeleton-title-margin-top: ${this.stylingValue.marginTop};\n --emw-skeleton-title-margin-left: ${this.stylingValue.marginLeft};\n --emw-skeleton-title-margin-right: ${this.stylingValue.marginRight};\n }\n `;break;case"text":e=`\n :host {\n --emw-skeleton-text-width: ${this.stylingValue.width};\n --emw-skeleton-text-height: ${this.stylingValue.height};\n --emw-skeleton-text-border-radius: ${this.stylingValue.borderRadius};\n --emw-skeleton-text-margin-bottom: ${this.stylingValue.marginBottom};\n --emw-skeleton-text-margin-top: ${this.stylingValue.marginTop};\n --emw-skeleton-text-margin-left: ${this.stylingValue.marginLeft};\n --emw-skeleton-text-margin-right: ${this.stylingValue.marginRight};\n }\n `;break;case"rectangle":e=`\n :host {\n --emw-skeleton-rectangle-width: ${this.stylingValue.width};\n --emw-skeleton-rectangle-height: ${this.stylingValue.height};\n --emw-skeleton-rectangle-border-radius: ${this.stylingValue.borderRadius};\n --emw-skeleton-rectangle-margin-bottom: ${this.stylingValue.marginBottom};\n --emw-skeleton-rectangle-margin-top: ${this.stylingValue.marginTop};\n --emw-skeleton-rectangle-margin-left: ${this.stylingValue.marginLeft};\n --emw-skeleton-rectangle-margin-right: ${this.stylingValue.marginRight};\n }\n `;break;case"circle":e=`\n :host {\n --emw-skeleton-circle-size: ${this.stylingValue.size};\n }\n `;break;default:e=""}return t(n,{key:"e6b885bfd985ce7663d990756fe9101e25eb97f0"},t("style",{key:"06ae24c7bb74f4dacfc12ae58085333f9dc89da5"},e),this.handleStructure(this.structure))}static get watchers(){return{structure:["handleStructureChange"]}}};i.style=":host{display:block}.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, 10px)}.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, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.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, 10px);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, unset)}.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, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}";export{i as ui_skeleton}
package/dist/types/components/pam-player-documents/pam-player-documents.d.ts CHANGED
@@ -15,6 +15,9 @@ export declare class PamPlayerDocuments {
15
15
  isSubmitButtonAvailable: boolean;
16
16
  invalidFields: number;
17
17
  isMobile: boolean;
18
+ isError: boolean;
19
+ errorMessage: string;
20
+ errorCode: string;
18
21
  private stylingContainer;
19
22
  private stylingSubscription;
20
23
  data: any;
@@ -31,6 +34,11 @@ export declare class PamPlayerDocuments {
31
34
  sendErrorNotification: (errorKey: string) => void;
32
35
  sendData: () => void;
33
36
  messageHandler: (message: MessageEvent) => void;
37
+ /**
38
+ * Promise for fetching the response and returning the response or the erorr message
39
+ * @param res - response from the API
40
+ */
41
+ handleFetchResponse: (res: Response) => Promise<any>;
34
42
  getData: () => Promise<void>;
35
43
  initData(): void;
36
44
  buildFieldState: (isValid: any, initialValue: any, rule: any) => any;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/pam-player-documents",
3
- "version": "0.11.2",
3
+ "version": "0.12.0",
4
4
  "main": "./dist/index.cjs.js",
5
5
  "module": "./dist/index.js",
6
6
  "es2015": "./dist/esm/index.mjs",
package/dist/pam-player-documents/pam-player-documents-7540c613.js DELETED
@@ -1 +0,0 @@
1
- import{r as e,h as t}from"./index-3f96eae4.js";function n(e,t){if(e){const n=document.createElement("style");n.innerHTML=t,e.appendChild(n)}}function o(e,t){const n=new URL(t);fetch(n.href).then((e=>e.text())).then((t=>{const n=document.createElement("style");n.innerHTML=t,e&&e.appendChild(n)})).catch((e=>{console.error("There was an error while trying to load client styling from URL",e)}))}const r={en:{title:"Documents",documentType:"Document Type",documentNumber:"Document Number",documentNumberError:"Document number is invalid",saveButton:"Save Changes",successMessage:"Your changes have been saved!",errorMessageUpdate:"An error has occured when attempting to update the documents information",errorMessageFetch:"An error has occured when attempting to fetch the documents information"},"zh-hk":{title:"文件",documentType:"文件類型",documentNumber:"文件號碼",documentNumberError:"文件號碼無效",saveButton:"保存更改",successMessage:"您的更改已保存！",errorMessageUpdate:"嘗試更新文件信息時發生錯誤",errorMessageFetch:"在嘗試獲取文件信息時發生錯誤"},fr:{title:"Documents",documentType:"Type de document",documentNumber:"Numéro de document",documentNumberError:"Le numéro de document est invalide",saveButton:"Enregistrer les modifications",successMessage:"Vos modifications ont été enregistrées !",errorMessageUpdate:"Une erreur s'est produite lors de la tentative de mise à jour des informations des documents",errorMessageFetch:"Une erreur est survenue lors de la tentative de récupération des informations sur les documents"},ro:{title:"Documente",documentType:"Tip document",documentNumber:"Număr document",documentNumberError:"Numărul documentului este invalid",saveButton:"Salvează modificările",successMessage:"Modificările dvs. au fost salvate!",errorMessageUpdate:"A apărut o eroare la încercarea de a actualiza informațiile documentelor",errorMessageFetch:"A apărut o eroare la încercarea de a obține informațiile documentelor"},tr:{title:"Belgeler",documentType:"Belge Türü",documentNumber:"Belge Numarası",documentNumberError:"Belge numarası geçersiz",saveButton:"Değişiklikleri Kaydet",successMessage:"Değişiklikleriniz kaydedildi!",errorMessageUpdate:"Belgelerin bilgilerini güncellemeye çalışırken bir hata oluştu",errorMessageFetch:"Belgelerin bilgilerini almak için yapılan işlemde bir hata oluştu"},es:{title:"Documentos",documentType:"Tipo de documento",documentNumber:"Número de documento",documentNumberError:"El número de documento no es válido",saveButton:"Guardar cambios",successMessage:"¡Tus cambios han sido guardados!",errorMessageUpdate:"Se ha producido un error al intentar actualizar la información de los documentos",errorMessageFetch:"Se ha producido un error al intentar obtener la información de los documentos"},pt:{title:"Documentos",documentType:"Tipo de documento",documentNumber:"Número do documento",documentNumberError:"O número do documento é inválido",saveButton:"Salvar alterações",successMessage:"Suas alterações foram salvas!",errorMessageUpdate:"Ocorreu um erro ao tentar atualizar as informações dos documentos",errorMessageFetch:"Ocorreu um erro ao tentar buscar as informações dos documentos"},hr:{title:"Dokumenti",documentType:"Vrsta dokumenta",documentNumber:"Broj dokumenta",documentNumberError:"Broj dokumenta je nevažeći",saveButton:"Spremi promjene",successMessage:"Vaše promjene su spremljene!",errorMessageUpdate:"Došlo je do pogreške prilikom pokušaja ažuriranja informacija o dokumentima",errorMessageFetch:"Došlo je do greške prilikom pokušaja dobijanja informacija o dokumentima"},"pt-br":{title:"Documentos",documentType:"Tipo de documento",documentNumber:"Número do documento",documentNumberError:"O número do documento é inválido",saveButton:"Salvar alterações",successMessage:"Suas alterações foram salvas!",errorMessageUpdate:"Ocorreu um erro ao tentar atualizar as informações dos documentos",errorMessageFetch:"Ocorreu um erro ao tentar buscar as informações dos documentos"},"es-mx":{title:"Documentos",documentType:"Tipo de documento",documentNumber:"Número de documento",documentNumberError:"El número de documento no es válido",saveButton:"Guardar cambios",successMessage:"¡Tus cambios han sido guardados!",errorMessageUpdate:"Se ha producido un error al intentar actualizar la información de los documentos",errorMessageFetch:"Se ha producido un error al intentar obtener la información de los documentos"}},i=(e,t,n)=>{let o=r[r[t]?t:"en"][e];if(void 0!==n)for(const[e,t]of Object.entries(n.values)){const n=new RegExp(`{${e}}`,"g");o=o.replace(n,t)}return o},a=class{constructor(n){var o;e(this,n),this.dataRef={},this.fieldsState={},this.sendLoadedMessage=()=>{window.postMessage({type:"DOCUMENTS_LOADED"})},this.sendValidMessage=()=>{window.postMessage({type:"DOCUMENTS_VALIDITY",data:this.isSubmitButtonAvailable})},this.sendSuccessNotification=()=>{window.postMessage({type:"WidgetNotification",data:{type:"success",message:i("successMessage",this.lang)}},window.location.href)},this.sendErrorNotification=e=>{window.postMessage({type:"WidgetNotification",data:{type:"error",message:i(e,this.lang)}},window.location.href)},this.sendData=()=>{window.postMessage({type:"DOCUMENTS_UPDATE_DATA",data:this.data},window.location.href)},this.messageHandler=e=>{var t;switch(null===(t=e.data)||void 0===t?void 0:t.type){case"DOCUMENTS_DATA":this.data=e.data.data,this.resetState(),this.isSkeletonLoading=!1;break;case"DOCUMENTS_SEND_DATA":this.sendData()}},this.getData=()=>{const e=new URL(`/api/v1/players/${this.userId}/player-identifiable-information/documents/`,this.endpoint),t=new Headers;t.append("X-SessionID",this.session);const n={method:"GET",headers:t};return new Promise((t=>{fetch(e.href,n).then((e=>{if(e.ok)return e.json();this.sendErrorNotification("errorMessageFetch")})).then((e=>{this.data=e,t()}))}))},this.buildFieldState=(e,t,n)=>Object.assign({isValid:e,initialValue:t,rule:n}),this.resetState=()=>{this.initData(),this.initEditableFieldsState(),this.invalidFields=0,this.isSubmitButtonAvailable=!1},this.updateState=e=>t=>{this.dataRef[e].documentNumber=t.target.value;const n=this.fieldsState[e].data.documentNumber,o=t.target.value,r=n.rule(o);r&&!n.isValid?(n.isValid=!0,this.invalidFields-=1):!r&&n.isValid&&(n.isValid=!1,this.invalidFields+=1),this.fieldsState[e].hasChanged=o!==n.initialValue;const i=this.isSubmitButtonAvailable;this.updateSubmitButtonStatus(),"true"!==this.isStandAlone&&this.isSubmitButtonAvailable!==i&&this.sendValidMessage()},this.updateData=e=>{e&&e.preventDefault();const t=[];for(const e of Object.keys(this.fieldsState)){if(!this.fieldsState[e].hasChanged)continue;const n=this.dataRef[e],o=new URL(`/api/v1/players/${this.userId}/player-identifiable-information/documents/${n.documentId}/`,this.endpoint),r=new Headers;r.append("X-SessionId",this.session),r.append("Content-Type","application/json-patch+json");const i={method:"PUT",headers:r,body:JSON.stringify(n)};t.push(fetch(o,i))}Promise.all(t).then((e=>{if(e.some((e=>!e.ok)))return this.sendErrorNotification("errorMessageUpdate");this.sendSuccessNotification(),this.getData().then((()=>this.resetState()))}))},this.updateSubmitButtonStatus=()=>{this.isSubmitButtonAvailable=0===this.invalidFields&&Object.values(this.fieldsState).some((e=>e.hasChanged))},this.editableField=(e,n,o,r)=>{const a=this.fieldsState[e].data[n],s=this.dataRef[e];return a?t("div",{class:"Field "+(a.isValid?"":"Invalid")},t("label",null,i(o,this.lang)),t("input",{type:"text",value:s[n],onKeyUp:this.updateState(e)}),!a.isValid&&t("p",{class:"Error"},i(r,this.lang))):null},this.staticField=(e,n,o)=>{const r=this.dataRef[e];return r&&r[n]?t("div",{class:"Field Disabled"},t("label",null,i(o,this.lang)),t("input",{type:"text",value:r[n],readonly:!0})):null},this.toggleScreen=()=>{window.postMessage({type:"PlayerAccountMenuActive",isMobile:this.isMobile},window.location.href)},this.userId=void 0,this.session=void 0,this.endpoint=void 0,this.lang="en",this.mbSource=void 0,this.clientStyling=void 0,this.clientStylingUrl=void 0,this.translationUrl=void 0,this.isEditable="false",this.isStandAlone="true",this.limitStylingAppends=!1,this.isSkeletonLoading=!0,this.isSubmitButtonAvailable=!1,this.invalidFields=0,this.isMobile=!!((o=window.navigator.userAgent).toLowerCase().match(/android/i)||o.toLowerCase().match(/blackberry|bb/i)||o.toLowerCase().match(/iphone|ipad|ipod/i)||o.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i))}handleStylingChange(e,t){e!==t&&n(this.stylingContainer,this.clientStyling)}handleStylingUrlChange(e,t){e!==t&&o(this.stylingContainer,this.clientStylingUrl)}async componentWillLoad(){"true"===this.isStandAlone&&await this.getData().then((()=>{this.initData(),this.initEditableFieldsState()})).finally((()=>this.isSkeletonLoading=!1))}componentDidLoad(){this.stylingContainer&&(null!=window.emMessageBuss?function(e,t){if(window.emMessageBus){const n=document.createElement("style");window.emMessageBus.subscribe(t,(t=>{n.innerHTML=t,e&&e.appendChild(n)}))}}(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&n(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&o(this.stylingContainer,this.clientStylingUrl))),"true"!==this.isStandAlone&&(window.addEventListener("message",this.messageHandler,!1),this.sendLoadedMessage())}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe(),"true"!==this.isStandAlone&&window.removeEventListener("message",this.messageHandler,!1)}initData(){for(const e of this.data.documents)this.dataRef[e.documentType]=e}initEditableFieldsState(){for(const[e,t]of Object.entries(this.dataRef))this.fieldsState[e]={},this.fieldsState[e].data={},this.fieldsState[e].data.documentNumber=this.buildFieldState(!0,t.documentNumber,(e=>e&&/^(?=.*[a-zA-Z0-9])[a-zA-Z0-9\s]+$/.test(e)&&e.length<=50)),this.fieldsState[e].hasChanged=!1}render(){return t("div",{key:"7abe1ef66b345689e5b12f56c8c563f21bf31862",ref:e=>this.stylingContainer=e},this.isSkeletonLoading?t("form",{class:"PlayerDocumentsWrapper skeleton"},t("div",{class:"ReturnButton"},t("ui-skeleton",{structure:"title",width:"auto",height:"30px"})),t("div",{class:"Section"},t("section",{class:"SectionContent"},t("div",{class:"Field"},t("ui-skeleton",{structure:"text",width:"auto","margin-bottom":"10px",height:"10px"}),t("ui-skeleton",{structure:"title",width:"100%",height:"40px"})),t("div",{class:"Field"},t("ui-skeleton",{structure:"text",width:"auto","margin-bottom":"10px",height:"10px"}),t("ui-skeleton",{structure:"title",width:"100%",height:"40px"})))),t("section",{class:"ButtonsArea"},t("div",{class:"SaveButton"},t("ui-skeleton",{structure:"rectangle",width:"auto",height:"40px"})))):t("form",{class:"PlayerDocumentsWrapper "+(this.isMobile?"Mobile":"")},t("div",{class:"ReturnButton",onClick:this.toggleScreen},t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"15",height:"15",viewBox:"0 0 15 15"},t("g",{transform:"translate(-20 -158)"},t("g",{transform:"translate(20 158)"},t("path",{class:"aaa",d:"M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z",transform:"translate(15 15) rotate(180)"})))),t("h2",null,i("title",this.lang))),t("h2",{class:"HeaderText"},i("title",this.lang)),t("div",{class:"Section"},t("section",{class:"SectionContent"},Object.keys(this.dataRef).map((e=>t("div",{class:"CompoundField"},this.staticField(e,"documentType","documentType"),"true"===this.isEditable?this.editableField(e,"documentNumber","documentNumber","documentNumberError"):this.staticField(e,"documentNumber","documentNumber")))))),"true"===this.isStandAlone&&t("section",{class:"ButtonsArea"},t("button",{class:"SaveButton "+(this.isSubmitButtonAvailable?"":"Disabled"),onClick:this.updateData},i("saveButton")))))}static get watchers(){return{clientStyling:["handleStylingChange"],clientStylingUrl:["handleStylingUrlChange"]}}};a.style=":host {\n display: block;\n}\n\nbutton {\n font-family: var(--emw--button-typography);\n}\n\ninput, select, option {\n font-family: inherit;\n}\n\n.PlayerDocumentsWrapper {\n color: var(--emw--pam-typography, var(--emw-color-contrast, #07072A));\n background: var(--emw-color-pale, var(--emw--color-gray-50, #F1F1F1));\n padding: 50px;\n height: 100%;\n border-radius: var(--emw--border-radius-large, 10px);\n container-type: inline-size;\n opacity: 1;\n animation-name: fadeIn;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n animation-duration: 0.3s;\n}\n.PlayerDocumentsWrapper .ReturnButton {\n display: none;\n}\n.PlayerDocumentsWrapper h2 {\n font-size: var(--emw--font-size-x-large, 24px);\n color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n text-transform: capitalize;\n font-weight: var(--emw--font-weight-semibold, 500);\n}\n.PlayerDocumentsWrapper .Section {\n background: var(--emw-color-pale, var(--emw--color-gray-100, #E6E6E6));\n border-radius: var(--emw--border-radius-large, 10px);\n padding: 10px;\n margin-bottom: 10px;\n}\n.PlayerDocumentsWrapper .Section .SectionTitle {\n font-size: var(--emw--font-size-large, 20px);\n color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n text-transform: capitalize;\n font-weight: var(--emw--font-weight-semibold, 500);\n padding: 0;\n border: 0;\n margin-top: 10px;\n margin-bottom: 10px;\n background: transparent;\n cursor: pointer;\n}\n.PlayerDocumentsWrapper .Section .SectionContent {\n display: grid;\n column-gap: 50px;\n row-gap: 25px;\n grid-template-rows: auto;\n grid-template-columns: 1fr;\n padding-bottom: 30px;\n margin-top: 10px;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field {\n width: 100%;\n display: flex;\n flex-direction: column;\n /* Chrome, Safari, Edge, Opera */\n /* Firefox */\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field label {\n font-size: var(--emw--size-small, 14px);\n font-weight: var(--emw--font-weight-semibold, 500);\n margin-bottom: 5px;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field input {\n font-size: var(--emw--size-small, 14px);\n font-weight: var(--emw--font-weight-light, 300);\n color: var(--emw--pam-contrast, var(--emw-color-contrast, #07072A));\n padding: 10px;\n line-height: 16px;\n background: var(--emw-color-white, #FFFFFF);\n outline: none;\n transition-duration: var(--emw--transition-medium, 250ms);\n border: 1px solid var(--emw--color-gray-100, #353535);\n border-radius: var(--emw--border-radius-medium, 10px);\n width: 100%;\n box-sizing: border-box;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field input:focus, .PlayerDocumentsWrapper .Section .SectionContent .Field input :focus-within, .PlayerDocumentsWrapper .Section .SectionContent .Field input :focus-visible, .PlayerDocumentsWrapper .Section .SectionContent .Field input :visited {\n border: 1px solid var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n box-shadow: 0 0 0 1pt var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field input::-webkit-outer-spin-button,\n.PlayerDocumentsWrapper .Section .SectionContent .Field input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field input[type=number] {\n -moz-appearance: textfield;\n appearance: textfield;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field.Invalid input {\n border: 1px solid var(--emw-color-error, var(--emw-color-red, #FD2839));\n background: var(--emw-color-pale, #FBECF4);\n color: var(--emw-color-error, var(--emw-color-red, #FD2839));\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field .Error {\n color: var(--emw-color-error, var(--emw-color-red, #FD2839));\n font-size: var(--emw--font-size-x-small, 12px);\n line-height: 10px;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .Field.Disabled input {\n opacity: 0.5;\n}\n.PlayerDocumentsWrapper .Section .SectionContent .CompoundField {\n width: 100%;\n display: flex;\n gap: 10px;\n flex-direction: row;\n}\n.PlayerDocumentsWrapper .ButtonsArea {\n grid-column-gap: 10px;\n grid-template-rows: auto;\n grid-template-columns: 1fr;\n margin-top: 20px;\n width: 50%;\n}\n.PlayerDocumentsWrapper .ButtonsArea .SaveButton {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n cursor: pointer;\n background-image: linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 20%), var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, white 30%));\n border: 2px solid var(--emw--button-border-color, #0E5924);\n color: var(--emw--button-text-color, #FFFFFF);\n border-radius: var(--emw--button-border-radius, 10px);\n font-size: var(--emw--size-standard, 16px);\n text-transform: uppercase;\n transition-duration: var(--emw--transition-medium, 250ms);\n max-width: 400px;\n min-width: 200px;\n padding: 13px 0;\n width: 100%;\n}\n.PlayerDocumentsWrapper .ButtonsArea .SaveButton:active {\n background: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n}\n.PlayerDocumentsWrapper .ButtonsArea .SaveButton.Disabled {\n opacity: 0.3;\n cursor: not-allowed;\n}\n.PlayerDocumentsWrapper.skeleton .ReturnButton {\n display: block;\n width: 200px;\n margin-top: 15px;\n margin-bottom: 20px;\n}\n.PlayerDocumentsWrapper.skeleton .Section .SectionContent {\n grid-template-columns: 1fr 1fr;\n max-height: 100%;\n overflow: hidden;\n}\n.PlayerDocumentsWrapper.skeleton .Section .SectionContent .Field {\n height: 60px;\n overflow: hidden;\n}\n.PlayerDocumentsWrapper.skeleton .ButtonsArea .SaveButton {\n width: 500px;\n border-radius: 30px;\n overflow: hidden;\n display: block;\n background-image: none;\n border: none;\n}\n@container (max-width: 425px) {\n .PlayerDocumentsWrapper {\n padding: 20px 15px;\n background: var(--emw-color-gray-50, #F9F8F8);\n max-width: unset;\n border-radius: var(--emw--border-radius-small, 5px);\n }\n .PlayerDocumentsWrapper .ReturnButton {\n color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n display: inline-flex;\n align-items: center;\n column-gap: 10px;\n margin-bottom: 10px;\n }\n .PlayerDocumentsWrapper .ReturnButton svg {\n fill: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n }\n .PlayerDocumentsWrapper .HeaderText {\n display: none;\n }\n .PlayerDocumentsWrapper h2 {\n color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n font-size: var(--emw--font-size-large, 20px);\n font-weight: var(--emw--font-weight-semibold, 500);\n }\n .PlayerDocumentsWrapper .Section .SectionContent {\n row-gap: 15px;\n grid-template-columns: 1fr;\n }\n .PlayerDocumentsWrapper .Section .SectionContent .CompoundField {\n width: 100%;\n display: flex;\n gap: 10px;\n flex-direction: column;\n }\n .PlayerDocumentsWrapper .Section .SectionTitle {\n margin-top: 5px;\n margin-bottom: 5px;\n font-size: var(--emw--font-size-medium, 16px);\n }\n .PlayerDocumentsWrapper .Section .Field label {\n color: var(--emw-color-gray-300, #58586B);\n font-size: var(--emw--size-x-small, 12px);\n font-weight: var(-emw--font-weight-normal, 400);\n }\n .PlayerDocumentsWrapper .Section .Field input {\n color: var(--emw-color-gray-300, #58586B);\n font-size: var(--emw--size-x-small, 12px);\n font-weight: var(--emw--font-weight-light, 300);\n }\n .PlayerDocumentsWrapper .ButtonsArea {\n grid-column-gap: 10px;\n width: 100%;\n grid-template-columns: 1fr 1fr;\n }\n .PlayerDocumentsWrapper .ButtonsArea .SaveButton {\n font-size: var(--emw--size-x-small, 12px);\n height: 40px;\n color: var(--emw-button-typography, var(--emw-color-white, #FFFFFF));\n }\n .PlayerDocumentsWrapper .ButtonsArea .SaveButton.Disabled {\n color: var(--emw-color-gray-300, #58586B);\n }\n .PlayerDocumentsWrapper.skeleton .Section .SectionContent {\n display: block;\n }\n .PlayerDocumentsWrapper.skeleton .Section .SectionContent .Field {\n margin-bottom: 15px;\n }\n .PlayerDocumentsWrapper.skeleton .ButtonsArea .SaveButton {\n width: 100%;\n height: 100%;\n border-radius: 20px;\n }\n}";export{a as P}