carbon-components-angular 5.16.2 → 5.16.3

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 (54) hide show
  1. package/docs/documentation/components/DatePickerInput.html +77 -73
  2. package/docs/documentation/js/search/search_index.js +2 -2
  3. package/docs/documentation/modules/ContentSwitcherModule/dependencies.svg +4 -4
  4. package/docs/documentation/modules/ContentSwitcherModule.html +4 -4
  5. package/docs/documentation/modules/DatePickerInputModule/dependencies.svg +7 -7
  6. package/docs/documentation/modules/DatePickerInputModule.html +7 -7
  7. package/docs/documentation/modules/DatePickerModule/dependencies.svg +53 -57
  8. package/docs/documentation/modules/DatePickerModule.html +53 -57
  9. package/docs/documentation/modules/LoadingModule/dependencies.svg +4 -4
  10. package/docs/documentation/modules/LoadingModule.html +4 -4
  11. package/docs/documentation/modules/NFormsModule/dependencies.svg +4 -4
  12. package/docs/documentation/modules/NFormsModule.html +4 -4
  13. package/docs/documentation/modules/RadioModule/dependencies.svg +60 -56
  14. package/docs/documentation/modules/RadioModule.html +60 -56
  15. package/docs/documentation/modules/SearchModule/dependencies.svg +4 -4
  16. package/docs/documentation/modules/SearchModule.html +4 -4
  17. package/docs/documentation/modules/SelectModule/dependencies.svg +60 -60
  18. package/docs/documentation/modules/SelectModule.html +60 -60
  19. package/docs/documentation/modules/SliderModule/dependencies.svg +4 -4
  20. package/docs/documentation/modules/SliderModule.html +4 -4
  21. package/docs/documentation/modules/TableModule/dependencies.svg +216 -216
  22. package/docs/documentation/modules/TableModule.html +216 -216
  23. package/docs/documentation/modules/TabsModule/dependencies.svg +68 -68
  24. package/docs/documentation/modules/TabsModule.html +68 -68
  25. package/docs/documentation/modules/TagModule/dependencies.svg +4 -4
  26. package/docs/documentation/modules/TagModule.html +4 -4
  27. package/docs/documentation/modules/ThemeModule/dependencies.svg +13 -13
  28. package/docs/documentation/modules/ThemeModule.html +13 -13
  29. package/docs/documentation/modules/TilesModule/dependencies.svg +100 -100
  30. package/docs/documentation/modules/TilesModule.html +100 -100
  31. package/docs/documentation/modules/TimePickerModule/dependencies.svg +4 -4
  32. package/docs/documentation/modules/TimePickerModule.html +4 -4
  33. package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +24 -24
  34. package/docs/documentation/modules/TimePickerSelectModule.html +24 -24
  35. package/docs/documentation/modules/ToggleModule/dependencies.svg +45 -41
  36. package/docs/documentation/modules/ToggleModule.html +45 -41
  37. package/docs/documentation/modules/ToggletipModule/dependencies.svg +37 -37
  38. package/docs/documentation/modules/ToggletipModule.html +37 -37
  39. package/docs/documentation/modules/TooltipModule/dependencies.svg +28 -28
  40. package/docs/documentation/modules/TooltipModule.html +28 -28
  41. package/docs/documentation/modules/UIShellModule/dependencies.svg +4 -4
  42. package/docs/documentation/modules/UIShellModule.html +4 -4
  43. package/docs/documentation.json +35 -35
  44. package/docs/storybook/{datepicker-datepicker-stories.758f8727.iframe.bundle.js → datepicker-datepicker-stories.79d4003a.iframe.bundle.js} +1 -1
  45. package/docs/storybook/iframe.html +2 -2
  46. package/docs/storybook/{main.ebae1d18.iframe.bundle.js → main.d047ff32.iframe.bundle.js} +1 -1
  47. package/docs/storybook/project.json +1 -1
  48. package/docs/storybook/{runtime~main.9abc323f.iframe.bundle.js → runtime~main.fd114201.iframe.bundle.js} +1 -1
  49. package/esm2020/datepicker-input/datepicker-input.component.mjs +45 -41
  50. package/fesm2015/carbon-components-angular-datepicker-input.mjs +44 -40
  51. package/fesm2015/carbon-components-angular-datepicker-input.mjs.map +1 -1
  52. package/fesm2020/carbon-components-angular-datepicker-input.mjs +44 -40
  53. package/fesm2020/carbon-components-angular-datepicker-input.mjs.map +1 -1
  54. package/package.json +1 -1
package/docs/documentation/components/DatePickerInput.html CHANGED
@@ -127,7 +127,8 @@
127
127
  'cds--date-picker-input__wrapper--invalid': invalid,
128
128
  'cds--date-picker-input__wrapper--warn': warn
129
129
  }">
130
- <input
130
+ <span>
131
+ <input
131
132
  #input
132
133
  *ngIf="!skeleton"
133
134
  autocomplete="off"
@@ -144,25 +145,26 @@
144
145
  [placeholder]="placeholder"
145
146
  [id]= "id"
146
147
  [disabled]="disabled"
147
- (change)="onChange($event)"/>
148
- <svg
149
- *ngIf="type !== 'simple' && !warn && !invalid"
150
- cdsIcon="calendar"
151
- size="16"
152
- class="cds--date-picker__icon">
153
- </svg>
154
- <svg
155
- *ngIf="!warn && invalid"
156
- class="cds--date-picker__icon cds--date-picker__icon--invalid"
157
- cdsIcon="warning--filled"
158
- size="16">
159
- </svg>
160
- <svg
161
- *ngIf="!invalid && warn"
162
- cdsIcon="warning--alt--filled"
163
- size="16"
164
- class="cds--date-picker__icon cds--date-picker__icon--warn">
165
- </svg>
148
+ (change)="onChange($event)"/>
149
+ <svg
150
+ *ngIf="type !== 'simple' && !warn && !invalid"
151
+ cdsIcon="calendar"
152
+ size="16"
153
+ class="cds--date-picker__icon">
154
+ </svg>
155
+ <svg
156
+ *ngIf="!warn && invalid"
157
+ class="cds--date-picker__icon cds--date-picker__icon--invalid"
158
+ cdsIcon="warning--filled"
159
+ size="16">
160
+ </svg>
161
+ <svg
162
+ *ngIf="!invalid && warn"
163
+ cdsIcon="warning--alt--filled"
164
+ size="16"
165
+ class="cds--date-picker__icon cds--date-picker__icon--warn">
166
+ </svg>
167
+ </span>
166
168
  </div>
167
169
  <div
168
170
  *ngIf="helperText && !invalid && !warn"
@@ -351,7 +353,7 @@
351
353
  </tr>
352
354
  <tr>
353
355
  <td class="col-md-4">
354
- <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>
356
+ <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>
355
357
  </td>
356
358
  </tr>
357
359
 
@@ -412,7 +414,7 @@
412
414
  </tr>
413
415
  <tr>
414
416
  <td class="col-md-2" colspan="2">
415
- <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>
417
+ <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>
416
418
  </td>
417
419
  </tr>
418
420
  </tbody>
@@ -438,7 +440,7 @@
438
440
  </tr>
439
441
  <tr>
440
442
  <td class="col-md-2" colspan="2">
441
- <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>
443
+ <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>
442
444
  </td>
443
445
  </tr>
444
446
  </tbody>
@@ -459,7 +461,7 @@
459
461
  </tr>
460
462
  <tr>
461
463
  <td class="col-md-2" colspan="2">
462
- <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>
464
+ <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>
463
465
  </td>
464
466
  </tr>
465
467
  <tr>
@@ -491,7 +493,7 @@
491
493
  </tr>
492
494
  <tr>
493
495
  <td class="col-md-2" colspan="2">
494
- <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>
496
+ <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>
495
497
  </td>
496
498
  </tr>
497
499
  </tbody>
@@ -517,7 +519,7 @@
517
519
  </tr>
518
520
  <tr>
519
521
  <td class="col-md-2" colspan="2">
520
- <div class="io-line">Defined in <a href="" data-line="132" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:132</a></div>
522
+ <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>
521
523
  </td>
522
524
  </tr>
523
525
  <tr>
@@ -544,7 +546,7 @@
544
546
  </tr>
545
547
  <tr>
546
548
  <td class="col-md-2" colspan="2">
547
- <div class="io-line">Defined in <a href="" data-line="136" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:136</a></div>
549
+ <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>
548
550
  </td>
549
551
  </tr>
550
552
  <tr>
@@ -571,7 +573,7 @@
571
573
  </tr>
572
574
  <tr>
573
575
  <td class="col-md-2" colspan="2">
574
- <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>
576
+ <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>
575
577
  </td>
576
578
  </tr>
577
579
  </tbody>
@@ -597,7 +599,7 @@
597
599
  </tr>
598
600
  <tr>
599
601
  <td class="col-md-2" colspan="2">
600
- <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>
602
+ <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>
601
603
  </td>
602
604
  </tr>
603
605
  </tbody>
@@ -623,7 +625,7 @@
623
625
  </tr>
624
626
  <tr>
625
627
  <td class="col-md-2" colspan="2">
626
- <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>
628
+ <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>
627
629
  </td>
628
630
  </tr>
629
631
  </tbody>
@@ -649,7 +651,7 @@
649
651
  </tr>
650
652
  <tr>
651
653
  <td class="col-md-2" colspan="2">
652
- <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>
654
+ <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>
653
655
  </td>
654
656
  </tr>
655
657
  </tbody>
@@ -675,7 +677,7 @@
675
677
  </tr>
676
678
  <tr>
677
679
  <td class="col-md-2" colspan="2">
678
- <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>
680
+ <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>
679
681
  </td>
680
682
  </tr>
681
683
  </tbody>
@@ -701,7 +703,7 @@
701
703
  </tr>
702
704
  <tr>
703
705
  <td class="col-md-2" colspan="2">
704
- <div class="io-line">Defined in <a href="" data-line="126" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:126</a></div>
706
+ <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>
705
707
  </td>
706
708
  </tr>
707
709
  </tbody>
@@ -727,7 +729,7 @@
727
729
  </tr>
728
730
  <tr>
729
731
  <td class="col-md-2" colspan="2">
730
- <div class="io-line">Defined in <a href="" data-line="108" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:108</a></div>
732
+ <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>
731
733
  </td>
732
734
  </tr>
733
735
  <tr>
@@ -760,7 +762,7 @@ Internal purposes only.</p>
760
762
  </tr>
761
763
  <tr>
762
764
  <td class="col-md-2" colspan="2">
763
- <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>
765
+ <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>
764
766
  </td>
765
767
  </tr>
766
768
  </tbody>
@@ -786,7 +788,7 @@ Internal purposes only.</p>
786
788
  </tr>
787
789
  <tr>
788
790
  <td class="col-md-2" colspan="2">
789
- <div class="io-line">Defined in <a href="" data-line="140" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:140</a></div>
791
+ <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>
790
792
  </td>
791
793
  </tr>
792
794
  <tr>
@@ -813,7 +815,7 @@ Internal purposes only.</p>
813
815
  </tr>
814
816
  <tr>
815
817
  <td class="col-md-2" colspan="2">
816
- <div class="io-line">Defined in <a href="" data-line="144" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:144</a></div>
818
+ <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>
817
819
  </td>
818
820
  </tr>
819
821
  <tr>
@@ -843,7 +845,7 @@ Internal purposes only.</p>
843
845
  </tr>
844
846
  <tr>
845
847
  <td class="col-md-2" colspan="2">
846
- <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>
848
+ <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>
847
849
  </td>
848
850
  </tr>
849
851
  </tbody>
@@ -878,8 +880,8 @@ Internal purposes only.</p>
878
880
 
879
881
  <tr>
880
882
  <td class="col-md-4">
881
- <div class="io-line">Defined in <a href="" data-line="184"
882
- class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:184</a></div>
883
+ <div class="io-line">Defined in <a href="" data-line="186"
884
+ class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:186</a></div>
883
885
  </td>
884
886
  </tr>
885
887
 
@@ -943,8 +945,8 @@ Internal purposes only.</p>
943
945
 
944
946
  <tr>
945
947
  <td class="col-md-4">
946
- <div class="io-line">Defined in <a href="" data-line="161"
947
- class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:161</a></div>
948
+ <div class="io-line">Defined in <a href="" data-line="163"
949
+ class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:163</a></div>
948
950
  </td>
949
951
  </tr>
950
952
 
@@ -1010,8 +1012,8 @@ Internal purposes only.</p>
1010
1012
 
1011
1013
  <tr>
1012
1014
  <td class="col-md-4">
1013
- <div class="io-line">Defined in <a href="" data-line="172"
1014
- class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:172</a></div>
1015
+ <div class="io-line">Defined in <a href="" data-line="174"
1016
+ class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:174</a></div>
1015
1017
  </td>
1016
1018
  </tr>
1017
1019
 
@@ -1081,8 +1083,8 @@ Internal purposes only.</p>
1081
1083
 
1082
1084
  <tr>
1083
1085
  <td class="col-md-4">
1084
- <div class="io-line">Defined in <a href="" data-line="176"
1085
- class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:176</a></div>
1086
+ <div class="io-line">Defined in <a href="" data-line="178"
1087
+ class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:178</a></div>
1086
1088
  </td>
1087
1089
  </tr>
1088
1090
 
@@ -1152,8 +1154,8 @@ Internal purposes only.</p>
1152
1154
 
1153
1155
  <tr>
1154
1156
  <td class="col-md-4">
1155
- <div class="io-line">Defined in <a href="" data-line="168"
1156
- class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:168</a></div>
1157
+ <div class="io-line">Defined in <a href="" data-line="170"
1158
+ class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:170</a></div>
1157
1159
  </td>
1158
1160
  </tr>
1159
1161
 
@@ -1233,7 +1235,7 @@ Internal purposes only.</p>
1233
1235
  </tr>
1234
1236
  <tr>
1235
1237
  <td class="col-md-4">
1236
- <div class="io-line">Defined in <a href="" data-line="103" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:103</a></div>
1238
+ <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>
1237
1239
  </td>
1238
1240
  </tr>
1239
1241
 
@@ -1269,7 +1271,7 @@ Internal purposes only.</p>
1269
1271
  </tr>
1270
1272
  <tr>
1271
1273
  <td class="col-md-4">
1272
- <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>
1274
+ <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>
1273
1275
  </td>
1274
1276
  </tr>
1275
1277
 
@@ -1300,7 +1302,7 @@ Internal purposes only.</p>
1300
1302
  </tr>
1301
1303
  <tr>
1302
1304
  <td class="col-md-4">
1303
- <div class="io-line">Defined in <a href="" data-line="180" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:180</a></div>
1305
+ <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>
1304
1306
  </td>
1305
1307
  </tr>
1306
1308
 
@@ -1325,7 +1327,7 @@ Internal purposes only.</p>
1325
1327
  </tr>
1326
1328
  <tr>
1327
1329
  <td class="col-md-4">
1328
- <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>
1330
+ <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>
1329
1331
  </td>
1330
1332
  </tr>
1331
1333
 
@@ -1375,7 +1377,8 @@ import { NG_VALUE_ACCESSOR } from &quot;@angular/forms&quot;;
1375
1377
  &#x27;cds--date-picker-input__wrapper--invalid&#x27;: invalid,
1376
1378
  &#x27;cds--date-picker-input__wrapper--warn&#x27;: warn
1377
1379
  }&quot;&gt;
1378
- &lt;input
1380
+ &lt;span&gt;
1381
+ &lt;input
1379
1382
  #input
1380
1383
  *ngIf&#x3D;&quot;!skeleton&quot;
1381
1384
  autocomplete&#x3D;&quot;off&quot;
@@ -1392,25 +1395,26 @@ import { NG_VALUE_ACCESSOR } from &quot;@angular/forms&quot;;
1392
1395
  [placeholder]&#x3D;&quot;placeholder&quot;
1393
1396
  [id]&#x3D; &quot;id&quot;
1394
1397
  [disabled]&#x3D;&quot;disabled&quot;
1395
- (change)&#x3D;&quot;onChange($event)&quot;/&gt;
1396
- &lt;svg
1397
- *ngIf&#x3D;&quot;type !&#x3D;&#x3D; &#x27;simple&#x27; &amp;&amp; !warn &amp;&amp; !invalid&quot;
1398
- cdsIcon&#x3D;&quot;calendar&quot;
1399
- size&#x3D;&quot;16&quot;
1400
- class&#x3D;&quot;cds--date-picker__icon&quot;&gt;
1401
- &lt;/svg&gt;
1402
- &lt;svg
1403
- *ngIf&#x3D;&quot;!warn &amp;&amp; invalid&quot;
1404
- class&#x3D;&quot;cds--date-picker__icon cds--date-picker__icon--invalid&quot;
1405
- cdsIcon&#x3D;&quot;warning--filled&quot;
1406
- size&#x3D;&quot;16&quot;&gt;
1407
- &lt;/svg&gt;
1408
- &lt;svg
1409
- *ngIf&#x3D;&quot;!invalid &amp;&amp; warn&quot;
1410
- cdsIcon&#x3D;&quot;warning--alt--filled&quot;
1411
- size&#x3D;&quot;16&quot;
1412
- class&#x3D;&quot;cds--date-picker__icon cds--date-picker__icon--warn&quot;&gt;
1413
- &lt;/svg&gt;
1398
+ (change)&#x3D;&quot;onChange($event)&quot;/&gt;
1399
+ &lt;svg
1400
+ *ngIf&#x3D;&quot;type !&#x3D;&#x3D; &#x27;simple&#x27; &amp;&amp; !warn &amp;&amp; !invalid&quot;
1401
+ cdsIcon&#x3D;&quot;calendar&quot;
1402
+ size&#x3D;&quot;16&quot;
1403
+ class&#x3D;&quot;cds--date-picker__icon&quot;&gt;
1404
+ &lt;/svg&gt;
1405
+ &lt;svg
1406
+ *ngIf&#x3D;&quot;!warn &amp;&amp; invalid&quot;
1407
+ class&#x3D;&quot;cds--date-picker__icon cds--date-picker__icon--invalid&quot;
1408
+ cdsIcon&#x3D;&quot;warning--filled&quot;
1409
+ size&#x3D;&quot;16&quot;&gt;
1410
+ &lt;/svg&gt;
1411
+ &lt;svg
1412
+ *ngIf&#x3D;&quot;!invalid &amp;&amp; warn&quot;
1413
+ cdsIcon&#x3D;&quot;warning--alt--filled&quot;
1414
+ size&#x3D;&quot;16&quot;
1415
+ class&#x3D;&quot;cds--date-picker__icon cds--date-picker__icon--warn&quot;&gt;
1416
+ &lt;/svg&gt;
1417
+ &lt;/span&gt;
1414
1418
  &lt;/div&gt;
1415
1419
  &lt;div
1416
1420
  *ngIf&#x3D;&quot;helperText &amp;&amp; !invalid &amp;&amp; !warn&quot;
@@ -1555,7 +1559,7 @@ export class DatePickerInput {
1555
1559
  <script src="../js/libs/htmlparser.js"></script>
1556
1560
  <script src="../js/libs/deep-iterator.js"></script>
1557
1561
  <script>
1558
- 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 }"> <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="!warn && 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> </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="!warn && 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>'
1562
+ 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="!warn && 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="!warn && 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>'
1559
1563
  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': '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'}];
1560
1564
  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': 'PopoverContainer', 'selector': '[cdsPopover], [ibmPopover]'},{'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]'}];
1561
1565
  var ACTUAL_COMPONENT = {'name': 'DatePickerInput'};