@everymatrix/lottery-ticket-controller 0.1.1 → 0.1.2

package/dist/cjs/helper-accordion_5.cjs.entry.js

@@ -0,0 +1,487 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c560cdc6.js');
+
+const DEFAULT_LANGUAGE$1 = 'en';
+const SUPPORTED_LANGUAGES$1 = ['ro', 'en'];
+const TRANSLATIONS$1 = {
+  en: {
+    deleteTicket: 'Delete ticket'
+  },
+  ro: {
+    deleteTicket: 'Sterge biletul'
+  },
+};
+const translate$1 = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS$1[lang !== undefined && SUPPORTED_LANGUAGES$1.includes(lang) ? lang : DEFAULT_LANGUAGE$1][key];
+};
+
+const helperAccordionCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Header{border-radius:4px;margin-bottom:1px;background:#009993;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none}.Header:hover{background:#00ABA4}.Header .Title,.Header .Subtitle,.Header .Description{margin:0;font-size:14px;color:#fff}.Header .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.Content{border-radius:4px;background:#fff;border:1px solid #009993;padding:10px 15px;user-select:none;color:#000;margin-bottom:10px}.ActionButton{border-radius:4px;margin-top:10px;cursor:pointer;text-transform:capitalize;display:block;font-size:12px;text-align:center;padding:8px 20px;width:80px;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.ActionButton:hover{background:#FF6536;border:1px solid #FF3D00}";
+
+const Accordion = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.accordionEvent = index.createEvent(this, "helperAccordionAction", 7);
+    /**
+     * Title (top header)
+     */
+    this.headerTitle = '';
+    /**
+     * SubTitle (top header)
+     */
+    this.headerSubtitle = '';
+    /**
+     * Description
+     */
+    this.description = '';
+    /**
+     * Enables footer content
+     */
+    this.footer = false;
+    /**
+     * Enables footer button for tab deletion
+     */
+    this.deleteTab = false;
+    /**
+     * Activates postMessages as events for actions from the widget
+     */
+    this.postMessage = false;
+    /**
+     * Name of the event emitter by the action button
+     */
+    this.eventName = 'helperAccordionAction';
+    /**
+     * Collapsed
+     */
+    this.collapsed = true;
+    /**
+     * Language
+     */
+    this.language = 'en';
+  }
+  // @TODO fix the `any` type :)
+  connectedCallback() {
+    this.showContent = !this.collapsed;
+  }
+  toggleContent() {
+    this.showContent = !this.showContent;
+  }
+  deleteAction() {
+    if (this.postMessage) {
+      // @TODO maybe change the name type, this one sucks
+      window.postMessage({ type: this.eventName }, window.location.href);
+    }
+    this.accordionEvent.emit();
+  }
+  render() {
+    return (index.h("div", { class: "Wrapper" }, index.h("div", { class: "Header" }, index.h("p", { class: "Title" }, this.headerTitle), index.h("p", { class: "Subtitle" }, this.headerSubtitle), index.h("p", { class: "Subtitle" }, this.description), index.h("span", { class: "Expand", onClick: () => this.toggleContent() }, this.showContent ? '<' : '>')), this.showContent &&
+      index.h("div", null, index.h("div", { class: "Content" }, index.h("slot", { name: 'accordionContent' }), this.footer && this.showContent &&
+        index.h("div", null, this.deleteTab &&
+          index.h("span", { class: "ActionButton", onClick: () => this.deleteAction() }, translate$1('deleteTicket', this.language)))))));
+  }
+};
+Accordion.style = helperAccordionCss;
+
+const lotteryBulletCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Circle{cursor:pointer;color:#000000;display:block;background:#FFF;border:solid 2px #00958f;height:20px;width:20px;border-radius:50%;margin:0;display:flex;align-items:center;justify-content:center;user-select:none;font-size:12px;font-weight:600;position:relative}.Circle:hover{background:#aee4e2}.Circle.Selected{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{color:#707070;background:#D4D4D4;border:solid 2px #707070;cursor:default}.Circle.DisabledSelected{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 #707070;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;
+    this.select = () => {
+      if (this.selectable) {
+        this.isSelected = !this.isSelected;
+        this.bulletEvent.emit({
+          value: this.value,
+          selected: this.isSelected
+        });
+      }
+    };
+  }
+  render() {
+    return (index.h("div", { class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : ''), onClick: () => this.select() }, 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:350px}.Grid{margin-top:10px 0 10px 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}";
+
+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';
+    this.numbers = [];
+    this.selectedCounter = 0;
+  }
+  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
+        });
+      });
+    }
+  }
+  lotteryBulletSelectionHandler(event) {
+    this.numbers = this.numbers.map((item) => {
+      if (item.number == event.detail.value) {
+        return {
+          number: item.number,
+          selected: event.detail.selected,
+          selectable: item.selectable
+        };
+      }
+      return {
+        number: item.number,
+        selected: item.selected,
+        selectable: item.selectable
+      };
+    });
+    if (event.detail.selected) {
+      this.selectedCounter += 1;
+      if (this.selectedCounter == this.maximumAllowed) {
+        this.numbers = this.numbers.map((item) => {
+          return {
+            number: item.number,
+            selected: item.selected,
+            selectable: item.selected ? true : false
+          };
+        });
+        this.gridFilledEvent.emit({
+          id: this.ticketId,
+          index: this.gridIndex,
+          selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+        });
+      }
+    }
+    else {
+      if (this.selectedCounter == this.maximumAllowed) {
+        this.numbers = this.numbers.map((item) => {
+          return {
+            number: item.number,
+            selected: item.selected,
+            selectable: true
+          };
+        });
+        this.gridDirtyEvent.emit({
+          id: this.ticketId,
+          index: this.gridIndex,
+          selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+        });
+      }
+      this.selectedCounter -= 1;
+    }
+  }
+  async resetSelectionHandler(event) {
+    if (event.detail && event.detail == this.ticketId) {
+      this.selectedCounter = 0;
+      this.numbers = this.numbers.map((item) => {
+        return {
+          number: item.number,
+          selected: false,
+          selectable: this.selectable
+        };
+      });
+      this.gridDirtyEvent.emit({
+        id: this.ticketId,
+        index: this.gridIndex,
+        selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+      });
+    }
+  }
+  async autoSelectionHandler(event) {
+    if (event.detail && event.detail == this.ticketId) {
+      this.resetSelectionHandler(event);
+      let array = [...Array(this.totalNumbers).keys()]
+        .map(number => number + 1)
+        .sort(() => 0.5 - Math.random());
+      array = array.slice(0, this.minimumAllowed);
+      this.numbers = this.numbers.map((item) => {
+        return {
+          number: item.number,
+          selected: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,
+          selectable: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,
+        };
+      });
+      this.gridFilledEvent.emit({
+        id: this.ticketId,
+        index: this.gridIndex,
+        selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+      });
+      this.selectedCounter = this.maximumAllowed;
+    }
+  }
+  render() {
+    return (index.h("div", { class: "GridContainer" }, index.h("div", { class: "Grid" }, this.numbers.map((item) => index.h("div", null, index.h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected }))))));
+  }
+};
+LotteryGrid.style = lotteryGridCss;
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const TRANSLATIONS = {
+  en: {
+    loading: 'Loading, please wait ...',
+    error: 'It was an error while trying to fetch the data',
+    grid: 'Grid',
+    multiplier: 'Multiplier',
+    numberOfDraws: 'Number of draws',
+    wagerPerDraw: 'Wager per draw',
+    resetButton: 'Reset',
+    autoButton: 'I feel lucky'
+  },
+  ro: {
+    loading: 'Se incarca, va rugam asteptati ...',
+    error: 'A fost o eroare in timp ce asteptam datele',
+    grid: 'Grid',
+    multiplier: 'Multiplicator',
+    numberOfDraws: 'Numarul de extrageri',
+    wagerPerDraw: 'Pariul per extragere',
+    resetButton: 'Reseteaza',
+    autoButton: 'Ma simt norocos'
+  },
+};
+const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const lotteryTicketCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Toggle{cursor:pointer;margin-top:20px;display:inline-block}.ToggleSwitch{display:inline-block;background:#707070;border-radius:16px;width:58px;height:24px;position:relative;vertical-align:middle;transition:background 0.25s}.ToggleSwitch:before,.ToggleSwitch:after{content:\"\"}.ToggleSwitch:before{display:block;background:linear-gradient(to bottom, #fff 0%, #F1F1F1 100%);border-radius:50%;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.25);width:16px;height:16px;position:absolute;top:4px;left:4px;transition:left 0.25s}.Toggle:hover .ToggleSwitch:before{background:linear-gradient(to bottom, #fff 0%, #fff 100%);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.5)}.ToggleCheckbox:checked+.ToggleSwitch{background:#00ABA4}.ToggleCheckbox:checked+.ToggleSwitch:before{left:38px}.ToggleCheckbox{position:absolute;visibility:hidden}.Label{margin-right:5px;position:relative;top:2px;font-size:14px;font-weight:lighter;color:#000}input[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.NumberInput,.WagerInput{margin-top:10px;display:inline-flex;align-items:center}.NumberInput,.NumberInput *{box-sizing:border-box}.NumberInput button{cursor:pointer;outline:none;-webkit-appearance:none;background-color:transparent;border:none;align-items:center;justify-content:center;height:20px;margin:0;position:relative}.NumberInput button:after{display:inline-block;position:absolute;transform:translate(-50%, -50%) rotate(180deg);width:30px;align-items:center;text-align:center}.NumberInput button.Plus:after{transform:translate(-50%, -50%) rotate(0deg);width:30px;display:inline-flex;align-items:center;text-align:center}.NumberInput input[type=number],.WagerInput input[type=number]{max-width:50px;display:inline-flex;align-items:center;padding:4px 10px;text-align:center}.NumberInput input[type=number] .WagerInputTitle,.WagerInput input[type=number] .WagerInputTitle{font-size:14px;color:#000;padding:10px}.InputDefault{background-color:#F1F1F1;border-radius:4px;padding:5px;border:solid 1px #D4D4D4;color:#707070}.AutoButton{cursor:pointer;display:block;border-radius:4px;padding:8px 25px;width:max-content;margin:5px 0;border:1px solid #00958f;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.AutoButton:active{background:#00958f;color:#FFF}.ResetButton{cursor:pointer;display:block;border-radius:4px;padding:8px 25px;width:max-content;margin:5px 0;color:#000;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.ResetButton:hover{background:#FF6536;border:1px solid #FF3D00}.TicketGridBullets{background:#f1f1f1;border-radius:4px;padding:20px;margin-top:5px}.TicketGridBullets .TicketGridTitle{margin-top:0px}";
+
+const LotteryTicket = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ticketCompleted = index.createEvent(this, "ticketCompleted", 7);
+    this.autoSelection = index.createEvent(this, "autoSelection", 7);
+    this.resetSelection = index.createEvent(this, "resetSelection", 7);
+    this.stakeChange = index.createEvent(this, "stakeChange", 7);
+    this.multiplierChange = index.createEvent(this, "multiplierChange", 7);
+    /**
+     * Number of grids of a ticket
+     */
+    this.numberOfGrids = 1;
+    /**
+     * Option to have the ticket registered for multiple draws
+     */
+    this.multipleDraws = true;
+    /**
+     * Shows the reset button
+     */
+    this.resetButton = false;
+    /**
+     * Shows the auto-pick button
+     */
+    this.autoPick = false;
+    /**
+     * Language
+     */
+    this.language = 'en';
+    this.multiplier = false;
+    this.numberOfDraws = 1;
+    this.isLoading = true;
+    this.hasErrors = false;
+    this.ticketDone = false;
+  }
+  connectedCallback() {
+    let url = new URL(`${this.endpoint}/games/${this.gameId}`);
+    fetch(url.href)
+      .then((response) => {
+      if (response.ok) {
+        return response.json();
+      }
+      else {
+        // Throw error
+        this.hasErrors = true;
+      }
+    })
+      .then((data) => {
+      this.isLoading = false;
+      this.gameData = data;
+      this.grids = [...Array(data.rules.boards.length).keys()];
+    })
+      .catch((err) => {
+      this.isLoading = false;
+      this.hasErrors = true;
+      console.error('Error!', err);
+    });
+  }
+  multiplierChangeHandler(e) {
+    this.multiplier = e.target ? e.target.checked : false;
+    this.multiplierChange.emit(this.multiplier);
+  }
+  drawsChangeHandler(event) {
+    this.ticket = Object.assign(Object.assign({}, this.ticket), { draws: event });
+    this.ticketCompleted.emit(this.ticket);
+  }
+  gridFilledHandler(event) {
+    this.ticket = Object.assign(Object.assign({}, event.detail), { draws: this.numberOfDraws });
+    this.ticketDone = true;
+    this.ticketCompleted.emit(this.ticket);
+  }
+  toggleAutoSelection() {
+    this.ticketDone = true;
+    this.autoSelection.emit(this.ticketId);
+  }
+  toggleResetSelection() {
+    this.ticketDone = false;
+    this.resetSelection.emit(this.ticketId);
+  }
+  changeStake(event) {
+    this.stakeChange.emit({
+      ticketId: this.ticketId,
+      stake: event.target.value
+    });
+  }
+  render() {
+    if (this.isLoading) {
+      return (index.h("div", null, index.h("p", null, translate('loading', this.language))));
+    }
+    else {
+      if (this.hasErrors) {
+        return (index.h("div", null, index.h("p", null, translate('error', this.language))));
+      }
+      else {
+        const { rules } = this.gameData;
+        return (index.h("div", { class: "TicketContainer" }, index.h("p", null, this.gameData.name), this.resetButton && this.ticketDone &&
+          index.h("a", { class: "ResetButton", onClick: () => this.toggleResetSelection() }, translate('resetButton', this.language)), this.autoPick && !this.ticketDone &&
+          index.h("a", { class: "AutoButton", onClick: () => this.toggleAutoSelection() }, translate('autoButton', this.language)), this.grids.map((item, index$1) => index.h("div", { class: "TicketGridBullets" }, index.h("p", { class: "TicketGridTitle" }, translate('grid', this.language), " ", item), index.h("lottery-grid", { "grid-index": index$1, "maximum-allowed": rules.boards[index$1].maximumAllowed, "minimum-allowed": rules.boards[index$1].minimumAllowed, "total-numbers": rules.boards[index$1].totalNumbers, selectable: true, "reset-button": true, "auto-pick": true, "game-id": this.gameId, "ticket-id": this.ticketId, language: this.language }))), rules.multiplier &&
+          index.h("div", null, index.h("label", { class: "Toggle" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), ": "), index.h("input", { class: "ToggleCheckbox", type: "checkbox", onInput: (e) => this.multiplierChangeHandler(e) }), index.h("div", { class: "ToggleSwitch" }))), this.multipleDraws &&
+          index.h("div", { class: "TicketDraws" }, index.h("label", { class: "Label" }, translate('numberOfDraws', this.language), ": "), index.h("div", { class: "NumberInput" }, index.h("button", { onClick: () => this.numberOfDraws > 1 ? this.numberOfDraws-- : this.numberOfDraws = 1, class: "Minus" }, "-"), index.h("input", { class: "InputDefault", min: "1", value: this.numberOfDraws, type: "number" }), index.h("button", { onClick: () => this.numberOfDraws++, class: "Plus" }, "+"))), index.h("label", { class: "Label" }, translate('wagerPerDraw', this.language), ": "), index.h("div", { class: "WagerInput" }, rules.stakes.length > 1 ? index.h("div", null, index.h("select", { class: "InputDefault", onChange: (event) => this.changeStake(event) }, rules.stakes.map((item) => index.h("option", { value: item.amount }, item.amount, " ", item.currency)))) : index.h("div", null, index.h("input", { min: "1", value: rules.stakes[0].amount, type: "number", disabled: true }), index.h("p", { class: "WagerInputTitle" }, rules.stakes[0].currency)))));
+      }
+    }
+  }
+  static get watchers() { return {
+    "numberOfDraws": ["drawsChangeHandler"]
+  }; }
+};
+LotteryTicket.style = lotteryTicketCss;
+
+const lotteryTicketControllerCss = ":host{display:block}";
+
+const LotteryTicketController = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.deleteTicketEvent = index.createEvent(this, "deleteTicket", 7);
+    /**
+     * Endpoint URL for the source of data (NorWAy standard)
+     */
+    this.endpoint = '';
+    /**
+     * Ticket number
+     */
+    this.ticketId = 1;
+    /**
+     * Activates postMessages as events for actions from the widget
+     */
+    this.postMessage = false;
+    /**
+     * Name of the event emitter by the action button
+     */
+    this.eventName = 'deleteTicketAction';
+    /**
+     * Collapsed
+     */
+    this.collapsed = true;
+    /**
+     * Number of grids?
+     */
+    this.numberOfGrids = 1;
+    /**
+     * This toggles if the last ticket added should be expanded or not
+     */
+    this.last = false;
+    /**
+     * Language
+     */
+    this.language = 'en';
+    /**
+     * Shows the auto-pick button
+     */
+    this.autoPick = false;
+    /**
+     * Shows the reset button
+     */
+    this.resetButton = false;
+  }
+  // @TODO fix the `any` type
+  helperAccordionActionHandler() {
+    if (this.postMessage) {
+      window.postMessage({ type: this.eventName }, window.location.href);
+    }
+    this.deleteTicketEvent.emit({
+      ticketId: this.ticketId
+    });
+  }
+  render() {
+    return (index.h("div", null, index.h("helper-accordion", { "header-title": 'Ticket ' + this.ticketId, "header-subtitle": this.ticketDescription, footer: true, "delete-tab": true, collapsed: !this.last || this.collapsed, language: this.language }, index.h("div", { slot: "accordionContent" }, index.h("lottery-ticket", { endpoint: this.endpoint, "game-id": this.gameId, "ticket-id": this.ticketId, "number-of-grids": this.numberOfGrids, language: this.language, "reset-button": this.resetButton, "auto-pick": this.autoPick })))));
+  }
+};
+LotteryTicketController.style = lotteryTicketControllerCss;
+
+exports.helper_accordion = Accordion;
+exports.lottery_bullet = LotteryBullet;
+exports.lottery_grid = LotteryGrid;
+exports.lottery_ticket = LotteryTicket;
+exports.lottery_ticket_controller = LotteryTicketController;

package/dist/cjs/{index-4814ed9d.js → index-c560cdc6.js}

@@ -50,7 +50,7 @@ const supportsConstructibleStylesheets = /*@__PURE__*/ (() => {
 const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
     if (listeners) {
         listeners.map(([flags, name, method]) => {
-            const target = elm;
+            const target = getHostListenerTarget(elm, flags) ;
             const handler = hostListenerProxy(hostRef, method);
             const opts = hostListenerOpts(flags);
             plt.ael(target, name, handler, opts);
@@ -74,6 +74,11 @@ const hostListenerProxy = (hostRef, methodName) => (ev) => {
         consoleError(e);
     }
 };
+const getHostListenerTarget = (elm, flags) => {
+    if (flags & 4 /* TargetDocument */)
+        return doc;
+    return elm;
+};
 // prettier-ignore
 const hostListenerOpts = (flags) => (flags & 2 /* Capture */) !== 0;
 const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
@@ -790,6 +795,7 @@ const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propNam
 const setValue = (ref, propName, newVal, cmpMeta) => {
     // check our new property value against our internal value
     const hostRef = getHostRef(ref);
+    const elm = hostRef.$hostElement$ ;
     const oldVal = hostRef.$instanceValues$.get(propName);
     const flags = hostRef.$flags$;
     const instance = hostRef.$lazyInstance$ ;
@@ -802,6 +808,22 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
         // set our new value!
         hostRef.$instanceValues$.set(propName, newVal);
         if (instance) {
+            // get an array of method names of watch functions to call
+            if (cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
+                const watchMethods = cmpMeta.$watchers$[propName];
+                if (watchMethods) {
+                    // this instance is watching for when this property changed
+                    watchMethods.map((watchMethodName) => {
+                        try {
+                            // fire off each of the watch methods that are watching this property
+                            instance[watchMethodName](newVal, oldVal, propName);
+                        }
+                        catch (e) {
+                            consoleError(e, elm);
+                        }
+                    });
+                }
+            }
             if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
                 // looks like this value actually changed, so we've got work to do!
                 // but only if we've already rendered, otherwise just chill out
@@ -814,6 +836,9 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 };
 const proxyComponent = (Cstr, cmpMeta, flags) => {
     if (cmpMeta.$members$) {
+        if (Cstr.watchers) {
+            cmpMeta.$watchers$ = Cstr.watchers;
+        }
         // It's better to have a const than two Object.entries()
         const members = Object.entries(cmpMeta.$members$);
         const prototype = Cstr.prototype;
@@ -918,6 +943,12 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
                 endLoad();
             }
             if (!Cstr.isProxied) {
+                // we've never proxied this Constructor before
+                // let's add the getters/setters to its prototype before
+                // the first time we create an instance of the implementation
+                {
+                    cmpMeta.$watchers$ = Cstr.watchers;
+                }
                 proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
                 Cstr.isProxied = true;
             }
@@ -941,6 +972,9 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
             {
                 hostRef.$flags$ &= ~8 /* isConstructingInstance */;
             }
+            {
+                hostRef.$flags$ |= 128 /* isWatchReady */;
+            }
             endNewInstance();
             fireConnectedCallback(hostRef.$lazyInstance$);
         }
@@ -1063,6 +1097,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             {
                 cmpMeta.$listeners$ = compactMeta[3];
             }
+            {
+                cmpMeta.$watchers$ = {};
+            }
             const tagName = cmpMeta.$tagName$;
             const HostElement = class extends HTMLElement {
                 // StencilLazyHost

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4814ed9d.js');
+const index = require('./index-c560cdc6.js');
 
 /*
  Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["helper-accordion_2.cjs",[[1,"lottery-ticket-controller",{"endpoint":[1],"ticketId":[2,"ticket-id"],"ticketDescription":[1,"ticket-description"],"gameId":[1,"game-id"],"postMessage":[4,"post-message"],"eventName":[1,"event-name"],"collapsed":[4],"numberOfGrids":[2,"number-of-grids"],"last":[4],"language":[1],"autoPick":[4,"auto-pick"],"resetButton":[4,"reset-button"]},[[0,"helperAccordionAction","helperAccordionActionHandler"]]],[1,"helper-accordion",{"ticketHistoryFlag":[4,"ticket-history-flag"],"headerTitle":[1,"header-title"],"headerSubtitle":[1,"header-subtitle"],"description":[1],"footer":[4],"deleteTab":[4,"delete-tab"],"postMessage":[4,"post-message"],"eventName":[1,"event-name"],"collapsed":[4],"language":[1],"showContent":[32]}]]]], options);
+  return index.bootstrapLazy([["helper-accordion_5.cjs",[[1,"lottery-ticket-controller",{"endpoint":[1],"ticketId":[2,"ticket-id"],"ticketDescription":[1,"ticket-description"],"gameId":[1,"game-id"],"postMessage":[4,"post-message"],"eventName":[1,"event-name"],"collapsed":[4],"numberOfGrids":[2,"number-of-grids"],"last":[4],"language":[1],"autoPick":[4,"auto-pick"],"resetButton":[4,"reset-button"]},[[0,"helperAccordionAction","helperAccordionActionHandler"]]],[1,"lottery-ticket",{"endpoint":[1],"gameId":[1,"game-id"],"numberOfGrids":[2,"number-of-grids"],"multipleDraws":[4,"multiple-draws"],"ticketId":[2,"ticket-id"],"resetButton":[4,"reset-button"],"autoPick":[4,"auto-pick"],"language":[1],"multiplier":[32],"numberOfDraws":[32],"isLoading":[32],"hasErrors":[32],"ticketDone":[32]},[[0,"gridFilled","gridFilledHandler"]]],[1,"helper-accordion",{"headerTitle":[1,"header-title"],"headerSubtitle":[1,"header-subtitle"],"description":[1],"footer":[4],"deleteTab":[4,"delete-tab"],"postMessage":[4,"post-message"],"eventName":[1,"event-name"],"collapsed":[4],"language":[1],"showContent":[32]}],[1,"lottery-grid",{"ticketId":[2,"ticket-id"],"totalNumbers":[2,"total-numbers"],"gameId":[1,"game-id"],"maximumAllowed":[2,"maximum-allowed"],"minimumAllowed":[2,"minimum-allowed"],"selectable":[4],"selectedNumbers":[1,"selected-numbers"],"displaySelected":[4,"display-selected"],"language":[1],"gridIndex":[2,"grid-index"],"numbers":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{"value":[1],"selectable":[4],"isSelected":[4,"is-selected"]}]]]], options);
   });
 };
 

package/dist/cjs/lottery-ticket-controller.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-4814ed9d.js');
+const index = require('./index-c560cdc6.js');
 
 /*
  Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["helper-accordion_2.cjs",[[1,"lottery-ticket-controller",{"endpoint":[1],"ticketId":[2,"ticket-id"],"ticketDescription":[1,"ticket-description"],"gameId":[1,"game-id"],"postMessage":[4,"post-message"],"eventName":[1,"event-name"],"collapsed":[4],"numberOfGrids":[2,"number-of-grids"],"last":[4],"language":[1],"autoPick":[4,"auto-pick"],"resetButton":[4,"reset-button"]},[[0,"helperAccordionAction","helperAccordionActionHandler"]]],[1,"helper-accordion",{"ticketHistoryFlag":[4,"ticket-history-flag"],"headerTitle":[1,"header-title"],"headerSubtitle":[1,"header-subtitle"],"description":[1],"footer":[4],"deleteTab":[4,"delete-tab"],"postMessage":[4,"post-message"],"eventName":[1,"event-name"],"collapsed":[4],"language":[1],"showContent":[32]}]]]], options);
+  return index.bootstrapLazy([["helper-accordion_5.cjs",[[1,"lottery-ticket-controller",{"endpoint":[1],"ticketId":[2,"ticket-id"],"ticketDescription":[1,"ticket-description"],"gameId":[1,"game-id"],"postMessage":[4,"post-message"],"eventName":[1,"event-name"],"collapsed":[4],"numberOfGrids":[2,"number-of-grids"],"last":[4],"language":[1],"autoPick":[4,"auto-pick"],"resetButton":[4,"reset-button"]},[[0,"helperAccordionAction","helperAccordionActionHandler"]]],[1,"lottery-ticket",{"endpoint":[1],"gameId":[1,"game-id"],"numberOfGrids":[2,"number-of-grids"],"multipleDraws":[4,"multiple-draws"],"ticketId":[2,"ticket-id"],"resetButton":[4,"reset-button"],"autoPick":[4,"auto-pick"],"language":[1],"multiplier":[32],"numberOfDraws":[32],"isLoading":[32],"hasErrors":[32],"ticketDone":[32]},[[0,"gridFilled","gridFilledHandler"]]],[1,"helper-accordion",{"headerTitle":[1,"header-title"],"headerSubtitle":[1,"header-subtitle"],"description":[1],"footer":[4],"deleteTab":[4,"delete-tab"],"postMessage":[4,"post-message"],"eventName":[1,"event-name"],"collapsed":[4],"language":[1],"showContent":[32]}],[1,"lottery-grid",{"ticketId":[2,"ticket-id"],"totalNumbers":[2,"total-numbers"],"gameId":[1,"game-id"],"maximumAllowed":[2,"maximum-allowed"],"minimumAllowed":[2,"minimum-allowed"],"selectable":[4],"selectedNumbers":[1,"selected-numbers"],"displaySelected":[4,"display-selected"],"language":[1],"gridIndex":[2,"grid-index"],"numbers":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{"value":[1],"selectable":[4],"isSelected":[4,"is-selected"]}]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -13,6 +13,24 @@
       "tags": [
         "helper-accordion"
       ]
+    },
+    {
+      "name": "@everymatrix/lottery-bullet",
+      "tags": [
+        "lottery-bullet"
+      ]
+    },
+    {
+      "name": "@everymatrix/lottery-grid",
+      "tags": [
+        "lottery-grid"
+      ]
+    },
+    {
+      "name": "@everymatrix/lottery-ticket",
+      "tags": [
+        "lottery-ticket"
+      ]
     }
   ],
   "bundles": []