carbon-components-angular 5.72.0 → 5.72.1

package/docs/documentation/components/TextInputLabelComponent.html

@@ -341,6 +341,10 @@
                                     <span class="modifier">Private</span>
                                 <a href="#_inputListener" >_inputListener</a>
                             </li>
+                            <li>
+                                    <span class="modifier">Private</span>
+                                <a href="#_subscription" >_subscription</a>
+                            </li>
                             <li>
                                     <span class="modifier"></span>
                                 <a href="#labelClass" >labelClass</a>
@@ -352,6 +356,10 @@
                             <li>
                                 <a href="#textCount" >textCount</a>
                             </li>
+                            <li>
+                                    <span class="modifier"></span>
+                                <a href="#textInput" >textInput</a>
+                            </li>
                             <li>
                                     <span class="modifier"></span>
                                 <a href="#textInputWrapper" >textInputWrapper</a>
@@ -536,7 +544,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="279" class="link-to-prism">src/input/text-input-label.component.ts:279</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="290" class="link-to-prism">src/input/text-input-label.component.ts:290</a></div>
                             </td>
                         </tr>
 
@@ -594,7 +602,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="225" class="link-to-prism">src/input/text-input-label.component.ts:225</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="229" class="link-to-prism">src/input/text-input-label.component.ts:229</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -621,7 +629,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="235" class="link-to-prism">src/input/text-input-label.component.ts:235</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="239" class="link-to-prism">src/input/text-input-label.component.ts:239</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -653,7 +661,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="190" class="link-to-prism">src/input/text-input-label.component.ts:190</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="194" class="link-to-prism">src/input/text-input-label.component.ts:194</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -685,7 +693,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="258" class="link-to-prism">src/input/text-input-label.component.ts:258</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="262" class="link-to-prism">src/input/text-input-label.component.ts:262</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -718,7 +726,7 @@ counter alongside the label.</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="230" class="link-to-prism">src/input/text-input-label.component.ts:230</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="234" class="link-to-prism">src/input/text-input-label.component.ts:234</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -745,7 +753,7 @@ counter alongside the label.</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="205" class="link-to-prism">src/input/text-input-label.component.ts:205</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="209" class="link-to-prism">src/input/text-input-label.component.ts:209</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -777,7 +785,7 @@ counter alongside the label.</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="241" class="link-to-prism">src/input/text-input-label.component.ts:241</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="245" class="link-to-prism">src/input/text-input-label.component.ts:245</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -810,7 +818,7 @@ screen readers.</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="246" class="link-to-prism">src/input/text-input-label.component.ts:246</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="250" class="link-to-prism">src/input/text-input-label.component.ts:250</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -842,7 +850,7 @@ screen readers.</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="213" class="link-to-prism">src/input/text-input-label.component.ts:213</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="217" class="link-to-prism">src/input/text-input-label.component.ts:217</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -869,7 +877,7 @@ screen readers.</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="209" class="link-to-prism">src/input/text-input-label.component.ts:209</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="213" class="link-to-prism">src/input/text-input-label.component.ts:213</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -901,7 +909,7 @@ screen readers.</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="185" class="link-to-prism">src/input/text-input-label.component.ts:185</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="189" class="link-to-prism">src/input/text-input-label.component.ts:189</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -929,7 +937,7 @@ its input counterpart through the &#39;for&#39; attribute.</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="200" class="link-to-prism">src/input/text-input-label.component.ts:200</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="204" class="link-to-prism">src/input/text-input-label.component.ts:204</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -957,7 +965,7 @@ Since we cannot pass ng-content down easily from label component, we will accept
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="264" class="link-to-prism">src/input/text-input-label.component.ts:264</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="268" class="link-to-prism">src/input/text-input-label.component.ts:268</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -990,7 +998,7 @@ counter to display.</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="252" class="link-to-prism">src/input/text-input-label.component.ts:252</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="256" class="link-to-prism">src/input/text-input-label.component.ts:256</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -1023,7 +1031,7 @@ variant class (<code>cds--label--inline--{size}</code>).</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="194" class="link-to-prism">src/input/text-input-label.component.ts:194</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="198" class="link-to-prism">src/input/text-input-label.component.ts:198</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -1050,7 +1058,7 @@ variant class (<code>cds--label--inline--{size}</code>).</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="201" class="link-to-prism">src/input/text-input-label.component.ts:201</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="205" class="link-to-prism">src/input/text-input-label.component.ts:205</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -1076,7 +1084,7 @@ variant class (<code>cds--label--inline--{size}</code>).</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="217" class="link-to-prism">src/input/text-input-label.component.ts:217</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="221" class="link-to-prism">src/input/text-input-label.component.ts:221</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -1103,7 +1111,7 @@ variant class (<code>cds--label--inline--{size}</code>).</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="221" class="link-to-prism">src/input/text-input-label.component.ts:221</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="225" class="link-to-prism">src/input/text-input-label.component.ts:225</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -1141,7 +1149,7 @@ variant class (<code>cds--label--inline--{size}</code>).</p>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="272" class="link-to-prism">src/input/text-input-label.component.ts:272</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="279" class="link-to-prism">src/input/text-input-label.component.ts:279</a></div>
                         </td>
                     </tr>
 
@@ -1167,7 +1175,7 @@ variant class (<code>cds--label--inline--{size}</code>).</p>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="170" class="link-to-prism">src/input/text-input-label.component.ts:170</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="174" class="link-to-prism">src/input/text-input-label.component.ts:174</a></div>
                         </td>
                     </tr>
 
@@ -1193,7 +1201,7 @@ variant class (<code>cds--label--inline--{size}</code>).</p>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="174" class="link-to-prism">src/input/text-input-label.component.ts:174</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="178" class="link-to-prism">src/input/text-input-label.component.ts:178</a></div>
                         </td>
                     </tr>
 
@@ -1224,7 +1232,7 @@ variant class (<code>cds--label--inline--{size}</code>).</p>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="274" class="link-to-prism">src/input/text-input-label.component.ts:274</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="281" class="link-to-prism">src/input/text-input-label.component.ts:281</a></div>
                         </td>
                     </tr>
 
@@ -1250,7 +1258,7 @@ variant class (<code>cds--label--inline--{size}</code>).</p>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="162" class="link-to-prism">src/input/text-input-label.component.ts:162</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="166" class="link-to-prism">src/input/text-input-label.component.ts:166</a></div>
                         </td>
                     </tr>
 
@@ -1276,7 +1284,7 @@ variant class (<code>cds--label--inline--{size}</code>).</p>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="166" class="link-to-prism">src/input/text-input-label.component.ts:166</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="170" class="link-to-prism">src/input/text-input-label.component.ts:170</a></div>
                         </td>
                     </tr>
 
@@ -1313,15 +1321,16 @@ variant class (<code>cds--label--inline--{size}</code>).</p>
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="356"
-                                    class="link-to-prism">src/input/text-input-label.component.ts:356</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="367"
+                                    class="link-to-prism">src/input/text-input-label.component.ts:367</a></div>
                         </td>
                     </tr>
 
 
             <tr>
                 <td class="col-md-4">
-                        <div class="io-description"><p>Attaches the input event listener, ensuring it is never added twice.</p>
+                        <div class="io-description"><p>Attaches the counter listener, listen for either ngControl or native DOM input
+event listener</p>
 </div>
 
                         <div class="io-description">
@@ -1354,15 +1363,16 @@ variant class (<code>cds--label--inline--{size}</code>).</p>
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="371"
-                                    class="link-to-prism">src/input/text-input-label.component.ts:371</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="396"
+                                    class="link-to-prism">src/input/text-input-label.component.ts:396</a></div>
                         </td>
                     </tr>
 
 
             <tr>
                 <td class="col-md-4">
-                        <div class="io-description"><p>Removes the input event listener and clears the cached reference.</p>
+                        <div class="io-description"><p>Removes the subscription (NgControl path) or removes the DOM listener.
+Safe to call when neither is active.</p>
 </div>
 
                         <div class="io-description">
@@ -1395,8 +1405,8 @@ variant class (<code>cds--label--inline--{size}</code>).</p>
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="349"
-                                    class="link-to-prism">src/input/text-input-label.component.ts:349</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="359"
+                                    class="link-to-prism">src/input/text-input-label.component.ts:359</a></div>
                         </td>
                     </tr>
 
@@ -1458,8 +1468,8 @@ variant class (<code>cds--label--inline--{size}</code>).</p>
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="341"
-                                    class="link-to-prism">src/input/text-input-label.component.ts:341</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="351"
+                                    class="link-to-prism">src/input/text-input-label.component.ts:351</a></div>
                         </td>
                     </tr>
 
@@ -1495,8 +1505,8 @@ variant class (<code>cds--label--inline--{size}</code>).</p>
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="290"
-                                    class="link-to-prism">src/input/text-input-label.component.ts:290</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="301"
+                                    class="link-to-prism">src/input/text-input-label.component.ts:301</a></div>
                         </td>
                     </tr>
 
@@ -1535,15 +1545,15 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="327"
-                                    class="link-to-prism">src/input/text-input-label.component.ts:327</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="337"
+                                    class="link-to-prism">src/input/text-input-label.component.ts:337</a></div>
                         </td>
                     </tr>
 
 
             <tr>
                 <td class="col-md-4">
-                        <div class="io-description"><p>Attach/remove listener and seed <code>textCount</code> from the textarea&#39;s current value.</p>
+                        <div class="io-description"><p>Attach/remove listener and seed <code>textCount</code> from the input&#39;s current value.</p>
 </div>
 
                             <div class="io-description">
@@ -1604,8 +1614,8 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="345"
-                                    class="link-to-prism">src/input/text-input-label.component.ts:345</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="355"
+                                    class="link-to-prism">src/input/text-input-label.component.ts:355</a></div>
                         </td>
                     </tr>
 
@@ -1652,7 +1662,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="277" class="link-to-prism">src/input/text-input-label.component.ts:277</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="284" class="link-to-prism">src/input/text-input-label.component.ts:284</a></div>
                         </td>
                     </tr>
 
@@ -1684,7 +1694,39 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="279" class="link-to-prism">src/input/text-input-label.component.ts:279</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="290" class="link-to-prism">src/input/text-input-label.component.ts:290</a></div>
+                        </td>
+                    </tr>
+
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="_subscription"></a>
+                    <span class="name">
+                            <span class="modifier">Private</span>
+                        <span ><b>_subscription</b></span>
+                        <a href="#_subscription"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>Subscription | null</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>null</code>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="287" class="link-to-prism">src/input/text-input-label.component.ts:287</a></div>
                         </td>
                     </tr>
 
@@ -1719,7 +1761,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="272" class="link-to-prism">src/input/text-input-label.component.ts:272</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="279" class="link-to-prism">src/input/text-input-label.component.ts:279</a></div>
                         </td>
                     </tr>
 
@@ -1751,7 +1793,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="180" class="link-to-prism">src/input/text-input-label.component.ts:180</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="184" class="link-to-prism">src/input/text-input-label.component.ts:184</a></div>
                         </td>
                     </tr>
 
@@ -1788,7 +1830,43 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="267" class="link-to-prism">src/input/text-input-label.component.ts:267</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="271" class="link-to-prism">src/input/text-input-label.component.ts:271</a></div>
+                        </td>
+                    </tr>
+
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="textInput"></a>
+                    <span class="name">
+                            <span class="modifier"></span>
+                        <span ><b>textInput</b></span>
+                        <a href="#textInput"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>        <code><a href="../directives/TextInput.html" target="_self" >TextInput</a></code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <b>Decorators : </b>
+                        <br />
+                        <code>
+                            @ContentChild(TextInput, {static: false})<br />
+                        </code>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="277" class="link-to-prism">src/input/text-input-label.component.ts:277</a></div>
                         </td>
                     </tr>
 
@@ -1823,7 +1901,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="274" class="link-to-prism">src/input/text-input-label.component.ts:274</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="281" class="link-to-prism">src/input/text-input-label.component.ts:281</a></div>
                         </td>
                     </tr>
 
@@ -1859,7 +1937,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="270" class="link-to-prism">src/input/text-input-label.component.ts:270</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="274" class="link-to-prism">src/input/text-input-label.component.ts:274</a></div>
                         </td>
                     </tr>
 
@@ -1888,7 +1966,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="162" class="link-to-prism">src/input/text-input-label.component.ts:162</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="166" class="link-to-prism">src/input/text-input-label.component.ts:166</a></div>
                                 </td>
                             </tr>
 
@@ -1910,7 +1988,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="166" class="link-to-prism">src/input/text-input-label.component.ts:166</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="170" class="link-to-prism">src/input/text-input-label.component.ts:170</a></div>
                                 </td>
                             </tr>
 
@@ -1932,7 +2010,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="170" class="link-to-prism">src/input/text-input-label.component.ts:170</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="174" class="link-to-prism">src/input/text-input-label.component.ts:174</a></div>
                                 </td>
                             </tr>
 
@@ -1954,7 +2032,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="174" class="link-to-prism">src/input/text-input-label.component.ts:174</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="178" class="link-to-prism">src/input/text-input-label.component.ts:178</a></div>
                                 </td>
                             </tr>
 
@@ -1970,6 +2048,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
 	AfterViewInit,
 	ChangeDetectorRef,
 	Component,
+	ContentChild,
 	ElementRef,
 	HostBinding,
 	Input,
@@ -1979,6 +2058,9 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
 	TemplateRef,
 	ViewChild
 } from &quot;@angular/core&quot;;
+import { Subscription } from &quot;rxjs&quot;;
+import { startWith } from &quot;rxjs/operators&quot;;
+import { TextInput } from &quot;./input.directive&quot;;
 
 /**
  * Get started with importing the module:
@@ -2236,13 +2318,20 @@ export class TextInputLabelComponent implements AfterViewInit, AfterContentInit,
 	// @ts-ignore
 	@ViewChild(&quot;wrapper&quot;, { static: false }) wrapper: ElementRef&lt;HTMLDivElement&gt;;
 
+	// @ts-ignore
+	@ContentChild(TextInput, { static: false }) textInput: TextInput;
+
 	@HostBinding(&quot;class.cds--form-item&quot;) labelClass &#x3D; true;
 
 	@HostBinding(&quot;class.cds--text-input-wrapper&quot;) textInputWrapper &#x3D; true;
 
 	// Cached reference to the input element, set once in ngAfterViewInit.
 	private _inputElement: HTMLInputElement | null &#x3D; null;
-	// Cached listener so it can be removed precisely (avoids anonymous-function leak).
+
+	// RxJS subscription used when NgControl is available (template-driven &amp; reactive forms).
+	private _subscription: Subscription | null &#x3D; null;
+
+	// Fallback cached DOM listener so it can be removed precisely (avoids anonymous-function leak).
 	private _inputListener: ((e: Event) &#x3D;&gt; void) | null &#x3D; null;
 
 	/**
@@ -2288,8 +2377,7 @@ export class TextInputLabelComponent implements AfterViewInit, AfterContentInit,
 	}
 
 	/**
-	 * Attach/remove listener and seed &#x60;textCount&#x60; from the textarea&#x27;s current value.
-	 * @param changes
+	 * Attach/remove listener and seed &#x60;textCount&#x60; from the input&#x27;s current value.
 	 */
 	ngOnChanges(changes: SimpleChanges) {
 		if (changes.enableCounter &amp;&amp; !changes.enableCounter.firstChange) {
@@ -2318,24 +2406,42 @@ export class TextInputLabelComponent implements AfterViewInit, AfterContentInit,
 	}
 
 	/**
-	 * Attaches the input event listener, ensuring it is never added twice.
+	 * Attaches the counter listener, listen for either ngControl or native DOM input
+	 * event listener
 	 */
 	private _attachCounterListener(): void {
 		this._detachCounterListener();
-		if (!this._inputElement) {
-			return;
+
+		const control &#x3D; this.textInput?.ngControl;
+		if (control?.valueChanges) {
+			// NgControl listener
+			this._subscription &#x3D; control.valueChanges
+				.pipe(startWith(control.value))
+				.subscribe((value: string) &#x3D;&gt; {
+					this.textCount &#x3D; value?.length || 0;
+					this.changeDetectorRef.markForCheck();
+				});
+		} else {
+			// Fallback DOM path
+			if (!this._inputElement) {
+				return;
+			}
+			this._inputListener &#x3D; (e: Event) &#x3D;&gt; {
+				this.textCount &#x3D; (e.target as HTMLInputElement).value?.length || 0;
+				this.changeDetectorRef.detectChanges();
+			};
+			this._inputElement.addEventListener(&quot;input&quot;, this._inputListener);
 		}
-		this._inputListener &#x3D; (e: Event) &#x3D;&gt; {
-			this.textCount &#x3D; (e.target as HTMLInputElement).value?.length || 0;
-			this.changeDetectorRef.detectChanges();
-		};
-		this._inputElement.addEventListener(&quot;input&quot;, this._inputListener);
 	}
 
 	/**
-	 * Removes the input event listener and clears the cached reference.
+	 * Removes the subscription (NgControl path) or removes the DOM listener.
+	 * Safe to call when neither is active.
 	 */
 	private _detachCounterListener(): void {
+		this._subscription?.unsubscribe();
+		this._subscription &#x3D; null;
+
 		if (this._inputListener &amp;&amp; this._inputElement) {
 			this._inputElement.removeEventListener(&quot;input&quot;, this._inputListener);
 			this._inputListener &#x3D; null;