@everymatrix/user-action-controller 1.0.0 → 1.15.0

package/dist/cjs/generic-user-consent_3.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5b463836.js');
+const index = require('./index-87049e21.js');
 
 const genericUserConsentCss = ":host{display:block}.ConsentTitle{margin-bottom:0.2rem;font-weight:600}.userConsent:hover{border-bottom:1px solid #000;cursor:pointer}.MandatoryItem{color:#f00;font-size:1.2rem}";
 
@@ -34,10 +34,15 @@ const GenericUserConsent = class {
      * link to privacy policy page
      */
     this.privacyLink = '#';
+    /**
+     * Client custom styling via inline style
+     */
+    this.clientStyling = '';
     /**
      * the text content to be rendered by the component. Determined at runtime
      */
     this.textContent = '';
+    this.limitStylingAppends = false;
     // Maybe switch this out with a localization source
     this.stringVariants = {
       termsandconditions1: "I accept the ",
@@ -48,6 +53,11 @@ const GenericUserConsent = class {
       sms: "I consent to receive marketing communication via SMS.",
       emailmarketing: "I consent to receive marketing communication via Email."
     };
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
   }
   determineTextContent() {
     let result = this.consentType === 'termsandconditions' ?
@@ -61,12 +71,21 @@ const GenericUserConsent = class {
       value: this.checkboxInput.checked
     });
   }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
   render() {
     if (this.queried) {
       this.userLegislationConsentHandler();
     }
     this.textContent = this.determineTextContent();
-    return (index.h("div", null, index.h("p", { class: "ConsentTitle" }, this.consentTitle), index.h("label", { class: "userConsent", htmlFor: "userConsent" }, index.h("input", { ref: el => this.checkboxInput = el, id: "userConsent", type: "checkbox", onInput: () => this.userLegislationConsentHandler() }), this.textContent, this.mandatory && index.h("span", { class: "MandatoryItem" }, "*"))));
+    return (index.h("div", { ref: el => this.stylingContainer = el }, index.h("p", { class: "ConsentTitle" }, this.consentTitle), index.h("label", { class: "userConsent", htmlFor: "userConsent" }, index.h("input", { ref: el => this.checkboxInput = el, id: "userConsent", type: "checkbox", onInput: () => this.userLegislationConsentHandler() }), this.textContent, this.mandatory && index.h("span", { class: "MandatoryItem" }, "*"))));
   }
 };
 GenericUserConsent.style = genericUserConsentCss;
@@ -76,10 +95,29 @@ const legislationWrapperCss = ":host{display:block}";
 const LegislationWrapper = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * Client custom styling via inline style
+     */
+    this.clientStyling = '';
+    this.limitStylingAppends = false;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
   }
   render() {
     const activeUAList = this.activeUserActions.replace(/ /g, '').split(',');
-    return (index.h("div", { class: "LegislationWrapper" }, activeUAList.map(action => (index.h("slot", { name: action })))));
+    return (index.h("div", { class: "LegislationWrapper", ref: el => this.stylingContainer = el }, activeUAList.map(action => (index.h("slot", { name: action })))));
   }
 };
 LegislationWrapper.style = legislationWrapperCss;
@@ -94,6 +132,14 @@ const UserActionController = class {
      * Event name to be sent when the button is clicked
      */
     this.postMessageEvent = 'closeButtonClicked';
+    /**
+     * Client custom styling via inline style
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
     this.consentTitles = {
       termsandconditions: "Terms and Conditions",
       sms: "SMS marketing",
@@ -105,10 +151,30 @@ const UserActionController = class {
     this.queryFired = false;
     this.readyActionsCount = 0;
     this.receivedQueryResponses = 0;
+    this.limitStylingAppends = false;
     this.mandatoryActions = ['termsandconditions'];
     this.requiredActionsCount = 0;
     this.expectedQueryResponses = 0;
     this.userActions = [];
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let url = new URL(this.clientStylingUrl);
+      let cssFile = document.createElement('style');
+      fetch(url.href)
+        .then((res) => res.text())
+        .then((data) => {
+        this.clientStyling = data;
+        cssFile.innerHTML = data;
+        setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
+      })
+        .catch((err) => {
+        console.log('error ', err);
+      });
+    };
   }
   determineMandatoryActions() {
     let url = new URL(`${this.endpoint}v1/player/consentRequirements`);
@@ -191,12 +257,23 @@ const UserActionController = class {
   componentWillLoad() {
     return this.determineMandatoryActions();
   }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
   render() {
     const activeUAList = this.activeUserActions.replace(/ /g, '').split(',');
     this.requiredActionsCount = activeUAList.filter(action => this.mandatoryActions.includes(action)).length;
     this.expectedQueryResponses = activeUAList.length;
-    return (index.h("div", { class: "QueryReferenceContainer" }, index.h("div", { class: "UserActionController" }, this.showCloseButton &&
-      index.h("div", { class: "CloseButton", onClick: () => this.handleClose() }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", fill: "currentColor", viewBox: "0 0 16 16" }, index.h("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" }))), index.h("h2", { class: "UserConsentNotice" }, this.userNoticeText), index.h("legislation-wrapper", { "active-user-actions": this.activeUserActions }, activeUAList.map(item => (index.h("generic-user-consent", { slot: item, consentType: item, consentTitle: this.consentTitles[item], queried: this.queryFired, mandatory: this.mandatoryActions.includes(item) })))), this.includeSubmitButton &&
+    return (index.h("div", { class: "QueryReferenceContainer", ref: el => this.stylingContainer = el }, index.h("div", { class: "UserActionController" }, this.showCloseButton &&
+      index.h("div", { class: "CloseButton", onClick: () => this.handleClose() }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", fill: "currentColor", viewBox: "0 0 16 16" }, index.h("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" }))), index.h("h2", { class: "UserConsentNotice" }, this.userNoticeText), index.h("legislation-wrapper", { "active-user-actions": this.activeUserActions, "client-styling": this.clientStyling }, activeUAList.map(item => (index.h("generic-user-consent", { slot: item, consentType: item, consentTitle: this.consentTitles[item], queried: this.queryFired, mandatory: this.mandatoryActions.includes(item), "client-styling": this.clientStyling })))), this.includeSubmitButton &&
       index.h("button", { class: "ConsentSubmitButton", disabled: this.readyActionsCount === this.requiredActionsCount ? false : true, onClick: () => this.handleApplyClick() }, this.submitButtonText))));
   }
   static get watchers() { return {

package/dist/cjs/{index-5b463836.js → index-87049e21.js}

@@ -585,9 +585,14 @@ const callNodeRefs = (vNode) => {
 };
 const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
+    const cmpMeta = hostRef.$cmpMeta$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
     const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
     hostTagName = hostElm.tagName;
+    if (cmpMeta.$attrsToReflect$) {
+        rootVnode.$attrs$ = rootVnode.$attrs$ || {};
+        cmpMeta.$attrsToReflect$.map(([propName, attribute]) => (rootVnode.$attrs$[attribute] = hostElm[propName]));
+    }
     rootVnode.$tag$ = null;
     rootVnode.$flags$ |= 4 /* isHost */;
     hostRef.$vnode$ = rootVnode;
@@ -727,7 +732,11 @@ const postUpdateComponent = (hostRef) => {
     const tagName = hostRef.$cmpMeta$.$tagName$;
     const elm = hostRef.$hostElement$;
     const endPostUpdate = createTime('postUpdate', tagName);
+    const instance = hostRef.$lazyInstance$ ;
     const ancestorComponent = hostRef.$ancestorComponent$;
+    {
+        safeCall(instance, 'componentDidRender');
+    }
     if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
         hostRef.$flags$ |= 64 /* hasLoadedComponent */;
         {
@@ -957,6 +966,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                 .map(([propName, m]) => {
                 const attrName = m[1] || propName;
                 attrNameToPropName.set(attrName, propName);
+                if (m[0] & 512 /* ReflectAttr */) {
+                    cmpMeta.$attrsToReflect$.push([propName, attrName]);
+                }
                 return attrName;
             });
         }
@@ -1126,6 +1138,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             {
                 cmpMeta.$listeners$ = compactMeta[3];
             }
+            {
+                cmpMeta.$attrsToReflect$ = [];
+            }
             {
                 cmpMeta.$watchers$ = {};
             }

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5b463836.js');
+const index = require('./index-87049e21.js');
 
 /*
  Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["generic-user-consent_3.cjs",[[1,"user-action-controller",{"endpoint":[1],"userSession":[1,"user-session"],"userId":[1,"user-id"],"includeSubmitButton":[4,"include-submit-button"],"submitButtonText":[1,"submit-button-text"],"userNoticeText":[1,"user-notice-text"],"activeUserActions":[1,"active-user-actions"],"showCloseButton":[4,"show-close-button"],"usePostmessage":[4,"use-postmessage"],"postMessageEvent":[1,"post-message-event"],"queryFired":[32],"readyActionsCount":[32],"receivedQueryResponses":[32]},[[0,"userLegislationConsent","userLegislationConsentHandler"]]],[1,"generic-user-consent",{"queried":[4],"consentType":[1,"consent-type"],"mandatory":[4],"consentTitle":[1,"consent-title"],"tcLink":[1,"tc-link"],"privacyLink":[1,"privacy-link"],"textContent":[32]}],[1,"legislation-wrapper",{"activeUserActions":[1,"active-user-actions"]}]]]], options);
+  return index.bootstrapLazy([["generic-user-consent_3.cjs",[[1,"user-action-controller",{"endpoint":[513],"userSession":[513,"user-session"],"userId":[513,"user-id"],"includeSubmitButton":[516,"include-submit-button"],"submitButtonText":[513,"submit-button-text"],"userNoticeText":[513,"user-notice-text"],"activeUserActions":[513,"active-user-actions"],"showCloseButton":[516,"show-close-button"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[1,"post-message-event"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"queryFired":[32],"readyActionsCount":[32],"receivedQueryResponses":[32],"limitStylingAppends":[32]},[[0,"userLegislationConsent","userLegislationConsentHandler"]]],[1,"generic-user-consent",{"queried":[516],"consentType":[513,"consent-type"],"mandatory":[516],"consentTitle":[513,"consent-title"],"tcLink":[513,"tc-link"],"privacyLink":[513,"privacy-link"],"clientStyling":[1,"client-styling"],"textContent":[32],"limitStylingAppends":[32]}],[1,"legislation-wrapper",{"activeUserActions":[513,"active-user-actions"],"clientStyling":[1,"client-styling"],"limitStylingAppends":[32]}]]]], options);
   });
 };
 

package/dist/cjs/user-action-controller.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-5b463836.js');
+const index = require('./index-87049e21.js');
 
 /*
  Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["generic-user-consent_3.cjs",[[1,"user-action-controller",{"endpoint":[1],"userSession":[1,"user-session"],"userId":[1,"user-id"],"includeSubmitButton":[4,"include-submit-button"],"submitButtonText":[1,"submit-button-text"],"userNoticeText":[1,"user-notice-text"],"activeUserActions":[1,"active-user-actions"],"showCloseButton":[4,"show-close-button"],"usePostmessage":[4,"use-postmessage"],"postMessageEvent":[1,"post-message-event"],"queryFired":[32],"readyActionsCount":[32],"receivedQueryResponses":[32]},[[0,"userLegislationConsent","userLegislationConsentHandler"]]],[1,"generic-user-consent",{"queried":[4],"consentType":[1,"consent-type"],"mandatory":[4],"consentTitle":[1,"consent-title"],"tcLink":[1,"tc-link"],"privacyLink":[1,"privacy-link"],"textContent":[32]}],[1,"legislation-wrapper",{"activeUserActions":[1,"active-user-actions"]}]]]], options);
+  return index.bootstrapLazy([["generic-user-consent_3.cjs",[[1,"user-action-controller",{"endpoint":[513],"userSession":[513,"user-session"],"userId":[513,"user-id"],"includeSubmitButton":[516,"include-submit-button"],"submitButtonText":[513,"submit-button-text"],"userNoticeText":[513,"user-notice-text"],"activeUserActions":[513,"active-user-actions"],"showCloseButton":[516,"show-close-button"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[1,"post-message-event"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"queryFired":[32],"readyActionsCount":[32],"receivedQueryResponses":[32],"limitStylingAppends":[32]},[[0,"userLegislationConsent","userLegislationConsentHandler"]]],[1,"generic-user-consent",{"queried":[516],"consentType":[513,"consent-type"],"mandatory":[516],"consentTitle":[513,"consent-title"],"tcLink":[513,"tc-link"],"privacyLink":[513,"privacy-link"],"clientStyling":[1,"client-styling"],"textContent":[32],"limitStylingAppends":[32]}],[1,"legislation-wrapper",{"activeUserActions":[513,"active-user-actions"],"clientStyling":[1,"client-styling"],"limitStylingAppends":[32]}]]]], options);
 });

package/dist/collection/components/user-action-controller/user-action-controller.js

@@ -7,6 +7,14 @@ export class UserActionController {
      * Event name to be sent when the button is clicked
      */
     this.postMessageEvent = 'closeButtonClicked';
+    /**
+     * Client custom styling via inline style
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
     this.consentTitles = {
       termsandconditions: "Terms and Conditions",
       sms: "SMS marketing",
@@ -18,10 +26,30 @@ export class UserActionController {
     this.queryFired = false;
     this.readyActionsCount = 0;
     this.receivedQueryResponses = 0;
+    this.limitStylingAppends = false;
     this.mandatoryActions = ['termsandconditions'];
     this.requiredActionsCount = 0;
     this.expectedQueryResponses = 0;
     this.userActions = [];
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let url = new URL(this.clientStylingUrl);
+      let cssFile = document.createElement('style');
+      fetch(url.href)
+        .then((res) => res.text())
+        .then((data) => {
+        this.clientStyling = data;
+        cssFile.innerHTML = data;
+        setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
+      })
+        .catch((err) => {
+        console.log('error ', err);
+      });
+    };
   }
   determineMandatoryActions() {
     let url = new URL(`${this.endpoint}v1/player/consentRequirements`);
@@ -104,18 +132,29 @@ export class UserActionController {
   componentWillLoad() {
     return this.determineMandatoryActions();
   }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
   render() {
     const activeUAList = this.activeUserActions.replace(/ /g, '').split(',');
     this.requiredActionsCount = activeUAList.filter(action => this.mandatoryActions.includes(action)).length;
     this.expectedQueryResponses = activeUAList.length;
-    return (h("div", { class: "QueryReferenceContainer" },
+    return (h("div", { class: "QueryReferenceContainer", ref: el => this.stylingContainer = el },
       h("div", { class: "UserActionController" },
         this.showCloseButton &&
           h("div", { class: "CloseButton", onClick: () => this.handleClose() },
             h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", fill: "currentColor", viewBox: "0 0 16 16" },
               h("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" }))),
         h("h2", { class: "UserConsentNotice" }, this.userNoticeText),
-        h("legislation-wrapper", { "active-user-actions": this.activeUserActions }, activeUAList.map(item => (h("generic-user-consent", { slot: item, consentType: item, consentTitle: this.consentTitles[item], queried: this.queryFired, mandatory: this.mandatoryActions.includes(item) })))),
+        h("legislation-wrapper", { "active-user-actions": this.activeUserActions, "client-styling": this.clientStyling }, activeUAList.map(item => (h("generic-user-consent", { slot: item, consentType: item, consentTitle: this.consentTitles[item], queried: this.queryFired, mandatory: this.mandatoryActions.includes(item), "client-styling": this.clientStyling })))),
         this.includeSubmitButton &&
           h("button", { class: "ConsentSubmitButton", disabled: this.readyActionsCount === this.requiredActionsCount ? false : true, onClick: () => this.handleApplyClick() }, this.submitButtonText))));
   }
@@ -143,7 +182,7 @@ export class UserActionController {
         "text": "the endpoint required for the update call"
       },
       "attribute": "endpoint",
-      "reflect": false
+      "reflect": true
     },
     "userSession": {
       "type": "string",
@@ -160,7 +199,7 @@ export class UserActionController {
         "text": "user session required for the update call"
       },
       "attribute": "user-session",
-      "reflect": false
+      "reflect": true
     },
     "userId": {
       "type": "string",
@@ -177,7 +216,7 @@ export class UserActionController {
         "text": "user id required for the update call"
       },
       "attribute": "user-id",
-      "reflect": false
+      "reflect": true
     },
     "includeSubmitButton": {
       "type": "boolean",
@@ -191,10 +230,10 @@ export class UserActionController {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "wether or not to include the submit button (in case we want to compose a different )"
+        "text": "whether or not to include the submit button (in case we want to compose a different )"
       },
       "attribute": "include-submit-button",
-      "reflect": false
+      "reflect": true
     },
     "submitButtonText": {
       "type": "string",
@@ -211,7 +250,7 @@ export class UserActionController {
         "text": "the text of the button, if button is enabled"
       },
       "attribute": "submit-button-text",
-      "reflect": false
+      "reflect": true
     },
     "userNoticeText": {
       "type": "string",
@@ -228,7 +267,7 @@ export class UserActionController {
         "text": "the title of the action group"
       },
       "attribute": "user-notice-text",
-      "reflect": false
+      "reflect": true
     },
     "activeUserActions": {
       "type": "string",
@@ -245,7 +284,7 @@ export class UserActionController {
         "text": "which user action widgets are included"
       },
       "attribute": "active-user-actions",
-      "reflect": false
+      "reflect": true
     },
     "showCloseButton": {
       "type": "boolean",
@@ -262,7 +301,7 @@ export class UserActionController {
         "text": "Property used to display the close/cancel button"
       },
       "attribute": "show-close-button",
-      "reflect": false
+      "reflect": true
     },
     "usePostmessage": {
       "type": "boolean",
@@ -279,7 +318,7 @@ export class UserActionController {
         "text": "Use postMessage event to communicate"
       },
       "attribute": "use-postmessage",
-      "reflect": false
+      "reflect": true
     },
     "postMessageEvent": {
       "type": "string",
@@ -298,12 +337,49 @@ export class UserActionController {
       "attribute": "post-message-event",
       "reflect": false,
       "defaultValue": "'closeButtonClicked'"
+    },
+    "clientStyling": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via inline style"
+      },
+      "attribute": "client-styling",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "clientStylingUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via url"
+      },
+      "attribute": "client-styling-url",
+      "reflect": true,
+      "defaultValue": "''"
     }
   }; }
   static get states() { return {
     "queryFired": {},
     "readyActionsCount": {},
-    "receivedQueryResponses": {}
+    "receivedQueryResponses": {},
+    "limitStylingAppends": {}
   }; }
   static get events() { return [{
       "method": "closeButtonEvent",

package/dist/components/generic-user-consent2.js

@@ -32,10 +32,15 @@ const GenericUserConsent = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
      * link to privacy policy page
      */
     this.privacyLink = '#';
+    /**
+     * Client custom styling via inline style
+     */
+    this.clientStyling = '';
     /**
      * the text content to be rendered by the component. Determined at runtime
      */
     this.textContent = '';
+    this.limitStylingAppends = false;
     // Maybe switch this out with a localization source
     this.stringVariants = {
       termsandconditions1: "I accept the ",
@@ -46,6 +51,11 @@ const GenericUserConsent = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
       sms: "I consent to receive marketing communication via SMS.",
       emailmarketing: "I consent to receive marketing communication via Email."
     };
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
   }
   determineTextContent() {
     let result = this.consentType === 'termsandconditions' ?
@@ -59,22 +69,33 @@ const GenericUserConsent = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
       value: this.checkboxInput.checked
     });
   }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
   render() {
     if (this.queried) {
       this.userLegislationConsentHandler();
     }
     this.textContent = this.determineTextContent();
-    return (h("div", null, h("p", { class: "ConsentTitle" }, this.consentTitle), h("label", { class: "userConsent", htmlFor: "userConsent" }, h("input", { ref: el => this.checkboxInput = el, id: "userConsent", type: "checkbox", onInput: () => this.userLegislationConsentHandler() }), this.textContent, this.mandatory && h("span", { class: "MandatoryItem" }, "*"))));
+    return (h("div", { ref: el => this.stylingContainer = el }, h("p", { class: "ConsentTitle" }, this.consentTitle), h("label", { class: "userConsent", htmlFor: "userConsent" }, h("input", { ref: el => this.checkboxInput = el, id: "userConsent", type: "checkbox", onInput: () => this.userLegislationConsentHandler() }), this.textContent, this.mandatory && h("span", { class: "MandatoryItem" }, "*"))));
   }
   static get style() { return genericUserConsentCss; }
 }, [1, "generic-user-consent", {
-    "queried": [4],
-    "consentType": [1, "consent-type"],
-    "mandatory": [4],
-    "consentTitle": [1, "consent-title"],
-    "tcLink": [1, "tc-link"],
-    "privacyLink": [1, "privacy-link"],
-    "textContent": [32]
+    "queried": [516],
+    "consentType": [513, "consent-type"],
+    "mandatory": [516],
+    "consentTitle": [513, "consent-title"],
+    "tcLink": [513, "tc-link"],
+    "privacyLink": [513, "privacy-link"],
+    "clientStyling": [1, "client-styling"],
+    "textContent": [32],
+    "limitStylingAppends": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/legislation-wrapper2.js

@@ -7,14 +7,35 @@ const LegislationWrapper = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     super();
     this.__registerHost();
     this.__attachShadow();
+    /**
+     * Client custom styling via inline style
+     */
+    this.clientStyling = '';
+    this.limitStylingAppends = false;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
   }
   render() {
     const activeUAList = this.activeUserActions.replace(/ /g, '').split(',');
-    return (h("div", { class: "LegislationWrapper" }, activeUAList.map(action => (h("slot", { name: action })))));
+    return (h("div", { class: "LegislationWrapper", ref: el => this.stylingContainer = el }, activeUAList.map(action => (h("slot", { name: action })))));
   }
   static get style() { return legislationWrapperCss; }
 }, [1, "legislation-wrapper", {
-    "activeUserActions": [1, "active-user-actions"]
+    "activeUserActions": [513, "active-user-actions"],
+    "clientStyling": [1, "client-styling"],
+    "limitStylingAppends": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/user-action-controller.js

@@ -14,6 +14,14 @@ const UserActionController$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
      * Event name to be sent when the button is clicked
      */
     this.postMessageEvent = 'closeButtonClicked';
+    /**
+     * Client custom styling via inline style
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
     this.consentTitles = {
       termsandconditions: "Terms and Conditions",
       sms: "SMS marketing",
@@ -25,10 +33,30 @@ const UserActionController$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.queryFired = false;
     this.readyActionsCount = 0;
     this.receivedQueryResponses = 0;
+    this.limitStylingAppends = false;
     this.mandatoryActions = ['termsandconditions'];
     this.requiredActionsCount = 0;
     this.expectedQueryResponses = 0;
     this.userActions = [];
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let url = new URL(this.clientStylingUrl);
+      let cssFile = document.createElement('style');
+      fetch(url.href)
+        .then((res) => res.text())
+        .then((data) => {
+        this.clientStyling = data;
+        cssFile.innerHTML = data;
+        setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
+      })
+        .catch((err) => {
+        console.log('error ', err);
+      });
+    };
   }
   determineMandatoryActions() {
     let url = new URL(`${this.endpoint}v1/player/consentRequirements`);
@@ -111,12 +139,23 @@ const UserActionController$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   componentWillLoad() {
     return this.determineMandatoryActions();
   }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
   render() {
     const activeUAList = this.activeUserActions.replace(/ /g, '').split(',');
     this.requiredActionsCount = activeUAList.filter(action => this.mandatoryActions.includes(action)).length;
     this.expectedQueryResponses = activeUAList.length;
-    return (h("div", { class: "QueryReferenceContainer" }, h("div", { class: "UserActionController" }, this.showCloseButton &&
-      h("div", { class: "CloseButton", onClick: () => this.handleClose() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", fill: "currentColor", viewBox: "0 0 16 16" }, h("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" }))), h("h2", { class: "UserConsentNotice" }, this.userNoticeText), h("legislation-wrapper", { "active-user-actions": this.activeUserActions }, activeUAList.map(item => (h("generic-user-consent", { slot: item, consentType: item, consentTitle: this.consentTitles[item], queried: this.queryFired, mandatory: this.mandatoryActions.includes(item) })))), this.includeSubmitButton &&
+    return (h("div", { class: "QueryReferenceContainer", ref: el => this.stylingContainer = el }, h("div", { class: "UserActionController" }, this.showCloseButton &&
+      h("div", { class: "CloseButton", onClick: () => this.handleClose() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", fill: "currentColor", viewBox: "0 0 16 16" }, h("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" }))), h("h2", { class: "UserConsentNotice" }, this.userNoticeText), h("legislation-wrapper", { "active-user-actions": this.activeUserActions, "client-styling": this.clientStyling }, activeUAList.map(item => (h("generic-user-consent", { slot: item, consentType: item, consentTitle: this.consentTitles[item], queried: this.queryFired, mandatory: this.mandatoryActions.includes(item), "client-styling": this.clientStyling })))), this.includeSubmitButton &&
       h("button", { class: "ConsentSubmitButton", disabled: this.readyActionsCount === this.requiredActionsCount ? false : true, onClick: () => this.handleApplyClick() }, this.submitButtonText))));
   }
   static get watchers() { return {
@@ -124,19 +163,22 @@ const UserActionController$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   }; }
   static get style() { return userActionControllerCss; }
 }, [1, "user-action-controller", {
-    "endpoint": [1],
-    "userSession": [1, "user-session"],
-    "userId": [1, "user-id"],
-    "includeSubmitButton": [4, "include-submit-button"],
-    "submitButtonText": [1, "submit-button-text"],
-    "userNoticeText": [1, "user-notice-text"],
-    "activeUserActions": [1, "active-user-actions"],
-    "showCloseButton": [4, "show-close-button"],
-    "usePostmessage": [4, "use-postmessage"],
+    "endpoint": [513],
+    "userSession": [513, "user-session"],
+    "userId": [513, "user-id"],
+    "includeSubmitButton": [516, "include-submit-button"],
+    "submitButtonText": [513, "submit-button-text"],
+    "userNoticeText": [513, "user-notice-text"],
+    "activeUserActions": [513, "active-user-actions"],
+    "showCloseButton": [516, "show-close-button"],
+    "usePostmessage": [516, "use-postmessage"],
     "postMessageEvent": [1, "post-message-event"],
+    "clientStyling": [1537, "client-styling"],
+    "clientStylingUrl": [513, "client-styling-url"],
     "queryFired": [32],
     "readyActionsCount": [32],
-    "receivedQueryResponses": [32]
+    "receivedQueryResponses": [32],
+    "limitStylingAppends": [32]
   }, [[0, "userLegislationConsent", "userLegislationConsentHandler"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/esm/generic-user-consent_3.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-e34db4b0.js';
+import { r as registerInstance, c as createEvent, h } from './index-71f14530.js';
 
 const genericUserConsentCss = ":host{display:block}.ConsentTitle{margin-bottom:0.2rem;font-weight:600}.userConsent:hover{border-bottom:1px solid #000;cursor:pointer}.MandatoryItem{color:#f00;font-size:1.2rem}";
 
@@ -30,10 +30,15 @@ const GenericUserConsent = class {
      * link to privacy policy page
      */
     this.privacyLink = '#';
+    /**
+     * Client custom styling via inline style
+     */
+    this.clientStyling = '';
     /**
      * the text content to be rendered by the component. Determined at runtime
      */
     this.textContent = '';
+    this.limitStylingAppends = false;
     // Maybe switch this out with a localization source
     this.stringVariants = {
       termsandconditions1: "I accept the ",
@@ -44,6 +49,11 @@ const GenericUserConsent = class {
       sms: "I consent to receive marketing communication via SMS.",
       emailmarketing: "I consent to receive marketing communication via Email."
     };
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
   }
   determineTextContent() {
     let result = this.consentType === 'termsandconditions' ?
@@ -57,12 +67,21 @@ const GenericUserConsent = class {
       value: this.checkboxInput.checked
     });
   }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
   render() {
     if (this.queried) {
       this.userLegislationConsentHandler();
     }
     this.textContent = this.determineTextContent();
-    return (h("div", null, h("p", { class: "ConsentTitle" }, this.consentTitle), h("label", { class: "userConsent", htmlFor: "userConsent" }, h("input", { ref: el => this.checkboxInput = el, id: "userConsent", type: "checkbox", onInput: () => this.userLegislationConsentHandler() }), this.textContent, this.mandatory && h("span", { class: "MandatoryItem" }, "*"))));
+    return (h("div", { ref: el => this.stylingContainer = el }, h("p", { class: "ConsentTitle" }, this.consentTitle), h("label", { class: "userConsent", htmlFor: "userConsent" }, h("input", { ref: el => this.checkboxInput = el, id: "userConsent", type: "checkbox", onInput: () => this.userLegislationConsentHandler() }), this.textContent, this.mandatory && h("span", { class: "MandatoryItem" }, "*"))));
   }
 };
 GenericUserConsent.style = genericUserConsentCss;
@@ -72,10 +91,29 @@ const legislationWrapperCss = ":host{display:block}";
 const LegislationWrapper = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    /**
+     * Client custom styling via inline style
+     */
+    this.clientStyling = '';
+    this.limitStylingAppends = false;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
   }
   render() {
     const activeUAList = this.activeUserActions.replace(/ /g, '').split(',');
-    return (h("div", { class: "LegislationWrapper" }, activeUAList.map(action => (h("slot", { name: action })))));
+    return (h("div", { class: "LegislationWrapper", ref: el => this.stylingContainer = el }, activeUAList.map(action => (h("slot", { name: action })))));
   }
 };
 LegislationWrapper.style = legislationWrapperCss;
@@ -90,6 +128,14 @@ const UserActionController = class {
      * Event name to be sent when the button is clicked
      */
     this.postMessageEvent = 'closeButtonClicked';
+    /**
+     * Client custom styling via inline style
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
     this.consentTitles = {
       termsandconditions: "Terms and Conditions",
       sms: "SMS marketing",
@@ -101,10 +147,30 @@ const UserActionController = class {
     this.queryFired = false;
     this.readyActionsCount = 0;
     this.receivedQueryResponses = 0;
+    this.limitStylingAppends = false;
     this.mandatoryActions = ['termsandconditions'];
     this.requiredActionsCount = 0;
     this.expectedQueryResponses = 0;
     this.userActions = [];
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let url = new URL(this.clientStylingUrl);
+      let cssFile = document.createElement('style');
+      fetch(url.href)
+        .then((res) => res.text())
+        .then((data) => {
+        this.clientStyling = data;
+        cssFile.innerHTML = data;
+        setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
+      })
+        .catch((err) => {
+        console.log('error ', err);
+      });
+    };
   }
   determineMandatoryActions() {
     let url = new URL(`${this.endpoint}v1/player/consentRequirements`);
@@ -187,12 +253,23 @@ const UserActionController = class {
   componentWillLoad() {
     return this.determineMandatoryActions();
   }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
   render() {
     const activeUAList = this.activeUserActions.replace(/ /g, '').split(',');
     this.requiredActionsCount = activeUAList.filter(action => this.mandatoryActions.includes(action)).length;
     this.expectedQueryResponses = activeUAList.length;
-    return (h("div", { class: "QueryReferenceContainer" }, h("div", { class: "UserActionController" }, this.showCloseButton &&
-      h("div", { class: "CloseButton", onClick: () => this.handleClose() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", fill: "currentColor", viewBox: "0 0 16 16" }, h("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" }))), h("h2", { class: "UserConsentNotice" }, this.userNoticeText), h("legislation-wrapper", { "active-user-actions": this.activeUserActions }, activeUAList.map(item => (h("generic-user-consent", { slot: item, consentType: item, consentTitle: this.consentTitles[item], queried: this.queryFired, mandatory: this.mandatoryActions.includes(item) })))), this.includeSubmitButton &&
+    return (h("div", { class: "QueryReferenceContainer", ref: el => this.stylingContainer = el }, h("div", { class: "UserActionController" }, this.showCloseButton &&
+      h("div", { class: "CloseButton", onClick: () => this.handleClose() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", fill: "currentColor", viewBox: "0 0 16 16" }, h("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" }))), h("h2", { class: "UserConsentNotice" }, this.userNoticeText), h("legislation-wrapper", { "active-user-actions": this.activeUserActions, "client-styling": this.clientStyling }, activeUAList.map(item => (h("generic-user-consent", { slot: item, consentType: item, consentTitle: this.consentTitles[item], queried: this.queryFired, mandatory: this.mandatoryActions.includes(item), "client-styling": this.clientStyling })))), this.includeSubmitButton &&
       h("button", { class: "ConsentSubmitButton", disabled: this.readyActionsCount === this.requiredActionsCount ? false : true, onClick: () => this.handleApplyClick() }, this.submitButtonText))));
   }
   static get watchers() { return {

package/dist/esm/{index-e34db4b0.js → index-71f14530.js}

@@ -563,9 +563,14 @@ const callNodeRefs = (vNode) => {
 };
 const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
+    const cmpMeta = hostRef.$cmpMeta$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
     const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
     hostTagName = hostElm.tagName;
+    if (cmpMeta.$attrsToReflect$) {
+        rootVnode.$attrs$ = rootVnode.$attrs$ || {};
+        cmpMeta.$attrsToReflect$.map(([propName, attribute]) => (rootVnode.$attrs$[attribute] = hostElm[propName]));
+    }
     rootVnode.$tag$ = null;
     rootVnode.$flags$ |= 4 /* isHost */;
     hostRef.$vnode$ = rootVnode;
@@ -705,7 +710,11 @@ const postUpdateComponent = (hostRef) => {
     const tagName = hostRef.$cmpMeta$.$tagName$;
     const elm = hostRef.$hostElement$;
     const endPostUpdate = createTime('postUpdate', tagName);
+    const instance = hostRef.$lazyInstance$ ;
     const ancestorComponent = hostRef.$ancestorComponent$;
+    {
+        safeCall(instance, 'componentDidRender');
+    }
     if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
         hostRef.$flags$ |= 64 /* hasLoadedComponent */;
         {
@@ -935,6 +944,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                 .map(([propName, m]) => {
                 const attrName = m[1] || propName;
                 attrNameToPropName.set(attrName, propName);
+                if (m[0] & 512 /* ReflectAttr */) {
+                    cmpMeta.$attrsToReflect$.push([propName, attrName]);
+                }
                 return attrName;
             });
         }
@@ -1104,6 +1116,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             {
                 cmpMeta.$listeners$ = compactMeta[3];
             }
+            {
+                cmpMeta.$attrsToReflect$ = [];
+            }
             {
                 cmpMeta.$watchers$ = {};
             }

package/dist/esm/loader.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-e34db4b0.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-71f14530.js';
 
 /*
  Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["generic-user-consent_3",[[1,"user-action-controller",{"endpoint":[1],"userSession":[1,"user-session"],"userId":[1,"user-id"],"includeSubmitButton":[4,"include-submit-button"],"submitButtonText":[1,"submit-button-text"],"userNoticeText":[1,"user-notice-text"],"activeUserActions":[1,"active-user-actions"],"showCloseButton":[4,"show-close-button"],"usePostmessage":[4,"use-postmessage"],"postMessageEvent":[1,"post-message-event"],"queryFired":[32],"readyActionsCount":[32],"receivedQueryResponses":[32]},[[0,"userLegislationConsent","userLegislationConsentHandler"]]],[1,"generic-user-consent",{"queried":[4],"consentType":[1,"consent-type"],"mandatory":[4],"consentTitle":[1,"consent-title"],"tcLink":[1,"tc-link"],"privacyLink":[1,"privacy-link"],"textContent":[32]}],[1,"legislation-wrapper",{"activeUserActions":[1,"active-user-actions"]}]]]], options);
+  return bootstrapLazy([["generic-user-consent_3",[[1,"user-action-controller",{"endpoint":[513],"userSession":[513,"user-session"],"userId":[513,"user-id"],"includeSubmitButton":[516,"include-submit-button"],"submitButtonText":[513,"submit-button-text"],"userNoticeText":[513,"user-notice-text"],"activeUserActions":[513,"active-user-actions"],"showCloseButton":[516,"show-close-button"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[1,"post-message-event"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"queryFired":[32],"readyActionsCount":[32],"receivedQueryResponses":[32],"limitStylingAppends":[32]},[[0,"userLegislationConsent","userLegislationConsentHandler"]]],[1,"generic-user-consent",{"queried":[516],"consentType":[513,"consent-type"],"mandatory":[516],"consentTitle":[513,"consent-title"],"tcLink":[513,"tc-link"],"privacyLink":[513,"privacy-link"],"clientStyling":[1,"client-styling"],"textContent":[32],"limitStylingAppends":[32]}],[1,"legislation-wrapper",{"activeUserActions":[513,"active-user-actions"],"clientStyling":[1,"client-styling"],"limitStylingAppends":[32]}]]]], options);
   });
 };
 

package/dist/esm/user-action-controller.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-e34db4b0.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-71f14530.js';
 
 /*
  Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["generic-user-consent_3",[[1,"user-action-controller",{"endpoint":[1],"userSession":[1,"user-session"],"userId":[1,"user-id"],"includeSubmitButton":[4,"include-submit-button"],"submitButtonText":[1,"submit-button-text"],"userNoticeText":[1,"user-notice-text"],"activeUserActions":[1,"active-user-actions"],"showCloseButton":[4,"show-close-button"],"usePostmessage":[4,"use-postmessage"],"postMessageEvent":[1,"post-message-event"],"queryFired":[32],"readyActionsCount":[32],"receivedQueryResponses":[32]},[[0,"userLegislationConsent","userLegislationConsentHandler"]]],[1,"generic-user-consent",{"queried":[4],"consentType":[1,"consent-type"],"mandatory":[4],"consentTitle":[1,"consent-title"],"tcLink":[1,"tc-link"],"privacyLink":[1,"privacy-link"],"textContent":[32]}],[1,"legislation-wrapper",{"activeUserActions":[1,"active-user-actions"]}]]]], options);
+  return bootstrapLazy([["generic-user-consent_3",[[1,"user-action-controller",{"endpoint":[513],"userSession":[513,"user-session"],"userId":[513,"user-id"],"includeSubmitButton":[516,"include-submit-button"],"submitButtonText":[513,"submit-button-text"],"userNoticeText":[513,"user-notice-text"],"activeUserActions":[513,"active-user-actions"],"showCloseButton":[516,"show-close-button"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[1,"post-message-event"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"queryFired":[32],"readyActionsCount":[32],"receivedQueryResponses":[32],"limitStylingAppends":[32]},[[0,"userLegislationConsent","userLegislationConsentHandler"]]],[1,"generic-user-consent",{"queried":[516],"consentType":[513,"consent-type"],"mandatory":[516],"consentTitle":[513,"consent-title"],"tcLink":[513,"tc-link"],"privacyLink":[513,"privacy-link"],"clientStyling":[1,"client-styling"],"textContent":[32],"limitStylingAppends":[32]}],[1,"legislation-wrapper",{"activeUserActions":[513,"active-user-actions"],"clientStyling":[1,"client-styling"],"limitStylingAppends":[32]}]]]], options);
 });

package/dist/types/components/user-action-controller/user-action-controller.d.ts

@@ -19,7 +19,7 @@ export declare class UserActionController {
    */
   userId: string;
   /**
-   * wether or not to include the submit button (in case we want to compose a different )
+   * whether or not to include the submit button (in case we want to compose a different )
    */
   includeSubmitButton: boolean;
   /**
@@ -46,6 +46,14 @@ export declare class UserActionController {
    * Event name to be sent when the button is clicked
    */
   postMessageEvent: string;
+  /**
+   * Client custom styling via inline style
+   */
+  clientStyling: string;
+  /**
+   * Client custom styling via url
+   */
+  clientStylingUrl: string;
   /**
    * Event emitted when the close button is clicked
    */
@@ -57,10 +65,12 @@ export declare class UserActionController {
   queryFired: boolean;
   readyActionsCount: number;
   receivedQueryResponses: number;
+  private limitStylingAppends;
   private mandatoryActions;
   private requiredActionsCount;
   private expectedQueryResponses;
   private userActions;
+  private stylingContainer;
   determineMandatoryActions(): Promise<void>;
   handleQueryResponse(): void;
   updateUserConsents(): void;
@@ -68,6 +78,9 @@ export declare class UserActionController {
   handleClose(): void;
   userLegislationConsentHandler(event: CustomEvent<LegislationConsentEvent>): void;
   componentWillLoad(): Promise<void>;
+  componentDidRender(): void;
+  setClientStyling: () => void;
+  setClientStylingURL: () => void;
   render(): any;
 }
 export {};

package/dist/types/components.d.ts

@@ -11,12 +11,20 @@ export namespace Components {
           * which user action widgets are included
          */
         "activeUserActions": string;
+        /**
+          * Client custom styling via inline style
+         */
+        "clientStyling": string;
+        /**
+          * Client custom styling via url
+         */
+        "clientStylingUrl": string;
         /**
           * the endpoint required for the update call
          */
         "endpoint": string;
         /**
-          * wether or not to include the submit button (in case we want to compose a different )
+          * whether or not to include the submit button (in case we want to compose a different )
          */
         "includeSubmitButton": boolean;
         /**
@@ -66,12 +74,20 @@ declare namespace LocalJSX {
           * which user action widgets are included
          */
         "activeUserActions": string;
+        /**
+          * Client custom styling via inline style
+         */
+        "clientStyling"?: string;
+        /**
+          * Client custom styling via url
+         */
+        "clientStylingUrl"?: string;
         /**
           * the endpoint required for the update call
          */
         "endpoint": string;
         /**
-          * wether or not to include the submit button (in case we want to compose a different )
+          * whether or not to include the submit button (in case we want to compose a different )
          */
         "includeSubmitButton": boolean;
         /**

package/dist/user-action-controller/p-94fcd363.entry.js

@@ -0,0 +1 @@
+import{r as t,c as s,h as e}from"./p-ba444709.js";const i=class{constructor(e){t(this,e),this.userLegislationConsent=s(this,"userLegislationConsent",7),this.queried=!1,this.consentType="",this.mandatory=!1,this.consentTitle="",this.tcLink="#",this.privacyLink="#",this.clientStyling="",this.textContent="",this.limitStylingAppends=!1,this.stringVariants={termsandconditions1:"I accept the ",termsandconditions2:", I have read and understood the ",termsandconditions3:" as published on this site and confirm that I am over 18 years old.",tc:"Terms and Conditions",privacy:"Privacy Policy",sms:"I consent to receive marketing communication via SMS.",emailmarketing:"I consent to receive marketing communication via Email."},this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)}}determineTextContent(){return"termsandconditions"===this.consentType?e("span",null,this.stringVariants.termsandconditions1,e("a",{href:this.tcLink},this.stringVariants.tc),this.stringVariants.termsandconditions2,e("a",{href:this.privacyLink},this.stringVariants.privacy),this.stringVariants.termsandconditions3):e("span",null,this.stringVariants[this.consentType])}userLegislationConsentHandler(){this.userLegislationConsent.emit({type:this.consentType,value:this.checkboxInput.checked})}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.limitStylingAppends=!0)}render(){return this.queried&&this.userLegislationConsentHandler(),this.textContent=this.determineTextContent(),e("div",{ref:t=>this.stylingContainer=t},e("p",{class:"ConsentTitle"},this.consentTitle),e("label",{class:"userConsent",htmlFor:"userConsent"},e("input",{ref:t=>this.checkboxInput=t,id:"userConsent",type:"checkbox",onInput:()=>this.userLegislationConsentHandler()}),this.textContent,this.mandatory&&e("span",{class:"MandatoryItem"},"*")))}};i.style=":host{display:block}.ConsentTitle{margin-bottom:0.2rem;font-weight:600}.userConsent:hover{border-bottom:1px solid #000;cursor:pointer}.MandatoryItem{color:#f00;font-size:1.2rem}";const n=class{constructor(s){t(this,s),this.clientStyling="",this.limitStylingAppends=!1,this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)}}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.limitStylingAppends=!0)}render(){const t=this.activeUserActions.replace(/ /g,"").split(",");return e("div",{class:"LegislationWrapper",ref:t=>this.stylingContainer=t},t.map((t=>e("slot",{name:t}))))}};n.style=":host{display:block}";const o=class{constructor(e){t(this,e),this.closeButtonEvent=s(this,"closeButtonClicked",7),this.postMessageEvent="closeButtonClicked",this.clientStyling="",this.clientStylingUrl="",this.consentTitles={termsandconditions:"Terms and Conditions",sms:"SMS marketing",emailmarketing:"Email marketing"},this.queryFired=!1,this.readyActionsCount=0,this.receivedQueryResponses=0,this.limitStylingAppends=!1,this.mandatoryActions=["termsandconditions"],this.requiredActionsCount=0,this.expectedQueryResponses=0,this.userActions=[],this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)},this.setClientStylingURL=()=>{let t=new URL(this.clientStylingUrl),s=document.createElement("style");fetch(t.href).then((t=>t.text())).then((t=>{this.clientStyling=t,s.innerHTML=t,setTimeout((()=>{this.stylingContainer.prepend(s)}),1)})).catch((t=>{console.log("error ",t)}))}}determineMandatoryActions(){let t=new URL(`${this.endpoint}v1/player/consentRequirements`);return fetch(t.href).then((t=>t.json())).then((t=>{t.items.forEach((t=>{t.mustAccept&&this.mandatoryActions.push(t.tagCode)}))}))}handleQueryResponse(){this.receivedQueryResponses===this.expectedQueryResponses&&this.updateUserConsents()}updateUserConsents(){const t=new URL(`${this.endpoint}v1/player/${this.userId}/consent`);let s={method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json","X-SessionId":`${this.userSession}`},body:JSON.stringify({items:this.userActions})};fetch(t.href,s).then((t=>t.json())).then((()=>{window.postMessage({type:"WidgetNotification",data:{type:"success",message:"Consent update successfull!"}},window.location.href)})).catch((t=>{window.postMessage({type:"WidgetNotification",data:{type:"error",message:"Server might not be responding",err:t}},window.location.href)})).finally((()=>{window.postMessage({type:"UserActionsCompleted"},window.location.href)}))}handleApplyClick(){this.queryFired=!0}handleClose(){this.usePostmessage&&window.postMessage({type:this.postMessageEvent}),this.closeButtonEvent.emit()}userLegislationConsentHandler(t){this.mandatoryActions.includes(t.detail.type)&&(t.detail.value?this.readyActionsCount++:this.readyActionsCount--),this.queryFired&&(this.userActions.push({tagCode:t.detail.type,status:t.detail.value?"Accepted":"Denied"}),this.receivedQueryResponses++)}componentWillLoad(){return this.determineMandatoryActions()}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}render(){const t=this.activeUserActions.replace(/ /g,"").split(",");return this.requiredActionsCount=t.filter((t=>this.mandatoryActions.includes(t))).length,this.expectedQueryResponses=t.length,e("div",{class:"QueryReferenceContainer",ref:t=>this.stylingContainer=t},e("div",{class:"UserActionController"},this.showCloseButton&&e("div",{class:"CloseButton",onClick:()=>this.handleClose()},e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"25",height:"25",fill:"currentColor",viewBox:"0 0 16 16"},e("path",{d:"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"}))),e("h2",{class:"UserConsentNotice"},this.userNoticeText),e("legislation-wrapper",{"active-user-actions":this.activeUserActions,"client-styling":this.clientStyling},t.map((t=>e("generic-user-consent",{slot:t,consentType:t,consentTitle:this.consentTitles[t],queried:this.queryFired,mandatory:this.mandatoryActions.includes(t),"client-styling":this.clientStyling})))),this.includeSubmitButton&&e("button",{class:"ConsentSubmitButton",disabled:this.readyActionsCount!==this.requiredActionsCount,onClick:()=>this.handleApplyClick()},this.submitButtonText)))}static get watchers(){return{receivedQueryResponses:["handleQueryResponse"]}}};o.style=":host{display:block}.QueryReferenceContainer{height:100%;width:100%}.UserConsentNotice{font-size:1.2rem;font-weight:200;text-align:center}.CloseButton{width:25px;height:25px;align-self:flex-end}.UserActionController{font-family:Arial, Helvetica, sans-serif;font-weight:100;height:100%;width:100%;padding:1rem 1.5rem 2rem;background-color:#fff;display:flex;flex-direction:column;justify-content:space-between;border-radius:5%}.ConsentSubmitButton{font-size:1rem;padding:0.4rem 1.4rem;background:#fff;border:2px solid #000;color:#000;border-radius:5px;align-self:flex-end}.ConsentSubmitButton:disabled{border:2px solid #ccc;color:#ccc}@media screen and (max-width: 320px){.QueryReferenceContainer{font-size:0.8rem;color:blue}}";export{i as generic_user_consent,n as legislation_wrapper,o as user_action_controller}

package/dist/user-action-controller/p-ba444709.js

@@ -0,0 +1 @@
+let e,t,n=!1,l=!1;const s="undefined"!=typeof window?window:{},o=s.document||{head:{}},r={t:0,l:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},c=e=>Promise.resolve(e),i=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replace}catch(e){}return!1})(),u=(e,t,n)=>{n&&n.map((([n,l,s])=>{const o=e,c=a(t,s),i=f(n);r.ael(o,l,c,i),(t.o=t.o||[]).push((()=>r.rel(o,l,c,i)))}))},a=(e,t)=>n=>{try{256&e.t?e.i[t](n):(e.u=e.u||[]).push([t,n])}catch(e){J(e)}},f=e=>0!=(2&e),h=new WeakMap,d=e=>"sc-"+e.h,$={},m=e=>"object"==(e=typeof e)||"function"===e,p=(e,t,...n)=>{let l=null,s=!1,o=!1,r=[];const c=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?c(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!m(l))&&(l+=""),s&&o?r[r.length-1].$+=l:r.push(s?y(null,l):l),o=s)};if(c(n),t){const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}const i=y(e,null);return i.m=t,r.length>0&&(i.p=r),i},y=(e,t)=>({t:0,g:e,$:t,v:null,p:null,m:null}),b={},w=(e,t,n,l,o,c)=>{if(n!==l){let i=I(e,t),u=t.toLowerCase();if("class"===t){const t=e.classList,s=v(n),o=v(l);t.remove(...s.filter((e=>e&&!o.includes(e)))),t.add(...o.filter((e=>e&&!s.includes(e))))}else if("ref"===t)l&&l(e);else if(i||"o"!==t[0]||"n"!==t[1]){const s=m(l);if((i||s&&null!==l)&&!o)try{if(e.tagName.includes("-"))e[t]=l;else{let s=null==l?"":l;"list"===t?i=!1:null!=n&&e[t]==s||(e[t]=s)}}catch(e){}null==l||!1===l?!1===l&&""!==e.getAttribute(t)||e.removeAttribute(t):(!i||4&c||o)&&!s&&e.setAttribute(t,l=!0===l?"":l)}else t="-"===t[2]?t.slice(3):I(s,u)?u.slice(2):u[2]+t.slice(3),n&&r.rel(e,t,n,!1),l&&r.ael(e,t,l,!1)}},g=/\s/,v=e=>e?e.split(g):[],S=(e,t,n,l)=>{const s=11===t.v.nodeType&&t.v.host?t.v.host:t.v,o=e&&e.m||$,r=t.m||$;for(l in o)l in r||w(s,l,o[l],void 0,n,t.t);for(l in r)w(s,l,o[l],r[l],n,t.t)},j=(t,l,s)=>{let r,c,i=l.p[s],u=0;if(null!==i.$)r=i.v=o.createTextNode(i.$);else{if(n||(n="svg"===i.g),r=i.v=o.createElementNS(n?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",i.g),n&&"foreignObject"===i.g&&(n=!1),S(null,i,n),null!=e&&r["s-si"]!==e&&r.classList.add(r["s-si"]=e),i.p)for(u=0;u<i.p.length;++u)c=j(t,i,u),c&&r.appendChild(c);"svg"===i.g?n=!1:"foreignObject"===r.tagName&&(n=!0)}return r},O=(e,n,l,s,o,r)=>{let c,i=e;for(i.shadowRoot&&i.tagName===t&&(i=i.shadowRoot);o<=r;++o)s[o]&&(c=j(null,l,o),c&&(s[o].v=c,i.insertBefore(c,n)))},M=(e,t,n,l,s)=>{for(;t<=n;++t)(l=e[t])&&(s=l.v,x(l),s.remove())},k=(e,t)=>e.g===t.g,C=(e,t)=>{const l=t.v=e.v,s=e.p,o=t.p,r=t.g,c=t.$;null===c?(n="svg"===r||"foreignObject"!==r&&n,"slot"===r||S(e,t,n),null!==s&&null!==o?((e,t,n,l)=>{let s,o=0,r=0,c=t.length-1,i=t[0],u=t[c],a=l.length-1,f=l[0],h=l[a];for(;o<=c&&r<=a;)null==i?i=t[++o]:null==u?u=t[--c]:null==f?f=l[++r]:null==h?h=l[--a]:k(i,f)?(C(i,f),i=t[++o],f=l[++r]):k(u,h)?(C(u,h),u=t[--c],h=l[--a]):k(i,h)?(C(i,h),e.insertBefore(i.v,u.v.nextSibling),i=t[++o],h=l[--a]):k(u,f)?(C(u,f),e.insertBefore(u.v,i.v),u=t[--c],f=l[++r]):(s=j(t&&t[r],n,r),f=l[++r],s&&i.v.parentNode.insertBefore(s,i.v));o>c?O(e,null==l[a+1]?null:l[a+1].v,n,l,r,a):r>a&&M(t,o,c)})(l,s,t,o):null!==o?(null!==e.$&&(l.textContent=""),O(l,null,t,o,0,o.length-1)):null!==s&&M(s,0,s.length-1),n&&"svg"===r&&(n=!1)):e.$!==c&&(l.data=c)},x=e=>{e.m&&e.m.ref&&e.m.ref(null),e.p&&e.p.map(x)},P=(e,t,n)=>{const l=(e=>z(e).S)(e);return{emit:e=>E(l,t,{bubbles:!!(4&n),composed:!!(2&n),cancelable:!!(1&n),detail:e})}},E=(e,t,n)=>{const l=r.ce(t,n);return e.dispatchEvent(l),l},L=(e,t)=>{t&&!e.j&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.j=t)))},N=(e,t)=>{if(e.t|=16,!(4&e.t))return L(e,e.O),se((()=>R(e,t)));e.t|=512},R=(e,t)=>{const n=e.i;let l;return t&&(e.t|=256,e.u&&(e.u.map((([e,t])=>q(n,e,t))),e.u=null),l=q(n,"componentWillLoad")),D(l,(()=>T(e,n,t)))},T=async(e,t,n)=>{const l=e.S,s=l["s-rc"];n&&(e=>{const t=e.M,n=e.S,l=t.t,s=((e,t)=>{let n=d(t),l=X.get(n);if(e=11===e.nodeType?e:o,l)if("string"==typeof l){let t,s=h.get(e=e.head||e);s||h.set(e,s=new Set),s.has(n)||(t=o.createElement("style"),t.innerHTML=l,e.insertBefore(t,e.querySelector("link")),s&&s.add(n))}else e.adoptedStyleSheets.includes(l)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,l]);return n})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=s,n.classList.add(s+"-h"))})(e);W(e,t),s&&(s.map((e=>e())),l["s-rc"]=void 0);{const t=l["s-p"],n=()=>A(e);0===t.length?n():(Promise.all(t).then(n),e.t|=4,t.length=0)}},W=(n,l)=>{try{l=l.render(),n.t&=-17,n.t|=2,((n,l)=>{const s=n.S,o=n.M,r=n.k||y(null,null),c=(e=>e&&e.g===b)(l)?l:p(null,null,l);t=s.tagName,o.C&&(c.m=c.m||{},o.C.map((([e,t])=>c.m[t]=s[e]))),c.g=null,c.t|=4,n.k=c,c.v=r.v=s.shadowRoot||s,e=s["s-sc"],C(r,c)})(n,l)}catch(e){J(e,n.S)}return null},A=e=>{const t=e.S,n=e.O;q(e.i,"componentDidRender"),64&e.t||(e.t|=64,F(t),e.P(t),n||U()),e.j&&(e.j(),e.j=void 0),512&e.t&&le((()=>N(e,!1))),e.t&=-517},U=()=>{F(o.documentElement),le((()=>E(s,"appload",{detail:{namespace:"user-action-controller"}})))},q=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){J(e)}},D=(e,t)=>e&&e.then?e.then(t):t(),F=e=>e.classList.add("hydrated"),H=(e,t,n)=>{if(t.L){e.watchers&&(t.N=e.watchers);const l=Object.entries(t.L),s=e.prototype;if(l.map((([e,[l]])=>{(31&l||2&n&&32&l)&&Object.defineProperty(s,e,{get(){return((e,t)=>z(this).R.get(t))(0,e)},set(n){((e,t,n,l)=>{const s=z(e),o=s.S,r=s.R.get(t),c=s.t,i=s.i;if(n=((e,t)=>null==e||m(e)?e:4&t?"false"!==e&&(""===e||!!e):1&t?e+"":e)(n,l.L[t][0]),(!(8&c)||void 0===r)&&n!==r&&(!Number.isNaN(r)||!Number.isNaN(n))&&(s.R.set(t,n),i)){if(l.N&&128&c){const e=l.N[t];e&&e.map((e=>{try{i[e](n,r,t)}catch(e){J(e,o)}}))}2==(18&c)&&N(s,!1)}})(this,e,n,t)},configurable:!0,enumerable:!0})})),1&n){const n=new Map;s.attributeChangedCallback=function(e,t,l){r.jmp((()=>{const t=n.get(e);if(this.hasOwnProperty(t))l=this[t],delete this[t];else if(s.hasOwnProperty(t)&&"number"==typeof this[t]&&this[t]==l)return;this[t]=(null!==l||"boolean"!=typeof this[t])&&l}))},e.observedAttributes=l.filter((([e,t])=>15&t[0])).map((([e,l])=>{const s=l[1]||e;return n.set(s,e),512&l[0]&&t.C.push([e,s]),s}))}}return e},V=(e,t={})=>{const n=[],l=t.exclude||[],c=s.customElements,a=o.head,f=a.querySelector("meta[charset]"),h=o.createElement("style"),$=[];let m,p=!0;Object.assign(r,t),r.l=new URL(t.resourcesUrl||"./",o.baseURI).href,e.map((e=>{e[1].map((t=>{const s={t:t[0],h:t[1],L:t[2],T:t[3]};s.L=t[2],s.T=t[3],s.C=[],s.N={};const o=s.h,a=class extends HTMLElement{constructor(e){super(e),G(e=this,s),1&s.t&&e.attachShadow({mode:"open"})}connectedCallback(){m&&(clearTimeout(m),m=null),p?$.push(this):r.jmp((()=>(e=>{if(0==(1&r.t)){const t=z(e),n=t.M,l=()=>{};if(1&t.t)u(e,t,n.T);else{t.t|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){L(t,t.O=n);break}}n.L&&Object.entries(n.L).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n,l,s)=>{if(0==(32&t.t)){{if(t.t|=32,(s=Q(n)).then){const e=()=>{};s=await s,e()}s.isProxied||(n.N=s.watchers,H(s,n,2),s.isProxied=!0);const e=()=>{};t.t|=8;try{new s(t)}catch(e){J(e)}t.t&=-9,t.t|=128,e()}if(s.style){let e=s.style;const t=d(n);if(!X.has(t)){const l=()=>{};((e,t,n)=>{let l=X.get(e);i&&n?(l=l||new CSSStyleSheet,l.replace(t)):l=t,X.set(e,l)})(t,e,!!(1&n.t)),l()}}}const o=t.O,r=()=>N(t,!0);o&&o["s-rc"]?o["s-rc"].push(r):r()})(0,t,n)}l()}})(this)))}disconnectedCallback(){r.jmp((()=>(()=>{if(0==(1&r.t)){const e=z(this);e.o&&(e.o.map((e=>e())),e.o=void 0)}})()))}componentOnReady(){return z(this).W}};s.A=e[0],l.includes(o)||c.get(o)||(n.push(o),c.define(o,H(a,s,1)))}))})),h.innerHTML=n+"{visibility:hidden}.hydrated{visibility:inherit}",h.setAttribute("data-styles",""),a.insertBefore(h,f?f.nextSibling:a.firstChild),p=!1,$.length?$.map((e=>e.connectedCallback())):r.jmp((()=>m=setTimeout(U,30)))},_=new WeakMap,z=e=>_.get(e),B=(e,t)=>_.set(t.i=e,t),G=(e,t)=>{const n={t:0,S:e,M:t,R:new Map};return n.W=new Promise((e=>n.P=e)),e["s-p"]=[],e["s-rc"]=[],u(e,n,t.T),_.set(e,n)},I=(e,t)=>t in e,J=(e,t)=>(0,console.error)(e,t),K=new Map,Q=e=>{const t=e.h.replace(/-/g,"_"),n=e.A,l=K.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(K.set(n,e),e[t])),J)},X=new Map,Y=[],Z=[],ee=(e,t)=>n=>{e.push(n),l||(l=!0,t&&4&r.t?le(ne):r.raf(ne))},te=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){J(e)}e.length=0},ne=()=>{te(Y),te(Z),(l=Y.length>0)&&r.raf(ne)},le=e=>c().then(e),se=ee(Z,!0);export{V as b,P as c,p as h,c as p,B as r}

package/dist/user-action-controller/user-action-controller.esm.js

@@ -1 +1 @@
-import{p as e,b as t}from"./p-20213f37.js";(()=>{const t=import.meta.url,s={};return""!==t&&(s.resourcesUrl=new URL(".",t).href),e(s)})().then((e=>t([["p-2a14a5fe",[[1,"user-action-controller",{endpoint:[1],userSession:[1,"user-session"],userId:[1,"user-id"],includeSubmitButton:[4,"include-submit-button"],submitButtonText:[1,"submit-button-text"],userNoticeText:[1,"user-notice-text"],activeUserActions:[1,"active-user-actions"],showCloseButton:[4,"show-close-button"],usePostmessage:[4,"use-postmessage"],postMessageEvent:[1,"post-message-event"],queryFired:[32],readyActionsCount:[32],receivedQueryResponses:[32]},[[0,"userLegislationConsent","userLegislationConsentHandler"]]],[1,"generic-user-consent",{queried:[4],consentType:[1,"consent-type"],mandatory:[4],consentTitle:[1,"consent-title"],tcLink:[1,"tc-link"],privacyLink:[1,"privacy-link"],textContent:[32]}],[1,"legislation-wrapper",{activeUserActions:[1,"active-user-actions"]}]]]],e)));
+import{p as t,b as e}from"./p-ba444709.js";(()=>{const e=import.meta.url,n={};return""!==e&&(n.resourcesUrl=new URL(".",e).href),t(n)})().then((t=>e([["p-94fcd363",[[1,"user-action-controller",{endpoint:[513],userSession:[513,"user-session"],userId:[513,"user-id"],includeSubmitButton:[516,"include-submit-button"],submitButtonText:[513,"submit-button-text"],userNoticeText:[513,"user-notice-text"],activeUserActions:[513,"active-user-actions"],showCloseButton:[516,"show-close-button"],usePostmessage:[516,"use-postmessage"],postMessageEvent:[1,"post-message-event"],clientStyling:[1537,"client-styling"],clientStylingUrl:[513,"client-styling-url"],queryFired:[32],readyActionsCount:[32],receivedQueryResponses:[32],limitStylingAppends:[32]},[[0,"userLegislationConsent","userLegislationConsentHandler"]]],[1,"generic-user-consent",{queried:[516],consentType:[513,"consent-type"],mandatory:[516],consentTitle:[513,"consent-title"],tcLink:[513,"tc-link"],privacyLink:[513,"privacy-link"],clientStyling:[1,"client-styling"],textContent:[32],limitStylingAppends:[32]}],[1,"legislation-wrapper",{activeUserActions:[513,"active-user-actions"],clientStyling:[1,"client-styling"],limitStylingAppends:[32]}]]]],t)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/user-action-controller",
-  "version": "1.0.0",
+  "version": "1.15.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",
@@ -8,7 +8,7 @@
   "types": "./dist/types/index.d.ts",
   "collection": "./dist/collection/collection-manifest.json",
   "collection:main": "./dist/collection/index.js",
-  "unpkg": "./dist/user-action-controller/user-action-controller.js",
+  "unpkg": "./dist/user-action-controller/user-action-controller.esm.js",
   "files": [
     "dist/",
     "loader/"

package/dist/user-action-controller/p-20213f37.js

@@ -1 +0,0 @@
-let e,t,n=!1,l=!1;const s="undefined"!=typeof window?window:{},o=s.document||{head:{}},r={t:0,l:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},c=e=>Promise.resolve(e),i=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replace}catch(e){}return!1})(),u=(e,t,n)=>{n&&n.map((([n,l,s])=>{const o=e,c=a(t,s),i=f(n);r.ael(o,l,c,i),(t.o=t.o||[]).push((()=>r.rel(o,l,c,i)))}))},a=(e,t)=>n=>{try{256&e.t?e.i[t](n):(e.u=e.u||[]).push([t,n])}catch(e){J(e)}},f=e=>0!=(2&e),h=new WeakMap,$=e=>"sc-"+e.h,y={},d=e=>"object"==(e=typeof e)||"function"===e,m=(e,t,...n)=>{let l=null,s=!1,o=!1,r=[];const c=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?c(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!d(l))&&(l+=""),s&&o?r[r.length-1].$+=l:r.push(s?p(null,l):l),o=s)};if(c(n),t){const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}const i=p(e,null);return i.m=t,r.length>0&&(i.p=r),i},p=(e,t)=>({t:0,g:e,$:t,v:null,p:null,m:null}),b={},w=(e,t,n,l,o,c)=>{if(n!==l){let i=I(e,t),u=t.toLowerCase();if("class"===t){const t=e.classList,s=v(n),o=v(l);t.remove(...s.filter((e=>e&&!o.includes(e)))),t.add(...o.filter((e=>e&&!s.includes(e))))}else if("ref"===t)l&&l(e);else if(i||"o"!==t[0]||"n"!==t[1]){const s=d(l);if((i||s&&null!==l)&&!o)try{if(e.tagName.includes("-"))e[t]=l;else{let s=null==l?"":l;"list"===t?i=!1:null!=n&&e[t]==s||(e[t]=s)}}catch(e){}null==l||!1===l?!1===l&&""!==e.getAttribute(t)||e.removeAttribute(t):(!i||4&c||o)&&!s&&e.setAttribute(t,l=!0===l?"":l)}else t="-"===t[2]?t.slice(3):I(s,u)?u.slice(2):u[2]+t.slice(3),n&&r.rel(e,t,n,!1),l&&r.ael(e,t,l,!1)}},g=/\s/,v=e=>e?e.split(g):[],S=(e,t,n,l)=>{const s=11===t.v.nodeType&&t.v.host?t.v.host:t.v,o=e&&e.m||y,r=t.m||y;for(l in o)l in r||w(s,l,o[l],void 0,n,t.t);for(l in r)w(s,l,o[l],r[l],n,t.t)},j=(t,l,s)=>{let r,c,i=l.p[s],u=0;if(null!==i.$)r=i.v=o.createTextNode(i.$);else{if(n||(n="svg"===i.g),r=i.v=o.createElementNS(n?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",i.g),n&&"foreignObject"===i.g&&(n=!1),S(null,i,n),null!=e&&r["s-si"]!==e&&r.classList.add(r["s-si"]=e),i.p)for(u=0;u<i.p.length;++u)c=j(t,i,u),c&&r.appendChild(c);"svg"===i.g?n=!1:"foreignObject"===r.tagName&&(n=!0)}return r},O=(e,n,l,s,o,r)=>{let c,i=e;for(i.shadowRoot&&i.tagName===t&&(i=i.shadowRoot);o<=r;++o)s[o]&&(c=j(null,l,o),c&&(s[o].v=c,i.insertBefore(c,n)))},M=(e,t,n,l,s)=>{for(;t<=n;++t)(l=e[t])&&(s=l.v,x(l),s.remove())},k=(e,t)=>e.g===t.g,C=(e,t)=>{const l=t.v=e.v,s=e.p,o=t.p,r=t.g,c=t.$;null===c?(n="svg"===r||"foreignObject"!==r&&n,"slot"===r||S(e,t,n),null!==s&&null!==o?((e,t,n,l)=>{let s,o=0,r=0,c=t.length-1,i=t[0],u=t[c],a=l.length-1,f=l[0],h=l[a];for(;o<=c&&r<=a;)null==i?i=t[++o]:null==u?u=t[--c]:null==f?f=l[++r]:null==h?h=l[--a]:k(i,f)?(C(i,f),i=t[++o],f=l[++r]):k(u,h)?(C(u,h),u=t[--c],h=l[--a]):k(i,h)?(C(i,h),e.insertBefore(i.v,u.v.nextSibling),i=t[++o],h=l[--a]):k(u,f)?(C(u,f),e.insertBefore(u.v,i.v),u=t[--c],f=l[++r]):(s=j(t&&t[r],n,r),f=l[++r],s&&i.v.parentNode.insertBefore(s,i.v));o>c?O(e,null==l[a+1]?null:l[a+1].v,n,l,r,a):r>a&&M(t,o,c)})(l,s,t,o):null!==o?(null!==e.$&&(l.textContent=""),O(l,null,t,o,0,o.length-1)):null!==s&&M(s,0,s.length-1),n&&"svg"===r&&(n=!1)):e.$!==c&&(l.data=c)},x=e=>{e.m&&e.m.ref&&e.m.ref(null),e.p&&e.p.map(x)},P=(e,t,n)=>{const l=(e=>B(e).S)(e);return{emit:e=>E(l,t,{bubbles:!!(4&n),composed:!!(2&n),cancelable:!!(1&n),detail:e})}},E=(e,t,n)=>{const l=r.ce(t,n);return e.dispatchEvent(l),l},L=(e,t)=>{t&&!e.j&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.j=t)))},N=(e,t)=>{if(e.t|=16,!(4&e.t))return L(e,e.O),se((()=>T(e,t)));e.t|=512},T=(e,t)=>{const n=e.i;let l;return t&&(e.t|=256,e.u&&(e.u.map((([e,t])=>q(n,e,t))),e.u=null),l=q(n,"componentWillLoad")),F(l,(()=>W(e,n,t)))},W=async(e,t,n)=>{const l=e.S,s=l["s-rc"];n&&(e=>{const t=e.M,n=e.S,l=t.t,s=((e,t)=>{let n=$(t),l=X.get(n);if(e=11===e.nodeType?e:o,l)if("string"==typeof l){let t,s=h.get(e=e.head||e);s||h.set(e,s=new Set),s.has(n)||(t=o.createElement("style"),t.innerHTML=l,e.insertBefore(t,e.querySelector("link")),s&&s.add(n))}else e.adoptedStyleSheets.includes(l)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,l]);return n})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=s,n.classList.add(s+"-h"))})(e);A(e,t),s&&(s.map((e=>e())),l["s-rc"]=void 0);{const t=l["s-p"],n=()=>R(e);0===t.length?n():(Promise.all(t).then(n),e.t|=4,t.length=0)}},A=(n,l)=>{try{l=l.render(),n.t&=-17,n.t|=2,((n,l)=>{const s=n.S,o=n.k||p(null,null),r=(e=>e&&e.g===b)(l)?l:m(null,null,l);t=s.tagName,r.g=null,r.t|=4,n.k=r,r.v=o.v=s.shadowRoot||s,e=s["s-sc"],C(o,r)})(n,l)}catch(e){J(e,n.S)}return null},R=e=>{const t=e.S,n=e.O;64&e.t||(e.t|=64,H(t),e.C(t),n||U()),e.j&&(e.j(),e.j=void 0),512&e.t&&le((()=>N(e,!1))),e.t&=-517},U=()=>{H(o.documentElement),le((()=>E(s,"appload",{detail:{namespace:"user-action-controller"}})))},q=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){J(e)}},F=(e,t)=>e&&e.then?e.then(t):t(),H=e=>e.classList.add("hydrated"),V=(e,t,n)=>{if(t.P){e.watchers&&(t.L=e.watchers);const l=Object.entries(t.P),s=e.prototype;if(l.map((([e,[l]])=>{(31&l||2&n&&32&l)&&Object.defineProperty(s,e,{get(){return((e,t)=>B(this).N.get(t))(0,e)},set(n){((e,t,n,l)=>{const s=B(e),o=s.S,r=s.N.get(t),c=s.t,i=s.i;if(n=((e,t)=>null==e||d(e)?e:4&t?"false"!==e&&(""===e||!!e):1&t?e+"":e)(n,l.P[t][0]),(!(8&c)||void 0===r)&&n!==r&&(!Number.isNaN(r)||!Number.isNaN(n))&&(s.N.set(t,n),i)){if(l.L&&128&c){const e=l.L[t];e&&e.map((e=>{try{i[e](n,r,t)}catch(e){J(e,o)}}))}2==(18&c)&&N(s,!1)}})(this,e,n,t)},configurable:!0,enumerable:!0})})),1&n){const t=new Map;s.attributeChangedCallback=function(e,n,l){r.jmp((()=>{const n=t.get(e);if(this.hasOwnProperty(n))l=this[n],delete this[n];else if(s.hasOwnProperty(n)&&"number"==typeof this[n]&&this[n]==l)return;this[n]=(null!==l||"boolean"!=typeof this[n])&&l}))},e.observedAttributes=l.filter((([e,t])=>15&t[0])).map((([e,n])=>{const l=n[1]||e;return t.set(l,e),l}))}}return e},_=(e,t={})=>{const n=[],l=t.exclude||[],c=s.customElements,a=o.head,f=a.querySelector("meta[charset]"),h=o.createElement("style"),y=[];let d,m=!0;Object.assign(r,t),r.l=new URL(t.resourcesUrl||"./",o.baseURI).href,e.map((e=>{e[1].map((t=>{const s={t:t[0],h:t[1],P:t[2],T:t[3]};s.P=t[2],s.T=t[3],s.L={};const o=s.h,a=class extends HTMLElement{constructor(e){super(e),G(e=this,s),1&s.t&&e.attachShadow({mode:"open"})}connectedCallback(){d&&(clearTimeout(d),d=null),m?y.push(this):r.jmp((()=>(e=>{if(0==(1&r.t)){const t=B(e),n=t.M,l=()=>{};if(1&t.t)u(e,t,n.T);else{t.t|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){L(t,t.O=n);break}}n.P&&Object.entries(n.P).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n,l,s)=>{if(0==(32&t.t)){{if(t.t|=32,(s=Q(n)).then){const e=()=>{};s=await s,e()}s.isProxied||(n.L=s.watchers,V(s,n,2),s.isProxied=!0);const e=()=>{};t.t|=8;try{new s(t)}catch(e){J(e)}t.t&=-9,t.t|=128,e()}if(s.style){let e=s.style;const t=$(n);if(!X.has(t)){const l=()=>{};((e,t,n)=>{let l=X.get(e);i&&n?(l=l||new CSSStyleSheet,l.replace(t)):l=t,X.set(e,l)})(t,e,!!(1&n.t)),l()}}}const o=t.O,r=()=>N(t,!0);o&&o["s-rc"]?o["s-rc"].push(r):r()})(0,t,n)}l()}})(this)))}disconnectedCallback(){r.jmp((()=>(()=>{if(0==(1&r.t)){const e=B(this);e.o&&(e.o.map((e=>e())),e.o=void 0)}})()))}componentOnReady(){return B(this).W}};s.A=e[0],l.includes(o)||c.get(o)||(n.push(o),c.define(o,V(a,s,1)))}))})),h.innerHTML=n+"{visibility:hidden}.hydrated{visibility:inherit}",h.setAttribute("data-styles",""),a.insertBefore(h,f?f.nextSibling:a.firstChild),m=!1,y.length?y.map((e=>e.connectedCallback())):r.jmp((()=>d=setTimeout(U,30)))},z=new WeakMap,B=e=>z.get(e),D=(e,t)=>z.set(t.i=e,t),G=(e,t)=>{const n={t:0,S:e,M:t,N:new Map};return n.W=new Promise((e=>n.C=e)),e["s-p"]=[],e["s-rc"]=[],u(e,n,t.T),z.set(e,n)},I=(e,t)=>t in e,J=(e,t)=>(0,console.error)(e,t),K=new Map,Q=e=>{const t=e.h.replace(/-/g,"_"),n=e.A,l=K.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(K.set(n,e),e[t])),J)},X=new Map,Y=[],Z=[],ee=(e,t)=>n=>{e.push(n),l||(l=!0,t&&4&r.t?le(ne):r.raf(ne))},te=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){J(e)}e.length=0},ne=()=>{te(Y),te(Z),(l=Y.length>0)&&r.raf(ne)},le=e=>c().then(e),se=ee(Z,!0);export{_ as b,P as c,m as h,c as p,D as r}

package/dist/user-action-controller/p-2a14a5fe.entry.js

@@ -1 +0,0 @@
-import{r as t,c as e,h as s}from"./p-20213f37.js";const i=class{constructor(s){t(this,s),this.userLegislationConsent=e(this,"userLegislationConsent",7),this.queried=!1,this.consentType="",this.mandatory=!1,this.consentTitle="",this.tcLink="#",this.privacyLink="#",this.textContent="",this.stringVariants={termsandconditions1:"I accept the ",termsandconditions2:", I have read and understood the ",termsandconditions3:" as published on this site and confirm that I am over 18 years old.",tc:"Terms and Conditions",privacy:"Privacy Policy",sms:"I consent to receive marketing communication via SMS.",emailmarketing:"I consent to receive marketing communication via Email."}}determineTextContent(){return"termsandconditions"===this.consentType?s("span",null,this.stringVariants.termsandconditions1,s("a",{href:this.tcLink},this.stringVariants.tc),this.stringVariants.termsandconditions2,s("a",{href:this.privacyLink},this.stringVariants.privacy),this.stringVariants.termsandconditions3):s("span",null,this.stringVariants[this.consentType])}userLegislationConsentHandler(){this.userLegislationConsent.emit({type:this.consentType,value:this.checkboxInput.checked})}render(){return this.queried&&this.userLegislationConsentHandler(),this.textContent=this.determineTextContent(),s("div",null,s("p",{class:"ConsentTitle"},this.consentTitle),s("label",{class:"userConsent",htmlFor:"userConsent"},s("input",{ref:t=>this.checkboxInput=t,id:"userConsent",type:"checkbox",onInput:()=>this.userLegislationConsentHandler()}),this.textContent,this.mandatory&&s("span",{class:"MandatoryItem"},"*")))}};i.style=":host{display:block}.ConsentTitle{margin-bottom:0.2rem;font-weight:600}.userConsent:hover{border-bottom:1px solid #000;cursor:pointer}.MandatoryItem{color:#f00;font-size:1.2rem}";const n=class{constructor(e){t(this,e)}render(){const t=this.activeUserActions.replace(/ /g,"").split(",");return s("div",{class:"LegislationWrapper"},t.map((t=>s("slot",{name:t}))))}};n.style=":host{display:block}";const o=class{constructor(s){t(this,s),this.closeButtonEvent=e(this,"closeButtonClicked",7),this.postMessageEvent="closeButtonClicked",this.consentTitles={termsandconditions:"Terms and Conditions",sms:"SMS marketing",emailmarketing:"Email marketing"},this.queryFired=!1,this.readyActionsCount=0,this.receivedQueryResponses=0,this.mandatoryActions=["termsandconditions"],this.requiredActionsCount=0,this.expectedQueryResponses=0,this.userActions=[]}determineMandatoryActions(){let t=new URL(`${this.endpoint}v1/player/consentRequirements`);return fetch(t.href).then((t=>t.json())).then((t=>{t.items.forEach((t=>{t.mustAccept&&this.mandatoryActions.push(t.tagCode)}))}))}handleQueryResponse(){this.receivedQueryResponses===this.expectedQueryResponses&&this.updateUserConsents()}updateUserConsents(){const t=new URL(`${this.endpoint}v1/player/${this.userId}/consent`);let e={method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json","X-SessionId":`${this.userSession}`},body:JSON.stringify({items:this.userActions})};fetch(t.href,e).then((t=>t.json())).then((()=>{window.postMessage({type:"WidgetNotification",data:{type:"success",message:"Consent update successfull!"}},window.location.href)})).catch((t=>{window.postMessage({type:"WidgetNotification",data:{type:"error",message:"Server might not be responding",err:t}},window.location.href)})).finally((()=>{window.postMessage({type:"UserActionsCompleted"},window.location.href)}))}handleApplyClick(){this.queryFired=!0}handleClose(){this.usePostmessage&&window.postMessage({type:this.postMessageEvent}),this.closeButtonEvent.emit()}userLegislationConsentHandler(t){this.mandatoryActions.includes(t.detail.type)&&(t.detail.value?this.readyActionsCount++:this.readyActionsCount--),this.queryFired&&(this.userActions.push({tagCode:t.detail.type,status:t.detail.value?"Accepted":"Denied"}),this.receivedQueryResponses++)}componentWillLoad(){return this.determineMandatoryActions()}render(){const t=this.activeUserActions.replace(/ /g,"").split(",");return this.requiredActionsCount=t.filter((t=>this.mandatoryActions.includes(t))).length,this.expectedQueryResponses=t.length,s("div",{class:"QueryReferenceContainer"},s("div",{class:"UserActionController"},this.showCloseButton&&s("div",{class:"CloseButton",onClick:()=>this.handleClose()},s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"25",height:"25",fill:"currentColor",viewBox:"0 0 16 16"},s("path",{d:"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"}))),s("h2",{class:"UserConsentNotice"},this.userNoticeText),s("legislation-wrapper",{"active-user-actions":this.activeUserActions},t.map((t=>s("generic-user-consent",{slot:t,consentType:t,consentTitle:this.consentTitles[t],queried:this.queryFired,mandatory:this.mandatoryActions.includes(t)})))),this.includeSubmitButton&&s("button",{class:"ConsentSubmitButton",disabled:this.readyActionsCount!==this.requiredActionsCount,onClick:()=>this.handleApplyClick()},this.submitButtonText)))}static get watchers(){return{receivedQueryResponses:["handleQueryResponse"]}}};o.style=":host{display:block}.QueryReferenceContainer{height:100%;width:100%}.UserConsentNotice{font-size:1.2rem;font-weight:200;text-align:center}.CloseButton{width:25px;height:25px;align-self:flex-end}.UserActionController{font-family:Arial, Helvetica, sans-serif;font-weight:100;height:100%;width:100%;padding:1rem 1.5rem 2rem;background-color:#fff;display:flex;flex-direction:column;justify-content:space-between;border-radius:5%}.ConsentSubmitButton{font-size:1rem;padding:0.4rem 1.4rem;background:#fff;border:2px solid #000;color:#000;border-radius:5px;align-self:flex-end}.ConsentSubmitButton:disabled{border:2px solid #ccc;color:#ccc}@media screen and (max-width: 320px){.QueryReferenceContainer{font-size:0.8rem;color:blue}}";export{i as generic_user_consent,n as legislation_wrapper,o as user_action_controller}