@everymatrix/helper-filters 0.1.5 → 0.1.7

package/dist/components/helper-modal.js

@@ -0,0 +1,6 @@
+import { H as HelperModal$1, d as defineCustomElement$1 } from './helper-modal2.js';
+
+const HelperModal = HelperModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HelperModal, defineCustomElement };

package/dist/components/helper-modal2.js

@@ -0,0 +1,58 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+/**
+ * @name isMobile
+ * @description A method that returns if the browser used to access the app is from a mobile device or not
+ * @param {String} userAgent window.navigator.userAgent
+ * @returns {Boolean} true or false
+ */
+const isMobile = (userAgent) => {
+  return !!(userAgent.toLowerCase().match(/android/i) ||
+    userAgent.toLowerCase().match(/blackberry|bb/i) ||
+    userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
+    userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
+};
+
+const helperModalCss = ":host{display:block}.HelperModalWrapper{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.7);opacity:0;visibility:hidden;transform:scale(1.1);transition:visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;z-index:1}.HelperModalVisible{opacity:1;visibility:visible;transform:scale(1);transition:visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s}.HelperModalContent{position:relative;border:solid 1px #848e97;box-shadow:2px 2px 2px rgba(0, 0, 0, 0.007);font-size:14px;padding:10px 10px 5px 10px;background-color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:4px;width:600px;max-height:600px;overflow-y:scroll}.HelperModalMobileContent{background:#FFF;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:4px;width:80%;max-height:350px}.HelperModalClose{cursor:pointer;position:absolute;top:15px;right:15px;font-size:20px;color:#000}.HelperModalMobileClose{position:absolute;top:15px;right:15px;font-size:20px;color:#000}";
+
+const HelperModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.cancel = createEvent(this, "modalCloseEvent", 7);
+    /**
+     * Toggles if the helper is visible or not
+     */
+    this.visible = true;
+    this.userAgent = window.navigator.userAgent;
+  }
+  handleHelperModalClose() {
+    this.visible = false;
+    this.cancel.emit();
+  }
+  ;
+  render() {
+    return ((this.visible &&
+      h("div", { class: this.visible ? "HelperModalWrapper HelperModalVisible" : "HelperModalWrapper" }, h("div", { class: "HelperModalWrapper HelperModalVisible" }, h("div", { class: "HelperModalContent" + (isMobile(this.userAgent) ? ' HelperModalMobileContent' : '') }, h("span", { class: "HelperModalClose" + (isMobile(this.userAgent) ? ' HelperModalMobileClose' : ''), onClick: this.handleHelperModalClose.bind(this) }, "X"), h("slot", null))))));
+  }
+  static get style() { return helperModalCss; }
+}, [1, "helper-modal", {
+    "titleModal": [1, "title-modal"],
+    "visible": [1540]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["helper-modal"];
+  components.forEach(tagName => { switch (tagName) {
+    case "helper-modal":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HelperModal);
+      }
+      break;
+  } });
+}
+
+export { HelperModal as H, defineCustomElement as d };

package/dist/esm/helper-filters.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-f5eea413.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-1b3528e3.js';
 
 /*
  Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["helper-filters",[[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);
+  return bootstrapLazy([["helper-filters_2",[[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);
 });

package/dist/esm/helper-filters_2.entry.js

@@ -0,0 +1,170 @@
+import { r as registerInstance, c as createEvent, h } from './index-1b3528e3.js';
+import '@vaadin/date-picker';
+
+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) {
+    registerInstance(this, hostRef);
+    this.filterDraw = createEvent(this, "filterDraw", 7);
+    this.filterSelection = createEvent(this, "filterSelection", 7);
+    this.filterSelectionReset = 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 (h("div", { class: "HelperFilters" }, h("div", { class: "FilterButtonsWrapper" }, h("button", { class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate('filterOpen', this.language)), this.showClearButton ? h("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate('filterClear', this.language)) : null), h("helper-modal", { "title-modal": "Filter Modal", visible: this.showFilterModal }, h("div", { class: "FilterModalHeader" }, h("h3", { class: "FilterModalTitle" }, this.activateTicketSearch ? translate('filterModalTicketTitle', this.language) : translate('filterModalDrawTitle', this.language))), h("div", { class: "FilterModalBody" }, 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("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("div", { class: "FilterModalFooter" }, h("button", { class: "FilterModalButton", onClick: () => this.filterSearch() }, translate('filterModalButton', this.language))))));
+  }
+};
+HelperFilters.style = helperFiltersCss;
+
+/**
+ * @name isMobile
+ * @description A method that returns if the browser used to access the app is from a mobile device or not
+ * @param {String} userAgent window.navigator.userAgent
+ * @returns {Boolean} true or false
+ */
+const isMobile = (userAgent) => {
+  return !!(userAgent.toLowerCase().match(/android/i) ||
+    userAgent.toLowerCase().match(/blackberry|bb/i) ||
+    userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
+    userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
+};
+
+const helperModalCss = ":host{display:block}.HelperModalWrapper{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.7);opacity:0;visibility:hidden;transform:scale(1.1);transition:visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;z-index:1}.HelperModalVisible{opacity:1;visibility:visible;transform:scale(1);transition:visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s}.HelperModalContent{position:relative;border:solid 1px #848e97;box-shadow:2px 2px 2px rgba(0, 0, 0, 0.007);font-size:14px;padding:10px 10px 5px 10px;background-color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:4px;width:600px;max-height:600px;overflow-y:scroll}.HelperModalMobileContent{background:#FFF;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:4px;width:80%;max-height:350px}.HelperModalClose{cursor:pointer;position:absolute;top:15px;right:15px;font-size:20px;color:#000}.HelperModalMobileClose{position:absolute;top:15px;right:15px;font-size:20px;color:#000}";
+
+const HelperModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.cancel = createEvent(this, "modalCloseEvent", 7);
+    /**
+     * Toggles if the helper is visible or not
+     */
+    this.visible = true;
+    this.userAgent = window.navigator.userAgent;
+  }
+  handleHelperModalClose() {
+    this.visible = false;
+    this.cancel.emit();
+  }
+  ;
+  render() {
+    return ((this.visible &&
+      h("div", { class: this.visible ? "HelperModalWrapper HelperModalVisible" : "HelperModalWrapper" }, h("div", { class: "HelperModalWrapper HelperModalVisible" }, h("div", { class: "HelperModalContent" + (isMobile(this.userAgent) ? ' HelperModalMobileContent' : '') }, h("span", { class: "HelperModalClose" + (isMobile(this.userAgent) ? ' HelperModalMobileClose' : ''), onClick: this.handleHelperModalClose.bind(this) }, "X"), h("slot", null))))));
+  }
+};
+HelperModal.style = helperModalCss;
+
+export { HelperFilters as helper_filters, HelperModal as helper_modal };

package/dist/esm/{index-f5eea413.js → index-1b3528e3.js}

@@ -480,11 +480,14 @@ 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.
@@ -517,9 +520,14 @@ 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;
@@ -870,6 +878,9 @@ 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;
             });
         }
@@ -1030,6 +1041,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             {
                 cmpMeta.$listeners$ = compactMeta[3];
             }
+            {
+                cmpMeta.$attrsToReflect$ = [];
+            }
             const tagName = cmpMeta.$tagName$;
             const HostElement = class extends HTMLElement {
                 // StencilLazyHost

package/dist/esm/loader.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-f5eea413.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-1b3528e3.js';
 
 /*
  Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["helper-filters",[[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);
+  return bootstrapLazy([["helper-filters_2",[[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);
   });
 };
 

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

@@ -1 +1 @@
-import{p as e,b as t}from"./p-645ae858.js";(()=>{const t=import.meta.url,a={};return""!==t&&(a.resourcesUrl=new URL(".",t).href),e(a)})().then((e=>t([["p-5018b398",[[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"]]]]]],e)));
+import{p as e,b as t}from"./p-2cd626f1.js";(()=>{const t=import.meta.url,a={};return""!==t&&(a.resourcesUrl=new URL(".",t).href),e(a)})().then((e=>t([["p-43dedb1d",[[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]}]]]],e)));

package/dist/helper-filters/p-2cd626f1.js

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

package/dist/helper-filters/p-43dedb1d.entry.js

@@ -0,0 +1 @@
+import{r as e,c as t,h as r}from"./p-2cd626f1.js";import"@vaadin/date-picker";const l=["ro","en"],i={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"}},a=(e,t)=>{const r=t;return i[void 0!==r&&l.includes(r)?r:"en"][e]},o=class{constructor(r){e(this,r),this.filterDraw=t(this,"filterDraw",7),this.filterSelection=t(this,"filterSelection",7),this.filterSelectionReset=t(this,"filterSelectionReset",7),this.showFilterId=!0,this.activateTicketSearch=!1,this.gameId="",this.playerId="",this.session="",this.postMessage=!1,this.language="en",this.showFilterModal=!1,this.showClearButton=!1,this.filterData={},this.filterDataReset={ticketDrawId:"",filterFromCalendar:"",filterToCalendar:""}}componentDidRender(){this.filterData.ticketDrawId=null,this.filterData.filterFromCalendar=null,this.filterData.filterToCalendar=null,document.getElementById("#FilterById")&&(document.getElementById("#FilterById").value="")}filterSelectionHandler(e){this.postMessage&&window.postMessage({type:"filterSelection",event:e},window.location.href),this.filterData.ticketDrawId&&this.filterDraw.emit(e),(this.filterData.filterFromCalendar||this.filterData.filterToCalendar)&&this.filterSelection.emit(e)}filterSelectionResetHandler(e){this.postMessage&&window.postMessage({type:"filterSelectionReset",event:e},window.location.href),this.filterSelectionReset.emit(e)}modalCloseEvent(){this.showFilterModal=!1}toggleFilterModal(){this.showFilterModal=!0}filterSearch(){this.modalCloseEvent(),this.showClearButton=!0,this.filterSelectionHandler(this.filterData)}resetSearch(){this.showClearButton=!1,this.filterSelectionResetHandler(this.filterDataReset),this.filterData={}}handleTicketDrawId(e){this.filterData.ticketDrawId=e.target.value}handleFilterFrom(e){this.filterData.filterFromCalendar=new Date(e.target.value).toISOString()}handleFilterTo(e){this.filterData.filterToCalendar=new Date(e.target.value).toISOString()}render(){return r("div",{class:"HelperFilters"},r("div",{class:"FilterButtonsWrapper"},r("button",{class:"FilterOpen",onClick:()=>this.toggleFilterModal()},a("filterOpen",this.language)),this.showClearButton?r("button",{class:"FilterClear",onClick:()=>this.resetSearch()},a("filterClear",this.language)):null),r("helper-modal",{"title-modal":"Filter Modal",visible:this.showFilterModal},r("div",{class:"FilterModalHeader"},r("h3",{class:"FilterModalTitle"},a(this.activateTicketSearch?"filterModalTicketTitle":"filterModalDrawTitle",this.language))),r("div",{class:"FilterModalBody"},r("input",{id:"FilterById",type:"text",value:this.filterData.ticketDrawId,onInput:e=>this.handleTicketDrawId(e),class:"FilterModalSearch",placeholder:a(this.activateTicketSearch?"filterTicketPlaceholder":"filterDrawPlaceholder",this.language)}),r("p",null,a("filterOrDate",this.language)),r("div",{class:"FilterCalendarWrapper"},r("vaadin-date-picker",{value:this.filterData.filterFromCalendar,onChange:e=>this.handleFilterFrom(e),placeholder:a("filterFromCalendar",this.language),class:"VaadinDatePicker"}),r("vaadin-date-picker",{value:this.filterData.filterToCalendar,onChange:e=>this.handleFilterTo(e),placeholder:a("filterToCalendar",this.language),class:"VaadinDatePicker"}))),r("div",{class:"FilterModalFooter"},r("button",{class:"FilterModalButton",onClick:()=>this.filterSearch()},a("filterModalButton",this.language)))))}};o.style='@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 s=e=>!!(e.toLowerCase().match(/android/i)||e.toLowerCase().match(/blackberry|bb/i)||e.toLowerCase().match(/iphone|ipad|ipod/i)||e.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i)),d=class{constructor(r){e(this,r),this.cancel=t(this,"modalCloseEvent",7),this.visible=!0,this.userAgent=window.navigator.userAgent}handleHelperModalClose(){this.visible=!1,this.cancel.emit()}render(){return this.visible&&r("div",{class:this.visible?"HelperModalWrapper HelperModalVisible":"HelperModalWrapper"},r("div",{class:"HelperModalWrapper HelperModalVisible"},r("div",{class:"HelperModalContent"+(s(this.userAgent)?" HelperModalMobileContent":"")},r("span",{class:"HelperModalClose"+(s(this.userAgent)?" HelperModalMobileClose":""),onClick:this.handleHelperModalClose.bind(this)},"X"),r("slot",null))))}};d.style=":host{display:block}.HelperModalWrapper{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.7);opacity:0;visibility:hidden;transform:scale(1.1);transition:visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;z-index:1}.HelperModalVisible{opacity:1;visibility:visible;transform:scale(1);transition:visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s}.HelperModalContent{position:relative;border:solid 1px #848e97;box-shadow:2px 2px 2px rgba(0, 0, 0, 0.007);font-size:14px;padding:10px 10px 5px 10px;background-color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:4px;width:600px;max-height:600px;overflow-y:scroll}.HelperModalMobileContent{background:#FFF;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:4px;width:80%;max-height:350px}.HelperModalClose{cursor:pointer;position:absolute;top:15px;right:15px;font-size:20px;color:#000}.HelperModalMobileClose{position:absolute;top:15px;right:15px;font-size:20px;color:#000}";export{o as helper_filters,d as helper_modal}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/helper-filters",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",
@@ -17,6 +17,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@vaadin/date-picker": "23.2.0"
+    "@vaadin/date-picker": "^23.1.5"
   }
 }