carbon-components-angular 5.34.0 → 5.36.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/datepicker/datepicker.component.d.ts +2 -1
  2. package/datepicker-input/datepicker-input.component.d.ts +2 -1
  3. package/docs/documentation/components/DatePicker.html +147 -100
  4. package/docs/documentation/components/DatePickerInput.html +66 -33
  5. package/docs/documentation/components/PasswordInputLabelComponent.html +82 -9
  6. package/docs/documentation/coverage.html +7 -7
  7. package/docs/documentation/js/search/search_index.js +2 -2
  8. package/docs/documentation/modules/ComboBoxModule/dependencies.svg +4 -4
  9. package/docs/documentation/modules/ComboBoxModule.html +4 -4
  10. package/docs/documentation/modules/ContentSwitcherModule/dependencies.svg +4 -4
  11. package/docs/documentation/modules/ContentSwitcherModule.html +4 -4
  12. package/docs/documentation/modules/DatePickerInputModule/dependencies.svg +37 -41
  13. package/docs/documentation/modules/DatePickerInputModule.html +37 -41
  14. package/docs/documentation/modules/DatePickerModule/dependencies.svg +38 -38
  15. package/docs/documentation/modules/DatePickerModule.html +38 -38
  16. package/docs/documentation/modules/GridModule/dependencies.svg +60 -60
  17. package/docs/documentation/modules/GridModule.html +60 -60
  18. package/docs/documentation/modules/LoadingModule/dependencies.svg +4 -4
  19. package/docs/documentation/modules/LoadingModule.html +4 -4
  20. package/docs/documentation/modules/NFormsModule/dependencies.svg +4 -4
  21. package/docs/documentation/modules/NFormsModule.html +4 -4
  22. package/docs/documentation/modules/NumberModule/dependencies.svg +4 -4
  23. package/docs/documentation/modules/NumberModule.html +4 -4
  24. package/docs/documentation/modules/ProgressIndicatorModule/dependencies.svg +4 -4
  25. package/docs/documentation/modules/ProgressIndicatorModule.html +4 -4
  26. package/docs/documentation/modules/RadioModule/dependencies.svg +4 -4
  27. package/docs/documentation/modules/RadioModule.html +4 -4
  28. package/docs/documentation/modules/SelectModule/dependencies.svg +58 -58
  29. package/docs/documentation/modules/SelectModule.html +58 -58
  30. package/docs/documentation/modules/SliderModule/dependencies.svg +4 -4
  31. package/docs/documentation/modules/SliderModule.html +4 -4
  32. package/docs/documentation/modules/TableModule/dependencies.svg +216 -216
  33. package/docs/documentation/modules/TableModule.html +216 -216
  34. package/docs/documentation/modules/TabsModule/dependencies.svg +69 -69
  35. package/docs/documentation/modules/TabsModule.html +69 -69
  36. package/docs/documentation/modules/ThemeModule/dependencies.svg +4 -4
  37. package/docs/documentation/modules/ThemeModule.html +4 -4
  38. package/docs/documentation/modules/TilesModule/dependencies.svg +4 -4
  39. package/docs/documentation/modules/TilesModule.html +4 -4
  40. package/docs/documentation/modules/TimePickerModule/dependencies.svg +42 -46
  41. package/docs/documentation/modules/TimePickerModule.html +42 -46
  42. package/docs/documentation/modules/ToggleModule/dependencies.svg +20 -20
  43. package/docs/documentation/modules/ToggleModule.html +20 -20
  44. package/docs/documentation/modules/ToggletipModule/dependencies.svg +37 -37
  45. package/docs/documentation/modules/ToggletipModule.html +37 -37
  46. package/docs/documentation/modules/TreeviewModule/dependencies.svg +36 -36
  47. package/docs/documentation/modules/TreeviewModule.html +36 -36
  48. package/docs/documentation.json +164 -127
  49. package/docs/storybook/{1345.a1871b60.iframe.bundle.js → 1345.99dc9be1.iframe.bundle.js} +1 -1
  50. package/docs/storybook/datepicker-datepicker-stories.fb6b3054.iframe.bundle.js +1 -0
  51. package/docs/storybook/iframe.html +2 -2
  52. package/docs/storybook/input-password-stories.33a92ba2.iframe.bundle.js +1 -0
  53. package/docs/storybook/main.e57ae153.iframe.bundle.js +1 -0
  54. package/docs/storybook/project.json +1 -1
  55. package/docs/storybook/{runtime~main.c0aac812.iframe.bundle.js → runtime~main.58219115.iframe.bundle.js} +1 -1
  56. package/esm2020/datepicker/datepicker.component.mjs +23 -5
  57. package/esm2020/datepicker-input/datepicker-input.component.mjs +7 -2
  58. package/esm2020/input/password-input-label.component.mjs +9 -3
  59. package/fesm2015/carbon-components-angular-datepicker-input.mjs +6 -1
  60. package/fesm2015/carbon-components-angular-datepicker-input.mjs.map +1 -1
  61. package/fesm2015/carbon-components-angular-datepicker.mjs +22 -4
  62. package/fesm2015/carbon-components-angular-datepicker.mjs.map +1 -1
  63. package/fesm2015/carbon-components-angular-input.mjs +9 -2
  64. package/fesm2015/carbon-components-angular-input.mjs.map +1 -1
  65. package/fesm2020/carbon-components-angular-datepicker-input.mjs +6 -1
  66. package/fesm2020/carbon-components-angular-datepicker-input.mjs.map +1 -1
  67. package/fesm2020/carbon-components-angular-datepicker.mjs +22 -4
  68. package/fesm2020/carbon-components-angular-datepicker.mjs.map +1 -1
  69. package/fesm2020/carbon-components-angular-input.mjs +8 -2
  70. package/fesm2020/carbon-components-angular-input.mjs.map +1 -1
  71. package/input/password-input-label.component.d.ts +1 -0
  72. package/package.json +1 -1
  73. package/docs/storybook/datepicker-datepicker-stories.45228636.iframe.bundle.js +0 -1
  74. package/docs/storybook/input-password-stories.82ec8b0f.iframe.bundle.js +0 -1
  75. package/docs/storybook/main.c7fa1279.iframe.bundle.js +0 -1
@@ -197,6 +197,7 @@
197
197
  [type]="(range ? 'range' : 'single')"
198
198
  [hasIcon]="(range ? false : true)"
199
199
  [disabled]="disabled"
200
+ [readonly]="readonly"
200
201
  [invalid]="invalid"
201
202
  [invalidText]="invalidText"
202
203
  [warn]="warn"
@@ -219,6 +220,7 @@
219
220
  [type]="(range ? 'range' : 'single')"
220
221
  [hasIcon]="(range ? true : null)"
221
222
  [disabled]="disabled"
223
+ [readonly]="readonly"
222
224
  [invalid]="rangeInvalid"
223
225
  [invalidText]="rangeInvalidText"
224
226
  [warn]="rangeWarn"
@@ -469,6 +471,9 @@
469
471
  <li>
470
472
  <a href="#rangeWarnText" >rangeWarnText</a>
471
473
  </li>
474
+ <li>
475
+ <a href="#readonly" >readonly</a>
476
+ </li>
472
477
  <li>
473
478
  <a href="#size" >size</a>
474
479
  </li>
@@ -560,7 +565,7 @@
560
565
  </tr>
561
566
  <tr>
562
567
  <td class="col-md-4">
563
- <div class="io-line">Defined in <a href="" data-line="290" class="link-to-prism">src/datepicker/datepicker.component.ts:290</a></div>
568
+ <div class="io-line">Defined in <a href="" data-line="297" class="link-to-prism">src/datepicker/datepicker.component.ts:297</a></div>
564
569
  </td>
565
570
  </tr>
566
571
 
@@ -633,7 +638,7 @@
633
638
  </tr>
634
639
  <tr>
635
640
  <td class="col-md-2" colspan="2">
636
- <div class="io-line">Defined in <a href="" data-line="159" class="link-to-prism">src/datepicker/datepicker.component.ts:159</a></div>
641
+ <div class="io-line">Defined in <a href="" data-line="161" class="link-to-prism">src/datepicker/datepicker.component.ts:161</a></div>
637
642
  </td>
638
643
  </tr>
639
644
  <tr>
@@ -665,7 +670,7 @@
665
670
  </tr>
666
671
  <tr>
667
672
  <td class="col-md-2" colspan="2">
668
- <div class="io-line">Defined in <a href="" data-line="139" class="link-to-prism">src/datepicker/datepicker.component.ts:139</a></div>
673
+ <div class="io-line">Defined in <a href="" data-line="141" class="link-to-prism">src/datepicker/datepicker.component.ts:141</a></div>
669
674
  </td>
670
675
  </tr>
671
676
  <tr>
@@ -698,7 +703,7 @@
698
703
  </tr>
699
704
  <tr>
700
705
  <td class="col-md-2" colspan="2">
701
- <div class="io-line">Defined in <a href="" data-line="185" class="link-to-prism">src/datepicker/datepicker.component.ts:185</a></div>
706
+ <div class="io-line">Defined in <a href="" data-line="187" class="link-to-prism">src/datepicker/datepicker.component.ts:187</a></div>
702
707
  </td>
703
708
  </tr>
704
709
  </tbody>
@@ -719,7 +724,7 @@
719
724
  </tr>
720
725
  <tr>
721
726
  <td class="col-md-2" colspan="2">
722
- <div class="io-line">Defined in <a href="" data-line="226" class="link-to-prism">src/datepicker/datepicker.component.ts:226</a></div>
727
+ <div class="io-line">Defined in <a href="" data-line="230" class="link-to-prism">src/datepicker/datepicker.component.ts:230</a></div>
723
728
  </td>
724
729
  </tr>
725
730
  </tbody>
@@ -740,7 +745,7 @@
740
745
  </tr>
741
746
  <tr>
742
747
  <td class="col-md-2" colspan="2">
743
- <div class="io-line">Defined in <a href="" data-line="150" class="link-to-prism">src/datepicker/datepicker.component.ts:150</a></div>
748
+ <div class="io-line">Defined in <a href="" data-line="152" class="link-to-prism">src/datepicker/datepicker.component.ts:152</a></div>
744
749
  </td>
745
750
  </tr>
746
751
  </tbody>
@@ -766,7 +771,7 @@
766
771
  </tr>
767
772
  <tr>
768
773
  <td class="col-md-2" colspan="2">
769
- <div class="io-line">Defined in <a href="" data-line="166" class="link-to-prism">src/datepicker/datepicker.component.ts:166</a></div>
774
+ <div class="io-line">Defined in <a href="" data-line="168" class="link-to-prism">src/datepicker/datepicker.component.ts:168</a></div>
770
775
  </td>
771
776
  </tr>
772
777
  </tbody>
@@ -792,7 +797,7 @@
792
797
  </tr>
793
798
  <tr>
794
799
  <td class="col-md-2" colspan="2">
795
- <div class="io-line">Defined in <a href="" data-line="164" class="link-to-prism">src/datepicker/datepicker.component.ts:164</a></div>
800
+ <div class="io-line">Defined in <a href="" data-line="166" class="link-to-prism">src/datepicker/datepicker.component.ts:166</a></div>
796
801
  </td>
797
802
  </tr>
798
803
  <tr>
@@ -824,7 +829,7 @@
824
829
  </tr>
825
830
  <tr>
826
831
  <td class="col-md-2" colspan="2">
827
- <div class="io-line">Defined in <a href="" data-line="189" class="link-to-prism">src/datepicker/datepicker.component.ts:189</a></div>
832
+ <div class="io-line">Defined in <a href="" data-line="193" class="link-to-prism">src/datepicker/datepicker.component.ts:193</a></div>
828
833
  </td>
829
834
  </tr>
830
835
  <tr>
@@ -851,7 +856,7 @@
851
856
  </tr>
852
857
  <tr>
853
858
  <td class="col-md-2" colspan="2">
854
- <div class="io-line">Defined in <a href="" data-line="193" class="link-to-prism">src/datepicker/datepicker.component.ts:193</a></div>
859
+ <div class="io-line">Defined in <a href="" data-line="197" class="link-to-prism">src/datepicker/datepicker.component.ts:197</a></div>
855
860
  </td>
856
861
  </tr>
857
862
  <tr>
@@ -878,7 +883,7 @@
878
883
  </tr>
879
884
  <tr>
880
885
  <td class="col-md-2" colspan="2">
881
- <div class="io-line">Defined in <a href="" data-line="149" class="link-to-prism">src/datepicker/datepicker.component.ts:149</a></div>
886
+ <div class="io-line">Defined in <a href="" data-line="151" class="link-to-prism">src/datepicker/datepicker.component.ts:151</a></div>
882
887
  </td>
883
888
  </tr>
884
889
  </tbody>
@@ -904,7 +909,7 @@
904
909
  </tr>
905
910
  <tr>
906
911
  <td class="col-md-2" colspan="2">
907
- <div class="io-line">Defined in <a href="" data-line="147" class="link-to-prism">src/datepicker/datepicker.component.ts:147</a></div>
912
+ <div class="io-line">Defined in <a href="" data-line="149" class="link-to-prism">src/datepicker/datepicker.component.ts:149</a></div>
908
913
  </td>
909
914
  </tr>
910
915
  <tr>
@@ -938,7 +943,7 @@
938
943
  </tr>
939
944
  <tr>
940
945
  <td class="col-md-2" colspan="2">
941
- <div class="io-line">Defined in <a href="" data-line="154" class="link-to-prism">src/datepicker/datepicker.component.ts:154</a></div>
946
+ <div class="io-line">Defined in <a href="" data-line="156" class="link-to-prism">src/datepicker/datepicker.component.ts:156</a></div>
942
947
  </td>
943
948
  </tr>
944
949
  </tbody>
@@ -964,7 +969,7 @@
964
969
  </tr>
965
970
  <tr>
966
971
  <td class="col-md-2" colspan="2">
967
- <div class="io-line">Defined in <a href="" data-line="223" class="link-to-prism">src/datepicker/datepicker.component.ts:223</a></div>
972
+ <div class="io-line">Defined in <a href="" data-line="227" class="link-to-prism">src/datepicker/datepicker.component.ts:227</a></div>
968
973
  </td>
969
974
  </tr>
970
975
  </tbody>
@@ -990,7 +995,7 @@
990
995
  </tr>
991
996
  <tr>
992
997
  <td class="col-md-2" colspan="2">
993
- <div class="io-line">Defined in <a href="" data-line="132" class="link-to-prism">src/datepicker/datepicker.component.ts:132</a></div>
998
+ <div class="io-line">Defined in <a href="" data-line="134" class="link-to-prism">src/datepicker/datepicker.component.ts:134</a></div>
994
999
  </td>
995
1000
  </tr>
996
1001
  <tr>
@@ -1017,7 +1022,7 @@
1017
1022
  </tr>
1018
1023
  <tr>
1019
1024
  <td class="col-md-2" colspan="2">
1020
- <div class="io-line">Defined in <a href="" data-line="151" class="link-to-prism">src/datepicker/datepicker.component.ts:151</a></div>
1025
+ <div class="io-line">Defined in <a href="" data-line="153" class="link-to-prism">src/datepicker/datepicker.component.ts:153</a></div>
1021
1026
  </td>
1022
1027
  </tr>
1023
1028
  </tbody>
@@ -1043,7 +1048,7 @@
1043
1048
  </tr>
1044
1049
  <tr>
1045
1050
  <td class="col-md-2" colspan="2">
1046
- <div class="io-line">Defined in <a href="" data-line="207" class="link-to-prism">src/datepicker/datepicker.component.ts:207</a></div>
1051
+ <div class="io-line">Defined in <a href="" data-line="211" class="link-to-prism">src/datepicker/datepicker.component.ts:211</a></div>
1047
1052
  </td>
1048
1053
  </tr>
1049
1054
  <tr>
@@ -1070,7 +1075,7 @@
1070
1075
  </tr>
1071
1076
  <tr>
1072
1077
  <td class="col-md-2" colspan="2">
1073
- <div class="io-line">Defined in <a href="" data-line="211" class="link-to-prism">src/datepicker/datepicker.component.ts:211</a></div>
1078
+ <div class="io-line">Defined in <a href="" data-line="215" class="link-to-prism">src/datepicker/datepicker.component.ts:215</a></div>
1074
1079
  </td>
1075
1080
  </tr>
1076
1081
  <tr>
@@ -1097,7 +1102,7 @@
1097
1102
  </tr>
1098
1103
  <tr>
1099
1104
  <td class="col-md-2" colspan="2">
1100
- <div class="io-line">Defined in <a href="" data-line="152" class="link-to-prism">src/datepicker/datepicker.component.ts:152</a></div>
1105
+ <div class="io-line">Defined in <a href="" data-line="154" class="link-to-prism">src/datepicker/datepicker.component.ts:154</a></div>
1101
1106
  </td>
1102
1107
  </tr>
1103
1108
  </tbody>
@@ -1123,7 +1128,7 @@
1123
1128
  </tr>
1124
1129
  <tr>
1125
1130
  <td class="col-md-2" colspan="2">
1126
- <div class="io-line">Defined in <a href="" data-line="215" class="link-to-prism">src/datepicker/datepicker.component.ts:215</a></div>
1131
+ <div class="io-line">Defined in <a href="" data-line="219" class="link-to-prism">src/datepicker/datepicker.component.ts:219</a></div>
1127
1132
  </td>
1128
1133
  </tr>
1129
1134
  <tr>
@@ -1150,7 +1155,7 @@
1150
1155
  </tr>
1151
1156
  <tr>
1152
1157
  <td class="col-md-2" colspan="2">
1153
- <div class="io-line">Defined in <a href="" data-line="219" class="link-to-prism">src/datepicker/datepicker.component.ts:219</a></div>
1158
+ <div class="io-line">Defined in <a href="" data-line="223" class="link-to-prism">src/datepicker/datepicker.component.ts:223</a></div>
1154
1159
  </td>
1155
1160
  </tr>
1156
1161
  <tr>
@@ -1161,6 +1166,32 @@
1161
1166
  </tr>
1162
1167
  </tbody>
1163
1168
  </table>
1169
+ <table class="table table-sm table-bordered">
1170
+ <tbody>
1171
+ <tr>
1172
+ <td class="col-md-4">
1173
+ <a name="readonly"></a>
1174
+ <b>readonly</b>
1175
+ </td>
1176
+ </tr>
1177
+ <tr>
1178
+ <td class="col-md-4">
1179
+ <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
1180
+
1181
+ </td>
1182
+ </tr>
1183
+ <tr>
1184
+ <td class="col-md-4">
1185
+ <i>Default value : </i><code>false</code>
1186
+ </td>
1187
+ </tr>
1188
+ <tr>
1189
+ <td class="col-md-2" colspan="2">
1190
+ <div class="io-line">Defined in <a href="" data-line="189" class="link-to-prism">src/datepicker/datepicker.component.ts:189</a></div>
1191
+ </td>
1192
+ </tr>
1193
+ </tbody>
1194
+ </table>
1164
1195
  <table class="table table-sm table-bordered">
1165
1196
  <tbody>
1166
1197
  <tr>
@@ -1182,7 +1213,7 @@
1182
1213
  </tr>
1183
1214
  <tr>
1184
1215
  <td class="col-md-2" colspan="2">
1185
- <div class="io-line">Defined in <a href="" data-line="203" class="link-to-prism">src/datepicker/datepicker.component.ts:203</a></div>
1216
+ <div class="io-line">Defined in <a href="" data-line="207" class="link-to-prism">src/datepicker/datepicker.component.ts:207</a></div>
1186
1217
  </td>
1187
1218
  </tr>
1188
1219
  </tbody>
@@ -1208,7 +1239,7 @@
1208
1239
  </tr>
1209
1240
  <tr>
1210
1241
  <td class="col-md-2" colspan="2">
1211
- <div class="io-line">Defined in <a href="" data-line="221" class="link-to-prism">src/datepicker/datepicker.component.ts:221</a></div>
1242
+ <div class="io-line">Defined in <a href="" data-line="225" class="link-to-prism">src/datepicker/datepicker.component.ts:225</a></div>
1212
1243
  </td>
1213
1244
  </tr>
1214
1245
  </tbody>
@@ -1234,7 +1265,7 @@
1234
1265
  </tr>
1235
1266
  <tr>
1236
1267
  <td class="col-md-2" colspan="2">
1237
- <div class="io-line">Defined in <a href="" data-line="183" class="link-to-prism">src/datepicker/datepicker.component.ts:183</a></div>
1268
+ <div class="io-line">Defined in <a href="" data-line="185" class="link-to-prism">src/datepicker/datepicker.component.ts:185</a></div>
1238
1269
  </td>
1239
1270
  </tr>
1240
1271
  </tbody>
@@ -1255,7 +1286,7 @@
1255
1286
  </tr>
1256
1287
  <tr>
1257
1288
  <td class="col-md-2" colspan="2">
1258
- <div class="io-line">Defined in <a href="" data-line="168" class="link-to-prism">src/datepicker/datepicker.component.ts:168</a></div>
1289
+ <div class="io-line">Defined in <a href="" data-line="170" class="link-to-prism">src/datepicker/datepicker.component.ts:170</a></div>
1259
1290
  </td>
1260
1291
  </tr>
1261
1292
  </tbody>
@@ -1281,7 +1312,7 @@
1281
1312
  </tr>
1282
1313
  <tr>
1283
1314
  <td class="col-md-2" colspan="2">
1284
- <div class="io-line">Defined in <a href="" data-line="197" class="link-to-prism">src/datepicker/datepicker.component.ts:197</a></div>
1315
+ <div class="io-line">Defined in <a href="" data-line="201" class="link-to-prism">src/datepicker/datepicker.component.ts:201</a></div>
1285
1316
  </td>
1286
1317
  </tr>
1287
1318
  <tr>
@@ -1308,7 +1339,7 @@
1308
1339
  </tr>
1309
1340
  <tr>
1310
1341
  <td class="col-md-2" colspan="2">
1311
- <div class="io-line">Defined in <a href="" data-line="201" class="link-to-prism">src/datepicker/datepicker.component.ts:201</a></div>
1342
+ <div class="io-line">Defined in <a href="" data-line="205" class="link-to-prism">src/datepicker/datepicker.component.ts:205</a></div>
1312
1343
  </td>
1313
1344
  </tr>
1314
1345
  <tr>
@@ -1338,7 +1369,7 @@
1338
1369
  </tr>
1339
1370
  <tr>
1340
1371
  <td class="col-md-2" colspan="2">
1341
- <div class="io-line">Defined in <a href="" data-line="251" class="link-to-prism">src/datepicker/datepicker.component.ts:251</a></div>
1372
+ <div class="io-line">Defined in <a href="" data-line="258" class="link-to-prism">src/datepicker/datepicker.component.ts:258</a></div>
1342
1373
  </td>
1343
1374
  </tr>
1344
1375
  <tr>
@@ -1366,7 +1397,7 @@ Emits an event when date picker closes</p>
1366
1397
  </tr>
1367
1398
  <tr>
1368
1399
  <td class="col-md-2" colspan="2">
1369
- <div class="io-line">Defined in <a href="" data-line="245" class="link-to-prism">src/datepicker/datepicker.component.ts:245</a></div>
1400
+ <div class="io-line">Defined in <a href="" data-line="252" class="link-to-prism">src/datepicker/datepicker.component.ts:252</a></div>
1370
1401
  </td>
1371
1402
  </tr>
1372
1403
  </tbody>
@@ -1394,8 +1425,8 @@ Emits an event when date picker closes</p>
1394
1425
 
1395
1426
  <tr>
1396
1427
  <td class="col-md-4">
1397
- <div class="io-line">Defined in <a href="" data-line="354"
1398
- class="link-to-prism">src/datepicker/datepicker.component.ts:354</a></div>
1428
+ <div class="io-line">Defined in <a href="" data-line="362"
1429
+ class="link-to-prism">src/datepicker/datepicker.component.ts:362</a></div>
1399
1430
  </td>
1400
1431
  </tr>
1401
1432
 
@@ -1422,8 +1453,8 @@ Emits an event when date picker closes</p>
1422
1453
 
1423
1454
  <tr>
1424
1455
  <td class="col-md-4">
1425
- <div class="io-line">Defined in <a href="" data-line="369"
1426
- class="link-to-prism">src/datepicker/datepicker.component.ts:369</a></div>
1456
+ <div class="io-line">Defined in <a href="" data-line="377"
1457
+ class="link-to-prism">src/datepicker/datepicker.component.ts:377</a></div>
1427
1458
  </td>
1428
1459
  </tr>
1429
1460
 
@@ -1458,8 +1489,8 @@ Emits an event when date picker closes</p>
1458
1489
 
1459
1490
  <tr>
1460
1491
  <td class="col-md-4">
1461
- <div class="io-line">Defined in <a href="" data-line="477"
1462
- class="link-to-prism">src/datepicker/datepicker.component.ts:477</a></div>
1492
+ <div class="io-line">Defined in <a href="" data-line="489"
1493
+ class="link-to-prism">src/datepicker/datepicker.component.ts:489</a></div>
1463
1494
  </td>
1464
1495
  </tr>
1465
1496
 
@@ -1499,8 +1530,8 @@ Emits an event when date picker closes</p>
1499
1530
 
1500
1531
  <tr>
1501
1532
  <td class="col-md-4">
1502
- <div class="io-line">Defined in <a href="" data-line="674"
1503
- class="link-to-prism">src/datepicker/datepicker.component.ts:674</a></div>
1533
+ <div class="io-line">Defined in <a href="" data-line="690"
1534
+ class="link-to-prism">src/datepicker/datepicker.component.ts:690</a></div>
1504
1535
  </td>
1505
1536
  </tr>
1506
1537
 
@@ -1573,8 +1604,8 @@ Emits an event when date picker closes</p>
1573
1604
 
1574
1605
  <tr>
1575
1606
  <td class="col-md-4">
1576
- <div class="io-line">Defined in <a href="" data-line="651"
1577
- class="link-to-prism">src/datepicker/datepicker.component.ts:651</a></div>
1607
+ <div class="io-line">Defined in <a href="" data-line="667"
1608
+ class="link-to-prism">src/datepicker/datepicker.component.ts:667</a></div>
1578
1609
  </td>
1579
1610
  </tr>
1580
1611
 
@@ -1642,8 +1673,8 @@ Emits an event when date picker closes</p>
1642
1673
 
1643
1674
  <tr>
1644
1675
  <td class="col-md-4">
1645
- <div class="io-line">Defined in <a href="" data-line="681"
1646
- class="link-to-prism">src/datepicker/datepicker.component.ts:681</a></div>
1676
+ <div class="io-line">Defined in <a href="" data-line="697"
1677
+ class="link-to-prism">src/datepicker/datepicker.component.ts:697</a></div>
1647
1678
  </td>
1648
1679
  </tr>
1649
1680
 
@@ -1683,8 +1714,8 @@ Emits an event when date picker closes</p>
1683
1714
 
1684
1715
  <tr>
1685
1716
  <td class="col-md-4">
1686
- <div class="io-line">Defined in <a href="" data-line="700"
1687
- class="link-to-prism">src/datepicker/datepicker.component.ts:700</a></div>
1717
+ <div class="io-line">Defined in <a href="" data-line="716"
1718
+ class="link-to-prism">src/datepicker/datepicker.component.ts:716</a></div>
1688
1719
  </td>
1689
1720
  </tr>
1690
1721
 
@@ -1722,8 +1753,8 @@ Emits an event when date picker closes</p>
1722
1753
 
1723
1754
  <tr>
1724
1755
  <td class="col-md-4">
1725
- <div class="io-line">Defined in <a href="" data-line="340"
1726
- class="link-to-prism">src/datepicker/datepicker.component.ts:340</a></div>
1756
+ <div class="io-line">Defined in <a href="" data-line="348"
1757
+ class="link-to-prism">src/datepicker/datepicker.component.ts:348</a></div>
1727
1758
  </td>
1728
1759
  </tr>
1729
1760
 
@@ -1759,8 +1790,8 @@ Emits an event when date picker closes</p>
1759
1790
 
1760
1791
  <tr>
1761
1792
  <td class="col-md-4">
1762
- <div class="io-line">Defined in <a href="" data-line="325"
1763
- class="link-to-prism">src/datepicker/datepicker.component.ts:325</a></div>
1793
+ <div class="io-line">Defined in <a href="" data-line="333"
1794
+ class="link-to-prism">src/datepicker/datepicker.component.ts:333</a></div>
1764
1795
  </td>
1765
1796
  </tr>
1766
1797
 
@@ -1796,8 +1827,8 @@ Emits an event when date picker closes</p>
1796
1827
 
1797
1828
  <tr>
1798
1829
  <td class="col-md-4">
1799
- <div class="io-line">Defined in <a href="" data-line="308"
1800
- class="link-to-prism">src/datepicker/datepicker.component.ts:308</a></div>
1830
+ <div class="io-line">Defined in <a href="" data-line="315"
1831
+ class="link-to-prism">src/datepicker/datepicker.component.ts:315</a></div>
1801
1832
  </td>
1802
1833
  </tr>
1803
1834
 
@@ -1863,8 +1894,8 @@ Emits an event when date picker closes</p>
1863
1894
 
1864
1895
  <tr>
1865
1896
  <td class="col-md-4">
1866
- <div class="io-line">Defined in <a href="" data-line="412"
1867
- class="link-to-prism">src/datepicker/datepicker.component.ts:412</a></div>
1897
+ <div class="io-line">Defined in <a href="" data-line="420"
1898
+ class="link-to-prism">src/datepicker/datepicker.component.ts:420</a></div>
1868
1899
  </td>
1869
1900
  </tr>
1870
1901
 
@@ -1902,8 +1933,8 @@ Emits an event when date picker closes</p>
1902
1933
 
1903
1934
  <tr>
1904
1935
  <td class="col-md-4">
1905
- <div class="io-line">Defined in <a href="" data-line="297"
1906
- class="link-to-prism">src/datepicker/datepicker.component.ts:297</a></div>
1936
+ <div class="io-line">Defined in <a href="" data-line="304"
1937
+ class="link-to-prism">src/datepicker/datepicker.component.ts:304</a></div>
1907
1938
  </td>
1908
1939
  </tr>
1909
1940
 
@@ -1948,8 +1979,8 @@ Emits an event when date picker closes</p>
1948
1979
 
1949
1980
  <tr>
1950
1981
  <td class="col-md-4">
1951
- <div class="io-line">Defined in <a href="" data-line="354"
1952
- class="link-to-prism">src/datepicker/datepicker.component.ts:354</a></div>
1982
+ <div class="io-line">Defined in <a href="" data-line="362"
1983
+ class="link-to-prism">src/datepicker/datepicker.component.ts:362</a></div>
1953
1984
  </td>
1954
1985
  </tr>
1955
1986
 
@@ -1994,8 +2025,8 @@ Emits an event when date picker closes</p>
1994
2025
 
1995
2026
  <tr>
1996
2027
  <td class="col-md-4">
1997
- <div class="io-line">Defined in <a href="" data-line="369"
1998
- class="link-to-prism">src/datepicker/datepicker.component.ts:369</a></div>
2028
+ <div class="io-line">Defined in <a href="" data-line="377"
2029
+ class="link-to-prism">src/datepicker/datepicker.component.ts:377</a></div>
1999
2030
  </td>
2000
2031
  </tr>
2001
2032
 
@@ -2031,8 +2062,8 @@ Emits an event when date picker closes</p>
2031
2062
 
2032
2063
  <tr>
2033
2064
  <td class="col-md-4">
2034
- <div class="io-line">Defined in <a href="" data-line="435"
2035
- class="link-to-prism">src/datepicker/datepicker.component.ts:435</a></div>
2065
+ <div class="io-line">Defined in <a href="" data-line="443"
2066
+ class="link-to-prism">src/datepicker/datepicker.component.ts:443</a></div>
2036
2067
  </td>
2037
2068
  </tr>
2038
2069
 
@@ -2100,8 +2131,8 @@ Emits an event when date picker closes</p>
2100
2131
 
2101
2132
  <tr>
2102
2133
  <td class="col-md-4">
2103
- <div class="io-line">Defined in <a href="" data-line="420"
2104
- class="link-to-prism">src/datepicker/datepicker.component.ts:420</a></div>
2134
+ <div class="io-line">Defined in <a href="" data-line="428"
2135
+ class="link-to-prism">src/datepicker/datepicker.component.ts:428</a></div>
2105
2136
  </td>
2106
2137
  </tr>
2107
2138
 
@@ -2169,8 +2200,8 @@ Emits an event when date picker closes</p>
2169
2200
 
2170
2201
  <tr>
2171
2202
  <td class="col-md-4">
2172
- <div class="io-line">Defined in <a href="" data-line="446"
2173
- class="link-to-prism">src/datepicker/datepicker.component.ts:446</a></div>
2203
+ <div class="io-line">Defined in <a href="" data-line="454"
2204
+ class="link-to-prism">src/datepicker/datepicker.component.ts:454</a></div>
2174
2205
  </td>
2175
2206
  </tr>
2176
2207
 
@@ -2238,8 +2269,8 @@ Emits an event when date picker closes</p>
2238
2269
 
2239
2270
  <tr>
2240
2271
  <td class="col-md-4">
2241
- <div class="io-line">Defined in <a href="" data-line="397"
2242
- class="link-to-prism">src/datepicker/datepicker.component.ts:397</a></div>
2272
+ <div class="io-line">Defined in <a href="" data-line="405"
2273
+ class="link-to-prism">src/datepicker/datepicker.component.ts:405</a></div>
2243
2274
  </td>
2244
2275
  </tr>
2245
2276
 
@@ -2305,8 +2336,8 @@ Emits an event when date picker closes</p>
2305
2336
 
2306
2337
  <tr>
2307
2338
  <td class="col-md-4">
2308
- <div class="io-line">Defined in <a href="" data-line="401"
2309
- class="link-to-prism">src/datepicker/datepicker.component.ts:401</a></div>
2339
+ <div class="io-line">Defined in <a href="" data-line="409"
2340
+ class="link-to-prism">src/datepicker/datepicker.component.ts:409</a></div>
2310
2341
  </td>
2311
2342
  </tr>
2312
2343
 
@@ -2374,8 +2405,8 @@ Emits an event when date picker closes</p>
2374
2405
 
2375
2406
  <tr>
2376
2407
  <td class="col-md-4">
2377
- <div class="io-line">Defined in <a href="" data-line="528"
2378
- class="link-to-prism">src/datepicker/datepicker.component.ts:528</a></div>
2408
+ <div class="io-line">Defined in <a href="" data-line="544"
2409
+ class="link-to-prism">src/datepicker/datepicker.component.ts:544</a></div>
2379
2410
  </td>
2380
2411
  </tr>
2381
2412
 
@@ -2451,8 +2482,8 @@ Emits an event when date picker closes</p>
2451
2482
 
2452
2483
  <tr>
2453
2484
  <td class="col-md-4">
2454
- <div class="io-line">Defined in <a href="" data-line="689"
2455
- class="link-to-prism">src/datepicker/datepicker.component.ts:689</a></div>
2485
+ <div class="io-line">Defined in <a href="" data-line="705"
2486
+ class="link-to-prism">src/datepicker/datepicker.component.ts:705</a></div>
2456
2487
  </td>
2457
2488
  </tr>
2458
2489
 
@@ -2492,8 +2523,8 @@ Emits an event when date picker closes</p>
2492
2523
 
2493
2524
  <tr>
2494
2525
  <td class="col-md-4">
2495
- <div class="io-line">Defined in <a href="" data-line="601"
2496
- class="link-to-prism">src/datepicker/datepicker.component.ts:601</a></div>
2526
+ <div class="io-line">Defined in <a href="" data-line="617"
2527
+ class="link-to-prism">src/datepicker/datepicker.component.ts:617</a></div>
2497
2528
  </td>
2498
2529
  </tr>
2499
2530
 
@@ -2566,8 +2597,8 @@ Emits an event when date picker closes</p>
2566
2597
 
2567
2598
  <tr>
2568
2599
  <td class="col-md-4">
2569
- <div class="io-line">Defined in <a href="" data-line="393"
2570
- class="link-to-prism">src/datepicker/datepicker.component.ts:393</a></div>
2600
+ <div class="io-line">Defined in <a href="" data-line="401"
2601
+ class="link-to-prism">src/datepicker/datepicker.component.ts:401</a></div>
2571
2602
  </td>
2572
2603
  </tr>
2573
2604
 
@@ -2643,8 +2674,8 @@ Emits an event when date picker closes</p>
2643
2674
 
2644
2675
  <tr>
2645
2676
  <td class="col-md-4">
2646
- <div class="io-line">Defined in <a href="" data-line="589"
2647
- class="link-to-prism">src/datepicker/datepicker.component.ts:589</a></div>
2677
+ <div class="io-line">Defined in <a href="" data-line="605"
2678
+ class="link-to-prism">src/datepicker/datepicker.component.ts:605</a></div>
2648
2679
  </td>
2649
2680
  </tr>
2650
2681
 
@@ -2682,8 +2713,8 @@ Emits an event when date picker closes</p>
2682
2713
 
2683
2714
  <tr>
2684
2715
  <td class="col-md-4">
2685
- <div class="io-line">Defined in <a href="" data-line="466"
2686
- class="link-to-prism">src/datepicker/datepicker.component.ts:466</a></div>
2716
+ <div class="io-line">Defined in <a href="" data-line="478"
2717
+ class="link-to-prism">src/datepicker/datepicker.component.ts:478</a></div>
2687
2718
  </td>
2688
2719
  </tr>
2689
2720
 
@@ -2721,8 +2752,8 @@ Emits an event when date picker closes</p>
2721
2752
 
2722
2753
  <tr>
2723
2754
  <td class="col-md-4">
2724
- <div class="io-line">Defined in <a href="" data-line="544"
2725
- class="link-to-prism">src/datepicker/datepicker.component.ts:544</a></div>
2755
+ <div class="io-line">Defined in <a href="" data-line="560"
2756
+ class="link-to-prism">src/datepicker/datepicker.component.ts:560</a></div>
2726
2757
  </td>
2727
2758
  </tr>
2728
2759
 
@@ -2760,8 +2791,8 @@ Emits an event when date picker closes</p>
2760
2791
 
2761
2792
  <tr>
2762
2793
  <td class="col-md-4">
2763
- <div class="io-line">Defined in <a href="" data-line="377"
2764
- class="link-to-prism">src/datepicker/datepicker.component.ts:377</a></div>
2794
+ <div class="io-line">Defined in <a href="" data-line="385"
2795
+ class="link-to-prism">src/datepicker/datepicker.component.ts:385</a></div>
2765
2796
  </td>
2766
2797
  </tr>
2767
2798
 
@@ -2847,7 +2878,7 @@ Emits an event when date picker closes</p>
2847
2878
  </tr>
2848
2879
  <tr>
2849
2880
  <td class="col-md-4">
2850
- <div class="io-line">Defined in <a href="" data-line="255" class="link-to-prism">src/datepicker/datepicker.component.ts:255</a></div>
2881
+ <div class="io-line">Defined in <a href="" data-line="262" class="link-to-prism">src/datepicker/datepicker.component.ts:262</a></div>
2851
2882
  </td>
2852
2883
  </tr>
2853
2884
 
@@ -2879,7 +2910,7 @@ Emits an event when date picker closes</p>
2879
2910
  </tr>
2880
2911
  <tr>
2881
2912
  <td class="col-md-4">
2882
- <div class="io-line">Defined in <a href="" data-line="253" class="link-to-prism">src/datepicker/datepicker.component.ts:253</a></div>
2913
+ <div class="io-line">Defined in <a href="" data-line="260" class="link-to-prism">src/datepicker/datepicker.component.ts:260</a></div>
2883
2914
  </td>
2884
2915
  </tr>
2885
2916
 
@@ -2912,7 +2943,7 @@ Emits an event when date picker closes</p>
2912
2943
  </tr>
2913
2944
  <tr>
2914
2945
  <td class="col-md-4">
2915
- <div class="io-line">Defined in <a href="" data-line="127" class="link-to-prism">src/datepicker/datepicker.component.ts:127</a></div>
2946
+ <div class="io-line">Defined in <a href="" data-line="129" class="link-to-prism">src/datepicker/datepicker.component.ts:129</a></div>
2916
2947
  </td>
2917
2948
  </tr>
2918
2949
 
@@ -2973,7 +3004,7 @@ Emits an event when date picker closes</p>
2973
3004
  </tr>
2974
3005
  <tr>
2975
3006
  <td class="col-md-4">
2976
- <div class="io-line">Defined in <a href="" data-line="259" class="link-to-prism">src/datepicker/datepicker.component.ts:259</a></div>
3007
+ <div class="io-line">Defined in <a href="" data-line="266" class="link-to-prism">src/datepicker/datepicker.component.ts:266</a></div>
2977
3008
  </td>
2978
3009
  </tr>
2979
3010
 
@@ -3005,7 +3036,7 @@ Emits an event when date picker closes</p>
3005
3036
  </tr>
3006
3037
  <tr>
3007
3038
  <td class="col-md-4">
3008
- <div class="io-line">Defined in <a href="" data-line="290" class="link-to-prism">src/datepicker/datepicker.component.ts:290</a></div>
3039
+ <div class="io-line">Defined in <a href="" data-line="297" class="link-to-prism">src/datepicker/datepicker.component.ts:297</a></div>
3009
3040
  </td>
3010
3041
  </tr>
3011
3042
 
@@ -3041,7 +3072,7 @@ Emits an event when date picker closes</p>
3041
3072
  </tr>
3042
3073
  <tr>
3043
3074
  <td class="col-md-4">
3044
- <div class="io-line">Defined in <a href="" data-line="242" class="link-to-prism">src/datepicker/datepicker.component.ts:242</a></div>
3075
+ <div class="io-line">Defined in <a href="" data-line="249" class="link-to-prism">src/datepicker/datepicker.component.ts:249</a></div>
3045
3076
  </td>
3046
3077
  </tr>
3047
3078
 
@@ -3072,7 +3103,7 @@ Emits an event when date picker closes</p>
3072
3103
  </tr>
3073
3104
  <tr>
3074
3105
  <td class="col-md-4">
3075
- <div class="io-line">Defined in <a href="" data-line="405" class="link-to-prism">src/datepicker/datepicker.component.ts:405</a></div>
3106
+ <div class="io-line">Defined in <a href="" data-line="413" class="link-to-prism">src/datepicker/datepicker.component.ts:413</a></div>
3076
3107
  </td>
3077
3108
  </tr>
3078
3109
 
@@ -3098,7 +3129,7 @@ Emits an event when date picker closes</p>
3098
3129
  </tr>
3099
3130
  <tr>
3100
3131
  <td class="col-md-4">
3101
- <div class="io-line">Defined in <a href="" data-line="649" class="link-to-prism">src/datepicker/datepicker.component.ts:649</a></div>
3132
+ <div class="io-line">Defined in <a href="" data-line="665" class="link-to-prism">src/datepicker/datepicker.component.ts:665</a></div>
3102
3133
  </td>
3103
3134
  </tr>
3104
3135
 
@@ -3123,7 +3154,7 @@ Emits an event when date picker closes</p>
3123
3154
  </tr>
3124
3155
  <tr>
3125
3156
  <td class="col-md-4">
3126
- <div class="io-line">Defined in <a href="" data-line="407" class="link-to-prism">src/datepicker/datepicker.component.ts:407</a></div>
3157
+ <div class="io-line">Defined in <a href="" data-line="415" class="link-to-prism">src/datepicker/datepicker.component.ts:415</a></div>
3127
3158
  </td>
3128
3159
  </tr>
3129
3160
 
@@ -3159,7 +3190,7 @@ Emits an event when date picker closes</p>
3159
3190
  </tr>
3160
3191
  <tr>
3161
3192
  <td class="col-md-4">
3162
- <div class="io-line">Defined in <a href="" data-line="243" class="link-to-prism">src/datepicker/datepicker.component.ts:243</a></div>
3193
+ <div class="io-line">Defined in <a href="" data-line="250" class="link-to-prism">src/datepicker/datepicker.component.ts:250</a></div>
3163
3194
  </td>
3164
3195
  </tr>
3165
3196
 
@@ -3188,7 +3219,7 @@ Emits an event when date picker closes</p>
3188
3219
  </tr>
3189
3220
  <tr>
3190
3221
  <td class="col-md-4">
3191
- <div class="io-line">Defined in <a href="" data-line="175" class="link-to-prism">src/datepicker/datepicker.component.ts:175</a></div>
3222
+ <div class="io-line">Defined in <a href="" data-line="177" class="link-to-prism">src/datepicker/datepicker.component.ts:177</a></div>
3192
3223
  </td>
3193
3224
  </tr>
3194
3225
 
@@ -3199,7 +3230,7 @@ Emits an event when date picker closes</p>
3199
3230
  </tr>
3200
3231
  <tr>
3201
3232
  <td class="col-md-4">
3202
- <div class="io-line">Defined in <a href="" data-line="168" class="link-to-prism">src/datepicker/datepicker.component.ts:168</a></div>
3233
+ <div class="io-line">Defined in <a href="" data-line="170" class="link-to-prism">src/datepicker/datepicker.component.ts:170</a></div>
3203
3234
  </td>
3204
3235
  </tr>
3205
3236
  <tr>
@@ -3257,7 +3288,7 @@ Emits an event when date picker closes</p>
3257
3288
  </tr>
3258
3289
  <tr>
3259
3290
  <td class="col-md-4">
3260
- <div class="io-line">Defined in <a href="" data-line="229" class="link-to-prism">src/datepicker/datepicker.component.ts:229</a></div>
3291
+ <div class="io-line">Defined in <a href="" data-line="233" class="link-to-prism">src/datepicker/datepicker.component.ts:233</a></div>
3261
3292
  </td>
3262
3293
  </tr>
3263
3294
 
@@ -3268,7 +3299,7 @@ Emits an event when date picker closes</p>
3268
3299
  </tr>
3269
3300
  <tr>
3270
3301
  <td class="col-md-4">
3271
- <div class="io-line">Defined in <a href="" data-line="226" class="link-to-prism">src/datepicker/datepicker.component.ts:226</a></div>
3302
+ <div class="io-line">Defined in <a href="" data-line="230" class="link-to-prism">src/datepicker/datepicker.component.ts:230</a></div>
3272
3303
  </td>
3273
3304
  </tr>
3274
3305
  <tr>
@@ -3391,6 +3422,7 @@ if (languages.default?.default[&quot;en&quot;]?.weekdays) {
3391
3422
  [type]&#x3D;&quot;(range ? &#x27;range&#x27; : &#x27;single&#x27;)&quot;
3392
3423
  [hasIcon]&#x3D;&quot;(range ? false : true)&quot;
3393
3424
  [disabled]&#x3D;&quot;disabled&quot;
3425
+ [readonly]&#x3D;&quot;readonly&quot;
3394
3426
  [invalid]&#x3D;&quot;invalid&quot;
3395
3427
  [invalidText]&#x3D;&quot;invalidText&quot;
3396
3428
  [warn]&#x3D;&quot;warn&quot;
@@ -3413,6 +3445,7 @@ if (languages.default?.default[&quot;en&quot;]?.weekdays) {
3413
3445
  [type]&#x3D;&quot;(range ? &#x27;range&#x27; : &#x27;single&#x27;)&quot;
3414
3446
  [hasIcon]&#x3D;&quot;(range ? true : null)&quot;
3415
3447
  [disabled]&#x3D;&quot;disabled&quot;
3448
+ [readonly]&#x3D;&quot;readonly&quot;
3416
3449
  [invalid]&#x3D;&quot;rangeInvalid&quot;
3417
3450
  [invalidText]&#x3D;&quot;rangeInvalidText&quot;
3418
3451
  [warn]&#x3D;&quot;rangeWarn&quot;
@@ -3500,6 +3533,8 @@ export class DatePicker implements
3500
3533
  @Input() theme: &quot;light&quot; | &quot;dark&quot; &#x3D; &quot;dark&quot;;
3501
3534
 
3502
3535
  @Input() disabled &#x3D; false;
3536
+
3537
+ @Input() readonly &#x3D; false;
3503
3538
  /**
3504
3539
  * Set to &#x60;true&#x60; to display the invalid state.
3505
3540
  */
@@ -3552,7 +3587,10 @@ export class DatePicker implements
3552
3587
  mode: this.range ? &quot;range&quot; : &quot;single&quot;,
3553
3588
  plugins,
3554
3589
  dateFormat: this.dateFormat,
3555
- locale: languages.default?.default[this.language] || languages.default[this.language]
3590
+ locale: languages.default?.default[this.language] || languages.default[this.language],
3591
+ // Little trick force &quot;readonly mode&quot; on datepicker input.
3592
+ // Docs: Whether clicking on the input should open the picker. You could disable this if you wish to open the calendar manually with.open().
3593
+ clickOpens: !this.readonly
3556
3594
  });
3557
3595
  }
3558
3596
 
@@ -3631,7 +3669,8 @@ export class DatePicker implements
3631
3669
  &quot;id&quot;,
3632
3670
  &quot;value&quot;,
3633
3671
  &quot;plugins&quot;,
3634
- &quot;flatpickrOptions&quot;
3672
+ &quot;flatpickrOptions&quot;,
3673
+ &quot;readonly&quot;
3635
3674
  ];
3636
3675
  const changeKeys &#x3D; Object.keys(changes);
3637
3676
  if (changeKeys.some(key &#x3D;&gt; flatpickrChangeKeys.includes(key))) {
@@ -3761,6 +3800,10 @@ export class DatePicker implements
3761
3800
  * Handles opening the calendar &quot;properly&quot; when the calendar icon is clicked.
3762
3801
  */
3763
3802
  openCalendar(datepickerInput: DatePickerInput) {
3803
+ if (this.readonly) {
3804
+ return;
3805
+ }
3806
+
3764
3807
  if (this.range) {
3765
3808
  datepickerInput.input.nativeElement.click();
3766
3809
 
@@ -3800,6 +3843,10 @@ export class DatePicker implements
3800
3843
  // flatpickr calendar using a keyboard.
3801
3844
  const addFocusCalendarListener &#x3D; (element: HTMLInputElement) &#x3D;&gt; {
3802
3845
  element.addEventListener(&quot;keydown&quot;, (event: KeyboardEvent) &#x3D;&gt; {
3846
+ // Listeners are added just once, so a check is needed here.
3847
+ if (this.readonly) {
3848
+ return;
3849
+ }
3803
3850
  if (event.key &#x3D;&#x3D;&#x3D; &quot;Escape&quot;) {
3804
3851
  this.flatpickrInstance.close();
3805
3852
  }
@@ -4052,7 +4099,7 @@ export class DatePicker implements
4052
4099
  <script src="../js/libs/htmlparser.js"></script>
4053
4100
  <script src="../js/libs/deep-iterator.js"></script>
4054
4101
  <script>
4055
- var COMPONENT_TEMPLATE = '<div><div class="cds--form-item"> <div class="cds--date-picker" [ngClass]="{ \'cds--date-picker--range\' : range, \'cds--date-picker--single\' : !range, \'cds--date-picker--light\' : theme === \'light\', \'cds--skeleton\' : skeleton }"> <div class="cds--date-picker-container"> <cds-date-picker-input #input [label]="label" [placeholder]="placeholder" [pattern]="inputPattern" [id]="id + \'-input\'" [size]="size" [type]="(range ? \'range\' : \'single\')" [hasIcon]="(range ? false : true)" [disabled]="disabled" [invalid]="invalid" [invalidText]="invalidText" [warn]="warn" [warnText]="warnText" [skeleton]="skeleton" [helperText]="helperText" (valueChange)="onValueChange($event)" (click)="openCalendar(input)"> </cds-date-picker-input> </div> <div *ngIf="range" class="cds--date-picker-container"> <cds-date-picker-input #rangeInput [label]="rangeLabel" [placeholder]="placeholder" [pattern]="inputPattern" [id]="id + \'-rangeInput\'" [size]="size" [type]="(range ? \'range\' : \'single\')" [hasIcon]="(range ? true : null)" [disabled]="disabled" [invalid]="rangeInvalid" [invalidText]="rangeInvalidText" [warn]="rangeWarn" [warnText]="rangeWarnText" [skeleton]="skeleton" [helperText]="rangeHelperText" (valueChange)="onRangeValueChange($event)" (click)="openCalendar(rangeInput)"> </cds-date-picker-input> </div> </div></div></div>'
4102
+ var COMPONENT_TEMPLATE = '<div><div class="cds--form-item"> <div class="cds--date-picker" [ngClass]="{ \'cds--date-picker--range\' : range, \'cds--date-picker--single\' : !range, \'cds--date-picker--light\' : theme === \'light\', \'cds--skeleton\' : skeleton }"> <div class="cds--date-picker-container"> <cds-date-picker-input #input [label]="label" [placeholder]="placeholder" [pattern]="inputPattern" [id]="id + \'-input\'" [size]="size" [type]="(range ? \'range\' : \'single\')" [hasIcon]="(range ? false : true)" [disabled]="disabled" [readonly]="readonly" [invalid]="invalid" [invalidText]="invalidText" [warn]="warn" [warnText]="warnText" [skeleton]="skeleton" [helperText]="helperText" (valueChange)="onValueChange($event)" (click)="openCalendar(input)"> </cds-date-picker-input> </div> <div *ngIf="range" class="cds--date-picker-container"> <cds-date-picker-input #rangeInput [label]="rangeLabel" [placeholder]="placeholder" [pattern]="inputPattern" [id]="id + \'-rangeInput\'" [size]="size" [type]="(range ? \'range\' : \'single\')" [hasIcon]="(range ? true : null)" [disabled]="disabled" [readonly]="readonly" [invalid]="rangeInvalid" [invalidText]="rangeInvalidText" [warn]="rangeWarn" [warnText]="rangeWarnText" [skeleton]="skeleton" [helperText]="rangeHelperText" (valueChange)="onRangeValueChange($event)" (click)="openCalendar(rangeInput)"> </cds-date-picker-input> </div> </div></div></div>'
4056
4103
  var COMPONENTS = [{'name': 'Accordion', 'selector': 'cds-accordion, ibm-accordion'},{'name': 'AccordionItem', 'selector': 'cds-accordion-item, ibm-accordion-item'},{'name': 'ActionableNotification', 'selector': 'cds-actionable-notification, ibm-actionable-notification'},{'name': 'AlertModal', 'selector': 'cds-alert-modal, ibm-alert-modal'},{'name': 'BaseIconButton', 'selector': ''},{'name': 'BaseNotification', 'selector': ''},{'name': 'BaseTabHeader', 'selector': ''},{'name': 'Breadcrumb', 'selector': 'cds-breadcrumb, ibm-breadcrumb'},{'name': 'BreadcrumbItemComponent', 'selector': 'cds-breadcrumb-item, ibm-breadcrumb-item'},{'name': 'ButtonSet', 'selector': 'cds-button-set, ibm-button-set'},{'name': 'Checkbox', 'selector': 'cds-checkbox, ibm-checkbox'},{'name': 'ClickableTile', 'selector': 'cds-clickable-tile, ibm-clickable-tile'},{'name': 'CodeSnippet', 'selector': 'cds-code-snippet, ibm-code-snippet'},{'name': 'ComboBox', 'selector': 'cds-combo-box, ibm-combo-box'},{'name': 'ContainedList', 'selector': 'cds-contained-list, ibm-contained-list'},{'name': 'ContainedListItem', 'selector': 'cds-contained-list-item, ibm-contained-list-item'},{'name': 'ContentSwitcher', 'selector': 'cds-content-switcher, ibm-content-switcher'},{'name': 'ContextMenuComponent', 'selector': 'cds-context-menu, ibm-context-menu'},{'name': 'ContextMenuDividerComponent', 'selector': 'cds-context-menu-divider, ibm-context-menu-divider'},{'name': 'ContextMenuGroupComponent', 'selector': 'cds-context-menu-group, ibm-context-menu-group'},{'name': 'ContextMenuItemComponent', 'selector': 'cds-context-menu-item, ibm-context-menu-item'},{'name': 'DatePicker', 'selector': 'cds-date-picker, ibm-date-picker'},{'name': 'DatePickerInput', 'selector': 'cds-date-picker-input, ibm-date-picker-input'},{'name': 'Dialog', 'selector': 'cds-dialog, ibm-dialog'},{'name': 'Documentation', 'selector': 'cds-documentation'},{'name': 'Dropdown', 'selector': 'cds-dropdown, ibm-dropdown'},{'name': 'DropdownList', 'selector': 'cds-dropdown-list, ibm-dropdown-list'},{'name': 'ExpandableTile', 'selector': 'cds-expandable-tile, ibm-expandable-tile'},{'name': 'FileComponent', 'selector': 'cds-file, ibm-file'},{'name': 'FileUploader', 'selector': 'cds-file-uploader, ibm-file-uploader'},{'name': 'Hamburger', 'selector': 'cds-hamburger, ibm-hamburger'},{'name': 'Header', 'selector': 'cds-header, ibm-header'},{'name': 'HeaderAction', 'selector': 'cds-header-action, ibm-header-action'},{'name': 'HeaderGlobal', 'selector': 'cds-header-global, ibm-header-global'},{'name': 'HeaderItem', 'selector': 'cds-header-item, ibm-header-item'},{'name': 'HeaderMenu', 'selector': 'cds-header-menu, ibm-header-menu'},{'name': 'HeaderNavigation', 'selector': 'cds-header-navigation, ibm-header-navigation'},{'name': 'IconButton', 'selector': 'cds-icon-button, ibm-icon-button'},{'name': 'InlineLoading', 'selector': 'cds-inline-loading, ibm-inline-loading'},{'name': 'Label', 'selector': 'cds-label, ibm-label'},{'name': 'ListColumn', 'selector': 'cds-list-column, ibm-list-column'},{'name': 'ListHeader', 'selector': 'cds-list-header, ibm-list-header'},{'name': 'ListRow', 'selector': 'cds-list-row, ibm-list-row'},{'name': 'Loading', 'selector': 'cds-loading, ibm-loading'},{'name': 'Modal', 'selector': 'cds-modal, ibm-modal'},{'name': 'ModalFooter', 'selector': 'cds-modal-footer, ibm-modal-footer'},{'name': 'ModalHeader', 'selector': 'cds-modal-header, ibm-modal-header'},{'name': 'Notification', 'selector': 'cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification'},{'name': 'NumberComponent', 'selector': 'cds-number, ibm-number'},{'name': 'OverflowMenu', 'selector': 'cds-overflow-menu, ibm-overflow-menu'},{'name': 'OverflowMenuCustomPane', 'selector': 'cds-overflow-custom-menu-pane, ibm-overflow-custom-menu-pane'},{'name': 'OverflowMenuOption', 'selector': 'cds-overflow-menu-option, ibm-overflow-menu-option'},{'name': 'OverflowMenuPane', 'selector': 'cds-overflow-menu-pane, ibm-overflow-menu-pane'},{'name': 'Overlay', 'selector': 'cds-overlay, ibm-overlay'},{'name': 'Pagination', 'selector': 'cds-pagination, ibm-pagination'},{'name': 'PaginationNav', 'selector': 'cds-pagination-nav, ibm-pagination-navm'},{'name': 'PaginationNavItem', 'selector': 'cds-pagination-nav-item, ibm-pagination-nav-item'},{'name': 'PaginationOverflow', 'selector': 'cds-pagination-overflow, ibm-pagination-overflow'},{'name': 'Panel', 'selector': 'cds-panel, ibm-panel'},{'name': 'PasswordInputLabelComponent', 'selector': 'cds-password-label, ibm-password-label'},{'name': 'Placeholder', 'selector': 'cds-placeholder, ibm-placeholder'},{'name': 'PopoverContent', 'selector': 'cds-popover-content, ibm-popover-content'},{'name': 'ProgressBar', 'selector': 'cds-progress-bar, ibm-progress-bar'},{'name': 'ProgressIndicator', 'selector': 'cds-progress-indicator, ibm-progress-indicator'},{'name': 'Radio', 'selector': 'cds-radio, ibm-radio'},{'name': 'RadioGroup', 'selector': 'cds-radio-group, ibm-radio-group'},{'name': 'Search', 'selector': 'cds-search, ibm-search'},{'name': 'Select', 'selector': 'cds-select, ibm-select'},{'name': 'SelectionTile', 'selector': 'cds-selection-tile, ibm-selection-tile'},{'name': 'SideNav', 'selector': 'cds-sidenav, ibm-sidenav'},{'name': 'SideNavItem', 'selector': 'cds-sidenav-item, ibm-sidenav-item'},{'name': 'SideNavMenu', 'selector': 'cds-sidenav-menu, ibm-sidenav-menu'},{'name': 'SkeletonPlaceholder', 'selector': 'cds-skeleton-placeholder, ibm-skeleton-placeholder'},{'name': 'SkeletonText', 'selector': 'cds-skeleton-text, ibm-skeleton-text'},{'name': 'Slider', 'selector': 'cds-slider, ibm-slider'},{'name': 'StructuredList', 'selector': 'cds-structured-list, ibm-structured-list'},{'name': 'SwitcherList', 'selector': 'cds-switcher-list, ibm-switcher-list'},{'name': 'SwitcherListItem', 'selector': 'cds-switcher-list-item, ibm-switcher-list-item'},{'name': 'Tab', 'selector': 'cds-tab, ibm-tab'},{'name': 'TabHeaderGroup', 'selector': 'cds-tab-header-group, ibm-tab-header-group'},{'name': 'TabHeaders', 'selector': 'cds-tab-headers, ibm-tab-headers'},{'name': 'Table', 'selector': 'cds-table, ibm-table'},{'name': 'TableBody', 'selector': '[cdsTableBody], [ibmTableBody]'},{'name': 'TableCheckbox', 'selector': '[cdsTableCheckbox], [ibmTableCheckbox]'},{'name': 'TableContainer', 'selector': 'cds-table-container, ibm-table-container'},{'name': 'TableData', 'selector': '[cdsTableData], [ibmTableData]'},{'name': 'TableExpandButton', 'selector': '[cdsTableExpandButton], [ibmTableExpandButton]'},{'name': 'TableExpandedRow', 'selector': '[cdsTableExpandedRow], [ibmTableExpandedRow]'},{'name': 'TableHead', 'selector': '[cdsTableHead], [ibmTableHead]'},{'name': 'TableHeadCell', 'selector': '[cdsTableHeadCell], [ibmTableHeadCell]'},{'name': 'TableHeadCheckbox', 'selector': '[cdsTableHeadCheckbox], [ibmTableHeadCheckbox]'},{'name': 'TableHeader', 'selector': 'cds-table-header, ibm-table-header'},{'name': 'TableHeadExpand', 'selector': '[cdsTableHeadExpand], [ibmTableHeadExpand]'},{'name': 'TableRadio', 'selector': '[cdsTableRadio], [ibmTableRadio]'},{'name': 'TableRowComponent', 'selector': '[cdsTableRow], [ibmTableRow]'},{'name': 'TableToolbar', 'selector': 'cds-table-toolbar, ibm-table-toolbar'},{'name': 'TableToolbarActions', 'selector': 'cds-table-toolbar-actions, ibm-table-toolbar-actions'},{'name': 'TableToolbarContent', 'selector': 'cds-table-toolbar-content, ibm-table-toolbar-content'},{'name': 'TableToolbarSearch', 'selector': 'cds-table-toolbar-search, ibm-table-toolbar-search'},{'name': 'Tabs', 'selector': 'cds-tabs, ibm-tabs'},{'name': 'TabSkeleton', 'selector': 'cds-tabs-skeleton, ibm-tabs-skeleton'},{'name': 'Tag', 'selector': 'cds-tag, ibm-tag'},{'name': 'TagFilter', 'selector': 'cds-tag-filter, ibm-tag-filter'},{'name': 'TextareaLabelComponent', 'selector': 'cds-textarea-label, ibm-textarea-label'},{'name': 'TextInputLabelComponent', 'selector': 'cds-text-label, ibm-text-label'},{'name': 'Tile', 'selector': 'cds-tile, ibm-tile'},{'name': 'TileGroup', 'selector': 'cds-tile-group, ibm-tile-group'},{'name': 'TimePicker', 'selector': 'cds-timepicker, ibm-timepicker'},{'name': 'TimePickerSelect', 'selector': 'cds-timepicker-select, ibm-timepicker-select'},{'name': 'Toast', 'selector': 'cds-toast, ibm-toast'},{'name': 'Toggle', 'selector': 'cds-toggle, ibm-toggle'},{'name': 'Toggletip', 'selector': 'cds-toggletip, ibm-toggletip'},{'name': 'Tooltip', 'selector': 'cds-tooltip, ibm-tooltip'},{'name': 'TooltipDefinition', 'selector': 'cds-tooltip-definition, ibm-tooltip-definition'},{'name': 'TreeNodeComponent', 'selector': 'cds-tree-node'},{'name': 'TreeViewComponent', 'selector': 'cds-tree-view'}];
4057
4104
  var DIRECTIVES = [{'name': 'AbstractDropdownView', 'selector': '[cdsAbstractDropdownView], [ibmAbstractDropdownView]'},{'name': 'ActionableButton', 'selector': '[cdsActionableButton], [ibmActionableButton]'},{'name': 'ActionableSubtitle', 'selector': '[cdsActionableSubtitle], [ibmActionableSubtitle]'},{'name': 'ActionableTitle', 'selector': '[cdsActionableTitle], [ibmActionableTitle]'},{'name': 'BaseModal', 'selector': '[cdsBaseModal], [ibmBaseModal]'},{'name': 'Button', 'selector': '[cdsButton], [ibmButton]'},{'name': 'ColumnDirective', 'selector': '[cdsCol], [ibmCol]'},{'name': 'ContentSwitcherOption', 'selector': '[cdsContentOption], [ibmContentOption]'},{'name': 'DialogDirective', 'selector': '[cdsDialog], [ibmDialog]'},{'name': 'ExpandableTileAboveFoldDirective', 'selector': '[cdsAboveFold], [ibmAboveFold]'},{'name': 'ExpandableTileBelowFoldDirective', 'selector': '[cdsBelowFold], [ibmBelowFold]'},{'name': 'ExpandedRowHover', 'selector': '[cdsExpandedRowHover], [ibmExpandedRowHover]'},{'name': 'GridDirective', 'selector': '[cdsGrid], [ibmGrid]'},{'name': 'IconDirective', 'selector': '[cdsIcon], [ibmIcon]'},{'name': 'LayerDirective', 'selector': '[cdsLayer], [ibmLayer]'},{'name': 'Link', 'selector': '[cdsLink], [ibmLink]'},{'name': 'List', 'selector': '[cdsList], [ibmList]'},{'name': 'ListItemDirective', 'selector': '[cdsListItem], [ibmListItem]'},{'name': 'ModalContent', 'selector': '[cdsModalContent], [ibmModalContent]'},{'name': 'ModalContentText', 'selector': '[cdsModalContentText], [ibmModalContentText]'},{'name': 'ModalHeaderHeading', 'selector': '[cdsModalHeaderHeading], [ibmModalHeaderHeading]'},{'name': 'ModalHeaderLabel', 'selector': '[cdsModalHeaderLabel], [ibmModalHeaderLabel]'},{'name': 'NotificationSubtitle', 'selector': '[cdsNotificationSubtitle], [ibmNotificationSubtitle]'},{'name': 'NotificationTitle', 'selector': '[cdsNotificationTitle], [ibmNotificationTitle]'},{'name': 'OptGroup', 'selector': 'optgroup'},{'name': 'Option', 'selector': 'option'},{'name': 'OverflowMenuDirective', 'selector': '[cdsOverflowMenu], [ibmOverflowMenu]'},{'name': 'PasswordInput', 'selector': '[cdsPassword], [ibmPassword]'},{'name': 'PopoverContainer', 'selector': '[cdsPopover], [ibmPopover]'},{'name': 'RouterLinkExtendedDirective', 'selector': '[routerLink]'},{'name': 'RowDirective', 'selector': '[cdsRow], [ibmRow]'},{'name': 'ScrollableList', 'selector': '[cdsScrollableList], [ibmScrollableList]'},{'name': 'StackDirective', 'selector': '[cdsStack], [ibmStack]'},{'name': 'TabHeader', 'selector': '[cdsTabHeader], [ibmTabHeader]'},{'name': 'TableDirective', 'selector': '[cdsTable], [ibmTable]'},{'name': 'TableHeadCellLabel', 'selector': '[cdsTableHeadCellLabel], [ibmTableHeadCellLabel]'},{'name': 'TableHeaderDescription', 'selector': '[cdsTableHeaderDescription], [ibmTableHeaderDescription]'},{'name': 'TableHeaderTitle', 'selector': '[cdsTableHeaderTitle], [ibmTableHeaderTitle]'},{'name': 'TextArea', 'selector': '[cdsTextArea], [ibmTextArea]'},{'name': 'TextInput', 'selector': '[cdsText], [ibmText]'},{'name': 'ThemeDirective', 'selector': '[cdsTheme], [ibmTheme]'},{'name': 'ToastCaption', 'selector': '[cdsToastCaption], [ibmToastCaption]'},{'name': 'ToastSubtitle', 'selector': '[cdsToastSubtitle], [ibmToastSubtitle]'},{'name': 'ToastTitle', 'selector': '[cdsToastTitle], [ibmToastTitle]'},{'name': 'ToggletipAction', 'selector': '[cdsToggletipAction], [ibmToggletipAction]'},{'name': 'ToggletipButton', 'selector': '[cdsToggletipButton], [ibmToggletipButton]'},{'name': 'ToggletipContent', 'selector': '[cdsToggletipContent], [ibmToggletipContent]'},{'name': 'ToggletipLabel', 'selector': '[cdsToggletipLabel], [ibmToggletipLabel]'}];
4058
4105
  var ACTUAL_COMPONENT = {'name': 'DatePicker'};