@ukic/canary-web-components 2.0.0-canary.11 → 2.0.0-canary.12

Sign up to get free protection for your applications and to get access to all the features.
Files changed (474) hide show
  1. package/dist/cjs/core.cjs.js +1 -1
  2. package/dist/cjs/{helpers-7a069459.js → helpers-b525d45a.js} +2 -7
  3. package/dist/cjs/helpers-b525d45a.js.map +1 -0
  4. package/dist/cjs/{helpers-f75cf7cf.js → helpers-c4444a7e.js} +48 -94
  5. package/dist/cjs/helpers-c4444a7e.js.map +1 -0
  6. package/dist/cjs/ic-accordion.cjs.entry.js +1 -1
  7. package/dist/cjs/ic-alert.cjs.entry.js +1 -1
  8. package/dist/cjs/ic-back-to-top.cjs.entry.js +1 -1
  9. package/dist/cjs/ic-badge.cjs.entry.js +8 -16
  10. package/dist/cjs/ic-badge.cjs.entry.js.map +1 -1
  11. package/dist/cjs/ic-breadcrumb-group.cjs.entry.js +1 -1
  12. package/dist/cjs/ic-breadcrumb.cjs.entry.js +1 -1
  13. package/dist/cjs/ic-button_3.cjs.entry.js +2 -8
  14. package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
  15. package/dist/cjs/ic-card.cjs.entry.js +1 -1
  16. package/dist/cjs/ic-checkbox-group.cjs.entry.js +1 -1
  17. package/dist/cjs/ic-checkbox.cjs.entry.js +1 -1
  18. package/dist/cjs/ic-chip.cjs.entry.js +1 -1
  19. package/dist/cjs/ic-data-row.cjs.entry.js +1 -1
  20. package/dist/cjs/ic-data-table-title-bar.cjs.entry.js +57 -0
  21. package/dist/cjs/ic-data-table-title-bar.cjs.entry.js.map +1 -0
  22. package/dist/cjs/ic-data-table.cjs.entry.js +308 -43
  23. package/dist/cjs/ic-data-table.cjs.entry.js.map +1 -1
  24. package/dist/cjs/ic-dialog.cjs.entry.js +2 -3
  25. package/dist/cjs/ic-dialog.cjs.entry.js.map +1 -1
  26. package/dist/cjs/ic-divider.cjs.entry.js +1 -1
  27. package/dist/cjs/{ic-pagination-bar.cjs.entry.js → ic-empty-state_2.cjs.entry.js} +34 -4
  28. package/dist/cjs/ic-empty-state_2.cjs.entry.js.map +1 -0
  29. package/dist/cjs/ic-footer-link-group.cjs.entry.js +1 -1
  30. package/dist/cjs/ic-footer-link.cjs.entry.js +1 -1
  31. package/dist/cjs/ic-footer.cjs.entry.js +1 -1
  32. package/dist/cjs/ic-hero.cjs.entry.js +1 -1
  33. package/dist/cjs/ic-horizontal-scroll.cjs.entry.js +1 -1
  34. package/dist/cjs/{ic-menu.cjs.entry.js → ic-input-component-container_3.cjs.entry.js} +69 -5
  35. package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +1 -0
  36. package/dist/cjs/ic-input-label_2.cjs.entry.js +86 -0
  37. package/dist/cjs/ic-input-label_2.cjs.entry.js.map +1 -0
  38. package/dist/cjs/ic-link.cjs.entry.js +1 -1
  39. package/dist/cjs/ic-menu-group.cjs.entry.js +1 -1
  40. package/dist/cjs/ic-menu-item.cjs.entry.js +1 -1
  41. package/dist/cjs/ic-menu-with-multi.cjs.entry.js +1 -1
  42. package/dist/cjs/ic-menu-with-multi.cjs.entry.js.map +1 -1
  43. package/dist/cjs/ic-navigation-button.cjs.entry.js +1 -1
  44. package/dist/cjs/ic-navigation-group.cjs.entry.js +13 -16
  45. package/dist/cjs/ic-navigation-group.cjs.entry.js.map +1 -1
  46. package/dist/cjs/ic-navigation-item.cjs.entry.js +32 -28
  47. package/dist/cjs/ic-navigation-item.cjs.entry.js.map +1 -1
  48. package/dist/cjs/ic-navigation-menu.cjs.entry.js +1 -1
  49. package/dist/cjs/ic-page-header.cjs.entry.js +1 -1
  50. package/dist/cjs/ic-pagination_4.cjs.entry.js +5 -5
  51. package/dist/cjs/ic-pagination_4.cjs.entry.js.map +1 -1
  52. package/dist/cjs/ic-popover-menu.cjs.entry.js +1 -1
  53. package/dist/cjs/ic-radio-group.cjs.entry.js +1 -1
  54. package/dist/cjs/ic-radio-option.cjs.entry.js +1 -1
  55. package/dist/cjs/ic-search-bar.cjs.entry.js +1 -1
  56. package/dist/cjs/ic-select-with-multi.cjs.entry.js +19 -6
  57. package/dist/cjs/ic-select-with-multi.cjs.entry.js.map +1 -1
  58. package/dist/cjs/ic-side-navigation.cjs.entry.js +1 -1
  59. package/dist/cjs/ic-status-tag.cjs.entry.js +1 -1
  60. package/dist/cjs/ic-step.cjs.entry.js +1 -1
  61. package/dist/cjs/ic-stepper.cjs.entry.js +1 -1
  62. package/dist/cjs/ic-switch.cjs.entry.js +1 -1
  63. package/dist/cjs/ic-tab-group.cjs.entry.js +1 -1
  64. package/dist/cjs/ic-tab-panel.cjs.entry.js +1 -1
  65. package/dist/cjs/ic-tab.cjs.entry.js +1 -1
  66. package/dist/cjs/ic-theme.cjs.entry.js +1 -1
  67. package/dist/cjs/ic-toast.cjs.entry.js +1 -1
  68. package/dist/cjs/ic-toggle-button.cjs.entry.js +1 -1
  69. package/dist/cjs/ic-top-navigation.cjs.entry.js +60 -46
  70. package/dist/cjs/ic-top-navigation.cjs.entry.js.map +1 -1
  71. package/dist/cjs/ic-typography.cjs.entry.js +35 -11
  72. package/dist/cjs/ic-typography.cjs.entry.js.map +1 -1
  73. package/dist/cjs/index-4cf27b16.js +10 -18
  74. package/dist/cjs/loader.cjs.js +1 -1
  75. package/dist/collection/collection-manifest.json +1 -2
  76. package/dist/collection/components/ic-data-table/ic-data-table.css +82 -7
  77. package/dist/collection/components/ic-data-table/ic-data-table.js +535 -44
  78. package/dist/collection/components/ic-data-table/ic-data-table.js.map +1 -1
  79. package/dist/collection/components/ic-data-table/ic-data-table.types.js.map +1 -1
  80. package/dist/collection/components/ic-data-table/story-data.js +386 -11
  81. package/dist/collection/components/ic-data-table/story-data.js.map +1 -1
  82. package/dist/collection/components/ic-data-table/test/basic/ic-data-table.e2e.js +217 -0
  83. package/dist/collection/components/ic-data-table/test/basic/ic-data-table.e2e.js.map +1 -0
  84. package/dist/collection/components/ic-data-table/test/basic/ic-data-table.spec.js +319 -0
  85. package/dist/collection/components/ic-data-table/test/basic/ic-data-table.spec.js.map +1 -1
  86. package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.css +87 -0
  87. package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.js +160 -0
  88. package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.js.map +1 -0
  89. package/dist/collection/components/{ic-date-picker/test/a11y/ic-date-picker.test.a11y.js → ic-data-table-title-bar/test/a11y/ic-data-table-title-bar.test.a11y.js} +3 -5
  90. package/dist/collection/components/ic-data-table-title-bar/test/a11y/ic-data-table-title-bar.test.a11y.js.map +1 -0
  91. package/dist/collection/components/ic-data-table-title-bar/test/basic/ic-data-table-title-bar.spec.js +70 -0
  92. package/dist/collection/components/ic-data-table-title-bar/test/basic/ic-data-table-title-bar.spec.js.map +1 -0
  93. package/dist/collection/components/ic-menu-with-multi/ic-menu.js +2 -2
  94. package/dist/collection/components/ic-menu-with-multi/ic-menu.js.map +1 -1
  95. package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.js +1 -1
  96. package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.js.map +1 -1
  97. package/dist/collection/components/ic-select-with-multi/ic-select.js +2 -2
  98. package/dist/collection/components/ic-select-with-multi/ic-select.js.map +1 -1
  99. package/dist/collection/utils/constants.js +0 -55
  100. package/dist/collection/utils/constants.js.map +1 -1
  101. package/dist/collection/utils/helpers.js +42 -272
  102. package/dist/collection/utils/helpers.js.map +1 -1
  103. package/dist/collection/utils/types.js +0 -45
  104. package/dist/collection/utils/types.js.map +1 -1
  105. package/dist/components/helpers.js +2 -7
  106. package/dist/components/helpers.js.map +1 -1
  107. package/dist/components/helpers2.js +45 -91
  108. package/dist/components/helpers2.js.map +1 -1
  109. package/dist/components/ic-badge.js +8 -16
  110. package/dist/components/ic-badge.js.map +1 -1
  111. package/dist/components/ic-button2.js +3 -11
  112. package/dist/components/ic-button2.js.map +1 -1
  113. package/dist/components/ic-card.js +1 -1
  114. package/dist/components/ic-checkbox-group.js +1 -1
  115. package/dist/components/ic-checkbox.js +1 -1
  116. package/dist/components/ic-chip.js +1 -1
  117. package/dist/components/{ic-date-input.d.ts → ic-data-table-title-bar.d.ts} +4 -4
  118. package/dist/components/ic-data-table-title-bar.js +136 -0
  119. package/dist/components/ic-data-table-title-bar.js.map +1 -0
  120. package/dist/components/ic-data-table.js +334 -49
  121. package/dist/components/ic-data-table.js.map +1 -1
  122. package/dist/components/ic-dialog.js +1 -2
  123. package/dist/components/ic-dialog.js.map +1 -1
  124. package/dist/components/ic-empty-state.js +1 -57
  125. package/dist/components/ic-empty-state.js.map +1 -1
  126. package/dist/{esm/ic-empty-state.entry.js → components/ic-empty-state2.js} +38 -11
  127. package/dist/components/ic-empty-state2.js.map +1 -0
  128. package/dist/components/ic-input-component-container2.js +1 -1
  129. package/dist/components/ic-input-component-container2.js.map +1 -1
  130. package/dist/components/ic-link2.js +1 -1
  131. package/dist/components/ic-menu-item2.js +1 -1
  132. package/dist/components/ic-menu2.js +2 -2
  133. package/dist/components/ic-menu2.js.map +1 -1
  134. package/dist/components/ic-menu3.js +1 -1
  135. package/dist/components/ic-menu3.js.map +1 -1
  136. package/dist/components/ic-navigation-button.js +1 -1
  137. package/dist/components/ic-navigation-group.js +12 -15
  138. package/dist/components/ic-navigation-group.js.map +1 -1
  139. package/dist/components/ic-navigation-item.js +32 -28
  140. package/dist/components/ic-navigation-item.js.map +1 -1
  141. package/dist/components/ic-pagination-bar2.js +1 -1
  142. package/dist/components/ic-pagination-bar2.js.map +1 -1
  143. package/dist/components/ic-pagination-item2.js +1 -1
  144. package/dist/components/ic-pagination2.js +5 -5
  145. package/dist/components/ic-pagination2.js.map +1 -1
  146. package/dist/components/ic-radio-group.js +1 -1
  147. package/dist/components/ic-radio-option.js +1 -1
  148. package/dist/components/ic-search-bar.js +1 -1
  149. package/dist/components/ic-select-with-multi.js +14 -1
  150. package/dist/components/ic-select-with-multi.js.map +1 -1
  151. package/dist/components/ic-select2.js +1 -1
  152. package/dist/components/ic-switch.js +1 -1
  153. package/dist/components/ic-tab.js +1 -1
  154. package/dist/components/ic-text-field2.js +1 -1
  155. package/dist/components/ic-toggle-button.js +1 -1
  156. package/dist/components/ic-top-navigation.js +61 -47
  157. package/dist/components/ic-top-navigation.js.map +1 -1
  158. package/dist/components/ic-typography2.js +38 -12
  159. package/dist/components/ic-typography2.js.map +1 -1
  160. package/dist/core/core.css +1 -1
  161. package/dist/core/core.esm.js +1 -1
  162. package/dist/core/core.esm.js.map +1 -1
  163. package/dist/core/p-045359e1.entry.js +2 -0
  164. package/dist/core/{p-b1e3f20a.entry.js.map → p-045359e1.entry.js.map} +1 -1
  165. package/dist/core/{p-e9e7a7f9.entry.js → p-10fb4c46.entry.js} +2 -2
  166. package/dist/core/p-169bfa51.entry.js +2 -0
  167. package/dist/core/p-169bfa51.entry.js.map +1 -0
  168. package/dist/core/{p-21da96a9.entry.js → p-1ca332ca.entry.js} +2 -2
  169. package/dist/core/p-1e91f540.entry.js +2 -0
  170. package/dist/core/p-1e91f540.entry.js.map +1 -0
  171. package/dist/core/{p-170f6408.entry.js → p-204ace96.entry.js} +2 -2
  172. package/dist/core/{p-2f31bb92.entry.js → p-2eac7dcc.entry.js} +2 -2
  173. package/dist/core/p-347e8dab.entry.js +2 -0
  174. package/dist/core/p-347e8dab.entry.js.map +1 -0
  175. package/dist/core/p-3803a5b5.entry.js +2 -0
  176. package/dist/core/p-3803a5b5.entry.js.map +1 -0
  177. package/dist/core/p-4753bac8.entry.js +2 -0
  178. package/dist/core/p-4753bac8.entry.js.map +1 -0
  179. package/dist/core/{p-a16c6ff3.entry.js → p-4baa0916.entry.js} +2 -2
  180. package/dist/core/{p-655df7fe.entry.js → p-4f413fc0.entry.js} +2 -2
  181. package/dist/core/p-5171169f.entry.js +2 -0
  182. package/dist/core/p-5171169f.entry.js.map +1 -0
  183. package/dist/core/{p-56d01bdb.entry.js → p-595be57d.entry.js} +2 -2
  184. package/dist/core/{p-23a13636.entry.js → p-5ae93c16.entry.js} +2 -2
  185. package/dist/core/{p-0b32ba5b.entry.js → p-5e0c830b.entry.js} +2 -2
  186. package/dist/core/p-5ee4319c.entry.js +2 -0
  187. package/dist/core/p-5ee4319c.entry.js.map +1 -0
  188. package/dist/core/p-5f4e96ec.entry.js +2 -0
  189. package/dist/core/p-5f4e96ec.entry.js.map +1 -0
  190. package/dist/core/{p-95374ba1.entry.js → p-624d4f5f.entry.js} +2 -2
  191. package/dist/core/{p-df63896a.entry.js → p-6933f8e9.entry.js} +2 -2
  192. package/dist/core/{p-70b48a14.entry.js → p-6c3044b6.entry.js} +2 -2
  193. package/dist/core/p-7267fe19.entry.js +2 -0
  194. package/dist/core/p-7267fe19.entry.js.map +1 -0
  195. package/dist/core/{p-02d0ecd2.entry.js → p-75dac3d1.entry.js} +2 -2
  196. package/dist/core/{p-a6e9a8e7.entry.js → p-7ef8d616.entry.js} +2 -2
  197. package/dist/core/{p-0388b484.entry.js → p-81ddc39d.entry.js} +2 -2
  198. package/dist/core/{p-6e32683c.entry.js → p-869954a2.entry.js} +2 -2
  199. package/dist/core/{p-e2155d7f.entry.js → p-88d54b72.entry.js} +2 -2
  200. package/dist/core/{p-98c8d46a.entry.js → p-8b08d8fe.entry.js} +2 -2
  201. package/dist/core/{p-0080bbce.entry.js → p-917c5721.entry.js} +2 -2
  202. package/dist/core/p-942282cd.entry.js +2 -0
  203. package/dist/core/p-942282cd.entry.js.map +1 -0
  204. package/dist/core/p-96b3e7e2.js +2 -0
  205. package/dist/core/p-96b3e7e2.js.map +1 -0
  206. package/dist/core/p-9caf19eb.js +2 -0
  207. package/dist/core/p-9caf19eb.js.map +1 -0
  208. package/dist/core/{p-7373beb0.entry.js → p-a0f8efb2.entry.js} +2 -2
  209. package/dist/core/{p-1f1b4b8b.entry.js → p-a31031a5.entry.js} +2 -2
  210. package/dist/core/{p-221d03e1.entry.js → p-a434c3d4.entry.js} +2 -2
  211. package/dist/core/{p-25a458bf.entry.js → p-a43c12cd.entry.js} +2 -2
  212. package/dist/core/{p-31fdb740.entry.js → p-a50c3b9e.entry.js} +2 -2
  213. package/dist/core/p-aac4185b.entry.js +2 -0
  214. package/dist/core/p-aac4185b.entry.js.map +1 -0
  215. package/dist/core/{p-65a8c1d6.entry.js → p-ab09986c.entry.js} +2 -2
  216. package/dist/core/{p-9e3178e8.entry.js → p-b6639e4a.entry.js} +2 -2
  217. package/dist/core/{p-9e3178e8.entry.js.map → p-b6639e4a.entry.js.map} +1 -1
  218. package/dist/core/{p-e21083c8.entry.js → p-b82dcc29.entry.js} +2 -2
  219. package/dist/core/p-ba86928c.entry.js +2 -0
  220. package/dist/core/{p-4f0178a7.entry.js.map → p-ba86928c.entry.js.map} +1 -1
  221. package/dist/core/{p-b3ce9fe4.entry.js → p-c34848da.entry.js} +2 -2
  222. package/dist/core/{p-8f1aa87d.entry.js → p-d8469ac0.entry.js} +2 -2
  223. package/dist/core/{p-75a2cdac.entry.js → p-db9c03c0.entry.js} +2 -2
  224. package/dist/core/{p-fb58d1d1.entry.js → p-e3997d60.entry.js} +2 -2
  225. package/dist/core/{p-06aef486.entry.js → p-e834344e.entry.js} +2 -2
  226. package/dist/core/p-f14454b1.entry.js +2 -0
  227. package/dist/core/{p-9f9b3151.entry.js.map → p-f14454b1.entry.js.map} +1 -1
  228. package/dist/core/{p-ee09f1b3.entry.js → p-f3c840cd.entry.js} +2 -2
  229. package/dist/core/p-f6888309.entry.js +2 -0
  230. package/dist/core/p-f6888309.entry.js.map +1 -0
  231. package/dist/core/p-f74a8752.entry.js +2 -0
  232. package/dist/core/p-f74a8752.entry.js.map +1 -0
  233. package/dist/core/{p-b1e646e4.entry.js → p-f7a14c01.entry.js} +2 -2
  234. package/dist/core/{p-ce898d90.entry.js → p-f843da01.entry.js} +2 -2
  235. package/dist/core/p-fc5611e2.entry.js +2 -0
  236. package/dist/core/p-fc5611e2.entry.js.map +1 -0
  237. package/dist/esm/core.js +1 -1
  238. package/dist/esm/{helpers-b5f64263.js → helpers-12b4266a.js} +3 -8
  239. package/dist/esm/helpers-12b4266a.js.map +1 -0
  240. package/dist/esm/{helpers-f328a7b6.js → helpers-1f07eb61.js} +46 -92
  241. package/dist/esm/helpers-1f07eb61.js.map +1 -0
  242. package/dist/esm/ic-accordion.entry.js +1 -1
  243. package/dist/esm/ic-alert.entry.js +1 -1
  244. package/dist/esm/ic-back-to-top.entry.js +1 -1
  245. package/dist/esm/ic-badge.entry.js +8 -16
  246. package/dist/esm/ic-badge.entry.js.map +1 -1
  247. package/dist/esm/ic-breadcrumb-group.entry.js +1 -1
  248. package/dist/esm/ic-breadcrumb.entry.js +1 -1
  249. package/dist/esm/ic-button_3.entry.js +2 -8
  250. package/dist/esm/ic-button_3.entry.js.map +1 -1
  251. package/dist/esm/ic-card.entry.js +1 -1
  252. package/dist/esm/ic-checkbox-group.entry.js +1 -1
  253. package/dist/esm/ic-checkbox.entry.js +1 -1
  254. package/dist/esm/ic-chip.entry.js +1 -1
  255. package/dist/esm/ic-data-row.entry.js +1 -1
  256. package/dist/esm/ic-data-table-title-bar.entry.js +53 -0
  257. package/dist/esm/ic-data-table-title-bar.entry.js.map +1 -0
  258. package/dist/esm/ic-data-table.entry.js +309 -44
  259. package/dist/esm/ic-data-table.entry.js.map +1 -1
  260. package/dist/esm/ic-dialog.entry.js +2 -3
  261. package/dist/esm/ic-dialog.entry.js.map +1 -1
  262. package/dist/esm/ic-divider.entry.js +1 -1
  263. package/dist/esm/{ic-pagination-bar.entry.js → ic-empty-state_2.entry.js} +34 -5
  264. package/dist/esm/ic-empty-state_2.entry.js.map +1 -0
  265. package/dist/esm/ic-footer-link-group.entry.js +1 -1
  266. package/dist/esm/ic-footer-link.entry.js +1 -1
  267. package/dist/esm/ic-footer.entry.js +1 -1
  268. package/dist/esm/ic-hero.entry.js +1 -1
  269. package/dist/esm/ic-horizontal-scroll.entry.js +1 -1
  270. package/dist/esm/{ic-menu.entry.js → ic-input-component-container_3.entry.js} +69 -7
  271. package/dist/esm/ic-input-component-container_3.entry.js.map +1 -0
  272. package/dist/esm/ic-input-label_2.entry.js +81 -0
  273. package/dist/esm/ic-input-label_2.entry.js.map +1 -0
  274. package/dist/esm/ic-link.entry.js +1 -1
  275. package/dist/esm/ic-menu-group.entry.js +1 -1
  276. package/dist/esm/ic-menu-item.entry.js +1 -1
  277. package/dist/esm/ic-menu-with-multi.entry.js +1 -1
  278. package/dist/esm/ic-menu-with-multi.entry.js.map +1 -1
  279. package/dist/esm/ic-navigation-button.entry.js +1 -1
  280. package/dist/esm/ic-navigation-group.entry.js +13 -16
  281. package/dist/esm/ic-navigation-group.entry.js.map +1 -1
  282. package/dist/esm/ic-navigation-item.entry.js +32 -28
  283. package/dist/esm/ic-navigation-item.entry.js.map +1 -1
  284. package/dist/esm/ic-navigation-menu.entry.js +1 -1
  285. package/dist/esm/ic-page-header.entry.js +1 -1
  286. package/dist/esm/ic-pagination_4.entry.js +5 -5
  287. package/dist/esm/ic-pagination_4.entry.js.map +1 -1
  288. package/dist/esm/ic-popover-menu.entry.js +1 -1
  289. package/dist/esm/ic-radio-group.entry.js +1 -1
  290. package/dist/esm/ic-radio-option.entry.js +1 -1
  291. package/dist/esm/ic-search-bar.entry.js +1 -1
  292. package/dist/esm/ic-select-with-multi.entry.js +14 -1
  293. package/dist/esm/ic-select-with-multi.entry.js.map +1 -1
  294. package/dist/esm/ic-side-navigation.entry.js +1 -1
  295. package/dist/esm/ic-status-tag.entry.js +1 -1
  296. package/dist/esm/ic-step.entry.js +1 -1
  297. package/dist/esm/ic-stepper.entry.js +1 -1
  298. package/dist/esm/ic-switch.entry.js +1 -1
  299. package/dist/esm/ic-tab-group.entry.js +1 -1
  300. package/dist/esm/ic-tab-panel.entry.js +1 -1
  301. package/dist/esm/ic-tab.entry.js +1 -1
  302. package/dist/esm/ic-theme.entry.js +1 -1
  303. package/dist/esm/ic-toast.entry.js +1 -1
  304. package/dist/esm/ic-toggle-button.entry.js +1 -1
  305. package/dist/esm/ic-top-navigation.entry.js +60 -46
  306. package/dist/esm/ic-top-navigation.entry.js.map +1 -1
  307. package/dist/esm/ic-typography.entry.js +36 -12
  308. package/dist/esm/ic-typography.entry.js.map +1 -1
  309. package/dist/esm/index-93509377.js +10 -18
  310. package/dist/esm/loader.js +1 -1
  311. package/dist/esm/polyfills/core-js.js +0 -0
  312. package/dist/esm/polyfills/dom.js +0 -0
  313. package/dist/esm/polyfills/es5-html-element.js +0 -0
  314. package/dist/esm/polyfills/index.js +0 -0
  315. package/dist/esm/polyfills/system.js +0 -0
  316. package/dist/types/components/ic-data-table/ic-data-table.d.ts +96 -1
  317. package/dist/types/components/ic-data-table/ic-data-table.types.d.ts +11 -0
  318. package/dist/types/components/ic-data-table/story-data.d.ts +99 -0
  319. package/dist/types/components/ic-data-table-title-bar/ic-data-table-title-bar.d.ts +36 -0
  320. package/dist/types/components/ic-menu-with-multi/ic-menu.d.ts +2 -2
  321. package/dist/types/components/ic-select-with-multi/ic-select.d.ts +2 -2
  322. package/dist/types/components.d.ts +141 -390
  323. package/dist/types/utils/constants.d.ts +0 -37
  324. package/dist/types/utils/helpers.d.ts +16 -84
  325. package/dist/types/utils/types.d.ts +1 -92
  326. package/hydrate/index.js +952 -2965
  327. package/package.json +3 -4
  328. package/dist/cjs/date-helpers-c9551119.js +0 -150
  329. package/dist/cjs/date-helpers-c9551119.js.map +0 -1
  330. package/dist/cjs/helpers-7a069459.js.map +0 -1
  331. package/dist/cjs/helpers-f75cf7cf.js.map +0 -1
  332. package/dist/cjs/ic-date-input.cjs.entry.js +0 -1089
  333. package/dist/cjs/ic-date-input.cjs.entry.js.map +0 -1
  334. package/dist/cjs/ic-date-picker.cjs.entry.js +0 -1050
  335. package/dist/cjs/ic-date-picker.cjs.entry.js.map +0 -1
  336. package/dist/cjs/ic-empty-state.cjs.entry.js +0 -38
  337. package/dist/cjs/ic-empty-state.cjs.entry.js.map +0 -1
  338. package/dist/cjs/ic-input-component-container_4.cjs.entry.js +0 -150
  339. package/dist/cjs/ic-input-component-container_4.cjs.entry.js.map +0 -1
  340. package/dist/cjs/ic-menu.cjs.entry.js.map +0 -1
  341. package/dist/cjs/ic-pagination-bar.cjs.entry.js.map +0 -1
  342. package/dist/collection/assets/calendar.svg +0 -3
  343. package/dist/collection/components/ic-date-input/ic-date-input.css +0 -560
  344. package/dist/collection/components/ic-date-input/ic-date-input.js +0 -1712
  345. package/dist/collection/components/ic-date-input/ic-date-input.js.map +0 -1
  346. package/dist/collection/components/ic-date-input/story-data.js +0 -28
  347. package/dist/collection/components/ic-date-input/story-data.js.map +0 -1
  348. package/dist/collection/components/ic-date-input/test/basic/ic-date-input.spec.js +0 -1139
  349. package/dist/collection/components/ic-date-input/test/basic/ic-date-input.spec.js.map +0 -1
  350. package/dist/collection/components/ic-date-input/test/helpers/ic-date-input.js +0 -42
  351. package/dist/collection/components/ic-date-input/test/helpers/ic-date-input.js.map +0 -1
  352. package/dist/collection/components/ic-date-picker/ic-date-picker.css +0 -878
  353. package/dist/collection/components/ic-date-picker/ic-date-picker.js +0 -1506
  354. package/dist/collection/components/ic-date-picker/ic-date-picker.js.map +0 -1
  355. package/dist/collection/components/ic-date-picker/ic-day-button.js +0 -36
  356. package/dist/collection/components/ic-date-picker/ic-day-button.js.map +0 -1
  357. package/dist/collection/components/ic-date-picker/ic-month-picker.js +0 -29
  358. package/dist/collection/components/ic-date-picker/ic-month-picker.js.map +0 -1
  359. package/dist/collection/components/ic-date-picker/ic-year-picker.js +0 -39
  360. package/dist/collection/components/ic-date-picker/ic-year-picker.js.map +0 -1
  361. package/dist/collection/components/ic-date-picker/story-data.js +0 -148
  362. package/dist/collection/components/ic-date-picker/story-data.js.map +0 -1
  363. package/dist/collection/components/ic-date-picker/test/a11y/ic-date-picker.test.a11y.js.map +0 -1
  364. package/dist/collection/components/ic-date-picker/test/basic/ic-date-picker-utils.spec.js +0 -207
  365. package/dist/collection/components/ic-date-picker/test/basic/ic-date-picker-utils.spec.js.map +0 -1
  366. package/dist/collection/components/ic-date-picker/test/basic/ic-date-picker.spec.js +0 -962
  367. package/dist/collection/components/ic-date-picker/test/basic/ic-date-picker.spec.js.map +0 -1
  368. package/dist/collection/utils/date-helpers.js +0 -133
  369. package/dist/collection/utils/date-helpers.js.map +0 -1
  370. package/dist/components/ic-date-input.js +0 -8
  371. package/dist/components/ic-date-input.js.map +0 -1
  372. package/dist/components/ic-date-input2.js +0 -1318
  373. package/dist/components/ic-date-input2.js.map +0 -1
  374. package/dist/components/ic-date-picker.d.ts +0 -11
  375. package/dist/components/ic-date-picker.js +0 -1171
  376. package/dist/components/ic-date-picker.js.map +0 -1
  377. package/dist/core/p-1857e9a7.entry.js +0 -2
  378. package/dist/core/p-1857e9a7.entry.js.map +0 -1
  379. package/dist/core/p-2c3cdfa3.js +0 -2
  380. package/dist/core/p-2c3cdfa3.js.map +0 -1
  381. package/dist/core/p-33dd24eb.js +0 -2
  382. package/dist/core/p-33dd24eb.js.map +0 -1
  383. package/dist/core/p-40ba5a51.entry.js +0 -2
  384. package/dist/core/p-40ba5a51.entry.js.map +0 -1
  385. package/dist/core/p-4f0178a7.entry.js +0 -2
  386. package/dist/core/p-5d6750ea.entry.js +0 -2
  387. package/dist/core/p-5d6750ea.entry.js.map +0 -1
  388. package/dist/core/p-7c0f24b6.entry.js +0 -2
  389. package/dist/core/p-7c0f24b6.entry.js.map +0 -1
  390. package/dist/core/p-9f9b3151.entry.js +0 -2
  391. package/dist/core/p-a22fd338.entry.js +0 -2
  392. package/dist/core/p-a22fd338.entry.js.map +0 -1
  393. package/dist/core/p-aabab75f.entry.js +0 -2
  394. package/dist/core/p-aabab75f.entry.js.map +0 -1
  395. package/dist/core/p-b1e3f20a.entry.js +0 -2
  396. package/dist/core/p-c680c7f9.entry.js +0 -2
  397. package/dist/core/p-c680c7f9.entry.js.map +0 -1
  398. package/dist/core/p-c7590421.entry.js +0 -2
  399. package/dist/core/p-c7590421.entry.js.map +0 -1
  400. package/dist/core/p-cd799087.js +0 -2
  401. package/dist/core/p-cd799087.js.map +0 -1
  402. package/dist/core/p-d184d9e2.entry.js +0 -2
  403. package/dist/core/p-d184d9e2.entry.js.map +0 -1
  404. package/dist/core/p-df5d7aa4.entry.js +0 -2
  405. package/dist/core/p-df5d7aa4.entry.js.map +0 -1
  406. package/dist/core/p-e189f1d0.entry.js +0 -2
  407. package/dist/core/p-e189f1d0.entry.js.map +0 -1
  408. package/dist/core/p-e33bdca9.entry.js +0 -2
  409. package/dist/core/p-e33bdca9.entry.js.map +0 -1
  410. package/dist/core/p-eeacd610.entry.js +0 -2
  411. package/dist/core/p-eeacd610.entry.js.map +0 -1
  412. package/dist/core/p-f24c9356.entry.js +0 -2
  413. package/dist/core/p-f24c9356.entry.js.map +0 -1
  414. package/dist/core/p-f5d5f0be.entry.js +0 -2
  415. package/dist/core/p-f5d5f0be.entry.js.map +0 -1
  416. package/dist/core/p-f62cd6d2.entry.js +0 -2
  417. package/dist/core/p-f62cd6d2.entry.js.map +0 -1
  418. package/dist/esm/date-helpers-0e5e32a7.js +0 -136
  419. package/dist/esm/date-helpers-0e5e32a7.js.map +0 -1
  420. package/dist/esm/helpers-b5f64263.js.map +0 -1
  421. package/dist/esm/helpers-f328a7b6.js.map +0 -1
  422. package/dist/esm/ic-date-input.entry.js +0 -1085
  423. package/dist/esm/ic-date-input.entry.js.map +0 -1
  424. package/dist/esm/ic-date-picker.entry.js +0 -1046
  425. package/dist/esm/ic-date-picker.entry.js.map +0 -1
  426. package/dist/esm/ic-empty-state.entry.js.map +0 -1
  427. package/dist/esm/ic-input-component-container_4.entry.js +0 -143
  428. package/dist/esm/ic-input-component-container_4.entry.js.map +0 -1
  429. package/dist/esm/ic-menu.entry.js.map +0 -1
  430. package/dist/esm/ic-pagination-bar.entry.js.map +0 -1
  431. package/dist/types/components/ic-date-input/ic-date-input.d.ts +0 -248
  432. package/dist/types/components/ic-date-input/story-data.d.ts +0 -1
  433. package/dist/types/components/ic-date-input/test/helpers/ic-date-input.d.ts +0 -23
  434. package/dist/types/components/ic-date-picker/ic-date-picker.d.ts +0 -251
  435. package/dist/types/components/ic-date-picker/ic-day-button.d.ts +0 -16
  436. package/dist/types/components/ic-date-picker/ic-month-picker.d.ts +0 -14
  437. package/dist/types/components/ic-date-picker/ic-year-picker.d.ts +0 -16
  438. package/dist/types/components/ic-date-picker/story-data.d.ts +0 -22
  439. package/dist/types/utils/date-helpers.d.ts +0 -22
  440. /package/dist/core/{p-e9e7a7f9.entry.js.map → p-10fb4c46.entry.js.map} +0 -0
  441. /package/dist/core/{p-21da96a9.entry.js.map → p-1ca332ca.entry.js.map} +0 -0
  442. /package/dist/core/{p-170f6408.entry.js.map → p-204ace96.entry.js.map} +0 -0
  443. /package/dist/core/{p-2f31bb92.entry.js.map → p-2eac7dcc.entry.js.map} +0 -0
  444. /package/dist/core/{p-a16c6ff3.entry.js.map → p-4baa0916.entry.js.map} +0 -0
  445. /package/dist/core/{p-655df7fe.entry.js.map → p-4f413fc0.entry.js.map} +0 -0
  446. /package/dist/core/{p-56d01bdb.entry.js.map → p-595be57d.entry.js.map} +0 -0
  447. /package/dist/core/{p-23a13636.entry.js.map → p-5ae93c16.entry.js.map} +0 -0
  448. /package/dist/core/{p-0b32ba5b.entry.js.map → p-5e0c830b.entry.js.map} +0 -0
  449. /package/dist/core/{p-95374ba1.entry.js.map → p-624d4f5f.entry.js.map} +0 -0
  450. /package/dist/core/{p-df63896a.entry.js.map → p-6933f8e9.entry.js.map} +0 -0
  451. /package/dist/core/{p-70b48a14.entry.js.map → p-6c3044b6.entry.js.map} +0 -0
  452. /package/dist/core/{p-02d0ecd2.entry.js.map → p-75dac3d1.entry.js.map} +0 -0
  453. /package/dist/core/{p-a6e9a8e7.entry.js.map → p-7ef8d616.entry.js.map} +0 -0
  454. /package/dist/core/{p-0388b484.entry.js.map → p-81ddc39d.entry.js.map} +0 -0
  455. /package/dist/core/{p-6e32683c.entry.js.map → p-869954a2.entry.js.map} +0 -0
  456. /package/dist/core/{p-e2155d7f.entry.js.map → p-88d54b72.entry.js.map} +0 -0
  457. /package/dist/core/{p-98c8d46a.entry.js.map → p-8b08d8fe.entry.js.map} +0 -0
  458. /package/dist/core/{p-0080bbce.entry.js.map → p-917c5721.entry.js.map} +0 -0
  459. /package/dist/core/{p-7373beb0.entry.js.map → p-a0f8efb2.entry.js.map} +0 -0
  460. /package/dist/core/{p-1f1b4b8b.entry.js.map → p-a31031a5.entry.js.map} +0 -0
  461. /package/dist/core/{p-221d03e1.entry.js.map → p-a434c3d4.entry.js.map} +0 -0
  462. /package/dist/core/{p-25a458bf.entry.js.map → p-a43c12cd.entry.js.map} +0 -0
  463. /package/dist/core/{p-31fdb740.entry.js.map → p-a50c3b9e.entry.js.map} +0 -0
  464. /package/dist/core/{p-65a8c1d6.entry.js.map → p-ab09986c.entry.js.map} +0 -0
  465. /package/dist/core/{p-e21083c8.entry.js.map → p-b82dcc29.entry.js.map} +0 -0
  466. /package/dist/core/{p-b3ce9fe4.entry.js.map → p-c34848da.entry.js.map} +0 -0
  467. /package/dist/core/{p-8f1aa87d.entry.js.map → p-d8469ac0.entry.js.map} +0 -0
  468. /package/dist/core/{p-75a2cdac.entry.js.map → p-db9c03c0.entry.js.map} +0 -0
  469. /package/dist/core/{p-fb58d1d1.entry.js.map → p-e3997d60.entry.js.map} +0 -0
  470. /package/dist/core/{p-06aef486.entry.js.map → p-e834344e.entry.js.map} +0 -0
  471. /package/dist/core/{p-ee09f1b3.entry.js.map → p-f3c840cd.entry.js.map} +0 -0
  472. /package/dist/core/{p-b1e646e4.entry.js.map → p-f7a14c01.entry.js.map} +0 -0
  473. /package/dist/core/{p-ce898d90.entry.js.map → p-f843da01.entry.js.map} +0 -0
  474. /package/dist/types/components/{ic-date-picker/test/a11y/ic-date-picker.test.a11y.d.ts → ic-data-table-title-bar/test/a11y/ic-data-table-title-bar.test.a11y.d.ts} +0 -0
@@ -1,1089 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-4cf27b16.js');
6
- const helpers = require('./helpers-f75cf7cf.js');
7
- const dateHelpers = require('./date-helpers-c9551119.js');
8
-
9
- const Clear = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
10
- <path d="M15.8327 5.34199L14.6577 4.16699L9.99935 8.82533L5.34102 4.16699L4.16602 5.34199L8.82435 10.0003L4.16602 14.6587L5.34102 15.8337L9.99935 11.1753L14.6577 15.8337L15.8327 14.6587L11.1743 10.0003L15.8327 5.34199Z" fill="currentColor"/>
11
- </svg>
12
- `;
13
-
14
- const Calendar = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
15
- <path d="M16.6667 2.50004H15.8334V0.833374H14.1667V2.50004H5.83342V0.833374H4.16675V2.50004H3.33341C2.41675 2.50004 1.66675 3.25004 1.66675 4.16671V17.5C1.66675 18.4167 2.41675 19.1667 3.33341 19.1667H16.6667C17.5834 19.1667 18.3334 18.4167 18.3334 17.5V4.16671C18.3334 3.25004 17.5834 2.50004 16.6667 2.50004ZM16.6667 17.5H3.33341V6.66671H16.6667V17.5Z" fill="currentColor"/>
16
- </svg>`;
17
-
18
- const icDateInputCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}input{border:0;height:100%;padding:0;outline:none;background:none;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}ic-input-component-container{cursor:text}ic-input-component-container,ic-input-component-container:hover{color:var(--ic-color-tertiary-text)}.focus-indicator{padding:var(--ic-space-xxxs) var(--ic-space-xs);align-items:center}.day-input{width:1.438rem}.month-input{width:1.813rem}.year-input,.year-input.fit-to-value{width:2.313rem}.fit-to-value{width:1.25rem}.sr-only{position:absolute;left:-9999px}.input-container{width:100%;display:flex;justify-content:space-between;align-items:center;position:relative}.action-buttons{display:flex;align-items:center}.show-calendar-button-wrapper{display:flex;justify-content:center;align-items:center}.clear-button,.calendar-button{border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n border-radius var(--ic-easing-transition);margin:0}.clear-button.hidden{display:none}.clear-button:focus,.calendar-button:focus,.clear-button:active,.calendar-button:active{background-color:var(--ic-focus-blue) !important;box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow) !important;border-radius:0.25rem}.clear-button:focus,.calendar-button:focus,.clear-button:active *,.calendar-button:active *{fill:var(--ic-architectural-white)}.divider{margin:0 var(--ic-space-xxs);width:var(--ic-space-1px);background-color:var(--ic-architectural-400);border-radius:var(--ic-space-1px)}.divider.small{height:var(--ic-space-md)}.divider.default{height:calc(var(--ic-space-sm) + var(--ic-space-xs))}.divider.large{height:var(--ic-space-lg)}";
19
-
20
- let inputIds = 0;
21
- const DateInput = class {
22
- constructor(hostRef) {
23
- index.registerInstance(this, hostRef);
24
- this.calendarButtonClicked = index.createEvent(this, "calendarButtonClicked", 7);
25
- this.icBlur = index.createEvent(this, "icBlur", 7);
26
- this.icChange = index.createEvent(this, "icChange", 7);
27
- this.icFocus = index.createEvent(this, "icFocus", 7);
28
- this.ARIA_INVALID = "aria-invalid";
29
- this.ARIA_LABEL = "aria-label";
30
- this.ARIA_LABELLED_BY = "aria-labelledby";
31
- this.EVENT_OBJECT_STRING = "[object Event]";
32
- this.FIT_TO_VALUE = "fit-to-value";
33
- this.initialValue = this.value;
34
- this.INPUT_EVENT_OBJECT_STRING = "[object InputEvent]";
35
- this.inputsInOrder = [];
36
- this.isAfterMax = false;
37
- this.isBeforeMin = false;
38
- this.isDateSetFromKeyboardEvent = false;
39
- this.isDisabledDate = false;
40
- this.isValidDay = true;
41
- this.isValidMonth = true;
42
- this.isValidDate = true;
43
- this.isZuluTime = false;
44
- this.KEYBOARD_EVENT_OBJECT_STRING = "[object KeyboardEvent]";
45
- this.MAX_DAY = 31;
46
- this.MAX_MONTH = 12;
47
- this.previousEmittedDate = undefined;
48
- this.previousSelectedDate = null;
49
- this.selectedDate = null;
50
- this.setInputPasteValue = (input, pastedValue) => {
51
- const inputEl = input;
52
- inputEl.value = pastedValue;
53
- inputEl.classList.add(this.FIT_TO_VALUE);
54
- };
55
- this.checkSingleCopiedValueIsValid = (input, pastedValue) => {
56
- let isValid = false;
57
- const value = Number(pastedValue);
58
- switch (input) {
59
- case this.dayInputEl:
60
- isValid = value >= 1 && value <= this.MAX_DAY;
61
- break;
62
- case this.monthInputEl:
63
- isValid = value >= 1 && value <= this.MAX_MONTH;
64
- break;
65
- case this.yearInputEl:
66
- isValid = true;
67
- break;
68
- default:
69
- isValid = false;
70
- break;
71
- }
72
- return isValid;
73
- };
74
- /**
75
- * Using Object.prototype.string to determine type if event from user
76
- * @param event - event object used to differentiate keyboard, generic or input event
77
- * @returns boolean
78
- */
79
- this.isKeyboardOrEvent = (event) => {
80
- return (Object.prototype.toString.call(event) === this.EVENT_OBJECT_STRING ||
81
- Object.prototype.toString.call(event) ===
82
- this.KEYBOARD_EVENT_OBJECT_STRING);
83
- };
84
- this.setDateValidity = () => {
85
- if (!helpers.isEmptyString(this.day)) {
86
- this.isValidDay = +this.day > this.MAX_DAY ? false : true;
87
- }
88
- else {
89
- this.isValidDay = true;
90
- }
91
- if (!helpers.isEmptyString(this.month)) {
92
- this.isValidMonth = +this.month > this.MAX_MONTH ? false : true;
93
- }
94
- else {
95
- this.isValidMonth = true;
96
- }
97
- };
98
- this.handleInput = (event) => {
99
- const inputEvent = event;
100
- const input = event.target;
101
- if (input !== this.yearInputEl) {
102
- // Only auto-format if input event is not a character being deleted
103
- // and not as user is changing value using up / down keys
104
- if (inputEvent.inputType !== "deleteContentBackward" &&
105
- !this.preventAutoFormatting) {
106
- if (input.value.length === 1 &&
107
- ((input === this.dayInputEl && +input.value >= 4) ||
108
- (input === this.monthInputEl && +input.value >= 2)) &&
109
- +input.value <= 9) {
110
- this.setInputValue(input);
111
- this.notifyScreenReader(input, event);
112
- this.moveToNextInput(input);
113
- }
114
- if (input.value.length === 2) {
115
- if (+input.value === 0) {
116
- input.value = "01";
117
- }
118
- this.setInputValue(input);
119
- this.setPreventInput(input, true);
120
- this.notifyScreenReader(input, event);
121
- this.moveToNextInput(input);
122
- }
123
- else {
124
- this.setPreventInput(input, false);
125
- }
126
- }
127
- else if (this.preventAutoFormatting) {
128
- /**
129
- * Using arrow keys prevents auto formatting so need to deal with
130
- * switching from arrow keys to inputting numbers
131
- **/
132
- if (input.value.length === 2 && !this.isKeyboardOrEvent(event)) {
133
- this.setInputValue(input);
134
- this.setPreventInput(input, true);
135
- this.moveToNextInput(input);
136
- }
137
- else {
138
- this.setInputValue(input);
139
- }
140
- }
141
- if (input.value.length !== 2) {
142
- this.setPreventInput(input, false);
143
- }
144
- }
145
- else {
146
- if (input.value.length === 4) {
147
- this.setInputValue(input);
148
- if (Object.prototype.toString.call(event) !== this.EVENT_OBJECT_STRING) {
149
- this.moveToNextInput(input);
150
- }
151
- this.setPreventInput(input, true);
152
- }
153
- else {
154
- this.setInputValue(input, true);
155
- this.setPreventInput(input, false);
156
- }
157
- }
158
- // Add / remove class to make input width match size of value i.e. 2 digits' width for day / month, 4 for year
159
- this.setFitToValueStyling(input);
160
- if (input.value.length === 0) {
161
- this.setInputValue(input, true);
162
- this.setValidationMessage();
163
- }
164
- this.notifyScreenReader(input, event);
165
- };
166
- this.handleKeyDown = (event, isInputPrevented) => {
167
- const input = event.target;
168
- const eventKey = event.key.toLowerCase();
169
- // Regex required due to FF allowing all characters as values for number text field.
170
- const regex = /-?\d*\.?\d+(e[-+]?\d+)?|[/-]|arrowup|arrowdown|arrowleft|arrowright|shift|tab|backspace|delete/;
171
- if (!regex.test(eventKey) &&
172
- !((event.ctrlKey || event.metaKey) &&
173
- (eventKey === "v" || eventKey === "c"))) {
174
- event.preventDefault();
175
- }
176
- switch (eventKey) {
177
- case "/":
178
- case "-":
179
- case ".":
180
- event.preventDefault();
181
- this.setPasteInvalidText();
182
- this.moveToNextInput(input);
183
- break;
184
- case "arrowright":
185
- case "arrowleft":
186
- event.preventDefault();
187
- this.handleLeftRightArrowKeyPress(input, eventKey);
188
- break;
189
- case "arrowup":
190
- case "arrowdown":
191
- this.preventAutoFormatting = true;
192
- this.handleUpDownArrowKeyPress(input, event);
193
- break;
194
- }
195
- this.preventInput(event, isInputPrevented);
196
- this.isDateSetFromKeyboardEvent = true;
197
- };
198
- this.handleFocus = (event) => {
199
- // Highlight / select all characters in input for easy replacement
200
- const input = event.target;
201
- input.select();
202
- };
203
- this.handleBlur = (event) => {
204
- const input = event.target;
205
- this.setPasteInvalidText();
206
- this.autocompleteInput(input);
207
- };
208
- this.handleLeftRightArrowKeyPress = (input, key) => {
209
- if (key === "arrowright") {
210
- this.moveToNextInput(input);
211
- }
212
- else {
213
- this.moveToPreviousInput(input);
214
- }
215
- this.setPasteInvalidText();
216
- };
217
- this.notifyScreenReaderSelectedDate = () => {
218
- const dayNames = helpers.stringEnumToArray(helpers.IcDayNames);
219
- const months = helpers.stringEnumToArray(helpers.IcDateInputMonths);
220
- this.selectedDateInfoEl.textContent = `Selected date: ${dayNames[this.selectedDate.getDay()]}, ${this.selectedDate.getDate()} ${months[this.selectedDate.getMonth()]} ${this.selectedDate.getFullYear()}`;
221
- };
222
- this.handleUpDownArrowKeyPress = (input, event) => {
223
- const minValue = input === this.yearInputEl ? 0 : 1;
224
- let maxValue;
225
- switch (input) {
226
- case this.dayInputEl:
227
- maxValue = this.MAX_DAY;
228
- break;
229
- case this.monthInputEl:
230
- maxValue = this.MAX_MONTH;
231
- break;
232
- case this.yearInputEl:
233
- maxValue = 9999;
234
- }
235
- // Make value loop round when min / max reached
236
- if (input === null || input === void 0 ? void 0 : input.value) {
237
- if (event.key === "ArrowUp") {
238
- if (+input.value === maxValue) {
239
- event.preventDefault();
240
- input.value = `0${minValue}`;
241
- }
242
- else {
243
- input.value =
244
- +input.value + 1 < 10
245
- ? `0${+input.value + 1}`
246
- : (+input.value + 1).toString();
247
- }
248
- this.notifyScreenReader(input, event);
249
- }
250
- if (event.key === "ArrowDown") {
251
- if (+input.value === minValue) {
252
- event.preventDefault();
253
- input.value = maxValue.toString();
254
- }
255
- else {
256
- input.value =
257
- +input.value - 1 < 10
258
- ? `0${+input.value - 1}`
259
- : (+input.value - 1).toString();
260
- }
261
- this.notifyScreenReader(input, event);
262
- }
263
- }
264
- else {
265
- if (event.key === "ArrowDown") {
266
- event.preventDefault();
267
- if (input === this.yearInputEl) {
268
- input.value = new Date().getFullYear().toString();
269
- }
270
- else {
271
- input.value = maxValue.toString();
272
- }
273
- this.notifyScreenReader(input, event);
274
- }
275
- else if (event.key === "ArrowUp") {
276
- event.preventDefault();
277
- if (input === this.yearInputEl) {
278
- input.value = new Date().getFullYear().toString();
279
- }
280
- else {
281
- input.value = `0${minValue}`;
282
- }
283
- this.notifyScreenReader(input, event);
284
- }
285
- }
286
- this.setInputValue(input);
287
- this.setFitToValueStyling(input);
288
- };
289
- this.handleDateChange = (force) => {
290
- // Prevent icChange being emitted when each individual input is changed
291
- // This method is used within componentWillUpdate instead of using @Watch('value');
292
- if (force || !dateHelpers.dateMatches(this.selectedDate, this.previousSelectedDate)) {
293
- if (this.value) {
294
- this.inputsInOrder.forEach((input) => {
295
- input.classList.add(this.FIT_TO_VALUE);
296
- });
297
- }
298
- if (this.day && this.month && this.year && this.invalidDateText === "") {
299
- this.setValueAndEmitChange(this.selectedDate);
300
- this.notifyScreenReaderSelectedDate();
301
- }
302
- else if (!(this.selectedDate === null && this.previousSelectedDate === null)) {
303
- this.setValueAndEmitChange(null);
304
- this.selectedDateInfoEl.textContent = "";
305
- }
306
- this.previousSelectedDate = this.selectedDate;
307
- if (!this.isDateSetFromKeyboardEvent) {
308
- this.updateInputValues(this.day, this.month, this.year);
309
- }
310
- }
311
- };
312
- this.slicePastedDate = (valueLength, datePart) => {
313
- return datePart.length > valueLength
314
- ? datePart.slice(0, valueLength)
315
- : datePart;
316
- };
317
- this.isPastedStringDateValid = (value) => {
318
- if (/\d+-\d+-\d+$/.test(value) ||
319
- /\d+\/\d+\/\d+/.test(value) ||
320
- /\d+\.\d+\.\d+/.test(value)) {
321
- return true;
322
- }
323
- if (/[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}(?::[0-9]{2}(?:\.\d+)?)?Z/.test(value)) {
324
- this.isZuluTime = true;
325
- return true;
326
- }
327
- return false;
328
- };
329
- // Set value of each input to value of pasted date part
330
- // Allows formats separated by '-' or '/'
331
- this.handlePaste = (event) => {
332
- event.preventDefault();
333
- const pastedValue = event.clipboardData.getData("Text");
334
- const isValidDate = this.isPastedStringDateValid(pastedValue);
335
- this.setPastedValueAndValidation(isValidDate, pastedValue, event);
336
- };
337
- this.setDate = (date) => {
338
- if (date === null || date === "" || date === undefined) {
339
- this.day = null;
340
- this.month = null;
341
- this.year = null;
342
- this.inputsInOrder.forEach((input) => {
343
- input.classList.remove(this.FIT_TO_VALUE);
344
- this.setPreventInput(input, false);
345
- });
346
- this.handleDateChange(true);
347
- }
348
- else {
349
- if (dateHelpers.isDateOrEpoch(date)) {
350
- let newDate;
351
- if (typeof date === "string") {
352
- // Checking if epoch date time
353
- newDate = new Date(+date);
354
- }
355
- else {
356
- newDate = date;
357
- }
358
- this.day = dateHelpers.convertToDoubleDigits(newDate.getDate());
359
- this.month = dateHelpers.convertToDoubleDigits(newDate.getMonth() + 1);
360
- this.year = newDate.getFullYear().toString();
361
- }
362
- else if (typeof date === "string") {
363
- const defaultDateArray = dateHelpers.splitStringDate(date, this.dateFormat);
364
- this.year = defaultDateArray[0];
365
- this.month = defaultDateArray[1];
366
- this.day = defaultDateArray[2];
367
- }
368
- }
369
- this.setValidationMessage();
370
- };
371
- this.formatMinMax = (date) => {
372
- let formattedDate;
373
- const day = dateHelpers.convertToDoubleDigits(date.getDate());
374
- const month = dateHelpers.convertToDoubleDigits(date.getMonth() + 1);
375
- const year = date.getFullYear();
376
- switch (this.dateFormat) {
377
- case "DD/MM/YYYY":
378
- formattedDate = `${day}/${month}/${year}`;
379
- break;
380
- case "MM/DD/YYYY":
381
- formattedDate = `${month}/${day}/${year}`;
382
- break;
383
- case "YYYY/MM/DD":
384
- formattedDate = `${year}/${month}/${day}`;
385
- break;
386
- }
387
- return formattedDate;
388
- };
389
- this.updateInputValues = (day, month, year) => {
390
- this.dayInputEl.value = day;
391
- this.monthInputEl.value = month;
392
- this.yearInputEl.value = year;
393
- };
394
- // Set value in state based on input
395
- this.setInputValue = (input, clear = false) => {
396
- const newValue = clear ? "" : input.value;
397
- switch (input) {
398
- case this.dayInputEl:
399
- this.day = newValue;
400
- break;
401
- case this.monthInputEl:
402
- this.month = newValue;
403
- break;
404
- case this.yearInputEl:
405
- if (this.year !== newValue) {
406
- this.year = newValue;
407
- }
408
- }
409
- this.setValidationMessage();
410
- };
411
- this.setValidationMessage = () => {
412
- this.setDateValidity();
413
- if (!helpers.isEmptyString(this.day) &&
414
- !helpers.isEmptyString(this.month) &&
415
- !helpers.isEmptyString(this.year)) {
416
- // Check whether date actually exists
417
- // (used https://www.hectane.com/blog/javascript-date-validation-with-leap-year)
418
- this.selectedDate = this.convertToDate(this.year, this.month, this.day);
419
- this.isValidDate =
420
- +this.selectedDate !== 0 && this.selectedDate.getDate() == +this.day;
421
- this.isDisabledDate = this.isSelectedDateDisabled();
422
- if (!this.isValidDate || this.isDisabledDate) {
423
- this.inputsInOrder.forEach((input) => input.setAttribute(this.ARIA_INVALID, "true"));
424
- }
425
- else {
426
- this.inputsInOrder.forEach((input) => input.removeAttribute(this.ARIA_INVALID));
427
- }
428
- }
429
- else {
430
- this.selectedDate = null;
431
- }
432
- if (!(this.isValidDay && this.isValidMonth && this.isValidDate)) {
433
- this.invalidDateText = "Please enter a valid date.";
434
- }
435
- else if (this.isDisabledDate && this.selectedDate !== null) {
436
- if (this.isBeforeMin) {
437
- if (this.disablePast) {
438
- this.invalidDateText = this.disablePastMessage;
439
- }
440
- else {
441
- this.invalidDateText = `Please enter a date after ${this.formatMinMax(this.minDate)}.`;
442
- }
443
- }
444
- else if (this.isAfterMax) {
445
- if (this.disableFuture) {
446
- this.invalidDateText = this.disableFutureMessage;
447
- }
448
- else {
449
- this.invalidDateText = `Please enter a date before ${this.formatMinMax(this.maxDate)}.`;
450
- }
451
- }
452
- else if (this.disableDays.length !== 0) {
453
- this.invalidDateText = this.disableDaysMessage;
454
- }
455
- else {
456
- if (this.disablePast) {
457
- this.invalidDateText = this.disablePastMessage;
458
- }
459
- if (this.disableFuture) {
460
- this.invalidDateText = this.disableFutureMessage;
461
- }
462
- }
463
- }
464
- else {
465
- this.invalidDateText = "";
466
- }
467
- };
468
- // Set refs to the input elements in the order they are displayed (based on the dateFormat)
469
- this.setInputsInOrder = () => {
470
- const inputs = this.el.shadowRoot.querySelectorAll("input");
471
- inputs.forEach((input) => this.inputsInOrder.push(input));
472
- };
473
- // Includes text usually added using aria-describedby
474
- // (which doesn't work on input component container)
475
- this.setAriaLabelledBy = () => {
476
- var _a;
477
- if (this.disabled &&
478
- !helpers.isEmptyString((_a = this.inputCompContainerEl) === null || _a === void 0 ? void 0 : _a.getAttribute(this.ARIA_LABELLED_BY))) {
479
- this.removeAriaLabelledBy();
480
- return;
481
- }
482
- if (this.disabled) {
483
- return;
484
- }
485
- const labelEl = this.el.shadowRoot.querySelector("label");
486
- const labelId = `${this.inputId}-label`;
487
- if (labelEl !== null && labelEl !== undefined) {
488
- labelEl.id = labelId;
489
- const hasValidation = (!helpers.isEmptyString(this.validationStatus) &&
490
- !helpers.isEmptyString(this.validationText)) ||
491
- !helpers.isEmptyString(this.invalidDateText);
492
- const labelledBy = `${labelId} ${this.screenReaderInfoId} ${helpers.getInputDescribedByText(this.inputId, this.helperText !== "" && this.helperText !== this.defaultHelperText, hasValidation)} ${this.selectedDate ? this.selectedDateInfoId : ""} ${this.assistiveHintId}`;
493
- this.inputCompContainerEl.setAttribute(this.ARIA_LABELLED_BY, labelledBy);
494
- }
495
- };
496
- // Sets boolean for each input, used to limit the number of characters within each field (2 for day / month, 4 for year)
497
- this.setPreventInput = (input, isPrevented) => {
498
- switch (input) {
499
- case this.dayInputEl:
500
- this.preventDayInput = isPrevented;
501
- break;
502
- case this.monthInputEl:
503
- this.preventMonthInput = isPrevented;
504
- break;
505
- case this.yearInputEl:
506
- this.preventYearInput = isPrevented;
507
- }
508
- };
509
- // Get input based on letter representing each date part ("D", "M" or "Y")
510
- // (retrieved from dateFormat)
511
- this.getInputFromDatePart = (datePart) => {
512
- const dayInput = (index.h("input", { class: "day-input", id: "day-input", ref: (el) => (this.dayInputEl = el), "aria-label": "day", placeholder: "DD", disabled: this.disabled, onPaste: this.handlePaste, inputmode: "number", pattern: "[0-9]*", onKeyDown: (event) => this.handleKeyDown(event, this.preventDayInput) }));
513
- const monthInput = (index.h("input", { id: "month-input", class: "month-input", ref: (el) => (this.monthInputEl = el), "aria-label": "month", placeholder: "MM", disabled: this.disabled, onPaste: this.handlePaste, inputmode: "number", pattern: "[0-9]*", onKeyDown: (event) => this.handleKeyDown(event, this.preventMonthInput) }));
514
- const yearInput = (index.h("input", { id: "year-input", class: "year-input", ref: (el) => (this.yearInputEl = el), "aria-label": "year", placeholder: "YYYY", maxLength: 4, disabled: this.disabled, onPaste: this.handlePaste, inputmode: "number", pattern: "[0-9]*", onKeyDown: (event) => this.handleKeyDown(event, this.preventYearInput) }));
515
- let input;
516
- switch (datePart) {
517
- case "D":
518
- input = dayInput;
519
- break;
520
- case "M":
521
- input = monthInput;
522
- break;
523
- case "Y":
524
- input = yearInput;
525
- }
526
- return input;
527
- };
528
- // Get input elements in order of chosen date format
529
- this.getInputsInOrder = () => {
530
- const dateParts = this.dateFormat.split("/");
531
- const inputsInOrder = [];
532
- dateParts.forEach((part) => {
533
- inputsInOrder.push(this.getInputFromDatePart(part.substring(0, 1)));
534
- });
535
- return inputsInOrder;
536
- };
537
- // To add to the end of assistive hint to make it clearer that each date part has its own input
538
- // that can be changed individually
539
- this.getDescOfInputsOrder = () => {
540
- let description;
541
- switch (this.dateFormat) {
542
- case "DD/MM/YYYY":
543
- description = "day, month, and year";
544
- break;
545
- case "MM/DD/YYYY":
546
- description = "month, day, and year";
547
- break;
548
- case "YYYY/MM/DD":
549
- description = "year, month, and day";
550
- }
551
- return description;
552
- };
553
- // Add 'required' or 'invalid data' to span used in aria-labelledby
554
- // Many ARIA attributes aren't read out by screen reader when on the input component container
555
- this.getScreenReaderInfo = (validationStatus) => {
556
- let inputDescriptors = "";
557
- if (this.required) {
558
- inputDescriptors += "required";
559
- }
560
- if (validationStatus === helpers.IcInformationStatus.Error) {
561
- inputDescriptors += " invalid data";
562
- }
563
- return inputDescriptors === "" ? "" : inputDescriptors + ", ";
564
- };
565
- // Prevent non-number characters being entered
566
- // ('e' or '.' - which are usually allowed in <input type="number">)
567
- // And limit the number of characters within each field (2 for day / month, 4 for year)
568
- // (because 'maxlength' doesn't work on <input type="number">)
569
- this.preventInput = (event, isInputPrevented) => {
570
- const key = event.key;
571
- const input = event.target;
572
- let selectedString;
573
- if (input) {
574
- selectedString = input.value.substring(input.selectionStart, input.selectionEnd);
575
- }
576
- if (key === "e" ||
577
- key === "." ||
578
- key === "-" ||
579
- (event.key >= "0" &&
580
- event.key <= "9" &&
581
- isInputPrevented &&
582
- !selectedString)) {
583
- event.preventDefault();
584
- }
585
- };
586
- // Get whether date has been disabled using disableFuture or disablePast prop, but always allow current day
587
- // Consider using dateClamp and inDateRange
588
- this.isSelectedDateDisabled = () => {
589
- const currentDate = new Date();
590
- this.isAfterMax = false;
591
- this.isBeforeMin = false;
592
- let disabled = false;
593
- const isNotToday = this.selectedDate.toDateString() !== currentDate.toDateString();
594
- if (this.minDate && this.selectedDate < this.minDate && isNotToday) {
595
- this.isBeforeMin = true;
596
- disabled = true;
597
- }
598
- if (this.maxDate && this.selectedDate > this.maxDate && isNotToday) {
599
- this.isAfterMax = true;
600
- disabled = true;
601
- }
602
- if (this.disableDays.includes(this.selectedDate.getDay())) {
603
- disabled = true;
604
- }
605
- if (((this.disablePast && this.selectedDate < currentDate) ||
606
- (this.disableFuture && this.selectedDate > currentDate)) &&
607
- isNotToday) {
608
- disabled = true;
609
- }
610
- return disabled;
611
- };
612
- this.moveToNextInput = (currentInput) => {
613
- const currentInputPos = this.inputsInOrder.findIndex((input) => input === currentInput);
614
- const nextInput = this.inputsInOrder[currentInputPos + 1];
615
- this.preventAutoFormatting = false;
616
- if (nextInput) {
617
- nextInput.focus();
618
- }
619
- };
620
- this.moveToPreviousInput = (currentInput) => {
621
- const currentInputPos = this.inputsInOrder.findIndex((input) => input === currentInput);
622
- this.preventAutoFormatting = false;
623
- if (this.inputsInOrder[currentInputPos - 1]) {
624
- this.inputsInOrder[currentInputPos - 1].focus();
625
- }
626
- };
627
- this.autocompleteInput = (input) => {
628
- if (input === this.yearInputEl) {
629
- this.autocompleteYear();
630
- }
631
- else {
632
- const inputValue = input.value;
633
- // Autocomplete input as 2 characters (leading zero) when only 1 character entered (for day and month)
634
- if (inputValue.length === 1) {
635
- if (+inputValue === 0) {
636
- input.value = "01";
637
- }
638
- else {
639
- input.value = `0${inputValue}`;
640
- }
641
- }
642
- }
643
- if (input.value) {
644
- this.setInputValue(input);
645
- }
646
- };
647
- // Autocomplete year as current millennium when fewer than 4 characters entered
648
- this.autocompleteYear = () => {
649
- const inputValue = this.yearInputEl.value;
650
- const yearNumbers = ["2", "0", "0"];
651
- let autocompletedInput = "";
652
- if (inputValue) {
653
- yearNumbers.forEach((number, index) => {
654
- if (inputValue.length + index <= 3) {
655
- autocompletedInput += number;
656
- }
657
- });
658
- this.yearInputEl.value = `${autocompletedInput}${inputValue}`;
659
- }
660
- };
661
- this.convertToDate = (year, month, day) => {
662
- if (!helpers.isEmptyString(year) && !helpers.isEmptyString(month) && !helpers.isEmptyString(day)) {
663
- return new Date(+year, +month - 1, +day);
664
- }
665
- else {
666
- return null;
667
- }
668
- };
669
- this.handleHostBlur = () => {
670
- this.removeLabelledBy = false;
671
- this.icBlur.emit({ value: this.selectedDate });
672
- };
673
- this.handleHostFocus = () => {
674
- var _a;
675
- if ((_a = this.el.shadowRoot.activeElement) === null || _a === void 0 ? void 0 : _a.id.match(/(day|month|year)-input$/)) {
676
- this.removeLabelledBy = false;
677
- }
678
- else {
679
- this.removeLabelledBy = true;
680
- }
681
- this.icFocus.emit({ value: this.selectedDate });
682
- };
683
- this.handleFormReset = () => {
684
- // Get the initial value and populate day, month and year again.
685
- this.setDate(this.initialValue);
686
- this.setValidationMessage();
687
- this.handleDateChange(false);
688
- };
689
- this.getAriaLabel = (input) => {
690
- return input.getAttribute(this.ARIA_LABEL);
691
- };
692
- this.notifyScreenReaderArrowKeys = (input) => {
693
- const liveRegion = this.el.shadowRoot.querySelector("#live-region");
694
- let announcement = "";
695
- const ariaLabel = this.getAriaLabel(input);
696
- if (liveRegion && input.value) {
697
- if (input === this.monthInputEl &&
698
- !!helpers.IcDateInputMonths[+input.value - 1]) {
699
- announcement = `${input.value} - ${helpers.IcDateInputMonths[+input.value - 1]}, ${ariaLabel}`;
700
- }
701
- if (input === this.dayInputEl || input === this.yearInputEl) {
702
- announcement = `${input.value}, ${ariaLabel}`;
703
- }
704
- liveRegion.textContent = announcement;
705
- }
706
- };
707
- this.notifyScreenReaderInput = (input, liveRegion) => {
708
- let announcement = "";
709
- const ariaLabel = this.getAriaLabel(input);
710
- if (input === this.dayInputEl || input === this.monthInputEl) {
711
- if (input.value.length === 2) {
712
- if (input === this.monthInputEl &&
713
- !!helpers.IcDateInputMonths[+input.value - 1] &&
714
- this.isValidMonth) {
715
- announcement = `${input.value} - ${helpers.IcDateInputMonths[+input.value - 1]}, ${ariaLabel}`;
716
- }
717
- if (input === this.dayInputEl && this.isValidDay) {
718
- announcement = `${input.value}, ${ariaLabel}`;
719
- }
720
- }
721
- else {
722
- announcement = "";
723
- }
724
- }
725
- else {
726
- if (input.value.length === 4) {
727
- announcement = `${input.value}, ${ariaLabel}`;
728
- }
729
- else {
730
- announcement = "";
731
- }
732
- }
733
- liveRegion.textContent = announcement;
734
- };
735
- this.setFitToValueStyling = (input) => {
736
- if (input.value) {
737
- input.classList.add(this.FIT_TO_VALUE);
738
- }
739
- else {
740
- input.classList.remove(this.FIT_TO_VALUE);
741
- }
742
- };
743
- this.setAriaInvalid = (validDay, validMonth, validDate, disabledDate) => {
744
- if (this.inputsInOrder.length) {
745
- this.inputsInOrder.forEach((input) => {
746
- input.removeAttribute(this.ARIA_INVALID);
747
- });
748
- if (!validDay) {
749
- this.dayInputEl.setAttribute(this.ARIA_INVALID, "true");
750
- }
751
- if (!validMonth) {
752
- this.monthInputEl.setAttribute(this.ARIA_INVALID, "true");
753
- }
754
- if (!validDate || disabledDate) {
755
- this.inputsInOrder.forEach((input) => {
756
- input.setAttribute(this.ARIA_INVALID, "true");
757
- });
758
- }
759
- }
760
- };
761
- this.handleClear = () => {
762
- this.inputsInOrder.forEach((input) => {
763
- input.classList.remove(this.FIT_TO_VALUE);
764
- this.setInputValue(input, true);
765
- this.setPreventInput(input, false);
766
- });
767
- this.isDateSetFromKeyboardEvent = false;
768
- this.setValidationMessage();
769
- this.handleDateChange(true);
770
- this.inputsInOrder[0].focus();
771
- };
772
- this.handleCalendarOpen = (ev) => {
773
- var _a, _b;
774
- ev.stopImmediatePropagation();
775
- (_a = this.calendarButtonEl) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector("ic-tooltip").displayTooltip(false);
776
- this.calendarButtonClicked.emit({ value: this.selectedDate });
777
- (_b = this.calendarButtonEl) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelector("ic-tooltip").displayTooltip(false);
778
- this.isDateSetFromKeyboardEvent = false;
779
- };
780
- this.setValueAndEmitChange = (value) => {
781
- if (!dateHelpers.dateMatches(new Date(this.value), value)) {
782
- this.emitIcChange(value);
783
- this.value = value;
784
- }
785
- };
786
- this.handleCalendarFocus = () => {
787
- this.calendarFocused = true;
788
- };
789
- this.handleCalendarBlur = () => {
790
- this.calendarFocused = false;
791
- };
792
- this.handleClearFocus = () => {
793
- this.removeLabelledBy = true;
794
- this.clearButtonFocused = true;
795
- };
796
- this.handleClearBlur = (ev) => {
797
- var _a;
798
- this.clearButtonFocused = false;
799
- if ((_a = ev.relatedTarget) === null || _a === void 0 ? void 0 : _a.id.match(/(day|year)-input$/)) {
800
- this.removeLabelledBy = false;
801
- return;
802
- }
803
- this.removeLabelledBy = true;
804
- };
805
- this.emitIcChange = (d) => {
806
- if (!(d === null && this.previousEmittedDate === null) &&
807
- !dateHelpers.dateMatches(d, this.previousEmittedDate)) {
808
- this.previousEmittedDate = d;
809
- this.icChange.emit({ value: d });
810
- }
811
- };
812
- this.day = "";
813
- this.invalidDateText = undefined;
814
- this.maxDate = undefined;
815
- this.minDate = undefined;
816
- this.month = "";
817
- this.year = "";
818
- this.calendarFocused = false;
819
- this.clearButtonFocused = false;
820
- this.removeLabelledBy = false;
821
- this.dateFormat = "DD/MM/YYYY";
822
- this.disabled = false;
823
- this.disableDays = [];
824
- this.disableDaysMessage = "The date you have selected is on a day of the week that is not allowed. Please select another date.";
825
- this.disableFuture = false;
826
- this.disableFutureMessage = "Dates in the future are not allowed. Please select a date in the past.";
827
- this.disablePast = false;
828
- this.disablePastMessage = "Dates in the past are not allowed. Please select a date in the future.";
829
- this.helperText = undefined;
830
- this.inputId = `ic-date-input-${inputIds++}`;
831
- this.label = undefined;
832
- this.max = "";
833
- this.min = "";
834
- this.name = this.inputId;
835
- this.required = false;
836
- this.showCalendarButton = false;
837
- this.showClearButton = true;
838
- this.size = "default";
839
- this.value = "";
840
- this.validationStatus = "";
841
- this.validationText = "";
842
- }
843
- watchMaxHandler() {
844
- if (this.disableFuture) {
845
- this.maxDate = new Date();
846
- }
847
- else {
848
- this.maxDate = dateHelpers.createDate(this.max, this.dateFormat);
849
- }
850
- }
851
- watchMinHandler() {
852
- if (this.disablePast) {
853
- this.minDate = new Date();
854
- }
855
- else {
856
- this.minDate = dateHelpers.createDate(this.min, this.dateFormat);
857
- }
858
- }
859
- disconnectedCallback() {
860
- helpers.removeFormResetListener(this.el, this.handleFormReset);
861
- }
862
- componentWillLoad() {
863
- this.defaultHelperText = `Use format ${this.dateFormat}`;
864
- if (helpers.isEmptyString(this.helperText)) {
865
- this.helperText = this.defaultHelperText;
866
- }
867
- this.watchMinHandler();
868
- this.watchMaxHandler();
869
- if (this.value) {
870
- this.setDate(this.value);
871
- this.previousEmittedDate = this.selectedDate;
872
- }
873
- else {
874
- this.previousEmittedDate = null;
875
- }
876
- this.screenReaderInfoId = `${this.inputId}-screen-reader-info`;
877
- this.assistiveHintId = `${this.inputId}-assistive-hint`;
878
- this.selectedDateInfoId = `${this.inputId}-selected-date-info`;
879
- helpers.addFormResetListener(this.el, this.handleFormReset);
880
- }
881
- componentDidLoad() {
882
- this.setInputsInOrder();
883
- helpers.onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Date Input");
884
- if (this.value) {
885
- this.updateInputValues(this.day, this.month, this.year);
886
- this.inputsInOrder.forEach((input) => {
887
- input.classList.add(this.FIT_TO_VALUE);
888
- });
889
- }
890
- this.setAriaInvalid(this.isValidDay, this.isValidMonth, this.isValidDate, this.isDisabledDate);
891
- if (this.value) {
892
- this.notifyScreenReaderSelectedDate();
893
- }
894
- this.inputsInOrder.forEach((input) => {
895
- input.addEventListener("input", this.handleInput);
896
- input.addEventListener("focus", this.handleFocus);
897
- input.addEventListener("blur", this.handleBlur);
898
- });
899
- // Prevent asterisk being read out after the label by screen reader (by applying aria-hidden)
900
- // Needed because label is included in 'aria-labelledby' instead of using 'aria-label'
901
- const labelEl = this.el.shadowRoot.querySelector("label");
902
- if (this.required) {
903
- const asteriskSpan = document.createElement("span");
904
- asteriskSpan.setAttribute("aria-hidden", "true");
905
- asteriskSpan.textContent = " *";
906
- labelEl === null || labelEl === void 0 ? void 0 : labelEl.appendChild(asteriskSpan);
907
- }
908
- }
909
- componentWillUpdate() {
910
- if (!this.isDateSetFromKeyboardEvent) {
911
- this.setDate(this.value);
912
- }
913
- this.setAriaInvalid(this.isValidDay, this.isValidMonth, this.isValidDate, this.isDisabledDate);
914
- this.handleDateChange(false);
915
- this.isDateSetFromKeyboardEvent = false;
916
- }
917
- componentDidRender() {
918
- if (this.removeLabelledBy) {
919
- this.removeAriaLabelledBy();
920
- return;
921
- }
922
- this.setAriaLabelledBy();
923
- }
924
- /**
925
- * Returns the value as a Date object
926
- * @returns Date
927
- */
928
- async getDate() {
929
- return this.selectedDate;
930
- }
931
- /**
932
- * @internal Sets focus on the calendar button.
933
- */
934
- async setCalendarFocus() {
935
- if (this.calendarButtonEl) {
936
- this.calendarButtonEl.focus();
937
- }
938
- }
939
- /**
940
- * @internal Used to pass disabledDays from parent component.
941
- */
942
- async setDisableDays(days) {
943
- this.disableDays = days;
944
- }
945
- /**
946
- * @internal Used to enable other components to invoke an IcChange event from the input.
947
- */
948
- async triggerIcChange(d) {
949
- this.emitIcChange(d);
950
- }
951
- removeAriaLabelledBy() {
952
- this.inputCompContainerEl.removeAttribute(this.ARIA_LABELLED_BY);
953
- }
954
- setPastedValueAndValidation(isValidDate, pastedValue, event) {
955
- switch (true) {
956
- case isValidDate: {
957
- const nextParsedValue = this.isZuluTime
958
- ? dateHelpers.extractDateFromZuluDateTime(pastedValue)
959
- : pastedValue;
960
- const dateParts = nextParsedValue.split(/-|\/|\./);
961
- this.inputsInOrder.forEach((input, index) => {
962
- input.classList.add(this.FIT_TO_VALUE);
963
- if (this.isZuluTime) {
964
- this.pasteZuluDateTime(dateParts, index);
965
- }
966
- else {
967
- let dateValue;
968
- if (input === this.dayInputEl || input === this.monthInputEl) {
969
- dateValue = this.slicePastedDate(2, dateParts[index]);
970
- }
971
- else {
972
- dateValue = this.slicePastedDate(4, dateParts[index]);
973
- }
974
- input.value = dateValue;
975
- this.setInputValue(input);
976
- this.autocompleteInput(input);
977
- }
978
- });
979
- this.isZuluTime = false;
980
- break;
981
- }
982
- case (pastedValue.length === 1 ||
983
- pastedValue.length === 2 ||
984
- pastedValue.length === 4) &&
985
- helpers.isNumeric(pastedValue):
986
- if (this.checkSingleCopiedValueIsValid(event.target, pastedValue)) {
987
- // Check if copied value can be pasted into input
988
- this.setInputPasteValue(event.target, pastedValue);
989
- this.setInputValue(event.target);
990
- }
991
- else {
992
- this.displayPastedValidation(event);
993
- }
994
- break;
995
- case pastedValue.length === 3 && helpers.isNumeric(pastedValue):
996
- if (event.target !== this.yearInputEl) {
997
- this.displayPastedValidation(event);
998
- }
999
- else {
1000
- this.setInputPasteValue(event.target, pastedValue);
1001
- this.setInputValue(event.target);
1002
- }
1003
- break;
1004
- case pastedValue.length >= 5 && helpers.isNumeric(pastedValue):
1005
- this.displayPastedValidation(event);
1006
- }
1007
- }
1008
- pasteZuluDateTime(dateParts, index) {
1009
- // ['YYYY', 'MM', 'DD']
1010
- if (index === 0) {
1011
- const dateValue = this.slicePastedDate(4, dateParts[index]);
1012
- this.yearInputEl.value = dateValue;
1013
- this.setInputValue(this.yearInputEl);
1014
- }
1015
- else if (index === 1) {
1016
- // The month value is the second item in the array
1017
- const dateValue = this.slicePastedDate(2, dateParts[index]);
1018
- this.monthInputEl.value = dateValue;
1019
- this.setInputValue(this.monthInputEl);
1020
- }
1021
- else {
1022
- const dateValue = this.slicePastedDate(2, dateParts[index]);
1023
- this.dayInputEl.value = dateValue;
1024
- this.setInputValue(this.dayInputEl);
1025
- }
1026
- }
1027
- displayPastedValidation(event) {
1028
- var _a;
1029
- if (((_a = this.invalidDateText) === null || _a === void 0 ? void 0 : _a.length) > 0) {
1030
- this.previousInvalidDateTest = this.invalidDateText;
1031
- }
1032
- this.invalidDateText = `Please paste a valid ${this.getAriaLabel(event.target)}`;
1033
- this.validationStatus = helpers.IcInformationStatus.Error;
1034
- this.isPasteValidationDisplayed = true;
1035
- }
1036
- setPasteInvalidText() {
1037
- var _a;
1038
- if (this.isPasteValidationDisplayed) {
1039
- this.invalidDateText = (_a = this.previousInvalidDateTest) !== null && _a !== void 0 ? _a : "";
1040
- this.isPasteValidationDisplayed = false;
1041
- // This is to prevent setDate from triggering within componentWillUpdate
1042
- this.isDateSetFromKeyboardEvent = true;
1043
- }
1044
- }
1045
- notifyScreenReader(input, event) {
1046
- const liveRegion = this.el.shadowRoot.querySelector("#live-region");
1047
- if (liveRegion) {
1048
- if (this.isKeyboardOrEvent(event)) {
1049
- this.notifyScreenReaderArrowKeys(input);
1050
- }
1051
- else if (Object.prototype.toString.call(event) === this.INPUT_EVENT_OBJECT_STRING) {
1052
- this.notifyScreenReaderInput(input, liveRegion);
1053
- }
1054
- }
1055
- }
1056
- render() {
1057
- const { inputId, label, disabled, helperText, showClearButton, showCalendarButton, size, } = this;
1058
- const hasCustomValidation = !helpers.isEmptyString(this.validationStatus) &&
1059
- !helpers.isEmptyString(this.validationText);
1060
- const validationStatus = hasCustomValidation
1061
- ? this.validationStatus
1062
- : !helpers.isEmptyString(this.invalidDateText)
1063
- ? helpers.IcInformationStatus.Error
1064
- : "";
1065
- const assistiveHint = `Type or use the up and down arrow keys to change the values for the ${this.getDescOfInputsOrder()}.`;
1066
- helpers.renderHiddenInput(true, this.el, this.name, this.convertToDate(this.year, this.month, this.day), this.disabled);
1067
- return (index.h(index.Host, { onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, index.h("ic-input-container", { disabled: disabled }, index.h("ic-input-label", { for: inputId, label: label, helperText: helperText, disabled: disabled }), index.h("span", { id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), `${this.defaultHelperText}.`), index.h("span", { id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), index.h("span", { id: "live-region", "aria-live": "assertive", class: "sr-only" }), index.h("ic-input-component-container", { id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group" }, index.h("div", { class: "input-container" }, index.h("div", { class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), index.h("div", { class: "action-buttons" }, showClearButton && (index.h("ic-button", { id: "clear-button", "aria-label": "Clear input", class: {
1068
- ["clear-button"]: true,
1069
- ["hidden"]: helpers.isEmptyString(this.day) &&
1070
- helpers.isEmptyString(this.month) &&
1071
- helpers.isEmptyString(this.year),
1072
- }, disabled: this.disabled, innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon", appearance: this.clearButtonFocused
1073
- ? helpers.IcThemeForegroundEnum.Light
1074
- : helpers.IcThemeForegroundEnum.Dark, size: size })), showCalendarButton && (index.h("div", { class: "show-calendar-button-wrapper" }, index.h("div", { class: { divider: true, [size]: true } }), index.h("ic-button", { id: "calendar-button", ref: (el) => (this.calendarButtonEl = el), "aria-label": "Display calendar", "aria-haspopup": "dialog", class: "calendar-button", disabled: this.disabled, innerHTML: Calendar, onClick: this.handleCalendarOpen, variant: "icon", size: size, onFocus: this.handleCalendarFocus, onBlur: this.handleCalendarBlur, appearance: this.calendarFocused
1075
- ? helpers.IcThemeForegroundEnum.Light
1076
- : helpers.IcThemeForegroundEnum.Default })))))), index.h("span", { id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, index.h("span", { ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), (hasCustomValidation || !helpers.isEmptyString(this.invalidDateText)) && (index.h("ic-input-validation", { status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidDateText, for: inputId })))));
1077
- }
1078
- static get delegatesFocus() { return true; }
1079
- get el() { return index.getElement(this); }
1080
- static get watchers() { return {
1081
- "max": ["watchMaxHandler"],
1082
- "min": ["watchMinHandler"]
1083
- }; }
1084
- };
1085
- DateInput.style = icDateInputCss;
1086
-
1087
- exports.ic_date_input = DateInput;
1088
-
1089
- //# sourceMappingURL=ic-date-input.cjs.entry.js.map