@everymatrix/helper-filters 0.0.3

package/dist/cjs/index.cjs.js

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

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-7f951fa0.js');
+
+/*
+ Stencil Client Patch Esm v2.17.0 | 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([["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);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "./components/helper-filters/helper-filters.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.17.0",
+    "typescriptVersion": "4.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

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

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

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

@@ -0,0 +1,286 @@
+import { Component, h, State, Prop, Event, Listen } from '@stencil/core';
+import { translate } from '../../utils/locale.utils';
+import '@vaadin/date-picker';
+import '@everymatrix/helper-modal';
+export class HelperFilters {
+  constructor() {
+    /**
+     * 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 = { drawTicketId: '', filterFromCalendar: '', filterToCalendar: '' };
+  }
+  filterSelectionHandler(event) {
+    if (this.postMessage) {
+      window.postMessage({ type: 'filterSelection', event }, window.location.href);
+    }
+    else {
+      this.filterSelection.emit(event);
+    }
+  }
+  filterSelectionResetHandler(event) {
+    if (this.postMessage) {
+      window.postMessage({ type: 'filterSelectionReset', event }, window.location.href);
+    }
+    else {
+      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);
+  }
+  handleDrawTicketId(event) {
+    this.filterData.drawTicketId = 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", { 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("div", { class: "FilterModalFooter" },
+          h("button", { class: "FilterModalButton", onClick: () => this.filterSearch() }, translate('filterModalButton', this.language))))));
+  }
+  static get is() { return "helper-filters"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["helper-filters.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["helper-filters.css"]
+  }; }
+  static get properties() { return {
+    "showFilterId": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Check if show the filter option by id"
+      },
+      "attribute": "show-filter-id",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "activateTicketSearch": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Choose if filter by draw ID or ticket ID. By default is draw ID."
+      },
+      "attribute": "activate-ticket-search",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "gameId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Game ID"
+      },
+      "attribute": "game-id",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "playerId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Player ID"
+      },
+      "attribute": "player-id",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "session": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Session ID"
+      },
+      "attribute": "session",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "postMessage": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Instead of customEvents the widget triggers postMessages"
+      },
+      "attribute": "post-message",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Language"
+      },
+      "attribute": "language",
+      "reflect": false,
+      "defaultValue": "'en'"
+    }
+  }; }
+  static get states() { return {
+    "showFilterModal": {},
+    "showClearButton": {},
+    "filterData": {},
+    "filterDataReset": {}
+  }; }
+  static get events() { return [{
+      "method": "filterSelection",
+      "name": "filterSelection",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "HelperFilters",
+        "resolved": "HelperFilters",
+        "references": {
+          "HelperFilters": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "filterSelectionReset",
+      "name": "filterSelectionReset",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "HelperFilters",
+        "resolved": "HelperFilters",
+        "references": {
+          "HelperFilters": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get listeners() { return [{
+      "name": "modalCloseEvent",
+      "method": "modalCloseEvent",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components';

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

@@ -0,0 +1,30 @@
+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'
+  },
+  ro: {
+    filterOpen: 'Filtrare',
+    filterClear: 'Stergere',
+    filterModalTicketTitle: 'Rezultatele biletelor',
+    filterModalDrawTitle: 'Rezultatele draw-urilor',
+    filterTicketPlaceholder: 'Cauta ID bilet',
+    filterDrawPlaceholder: 'Cauta ID draw',
+    filterDateRangePlaceholder: 'Perioada',
+    filterModalButton: 'Cauta'
+  },
+};
+export const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};

package/dist/collection/utils/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+  return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
+}

package/dist/components/helper-filters.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface HelperFilters extends Components.HelperFilters, HTMLElement {}
+export const HelperFilters: {
+  prototype: HelperFilters;
+  new (): HelperFilters;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;