@everymatrix/user-action-controller 0.0.1 → 1.13.4

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4a3038bd.js');
+const index = require('./index-3529682c.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,19 +95,51 @@ 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;
 
-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) {
     index.registerInstance(this, hostRef);
+    this.closeButtonEvent = index.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",
@@ -100,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`);
@@ -136,9 +207,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);
     });
@@ -146,6 +233,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)) {
@@ -164,11 +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" }, 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-4a3038bd.js → index-3529682c.js}

@@ -164,6 +164,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
@@ -380,8 +385,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);
@@ -402,6 +414,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;
 };
@@ -512,6 +534,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')
@@ -540,6 +567,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
@@ -697,7 +727,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/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4a3038bd.js');
+const index = require('./index-3529682c.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"],"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":[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/cjs/user-action-controller.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-4a3038bd.js');
+const index = require('./index-3529682c.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"],"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":[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/collection/components/user-action-controller/user-action-controller.css

@@ -13,6 +13,12 @@
   text-align: center;
 }
 
+.CloseButton {
+  width: 25px;
+  height: 25px;
+  align-self: flex-end;
+}
+
 .UserActionController {
   font-family: Arial, Helvetica, sans-serif;
   font-weight: 100;

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

@@ -1,8 +1,20 @@
-import { Component, h, Prop, Listen, State, Watch } from '@stencil/core';
+import { Component, h, Prop, Listen, State, Watch, Event } from '@stencil/core';
 import '@everymatrix/legislation-wrapper';
 import '@everymatrix/generic-user-consent';
 export class UserActionController {
   constructor() {
+    /**
+     * 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",
@@ -14,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`);
@@ -50,9 +82,25 @@ export class UserActionController {
     };
     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);
     });
@@ -60,6 +108,12 @@ export class UserActionController {
   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)) {
@@ -78,14 +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))));
   }
@@ -216,13 +285,118 @@ export class UserActionController {
       },
       "attribute": "active-user-actions",
       "reflect": false
+    },
+    "showCloseButton": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Property used to display the close/cancel button"
+      },
+      "attribute": "show-close-button",
+      "reflect": false
+    },
+    "usePostmessage": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Use postMessage event to communicate"
+      },
+      "attribute": "use-postmessage",
+      "reflect": false
+    },
+    "postMessageEvent": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Event name to be sent when the button is clicked"
+      },
+      "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": false,
+      "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": false,
+      "defaultValue": "''"
     }
   }; }
   static get states() { return {
     "queryFired": {},
     "readyActionsCount": {},
-    "receivedQueryResponses": {}
+    "receivedQueryResponses": {},
+    "limitStylingAppends": {}
   }; }
+  static get events() { return [{
+      "method": "closeButtonEvent",
+      "name": "closeButtonClicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event emitted when the close button is clicked"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
   static get watchers() { return [{
       "propName": "receivedQueryResponses",
       "methodName": "handleQueryResponse"

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,12 +69,21 @@ 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", {
@@ -74,7 +93,9 @@ const GenericUserConsent = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     "consentTitle": [1, "consent-title"],
     "tcLink": [1, "tc-link"],
     "privacyLink": [1, "privacy-link"],
-    "textContent": [32]
+    "clientStyling": [1, "client-styling"],
+    "textContent": [32],
+    "limitStylingAppends": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {