@everymatrix/helper-filters 0.1.2 → 0.1.3

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

@@ -0,0 +1,137 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0c5bb1ff.js');
+require('@everymatrix/helper-modal');
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const TRANSLATIONS = {
+  en: {
+    filterOpen: 'Filter',
+    filterClear: 'Clear',
+    filterModalTicketTitle: 'Ticket Results',
+    filterModalDrawTitle: 'Draws Results History',
+    filterTicketPlaceholder: 'Search for a ticket ID',
+    filterDrawPlaceholder: 'Search for a draw ID',
+    filterDateRangePlaceholder: 'Date Range',
+    filterModalButton: 'Search',
+    filterFromCalendar: 'From',
+    filterToCalendar: 'To',
+    filterOrDate: 'or search by date'
+  },
+  ro: {
+    filterOpen: 'Filtrare',
+    filterClear: 'Stergere',
+    filterModalTicketTitle: 'Rezultatele biletelor',
+    filterModalDrawTitle: 'Rezultatele draw-urilor',
+    filterTicketPlaceholder: 'Cauta ID bilet',
+    filterDrawPlaceholder: 'Cauta ID draw',
+    filterDateRangePlaceholder: 'Perioada',
+    filterModalButton: 'Cauta',
+    filterOrDate: 'sau cauta dupa data'
+  },
+};
+const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const helperFiltersCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.FilterButtonsWrapper{display:flex;justify-content:flex-end;gap:5px}.FilterButtonsWrapper .FilterOpen{cursor:pointer;border-radius:4px;padding:8px 15px;width:max-content;border:1px solid #00958f;background:#00958f;color:#FFF;font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterButtonsWrapper .FilterOpen:hover{background:#00958f;color:#FFF}.FilterButtonsWrapper .FilterClear{cursor:pointer;border-radius:4px;padding:8px 15px;width:max-content;border:1px solid #00958f;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterButtonsWrapper .FilterClear:hover{background:#00958f;color:#FFF}.FilterModalHeader,.FilterModalBody,.FilterModalFooter{display:flex;flex-direction:column;gap:5px;align-items:center;margin:20px 0}.FilterModalHeader .FilterModalTitle,.FilterModalBody .FilterModalTitle,.FilterModalFooter .FilterModalTitle{margin:0;padding:0;font-weight:700;font-size:16px;color:#009993;text-transform:uppercase}.FilterModalHeader .FilterModalSearch,.FilterModalBody .FilterModalSearch,.FilterModalFooter .FilterModalSearch{border-radius:4px;background:#e8ebef;color:#263445;width:100%;height:26px;max-width:280px;padding:5px;font-size:15px;border:none;outline:#009993}.FilterModalHeader .FilterCalendarWrapper,.FilterModalBody .FilterCalendarWrapper,.FilterModalFooter .FilterCalendarWrapper{display:flex;gap:5px}.FilterModalHeader .FilterCalendarWrapper .VaadinDatePicker,.FilterModalBody .FilterCalendarWrapper .VaadinDatePicker,.FilterModalFooter .FilterCalendarWrapper .VaadinDatePicker{width:50%;max-width:143px}.FilterModalHeader .FilterModalButton,.FilterModalBody .FilterModalButton,.FilterModalFooter .FilterModalButton{cursor:pointer;border-radius:4px;padding:8px 60px;width:max-content;margin:5px;border:1px solid #00958f;background:#00958f;color:#FFF;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.FilterModalHeader .FilterModalButton:hover,.FilterModalBody .FilterModalButton:hover,.FilterModalFooter .FilterModalButton:hover{background:#00958f;color:#FFF}.FilterModalHeader p,.FilterModalBody p,.FilterModalFooter p{margin:5px 0}";
+
+const HelperFilters = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.filterDraw = index.createEvent(this, "filterDraw", 7);
+    this.filterSelection = index.createEvent(this, "filterSelection", 7);
+    this.filterSelectionReset = index.createEvent(this, "filterSelectionReset", 7);
+    /**
+     * Check if show the filter option by id
+     */
+    this.showFilterId = true;
+    /**
+     * Choose if filter by draw ID or ticket ID. By default is draw ID.
+     */
+    this.activateTicketSearch = false;
+    /**
+     * Game ID
+     */
+    this.gameId = '';
+    /**
+     * Player ID
+     */
+    this.playerId = '';
+    /**
+     * Session ID
+     */
+    this.session = '';
+    /**
+     * Instead of customEvents the widget triggers postMessages
+     */
+    this.postMessage = false;
+    /**
+     * Language
+     */
+    this.language = 'en';
+    this.showFilterModal = false;
+    this.showClearButton = false;
+    this.filterData = {};
+    this.filterDataReset = { ticketDrawId: '', filterFromCalendar: '', filterToCalendar: '' };
+  }
+  // reset field values each time the filter modal opens
+  componentDidRender() {
+    this.filterData.ticketDrawId = null;
+    this.filterData.filterFromCalendar = null;
+    this.filterData.filterToCalendar = null;
+    // @TODO: to way binding?
+    if (document.getElementById('#FilterById'))
+      document.getElementById('#FilterById').value = '';
+  }
+  filterSelectionHandler(event) {
+    if (this.postMessage)
+      window.postMessage({ type: 'filterSelection', event }, window.location.href);
+    if (this.filterData.ticketDrawId)
+      this.filterDraw.emit(event);
+    if (this.filterData.filterFromCalendar || this.filterData.filterToCalendar)
+      this.filterSelection.emit(event);
+  }
+  filterSelectionResetHandler(event) {
+    if (this.postMessage)
+      window.postMessage({ type: 'filterSelectionReset', event }, window.location.href);
+    this.filterSelectionReset.emit(event);
+  }
+  modalCloseEvent() {
+    this.showFilterModal = false;
+  }
+  // Toggle filter modal
+  toggleFilterModal() {
+    this.showFilterModal = true;
+  }
+  // Filter search
+  filterSearch() {
+    this.modalCloseEvent();
+    this.showClearButton = true;
+    this.filterSelectionHandler(this.filterData);
+  }
+  resetSearch() {
+    this.showClearButton = false;
+    this.filterSelectionResetHandler(this.filterDataReset);
+    this.filterData = {};
+  }
+  handleTicketDrawId(event) {
+    this.filterData.ticketDrawId = event.target.value;
+  }
+  handleFilterFrom(event) {
+    this.filterData.filterFromCalendar = new Date(event.target.value).toISOString();
+  }
+  handleFilterTo(event) {
+    this.filterData.filterToCalendar = new Date(event.target.value).toISOString();
+  }
+  render() {
+    return (index.h("div", { class: "HelperFilters" }, index.h("div", { class: "FilterButtonsWrapper" }, index.h("button", { class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate('filterOpen', this.language)), this.showClearButton ? index.h("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate('filterClear', this.language)) : null), index.h("helper-modal", { "title-modal": "Filter Modal", visible: this.showFilterModal }, index.h("div", { class: "FilterModalHeader" }, index.h("h3", { class: "FilterModalTitle" }, this.activateTicketSearch ? translate('filterModalTicketTitle', this.language) : translate('filterModalDrawTitle', this.language))), index.h("div", { class: "FilterModalBody" }, index.h("input", { id: "FilterById", type: "text", value: this.filterData.ticketDrawId, onInput: (event) => this.handleTicketDrawId(event), class: "FilterModalSearch", placeholder: this.activateTicketSearch ? translate('filterTicketPlaceholder', this.language) : translate('filterDrawPlaceholder', this.language) }), index.h("p", null, translate('filterOrDate', this.language)), index.h("div", { class: "FilterCalendarWrapper" })), index.h("div", { class: "FilterModalFooter" }, index.h("button", { class: "FilterModalButton", onClick: () => this.filterSearch() }, translate('filterModalButton', this.language))))));
+  }
+};
+HelperFilters.style = helperFiltersCss;
+
+exports.helper_filters = HelperFilters;

package/dist/cjs/helper-filters.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-979fa60b.js');
+const index = require('./index-0c5bb1ff.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-filters_2.cjs",[[1,"helper-filters",{"showFilterId":[4,"show-filter-id"],"activateTicketSearch":[4,"activate-ticket-search"],"gameId":[1,"game-id"],"playerId":[1,"player-id"],"session":[1],"postMessage":[4,"post-message"],"language":[1],"showFilterModal":[32],"showClearButton":[32],"filterData":[32],"filterDataReset":[32]},[[0,"modalCloseEvent","modalCloseEvent"]]],[1,"helper-modal",{"titleModal":[1,"title-modal"],"visible":[1540]}]]]], options);
+  return index.bootstrapLazy([["helper-filters.cjs",[[1,"helper-filters",{"showFilterId":[4,"show-filter-id"],"activateTicketSearch":[4,"activate-ticket-search"],"gameId":[1,"game-id"],"playerId":[1,"player-id"],"session":[1],"postMessage":[4,"post-message"],"language":[1],"showFilterModal":[32],"showClearButton":[32],"filterData":[32],"filterDataReset":[32]},[[0,"modalCloseEvent","modalCloseEvent"]]]]]], options);
 });

package/dist/cjs/{index-979fa60b.js → index-0c5bb1ff.js}

@@ -502,14 +502,11 @@ const patch = (oldVNode, newVNode) => {
     const elm = (newVNode.$elm$ = oldVNode.$elm$);
     const oldChildren = oldVNode.$children$;
     const newChildren = newVNode.$children$;
-    const tag = newVNode.$tag$;
     const text = newVNode.$text$;
     if (text === null) {
         // element node
         {
-            if (tag === 'slot')
-                ;
-            else {
+            {
                 // either this is the first render of an element OR it's an update
                 // AND we already know it's possible it could have changed
                 // this updates the element's css classes, attrs, props, listeners, etc.
@@ -542,14 +539,9 @@ const patch = (oldVNode, newVNode) => {
 };
 const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
-    const cmpMeta = hostRef.$cmpMeta$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
     const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
     hostTagName = hostElm.tagName;
-    if (cmpMeta.$attrsToReflect$) {
-        rootVnode.$attrs$ = rootVnode.$attrs$ || {};
-        cmpMeta.$attrsToReflect$.map(([propName, attribute]) => (rootVnode.$attrs$[attribute] = hostElm[propName]));
-    }
     rootVnode.$tag$ = null;
     rootVnode.$flags$ |= 4 /* isHost */;
     hostRef.$vnode$ = rootVnode;
@@ -686,7 +678,11 @@ const postUpdateComponent = (hostRef) => {
     const tagName = hostRef.$cmpMeta$.$tagName$;
     const elm = hostRef.$hostElement$;
     const endPostUpdate = createTime('postUpdate', tagName);
+    const instance = hostRef.$lazyInstance$ ;
     const ancestorComponent = hostRef.$ancestorComponent$;
+    {
+        safeCall(instance, 'componentDidRender');
+    }
     if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
         hostRef.$flags$ |= 64 /* hasLoadedComponent */;
         {
@@ -896,9 +892,6 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                 .map(([propName, m]) => {
                 const attrName = m[1] || propName;
                 attrNameToPropName.set(attrName, propName);
-                if (m[0] & 512 /* ReflectAttr */) {
-                    cmpMeta.$attrsToReflect$.push([propName, attrName]);
-                }
                 return attrName;
             });
         }
@@ -1059,9 +1052,6 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             {
                 cmpMeta.$listeners$ = compactMeta[3];
             }
-            {
-                cmpMeta.$attrsToReflect$ = [];
-            }
             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-979fa60b.js');
+const index = require('./index-0c5bb1ff.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-filters_2.cjs",[[1,"helper-filters",{"showFilterId":[4,"show-filter-id"],"activateTicketSearch":[4,"activate-ticket-search"],"gameId":[1,"game-id"],"playerId":[1,"player-id"],"session":[1],"postMessage":[4,"post-message"],"language":[1],"showFilterModal":[32],"showClearButton":[32],"filterData":[32],"filterDataReset":[32]},[[0,"modalCloseEvent","modalCloseEvent"]]],[1,"helper-modal",{"titleModal":[1,"title-modal"],"visible":[1540]}]]]], options);
+  return index.bootstrapLazy([["helper-filters.cjs",[[1,"helper-filters",{"showFilterId":[4,"show-filter-id"],"activateTicketSearch":[4,"activate-ticket-search"],"gameId":[1,"game-id"],"playerId":[1,"player-id"],"session":[1],"postMessage":[4,"post-message"],"language":[1],"showFilterModal":[32],"showClearButton":[32],"filterData":[32],"filterDataReset":[32]},[[0,"modalCloseEvent","modalCloseEvent"]]]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -7,13 +7,6 @@
     "version": "2.15.2",
     "typescriptVersion": "4.5.4"
   },
-  "collections": [
-    {
-      "name": "@everymatrix/helper-modal",
-      "tags": [
-        "helper-modal"
-      ]
-    }
-  ],
+  "collections": [],
   "bundles": []
 }

package/dist/collection/components/helper-filters/helper-filters.css

@@ -111,4 +111,9 @@
 .FilterModalFooter .FilterModalButton:hover {
   background: #00958f;
   color: #FFF;
+}
+.FilterModalHeader p,
+.FilterModalBody p,
+.FilterModalFooter p {
+  margin: 5px 0;
 }

package/dist/collection/components/helper-filters/helper-filters.js

@@ -1,6 +1,7 @@
 import { Component, h, State, Prop, Event, Listen } from '@stencil/core';
 import { translate } from '../../utils/locale.utils';
-import '@vaadin/date-picker';
+// import '@vaadin/date-picker';
+// import '@vaadin/vaadin-date-picker/vaadin-date-picker.js';
 import '@everymatrix/helper-modal';
 export class HelperFilters {
   constructor() {
@@ -35,23 +36,30 @@ export class HelperFilters {
     this.showFilterModal = false;
     this.showClearButton = false;
     this.filterData = {};
-    this.filterDataReset = { drawTicketId: '', filterFromCalendar: '', filterToCalendar: '' };
+    this.filterDataReset = { ticketDrawId: '', filterFromCalendar: '', filterToCalendar: '' };
+  }
+  // reset field values each time the filter modal opens
+  componentDidRender() {
+    this.filterData.ticketDrawId = null;
+    this.filterData.filterFromCalendar = null;
+    this.filterData.filterToCalendar = null;
+    // @TODO: to way binding?
+    if (document.getElementById('#FilterById'))
+      document.getElementById('#FilterById').value = '';
   }
   filterSelectionHandler(event) {
-    if (this.postMessage) {
+    if (this.postMessage)
       window.postMessage({ type: 'filterSelection', event }, window.location.href);
-    }
-    else {
+    if (this.filterData.ticketDrawId)
+      this.filterDraw.emit(event);
+    if (this.filterData.filterFromCalendar || this.filterData.filterToCalendar)
       this.filterSelection.emit(event);
-    }
+    ;
   }
   filterSelectionResetHandler(event) {
-    if (this.postMessage) {
+    if (this.postMessage)
       window.postMessage({ type: 'filterSelectionReset', event }, window.location.href);
-    }
-    else {
-      this.filterSelectionReset.emit(event);
-    }
+    this.filterSelectionReset.emit(event);
   }
   modalCloseEvent() {
     this.showFilterModal = false;
@@ -69,9 +77,10 @@ export class HelperFilters {
   resetSearch() {
     this.showClearButton = false;
     this.filterSelectionResetHandler(this.filterDataReset);
+    this.filterData = {};
   }
-  handleDrawTicketId(event) {
-    this.filterData.drawTicketId = event.target.value;
+  handleTicketDrawId(event) {
+    this.filterData.ticketDrawId = event.target.value;
   }
   handleFilterFrom(event) {
     this.filterData.filterFromCalendar = new Date(event.target.value).toISOString();
@@ -88,10 +97,9 @@ export class HelperFilters {
         h("div", { class: "FilterModalHeader" },
           h("h3", { class: "FilterModalTitle" }, this.activateTicketSearch ? translate('filterModalTicketTitle', this.language) : translate('filterModalDrawTitle', this.language))),
         h("div", { class: "FilterModalBody" },
-          h("input", { type: "text", value: this.filterData.drawTicketId, onInput: (event) => this.handleDrawTicketId(event), class: "FilterModalSearch", placeholder: this.activateTicketSearch ? translate('filterTicketPlaceholder', this.language) : translate('filterDrawPlaceholder', this.language) }),
-          h("div", { class: "FilterCalendarWrapper" },
-            h("vaadin-date-picker", { value: this.filterData.filterFromCalendar, onChange: (event) => this.handleFilterFrom(event), placeholder: translate('filterFromCalendar', this.language), class: "VaadinDatePicker" }),
-            h("vaadin-date-picker", { value: this.filterData.filterToCalendar, onChange: (event) => this.handleFilterTo(event), placeholder: translate('filterToCalendar', this.language), class: "VaadinDatePicker" }))),
+          h("input", { id: "FilterById", type: "text", value: this.filterData.ticketDrawId, onInput: (event) => this.handleTicketDrawId(event), class: "FilterModalSearch", placeholder: this.activateTicketSearch ? translate('filterTicketPlaceholder', this.language) : translate('filterDrawPlaceholder', this.language) }),
+          h("p", null, translate('filterOrDate', this.language)),
+          h("div", { class: "FilterCalendarWrapper" })),
         h("div", { class: "FilterModalFooter" },
           h("button", { class: "FilterModalButton", onClick: () => this.filterSearch() }, translate('filterModalButton', this.language))))));
   }
@@ -238,6 +246,25 @@ export class HelperFilters {
     "filterDataReset": {}
   }; }
   static get events() { return [{
+      "method": "filterDraw",
+      "name": "filterDraw",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "HelperFilters",
+        "resolved": "HelperFilters",
+        "references": {
+          "HelperFilters": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
       "method": "filterSelection",
       "name": "filterSelection",
       "bubbles": true,

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

@@ -11,7 +11,8 @@ const TRANSLATIONS = {
     filterDateRangePlaceholder: 'Date Range',
     filterModalButton: 'Search',
     filterFromCalendar: 'From',
-    filterToCalendar: 'To'
+    filterToCalendar: 'To',
+    filterOrDate: 'or search by date'
   },
   ro: {
     filterOpen: 'Filtrare',
@@ -21,7 +22,8 @@ const TRANSLATIONS = {
     filterTicketPlaceholder: 'Cauta ID bilet',
     filterDrawPlaceholder: 'Cauta ID draw',
     filterDateRangePlaceholder: 'Perioada',
-    filterModalButton: 'Cauta'
+    filterModalButton: 'Cauta',
+    filterOrDate: 'sau cauta dupa data'
   },
 };
 export const translate = (key, customLang) => {