@everymatrix/lottery-grid 1.52.6 → 1.53.0

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["lottery-bullet_2.cjs",[[1,"lottery-grid",{"ticketId":[514,"ticket-id"],"totalNumbers":[514,"total-numbers"],"gameId":[513,"game-id"],"maximumAllowed":[514,"maximum-allowed"],"minimumAllowed":[514,"minimum-allowed"],"selectable":[516],"selectedNumbers":[513,"selected-numbers"],"displaySelected":[516,"display-selected"],"language":[513],"gridIndex":[514,"grid-index"],"gridType":[513,"grid-type"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"numbers":[32],"limitStylingAppends":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{"value":[513],"selectable":[516],"isSelected":[516,"is-selected"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["lottery-bullet_2.cjs",[[1,"lottery-grid",{"ticketId":[514,"ticket-id"],"totalNumbers":[514,"total-numbers"],"gameId":[513,"game-id"],"maximumAllowed":[514,"maximum-allowed"],"minimumAllowed":[514,"minimum-allowed"],"numberRange":[513,"number-range"],"selectable":[516],"selectedNumbers":[513,"selected-numbers"],"secondaryNumbers":[513,"secondary-numbers"],"displaySelected":[516,"display-selected"],"language":[513],"gridIndex":[514,"grid-index"],"gridType":[513,"grid-type"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"highNumber":[514,"high-number"],"lowNumber":[514,"low-number"],"selectionType":[513,"selection-type"],"partialQuickpickAvailable":[516,"partial-quickpick-available"],"numbers":[32],"bonusNumbers":[32],"limitStylingAppends":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{"value":[513],"selectable":[516],"isSelected":[516,"is-selected"],"isBonus":[516,"is-bonus"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-8b26cfcb.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, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 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, rgb(255, 255, 255) 0%, rgb(241, 241, 241) 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 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:var(--emw--button-text-color, #000);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 var(--emw--color-gray-transparency-100, rgb(255, 255, 255));background:radial-gradient(circle at top, var(--emw--color-gray-transparency-100, rgb(255, 255, 255)) 0%, var(--emw--color-gray-transparency-100, rgb(255, 255, 255)) 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, var(--emw--color-gray-transparency-100, rgb(255, 255, 255)) 0%, var(--emw--color-gray-50, #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:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));background:var(--emw--color-primary, #9EC258);background:-webkit-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:-moz-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:radial-gradient(circle at top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));border:solid 2px var(--emw--button-border-color, #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:var(--emw--color-gray-50, #F1F1F1);background:var(--emw--color-gray-100, #D4D4D4);border:solid 2px var(--emw--color-gray-100, #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:var(--emw--color-gray-50, #F1F1F1);background:var(--emw--color-primary, #9EC258);background:-webkit-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:-moz-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:radial-gradient(circle at top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));border:solid 2px var(--emw--color-gray-100, #D4D4D4);cursor:default}.Circle.Bonus{background:var(--emw--color-error, #FF3D00)}";
 const LotteryBulletStyle0 = lotteryBulletCss;
 
 const LotteryBullet = class {
@@ -35,6 +35,7 @@ const LotteryBullet = class {
         this.value = '0';
         this.selectable = true;
         this.isSelected = false;
+        this.isBonus = false;
         this.clientStyling = '';
         this.clientStylingUrlContent = '';
         this.limitStylingAppends = false;
@@ -51,7 +52,7 @@ const LotteryBullet = class {
         // end custom styling area
     }
     render() {
-        return (index.h("div", { key: 'af3601684ecf1f39d65fc9461430cba96b9e4b8c', class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : ''), onClick: () => this.select(), ref: el => this.stylingContainer = el }, this.value));
+        return (index.h("div", { key: 'a21cbee8f556bfbbe9f97be5f44bfc08b6f24dd6', class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : '') + (this.isBonus ? ' Bonus' : ''), onClick: () => this.select(), ref: el => this.stylingContainer = el }, this.value));
     }
 };
 LotteryBullet.style = LotteryBulletStyle0;
@@ -64,6 +65,7 @@ const LotteryGrid = class {
         index.registerInstance(this, hostRef);
         this.gridFilledEvent = index.createEvent(this, "gridFilled", 7);
         this.gridDirtyEvent = index.createEvent(this, "gridDirty", 7);
+        this.gridClearAllEvent = index.createEvent(this, "gridClearAllEvent", 7);
         this.selectedCounter = 0;
         this.setClientStyling = () => {
             let sheet = document.createElement('style');
@@ -80,17 +82,24 @@ const LotteryGrid = class {
         this.ticketId = undefined;
         this.totalNumbers = 0;
         this.gameId = undefined;
-        this.maximumAllowed = 0;
-        this.minimumAllowed = 1;
+        this.maximumAllowed = 7;
+        this.minimumAllowed = 3;
+        this.numberRange = undefined;
         this.selectable = true;
         this.selectedNumbers = '';
+        this.secondaryNumbers = '';
         this.displaySelected = false;
         this.language = 'en';
         this.gridIndex = undefined;
         this.gridType = '';
         this.clientStyling = '';
         this.clientStylingUrlContent = '';
+        this.highNumber = 47;
+        this.lowNumber = 1;
+        this.selectionType = 'mainSelection';
+        this.partialQuickpickAvailable = false;
         this.numbers = [];
+        this.bonusNumbers = [];
         this.limitStylingAppends = false;
     }
     connectedCallback() {
@@ -99,6 +108,15 @@ const LotteryGrid = class {
             selected = this.selectedNumbers.split(',');
             this.selectedCounter = selected.length;
         }
+        if (this.secondaryNumbers.length > 0) {
+            this.bonusNumbers = this.secondaryNumbers.split(',').map(item => {
+                return {
+                    number: item,
+                    selected: true,
+                    selectable: this.selectable
+                };
+            });
+        }
         if (this.displaySelected) {
             selected.forEach((item) => {
                 this.numbers.push({
@@ -109,9 +127,8 @@ const LotteryGrid = class {
             });
         }
         else {
-            [...Array(this.totalNumbers).keys()]
-                .map(number => (number + 1).toString())
-                .forEach((number) => {
+            let gridNumbers = Array.from({ length: this.highNumber - this.lowNumber + 1 }, (_, index) => this.lowNumber + index);
+            gridNumbers.map(number => number.toString()).forEach((number) => {
                 this.numbers.push({
                     number,
                     selected: selected.indexOf(number) >= 0 ? true : false,
@@ -142,56 +159,81 @@ const LotteryGrid = class {
     }
     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,
+                selected: item.number == event.detail.value ? event.detail.selected : item.selected,
                 selectable: item.selectable
             };
         });
         if (event.detail.selected) {
             this.selectedCounter += 1;
-            if (this.selectedCounter == this.maximumAllowed) {
+            if (this.selectedCounter >= this.minimumAllowed && this.selectedCounter <= this.maximumAllowed) {
                 this.numbers = this.numbers.map((item) => {
-                    return {
-                        number: item.number,
-                        selected: item.selected,
-                        selectable: item.selected ? true : false
-                    };
+                    if (this.selectedCounter === this.maximumAllowed) {
+                        return {
+                            number: item.number,
+                            selected: item.selected,
+                            selectable: item.selected ? true : false
+                        };
+                    }
+                    else {
+                        return {
+                            number: item.number,
+                            selected: item.selected,
+                            selectable: true
+                        };
+                    }
                 });
-                this.gridFilledEvent.emit({
+                if (JSON.parse(this.numberRange).includes(this.selectedCounter)) {
+                    this.gridFilledEvent.emit({
+                        id: this.ticketId,
+                        index: this.gridIndex,
+                        selectionType: this.selectionType,
+                        selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+                    });
+                }
+                else {
+                    this.gridDirtyEvent.emit({
+                        id: this.ticketId,
+                        index: this.gridIndex,
+                        selectionType: this.selectionType,
+                        selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+                    });
+                }
+            }
+        }
+        else {
+            this.selectedCounter -= 1;
+            this.numbers = this.numbers.map((item) => {
+                return {
+                    number: item.number,
+                    selected: item.selected,
+                    selectable: true
+                };
+            });
+            if (this.selectedCounter < this.minimumAllowed) {
+                this.gridDirtyEvent.emit({
                     id: this.ticketId,
                     index: this.gridIndex,
+                    selectionType: this.selectionType,
                     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({
+            else {
+                this.gridFilledEvent.emit({
                     id: this.ticketId,
                     index: this.gridIndex,
+                    selectionType: this.selectionType,
                     selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
                 });
             }
-            this.selectedCounter -= 1;
+            if (this.selectedCounter === 0) {
+                this.gridClearAllEvent.emit(this.gridIndex);
+            }
         }
     }
     async resetSelectionHandler(event) {
-        if (event.detail && event.detail == this.ticketId) {
+        if (event.detail && event.detail.ticketId == this.ticketId && event.detail.index === this.gridIndex) {
             this.selectedCounter = 0;
             this.numbers = this.numbers.map((item) => {
                 return {
@@ -203,34 +245,35 @@ const LotteryGrid = class {
             this.gridDirtyEvent.emit({
                 id: this.ticketId,
                 index: this.gridIndex,
-                selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+                selectionType: this.selectionType,
+                selectedNumbers: []
             });
         }
     }
     async autoSelectionHandler(event) {
-        if (event.detail && event.detail == this.ticketId) {
+        if (event.detail && event.detail.ticketId == this.ticketId && event.detail.index === this.gridIndex) {
             this.resetSelectionHandler(event);
-            let array = [...Array(this.totalNumbers).keys()]
-                .map(number => number + 1);
+            let array = Array.from({ length: this.highNumber - this.lowNumber + 1 }, (_, index) => this.lowNumber + index);
             array = this.shuffleArray(array);
             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,
+                    selectable: this.partialQuickpickAvailable ? array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false : false,
                 };
             });
             this.gridFilledEvent.emit({
                 id: this.ticketId,
                 index: this.gridIndex,
+                selectionType: this.selectionType,
                 selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
             });
-            this.selectedCounter = this.maximumAllowed;
+            this.selectedCounter = this.minimumAllowed;
         }
     }
     render() {
-        return (index.h("div", { key: '54b9187146b5d2625fd5ce7f53f38abf091cd943', class: "GridContainer", ref: el => this.stylingContainer = el }, index.h("div", { key: 'e7e8570557ebaa78edf881cdbc1ed720028cdf6e', 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 }))))));
+        return (index.h("div", { key: '8ad436904a126e6bee036c7372cf45c075022e5f', class: "GridContainer", ref: el => this.stylingContainer = el }, index.h("div", { key: '5a8818209485f0808a99978910f6f26473dd6f59', 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 }))), this.bonusNumbers.length ? this.bonusNumbers.map((item) => index.h("div", null, index.h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "is-bonus": true, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))) : '')));
     }
 };
 LotteryGrid.style = LotteryGridStyle0;

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

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["lottery-bullet_2.cjs",[[1,"lottery-grid",{"ticketId":[514,"ticket-id"],"totalNumbers":[514,"total-numbers"],"gameId":[513,"game-id"],"maximumAllowed":[514,"maximum-allowed"],"minimumAllowed":[514,"minimum-allowed"],"selectable":[516],"selectedNumbers":[513,"selected-numbers"],"displaySelected":[516,"display-selected"],"language":[513],"gridIndex":[514,"grid-index"],"gridType":[513,"grid-type"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"numbers":[32],"limitStylingAppends":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{"value":[513],"selectable":[516],"isSelected":[516,"is-selected"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["lottery-bullet_2.cjs",[[1,"lottery-grid",{"ticketId":[514,"ticket-id"],"totalNumbers":[514,"total-numbers"],"gameId":[513,"game-id"],"maximumAllowed":[514,"maximum-allowed"],"minimumAllowed":[514,"minimum-allowed"],"numberRange":[513,"number-range"],"selectable":[516],"selectedNumbers":[513,"selected-numbers"],"secondaryNumbers":[513,"secondary-numbers"],"displaySelected":[516,"display-selected"],"language":[513],"gridIndex":[514,"grid-index"],"gridType":[513,"grid-type"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"highNumber":[514,"high-number"],"lowNumber":[514,"low-number"],"selectionType":[513,"selection-type"],"partialQuickpickAvailable":[516,"partial-quickpick-available"],"numbers":[32],"bonusNumbers":[32],"limitStylingAppends":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{"value":[513],"selectable":[516],"isSelected":[516,"is-selected"],"isBonus":[516,"is-bonus"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -1,5 +1,4 @@
 import { h } from "@stencil/core";
-// import { translate } from '../../utils/locale.utils';
 import "../../../../../lottery-bullet/dist/types/index";
 export class LotteryGrid {
     constructor() {
@@ -19,17 +18,24 @@ export class LotteryGrid {
         this.ticketId = undefined;
         this.totalNumbers = 0;
         this.gameId = undefined;
-        this.maximumAllowed = 0;
-        this.minimumAllowed = 1;
+        this.maximumAllowed = 7;
+        this.minimumAllowed = 3;
+        this.numberRange = undefined;
         this.selectable = true;
         this.selectedNumbers = '';
+        this.secondaryNumbers = '';
         this.displaySelected = false;
         this.language = 'en';
         this.gridIndex = undefined;
         this.gridType = '';
         this.clientStyling = '';
         this.clientStylingUrlContent = '';
+        this.highNumber = 47;
+        this.lowNumber = 1;
+        this.selectionType = 'mainSelection';
+        this.partialQuickpickAvailable = false;
         this.numbers = [];
+        this.bonusNumbers = [];
         this.limitStylingAppends = false;
     }
     connectedCallback() {
@@ -38,6 +44,15 @@ export class LotteryGrid {
             selected = this.selectedNumbers.split(',');
             this.selectedCounter = selected.length;
         }
+        if (this.secondaryNumbers.length > 0) {
+            this.bonusNumbers = this.secondaryNumbers.split(',').map(item => {
+                return {
+                    number: item,
+                    selected: true,
+                    selectable: this.selectable
+                };
+            });
+        }
         if (this.displaySelected) {
             selected.forEach((item) => {
                 this.numbers.push({
@@ -48,9 +63,8 @@ export class LotteryGrid {
             });
         }
         else {
-            [...Array(this.totalNumbers).keys()]
-                .map(number => (number + 1).toString())
-                .forEach((number) => {
+            let gridNumbers = Array.from({ length: this.highNumber - this.lowNumber + 1 }, (_, index) => this.lowNumber + index);
+            gridNumbers.map(number => number.toString()).forEach((number) => {
                 this.numbers.push({
                     number,
                     selected: selected.indexOf(number) >= 0 ? true : false,
@@ -81,56 +95,81 @@ export class LotteryGrid {
     }
     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,
+                selected: item.number == event.detail.value ? event.detail.selected : item.selected,
                 selectable: item.selectable
             };
         });
         if (event.detail.selected) {
             this.selectedCounter += 1;
-            if (this.selectedCounter == this.maximumAllowed) {
+            if (this.selectedCounter >= this.minimumAllowed && this.selectedCounter <= this.maximumAllowed) {
                 this.numbers = this.numbers.map((item) => {
-                    return {
-                        number: item.number,
-                        selected: item.selected,
-                        selectable: item.selected ? true : false
-                    };
+                    if (this.selectedCounter === this.maximumAllowed) {
+                        return {
+                            number: item.number,
+                            selected: item.selected,
+                            selectable: item.selected ? true : false
+                        };
+                    }
+                    else {
+                        return {
+                            number: item.number,
+                            selected: item.selected,
+                            selectable: true
+                        };
+                    }
                 });
-                this.gridFilledEvent.emit({
+                if (JSON.parse(this.numberRange).includes(this.selectedCounter)) {
+                    this.gridFilledEvent.emit({
+                        id: this.ticketId,
+                        index: this.gridIndex,
+                        selectionType: this.selectionType,
+                        selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+                    });
+                }
+                else {
+                    this.gridDirtyEvent.emit({
+                        id: this.ticketId,
+                        index: this.gridIndex,
+                        selectionType: this.selectionType,
+                        selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+                    });
+                }
+            }
+        }
+        else {
+            this.selectedCounter -= 1;
+            this.numbers = this.numbers.map((item) => {
+                return {
+                    number: item.number,
+                    selected: item.selected,
+                    selectable: true
+                };
+            });
+            if (this.selectedCounter < this.minimumAllowed) {
+                this.gridDirtyEvent.emit({
                     id: this.ticketId,
                     index: this.gridIndex,
+                    selectionType: this.selectionType,
                     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({
+            else {
+                this.gridFilledEvent.emit({
                     id: this.ticketId,
                     index: this.gridIndex,
+                    selectionType: this.selectionType,
                     selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
                 });
             }
-            this.selectedCounter -= 1;
+            if (this.selectedCounter === 0) {
+                this.gridClearAllEvent.emit(this.gridIndex);
+            }
         }
     }
     async resetSelectionHandler(event) {
-        if (event.detail && event.detail == this.ticketId) {
+        if (event.detail && event.detail.ticketId == this.ticketId && event.detail.index === this.gridIndex) {
             this.selectedCounter = 0;
             this.numbers = this.numbers.map((item) => {
                 return {
@@ -142,34 +181,35 @@ export class LotteryGrid {
             this.gridDirtyEvent.emit({
                 id: this.ticketId,
                 index: this.gridIndex,
-                selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+                selectionType: this.selectionType,
+                selectedNumbers: []
             });
         }
     }
     async autoSelectionHandler(event) {
-        if (event.detail && event.detail == this.ticketId) {
+        if (event.detail && event.detail.ticketId == this.ticketId && event.detail.index === this.gridIndex) {
             this.resetSelectionHandler(event);
-            let array = [...Array(this.totalNumbers).keys()]
-                .map(number => number + 1);
+            let array = Array.from({ length: this.highNumber - this.lowNumber + 1 }, (_, index) => this.lowNumber + index);
             array = this.shuffleArray(array);
             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,
+                    selectable: this.partialQuickpickAvailable ? array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false : false,
                 };
             });
             this.gridFilledEvent.emit({
                 id: this.ticketId,
                 index: this.gridIndex,
+                selectionType: this.selectionType,
                 selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
             });
-            this.selectedCounter = this.maximumAllowed;
+            this.selectedCounter = this.minimumAllowed;
         }
     }
     render() {
-        return (h("div", { key: '54b9187146b5d2625fd5ce7f53f38abf091cd943', class: "GridContainer", ref: el => this.stylingContainer = el }, h("div", { key: 'e7e8570557ebaa78edf881cdbc1ed720028cdf6e', 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 }))))));
+        return (h("div", { key: '8ad436904a126e6bee036c7372cf45c075022e5f', class: "GridContainer", ref: el => this.stylingContainer = el }, h("div", { key: '5a8818209485f0808a99978910f6f26473dd6f59', 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 }))), this.bonusNumbers.length ? this.bonusNumbers.map((item) => h("div", null, h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "is-bonus": true, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))) : '')));
     }
     static get is() { return "lottery-grid"; }
     static get encapsulation() { return "shadow"; }
@@ -253,7 +293,7 @@ export class LotteryGrid {
                 },
                 "attribute": "maximum-allowed",
                 "reflect": true,
-                "defaultValue": "0"
+                "defaultValue": "7"
             },
             "minimumAllowed": {
                 "type": "number",
@@ -271,7 +311,24 @@ export class LotteryGrid {
                 },
                 "attribute": "minimum-allowed",
                 "reflect": true,
-                "defaultValue": "1"
+                "defaultValue": "3"
+            },
+            "numberRange": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of numbers user can select on the grid"
+                },
+                "attribute": "number-range",
+                "reflect": true
             },
             "selectable": {
                 "type": "boolean",
@@ -309,6 +366,24 @@ export class LotteryGrid {
                 "reflect": true,
                 "defaultValue": "''"
             },
+            "secondaryNumbers": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Bonus numbers that should be showed as selected on the grid (as a string of those numbers e.g. '1')"
+                },
+                "attribute": "secondary-numbers",
+                "reflect": true,
+                "defaultValue": "''"
+            },
             "displaySelected": {
                 "type": "boolean",
                 "mutable": false,
@@ -415,12 +490,85 @@ export class LotteryGrid {
                 "attribute": "client-styling-url-content",
                 "reflect": true,
                 "defaultValue": "''"
+            },
+            "highNumber": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of the grid"
+                },
+                "attribute": "high-number",
+                "reflect": true,
+                "defaultValue": "47"
+            },
+            "lowNumber": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lowest number of the grid"
+                },
+                "attribute": "low-number",
+                "reflect": true,
+                "defaultValue": "1"
+            },
+            "selectionType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type of selection"
+                },
+                "attribute": "selection-type",
+                "reflect": true,
+                "defaultValue": "'mainSelection'"
+            },
+            "partialQuickpickAvailable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows partial quickpick or not"
+                },
+                "attribute": "partial-quickpick-available",
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
             "numbers": {},
+            "bonusNumbers": {},
             "limitStylingAppends": {}
         };
     }
@@ -467,6 +615,21 @@ export class LotteryGrid {
                         }
                     }
                 }
+            }, {
+                "method": "gridClearAllEvent",
+                "name": "gridClearAllEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When all the selection of each bullet are cleared, it emits this event"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
             }];
     }
     static get listeners() {

package/dist/collection/utils/locale.utils.js

@@ -3,23 +3,23 @@ const SUPPORTED_LANGUAGES = ['ro', 'en', 'hr'];
 const TRANSLATIONS = {
     en: {
         resetButton: 'Reset',
-        autoButton: 'I feel lucky'
+        autoButton: 'quick pick'
     },
     ro: {
         resetButton: 'Reseteaza',
-        autoButton: 'Ma simt norocos'
+        autoButton: 'quick pick'
     },
     fr: {
         resetButton: 'Reset',
-        autoButton: 'I feel lucky'
+        autoButton: 'quick pick'
     },
     ar: {
         resetButton: 'Reset',
-        autoButton: 'I feel lucky'
+        autoButton: 'quick pick'
     },
     hr: {
         resetButton: 'Resetiraj',
-        autoButton: 'Osjećam se sretno'
+        autoButton: 'quick pick'
     }
 };
 export const translate = (key, customLang) => {

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["lottery-bullet_2",[[1,"lottery-grid",{"ticketId":[514,"ticket-id"],"totalNumbers":[514,"total-numbers"],"gameId":[513,"game-id"],"maximumAllowed":[514,"maximum-allowed"],"minimumAllowed":[514,"minimum-allowed"],"selectable":[516],"selectedNumbers":[513,"selected-numbers"],"displaySelected":[516,"display-selected"],"language":[513],"gridIndex":[514,"grid-index"],"gridType":[513,"grid-type"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"numbers":[32],"limitStylingAppends":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{"value":[513],"selectable":[516],"isSelected":[516,"is-selected"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
+  return bootstrapLazy([["lottery-bullet_2",[[1,"lottery-grid",{"ticketId":[514,"ticket-id"],"totalNumbers":[514,"total-numbers"],"gameId":[513,"game-id"],"maximumAllowed":[514,"maximum-allowed"],"minimumAllowed":[514,"minimum-allowed"],"numberRange":[513,"number-range"],"selectable":[516],"selectedNumbers":[513,"selected-numbers"],"secondaryNumbers":[513,"secondary-numbers"],"displaySelected":[516,"display-selected"],"language":[513],"gridIndex":[514,"grid-index"],"gridType":[513,"grid-type"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"highNumber":[514,"high-number"],"lowNumber":[514,"low-number"],"selectionType":[513,"selection-type"],"partialQuickpickAvailable":[516,"partial-quickpick-available"],"numbers":[32],"bonusNumbers":[32],"limitStylingAppends":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{"value":[513],"selectable":[516],"isSelected":[516,"is-selected"],"isBonus":[516,"is-bonus"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
 };
 
 export { defineCustomElements };

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h } from './index-610c64ca.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, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 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, rgb(255, 255, 255) 0%, rgb(241, 241, 241) 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 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:var(--emw--button-text-color, #000);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 var(--emw--color-gray-transparency-100, rgb(255, 255, 255));background:radial-gradient(circle at top, var(--emw--color-gray-transparency-100, rgb(255, 255, 255)) 0%, var(--emw--color-gray-transparency-100, rgb(255, 255, 255)) 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, var(--emw--color-gray-transparency-100, rgb(255, 255, 255)) 0%, var(--emw--color-gray-50, #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:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));background:var(--emw--color-primary, #9EC258);background:-webkit-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:-moz-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:radial-gradient(circle at top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));border:solid 2px var(--emw--button-border-color, #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:var(--emw--color-gray-50, #F1F1F1);background:var(--emw--color-gray-100, #D4D4D4);border:solid 2px var(--emw--color-gray-100, #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:var(--emw--color-gray-50, #F1F1F1);background:var(--emw--color-primary, #9EC258);background:-webkit-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:-moz-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:radial-gradient(circle at top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));border:solid 2px var(--emw--color-gray-100, #D4D4D4);cursor:default}.Circle.Bonus{background:var(--emw--color-error, #FF3D00)}";
 const LotteryBulletStyle0 = lotteryBulletCss;
 
 const LotteryBullet = class {
@@ -31,6 +31,7 @@ const LotteryBullet = class {
         this.value = '0';
         this.selectable = true;
         this.isSelected = false;
+        this.isBonus = false;
         this.clientStyling = '';
         this.clientStylingUrlContent = '';
         this.limitStylingAppends = false;
@@ -47,7 +48,7 @@ const LotteryBullet = class {
         // end custom styling area
     }
     render() {
-        return (h("div", { key: 'af3601684ecf1f39d65fc9461430cba96b9e4b8c', class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : ''), onClick: () => this.select(), ref: el => this.stylingContainer = el }, this.value));
+        return (h("div", { key: 'a21cbee8f556bfbbe9f97be5f44bfc08b6f24dd6', class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : '') + (this.isBonus ? ' Bonus' : ''), onClick: () => this.select(), ref: el => this.stylingContainer = el }, this.value));
     }
 };
 LotteryBullet.style = LotteryBulletStyle0;
@@ -60,6 +61,7 @@ const LotteryGrid = class {
         registerInstance(this, hostRef);
         this.gridFilledEvent = createEvent(this, "gridFilled", 7);
         this.gridDirtyEvent = createEvent(this, "gridDirty", 7);
+        this.gridClearAllEvent = createEvent(this, "gridClearAllEvent", 7);
         this.selectedCounter = 0;
         this.setClientStyling = () => {
             let sheet = document.createElement('style');
@@ -76,17 +78,24 @@ const LotteryGrid = class {
         this.ticketId = undefined;
         this.totalNumbers = 0;
         this.gameId = undefined;
-        this.maximumAllowed = 0;
-        this.minimumAllowed = 1;
+        this.maximumAllowed = 7;
+        this.minimumAllowed = 3;
+        this.numberRange = undefined;
         this.selectable = true;
         this.selectedNumbers = '';
+        this.secondaryNumbers = '';
         this.displaySelected = false;
         this.language = 'en';
         this.gridIndex = undefined;
         this.gridType = '';
         this.clientStyling = '';
         this.clientStylingUrlContent = '';
+        this.highNumber = 47;
+        this.lowNumber = 1;
+        this.selectionType = 'mainSelection';
+        this.partialQuickpickAvailable = false;
         this.numbers = [];
+        this.bonusNumbers = [];
         this.limitStylingAppends = false;
     }
     connectedCallback() {
@@ -95,6 +104,15 @@ const LotteryGrid = class {
             selected = this.selectedNumbers.split(',');
             this.selectedCounter = selected.length;
         }
+        if (this.secondaryNumbers.length > 0) {
+            this.bonusNumbers = this.secondaryNumbers.split(',').map(item => {
+                return {
+                    number: item,
+                    selected: true,
+                    selectable: this.selectable
+                };
+            });
+        }
         if (this.displaySelected) {
             selected.forEach((item) => {
                 this.numbers.push({
@@ -105,9 +123,8 @@ const LotteryGrid = class {
             });
         }
         else {
-            [...Array(this.totalNumbers).keys()]
-                .map(number => (number + 1).toString())
-                .forEach((number) => {
+            let gridNumbers = Array.from({ length: this.highNumber - this.lowNumber + 1 }, (_, index) => this.lowNumber + index);
+            gridNumbers.map(number => number.toString()).forEach((number) => {
                 this.numbers.push({
                     number,
                     selected: selected.indexOf(number) >= 0 ? true : false,
@@ -138,56 +155,81 @@ const LotteryGrid = class {
     }
     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,
+                selected: item.number == event.detail.value ? event.detail.selected : item.selected,
                 selectable: item.selectable
             };
         });
         if (event.detail.selected) {
             this.selectedCounter += 1;
-            if (this.selectedCounter == this.maximumAllowed) {
+            if (this.selectedCounter >= this.minimumAllowed && this.selectedCounter <= this.maximumAllowed) {
                 this.numbers = this.numbers.map((item) => {
-                    return {
-                        number: item.number,
-                        selected: item.selected,
-                        selectable: item.selected ? true : false
-                    };
+                    if (this.selectedCounter === this.maximumAllowed) {
+                        return {
+                            number: item.number,
+                            selected: item.selected,
+                            selectable: item.selected ? true : false
+                        };
+                    }
+                    else {
+                        return {
+                            number: item.number,
+                            selected: item.selected,
+                            selectable: true
+                        };
+                    }
                 });
-                this.gridFilledEvent.emit({
+                if (JSON.parse(this.numberRange).includes(this.selectedCounter)) {
+                    this.gridFilledEvent.emit({
+                        id: this.ticketId,
+                        index: this.gridIndex,
+                        selectionType: this.selectionType,
+                        selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+                    });
+                }
+                else {
+                    this.gridDirtyEvent.emit({
+                        id: this.ticketId,
+                        index: this.gridIndex,
+                        selectionType: this.selectionType,
+                        selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+                    });
+                }
+            }
+        }
+        else {
+            this.selectedCounter -= 1;
+            this.numbers = this.numbers.map((item) => {
+                return {
+                    number: item.number,
+                    selected: item.selected,
+                    selectable: true
+                };
+            });
+            if (this.selectedCounter < this.minimumAllowed) {
+                this.gridDirtyEvent.emit({
                     id: this.ticketId,
                     index: this.gridIndex,
+                    selectionType: this.selectionType,
                     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({
+            else {
+                this.gridFilledEvent.emit({
                     id: this.ticketId,
                     index: this.gridIndex,
+                    selectionType: this.selectionType,
                     selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
                 });
             }
-            this.selectedCounter -= 1;
+            if (this.selectedCounter === 0) {
+                this.gridClearAllEvent.emit(this.gridIndex);
+            }
         }
     }
     async resetSelectionHandler(event) {
-        if (event.detail && event.detail == this.ticketId) {
+        if (event.detail && event.detail.ticketId == this.ticketId && event.detail.index === this.gridIndex) {
             this.selectedCounter = 0;
             this.numbers = this.numbers.map((item) => {
                 return {
@@ -199,34 +241,35 @@ const LotteryGrid = class {
             this.gridDirtyEvent.emit({
                 id: this.ticketId,
                 index: this.gridIndex,
-                selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+                selectionType: this.selectionType,
+                selectedNumbers: []
             });
         }
     }
     async autoSelectionHandler(event) {
-        if (event.detail && event.detail == this.ticketId) {
+        if (event.detail && event.detail.ticketId == this.ticketId && event.detail.index === this.gridIndex) {
             this.resetSelectionHandler(event);
-            let array = [...Array(this.totalNumbers).keys()]
-                .map(number => number + 1);
+            let array = Array.from({ length: this.highNumber - this.lowNumber + 1 }, (_, index) => this.lowNumber + index);
             array = this.shuffleArray(array);
             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,
+                    selectable: this.partialQuickpickAvailable ? array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false : false,
                 };
             });
             this.gridFilledEvent.emit({
                 id: this.ticketId,
                 index: this.gridIndex,
+                selectionType: this.selectionType,
                 selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
             });
-            this.selectedCounter = this.maximumAllowed;
+            this.selectedCounter = this.minimumAllowed;
         }
     }
     render() {
-        return (h("div", { key: '54b9187146b5d2625fd5ce7f53f38abf091cd943', class: "GridContainer", ref: el => this.stylingContainer = el }, h("div", { key: 'e7e8570557ebaa78edf881cdbc1ed720028cdf6e', 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 }))))));
+        return (h("div", { key: '8ad436904a126e6bee036c7372cf45c075022e5f', class: "GridContainer", ref: el => this.stylingContainer = el }, h("div", { key: '5a8818209485f0808a99978910f6f26473dd6f59', 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 }))), this.bonusNumbers.length ? this.bonusNumbers.map((item) => h("div", null, h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "is-bonus": true, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))) : '')));
     }
 };
 LotteryGrid.style = LotteryGridStyle0;

package/dist/esm/lottery-grid.js

@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["lottery-bullet_2",[[1,"lottery-grid",{"ticketId":[514,"ticket-id"],"totalNumbers":[514,"total-numbers"],"gameId":[513,"game-id"],"maximumAllowed":[514,"maximum-allowed"],"minimumAllowed":[514,"minimum-allowed"],"selectable":[516],"selectedNumbers":[513,"selected-numbers"],"displaySelected":[516,"display-selected"],"language":[513],"gridIndex":[514,"grid-index"],"gridType":[513,"grid-type"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"numbers":[32],"limitStylingAppends":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{"value":[513],"selectable":[516],"isSelected":[516,"is-selected"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
+  return bootstrapLazy([["lottery-bullet_2",[[1,"lottery-grid",{"ticketId":[514,"ticket-id"],"totalNumbers":[514,"total-numbers"],"gameId":[513,"game-id"],"maximumAllowed":[514,"maximum-allowed"],"minimumAllowed":[514,"minimum-allowed"],"numberRange":[513,"number-range"],"selectable":[516],"selectedNumbers":[513,"selected-numbers"],"secondaryNumbers":[513,"secondary-numbers"],"displaySelected":[516,"display-selected"],"language":[513],"gridIndex":[514,"grid-index"],"gridType":[513,"grid-type"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"highNumber":[514,"high-number"],"lowNumber":[514,"low-number"],"selectionType":[513,"selection-type"],"partialQuickpickAvailable":[516,"partial-quickpick-available"],"numbers":[32],"bonusNumbers":[32],"limitStylingAppends":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{"value":[513],"selectable":[516],"isSelected":[516,"is-selected"],"isBonus":[516,"is-bonus"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
 });

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

@@ -1 +1 @@
-import{p as e,b as t}from"./p-a2add9a5.js";export{s as setNonce}from"./p-a2add9a5.js";import{g as l}from"./p-e1255160.js";(()=>{const t=import.meta.url,l={};return""!==t&&(l.resourcesUrl=new URL(".",t).href),e(l)})().then((async e=>(await l(),t([["p-95806832",[[1,"lottery-grid",{ticketId:[514,"ticket-id"],totalNumbers:[514,"total-numbers"],gameId:[513,"game-id"],maximumAllowed:[514,"maximum-allowed"],minimumAllowed:[514,"minimum-allowed"],selectable:[516],selectedNumbers:[513,"selected-numbers"],displaySelected:[516,"display-selected"],language:[513],gridIndex:[514,"grid-index"],gridType:[513,"grid-type"],clientStyling:[513,"client-styling"],clientStylingUrlContent:[513,"client-styling-url-content"],numbers:[32],limitStylingAppends:[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{value:[513],selectable:[516],isSelected:[516,"is-selected"],clientStyling:[513,"client-styling"],clientStylingUrlContent:[513,"client-styling-url-content"],limitStylingAppends:[32]}]]]],e))));
+import{p as e,b as t}from"./p-a2add9a5.js";export{s as setNonce}from"./p-a2add9a5.js";import{g as l}from"./p-e1255160.js";(()=>{const t=import.meta.url,l={};return""!==t&&(l.resourcesUrl=new URL(".",t).href),e(l)})().then((async e=>(await l(),t([["p-a27a4bfc",[[1,"lottery-grid",{ticketId:[514,"ticket-id"],totalNumbers:[514,"total-numbers"],gameId:[513,"game-id"],maximumAllowed:[514,"maximum-allowed"],minimumAllowed:[514,"minimum-allowed"],numberRange:[513,"number-range"],selectable:[516],selectedNumbers:[513,"selected-numbers"],secondaryNumbers:[513,"secondary-numbers"],displaySelected:[516,"display-selected"],language:[513],gridIndex:[514,"grid-index"],gridType:[513,"grid-type"],clientStyling:[513,"client-styling"],clientStylingUrlContent:[513,"client-styling-url-content"],highNumber:[514,"high-number"],lowNumber:[514,"low-number"],selectionType:[513,"selection-type"],partialQuickpickAvailable:[516,"partial-quickpick-available"],numbers:[32],bonusNumbers:[32],limitStylingAppends:[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{value:[513],selectable:[516],isSelected:[516,"is-selected"],isBonus:[516,"is-bonus"],clientStyling:[513,"client-styling"],clientStylingUrlContent:[513,"client-styling-url-content"],limitStylingAppends:[32]}]]]],e))));

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

@@ -0,0 +1 @@
+import{r as t,c as e,h as i}from"./p-a2add9a5.js";const s=class{constructor(i){t(this,i),this.bulletEvent=e(this,"lotteryBulletSelection",7),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)},this.value="0",this.selectable=!0,this.isSelected=!1,this.isBonus=!1,this.clientStyling="",this.clientStylingUrlContent="",this.limitStylingAppends=!1}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrlContent&&this.setClientStylingURL(),this.limitStylingAppends=!0)}render(){return i("div",{key:"a21cbee8f556bfbbe9f97be5f44bfc08b6f24dd6",class:"Circle "+(this.selectable?"":"Disabled")+(this.isSelected?"Selected":"")+(this.isBonus?" Bonus":""),onClick:()=>this.select(),ref:t=>this.stylingContainer=t},this.value)}};s.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:var(--emw--button-text-color, #000);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 var(--emw--color-gray-transparency-100, rgb(255, 255, 255));background:radial-gradient(circle at top, var(--emw--color-gray-transparency-100, rgb(255, 255, 255)) 0%, var(--emw--color-gray-transparency-100, rgb(255, 255, 255)) 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, var(--emw--color-gray-transparency-100, rgb(255, 255, 255)) 0%, var(--emw--color-gray-50, #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:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));background:var(--emw--color-primary, #9EC258);background:-webkit-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:-moz-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:radial-gradient(circle at top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));border:solid 2px var(--emw--button-border-color, #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:var(--emw--color-gray-50, #F1F1F1);background:var(--emw--color-gray-100, #D4D4D4);border:solid 2px var(--emw--color-gray-100, #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:var(--emw--color-gray-50, #F1F1F1);background:var(--emw--color-primary, #9EC258);background:-webkit-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:-moz-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:radial-gradient(circle at top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));border:solid 2px var(--emw--color-gray-100, #D4D4D4);cursor:default}.Circle.Bonus{background:var(--emw--color-error, #FF3D00)}';const r=class{constructor(i){t(this,i),this.gridFilledEvent=e(this,"gridFilled",7),this.gridDirtyEvent=e(this,"gridDirty",7),this.gridClearAllEvent=e(this,"gridClearAllEvent",7),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)},this.ticketId=void 0,this.totalNumbers=0,this.gameId=void 0,this.maximumAllowed=7,this.minimumAllowed=3,this.numberRange=void 0,this.selectable=!0,this.selectedNumbers="",this.secondaryNumbers="",this.displaySelected=!1,this.language="en",this.gridIndex=void 0,this.gridType="",this.clientStyling="",this.clientStylingUrlContent="",this.highNumber=47,this.lowNumber=1,this.selectionType="mainSelection",this.partialQuickpickAvailable=!1,this.numbers=[],this.bonusNumbers=[],this.limitStylingAppends=!1}connectedCallback(){let t=[];this.selectedNumbers.length>0&&(t=this.selectedNumbers.split(","),this.selectedCounter=t.length),this.secondaryNumbers.length>0&&(this.bonusNumbers=this.secondaryNumbers.split(",").map((t=>({number:t,selected:!0,selectable:this.selectable})))),this.displaySelected?t.forEach((t=>{this.numbers.push({number:t,selected:!0,selectable:this.selectable})})):Array.from({length:this.highNumber-this.lowNumber+1},((t,e)=>this.lowNumber+e)).map((t=>t.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)}shuffleArray(t){const e=[];for(;t.length>0;){const i=Math.floor(Math.random()*t.length);e.push(t.splice(i,1)[0])}return e}lotteryBulletSelectionHandler(t){this.numbers=this.numbers.map((e=>({number:e.number,selected:e.number==t.detail.value?t.detail.selected:e.selected,selectable:e.selectable}))),t.detail.selected?(this.selectedCounter+=1,this.selectedCounter>=this.minimumAllowed&&this.selectedCounter<=this.maximumAllowed&&(this.numbers=this.numbers.map((t=>this.selectedCounter===this.maximumAllowed?{number:t.number,selected:t.selected,selectable:!!t.selected}:{number:t.number,selected:t.selected,selectable:!0})),JSON.parse(this.numberRange).includes(this.selectedCounter)?this.gridFilledEvent.emit({id:this.ticketId,index:this.gridIndex,selectionType:this.selectionType,selectedNumbers:this.numbers.filter((t=>t.selected)).map((t=>t.number))}):this.gridDirtyEvent.emit({id:this.ticketId,index:this.gridIndex,selectionType:this.selectionType,selectedNumbers:this.numbers.filter((t=>t.selected)).map((t=>t.number))}))):(this.selectedCounter-=1,this.numbers=this.numbers.map((t=>({number:t.number,selected:t.selected,selectable:!0}))),this.selectedCounter<this.minimumAllowed?this.gridDirtyEvent.emit({id:this.ticketId,index:this.gridIndex,selectionType:this.selectionType,selectedNumbers:this.numbers.filter((t=>t.selected)).map((t=>t.number))}):this.gridFilledEvent.emit({id:this.ticketId,index:this.gridIndex,selectionType:this.selectionType,selectedNumbers:this.numbers.filter((t=>t.selected)).map((t=>t.number))}),0===this.selectedCounter&&this.gridClearAllEvent.emit(this.gridIndex))}async resetSelectionHandler(t){t.detail&&t.detail.ticketId==this.ticketId&&t.detail.index===this.gridIndex&&(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,selectionType:this.selectionType,selectedNumbers:[]}))}async autoSelectionHandler(t){if(t.detail&&t.detail.ticketId==this.ticketId&&t.detail.index===this.gridIndex){this.resetSelectionHandler(t);let e=Array.from({length:this.highNumber-this.lowNumber+1},((t,e)=>this.lowNumber+e));e=this.shuffleArray(e),e=e.slice(0,this.minimumAllowed),this.numbers=this.numbers.map((t=>({number:t.number,selected:e.indexOf(parseInt(t.number,10))>=0,selectable:!!this.partialQuickpickAvailable&&e.indexOf(parseInt(t.number,10))>=0}))),this.gridFilledEvent.emit({id:this.ticketId,index:this.gridIndex,selectionType:this.selectionType,selectedNumbers:this.numbers.filter((t=>t.selected)).map((t=>t.number))}),this.selectedCounter=this.minimumAllowed}}render(){return i("div",{key:"8ad436904a126e6bee036c7372cf45c075022e5f",class:"GridContainer",ref:t=>this.stylingContainer=t},i("div",{key:"5a8818209485f0808a99978910f6f26473dd6f59",class:"ticket"===this.gridType?"Grid TicketGrid":"Grid"},this.numbers.map((t=>i("div",null,i("lottery-bullet",{value:t.number,selectable:t.selectable,"is-selected":t.selected,"client-styling":this.clientStyling,"client-styling-url-content":this.clientStylingUrlContent})))),this.bonusNumbers.length?this.bonusNumbers.map((t=>i("div",null,i("lottery-bullet",{value:t.number,selectable:t.selectable,"is-selected":t.selected,"is-bonus":!0,"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{s as lottery_bullet,r as lottery_grid}

package/dist/types/Users/maria.bumbar/Desktop/widgets-monorepo/packages/stencil/lottery-grid/.stencil/packages/stencil/lottery-grid/stencil.config.d.ts

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

package/dist/types/Users/maria.bumbar/Desktop/widgets-monorepo/packages/stencil/lottery-grid/.stencil/packages/stencil/lottery-grid/stencil.config.dev.d.ts

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

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

@@ -22,6 +22,10 @@ export declare class LotteryGrid {
      * Minimum allowed of bullets
      */
     minimumAllowed: number;
+    /**
+     * The number of numbers user can select on the grid
+     */
+    numberRange: string;
     /**
      * Allows the user to select numbers on the grid
      */
@@ -30,6 +34,10 @@ export declare class LotteryGrid {
      * Numbers that should be showed as selected on the grid (as a string of those numbers e.g. '1,2,3,4,5,6')
      */
     selectedNumbers: string;
+    /**
+   * Bonus numbers that should be showed as selected on the grid (as a string of those numbers e.g. '1')
+   */
+    secondaryNumbers: string;
     /**
      * Show only selected numbers
      */
@@ -54,7 +62,30 @@ export declare class LotteryGrid {
      * Client custom styling via url content
      */
     clientStylingUrlContent: string;
+    /**
+     * Maximum number of the grid
+     */
+    highNumber: number;
+    /**
+     * Lowest number of the grid
+     */
+    lowNumber: number;
+    /**
+     * Type of selection
+     */
+    selectionType: string;
+    /**
+     * Allows partial quickpick or not
+     */
+    partialQuickpickAvailable: boolean;
+    /**
+     * main selection numbers
+     */
     numbers: Array<GridNumbers>;
+    /**
+     * Bonus selection numbers
+     */
+    bonusNumbers: Array<GridNumbers>;
     private limitStylingAppends;
     private selectedCounter;
     private stylingContainer;
@@ -66,6 +97,10 @@ export declare class LotteryGrid {
      * When the grid is uncomplete after being completed once (reset or change), it emits this event
      */
     gridDirtyEvent: EventEmitter<GridEvent>;
+    /**
+     * When all the selection of each bullet are cleared, it emits this event
+     */
+    gridClearAllEvent: EventEmitter<number>;
     connectedCallback(): void;
     componentDidRender(): void;
     shuffleArray(array: Array<any>): Array<any>;

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

@@ -11,4 +11,5 @@ export interface GridEvent {
     id: number;
     index: number;
     selectedNumbers: Array<string>;
+    selectionType: string;
 }

package/dist/types/components.d.ts

@@ -33,10 +33,18 @@ export namespace Components {
           * Personalize grid for ticket
          */
         "gridType": string;
+        /**
+          * Maximum number of the grid
+         */
+        "highNumber": number;
         /**
           * Language
          */
         "language": string;
+        /**
+          * Lowest number of the grid
+         */
+        "lowNumber": number;
         /**
           * Number of maximum bullets that can be selected
          */
@@ -45,6 +53,18 @@ export namespace Components {
           * Minimum allowed of bullets
          */
         "minimumAllowed": number;
+        /**
+          * The number of numbers user can select on the grid
+         */
+        "numberRange": string;
+        /**
+          * Allows partial quickpick or not
+         */
+        "partialQuickpickAvailable": boolean;
+        /**
+          * Bonus numbers that should be showed as selected on the grid (as a string of those numbers e.g. '1')
+         */
+        "secondaryNumbers": string;
         /**
           * Allows the user to select numbers on the grid
          */
@@ -53,6 +73,10 @@ export namespace Components {
           * Numbers that should be showed as selected on the grid (as a string of those numbers e.g. '1,2,3,4,5,6')
          */
         "selectedNumbers": string;
+        /**
+          * Type of selection
+         */
+        "selectionType": string;
         /**
           * Identifier for the ticket
          */
@@ -71,6 +95,7 @@ declare global {
     interface HTMLLotteryGridElementEventMap {
         "gridFilled": GridEvent;
         "gridDirty": GridEvent;
+        "gridClearAllEvent": number;
     }
     interface HTMLLotteryGridElement extends Components.LotteryGrid, HTMLStencilElement {
         addEventListener<K extends keyof HTMLLotteryGridElementEventMap>(type: K, listener: (this: HTMLLotteryGridElement, ev: LotteryGridCustomEvent<HTMLLotteryGridElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -116,10 +141,18 @@ declare namespace LocalJSX {
           * Personalize grid for ticket
          */
         "gridType"?: string;
+        /**
+          * Maximum number of the grid
+         */
+        "highNumber"?: number;
         /**
           * Language
          */
         "language"?: string;
+        /**
+          * Lowest number of the grid
+         */
+        "lowNumber"?: number;
         /**
           * Number of maximum bullets that can be selected
          */
@@ -128,6 +161,14 @@ declare namespace LocalJSX {
           * Minimum allowed of bullets
          */
         "minimumAllowed"?: number;
+        /**
+          * The number of numbers user can select on the grid
+         */
+        "numberRange"?: string;
+        /**
+          * When all the selection of each bullet are cleared, it emits this event
+         */
+        "onGridClearAllEvent"?: (event: LotteryGridCustomEvent<number>) => void;
         /**
           * When the grid is uncomplete after being completed once (reset or change), it emits this event
          */
@@ -136,6 +177,14 @@ declare namespace LocalJSX {
           * When the grid is completed, it emits this event with selected numbers
          */
         "onGridFilled"?: (event: LotteryGridCustomEvent<GridEvent>) => void;
+        /**
+          * Allows partial quickpick or not
+         */
+        "partialQuickpickAvailable"?: boolean;
+        /**
+          * Bonus numbers that should be showed as selected on the grid (as a string of those numbers e.g. '1')
+         */
+        "secondaryNumbers"?: string;
         /**
           * Allows the user to select numbers on the grid
          */
@@ -144,6 +193,10 @@ declare namespace LocalJSX {
           * Numbers that should be showed as selected on the grid (as a string of those numbers e.g. '1,2,3,4,5,6')
          */
         "selectedNumbers"?: string;
+        /**
+          * Type of selection
+         */
+        "selectionType"?: string;
         /**
           * Identifier for the ticket
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/lottery-grid",
-  "version": "1.52.6",
+  "version": "1.53.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",

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

@@ -1 +0,0 @@
-import{r as t,c as e,h as s}from"./p-a2add9a5.js";const i=class{constructor(s){t(this,s),this.bulletEvent=e(this,"lotteryBulletSelection",7),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)},this.value="0",this.selectable=!0,this.isSelected=!1,this.clientStyling="",this.clientStylingUrlContent="",this.limitStylingAppends=!1}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrlContent&&this.setClientStylingURL(),this.limitStylingAppends=!0)}render(){return s("div",{key:"af3601684ecf1f39d65fc9461430cba96b9e4b8c",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, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 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, rgb(255, 255, 255) 0%, rgb(241, 241, 241) 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.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)},this.ticketId=void 0,this.totalNumbers=0,this.gameId=void 0,this.maximumAllowed=0,this.minimumAllowed=1,this.selectable=!0,this.selectedNumbers="",this.displaySelected=!1,this.language="en",this.gridIndex=void 0,this.gridType="",this.clientStyling="",this.clientStylingUrlContent="",this.numbers=[],this.limitStylingAppends=!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)}shuffleArray(t){const e=[];for(;t.length>0;){const s=Math.floor(Math.random()*t.length);e.push(t.splice(s,1)[0])}return e}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));e=this.shuffleArray(e),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",{key:"54b9187146b5d2625fd5ce7f53f38abf091cd943",class:"GridContainer",ref:t=>this.stylingContainer=t},s("div",{key:"e7e8570557ebaa78edf881cdbc1ed720028cdf6e",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/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/lottery-grid/.stencil/packages/stencil/lottery-grid/stencil.config.d.ts

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

package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/lottery-grid/.stencil/packages/stencil/lottery-grid/stencil.config.dev.d.ts

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