@everymatrix/helper-filters 1.43.4 → 1.45.0

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

@@ -1,402 +1,372 @@
-import { Component, h, State, Prop, Event, Listen } from '@stencil/core';
-import { translate } from '../../utils/locale.utils';
-import '@vaadin/date-picker';
-import '@everymatrix/helper-modal';
+import { h } from "@stencil/core";
+import { translate } from "../../utils/locale.utils";
+import "@vaadin/date-picker";
+import "../../../../../helper-modal/dist/types/index";
 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';
-    /**
-     * Notifies if the quick filters from tickets are active
-     */
-    this.quickFiltersActive = false;
-    /**
-     * Client custom styling via string
-     */
-    this.clientStyling = '';
-    /**
-     * Client custom styling via url content
-     */
-    this.clientStylingUrlContent = '';
-    this.showFilterModal = false;
-    this.showClearButton = false;
-    this.filterData = {};
-    this.filterDataReset = { ticketDrawId: '', filterFromCalendar: '', filterToCalendar: '' };
-    this.limitStylingAppends = false;
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.prepend(sheet);
-    };
-    this.setClientStylingURL = () => {
-      let cssFile = document.createElement('style');
-      setTimeout(() => {
-        cssFile.innerHTML = this.clientStylingUrlContent;
-        this.stylingContainer.prepend(cssFile);
-      }, 1);
-    };
-  }
-  // reset field values each time the filter modal opens
-  componentDidRender() {
-    // @TODO: to way binding?
-    if (document.getElementById('#FilterById'))
-      document.getElementById('#FilterById').value = '';
-    // start custom styling area
-    if (!this.limitStylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrlContent)
-        this.setClientStylingURL();
-      this.limitStylingAppends = true;
+    constructor() {
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.stylingContainer.prepend(sheet);
+        };
+        this.setClientStylingURL = () => {
+            let cssFile = document.createElement('style');
+            setTimeout(() => {
+                cssFile.innerHTML = this.clientStylingUrlContent;
+                this.stylingContainer.prepend(cssFile);
+            }, 1);
+        };
+        this.showFilterId = true;
+        this.activateTicketSearch = false;
+        this.gameId = '';
+        this.playerId = '';
+        this.session = '';
+        this.postMessage = false;
+        this.language = 'en';
+        this.quickFiltersActive = false;
+        this.clientStyling = '';
+        this.clientStylingUrlContent = '';
+        this.showFilterModal = false;
+        this.showClearButton = false;
+        this.filterData = {};
+        this.filterDataReset = { ticketDrawId: '', filterFromCalendar: '', filterToCalendar: '' };
+        this.limitStylingAppends = false;
     }
-    // end custom styling area
-  }
-  filterSelectionHandler(event) {
-    if (this.postMessage)
-      window.postMessage({ type: 'filterSelection', event }, window.location.href);
-    if (this.filterData.ticketDrawId || 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);
-    console.log(this.showClearButton);
-  }
-  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", ref: el => this.stylingContainer = el },
-      h("div", { class: "FilterButtonsWrapper" },
-        h("button", { class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate('filterOpen', this.language)),
-        console.log('in filter Open', this.showClearButton, this.quickFiltersActive),
-        (this.showClearButton || this.quickFiltersActive) ?
-          h("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate('filterClear', this.language))
-          :
-            null),
-      h("helper-modal", { "title-modal": "Filter Modal", visible: this.showFilterModal, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent },
-        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))))));
-  }
-  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": true,
-      "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": true,
-      "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": true,
-      "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": true,
-      "defaultValue": "''"
-    },
-    "session": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Session ID"
-      },
-      "attribute": "session",
-      "reflect": true,
-      "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": true,
-      "defaultValue": "false"
-    },
-    "language": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Language"
-      },
-      "attribute": "language",
-      "reflect": true,
-      "defaultValue": "'en'"
-    },
-    "quickFiltersActive": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Notifies if the quick filters from tickets are active"
-      },
-      "attribute": "quick-filters-active",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "clientStyling": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Client custom styling via string"
-      },
-      "attribute": "client-styling",
-      "reflect": true,
-      "defaultValue": "''"
-    },
-    "clientStylingUrlContent": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Client custom styling via url content"
-      },
-      "attribute": "client-styling-url-content",
-      "reflect": true,
-      "defaultValue": "''"
-    }
-  }; }
-  static get states() { return {
-    "showFilterModal": {},
-    "showClearButton": {},
-    "filterData": {},
-    "filterDataReset": {},
-    "limitStylingAppends": {}
-  }; }
-  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,
-      "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"
-          }
+    // reset field values each time the filter modal opens
+    componentDidRender() {
+        // @TODO: to way binding?
+        if (document.getElementById('#FilterById'))
+            document.getElementById('#FilterById').value = '';
+        // start custom styling area
+        if (!this.limitStylingAppends && this.stylingContainer) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrlContent)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
         }
-      }
-    }]; }
-  static get listeners() { return [{
-      "name": "modalCloseEvent",
-      "method": "modalCloseEvent",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+        // end custom styling area
+    }
+    filterSelectionHandler(event) {
+        if (this.postMessage)
+            window.postMessage({ type: 'filterSelection', event }, window.location.href);
+        if (this.filterData.ticketDrawId || 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);
+        console.log(this.showClearButton);
+    }
+    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", { key: 'd74774bd58fa3df6b0038fd979fb4aec4262d43d', class: "HelperFilters", ref: el => this.stylingContainer = el }, h("div", { key: '0827128924ba350888ae81e67e0306e536b15047', class: "FilterButtonsWrapper" }, h("button", { key: '73ae5aff5896195cd895410caf44dccfa1ac5cfc', class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate('filterOpen', this.language)), console.log('in filter Open', this.showClearButton, this.quickFiltersActive), (this.showClearButton || this.quickFiltersActive) ?
+            h("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate('filterClear', this.language))
+            :
+                null), h("helper-modal", { key: 'add83df2714fdb69e8dfa7a0f5d1eb0d526fc2b4', "title-modal": "Filter Modal", visible: this.showFilterModal, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, h("div", { key: '861b04161876b557184fe49c514867788147e4b9', class: "FilterModalHeader" }, h("h3", { key: '7471430912f301ff995c401b08298d9006816216', class: "FilterModalTitle" }, this.activateTicketSearch ? translate('filterModalTicketTitle', this.language) : translate('filterModalDrawTitle', this.language))), h("div", { key: 'af6bd8e253f332c8724e1bb40100ba5e1e59838f', class: "FilterModalBody" }, h("input", { key: '9edc7e14b801d40d4861625264f82b2fa213a770', 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", { key: '9665b359f9d6da19f120eb9bb315c4b144c80ced' }, translate('filterOrDate', this.language)), h("div", { key: 'd155c7d73a719aaedc581f51aa97cf21ec3125df', class: "FilterCalendarWrapper" }, h("vaadin-date-picker", { key: '586fb38bc5c718a4afa06ebec96bec0fd46949eb', value: this.filterData.filterFromCalendar, onChange: (event) => this.handleFilterFrom(event), placeholder: translate('filterFromCalendar', this.language), class: "VaadinDatePicker" }), h("vaadin-date-picker", { key: '42e8965b2c740c19c53687c114faf6aa22f11de8', value: this.filterData.filterToCalendar, onChange: (event) => this.handleFilterTo(event), placeholder: translate('filterToCalendar', this.language), class: "VaadinDatePicker" }))), h("div", { key: '7529eef1b25d130d183a55e45862418444054d3c', class: "FilterModalFooter" }, h("button", { key: '7dac7dc7b01c1c66dde7c6670a352f597b3f75fc', 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": true,
+                "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": true,
+                "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": true,
+                "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": true,
+                "defaultValue": "''"
+            },
+            "session": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Session ID"
+                },
+                "attribute": "session",
+                "reflect": true,
+                "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": true,
+                "defaultValue": "false"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language"
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "quickFiltersActive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Notifies if the quick filters from tickets are active"
+                },
+                "attribute": "quick-filters-active",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via string"
+                },
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStylingUrlContent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via url content"
+                },
+                "attribute": "client-styling-url-content",
+                "reflect": true,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showFilterModal": {},
+            "showClearButton": {},
+            "filterData": {},
+            "filterDataReset": {},
+            "limitStylingAppends": {}
+        };
+    }
+    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",
+                            "id": "global::HelperFilters"
+                        }
+                    }
+                }
+            }, {
+                "method": "filterSelection",
+                "name": "filterSelection",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HelperFilters",
+                    "resolved": "HelperFilters",
+                    "references": {
+                        "HelperFilters": {
+                            "location": "global",
+                            "id": "global::HelperFilters"
+                        }
+                    }
+                }
+            }, {
+                "method": "filterSelectionReset",
+                "name": "filterSelectionReset",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HelperFilters",
+                    "resolved": "HelperFilters",
+                    "references": {
+                        "HelperFilters": {
+                            "location": "global",
+                            "id": "global::HelperFilters"
+                        }
+                    }
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "modalCloseEvent",
+                "method": "modalCloseEvent",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }