@everymatrix/lottery-game-page 0.1.19 → 0.1.20

package/dist/components/helper-accordion2.js

@@ -15,7 +15,7 @@ const translate = (key, customLang) => {
   return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
 };
 
-const helperAccordionCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Header{border-radius:4px 4px 0 0;background:#009993;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none}.Header:hover{background:#00ABA4}.Header .Title,.Header .Subtitle,.Header .Description{margin:0;font-size:14px;color:#fff}.Header .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.HeaderTicketHistory{border-radius:4px;background:#F1F1F1;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none;margin-bottom:5px}.HeaderTicketHistory:hover{background:#00ABA4}.HeaderTicketHistory .Title,.HeaderTicketHistory .Subtitle,.HeaderTicketHistory .Description{margin:0;font-size:14px;color:#000}.HeaderTicketHistory .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.Content{border-radius:0 0 4px 4px;background:#fff;border:1px solid #009993;padding:10px 15px;user-select:none;color:#000;margin-bottom:10px}.ActionButton{cursor:pointer;display:inline-block;border-radius:4px;margin:20px 0 10px;text-transform:uppercase;font-size:12px;text-align:center;padding:8px 20px;min-width:80px;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.ActionButton:hover{background:#FF6536;border:1px solid #FF3D00}";
+const helperAccordionCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Header{border-radius:5px;background:#009993;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none;margin-bottom:1px}.Header:hover{background:#00ABA4}.Header .Title,.Header .Subtitle,.Header .Description{margin:0;font-size:14px;color:#fff;text-transform:capitalize}.Header .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.HeaderTicketHistory{border-radius:4px;background:#F1F1F1;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none;margin-bottom:5px}.HeaderTicketHistory:hover{background:#00ABA4}.HeaderTicketHistory .Title,.HeaderTicketHistory .Subtitle,.HeaderTicketHistory .Description{margin:0;font-size:14px;color:#000}.HeaderTicketHistory .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.Content{border-radius:0 0 4px 4px;background:#fff;border:1px solid #009993;padding:10px 15px;user-select:none;color:#000;margin-bottom:10px}.ActionButton{cursor:pointer;display:inline-block;border-radius:4px;margin:20px 0 10px;text-transform:uppercase;font-size:12px;text-align:center;padding:8px 20px;min-width:80px;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.ActionButton:hover{background:#FF6536;border:1px solid #FF3D00}";
 
 const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -63,11 +63,43 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Language
      */
     this.language = 'en';
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
+    this.limitStylingAppends = false;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let cssFile = document.createElement('style');
+      setTimeout(() => {
+        cssFile.innerHTML = this.clientStylingUrlContent;
+        this.stylingContainer.prepend(cssFile);
+      }, 1);
+    };
   }
   // @TODO fix the `any` type :)
   connectedCallback() {
     this.showContent = !this.collapsed;
   }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrlContent)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
   toggleContent() {
     this.showContent = !this.showContent;
   }
@@ -79,7 +111,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.accordionEvent.emit();
   }
   render() {
-    return (h("div", { class: "Wrapper" }, h("div", { class: this.ticketHistoryFlag === true ? 'HeaderTicketHistory' : 'Header' }, h("p", { class: "Title" }, this.headerTitle), h("p", { class: "Subtitle" }, this.headerSubtitle), h("p", { class: "Subtitle" }, this.description), h("span", { class: "Expand", onClick: () => this.toggleContent() }, this.showContent ? '<' : '>')), this.showContent &&
+    return (h("div", { class: "Wrapper", ref: el => this.stylingContainer = el }, h("div", { class: this.ticketHistoryFlag === true ? 'HeaderTicketHistory' : 'Header' }, h("p", { class: "Title" }, this.headerTitle), h("p", { class: "Subtitle" }, this.headerSubtitle), h("p", { class: "Subtitle Description" }, this.description), h("span", { class: "Expand", onClick: () => this.toggleContent() }, this.showContent ? '<' : '>')), this.showContent &&
       h("div", null, h("div", { class: "Content" }, h("slot", { name: 'accordionContent' }), this.footer && this.showContent &&
         h("div", null, this.deleteTab &&
           h("span", { class: "ActionButton", onClick: () => this.deleteAction() }, translate('deleteTicket', this.language)))))));
@@ -96,7 +128,10 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "eventName": [1, "event-name"],
     "collapsed": [4],
     "language": [1],
-    "showContent": [32]
+    "clientStyling": [1, "client-styling"],
+    "clientStylingUrlContent": [1, "client-styling-url-content"],
+    "showContent": [32],
+    "limitStylingAppends": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/helper-filters2.js

@@ -22264,26 +22264,55 @@ const HelperFilters = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
      * Language
      */
     this.language = 'en';
+    /**
+     * Notifies if the quick filters from tickets are active
+     */
+    this.quickFiltersActive = false;
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
     this.showFilterModal = false;
     this.showClearButton = false;
     this.filterData = {};
     this.filterDataReset = { ticketDrawId: '', filterFromCalendar: '', filterToCalendar: '' };
+    this.limitStylingAppends = false;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let cssFile = document.createElement('style');
+      setTimeout(() => {
+        cssFile.innerHTML = this.clientStylingUrlContent;
+        this.stylingContainer.prepend(cssFile);
+      }, 1);
+    };
   }
   // reset field values each time the filter modal opens
   componentDidRender() {
-    this.filterData.ticketDrawId = null;
-    this.filterData.filterFromCalendar = null;
-    this.filterData.filterToCalendar = null;
     // @TODO: to way binding?
     if (document.getElementById('#FilterById'))
       document.getElementById('#FilterById').value = '';
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrlContent)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
   }
   filterSelectionHandler(event) {
     if (this.postMessage)
       window.postMessage({ type: 'filterSelection', event }, window.location.href);
-    if (this.filterData.ticketDrawId)
-      this.filterDraw.emit(event);
-    if (this.filterData.filterFromCalendar || this.filterData.filterToCalendar)
+    if (this.filterData.ticketDrawId || this.filterData.filterFromCalendar || this.filterData.filterToCalendar)
       this.filterSelection.emit(event);
   }
   filterSelectionResetHandler(event) {
@@ -22319,7 +22348,10 @@ const HelperFilters = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.filterData.filterToCalendar = new Date(event.target.value).toISOString();
   }
   render() {
-    return (h$2("div", { class: "HelperFilters" }, h$2("div", { class: "FilterButtonsWrapper" }, h$2("button", { class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate$1('filterOpen', this.language)), this.showClearButton ? h$2("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate$1('filterClear', this.language)) : null), h$2("helper-modal", { "title-modal": "Filter Modal", visible: this.showFilterModal }, h$2("div", { class: "FilterModalHeader" }, h$2("h3", { class: "FilterModalTitle" }, this.activateTicketSearch ? translate$1('filterModalTicketTitle', this.language) : translate$1('filterModalDrawTitle', this.language))), h$2("div", { class: "FilterModalBody" }, h$2("input", { id: "FilterById", type: "text", value: this.filterData.ticketDrawId, onInput: (event) => this.handleTicketDrawId(event), class: "FilterModalSearch", placeholder: this.activateTicketSearch ? translate$1('filterTicketPlaceholder', this.language) : translate$1('filterDrawPlaceholder', this.language) }), h$2("p", null, translate$1('filterOrDate', this.language)), h$2("div", { class: "FilterCalendarWrapper" }, h$2("vaadin-date-picker", { value: this.filterData.filterFromCalendar, onChange: (event) => this.handleFilterFrom(event), placeholder: translate$1('filterFromCalendar', this.language), class: "VaadinDatePicker" }), h$2("vaadin-date-picker", { value: this.filterData.filterToCalendar, onChange: (event) => this.handleFilterTo(event), placeholder: translate$1('filterToCalendar', this.language), class: "VaadinDatePicker" }))), h$2("div", { class: "FilterModalFooter" }, h$2("button", { class: "FilterModalButton", onClick: () => this.filterSearch() }, translate$1('filterModalButton', this.language))))));
+    return (h$2("div", { class: "HelperFilters", ref: el => this.stylingContainer = el }, h$2("div", { class: "FilterButtonsWrapper" }, h$2("button", { class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate$1('filterOpen', this.language)), (this.showClearButton || this.quickFiltersActive) ?
+      h$2("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate$1('filterClear', this.language))
+      :
+        null), h$2("helper-modal", { "title-modal": "Filter Modal", visible: this.showFilterModal, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, h$2("div", { class: "FilterModalHeader" }, h$2("h3", { class: "FilterModalTitle" }, this.activateTicketSearch ? translate$1('filterModalTicketTitle', this.language) : translate$1('filterModalDrawTitle', this.language))), h$2("div", { class: "FilterModalBody" }, h$2("input", { id: "FilterById", type: "text", value: this.filterData.ticketDrawId, onInput: (event) => this.handleTicketDrawId(event), class: "FilterModalSearch", placeholder: this.activateTicketSearch ? translate$1('filterTicketPlaceholder', this.language) : translate$1('filterDrawPlaceholder', this.language) }), h$2("p", null, translate$1('filterOrDate', this.language)), h$2("div", { class: "FilterCalendarWrapper" }, h$2("vaadin-date-picker", { value: this.filterData.filterFromCalendar, onChange: (event) => this.handleFilterFrom(event), placeholder: translate$1('filterFromCalendar', this.language), class: "VaadinDatePicker" }), h$2("vaadin-date-picker", { value: this.filterData.filterToCalendar, onChange: (event) => this.handleFilterTo(event), placeholder: translate$1('filterToCalendar', this.language), class: "VaadinDatePicker" }))), h$2("div", { class: "FilterModalFooter" }, h$2("button", { class: "FilterModalButton", onClick: () => this.filterSearch() }, translate$1('filterModalButton', this.language))))));
   }
   static get style() { return helperFiltersCss; }
 }, [1, "helper-filters", {
@@ -22330,10 +22362,14 @@ const HelperFilters = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "session": [1],
     "postMessage": [4, "post-message"],
     "language": [1],
+    "quickFiltersActive": [4, "quick-filters-active"],
+    "clientStyling": [1, "client-styling"],
+    "clientStylingUrlContent": [1, "client-styling-url-content"],
     "showFilterModal": [32],
     "showClearButton": [32],
     "filterData": [32],
-    "filterDataReset": [32]
+    "filterDataReset": [32],
+    "limitStylingAppends": [32]
   }, [[0, "modalCloseEvent", "modalCloseEvent"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/helper-modal2.js

@@ -25,21 +25,56 @@ const HelperModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Toggles if the helper is visible or not
      */
     this.visible = true;
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
+    this.limitStylingAppends = false;
     this.userAgent = window.navigator.userAgent;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let cssFile = document.createElement('style');
+      setTimeout(() => {
+        cssFile.innerHTML = this.clientStylingUrlContent;
+        this.stylingContainer.prepend(cssFile);
+      }, 1);
+    };
   }
   handleHelperModalClose() {
     this.visible = false;
     this.cancel.emit();
   }
   ;
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrlContent)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
   render() {
     return ((this.visible &&
-      h("div", { class: this.visible ? "HelperModalWrapper HelperModalVisible" : "HelperModalWrapper" }, h("div", { class: "HelperModalWrapper HelperModalVisible" }, h("div", { class: "HelperModalContent" + (isMobile(this.userAgent) ? ' HelperModalMobileContent' : '') }, h("span", { class: "HelperModalClose" + (isMobile(this.userAgent) ? ' HelperModalMobileClose' : ''), onClick: this.handleHelperModalClose.bind(this) }, "X"), h("slot", null))))));
+      h("div", { class: this.visible ? "HelperModalWrapper HelperModalVisible" : "HelperModalWrapper", ref: el => this.stylingContainer = el }, h("div", { class: "HelperModalWrapper HelperModalVisible" }, h("div", { class: "HelperModalContent" + (isMobile(this.userAgent) ? ' HelperModalMobileContent' : '') }, h("span", { class: "HelperModalClose" + (isMobile(this.userAgent) ? ' HelperModalMobileClose' : ''), onClick: this.handleHelperModalClose.bind(this) }, "X"), h("slot", null))))));
   }
   static get style() { return helperModalCss; }
 }, [1, "helper-modal", {
     "titleModal": [1, "title-modal"],
-    "visible": [1540]
+    "visible": [1540],
+    "clientStyling": [1, "client-styling"],
+    "clientStylingUrlContent": [1, "client-styling-url-content"],
+    "limitStylingAppends": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/helper-pagination.js

@@ -66,6 +66,14 @@ const HelperPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
      * Language
      */
     this.language = 'en';
+    /**
+   * Client custom styling via string
+   */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
     /**
      * In component working variable for the array of pages
      */
@@ -76,6 +84,7 @@ const HelperPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     this.endInt = 0;
     this.userAgent = window.navigator.userAgent;
     this.currentPage = 1;
+    this.limitStylingAppends = false;
     /**
      * Navigation logic
      */
@@ -130,6 +139,18 @@ const HelperPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
       this.currentPage = this.offsetInt;
       this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
     };
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let cssFile = document.createElement('style');
+      setTimeout(() => {
+        cssFile.innerHTML = this.clientStylingUrlContent;
+        this.stylingContainer.prepend(cssFile);
+      }, 1);
+    };
   }
   componentWillRender() {
     this.offsetInt = this.offset;
@@ -155,6 +176,17 @@ const HelperPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
       this.pagesArray.unshift('...');
     }
   }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrlContent)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
   render() {
     /**
      * Center navigation area
@@ -188,12 +220,15 @@ const HelperPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     "limit": [1538],
     "total": [1538],
     "language": [1],
+    "clientStyling": [1, "client-styling"],
+    "clientStylingUrlContent": [1, "client-styling-url-content"],
     "offsetInt": [32],
     "lastPage": [32],
     "limitInt": [32],
     "totalInt": [32],
     "pagesArray": [32],
-    "endInt": [32]
+    "endInt": [32],
+    "limitStylingAppends": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/helper-tab2.js

@@ -11,20 +11,52 @@ const HelperTab = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Selected index
      */
     this.selectedIndex = 0;
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
     this.tabContent = '';
+    this.limitStylingAppends = false;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let cssFile = document.createElement('style');
+      setTimeout(() => {
+        cssFile.innerHTML = this.clientStylingUrlContent;
+        this.stylingContainer.prepend(cssFile);
+      }, 1);
+    };
   }
   connectedCallback() {
     /**
      * fetch(cmsEndpoint + / + / + selectedIndex)
      */
   }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrlContent)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
   render() {
-    this.tabContent = h("div", { class: "TabContent" }, "Each play includes one set of numbers from 1 to 21 with a selectable number of 8 and a second, 4-digit set of numbers, with a minimum selection of 1. Draws are held every 5 minutes and the winnings are automatically credited to your account.");
+    this.tabContent = h("div", { class: "TabContent", ref: el => this.stylingContainer = el }, "Each play includes one set of numbers from 1 to 21 with a selectable number of 8 and a second, 4-digit set of numbers, with a minimum selection of 1. Draws are held every 5 minutes and the winnings are automatically credited to your account.");
     if (this.selectedIndex + 1 == 2) {
-      this.tabContent = h("div", { class: "TabContent" }, h("ol", null, h("li", null, "Register or Login"), h("li", null, "Buy tickets. Select 'Buy Tickets' to pick your numbers. Want us to automatically generate random numbers for you? Choose \u201CI feel lucky\u201D."), h("li", null, "Review and Complete your purchase. Once you've chosen your total number of plays, and confirmed your number of selections, review your ticket details and complete your purchase!")));
+      this.tabContent = h("div", { class: "TabContent", ref: el => this.stylingContainer = el }, h("ol", null, h("li", null, "Register or Login"), h("li", null, "Buy tickets. Select 'Buy Tickets' to pick your numbers. Want us to automatically generate random numbers for you? Choose \u201CI feel lucky\u201D."), h("li", null, "Review and Complete your purchase. Once you've chosen your total number of plays, and confirmed your number of selections, review your ticket details and complete your purchase!")));
     }
     else if (this.selectedIndex + 1 == 3) {
-      this.tabContent = h("div", { class: "TabContent" }, h("ul", null, h("li", null, "What are my odds of winning?"), h("li", null, "How can I find out if I\u2019ve won a draw game?"), h("li", null, "How do I claim my prize?")));
+      this.tabContent = h("div", { class: "TabContent", ref: el => this.stylingContainer = el }, h("ul", null, h("li", null, "What are my odds of winning?"), h("li", null, "How can I find out if I\u2019ve won a draw game?"), h("li", null, "How do I claim my prize?")));
     }
     return (this.tabContent);
   }
@@ -32,7 +64,10 @@ const HelperTab = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
 }, [1, "helper-tab", {
     "selectedIndex": [2, "selected-index"],
     "cmsEndpoint": [1, "cms-endpoint"],
-    "tabContent": [32]
+    "clientStyling": [1, "client-styling"],
+    "clientStylingUrlContent": [1, "client-styling-url-content"],
+    "tabContent": [32],
+    "limitStylingAppends": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/helper-tabs2.js

@@ -24,11 +24,47 @@ const HelperTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Tabs details
      */
     this.tabs = [{ label: 'How to Play' }, { label: 'About' }, { label: 'FAQs' }];
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingurl = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
+    this.limitStylingAppends = false;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let cssFile = document.createElement('style');
+      setTimeout(() => {
+        cssFile.innerHTML = this.clientStylingUrlContent;
+        this.stylingContainer.prepend(cssFile);
+      }, 1);
+    };
   }
   connectedCallback() {
   }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      this.setClientStyling();
+      if (this.clientStylingUrlContent) {
+        this.setClientStylingURL();
+      }
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
   render() {
-    return (h("div", null, h("div", { class: "Tabs" }, this.tabs.map((tab, index) => h("button", { class: 'TabButton' + (this.selectedIndex == index ? ' Active' : ''), onClick: () => this.selectedIndex = index }, tab.label))), h("div", null, h("helper-tab", { selectedIndex: this.selectedIndex }))));
+    return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "Tabs" }, this.tabs.map((tab, index) => h("button", { class: 'TabButton' + (this.selectedIndex == index ? ' Active' : ''), onClick: () => this.selectedIndex = index }, tab.label))), h("div", null, h("helper-tab", { selectedIndex: this.selectedIndex, "client-styling": this.clientStyling, "client-stylingurl": this.clientStylingurl, "client-styling-url-content": this.clientStylingUrlContent }))));
   }
   get host() { return this; }
   static get style() { return helperTabsCss; }
@@ -38,7 +74,11 @@ const HelperTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "selected": [4],
     "cmsEndpoint": [1, "cms-endpoint"],
     "selectedIndex": [1538, "selected-index"],
-    "tabs": [16]
+    "tabs": [16],
+    "clientStyling": [1, "client-styling"],
+    "clientStylingurl": [1, "client-stylingurl"],
+    "clientStylingUrlContent": [1, "client-styling-url-content"],
+    "limitStylingAppends": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/lottery-bullet2.js

@@ -20,6 +20,15 @@ const LotteryBullet = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
      * Marks if the bullet should be selected
      */
     this.isSelected = false;
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
+    this.limitStylingAppends = false;
     this.select = () => {
       if (this.selectable) {
         this.isSelected = !this.isSelected;
@@ -29,15 +38,41 @@ const LotteryBullet = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         });
       }
     };
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let cssFile = document.createElement('style');
+      setTimeout(() => {
+        cssFile.innerHTML = this.clientStylingUrlContent;
+        this.stylingContainer.prepend(cssFile);
+      }, 1);
+    };
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrlContent)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
   }
   render() {
-    return (h("div", { class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : ''), onClick: () => this.select() }, this.value));
+    return (h("div", { class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : ''), onClick: () => this.select(), ref: el => this.stylingContainer = el }, this.value));
   }
   static get style() { return lotteryBulletCss; }
 }, [1, "lottery-bullet", {
     "value": [1],
     "selectable": [4],
-    "isSelected": [4, "is-selected"]
+    "isSelected": [4, "is-selected"],
+    "clientStyling": [1, "client-styling"],
+    "clientStylingUrlContent": [1, "client-styling-url-content"],
+    "limitStylingAppends": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {