@zohodesk/components 1.6.31 → 1.6.34

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.
Files changed (163) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/assets/Appearance/light/mode/Component_LightMode.module.css +1 -1
  3. package/es/Accordion/__tests__/Accordion.spec.js +117 -3
  4. package/es/Accordion/__tests__/AccordionItem.spec.js +118 -6
  5. package/es/Accordion/__tests__/__snapshots__/Accordion.spec.js.snap +344 -2
  6. package/es/Accordion/__tests__/__snapshots__/AccordionItem.spec.js.snap +155 -3
  7. package/es/Animation/__tests__/Animation.spec.js +28 -4
  8. package/es/Animation/__tests__/__snapshots__/Animation.spec.js.snap +92 -2
  9. package/es/Button/css/Button.module.css +2 -3
  10. package/es/CheckBox/CheckBox.js +1 -1
  11. package/es/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +1 -1
  12. package/es/DateTime/DateTime.module.css +2 -2
  13. package/es/DateTime/__tests__/CalendarView.spec.js +70 -3
  14. package/es/DateTime/__tests__/DateTime.spec.js +89 -6
  15. package/es/DateTime/__tests__/DateTimePopupFooter.spec.js +20 -2
  16. package/es/DateTime/__tests__/DateTimePopupHeader.spec.js +29 -2
  17. package/es/DateTime/__tests__/DateWidget.spec.js +34 -2
  18. package/es/DateTime/__tests__/DaysRow.spec.js +19 -3
  19. package/es/DateTime/__tests__/Time.spec.js +50 -3
  20. package/es/DateTime/__tests__/YearView.spec.js +60 -3
  21. package/es/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +2907 -170
  22. package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +4392 -108
  23. package/es/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +67 -1
  24. package/es/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +187 -1
  25. package/es/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +265 -1
  26. package/es/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +155 -2
  27. package/es/DateTime/__tests__/__snapshots__/Time.spec.js.snap +522 -5
  28. package/es/DateTime/__tests__/__snapshots__/YearView.spec.js.snap +540 -0
  29. package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css +1 -4
  30. package/es/Heading/Heading.module.css +1 -1
  31. package/es/Heading/__tests__/Heading.spec.js +57 -3
  32. package/es/Heading/__tests__/__snapshots__/Heading.spec.js.snap +87 -14
  33. package/es/ListItem/__tests__/ListContainer.spec.js +228 -1
  34. package/es/ListItem/__tests__/ListItem.spec.js +359 -1
  35. package/es/ListItem/__tests__/ListItemWithAvatar.spec.js +390 -1
  36. package/es/ListItem/__tests__/ListItemWithCheckBox.spec.js +214 -1
  37. package/es/ListItem/__tests__/ListItemWithIcon.spec.js +303 -1
  38. package/es/ListItem/__tests__/ListItemWithRadio.spec.js +230 -1
  39. package/es/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +602 -0
  40. package/es/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +1807 -0
  41. package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +2703 -0
  42. package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +2909 -0
  43. package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +2009 -0
  44. package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +3070 -0
  45. package/es/MultiSelect/MultiSelect.module.css +1 -2
  46. package/es/MultiSelect/__tests__/AdvancedGroupMultiSelect.spec.js +671 -1
  47. package/es/MultiSelect/__tests__/AdvancedMultiSelect.spec.js +730 -1
  48. package/es/MultiSelect/__tests__/EmptyState.spec.js +268 -1
  49. package/es/MultiSelect/__tests__/MultiSelect.spec.js +889 -2
  50. package/es/MultiSelect/__tests__/MultiSelectHeader.spec.js +50 -1
  51. package/es/MultiSelect/__tests__/MultiSelectWithAvatar.spec.js +487 -1
  52. package/es/MultiSelect/__tests__/SelectedOptions.spec.js +291 -1
  53. package/es/MultiSelect/__tests__/Suggestions.spec.js +370 -2
  54. package/es/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +11785 -0
  55. package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +12083 -0
  56. package/es/MultiSelect/__tests__/__snapshots__/EmptyState.spec.js.snap +253 -0
  57. package/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +14052 -0
  58. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +136 -0
  59. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +11506 -0
  60. package/es/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +1382 -0
  61. package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +3611 -0
  62. package/es/PopOver/__tests__/PopOver.spec.js +141 -2
  63. package/es/PopOver/__tests__/__snapshots__/PopOver.spec.js.snap +1260 -0
  64. package/es/ResponsiveDropBox/__tests__/ResponsiveDropBox.spec.js +212 -1
  65. package/es/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1802 -0
  66. package/es/Tab/Tabs.module.css +1 -2
  67. package/es/Tab/__tests__/Tab.spec.js +249 -1
  68. package/es/Tab/__tests__/TabContent.spec.js +34 -1
  69. package/es/Tab/__tests__/TabContentWrapper.spec.js +72 -1
  70. package/es/Tab/__tests__/TabWrapper.spec.js +163 -1
  71. package/es/Tab/__tests__/Tabs.spec.js +681 -1
  72. package/es/Tab/__tests__/__snapshots__/Tab.spec.js.snap +1049 -0
  73. package/es/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +99 -0
  74. package/es/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +121 -0
  75. package/es/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +2002 -0
  76. package/es/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +11053 -0
  77. package/es/Textarea/Textarea.module.css +1 -1
  78. package/es/Tooltip/Tooltip.module.css +1 -2
  79. package/es/Tooltip/__tests__/Tooltip.spec.js +590 -0
  80. package/es/Tooltip/__tests__/__snapshots__/Tooltip.spec.js.snap +813 -0
  81. package/es/Typography/css/Typography.module.css +8 -7
  82. package/es/common/common.module.css +4 -4
  83. package/lib/Accordion/__tests__/Accordion.spec.js +122 -2
  84. package/lib/Accordion/__tests__/AccordionItem.spec.js +126 -4
  85. package/lib/Accordion/__tests__/__snapshots__/Accordion.spec.js.snap +344 -2
  86. package/lib/Accordion/__tests__/__snapshots__/AccordionItem.spec.js.snap +155 -3
  87. package/lib/Animation/__tests__/Animation.spec.js +31 -5
  88. package/lib/Animation/__tests__/__snapshots__/Animation.spec.js.snap +92 -2
  89. package/lib/Button/css/Button.module.css +2 -3
  90. package/lib/CheckBox/CheckBox.js +1 -1
  91. package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +1 -1
  92. package/lib/DateTime/DateTime.module.css +2 -2
  93. package/lib/DateTime/__tests__/CalendarView.spec.js +71 -2
  94. package/lib/DateTime/__tests__/DateTime.spec.js +92 -6
  95. package/lib/DateTime/__tests__/DateTimePopupFooter.spec.js +21 -1
  96. package/lib/DateTime/__tests__/DateTimePopupHeader.spec.js +30 -1
  97. package/lib/DateTime/__tests__/DateWidget.spec.js +35 -1
  98. package/lib/DateTime/__tests__/DaysRow.spec.js +20 -2
  99. package/lib/DateTime/__tests__/Time.spec.js +51 -2
  100. package/lib/DateTime/__tests__/YearView.spec.js +61 -2
  101. package/lib/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +2907 -170
  102. package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +4392 -108
  103. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +67 -1
  104. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +187 -1
  105. package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +265 -1
  106. package/lib/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +155 -2
  107. package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap +522 -5
  108. package/lib/DateTime/__tests__/__snapshots__/YearView.spec.js.snap +540 -0
  109. package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css +1 -4
  110. package/lib/Heading/Heading.module.css +1 -1
  111. package/lib/Heading/__tests__/Heading.spec.js +60 -4
  112. package/lib/Heading/__tests__/__snapshots__/Heading.spec.js.snap +87 -14
  113. package/lib/ListItem/__tests__/ListContainer.spec.js +229 -0
  114. package/lib/ListItem/__tests__/ListItem.spec.js +362 -0
  115. package/lib/ListItem/__tests__/ListItemWithAvatar.spec.js +391 -0
  116. package/lib/ListItem/__tests__/ListItemWithCheckBox.spec.js +215 -0
  117. package/lib/ListItem/__tests__/ListItemWithIcon.spec.js +304 -0
  118. package/lib/ListItem/__tests__/ListItemWithRadio.spec.js +231 -0
  119. package/lib/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +602 -0
  120. package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +1807 -0
  121. package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +2703 -0
  122. package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +2909 -0
  123. package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +2009 -0
  124. package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +3070 -0
  125. package/lib/MultiSelect/MultiSelect.module.css +1 -2
  126. package/lib/MultiSelect/__tests__/AdvancedGroupMultiSelect.spec.js +692 -0
  127. package/lib/MultiSelect/__tests__/AdvancedMultiSelect.spec.js +741 -0
  128. package/lib/MultiSelect/__tests__/EmptyState.spec.js +273 -0
  129. package/lib/MultiSelect/__tests__/MultiSelect.spec.js +910 -0
  130. package/lib/MultiSelect/__tests__/MultiSelectHeader.spec.js +51 -0
  131. package/lib/MultiSelect/__tests__/MultiSelectWithAvatar.spec.js +497 -0
  132. package/lib/MultiSelect/__tests__/SelectedOptions.spec.js +305 -0
  133. package/lib/MultiSelect/__tests__/Suggestions.spec.js +375 -0
  134. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +11785 -0
  135. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +12083 -0
  136. package/lib/MultiSelect/__tests__/__snapshots__/EmptyState.spec.js.snap +253 -0
  137. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +14052 -0
  138. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +136 -0
  139. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +11506 -0
  140. package/lib/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +1382 -0
  141. package/lib/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +3611 -0
  142. package/lib/PopOver/__tests__/PopOver.spec.js +150 -1
  143. package/lib/PopOver/__tests__/__snapshots__/PopOver.spec.js.snap +1260 -0
  144. package/lib/ResponsiveDropBox/__tests__/ResponsiveDropBox.spec.js +213 -0
  145. package/lib/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1802 -0
  146. package/lib/Tab/Tabs.module.css +1 -2
  147. package/lib/Tab/__tests__/Tab.spec.js +250 -0
  148. package/lib/Tab/__tests__/TabContent.spec.js +35 -0
  149. package/lib/Tab/__tests__/TabContentWrapper.spec.js +76 -0
  150. package/lib/Tab/__tests__/TabWrapper.spec.js +174 -0
  151. package/lib/Tab/__tests__/Tabs.spec.js +741 -0
  152. package/lib/Tab/__tests__/__snapshots__/Tab.spec.js.snap +1049 -0
  153. package/lib/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +99 -0
  154. package/lib/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +121 -0
  155. package/lib/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +2002 -0
  156. package/lib/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +11053 -0
  157. package/lib/Textarea/Textarea.module.css +1 -1
  158. package/lib/Tooltip/Tooltip.module.css +1 -2
  159. package/lib/Tooltip/__tests__/Tooltip.spec.js +629 -0
  160. package/lib/Tooltip/__tests__/__snapshots__/Tooltip.spec.js.snap +813 -0
  161. package/lib/Typography/css/Typography.module.css +8 -7
  162. package/lib/common/common.module.css +4 -4
  163. package/package.json +6 -5
package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap CHANGED
@@ -1,8 +1,4292 @@
1
1
  // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
2
2
 
3
- exports[`DateTime rendering the defult props 1`] = `<DocumentFragment />`;
3
+ exports[`DateTime Render after opening the year view 1`] = `
4
+ <DocumentFragment>
5
+ <div
6
+ class="dropBox"
7
+ data-id="dateTime_dateBoxContainer"
8
+ data-test-id="dateTime_dateBoxContainer"
9
+ >
10
+ <div
11
+ class="container"
12
+ data-id="dateTime_Calendar"
13
+ data-test-id="dateTime_Calendar"
14
+ >
15
+ <div
16
+ class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center header"
17
+ data-id="containerComponent"
18
+ data-selector-id="container"
19
+ data-test-id="containerComponent"
20
+ >
21
+ <div
22
+ class="d-flex-shrink-0 dateText"
23
+ data-id="selectYear"
24
+ data-selector-id="box"
25
+ data-test-id="selectYear"
26
+ >
27
+ <h2
28
+ class="reset thMonYear"
29
+ data-title="October 2026"
30
+ tabindex="0"
31
+ >
32
+ October 2026
33
+ </h2>
34
+ <span>
35
+ <i
36
+ aria-hidden="true"
37
+ class="zd_font_icons ff icon-dropdown basic d-inline-block d-align-middle downArrow"
38
+ data-id="fontIcon"
39
+ data-selector-id="fontIcon"
40
+ data-test-id="fontIcon"
41
+ style="--zd-iconfont-size: var(--zd_font_size12);"
42
+ />
43
+ </span>
44
+ </div>
45
+ <div
46
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
47
+ data-id="boxComponent"
48
+ data-selector-id="box"
49
+ data-test-id="boxComponent"
50
+ />
51
+ </div>
52
+ <div
53
+ class="subContainer"
54
+ >
55
+ <div
56
+ class="d-flex d-h-full d-w-full d-flex-row days"
57
+ data-id="containerComponent"
58
+ data-selector-id="container"
59
+ data-test-id="containerComponent"
60
+ >
61
+ <div
62
+ aria-label="Sunday"
63
+ class="d-flex-shrink-0 daysStr grid holiday"
64
+ data-id="boxComponent"
65
+ data-selector-id="box"
66
+ data-test-id="boxComponent"
67
+ data-title="Sunday"
68
+ >
69
+ S
70
+ </div>
71
+ <div
72
+ aria-label="Monday"
73
+ class="d-flex-shrink-0 daysStr grid"
74
+ data-id="boxComponent"
75
+ data-selector-id="box"
76
+ data-test-id="boxComponent"
77
+ data-title="Monday"
78
+ >
79
+ M
80
+ </div>
81
+ <div
82
+ aria-label="Tuesday"
83
+ class="d-flex-shrink-0 daysStr grid"
84
+ data-id="boxComponent"
85
+ data-selector-id="box"
86
+ data-test-id="boxComponent"
87
+ data-title="Tuesday"
88
+ >
89
+ T
90
+ </div>
91
+ <div
92
+ aria-label="Wednesday"
93
+ class="d-flex-shrink-0 daysStr grid"
94
+ data-id="boxComponent"
95
+ data-selector-id="box"
96
+ data-test-id="boxComponent"
97
+ data-title="Wednesday"
98
+ >
99
+ W
100
+ </div>
101
+ <div
102
+ aria-label="Thursday"
103
+ class="d-flex-shrink-0 daysStr grid"
104
+ data-id="boxComponent"
105
+ data-selector-id="box"
106
+ data-test-id="boxComponent"
107
+ data-title="Thursday"
108
+ >
109
+ T
110
+ </div>
111
+ <div
112
+ aria-label="Friday"
113
+ class="d-flex-shrink-0 daysStr grid"
114
+ data-id="boxComponent"
115
+ data-selector-id="box"
116
+ data-test-id="boxComponent"
117
+ data-title="Friday"
118
+ >
119
+ F
120
+ </div>
121
+ <div
122
+ aria-label="Saturday"
123
+ class="d-flex-shrink-0 daysStr grid"
124
+ data-id="boxComponent"
125
+ data-selector-id="box"
126
+ data-test-id="boxComponent"
127
+ data-title="Saturday"
128
+ >
129
+ S
130
+ </div>
131
+ </div>
132
+ <div
133
+ class="dateContainer separator"
134
+ data-id="dateTime_dateContainer"
135
+ data-test-id="dateTime_dateContainer"
136
+ >
137
+ <div
138
+ class="d-flex d-flex-row dateRow"
139
+ data-id="containerComponent"
140
+ data-selector-id="container"
141
+ data-test-id="containerComponent"
142
+ >
143
+ <div
144
+ aria-label="27"
145
+ class="d-flex-shrink-0 datesStr grid holiday invalidDate"
146
+ data-id="dateTime_invalidDate"
147
+ data-selector-id="box"
148
+ data-test-id="dateTime_invalidDate"
149
+ >
150
+ 27
151
+ </div>
152
+ <div
153
+ aria-label="28"
154
+ class="d-flex-shrink-0 datesStr grid invalidDate"
155
+ data-id="dateTime_invalidDate"
156
+ data-selector-id="box"
157
+ data-test-id="dateTime_invalidDate"
158
+ >
159
+ 28
160
+ </div>
161
+ <div
162
+ aria-label="29"
163
+ class="d-flex-shrink-0 datesStr grid invalidDate"
164
+ data-id="dateTime_invalidDate"
165
+ data-selector-id="box"
166
+ data-test-id="dateTime_invalidDate"
167
+ >
168
+ 29
169
+ </div>
170
+ <div
171
+ aria-label="30"
172
+ class="d-flex-shrink-0 datesStr grid invalidDate"
173
+ data-id="dateTime_invalidDate"
174
+ data-selector-id="box"
175
+ data-test-id="dateTime_invalidDate"
176
+ >
177
+ 30
178
+ </div>
179
+ <div
180
+ aria-label="1"
181
+ class="d-flex-shrink-0 datesStr grid"
182
+ data-id="dateTime_date"
183
+ data-selector-id="box"
184
+ data-test-id="dateTime_date"
185
+ >
186
+ 1
187
+ </div>
188
+ <div
189
+ aria-label="2"
190
+ class="d-flex-shrink-0 datesStr grid"
191
+ data-id="dateTime_date"
192
+ data-selector-id="box"
193
+ data-test-id="dateTime_date"
194
+ >
195
+ 2
196
+ </div>
197
+ <div
198
+ aria-label="3"
199
+ class="d-flex-shrink-0 datesStr grid"
200
+ data-id="dateTime_date"
201
+ data-selector-id="box"
202
+ data-test-id="dateTime_date"
203
+ >
204
+ 3
205
+ </div>
206
+ </div>
207
+ <div
208
+ class="d-flex d-flex-row dateRow"
209
+ data-id="containerComponent"
210
+ data-selector-id="container"
211
+ data-test-id="containerComponent"
212
+ >
213
+ <div
214
+ aria-label="4"
215
+ class="d-flex-shrink-0 datesStr grid holiday"
216
+ data-id="dateTime_date"
217
+ data-selector-id="box"
218
+ data-test-id="dateTime_date"
219
+ >
220
+ 4
221
+ </div>
222
+ <div
223
+ aria-label="5"
224
+ class="d-flex-shrink-0 datesStr grid"
225
+ data-id="dateTime_date"
226
+ data-selector-id="box"
227
+ data-test-id="dateTime_date"
228
+ >
229
+ 5
230
+ </div>
231
+ <div
232
+ aria-label="6"
233
+ class="d-flex-shrink-0 datesStr grid"
234
+ data-id="dateTime_date"
235
+ data-selector-id="box"
236
+ data-test-id="dateTime_date"
237
+ >
238
+ 6
239
+ </div>
240
+ <div
241
+ aria-label="7"
242
+ class="d-flex-shrink-0 datesStr grid"
243
+ data-id="dateTime_date"
244
+ data-selector-id="box"
245
+ data-test-id="dateTime_date"
246
+ >
247
+ 7
248
+ </div>
249
+ <div
250
+ aria-label="8"
251
+ class="d-flex-shrink-0 datesStr grid"
252
+ data-id="dateTime_date"
253
+ data-selector-id="box"
254
+ data-test-id="dateTime_date"
255
+ >
256
+ 8
257
+ </div>
258
+ <div
259
+ aria-label="9"
260
+ class="d-flex-shrink-0 datesStr grid"
261
+ data-id="dateTime_date"
262
+ data-selector-id="box"
263
+ data-test-id="dateTime_date"
264
+ >
265
+ 9
266
+ </div>
267
+ <div
268
+ aria-label="10"
269
+ class="d-flex-shrink-0 datesStr grid"
270
+ data-id="dateTime_date"
271
+ data-selector-id="box"
272
+ data-test-id="dateTime_date"
273
+ >
274
+ 10
275
+ </div>
276
+ </div>
277
+ <div
278
+ class="d-flex d-flex-row dateRow"
279
+ data-id="containerComponent"
280
+ data-selector-id="container"
281
+ data-test-id="containerComponent"
282
+ >
283
+ <div
284
+ aria-label="11"
285
+ class="d-flex-shrink-0 datesStr grid holiday"
286
+ data-id="dateTime_date"
287
+ data-selector-id="box"
288
+ data-test-id="dateTime_date"
289
+ >
290
+ 11
291
+ </div>
292
+ <div
293
+ aria-label="12"
294
+ class="d-flex-shrink-0 datesStr grid"
295
+ data-id="dateTime_date"
296
+ data-selector-id="box"
297
+ data-test-id="dateTime_date"
298
+ >
299
+ 12
300
+ </div>
301
+ <div
302
+ aria-label="13"
303
+ class="d-flex-shrink-0 datesStr grid"
304
+ data-id="dateTime_date"
305
+ data-selector-id="box"
306
+ data-test-id="dateTime_date"
307
+ >
308
+ 13
309
+ </div>
310
+ <div
311
+ aria-label="14"
312
+ class="d-flex-shrink-0 datesStr grid"
313
+ data-id="dateTime_date"
314
+ data-selector-id="box"
315
+ data-test-id="dateTime_date"
316
+ >
317
+ 14
318
+ </div>
319
+ <div
320
+ aria-label="15"
321
+ class="d-flex-shrink-0 datesStr grid"
322
+ data-id="dateTime_date"
323
+ data-selector-id="box"
324
+ data-test-id="dateTime_date"
325
+ >
326
+ 15
327
+ </div>
328
+ <div
329
+ aria-label="16"
330
+ class="d-flex-shrink-0 datesStr grid"
331
+ data-id="dateTime_date"
332
+ data-selector-id="box"
333
+ data-test-id="dateTime_date"
334
+ >
335
+ 16
336
+ </div>
337
+ <div
338
+ aria-label="17"
339
+ class="d-flex-shrink-0 datesStr grid"
340
+ data-id="dateTime_date"
341
+ data-selector-id="box"
342
+ data-test-id="dateTime_date"
343
+ >
344
+ 17
345
+ </div>
346
+ </div>
347
+ <div
348
+ class="d-flex d-flex-row dateRow"
349
+ data-id="containerComponent"
350
+ data-selector-id="container"
351
+ data-test-id="containerComponent"
352
+ >
353
+ <div
354
+ aria-label="18"
355
+ class="d-flex-shrink-0 datesStr grid holiday"
356
+ data-id="dateTime_date"
357
+ data-selector-id="box"
358
+ data-test-id="dateTime_date"
359
+ >
360
+ 18
361
+ </div>
362
+ <div
363
+ aria-label="19"
364
+ class="d-flex-shrink-0 active datesStr grid"
365
+ data-id="dateTime_dateSelected"
366
+ data-selector-id="box"
367
+ data-test-id="dateTime_dateSelected"
368
+ >
369
+ 19
370
+ </div>
371
+ <div
372
+ aria-label="20"
373
+ class="d-flex-shrink-0 datesStr grid"
374
+ data-id="dateTime_date"
375
+ data-selector-id="box"
376
+ data-test-id="dateTime_date"
377
+ >
378
+ 20
379
+ </div>
380
+ <div
381
+ aria-label="21"
382
+ class="d-flex-shrink-0 datesStr grid"
383
+ data-id="dateTime_date"
384
+ data-selector-id="box"
385
+ data-test-id="dateTime_date"
386
+ >
387
+ 21
388
+ </div>
389
+ <div
390
+ aria-label="22"
391
+ class="d-flex-shrink-0 datesStr grid"
392
+ data-id="dateTime_date"
393
+ data-selector-id="box"
394
+ data-test-id="dateTime_date"
395
+ >
396
+ 22
397
+ </div>
398
+ <div
399
+ aria-label="23"
400
+ class="d-flex-shrink-0 datesStr grid"
401
+ data-id="dateTime_date"
402
+ data-selector-id="box"
403
+ data-test-id="dateTime_date"
404
+ >
405
+ 23
406
+ </div>
407
+ <div
408
+ aria-label="24"
409
+ class="d-flex-shrink-0 datesStr grid"
410
+ data-id="dateTime_date"
411
+ data-selector-id="box"
412
+ data-test-id="dateTime_date"
413
+ >
414
+ 24
415
+ </div>
416
+ </div>
417
+ <div
418
+ class="d-flex d-flex-row dateRow"
419
+ data-id="containerComponent"
420
+ data-selector-id="container"
421
+ data-test-id="containerComponent"
422
+ >
423
+ <div
424
+ aria-label="25"
425
+ class="d-flex-shrink-0 datesStr grid holiday"
426
+ data-id="dateTime_date"
427
+ data-selector-id="box"
428
+ data-test-id="dateTime_date"
429
+ >
430
+ 25
431
+ </div>
432
+ <div
433
+ aria-label="26"
434
+ class="d-flex-shrink-0 datesStr grid"
435
+ data-id="dateTime_date"
436
+ data-selector-id="box"
437
+ data-test-id="dateTime_date"
438
+ >
439
+ 26
440
+ </div>
441
+ <div
442
+ aria-label="27"
443
+ class="d-flex-shrink-0 datesStr grid"
444
+ data-id="dateTime_date"
445
+ data-selector-id="box"
446
+ data-test-id="dateTime_date"
447
+ >
448
+ 27
449
+ </div>
450
+ <div
451
+ aria-label="28"
452
+ class="d-flex-shrink-0 datesStr grid"
453
+ data-id="dateTime_date"
454
+ data-selector-id="box"
455
+ data-test-id="dateTime_date"
456
+ >
457
+ 28
458
+ </div>
459
+ <div
460
+ aria-label="29"
461
+ class="d-flex-shrink-0 datesStr grid"
462
+ data-id="dateTime_date"
463
+ data-selector-id="box"
464
+ data-test-id="dateTime_date"
465
+ >
466
+ 29
467
+ </div>
468
+ <div
469
+ aria-label="30"
470
+ class="d-flex-shrink-0 datesStr grid"
471
+ data-id="dateTime_date"
472
+ data-selector-id="box"
473
+ data-test-id="dateTime_date"
474
+ >
475
+ 30
476
+ </div>
477
+ <div
478
+ aria-label="31"
479
+ class="d-flex-shrink-0 datesStr grid"
480
+ data-id="dateTime_date"
481
+ data-selector-id="box"
482
+ data-test-id="dateTime_date"
483
+ >
484
+ 31
485
+ </div>
486
+ </div>
487
+ <div
488
+ class="d-flex d-flex-row dateRow"
489
+ data-id="containerComponent"
490
+ data-selector-id="container"
491
+ data-test-id="containerComponent"
492
+ >
493
+ <div
494
+ aria-label="1"
495
+ class="d-flex-shrink-0 invalidDate datesStr grid holiday"
496
+ data-id="dateTime_invalidDate"
497
+ data-selector-id="box"
498
+ data-test-id="dateTime_invalidDate"
499
+ >
500
+ 1
501
+ </div>
502
+ <div
503
+ aria-label="2"
504
+ class="d-flex-shrink-0 invalidDate datesStr grid"
505
+ data-id="dateTime_invalidDate"
506
+ data-selector-id="box"
507
+ data-test-id="dateTime_invalidDate"
508
+ >
509
+ 2
510
+ </div>
511
+ <div
512
+ aria-label="3"
513
+ class="d-flex-shrink-0 invalidDate datesStr grid"
514
+ data-id="dateTime_invalidDate"
515
+ data-selector-id="box"
516
+ data-test-id="dateTime_invalidDate"
517
+ >
518
+ 3
519
+ </div>
520
+ <div
521
+ aria-label="4"
522
+ class="d-flex-shrink-0 invalidDate datesStr grid"
523
+ data-id="dateTime_invalidDate"
524
+ data-selector-id="box"
525
+ data-test-id="dateTime_invalidDate"
526
+ >
527
+ 4
528
+ </div>
529
+ <div
530
+ aria-label="5"
531
+ class="d-flex-shrink-0 invalidDate datesStr grid"
532
+ data-id="dateTime_invalidDate"
533
+ data-selector-id="box"
534
+ data-test-id="dateTime_invalidDate"
535
+ >
536
+ 5
537
+ </div>
538
+ <div
539
+ aria-label="6"
540
+ class="d-flex-shrink-0 invalidDate datesStr grid"
541
+ data-id="dateTime_invalidDate"
542
+ data-selector-id="box"
543
+ data-test-id="dateTime_invalidDate"
544
+ >
545
+ 6
546
+ </div>
547
+ <div
548
+ aria-label="7"
549
+ class="d-flex-shrink-0 invalidDate datesStr grid"
550
+ data-id="dateTime_invalidDate"
551
+ data-selector-id="box"
552
+ data-test-id="dateTime_invalidDate"
553
+ >
554
+ 7
555
+ </div>
556
+ </div>
557
+ </div>
558
+ <span
559
+ class="text"
560
+ >
561
+ Time
562
+ </span>
563
+ <div
564
+ class="d-flex d-flex-row d-items-center timesection"
565
+ data-id="dateTime_timeContainer"
566
+ data-selector-id="container"
567
+ data-test-id="dateTime_timeContainer"
568
+ >
569
+ <div
570
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 dropDownContainer"
571
+ data-id="boxComponent"
572
+ data-selector-id="box"
573
+ data-test-id="boxComponent"
574
+ >
575
+ <div
576
+ class="container box_small"
577
+ data-selector-id="select"
578
+ >
579
+ <div
580
+ class=""
581
+ data-id="hourField"
582
+ data-test-id="hourField"
583
+ >
584
+ <div
585
+ class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
586
+ data-selector-id="textBoxIcon"
587
+ >
588
+ <div
589
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
590
+ data-id="boxComponent"
591
+ data-selector-id="box"
592
+ data-test-id="boxComponent"
593
+ >
594
+ <input
595
+ aria-activedescendant="12"
596
+ aria-controls="1"
597
+ aria-expanded="false"
598
+ aria-haspopup="true"
599
+ aria-label="click to select options"
600
+ aria-owns="1"
601
+ aria-readonly="true"
602
+ autocomplete="off"
603
+ class="pointer container xmedium primary effect borderColor_default inputDotted"
604
+ data-id="hourField_textBox"
605
+ data-selector-id="textBoxIcon"
606
+ data-test-id="hourField_textBox"
607
+ data-title="12"
608
+ maxlength="2"
609
+ placeholder=""
610
+ readonly=""
611
+ role="Menuitem"
612
+ type="text"
613
+ value="12"
614
+ />
615
+ </div>
616
+ <div
617
+ class="d-flex-shrink-0 iconContainer"
618
+ data-id="boxComponent"
619
+ data-selector-id="box"
620
+ data-test-id="boxComponent"
621
+ >
622
+ <div
623
+ class="d-flex d-h-full d-w-full d-flex-row"
624
+ data-id="containerComponent"
625
+ data-selector-id="container"
626
+ data-test-id="containerComponent"
627
+ >
628
+ <div
629
+ class="d-flex-shrink-0 icon"
630
+ data-id="boxComponent"
631
+ data-selector-id="box"
632
+ data-test-id="boxComponent"
633
+ >
634
+ <div
635
+ class="d-inline-flex d-flex-row d-items-center d-justify-center rightPlaceholder"
636
+ data-id="containerComponent"
637
+ data-selector-id="container"
638
+ data-test-id="containerComponent"
639
+ >
640
+ <div
641
+ aria-hidden="true"
642
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center arrowIcon"
643
+ data-id="hourField_downIcon"
644
+ data-selector-id="container"
645
+ data-test-id="hourField_downIcon"
646
+ >
647
+ <i
648
+ aria-hidden="true"
649
+ class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
650
+ data-id="fontIcon"
651
+ data-selector-id="fontIcon"
652
+ data-test-id="fontIcon"
653
+ style="--zd-iconfont-size: var(--zd_font_size7);"
654
+ />
655
+ </div>
656
+ </div>
657
+ </div>
658
+ </div>
659
+ </div>
660
+ </div>
661
+ </div>
662
+ </div>
663
+ </div>
664
+ <div
665
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 dropDownContainer"
666
+ data-id="boxComponent"
667
+ data-selector-id="box"
668
+ data-test-id="boxComponent"
669
+ >
670
+ <div
671
+ class="container box_small"
672
+ data-selector-id="select"
673
+ >
674
+ <div
675
+ class=""
676
+ data-id="minuteField"
677
+ data-test-id="minuteField"
678
+ >
679
+ <div
680
+ class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
681
+ data-selector-id="textBoxIcon"
682
+ >
683
+ <div
684
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
685
+ data-id="boxComponent"
686
+ data-selector-id="box"
687
+ data-test-id="boxComponent"
688
+ >
689
+ <input
690
+ aria-activedescendant="00"
691
+ aria-controls="3"
692
+ aria-expanded="false"
693
+ aria-haspopup="true"
694
+ aria-label="click to select options"
695
+ aria-owns="3"
696
+ aria-readonly="true"
697
+ autocomplete="off"
698
+ class="pointer container xmedium primary effect borderColor_default inputDotted"
699
+ data-id="minuteField_textBox"
700
+ data-selector-id="textBoxIcon"
701
+ data-test-id="minuteField_textBox"
702
+ data-title="00"
703
+ maxlength="2"
704
+ placeholder=""
705
+ readonly=""
706
+ role="Menuitem"
707
+ type="text"
708
+ value="00"
709
+ />
710
+ </div>
711
+ <div
712
+ class="d-flex-shrink-0 iconContainer"
713
+ data-id="boxComponent"
714
+ data-selector-id="box"
715
+ data-test-id="boxComponent"
716
+ >
717
+ <div
718
+ class="d-flex d-h-full d-w-full d-flex-row"
719
+ data-id="containerComponent"
720
+ data-selector-id="container"
721
+ data-test-id="containerComponent"
722
+ >
723
+ <div
724
+ class="d-flex-shrink-0 icon"
725
+ data-id="boxComponent"
726
+ data-selector-id="box"
727
+ data-test-id="boxComponent"
728
+ >
729
+ <div
730
+ class="d-inline-flex d-flex-row d-items-center d-justify-center rightPlaceholder"
731
+ data-id="containerComponent"
732
+ data-selector-id="container"
733
+ data-test-id="containerComponent"
734
+ >
735
+ <div
736
+ aria-hidden="true"
737
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center arrowIcon"
738
+ data-id="minuteField_downIcon"
739
+ data-selector-id="container"
740
+ data-test-id="minuteField_downIcon"
741
+ >
742
+ <i
743
+ aria-hidden="true"
744
+ class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
745
+ data-id="fontIcon"
746
+ data-selector-id="fontIcon"
747
+ data-test-id="fontIcon"
748
+ style="--zd-iconfont-size: var(--zd_font_size7);"
749
+ />
750
+ </div>
751
+ </div>
752
+ </div>
753
+ </div>
754
+ </div>
755
+ </div>
756
+ </div>
757
+ </div>
758
+ </div>
759
+ <div
760
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 dropDownContainer"
761
+ data-id="boxComponent"
762
+ data-selector-id="box"
763
+ data-test-id="boxComponent"
764
+ >
765
+ <div
766
+ class="container box_small"
767
+ data-selector-id="select"
768
+ >
769
+ <div
770
+ class=""
771
+ data-id="ampmField"
772
+ data-test-id="ampmField"
773
+ >
774
+ <div
775
+ class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
776
+ data-selector-id="textBoxIcon"
777
+ >
778
+ <div
779
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
780
+ data-id="boxComponent"
781
+ data-selector-id="box"
782
+ data-test-id="boxComponent"
783
+ >
784
+ <input
785
+ aria-activedescendant="PM"
786
+ aria-controls="5"
787
+ aria-expanded="false"
788
+ aria-haspopup="true"
789
+ aria-label="click to select options"
790
+ aria-owns="5"
791
+ aria-readonly="true"
792
+ autocomplete="off"
793
+ class="pointer container xmedium primary effect borderColor_default inputDotted"
794
+ data-id="ampmField_textBox"
795
+ data-selector-id="textBoxIcon"
796
+ data-test-id="ampmField_textBox"
797
+ data-title="PM"
798
+ maxlength="2"
799
+ placeholder=""
800
+ readonly=""
801
+ role="Menuitem"
802
+ type="text"
803
+ value="PM"
804
+ />
805
+ </div>
806
+ <div
807
+ class="d-flex-shrink-0 iconContainer"
808
+ data-id="boxComponent"
809
+ data-selector-id="box"
810
+ data-test-id="boxComponent"
811
+ >
812
+ <div
813
+ class="d-flex d-h-full d-w-full d-flex-row"
814
+ data-id="containerComponent"
815
+ data-selector-id="container"
816
+ data-test-id="containerComponent"
817
+ >
818
+ <div
819
+ class="d-flex-shrink-0 icon"
820
+ data-id="boxComponent"
821
+ data-selector-id="box"
822
+ data-test-id="boxComponent"
823
+ >
824
+ <div
825
+ class="d-inline-flex d-flex-row d-items-center d-justify-center rightPlaceholder"
826
+ data-id="containerComponent"
827
+ data-selector-id="container"
828
+ data-test-id="containerComponent"
829
+ >
830
+ <div
831
+ aria-hidden="true"
832
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center arrowIcon"
833
+ data-id="ampmField_downIcon"
834
+ data-selector-id="container"
835
+ data-test-id="ampmField_downIcon"
836
+ >
837
+ <i
838
+ aria-hidden="true"
839
+ class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
840
+ data-id="fontIcon"
841
+ data-selector-id="fontIcon"
842
+ data-test-id="fontIcon"
843
+ style="--zd-iconfont-size: var(--zd_font_size7);"
844
+ />
845
+ </div>
846
+ </div>
847
+ </div>
848
+ </div>
849
+ </div>
850
+ </div>
851
+ </div>
852
+ </div>
853
+ </div>
854
+ </div>
855
+ <div
856
+ class="d-flex d-flex-row d-items-center footer"
857
+ data-id="containerComponent"
858
+ data-selector-id="container"
859
+ data-test-id="containerComponent"
860
+ >
861
+ <button
862
+ class="bold primaryfilled medium"
863
+ data-id="dateTime_saveBtn"
864
+ data-selector-id="button"
865
+ data-test-id="dateTime_saveBtn"
866
+ type="button"
867
+ >
868
+ Set
869
+ </button>
870
+ <span
871
+ class="space"
872
+ />
873
+ <button
874
+ class="bold secondary medium"
875
+ data-id="dateTime_clearBtn"
876
+ data-selector-id="button"
877
+ data-test-id="dateTime_clearBtn"
878
+ type="button"
879
+ >
880
+ Clear
881
+ </button>
882
+ </div>
883
+ <div
884
+ class="yearContainer"
885
+ >
886
+ <div
887
+ class="container"
888
+ data-id="yearList"
889
+ >
890
+ <div
891
+ class="d-flex d-flex-col yearBox"
892
+ data-id="containerComponent"
893
+ data-selector-id="container"
894
+ data-test-id="containerComponent"
895
+ >
896
+ <div
897
+ class="d-flex-shrink-0 year"
898
+ data-id="year_1850"
899
+ data-selector-id="box"
900
+ data-test-id="year_1850"
901
+ >
902
+ <div
903
+ class="d-flex d-h-full d-w-full d-flex-row d-items-center"
904
+ data-id="containerComponent"
905
+ data-selector-id="container"
906
+ data-test-id="containerComponent"
907
+ >
908
+ <div
909
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
910
+ data-id="boxComponent"
911
+ data-selector-id="box"
912
+ data-test-id="boxComponent"
913
+ >
914
+ <h4
915
+ class="reset yearText"
916
+ data-title="1850"
917
+ tabindex="0"
918
+ >
919
+ 1850
920
+ </h4>
921
+ </div>
922
+ <i
923
+ aria-hidden="true"
924
+ class="zd_font_icons ff icon-arrow-down-single basic d-inline-block d-align-middle d-font-bold arrow arrowActive"
925
+ data-id="fontIcon"
926
+ data-selector-id="fontIcon"
927
+ data-test-id="fontIcon"
928
+ style="--zd-iconfont-size: var(--zd_font_size7);"
929
+ />
930
+ </div>
931
+ </div>
932
+ </div>
933
+ <div
934
+ class="d-flex d-flex-col yearBox"
935
+ data-id="containerComponent"
936
+ data-selector-id="container"
937
+ data-test-id="containerComponent"
938
+ >
939
+ <div
940
+ class="d-flex-shrink-0 year"
941
+ data-id="year_1851"
942
+ data-selector-id="box"
943
+ data-test-id="year_1851"
944
+ >
945
+ <div
946
+ class="d-flex d-h-full d-w-full d-flex-row d-items-center"
947
+ data-id="containerComponent"
948
+ data-selector-id="container"
949
+ data-test-id="containerComponent"
950
+ >
951
+ <div
952
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
953
+ data-id="boxComponent"
954
+ data-selector-id="box"
955
+ data-test-id="boxComponent"
956
+ >
957
+ <h4
958
+ class="reset yearText"
959
+ data-title="1851"
960
+ tabindex="0"
961
+ >
962
+ 1851
963
+ </h4>
964
+ </div>
965
+ <i
966
+ aria-hidden="true"
967
+ class="zd_font_icons ff icon-arrow-down-single basic d-inline-block d-align-middle d-font-bold arrow arrowActive"
968
+ data-id="fontIcon"
969
+ data-selector-id="fontIcon"
970
+ data-test-id="fontIcon"
971
+ style="--zd-iconfont-size: var(--zd_font_size7);"
972
+ />
973
+ </div>
974
+ </div>
975
+ </div>
976
+ <div
977
+ class="d-flex d-flex-col yearBox"
978
+ data-id="containerComponent"
979
+ data-selector-id="container"
980
+ data-test-id="containerComponent"
981
+ >
982
+ <div
983
+ class="d-flex-shrink-0 year"
984
+ data-id="year_1852"
985
+ data-selector-id="box"
986
+ data-test-id="year_1852"
987
+ >
988
+ <div
989
+ class="d-flex d-h-full d-w-full d-flex-row d-items-center"
990
+ data-id="containerComponent"
991
+ data-selector-id="container"
992
+ data-test-id="containerComponent"
993
+ >
994
+ <div
995
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
996
+ data-id="boxComponent"
997
+ data-selector-id="box"
998
+ data-test-id="boxComponent"
999
+ >
1000
+ <h4
1001
+ class="reset yearText"
1002
+ data-title="1852"
1003
+ tabindex="0"
1004
+ >
1005
+ 1852
1006
+ </h4>
1007
+ </div>
1008
+ <i
1009
+ aria-hidden="true"
1010
+ class="zd_font_icons ff icon-arrow-down-single basic d-inline-block d-align-middle d-font-bold arrow arrowActive"
1011
+ data-id="fontIcon"
1012
+ data-selector-id="fontIcon"
1013
+ data-test-id="fontIcon"
1014
+ style="--zd-iconfont-size: var(--zd_font_size7);"
1015
+ />
1016
+ </div>
1017
+ </div>
1018
+ </div>
1019
+ </div>
1020
+ </div>
1021
+ </div>
1022
+ </div>
1023
+ </div>
1024
+ </DocumentFragment>
1025
+ `;
1026
+
1027
+ exports[`DateTime Render with default props 1`] = `<DocumentFragment />`;
1028
+
1029
+ exports[`DateTime Render with isDefaultPosition 1`] = `
1030
+ <DocumentFragment>
1031
+ <div
1032
+ class="dropBox"
1033
+ data-id="dateTime_dateBoxContainer"
1034
+ data-test-id="dateTime_dateBoxContainer"
1035
+ >
1036
+ <div
1037
+ class="container"
1038
+ data-id="dateTime_Calendar"
1039
+ data-test-id="dateTime_Calendar"
1040
+ >
1041
+ <div
1042
+ class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center header"
1043
+ data-id="containerComponent"
1044
+ data-selector-id="container"
1045
+ data-test-id="containerComponent"
1046
+ >
1047
+ <div
1048
+ class="d-flex-shrink-0 dateText"
1049
+ data-id="selectYear"
1050
+ data-selector-id="box"
1051
+ data-test-id="selectYear"
1052
+ >
1053
+ <h2
1054
+ class="reset thMonYear"
1055
+ data-title="October 2026"
1056
+ tabindex="0"
1057
+ >
1058
+ October 2026
1059
+ </h2>
1060
+ <span>
1061
+ <i
1062
+ aria-hidden="true"
1063
+ class="zd_font_icons ff icon-dropdown basic d-inline-block d-align-middle downArrow"
1064
+ data-id="fontIcon"
1065
+ data-selector-id="fontIcon"
1066
+ data-test-id="fontIcon"
1067
+ style="--zd-iconfont-size: var(--zd_font_size12);"
1068
+ />
1069
+ </span>
1070
+ </div>
1071
+ <div
1072
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
1073
+ data-id="boxComponent"
1074
+ data-selector-id="box"
1075
+ data-test-id="boxComponent"
1076
+ />
1077
+ <div
1078
+ aria-label="prevMonth"
1079
+ class="d-flex-shrink-0 thArrow grid"
1080
+ data-id="prevMonth"
1081
+ data-selector-id="box"
1082
+ data-test-id="prevMonth"
1083
+ data-title="Prev month"
1084
+ tabindex="0"
1085
+ >
1086
+ <i
1087
+ aria-hidden="true"
1088
+ class="zd_font_icons ff icon-arrow-left3 basic d-inline-block d-align-middle rtl d-font-bold"
1089
+ data-id="fontIcon"
1090
+ data-selector-id="fontIcon"
1091
+ data-test-id="fontIcon"
1092
+ />
1093
+ </div>
1094
+ <div
1095
+ aria-label="nextMonth"
1096
+ class="d-flex-shrink-0 thArrow grid navigation"
1097
+ data-id="nextMonth"
1098
+ data-selector-id="box"
1099
+ data-test-id="nextMonth"
1100
+ data-title="Next month"
1101
+ tabindex="0"
1102
+ >
1103
+ <i
1104
+ aria-hidden="true"
1105
+ class="zd_font_icons ff icon-arrow-right3 basic d-inline-block d-align-middle rtl d-font-bold"
1106
+ data-id="fontIcon"
1107
+ data-selector-id="fontIcon"
1108
+ data-test-id="fontIcon"
1109
+ />
1110
+ </div>
1111
+ </div>
1112
+ <div
1113
+ class="subContainer"
1114
+ >
1115
+ <div
1116
+ class="d-flex d-h-full d-w-full d-flex-row days"
1117
+ data-id="containerComponent"
1118
+ data-selector-id="container"
1119
+ data-test-id="containerComponent"
1120
+ >
1121
+ <div
1122
+ aria-label="Sunday"
1123
+ class="d-flex-shrink-0 daysStr grid holiday"
1124
+ data-id="boxComponent"
1125
+ data-selector-id="box"
1126
+ data-test-id="boxComponent"
1127
+ data-title="Sunday"
1128
+ >
1129
+ S
1130
+ </div>
1131
+ <div
1132
+ aria-label="Monday"
1133
+ class="d-flex-shrink-0 daysStr grid"
1134
+ data-id="boxComponent"
1135
+ data-selector-id="box"
1136
+ data-test-id="boxComponent"
1137
+ data-title="Monday"
1138
+ >
1139
+ M
1140
+ </div>
1141
+ <div
1142
+ aria-label="Tuesday"
1143
+ class="d-flex-shrink-0 daysStr grid"
1144
+ data-id="boxComponent"
1145
+ data-selector-id="box"
1146
+ data-test-id="boxComponent"
1147
+ data-title="Tuesday"
1148
+ >
1149
+ T
1150
+ </div>
1151
+ <div
1152
+ aria-label="Wednesday"
1153
+ class="d-flex-shrink-0 daysStr grid"
1154
+ data-id="boxComponent"
1155
+ data-selector-id="box"
1156
+ data-test-id="boxComponent"
1157
+ data-title="Wednesday"
1158
+ >
1159
+ W
1160
+ </div>
1161
+ <div
1162
+ aria-label="Thursday"
1163
+ class="d-flex-shrink-0 daysStr grid"
1164
+ data-id="boxComponent"
1165
+ data-selector-id="box"
1166
+ data-test-id="boxComponent"
1167
+ data-title="Thursday"
1168
+ >
1169
+ T
1170
+ </div>
1171
+ <div
1172
+ aria-label="Friday"
1173
+ class="d-flex-shrink-0 daysStr grid"
1174
+ data-id="boxComponent"
1175
+ data-selector-id="box"
1176
+ data-test-id="boxComponent"
1177
+ data-title="Friday"
1178
+ >
1179
+ F
1180
+ </div>
1181
+ <div
1182
+ aria-label="Saturday"
1183
+ class="d-flex-shrink-0 daysStr grid"
1184
+ data-id="boxComponent"
1185
+ data-selector-id="box"
1186
+ data-test-id="boxComponent"
1187
+ data-title="Saturday"
1188
+ >
1189
+ S
1190
+ </div>
1191
+ </div>
1192
+ <div
1193
+ class="dateContainer separator"
1194
+ data-id="dateTime_dateContainer"
1195
+ data-test-id="dateTime_dateContainer"
1196
+ >
1197
+ <div
1198
+ class="d-flex d-flex-row dateRow"
1199
+ data-id="containerComponent"
1200
+ data-selector-id="container"
1201
+ data-test-id="containerComponent"
1202
+ >
1203
+ <div
1204
+ aria-label="27"
1205
+ class="d-flex-shrink-0 datesStr grid holiday invalidDate"
1206
+ data-id="dateTime_invalidDate"
1207
+ data-selector-id="box"
1208
+ data-test-id="dateTime_invalidDate"
1209
+ >
1210
+ 27
1211
+ </div>
1212
+ <div
1213
+ aria-label="28"
1214
+ class="d-flex-shrink-0 datesStr grid invalidDate"
1215
+ data-id="dateTime_invalidDate"
1216
+ data-selector-id="box"
1217
+ data-test-id="dateTime_invalidDate"
1218
+ >
1219
+ 28
1220
+ </div>
1221
+ <div
1222
+ aria-label="29"
1223
+ class="d-flex-shrink-0 datesStr grid invalidDate"
1224
+ data-id="dateTime_invalidDate"
1225
+ data-selector-id="box"
1226
+ data-test-id="dateTime_invalidDate"
1227
+ >
1228
+ 29
1229
+ </div>
1230
+ <div
1231
+ aria-label="30"
1232
+ class="d-flex-shrink-0 datesStr grid invalidDate"
1233
+ data-id="dateTime_invalidDate"
1234
+ data-selector-id="box"
1235
+ data-test-id="dateTime_invalidDate"
1236
+ >
1237
+ 30
1238
+ </div>
1239
+ <div
1240
+ aria-label="1"
1241
+ class="d-flex-shrink-0 datesStr grid"
1242
+ data-id="dateTime_date"
1243
+ data-selector-id="box"
1244
+ data-test-id="dateTime_date"
1245
+ >
1246
+ 1
1247
+ </div>
1248
+ <div
1249
+ aria-label="2"
1250
+ class="d-flex-shrink-0 datesStr grid"
1251
+ data-id="dateTime_date"
1252
+ data-selector-id="box"
1253
+ data-test-id="dateTime_date"
1254
+ >
1255
+ 2
1256
+ </div>
1257
+ <div
1258
+ aria-label="3"
1259
+ class="d-flex-shrink-0 datesStr grid"
1260
+ data-id="dateTime_date"
1261
+ data-selector-id="box"
1262
+ data-test-id="dateTime_date"
1263
+ >
1264
+ 3
1265
+ </div>
1266
+ </div>
1267
+ <div
1268
+ class="d-flex d-flex-row dateRow"
1269
+ data-id="containerComponent"
1270
+ data-selector-id="container"
1271
+ data-test-id="containerComponent"
1272
+ >
1273
+ <div
1274
+ aria-label="4"
1275
+ class="d-flex-shrink-0 datesStr grid holiday"
1276
+ data-id="dateTime_date"
1277
+ data-selector-id="box"
1278
+ data-test-id="dateTime_date"
1279
+ >
1280
+ 4
1281
+ </div>
1282
+ <div
1283
+ aria-label="5"
1284
+ class="d-flex-shrink-0 datesStr grid"
1285
+ data-id="dateTime_date"
1286
+ data-selector-id="box"
1287
+ data-test-id="dateTime_date"
1288
+ >
1289
+ 5
1290
+ </div>
1291
+ <div
1292
+ aria-label="6"
1293
+ class="d-flex-shrink-0 datesStr grid"
1294
+ data-id="dateTime_date"
1295
+ data-selector-id="box"
1296
+ data-test-id="dateTime_date"
1297
+ >
1298
+ 6
1299
+ </div>
1300
+ <div
1301
+ aria-label="7"
1302
+ class="d-flex-shrink-0 datesStr grid"
1303
+ data-id="dateTime_date"
1304
+ data-selector-id="box"
1305
+ data-test-id="dateTime_date"
1306
+ >
1307
+ 7
1308
+ </div>
1309
+ <div
1310
+ aria-label="8"
1311
+ class="d-flex-shrink-0 datesStr grid"
1312
+ data-id="dateTime_date"
1313
+ data-selector-id="box"
1314
+ data-test-id="dateTime_date"
1315
+ >
1316
+ 8
1317
+ </div>
1318
+ <div
1319
+ aria-label="9"
1320
+ class="d-flex-shrink-0 datesStr grid"
1321
+ data-id="dateTime_date"
1322
+ data-selector-id="box"
1323
+ data-test-id="dateTime_date"
1324
+ >
1325
+ 9
1326
+ </div>
1327
+ <div
1328
+ aria-label="10"
1329
+ class="d-flex-shrink-0 datesStr grid"
1330
+ data-id="dateTime_date"
1331
+ data-selector-id="box"
1332
+ data-test-id="dateTime_date"
1333
+ >
1334
+ 10
1335
+ </div>
1336
+ </div>
1337
+ <div
1338
+ class="d-flex d-flex-row dateRow"
1339
+ data-id="containerComponent"
1340
+ data-selector-id="container"
1341
+ data-test-id="containerComponent"
1342
+ >
1343
+ <div
1344
+ aria-label="11"
1345
+ class="d-flex-shrink-0 datesStr grid holiday"
1346
+ data-id="dateTime_date"
1347
+ data-selector-id="box"
1348
+ data-test-id="dateTime_date"
1349
+ >
1350
+ 11
1351
+ </div>
1352
+ <div
1353
+ aria-label="12"
1354
+ class="d-flex-shrink-0 datesStr grid"
1355
+ data-id="dateTime_date"
1356
+ data-selector-id="box"
1357
+ data-test-id="dateTime_date"
1358
+ >
1359
+ 12
1360
+ </div>
1361
+ <div
1362
+ aria-label="13"
1363
+ class="d-flex-shrink-0 datesStr grid"
1364
+ data-id="dateTime_date"
1365
+ data-selector-id="box"
1366
+ data-test-id="dateTime_date"
1367
+ >
1368
+ 13
1369
+ </div>
1370
+ <div
1371
+ aria-label="14"
1372
+ class="d-flex-shrink-0 datesStr grid"
1373
+ data-id="dateTime_date"
1374
+ data-selector-id="box"
1375
+ data-test-id="dateTime_date"
1376
+ >
1377
+ 14
1378
+ </div>
1379
+ <div
1380
+ aria-label="15"
1381
+ class="d-flex-shrink-0 datesStr grid"
1382
+ data-id="dateTime_date"
1383
+ data-selector-id="box"
1384
+ data-test-id="dateTime_date"
1385
+ >
1386
+ 15
1387
+ </div>
1388
+ <div
1389
+ aria-label="16"
1390
+ class="d-flex-shrink-0 datesStr grid"
1391
+ data-id="dateTime_date"
1392
+ data-selector-id="box"
1393
+ data-test-id="dateTime_date"
1394
+ >
1395
+ 16
1396
+ </div>
1397
+ <div
1398
+ aria-label="17"
1399
+ class="d-flex-shrink-0 datesStr grid"
1400
+ data-id="dateTime_date"
1401
+ data-selector-id="box"
1402
+ data-test-id="dateTime_date"
1403
+ >
1404
+ 17
1405
+ </div>
1406
+ </div>
1407
+ <div
1408
+ class="d-flex d-flex-row dateRow"
1409
+ data-id="containerComponent"
1410
+ data-selector-id="container"
1411
+ data-test-id="containerComponent"
1412
+ >
1413
+ <div
1414
+ aria-label="18"
1415
+ class="d-flex-shrink-0 datesStr grid holiday"
1416
+ data-id="dateTime_date"
1417
+ data-selector-id="box"
1418
+ data-test-id="dateTime_date"
1419
+ >
1420
+ 18
1421
+ </div>
1422
+ <div
1423
+ aria-label="19"
1424
+ class="d-flex-shrink-0 active datesStr grid"
1425
+ data-id="dateTime_dateSelected"
1426
+ data-selector-id="box"
1427
+ data-test-id="dateTime_dateSelected"
1428
+ >
1429
+ 19
1430
+ </div>
1431
+ <div
1432
+ aria-label="20"
1433
+ class="d-flex-shrink-0 datesStr grid"
1434
+ data-id="dateTime_date"
1435
+ data-selector-id="box"
1436
+ data-test-id="dateTime_date"
1437
+ >
1438
+ 20
1439
+ </div>
1440
+ <div
1441
+ aria-label="21"
1442
+ class="d-flex-shrink-0 datesStr grid"
1443
+ data-id="dateTime_date"
1444
+ data-selector-id="box"
1445
+ data-test-id="dateTime_date"
1446
+ >
1447
+ 21
1448
+ </div>
1449
+ <div
1450
+ aria-label="22"
1451
+ class="d-flex-shrink-0 datesStr grid"
1452
+ data-id="dateTime_date"
1453
+ data-selector-id="box"
1454
+ data-test-id="dateTime_date"
1455
+ >
1456
+ 22
1457
+ </div>
1458
+ <div
1459
+ aria-label="23"
1460
+ class="d-flex-shrink-0 datesStr grid"
1461
+ data-id="dateTime_date"
1462
+ data-selector-id="box"
1463
+ data-test-id="dateTime_date"
1464
+ >
1465
+ 23
1466
+ </div>
1467
+ <div
1468
+ aria-label="24"
1469
+ class="d-flex-shrink-0 datesStr grid"
1470
+ data-id="dateTime_date"
1471
+ data-selector-id="box"
1472
+ data-test-id="dateTime_date"
1473
+ >
1474
+ 24
1475
+ </div>
1476
+ </div>
1477
+ <div
1478
+ class="d-flex d-flex-row dateRow"
1479
+ data-id="containerComponent"
1480
+ data-selector-id="container"
1481
+ data-test-id="containerComponent"
1482
+ >
1483
+ <div
1484
+ aria-label="25"
1485
+ class="d-flex-shrink-0 datesStr grid holiday"
1486
+ data-id="dateTime_date"
1487
+ data-selector-id="box"
1488
+ data-test-id="dateTime_date"
1489
+ >
1490
+ 25
1491
+ </div>
1492
+ <div
1493
+ aria-label="26"
1494
+ class="d-flex-shrink-0 datesStr grid"
1495
+ data-id="dateTime_date"
1496
+ data-selector-id="box"
1497
+ data-test-id="dateTime_date"
1498
+ >
1499
+ 26
1500
+ </div>
1501
+ <div
1502
+ aria-label="27"
1503
+ class="d-flex-shrink-0 datesStr grid"
1504
+ data-id="dateTime_date"
1505
+ data-selector-id="box"
1506
+ data-test-id="dateTime_date"
1507
+ >
1508
+ 27
1509
+ </div>
1510
+ <div
1511
+ aria-label="28"
1512
+ class="d-flex-shrink-0 datesStr grid"
1513
+ data-id="dateTime_date"
1514
+ data-selector-id="box"
1515
+ data-test-id="dateTime_date"
1516
+ >
1517
+ 28
1518
+ </div>
1519
+ <div
1520
+ aria-label="29"
1521
+ class="d-flex-shrink-0 datesStr grid"
1522
+ data-id="dateTime_date"
1523
+ data-selector-id="box"
1524
+ data-test-id="dateTime_date"
1525
+ >
1526
+ 29
1527
+ </div>
1528
+ <div
1529
+ aria-label="30"
1530
+ class="d-flex-shrink-0 datesStr grid"
1531
+ data-id="dateTime_date"
1532
+ data-selector-id="box"
1533
+ data-test-id="dateTime_date"
1534
+ >
1535
+ 30
1536
+ </div>
1537
+ <div
1538
+ aria-label="31"
1539
+ class="d-flex-shrink-0 datesStr grid"
1540
+ data-id="dateTime_date"
1541
+ data-selector-id="box"
1542
+ data-test-id="dateTime_date"
1543
+ >
1544
+ 31
1545
+ </div>
1546
+ </div>
1547
+ <div
1548
+ class="d-flex d-flex-row dateRow"
1549
+ data-id="containerComponent"
1550
+ data-selector-id="container"
1551
+ data-test-id="containerComponent"
1552
+ >
1553
+ <div
1554
+ aria-label="1"
1555
+ class="d-flex-shrink-0 invalidDate datesStr grid holiday"
1556
+ data-id="dateTime_invalidDate"
1557
+ data-selector-id="box"
1558
+ data-test-id="dateTime_invalidDate"
1559
+ >
1560
+ 1
1561
+ </div>
1562
+ <div
1563
+ aria-label="2"
1564
+ class="d-flex-shrink-0 invalidDate datesStr grid"
1565
+ data-id="dateTime_invalidDate"
1566
+ data-selector-id="box"
1567
+ data-test-id="dateTime_invalidDate"
1568
+ >
1569
+ 2
1570
+ </div>
1571
+ <div
1572
+ aria-label="3"
1573
+ class="d-flex-shrink-0 invalidDate datesStr grid"
1574
+ data-id="dateTime_invalidDate"
1575
+ data-selector-id="box"
1576
+ data-test-id="dateTime_invalidDate"
1577
+ >
1578
+ 3
1579
+ </div>
1580
+ <div
1581
+ aria-label="4"
1582
+ class="d-flex-shrink-0 invalidDate datesStr grid"
1583
+ data-id="dateTime_invalidDate"
1584
+ data-selector-id="box"
1585
+ data-test-id="dateTime_invalidDate"
1586
+ >
1587
+ 4
1588
+ </div>
1589
+ <div
1590
+ aria-label="5"
1591
+ class="d-flex-shrink-0 invalidDate datesStr grid"
1592
+ data-id="dateTime_invalidDate"
1593
+ data-selector-id="box"
1594
+ data-test-id="dateTime_invalidDate"
1595
+ >
1596
+ 5
1597
+ </div>
1598
+ <div
1599
+ aria-label="6"
1600
+ class="d-flex-shrink-0 invalidDate datesStr grid"
1601
+ data-id="dateTime_invalidDate"
1602
+ data-selector-id="box"
1603
+ data-test-id="dateTime_invalidDate"
1604
+ >
1605
+ 6
1606
+ </div>
1607
+ <div
1608
+ aria-label="7"
1609
+ class="d-flex-shrink-0 invalidDate datesStr grid"
1610
+ data-id="dateTime_invalidDate"
1611
+ data-selector-id="box"
1612
+ data-test-id="dateTime_invalidDate"
1613
+ >
1614
+ 7
1615
+ </div>
1616
+ </div>
1617
+ </div>
1618
+ <span
1619
+ class="text"
1620
+ >
1621
+ Time
1622
+ </span>
1623
+ <div
1624
+ class="d-flex d-flex-row d-items-center timesection"
1625
+ data-id="dateTime_timeContainer"
1626
+ data-selector-id="container"
1627
+ data-test-id="dateTime_timeContainer"
1628
+ >
1629
+ <div
1630
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 dropDownContainer"
1631
+ data-id="boxComponent"
1632
+ data-selector-id="box"
1633
+ data-test-id="boxComponent"
1634
+ >
1635
+ <div
1636
+ class="container box_small"
1637
+ data-selector-id="select"
1638
+ >
1639
+ <div
1640
+ class=""
1641
+ data-id="hourField"
1642
+ data-test-id="hourField"
1643
+ >
1644
+ <div
1645
+ class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
1646
+ data-selector-id="textBoxIcon"
1647
+ >
1648
+ <div
1649
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
1650
+ data-id="boxComponent"
1651
+ data-selector-id="box"
1652
+ data-test-id="boxComponent"
1653
+ >
1654
+ <input
1655
+ aria-activedescendant="12"
1656
+ aria-controls="1"
1657
+ aria-expanded="false"
1658
+ aria-haspopup="true"
1659
+ aria-label="click to select options"
1660
+ aria-owns="1"
1661
+ aria-readonly="true"
1662
+ autocomplete="off"
1663
+ class="pointer container xmedium primary effect borderColor_default inputDotted"
1664
+ data-id="hourField_textBox"
1665
+ data-selector-id="textBoxIcon"
1666
+ data-test-id="hourField_textBox"
1667
+ data-title="12"
1668
+ maxlength="2"
1669
+ placeholder=""
1670
+ readonly=""
1671
+ role="Menuitem"
1672
+ type="text"
1673
+ value="12"
1674
+ />
1675
+ </div>
1676
+ <div
1677
+ class="d-flex-shrink-0 iconContainer"
1678
+ data-id="boxComponent"
1679
+ data-selector-id="box"
1680
+ data-test-id="boxComponent"
1681
+ >
1682
+ <div
1683
+ class="d-flex d-h-full d-w-full d-flex-row"
1684
+ data-id="containerComponent"
1685
+ data-selector-id="container"
1686
+ data-test-id="containerComponent"
1687
+ >
1688
+ <div
1689
+ class="d-flex-shrink-0 icon"
1690
+ data-id="boxComponent"
1691
+ data-selector-id="box"
1692
+ data-test-id="boxComponent"
1693
+ >
1694
+ <div
1695
+ class="d-inline-flex d-flex-row d-items-center d-justify-center rightPlaceholder"
1696
+ data-id="containerComponent"
1697
+ data-selector-id="container"
1698
+ data-test-id="containerComponent"
1699
+ >
1700
+ <div
1701
+ aria-hidden="true"
1702
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center arrowIcon"
1703
+ data-id="hourField_downIcon"
1704
+ data-selector-id="container"
1705
+ data-test-id="hourField_downIcon"
1706
+ >
1707
+ <i
1708
+ aria-hidden="true"
1709
+ class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
1710
+ data-id="fontIcon"
1711
+ data-selector-id="fontIcon"
1712
+ data-test-id="fontIcon"
1713
+ style="--zd-iconfont-size: var(--zd_font_size7);"
1714
+ />
1715
+ </div>
1716
+ </div>
1717
+ </div>
1718
+ </div>
1719
+ </div>
1720
+ </div>
1721
+ </div>
1722
+ </div>
1723
+ </div>
1724
+ <div
1725
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 dropDownContainer"
1726
+ data-id="boxComponent"
1727
+ data-selector-id="box"
1728
+ data-test-id="boxComponent"
1729
+ >
1730
+ <div
1731
+ class="container box_small"
1732
+ data-selector-id="select"
1733
+ >
1734
+ <div
1735
+ class=""
1736
+ data-id="minuteField"
1737
+ data-test-id="minuteField"
1738
+ >
1739
+ <div
1740
+ class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
1741
+ data-selector-id="textBoxIcon"
1742
+ >
1743
+ <div
1744
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
1745
+ data-id="boxComponent"
1746
+ data-selector-id="box"
1747
+ data-test-id="boxComponent"
1748
+ >
1749
+ <input
1750
+ aria-activedescendant="00"
1751
+ aria-controls="3"
1752
+ aria-expanded="false"
1753
+ aria-haspopup="true"
1754
+ aria-label="click to select options"
1755
+ aria-owns="3"
1756
+ aria-readonly="true"
1757
+ autocomplete="off"
1758
+ class="pointer container xmedium primary effect borderColor_default inputDotted"
1759
+ data-id="minuteField_textBox"
1760
+ data-selector-id="textBoxIcon"
1761
+ data-test-id="minuteField_textBox"
1762
+ data-title="00"
1763
+ maxlength="2"
1764
+ placeholder=""
1765
+ readonly=""
1766
+ role="Menuitem"
1767
+ type="text"
1768
+ value="00"
1769
+ />
1770
+ </div>
1771
+ <div
1772
+ class="d-flex-shrink-0 iconContainer"
1773
+ data-id="boxComponent"
1774
+ data-selector-id="box"
1775
+ data-test-id="boxComponent"
1776
+ >
1777
+ <div
1778
+ class="d-flex d-h-full d-w-full d-flex-row"
1779
+ data-id="containerComponent"
1780
+ data-selector-id="container"
1781
+ data-test-id="containerComponent"
1782
+ >
1783
+ <div
1784
+ class="d-flex-shrink-0 icon"
1785
+ data-id="boxComponent"
1786
+ data-selector-id="box"
1787
+ data-test-id="boxComponent"
1788
+ >
1789
+ <div
1790
+ class="d-inline-flex d-flex-row d-items-center d-justify-center rightPlaceholder"
1791
+ data-id="containerComponent"
1792
+ data-selector-id="container"
1793
+ data-test-id="containerComponent"
1794
+ >
1795
+ <div
1796
+ aria-hidden="true"
1797
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center arrowIcon"
1798
+ data-id="minuteField_downIcon"
1799
+ data-selector-id="container"
1800
+ data-test-id="minuteField_downIcon"
1801
+ >
1802
+ <i
1803
+ aria-hidden="true"
1804
+ class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
1805
+ data-id="fontIcon"
1806
+ data-selector-id="fontIcon"
1807
+ data-test-id="fontIcon"
1808
+ style="--zd-iconfont-size: var(--zd_font_size7);"
1809
+ />
1810
+ </div>
1811
+ </div>
1812
+ </div>
1813
+ </div>
1814
+ </div>
1815
+ </div>
1816
+ </div>
1817
+ </div>
1818
+ </div>
1819
+ <div
1820
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 dropDownContainer"
1821
+ data-id="boxComponent"
1822
+ data-selector-id="box"
1823
+ data-test-id="boxComponent"
1824
+ >
1825
+ <div
1826
+ class="container box_small"
1827
+ data-selector-id="select"
1828
+ >
1829
+ <div
1830
+ class=""
1831
+ data-id="ampmField"
1832
+ data-test-id="ampmField"
1833
+ >
1834
+ <div
1835
+ class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
1836
+ data-selector-id="textBoxIcon"
1837
+ >
1838
+ <div
1839
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
1840
+ data-id="boxComponent"
1841
+ data-selector-id="box"
1842
+ data-test-id="boxComponent"
1843
+ >
1844
+ <input
1845
+ aria-activedescendant="PM"
1846
+ aria-controls="5"
1847
+ aria-expanded="false"
1848
+ aria-haspopup="true"
1849
+ aria-label="click to select options"
1850
+ aria-owns="5"
1851
+ aria-readonly="true"
1852
+ autocomplete="off"
1853
+ class="pointer container xmedium primary effect borderColor_default inputDotted"
1854
+ data-id="ampmField_textBox"
1855
+ data-selector-id="textBoxIcon"
1856
+ data-test-id="ampmField_textBox"
1857
+ data-title="PM"
1858
+ maxlength="2"
1859
+ placeholder=""
1860
+ readonly=""
1861
+ role="Menuitem"
1862
+ type="text"
1863
+ value="PM"
1864
+ />
1865
+ </div>
1866
+ <div
1867
+ class="d-flex-shrink-0 iconContainer"
1868
+ data-id="boxComponent"
1869
+ data-selector-id="box"
1870
+ data-test-id="boxComponent"
1871
+ >
1872
+ <div
1873
+ class="d-flex d-h-full d-w-full d-flex-row"
1874
+ data-id="containerComponent"
1875
+ data-selector-id="container"
1876
+ data-test-id="containerComponent"
1877
+ >
1878
+ <div
1879
+ class="d-flex-shrink-0 icon"
1880
+ data-id="boxComponent"
1881
+ data-selector-id="box"
1882
+ data-test-id="boxComponent"
1883
+ >
1884
+ <div
1885
+ class="d-inline-flex d-flex-row d-items-center d-justify-center rightPlaceholder"
1886
+ data-id="containerComponent"
1887
+ data-selector-id="container"
1888
+ data-test-id="containerComponent"
1889
+ >
1890
+ <div
1891
+ aria-hidden="true"
1892
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center arrowIcon"
1893
+ data-id="ampmField_downIcon"
1894
+ data-selector-id="container"
1895
+ data-test-id="ampmField_downIcon"
1896
+ >
1897
+ <i
1898
+ aria-hidden="true"
1899
+ class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
1900
+ data-id="fontIcon"
1901
+ data-selector-id="fontIcon"
1902
+ data-test-id="fontIcon"
1903
+ style="--zd-iconfont-size: var(--zd_font_size7);"
1904
+ />
1905
+ </div>
1906
+ </div>
1907
+ </div>
1908
+ </div>
1909
+ </div>
1910
+ </div>
1911
+ </div>
1912
+ </div>
1913
+ </div>
1914
+ </div>
1915
+ <div
1916
+ class="d-flex d-flex-row d-items-center footer"
1917
+ data-id="containerComponent"
1918
+ data-selector-id="container"
1919
+ data-test-id="containerComponent"
1920
+ >
1921
+ <button
1922
+ class="bold primaryfilled medium"
1923
+ data-id="dateTime_saveBtn"
1924
+ data-selector-id="button"
1925
+ data-test-id="dateTime_saveBtn"
1926
+ type="button"
1927
+ >
1928
+ Set
1929
+ </button>
1930
+ <span
1931
+ class="space"
1932
+ />
1933
+ <button
1934
+ class="bold secondary medium"
1935
+ data-id="dateTime_clearBtn"
1936
+ data-selector-id="button"
1937
+ data-test-id="dateTime_clearBtn"
1938
+ type="button"
1939
+ >
1940
+ Clear
1941
+ </button>
1942
+ </div>
1943
+ </div>
1944
+ </div>
1945
+ </div>
1946
+ </DocumentFragment>
1947
+ `;
1948
+
1949
+ exports[`DateTime Render with isDefaultPosition and is24Hour 1`] = `
1950
+ <DocumentFragment>
1951
+ <div
1952
+ class="dropBox"
1953
+ data-id="dateTime_dateBoxContainer"
1954
+ data-test-id="dateTime_dateBoxContainer"
1955
+ >
1956
+ <div
1957
+ class="container"
1958
+ data-id="dateTime_Calendar"
1959
+ data-test-id="dateTime_Calendar"
1960
+ >
1961
+ <div
1962
+ class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center header"
1963
+ data-id="containerComponent"
1964
+ data-selector-id="container"
1965
+ data-test-id="containerComponent"
1966
+ >
1967
+ <div
1968
+ class="d-flex-shrink-0 dateText"
1969
+ data-id="selectYear"
1970
+ data-selector-id="box"
1971
+ data-test-id="selectYear"
1972
+ >
1973
+ <h2
1974
+ class="reset thMonYear"
1975
+ data-title="October 2026"
1976
+ tabindex="0"
1977
+ >
1978
+ October 2026
1979
+ </h2>
1980
+ <span>
1981
+ <i
1982
+ aria-hidden="true"
1983
+ class="zd_font_icons ff icon-dropdown basic d-inline-block d-align-middle downArrow"
1984
+ data-id="fontIcon"
1985
+ data-selector-id="fontIcon"
1986
+ data-test-id="fontIcon"
1987
+ style="--zd-iconfont-size: var(--zd_font_size12);"
1988
+ />
1989
+ </span>
1990
+ </div>
1991
+ <div
1992
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
1993
+ data-id="boxComponent"
1994
+ data-selector-id="box"
1995
+ data-test-id="boxComponent"
1996
+ />
1997
+ <div
1998
+ aria-label="prevMonth"
1999
+ class="d-flex-shrink-0 thArrow grid"
2000
+ data-id="prevMonth"
2001
+ data-selector-id="box"
2002
+ data-test-id="prevMonth"
2003
+ data-title="Prev month"
2004
+ tabindex="0"
2005
+ >
2006
+ <i
2007
+ aria-hidden="true"
2008
+ class="zd_font_icons ff icon-arrow-left3 basic d-inline-block d-align-middle rtl d-font-bold"
2009
+ data-id="fontIcon"
2010
+ data-selector-id="fontIcon"
2011
+ data-test-id="fontIcon"
2012
+ />
2013
+ </div>
2014
+ <div
2015
+ aria-label="nextMonth"
2016
+ class="d-flex-shrink-0 thArrow grid navigation"
2017
+ data-id="nextMonth"
2018
+ data-selector-id="box"
2019
+ data-test-id="nextMonth"
2020
+ data-title="Next month"
2021
+ tabindex="0"
2022
+ >
2023
+ <i
2024
+ aria-hidden="true"
2025
+ class="zd_font_icons ff icon-arrow-right3 basic d-inline-block d-align-middle rtl d-font-bold"
2026
+ data-id="fontIcon"
2027
+ data-selector-id="fontIcon"
2028
+ data-test-id="fontIcon"
2029
+ />
2030
+ </div>
2031
+ </div>
2032
+ <div
2033
+ class="subContainer"
2034
+ >
2035
+ <div
2036
+ class="d-flex d-h-full d-w-full d-flex-row days"
2037
+ data-id="containerComponent"
2038
+ data-selector-id="container"
2039
+ data-test-id="containerComponent"
2040
+ >
2041
+ <div
2042
+ aria-label="Sunday"
2043
+ class="d-flex-shrink-0 daysStr grid holiday"
2044
+ data-id="boxComponent"
2045
+ data-selector-id="box"
2046
+ data-test-id="boxComponent"
2047
+ data-title="Sunday"
2048
+ >
2049
+ S
2050
+ </div>
2051
+ <div
2052
+ aria-label="Monday"
2053
+ class="d-flex-shrink-0 daysStr grid"
2054
+ data-id="boxComponent"
2055
+ data-selector-id="box"
2056
+ data-test-id="boxComponent"
2057
+ data-title="Monday"
2058
+ >
2059
+ M
2060
+ </div>
2061
+ <div
2062
+ aria-label="Tuesday"
2063
+ class="d-flex-shrink-0 daysStr grid"
2064
+ data-id="boxComponent"
2065
+ data-selector-id="box"
2066
+ data-test-id="boxComponent"
2067
+ data-title="Tuesday"
2068
+ >
2069
+ T
2070
+ </div>
2071
+ <div
2072
+ aria-label="Wednesday"
2073
+ class="d-flex-shrink-0 daysStr grid"
2074
+ data-id="boxComponent"
2075
+ data-selector-id="box"
2076
+ data-test-id="boxComponent"
2077
+ data-title="Wednesday"
2078
+ >
2079
+ W
2080
+ </div>
2081
+ <div
2082
+ aria-label="Thursday"
2083
+ class="d-flex-shrink-0 daysStr grid"
2084
+ data-id="boxComponent"
2085
+ data-selector-id="box"
2086
+ data-test-id="boxComponent"
2087
+ data-title="Thursday"
2088
+ >
2089
+ T
2090
+ </div>
2091
+ <div
2092
+ aria-label="Friday"
2093
+ class="d-flex-shrink-0 daysStr grid"
2094
+ data-id="boxComponent"
2095
+ data-selector-id="box"
2096
+ data-test-id="boxComponent"
2097
+ data-title="Friday"
2098
+ >
2099
+ F
2100
+ </div>
2101
+ <div
2102
+ aria-label="Saturday"
2103
+ class="d-flex-shrink-0 daysStr grid"
2104
+ data-id="boxComponent"
2105
+ data-selector-id="box"
2106
+ data-test-id="boxComponent"
2107
+ data-title="Saturday"
2108
+ >
2109
+ S
2110
+ </div>
2111
+ </div>
2112
+ <div
2113
+ class="dateContainer separator"
2114
+ data-id="dateTime_dateContainer"
2115
+ data-test-id="dateTime_dateContainer"
2116
+ >
2117
+ <div
2118
+ class="d-flex d-flex-row dateRow"
2119
+ data-id="containerComponent"
2120
+ data-selector-id="container"
2121
+ data-test-id="containerComponent"
2122
+ >
2123
+ <div
2124
+ aria-label="27"
2125
+ class="d-flex-shrink-0 datesStr grid holiday invalidDate"
2126
+ data-id="dateTime_invalidDate"
2127
+ data-selector-id="box"
2128
+ data-test-id="dateTime_invalidDate"
2129
+ >
2130
+ 27
2131
+ </div>
2132
+ <div
2133
+ aria-label="28"
2134
+ class="d-flex-shrink-0 datesStr grid invalidDate"
2135
+ data-id="dateTime_invalidDate"
2136
+ data-selector-id="box"
2137
+ data-test-id="dateTime_invalidDate"
2138
+ >
2139
+ 28
2140
+ </div>
2141
+ <div
2142
+ aria-label="29"
2143
+ class="d-flex-shrink-0 datesStr grid invalidDate"
2144
+ data-id="dateTime_invalidDate"
2145
+ data-selector-id="box"
2146
+ data-test-id="dateTime_invalidDate"
2147
+ >
2148
+ 29
2149
+ </div>
2150
+ <div
2151
+ aria-label="30"
2152
+ class="d-flex-shrink-0 datesStr grid invalidDate"
2153
+ data-id="dateTime_invalidDate"
2154
+ data-selector-id="box"
2155
+ data-test-id="dateTime_invalidDate"
2156
+ >
2157
+ 30
2158
+ </div>
2159
+ <div
2160
+ aria-label="1"
2161
+ class="d-flex-shrink-0 datesStr grid"
2162
+ data-id="dateTime_date"
2163
+ data-selector-id="box"
2164
+ data-test-id="dateTime_date"
2165
+ >
2166
+ 1
2167
+ </div>
2168
+ <div
2169
+ aria-label="2"
2170
+ class="d-flex-shrink-0 datesStr grid"
2171
+ data-id="dateTime_date"
2172
+ data-selector-id="box"
2173
+ data-test-id="dateTime_date"
2174
+ >
2175
+ 2
2176
+ </div>
2177
+ <div
2178
+ aria-label="3"
2179
+ class="d-flex-shrink-0 datesStr grid"
2180
+ data-id="dateTime_date"
2181
+ data-selector-id="box"
2182
+ data-test-id="dateTime_date"
2183
+ >
2184
+ 3
2185
+ </div>
2186
+ </div>
2187
+ <div
2188
+ class="d-flex d-flex-row dateRow"
2189
+ data-id="containerComponent"
2190
+ data-selector-id="container"
2191
+ data-test-id="containerComponent"
2192
+ >
2193
+ <div
2194
+ aria-label="4"
2195
+ class="d-flex-shrink-0 datesStr grid holiday"
2196
+ data-id="dateTime_date"
2197
+ data-selector-id="box"
2198
+ data-test-id="dateTime_date"
2199
+ >
2200
+ 4
2201
+ </div>
2202
+ <div
2203
+ aria-label="5"
2204
+ class="d-flex-shrink-0 datesStr grid"
2205
+ data-id="dateTime_date"
2206
+ data-selector-id="box"
2207
+ data-test-id="dateTime_date"
2208
+ >
2209
+ 5
2210
+ </div>
2211
+ <div
2212
+ aria-label="6"
2213
+ class="d-flex-shrink-0 datesStr grid"
2214
+ data-id="dateTime_date"
2215
+ data-selector-id="box"
2216
+ data-test-id="dateTime_date"
2217
+ >
2218
+ 6
2219
+ </div>
2220
+ <div
2221
+ aria-label="7"
2222
+ class="d-flex-shrink-0 datesStr grid"
2223
+ data-id="dateTime_date"
2224
+ data-selector-id="box"
2225
+ data-test-id="dateTime_date"
2226
+ >
2227
+ 7
2228
+ </div>
2229
+ <div
2230
+ aria-label="8"
2231
+ class="d-flex-shrink-0 datesStr grid"
2232
+ data-id="dateTime_date"
2233
+ data-selector-id="box"
2234
+ data-test-id="dateTime_date"
2235
+ >
2236
+ 8
2237
+ </div>
2238
+ <div
2239
+ aria-label="9"
2240
+ class="d-flex-shrink-0 datesStr grid"
2241
+ data-id="dateTime_date"
2242
+ data-selector-id="box"
2243
+ data-test-id="dateTime_date"
2244
+ >
2245
+ 9
2246
+ </div>
2247
+ <div
2248
+ aria-label="10"
2249
+ class="d-flex-shrink-0 datesStr grid"
2250
+ data-id="dateTime_date"
2251
+ data-selector-id="box"
2252
+ data-test-id="dateTime_date"
2253
+ >
2254
+ 10
2255
+ </div>
2256
+ </div>
2257
+ <div
2258
+ class="d-flex d-flex-row dateRow"
2259
+ data-id="containerComponent"
2260
+ data-selector-id="container"
2261
+ data-test-id="containerComponent"
2262
+ >
2263
+ <div
2264
+ aria-label="11"
2265
+ class="d-flex-shrink-0 datesStr grid holiday"
2266
+ data-id="dateTime_date"
2267
+ data-selector-id="box"
2268
+ data-test-id="dateTime_date"
2269
+ >
2270
+ 11
2271
+ </div>
2272
+ <div
2273
+ aria-label="12"
2274
+ class="d-flex-shrink-0 datesStr grid"
2275
+ data-id="dateTime_date"
2276
+ data-selector-id="box"
2277
+ data-test-id="dateTime_date"
2278
+ >
2279
+ 12
2280
+ </div>
2281
+ <div
2282
+ aria-label="13"
2283
+ class="d-flex-shrink-0 datesStr grid"
2284
+ data-id="dateTime_date"
2285
+ data-selector-id="box"
2286
+ data-test-id="dateTime_date"
2287
+ >
2288
+ 13
2289
+ </div>
2290
+ <div
2291
+ aria-label="14"
2292
+ class="d-flex-shrink-0 datesStr grid"
2293
+ data-id="dateTime_date"
2294
+ data-selector-id="box"
2295
+ data-test-id="dateTime_date"
2296
+ >
2297
+ 14
2298
+ </div>
2299
+ <div
2300
+ aria-label="15"
2301
+ class="d-flex-shrink-0 datesStr grid"
2302
+ data-id="dateTime_date"
2303
+ data-selector-id="box"
2304
+ data-test-id="dateTime_date"
2305
+ >
2306
+ 15
2307
+ </div>
2308
+ <div
2309
+ aria-label="16"
2310
+ class="d-flex-shrink-0 datesStr grid"
2311
+ data-id="dateTime_date"
2312
+ data-selector-id="box"
2313
+ data-test-id="dateTime_date"
2314
+ >
2315
+ 16
2316
+ </div>
2317
+ <div
2318
+ aria-label="17"
2319
+ class="d-flex-shrink-0 datesStr grid"
2320
+ data-id="dateTime_date"
2321
+ data-selector-id="box"
2322
+ data-test-id="dateTime_date"
2323
+ >
2324
+ 17
2325
+ </div>
2326
+ </div>
2327
+ <div
2328
+ class="d-flex d-flex-row dateRow"
2329
+ data-id="containerComponent"
2330
+ data-selector-id="container"
2331
+ data-test-id="containerComponent"
2332
+ >
2333
+ <div
2334
+ aria-label="18"
2335
+ class="d-flex-shrink-0 datesStr grid holiday"
2336
+ data-id="dateTime_date"
2337
+ data-selector-id="box"
2338
+ data-test-id="dateTime_date"
2339
+ >
2340
+ 18
2341
+ </div>
2342
+ <div
2343
+ aria-label="19"
2344
+ class="d-flex-shrink-0 active datesStr grid"
2345
+ data-id="dateTime_dateSelected"
2346
+ data-selector-id="box"
2347
+ data-test-id="dateTime_dateSelected"
2348
+ >
2349
+ 19
2350
+ </div>
2351
+ <div
2352
+ aria-label="20"
2353
+ class="d-flex-shrink-0 datesStr grid"
2354
+ data-id="dateTime_date"
2355
+ data-selector-id="box"
2356
+ data-test-id="dateTime_date"
2357
+ >
2358
+ 20
2359
+ </div>
2360
+ <div
2361
+ aria-label="21"
2362
+ class="d-flex-shrink-0 datesStr grid"
2363
+ data-id="dateTime_date"
2364
+ data-selector-id="box"
2365
+ data-test-id="dateTime_date"
2366
+ >
2367
+ 21
2368
+ </div>
2369
+ <div
2370
+ aria-label="22"
2371
+ class="d-flex-shrink-0 datesStr grid"
2372
+ data-id="dateTime_date"
2373
+ data-selector-id="box"
2374
+ data-test-id="dateTime_date"
2375
+ >
2376
+ 22
2377
+ </div>
2378
+ <div
2379
+ aria-label="23"
2380
+ class="d-flex-shrink-0 datesStr grid"
2381
+ data-id="dateTime_date"
2382
+ data-selector-id="box"
2383
+ data-test-id="dateTime_date"
2384
+ >
2385
+ 23
2386
+ </div>
2387
+ <div
2388
+ aria-label="24"
2389
+ class="d-flex-shrink-0 datesStr grid"
2390
+ data-id="dateTime_date"
2391
+ data-selector-id="box"
2392
+ data-test-id="dateTime_date"
2393
+ >
2394
+ 24
2395
+ </div>
2396
+ </div>
2397
+ <div
2398
+ class="d-flex d-flex-row dateRow"
2399
+ data-id="containerComponent"
2400
+ data-selector-id="container"
2401
+ data-test-id="containerComponent"
2402
+ >
2403
+ <div
2404
+ aria-label="25"
2405
+ class="d-flex-shrink-0 datesStr grid holiday"
2406
+ data-id="dateTime_date"
2407
+ data-selector-id="box"
2408
+ data-test-id="dateTime_date"
2409
+ >
2410
+ 25
2411
+ </div>
2412
+ <div
2413
+ aria-label="26"
2414
+ class="d-flex-shrink-0 datesStr grid"
2415
+ data-id="dateTime_date"
2416
+ data-selector-id="box"
2417
+ data-test-id="dateTime_date"
2418
+ >
2419
+ 26
2420
+ </div>
2421
+ <div
2422
+ aria-label="27"
2423
+ class="d-flex-shrink-0 datesStr grid"
2424
+ data-id="dateTime_date"
2425
+ data-selector-id="box"
2426
+ data-test-id="dateTime_date"
2427
+ >
2428
+ 27
2429
+ </div>
2430
+ <div
2431
+ aria-label="28"
2432
+ class="d-flex-shrink-0 datesStr grid"
2433
+ data-id="dateTime_date"
2434
+ data-selector-id="box"
2435
+ data-test-id="dateTime_date"
2436
+ >
2437
+ 28
2438
+ </div>
2439
+ <div
2440
+ aria-label="29"
2441
+ class="d-flex-shrink-0 datesStr grid"
2442
+ data-id="dateTime_date"
2443
+ data-selector-id="box"
2444
+ data-test-id="dateTime_date"
2445
+ >
2446
+ 29
2447
+ </div>
2448
+ <div
2449
+ aria-label="30"
2450
+ class="d-flex-shrink-0 datesStr grid"
2451
+ data-id="dateTime_date"
2452
+ data-selector-id="box"
2453
+ data-test-id="dateTime_date"
2454
+ >
2455
+ 30
2456
+ </div>
2457
+ <div
2458
+ aria-label="31"
2459
+ class="d-flex-shrink-0 datesStr grid"
2460
+ data-id="dateTime_date"
2461
+ data-selector-id="box"
2462
+ data-test-id="dateTime_date"
2463
+ >
2464
+ 31
2465
+ </div>
2466
+ </div>
2467
+ <div
2468
+ class="d-flex d-flex-row dateRow"
2469
+ data-id="containerComponent"
2470
+ data-selector-id="container"
2471
+ data-test-id="containerComponent"
2472
+ >
2473
+ <div
2474
+ aria-label="1"
2475
+ class="d-flex-shrink-0 invalidDate datesStr grid holiday"
2476
+ data-id="dateTime_invalidDate"
2477
+ data-selector-id="box"
2478
+ data-test-id="dateTime_invalidDate"
2479
+ >
2480
+ 1
2481
+ </div>
2482
+ <div
2483
+ aria-label="2"
2484
+ class="d-flex-shrink-0 invalidDate datesStr grid"
2485
+ data-id="dateTime_invalidDate"
2486
+ data-selector-id="box"
2487
+ data-test-id="dateTime_invalidDate"
2488
+ >
2489
+ 2
2490
+ </div>
2491
+ <div
2492
+ aria-label="3"
2493
+ class="d-flex-shrink-0 invalidDate datesStr grid"
2494
+ data-id="dateTime_invalidDate"
2495
+ data-selector-id="box"
2496
+ data-test-id="dateTime_invalidDate"
2497
+ >
2498
+ 3
2499
+ </div>
2500
+ <div
2501
+ aria-label="4"
2502
+ class="d-flex-shrink-0 invalidDate datesStr grid"
2503
+ data-id="dateTime_invalidDate"
2504
+ data-selector-id="box"
2505
+ data-test-id="dateTime_invalidDate"
2506
+ >
2507
+ 4
2508
+ </div>
2509
+ <div
2510
+ aria-label="5"
2511
+ class="d-flex-shrink-0 invalidDate datesStr grid"
2512
+ data-id="dateTime_invalidDate"
2513
+ data-selector-id="box"
2514
+ data-test-id="dateTime_invalidDate"
2515
+ >
2516
+ 5
2517
+ </div>
2518
+ <div
2519
+ aria-label="6"
2520
+ class="d-flex-shrink-0 invalidDate datesStr grid"
2521
+ data-id="dateTime_invalidDate"
2522
+ data-selector-id="box"
2523
+ data-test-id="dateTime_invalidDate"
2524
+ >
2525
+ 6
2526
+ </div>
2527
+ <div
2528
+ aria-label="7"
2529
+ class="d-flex-shrink-0 invalidDate datesStr grid"
2530
+ data-id="dateTime_invalidDate"
2531
+ data-selector-id="box"
2532
+ data-test-id="dateTime_invalidDate"
2533
+ >
2534
+ 7
2535
+ </div>
2536
+ </div>
2537
+ </div>
2538
+ <span
2539
+ class="text"
2540
+ >
2541
+ Time
2542
+ </span>
2543
+ <div
2544
+ class="d-flex d-flex-row d-items-center timesection"
2545
+ data-id="dateTime_timeContainer"
2546
+ data-selector-id="container"
2547
+ data-test-id="dateTime_timeContainer"
2548
+ >
2549
+ <div
2550
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 dropDownContainer"
2551
+ data-id="boxComponent"
2552
+ data-selector-id="box"
2553
+ data-test-id="boxComponent"
2554
+ >
2555
+ <div
2556
+ class="container box_small"
2557
+ data-selector-id="select"
2558
+ >
2559
+ <div
2560
+ class=""
2561
+ data-id="hourField"
2562
+ data-test-id="hourField"
2563
+ >
2564
+ <div
2565
+ class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
2566
+ data-selector-id="textBoxIcon"
2567
+ >
2568
+ <div
2569
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
2570
+ data-id="boxComponent"
2571
+ data-selector-id="box"
2572
+ data-test-id="boxComponent"
2573
+ >
2574
+ <input
2575
+ aria-activedescendant="12"
2576
+ aria-controls="1"
2577
+ aria-expanded="false"
2578
+ aria-haspopup="true"
2579
+ aria-label="click to select options"
2580
+ aria-owns="1"
2581
+ aria-readonly="true"
2582
+ autocomplete="off"
2583
+ class="pointer container xmedium primary effect borderColor_default inputDotted"
2584
+ data-id="hourField_textBox"
2585
+ data-selector-id="textBoxIcon"
2586
+ data-test-id="hourField_textBox"
2587
+ data-title="12"
2588
+ maxlength="2"
2589
+ placeholder=""
2590
+ readonly=""
2591
+ role="Menuitem"
2592
+ type="text"
2593
+ value="12"
2594
+ />
2595
+ </div>
2596
+ <div
2597
+ class="d-flex-shrink-0 iconContainer"
2598
+ data-id="boxComponent"
2599
+ data-selector-id="box"
2600
+ data-test-id="boxComponent"
2601
+ >
2602
+ <div
2603
+ class="d-flex d-h-full d-w-full d-flex-row"
2604
+ data-id="containerComponent"
2605
+ data-selector-id="container"
2606
+ data-test-id="containerComponent"
2607
+ >
2608
+ <div
2609
+ class="d-flex-shrink-0 icon"
2610
+ data-id="boxComponent"
2611
+ data-selector-id="box"
2612
+ data-test-id="boxComponent"
2613
+ >
2614
+ <div
2615
+ class="d-inline-flex d-flex-row d-items-center d-justify-center rightPlaceholder"
2616
+ data-id="containerComponent"
2617
+ data-selector-id="container"
2618
+ data-test-id="containerComponent"
2619
+ >
2620
+ <div
2621
+ aria-hidden="true"
2622
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center arrowIcon"
2623
+ data-id="hourField_downIcon"
2624
+ data-selector-id="container"
2625
+ data-test-id="hourField_downIcon"
2626
+ >
2627
+ <i
2628
+ aria-hidden="true"
2629
+ class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
2630
+ data-id="fontIcon"
2631
+ data-selector-id="fontIcon"
2632
+ data-test-id="fontIcon"
2633
+ style="--zd-iconfont-size: var(--zd_font_size7);"
2634
+ />
2635
+ </div>
2636
+ </div>
2637
+ </div>
2638
+ </div>
2639
+ </div>
2640
+ </div>
2641
+ </div>
2642
+ </div>
2643
+ </div>
2644
+ <div
2645
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 dropDownContainer"
2646
+ data-id="boxComponent"
2647
+ data-selector-id="box"
2648
+ data-test-id="boxComponent"
2649
+ >
2650
+ <div
2651
+ class="container box_small"
2652
+ data-selector-id="select"
2653
+ >
2654
+ <div
2655
+ class=""
2656
+ data-id="minuteField"
2657
+ data-test-id="minuteField"
2658
+ >
2659
+ <div
2660
+ class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
2661
+ data-selector-id="textBoxIcon"
2662
+ >
2663
+ <div
2664
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
2665
+ data-id="boxComponent"
2666
+ data-selector-id="box"
2667
+ data-test-id="boxComponent"
2668
+ >
2669
+ <input
2670
+ aria-activedescendant="00"
2671
+ aria-controls="3"
2672
+ aria-expanded="false"
2673
+ aria-haspopup="true"
2674
+ aria-label="click to select options"
2675
+ aria-owns="3"
2676
+ aria-readonly="true"
2677
+ autocomplete="off"
2678
+ class="pointer container xmedium primary effect borderColor_default inputDotted"
2679
+ data-id="minuteField_textBox"
2680
+ data-selector-id="textBoxIcon"
2681
+ data-test-id="minuteField_textBox"
2682
+ data-title="00"
2683
+ maxlength="2"
2684
+ placeholder=""
2685
+ readonly=""
2686
+ role="Menuitem"
2687
+ type="text"
2688
+ value="00"
2689
+ />
2690
+ </div>
2691
+ <div
2692
+ class="d-flex-shrink-0 iconContainer"
2693
+ data-id="boxComponent"
2694
+ data-selector-id="box"
2695
+ data-test-id="boxComponent"
2696
+ >
2697
+ <div
2698
+ class="d-flex d-h-full d-w-full d-flex-row"
2699
+ data-id="containerComponent"
2700
+ data-selector-id="container"
2701
+ data-test-id="containerComponent"
2702
+ >
2703
+ <div
2704
+ class="d-flex-shrink-0 icon"
2705
+ data-id="boxComponent"
2706
+ data-selector-id="box"
2707
+ data-test-id="boxComponent"
2708
+ >
2709
+ <div
2710
+ class="d-inline-flex d-flex-row d-items-center d-justify-center rightPlaceholder"
2711
+ data-id="containerComponent"
2712
+ data-selector-id="container"
2713
+ data-test-id="containerComponent"
2714
+ >
2715
+ <div
2716
+ aria-hidden="true"
2717
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center arrowIcon"
2718
+ data-id="minuteField_downIcon"
2719
+ data-selector-id="container"
2720
+ data-test-id="minuteField_downIcon"
2721
+ >
2722
+ <i
2723
+ aria-hidden="true"
2724
+ class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
2725
+ data-id="fontIcon"
2726
+ data-selector-id="fontIcon"
2727
+ data-test-id="fontIcon"
2728
+ style="--zd-iconfont-size: var(--zd_font_size7);"
2729
+ />
2730
+ </div>
2731
+ </div>
2732
+ </div>
2733
+ </div>
2734
+ </div>
2735
+ </div>
2736
+ </div>
2737
+ </div>
2738
+ </div>
2739
+ </div>
2740
+ <div
2741
+ class="d-flex d-flex-row d-items-center footer"
2742
+ data-id="containerComponent"
2743
+ data-selector-id="container"
2744
+ data-test-id="containerComponent"
2745
+ >
2746
+ <button
2747
+ class="bold primaryfilled medium"
2748
+ data-id="dateTime_saveBtn"
2749
+ data-selector-id="button"
2750
+ data-test-id="dateTime_saveBtn"
2751
+ type="button"
2752
+ >
2753
+ Set
2754
+ </button>
2755
+ <span
2756
+ class="space"
2757
+ />
2758
+ <button
2759
+ class="bold secondary medium"
2760
+ data-id="dateTime_clearBtn"
2761
+ data-selector-id="button"
2762
+ data-test-id="dateTime_clearBtn"
2763
+ type="button"
2764
+ >
2765
+ Clear
2766
+ </button>
2767
+ </div>
2768
+ </div>
2769
+ </div>
2770
+ </div>
2771
+ </DocumentFragment>
2772
+ `;
2773
+
2774
+ exports[`DateTime Render with isDefaultPosition and isDateTimeField=false 1`] = `
2775
+ <DocumentFragment>
2776
+ <div
2777
+ class="dropBox"
2778
+ data-id="dateTime_dateBoxContainer"
2779
+ data-test-id="dateTime_dateBoxContainer"
2780
+ >
2781
+ <div
2782
+ class="container"
2783
+ data-id="dateTime_Calendar"
2784
+ data-test-id="dateTime_Calendar"
2785
+ >
2786
+ <div
2787
+ class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center header"
2788
+ data-id="containerComponent"
2789
+ data-selector-id="container"
2790
+ data-test-id="containerComponent"
2791
+ >
2792
+ <div
2793
+ class="d-flex-shrink-0 dateText"
2794
+ data-id="selectYear"
2795
+ data-selector-id="box"
2796
+ data-test-id="selectYear"
2797
+ >
2798
+ <h2
2799
+ class="reset thMonYear"
2800
+ data-title="October 2026"
2801
+ tabindex="0"
2802
+ >
2803
+ October 2026
2804
+ </h2>
2805
+ <span>
2806
+ <i
2807
+ aria-hidden="true"
2808
+ class="zd_font_icons ff icon-dropdown basic d-inline-block d-align-middle downArrow"
2809
+ data-id="fontIcon"
2810
+ data-selector-id="fontIcon"
2811
+ data-test-id="fontIcon"
2812
+ style="--zd-iconfont-size: var(--zd_font_size12);"
2813
+ />
2814
+ </span>
2815
+ </div>
2816
+ <div
2817
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
2818
+ data-id="boxComponent"
2819
+ data-selector-id="box"
2820
+ data-test-id="boxComponent"
2821
+ />
2822
+ <div
2823
+ aria-label="prevMonth"
2824
+ class="d-flex-shrink-0 thArrow grid"
2825
+ data-id="prevMonth"
2826
+ data-selector-id="box"
2827
+ data-test-id="prevMonth"
2828
+ data-title="Prev month"
2829
+ tabindex="0"
2830
+ >
2831
+ <i
2832
+ aria-hidden="true"
2833
+ class="zd_font_icons ff icon-arrow-left3 basic d-inline-block d-align-middle rtl d-font-bold"
2834
+ data-id="fontIcon"
2835
+ data-selector-id="fontIcon"
2836
+ data-test-id="fontIcon"
2837
+ />
2838
+ </div>
2839
+ <div
2840
+ aria-label="nextMonth"
2841
+ class="d-flex-shrink-0 thArrow grid navigation"
2842
+ data-id="nextMonth"
2843
+ data-selector-id="box"
2844
+ data-test-id="nextMonth"
2845
+ data-title="Next month"
2846
+ tabindex="0"
2847
+ >
2848
+ <i
2849
+ aria-hidden="true"
2850
+ class="zd_font_icons ff icon-arrow-right3 basic d-inline-block d-align-middle rtl d-font-bold"
2851
+ data-id="fontIcon"
2852
+ data-selector-id="fontIcon"
2853
+ data-test-id="fontIcon"
2854
+ />
2855
+ </div>
2856
+ </div>
2857
+ <div
2858
+ class="subContainer"
2859
+ >
2860
+ <div
2861
+ class="d-flex d-h-full d-w-full d-flex-row days"
2862
+ data-id="containerComponent"
2863
+ data-selector-id="container"
2864
+ data-test-id="containerComponent"
2865
+ >
2866
+ <div
2867
+ aria-label="Sunday"
2868
+ class="d-flex-shrink-0 daysStr grid holiday"
2869
+ data-id="boxComponent"
2870
+ data-selector-id="box"
2871
+ data-test-id="boxComponent"
2872
+ data-title="Sunday"
2873
+ >
2874
+ S
2875
+ </div>
2876
+ <div
2877
+ aria-label="Monday"
2878
+ class="d-flex-shrink-0 daysStr grid"
2879
+ data-id="boxComponent"
2880
+ data-selector-id="box"
2881
+ data-test-id="boxComponent"
2882
+ data-title="Monday"
2883
+ >
2884
+ M
2885
+ </div>
2886
+ <div
2887
+ aria-label="Tuesday"
2888
+ class="d-flex-shrink-0 daysStr grid"
2889
+ data-id="boxComponent"
2890
+ data-selector-id="box"
2891
+ data-test-id="boxComponent"
2892
+ data-title="Tuesday"
2893
+ >
2894
+ T
2895
+ </div>
2896
+ <div
2897
+ aria-label="Wednesday"
2898
+ class="d-flex-shrink-0 daysStr grid"
2899
+ data-id="boxComponent"
2900
+ data-selector-id="box"
2901
+ data-test-id="boxComponent"
2902
+ data-title="Wednesday"
2903
+ >
2904
+ W
2905
+ </div>
2906
+ <div
2907
+ aria-label="Thursday"
2908
+ class="d-flex-shrink-0 daysStr grid"
2909
+ data-id="boxComponent"
2910
+ data-selector-id="box"
2911
+ data-test-id="boxComponent"
2912
+ data-title="Thursday"
2913
+ >
2914
+ T
2915
+ </div>
2916
+ <div
2917
+ aria-label="Friday"
2918
+ class="d-flex-shrink-0 daysStr grid"
2919
+ data-id="boxComponent"
2920
+ data-selector-id="box"
2921
+ data-test-id="boxComponent"
2922
+ data-title="Friday"
2923
+ >
2924
+ F
2925
+ </div>
2926
+ <div
2927
+ aria-label="Saturday"
2928
+ class="d-flex-shrink-0 daysStr grid"
2929
+ data-id="boxComponent"
2930
+ data-selector-id="box"
2931
+ data-test-id="boxComponent"
2932
+ data-title="Saturday"
2933
+ >
2934
+ S
2935
+ </div>
2936
+ </div>
2937
+ <div
2938
+ class="dateContainer separator"
2939
+ data-id="dateTime_dateContainer"
2940
+ data-test-id="dateTime_dateContainer"
2941
+ >
2942
+ <div
2943
+ class="d-flex d-flex-row dateRow"
2944
+ data-id="containerComponent"
2945
+ data-selector-id="container"
2946
+ data-test-id="containerComponent"
2947
+ >
2948
+ <div
2949
+ aria-label="27"
2950
+ class="d-flex-shrink-0 datesStr grid holiday invalidDate"
2951
+ data-id="dateTime_invalidDate"
2952
+ data-selector-id="box"
2953
+ data-test-id="dateTime_invalidDate"
2954
+ >
2955
+ 27
2956
+ </div>
2957
+ <div
2958
+ aria-label="28"
2959
+ class="d-flex-shrink-0 datesStr grid invalidDate"
2960
+ data-id="dateTime_invalidDate"
2961
+ data-selector-id="box"
2962
+ data-test-id="dateTime_invalidDate"
2963
+ >
2964
+ 28
2965
+ </div>
2966
+ <div
2967
+ aria-label="29"
2968
+ class="d-flex-shrink-0 datesStr grid invalidDate"
2969
+ data-id="dateTime_invalidDate"
2970
+ data-selector-id="box"
2971
+ data-test-id="dateTime_invalidDate"
2972
+ >
2973
+ 29
2974
+ </div>
2975
+ <div
2976
+ aria-label="30"
2977
+ class="d-flex-shrink-0 datesStr grid invalidDate"
2978
+ data-id="dateTime_invalidDate"
2979
+ data-selector-id="box"
2980
+ data-test-id="dateTime_invalidDate"
2981
+ >
2982
+ 30
2983
+ </div>
2984
+ <div
2985
+ aria-label="1"
2986
+ class="d-flex-shrink-0 datesStr grid"
2987
+ data-id="dateTime_date"
2988
+ data-selector-id="box"
2989
+ data-test-id="dateTime_date"
2990
+ >
2991
+ 1
2992
+ </div>
2993
+ <div
2994
+ aria-label="2"
2995
+ class="d-flex-shrink-0 datesStr grid"
2996
+ data-id="dateTime_date"
2997
+ data-selector-id="box"
2998
+ data-test-id="dateTime_date"
2999
+ >
3000
+ 2
3001
+ </div>
3002
+ <div
3003
+ aria-label="3"
3004
+ class="d-flex-shrink-0 datesStr grid"
3005
+ data-id="dateTime_date"
3006
+ data-selector-id="box"
3007
+ data-test-id="dateTime_date"
3008
+ >
3009
+ 3
3010
+ </div>
3011
+ </div>
3012
+ <div
3013
+ class="d-flex d-flex-row dateRow"
3014
+ data-id="containerComponent"
3015
+ data-selector-id="container"
3016
+ data-test-id="containerComponent"
3017
+ >
3018
+ <div
3019
+ aria-label="4"
3020
+ class="d-flex-shrink-0 datesStr grid holiday"
3021
+ data-id="dateTime_date"
3022
+ data-selector-id="box"
3023
+ data-test-id="dateTime_date"
3024
+ >
3025
+ 4
3026
+ </div>
3027
+ <div
3028
+ aria-label="5"
3029
+ class="d-flex-shrink-0 datesStr grid"
3030
+ data-id="dateTime_date"
3031
+ data-selector-id="box"
3032
+ data-test-id="dateTime_date"
3033
+ >
3034
+ 5
3035
+ </div>
3036
+ <div
3037
+ aria-label="6"
3038
+ class="d-flex-shrink-0 datesStr grid"
3039
+ data-id="dateTime_date"
3040
+ data-selector-id="box"
3041
+ data-test-id="dateTime_date"
3042
+ >
3043
+ 6
3044
+ </div>
3045
+ <div
3046
+ aria-label="7"
3047
+ class="d-flex-shrink-0 datesStr grid"
3048
+ data-id="dateTime_date"
3049
+ data-selector-id="box"
3050
+ data-test-id="dateTime_date"
3051
+ >
3052
+ 7
3053
+ </div>
3054
+ <div
3055
+ aria-label="8"
3056
+ class="d-flex-shrink-0 datesStr grid"
3057
+ data-id="dateTime_date"
3058
+ data-selector-id="box"
3059
+ data-test-id="dateTime_date"
3060
+ >
3061
+ 8
3062
+ </div>
3063
+ <div
3064
+ aria-label="9"
3065
+ class="d-flex-shrink-0 datesStr grid"
3066
+ data-id="dateTime_date"
3067
+ data-selector-id="box"
3068
+ data-test-id="dateTime_date"
3069
+ >
3070
+ 9
3071
+ </div>
3072
+ <div
3073
+ aria-label="10"
3074
+ class="d-flex-shrink-0 datesStr grid"
3075
+ data-id="dateTime_date"
3076
+ data-selector-id="box"
3077
+ data-test-id="dateTime_date"
3078
+ >
3079
+ 10
3080
+ </div>
3081
+ </div>
3082
+ <div
3083
+ class="d-flex d-flex-row dateRow"
3084
+ data-id="containerComponent"
3085
+ data-selector-id="container"
3086
+ data-test-id="containerComponent"
3087
+ >
3088
+ <div
3089
+ aria-label="11"
3090
+ class="d-flex-shrink-0 datesStr grid holiday"
3091
+ data-id="dateTime_date"
3092
+ data-selector-id="box"
3093
+ data-test-id="dateTime_date"
3094
+ >
3095
+ 11
3096
+ </div>
3097
+ <div
3098
+ aria-label="12"
3099
+ class="d-flex-shrink-0 datesStr grid"
3100
+ data-id="dateTime_date"
3101
+ data-selector-id="box"
3102
+ data-test-id="dateTime_date"
3103
+ >
3104
+ 12
3105
+ </div>
3106
+ <div
3107
+ aria-label="13"
3108
+ class="d-flex-shrink-0 datesStr grid"
3109
+ data-id="dateTime_date"
3110
+ data-selector-id="box"
3111
+ data-test-id="dateTime_date"
3112
+ >
3113
+ 13
3114
+ </div>
3115
+ <div
3116
+ aria-label="14"
3117
+ class="d-flex-shrink-0 datesStr grid"
3118
+ data-id="dateTime_date"
3119
+ data-selector-id="box"
3120
+ data-test-id="dateTime_date"
3121
+ >
3122
+ 14
3123
+ </div>
3124
+ <div
3125
+ aria-label="15"
3126
+ class="d-flex-shrink-0 datesStr grid"
3127
+ data-id="dateTime_date"
3128
+ data-selector-id="box"
3129
+ data-test-id="dateTime_date"
3130
+ >
3131
+ 15
3132
+ </div>
3133
+ <div
3134
+ aria-label="16"
3135
+ class="d-flex-shrink-0 datesStr grid"
3136
+ data-id="dateTime_date"
3137
+ data-selector-id="box"
3138
+ data-test-id="dateTime_date"
3139
+ >
3140
+ 16
3141
+ </div>
3142
+ <div
3143
+ aria-label="17"
3144
+ class="d-flex-shrink-0 datesStr grid"
3145
+ data-id="dateTime_date"
3146
+ data-selector-id="box"
3147
+ data-test-id="dateTime_date"
3148
+ >
3149
+ 17
3150
+ </div>
3151
+ </div>
3152
+ <div
3153
+ class="d-flex d-flex-row dateRow"
3154
+ data-id="containerComponent"
3155
+ data-selector-id="container"
3156
+ data-test-id="containerComponent"
3157
+ >
3158
+ <div
3159
+ aria-label="18"
3160
+ class="d-flex-shrink-0 datesStr grid holiday"
3161
+ data-id="dateTime_date"
3162
+ data-selector-id="box"
3163
+ data-test-id="dateTime_date"
3164
+ >
3165
+ 18
3166
+ </div>
3167
+ <div
3168
+ aria-label="19"
3169
+ class="d-flex-shrink-0 active datesStr grid"
3170
+ data-id="dateTime_dateSelected"
3171
+ data-selector-id="box"
3172
+ data-test-id="dateTime_dateSelected"
3173
+ >
3174
+ 19
3175
+ </div>
3176
+ <div
3177
+ aria-label="20"
3178
+ class="d-flex-shrink-0 datesStr grid"
3179
+ data-id="dateTime_date"
3180
+ data-selector-id="box"
3181
+ data-test-id="dateTime_date"
3182
+ >
3183
+ 20
3184
+ </div>
3185
+ <div
3186
+ aria-label="21"
3187
+ class="d-flex-shrink-0 datesStr grid"
3188
+ data-id="dateTime_date"
3189
+ data-selector-id="box"
3190
+ data-test-id="dateTime_date"
3191
+ >
3192
+ 21
3193
+ </div>
3194
+ <div
3195
+ aria-label="22"
3196
+ class="d-flex-shrink-0 datesStr grid"
3197
+ data-id="dateTime_date"
3198
+ data-selector-id="box"
3199
+ data-test-id="dateTime_date"
3200
+ >
3201
+ 22
3202
+ </div>
3203
+ <div
3204
+ aria-label="23"
3205
+ class="d-flex-shrink-0 datesStr grid"
3206
+ data-id="dateTime_date"
3207
+ data-selector-id="box"
3208
+ data-test-id="dateTime_date"
3209
+ >
3210
+ 23
3211
+ </div>
3212
+ <div
3213
+ aria-label="24"
3214
+ class="d-flex-shrink-0 datesStr grid"
3215
+ data-id="dateTime_date"
3216
+ data-selector-id="box"
3217
+ data-test-id="dateTime_date"
3218
+ >
3219
+ 24
3220
+ </div>
3221
+ </div>
3222
+ <div
3223
+ class="d-flex d-flex-row dateRow"
3224
+ data-id="containerComponent"
3225
+ data-selector-id="container"
3226
+ data-test-id="containerComponent"
3227
+ >
3228
+ <div
3229
+ aria-label="25"
3230
+ class="d-flex-shrink-0 datesStr grid holiday"
3231
+ data-id="dateTime_date"
3232
+ data-selector-id="box"
3233
+ data-test-id="dateTime_date"
3234
+ >
3235
+ 25
3236
+ </div>
3237
+ <div
3238
+ aria-label="26"
3239
+ class="d-flex-shrink-0 datesStr grid"
3240
+ data-id="dateTime_date"
3241
+ data-selector-id="box"
3242
+ data-test-id="dateTime_date"
3243
+ >
3244
+ 26
3245
+ </div>
3246
+ <div
3247
+ aria-label="27"
3248
+ class="d-flex-shrink-0 datesStr grid"
3249
+ data-id="dateTime_date"
3250
+ data-selector-id="box"
3251
+ data-test-id="dateTime_date"
3252
+ >
3253
+ 27
3254
+ </div>
3255
+ <div
3256
+ aria-label="28"
3257
+ class="d-flex-shrink-0 datesStr grid"
3258
+ data-id="dateTime_date"
3259
+ data-selector-id="box"
3260
+ data-test-id="dateTime_date"
3261
+ >
3262
+ 28
3263
+ </div>
3264
+ <div
3265
+ aria-label="29"
3266
+ class="d-flex-shrink-0 datesStr grid"
3267
+ data-id="dateTime_date"
3268
+ data-selector-id="box"
3269
+ data-test-id="dateTime_date"
3270
+ >
3271
+ 29
3272
+ </div>
3273
+ <div
3274
+ aria-label="30"
3275
+ class="d-flex-shrink-0 datesStr grid"
3276
+ data-id="dateTime_date"
3277
+ data-selector-id="box"
3278
+ data-test-id="dateTime_date"
3279
+ >
3280
+ 30
3281
+ </div>
3282
+ <div
3283
+ aria-label="31"
3284
+ class="d-flex-shrink-0 datesStr grid"
3285
+ data-id="dateTime_date"
3286
+ data-selector-id="box"
3287
+ data-test-id="dateTime_date"
3288
+ >
3289
+ 31
3290
+ </div>
3291
+ </div>
3292
+ <div
3293
+ class="d-flex d-flex-row dateRow"
3294
+ data-id="containerComponent"
3295
+ data-selector-id="container"
3296
+ data-test-id="containerComponent"
3297
+ >
3298
+ <div
3299
+ aria-label="1"
3300
+ class="d-flex-shrink-0 invalidDate datesStr grid holiday"
3301
+ data-id="dateTime_invalidDate"
3302
+ data-selector-id="box"
3303
+ data-test-id="dateTime_invalidDate"
3304
+ >
3305
+ 1
3306
+ </div>
3307
+ <div
3308
+ aria-label="2"
3309
+ class="d-flex-shrink-0 invalidDate datesStr grid"
3310
+ data-id="dateTime_invalidDate"
3311
+ data-selector-id="box"
3312
+ data-test-id="dateTime_invalidDate"
3313
+ >
3314
+ 2
3315
+ </div>
3316
+ <div
3317
+ aria-label="3"
3318
+ class="d-flex-shrink-0 invalidDate datesStr grid"
3319
+ data-id="dateTime_invalidDate"
3320
+ data-selector-id="box"
3321
+ data-test-id="dateTime_invalidDate"
3322
+ >
3323
+ 3
3324
+ </div>
3325
+ <div
3326
+ aria-label="4"
3327
+ class="d-flex-shrink-0 invalidDate datesStr grid"
3328
+ data-id="dateTime_invalidDate"
3329
+ data-selector-id="box"
3330
+ data-test-id="dateTime_invalidDate"
3331
+ >
3332
+ 4
3333
+ </div>
3334
+ <div
3335
+ aria-label="5"
3336
+ class="d-flex-shrink-0 invalidDate datesStr grid"
3337
+ data-id="dateTime_invalidDate"
3338
+ data-selector-id="box"
3339
+ data-test-id="dateTime_invalidDate"
3340
+ >
3341
+ 5
3342
+ </div>
3343
+ <div
3344
+ aria-label="6"
3345
+ class="d-flex-shrink-0 invalidDate datesStr grid"
3346
+ data-id="dateTime_invalidDate"
3347
+ data-selector-id="box"
3348
+ data-test-id="dateTime_invalidDate"
3349
+ >
3350
+ 6
3351
+ </div>
3352
+ <div
3353
+ aria-label="7"
3354
+ class="d-flex-shrink-0 invalidDate datesStr grid"
3355
+ data-id="dateTime_invalidDate"
3356
+ data-selector-id="box"
3357
+ data-test-id="dateTime_invalidDate"
3358
+ >
3359
+ 7
3360
+ </div>
3361
+ </div>
3362
+ </div>
3363
+ <div
3364
+ class="d-flex d-flex-row d-items-center footer"
3365
+ data-id="containerComponent"
3366
+ data-selector-id="container"
3367
+ data-test-id="containerComponent"
3368
+ >
3369
+ <button
3370
+ class="bold primaryfilled medium"
3371
+ data-id="dateTime_saveBtn"
3372
+ data-selector-id="button"
3373
+ data-test-id="dateTime_saveBtn"
3374
+ type="button"
3375
+ >
3376
+ Set
3377
+ </button>
3378
+ <span
3379
+ class="space"
3380
+ />
3381
+ <button
3382
+ class="bold secondary medium"
3383
+ data-id="dateTime_clearBtn"
3384
+ data-selector-id="button"
3385
+ data-test-id="dateTime_clearBtn"
3386
+ type="button"
3387
+ >
3388
+ Clear
3389
+ </button>
3390
+ </div>
3391
+ </div>
3392
+ </div>
3393
+ </div>
3394
+ </DocumentFragment>
3395
+ `;
3396
+
3397
+ exports[`DateTime Render with isDefaultPosition and needAction=false 1`] = `
3398
+ <DocumentFragment>
3399
+ <div
3400
+ class="dropBox"
3401
+ data-id="dateTime_dateBoxContainer"
3402
+ data-test-id="dateTime_dateBoxContainer"
3403
+ >
3404
+ <div
3405
+ class="container"
3406
+ data-id="dateTime_Calendar"
3407
+ data-test-id="dateTime_Calendar"
3408
+ >
3409
+ <div
3410
+ class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center header"
3411
+ data-id="containerComponent"
3412
+ data-selector-id="container"
3413
+ data-test-id="containerComponent"
3414
+ >
3415
+ <div
3416
+ class="d-flex-shrink-0 dateText"
3417
+ data-id="selectYear"
3418
+ data-selector-id="box"
3419
+ data-test-id="selectYear"
3420
+ >
3421
+ <h2
3422
+ class="reset thMonYear"
3423
+ data-title="October 2026"
3424
+ tabindex="0"
3425
+ >
3426
+ October 2026
3427
+ </h2>
3428
+ <span>
3429
+ <i
3430
+ aria-hidden="true"
3431
+ class="zd_font_icons ff icon-dropdown basic d-inline-block d-align-middle downArrow"
3432
+ data-id="fontIcon"
3433
+ data-selector-id="fontIcon"
3434
+ data-test-id="fontIcon"
3435
+ style="--zd-iconfont-size: var(--zd_font_size12);"
3436
+ />
3437
+ </span>
3438
+ </div>
3439
+ <div
3440
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
3441
+ data-id="boxComponent"
3442
+ data-selector-id="box"
3443
+ data-test-id="boxComponent"
3444
+ />
3445
+ <div
3446
+ aria-label="prevMonth"
3447
+ class="d-flex-shrink-0 thArrow grid"
3448
+ data-id="prevMonth"
3449
+ data-selector-id="box"
3450
+ data-test-id="prevMonth"
3451
+ data-title="Prev month"
3452
+ tabindex="0"
3453
+ >
3454
+ <i
3455
+ aria-hidden="true"
3456
+ class="zd_font_icons ff icon-arrow-left3 basic d-inline-block d-align-middle rtl d-font-bold"
3457
+ data-id="fontIcon"
3458
+ data-selector-id="fontIcon"
3459
+ data-test-id="fontIcon"
3460
+ />
3461
+ </div>
3462
+ <div
3463
+ aria-label="nextMonth"
3464
+ class="d-flex-shrink-0 thArrow grid navigation"
3465
+ data-id="nextMonth"
3466
+ data-selector-id="box"
3467
+ data-test-id="nextMonth"
3468
+ data-title="Next month"
3469
+ tabindex="0"
3470
+ >
3471
+ <i
3472
+ aria-hidden="true"
3473
+ class="zd_font_icons ff icon-arrow-right3 basic d-inline-block d-align-middle rtl d-font-bold"
3474
+ data-id="fontIcon"
3475
+ data-selector-id="fontIcon"
3476
+ data-test-id="fontIcon"
3477
+ />
3478
+ </div>
3479
+ </div>
3480
+ <div
3481
+ class="subContainer"
3482
+ >
3483
+ <div
3484
+ class="d-flex d-h-full d-w-full d-flex-row days"
3485
+ data-id="containerComponent"
3486
+ data-selector-id="container"
3487
+ data-test-id="containerComponent"
3488
+ >
3489
+ <div
3490
+ aria-label="Sunday"
3491
+ class="d-flex-shrink-0 daysStr grid holiday"
3492
+ data-id="boxComponent"
3493
+ data-selector-id="box"
3494
+ data-test-id="boxComponent"
3495
+ data-title="Sunday"
3496
+ >
3497
+ S
3498
+ </div>
3499
+ <div
3500
+ aria-label="Monday"
3501
+ class="d-flex-shrink-0 daysStr grid"
3502
+ data-id="boxComponent"
3503
+ data-selector-id="box"
3504
+ data-test-id="boxComponent"
3505
+ data-title="Monday"
3506
+ >
3507
+ M
3508
+ </div>
3509
+ <div
3510
+ aria-label="Tuesday"
3511
+ class="d-flex-shrink-0 daysStr grid"
3512
+ data-id="boxComponent"
3513
+ data-selector-id="box"
3514
+ data-test-id="boxComponent"
3515
+ data-title="Tuesday"
3516
+ >
3517
+ T
3518
+ </div>
3519
+ <div
3520
+ aria-label="Wednesday"
3521
+ class="d-flex-shrink-0 daysStr grid"
3522
+ data-id="boxComponent"
3523
+ data-selector-id="box"
3524
+ data-test-id="boxComponent"
3525
+ data-title="Wednesday"
3526
+ >
3527
+ W
3528
+ </div>
3529
+ <div
3530
+ aria-label="Thursday"
3531
+ class="d-flex-shrink-0 daysStr grid"
3532
+ data-id="boxComponent"
3533
+ data-selector-id="box"
3534
+ data-test-id="boxComponent"
3535
+ data-title="Thursday"
3536
+ >
3537
+ T
3538
+ </div>
3539
+ <div
3540
+ aria-label="Friday"
3541
+ class="d-flex-shrink-0 daysStr grid"
3542
+ data-id="boxComponent"
3543
+ data-selector-id="box"
3544
+ data-test-id="boxComponent"
3545
+ data-title="Friday"
3546
+ >
3547
+ F
3548
+ </div>
3549
+ <div
3550
+ aria-label="Saturday"
3551
+ class="d-flex-shrink-0 daysStr grid"
3552
+ data-id="boxComponent"
3553
+ data-selector-id="box"
3554
+ data-test-id="boxComponent"
3555
+ data-title="Saturday"
3556
+ >
3557
+ S
3558
+ </div>
3559
+ </div>
3560
+ <div
3561
+ class="dateContainer separator"
3562
+ data-id="dateTime_dateContainer"
3563
+ data-test-id="dateTime_dateContainer"
3564
+ >
3565
+ <div
3566
+ class="d-flex d-flex-row dateRow"
3567
+ data-id="containerComponent"
3568
+ data-selector-id="container"
3569
+ data-test-id="containerComponent"
3570
+ >
3571
+ <div
3572
+ aria-label="27"
3573
+ class="d-flex-shrink-0 datesStr grid holiday invalidDate"
3574
+ data-id="dateTime_invalidDate"
3575
+ data-selector-id="box"
3576
+ data-test-id="dateTime_invalidDate"
3577
+ >
3578
+ 27
3579
+ </div>
3580
+ <div
3581
+ aria-label="28"
3582
+ class="d-flex-shrink-0 datesStr grid invalidDate"
3583
+ data-id="dateTime_invalidDate"
3584
+ data-selector-id="box"
3585
+ data-test-id="dateTime_invalidDate"
3586
+ >
3587
+ 28
3588
+ </div>
3589
+ <div
3590
+ aria-label="29"
3591
+ class="d-flex-shrink-0 datesStr grid invalidDate"
3592
+ data-id="dateTime_invalidDate"
3593
+ data-selector-id="box"
3594
+ data-test-id="dateTime_invalidDate"
3595
+ >
3596
+ 29
3597
+ </div>
3598
+ <div
3599
+ aria-label="30"
3600
+ class="d-flex-shrink-0 datesStr grid invalidDate"
3601
+ data-id="dateTime_invalidDate"
3602
+ data-selector-id="box"
3603
+ data-test-id="dateTime_invalidDate"
3604
+ >
3605
+ 30
3606
+ </div>
3607
+ <div
3608
+ aria-label="1"
3609
+ class="d-flex-shrink-0 datesStr grid"
3610
+ data-id="dateTime_date"
3611
+ data-selector-id="box"
3612
+ data-test-id="dateTime_date"
3613
+ >
3614
+ 1
3615
+ </div>
3616
+ <div
3617
+ aria-label="2"
3618
+ class="d-flex-shrink-0 datesStr grid"
3619
+ data-id="dateTime_date"
3620
+ data-selector-id="box"
3621
+ data-test-id="dateTime_date"
3622
+ >
3623
+ 2
3624
+ </div>
3625
+ <div
3626
+ aria-label="3"
3627
+ class="d-flex-shrink-0 datesStr grid"
3628
+ data-id="dateTime_date"
3629
+ data-selector-id="box"
3630
+ data-test-id="dateTime_date"
3631
+ >
3632
+ 3
3633
+ </div>
3634
+ </div>
3635
+ <div
3636
+ class="d-flex d-flex-row dateRow"
3637
+ data-id="containerComponent"
3638
+ data-selector-id="container"
3639
+ data-test-id="containerComponent"
3640
+ >
3641
+ <div
3642
+ aria-label="4"
3643
+ class="d-flex-shrink-0 datesStr grid holiday"
3644
+ data-id="dateTime_date"
3645
+ data-selector-id="box"
3646
+ data-test-id="dateTime_date"
3647
+ >
3648
+ 4
3649
+ </div>
3650
+ <div
3651
+ aria-label="5"
3652
+ class="d-flex-shrink-0 datesStr grid"
3653
+ data-id="dateTime_date"
3654
+ data-selector-id="box"
3655
+ data-test-id="dateTime_date"
3656
+ >
3657
+ 5
3658
+ </div>
3659
+ <div
3660
+ aria-label="6"
3661
+ class="d-flex-shrink-0 datesStr grid"
3662
+ data-id="dateTime_date"
3663
+ data-selector-id="box"
3664
+ data-test-id="dateTime_date"
3665
+ >
3666
+ 6
3667
+ </div>
3668
+ <div
3669
+ aria-label="7"
3670
+ class="d-flex-shrink-0 datesStr grid"
3671
+ data-id="dateTime_date"
3672
+ data-selector-id="box"
3673
+ data-test-id="dateTime_date"
3674
+ >
3675
+ 7
3676
+ </div>
3677
+ <div
3678
+ aria-label="8"
3679
+ class="d-flex-shrink-0 datesStr grid"
3680
+ data-id="dateTime_date"
3681
+ data-selector-id="box"
3682
+ data-test-id="dateTime_date"
3683
+ >
3684
+ 8
3685
+ </div>
3686
+ <div
3687
+ aria-label="9"
3688
+ class="d-flex-shrink-0 datesStr grid"
3689
+ data-id="dateTime_date"
3690
+ data-selector-id="box"
3691
+ data-test-id="dateTime_date"
3692
+ >
3693
+ 9
3694
+ </div>
3695
+ <div
3696
+ aria-label="10"
3697
+ class="d-flex-shrink-0 datesStr grid"
3698
+ data-id="dateTime_date"
3699
+ data-selector-id="box"
3700
+ data-test-id="dateTime_date"
3701
+ >
3702
+ 10
3703
+ </div>
3704
+ </div>
3705
+ <div
3706
+ class="d-flex d-flex-row dateRow"
3707
+ data-id="containerComponent"
3708
+ data-selector-id="container"
3709
+ data-test-id="containerComponent"
3710
+ >
3711
+ <div
3712
+ aria-label="11"
3713
+ class="d-flex-shrink-0 datesStr grid holiday"
3714
+ data-id="dateTime_date"
3715
+ data-selector-id="box"
3716
+ data-test-id="dateTime_date"
3717
+ >
3718
+ 11
3719
+ </div>
3720
+ <div
3721
+ aria-label="12"
3722
+ class="d-flex-shrink-0 datesStr grid"
3723
+ data-id="dateTime_date"
3724
+ data-selector-id="box"
3725
+ data-test-id="dateTime_date"
3726
+ >
3727
+ 12
3728
+ </div>
3729
+ <div
3730
+ aria-label="13"
3731
+ class="d-flex-shrink-0 datesStr grid"
3732
+ data-id="dateTime_date"
3733
+ data-selector-id="box"
3734
+ data-test-id="dateTime_date"
3735
+ >
3736
+ 13
3737
+ </div>
3738
+ <div
3739
+ aria-label="14"
3740
+ class="d-flex-shrink-0 datesStr grid"
3741
+ data-id="dateTime_date"
3742
+ data-selector-id="box"
3743
+ data-test-id="dateTime_date"
3744
+ >
3745
+ 14
3746
+ </div>
3747
+ <div
3748
+ aria-label="15"
3749
+ class="d-flex-shrink-0 datesStr grid"
3750
+ data-id="dateTime_date"
3751
+ data-selector-id="box"
3752
+ data-test-id="dateTime_date"
3753
+ >
3754
+ 15
3755
+ </div>
3756
+ <div
3757
+ aria-label="16"
3758
+ class="d-flex-shrink-0 datesStr grid"
3759
+ data-id="dateTime_date"
3760
+ data-selector-id="box"
3761
+ data-test-id="dateTime_date"
3762
+ >
3763
+ 16
3764
+ </div>
3765
+ <div
3766
+ aria-label="17"
3767
+ class="d-flex-shrink-0 datesStr grid"
3768
+ data-id="dateTime_date"
3769
+ data-selector-id="box"
3770
+ data-test-id="dateTime_date"
3771
+ >
3772
+ 17
3773
+ </div>
3774
+ </div>
3775
+ <div
3776
+ class="d-flex d-flex-row dateRow"
3777
+ data-id="containerComponent"
3778
+ data-selector-id="container"
3779
+ data-test-id="containerComponent"
3780
+ >
3781
+ <div
3782
+ aria-label="18"
3783
+ class="d-flex-shrink-0 datesStr grid holiday"
3784
+ data-id="dateTime_date"
3785
+ data-selector-id="box"
3786
+ data-test-id="dateTime_date"
3787
+ >
3788
+ 18
3789
+ </div>
3790
+ <div
3791
+ aria-label="19"
3792
+ class="d-flex-shrink-0 active datesStr grid"
3793
+ data-id="dateTime_dateSelected"
3794
+ data-selector-id="box"
3795
+ data-test-id="dateTime_dateSelected"
3796
+ >
3797
+ 19
3798
+ </div>
3799
+ <div
3800
+ aria-label="20"
3801
+ class="d-flex-shrink-0 datesStr grid"
3802
+ data-id="dateTime_date"
3803
+ data-selector-id="box"
3804
+ data-test-id="dateTime_date"
3805
+ >
3806
+ 20
3807
+ </div>
3808
+ <div
3809
+ aria-label="21"
3810
+ class="d-flex-shrink-0 datesStr grid"
3811
+ data-id="dateTime_date"
3812
+ data-selector-id="box"
3813
+ data-test-id="dateTime_date"
3814
+ >
3815
+ 21
3816
+ </div>
3817
+ <div
3818
+ aria-label="22"
3819
+ class="d-flex-shrink-0 datesStr grid"
3820
+ data-id="dateTime_date"
3821
+ data-selector-id="box"
3822
+ data-test-id="dateTime_date"
3823
+ >
3824
+ 22
3825
+ </div>
3826
+ <div
3827
+ aria-label="23"
3828
+ class="d-flex-shrink-0 datesStr grid"
3829
+ data-id="dateTime_date"
3830
+ data-selector-id="box"
3831
+ data-test-id="dateTime_date"
3832
+ >
3833
+ 23
3834
+ </div>
3835
+ <div
3836
+ aria-label="24"
3837
+ class="d-flex-shrink-0 datesStr grid"
3838
+ data-id="dateTime_date"
3839
+ data-selector-id="box"
3840
+ data-test-id="dateTime_date"
3841
+ >
3842
+ 24
3843
+ </div>
3844
+ </div>
3845
+ <div
3846
+ class="d-flex d-flex-row dateRow"
3847
+ data-id="containerComponent"
3848
+ data-selector-id="container"
3849
+ data-test-id="containerComponent"
3850
+ >
3851
+ <div
3852
+ aria-label="25"
3853
+ class="d-flex-shrink-0 datesStr grid holiday"
3854
+ data-id="dateTime_date"
3855
+ data-selector-id="box"
3856
+ data-test-id="dateTime_date"
3857
+ >
3858
+ 25
3859
+ </div>
3860
+ <div
3861
+ aria-label="26"
3862
+ class="d-flex-shrink-0 datesStr grid"
3863
+ data-id="dateTime_date"
3864
+ data-selector-id="box"
3865
+ data-test-id="dateTime_date"
3866
+ >
3867
+ 26
3868
+ </div>
3869
+ <div
3870
+ aria-label="27"
3871
+ class="d-flex-shrink-0 datesStr grid"
3872
+ data-id="dateTime_date"
3873
+ data-selector-id="box"
3874
+ data-test-id="dateTime_date"
3875
+ >
3876
+ 27
3877
+ </div>
3878
+ <div
3879
+ aria-label="28"
3880
+ class="d-flex-shrink-0 datesStr grid"
3881
+ data-id="dateTime_date"
3882
+ data-selector-id="box"
3883
+ data-test-id="dateTime_date"
3884
+ >
3885
+ 28
3886
+ </div>
3887
+ <div
3888
+ aria-label="29"
3889
+ class="d-flex-shrink-0 datesStr grid"
3890
+ data-id="dateTime_date"
3891
+ data-selector-id="box"
3892
+ data-test-id="dateTime_date"
3893
+ >
3894
+ 29
3895
+ </div>
3896
+ <div
3897
+ aria-label="30"
3898
+ class="d-flex-shrink-0 datesStr grid"
3899
+ data-id="dateTime_date"
3900
+ data-selector-id="box"
3901
+ data-test-id="dateTime_date"
3902
+ >
3903
+ 30
3904
+ </div>
3905
+ <div
3906
+ aria-label="31"
3907
+ class="d-flex-shrink-0 datesStr grid"
3908
+ data-id="dateTime_date"
3909
+ data-selector-id="box"
3910
+ data-test-id="dateTime_date"
3911
+ >
3912
+ 31
3913
+ </div>
3914
+ </div>
3915
+ <div
3916
+ class="d-flex d-flex-row dateRow"
3917
+ data-id="containerComponent"
3918
+ data-selector-id="container"
3919
+ data-test-id="containerComponent"
3920
+ >
3921
+ <div
3922
+ aria-label="1"
3923
+ class="d-flex-shrink-0 invalidDate datesStr grid holiday"
3924
+ data-id="dateTime_invalidDate"
3925
+ data-selector-id="box"
3926
+ data-test-id="dateTime_invalidDate"
3927
+ >
3928
+ 1
3929
+ </div>
3930
+ <div
3931
+ aria-label="2"
3932
+ class="d-flex-shrink-0 invalidDate datesStr grid"
3933
+ data-id="dateTime_invalidDate"
3934
+ data-selector-id="box"
3935
+ data-test-id="dateTime_invalidDate"
3936
+ >
3937
+ 2
3938
+ </div>
3939
+ <div
3940
+ aria-label="3"
3941
+ class="d-flex-shrink-0 invalidDate datesStr grid"
3942
+ data-id="dateTime_invalidDate"
3943
+ data-selector-id="box"
3944
+ data-test-id="dateTime_invalidDate"
3945
+ >
3946
+ 3
3947
+ </div>
3948
+ <div
3949
+ aria-label="4"
3950
+ class="d-flex-shrink-0 invalidDate datesStr grid"
3951
+ data-id="dateTime_invalidDate"
3952
+ data-selector-id="box"
3953
+ data-test-id="dateTime_invalidDate"
3954
+ >
3955
+ 4
3956
+ </div>
3957
+ <div
3958
+ aria-label="5"
3959
+ class="d-flex-shrink-0 invalidDate datesStr grid"
3960
+ data-id="dateTime_invalidDate"
3961
+ data-selector-id="box"
3962
+ data-test-id="dateTime_invalidDate"
3963
+ >
3964
+ 5
3965
+ </div>
3966
+ <div
3967
+ aria-label="6"
3968
+ class="d-flex-shrink-0 invalidDate datesStr grid"
3969
+ data-id="dateTime_invalidDate"
3970
+ data-selector-id="box"
3971
+ data-test-id="dateTime_invalidDate"
3972
+ >
3973
+ 6
3974
+ </div>
3975
+ <div
3976
+ aria-label="7"
3977
+ class="d-flex-shrink-0 invalidDate datesStr grid"
3978
+ data-id="dateTime_invalidDate"
3979
+ data-selector-id="box"
3980
+ data-test-id="dateTime_invalidDate"
3981
+ >
3982
+ 7
3983
+ </div>
3984
+ </div>
3985
+ </div>
3986
+ <span
3987
+ class="text"
3988
+ >
3989
+ Time
3990
+ </span>
3991
+ <div
3992
+ class="d-flex d-flex-row d-items-center timesection"
3993
+ data-id="dateTime_timeContainer"
3994
+ data-selector-id="container"
3995
+ data-test-id="dateTime_timeContainer"
3996
+ >
3997
+ <div
3998
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 dropDownContainer"
3999
+ data-id="boxComponent"
4000
+ data-selector-id="box"
4001
+ data-test-id="boxComponent"
4002
+ >
4003
+ <div
4004
+ class="container box_small"
4005
+ data-selector-id="select"
4006
+ >
4007
+ <div
4008
+ class=""
4009
+ data-id="hourField"
4010
+ data-test-id="hourField"
4011
+ >
4012
+ <div
4013
+ class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
4014
+ data-selector-id="textBoxIcon"
4015
+ >
4016
+ <div
4017
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
4018
+ data-id="boxComponent"
4019
+ data-selector-id="box"
4020
+ data-test-id="boxComponent"
4021
+ >
4022
+ <input
4023
+ aria-activedescendant="12"
4024
+ aria-controls="1"
4025
+ aria-expanded="false"
4026
+ aria-haspopup="true"
4027
+ aria-label="click to select options"
4028
+ aria-owns="1"
4029
+ aria-readonly="true"
4030
+ autocomplete="off"
4031
+ class="pointer container xmedium primary effect borderColor_default inputDotted"
4032
+ data-id="hourField_textBox"
4033
+ data-selector-id="textBoxIcon"
4034
+ data-test-id="hourField_textBox"
4035
+ data-title="12"
4036
+ maxlength="2"
4037
+ placeholder=""
4038
+ readonly=""
4039
+ role="Menuitem"
4040
+ type="text"
4041
+ value="12"
4042
+ />
4043
+ </div>
4044
+ <div
4045
+ class="d-flex-shrink-0 iconContainer"
4046
+ data-id="boxComponent"
4047
+ data-selector-id="box"
4048
+ data-test-id="boxComponent"
4049
+ >
4050
+ <div
4051
+ class="d-flex d-h-full d-w-full d-flex-row"
4052
+ data-id="containerComponent"
4053
+ data-selector-id="container"
4054
+ data-test-id="containerComponent"
4055
+ >
4056
+ <div
4057
+ class="d-flex-shrink-0 icon"
4058
+ data-id="boxComponent"
4059
+ data-selector-id="box"
4060
+ data-test-id="boxComponent"
4061
+ >
4062
+ <div
4063
+ class="d-inline-flex d-flex-row d-items-center d-justify-center rightPlaceholder"
4064
+ data-id="containerComponent"
4065
+ data-selector-id="container"
4066
+ data-test-id="containerComponent"
4067
+ >
4068
+ <div
4069
+ aria-hidden="true"
4070
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center arrowIcon"
4071
+ data-id="hourField_downIcon"
4072
+ data-selector-id="container"
4073
+ data-test-id="hourField_downIcon"
4074
+ >
4075
+ <i
4076
+ aria-hidden="true"
4077
+ class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
4078
+ data-id="fontIcon"
4079
+ data-selector-id="fontIcon"
4080
+ data-test-id="fontIcon"
4081
+ style="--zd-iconfont-size: var(--zd_font_size7);"
4082
+ />
4083
+ </div>
4084
+ </div>
4085
+ </div>
4086
+ </div>
4087
+ </div>
4088
+ </div>
4089
+ </div>
4090
+ </div>
4091
+ </div>
4092
+ <div
4093
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 dropDownContainer"
4094
+ data-id="boxComponent"
4095
+ data-selector-id="box"
4096
+ data-test-id="boxComponent"
4097
+ >
4098
+ <div
4099
+ class="container box_small"
4100
+ data-selector-id="select"
4101
+ >
4102
+ <div
4103
+ class=""
4104
+ data-id="minuteField"
4105
+ data-test-id="minuteField"
4106
+ >
4107
+ <div
4108
+ class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
4109
+ data-selector-id="textBoxIcon"
4110
+ >
4111
+ <div
4112
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
4113
+ data-id="boxComponent"
4114
+ data-selector-id="box"
4115
+ data-test-id="boxComponent"
4116
+ >
4117
+ <input
4118
+ aria-activedescendant="00"
4119
+ aria-controls="3"
4120
+ aria-expanded="false"
4121
+ aria-haspopup="true"
4122
+ aria-label="click to select options"
4123
+ aria-owns="3"
4124
+ aria-readonly="true"
4125
+ autocomplete="off"
4126
+ class="pointer container xmedium primary effect borderColor_default inputDotted"
4127
+ data-id="minuteField_textBox"
4128
+ data-selector-id="textBoxIcon"
4129
+ data-test-id="minuteField_textBox"
4130
+ data-title="00"
4131
+ maxlength="2"
4132
+ placeholder=""
4133
+ readonly=""
4134
+ role="Menuitem"
4135
+ type="text"
4136
+ value="00"
4137
+ />
4138
+ </div>
4139
+ <div
4140
+ class="d-flex-shrink-0 iconContainer"
4141
+ data-id="boxComponent"
4142
+ data-selector-id="box"
4143
+ data-test-id="boxComponent"
4144
+ >
4145
+ <div
4146
+ class="d-flex d-h-full d-w-full d-flex-row"
4147
+ data-id="containerComponent"
4148
+ data-selector-id="container"
4149
+ data-test-id="containerComponent"
4150
+ >
4151
+ <div
4152
+ class="d-flex-shrink-0 icon"
4153
+ data-id="boxComponent"
4154
+ data-selector-id="box"
4155
+ data-test-id="boxComponent"
4156
+ >
4157
+ <div
4158
+ class="d-inline-flex d-flex-row d-items-center d-justify-center rightPlaceholder"
4159
+ data-id="containerComponent"
4160
+ data-selector-id="container"
4161
+ data-test-id="containerComponent"
4162
+ >
4163
+ <div
4164
+ aria-hidden="true"
4165
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center arrowIcon"
4166
+ data-id="minuteField_downIcon"
4167
+ data-selector-id="container"
4168
+ data-test-id="minuteField_downIcon"
4169
+ >
4170
+ <i
4171
+ aria-hidden="true"
4172
+ class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
4173
+ data-id="fontIcon"
4174
+ data-selector-id="fontIcon"
4175
+ data-test-id="fontIcon"
4176
+ style="--zd-iconfont-size: var(--zd_font_size7);"
4177
+ />
4178
+ </div>
4179
+ </div>
4180
+ </div>
4181
+ </div>
4182
+ </div>
4183
+ </div>
4184
+ </div>
4185
+ </div>
4186
+ </div>
4187
+ <div
4188
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 dropDownContainer"
4189
+ data-id="boxComponent"
4190
+ data-selector-id="box"
4191
+ data-test-id="boxComponent"
4192
+ >
4193
+ <div
4194
+ class="container box_small"
4195
+ data-selector-id="select"
4196
+ >
4197
+ <div
4198
+ class=""
4199
+ data-id="ampmField"
4200
+ data-test-id="ampmField"
4201
+ >
4202
+ <div
4203
+ class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
4204
+ data-selector-id="textBoxIcon"
4205
+ >
4206
+ <div
4207
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
4208
+ data-id="boxComponent"
4209
+ data-selector-id="box"
4210
+ data-test-id="boxComponent"
4211
+ >
4212
+ <input
4213
+ aria-activedescendant="PM"
4214
+ aria-controls="5"
4215
+ aria-expanded="false"
4216
+ aria-haspopup="true"
4217
+ aria-label="click to select options"
4218
+ aria-owns="5"
4219
+ aria-readonly="true"
4220
+ autocomplete="off"
4221
+ class="pointer container xmedium primary effect borderColor_default inputDotted"
4222
+ data-id="ampmField_textBox"
4223
+ data-selector-id="textBoxIcon"
4224
+ data-test-id="ampmField_textBox"
4225
+ data-title="PM"
4226
+ maxlength="2"
4227
+ placeholder=""
4228
+ readonly=""
4229
+ role="Menuitem"
4230
+ type="text"
4231
+ value="PM"
4232
+ />
4233
+ </div>
4234
+ <div
4235
+ class="d-flex-shrink-0 iconContainer"
4236
+ data-id="boxComponent"
4237
+ data-selector-id="box"
4238
+ data-test-id="boxComponent"
4239
+ >
4240
+ <div
4241
+ class="d-flex d-h-full d-w-full d-flex-row"
4242
+ data-id="containerComponent"
4243
+ data-selector-id="container"
4244
+ data-test-id="containerComponent"
4245
+ >
4246
+ <div
4247
+ class="d-flex-shrink-0 icon"
4248
+ data-id="boxComponent"
4249
+ data-selector-id="box"
4250
+ data-test-id="boxComponent"
4251
+ >
4252
+ <div
4253
+ class="d-inline-flex d-flex-row d-items-center d-justify-center rightPlaceholder"
4254
+ data-id="containerComponent"
4255
+ data-selector-id="container"
4256
+ data-test-id="containerComponent"
4257
+ >
4258
+ <div
4259
+ aria-hidden="true"
4260
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center arrowIcon"
4261
+ data-id="ampmField_downIcon"
4262
+ data-selector-id="container"
4263
+ data-test-id="ampmField_downIcon"
4264
+ >
4265
+ <i
4266
+ aria-hidden="true"
4267
+ class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
4268
+ data-id="fontIcon"
4269
+ data-selector-id="fontIcon"
4270
+ data-test-id="fontIcon"
4271
+ style="--zd-iconfont-size: var(--zd_font_size7);"
4272
+ />
4273
+ </div>
4274
+ </div>
4275
+ </div>
4276
+ </div>
4277
+ </div>
4278
+ </div>
4279
+ </div>
4280
+ </div>
4281
+ </div>
4282
+ </div>
4283
+ </div>
4284
+ </div>
4285
+ </div>
4286
+ </DocumentFragment>
4287
+ `;
4
4288
 
5
- exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1`] = `
4289
+ exports[`DateTime Render with isDefaultPosition and value 1`] = `
6
4290
  <DocumentFragment>
7
4291
  <div
8
4292
  class="dropBox"
@@ -28,10 +4312,10 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
28
4312
  >
29
4313
  <h2
30
4314
  class="reset thMonYear"
31
- data-title="July 2023"
4315
+ data-title="January 2024"
32
4316
  tabindex="0"
33
4317
  >
34
- July 2023
4318
+ January 2024
35
4319
  </h2>
36
4320
  <span>
37
4321
  <i
@@ -177,58 +4461,13 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
177
4461
  data-test-id="containerComponent"
178
4462
  >
179
4463
  <div
180
- aria-label="25"
4464
+ aria-label="31"
181
4465
  class="d-flex-shrink-0 datesStr grid holiday invalidDate"
182
4466
  data-id="dateTime_invalidDate"
183
4467
  data-selector-id="box"
184
4468
  data-test-id="dateTime_invalidDate"
185
4469
  >
186
- 25
187
- </div>
188
- <div
189
- aria-label="26"
190
- class="d-flex-shrink-0 datesStr grid invalidDate"
191
- data-id="dateTime_invalidDate"
192
- data-selector-id="box"
193
- data-test-id="dateTime_invalidDate"
194
- >
195
- 26
196
- </div>
197
- <div
198
- aria-label="27"
199
- class="d-flex-shrink-0 datesStr grid invalidDate"
200
- data-id="dateTime_invalidDate"
201
- data-selector-id="box"
202
- data-test-id="dateTime_invalidDate"
203
- >
204
- 27
205
- </div>
206
- <div
207
- aria-label="28"
208
- class="d-flex-shrink-0 datesStr grid invalidDate"
209
- data-id="dateTime_invalidDate"
210
- data-selector-id="box"
211
- data-test-id="dateTime_invalidDate"
212
- >
213
- 28
214
- </div>
215
- <div
216
- aria-label="29"
217
- class="d-flex-shrink-0 datesStr grid invalidDate"
218
- data-id="dateTime_invalidDate"
219
- data-selector-id="box"
220
- data-test-id="dateTime_invalidDate"
221
- >
222
- 29
223
- </div>
224
- <div
225
- aria-label="30"
226
- class="d-flex-shrink-0 datesStr grid invalidDate"
227
- data-id="dateTime_invalidDate"
228
- data-selector-id="box"
229
- data-test-id="dateTime_invalidDate"
230
- >
231
- 30
4470
+ 31
232
4471
  </div>
233
4472
  <div
234
4473
  aria-label="1"
@@ -239,16 +4478,9 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
239
4478
  >
240
4479
  1
241
4480
  </div>
242
- </div>
243
- <div
244
- class="d-flex d-flex-row dateRow"
245
- data-id="containerComponent"
246
- data-selector-id="container"
247
- data-test-id="containerComponent"
248
- >
249
4481
  <div
250
4482
  aria-label="2"
251
- class="d-flex-shrink-0 datesStr grid holiday"
4483
+ class="d-flex-shrink-0 datesStr grid"
252
4484
  data-id="dateTime_date"
253
4485
  data-selector-id="box"
254
4486
  data-test-id="dateTime_date"
@@ -291,9 +4523,16 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
291
4523
  >
292
4524
  6
293
4525
  </div>
4526
+ </div>
4527
+ <div
4528
+ class="d-flex d-flex-row dateRow"
4529
+ data-id="containerComponent"
4530
+ data-selector-id="container"
4531
+ data-test-id="containerComponent"
4532
+ >
294
4533
  <div
295
4534
  aria-label="7"
296
- class="d-flex-shrink-0 datesStr grid"
4535
+ class="d-flex-shrink-0 datesStr grid holiday"
297
4536
  data-id="dateTime_date"
298
4537
  data-selector-id="box"
299
4538
  data-test-id="dateTime_date"
@@ -309,16 +4548,9 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
309
4548
  >
310
4549
  8
311
4550
  </div>
312
- </div>
313
- <div
314
- class="d-flex d-flex-row dateRow"
315
- data-id="containerComponent"
316
- data-selector-id="container"
317
- data-test-id="containerComponent"
318
- >
319
4551
  <div
320
4552
  aria-label="9"
321
- class="d-flex-shrink-0 datesStr grid holiday"
4553
+ class="d-flex-shrink-0 datesStr grid"
322
4554
  data-id="dateTime_date"
323
4555
  data-selector-id="box"
324
4556
  data-test-id="dateTime_date"
@@ -361,9 +4593,16 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
361
4593
  >
362
4594
  13
363
4595
  </div>
4596
+ </div>
4597
+ <div
4598
+ class="d-flex d-flex-row dateRow"
4599
+ data-id="containerComponent"
4600
+ data-selector-id="container"
4601
+ data-test-id="containerComponent"
4602
+ >
364
4603
  <div
365
4604
  aria-label="14"
366
- class="d-flex-shrink-0 datesStr grid"
4605
+ class="d-flex-shrink-0 datesStr grid holiday"
367
4606
  data-id="dateTime_date"
368
4607
  data-selector-id="box"
369
4608
  data-test-id="dateTime_date"
@@ -372,23 +4611,16 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
372
4611
  </div>
373
4612
  <div
374
4613
  aria-label="15"
375
- class="d-flex-shrink-0 datesStr grid"
376
- data-id="dateTime_date"
4614
+ class="d-flex-shrink-0 active datesStr grid"
4615
+ data-id="dateTime_dateSelected"
377
4616
  data-selector-id="box"
378
- data-test-id="dateTime_date"
4617
+ data-test-id="dateTime_dateSelected"
379
4618
  >
380
4619
  15
381
4620
  </div>
382
- </div>
383
- <div
384
- class="d-flex d-flex-row dateRow"
385
- data-id="containerComponent"
386
- data-selector-id="container"
387
- data-test-id="containerComponent"
388
- >
389
4621
  <div
390
4622
  aria-label="16"
391
- class="d-flex-shrink-0 datesStr grid holiday"
4623
+ class="d-flex-shrink-0 datesStr grid"
392
4624
  data-id="dateTime_date"
393
4625
  data-selector-id="box"
394
4626
  data-test-id="dateTime_date"
@@ -431,9 +4663,16 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
431
4663
  >
432
4664
  20
433
4665
  </div>
4666
+ </div>
4667
+ <div
4668
+ class="d-flex d-flex-row dateRow"
4669
+ data-id="containerComponent"
4670
+ data-selector-id="container"
4671
+ data-test-id="containerComponent"
4672
+ >
434
4673
  <div
435
4674
  aria-label="21"
436
- class="d-flex-shrink-0 datesStr grid"
4675
+ class="d-flex-shrink-0 datesStr grid holiday"
437
4676
  data-id="dateTime_date"
438
4677
  data-selector-id="box"
439
4678
  data-test-id="dateTime_date"
@@ -449,16 +4688,9 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
449
4688
  >
450
4689
  22
451
4690
  </div>
452
- </div>
453
- <div
454
- class="d-flex d-flex-row dateRow"
455
- data-id="containerComponent"
456
- data-selector-id="container"
457
- data-test-id="containerComponent"
458
- >
459
4691
  <div
460
4692
  aria-label="23"
461
- class="d-flex-shrink-0 datesStr grid holiday"
4693
+ class="d-flex-shrink-0 datesStr grid"
462
4694
  data-id="dateTime_date"
463
4695
  data-selector-id="box"
464
4696
  data-test-id="dateTime_date"
@@ -501,9 +4733,16 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
501
4733
  >
502
4734
  27
503
4735
  </div>
4736
+ </div>
4737
+ <div
4738
+ class="d-flex d-flex-row dateRow"
4739
+ data-id="containerComponent"
4740
+ data-selector-id="container"
4741
+ data-test-id="containerComponent"
4742
+ >
504
4743
  <div
505
4744
  aria-label="28"
506
- class="d-flex-shrink-0 datesStr grid"
4745
+ class="d-flex-shrink-0 datesStr grid holiday"
507
4746
  data-id="dateTime_date"
508
4747
  data-selector-id="box"
509
4748
  data-test-id="dateTime_date"
@@ -512,23 +4751,16 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
512
4751
  </div>
513
4752
  <div
514
4753
  aria-label="29"
515
- class="d-flex-shrink-0 active datesStr grid"
516
- data-id="dateTime_dateSelected"
4754
+ class="d-flex-shrink-0 datesStr grid"
4755
+ data-id="dateTime_date"
517
4756
  data-selector-id="box"
518
- data-test-id="dateTime_dateSelected"
4757
+ data-test-id="dateTime_date"
519
4758
  >
520
4759
  29
521
4760
  </div>
522
- </div>
523
- <div
524
- class="d-flex d-flex-row dateRow"
525
- data-id="containerComponent"
526
- data-selector-id="container"
527
- data-test-id="containerComponent"
528
- >
529
4761
  <div
530
4762
  aria-label="30"
531
- class="d-flex-shrink-0 datesStr grid holiday"
4763
+ class="d-flex-shrink-0 datesStr grid"
532
4764
  data-id="dateTime_date"
533
4765
  data-selector-id="box"
534
4766
  data-test-id="dateTime_date"
@@ -571,9 +4803,16 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
571
4803
  >
572
4804
  3
573
4805
  </div>
4806
+ </div>
4807
+ <div
4808
+ class="d-flex d-flex-row dateRow"
4809
+ data-id="containerComponent"
4810
+ data-selector-id="container"
4811
+ data-test-id="containerComponent"
4812
+ >
574
4813
  <div
575
4814
  aria-label="4"
576
- class="d-flex-shrink-0 invalidDate datesStr grid"
4815
+ class="d-flex-shrink-0 invalidDate datesStr grid holiday"
577
4816
  data-id="dateTime_invalidDate"
578
4817
  data-selector-id="box"
579
4818
  data-test-id="dateTime_invalidDate"
@@ -589,6 +4828,51 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
589
4828
  >
590
4829
  5
591
4830
  </div>
4831
+ <div
4832
+ aria-label="6"
4833
+ class="d-flex-shrink-0 invalidDate datesStr grid"
4834
+ data-id="dateTime_invalidDate"
4835
+ data-selector-id="box"
4836
+ data-test-id="dateTime_invalidDate"
4837
+ >
4838
+ 6
4839
+ </div>
4840
+ <div
4841
+ aria-label="7"
4842
+ class="d-flex-shrink-0 invalidDate datesStr grid"
4843
+ data-id="dateTime_invalidDate"
4844
+ data-selector-id="box"
4845
+ data-test-id="dateTime_invalidDate"
4846
+ >
4847
+ 7
4848
+ </div>
4849
+ <div
4850
+ aria-label="8"
4851
+ class="d-flex-shrink-0 invalidDate datesStr grid"
4852
+ data-id="dateTime_invalidDate"
4853
+ data-selector-id="box"
4854
+ data-test-id="dateTime_invalidDate"
4855
+ >
4856
+ 8
4857
+ </div>
4858
+ <div
4859
+ aria-label="9"
4860
+ class="d-flex-shrink-0 invalidDate datesStr grid"
4861
+ data-id="dateTime_invalidDate"
4862
+ data-selector-id="box"
4863
+ data-test-id="dateTime_invalidDate"
4864
+ >
4865
+ 9
4866
+ </div>
4867
+ <div
4868
+ aria-label="10"
4869
+ class="d-flex-shrink-0 invalidDate datesStr grid"
4870
+ data-id="dateTime_invalidDate"
4871
+ data-selector-id="box"
4872
+ data-test-id="dateTime_invalidDate"
4873
+ >
4874
+ 10
4875
+ </div>
592
4876
  </div>
593
4877
  </div>
594
4878
  <span
@@ -628,7 +4912,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
628
4912
  data-test-id="boxComponent"
629
4913
  >
630
4914
  <input
631
- aria-activedescendant="08"
4915
+ aria-activedescendant="10"
632
4916
  aria-controls="1"
633
4917
  aria-expanded="false"
634
4918
  aria-haspopup="true"
@@ -640,13 +4924,13 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
640
4924
  data-id="hourField_textBox"
641
4925
  data-selector-id="textBoxIcon"
642
4926
  data-test-id="hourField_textBox"
643
- data-title="08"
4927
+ data-title="10"
644
4928
  maxlength="2"
645
4929
  placeholder=""
646
4930
  readonly=""
647
4931
  role="Menuitem"
648
4932
  type="text"
649
- value="08"
4933
+ value="10"
650
4934
  />
651
4935
  </div>
652
4936
  <div
@@ -818,7 +5102,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
818
5102
  data-test-id="boxComponent"
819
5103
  >
820
5104
  <input
821
- aria-activedescendant="PM"
5105
+ aria-activedescendant="AM"
822
5106
  aria-controls="5"
823
5107
  aria-expanded="false"
824
5108
  aria-haspopup="true"
@@ -830,13 +5114,13 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
830
5114
  data-id="ampmField_textBox"
831
5115
  data-selector-id="textBoxIcon"
832
5116
  data-test-id="ampmField_textBox"
833
- data-title="PM"
5117
+ data-title="AM"
834
5118
  maxlength="2"
835
5119
  placeholder=""
836
5120
  readonly=""
837
5121
  role="Menuitem"
838
5122
  type="text"
839
- value="PM"
5123
+ value="AM"
840
5124
  />
841
5125
  </div>
842
5126
  <div