@everymatrix/pam-profile-consents 1.90.6

package/dist/cjs/index.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const pamProfileConsents = require('./pam-profile-consents-e63c25d8.js');
+require('./index-80e34705.js');
+
+
+
+exports.PamProfileConsents = pamProfileConsents.PamProfileConsents;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-80e34705.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["pam-profile-consents_2.cjs",[[1,"pam-profile-consents",{"session":[513],"endpoint":[513],"lang":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"skeletonLoading":[32],"isError":[32],"errorMessage":[32],"hasChanges":[32],"isSaving":[32],"consentsState":[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);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/pam-profile-consents-e63c25d8.js

@@ -0,0 +1,399 @@
+'use strict';
+
+const index = require('./index-80e34705.js');
+
+const DEFAULT_LANGUAGE = 'en';
+const TRANSLATIONS = {
+    "en": {
+        "title": "Notifications",
+        "saveButton": "Save Changes",
+        "successMessage": "Your consent preferences have been saved!",
+        "errorMessageFetch": "An error has occurred when attempting to fetch consent preferences",
+        "errorMessageSave": "An error has occurred when attempting to save consent preferences"
+    },
+    "zh-hk": {
+        "title": "通知",
+        "saveButton": "保存更改",
+        "successMessage": "您的同意偏好已保存！",
+        "errorMessageFetch": "嘗試獲取同意偏好時發生錯誤",
+        "errorMessageSave": "嘗試保存同意偏好時發生錯誤"
+    },
+    "fr": {
+        "title": "Notifications",
+        "saveButton": "Enregistrer les modifications",
+        "successMessage": "Vos préférences de consentement ont été enregistrées !",
+        "errorMessageFetch": "Une erreur est survenue lors de la récupération des préférences de consentement",
+        "errorMessageSave": "Une erreur est survenue lors de l'enregistrement des préférences de consentement"
+    },
+    "ro": {
+        "title": "Notificări",
+        "saveButton": "Salvează modificările",
+        "successMessage": "Preferințele dvs. de consimțământ au fost salvate!",
+        "errorMessageFetch": "A apărut o eroare la încercarea de a obține preferințele de consimțământ",
+        "errorMessageSave": "A apărut o eroare la încercarea de a salva preferințele de consimțământ"
+    },
+    "tr": {
+        "title": "Bildirimler",
+        "saveButton": "Değişiklikleri Kaydet",
+        "successMessage": "Onay tercihleriniz kaydedildi!",
+        "errorMessageFetch": "Onay tercihlerini almaya çalışırken bir hata oluştu",
+        "errorMessageSave": "Onay tercihlerini kaydetmeye çalışırken bir hata oluştu"
+    },
+    "es": {
+        "title": "Notificaciones",
+        "saveButton": "Guardar cambios",
+        "successMessage": "¡Tus preferencias de consentimiento han sido guardadas!",
+        "errorMessageFetch": "Se ha producido un error al intentar obtener las preferencias de consentimiento",
+        "errorMessageSave": "Se ha producido un error al intentar guardar las preferencias de consentimiento"
+    },
+    "pt": {
+        "title": "Notificações",
+        "saveButton": "Salvar alterações",
+        "successMessage": "Suas preferências de consentimento foram salvas!",
+        "errorMessageFetch": "Ocorreu um erro ao tentar buscar as preferências de consentimento",
+        "errorMessageSave": "Ocorreu um erro ao tentar salvar as preferências de consentimento"
+    },
+    "hr": {
+        "title": "Obavijesti",
+        "saveButton": "Spremi promjene",
+        "successMessage": "Vaše postavke privola su spremljene!",
+        "errorMessageFetch": "Došlo je do greške prilikom pokušaja dobivanja postavki privola",
+        "errorMessageSave": "Došlo je do greške prilikom pokušaja spremanja postavki privola"
+    },
+    "pt-br": {
+        "title": "Notificações",
+        "saveButton": "Salvar alterações",
+        "successMessage": "Suas preferências de consentimento foram salvas!",
+        "errorMessageFetch": "Ocorreu um erro ao tentar buscar as preferências de consentimento",
+        "errorMessageSave": "Ocorreu um erro ao tentar salvar as preferências de consentimento"
+    },
+    "es-mx": {
+        "title": "Notificaciones",
+        "saveButton": "Guardar cambios",
+        "successMessage": "¡Tus preferencias de consentimiento han sido guardadas!",
+        "errorMessageFetch": "Se ha producido un error al intentar obtener las preferencias de consentimiento",
+        "errorMessageSave": "Se ha producido un error al intentar guardar las preferencias de consentimiento"
+    }
+};
+const translate = (key, customLang, values) => {
+    let lang = TRANSLATIONS[customLang] ? customLang : DEFAULT_LANGUAGE;
+    let translation = TRANSLATIONS[lang][key];
+    if (values !== undefined) {
+        for (const [key, value] of Object.entries(values.values)) {
+            const regex = new RegExp(`{${key}}`, 'g');
+            translation = translation.replace(regex, value);
+        }
+    }
+    return translation;
+};
+
+const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
+
+/**
+ * @name setClientStyling
+ * @description Method used to create and append to the passed element of the widget a style element with the content received
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStyling The style content
+ */
+function setClientStyling(stylingContainer, clientStyling) {
+  if (stylingContainer) {
+    const sheet = document.createElement('style');
+    sheet.innerHTML = clientStyling;
+    stylingContainer.appendChild(sheet);
+  }
+}
+
+/**
+ * @name setClientStylingURL
+ * @description Method used to create and append to the passed element of the widget a style element with the content fetched from a given URL
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStylingUrl The URL of the style content
+ */
+function setClientStylingURL(stylingContainer, clientStylingUrl) {
+  if (!stylingContainer || !clientStylingUrl) return;
+
+  const url = new URL(clientStylingUrl);
+
+  fetch(url.href)
+    .then((res) => res.text())
+    .then((data) => {
+      const cssFile = document.createElement('style');
+      cssFile.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(cssFile);
+      }
+    })
+    .catch((err) => {
+      console.error('There was an error while trying to load client styling from URL', err);
+    });
+}
+
+/**
+ * @name setStreamLibrary
+ * @description Method used to create and append to the passed element of the widget a style element with content fetched from the MessageBus
+ * @param {HTMLElement} stylingContainer The highest element of the widget
+ * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
+ * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
+ * @param {boolean} useAdoptedStyleSheets A flag to gradually enable testing of adoptedStyleSheets
+ */
+function setStreamStyling(stylingContainer, domain, subscription, useAdoptedStyleSheets = false) {
+  if (!window.emMessageBus) return;
+
+  const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
+
+  if (!supportAdoptStyle || !useAdoptedStyleSheets) {
+    subscription = getStyleTagSubscription(stylingContainer, domain);
+
+    return subscription;
+  }
+
+  if (!window[StyleCacheKey]) {
+    window[StyleCacheKey] = {};
+  }
+  subscription = getAdoptStyleSubscription(stylingContainer, domain);
+
+  const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
+  const wrappedUnsubscribe = () => {
+    if (window[StyleCacheKey][domain]) {
+      const cachedObject = window[StyleCacheKey][domain];
+      cachedObject.refCount > 1
+        ? (cachedObject.refCount = cachedObject.refCount - 1)
+        : delete window[StyleCacheKey][domain];
+    }
+
+    originalUnsubscribe();
+  };
+  subscription.unsubscribe = wrappedUnsubscribe;
+
+  return subscription;
+}
+
+function getStyleTagSubscription(stylingContainer, domain) {
+  const sheet = document.createElement('style');
+
+  return window.emMessageBus.subscribe(domain, (data) => {
+    if (stylingContainer) {
+      sheet.innerHTML = data;
+      stylingContainer.appendChild(sheet);
+    }
+  });
+}
+
+function getAdoptStyleSubscription(stylingContainer, domain) {
+  return window.emMessageBus.subscribe(domain, (data) => {
+    if (!stylingContainer) return;
+
+    const shadowRoot = stylingContainer.getRootNode();
+    const cacheStyleObject = window[StyleCacheKey];
+    let cachedStyle = cacheStyleObject[domain] && cacheStyleObject[domain].sheet;
+
+    if (!cachedStyle) {
+      cachedStyle = new CSSStyleSheet();
+      cachedStyle.replaceSync(data);
+      cacheStyleObject[domain] = {
+        sheet: cachedStyle,
+        refCount: 1
+      };
+    } else {
+      cacheStyleObject[domain].refCount = cacheStyleObject[domain].refCount + 1;
+    }
+
+    const currentSheets = shadowRoot.adoptedStyleSheets || [];
+    if (!currentSheets.includes(cachedStyle)) {
+      shadowRoot.adoptedStyleSheets = [...currentSheets, cachedStyle];
+    }
+  });
+}
+
+/**
+ * @name isMobile
+ * @description A method that returns if the browser used to access the app is from a mobile device or not
+ * @param {String} userAgent window.navigator.userAgent
+ * @returns {Boolean} true or false
+ */
+const isMobile = (userAgent) => {
+    return !!(userAgent.toLowerCase().match(/android/i) ||
+        userAgent.toLowerCase().match(/blackberry|bb/i) ||
+        userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
+        userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
+};
+
+const pamProfileConsentsCss = ":host {\n  display: block;\n}\n\nbutton {\n  font-family: var(--emw--button-typography);\n}\n\n.errorContainer {\n  font-family: \"Roboto\", sans-serif;\n  font-style: normal;\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.PamProfileConsentsWrapper {\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.PamProfileConsentsWrapper .HeaderArea {\n  margin-bottom: 20px;\n}\n.PamProfileConsentsWrapper .HeaderText {\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  margin: 0;\n}\n.PamProfileConsentsWrapper .CategoriesGrid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 20px;\n  margin-bottom: 20px;\n}\n.PamProfileConsentsWrapper .CategoryCard {\n  background: var(--emw-color-pale, var(--emw--color-gray-100, #E6E6E6));\n  border-radius: var(--emw--border-radius-large, 10px);\n  padding: 15px;\n}\n.PamProfileConsentsWrapper .CategoryTitle {\n  font-size: var(--emw--font-size-large, 20px);\n  color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n  font-weight: var(--emw--font-weight-semibold, 500);\n  margin: 0 0 15px 0;\n}\n.PamProfileConsentsWrapper .UngroupedSection {\n  background: var(--emw-color-pale, var(--emw--color-gray-100, #E6E6E6));\n  border-radius: var(--emw--border-radius-large, 10px);\n  padding: 15px;\n  margin-bottom: 20px;\n}\n.PamProfileConsentsWrapper .ConsentItem {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 0;\n  cursor: pointer;\n  user-select: none;\n}\n.PamProfileConsentsWrapper .Checkbox {\n  width: 22px;\n  height: 22px;\n  min-width: 22px;\n  border: 2px solid var(--emw--color-gray-300, #58586B);\n  border-radius: var(--emw--border-radius-small, 4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all var(--emw--transition-medium, 250ms);\n  background: transparent;\n}\n.PamProfileConsentsWrapper .Checkbox svg {\n  width: 14px;\n  height: 14px;\n  color: #FFFFFF;\n}\n.PamProfileConsentsWrapper .Checkbox.Checked {\n  background: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n  border-color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n}\n.PamProfileConsentsWrapper .ConsentLabel {\n  font-size: var(--emw--size-small, 14px);\n  font-weight: var(--emw--font-weight-normal, 400);\n  color: var(--emw--pam-typography, var(--emw-color-contrast, #07072A));\n}\n.PamProfileConsentsWrapper .ButtonsArea {\n  margin-top: 20px;\n  width: 50%;\n}\n.PamProfileConsentsWrapper .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.PamProfileConsentsWrapper .ButtonsArea .SaveButton:active {\n  background: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n}\n.PamProfileConsentsWrapper .ButtonsArea .SaveButton.Disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n.PamProfileConsentsWrapper.skeleton .HeaderArea {\n  margin-bottom: 20px;\n}\n.PamProfileConsentsWrapper.skeleton .CategoriesGrid {\n  overflow: hidden;\n}\n.PamProfileConsentsWrapper.skeleton .CategoryCard {\n  overflow: hidden;\n}\n.PamProfileConsentsWrapper.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  .PamProfileConsentsWrapper {\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  .PamProfileConsentsWrapper .HeaderText {\n    font-size: var(--emw--font-size-large, 20px);\n  }\n  .PamProfileConsentsWrapper .CategoriesGrid {\n    grid-template-columns: 1fr;\n  }\n  .PamProfileConsentsWrapper .CategoryTitle {\n    font-size: var(--emw--font-size-medium, 16px);\n  }\n  .PamProfileConsentsWrapper .ConsentLabel {\n    font-size: var(--emw--size-x-small, 12px);\n  }\n  .PamProfileConsentsWrapper .ButtonsArea {\n    width: 100%;\n  }\n  .PamProfileConsentsWrapper .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  .PamProfileConsentsWrapper .ButtonsArea .SaveButton.Disabled {\n    color: var(--emw-color-gray-300, #58586B);\n  }\n  .PamProfileConsentsWrapper.skeleton .ButtonsArea .SaveButton {\n    width: 100%;\n    height: 100%;\n    border-radius: 20px;\n  }\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0.01;\n  }\n  1% {\n    opacity: 0;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}";
+const PamProfileConsentsStyle0 = pamProfileConsentsCss;
+
+const PamProfileConsents = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.isMobileDevice = false;
+        this.allConsents = [];
+        this.categories = [];
+        this.ungroupedConsents = [];
+        this.handleFetchResponse = async (res) => {
+            var _a;
+            if (res.status >= 300) {
+                this.isError = true;
+                let response = await res.json();
+                const errorCode = (_a = response.thirdPartyResponse) === null || _a === void 0 ? void 0 : _a.errorCode;
+                this.errorMessage = errorCode ? translate(errorCode, this.lang) : translate('errorMessageFetch', this.lang);
+                return Promise.reject(this.errorMessage);
+            }
+            else {
+                this.isError = false;
+                if (res.headers.get('content-type')) {
+                    let response = await res.json();
+                    return Promise.resolve(response);
+                }
+                return Promise.resolve();
+            }
+        };
+        this.getConsentsData = () => {
+            const url = new URL(`/api/pam/v1/player-consents?IncludeUnset=true`, this.endpoint);
+            const headers = new Headers();
+            headers.append('X-SessionID', this.session);
+            const options = {
+                method: 'GET',
+                headers: headers
+            };
+            return new Promise((resolve, reject) => {
+                fetch(url.href, options)
+                    .then((res) => this.handleFetchResponse(res))
+                    .then(res => {
+                    this.allConsents = res;
+                    resolve();
+                })
+                    .catch((error) => {
+                    console.error(error);
+                    reject(error);
+                });
+            });
+        };
+        this.processConsents = () => {
+            const optionalConsents = this.allConsents.filter(c => !c.mustAccept);
+            const categoryMap = {};
+            const ungrouped = [];
+            optionalConsents.forEach(consent => {
+                if (consent.category) {
+                    const code = consent.category.categoryTagCode;
+                    if (!categoryMap[code]) {
+                        categoryMap[code] = {
+                            categoryTagCode: code,
+                            friendlyName: consent.category.friendlyName,
+                            consents: []
+                        };
+                    }
+                    categoryMap[code].consents.push(consent);
+                }
+                else {
+                    ungrouped.push(consent);
+                }
+            });
+            this.categories = Object.values(categoryMap);
+            this.ungroupedConsents = ungrouped;
+            const newState = {};
+            optionalConsents.forEach(consent => {
+                newState[consent.tagCode] = consent.status === 'Accepted';
+            });
+            this.consentsState = newState;
+            this.hasChanges = false;
+        };
+        this.toggleConsent = (tagCode) => {
+            this.consentsState = Object.assign(Object.assign({}, this.consentsState), { [tagCode]: !this.consentsState[tagCode] });
+            this.hasChanges = true;
+        };
+        this.saveConsents = () => {
+            if (!this.hasChanges || this.isSaving)
+                return;
+            this.isSaving = true;
+            const userConsents = Object.entries(this.consentsState).map(([tagCode, accepted]) => ({
+                tagCode,
+                status: accepted ? 'Accepted' : 'Denied'
+            }));
+            const url = new URL(`/api/pam/v1/player-consents`, this.endpoint);
+            const headers = new Headers();
+            headers.append('X-SessionID', this.session);
+            headers.append('Content-Type', 'application/json');
+            fetch(url.href, {
+                method: 'PATCH',
+                headers,
+                body: JSON.stringify({ note: '', userConsents })
+            })
+                .then(res => this.handleFetchResponse(res))
+                .then(() => {
+                return this.getConsentsData()
+                    .then(() => this.processConsents());
+            })
+                .catch((error) => {
+                console.error(error);
+            })
+                .finally(() => {
+                this.isSaving = false;
+            });
+        };
+        this.renderCheckbox = (consent) => {
+            const checked = this.consentsState[consent.tagCode];
+            return (index.h("div", { class: "ConsentItem", onClick: () => this.toggleConsent(consent.tagCode) }, index.h("div", { class: `Checkbox ${checked ? 'Checked' : ''}` }, checked &&
+                index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("polyline", { points: "20 6 9 17 4 12" }))), index.h("span", { class: "ConsentLabel" }, consent.friendlyName)));
+        };
+        this.session = undefined;
+        this.endpoint = undefined;
+        this.lang = 'en';
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = undefined;
+        this.skeletonLoading = true;
+        this.isError = false;
+        this.errorMessage = '';
+        this.hasChanges = false;
+        this.isSaving = false;
+        this.consentsState = {};
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            setClientStyling(this.stylingContainer, this.clientStyling);
+    }
+    handleStylingUrlChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+    }
+    async componentWillLoad() {
+        this.isMobileDevice = isMobile(window.navigator.userAgent);
+        await this.getConsentsData()
+            .then(() => {
+            this.processConsents();
+        })
+            .finally(() => this.skeletonLoading = false);
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (window.emMessageBuss != undefined) {
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            }
+            else {
+                if (this.clientStyling)
+                    setClientStyling(this.stylingContainer, this.clientStyling);
+                if (this.clientStylingUrl)
+                    setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+            }
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    render() {
+        if (!this.skeletonLoading && this.isError) {
+            return (index.h("div", { class: "errorContainer" }, index.h("p", { class: "errorMessage", innerHTML: this.errorMessage })));
+        }
+        return (index.h("div", { ref: el => this.stylingContainer = el }, this.skeletonLoading
+            ? index.h("div", { class: "PamProfileConsentsWrapper skeleton" }, index.h("div", { class: "HeaderArea" }, index.h("ui-skeleton", { structure: "title", width: "200px", height: "30px" })), index.h("div", { class: "CategoriesGrid" }, [...Array(4).keys()].map(() => index.h("div", { class: "CategoryCard" }, index.h("ui-skeleton", { structure: "text", width: "150px", height: "16px", "margin-bottom": "10px" }), index.h("ui-skeleton", { structure: "rectangle", width: "100%", height: "20px", "margin-bottom": "8px" }), index.h("ui-skeleton", { structure: "rectangle", width: "100%", height: "20px", "margin-bottom": "8px" })))), index.h("div", { class: "ButtonsArea" }, index.h("div", { class: "SaveButton" }, index.h("ui-skeleton", { structure: "rectangle", width: "auto", height: "50px" }))))
+            : index.h("div", { class: `PamProfileConsentsWrapper ${this.isMobileDevice ? 'Mobile' : ''}` }, index.h("div", { class: "HeaderArea" }, index.h("h2", { class: "HeaderText" }, translate('title', this.lang))), index.h("div", { class: "CategoriesGrid" }, this.categories.map(category => index.h("div", { class: "CategoryCard" }, index.h("h3", { class: "CategoryTitle" }, category.friendlyName), category.consents.map(consent => this.renderCheckbox(consent))))), this.ungroupedConsents.length > 0 &&
+                index.h("div", { class: "UngroupedSection" }, this.ungroupedConsents.map(consent => this.renderCheckbox(consent))), index.h("section", { class: "ButtonsArea" }, index.h("button", { class: `SaveButton ${!this.hasChanges || this.isSaving ? 'Disabled' : ''}`, onClick: this.saveConsents }, translate('saveButton', this.lang))))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleStylingChange"],
+        "clientStylingUrl": ["handleStylingUrlChange"]
+    }; }
+};
+PamProfileConsents.style = PamProfileConsentsStyle0;
+
+exports.PamProfileConsents = PamProfileConsents;

package/dist/cjs/pam-profile-consents.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-80e34705.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+/*
+ Stencil Client Patch Browser v4.19.2 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('pam-profile-consents.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["pam-profile-consents_2.cjs",[[1,"pam-profile-consents",{"session":[513],"endpoint":[513],"lang":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"skeletonLoading":[32],"isError":[32],"errorMessage":[32],"hasChanges":[32],"isSaving":[32],"consentsState":[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);
+});
+
+exports.setNonce = index.setNonce;

package/dist/cjs/pam-profile-consents_2.cjs.entry.js

@@ -0,0 +1,183 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const pamProfileConsents = require('./pam-profile-consents-e63c25d8.js');
+const index = require('./index-80e34705.js');
+
+const uiSkeletonCss = ":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.SkeletonRectangle{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)}.SkeletonCircle{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%}.SkeletonText{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)}.SkeletonText:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.SkeletonTitle{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)}.SkeletonImage{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)}.SkeletonLogo{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)}}";
+const UiSkeletonStyle0 = uiSkeletonCss;
+
+const UiSkeleton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        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 = undefined;
+        this.width = 'unset';
+        this.height = 'unset';
+        this.borderRadius = 'unset';
+        this.marginBottom = 'unset';
+        this.marginTop = 'unset';
+        this.marginLeft = 'unset';
+        this.marginRight = 'unset';
+        this.animation = true;
+        this.rows = 0;
+        this.size = '100%';
+    }
+    handleStructureChange(newValue, oldValue) {
+        if (oldValue !== newValue) {
+            this.handleStructure(newValue);
+        }
+    }
+    handleStylingProps(value) {
+        switch (typeof value) {
+            case 'number':
+                return value === 0 ? 0 : `${value}px`;
+            case 'undefined':
+                return 'unset';
+            case 'string':
+                if (['auto', 'unset', 'none', 'inherit', 'initial'].includes(value) ||
+                    value.endsWith('px') ||
+                    value.endsWith('%')) {
+                    return value;
+                }
+                else {
+                    return 'unset';
+                }
+            default:
+                return 'unset';
+        }
+    }
+    handleStructure(structure) {
+        switch (structure) {
+            case 'logo':
+                return this.renderLogo();
+            case 'image':
+                return this.renderImage();
+            case 'title':
+                return this.renderTitle();
+            case 'text':
+                return this.renderText();
+            case 'rectangle':
+                return this.renderRectangle();
+            case 'circle':
+                return this.renderCircle();
+            default:
+                return null;
+        }
+    }
+    renderLogo() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: 'SkeletonLogo ' + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderImage() {
+        return index.h("div", { class: 'SkeletonImage ' + (this.animation ? 'Skeleton' : '') });
+    }
+    renderTitle() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: 'SkeletonTitle ' + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderText() {
+        return (index.h("div", { class: "SkeletonContainer" }, Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index$1) => (index.h("div", { key: index$1, class: 'SkeletonText ' + (this.animation ? 'Skeleton' : '') })))));
+    }
+    renderRectangle() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: 'SkeletonRectangle ' + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderCircle() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: 'SkeletonCircle ' + (this.animation ? 'Skeleton' : '') })));
+    }
+    render() {
+        let styleBlock = '';
+        switch (this.structure) {
+            case 'logo':
+                styleBlock = `
+          :host {
+            --emw-skeleton-logo-width: ${this.stylingValue.width};
+            --emw-skeleton-logo-height: ${this.stylingValue.height};
+            --emw-skeleton-logo-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-logo-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-logo-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-logo-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-logo-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+                break;
+            case 'image':
+                styleBlock = `
+          :host {
+            --emw-skeleton-image-width: ${this.stylingValue.width};
+            --emw-skeleton-image-height: ${this.stylingValue.height};
+            --emw-skeleton-image-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-image-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-image-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-image-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-image-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+                break;
+            case 'title':
+                styleBlock = `
+          :host {
+            --emw-skeleton-title-width: ${this.stylingValue.width};
+            --emw-skeleton-title-height: ${this.stylingValue.height};
+            --emw-skeleton-title-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-title-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-title-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-title-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-title-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+                break;
+            case 'text':
+                styleBlock = `
+          :host {
+            --emw-skeleton-text-width: ${this.stylingValue.width};
+            --emw-skeleton-text-height: ${this.stylingValue.height};
+            --emw-skeleton-text-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-text-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-text-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-text-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-text-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+                break;
+            case 'rectangle':
+                styleBlock = `
+          :host {
+            --emw-skeleton-rectangle-width: ${this.stylingValue.width};
+            --emw-skeleton-rectangle-height: ${this.stylingValue.height};
+            --emw-skeleton-rectangle-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-rectangle-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-rectangle-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-rectangle-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-rectangle-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+                break;
+            case 'circle':
+                styleBlock = `
+          :host {
+            --emw-skeleton-circle-size: ${this.stylingValue.size};
+          }
+        `;
+                break;
+            default:
+                styleBlock = '';
+        }
+        return (index.h(index.Host, { key: 'c2a2650acd416962a2bc4e1a7ee18bc6d8e2def8' }, index.h("style", { key: '9bd7fc1f9e9ed9f17735a7b72fce6f09696f5e19' }, styleBlock), this.handleStructure(this.structure)));
+    }
+    static get watchers() { return {
+        "structure": ["handleStructureChange"]
+    }; }
+};
+UiSkeleton.style = UiSkeletonStyle0;
+
+exports.pam_profile_consents = pamProfileConsents.PamProfileConsents;
+exports.ui_skeleton = UiSkeleton;

package/dist/collection/collection-manifest.json

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