@everymatrix/lottery-grid 1.31.2 → 1.32.4

package/dist/cjs/index.cjs.js

@@ -1,2 +0,0 @@
-'use strict';
-

package/dist/cjs/loader.cjs.js

@@ -1,21 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-dfe5695c.js');
-
-/*
- Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
- */
-const patchEsm = () => {
-    return index.promiseResolve();
-};
-
-const defineCustomElements = (win, options) => {
-  if (typeof window === 'undefined') return Promise.resolve();
-  return patchEsm().then(() => {
-  return index.bootstrapLazy([["lottery-bullet_2.cjs",[[1,"lottery-grid",{"ticketId":[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);
-  });
-};
-
-exports.defineCustomElements = defineCustomElements;

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

@@ -1,279 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-dfe5695c.js');
-
-const lotteryBulletCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}@-webkit-keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.22) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.2) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@-webkit-keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}.Circle{-webkit-animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;cursor:pointer;color:#000000;display:block;height:30px;width:30px;margin:0;display:flex;align-items:center;justify-content:center;justify-content:center;align-items:center;border:solid 2px #ffffff;background:radial-gradient(circle at top, white 0%, white 100%);font-weight:bold;border-radius:50%;box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.5);user-select:none;font-size:16px;line-height:16px;font-weight:600;position:relative}.Circle:hover{-webkit-animation:hover-rotate 0.4s linear both;animation:hover-rotate 0.4s linear both;background:radial-gradient(circle at top, white 0%, #f1f1f1 100%)}.Circle.Selected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #00958f}.Circle.Disabled{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#D4D4D4;border:solid 2px #D4D4D4;cursor:default}.Circle.DisabledSelected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #D4D4D4;cursor:default}";
-
-const LotteryBullet = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.bulletEvent = index.createEvent(this, "lotteryBulletSelection", 7);
-    /**
-     * Value of the bullet
-     */
-    this.value = '0';
-    /**
-     * Marks if the bullet should be selectable
-     */
-    this.selectable = true;
-    /**
-     * Marks if the bullet should be selected
-     */
-    this.isSelected = false;
-    /**
-     * Client custom styling via string
-     */
-    this.clientStyling = '';
-    /**
-     * Client custom styling via url content
-     */
-    this.clientStylingUrlContent = '';
-    this.limitStylingAppends = false;
-    this.select = () => {
-      if (this.selectable) {
-        this.isSelected = !this.isSelected;
-        this.bulletEvent.emit({
-          value: this.value,
-          selected: this.isSelected
-        });
-      }
-    };
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.prepend(sheet);
-    };
-    this.setClientStylingURL = () => {
-      let cssFile = document.createElement('style');
-      setTimeout(() => {
-        cssFile.innerHTML = this.clientStylingUrlContent;
-        this.stylingContainer.prepend(cssFile);
-      }, 1);
-    };
-  }
-  componentDidRender() {
-    // start custom styling area
-    if (!this.limitStylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrlContent)
-        this.setClientStylingURL();
-      this.limitStylingAppends = true;
-    }
-    // end custom styling area
-  }
-  render() {
-    return (index.h("div", { class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : ''), onClick: () => this.select(), ref: el => this.stylingContainer = el }, this.value));
-  }
-};
-LotteryBullet.style = lotteryBulletCss;
-
-const lotteryGridCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.GridContainer{display:flex;flex-direction:column;max-width:1200px}.Grid{margin-top:10px 0 10px 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px}.Grid.TicketGrid{gap:5px}";
-
-const LotteryGrid = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.gridFilledEvent = index.createEvent(this, "gridFilled", 7);
-    this.gridDirtyEvent = index.createEvent(this, "gridDirty", 7);
-    /**
-     * Number of bullets of grid
-     */
-    this.totalNumbers = 0;
-    /**
-     * Number of maximum bullets that can be selected
-     */
-    this.maximumAllowed = 0;
-    /**
-     * Minimum allowed of bullets
-     */
-    this.minimumAllowed = 1;
-    /**
-     * Allows the user to select numbers on the grid
-     */
-    this.selectable = true;
-    /**
-     * Numbers that should be showed as selected on the grid (as a string of those numbers e.g. '1,2,3,4,5,6')
-     */
-    this.selectedNumbers = '';
-    /**
-     * Show only selected numbers
-     */
-    this.displaySelected = false;
-    /**
-     * Language
-     */
-    this.language = 'en';
-    /**
-     * Personalize grid for ticket
-     */
-    this.gridType = '';
-    /**
-     * Client custom styling via string
-     */
-    this.clientStyling = '';
-    /**
-     * Client custom styling via url content
-     */
-    this.clientStylingUrlContent = '';
-    this.numbers = [];
-    this.limitStylingAppends = false;
-    this.selectedCounter = 0;
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.prepend(sheet);
-    };
-    this.setClientStylingURL = () => {
-      let cssFile = document.createElement('style');
-      setTimeout(() => {
-        cssFile.innerHTML = this.clientStylingUrlContent;
-        this.stylingContainer.prepend(cssFile);
-      }, 1);
-    };
-  }
-  connectedCallback() {
-    let selected = [];
-    if (this.selectedNumbers.length > 0) {
-      selected = this.selectedNumbers.split(',');
-      this.selectedCounter = selected.length;
-    }
-    if (this.displaySelected) {
-      selected.forEach((item) => {
-        this.numbers.push({
-          number: item,
-          selected: true,
-          selectable: this.selectable
-        });
-      });
-    }
-    else {
-      [...Array(this.totalNumbers).keys()]
-        .map(number => (number + 1).toString())
-        .forEach((number) => {
-        this.numbers.push({
-          number,
-          selected: selected.indexOf(number) >= 0 ? true : false,
-          selectable: this.selectedCounter == this.maximumAllowed ? false : this.selectable
-        });
-      });
-    }
-  }
-  componentDidRender() {
-    // start custom styling area
-    if (!this.limitStylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrlContent)
-        this.setClientStylingURL();
-      this.limitStylingAppends = true;
-    }
-    // end custom styling area
-  }
-  // wrote this because the classic .sort(() => 0.5 - Math.random()) method yielded low entropy shuffles for some reason on certain devices
-  shuffleArray(array) {
-    const result = [];
-    while (array.length > 0) {
-      const randomIndex = Math.floor(Math.random() * (array.length));
-      result.push(array.splice(randomIndex, 1)[0]);
-    }
-    return result;
-  }
-  lotteryBulletSelectionHandler(event) {
-    this.numbers = this.numbers.map((item) => {
-      if (item.number == event.detail.value) {
-        return {
-          number: item.number,
-          selected: event.detail.selected,
-          selectable: item.selectable
-        };
-      }
-      return {
-        number: item.number,
-        selected: item.selected,
-        selectable: item.selectable
-      };
-    });
-    if (event.detail.selected) {
-      this.selectedCounter += 1;
-      if (this.selectedCounter == this.maximumAllowed) {
-        this.numbers = this.numbers.map((item) => {
-          return {
-            number: item.number,
-            selected: item.selected,
-            selectable: item.selected ? true : false
-          };
-        });
-        this.gridFilledEvent.emit({
-          id: this.ticketId,
-          index: this.gridIndex,
-          selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
-        });
-      }
-    }
-    else {
-      if (this.selectedCounter == this.maximumAllowed) {
-        this.numbers = this.numbers.map((item) => {
-          return {
-            number: item.number,
-            selected: item.selected,
-            selectable: true
-          };
-        });
-        this.gridDirtyEvent.emit({
-          id: this.ticketId,
-          index: this.gridIndex,
-          selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
-        });
-      }
-      this.selectedCounter -= 1;
-    }
-  }
-  async resetSelectionHandler(event) {
-    if (event.detail && event.detail == this.ticketId) {
-      this.selectedCounter = 0;
-      this.numbers = this.numbers.map((item) => {
-        return {
-          number: item.number,
-          selected: false,
-          selectable: this.selectable
-        };
-      });
-      this.gridDirtyEvent.emit({
-        id: this.ticketId,
-        index: this.gridIndex,
-        selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
-      });
-    }
-  }
-  async autoSelectionHandler(event) {
-    if (event.detail && event.detail == this.ticketId) {
-      this.resetSelectionHandler(event);
-      let array = [...Array(this.totalNumbers).keys()]
-        .map(number => number + 1);
-      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,
-        };
-      });
-      this.gridFilledEvent.emit({
-        id: this.ticketId,
-        index: this.gridIndex,
-        selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
-      });
-      this.selectedCounter = this.maximumAllowed;
-    }
-  }
-  render() {
-    return (index.h("div", { class: "GridContainer", ref: el => this.stylingContainer = el }, index.h("div", { class: this.gridType === 'ticket' ? 'Grid TicketGrid' : 'Grid' }, this.numbers.map((item) => index.h("div", null, index.h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))))));
-  }
-};
-LotteryGrid.style = lotteryGridCss;
-
-exports.lottery_bullet = LotteryBullet;
-exports.lottery_grid = LotteryGrid;

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

@@ -1,19 +0,0 @@
-'use strict';
-
-const index = require('./index-dfe5695c.js');
-
-/*
- Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
- */
-const patchBrowser = () => {
-    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('lottery-grid.cjs.js', document.baseURI).href));
-    const opts = {};
-    if (importMeta !== '') {
-        opts.resourcesUrl = new URL('.', importMeta).href;
-    }
-    return index.promiseResolve(opts);
-};
-
-patchBrowser().then(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"],"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);
-});

package/dist/collection/collection-manifest.json

@@ -1,19 +0,0 @@
-{
-  "entries": [
-    "./components/lottery-grid/lottery-grid.js"
-  ],
-  "compiler": {
-    "name": "@stencil/core",
-    "version": "2.15.2",
-    "typescriptVersion": "4.5.4"
-  },
-  "collections": [
-    {
-      "name": "@everymatrix/lottery-bullet",
-      "tags": [
-        "lottery-bullet"
-      ]
-    }
-  ],
-  "bundles": []
-}

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

@@ -1,22 +0,0 @@
-@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;
-}