@everymatrix/helper-filters 1.65.1 → 1.65.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/helper-filters.cjs.js +1 -1
- package/dist/cjs/helper-filters_2.cjs.entry.js +6661 -22832
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/helper-filters/helper-filters.css +11 -0
- package/dist/collection/components/helper-filters/helper-filters.js +66 -33
- package/dist/collection/utils/locale.utils.js +19 -5
- package/dist/esm/helper-filters.js +1 -1
- package/dist/esm/helper-filters_2.entry.js +6663 -22834
- package/dist/esm/loader.js +1 -1
- package/dist/helper-filters/helper-filters.esm.js +1 -1
- package/dist/helper-filters/p-ab13487b.entry.js +5614 -0
- package/dist/types/components/helper-filters/helper-filters.d.ts +10 -6
- package/dist/types/components.d.ts +0 -8
- package/package.json +1 -1
- package/dist/helper-filters/p-5359ee91.entry.js +0 -3449
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
|
8
8
|
const defineCustomElements = async (win, options) => {
|
|
9
9
|
if (typeof window === 'undefined') return undefined;
|
|
10
10
|
await appGlobals.globalScripts();
|
|
11
|
-
return index.bootstrapLazy([["helper-filters_2.cjs",[[1,"helper-filters",{"
|
|
11
|
+
return index.bootstrapLazy([["helper-filters_2.cjs",[[1,"helper-filters",{"activateTicketSearch":[516,"activate-ticket-search"],"gameId":[513,"game-id"],"playerId":[513,"player-id"],"session":[513],"postMessage":[516,"post-message"],"language":[513],"quickFiltersActive":[516,"quick-filters-active"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"translationUrl":[520,"translation-url"],"showFilterModal":[32],"showClearButton":[32],"filterData":[32],"filterDataReset":[32],"limitStylingAppends":[32],"ticketTypeList":[32]},[[0,"modalCloseEvent","modalCloseEvent"]]],[1,"helper-modal",{"titleModal":[513,"title-modal"],"visible":[1540],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
exports.setNonce = index.setNonce;
|
|
@@ -53,6 +53,13 @@
|
|
|
53
53
|
align-items: center;
|
|
54
54
|
margin: 20px 0;
|
|
55
55
|
}
|
|
56
|
+
.FilterModalHeader .filterKey,
|
|
57
|
+
.FilterModalBody .filterKey,
|
|
58
|
+
.FilterModalFooter .filterKey {
|
|
59
|
+
color: var(--emw--color-typography, #009993);
|
|
60
|
+
text-align: left;
|
|
61
|
+
font-size: 16px;
|
|
62
|
+
}
|
|
56
63
|
.FilterModalHeader .FilterModalTitle,
|
|
57
64
|
.FilterModalBody .FilterModalTitle,
|
|
58
65
|
.FilterModalFooter .FilterModalTitle {
|
|
@@ -116,4 +123,8 @@
|
|
|
116
123
|
.FilterModalBody p,
|
|
117
124
|
.FilterModalFooter p {
|
|
118
125
|
margin: 5px 0;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.ticketFilterItem {
|
|
129
|
+
margin: 12px 0;
|
|
119
130
|
}
|
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { translate, getTranslations } from "../../utils/locale.utils";
|
|
3
|
-
import "@vaadin/date-picker";
|
|
4
3
|
import "../../../../../helper-modal/dist/types/index";
|
|
4
|
+
import "../../../../../../../libs/vaadin-facade/index";
|
|
5
|
+
import { format } from "date-fns";
|
|
5
6
|
export class HelperFilters {
|
|
6
7
|
constructor() {
|
|
7
|
-
this.handleTicketDrawId = (event) => {
|
|
8
|
-
const inputElement = event.target;
|
|
9
|
-
this.filterData.ticketDrawId = inputElement.value;
|
|
10
|
-
};
|
|
11
8
|
this.handleFilterFrom = (event) => {
|
|
12
9
|
const inputElement = event.target;
|
|
13
10
|
let dateArray = inputElement.value.split('-');
|
|
14
|
-
|
|
11
|
+
if (dateArray.length === 3) {
|
|
12
|
+
this.filterData = Object.assign(Object.assign({}, this.filterData), { filterFromCalendar: `${dateArray[2]}/${dateArray[1]}/${dateArray[0]}` });
|
|
13
|
+
}
|
|
15
14
|
};
|
|
16
15
|
this.handleFilterTo = (event) => {
|
|
17
16
|
const inputElement = event.target;
|
|
18
17
|
let dateArray = inputElement.value.split('-');
|
|
19
|
-
|
|
18
|
+
if (dateArray.length === 3) {
|
|
19
|
+
this.filterData = Object.assign(Object.assign({}, this.filterData), { filterToCalendar: `${dateArray[2]}/${dateArray[1]}/${dateArray[0]}` });
|
|
20
|
+
}
|
|
20
21
|
};
|
|
21
22
|
this.setClientStyling = () => {
|
|
22
23
|
let sheet = document.createElement('style');
|
|
@@ -30,7 +31,16 @@ export class HelperFilters {
|
|
|
30
31
|
this.stylingContainer.prepend(cssFile);
|
|
31
32
|
}, 1);
|
|
32
33
|
};
|
|
33
|
-
this.
|
|
34
|
+
this.handleTicketId = (event) => {
|
|
35
|
+
if (event.target.value) {
|
|
36
|
+
this.filterData.ticketId = event.target.value;
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
this.handleTicketType = (event) => {
|
|
40
|
+
if (event.target.selectedItems && event.target.selectedItems.length) {
|
|
41
|
+
this.filterData.ticketType = event.target.selectedItems.map((item) => item.value);
|
|
42
|
+
}
|
|
43
|
+
};
|
|
34
44
|
this.activateTicketSearch = false;
|
|
35
45
|
this.gameId = '';
|
|
36
46
|
this.playerId = '';
|
|
@@ -44,8 +54,13 @@ export class HelperFilters {
|
|
|
44
54
|
this.showFilterModal = false;
|
|
45
55
|
this.showClearButton = false;
|
|
46
56
|
this.filterData = {};
|
|
47
|
-
this.filterDataReset = {
|
|
57
|
+
this.filterDataReset = { filterFromCalendar: '', filterToCalendar: '' };
|
|
48
58
|
this.limitStylingAppends = false;
|
|
59
|
+
this.ticketTypeList = [
|
|
60
|
+
{ label: 'Normal', value: 'NORMAL' },
|
|
61
|
+
{ label: 'Syndicate', value: 'SYNDICATE' },
|
|
62
|
+
{ label: 'Subscription', value: 'SUBSCRIPTION' }
|
|
63
|
+
];
|
|
49
64
|
}
|
|
50
65
|
componentWillLoad() {
|
|
51
66
|
if (this.translationUrl) {
|
|
@@ -70,7 +85,10 @@ export class HelperFilters {
|
|
|
70
85
|
filterSelectionHandler(event) {
|
|
71
86
|
if (this.postMessage)
|
|
72
87
|
window.postMessage({ type: 'filterSelection', event }, window.location.href);
|
|
73
|
-
if (this.filterData.
|
|
88
|
+
if (this.filterData.filterFromCalendar ||
|
|
89
|
+
this.filterData.filterToCalendar ||
|
|
90
|
+
this.filterData.ticketId ||
|
|
91
|
+
this.filterData.ticketType.length)
|
|
74
92
|
this.filterSelection.emit(event);
|
|
75
93
|
}
|
|
76
94
|
filterSelectionResetHandler(event) {
|
|
@@ -89,18 +107,50 @@ export class HelperFilters {
|
|
|
89
107
|
filterSearch() {
|
|
90
108
|
this.modalCloseEvent();
|
|
91
109
|
this.showClearButton = true;
|
|
110
|
+
if (this.filterData.filterFromCalendar && this.filterData.filterToCalendar) {
|
|
111
|
+
let dateArray = this.filterData.filterFromCalendar.split('/');
|
|
112
|
+
let dateArrayTo = this.filterData.filterToCalendar.split('/');
|
|
113
|
+
const transferData = {
|
|
114
|
+
filterFromCalendar: new Date(Date.UTC(Number(dateArray[2]), Number(dateArray[1]) - 1, Number(dateArray[0]), 0, 0, 0)).toISOString(),
|
|
115
|
+
filterToCalendar: new Date(Date.UTC(Number(dateArrayTo[2]), Number(dateArrayTo[1]) - 1, Number(dateArrayTo[0]), 23, 59, 59)).toISOString()
|
|
116
|
+
};
|
|
117
|
+
this.filterData = Object.assign(Object.assign({}, this.filterData), transferData);
|
|
118
|
+
}
|
|
92
119
|
this.filterSelectionHandler(this.filterData);
|
|
93
120
|
}
|
|
121
|
+
clearSelection() {
|
|
122
|
+
this.comboBox.clear();
|
|
123
|
+
}
|
|
94
124
|
resetSearch() {
|
|
95
125
|
this.showClearButton = false;
|
|
96
126
|
this.filterSelectionResetHandler(this.filterDataReset);
|
|
127
|
+
this.clearSelection();
|
|
97
128
|
this.filterData = {};
|
|
98
129
|
}
|
|
130
|
+
formateDate(dateParts) {
|
|
131
|
+
const { year, month, day } = dateParts;
|
|
132
|
+
const date = new Date(year, month, day);
|
|
133
|
+
return format(date, 'dd/MM/yyyy');
|
|
134
|
+
}
|
|
135
|
+
parseDate(inputValue) {
|
|
136
|
+
const [day, month, year] = inputValue.split('/');
|
|
137
|
+
return { year, month: parseInt(month) - 1, day };
|
|
138
|
+
}
|
|
139
|
+
changeFormate(str) {
|
|
140
|
+
const [day, month, year] = str.split('/');
|
|
141
|
+
return `${year}-${month}-${day}`;
|
|
142
|
+
}
|
|
143
|
+
setDateFormate(dom) {
|
|
144
|
+
dom.i18n = Object.assign(Object.assign({}, dom.i18n), { formatDate: this.formateDate, parseDate: this.parseDate });
|
|
145
|
+
}
|
|
99
146
|
render() {
|
|
100
|
-
return (h("div", { key: '
|
|
101
|
-
|
|
102
|
-
:
|
|
103
|
-
|
|
147
|
+
return (h("div", { key: 'a9a89658d3591e8e4aa680920f4f2e9f1cf1fc93', class: "HelperFilters", ref: (el) => (this.stylingContainer = el) }, h("div", { key: '6d8f5a5e6467726a7f95057a792da773784e1b48', class: "FilterButtonsWrapper" }, h("button", { key: '5f8c4842e3497754631acc2eeef6b9d0f725a0c4', class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate('filterOpen', this.language)), this.showClearButton || this.quickFiltersActive ? (h("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate('filterClear', this.language))) : null), h("helper-modal", { key: '24a5ae73bed69d1ddb4e2c847f09eddfec3d35bc', "title-modal": "Filter Modal", visible: this.showFilterModal, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, h("div", { key: '3194d625f6a0b1c113b96ef88620fc73fabe550f', class: "FilterModalHeader" }, h("h3", { key: '4578b3940a0e5a1ed65f234d6b45b397c8b5dec7', class: "FilterModalTitle" }, this.activateTicketSearch
|
|
148
|
+
? translate('filterModalTicketTitle', this.language)
|
|
149
|
+
: translate('filterModalDrawTitle', this.language))), h("div", { key: 'd8f95fd76ad9a92492dddb575a7e0a21053cd15b', class: "FilterModalBody" }, this.activateTicketSearch && (h("div", { key: '1beab701dd04c85d676f453243fe90ad5ff570f6', class: "ticketFilterContainer" }, h("div", { key: '0761d5adb0d30de551bb599925a350a93302e927', class: "ticketFilterItem" }, h("div", { key: '33d1a16ac3ff42254542a77a3dfd805f45ffabf3', class: "filterKey" }, translate('filterTicketIdPlaceholder', this.language)), h("vaadin-text-field", { key: '48de372200553e9e2cb3f1944348cef3086035e0', placeholder: translate('filterTicketIdPlaceholder', this.language), value: this.filterData.ticketId, onInput: (event) => this.handleTicketId(event) })), h("div", { key: '996fd815df0045df76b6c642f3b17e85ccd99926', class: "ticketFilterItem" }, h("div", { key: '4df8aa3b0012ff82d7ee93a366cb14f83d5d2533', class: "filterKey" }, translate('searchByTicketType', this.language)), h("vaadin-multi-select-combo-box", { key: '27a9d591abefa8ab97304939d37fa7964fbe0ab6', ref: (el) => (this.comboBox = el), placeholder: translate('filterTiketTypePlaceholder', this.language), items: this.ticketTypeList, onChange: this.handleTicketType, itemValuePath: "value", itemLabelPath: "label" })))), h("div", { key: 'a0c1fde50e6c0963894a0d45c8523c7153244205', class: "filterItem" }, h("div", { key: '4d4dba8c36bb91efa5f51801b539e50f13db8b6e', class: "filterKey" }, translate('searchByDate', this.language)), h("div", { key: 'ba6c1d9ac1676c71e40a40054855e1638b0b3229', class: "FilterCalendarWrapper" }, h("vaadin-date-picker", { key: 'fda0df00197b49fba4d63683e34e278a3d0238c8', value: this.filterData.filterFromCalendar, max: this.filterData.filterToCalendar === undefined
|
|
150
|
+
? undefined
|
|
151
|
+
: this.changeFormate(this.filterData.filterToCalendar), onChange: this.handleFilterFrom, placeholder: translate('filterFromCalendar', this.language), ref: (el) => this.setDateFormate(el), class: "VaadinDatePicker" }), h("vaadin-date-picker", { key: '6ebea129e53651be09307be97a48b06d9dfb830d', value: this.filterData.filterToCalendar, min: this.filterData.filterFromCalendar === undefined
|
|
152
|
+
? undefined
|
|
153
|
+
: this.changeFormate(this.filterData.filterFromCalendar), onChange: this.handleFilterTo, placeholder: translate('filterToCalendar', this.language), ref: (el) => this.setDateFormate(el), class: "VaadinDatePicker" })))), h("div", { key: '4f2a5df9654db0b64741808baf6225d5cbcfeb95', class: "FilterModalFooter" }, h("button", { key: 'a9d7b1b0a4094c30447ab4e3d40b7c185b9eab71', class: "FilterModalButton", onClick: () => this.filterSearch() }, translate('filterModalButton', this.language))))));
|
|
104
154
|
}
|
|
105
155
|
static get is() { return "helper-filters"; }
|
|
106
156
|
static get encapsulation() { return "shadow"; }
|
|
@@ -116,24 +166,6 @@ export class HelperFilters {
|
|
|
116
166
|
}
|
|
117
167
|
static get properties() {
|
|
118
168
|
return {
|
|
119
|
-
"showFilterId": {
|
|
120
|
-
"type": "boolean",
|
|
121
|
-
"mutable": false,
|
|
122
|
-
"complexType": {
|
|
123
|
-
"original": "boolean",
|
|
124
|
-
"resolved": "boolean",
|
|
125
|
-
"references": {}
|
|
126
|
-
},
|
|
127
|
-
"required": false,
|
|
128
|
-
"optional": false,
|
|
129
|
-
"docs": {
|
|
130
|
-
"tags": [],
|
|
131
|
-
"text": "Check if show the filter option by id"
|
|
132
|
-
},
|
|
133
|
-
"attribute": "show-filter-id",
|
|
134
|
-
"reflect": true,
|
|
135
|
-
"defaultValue": "true"
|
|
136
|
-
},
|
|
137
169
|
"activateTicketSearch": {
|
|
138
170
|
"type": "boolean",
|
|
139
171
|
"mutable": false,
|
|
@@ -321,7 +353,8 @@ export class HelperFilters {
|
|
|
321
353
|
"showClearButton": {},
|
|
322
354
|
"filterData": {},
|
|
323
355
|
"filterDataReset": {},
|
|
324
|
-
"limitStylingAppends": {}
|
|
356
|
+
"limitStylingAppends": {},
|
|
357
|
+
"ticketTypeList": {}
|
|
325
358
|
};
|
|
326
359
|
}
|
|
327
360
|
static get events() {
|
|
@@ -8,10 +8,13 @@ const TRANSLATIONS = {
|
|
|
8
8
|
filterModalDrawTitle: 'Draws Results History',
|
|
9
9
|
filterTicketPlaceholder: 'Search for a ticket ID',
|
|
10
10
|
filterDrawPlaceholder: 'Search for a draw ID',
|
|
11
|
+
filterTicketIdPlaceholder: 'Search by Ticket ID',
|
|
12
|
+
filterTiketTypePlaceholder: 'Ticket Type',
|
|
11
13
|
filterModalButton: 'Search',
|
|
12
14
|
filterFromCalendar: 'From',
|
|
13
15
|
filterToCalendar: 'To',
|
|
14
|
-
|
|
16
|
+
searchByDate: 'Search by Date',
|
|
17
|
+
searchByTicketType: 'Search by Ticket Type'
|
|
15
18
|
},
|
|
16
19
|
ro: {
|
|
17
20
|
filterOpen: 'Filtrare',
|
|
@@ -20,8 +23,11 @@ const TRANSLATIONS = {
|
|
|
20
23
|
filterModalDrawTitle: 'Rezultatele draw-urilor',
|
|
21
24
|
filterTicketPlaceholder: 'Cauta ID bilet',
|
|
22
25
|
filterDrawPlaceholder: 'Cauta ID draw',
|
|
26
|
+
filterTicketIdPlaceholder: 'Search by Ticket ID',
|
|
27
|
+
filterTiketTypePlaceholder: 'Ticket Type',
|
|
23
28
|
filterModalButton: 'Cauta',
|
|
24
|
-
|
|
29
|
+
searchByDate: 'Search by Date',
|
|
30
|
+
searchByTicketType: 'Search by Ticket Type'
|
|
25
31
|
},
|
|
26
32
|
fr: {
|
|
27
33
|
filterOpen: 'Filter',
|
|
@@ -30,10 +36,12 @@ const TRANSLATIONS = {
|
|
|
30
36
|
filterModalDrawTitle: 'Draws Results History',
|
|
31
37
|
filterTicketPlaceholder: 'Search for a ticket ID',
|
|
32
38
|
filterDrawPlaceholder: 'Search for a draw ID',
|
|
39
|
+
filterTicketIdPlaceholder: 'Search by Ticket ID',
|
|
40
|
+
filterTiketTypePlaceholder: 'Ticket Type',
|
|
33
41
|
filterModalButton: 'Search',
|
|
34
42
|
filterFromCalendar: 'From',
|
|
35
43
|
filterToCalendar: 'To',
|
|
36
|
-
|
|
44
|
+
searchByDate: 'Search by Date'
|
|
37
45
|
},
|
|
38
46
|
ar: {
|
|
39
47
|
filterOpen: 'Filter',
|
|
@@ -42,10 +50,13 @@ const TRANSLATIONS = {
|
|
|
42
50
|
filterModalDrawTitle: 'Draws Results History',
|
|
43
51
|
filterTicketPlaceholder: 'Search for a ticket ID',
|
|
44
52
|
filterDrawPlaceholder: 'Search for a draw ID',
|
|
53
|
+
filterTicketIdPlaceholder: 'Search by Ticket ID',
|
|
54
|
+
filterTiketTypePlaceholder: 'Ticket Type',
|
|
45
55
|
filterModalButton: 'Search',
|
|
46
56
|
filterFromCalendar: 'From',
|
|
47
57
|
filterToCalendar: 'To',
|
|
48
|
-
|
|
58
|
+
searchByDate: 'Search by Date',
|
|
59
|
+
searchByTicketType: 'Search by Ticket Type'
|
|
49
60
|
},
|
|
50
61
|
hr: {
|
|
51
62
|
filterOpen: 'Filter',
|
|
@@ -54,10 +65,13 @@ const TRANSLATIONS = {
|
|
|
54
65
|
filterModalDrawTitle: 'Povijest rezultata Izvlačenja',
|
|
55
66
|
filterTicketPlaceholder: 'Pretraga ID listića',
|
|
56
67
|
filterDrawPlaceholder: 'Pretraga ID izvlačenja',
|
|
68
|
+
filterTicketIdPlaceholder: 'Search by Ticket ID',
|
|
69
|
+
filterTiketTypePlaceholder: 'Ticket Type',
|
|
57
70
|
filterModalButton: 'Traži',
|
|
58
71
|
filterFromCalendar: 'Od',
|
|
59
72
|
filterToCalendar: 'Do',
|
|
60
|
-
|
|
73
|
+
searchByDate: 'Search by Date',
|
|
74
|
+
searchByTicketType: 'Search by Ticket Type'
|
|
61
75
|
}
|
|
62
76
|
};
|
|
63
77
|
export const translate = (key, customLang) => {
|
|
@@ -16,5 +16,5 @@ var patchBrowser = () => {
|
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(async (options) => {
|
|
18
18
|
await globalScripts();
|
|
19
|
-
return bootstrapLazy([["helper-filters_2",[[1,"helper-filters",{"
|
|
19
|
+
return bootstrapLazy([["helper-filters_2",[[1,"helper-filters",{"activateTicketSearch":[516,"activate-ticket-search"],"gameId":[513,"game-id"],"playerId":[513,"player-id"],"session":[513],"postMessage":[516,"post-message"],"language":[513],"quickFiltersActive":[516,"quick-filters-active"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"translationUrl":[520,"translation-url"],"showFilterModal":[32],"showClearButton":[32],"filterData":[32],"filterDataReset":[32],"limitStylingAppends":[32],"ticketTypeList":[32]},[[0,"modalCloseEvent","modalCloseEvent"]]],[1,"helper-modal",{"titleModal":[513,"title-modal"],"visible":[1540],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
|
|
20
20
|
});
|