carbon-components-angular 5.38.0 → 5.38.2

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 (76) hide show
  1. package/docs/documentation/components/DatePicker.html +1 -1
  2. package/docs/documentation/components/DatePickerInput.html +48 -38
  3. package/docs/documentation/components/PasswordInputLabelComponent.html +1 -1
  4. package/docs/documentation/components/TextInputLabelComponent.html +1 -1
  5. package/docs/documentation/js/search/search_index.js +2 -2
  6. package/docs/documentation/modules/ComboBoxModule/dependencies.svg +4 -4
  7. package/docs/documentation/modules/ComboBoxModule.html +4 -4
  8. package/docs/documentation/modules/ContentSwitcherModule/dependencies.svg +4 -4
  9. package/docs/documentation/modules/ContentSwitcherModule.html +4 -4
  10. package/docs/documentation/modules/DatePickerInputModule/dependencies.svg +37 -41
  11. package/docs/documentation/modules/DatePickerInputModule.html +37 -41
  12. package/docs/documentation/modules/DatePickerModule/dependencies.svg +38 -38
  13. package/docs/documentation/modules/DatePickerModule.html +38 -38
  14. package/docs/documentation/modules/GridModule/dependencies.svg +60 -60
  15. package/docs/documentation/modules/GridModule.html +60 -60
  16. package/docs/documentation/modules/LoadingModule/dependencies.svg +4 -4
  17. package/docs/documentation/modules/LoadingModule.html +4 -4
  18. package/docs/documentation/modules/NFormsModule/dependencies.svg +4 -4
  19. package/docs/documentation/modules/NFormsModule.html +4 -4
  20. package/docs/documentation/modules/NumberModule/dependencies.svg +4 -4
  21. package/docs/documentation/modules/NumberModule.html +4 -4
  22. package/docs/documentation/modules/ProgressIndicatorModule/dependencies.svg +4 -4
  23. package/docs/documentation/modules/ProgressIndicatorModule.html +4 -4
  24. package/docs/documentation/modules/RadioModule/dependencies.svg +4 -4
  25. package/docs/documentation/modules/RadioModule.html +4 -4
  26. package/docs/documentation/modules/SelectModule/dependencies.svg +58 -58
  27. package/docs/documentation/modules/SelectModule.html +58 -58
  28. package/docs/documentation/modules/SliderModule/dependencies.svg +4 -4
  29. package/docs/documentation/modules/SliderModule.html +4 -4
  30. package/docs/documentation/modules/TableModule/dependencies.svg +216 -216
  31. package/docs/documentation/modules/TableModule.html +216 -216
  32. package/docs/documentation/modules/TabsModule/dependencies.svg +69 -69
  33. package/docs/documentation/modules/TabsModule.html +69 -69
  34. package/docs/documentation/modules/TagModule/dependencies.svg +4 -4
  35. package/docs/documentation/modules/TagModule.html +4 -4
  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 +4 -4
  41. package/docs/documentation/modules/TimePickerModule.html +4 -4
  42. package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +30 -30
  43. package/docs/documentation/modules/TimePickerSelectModule.html +30 -30
  44. package/docs/documentation/modules/ToggleModule/dependencies.svg +18 -18
  45. package/docs/documentation/modules/ToggleModule.html +18 -18
  46. package/docs/documentation/modules/ToggletipModule/dependencies.svg +37 -37
  47. package/docs/documentation/modules/ToggletipModule.html +37 -37
  48. package/docs/documentation/modules/TooltipModule/dependencies.svg +29 -29
  49. package/docs/documentation/modules/TooltipModule.html +29 -29
  50. package/docs/documentation/modules/UIShellModule/dependencies.svg +4 -4
  51. package/docs/documentation/modules/UIShellModule.html +4 -4
  52. package/docs/documentation.json +119 -119
  53. package/docs/storybook/{1345.99dc9be1.iframe.bundle.js → 1345.9201efca.iframe.bundle.js} +1 -1
  54. package/docs/storybook/{datepicker-datepicker-stories.fb6b3054.iframe.bundle.js → datepicker-datepicker-stories.adb85d77.iframe.bundle.js} +1 -1
  55. package/docs/storybook/iframe.html +2 -2
  56. package/docs/storybook/main.99dffacb.iframe.bundle.js +1 -0
  57. package/docs/storybook/project.json +1 -1
  58. package/docs/storybook/{runtime~main.b5fc6cdc.iframe.bundle.js → runtime~main.b26c0bbe.iframe.bundle.js} +1 -1
  59. package/esm2020/datepicker/datepicker.component.mjs +2 -2
  60. package/esm2020/datepicker-input/datepicker-input.component.mjs +15 -5
  61. package/esm2020/input/password-input-label.component.mjs +2 -2
  62. package/esm2020/input/text-input-label.component.mjs +2 -2
  63. package/fesm2015/carbon-components-angular-datepicker-input.mjs +14 -4
  64. package/fesm2015/carbon-components-angular-datepicker-input.mjs.map +1 -1
  65. package/fesm2015/carbon-components-angular-datepicker.mjs +1 -1
  66. package/fesm2015/carbon-components-angular-datepicker.mjs.map +1 -1
  67. package/fesm2015/carbon-components-angular-input.mjs +4 -4
  68. package/fesm2015/carbon-components-angular-input.mjs.map +1 -1
  69. package/fesm2020/carbon-components-angular-datepicker-input.mjs +14 -4
  70. package/fesm2020/carbon-components-angular-datepicker-input.mjs.map +1 -1
  71. package/fesm2020/carbon-components-angular-datepicker.mjs +1 -1
  72. package/fesm2020/carbon-components-angular-datepicker.mjs.map +1 -1
  73. package/fesm2020/carbon-components-angular-input.mjs +2 -2
  74. package/fesm2020/carbon-components-angular-input.mjs.map +1 -1
  75. package/package.json +1 -1
  76. package/docs/storybook/main.c3732b9e.iframe.bundle.js +0 -1
package/docs/documentation/components/DatePicker.html CHANGED
@@ -3800,7 +3800,7 @@ export class DatePicker implements
3800
3800
  * Handles opening the calendar "properly" when the calendar icon is clicked.
3801
3801
  */
3802
3802
  openCalendar(datepickerInput: DatePickerInput) {
3803
- if (this.readonly) {
3803
+ if (this.readonly || this.skeleton) {
3804
3804
  return;
3805
3805
  }
3806
3806
 
package/docs/documentation/components/DatePickerInput.html CHANGED
@@ -165,8 +165,13 @@
165
165
  'cds--skeleton' : skeleton
166
166
  }">
167
167
  <div class="cds--date-picker-container">
168
+ <!-- Skeleton structure -->
169
+ <ng-container *ngIf="skeleton">
170
+ <span class="cds--label cds--skeleton"></span>
171
+ <div class="cds--date-picker__input cds--skeleton"></div>
172
+ </ng-container>
168
173
  <label
169
- *ngIf="label"
174
+ *ngIf="label && !skeleton"
170
175
  [for]="id"
171
176
  class="cds--label"
172
177
  [ngClass]="{'cds--label--disabled': disabled}">
@@ -174,6 +179,7 @@
174
179
  <ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
175
180
  </label>
176
181
  <div class="cds--date-picker-input__wrapper"
182
+ *ngIf="!skeleton"
177
183
  [ngClass]="{
178
184
  'cds--date-picker-input__wrapper--invalid': invalid,
179
185
  'cds--date-picker-input__wrapper--warn': warn
@@ -181,7 +187,6 @@
181
187
  <span>
182
188
  <input
183
189
  #input
184
- *ngIf="!skeleton"
185
190
  autocomplete="off"
186
191
  type="text"
187
192
  class="cds--date-picker__input"
@@ -408,7 +413,7 @@
408
413
  </tr>
409
414
  <tr>
410
415
  <td class="col-md-4">
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>
416
+ <div class="io-line">Defined in <a href="" data-line="167" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:167</a></div>
412
417
  </td>
413
418
  </tr>
414
419
 
@@ -469,7 +474,7 @@
469
474
  </tr>
470
475
  <tr>
471
476
  <td class="col-md-2" colspan="2">
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>
477
+ <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>
473
478
  </td>
474
479
  </tr>
475
480
  </tbody>
@@ -495,7 +500,7 @@
495
500
  </tr>
496
501
  <tr>
497
502
  <td class="col-md-2" colspan="2">
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>
503
+ <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>
499
504
  </td>
500
505
  </tr>
501
506
  </tbody>
@@ -516,7 +521,7 @@
516
521
  </tr>
517
522
  <tr>
518
523
  <td class="col-md-2" colspan="2">
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>
524
+ <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>
520
525
  </td>
521
526
  </tr>
522
527
  <tr>
@@ -548,7 +553,7 @@
548
553
  </tr>
549
554
  <tr>
550
555
  <td class="col-md-2" colspan="2">
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>
556
+ <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>
552
557
  </td>
553
558
  </tr>
554
559
  </tbody>
@@ -574,7 +579,7 @@
574
579
  </tr>
575
580
  <tr>
576
581
  <td class="col-md-2" colspan="2">
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>
582
+ <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>
578
583
  </td>
579
584
  </tr>
580
585
  <tr>
@@ -601,7 +606,7 @@
601
606
  </tr>
602
607
  <tr>
603
608
  <td class="col-md-2" colspan="2">
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>
609
+ <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>
605
610
  </td>
606
611
  </tr>
607
612
  <tr>
@@ -628,7 +633,7 @@
628
633
  </tr>
629
634
  <tr>
630
635
  <td class="col-md-2" colspan="2">
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>
636
+ <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>
632
637
  </td>
633
638
  </tr>
634
639
  </tbody>
@@ -654,7 +659,7 @@
654
659
  </tr>
655
660
  <tr>
656
661
  <td class="col-md-2" colspan="2">
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>
662
+ <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>
658
663
  </td>
659
664
  </tr>
660
665
  </tbody>
@@ -680,7 +685,7 @@
680
685
  </tr>
681
686
  <tr>
682
687
  <td class="col-md-2" colspan="2">
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>
688
+ <div class="io-line">Defined in <a href="" data-line="124" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:124</a></div>
684
689
  </td>
685
690
  </tr>
686
691
  </tbody>
@@ -706,7 +711,7 @@
706
711
  </tr>
707
712
  <tr>
708
713
  <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>
714
+ <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>
710
715
  </td>
711
716
  </tr>
712
717
  </tbody>
@@ -732,7 +737,7 @@
732
737
  </tr>
733
738
  <tr>
734
739
  <td class="col-md-2" colspan="2">
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>
740
+ <div class="io-line">Defined in <a href="" data-line="165" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:165</a></div>
736
741
  </td>
737
742
  </tr>
738
743
  </tbody>
@@ -758,7 +763,7 @@
758
763
  </tr>
759
764
  <tr>
760
765
  <td class="col-md-2" colspan="2">
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>
766
+ <div class="io-line">Defined in <a href="" data-line="161" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:161</a></div>
762
767
  </td>
763
768
  </tr>
764
769
  </tbody>
@@ -784,7 +789,7 @@
784
789
  </tr>
785
790
  <tr>
786
791
  <td class="col-md-2" colspan="2">
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>
792
+ <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>
788
793
  </td>
789
794
  </tr>
790
795
  </tbody>
@@ -810,7 +815,7 @@
810
815
  </tr>
811
816
  <tr>
812
817
  <td class="col-md-2" colspan="2">
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>
818
+ <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>
814
819
  </td>
815
820
  </tr>
816
821
  <tr>
@@ -843,7 +848,7 @@ Internal purposes only.</p>
843
848
  </tr>
844
849
  <tr>
845
850
  <td class="col-md-2" colspan="2">
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>
851
+ <div class="io-line">Defined in <a href="" data-line="163" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:163</a></div>
847
852
  </td>
848
853
  </tr>
849
854
  </tbody>
@@ -869,7 +874,7 @@ Internal purposes only.</p>
869
874
  </tr>
870
875
  <tr>
871
876
  <td class="col-md-2" colspan="2">
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>
877
+ <div class="io-line">Defined in <a href="" data-line="150" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:150</a></div>
873
878
  </td>
874
879
  </tr>
875
880
  <tr>
@@ -896,7 +901,7 @@ Internal purposes only.</p>
896
901
  </tr>
897
902
  <tr>
898
903
  <td class="col-md-2" colspan="2">
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>
904
+ <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>
900
905
  </td>
901
906
  </tr>
902
907
  <tr>
@@ -926,7 +931,7 @@ Internal purposes only.</p>
926
931
  </tr>
927
932
  <tr>
928
933
  <td class="col-md-2" colspan="2">
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>
934
+ <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>
930
935
  </td>
931
936
  </tr>
932
937
  </tbody>
@@ -961,8 +966,8 @@ Internal purposes only.</p>
961
966
 
962
967
  <tr>
963
968
  <td class="col-md-4">
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>
969
+ <div class="io-line">Defined in <a href="" data-line="194"
970
+ class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:194</a></div>
966
971
  </td>
967
972
  </tr>
968
973
 
@@ -1024,8 +1029,8 @@ Internal purposes only.</p>
1024
1029
 
1025
1030
  <tr>
1026
1031
  <td class="col-md-4">
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>
1032
+ <div class="io-line">Defined in <a href="" data-line="171"
1033
+ class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:171</a></div>
1029
1034
  </td>
1030
1035
  </tr>
1031
1036
 
@@ -1089,8 +1094,8 @@ Internal purposes only.</p>
1089
1094
 
1090
1095
  <tr>
1091
1096
  <td class="col-md-4">
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>
1097
+ <div class="io-line">Defined in <a href="" data-line="182"
1098
+ class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:182</a></div>
1094
1099
  </td>
1095
1100
  </tr>
1096
1101
 
@@ -1158,8 +1163,8 @@ Internal purposes only.</p>
1158
1163
 
1159
1164
  <tr>
1160
1165
  <td class="col-md-4">
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>
1166
+ <div class="io-line">Defined in <a href="" data-line="186"
1167
+ class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:186</a></div>
1163
1168
  </td>
1164
1169
  </tr>
1165
1170
 
@@ -1227,8 +1232,8 @@ Internal purposes only.</p>
1227
1232
 
1228
1233
  <tr>
1229
1234
  <td class="col-md-4">
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>
1235
+ <div class="io-line">Defined in <a href="" data-line="178"
1236
+ class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:178</a></div>
1232
1237
  </td>
1233
1238
  </tr>
1234
1239
 
@@ -1306,7 +1311,7 @@ Internal purposes only.</p>
1306
1311
  </tr>
1307
1312
  <tr>
1308
1313
  <td class="col-md-4">
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>
1314
+ <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>
1310
1315
  </td>
1311
1316
  </tr>
1312
1317
 
@@ -1342,7 +1347,7 @@ Internal purposes only.</p>
1342
1347
  </tr>
1343
1348
  <tr>
1344
1349
  <td class="col-md-4">
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>
1350
+ <div class="io-line">Defined in <a href="" data-line="167" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:167</a></div>
1346
1351
  </td>
1347
1352
  </tr>
1348
1353
 
@@ -1373,7 +1378,7 @@ Internal purposes only.</p>
1373
1378
  </tr>
1374
1379
  <tr>
1375
1380
  <td class="col-md-4">
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>
1381
+ <div class="io-line">Defined in <a href="" data-line="190" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:190</a></div>
1377
1382
  </td>
1378
1383
  </tr>
1379
1384
 
@@ -1398,7 +1403,7 @@ Internal purposes only.</p>
1398
1403
  </tr>
1399
1404
  <tr>
1400
1405
  <td class="col-md-4">
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>
1406
+ <div class="io-line">Defined in <a href="" data-line="192" class="link-to-prism">src/datepicker-input/datepicker-input.component.ts:192</a></div>
1402
1407
  </td>
1403
1408
  </tr>
1404
1409
 
@@ -1435,8 +1440,13 @@ import { NG_VALUE_ACCESSOR } from &quot;@angular/forms&quot;;
1435
1440
  &#x27;cds--skeleton&#x27; : skeleton
1436
1441
  }&quot;&gt;
1437
1442
  &lt;div class&#x3D;&quot;cds--date-picker-container&quot;&gt;
1443
+ &lt;!-- Skeleton structure --&gt;
1444
+ &lt;ng-container *ngIf&#x3D;&quot;skeleton&quot;&gt;
1445
+ &lt;span class&#x3D;&quot;cds--label cds--skeleton&quot;&gt;&lt;/span&gt;
1446
+ &lt;div class&#x3D;&quot;cds--date-picker__input cds--skeleton&quot;&gt;&lt;/div&gt;
1447
+ &lt;/ng-container&gt;
1438
1448
  &lt;label
1439
- *ngIf&#x3D;&quot;label&quot;
1449
+ *ngIf&#x3D;&quot;label &amp;&amp; !skeleton&quot;
1440
1450
  [for]&#x3D;&quot;id&quot;
1441
1451
  class&#x3D;&quot;cds--label&quot;
1442
1452
  [ngClass]&#x3D;&quot;{&#x27;cds--label--disabled&#x27;: disabled}&quot;&gt;
@@ -1444,6 +1454,7 @@ import { NG_VALUE_ACCESSOR } from &quot;@angular/forms&quot;;
1444
1454
  &lt;ng-template *ngIf&#x3D;&quot;isTemplate(label)&quot; [ngTemplateOutlet]&#x3D;&quot;label&quot;&gt;&lt;/ng-template&gt;
1445
1455
  &lt;/label&gt;
1446
1456
  &lt;div class&#x3D;&quot;cds--date-picker-input__wrapper&quot;
1457
+ *ngIf&#x3D;&quot;!skeleton&quot;
1447
1458
  [ngClass]&#x3D;&quot;{
1448
1459
  &#x27;cds--date-picker-input__wrapper--invalid&#x27;: invalid,
1449
1460
  &#x27;cds--date-picker-input__wrapper--warn&#x27;: warn
@@ -1451,7 +1462,6 @@ import { NG_VALUE_ACCESSOR } from &quot;@angular/forms&quot;;
1451
1462
  &lt;span&gt;
1452
1463
  &lt;input
1453
1464
  #input
1454
- *ngIf&#x3D;&quot;!skeleton&quot;
1455
1465
  autocomplete&#x3D;&quot;off&quot;
1456
1466
  type&#x3D;&quot;text&quot;
1457
1467
  class&#x3D;&quot;cds--date-picker__input&quot;
@@ -1633,7 +1643,7 @@ export class DatePickerInput {
1633
1643
  <script src="../js/libs/htmlparser.js"></script>
1634
1644
  <script src="../js/libs/deep-iterator.js"></script>
1635
1645
  <script>
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>'
1646
+ 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"> <!-- Skeleton structure --> <ng-container *ngIf="skeleton"> <span class="cds--label cds--skeleton"></span> <div class="cds--date-picker__input cds--skeleton"></div> </ng-container> <label *ngIf="label && !skeleton" [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" *ngIf="!skeleton" [ngClass]="{ \'cds--date-picker-input__wrapper--invalid\': invalid, \'cds--date-picker-input__wrapper--warn\': warn }"> <span> <input #input 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>'
1637
1647
  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'}];
1638
1648
  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]'}];
1639
1649
  var ACTUAL_COMPONENT = {'name': 'DatePickerInput'};
package/docs/documentation/components/PasswordInputLabelComponent.html CHANGED
@@ -2046,7 +2046,7 @@ export class PasswordInputLabelComponent extends BaseIconButton implements After
2046
2046
  @HostBinding(&quot;class.cds--password-input-wrapper&quot;) passwordInputWrapper &#x3D; true;
2047
2047
  @HostBinding(&quot;class.cds--text-input-wrapper&quot;) textInputWrapper &#x3D; true;
2048
2048
  @HostBinding(&quot;class.cds--text-input-wrapper--readonly&quot;) get isReadonly() {
2049
- return this.wrapper?.nativeElement.querySelector(&quot;input&quot;)?.readOnly;
2049
+ return this.wrapper?.nativeElement.querySelector(&quot;input&quot;)?.readOnly ?? false;
2050
2050
  }
2051
2051
 
2052
2052
  /**
package/docs/documentation/components/TextInputLabelComponent.html CHANGED
@@ -1193,7 +1193,7 @@ export class TextInputLabelComponent implements AfterViewInit {
1193
1193
  @HostBinding(&quot;class.cds--form-item&quot;) labelClass &#x3D; true;
1194
1194
 
1195
1195
  @HostBinding(&quot;class.cds--text-input-wrapper--readonly&quot;) get isReadonly() {
1196
- return this.wrapper?.nativeElement.querySelector(&quot;input&quot;)?.readOnly;
1196
+ return this.wrapper?.nativeElement.querySelector(&quot;input&quot;)?.readOnly ?? false;
1197
1197
  }
1198
1198
 
1199
1199
  /**