@everymatrix/helper-filters 1.52.5 → 1.53.0
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_2.cjs.entry.js +18 -14
- package/dist/collection/components/helper-filters/helper-filters.css +23 -23
- package/dist/collection/components/helper-filters/helper-filters.js +16 -12
- package/dist/esm/helper-filters_2.entry.js +18 -14
- package/dist/helper-filters/helper-filters.esm.js +1 -1
- package/dist/helper-filters/{p-372fbd31.entry.js → p-4d385172.entry.js} +49 -49
- package/dist/types/components/helper-filters/helper-filters.d.ts +3 -3
- package/package.json +1 -1
|
@@ -24301,7 +24301,7 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
|
|
|
24301
24301
|
|
|
24302
24302
|
defineCustomElement(DatePicker);
|
|
24303
24303
|
|
|
24304
|
-
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
|
|
24304
|
+
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:var(--emw--button-border-radius, 4px);padding:8px 15px;width:max-content;border:1px solid var(--emw--button-border-color, #00958f);background:var(--emw--button-background-color, #00958f);color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterButtonsWrapper .FilterOpen:hover{background:var(--emw--button-background-color, #00958f);color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255))}.FilterButtonsWrapper .FilterClear{cursor:pointer;border-radius:var(--emw--button-border-radius, 4px);padding:8px 15px;width:max-content;border:1px solid var(--emw--button-border-color, #00958f);background:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));color:var(--emw--button-text-color, #000);font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterButtonsWrapper .FilterClear:hover{background:var(--emw--button-background-color, #00958f);color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255))}.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:var(--emw--color-typography, #009993);text-transform:uppercase}.FilterModalHeader .FilterModalSearch,.FilterModalBody .FilterModalSearch,.FilterModalFooter .FilterModalSearch{border-radius:var(--emw--button-border-radius, 4px);background:var(--emw--color-gray-transparency-60, #e8ebef);color:var(--emw--color-secondary-variant, #263445);width:100%;height:26px;max-width:280px;padding:5px;font-size:15px;border:none;outline:var(--emw--color-typography, #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:var(--emw--button-border-radius, 4px);padding:8px 60px;width:max-content;margin:5px;border:1px solid var(--emw--button-border-color, #00958f);background:var(--emw--button-background-color, #00958f);color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));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:var(--emw--button-background-color, #00958f);color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255))}.FilterModalHeader p,.FilterModalBody p,.FilterModalFooter p{margin:5px 0}";
|
|
24305
24305
|
const HelperFiltersStyle0 = helperFiltersCss;
|
|
24306
24306
|
|
|
24307
24307
|
const HelperFilters = class {
|
|
@@ -24310,6 +24310,20 @@ const HelperFilters = class {
|
|
|
24310
24310
|
this.filterDraw = index.createEvent(this, "filterDraw", 7);
|
|
24311
24311
|
this.filterSelection = index.createEvent(this, "filterSelection", 7);
|
|
24312
24312
|
this.filterSelectionReset = index.createEvent(this, "filterSelectionReset", 7);
|
|
24313
|
+
this.handleTicketDrawId = (event) => {
|
|
24314
|
+
const inputElement = event.target;
|
|
24315
|
+
this.filterData.ticketDrawId = inputElement.value;
|
|
24316
|
+
};
|
|
24317
|
+
this.handleFilterFrom = (event) => {
|
|
24318
|
+
const inputElement = event.target;
|
|
24319
|
+
let dateArray = inputElement.value.split('-');
|
|
24320
|
+
this.filterData.filterFromCalendar = new Date(Number(dateArray[0]), Number(dateArray[1]) - 1, Number(dateArray[2]), 0, 0, 0).toISOString();
|
|
24321
|
+
};
|
|
24322
|
+
this.handleFilterTo = (event) => {
|
|
24323
|
+
const inputElement = event.target;
|
|
24324
|
+
let dateArray = inputElement.value.split('-');
|
|
24325
|
+
this.filterData.filterToCalendar = new Date(Number(dateArray[0]), Number(dateArray[1]) - 1, Number(dateArray[2]), 23, 59, 59).toISOString();
|
|
24326
|
+
};
|
|
24313
24327
|
this.setClientStyling = () => {
|
|
24314
24328
|
let sheet = document.createElement('style');
|
|
24315
24329
|
sheet.innerHTML = this.clientStyling;
|
|
@@ -24376,27 +24390,17 @@ const HelperFilters = class {
|
|
|
24376
24390
|
this.modalCloseEvent();
|
|
24377
24391
|
this.showClearButton = true;
|
|
24378
24392
|
this.filterSelectionHandler(this.filterData);
|
|
24379
|
-
console.log(this.showClearButton);
|
|
24380
24393
|
}
|
|
24381
24394
|
resetSearch() {
|
|
24382
24395
|
this.showClearButton = false;
|
|
24383
24396
|
this.filterSelectionResetHandler(this.filterDataReset);
|
|
24384
24397
|
this.filterData = {};
|
|
24385
24398
|
}
|
|
24386
|
-
handleTicketDrawId(event) {
|
|
24387
|
-
this.filterData.ticketDrawId = event.target.value;
|
|
24388
|
-
}
|
|
24389
|
-
handleFilterFrom(event) {
|
|
24390
|
-
this.filterData.filterFromCalendar = new Date(event.target.value).toISOString();
|
|
24391
|
-
}
|
|
24392
|
-
handleFilterTo(event) {
|
|
24393
|
-
this.filterData.filterToCalendar = new Date(event.target.value).toISOString();
|
|
24394
|
-
}
|
|
24395
24399
|
render() {
|
|
24396
|
-
return (index.h("div", { key: '
|
|
24400
|
+
return (index.h("div", { key: '285e81fe3f4ba59c4a17445e8a296408a21ac15c', class: "HelperFilters", ref: el => this.stylingContainer = el }, index.h("div", { key: 'e1839ec68ae9f4d54a97b7e0bc81fd5bd9c6b924', class: "FilterButtonsWrapper" }, index.h("button", { key: '5b6b2402dad6d7c1c315ffd5a2e251e898c8db5b', class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate$1('filterOpen', this.language)), (this.showClearButton || this.quickFiltersActive) ?
|
|
24397
24401
|
index.h("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate$1('filterClear', this.language))
|
|
24398
24402
|
:
|
|
24399
|
-
null), index.h("helper-modal", { key: '
|
|
24403
|
+
null), index.h("helper-modal", { key: 'c60e5024e590e3c2217c4d2698f86a5b6d33562a', "title-modal": "Filter Modal", visible: this.showFilterModal, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, index.h("div", { key: 'd0fcf27d381016db6c6460973cefbb28187cbd01', class: "FilterModalHeader" }, index.h("h3", { key: 'ab73abba95ea9654c902db1f4650b7bc004c62c5', class: "FilterModalTitle" }, this.activateTicketSearch ? translate$1('filterModalTicketTitle', this.language) : translate$1('filterModalDrawTitle', this.language))), index.h("div", { key: '13dff7787135e8e35dadfb23b1acdf9ea11a995b', class: "FilterModalBody" }, this.showFilterId && index.h("div", { key: '6c773a1b5a5af00c6c2c69aaa24c2f2fa766356a' }, index.h("input", { key: 'f6ba11c2abaa1977358f08a923db1b7c12290ef1', id: "FilterById", type: "text", value: this.filterData.ticketDrawId, onInput: this.handleTicketDrawId, class: "FilterModalSearch", placeholder: this.activateTicketSearch ? translate$1('filterTicketPlaceholder', this.language) : translate$1('filterDrawPlaceholder', this.language) }), index.h("p", { key: '39fd8bfc2422a227cf118672213b0499298c73bc' }, translate$1('filterOrDate', this.language))), index.h("div", { key: 'f86cf8390870b64ed646c94c312198a21f99f565', class: "FilterCalendarWrapper" }, index.h("vaadin-date-picker", { key: 'cddc64eda6025e2a3568f86e0e039ded55530ab1', value: this.filterData.filterFromCalendar, onChange: this.handleFilterFrom, placeholder: translate$1('filterFromCalendar', this.language), class: "VaadinDatePicker" }), index.h("vaadin-date-picker", { key: '0963561d635097452964f55bccf5182cde88e0c2', value: this.filterData.filterToCalendar, onChange: this.handleFilterTo, placeholder: translate$1('filterToCalendar', this.language), class: "VaadinDatePicker" }))), index.h("div", { key: '5f880497e96ba7e55fb1f46b073d8b6259feded5', class: "FilterModalFooter" }, index.h("button", { key: '64cb6b50666e8a9879e3fc10df8ab36315357cef', class: "FilterModalButton", onClick: () => this.filterSearch() }, translate$1('filterModalButton', this.language))))));
|
|
24400
24404
|
}
|
|
24401
24405
|
};
|
|
24402
24406
|
HelperFilters.style = HelperFiltersStyle0;
|
|
@@ -24414,7 +24418,7 @@ const isMobile = (userAgent) => {
|
|
|
24414
24418
|
userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
|
|
24415
24419
|
};
|
|
24416
24420
|
|
|
24417
|
-
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
|
|
24421
|
+
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 var(--emw--color-gray-transparency-40, #848e97);box-shadow:2px 2px 2px rgba(0, 0, 0, 0.007);font-size:14px;padding:10px 10px 5px 10px;background-color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:4px;width:600px;max-height:600px;overflow-y:scroll}.HelperModalMobileContent{background:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));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:var(--emw--button-text-color, #000)}.HelperModalMobileClose{position:absolute;top:15px;right:15px;font-size:20px;color:var(--emw--button-text-color, #000)}";
|
|
24418
24422
|
const HelperModalStyle0 = helperModalCss;
|
|
24419
24423
|
|
|
24420
24424
|
const HelperModal = class {
|
|
@@ -11,37 +11,37 @@
|
|
|
11
11
|
}
|
|
12
12
|
.FilterButtonsWrapper .FilterOpen {
|
|
13
13
|
cursor: pointer;
|
|
14
|
-
border-radius: 4px;
|
|
14
|
+
border-radius: var(--emw--button-border-radius, 4px);
|
|
15
15
|
padding: 8px 15px;
|
|
16
16
|
width: max-content;
|
|
17
|
-
border: 1px solid #00958f;
|
|
18
|
-
background: #00958f;
|
|
19
|
-
color:
|
|
17
|
+
border: 1px solid var(--emw--button-border-color, #00958f);
|
|
18
|
+
background: var(--emw--button-background-color, #00958f);
|
|
19
|
+
color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
|
|
20
20
|
font-size: 12px;
|
|
21
21
|
transition: all 0.2s linear;
|
|
22
22
|
text-align: center;
|
|
23
23
|
letter-spacing: 0;
|
|
24
24
|
}
|
|
25
25
|
.FilterButtonsWrapper .FilterOpen:hover {
|
|
26
|
-
background: #00958f;
|
|
27
|
-
color:
|
|
26
|
+
background: var(--emw--button-background-color, #00958f);
|
|
27
|
+
color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
|
|
28
28
|
}
|
|
29
29
|
.FilterButtonsWrapper .FilterClear {
|
|
30
30
|
cursor: pointer;
|
|
31
|
-
border-radius: 4px;
|
|
31
|
+
border-radius: var(--emw--button-border-radius, 4px);
|
|
32
32
|
padding: 8px 15px;
|
|
33
33
|
width: max-content;
|
|
34
|
-
border: 1px solid #00958f;
|
|
35
|
-
background:
|
|
36
|
-
color: #000;
|
|
34
|
+
border: 1px solid var(--emw--button-border-color, #00958f);
|
|
35
|
+
background: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
|
|
36
|
+
color: var(--emw--button-text-color, #000);
|
|
37
37
|
font-size: 12px;
|
|
38
38
|
transition: all 0.2s linear;
|
|
39
39
|
text-align: center;
|
|
40
40
|
letter-spacing: 0;
|
|
41
41
|
}
|
|
42
42
|
.FilterButtonsWrapper .FilterClear:hover {
|
|
43
|
-
background: #00958f;
|
|
44
|
-
color:
|
|
43
|
+
background: var(--emw--button-background-color, #00958f);
|
|
44
|
+
color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
.FilterModalHeader,
|
|
@@ -60,22 +60,22 @@
|
|
|
60
60
|
padding: 0;
|
|
61
61
|
font-weight: 700;
|
|
62
62
|
font-size: 16px;
|
|
63
|
-
color: #009993;
|
|
63
|
+
color: var(--emw--color-typography, #009993);
|
|
64
64
|
text-transform: uppercase;
|
|
65
65
|
}
|
|
66
66
|
.FilterModalHeader .FilterModalSearch,
|
|
67
67
|
.FilterModalBody .FilterModalSearch,
|
|
68
68
|
.FilterModalFooter .FilterModalSearch {
|
|
69
|
-
border-radius: 4px;
|
|
70
|
-
background: #e8ebef;
|
|
71
|
-
color: #263445;
|
|
69
|
+
border-radius: var(--emw--button-border-radius, 4px);
|
|
70
|
+
background: var(--emw--color-gray-transparency-60, #e8ebef);
|
|
71
|
+
color: var(--emw--color-secondary-variant, #263445);
|
|
72
72
|
width: 100%;
|
|
73
73
|
height: 26px;
|
|
74
74
|
max-width: 280px;
|
|
75
75
|
padding: 5px;
|
|
76
76
|
font-size: 15px;
|
|
77
77
|
border: none;
|
|
78
|
-
outline: #009993;
|
|
78
|
+
outline: var(--emw--color-typography, #009993);
|
|
79
79
|
}
|
|
80
80
|
.FilterModalHeader .FilterCalendarWrapper,
|
|
81
81
|
.FilterModalBody .FilterCalendarWrapper,
|
|
@@ -93,13 +93,13 @@
|
|
|
93
93
|
.FilterModalBody .FilterModalButton,
|
|
94
94
|
.FilterModalFooter .FilterModalButton {
|
|
95
95
|
cursor: pointer;
|
|
96
|
-
border-radius: 4px;
|
|
96
|
+
border-radius: var(--emw--button-border-radius, 4px);
|
|
97
97
|
padding: 8px 60px;
|
|
98
98
|
width: max-content;
|
|
99
99
|
margin: 5px;
|
|
100
|
-
border: 1px solid #00958f;
|
|
101
|
-
background: #00958f;
|
|
102
|
-
color:
|
|
100
|
+
border: 1px solid var(--emw--button-border-color, #00958f);
|
|
101
|
+
background: var(--emw--button-background-color, #00958f);
|
|
102
|
+
color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
|
|
103
103
|
font-size: 12px;
|
|
104
104
|
transition: all 0.2s linear;
|
|
105
105
|
text-transform: uppercase;
|
|
@@ -109,8 +109,8 @@
|
|
|
109
109
|
.FilterModalHeader .FilterModalButton:hover,
|
|
110
110
|
.FilterModalBody .FilterModalButton:hover,
|
|
111
111
|
.FilterModalFooter .FilterModalButton:hover {
|
|
112
|
-
background: #00958f;
|
|
113
|
-
color:
|
|
112
|
+
background: var(--emw--button-background-color, #00958f);
|
|
113
|
+
color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
|
|
114
114
|
}
|
|
115
115
|
.FilterModalHeader p,
|
|
116
116
|
.FilterModalBody p,
|
|
@@ -4,6 +4,20 @@ import "@vaadin/date-picker";
|
|
|
4
4
|
import "../../../../../helper-modal/dist/types/index";
|
|
5
5
|
export class HelperFilters {
|
|
6
6
|
constructor() {
|
|
7
|
+
this.handleTicketDrawId = (event) => {
|
|
8
|
+
const inputElement = event.target;
|
|
9
|
+
this.filterData.ticketDrawId = inputElement.value;
|
|
10
|
+
};
|
|
11
|
+
this.handleFilterFrom = (event) => {
|
|
12
|
+
const inputElement = event.target;
|
|
13
|
+
let dateArray = inputElement.value.split('-');
|
|
14
|
+
this.filterData.filterFromCalendar = new Date(Number(dateArray[0]), Number(dateArray[1]) - 1, Number(dateArray[2]), 0, 0, 0).toISOString();
|
|
15
|
+
};
|
|
16
|
+
this.handleFilterTo = (event) => {
|
|
17
|
+
const inputElement = event.target;
|
|
18
|
+
let dateArray = inputElement.value.split('-');
|
|
19
|
+
this.filterData.filterToCalendar = new Date(Number(dateArray[0]), Number(dateArray[1]) - 1, Number(dateArray[2]), 23, 59, 59).toISOString();
|
|
20
|
+
};
|
|
7
21
|
this.setClientStyling = () => {
|
|
8
22
|
let sheet = document.createElement('style');
|
|
9
23
|
sheet.innerHTML = this.clientStyling;
|
|
@@ -70,27 +84,17 @@ export class HelperFilters {
|
|
|
70
84
|
this.modalCloseEvent();
|
|
71
85
|
this.showClearButton = true;
|
|
72
86
|
this.filterSelectionHandler(this.filterData);
|
|
73
|
-
console.log(this.showClearButton);
|
|
74
87
|
}
|
|
75
88
|
resetSearch() {
|
|
76
89
|
this.showClearButton = false;
|
|
77
90
|
this.filterSelectionResetHandler(this.filterDataReset);
|
|
78
91
|
this.filterData = {};
|
|
79
92
|
}
|
|
80
|
-
handleTicketDrawId(event) {
|
|
81
|
-
this.filterData.ticketDrawId = event.target.value;
|
|
82
|
-
}
|
|
83
|
-
handleFilterFrom(event) {
|
|
84
|
-
this.filterData.filterFromCalendar = new Date(event.target.value).toISOString();
|
|
85
|
-
}
|
|
86
|
-
handleFilterTo(event) {
|
|
87
|
-
this.filterData.filterToCalendar = new Date(event.target.value).toISOString();
|
|
88
|
-
}
|
|
89
93
|
render() {
|
|
90
|
-
return (h("div", { key: '
|
|
94
|
+
return (h("div", { key: '285e81fe3f4ba59c4a17445e8a296408a21ac15c', class: "HelperFilters", ref: el => this.stylingContainer = el }, h("div", { key: 'e1839ec68ae9f4d54a97b7e0bc81fd5bd9c6b924', class: "FilterButtonsWrapper" }, h("button", { key: '5b6b2402dad6d7c1c315ffd5a2e251e898c8db5b', class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate('filterOpen', this.language)), (this.showClearButton || this.quickFiltersActive) ?
|
|
91
95
|
h("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate('filterClear', this.language))
|
|
92
96
|
:
|
|
93
|
-
null), h("helper-modal", { key: '
|
|
97
|
+
null), h("helper-modal", { key: 'c60e5024e590e3c2217c4d2698f86a5b6d33562a', "title-modal": "Filter Modal", visible: this.showFilterModal, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, h("div", { key: 'd0fcf27d381016db6c6460973cefbb28187cbd01', class: "FilterModalHeader" }, h("h3", { key: 'ab73abba95ea9654c902db1f4650b7bc004c62c5', class: "FilterModalTitle" }, this.activateTicketSearch ? translate('filterModalTicketTitle', this.language) : translate('filterModalDrawTitle', this.language))), h("div", { key: '13dff7787135e8e35dadfb23b1acdf9ea11a995b', class: "FilterModalBody" }, this.showFilterId && h("div", { key: '6c773a1b5a5af00c6c2c69aaa24c2f2fa766356a' }, h("input", { key: 'f6ba11c2abaa1977358f08a923db1b7c12290ef1', id: "FilterById", type: "text", value: this.filterData.ticketDrawId, onInput: this.handleTicketDrawId, class: "FilterModalSearch", placeholder: this.activateTicketSearch ? translate('filterTicketPlaceholder', this.language) : translate('filterDrawPlaceholder', this.language) }), h("p", { key: '39fd8bfc2422a227cf118672213b0499298c73bc' }, translate('filterOrDate', this.language))), h("div", { key: 'f86cf8390870b64ed646c94c312198a21f99f565', class: "FilterCalendarWrapper" }, h("vaadin-date-picker", { key: 'cddc64eda6025e2a3568f86e0e039ded55530ab1', value: this.filterData.filterFromCalendar, onChange: this.handleFilterFrom, placeholder: translate('filterFromCalendar', this.language), class: "VaadinDatePicker" }), h("vaadin-date-picker", { key: '0963561d635097452964f55bccf5182cde88e0c2', value: this.filterData.filterToCalendar, onChange: this.handleFilterTo, placeholder: translate('filterToCalendar', this.language), class: "VaadinDatePicker" }))), h("div", { key: '5f880497e96ba7e55fb1f46b073d8b6259feded5', class: "FilterModalFooter" }, h("button", { key: '64cb6b50666e8a9879e3fc10df8ab36315357cef', class: "FilterModalButton", onClick: () => this.filterSearch() }, translate('filterModalButton', this.language))))));
|
|
94
98
|
}
|
|
95
99
|
static get is() { return "helper-filters"; }
|
|
96
100
|
static get encapsulation() { return "shadow"; }
|
|
@@ -24297,7 +24297,7 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
|
|
|
24297
24297
|
|
|
24298
24298
|
defineCustomElement(DatePicker);
|
|
24299
24299
|
|
|
24300
|
-
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
|
|
24300
|
+
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:var(--emw--button-border-radius, 4px);padding:8px 15px;width:max-content;border:1px solid var(--emw--button-border-color, #00958f);background:var(--emw--button-background-color, #00958f);color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterButtonsWrapper .FilterOpen:hover{background:var(--emw--button-background-color, #00958f);color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255))}.FilterButtonsWrapper .FilterClear{cursor:pointer;border-radius:var(--emw--button-border-radius, 4px);padding:8px 15px;width:max-content;border:1px solid var(--emw--button-border-color, #00958f);background:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));color:var(--emw--button-text-color, #000);font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterButtonsWrapper .FilterClear:hover{background:var(--emw--button-background-color, #00958f);color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255))}.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:var(--emw--color-typography, #009993);text-transform:uppercase}.FilterModalHeader .FilterModalSearch,.FilterModalBody .FilterModalSearch,.FilterModalFooter .FilterModalSearch{border-radius:var(--emw--button-border-radius, 4px);background:var(--emw--color-gray-transparency-60, #e8ebef);color:var(--emw--color-secondary-variant, #263445);width:100%;height:26px;max-width:280px;padding:5px;font-size:15px;border:none;outline:var(--emw--color-typography, #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:var(--emw--button-border-radius, 4px);padding:8px 60px;width:max-content;margin:5px;border:1px solid var(--emw--button-border-color, #00958f);background:var(--emw--button-background-color, #00958f);color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));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:var(--emw--button-background-color, #00958f);color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255))}.FilterModalHeader p,.FilterModalBody p,.FilterModalFooter p{margin:5px 0}";
|
|
24301
24301
|
const HelperFiltersStyle0 = helperFiltersCss;
|
|
24302
24302
|
|
|
24303
24303
|
const HelperFilters = class {
|
|
@@ -24306,6 +24306,20 @@ const HelperFilters = class {
|
|
|
24306
24306
|
this.filterDraw = createEvent(this, "filterDraw", 7);
|
|
24307
24307
|
this.filterSelection = createEvent(this, "filterSelection", 7);
|
|
24308
24308
|
this.filterSelectionReset = createEvent(this, "filterSelectionReset", 7);
|
|
24309
|
+
this.handleTicketDrawId = (event) => {
|
|
24310
|
+
const inputElement = event.target;
|
|
24311
|
+
this.filterData.ticketDrawId = inputElement.value;
|
|
24312
|
+
};
|
|
24313
|
+
this.handleFilterFrom = (event) => {
|
|
24314
|
+
const inputElement = event.target;
|
|
24315
|
+
let dateArray = inputElement.value.split('-');
|
|
24316
|
+
this.filterData.filterFromCalendar = new Date(Number(dateArray[0]), Number(dateArray[1]) - 1, Number(dateArray[2]), 0, 0, 0).toISOString();
|
|
24317
|
+
};
|
|
24318
|
+
this.handleFilterTo = (event) => {
|
|
24319
|
+
const inputElement = event.target;
|
|
24320
|
+
let dateArray = inputElement.value.split('-');
|
|
24321
|
+
this.filterData.filterToCalendar = new Date(Number(dateArray[0]), Number(dateArray[1]) - 1, Number(dateArray[2]), 23, 59, 59).toISOString();
|
|
24322
|
+
};
|
|
24309
24323
|
this.setClientStyling = () => {
|
|
24310
24324
|
let sheet = document.createElement('style');
|
|
24311
24325
|
sheet.innerHTML = this.clientStyling;
|
|
@@ -24372,27 +24386,17 @@ const HelperFilters = class {
|
|
|
24372
24386
|
this.modalCloseEvent();
|
|
24373
24387
|
this.showClearButton = true;
|
|
24374
24388
|
this.filterSelectionHandler(this.filterData);
|
|
24375
|
-
console.log(this.showClearButton);
|
|
24376
24389
|
}
|
|
24377
24390
|
resetSearch() {
|
|
24378
24391
|
this.showClearButton = false;
|
|
24379
24392
|
this.filterSelectionResetHandler(this.filterDataReset);
|
|
24380
24393
|
this.filterData = {};
|
|
24381
24394
|
}
|
|
24382
|
-
handleTicketDrawId(event) {
|
|
24383
|
-
this.filterData.ticketDrawId = event.target.value;
|
|
24384
|
-
}
|
|
24385
|
-
handleFilterFrom(event) {
|
|
24386
|
-
this.filterData.filterFromCalendar = new Date(event.target.value).toISOString();
|
|
24387
|
-
}
|
|
24388
|
-
handleFilterTo(event) {
|
|
24389
|
-
this.filterData.filterToCalendar = new Date(event.target.value).toISOString();
|
|
24390
|
-
}
|
|
24391
24395
|
render() {
|
|
24392
|
-
return (h$2("div", { key: '
|
|
24396
|
+
return (h$2("div", { key: '285e81fe3f4ba59c4a17445e8a296408a21ac15c', class: "HelperFilters", ref: el => this.stylingContainer = el }, h$2("div", { key: 'e1839ec68ae9f4d54a97b7e0bc81fd5bd9c6b924', class: "FilterButtonsWrapper" }, h$2("button", { key: '5b6b2402dad6d7c1c315ffd5a2e251e898c8db5b', class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate$1('filterOpen', this.language)), (this.showClearButton || this.quickFiltersActive) ?
|
|
24393
24397
|
h$2("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate$1('filterClear', this.language))
|
|
24394
24398
|
:
|
|
24395
|
-
null), h$2("helper-modal", { key: '
|
|
24399
|
+
null), h$2("helper-modal", { key: 'c60e5024e590e3c2217c4d2698f86a5b6d33562a', "title-modal": "Filter Modal", visible: this.showFilterModal, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, h$2("div", { key: 'd0fcf27d381016db6c6460973cefbb28187cbd01', class: "FilterModalHeader" }, h$2("h3", { key: 'ab73abba95ea9654c902db1f4650b7bc004c62c5', class: "FilterModalTitle" }, this.activateTicketSearch ? translate$1('filterModalTicketTitle', this.language) : translate$1('filterModalDrawTitle', this.language))), h$2("div", { key: '13dff7787135e8e35dadfb23b1acdf9ea11a995b', class: "FilterModalBody" }, this.showFilterId && h$2("div", { key: '6c773a1b5a5af00c6c2c69aaa24c2f2fa766356a' }, h$2("input", { key: 'f6ba11c2abaa1977358f08a923db1b7c12290ef1', id: "FilterById", type: "text", value: this.filterData.ticketDrawId, onInput: this.handleTicketDrawId, class: "FilterModalSearch", placeholder: this.activateTicketSearch ? translate$1('filterTicketPlaceholder', this.language) : translate$1('filterDrawPlaceholder', this.language) }), h$2("p", { key: '39fd8bfc2422a227cf118672213b0499298c73bc' }, translate$1('filterOrDate', this.language))), h$2("div", { key: 'f86cf8390870b64ed646c94c312198a21f99f565', class: "FilterCalendarWrapper" }, h$2("vaadin-date-picker", { key: 'cddc64eda6025e2a3568f86e0e039ded55530ab1', value: this.filterData.filterFromCalendar, onChange: this.handleFilterFrom, placeholder: translate$1('filterFromCalendar', this.language), class: "VaadinDatePicker" }), h$2("vaadin-date-picker", { key: '0963561d635097452964f55bccf5182cde88e0c2', value: this.filterData.filterToCalendar, onChange: this.handleFilterTo, placeholder: translate$1('filterToCalendar', this.language), class: "VaadinDatePicker" }))), h$2("div", { key: '5f880497e96ba7e55fb1f46b073d8b6259feded5', class: "FilterModalFooter" }, h$2("button", { key: '64cb6b50666e8a9879e3fc10df8ab36315357cef', class: "FilterModalButton", onClick: () => this.filterSearch() }, translate$1('filterModalButton', this.language))))));
|
|
24396
24400
|
}
|
|
24397
24401
|
};
|
|
24398
24402
|
HelperFilters.style = HelperFiltersStyle0;
|
|
@@ -24410,7 +24414,7 @@ const isMobile = (userAgent) => {
|
|
|
24410
24414
|
userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
|
|
24411
24415
|
};
|
|
24412
24416
|
|
|
24413
|
-
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
|
|
24417
|
+
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 var(--emw--color-gray-transparency-40, #848e97);box-shadow:2px 2px 2px rgba(0, 0, 0, 0.007);font-size:14px;padding:10px 10px 5px 10px;background-color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:4px;width:600px;max-height:600px;overflow-y:scroll}.HelperModalMobileContent{background:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));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:var(--emw--button-text-color, #000)}.HelperModalMobileClose{position:absolute;top:15px;right:15px;font-size:20px;color:var(--emw--button-text-color, #000)}";
|
|
24414
24418
|
const HelperModalStyle0 = helperModalCss;
|
|
24415
24419
|
|
|
24416
24420
|
const HelperModal = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,b as e}from"./p-da436b95.js";export{s as setNonce}from"./p-da436b95.js";import{g as i}from"./p-e1255160.js";(()=>{const e=import.meta.url,i={};return""!==e&&(i.resourcesUrl=new URL(".",e).href),t(i)})().then((async t=>(await i(),e([["p-
|
|
1
|
+
import{p as t,b as e}from"./p-da436b95.js";export{s as setNonce}from"./p-da436b95.js";import{g as i}from"./p-e1255160.js";(()=>{const e=import.meta.url,i={};return""!==e&&(i.resourcesUrl=new URL(".",e).href),t(i)})().then((async t=>(await i(),e([["p-4d385172",[[1,"helper-filters",{showFilterId:[516,"show-filter-id"],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"],showFilterModal:[32],showClearButton:[32],filterData:[32],filterDataReset:[32],limitStylingAppends:[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]}]]]],t))));
|