carbon-components-angular 5.35.0 → 5.37.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 (82) 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/Select.html +252 -45
  6. package/docs/documentation/components/TimePickerSelect.html +218 -24
  7. package/docs/documentation/coverage.html +11 -11
  8. package/docs/documentation/js/search/search_index.js +2 -2
  9. package/docs/documentation/modules/ComboBoxModule/dependencies.svg +4 -4
  10. package/docs/documentation/modules/ComboBoxModule.html +4 -4
  11. package/docs/documentation/modules/ContentSwitcherModule/dependencies.svg +4 -4
  12. package/docs/documentation/modules/ContentSwitcherModule.html +4 -4
  13. package/docs/documentation/modules/DatePickerInputModule/dependencies.svg +37 -41
  14. package/docs/documentation/modules/DatePickerInputModule.html +37 -41
  15. package/docs/documentation/modules/DatePickerModule/dependencies.svg +38 -38
  16. package/docs/documentation/modules/DatePickerModule.html +38 -38
  17. package/docs/documentation/modules/GridModule/dependencies.svg +60 -60
  18. package/docs/documentation/modules/GridModule.html +60 -60
  19. package/docs/documentation/modules/LoadingModule/dependencies.svg +4 -4
  20. package/docs/documentation/modules/LoadingModule.html +4 -4
  21. package/docs/documentation/modules/NFormsModule/dependencies.svg +4 -4
  22. package/docs/documentation/modules/NFormsModule.html +4 -4
  23. package/docs/documentation/modules/NumberModule/dependencies.svg +4 -4
  24. package/docs/documentation/modules/NumberModule.html +4 -4
  25. package/docs/documentation/modules/ProgressIndicatorModule/dependencies.svg +4 -4
  26. package/docs/documentation/modules/ProgressIndicatorModule.html +4 -4
  27. package/docs/documentation/modules/RadioModule/dependencies.svg +4 -4
  28. package/docs/documentation/modules/RadioModule.html +4 -4
  29. package/docs/documentation/modules/SelectModule/dependencies.svg +58 -58
  30. package/docs/documentation/modules/SelectModule.html +58 -58
  31. package/docs/documentation/modules/SliderModule/dependencies.svg +4 -4
  32. package/docs/documentation/modules/SliderModule.html +4 -4
  33. package/docs/documentation/modules/TableModule/dependencies.svg +216 -216
  34. package/docs/documentation/modules/TableModule.html +216 -216
  35. package/docs/documentation/modules/TabsModule/dependencies.svg +69 -69
  36. package/docs/documentation/modules/TabsModule.html +69 -69
  37. package/docs/documentation/modules/ThemeModule/dependencies.svg +4 -4
  38. package/docs/documentation/modules/ThemeModule.html +4 -4
  39. package/docs/documentation/modules/TilesModule/dependencies.svg +76 -76
  40. package/docs/documentation/modules/TilesModule.html +76 -76
  41. package/docs/documentation/modules/TimePickerModule/dependencies.svg +38 -42
  42. package/docs/documentation/modules/TimePickerModule.html +38 -42
  43. package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +4 -4
  44. package/docs/documentation/modules/TimePickerSelectModule.html +4 -4
  45. package/docs/documentation/modules/ToggleModule/dependencies.svg +45 -41
  46. package/docs/documentation/modules/ToggleModule.html +45 -41
  47. package/docs/documentation/modules/ToggletipModule/dependencies.svg +37 -37
  48. package/docs/documentation/modules/ToggletipModule.html +37 -37
  49. package/docs/documentation/modules/TooltipModule/dependencies.svg +4 -4
  50. package/docs/documentation/modules/TooltipModule.html +4 -4
  51. package/docs/documentation/modules/TreeviewModule/dependencies.svg +4 -4
  52. package/docs/documentation/modules/TreeviewModule.html +4 -4
  53. package/docs/documentation/modules/UIShellModule/dependencies.svg +4 -4
  54. package/docs/documentation/modules/UIShellModule.html +4 -4
  55. package/docs/documentation.json +330 -169
  56. package/docs/storybook/{9672.c7063b22.iframe.bundle.js → 9672.48c27c98.iframe.bundle.js} +1 -1
  57. package/docs/storybook/datepicker-datepicker-stories.fb6b3054.iframe.bundle.js +1 -0
  58. package/docs/storybook/iframe.html +2 -2
  59. package/docs/storybook/main.b583315a.iframe.bundle.js +1 -0
  60. package/docs/storybook/project.json +1 -1
  61. package/docs/storybook/{runtime~main.2666a44e.iframe.bundle.js → runtime~main.3bc73b8f.iframe.bundle.js} +1 -1
  62. package/docs/storybook/select-select-stories.c1077d92.iframe.bundle.js +1 -0
  63. package/esm2020/datepicker/datepicker.component.mjs +23 -5
  64. package/esm2020/datepicker-input/datepicker-input.component.mjs +7 -2
  65. package/esm2020/select/select.component.mjs +38 -6
  66. package/fesm2015/carbon-components-angular-datepicker-input.mjs +6 -1
  67. package/fesm2015/carbon-components-angular-datepicker-input.mjs.map +1 -1
  68. package/fesm2015/carbon-components-angular-datepicker.mjs +22 -4
  69. package/fesm2015/carbon-components-angular-datepicker.mjs.map +1 -1
  70. package/fesm2015/carbon-components-angular-select.mjs +37 -5
  71. package/fesm2015/carbon-components-angular-select.mjs.map +1 -1
  72. package/fesm2020/carbon-components-angular-datepicker-input.mjs +6 -1
  73. package/fesm2020/carbon-components-angular-datepicker-input.mjs.map +1 -1
  74. package/fesm2020/carbon-components-angular-datepicker.mjs +22 -4
  75. package/fesm2020/carbon-components-angular-datepicker.mjs.map +1 -1
  76. package/fesm2020/carbon-components-angular-select.mjs +37 -5
  77. package/fesm2020/carbon-components-angular-select.mjs.map +1 -1
  78. package/package.json +1 -1
  79. package/select/select.component.d.ts +7 -1
  80. package/docs/storybook/datepicker-datepicker-stories.45228636.iframe.bundle.js +0 -1
  81. package/docs/storybook/main.233cfcc5.iframe.bundle.js +0 -1
  82. package/docs/storybook/select-select-stories.f28348e5.iframe.bundle.js +0 -1
package/docs/documentation/components/DatePickerInput.html CHANGED
@@ -196,6 +196,7 @@
196
196
  [placeholder]="placeholder"
197
197
  [id]= "id"
198
198
  [disabled]="disabled"
199
+ [readonly]="readonly"
199
200
  (change)="onChange($event)"/>
200
201
  <svg
201
202
  *ngIf="type !== 'simple' && !warn && !invalid"
@@ -347,6 +348,9 @@
347
348
  <li>
348
349
  <a href="#placeholder" >placeholder</a>
349
350
  </li>
351
+ <li>
352
+ <a href="#readonly" >readonly</a>
353
+ </li>
350
354
  <li>
351
355
  <a href="#size" >size</a>
352
356
  </li>
@@ -404,7 +408,7 @@
404
408
  </tr>
405
409
  <tr>
406
410
  <td class="col-md-4">
407
- <div class="io-line">Defined in <a href="" data-line="159" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:159</a></div>
411
+ <div class="io-line">Defined in <a href="" data-line="162" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:162</a></div>
408
412
  </td>
409
413
  </tr>
410
414
 
@@ -465,7 +469,7 @@
465
469
  </tr>
466
470
  <tr>
467
471
  <td class="col-md-2" colspan="2">
468
- <div class="io-line">Defined in <a href="" data-line="130" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:130</a></div>
472
+ <div class="io-line">Defined in <a href="" data-line="131" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:131</a></div>
469
473
  </td>
470
474
  </tr>
471
475
  </tbody>
@@ -491,7 +495,7 @@
491
495
  </tr>
492
496
  <tr>
493
497
  <td class="col-md-2" colspan="2">
494
- <div class="io-line">Defined in <a href="" data-line="114" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:114</a></div>
498
+ <div class="io-line">Defined in <a href="" data-line="115" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:115</a></div>
495
499
  </td>
496
500
  </tr>
497
501
  </tbody>
@@ -512,7 +516,7 @@
512
516
  </tr>
513
517
  <tr>
514
518
  <td class="col-md-2" colspan="2">
515
- <div class="io-line">Defined in <a href="" data-line="151" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:151</a></div>
519
+ <div class="io-line">Defined in <a href="" data-line="154" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:154</a></div>
516
520
  </td>
517
521
  </tr>
518
522
  <tr>
@@ -544,7 +548,7 @@
544
548
  </tr>
545
549
  <tr>
546
550
  <td class="col-md-2" colspan="2">
547
- <div class="io-line">Defined in <a href="" data-line="112" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:112</a></div>
551
+ <div class="io-line">Defined in <a href="" data-line="113" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:113</a></div>
548
552
  </td>
549
553
  </tr>
550
554
  </tbody>
@@ -570,7 +574,7 @@
570
574
  </tr>
571
575
  <tr>
572
576
  <td class="col-md-2" colspan="2">
573
- <div class="io-line">Defined in <a href="" data-line="134" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:134</a></div>
577
+ <div class="io-line">Defined in <a href="" data-line="137" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:137</a></div>
574
578
  </td>
575
579
  </tr>
576
580
  <tr>
@@ -597,7 +601,7 @@
597
601
  </tr>
598
602
  <tr>
599
603
  <td class="col-md-2" colspan="2">
600
- <div class="io-line">Defined in <a href="" data-line="138" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:138</a></div>
604
+ <div class="io-line">Defined in <a href="" data-line="141" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:141</a></div>
601
605
  </td>
602
606
  </tr>
603
607
  <tr>
@@ -624,7 +628,7 @@
624
628
  </tr>
625
629
  <tr>
626
630
  <td class="col-md-2" colspan="2">
627
- <div class="io-line">Defined in <a href="" data-line="116" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:116</a></div>
631
+ <div class="io-line">Defined in <a href="" data-line="117" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:117</a></div>
628
632
  </td>
629
633
  </tr>
630
634
  </tbody>
@@ -650,7 +654,7 @@
650
654
  </tr>
651
655
  <tr>
652
656
  <td class="col-md-2" colspan="2">
653
- <div class="io-line">Defined in <a href="" data-line="120" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:120</a></div>
657
+ <div class="io-line">Defined in <a href="" data-line="121" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:121</a></div>
654
658
  </td>
655
659
  </tr>
656
660
  </tbody>
@@ -676,7 +680,33 @@
676
680
  </tr>
677
681
  <tr>
678
682
  <td class="col-md-2" colspan="2">
679
- <div class="io-line">Defined in <a href="" data-line="118" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:118</a></div>
683
+ <div class="io-line">Defined in <a href="" data-line="119" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:119</a></div>
684
+ </td>
685
+ </tr>
686
+ </tbody>
687
+ </table>
688
+ <table class="table table-sm table-bordered">
689
+ <tbody>
690
+ <tr>
691
+ <td class="col-md-4">
692
+ <a name="readonly"></a>
693
+ <b>readonly</b>
694
+ </td>
695
+ </tr>
696
+ <tr>
697
+ <td class="col-md-4">
698
+ <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
699
+
700
+ </td>
701
+ </tr>
702
+ <tr>
703
+ <td class="col-md-4">
704
+ <i>Default value : </i><code>false</code>
705
+ </td>
706
+ </tr>
707
+ <tr>
708
+ <td class="col-md-2" colspan="2">
709
+ <div class="io-line">Defined in <a href="" data-line="133" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:133</a></div>
680
710
  </td>
681
711
  </tr>
682
712
  </tbody>
@@ -702,7 +732,7 @@
702
732
  </tr>
703
733
  <tr>
704
734
  <td class="col-md-2" colspan="2">
705
- <div class="io-line">Defined in <a href="" data-line="157" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:157</a></div>
735
+ <div class="io-line">Defined in <a href="" data-line="160" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:160</a></div>
706
736
  </td>
707
737
  </tr>
708
738
  </tbody>
@@ -728,7 +758,7 @@
728
758
  </tr>
729
759
  <tr>
730
760
  <td class="col-md-2" colspan="2">
731
- <div class="io-line">Defined in <a href="" data-line="153" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:153</a></div>
761
+ <div class="io-line">Defined in <a href="" data-line="156" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:156</a></div>
732
762
  </td>
733
763
  </tr>
734
764
  </tbody>
@@ -754,7 +784,7 @@
754
784
  </tr>
755
785
  <tr>
756
786
  <td class="col-md-2" colspan="2">
757
- <div class="io-line">Defined in <a href="" data-line="128" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:128</a></div>
787
+ <div class="io-line">Defined in <a href="" data-line="129" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:129</a></div>
758
788
  </td>
759
789
  </tr>
760
790
  </tbody>
@@ -780,7 +810,7 @@
780
810
  </tr>
781
811
  <tr>
782
812
  <td class="col-md-2" colspan="2">
783
- <div class="io-line">Defined in <a href="" data-line="110" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:110</a></div>
813
+ <div class="io-line">Defined in <a href="" data-line="111" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:111</a></div>
784
814
  </td>
785
815
  </tr>
786
816
  <tr>
@@ -813,7 +843,7 @@ Internal purposes only.</p>
813
843
  </tr>
814
844
  <tr>
815
845
  <td class="col-md-2" colspan="2">
816
- <div class="io-line">Defined in <a href="" data-line="155" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:155</a></div>
846
+ <div class="io-line">Defined in <a href="" data-line="158" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:158</a></div>
817
847
  </td>
818
848
  </tr>
819
849
  </tbody>
@@ -839,7 +869,7 @@ Internal purposes only.</p>
839
869
  </tr>
840
870
  <tr>
841
871
  <td class="col-md-2" colspan="2">
842
- <div class="io-line">Defined in <a href="" data-line="142" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:142</a></div>
872
+ <div class="io-line">Defined in <a href="" data-line="145" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:145</a></div>
843
873
  </td>
844
874
  </tr>
845
875
  <tr>
@@ -866,7 +896,7 @@ Internal purposes only.</p>
866
896
  </tr>
867
897
  <tr>
868
898
  <td class="col-md-2" colspan="2">
869
- <div class="io-line">Defined in <a href="" data-line="146" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:146</a></div>
899
+ <div class="io-line">Defined in <a href="" data-line="149" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:149</a></div>
870
900
  </td>
871
901
  </tr>
872
902
  <tr>
@@ -896,7 +926,7 @@ Internal purposes only.</p>
896
926
  </tr>
897
927
  <tr>
898
928
  <td class="col-md-2" colspan="2">
899
- <div class="io-line">Defined in <a href="" data-line="122" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:122</a></div>
929
+ <div class="io-line">Defined in <a href="" data-line="123" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:123</a></div>
900
930
  </td>
901
931
  </tr>
902
932
  </tbody>
@@ -931,8 +961,8 @@ Internal purposes only.</p>
931
961
 
932
962
  <tr>
933
963
  <td class="col-md-4">
934
- <div class="io-line">Defined in <a href="" data-line="186"
935
- class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:186</a></div>
964
+ <div class="io-line">Defined in <a href="" data-line="189"
965
+ class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:189</a></div>
936
966
  </td>
937
967
  </tr>
938
968
 
@@ -994,8 +1024,8 @@ Internal purposes only.</p>
994
1024
 
995
1025
  <tr>
996
1026
  <td class="col-md-4">
997
- <div class="io-line">Defined in <a href="" data-line="163"
998
- class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:163</a></div>
1027
+ <div class="io-line">Defined in <a href="" data-line="166"
1028
+ class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:166</a></div>
999
1029
  </td>
1000
1030
  </tr>
1001
1031
 
@@ -1059,8 +1089,8 @@ Internal purposes only.</p>
1059
1089
 
1060
1090
  <tr>
1061
1091
  <td class="col-md-4">
1062
- <div class="io-line">Defined in <a href="" data-line="174"
1063
- class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:174</a></div>
1092
+ <div class="io-line">Defined in <a href="" data-line="177"
1093
+ class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:177</a></div>
1064
1094
  </td>
1065
1095
  </tr>
1066
1096
 
@@ -1128,8 +1158,8 @@ Internal purposes only.</p>
1128
1158
 
1129
1159
  <tr>
1130
1160
  <td class="col-md-4">
1131
- <div class="io-line">Defined in <a href="" data-line="178"
1132
- class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:178</a></div>
1161
+ <div class="io-line">Defined in <a href="" data-line="181"
1162
+ class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:181</a></div>
1133
1163
  </td>
1134
1164
  </tr>
1135
1165
 
@@ -1197,8 +1227,8 @@ Internal purposes only.</p>
1197
1227
 
1198
1228
  <tr>
1199
1229
  <td class="col-md-4">
1200
- <div class="io-line">Defined in <a href="" data-line="170"
1201
- class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:170</a></div>
1230
+ <div class="io-line">Defined in <a href="" data-line="173"
1231
+ class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:173</a></div>
1202
1232
  </td>
1203
1233
  </tr>
1204
1234
 
@@ -1276,7 +1306,7 @@ Internal purposes only.</p>
1276
1306
  </tr>
1277
1307
  <tr>
1278
1308
  <td class="col-md-4">
1279
- <div class="io-line">Defined in <a href="" data-line="105" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:105</a></div>
1309
+ <div class="io-line">Defined in <a href="" data-line="106" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:106</a></div>
1280
1310
  </td>
1281
1311
  </tr>
1282
1312
 
@@ -1312,7 +1342,7 @@ Internal purposes only.</p>
1312
1342
  </tr>
1313
1343
  <tr>
1314
1344
  <td class="col-md-4">
1315
- <div class="io-line">Defined in <a href="" data-line="159" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:159</a></div>
1345
+ <div class="io-line">Defined in <a href="" data-line="162" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:162</a></div>
1316
1346
  </td>
1317
1347
  </tr>
1318
1348
 
@@ -1343,7 +1373,7 @@ Internal purposes only.</p>
1343
1373
  </tr>
1344
1374
  <tr>
1345
1375
  <td class="col-md-4">
1346
- <div class="io-line">Defined in <a href="" data-line="182" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:182</a></div>
1376
+ <div class="io-line">Defined in <a href="" data-line="185" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:185</a></div>
1347
1377
  </td>
1348
1378
  </tr>
1349
1379
 
@@ -1368,7 +1398,7 @@ Internal purposes only.</p>
1368
1398
  </tr>
1369
1399
  <tr>
1370
1400
  <td class="col-md-4">
1371
- <div class="io-line">Defined in <a href="" data-line="184" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:184</a></div>
1401
+ <div class="io-line">Defined in <a href="" data-line="187" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:187</a></div>
1372
1402
  </td>
1373
1403
  </tr>
1374
1404
 
@@ -1436,6 +1466,7 @@ import { NG_VALUE_ACCESSOR } from &quot;@angular/forms&quot;;
1436
1466
  [placeholder]&#x3D;&quot;placeholder&quot;
1437
1467
  [id]&#x3D; &quot;id&quot;
1438
1468
  [disabled]&#x3D;&quot;disabled&quot;
1469
+ [readonly]&#x3D;&quot;readonly&quot;
1439
1470
  (change)&#x3D;&quot;onChange($event)&quot;/&gt;
1440
1471
  &lt;svg
1441
1472
  *ngIf&#x3D;&quot;type !&#x3D;&#x3D; &#x27;simple&#x27; &amp;&amp; !warn &amp;&amp; !invalid&quot;
@@ -1511,6 +1542,8 @@ export class DatePickerInput {
1511
1542
  @Input() theme: &quot;light&quot; | &quot;dark&quot; &#x3D; &quot;dark&quot;;
1512
1543
 
1513
1544
  @Input() disabled &#x3D; false;
1545
+
1546
+ @Input() readonly &#x3D; false;
1514
1547
  /**
1515
1548
  * Set to &#x60;true&#x60; for invalid state.
1516
1549
  */
@@ -1600,7 +1633,7 @@ export class DatePickerInput {
1600
1633
  <script src="../js/libs/htmlparser.js"></script>
1601
1634
  <script src="../js/libs/deep-iterator.js"></script>
1602
1635
  <script>
1603
- var COMPONENT_TEMPLATE = '<div> <div class="cds--form-item"> <div class="cds--date-picker" [ngClass]="{ \'cds--date-picker--simple\' : type === \'simple\', \'cds--date-picker--single\' : type === \'single\', \'cds--date-picker--range\' : type === \'range\', \'cds--date-picker--light\' : theme === \'light\', \'cds--skeleton\' : skeleton }"> <div class="cds--date-picker-container"> <label *ngIf="label" [for]="id" class="cds--label" [ngClass]="{\'cds--label--disabled\': disabled}"> <ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container> <ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template> </label> <div class="cds--date-picker-input__wrapper" [ngClass]="{ \'cds--date-picker-input__wrapper--invalid\': invalid, \'cds--date-picker-input__wrapper--warn\': warn }"> <span> <input #input *ngIf="!skeleton" autocomplete="off" type="text" class="cds--date-picker__input" [ngClass]="{ \'cds--date-picker__input--sm\': size === \'sm\', \'cds--date-picker__input--md\': size === \'md\', \'cds--date-picker__input--lg\': size === \'lg\' }" [attr.data-invalid]="invalid ? true : undefined" [value]="value" [pattern]="pattern" [placeholder]="placeholder" [id]= "id" [disabled]="disabled" (change)="onChange($event)"/> <svg *ngIf="type !== \'simple\' && !warn && !invalid" cdsIcon="calendar" size="16" class="cds--date-picker__icon"> </svg> <svg *ngIf="invalid" class="cds--date-picker__icon cds--date-picker__icon--invalid" cdsIcon="warning--filled" size="16"> </svg> <svg *ngIf="!invalid && warn" cdsIcon="warning--alt--filled" size="16" class="cds--date-picker__icon cds--date-picker__icon--warn"> </svg> </span> </div> <div *ngIf="helperText && !invalid && !warn" class="cds--form__helper-text" [ngClass]="{\'cds--form__helper-text--disabled\': disabled}"> <ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container> <ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template> </div> <div *ngIf="invalid" class="cds--form-requirement"> <ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container> <ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template> </div> <div *ngIf="!invalid && warn" class="cds--form-requirement"> <ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container> <ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template> </div> </div> </div></div> </div>'
1636
+ var COMPONENT_TEMPLATE = '<div> <div class="cds--form-item"> <div class="cds--date-picker" [ngClass]="{ \'cds--date-picker--simple\' : type === \'simple\', \'cds--date-picker--single\' : type === \'single\', \'cds--date-picker--range\' : type === \'range\', \'cds--date-picker--light\' : theme === \'light\', \'cds--skeleton\' : skeleton }"> <div class="cds--date-picker-container"> <label *ngIf="label" [for]="id" class="cds--label" [ngClass]="{\'cds--label--disabled\': disabled}"> <ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container> <ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template> </label> <div class="cds--date-picker-input__wrapper" [ngClass]="{ \'cds--date-picker-input__wrapper--invalid\': invalid, \'cds--date-picker-input__wrapper--warn\': warn }"> <span> <input #input *ngIf="!skeleton" autocomplete="off" type="text" class="cds--date-picker__input" [ngClass]="{ \'cds--date-picker__input--sm\': size === \'sm\', \'cds--date-picker__input--md\': size === \'md\', \'cds--date-picker__input--lg\': size === \'lg\' }" [attr.data-invalid]="invalid ? true : undefined" [value]="value" [pattern]="pattern" [placeholder]="placeholder" [id]= "id" [disabled]="disabled" [readonly]="readonly" (change)="onChange($event)"/> <svg *ngIf="type !== \'simple\' && !warn && !invalid" cdsIcon="calendar" size="16" class="cds--date-picker__icon"> </svg> <svg *ngIf="invalid" class="cds--date-picker__icon cds--date-picker__icon--invalid" cdsIcon="warning--filled" size="16"> </svg> <svg *ngIf="!invalid && warn" cdsIcon="warning--alt--filled" size="16" class="cds--date-picker__icon cds--date-picker__icon--warn"> </svg> </span> </div> <div *ngIf="helperText && !invalid && !warn" class="cds--form__helper-text" [ngClass]="{\'cds--form__helper-text--disabled\': disabled}"> <ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container> <ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template> </div> <div *ngIf="invalid" class="cds--form-requirement"> <ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container> <ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template> </div> <div *ngIf="!invalid && warn" class="cds--form-requirement"> <ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container> <ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template> </div> </div> </div></div> </div>'
1604
1637
  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'}];
1605
1638
  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]'}];
1606
1639
  var ACTUAL_COMPONENT = {'name': 'DatePickerInput'};