@everymatrix/lottery-grid 0.1.7 → 0.1.20

package/dist/cjs/{index-74b5228f.js → index-fdfc1a6c.js}

@@ -268,6 +268,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') {
@@ -424,6 +430,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();
         }
@@ -542,6 +549,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);
@@ -683,7 +696,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-74b5228f.js');
+const index = require('./index-fdfc1a6c.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([["lottery-bullet_2.cjs",[[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"],"numbers":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{"value":[1],"selectable":[4],"isSelected":[4,"is-selected"]}]]]], options);
+  return index.bootstrapLazy([["lottery-bullet_2.cjs",[[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);
   });
 };
 

package/dist/cjs/lottery-bullet_2.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-74b5228f.js');
+const index = require('./index-fdfc1a6c.js');
 
 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}";
 
@@ -22,6 +22,15 @@ const LotteryBullet = class {
      * 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;
@@ -31,14 +40,37 @@ const LotteryBullet = class {
         });
       }
     };
+    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 (index.h("div", { class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : ''), onClick: () => this.select() }, this.value));
+    return (index.h("div", { class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : ''), onClick: () => this.select(), ref: el => this.stylingContainer = el }, this.value));
   }
 };
 LotteryBullet.style = lotteryBulletCss;
 
-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:25px}";
+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 = class {
   constructor(hostRef) {
@@ -73,8 +105,33 @@ const LotteryGrid = class {
      * 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 = [];
@@ -103,6 +160,17 @@ const LotteryGrid = class {
       });
     }
   }
+  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) {
@@ -193,7 +261,7 @@ const LotteryGrid = class {
     }
   }
   render() {
-    return (index.h("div", { class: "GridContainer" }, index.h("div", { class: "Grid" }, this.numbers.map((item) => index.h("div", null, index.h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected }))))));
+    return (index.h("div", { class: "GridContainer", ref: el => this.stylingContainer = el }, index.h("div", { class: this.gridType === 'ticket' ? 'Grid TicketGrid' : 'Grid' }, this.numbers.map((item) => index.h("div", null, index.h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))))));
   }
 };
 LotteryGrid.style = lotteryGridCss;

package/dist/cjs/lottery-grid.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-74b5228f.js');
+const index = require('./index-fdfc1a6c.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([["lottery-bullet_2.cjs",[[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"],"numbers":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{"value":[1],"selectable":[4],"isSelected":[4,"is-selected"]}]]]], options);
+  return index.bootstrapLazy([["lottery-bullet_2.cjs",[[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);
 });

package/dist/collection/components/lottery-grid/lottery-grid.css

@@ -15,5 +15,8 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  gap: 25px;
+  gap: 20px;
+}
+.Grid.TicketGrid {
+  gap: 5px;
 }

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

@@ -31,8 +31,33 @@ export class LotteryGrid {
      * 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 = [];
@@ -61,6 +86,17 @@ export class LotteryGrid {
       });
     }
   }
+  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) {
@@ -151,9 +187,9 @@ export class LotteryGrid {
     }
   }
   render() {
-    return (h("div", { class: "GridContainer" },
-      h("div", { class: "Grid" }, this.numbers.map((item) => h("div", null,
-        h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected }))))));
+    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 is() { return "lottery-grid"; }
   static get encapsulation() { return "shadow"; }
@@ -340,10 +376,65 @@ export class LotteryGrid {
       },
       "attribute": "grid-index",
       "reflect": false
+    },
+    "gridType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Personalize grid for ticket"
+      },
+      "attribute": "grid-type",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "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 {
-    "numbers": {}
+    "numbers": {},
+    "limitStylingAppends": {}
   }; }
   static get events() { return [{
       "method": "gridFilledEvent",

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") {

package/dist/components/lottery-grid.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } 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:25px}";
+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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -38,8 +38,33 @@ const LotteryGrid$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
      * 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 = [];
@@ -68,6 +93,17 @@ const LotteryGrid$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       });
     }
   }
+  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) {
@@ -158,7 +194,7 @@ const LotteryGrid$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   render() {
-    return (h("div", { class: "GridContainer" }, h("div", { class: "Grid" }, this.numbers.map((item) => h("div", null, h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected }))))));
+    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", {
@@ -172,7 +208,11 @@ const LotteryGrid$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "displaySelected": [4, "display-selected"],
     "language": [1],
     "gridIndex": [2, "grid-index"],
-    "numbers": [32]
+    "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$1() {
   if (typeof customElements === "undefined") {

package/dist/esm/{index-0403f7c1.js → index-61bea74d.js}

@@ -246,6 +246,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 +408,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 +527,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 +674,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-0403f7c1.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-61bea74d.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-bullet_2",[[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"],"numbers":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{"value":[1],"selectable":[4],"isSelected":[4,"is-selected"]}]]]], options);
+  return bootstrapLazy([["lottery-bullet_2",[[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);
   });
 };
 

package/dist/esm/lottery-bullet_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-0403f7c1.js';
+import { r as registerInstance, c as createEvent, h } from './index-61bea74d.js';
 
 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}";
 
@@ -18,6 +18,15 @@ const LotteryBullet = class {
      * 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;
@@ -27,14 +36,37 @@ const LotteryBullet = class {
         });
       }
     };
+    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));
   }
 };
 LotteryBullet.style = lotteryBulletCss;
 
-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:25px}";
+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 = class {
   constructor(hostRef) {
@@ -69,8 +101,33 @@ const LotteryGrid = class {
      * 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 = [];
@@ -99,6 +156,17 @@ const LotteryGrid = class {
       });
     }
   }
+  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) {
@@ -189,7 +257,7 @@ const LotteryGrid = class {
     }
   }
   render() {
-    return (h("div", { class: "GridContainer" }, h("div", { class: "Grid" }, this.numbers.map((item) => h("div", null, h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected }))))));
+    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 }))))));
   }
 };
 LotteryGrid.style = lotteryGridCss;

package/dist/esm/lottery-grid.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-0403f7c1.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-61bea74d.js';
 
 /*
  Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["lottery-bullet_2",[[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"],"numbers":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{"value":[1],"selectable":[4],"isSelected":[4,"is-selected"]}]]]], options);
+  return bootstrapLazy([["lottery-bullet_2",[[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);
 });

package/dist/lottery-grid/lottery-grid.esm.js

@@ -1 +1 @@
-import{p as e,b as l}from"./p-6ed3565e.js";(()=>{const l=import.meta.url,t={};return""!==l&&(t.resourcesUrl=new URL(".",l).href),e(t)})().then((e=>l([["p-d118ba13",[[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"],numbers:[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{value:[1],selectable:[4],isSelected:[4,"is-selected"]}]]]],e)));
+import{p as e,b as t}from"./p-8cd47c11.js";(()=>{const t=import.meta.url,l={};return""!==t&&(l.resourcesUrl=new URL(".",t).href),e(l)})().then((e=>t([["p-f3e1ebfd",[[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]}]]]],e)));

package/dist/lottery-grid/p-8cd47c11.js

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

package/dist/lottery-grid/p-f3e1ebfd.entry.js

@@ -0,0 +1 @@
+import{r as t,c as e,h as s}from"./p-8cd47c11.js";const i=class{constructor(s){t(this,s),this.bulletEvent=e(this,"lotteryBulletSelection",7),this.value="0",this.selectable=!0,this.isSelected=!1,this.clientStyling="",this.clientStylingUrlContent="",this.limitStylingAppends=!1,this.select=()=>{this.selectable&&(this.isSelected=!this.isSelected,this.bulletEvent.emit({value:this.value,selected:this.isSelected}))},this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)},this.setClientStylingURL=()=>{let t=document.createElement("style");setTimeout((()=>{t.innerHTML=this.clientStylingUrlContent,this.stylingContainer.prepend(t)}),1)}}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrlContent&&this.setClientStylingURL(),this.limitStylingAppends=!0)}render(){return s("div",{class:"Circle "+(this.selectable?"":"Disabled")+(this.isSelected?"Selected":""),onClick:()=>this.select(),ref:t=>this.stylingContainer=t},this.value)}};i.style='@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 r=class{constructor(s){t(this,s),this.gridFilledEvent=e(this,"gridFilled",7),this.gridDirtyEvent=e(this,"gridDirty",7),this.totalNumbers=0,this.maximumAllowed=0,this.minimumAllowed=1,this.selectable=!0,this.selectedNumbers="",this.displaySelected=!1,this.language="en",this.gridType="",this.clientStyling="",this.clientStylingUrlContent="",this.numbers=[],this.limitStylingAppends=!1,this.selectedCounter=0,this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)},this.setClientStylingURL=()=>{let t=document.createElement("style");setTimeout((()=>{t.innerHTML=this.clientStylingUrlContent,this.stylingContainer.prepend(t)}),1)}}connectedCallback(){let t=[];this.selectedNumbers.length>0&&(t=this.selectedNumbers.split(","),this.selectedCounter=t.length),this.displaySelected?t.forEach((t=>{this.numbers.push({number:t,selected:!0,selectable:this.selectable})})):[...Array(this.totalNumbers).keys()].map((t=>(t+1).toString())).forEach((e=>{this.numbers.push({number:e,selected:t.indexOf(e)>=0,selectable:this.selectedCounter!=this.maximumAllowed&&this.selectable})}))}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrlContent&&this.setClientStylingURL(),this.limitStylingAppends=!0)}lotteryBulletSelectionHandler(t){this.numbers=this.numbers.map((e=>e.number==t.detail.value?{number:e.number,selected:t.detail.selected,selectable:e.selectable}:{number:e.number,selected:e.selected,selectable:e.selectable})),t.detail.selected?(this.selectedCounter+=1,this.selectedCounter==this.maximumAllowed&&(this.numbers=this.numbers.map((t=>({number:t.number,selected:t.selected,selectable:!!t.selected}))),this.gridFilledEvent.emit({id:this.ticketId,index:this.gridIndex,selectedNumbers:this.numbers.filter((t=>t.selected)).map((t=>t.number))}))):(this.selectedCounter==this.maximumAllowed&&(this.numbers=this.numbers.map((t=>({number:t.number,selected:t.selected,selectable:!0}))),this.gridDirtyEvent.emit({id:this.ticketId,index:this.gridIndex,selectedNumbers:this.numbers.filter((t=>t.selected)).map((t=>t.number))})),this.selectedCounter-=1)}async resetSelectionHandler(t){t.detail&&t.detail==this.ticketId&&(this.selectedCounter=0,this.numbers=this.numbers.map((t=>({number:t.number,selected:!1,selectable:this.selectable}))),this.gridDirtyEvent.emit({id:this.ticketId,index:this.gridIndex,selectedNumbers:this.numbers.filter((t=>t.selected)).map((t=>t.number))}))}async autoSelectionHandler(t){if(t.detail&&t.detail==this.ticketId){this.resetSelectionHandler(t);let e=[...Array(this.totalNumbers).keys()].map((t=>t+1)).sort((()=>.5-Math.random()));e=e.slice(0,this.minimumAllowed),this.numbers=this.numbers.map((t=>({number:t.number,selected:e.indexOf(parseInt(t.number,10))>=0,selectable:e.indexOf(parseInt(t.number,10))>=0}))),this.gridFilledEvent.emit({id:this.ticketId,index:this.gridIndex,selectedNumbers:this.numbers.filter((t=>t.selected)).map((t=>t.number))}),this.selectedCounter=this.maximumAllowed}}render(){return s("div",{class:"GridContainer",ref:t=>this.stylingContainer=t},s("div",{class:"ticket"===this.gridType?"Grid TicketGrid":"Grid"},this.numbers.map((t=>s("div",null,s("lottery-bullet",{value:t.number,selectable:t.selectable,"is-selected":t.selected,"client-styling":this.clientStyling,"client-styling-url-content":this.clientStylingUrlContent}))))))}};r.style='@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}';export{i as lottery_bullet,r as lottery_grid}

package/dist/types/components/lottery-grid/lottery-grid.d.ts

@@ -42,8 +42,22 @@ export declare class LotteryGrid {
    * The index of the number
    */
   gridIndex: number;
+  /**
+   * Personalize grid for ticket
+   */
+  gridType: string;
+  /**
+   * Client custom styling via string
+   */
+  clientStyling: string;
+  /**
+   * Client custom styling via url content
+   */
+  clientStylingUrlContent: string;
   numbers: Array<GridNumbers>;
+  private limitStylingAppends;
   private selectedCounter;
+  private stylingContainer;
   /**
    * When the grid is completed, it emits this event with selected numbers
    */
@@ -53,6 +67,9 @@ export declare class LotteryGrid {
    */
   gridDirtyEvent: EventEmitter<GridEvent>;
   connectedCallback(): void;
+  componentDidRender(): void;
+  setClientStyling: () => void;
+  setClientStylingURL: () => void;
   lotteryBulletSelectionHandler(event: CustomEvent<BulletEvent>): void;
   resetSelectionHandler(event: any): Promise<void>;
   autoSelectionHandler(event: any): Promise<void>;

package/dist/types/components.d.ts

@@ -8,6 +8,14 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { GridEvent } from "./components/lottery-grid/lottery-grid.types";
 export namespace Components {
     interface LotteryGrid {
+        /**
+          * Client custom styling via string
+         */
+        "clientStyling": string;
+        /**
+          * Client custom styling via url content
+         */
+        "clientStylingUrlContent": string;
         /**
           * Show only selected numbers
          */
@@ -20,6 +28,10 @@ export namespace Components {
           * The index of the number
          */
         "gridIndex": number;
+        /**
+          * Personalize grid for ticket
+         */
+        "gridType": string;
         /**
           * Language
          */
@@ -63,6 +75,14 @@ declare global {
 }
 declare namespace LocalJSX {
     interface LotteryGrid {
+        /**
+          * Client custom styling via string
+         */
+        "clientStyling"?: string;
+        /**
+          * Client custom styling via url content
+         */
+        "clientStylingUrlContent"?: string;
         /**
           * Show only selected numbers
          */
@@ -75,6 +95,10 @@ declare namespace LocalJSX {
           * The index of the number
          */
         "gridIndex"?: number;
+        /**
+          * Personalize grid for ticket
+         */
+        "gridType"?: string;
         /**
           * Language
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/lottery-grid",
-  "version": "0.1.7",
+  "version": "0.1.20",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",
@@ -15,5 +15,8 @@
   ],
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "@everymatrix/lottery-bullet": "*"
   }
 }

package/dist/lottery-grid/p-6ed3565e.js

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

package/dist/lottery-grid/p-d118ba13.entry.js

@@ -1 +0,0 @@
-import{r as e,c as t,h as s}from"./p-6ed3565e.js";const i=class{constructor(s){e(this,s),this.bulletEvent=t(this,"lotteryBulletSelection",7),this.value="0",this.selectable=!0,this.isSelected=!1,this.select=()=>{this.selectable&&(this.isSelected=!this.isSelected,this.bulletEvent.emit({value:this.value,selected:this.isSelected}))}}render(){return s("div",{class:"Circle "+(this.selectable?"":"Disabled")+(this.isSelected?"Selected":""),onClick:()=>this.select()},this.value)}};i.style='@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 r=class{constructor(s){e(this,s),this.gridFilledEvent=t(this,"gridFilled",7),this.gridDirtyEvent=t(this,"gridDirty",7),this.totalNumbers=0,this.maximumAllowed=0,this.minimumAllowed=1,this.selectable=!0,this.selectedNumbers="",this.displaySelected=!1,this.language="en",this.numbers=[],this.selectedCounter=0}connectedCallback(){let e=[];this.selectedNumbers.length>0&&(e=this.selectedNumbers.split(","),this.selectedCounter=e.length),this.displaySelected?e.forEach((e=>{this.numbers.push({number:e,selected:!0,selectable:this.selectable})})):[...Array(this.totalNumbers).keys()].map((e=>(e+1).toString())).forEach((t=>{this.numbers.push({number:t,selected:e.indexOf(t)>=0,selectable:this.selectedCounter!=this.maximumAllowed&&this.selectable})}))}lotteryBulletSelectionHandler(e){this.numbers=this.numbers.map((t=>t.number==e.detail.value?{number:t.number,selected:e.detail.selected,selectable:t.selectable}:{number:t.number,selected:t.selected,selectable:t.selectable})),e.detail.selected?(this.selectedCounter+=1,this.selectedCounter==this.maximumAllowed&&(this.numbers=this.numbers.map((e=>({number:e.number,selected:e.selected,selectable:!!e.selected}))),this.gridFilledEvent.emit({id:this.ticketId,index:this.gridIndex,selectedNumbers:this.numbers.filter((e=>e.selected)).map((e=>e.number))}))):(this.selectedCounter==this.maximumAllowed&&(this.numbers=this.numbers.map((e=>({number:e.number,selected:e.selected,selectable:!0}))),this.gridDirtyEvent.emit({id:this.ticketId,index:this.gridIndex,selectedNumbers:this.numbers.filter((e=>e.selected)).map((e=>e.number))})),this.selectedCounter-=1)}async resetSelectionHandler(e){e.detail&&e.detail==this.ticketId&&(this.selectedCounter=0,this.numbers=this.numbers.map((e=>({number:e.number,selected:!1,selectable:this.selectable}))),this.gridDirtyEvent.emit({id:this.ticketId,index:this.gridIndex,selectedNumbers:this.numbers.filter((e=>e.selected)).map((e=>e.number))}))}async autoSelectionHandler(e){if(e.detail&&e.detail==this.ticketId){this.resetSelectionHandler(e);let t=[...Array(this.totalNumbers).keys()].map((e=>e+1)).sort((()=>.5-Math.random()));t=t.slice(0,this.minimumAllowed),this.numbers=this.numbers.map((e=>({number:e.number,selected:t.indexOf(parseInt(e.number,10))>=0,selectable:t.indexOf(parseInt(e.number,10))>=0}))),this.gridFilledEvent.emit({id:this.ticketId,index:this.gridIndex,selectedNumbers:this.numbers.filter((e=>e.selected)).map((e=>e.number))}),this.selectedCounter=this.maximumAllowed}}render(){return s("div",{class:"GridContainer"},s("div",{class:"Grid"},this.numbers.map((e=>s("div",null,s("lottery-bullet",{value:e.number,selectable:e.selectable,"is-selected":e.selected}))))))}};r.style='@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:25px}';export{i as lottery_bullet,r as lottery_grid}