@everymatrix/user-action-controller 0.0.1 → 1.13.4

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": [1, "active-user-actions"],
+    "clientStyling": [1, "client-styling"],
+    "limitStylingAppends": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

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

@@ -1,14 +1,27 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$3 } from './generic-user-consent2.js';
 import { d as defineCustomElement$2 } from './legislation-wrapper2.js';
 
-const userActionControllerCss = ":host{display:block}.QueryReferenceContainer{height:100%;width:100%}.UserConsentNotice{font-size:1.2rem;font-weight:200;text-align:center}.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}}";
+const userActionControllerCss = ":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}}";
 
 const UserActionController$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.closeButtonEvent = createEvent(this, "closeButtonClicked", 7);
+    /**
+     * 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",
@@ -20,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`);
@@ -56,9 +89,25 @@ const UserActionController$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     };
     fetch(url.href, options)
       .then(res => res.json())
-      // .then(data => {
-      //   console.log(data);
-      // })
+      .then(() => {
+      /**
+       * @TODO document this
+       */
+      window.postMessage({ type: 'WidgetNotification', data: {
+          type: 'success',
+          message: 'Consent update successfull!'
+        } }, window.location.href);
+    })
+      .catch((err) => {
+      /**
+       * @TODO document this
+       */
+      window.postMessage({ type: 'WidgetNotification', data: {
+          type: 'error',
+          message: 'Server might not be responding',
+          err
+        } }, window.location.href);
+    })
       .finally(() => {
       window.postMessage({ type: "UserActionsCompleted" }, window.location.href);
     });
@@ -66,6 +115,12 @@ const UserActionController$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   handleApplyClick() {
     this.queryFired = true;
   }
+  handleClose() {
+    if (this.usePostmessage) {
+      window.postMessage({ type: this.postMessageEvent });
+    }
+    this.closeButtonEvent.emit();
+  }
   userLegislationConsentHandler(event) {
     // Increase / Decrease the amount of mandatory actions taken
     if (this.mandatoryActions.includes(event.detail.type)) {
@@ -84,11 +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" }, 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 {
@@ -103,9 +170,15 @@ const UserActionController$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     "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"],
+    "clientStyling": [1025, "client-styling"],
+    "clientStylingUrl": [1, "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-9eef5ef8.js';
+import { r as registerInstance, c as createEvent, h } from './index-f118067b.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,19 +91,51 @@ 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;
 
-const userActionControllerCss = ":host{display:block}.QueryReferenceContainer{height:100%;width:100%}.UserConsentNotice{font-size:1.2rem;font-weight:200;text-align:center}.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}}";
+const userActionControllerCss = ":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}}";
 
 const UserActionController = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.closeButtonEvent = createEvent(this, "closeButtonClicked", 7);
+    /**
+     * 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",
@@ -96,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`);
@@ -132,9 +203,25 @@ const UserActionController = class {
     };
     fetch(url.href, options)
       .then(res => res.json())
-      // .then(data => {
-      //   console.log(data);
-      // })
+      .then(() => {
+      /**
+       * @TODO document this
+       */
+      window.postMessage({ type: 'WidgetNotification', data: {
+          type: 'success',
+          message: 'Consent update successfull!'
+        } }, window.location.href);
+    })
+      .catch((err) => {
+      /**
+       * @TODO document this
+       */
+      window.postMessage({ type: 'WidgetNotification', data: {
+          type: 'error',
+          message: 'Server might not be responding',
+          err
+        } }, window.location.href);
+    })
       .finally(() => {
       window.postMessage({ type: "UserActionsCompleted" }, window.location.href);
     });
@@ -142,6 +229,12 @@ const UserActionController = class {
   handleApplyClick() {
     this.queryFired = true;
   }
+  handleClose() {
+    if (this.usePostmessage) {
+      window.postMessage({ type: this.postMessageEvent });
+    }
+    this.closeButtonEvent.emit();
+  }
   userLegislationConsentHandler(event) {
     // Increase / Decrease the amount of mandatory actions taken
     if (this.mandatoryActions.includes(event.detail.type)) {
@@ -160,11 +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" }, 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-9eef5ef8.js → index-f118067b.js}

@@ -142,6 +142,11 @@ const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
  * Don't add values to these!!
  */
 const EMPTY_OBJ = {};
+/**
+ * Namespaces
+ */
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const HTML_NS = 'http://www.w3.org/1999/xhtml';
 const isDef = (v) => v != null;
 const isComplexType = (o) => {
     // https://jsperf.com/typeof-fn-object/5
@@ -358,8 +363,15 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
         elm = newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
     }
     else {
+        if (!isSvgMode) {
+            isSvgMode = newVNode.$tag$ === 'svg';
+        }
         // create element
-        elm = newVNode.$elm$ = (doc.createElement(newVNode.$tag$));
+        elm = newVNode.$elm$ = (doc.createElementNS(isSvgMode ? SVG_NS : HTML_NS, newVNode.$tag$)
+            );
+        if (isSvgMode && newVNode.$tag$ === 'foreignObject') {
+            isSvgMode = false;
+        }
         // add css classes, attrs, props, listeners, etc.
         {
             updateElement(null, newVNode, isSvgMode);
@@ -380,6 +392,16 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
                 }
             }
         }
+        {
+            if (newVNode.$tag$ === 'svg') {
+                // Only reset the SVG context when we're exiting <svg> element
+                isSvgMode = false;
+            }
+            else if (elm.tagName === 'foreignObject') {
+                // Reenter SVG context when we're exiting <foreignObject> element
+                isSvgMode = true;
+            }
+        }
     }
     return elm;
 };
@@ -490,6 +512,11 @@ const patch = (oldVNode, newVNode) => {
     const tag = newVNode.$tag$;
     const text = newVNode.$text$;
     if (text === null) {
+        {
+            // test if we're rendering an svg element, or still rendering nodes inside of one
+            // only add this to the when the compiler sees we're using an svg somewhere
+            isSvgMode = tag === 'svg' ? true : tag === 'foreignObject' ? false : isSvgMode;
+        }
         // element node
         {
             if (tag === 'slot')
@@ -518,6 +545,9 @@ const patch = (oldVNode, newVNode) => {
             // no new child vnodes, but there are old child vnodes to remove
             removeVnodes(oldChildren, 0, oldChildren.length - 1);
         }
+        if (isSvgMode && tag === 'svg') {
+            isSvgMode = false;
+        }
     }
     else if (oldVNode.$text$ !== text) {
         // update the text content for the text only vnode
@@ -675,7 +705,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 */;
         {

package/dist/esm/loader.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-9eef5ef8.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-f118067b.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"],"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":[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"],"clientStyling":[1025,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"queryFired":[32],"readyActionsCount":[32],"receivedQueryResponses":[32],"limitStylingAppends":[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"],"clientStyling":[1,"client-styling"],"textContent":[32],"limitStylingAppends":[32]}],[1,"legislation-wrapper",{"activeUserActions":[1,"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-9eef5ef8.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-f118067b.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"],"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":[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"],"clientStyling":[1025,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"queryFired":[32],"readyActionsCount":[32],"receivedQueryResponses":[32],"limitStylingAppends":[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"],"clientStyling":[1,"client-styling"],"textContent":[32],"limitStylingAppends":[32]}],[1,"legislation-wrapper",{"activeUserActions":[1,"active-user-actions"],"clientStyling":[1,"client-styling"],"limitStylingAppends":[32]}]]]], options);
 });

package/dist/types/Users/adrian.pripon/Documents/Work/stencil/widgets-stencil/packages/user-action-controller/.stencil/packages/user-action-controller/stencil.config.d.ts

@@ -0,0 +1,2 @@
+import { Config } from '../../../../../../../../../../../stencil-public-runtime';
+export declare const config: Config;

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

@@ -1,3 +1,4 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 import '@everymatrix/legislation-wrapper';
 import '@everymatrix/generic-user-consent';
 interface LegislationConsentEvent {
@@ -33,6 +34,30 @@ export declare class UserActionController {
   * which user action widgets are included
   */
   activeUserActions: string;
+  /**
+   * Property used to display the close/cancel button
+   */
+  showCloseButton: boolean;
+  /**
+   * Use postMessage event to communicate
+   */
+  usePostmessage: boolean;
+  /**
+   * 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
+   */
+  closeButtonEvent: EventEmitter<any>;
   private consentTitles;
   /**
    * Which actions are required in order to activate the "Apply" button. Other actions are considered optional.
@@ -40,16 +65,22 @@ 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;
   handleApplyClick(): void;
+  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,6 +11,14 @@ 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
          */
@@ -19,10 +27,22 @@ export namespace Components {
           * wether or not to include the submit button (in case we want to compose a different )
          */
         "includeSubmitButton": boolean;
+        /**
+          * Event name to be sent when the button is clicked
+         */
+        "postMessageEvent": string;
+        /**
+          * Property used to display the close/cancel button
+         */
+        "showCloseButton": boolean;
         /**
           * the text of the button, if button is enabled
          */
         "submitButtonText": string;
+        /**
+          * Use postMessage event to communicate
+         */
+        "usePostmessage": boolean;
         /**
           * user id required for the update call
          */
@@ -54,6 +74,14 @@ 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
          */
@@ -62,10 +90,26 @@ declare namespace LocalJSX {
           * wether or not to include the submit button (in case we want to compose a different )
          */
         "includeSubmitButton": boolean;
+        /**
+          * Event emitted when the close button is clicked
+         */
+        "onCloseButtonClicked"?: (event: CustomEvent<any>) => void;
+        /**
+          * Event name to be sent when the button is clicked
+         */
+        "postMessageEvent"?: string;
+        /**
+          * Property used to display the close/cancel button
+         */
+        "showCloseButton": boolean;
         /**
           * the text of the button, if button is enabled
          */
         "submitButtonText"?: string;
+        /**
+          * Use postMessage event to communicate
+         */
+        "usePostmessage": boolean;
         /**
           * user id required for the update call
          */