carbon-components-angular 5.72.0 → 5.72.1

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 (116) hide show
  1. package/docs/documentation/components/TextInputLabelComponent.html +171 -65
  2. package/docs/documentation/components/TextareaLabelComponent.html +142 -74
  3. package/docs/documentation/coverage.html +12 -12
  4. package/docs/documentation/directives/TextArea.html +106 -11
  5. package/docs/documentation/directives/TextInput.html +118 -24
  6. package/docs/documentation/js/search/search_index.js +2 -2
  7. package/docs/documentation/modules/CheckboxModule/dependencies.svg +42 -42
  8. package/docs/documentation/modules/CheckboxModule.html +42 -42
  9. package/docs/documentation/modules/CodeSnippetModule/dependencies.svg +4 -4
  10. package/docs/documentation/modules/CodeSnippetModule.html +4 -4
  11. package/docs/documentation/modules/ComboBoxModule/dependencies.svg +6 -6
  12. package/docs/documentation/modules/ComboBoxModule.html +6 -6
  13. package/docs/documentation/modules/ContentSwitcherModule/dependencies.svg +4 -4
  14. package/docs/documentation/modules/ContentSwitcherModule.html +4 -4
  15. package/docs/documentation/modules/ContextMenuModule/dependencies.svg +67 -67
  16. package/docs/documentation/modules/ContextMenuModule.html +67 -67
  17. package/docs/documentation/modules/DatePickerInputModule/dependencies.svg +4 -4
  18. package/docs/documentation/modules/DatePickerInputModule.html +4 -4
  19. package/docs/documentation/modules/DatePickerModule/dependencies.svg +6 -6
  20. package/docs/documentation/modules/DatePickerModule.html +6 -6
  21. package/docs/documentation/modules/DialogModule/dependencies.svg +4 -4
  22. package/docs/documentation/modules/DialogModule.html +4 -4
  23. package/docs/documentation/modules/DropdownModule/dependencies.svg +53 -53
  24. package/docs/documentation/modules/DropdownModule.html +53 -53
  25. package/docs/documentation/modules/FileUploaderModule/dependencies.svg +58 -58
  26. package/docs/documentation/modules/FileUploaderModule.html +58 -58
  27. package/docs/documentation/modules/GridModule/dependencies.svg +29 -29
  28. package/docs/documentation/modules/GridModule.html +29 -29
  29. package/docs/documentation/modules/I18nModule/dependencies.svg +4 -4
  30. package/docs/documentation/modules/I18nModule.html +4 -4
  31. package/docs/documentation/modules/IconModule/dependencies.svg +4 -4
  32. package/docs/documentation/modules/IconModule.html +4 -4
  33. package/docs/documentation/modules/InputModule/dependencies.svg +76 -76
  34. package/docs/documentation/modules/InputModule.html +76 -76
  35. package/docs/documentation/modules/LayerModule/dependencies.svg +4 -4
  36. package/docs/documentation/modules/LayerModule.html +4 -4
  37. package/docs/documentation/modules/ListModule/dependencies.svg +4 -4
  38. package/docs/documentation/modules/ListModule.html +4 -4
  39. package/docs/documentation/modules/LoadingModule/dependencies.svg +4 -4
  40. package/docs/documentation/modules/LoadingModule.html +4 -4
  41. package/docs/documentation/modules/MenuButtonModule/dependencies.svg +29 -29
  42. package/docs/documentation/modules/MenuButtonModule.html +29 -29
  43. package/docs/documentation/modules/ModalModule/dependencies.svg +37 -37
  44. package/docs/documentation/modules/ModalModule.html +37 -37
  45. package/docs/documentation/modules/NumberModule/dependencies.svg +4 -4
  46. package/docs/documentation/modules/NumberModule.html +4 -4
  47. package/docs/documentation/modules/PaginationModule/dependencies.svg +56 -56
  48. package/docs/documentation/modules/PaginationModule.html +56 -56
  49. package/docs/documentation/modules/PanelModule/dependencies.svg +36 -36
  50. package/docs/documentation/modules/PanelModule.html +36 -36
  51. package/docs/documentation/modules/PopoverModule/dependencies.svg +4 -4
  52. package/docs/documentation/modules/PopoverModule.html +4 -4
  53. package/docs/documentation/modules/ProgressBarModule/dependencies.svg +4 -4
  54. package/docs/documentation/modules/ProgressBarModule.html +4 -4
  55. package/docs/documentation/modules/ProgressIndicatorModule/dependencies.svg +4 -4
  56. package/docs/documentation/modules/ProgressIndicatorModule.html +4 -4
  57. package/docs/documentation/modules/RadioModule/dependencies.svg +55 -59
  58. package/docs/documentation/modules/RadioModule.html +55 -59
  59. package/docs/documentation/modules/SelectModule/dependencies.svg +61 -61
  60. package/docs/documentation/modules/SelectModule.html +61 -61
  61. package/docs/documentation/modules/SideNavModule/dependencies.svg +41 -41
  62. package/docs/documentation/modules/SideNavModule.html +41 -41
  63. package/docs/documentation/modules/SkeletonModule/dependencies.svg +4 -4
  64. package/docs/documentation/modules/SkeletonModule.html +4 -4
  65. package/docs/documentation/modules/SliderModule/dependencies.svg +40 -36
  66. package/docs/documentation/modules/SliderModule.html +40 -36
  67. package/docs/documentation/modules/StructuredListModule/dependencies.svg +43 -43
  68. package/docs/documentation/modules/StructuredListModule.html +43 -43
  69. package/docs/documentation/modules/TableModule/dependencies.svg +225 -225
  70. package/docs/documentation/modules/TableModule.html +225 -225
  71. package/docs/documentation/modules/TabsModule/dependencies.svg +137 -137
  72. package/docs/documentation/modules/TabsModule.html +137 -137
  73. package/docs/documentation/modules/TagModule/dependencies.svg +38 -38
  74. package/docs/documentation/modules/TagModule.html +38 -38
  75. package/docs/documentation/modules/ThemeModule/dependencies.svg +13 -13
  76. package/docs/documentation/modules/ThemeModule.html +13 -13
  77. package/docs/documentation/modules/TilesModule/dependencies.svg +4 -4
  78. package/docs/documentation/modules/TilesModule.html +4 -4
  79. package/docs/documentation/modules/TimePickerModule/dependencies.svg +7 -7
  80. package/docs/documentation/modules/TimePickerModule.html +7 -7
  81. package/docs/documentation/modules/ToggleModule/dependencies.svg +18 -18
  82. package/docs/documentation/modules/ToggleModule.html +18 -18
  83. package/docs/documentation/modules/ToggletipModule/dependencies.svg +4 -4
  84. package/docs/documentation/modules/ToggletipModule.html +4 -4
  85. package/docs/documentation/modules/TooltipModule/dependencies.svg +4 -4
  86. package/docs/documentation/modules/TooltipModule.html +4 -4
  87. package/docs/documentation/modules/TreeviewModule/dependencies.svg +28 -28
  88. package/docs/documentation/modules/TreeviewModule.html +28 -28
  89. package/docs/documentation/modules/UIShellModule/dependencies.svg +4 -4
  90. package/docs/documentation/modules/UIShellModule.html +4 -4
  91. package/docs/documentation.json +249 -131
  92. package/docs/storybook/1345.da6e3dec.iframe.bundle.js +1 -0
  93. package/docs/storybook/7019.75ad5817.iframe.bundle.js +2 -0
  94. package/docs/storybook/iframe.html +2 -2
  95. package/docs/storybook/{input-input-stories.85a9e65e.iframe.bundle.js → input-input-stories.8bf34960.iframe.bundle.js} +1 -1
  96. package/docs/storybook/{input-textarea-stories.77240fb3.iframe.bundle.js → input-textarea-stories.ad775432.iframe.bundle.js} +1 -1
  97. package/docs/storybook/main.d2b9abb3.iframe.bundle.js +1 -0
  98. package/docs/storybook/project.json +1 -1
  99. package/docs/storybook/{runtime~main.e32f2dfb.iframe.bundle.js → runtime~main.86875b86.iframe.bundle.js} +1 -1
  100. package/esm2020/input/input.directive.mjs +11 -5
  101. package/esm2020/input/text-area.directive.mjs +11 -5
  102. package/esm2020/input/text-input-label.component.mjs +38 -15
  103. package/esm2020/input/textarea-label.component.mjs +46 -21
  104. package/fesm2015/carbon-components-angular-input.mjs +112 -46
  105. package/fesm2015/carbon-components-angular-input.mjs.map +1 -1
  106. package/fesm2020/carbon-components-angular-input.mjs +102 -45
  107. package/fesm2020/carbon-components-angular-input.mjs.map +1 -1
  108. package/input/input.directive.d.ts +4 -1
  109. package/input/text-area.directive.d.ts +4 -1
  110. package/input/text-input-label.component.d.ts +9 -5
  111. package/input/textarea-label.component.d.ts +5 -3
  112. package/package.json +1 -1
  113. package/docs/storybook/1345.9ccf4f3f.iframe.bundle.js +0 -1
  114. package/docs/storybook/7019.b8944046.iframe.bundle.js +0 -2
  115. package/docs/storybook/main.cdbf1814.iframe.bundle.js +0 -1
  116. /package/docs/storybook/{7019.b8944046.iframe.bundle.js.LICENSE.txt → 7019.75ad5817.iframe.bundle.js.LICENSE.txt} +0 -0
package/docs/documentation/components/TextareaLabelComponent.html CHANGED
@@ -310,6 +310,10 @@
310
310
  <span class="modifier">Private</span>
311
311
  <a href="#_inputListener" >_inputListener</a>
312
312
  </li>
313
+ <li>
314
+ <span class="modifier">Private</span>
315
+ <a href="#_subscription" >_subscription</a>
316
+ </li>
313
317
  <li>
314
318
  <span class="modifier">Private</span>
315
319
  <a href="#_textareaElement" >_textareaElement</a>
@@ -506,7 +510,7 @@
506
510
  </tr>
507
511
  <tr>
508
512
  <td class="col-md-4">
509
- <div class="io-line">Defined in <a href="" data-line="248" class="link-to-prism">src/input/textarea-label.component.ts:248</a></div>
513
+ <div class="io-line">Defined in <a href="" data-line="254" class="link-to-prism">src/input/textarea-label.component.ts:254</a></div>
510
514
  </td>
511
515
  </tr>
512
516
 
@@ -564,7 +568,7 @@
564
568
  </tr>
565
569
  <tr>
566
570
  <td class="col-md-2" colspan="2">
567
- <div class="io-line">Defined in <a href="" data-line="197" class="link-to-prism">src/input/textarea-label.component.ts:197</a></div>
571
+ <div class="io-line">Defined in <a href="" data-line="199" class="link-to-prism">src/input/textarea-label.component.ts:199</a></div>
568
572
  </td>
569
573
  </tr>
570
574
  <tr>
@@ -596,7 +600,7 @@
596
600
  </tr>
597
601
  <tr>
598
602
  <td class="col-md-2" colspan="2">
599
- <div class="io-line">Defined in <a href="" data-line="227" class="link-to-prism">src/input/textarea-label.component.ts:227</a></div>
603
+ <div class="io-line">Defined in <a href="" data-line="229" class="link-to-prism">src/input/textarea-label.component.ts:229</a></div>
600
604
  </td>
601
605
  </tr>
602
606
  <tr>
@@ -625,7 +629,7 @@ on each change. Excess words are trimmed from the end of the value.</p>
625
629
  </tr>
626
630
  <tr>
627
631
  <td class="col-md-2" colspan="2">
628
- <div class="io-line">Defined in <a href="" data-line="232" class="link-to-prism">src/input/textarea-label.component.ts:232</a></div>
632
+ <div class="io-line">Defined in <a href="" data-line="234" class="link-to-prism">src/input/textarea-label.component.ts:234</a></div>
629
633
  </td>
630
634
  </tr>
631
635
  <tr>
@@ -657,7 +661,7 @@ on each change. Excess words are trimmed from the end of the value.</p>
657
661
  </tr>
658
662
  <tr>
659
663
  <td class="col-md-2" colspan="2">
660
- <div class="io-line">Defined in <a href="" data-line="162" class="link-to-prism">src/input/textarea-label.component.ts:162</a></div>
664
+ <div class="io-line">Defined in <a href="" data-line="164" class="link-to-prism">src/input/textarea-label.component.ts:164</a></div>
661
665
  </td>
662
666
  </tr>
663
667
  <tr>
@@ -689,7 +693,7 @@ on each change. Excess words are trimmed from the end of the value.</p>
689
693
  </tr>
690
694
  <tr>
691
695
  <td class="col-md-2" colspan="2">
692
- <div class="io-line">Defined in <a href="" data-line="214" class="link-to-prism">src/input/textarea-label.component.ts:214</a></div>
696
+ <div class="io-line">Defined in <a href="" data-line="216" class="link-to-prism">src/input/textarea-label.component.ts:216</a></div>
693
697
  </td>
694
698
  </tr>
695
699
  <tr>
@@ -722,7 +726,7 @@ counter alongside the label.</p>
722
726
  </tr>
723
727
  <tr>
724
728
  <td class="col-md-2" colspan="2">
725
- <div class="io-line">Defined in <a href="" data-line="202" class="link-to-prism">src/input/textarea-label.component.ts:202</a></div>
729
+ <div class="io-line">Defined in <a href="" data-line="204" class="link-to-prism">src/input/textarea-label.component.ts:204</a></div>
726
730
  </td>
727
731
  </tr>
728
732
  <tr>
@@ -749,7 +753,7 @@ counter alongside the label.</p>
749
753
  </tr>
750
754
  <tr>
751
755
  <td class="col-md-2" colspan="2">
752
- <div class="io-line">Defined in <a href="" data-line="177" class="link-to-prism">src/input/textarea-label.component.ts:177</a></div>
756
+ <div class="io-line">Defined in <a href="" data-line="179" class="link-to-prism">src/input/textarea-label.component.ts:179</a></div>
753
757
  </td>
754
758
  </tr>
755
759
  <tr>
@@ -781,7 +785,7 @@ counter alongside the label.</p>
781
785
  </tr>
782
786
  <tr>
783
787
  <td class="col-md-2" colspan="2">
784
- <div class="io-line">Defined in <a href="" data-line="208" class="link-to-prism">src/input/textarea-label.component.ts:208</a></div>
788
+ <div class="io-line">Defined in <a href="" data-line="210" class="link-to-prism">src/input/textarea-label.component.ts:210</a></div>
785
789
  </td>
786
790
  </tr>
787
791
  <tr>
@@ -814,7 +818,7 @@ screen readers.</p>
814
818
  </tr>
815
819
  <tr>
816
820
  <td class="col-md-2" colspan="2">
817
- <div class="io-line">Defined in <a href="" data-line="185" class="link-to-prism">src/input/textarea-label.component.ts:185</a></div>
821
+ <div class="io-line">Defined in <a href="" data-line="187" class="link-to-prism">src/input/textarea-label.component.ts:187</a></div>
818
822
  </td>
819
823
  </tr>
820
824
  <tr>
@@ -841,7 +845,7 @@ screen readers.</p>
841
845
  </tr>
842
846
  <tr>
843
847
  <td class="col-md-2" colspan="2">
844
- <div class="io-line">Defined in <a href="" data-line="181" class="link-to-prism">src/input/textarea-label.component.ts:181</a></div>
848
+ <div class="io-line">Defined in <a href="" data-line="183" class="link-to-prism">src/input/textarea-label.component.ts:183</a></div>
845
849
  </td>
846
850
  </tr>
847
851
  <tr>
@@ -873,7 +877,7 @@ screen readers.</p>
873
877
  </tr>
874
878
  <tr>
875
879
  <td class="col-md-2" colspan="2">
876
- <div class="io-line">Defined in <a href="" data-line="157" class="link-to-prism">src/input/textarea-label.component.ts:157</a></div>
880
+ <div class="io-line">Defined in <a href="" data-line="159" class="link-to-prism">src/input/textarea-label.component.ts:159</a></div>
877
881
  </td>
878
882
  </tr>
879
883
  <tr>
@@ -901,7 +905,7 @@ its input counterpart through the &#39;for&#39; attribute.</p>
901
905
  </tr>
902
906
  <tr>
903
907
  <td class="col-md-2" colspan="2">
904
- <div class="io-line">Defined in <a href="" data-line="172" class="link-to-prism">src/input/textarea-label.component.ts:172</a></div>
908
+ <div class="io-line">Defined in <a href="" data-line="174" class="link-to-prism">src/input/textarea-label.component.ts:174</a></div>
905
909
  </td>
906
910
  </tr>
907
911
  <tr>
@@ -929,7 +933,7 @@ Since we cannot pass ng-content down easily from label component, we will accept
929
933
  </tr>
930
934
  <tr>
931
935
  <td class="col-md-2" colspan="2">
932
- <div class="io-line">Defined in <a href="" data-line="220" class="link-to-prism">src/input/textarea-label.component.ts:220</a></div>
936
+ <div class="io-line">Defined in <a href="" data-line="222" class="link-to-prism">src/input/textarea-label.component.ts:222</a></div>
933
937
  </td>
934
938
  </tr>
935
939
  <tr>
@@ -962,7 +966,7 @@ counter to display.</p>
962
966
  </tr>
963
967
  <tr>
964
968
  <td class="col-md-2" colspan="2">
965
- <div class="io-line">Defined in <a href="" data-line="166" class="link-to-prism">src/input/textarea-label.component.ts:166</a></div>
969
+ <div class="io-line">Defined in <a href="" data-line="168" class="link-to-prism">src/input/textarea-label.component.ts:168</a></div>
966
970
  </td>
967
971
  </tr>
968
972
  <tr>
@@ -989,7 +993,7 @@ counter to display.</p>
989
993
  </tr>
990
994
  <tr>
991
995
  <td class="col-md-2" colspan="2">
992
- <div class="io-line">Defined in <a href="" data-line="173" class="link-to-prism">src/input/textarea-label.component.ts:173</a></div>
996
+ <div class="io-line">Defined in <a href="" data-line="175" class="link-to-prism">src/input/textarea-label.component.ts:175</a></div>
993
997
  </td>
994
998
  </tr>
995
999
  </tbody>
@@ -1015,7 +1019,7 @@ counter to display.</p>
1015
1019
  </tr>
1016
1020
  <tr>
1017
1021
  <td class="col-md-2" colspan="2">
1018
- <div class="io-line">Defined in <a href="" data-line="189" class="link-to-prism">src/input/textarea-label.component.ts:189</a></div>
1022
+ <div class="io-line">Defined in <a href="" data-line="191" class="link-to-prism">src/input/textarea-label.component.ts:191</a></div>
1019
1023
  </td>
1020
1024
  </tr>
1021
1025
  <tr>
@@ -1042,7 +1046,7 @@ counter to display.</p>
1042
1046
  </tr>
1043
1047
  <tr>
1044
1048
  <td class="col-md-2" colspan="2">
1045
- <div class="io-line">Defined in <a href="" data-line="193" class="link-to-prism">src/input/textarea-label.component.ts:193</a></div>
1049
+ <div class="io-line">Defined in <a href="" data-line="195" class="link-to-prism">src/input/textarea-label.component.ts:195</a></div>
1046
1050
  </td>
1047
1051
  </tr>
1048
1052
  <tr>
@@ -1080,7 +1084,7 @@ counter to display.</p>
1080
1084
  </tr>
1081
1085
  <tr>
1082
1086
  <td class="col-md-4">
1083
- <div class="io-line">Defined in <a href="" data-line="243" class="link-to-prism">src/input/textarea-label.component.ts:243</a></div>
1087
+ <div class="io-line">Defined in <a href="" data-line="245" class="link-to-prism">src/input/textarea-label.component.ts:245</a></div>
1084
1088
  </td>
1085
1089
  </tr>
1086
1090
 
@@ -1106,7 +1110,7 @@ counter to display.</p>
1106
1110
  </tr>
1107
1111
  <tr>
1108
1112
  <td class="col-md-4">
1109
- <div class="io-line">Defined in <a href="" data-line="138" class="link-to-prism">src/input/textarea-label.component.ts:138</a></div>
1113
+ <div class="io-line">Defined in <a href="" data-line="140" class="link-to-prism">src/input/textarea-label.component.ts:140</a></div>
1110
1114
  </td>
1111
1115
  </tr>
1112
1116
 
@@ -1132,7 +1136,7 @@ counter to display.</p>
1132
1136
  </tr>
1133
1137
  <tr>
1134
1138
  <td class="col-md-4">
1135
- <div class="io-line">Defined in <a href="" data-line="142" class="link-to-prism">src/input/textarea-label.component.ts:142</a></div>
1139
+ <div class="io-line">Defined in <a href="" data-line="144" class="link-to-prism">src/input/textarea-label.component.ts:144</a></div>
1136
1140
  </td>
1137
1141
  </tr>
1138
1142
 
@@ -1158,7 +1162,7 @@ counter to display.</p>
1158
1162
  </tr>
1159
1163
  <tr>
1160
1164
  <td class="col-md-4">
1161
- <div class="io-line">Defined in <a href="" data-line="146" class="link-to-prism">src/input/textarea-label.component.ts:146</a></div>
1165
+ <div class="io-line">Defined in <a href="" data-line="148" class="link-to-prism">src/input/textarea-label.component.ts:148</a></div>
1162
1166
  </td>
1163
1167
  </tr>
1164
1168
 
@@ -1195,15 +1199,16 @@ counter to display.</p>
1195
1199
 
1196
1200
  <tr>
1197
1201
  <td class="col-md-4">
1198
- <div class="io-line">Defined in <a href="" data-line="346"
1199
- class="link-to-prism">src/input/textarea-label.component.ts:346</a></div>
1202
+ <div class="io-line">Defined in <a href="" data-line="352"
1203
+ class="link-to-prism">src/input/textarea-label.component.ts:352</a></div>
1200
1204
  </td>
1201
1205
  </tr>
1202
1206
 
1203
1207
 
1204
1208
  <tr>
1205
1209
  <td class="col-md-4">
1206
- <div class="io-description"><p>Attaches the input event listener, ensuring it is never added twice.</p>
1210
+ <div class="io-description"><p>Attaches the counter listener, listen for either ngControl or native DOM input
1211
+ event listener</p>
1207
1212
  </div>
1208
1213
 
1209
1214
  <div class="io-description">
@@ -1236,8 +1241,8 @@ counter to display.</p>
1236
1241
 
1237
1242
  <tr>
1238
1243
  <td class="col-md-4">
1239
- <div class="io-line">Defined in <a href="" data-line="400"
1240
- class="link-to-prism">src/input/textarea-label.component.ts:400</a></div>
1244
+ <div class="io-line">Defined in <a href="" data-line="430"
1245
+ class="link-to-prism">src/input/textarea-label.component.ts:430</a></div>
1241
1246
  </td>
1242
1247
  </tr>
1243
1248
 
@@ -1305,15 +1310,16 @@ counter to display.</p>
1305
1310
 
1306
1311
  <tr>
1307
1312
  <td class="col-md-4">
1308
- <div class="io-line">Defined in <a href="" data-line="393"
1309
- class="link-to-prism">src/input/textarea-label.component.ts:393</a></div>
1313
+ <div class="io-line">Defined in <a href="" data-line="420"
1314
+ class="link-to-prism">src/input/textarea-label.component.ts:420</a></div>
1310
1315
  </td>
1311
1316
  </tr>
1312
1317
 
1313
1318
 
1314
1319
  <tr>
1315
1320
  <td class="col-md-4">
1316
- <div class="io-description"><p>Removes the input event listener and clears the cached reference.</p>
1321
+ <div class="io-description"><p>Removes the subscription (NgControl path) and removes the DOM listener
1322
+ (fallback path). Safe to call when neither is active.</p>
1317
1323
  </div>
1318
1324
 
1319
1325
  <div class="io-description">
@@ -1346,8 +1352,8 @@ counter to display.</p>
1346
1352
 
1347
1353
  <tr>
1348
1354
  <td class="col-md-4">
1349
- <div class="io-line">Defined in <a href="" data-line="332"
1350
- class="link-to-prism">src/input/textarea-label.component.ts:332</a></div>
1355
+ <div class="io-line">Defined in <a href="" data-line="337"
1356
+ class="link-to-prism">src/input/textarea-label.component.ts:337</a></div>
1351
1357
  </td>
1352
1358
  </tr>
1353
1359
 
@@ -1390,8 +1396,8 @@ If <code>maxCount</code> is unset or the mode is <code>&quot;word&quot;</code>,
1390
1396
 
1391
1397
  <tr>
1392
1398
  <td class="col-md-4">
1393
- <div class="io-line">Defined in <a href="" data-line="372"
1394
- class="link-to-prism">src/input/textarea-label.component.ts:372</a></div>
1399
+ <div class="io-line">Defined in <a href="" data-line="399"
1400
+ class="link-to-prism">src/input/textarea-label.component.ts:399</a></div>
1395
1401
  </td>
1396
1402
  </tr>
1397
1403
 
@@ -1475,8 +1481,8 @@ any trailing content (partial word or space) beyond the limit is dropped.</p>
1475
1481
 
1476
1482
  <tr>
1477
1483
  <td class="col-md-4">
1478
- <div class="io-line">Defined in <a href="" data-line="322"
1479
- class="link-to-prism">src/input/textarea-label.component.ts:322</a></div>
1484
+ <div class="io-line">Defined in <a href="" data-line="327"
1485
+ class="link-to-prism">src/input/textarea-label.component.ts:327</a></div>
1480
1486
  </td>
1481
1487
  </tr>
1482
1488
 
@@ -1538,8 +1544,8 @@ any trailing content (partial word or space) beyond the limit is dropped.</p>
1538
1544
 
1539
1545
  <tr>
1540
1546
  <td class="col-md-4">
1541
- <div class="io-line">Defined in <a href="" data-line="259"
1542
- class="link-to-prism">src/input/textarea-label.component.ts:259</a></div>
1547
+ <div class="io-line">Defined in <a href="" data-line="265"
1548
+ class="link-to-prism">src/input/textarea-label.component.ts:265</a></div>
1543
1549
  </td>
1544
1550
  </tr>
1545
1551
 
@@ -1578,8 +1584,8 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
1578
1584
 
1579
1585
  <tr>
1580
1586
  <td class="col-md-4">
1581
- <div class="io-line">Defined in <a href="" data-line="297"
1582
- class="link-to-prism">src/input/textarea-label.component.ts:297</a></div>
1587
+ <div class="io-line">Defined in <a href="" data-line="302"
1588
+ class="link-to-prism">src/input/textarea-label.component.ts:302</a></div>
1583
1589
  </td>
1584
1590
  </tr>
1585
1591
 
@@ -1647,8 +1653,8 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
1647
1653
 
1648
1654
  <tr>
1649
1655
  <td class="col-md-4">
1650
- <div class="io-line">Defined in <a href="" data-line="318"
1651
- class="link-to-prism">src/input/textarea-label.component.ts:318</a></div>
1656
+ <div class="io-line">Defined in <a href="" data-line="323"
1657
+ class="link-to-prism">src/input/textarea-label.component.ts:323</a></div>
1652
1658
  </td>
1653
1659
  </tr>
1654
1660
 
@@ -1695,7 +1701,39 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
1695
1701
  </tr>
1696
1702
  <tr>
1697
1703
  <td class="col-md-4">
1698
- <div class="io-line">Defined in <a href="" data-line="248" class="link-to-prism">src/input/textarea-label.component.ts:248</a></div>
1704
+ <div class="io-line">Defined in <a href="" data-line="254" class="link-to-prism">src/input/textarea-label.component.ts:254</a></div>
1705
+ </td>
1706
+ </tr>
1707
+
1708
+
1709
+ </tbody>
1710
+ </table>
1711
+ <table class="table table-sm table-bordered">
1712
+ <tbody>
1713
+ <tr>
1714
+ <td class="col-md-4">
1715
+ <a name="_subscription"></a>
1716
+ <span class="name">
1717
+ <span class="modifier">Private</span>
1718
+ <span ><b>_subscription</b></span>
1719
+ <a href="#_subscription"><span class="icon ion-ios-link"></span></a>
1720
+ </span>
1721
+ </td>
1722
+ </tr>
1723
+ <tr>
1724
+ <td class="col-md-4">
1725
+ <i>Type : </i> <code>Subscription | null</code>
1726
+
1727
+ </td>
1728
+ </tr>
1729
+ <tr>
1730
+ <td class="col-md-4">
1731
+ <i>Default value : </i><code>null</code>
1732
+ </td>
1733
+ </tr>
1734
+ <tr>
1735
+ <td class="col-md-4">
1736
+ <div class="io-line">Defined in <a href="" data-line="251" class="link-to-prism">src/input/textarea-label.component.ts:251</a></div>
1699
1737
  </td>
1700
1738
  </tr>
1701
1739
 
@@ -1727,7 +1765,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
1727
1765
  </tr>
1728
1766
  <tr>
1729
1767
  <td class="col-md-4">
1730
- <div class="io-line">Defined in <a href="" data-line="246" class="link-to-prism">src/input/textarea-label.component.ts:246</a></div>
1768
+ <div class="io-line">Defined in <a href="" data-line="248" class="link-to-prism">src/input/textarea-label.component.ts:248</a></div>
1731
1769
  </td>
1732
1770
  </tr>
1733
1771
 
@@ -1762,7 +1800,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
1762
1800
  </tr>
1763
1801
  <tr>
1764
1802
  <td class="col-md-4">
1765
- <div class="io-line">Defined in <a href="" data-line="243" class="link-to-prism">src/input/textarea-label.component.ts:243</a></div>
1803
+ <div class="io-line">Defined in <a href="" data-line="245" class="link-to-prism">src/input/textarea-label.component.ts:245</a></div>
1766
1804
  </td>
1767
1805
  </tr>
1768
1806
 
@@ -1794,7 +1832,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
1794
1832
  </tr>
1795
1833
  <tr>
1796
1834
  <td class="col-md-4">
1797
- <div class="io-line">Defined in <a href="" data-line="152" class="link-to-prism">src/input/textarea-label.component.ts:152</a></div>
1835
+ <div class="io-line">Defined in <a href="" data-line="154" class="link-to-prism">src/input/textarea-label.component.ts:154</a></div>
1798
1836
  </td>
1799
1837
  </tr>
1800
1838
 
@@ -1836,7 +1874,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
1836
1874
  </tr>
1837
1875
  <tr>
1838
1876
  <td class="col-md-4">
1839
- <div class="io-line">Defined in <a href="" data-line="241" class="link-to-prism">src/input/textarea-label.component.ts:241</a></div>
1877
+ <div class="io-line">Defined in <a href="" data-line="243" class="link-to-prism">src/input/textarea-label.component.ts:243</a></div>
1840
1878
  </td>
1841
1879
  </tr>
1842
1880
 
@@ -1867,7 +1905,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
1867
1905
  </tr>
1868
1906
  <tr>
1869
1907
  <td class="col-md-4">
1870
- <div class="io-line">Defined in <a href="" data-line="235" class="link-to-prism">src/input/textarea-label.component.ts:235</a></div>
1908
+ <div class="io-line">Defined in <a href="" data-line="237" class="link-to-prism">src/input/textarea-label.component.ts:237</a></div>
1871
1909
  </td>
1872
1910
  </tr>
1873
1911
 
@@ -1903,7 +1941,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
1903
1941
  </tr>
1904
1942
  <tr>
1905
1943
  <td class="col-md-4">
1906
- <div class="io-line">Defined in <a href="" data-line="238" class="link-to-prism">src/input/textarea-label.component.ts:238</a></div>
1944
+ <div class="io-line">Defined in <a href="" data-line="240" class="link-to-prism">src/input/textarea-label.component.ts:240</a></div>
1907
1945
  </td>
1908
1946
  </tr>
1909
1947
 
@@ -1932,7 +1970,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
1932
1970
  </tr>
1933
1971
  <tr>
1934
1972
  <td class="col-md-4">
1935
- <div class="io-line">Defined in <a href="" data-line="138" class="link-to-prism">src/input/textarea-label.component.ts:138</a></div>
1973
+ <div class="io-line">Defined in <a href="" data-line="140" class="link-to-prism">src/input/textarea-label.component.ts:140</a></div>
1936
1974
  </td>
1937
1975
  </tr>
1938
1976
 
@@ -1954,7 +1992,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
1954
1992
  </tr>
1955
1993
  <tr>
1956
1994
  <td class="col-md-4">
1957
- <div class="io-line">Defined in <a href="" data-line="142" class="link-to-prism">src/input/textarea-label.component.ts:142</a></div>
1995
+ <div class="io-line">Defined in <a href="" data-line="144" class="link-to-prism">src/input/textarea-label.component.ts:144</a></div>
1958
1996
  </td>
1959
1997
  </tr>
1960
1998
 
@@ -1976,7 +2014,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
1976
2014
  </tr>
1977
2015
  <tr>
1978
2016
  <td class="col-md-4">
1979
- <div class="io-line">Defined in <a href="" data-line="146" class="link-to-prism">src/input/textarea-label.component.ts:146</a></div>
2017
+ <div class="io-line">Defined in <a href="" data-line="148" class="link-to-prism">src/input/textarea-label.component.ts:148</a></div>
1980
2018
  </td>
1981
2019
  </tr>
1982
2020
 
@@ -2001,6 +2039,8 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
2001
2039
  ChangeDetectorRef,
2002
2040
  SimpleChanges
2003
2041
  } from &quot;@angular/core&quot;;
2042
+ import { Subscription } from &quot;rxjs&quot;;
2043
+ import { startWith } from &quot;rxjs/operators&quot;;
2004
2044
 
2005
2045
  import { TextArea } from &quot;./text-area.directive&quot;;
2006
2046
 
@@ -2220,7 +2260,7 @@ export class TextareaLabelComponent implements AfterViewInit, OnChanges, OnDestr
2220
2260
  */
2221
2261
  @Input() decorator: TemplateRef&lt;any&gt;;
2222
2262
 
2223
- // Tracks current character / word count for the counter display.
2263
+ // Tracks current character / word count for the counter display.
2224
2264
  textCount &#x3D; 0;
2225
2265
 
2226
2266
  // @ts-ignore
@@ -2233,7 +2273,11 @@ export class TextareaLabelComponent implements AfterViewInit, OnChanges, OnDestr
2233
2273
 
2234
2274
  // Cached reference to the textarea element, set once in ngAfterViewInit.
2235
2275
  private _textareaElement: HTMLTextAreaElement | null &#x3D; null;
2236
- // Cached listener so it can be removed precisely (avoids anonymous-function leak)
2276
+
2277
+ // RxJS subscription used when NgControl is available (template-driven &amp; reactive forms).
2278
+ private _subscription: Subscription | null &#x3D; null;
2279
+
2280
+ // Fallback DOM listener used only when no NgControl is present (plain textarea).
2237
2281
  private _inputListener: ((e: Event) &#x3D;&gt; void) | null &#x3D; null;
2238
2282
 
2239
2283
  /**
@@ -2281,7 +2325,6 @@ export class TextareaLabelComponent implements AfterViewInit, OnChanges, OnDestr
2281
2325
 
2282
2326
  /**
2283
2327
  * Attach/remove listener and seed &#x60;textCount&#x60; from the textarea&#x27;s current value.
2284
- * @param changes
2285
2328
  */
2286
2329
  ngOnChanges(changes: SimpleChanges) {
2287
2330
  if (changes.enableCounter &amp;&amp; !changes.enableCounter.firstChange) {
@@ -2330,27 +2373,49 @@ export class TextareaLabelComponent implements AfterViewInit, OnChanges, OnDestr
2330
2373
  }
2331
2374
 
2332
2375
  /**
2333
- * Attaches the input event listener, ensuring it is never added twice.
2376
+ * Attaches the counter listener, listen for either ngControl or native DOM input
2377
+ * event listener
2334
2378
  */
2335
2379
  private _attachCounterListener(): void {
2336
2380
  this._detachCounterListener();
2337
- if (!this._textareaElement) {
2338
- return;
2339
- }
2340
- this._inputListener &#x3D; (e: Event) &#x3D;&gt; {
2341
- const el &#x3D; e.target as HTMLTextAreaElement;
2342
- // Word-mode enforcement: clamp value to maxCount words on each input so
2343
- // the textarea never holds more words than allowed. Character mode relies
2344
- // on the native &#x60;maxlength&#x60; attribute set by the developer.
2345
- if (this.counterMode &#x3D;&#x3D;&#x3D; &quot;word&quot; &amp;&amp; this.maxCount !&#x3D; null) {
2346
- const clamped &#x3D; this._truncateToWordLimit(el.value || &quot;&quot;, this.maxCount);
2347
- if (clamped !&#x3D;&#x3D; el.value) {
2348
- el.value &#x3D; clamped;
2349
- }
2381
+
2382
+ const control &#x3D; this.textArea?.ngControl;
2383
+ if (control?.valueChanges) {
2384
+ // NgControl listener
2385
+ this._subscription &#x3D; control.valueChanges
2386
+ .pipe(startWith(control.value))
2387
+ .subscribe((value: string) &#x3D;&gt; {
2388
+ const raw &#x3D; value || &quot;&quot;;
2389
+
2390
+ if (this.counterMode &#x3D;&#x3D;&#x3D; &quot;word&quot; &amp;&amp; this.maxCount !&#x3D; null) {
2391
+ const clamped &#x3D; this._truncateToWordLimit(raw, this.maxCount);
2392
+ if (clamped !&#x3D;&#x3D; raw) {
2393
+ // Write back through the control so the form model stays in sync.
2394
+ // emitEvent false to avoid infinite loop
2395
+ control?.control?.setValue(clamped, { emitEvent: false });
2396
+ }
2397
+ }
2398
+
2399
+ this.textCount &#x3D; this._countValue(raw);
2400
+ this.changeDetectorRef.markForCheck();
2401
+ });
2402
+ } else {
2403
+ // Fallback DOM path
2404
+ if (!this._textareaElement) {
2405
+ return;
2350
2406
  }
2351
- this.textCount &#x3D; this._countValue(el.value || &quot;&quot;);
2352
- };
2353
- this._textareaElement.addEventListener(&quot;input&quot;, this._inputListener);
2407
+ this._inputListener &#x3D; (e: Event) &#x3D;&gt; {
2408
+ const el &#x3D; e.target as HTMLTextAreaElement;
2409
+ if (this.counterMode &#x3D;&#x3D;&#x3D; &quot;word&quot; &amp;&amp; this.maxCount !&#x3D; null) {
2410
+ const clamped &#x3D; this._truncateToWordLimit(el.value || &quot;&quot;, this.maxCount);
2411
+ if (clamped !&#x3D;&#x3D; el.value) {
2412
+ el.value &#x3D; clamped;
2413
+ }
2414
+ }
2415
+ this.textCount &#x3D; this._countValue(el.value || &quot;&quot;);
2416
+ };
2417
+ this._textareaElement.addEventListener(&quot;input&quot;, this._inputListener);
2418
+ }
2354
2419
  }
2355
2420
 
2356
2421
  /**
@@ -2375,11 +2440,14 @@ export class TextareaLabelComponent implements AfterViewInit, OnChanges, OnDestr
2375
2440
  return wordsSeen &lt; limit ? value : value.slice(0, cutIndex);
2376
2441
  }
2377
2442
 
2378
-
2379
2443
  /**
2380
- * Removes the input event listener and clears the cached reference.
2444
+ * Removes the subscription (NgControl path) and removes the DOM listener
2445
+ * (fallback path). Safe to call when neither is active.
2381
2446
  */
2382
2447
  private _detachCounterListener(): void {
2448
+ this._subscription?.unsubscribe();
2449
+ this._subscription &#x3D; null;
2450
+
2383
2451
  if (this._inputListener &amp;&amp; this._textareaElement) {
2384
2452
  this._textareaElement.removeEventListener(&quot;input&quot;, this._inputListener);
2385
2453
  this._inputListener &#x3D; null;
package/docs/documentation/coverage.html CHANGED
@@ -1365,9 +1365,9 @@
1365
1365
  </td>
1366
1366
  <td>directive</td>
1367
1367
  <td>TextInput</td>
1368
- <td align="right" data-sort="12">
1369
- <span class="coverage-percent">12 %</span>
1370
- <span class="coverage-count">(2/16)</span>
1368
+ <td align="right" data-sort="11">
1369
+ <span class="coverage-percent">11 %</span>
1370
+ <span class="coverage-count">(2/18)</span>
1371
1371
  </td>
1372
1372
  </tr>
1373
1373
  <tr class="good">
@@ -1413,9 +1413,9 @@
1413
1413
  </td>
1414
1414
  <td>directive</td>
1415
1415
  <td>TextArea</td>
1416
- <td align="right" data-sort="22">
1417
- <span class="coverage-percent">22 %</span>
1418
- <span class="coverage-count">(2/9)</span>
1416
+ <td align="right" data-sort="18">
1417
+ <span class="coverage-percent">18 %</span>
1418
+ <span class="coverage-count">(2/11)</span>
1419
1419
  </td>
1420
1420
  </tr>
1421
1421
  <tr class="good">
@@ -1425,9 +1425,9 @@
1425
1425
  </td>
1426
1426
  <td>component</td>
1427
1427
  <td>TextInputLabelComponent</td>
1428
- <td align="right" data-sort="60">
1429
- <span class="coverage-percent">60 %</span>
1430
- <span class="coverage-count">(24/40)</span>
1428
+ <td align="right" data-sort="57">
1429
+ <span class="coverage-percent">57 %</span>
1430
+ <span class="coverage-count">(24/42)</span>
1431
1431
  </td>
1432
1432
  </tr>
1433
1433
  <tr class="good">
@@ -1437,9 +1437,9 @@
1437
1437
  </td>
1438
1438
  <td>component</td>
1439
1439
  <td>TextareaLabelComponent</td>
1440
- <td align="right" data-sort="64">
1441
- <span class="coverage-percent">64 %</span>
1442
- <span class="coverage-count">(25/39)</span>
1440
+ <td align="right" data-sort="62">
1441
+ <span class="coverage-percent">62 %</span>
1442
+ <span class="coverage-count">(25/40)</span>
1443
1443
  </td>
1444
1444
  </tr>
1445
1445
  <tr class="medium">