@everymatrix/lottery-ticket 0.1.6 → 0.1.20

package/dist/collection/components/lottery-ticket/lottery-ticket.js

@@ -23,6 +23,14 @@ export class LotteryTicket {
      * Language
      */
     this.language = 'en';
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
     this.multiplier = false;
     this.numberOfDraws = 1;
     this.isLoading = true;
@@ -30,6 +38,19 @@ export class LotteryTicket {
     this.ticketDone = false;
     this.isCustomSelect = false;
     this.amountInfo = {};
+    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 find a better way to implement click outside the custom select, so that we don't have to use the 'data-cluster' attribute on each element
@@ -63,6 +84,17 @@ export class LotteryTicket {
       console.error('Error!', err);
     });
   }
+  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
+  }
   multiplierChangeHandler(e) {
     this.multiplier = e.target ? e.target.checked : false;
     this.multiplierChange.emit(this.multiplier);
@@ -113,7 +145,7 @@ export class LotteryTicket {
       }
       else {
         const { rules } = this.gameData;
-        return (h("div", { class: "TicketContainer" },
+        return (h("div", { class: "TicketContainer", ref: el => this.stylingContainer = el },
           h("p", { class: "TicketTitle" }, this.gameData.name),
           this.resetButton && this.ticketDone &&
             h("div", { class: "ButtonContainer" },
@@ -126,7 +158,7 @@ export class LotteryTicket {
               translate('grid', this.language),
               " ",
               item),
-            h("lottery-grid", { "grid-index": index, "maximum-allowed": rules.boards[index].maximumAllowed, "minimum-allowed": rules.boards[index].minimumAllowed, "total-numbers": rules.boards[index].totalNumbers, selectable: true, "reset-button": true, "auto-pick": true, "game-id": this.gameId, "ticket-id": this.ticketId, language: this.language }))),
+            h("lottery-grid", { "grid-index": index, "maximum-allowed": rules.boards[index].maximumAllowed, "minimum-allowed": rules.boards[index].minimumAllowed, "total-numbers": rules.boards[index].totalNumbers, selectable: true, "reset-button": true, "auto-pick": true, "game-id": this.gameId, "ticket-id": this.ticketId, language: this.language, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))),
           rules.multiplier &&
             h("div", null,
               h("label", { class: "Toggle" },
@@ -315,6 +347,42 @@ export class LotteryTicket {
       "attribute": "language",
       "reflect": false,
       "defaultValue": "'en'"
+    },
+    "clientStyling": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via string"
+      },
+      "attribute": "client-styling",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "clientStylingUrlContent": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via url content"
+      },
+      "attribute": "client-styling-url-content",
+      "reflect": false,
+      "defaultValue": "''"
     }
   }; }
   static get states() { return {
@@ -324,7 +392,8 @@ export class LotteryTicket {
     "hasErrors": {},
     "ticketDone": {},
     "isCustomSelect": {},
-    "amountInfo": {}
+    "amountInfo": {},
+    "limitStylingAppends": {}
   }; }
   static get events() { return [{
       "method": "ticketCompleted",

package/dist/components/lottery-bullet.js

@@ -0,0 +1,6 @@
+import { L as LotteryBullet$1, d as defineCustomElement$1 } from './lottery-bullet2.js';
+
+const LotteryBullet = LotteryBullet$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LotteryBullet, defineCustomElement };

package/dist/components/lottery-bullet2.js

@@ -0,0 +1,91 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const lotteryBulletCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}@-webkit-keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.22) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.2) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@-webkit-keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}.Circle{-webkit-animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;cursor:pointer;color:#000000;display:block;height:30px;width:30px;margin:0;display:flex;align-items:center;justify-content:center;justify-content:center;align-items:center;border:solid 2px #ffffff;background:radial-gradient(circle at top, white 0%, white 100%);font-weight:bold;border-radius:50%;box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.5);user-select:none;font-size:16px;line-height:16px;font-weight:600;position:relative}.Circle:hover{-webkit-animation:hover-rotate 0.4s linear both;animation:hover-rotate 0.4s linear both;background:radial-gradient(circle at top, white 0%, #f1f1f1 100%)}.Circle.Selected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #00958f}.Circle.Disabled{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#D4D4D4;border:solid 2px #D4D4D4;cursor:default}.Circle.DisabledSelected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #D4D4D4;cursor:default}";
+
+const LotteryBullet = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.bulletEvent = createEvent(this, "lotteryBulletSelection", 7);
+    /**
+     * Value of the bullet
+     */
+    this.value = '0';
+    /**
+     * Marks if the bullet should be selectable
+     */
+    this.selectable = true;
+    /**
+     * 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;
+        this.bulletEvent.emit({
+          value: this.value,
+          selected: this.isSelected
+        });
+      }
+    };
+    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(), ref: el => this.stylingContainer = el }, this.value));
+  }
+  static get style() { return lotteryBulletCss; }
+}, [1, "lottery-bullet", {
+    "value": [1],
+    "selectable": [4],
+    "isSelected": [4, "is-selected"],
+    "clientStyling": [1, "client-styling"],
+    "clientStylingUrlContent": [1, "client-styling-url-content"],
+    "limitStylingAppends": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["lottery-bullet"];
+  components.forEach(tagName => { switch (tagName) {
+    case "lottery-bullet":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, LotteryBullet);
+      }
+      break;
+  } });
+}
+
+export { LotteryBullet as L, defineCustomElement as d };

package/dist/components/lottery-grid.js

@@ -0,0 +1,6 @@
+import { L as LotteryGrid$1, d as defineCustomElement$1 } from './lottery-grid2.js';
+
+const LotteryGrid = LotteryGrid$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LotteryGrid, defineCustomElement };

package/dist/components/lottery-grid2.js

@@ -0,0 +1,236 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './lottery-bullet2.js';
+
+const lotteryGridCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.GridContainer{display:flex;flex-direction:column;max-width:1200px}.Grid{margin-top:10px 0 10px 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px}.Grid.TicketGrid{gap:5px}";
+
+const LotteryGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.gridFilledEvent = createEvent(this, "gridFilled", 7);
+    this.gridDirtyEvent = createEvent(this, "gridDirty", 7);
+    /**
+     * Number of bullets of grid
+     */
+    this.totalNumbers = 0;
+    /**
+     * Number of maximum bullets that can be selected
+     */
+    this.maximumAllowed = 0;
+    /**
+     * Minimum allowed of bullets
+     */
+    this.minimumAllowed = 1;
+    /**
+     * Allows the user to select numbers on the grid
+     */
+    this.selectable = true;
+    /**
+     * Numbers that should be showed as selected on the grid (as a string of those numbers e.g. '1,2,3,4,5,6')
+     */
+    this.selectedNumbers = '';
+    /**
+     * Show only selected numbers
+     */
+    this.displaySelected = false;
+    /**
+     * Language
+     */
+    this.language = 'en';
+    /**
+     * Personalize grid for ticket
+     */
+    this.gridType = '';
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
+    this.numbers = [];
+    this.limitStylingAppends = false;
+    this.selectedCounter = 0;
+    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() {
+    let selected = [];
+    if (this.selectedNumbers.length > 0) {
+      selected = this.selectedNumbers.split(',');
+      this.selectedCounter = selected.length;
+    }
+    if (this.displaySelected) {
+      selected.forEach((item) => {
+        this.numbers.push({
+          number: item,
+          selected: true,
+          selectable: this.selectable
+        });
+      });
+    }
+    else {
+      [...Array(this.totalNumbers).keys()]
+        .map(number => (number + 1).toString())
+        .forEach((number) => {
+        this.numbers.push({
+          number,
+          selected: selected.indexOf(number) >= 0 ? true : false,
+          selectable: this.selectedCounter == this.maximumAllowed ? false : this.selectable
+        });
+      });
+    }
+  }
+  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
+  }
+  lotteryBulletSelectionHandler(event) {
+    this.numbers = this.numbers.map((item) => {
+      if (item.number == event.detail.value) {
+        return {
+          number: item.number,
+          selected: event.detail.selected,
+          selectable: item.selectable
+        };
+      }
+      return {
+        number: item.number,
+        selected: item.selected,
+        selectable: item.selectable
+      };
+    });
+    if (event.detail.selected) {
+      this.selectedCounter += 1;
+      if (this.selectedCounter == this.maximumAllowed) {
+        this.numbers = this.numbers.map((item) => {
+          return {
+            number: item.number,
+            selected: item.selected,
+            selectable: item.selected ? true : false
+          };
+        });
+        this.gridFilledEvent.emit({
+          id: this.ticketId,
+          index: this.gridIndex,
+          selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+        });
+      }
+    }
+    else {
+      if (this.selectedCounter == this.maximumAllowed) {
+        this.numbers = this.numbers.map((item) => {
+          return {
+            number: item.number,
+            selected: item.selected,
+            selectable: true
+          };
+        });
+        this.gridDirtyEvent.emit({
+          id: this.ticketId,
+          index: this.gridIndex,
+          selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+        });
+      }
+      this.selectedCounter -= 1;
+    }
+  }
+  async resetSelectionHandler(event) {
+    if (event.detail && event.detail == this.ticketId) {
+      this.selectedCounter = 0;
+      this.numbers = this.numbers.map((item) => {
+        return {
+          number: item.number,
+          selected: false,
+          selectable: this.selectable
+        };
+      });
+      this.gridDirtyEvent.emit({
+        id: this.ticketId,
+        index: this.gridIndex,
+        selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+      });
+    }
+  }
+  async autoSelectionHandler(event) {
+    if (event.detail && event.detail == this.ticketId) {
+      this.resetSelectionHandler(event);
+      let array = [...Array(this.totalNumbers).keys()]
+        .map(number => number + 1)
+        .sort(() => 0.5 - Math.random());
+      array = array.slice(0, this.minimumAllowed);
+      this.numbers = this.numbers.map((item) => {
+        return {
+          number: item.number,
+          selected: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,
+          selectable: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,
+        };
+      });
+      this.gridFilledEvent.emit({
+        id: this.ticketId,
+        index: this.gridIndex,
+        selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+      });
+      this.selectedCounter = this.maximumAllowed;
+    }
+  }
+  render() {
+    return (h("div", { class: "GridContainer", ref: el => this.stylingContainer = el }, h("div", { class: this.gridType === 'ticket' ? 'Grid TicketGrid' : 'Grid' }, this.numbers.map((item) => h("div", null, h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))))));
+  }
+  static get style() { return lotteryGridCss; }
+}, [1, "lottery-grid", {
+    "ticketId": [2, "ticket-id"],
+    "totalNumbers": [2, "total-numbers"],
+    "gameId": [1, "game-id"],
+    "maximumAllowed": [2, "maximum-allowed"],
+    "minimumAllowed": [2, "minimum-allowed"],
+    "selectable": [4],
+    "selectedNumbers": [1, "selected-numbers"],
+    "displaySelected": [4, "display-selected"],
+    "language": [1],
+    "gridIndex": [2, "grid-index"],
+    "gridType": [1, "grid-type"],
+    "clientStyling": [1, "client-styling"],
+    "clientStylingUrlContent": [1, "client-styling-url-content"],
+    "numbers": [32],
+    "limitStylingAppends": [32]
+  }, [[0, "lotteryBulletSelection", "lotteryBulletSelectionHandler"], [4, "resetSelection", "resetSelectionHandler"], [4, "autoSelection", "autoSelectionHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["lottery-grid", "lottery-bullet"];
+  components.forEach(tagName => { switch (tagName) {
+    case "lottery-grid":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, LotteryGrid);
+      }
+      break;
+    case "lottery-bullet":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { LotteryGrid as L, defineCustomElement as d };

package/dist/components/lottery-ticket.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import '@everymatrix/lottery-grid';
+import { d as defineCustomElement$3 } from './lottery-bullet2.js';
+import { d as defineCustomElement$2 } from './lottery-grid2.js';
 
 const DEFAULT_LANGUAGE = 'en';
 const SUPPORTED_LANGUAGES = ['ro', 'en'];
@@ -62,6 +63,14 @@ const LotteryTicket$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
      * Language
      */
     this.language = 'en';
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
     this.multiplier = false;
     this.numberOfDraws = 1;
     this.isLoading = true;
@@ -69,6 +78,19 @@ const LotteryTicket$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.ticketDone = false;
     this.isCustomSelect = false;
     this.amountInfo = {};
+    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 find a better way to implement click outside the custom select, so that we don't have to use the 'data-cluster' attribute on each element
@@ -102,6 +124,17 @@ const LotteryTicket$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       console.error('Error!', err);
     });
   }
+  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
+  }
   multiplierChangeHandler(e) {
     this.multiplier = e.target ? e.target.checked : false;
     this.multiplierChange.emit(this.multiplier);
@@ -150,9 +183,9 @@ const LotteryTicket$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       }
       else {
         const { rules } = this.gameData;
-        return (h("div", { class: "TicketContainer" }, h("p", { class: "TicketTitle" }, this.gameData.name), this.resetButton && this.ticketDone &&
+        return (h("div", { class: "TicketContainer", ref: el => this.stylingContainer = el }, h("p", { class: "TicketTitle" }, this.gameData.name), this.resetButton && this.ticketDone &&
           h("div", { class: "ButtonContainer" }, h("a", { class: "ResetButton", onClick: () => this.toggleResetSelection() }, translate('resetButton', this.language))), this.autoPick && !this.ticketDone &&
-          h("div", { class: "ButtonContainer" }, h("a", { class: "AutoButton", onClick: () => this.toggleAutoSelection() }, translate('autoButton', this.language))), this.grids.map((item, index) => h("div", { class: "TicketGridBullets" }, h("p", { class: "TicketGridTitle" }, translate('grid', this.language), " ", item), h("lottery-grid", { "grid-index": index, "maximum-allowed": rules.boards[index].maximumAllowed, "minimum-allowed": rules.boards[index].minimumAllowed, "total-numbers": rules.boards[index].totalNumbers, selectable: true, "reset-button": true, "auto-pick": true, "game-id": this.gameId, "ticket-id": this.ticketId, language: this.language }))), rules.multiplier &&
+          h("div", { class: "ButtonContainer" }, h("a", { class: "AutoButton", onClick: () => this.toggleAutoSelection() }, translate('autoButton', this.language))), this.grids.map((item, index) => h("div", { class: "TicketGridBullets" }, h("p", { class: "TicketGridTitle" }, translate('grid', this.language), " ", item), h("lottery-grid", { "grid-index": index, "maximum-allowed": rules.boards[index].maximumAllowed, "minimum-allowed": rules.boards[index].minimumAllowed, "total-numbers": rules.boards[index].totalNumbers, selectable: true, "reset-button": true, "auto-pick": true, "game-id": this.gameId, "ticket-id": this.ticketId, language: this.language, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))), rules.multiplier &&
           h("div", null, h("label", { class: "Toggle" }, h("label", { class: "Label" }, translate('multiplier', this.language), ": "), h("input", { class: "ToggleCheckbox", type: "checkbox", onInput: (e) => this.multiplierChangeHandler(e) }), h("div", { class: "ToggleSwitch" }))), this.multipleDraws &&
           h("div", { class: "TicketDraws" }, h("label", { class: "Label" }, translate('numberOfDraws', this.language), ": "), h("div", { class: "NumberInput" }, h("button", { onClick: () => this.numberOfDraws > 1 ? this.numberOfDraws-- : this.numberOfDraws = 1, class: "Minus" }, "-"), h("input", { class: "InputDefault", min: "1", value: this.numberOfDraws, type: "number" }), h("button", { onClick: () => this.numberOfDraws++, class: "Plus" }, "+"))), h("div", null, h("label", { class: "Label" }, translate('wagerPerDraw', this.language), ": "), h("div", { class: "WagerInput" }, rules.stakes.length > 1 ?
           (h("div", { "data-cluster": "SelectComponent", class: this.isCustomSelect ? "SelectWrapper SelectActive" : "SelectWrapper" }, h("div", { "data-cluster": "SelectComponent", class: "SelectButton", onClick: () => this.toggleClass() }, h("span", { "data-cluster": "SelectComponent" }, this.amountInfo.amount, " ", this.amountInfo.currency), h("span", { "data-cluster": "SelectComponent", class: "SelectExpand" }, "\u25BC")), h("div", { "data-cluster": "SelectComponent", class: "SelectContent" }, h("ul", { "data-cluster": "SelectComponent", class: "SelectOptions" }, rules.stakes.map((item) => h("li", { "data-cluster": "SelectComponent", class: this.amountInfo.amount == item.amount ? 'SelectedValue' : '', value: item.amount, onClick: () => this.setDropdownItem(item) }, item.amount, " ", item.currency)))))) : (h("div", null, h("input", { min: "1", value: rules.stakes[0].amount, type: "number", disabled: true }), h("p", { class: "WagerInputTitle" }, rules.stakes[0].currency)))))));
@@ -172,28 +205,40 @@ const LotteryTicket$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "resetButton": [4, "reset-button"],
     "autoPick": [4, "auto-pick"],
     "language": [1],
+    "clientStyling": [1, "client-styling"],
+    "clientStylingUrlContent": [1, "client-styling-url-content"],
     "multiplier": [32],
     "numberOfDraws": [32],
     "isLoading": [32],
     "hasErrors": [32],
     "ticketDone": [32],
     "isCustomSelect": [32],
-    "amountInfo": [32]
+    "amountInfo": [32],
+    "limitStylingAppends": [32]
   }, [[8, "click", "checkForClickOutside"], [0, "gridFilled", "gridFilledHandler"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["lottery-ticket"];
+  const components = ["lottery-ticket", "lottery-bullet", "lottery-grid"];
   components.forEach(tagName => { switch (tagName) {
     case "lottery-ticket":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, LotteryTicket$1);
       }
       break;
+    case "lottery-bullet":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "lottery-grid":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
   } });
 }
-defineCustomElement$1();
 
 const LotteryTicket = LotteryTicket$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/esm/{index-7f2eb2db.js → index-7790b5a7.js}

@@ -53,6 +53,8 @@ const hostListenerProxy = (hostRef, methodName) => (ev) => {
     }
 };
 const getHostListenerTarget = (elm, flags) => {
+    if (flags & 4 /* TargetDocument */)
+        return doc;
     if (flags & 8 /* TargetWindow */)
         return win;
     return elm;
@@ -246,6 +248,12 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
             classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
         }
+        else if (memberName === 'ref') {
+            // minifier will clean this up
+            if (newValue) {
+                newValue(elm);
+            }
+        }
         else if ((!isProp ) &&
             memberName[0] === 'o' &&
             memberName[1] === 'n') {
@@ -402,6 +410,7 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
     for (; startIdx <= endIdx; ++startIdx) {
         if ((vnode = vnodes[startIdx])) {
             elm = vnode.$elm$;
+            callNodeRefs(vnode);
             // remove the vnode's element from the dom
             elm.remove();
         }
@@ -520,6 +529,12 @@ const patch = (oldVNode, newVNode) => {
         elm.data = text;
     }
 };
+const callNodeRefs = (vNode) => {
+    {
+        vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
+        vNode.$children$ && vNode.$children$.map(callNodeRefs);
+    }
+};
 const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
@@ -661,7 +676,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-7f2eb2db.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-7790b5a7.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([["lottery-ticket",[[1,"lottery-ticket",{"endpoint":[1],"gameId":[1,"game-id"],"numberOfGrids":[2,"number-of-grids"],"multipleDraws":[4,"multiple-draws"],"ticketId":[2,"ticket-id"],"resetButton":[4,"reset-button"],"autoPick":[4,"auto-pick"],"language":[1],"multiplier":[32],"numberOfDraws":[32],"isLoading":[32],"hasErrors":[32],"ticketDone":[32],"isCustomSelect":[32],"amountInfo":[32]},[[8,"click","checkForClickOutside"],[0,"gridFilled","gridFilledHandler"]]]]]], options);
+  return bootstrapLazy([["lottery-bullet_3",[[1,"lottery-ticket",{"endpoint":[1],"gameId":[1,"game-id"],"numberOfGrids":[2,"number-of-grids"],"multipleDraws":[4,"multiple-draws"],"ticketId":[2,"ticket-id"],"resetButton":[4,"reset-button"],"autoPick":[4,"auto-pick"],"language":[1],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"multiplier":[32],"numberOfDraws":[32],"isLoading":[32],"hasErrors":[32],"ticketDone":[32],"isCustomSelect":[32],"amountInfo":[32],"limitStylingAppends":[32]},[[8,"click","checkForClickOutside"],[0,"gridFilled","gridFilledHandler"]]],[1,"lottery-grid",{"ticketId":[2,"ticket-id"],"totalNumbers":[2,"total-numbers"],"gameId":[1,"game-id"],"maximumAllowed":[2,"maximum-allowed"],"minimumAllowed":[2,"minimum-allowed"],"selectable":[4],"selectedNumbers":[1,"selected-numbers"],"displaySelected":[4,"display-selected"],"language":[1],"gridIndex":[2,"grid-index"],"gridType":[1,"grid-type"],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"numbers":[32],"limitStylingAppends":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{"value":[1],"selectable":[4],"isSelected":[4,"is-selected"],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
   });
 };