@nuralyui/datepicker 0.0.4 → 0.0.5
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/bundle.js +791 -0
- package/datepicker.component.d.ts +189 -0
- package/datepicker.component.js +668 -0
- package/datepicker.component.js.map +1 -0
- package/datepicker.constant.d.ts +60 -0
- package/datepicker.constant.js +60 -0
- package/datepicker.constant.js.map +1 -0
- package/datepicker.style.d.ts +7 -0
- package/datepicker.style.js +456 -0
- package/datepicker.style.js.map +1 -0
- package/datepicker.style.variables.d.ts +11 -0
- package/datepicker.style.variables.js +115 -0
- package/datepicker.style.variables.js.map +1 -0
- package/datepicker.type.d.ts +142 -0
- package/datepicker.type.js +75 -0
- package/datepicker.type.js.map +1 -0
- package/index.d.ts +4 -1
- package/index.js +4 -1
- package/index.js.map +1 -1
- package/package.json +16 -2
- package/react.d.ts +15 -2
- package/react.js +16 -3
- package/react.js.map +1 -1
- package/constants.d.ts +0 -2
- package/constants.d.ts.map +0 -1
- package/constants.js +0 -2
- package/constants.js.map +0 -1
- package/core/day.helper.d.ts +0 -5
- package/core/day.helper.d.ts.map +0 -1
- package/core/day.helper.js +0 -53
- package/core/day.helper.js.map +0 -1
- package/core/formatter.d.ts +0 -2
- package/core/formatter.d.ts.map +0 -1
- package/core/formatter.js +0 -9
- package/core/formatter.js.map +0 -1
- package/core/locale.helper.d.ts +0 -144
- package/core/locale.helper.d.ts.map +0 -1
- package/core/locale.helper.js +0 -151
- package/core/locale.helper.js.map +0 -1
- package/core/month.helper.d.ts +0 -3
- package/core/month.helper.d.ts.map +0 -1
- package/core/month.helper.js +0 -24
- package/core/month.helper.js.map +0 -1
- package/core/string.helper.d.ts +0 -2
- package/core/string.helper.d.ts.map +0 -1
- package/core/string.helper.js +0 -4
- package/core/string.helper.js.map +0 -1
- package/date-picker.component.d.ts +0 -80
- package/date-picker.component.d.ts.map +0 -1
- package/date-picker.component.js +0 -475
- package/date-picker.component.js.map +0 -1
- package/date-picker.style.d.ts +0 -2
- package/date-picker.style.d.ts.map +0 -1
- package/date-picker.style.js +0 -223
- package/date-picker.style.js.map +0 -1
- package/datepicker.types.d.ts +0 -39
- package/datepicker.types.d.ts.map +0 -1
- package/datepicker.types.js +0 -8
- package/datepicker.types.js.map +0 -1
- package/demo/date-picker-demo.d.ts +0 -18
- package/demo/date-picker-demo.d.ts.map +0 -1
- package/demo/date-picker-demo.js +0 -95
- package/demo/date-picker-demo.js.map +0 -1
- package/index.d.ts.map +0 -1
- package/react.d.ts.map +0 -1
- package/templates/days.template.d.ts +0 -4
- package/templates/days.template.d.ts.map +0 -1
- package/templates/days.template.js +0 -28
- package/templates/days.template.js.map +0 -1
- package/templates/headers.template.d.ts +0 -2
- package/templates/headers.template.d.ts.map +0 -1
- package/templates/headers.template.js +0 -5
- package/templates/headers.template.js.map +0 -1
- package/templates/months.template.d.ts +0 -6
- package/templates/months.template.d.ts.map +0 -1
- package/templates/months.template.js +0 -10
- package/templates/months.template.js.map +0 -1
- package/templates/years.template.d.ts +0 -6
- package/templates/years.template.d.ts.map +0 -1
- package/templates/years.template.js +0 -11
- package/templates/years.template.js.map +0 -1
- package/test/datepicker_test.d.ts +0 -2
- package/test/datepicker_test.d.ts.map +0 -1
- package/test/datepicker_test.js +0 -132
- package/test/datepicker_test.js.map +0 -1
package/date-picker.style.js
DELETED
|
@@ -1,223 +0,0 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
2
|
-
const calendarStyles = css `
|
|
3
|
-
:host {
|
|
4
|
-
font-family: var(--hybrid-datepicker-font-family);
|
|
5
|
-
}
|
|
6
|
-
.calendar-container {
|
|
7
|
-
z-index: 10000;
|
|
8
|
-
user-select: none;
|
|
9
|
-
padding: 5px;
|
|
10
|
-
width: 350px;
|
|
11
|
-
float: left;
|
|
12
|
-
text-align: center;
|
|
13
|
-
position: absolute;
|
|
14
|
-
background-color: var(--hybrid-datepicker-background-color);
|
|
15
|
-
}
|
|
16
|
-
nr-button {
|
|
17
|
-
--hybrid-button-border-top: 1px solid transparent;
|
|
18
|
-
--hybrid-button-border-bottom: 1px solid transparent;
|
|
19
|
-
--hybrid-button-border-left: 1px solid transparent;
|
|
20
|
-
--hybrid-button-border-right: 1px solid transparent;
|
|
21
|
-
--hybrid-button-background-color: var(--hybrid-datepicker-button-background-color);
|
|
22
|
-
--hybrid-button-text-color: var(--hybrid-datepicker-button-text-color);
|
|
23
|
-
}
|
|
24
|
-
.toggle-year-view,
|
|
25
|
-
.toggle-month-view {
|
|
26
|
-
--hybrid-button-font-weight: var(--hybrid-datepicker-toggle-month-year-font-weight);
|
|
27
|
-
}
|
|
28
|
-
.current-year-container {
|
|
29
|
-
display: inline-flex;
|
|
30
|
-
gap: 5px;
|
|
31
|
-
}
|
|
32
|
-
.year-icons-toggler {
|
|
33
|
-
display: none;
|
|
34
|
-
flex-direction: column;
|
|
35
|
-
line-height: 0;
|
|
36
|
-
}
|
|
37
|
-
.next-year,
|
|
38
|
-
.previous-year {
|
|
39
|
-
--hybrid-button-width: 10px;
|
|
40
|
-
--hybrid-button-height: 10px;
|
|
41
|
-
--hybrid-button-padding-x: 0px;
|
|
42
|
-
--hybrid-button-padding-y: 0px;
|
|
43
|
-
--hybrid-button-hover-border-color: transparent;
|
|
44
|
-
--hybrid-button-active-border-color: transparent;
|
|
45
|
-
}
|
|
46
|
-
.calendar-container-range {
|
|
47
|
-
width: 600px;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.header-next-button {
|
|
51
|
-
float: right;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.header-prev-button {
|
|
55
|
-
float: left;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.day-containers {
|
|
59
|
-
display: flex;
|
|
60
|
-
flex-flow: row;
|
|
61
|
-
width: 100%;
|
|
62
|
-
}
|
|
63
|
-
.days-container {
|
|
64
|
-
color: var(--hybrid-datepicker-day-container-color);
|
|
65
|
-
display: flex;
|
|
66
|
-
flex-grow: 1;
|
|
67
|
-
flex-wrap: wrap;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.day-container,
|
|
71
|
-
.day-header-item {
|
|
72
|
-
width: 13%;
|
|
73
|
-
height: var(--hybrid-datepicker-day-container-height);
|
|
74
|
-
font-size: 13px;
|
|
75
|
-
margin: 2px;
|
|
76
|
-
cursor: pointer;
|
|
77
|
-
line-height: 2.5;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
:host([size='small']) .day-container {
|
|
81
|
-
height: var(--hybrid-datepicker-small-day-container-height);
|
|
82
|
-
}
|
|
83
|
-
:host([size='large']) .day-container {
|
|
84
|
-
height: var(--hybrid-datepicker-large-day-container-height);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
:not(.day-active).day-container:hover {
|
|
88
|
-
background-color: var(--hybrid-datepicker-day-container-hover-background-color);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.day-active,
|
|
92
|
-
.month-active,
|
|
93
|
-
.year-active {
|
|
94
|
-
background-color: var(--hybrid-datepicker-current-day-month-year-background-color);
|
|
95
|
-
color: var(--hybrid-datepicker-current-day-month-year-color);
|
|
96
|
-
}
|
|
97
|
-
.today {
|
|
98
|
-
position: relative;
|
|
99
|
-
}
|
|
100
|
-
:not(.day-active).today {
|
|
101
|
-
color: var(--hybrid-datepicker-today-color);
|
|
102
|
-
}
|
|
103
|
-
.current-year-container:hover > .year-icons-toggler {
|
|
104
|
-
display: inline-flex;
|
|
105
|
-
}
|
|
106
|
-
.today::after {
|
|
107
|
-
content: '';
|
|
108
|
-
display: block;
|
|
109
|
-
width: 4px;
|
|
110
|
-
height: 4px;
|
|
111
|
-
background-color: var(--hybrid-datepicker-today-underline-color);
|
|
112
|
-
position: absolute;
|
|
113
|
-
top: 75%;
|
|
114
|
-
right: 50%;
|
|
115
|
-
transform: translate(50%);
|
|
116
|
-
}
|
|
117
|
-
.day-header-item {
|
|
118
|
-
cursor: auto;
|
|
119
|
-
}
|
|
120
|
-
.day-invalid {
|
|
121
|
-
color: var(--hybrid-datepicker-day-invalid-color);
|
|
122
|
-
}
|
|
123
|
-
.day-invalid:hover {
|
|
124
|
-
background-color: var(--hybrid-datepicker-day-invalid-hover-background-color);
|
|
125
|
-
}
|
|
126
|
-
.year-month-header {
|
|
127
|
-
display: inline-block;
|
|
128
|
-
line-height: 2;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
.months-container {
|
|
132
|
-
display: flex;
|
|
133
|
-
flex-grow: 1;
|
|
134
|
-
flex-wrap: wrap;
|
|
135
|
-
color: var(--hybrid-datepicker-month-container-color);
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.month-container {
|
|
139
|
-
width: 33%;
|
|
140
|
-
line-height: var(--hybrid-datepicker-month-container-line-height);
|
|
141
|
-
cursor: pointer;
|
|
142
|
-
font-size: 13px;
|
|
143
|
-
}
|
|
144
|
-
:not(.month-active).month-container:hover {
|
|
145
|
-
background-color: var(--hybrid-datepicker-month-container-hover-background-color);
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
:host([size='small']) .month-container {
|
|
149
|
-
line-height: var(--hybrid-datepicker-small-month-container-line-height);
|
|
150
|
-
}
|
|
151
|
-
:host([size='large']) .month-container {
|
|
152
|
-
line-height: var(--hybrid-datepicker-large-month-container-line-height);
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.years-container {
|
|
156
|
-
display: flex;
|
|
157
|
-
flex-grow: 1;
|
|
158
|
-
flex-wrap: wrap;
|
|
159
|
-
color: var(--hybrid-datepicker-year-container-color);
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
.year-container {
|
|
163
|
-
width: 33%;
|
|
164
|
-
line-height: var(--hybrid-datepicker-year-container-line-height);
|
|
165
|
-
cursor: pointer;
|
|
166
|
-
font-size: 13px;
|
|
167
|
-
}
|
|
168
|
-
:not(.year-active).year-container:hover {
|
|
169
|
-
background-color: var(--hybrid-datepicker-year-container-hover-background-color);
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
:host([size='small']) .year-container {
|
|
173
|
-
line-height: var(--hybrid-datepicker-small-year-container-line-height);
|
|
174
|
-
}
|
|
175
|
-
:host([size='large']) .year-container {
|
|
176
|
-
line-height: var(--hybrid-datepicker-large-year-container-line-height);
|
|
177
|
-
}
|
|
178
|
-
:host {
|
|
179
|
-
--hybrid-datepicker-font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, SFProLocalRange;
|
|
180
|
-
--hybrid-datepicker-background-color: #f9f9f9;
|
|
181
|
-
--hybrid-datepicker-toggle-month-year-font-weight: bold;
|
|
182
|
-
--hybrid-datepicker-button-background-color: #f9f9f9;
|
|
183
|
-
--hybrid-datepicker-button-text-color: #393939;
|
|
184
|
-
|
|
185
|
-
--hybrid-datepicker-year-container-line-height: 4.3;
|
|
186
|
-
--hybrid-datepicker-small-year-container-line-height: 3.3;
|
|
187
|
-
--hybrid-datepicker-large-year-container-line-height: 5.3;
|
|
188
|
-
--hybrid-datepicker-year-container-hover-background-color: #e4e4e4;
|
|
189
|
-
--hybrid-datepicker-month-container-line-height: 4.3;
|
|
190
|
-
--hybrid-datepicker-small-month-container-line-height: 3.3;
|
|
191
|
-
--hybrid-datepicker-large-month-container-line-height: 5.3;
|
|
192
|
-
--hybrid-datepicker-month-container-hover-background-color: #e4e4e4;
|
|
193
|
-
--hybrid-datepicker-day-container-height: 30px;
|
|
194
|
-
--hybrid-datepicker-day-container-color: #000000;
|
|
195
|
-
--hybrid-datepicker-month-container-color: #000000;
|
|
196
|
-
--hybrid-datepicker-year-container-color: #000000;
|
|
197
|
-
--hybrid-datepicker-small-day-container-height: 25px;
|
|
198
|
-
--hybrid-datepicker-large-day-container-height: 35px;
|
|
199
|
-
--hybrid-datepicker-day-container-hover-background-color: #e4e4e4;
|
|
200
|
-
--hybrid-datepicker-day-invalid-color: #9a9a9a;
|
|
201
|
-
--hybrid-datepicker-day-invalid-hover-background-color: #e6e6e6;
|
|
202
|
-
--hybrid-datepicker-current-day-month-year-background-color: #0f62fe;
|
|
203
|
-
--hybrid-datepicker-current-day-month-year-color: #ffffff;
|
|
204
|
-
--hybrid-datepicker-today-underline-color: #0f62fe;
|
|
205
|
-
--hybrid-datepicker-today-color: #0f62fe;
|
|
206
|
-
}
|
|
207
|
-
@media (prefers-color-scheme: dark) {
|
|
208
|
-
:host {
|
|
209
|
-
--hybrid-datepicker-background-color: #000000;
|
|
210
|
-
--hybrid-datepicker-day-container-color: #ffffff;
|
|
211
|
-
--hybrid-datepicker-month-container-color: #ffffff;
|
|
212
|
-
--hybrid-datepicker-year-container-color: #ffffff;
|
|
213
|
-
--hybrid-datepicker-button-background-color: #000000;
|
|
214
|
-
--hybrid-datepicker-button-text-color: #ffffff;
|
|
215
|
-
--hybrid-datepicker-day-container-hover-background-color: #393939;
|
|
216
|
-
--hybrid-datepicker-day-invalid-hover-background-color: #393939;
|
|
217
|
-
--hybrid-datepicker-month-container-hover-background-color: #393939;
|
|
218
|
-
--hybrid-datepicker-year-container-hover-background-color: #393939;
|
|
219
|
-
}
|
|
220
|
-
}
|
|
221
|
-
`;
|
|
222
|
-
export const styles = [calendarStyles];
|
|
223
|
-
//# sourceMappingURL=date-picker.style.js.map
|
package/date-picker.style.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"date-picker.style.js","sourceRoot":"","sources":["../../../src/components/datepicker/date-picker.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2NzB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,cAAc,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst calendarStyles = css`\n :host {\n font-family: var(--hybrid-datepicker-font-family);\n }\n .calendar-container {\n z-index: 10000;\n user-select: none;\n padding: 5px;\n width: 350px;\n float: left;\n text-align: center;\n position: absolute;\n background-color: var(--hybrid-datepicker-background-color);\n }\n nr-button {\n --hybrid-button-border-top: 1px solid transparent;\n --hybrid-button-border-bottom: 1px solid transparent;\n --hybrid-button-border-left: 1px solid transparent;\n --hybrid-button-border-right: 1px solid transparent;\n --hybrid-button-background-color: var(--hybrid-datepicker-button-background-color);\n --hybrid-button-text-color: var(--hybrid-datepicker-button-text-color);\n }\n .toggle-year-view,\n .toggle-month-view {\n --hybrid-button-font-weight: var(--hybrid-datepicker-toggle-month-year-font-weight);\n }\n .current-year-container {\n display: inline-flex;\n gap: 5px;\n }\n .year-icons-toggler {\n display: none;\n flex-direction: column;\n line-height: 0;\n }\n .next-year,\n .previous-year {\n --hybrid-button-width: 10px;\n --hybrid-button-height: 10px;\n --hybrid-button-padding-x: 0px;\n --hybrid-button-padding-y: 0px;\n --hybrid-button-hover-border-color: transparent;\n --hybrid-button-active-border-color: transparent;\n }\n .calendar-container-range {\n width: 600px;\n }\n\n .header-next-button {\n float: right;\n }\n\n .header-prev-button {\n float: left;\n }\n\n .day-containers {\n display: flex;\n flex-flow: row;\n width: 100%;\n }\n .days-container {\n color: var(--hybrid-datepicker-day-container-color);\n display: flex;\n flex-grow: 1;\n flex-wrap: wrap;\n }\n\n .day-container,\n .day-header-item {\n width: 13%;\n height: var(--hybrid-datepicker-day-container-height);\n font-size: 13px;\n margin: 2px;\n cursor: pointer;\n line-height: 2.5;\n }\n\n :host([size='small']) .day-container {\n height: var(--hybrid-datepicker-small-day-container-height);\n }\n :host([size='large']) .day-container {\n height: var(--hybrid-datepicker-large-day-container-height);\n }\n\n :not(.day-active).day-container:hover {\n background-color: var(--hybrid-datepicker-day-container-hover-background-color);\n }\n\n .day-active,\n .month-active,\n .year-active {\n background-color: var(--hybrid-datepicker-current-day-month-year-background-color);\n color: var(--hybrid-datepicker-current-day-month-year-color);\n }\n .today {\n position: relative;\n }\n :not(.day-active).today {\n color: var(--hybrid-datepicker-today-color);\n }\n .current-year-container:hover > .year-icons-toggler {\n display: inline-flex;\n }\n .today::after {\n content: '';\n display: block;\n width: 4px;\n height: 4px;\n background-color: var(--hybrid-datepicker-today-underline-color);\n position: absolute;\n top: 75%;\n right: 50%;\n transform: translate(50%);\n }\n .day-header-item {\n cursor: auto;\n }\n .day-invalid {\n color: var(--hybrid-datepicker-day-invalid-color);\n }\n .day-invalid:hover {\n background-color: var(--hybrid-datepicker-day-invalid-hover-background-color);\n }\n .year-month-header {\n display: inline-block;\n line-height: 2;\n }\n\n .months-container {\n display: flex;\n flex-grow: 1;\n flex-wrap: wrap;\n color: var(--hybrid-datepicker-month-container-color);\n }\n\n .month-container {\n width: 33%;\n line-height: var(--hybrid-datepicker-month-container-line-height);\n cursor: pointer;\n font-size: 13px;\n }\n :not(.month-active).month-container:hover {\n background-color: var(--hybrid-datepicker-month-container-hover-background-color);\n }\n\n :host([size='small']) .month-container {\n line-height: var(--hybrid-datepicker-small-month-container-line-height);\n }\n :host([size='large']) .month-container {\n line-height: var(--hybrid-datepicker-large-month-container-line-height);\n }\n\n .years-container {\n display: flex;\n flex-grow: 1;\n flex-wrap: wrap;\n color: var(--hybrid-datepicker-year-container-color);\n }\n\n .year-container {\n width: 33%;\n line-height: var(--hybrid-datepicker-year-container-line-height);\n cursor: pointer;\n font-size: 13px;\n }\n :not(.year-active).year-container:hover {\n background-color: var(--hybrid-datepicker-year-container-hover-background-color);\n }\n\n :host([size='small']) .year-container {\n line-height: var(--hybrid-datepicker-small-year-container-line-height);\n }\n :host([size='large']) .year-container {\n line-height: var(--hybrid-datepicker-large-year-container-line-height);\n }\n :host {\n --hybrid-datepicker-font-family: Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, SFProLocalRange;\n --hybrid-datepicker-background-color: #f9f9f9;\n --hybrid-datepicker-toggle-month-year-font-weight: bold;\n --hybrid-datepicker-button-background-color: #f9f9f9;\n --hybrid-datepicker-button-text-color: #393939;\n\n --hybrid-datepicker-year-container-line-height: 4.3;\n --hybrid-datepicker-small-year-container-line-height: 3.3;\n --hybrid-datepicker-large-year-container-line-height: 5.3;\n --hybrid-datepicker-year-container-hover-background-color: #e4e4e4;\n --hybrid-datepicker-month-container-line-height: 4.3;\n --hybrid-datepicker-small-month-container-line-height: 3.3;\n --hybrid-datepicker-large-month-container-line-height: 5.3;\n --hybrid-datepicker-month-container-hover-background-color: #e4e4e4;\n --hybrid-datepicker-day-container-height: 30px;\n --hybrid-datepicker-day-container-color: #000000;\n --hybrid-datepicker-month-container-color: #000000;\n --hybrid-datepicker-year-container-color: #000000;\n --hybrid-datepicker-small-day-container-height: 25px;\n --hybrid-datepicker-large-day-container-height: 35px;\n --hybrid-datepicker-day-container-hover-background-color: #e4e4e4;\n --hybrid-datepicker-day-invalid-color: #9a9a9a;\n --hybrid-datepicker-day-invalid-hover-background-color: #e6e6e6;\n --hybrid-datepicker-current-day-month-year-background-color: #0f62fe;\n --hybrid-datepicker-current-day-month-year-color: #ffffff;\n --hybrid-datepicker-today-underline-color: #0f62fe;\n --hybrid-datepicker-today-color: #0f62fe;\n }\n @media (prefers-color-scheme: dark) {\n :host {\n --hybrid-datepicker-background-color: #000000;\n --hybrid-datepicker-day-container-color: #ffffff;\n --hybrid-datepicker-month-container-color: #ffffff;\n --hybrid-datepicker-year-container-color: #ffffff;\n --hybrid-datepicker-button-background-color: #000000;\n --hybrid-datepicker-button-text-color: #ffffff;\n --hybrid-datepicker-day-container-hover-background-color: #393939;\n --hybrid-datepicker-day-invalid-hover-background-color: #393939;\n --hybrid-datepicker-month-container-hover-background-color: #393939;\n --hybrid-datepicker-year-container-hover-background-color: #393939;\n }\n }\n`;\nexport const styles = [calendarStyles];\n"]}
|
package/datepicker.types.d.ts
DELETED
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
export declare enum Mode {
|
|
2
|
-
Day = "day",
|
|
3
|
-
Month = "month",
|
|
4
|
-
Year = "year",
|
|
5
|
-
Decade = "decade"
|
|
6
|
-
}
|
|
7
|
-
export interface INavigationDate {
|
|
8
|
-
start: {
|
|
9
|
-
year: number;
|
|
10
|
-
month: number;
|
|
11
|
-
day: number;
|
|
12
|
-
};
|
|
13
|
-
}
|
|
14
|
-
export interface IDayPresentation {
|
|
15
|
-
date: number;
|
|
16
|
-
day: number;
|
|
17
|
-
dayString: string;
|
|
18
|
-
month: number;
|
|
19
|
-
valid: number;
|
|
20
|
-
year: number;
|
|
21
|
-
timestamp: number;
|
|
22
|
-
}
|
|
23
|
-
export interface IDayInfo {
|
|
24
|
-
dayIndex: number;
|
|
25
|
-
numberOfDays: number;
|
|
26
|
-
firstDay: number;
|
|
27
|
-
year: number;
|
|
28
|
-
month: number;
|
|
29
|
-
days: string[];
|
|
30
|
-
}
|
|
31
|
-
export interface DateRawObject {
|
|
32
|
-
curentYear: number;
|
|
33
|
-
currentMonth: number;
|
|
34
|
-
currentDay: number;
|
|
35
|
-
endYear: number;
|
|
36
|
-
endMonth: number;
|
|
37
|
-
endDay: number;
|
|
38
|
-
}
|
|
39
|
-
//# sourceMappingURL=datepicker.types.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"datepicker.types.d.ts","sourceRoot":"","sources":["../../../src/components/datepicker/datepicker.types.ts"],"names":[],"mappings":"AAAA,oBAAY,IAAI;IACd,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,IAAI,SAAS;IACb,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;KACb,CAAC;CACH;AACD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,QAAQ;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,EAAE,CAAC;CAChB;AACD,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAChB"}
|
package/datepicker.types.js
DELETED
package/datepicker.types.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"datepicker.types.js","sourceRoot":"","sources":["../../../src/components/datepicker/datepicker.types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,IAKX;AALD,WAAY,IAAI;IACd,mBAAW,CAAA;IACX,uBAAe,CAAA;IACf,qBAAa,CAAA;IACb,yBAAiB,CAAA;AACnB,CAAC,EALW,IAAI,KAAJ,IAAI,QAKf","sourcesContent":["export enum Mode {\n Day = 'day',\n Month = 'month',\n Year = 'year',\n Decade = 'decade',\n}\n\nexport interface INavigationDate {\n start: {\n year: number;\n month: number;\n day: number;\n };\n}\nexport interface IDayPresentation {\n date: number;\n day: number;\n dayString: string;\n month: number;\n valid: number;\n year: number;\n timestamp: number;\n}\n\nexport interface IDayInfo {\n dayIndex: number;\n numberOfDays: number;\n firstDay: number;\n year: number;\n month: number;\n days: string[];\n}\nexport interface DateRawObject {\n curentYear: number;\n currentMonth: number;\n currentDay: number;\n endYear: number;\n endMonth: number;\n endDay: number;\n}\n"]}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright 2023 Google Laabidi Aymen
|
|
4
|
-
* SPDX-License-Identifier: MIT
|
|
5
|
-
*/
|
|
6
|
-
import { LitElement } from 'lit';
|
|
7
|
-
import '../date-picker.component';
|
|
8
|
-
export declare class HyDatePickerDemoElement extends LitElement {
|
|
9
|
-
selectedLanguage: string;
|
|
10
|
-
_onLanguageSelected(event: any): void;
|
|
11
|
-
render(): import("lit").TemplateResult<1>;
|
|
12
|
-
}
|
|
13
|
-
declare global {
|
|
14
|
-
interface HTMLElementTagNameMap {
|
|
15
|
-
'hy-date-picker-demo': HyDatePickerDemoElement;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
//# sourceMappingURL=date-picker-demo.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"date-picker-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/datepicker/demo/date-picker-demo.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAErC,OAAO,0BAA0B,CAAC;AAElC,qBACa,uBAAwB,SAAQ,UAAU;IAErD,gBAAgB,SAAQ;IAGxB,mBAAmB,CAAC,KAAK,EAAE,GAAG;IAIrB,MAAM;CA8DhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,uBAAuB,CAAC;KAChD;CACF"}
|
package/demo/date-picker-demo.js
DELETED
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright 2023 Google Laabidi Aymen
|
|
4
|
-
* SPDX-License-Identifier: MIT
|
|
5
|
-
*/
|
|
6
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
7
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
8
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
9
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
10
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
11
|
-
};
|
|
12
|
-
import { LitElement, html } from 'lit';
|
|
13
|
-
import { customElement, state } from 'lit/decorators.js';
|
|
14
|
-
import '../date-picker.component';
|
|
15
|
-
let HyDatePickerDemoElement = class HyDatePickerDemoElement extends LitElement {
|
|
16
|
-
constructor() {
|
|
17
|
-
super(...arguments);
|
|
18
|
-
this.selectedLanguage = 'en';
|
|
19
|
-
}
|
|
20
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
21
|
-
_onLanguageSelected(event) {
|
|
22
|
-
this.selectedLanguage = event.target.value;
|
|
23
|
-
// Émettre un événement "language-selected" avec la langue sélectionnée
|
|
24
|
-
}
|
|
25
|
-
render() {
|
|
26
|
-
return html `
|
|
27
|
-
<!-- <hy-datepicker></hy-datepicker> -->
|
|
28
|
-
<select @change=${this._onLanguageSelected}>
|
|
29
|
-
<option value="en" ?selected=${this.selectedLanguage === 'en'}>English</option>
|
|
30
|
-
<option value="fr" ?selected=${this.selectedLanguage === 'fr'}>Français</option>
|
|
31
|
-
<option value="es" ?selected=${this.selectedLanguage === 'es'}>Español</option>
|
|
32
|
-
<option value="zh" ?selected=${this.selectedLanguage === 'zh'}>中文</option>
|
|
33
|
-
<option value="ar" ?selected=${this.selectedLanguage === 'ar'}>العربية</option>
|
|
34
|
-
</select>
|
|
35
|
-
<h3>datepicker Default</h3>
|
|
36
|
-
|
|
37
|
-
<hy-datepicker
|
|
38
|
-
locale=${this.selectedLanguage}
|
|
39
|
-
fieldFormat="DD/MM/YYYY"
|
|
40
|
-
@date-change=${(e) => {
|
|
41
|
-
console.log('event ', e);
|
|
42
|
-
}}
|
|
43
|
-
></hy-datepicker>
|
|
44
|
-
<br />
|
|
45
|
-
<h3>datepicker with init date</h3>
|
|
46
|
-
|
|
47
|
-
<hy-datepicker locale=${this.selectedLanguage} fieldFormat="DD/MM/YYYY" dateValue="20/11/2024"></hy-datepicker>
|
|
48
|
-
<br />
|
|
49
|
-
<h3>datepicker mm/dd/yy</h3>
|
|
50
|
-
|
|
51
|
-
<hy-datepicker locale=${this.selectedLanguage} fieldFormat="MM/DD/YYYY"></hy-datepicker>
|
|
52
|
-
<br />
|
|
53
|
-
<h3>datepicker small</h3>
|
|
54
|
-
|
|
55
|
-
<hy-datepicker locale=${this.selectedLanguage} fieldFormat="DD/MM/YYYY" size="small"></hy-datepicker>
|
|
56
|
-
<br />
|
|
57
|
-
<h3>datepicker large</h3>
|
|
58
|
-
|
|
59
|
-
<hy-datepicker locale=${this.selectedLanguage} fieldFormat="DD/MM/YYYY" size="large"></hy-datepicker>
|
|
60
|
-
<br />
|
|
61
|
-
<h3>datepicker with error</h3>
|
|
62
|
-
|
|
63
|
-
<hy-datepicker
|
|
64
|
-
locale=${this.selectedLanguage}
|
|
65
|
-
fieldFormat="DD/MM/YYYY"
|
|
66
|
-
state="error"
|
|
67
|
-
label="date label"
|
|
68
|
-
helper="date error"
|
|
69
|
-
></hy-datepicker>
|
|
70
|
-
<br />
|
|
71
|
-
<h3>datepicker with warning</h3>
|
|
72
|
-
|
|
73
|
-
<hy-datepicker
|
|
74
|
-
locale=${this.selectedLanguage}
|
|
75
|
-
fieldFormat="DD/MM/YYYY"
|
|
76
|
-
state="warning"
|
|
77
|
-
label="labeled date"
|
|
78
|
-
helper="date helper"
|
|
79
|
-
></hy-datepicker>
|
|
80
|
-
<br />
|
|
81
|
-
<h3>datepicker disabled</h3>
|
|
82
|
-
|
|
83
|
-
<hy-datepicker locale=${this.selectedLanguage} fieldFormat="DD/MM/YYYY" disabled=${true}></hy-datepicker>
|
|
84
|
-
<br />
|
|
85
|
-
`;
|
|
86
|
-
}
|
|
87
|
-
};
|
|
88
|
-
__decorate([
|
|
89
|
-
state()
|
|
90
|
-
], HyDatePickerDemoElement.prototype, "selectedLanguage", void 0);
|
|
91
|
-
HyDatePickerDemoElement = __decorate([
|
|
92
|
-
customElement('hy-date-picker-demo')
|
|
93
|
-
], HyDatePickerDemoElement);
|
|
94
|
-
export { HyDatePickerDemoElement };
|
|
95
|
-
//# sourceMappingURL=date-picker-demo.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"date-picker-demo.js","sourceRoot":"","sources":["../../../../src/components/datepicker/demo/date-picker-demo.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,aAAa,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACvD,OAAO,0BAA0B,CAAC;AAGlC,IAAa,uBAAuB,GAApC,MAAa,uBAAwB,SAAQ,UAAU;IAAvD;;QAEE,qBAAgB,GAAG,IAAI,CAAC;IAqE1B,CAAC;IAnEC,8DAA8D;IAC9D,mBAAmB,CAAC,KAAU;QAC5B,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAC3C,uEAAuE;IACzE,CAAC;IACQ,MAAM;QACb,OAAO,IAAI,CAAA;;wBAES,IAAI,CAAC,mBAAmB;uCACT,IAAI,CAAC,gBAAgB,KAAK,IAAI;uCAC9B,IAAI,CAAC,gBAAgB,KAAK,IAAI;uCAC9B,IAAI,CAAC,gBAAgB,KAAK,IAAI;uCAC9B,IAAI,CAAC,gBAAgB,KAAK,IAAI;uCAC9B,IAAI,CAAC,gBAAgB,KAAK,IAAI;;;;;iBAKpD,IAAI,CAAC,gBAAgB;;uBAEf,CAAC,CAAc,EAAE,EAAE;YAChC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;QAC3B,CAAC;;;;;8BAKqB,IAAI,CAAC,gBAAgB;;;;8BAIrB,IAAI,CAAC,gBAAgB;;;;8BAIrB,IAAI,CAAC,gBAAgB;;;;8BAIrB,IAAI,CAAC,gBAAgB;;;;;iBAKlC,IAAI,CAAC,gBAAgB;;;;;;;;;;iBAUrB,IAAI,CAAC,gBAAgB;;;;;;;;;8BASR,IAAI,CAAC,gBAAgB,sCAAsC,IAAI;;KAExF,CAAC;IACJ,CAAC;CACF,CAAA;AArEC;IADC,KAAK,EAAE;iEACgB;AAFb,uBAAuB;IADnC,aAAa,CAAC,qBAAqB,CAAC;GACxB,uBAAuB,CAuEnC;SAvEY,uBAAuB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport {LitElement, html} from 'lit';\nimport {customElement, state} from 'lit/decorators.js';\nimport '../date-picker.component';\n\n@customElement('hy-date-picker-demo')\nexport class HyDatePickerDemoElement extends LitElement {\n @state()\n selectedLanguage = 'en';\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n _onLanguageSelected(event: any) {\n this.selectedLanguage = event.target.value;\n // Émettre un événement \"language-selected\" avec la langue sélectionnée\n }\n override render() {\n return html`\n <!-- <hy-datepicker></hy-datepicker> -->\n <select @change=${this._onLanguageSelected}>\n <option value=\"en\" ?selected=${this.selectedLanguage === 'en'}>English</option>\n <option value=\"fr\" ?selected=${this.selectedLanguage === 'fr'}>Français</option>\n <option value=\"es\" ?selected=${this.selectedLanguage === 'es'}>Español</option>\n <option value=\"zh\" ?selected=${this.selectedLanguage === 'zh'}>中文</option>\n <option value=\"ar\" ?selected=${this.selectedLanguage === 'ar'}>العربية</option>\n </select>\n <h3>datepicker Default</h3>\n\n <hy-datepicker\n locale=${this.selectedLanguage}\n fieldFormat=\"DD/MM/YYYY\"\n @date-change=${(e: CustomEvent) => {\n console.log('event ', e);\n }}\n ></hy-datepicker>\n <br />\n <h3>datepicker with init date</h3>\n\n <hy-datepicker locale=${this.selectedLanguage} fieldFormat=\"DD/MM/YYYY\" dateValue=\"20/11/2024\"></hy-datepicker>\n <br />\n <h3>datepicker mm/dd/yy</h3>\n\n <hy-datepicker locale=${this.selectedLanguage} fieldFormat=\"MM/DD/YYYY\"></hy-datepicker>\n <br />\n <h3>datepicker small</h3>\n\n <hy-datepicker locale=${this.selectedLanguage} fieldFormat=\"DD/MM/YYYY\" size=\"small\"></hy-datepicker>\n <br />\n <h3>datepicker large</h3>\n\n <hy-datepicker locale=${this.selectedLanguage} fieldFormat=\"DD/MM/YYYY\" size=\"large\"></hy-datepicker>\n <br />\n <h3>datepicker with error</h3>\n\n <hy-datepicker\n locale=${this.selectedLanguage}\n fieldFormat=\"DD/MM/YYYY\"\n state=\"error\"\n label=\"date label\"\n helper=\"date error\"\n ></hy-datepicker>\n <br />\n <h3>datepicker with warning</h3>\n\n <hy-datepicker\n locale=${this.selectedLanguage}\n fieldFormat=\"DD/MM/YYYY\"\n state=\"warning\"\n label=\"labeled date\"\n helper=\"date helper\"\n ></hy-datepicker>\n <br />\n <h3>datepicker disabled</h3>\n\n <hy-datepicker locale=${this.selectedLanguage} fieldFormat=\"DD/MM/YYYY\" disabled=${true}></hy-datepicker>\n <br />\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hy-date-picker-demo': HyDatePickerDemoElement;\n }\n}\n"]}
|
package/index.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/datepicker/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}
|
package/react.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/datepicker/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,mBAAmB,EAAC,MAAM,4BAA4B,CAAC;AAC/D,eAAO,MAAM,YAAY,sEAKvB,CAAC"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { TemplateResult } from 'lit';
|
|
2
|
-
import { DateRawObject, IDayPresentation, INavigationDate } from '../datepicker.types.js';
|
|
3
|
-
export declare const renderDays: (weekdaysShort: string[], navigationDates: INavigationDate, selectDay: (date: IDayPresentation) => void, dateRawObject: DateRawObject, isRange: boolean, days: string[]) => TemplateResult;
|
|
4
|
-
//# sourceMappingURL=days.template.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"days.template.d.ts","sourceRoot":"","sources":["../../../../src/components/datepicker/templates/days.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAC,MAAM,KAAK,CAAC;AACzC,OAAO,EAAC,aAAa,EAAE,gBAAgB,EAAE,eAAe,EAAC,MAAM,wBAAwB,CAAC;AAWxF,eAAO,MAAM,UAAU,kBACN,MAAM,EAAE,mBACN,eAAe,oBACd,gBAAgB,KAAK,IAAI,iBAC5B,aAAa,WACnB,OAAO,QACV,MAAM,EAAE,KACb,cAyBF,CAAC"}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import { todayIsTheDay } from '../core/day.helper.js';
|
|
3
|
-
import { capitalizeFirstLetter } from '../core/string.helper.js';
|
|
4
|
-
import { getMonthDetails } from '../core/month.helper.js';
|
|
5
|
-
import dayjs from 'dayjs';
|
|
6
|
-
import { classMap } from 'lit/directives/class-map.js';
|
|
7
|
-
const today = dayjs();
|
|
8
|
-
const currentYear = today.year();
|
|
9
|
-
const currentDay = today.date();
|
|
10
|
-
const currentMonth = today.month() + 1;
|
|
11
|
-
export const renderDays = (weekdaysShort, navigationDates, selectDay, dateRawObject, isRange, days) => {
|
|
12
|
-
const daysPresentation = getMonthDetails(navigationDates.start.year, isRange ? navigationDates.start.month : navigationDates.start.month - 1, days);
|
|
13
|
-
const dayHeaderItem = (shortDay) => html `<div class="day-header-item">${capitalizeFirstLetter(shortDay)}</div>`;
|
|
14
|
-
const dayContainer = (day) => {
|
|
15
|
-
const active = todayIsTheDay(day, dateRawObject, isRange) && day.valid;
|
|
16
|
-
const isToday = currentYear == day.year && currentMonth == day.month + 1 && currentDay == day.date;
|
|
17
|
-
return html `<div
|
|
18
|
-
class="day-container ${classMap({ 'day-active': active, 'day-invalid': !day.valid, today: isToday })}"
|
|
19
|
-
@click=${() => selectDay(day)}
|
|
20
|
-
>
|
|
21
|
-
${day.date}
|
|
22
|
-
</div>`;
|
|
23
|
-
};
|
|
24
|
-
return html `<div class="days-container">
|
|
25
|
-
${weekdaysShort.map(dayHeaderItem)} ${daysPresentation === null || daysPresentation === void 0 ? void 0 : daysPresentation.map(dayContainer)}
|
|
26
|
-
</div>`;
|
|
27
|
-
};
|
|
28
|
-
//# sourceMappingURL=days.template.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"days.template.js","sourceRoot":"","sources":["../../../../src/components/datepicker/templates/days.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AAEzC,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAC,qBAAqB,EAAC,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAC,eAAe,EAAC,MAAM,yBAAyB,CAAC;AACxD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,MAAM,KAAK,GAAG,KAAK,EAAE,CAAC;AACtB,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;AACjC,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;AAChC,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;AAEvC,MAAM,CAAC,MAAM,UAAU,GAAG,CACxB,aAAuB,EACvB,eAAgC,EAChC,SAA2C,EAC3C,aAA4B,EAC5B,OAAgB,EAChB,IAAc,EACE,EAAE;IAClB,MAAM,gBAAgB,GAAuB,eAAe,CAC1D,eAAe,CAAC,KAAK,CAAC,IAAI,EAC1B,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,EACvE,IAAI,CACL,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,QAAgB,EAAE,EAAE,CACzC,IAAI,CAAA,gCAAgC,qBAAqB,CAAC,QAAQ,CAAC,QAAQ,CAAC;IAE9E,MAAM,YAAY,GAAG,CAAC,GAAqB,EAAE,EAAE;QAC7C,MAAM,MAAM,GAAG,aAAa,CAAC,GAAG,EAAE,aAAa,EAAE,OAAO,CAAC,IAAI,GAAG,CAAC,KAAK,CAAC;QACvE,MAAM,OAAO,GAAG,WAAW,IAAI,GAAG,CAAC,IAAI,IAAI,YAAY,IAAI,GAAG,CAAC,KAAK,GAAG,CAAC,IAAI,UAAU,IAAI,GAAG,CAAC,IAAI,CAAC;QAEnG,OAAO,IAAI,CAAA;6BACc,QAAQ,CAAC,EAAC,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAC,CAAC;eACzF,GAAG,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC;;QAE3B,GAAG,CAAC,IAAI;WACL,CAAC;IACV,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;MACP,aAAa,CAAC,GAAG,CAAC,aAAa,CAAC,IAAI,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,GAAG,CAAC,YAAY,CAAC;SACpE,CAAC;AACV,CAAC,CAAC","sourcesContent":["import {html, TemplateResult} from 'lit';\nimport {DateRawObject, IDayPresentation, INavigationDate} from '../datepicker.types.js';\nimport {todayIsTheDay} from '../core/day.helper.js';\nimport {capitalizeFirstLetter} from '../core/string.helper.js';\nimport {getMonthDetails} from '../core/month.helper.js';\nimport dayjs from 'dayjs';\nimport {classMap} from 'lit/directives/class-map.js';\nconst today = dayjs();\nconst currentYear = today.year();\nconst currentDay = today.date();\nconst currentMonth = today.month() + 1;\n\nexport const renderDays = (\n weekdaysShort: string[],\n navigationDates: INavigationDate,\n selectDay: (date: IDayPresentation) => void,\n dateRawObject: DateRawObject,\n isRange: boolean,\n days: string[]\n): TemplateResult => {\n const daysPresentation: IDayPresentation[] = getMonthDetails(\n navigationDates.start.year,\n isRange ? navigationDates.start.month : navigationDates.start.month - 1,\n days\n );\n\n const dayHeaderItem = (shortDay: string) =>\n html`<div class=\"day-header-item\">${capitalizeFirstLetter(shortDay)}</div>`;\n\n const dayContainer = (day: IDayPresentation) => {\n const active = todayIsTheDay(day, dateRawObject, isRange) && day.valid;\n const isToday = currentYear == day.year && currentMonth == day.month + 1 && currentDay == day.date;\n\n return html`<div\n class=\"day-container ${classMap({'day-active': active, 'day-invalid': !day.valid, today: isToday})}\"\n @click=${() => selectDay(day)}\n >\n ${day.date}\n </div>`;\n };\n\n return html`<div class=\"days-container\">\n ${weekdaysShort.map(dayHeaderItem)} ${daysPresentation?.map(dayContainer)}\n </div>`;\n};\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"headers.template.d.ts","sourceRoot":"","sources":["../../../../src/components/datepicker/templates/headers.template.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,yCAInC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"headers.template.js","sourceRoot":"","sources":["../../../../src/components/datepicker/templates/headers.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE;IAC1C,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,CAC1D,CAAC,QAAgB,EAAE,EAAE,CAAC,IAAI,CAAA,gCAAgC,QAAQ,QAAQ,CAC3E,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {html} from 'lit';\n\nexport const renderDayHeaderTemplate = () => {\n return ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map(\n (shortDay: string) => html`<div class=\"day-header-item\">${shortDay}</div>`\n );\n};\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"months.template.d.ts","sourceRoot":"","sources":["../../../../src/components/datepicker/templates/months.template.ts"],"names":[],"mappings":"AAGA,UAAU,YAAY;IACpB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED,eAAO,MAAM,oBAAoB,WAAY,MAAM,EAAE,gBAAgB,MAAM,gBAAgB,YAAY,oCAQtG,CAAC"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import { EMPTY_STRING } from '../constants.js';
|
|
3
|
-
export const renderMonthsTemplate = (months, currentMonth, clickHandler) => {
|
|
4
|
-
const monthContainer = (month, index) => {
|
|
5
|
-
const active = currentMonth - 1 === index ? 'month-active' : EMPTY_STRING;
|
|
6
|
-
return html ` <div class="month-container ${active}" @click=${() => clickHandler(index)}>${month}</div> `;
|
|
7
|
-
};
|
|
8
|
-
return html ` <div class="months-container">${months.map(monthContainer)}</div> `;
|
|
9
|
-
};
|
|
10
|
-
//# sourceMappingURL=months.template.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"months.template.js","sourceRoot":"","sources":["../../../../src/components/datepicker/templates/months.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAM7C,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,MAAgB,EAAE,YAAoB,EAAE,YAA0B,EAAE,EAAE;IACzG,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,KAAa,EAAE,EAAE;QACtD,MAAM,MAAM,GAAG,YAAY,GAAG,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC;QAE1E,OAAO,IAAI,CAAA,gCAAgC,MAAM,YAAY,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC;IAC3G,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA,kCAAkC,MAAM,CAAC,GAAG,CAAC,cAAc,CAAC,SAAS,CAAC;AACnF,CAAC,CAAC","sourcesContent":["import {html} from 'lit';\nimport {EMPTY_STRING} from '../constants.js';\n\ninterface ClickHandler {\n (index: number): void;\n}\n\nexport const renderMonthsTemplate = (months: string[], currentMonth: number, clickHandler: ClickHandler) => {\n const monthContainer = (month: string, index: number) => {\n const active = currentMonth - 1 === index ? 'month-active' : EMPTY_STRING;\n\n return html` <div class=\"month-container ${active}\" @click=${() => clickHandler(index)}>${month}</div> `;\n };\n\n return html` <div class=\"months-container\">${months.map(monthContainer)}</div> `;\n};\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"years.template.d.ts","sourceRoot":"","sources":["../../../../src/components/datepicker/templates/years.template.ts"],"names":[],"mappings":"AAGA,UAAU,YAAY;IACpB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,gBAAiB,MAAM,gBAAgB,YAAY,oCAUlF,CAAC"}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import { EMPTY_STRING } from '../constants.js';
|
|
3
|
-
export const renderYearsTemplate = (currentYear, clickHandler) => {
|
|
4
|
-
const yearRange = Array.from({ length: 12 }, (_v, i) => i + (currentYear - 6));
|
|
5
|
-
const yearContainer = (year) => {
|
|
6
|
-
const active = currentYear === year ? 'year-active' : EMPTY_STRING;
|
|
7
|
-
return html ` <div class="year-container ${active}" @click=${() => clickHandler(year)}>${year}</div> `;
|
|
8
|
-
};
|
|
9
|
-
return html ` <div class="years-container">${yearRange.map(yearContainer)}</div> `;
|
|
10
|
-
};
|
|
11
|
-
//# sourceMappingURL=years.template.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"years.template.js","sourceRoot":"","sources":["../../../../src/components/datepicker/templates/years.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAM7C,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,WAAmB,EAAE,YAA0B,EAAE,EAAE;IACrF,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,EAAE,EAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC;IAE7E,MAAM,aAAa,GAAG,CAAC,IAAY,EAAE,EAAE;QACrC,MAAM,MAAM,GAAG,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC;QAEnE,OAAO,IAAI,CAAA,+BAA+B,MAAM,YAAY,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC;IACxG,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA,iCAAiC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,SAAS,CAAC;AACpF,CAAC,CAAC","sourcesContent":["import {html} from 'lit';\nimport {EMPTY_STRING} from '../constants.js';\n\ninterface ClickHandler {\n (year: number): void;\n}\n\nexport const renderYearsTemplate = (currentYear: number, clickHandler: ClickHandler) => {\n const yearRange = Array.from({length: 12}, (_v, i) => i + (currentYear - 6));\n\n const yearContainer = (year: number) => {\n const active = currentYear === year ? 'year-active' : EMPTY_STRING;\n\n return html` <div class=\"year-container ${active}\" @click=${() => clickHandler(year)}>${year}</div> `;\n };\n\n return html` <div class=\"years-container\">${yearRange.map(yearContainer)}</div> `;\n};\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"datepicker_test.d.ts","sourceRoot":"","sources":["../../../../src/components/datepicker/test/datepicker_test.ts"],"names":[],"mappings":"AACA,OAAO,0BAA0B,CAAC"}
|