@eui/components 19.0.3 → 19.0.4

package/docs/components/EuiInputNumberComponent.html

@@ -109,6 +109,45 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Input number component that allows the user to enter a number. It supports number
+formatting and validation. It uses Cleave.js to format the number. It depends on
+the <a href="LocaleService">LocaleService</a> to get the current locale and format the number accordingly.</p>
+<p>It supports the following attributes:</p>
+<ul>
+<li><a href="min">min</a>: The minimum number can be entered. Blocks user&#39;s input if not in range.</li>
+<li><a href="max">max</a>: The maximum number can be entered. Blocks user&#39;s input if not in range.</li>
+<li><a href="leadingZero">leadingZero</a>: Adds leading zero to a number. Formatting will not work.</li>
+<li><a href="isInvalid">isInvalid</a>: Sets the invalid state of the input element.</li>
+<li><a href="fractionDigits">fractionDigits</a>: Determines how many digits to show after the decimal point.</li>
+<li><a href="digits">digits</a>: Determines how many digits to show before the decimal point.</li>
+<li><a href="fillFraction">fillFraction</a>: Fills the decimal part with zeros in case it&#39;s less than the fractionDigits.</li>
+<li><a href="roundUp">roundUp</a>: Rounds a number with more than two decimals UP.</li>
+<li><a href="noFormat">noFormat</a>: Disables the number formatting. It will be treated as a plain number.</li>
+<li><a href="value">value</a>: The value of the input element.</li>
+<li><a href="placeholder">placeholder</a>: The placeholder value of the input element.</li>
+<li><a href="euiClearable">euiClearable</a>: Adds a clear button to the input element.</li>
+<li><a href="euiLoading">euiLoading</a>: Adds a loading spinner to the input element.</li>
+<li><a href="readonly">readonly</a>: Disables the input element.</li>
+<li><a href="disabled">disabled</a>: Disables the input element.</li>
+<li><a href="euiDanger">euiDanger</a>: Sets the invalid state of the input element.</li>
+<li><a href="euiSuccess">euiSuccess</a>: Sets the success state of the input element.</li>
+<li><a href="euiWarning">euiWarning</a>: Sets the warning state of the input element.</li>
+<li><a href="euiInfo">euiInfo</a>: Sets the info state of the input element.</li>
+<li><a href="euiPrimary">euiPrimary</a>: Sets the primary state of the input element.</li>
+<li><a href="euiSecondary">euiSecondary</a>: Sets the secondary state of the input element.</li>
+</ul>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">```html
+&lt;input euiInputNumber
+       min=&quot;0&quot;
+       max=&quot;100&quot;
+       leadingZero=&quot;3&quot;
+       value=&quot;100.00&quot;
+       placeholder=&quot;100.00&quot; /&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-none"></code></pre></div>
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -164,6 +203,10 @@
                 <td class="col-md-9"><code>input[euiInputNumber]</code></td>
             </tr>
 
+            <tr>
+                <td class="col-md-3">standalone</td>
+                <td class="col-md-9"><code>true</code></td>
+            </tr>
 
 
             <tr>
@@ -487,7 +530,7 @@
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <div class="io-description"><p>how many digits for the integer part</p>
+                        <div class="io-description"><p>determines how many digits to show before the decimal point</p>
 </div>
                     </td>
                 </tr>
@@ -507,6 +550,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>fills the decimal part with zeros in case it&#39;s less than the fractionDigits</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -525,7 +574,7 @@
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <div class="io-description"><p>how many digits for the decimal part</p>
+                        <div class="io-description"><p> determines how many digits to show after the decimal point</p>
 </div>
                     </td>
                 </tr>
@@ -635,7 +684,8 @@
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <div class="io-description"><p>does not format the and do a thousand grouping of number</p>
+                        <div class="io-description"><p>Disables the number formatting. It will be treated as a plain number.
+Will do a thousand grouping of number.</p>
 </div>
                     </td>
                 </tr>
@@ -677,6 +727,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>The value of the input element.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -816,6 +872,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>CSS classes to be added to the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1059,6 +1121,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>holds instance of cleave.js</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1215,6 +1283,17 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>CSS classes to be added to the host element.</p>
+</div>
+
+                                <div class="io-description">
+                                    <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>
@@ -1234,7 +1313,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-description"><p>how many digits for the decimal part</p>
+                                <div class="io-description"><p> determines how many digits to show after the decimal point</p>
 </div>
 
                                 <div class="io-description">

package/docs/components/EuiInputRadioComponent.html

@@ -109,6 +109,20 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>A radio input component that implements form control functionality and custom styling.
+This component extends InputDirective and implements form control interfaces for seamless
+integration with Angular&#39;s form controls.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">```html
+&lt;input euiInputRadio
+       [(ngModel)]=&quot;selectedValue&quot;
+       [value]=&quot;optionValue&quot;
+       [isInvalid]=&quot;false&quot;
+       [readonly]=&quot;false&quot;&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-none"></code></pre></div>
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -149,6 +163,10 @@
                 <td class="col-md-9"><code>input[euiInputRadio]</code></td>
             </tr>
 
+            <tr>
+                <td class="col-md-3">standalone</td>
+                <td class="col-md-9"><code>true</code></td>
+            </tr>
 
 
             <tr>
@@ -402,6 +420,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Gets or sets the default checked state of the radio input.
+This is different from the current checked state and represents the initial value.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -418,6 +443,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Gets or sets whether the radio input is in an invalid state.
+This can be set manually or will be automatically set when used with form validation.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -434,6 +466,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Gets or sets the value of the radio input.
+The value can be of any type and will be used when the radio is selected in a form group.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -573,6 +612,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Gets the CSS classes for the radio input component.
+Combines base classes with invalid state modifier if applicable.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -604,6 +650,44 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                        <div class="io-description"><p>Handles change events on the radio input.
+Updates the model value when the radio selection changes.</p>
+</div>
+
+                            <div class="io-description">
+                                <b>Parameters :</b>
+                                
+                                <table class="params">
+                                    <thead>
+                                        <tr>
+                                            <td>Name</td>
+                                            <td>Optional</td>
+                                                <td>Description</td>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                                <td>event</td>
+
+                                            <td>
+                                                    No
+                                            </td>
+
+
+                                            <td>
+                                                    <ul>
+<li>The change event</li>
+</ul>
+
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                </td>
+            </tr>
         </tbody>
     </table>
     <table class="table table-sm table-bordered">
@@ -631,6 +715,44 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                        <div class="io-description"><p>Handles space key press events. Prevents selection changes when the input
+is readonly.</p>
+</div>
+
+                            <div class="io-description">
+                                <b>Parameters :</b>
+                                
+                                <table class="params">
+                                    <thead>
+                                        <tr>
+                                            <td>Name</td>
+                                            <td>Optional</td>
+                                                <td>Description</td>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                                <td>event</td>
+
+                                            <td>
+                                                    No
+                                            </td>
+
+
+                                            <td>
+                                                    <ul>
+<li>The keyboard event</li>
+</ul>
+
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                </td>
+            </tr>
         </tbody>
     </table>
 </section>
@@ -661,6 +783,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Registers a callback function that is called when the control&#39;s value changes.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -671,6 +795,7 @@
                                             <td>Name</td>
                                                 <td>Type</td>
                                             <td>Optional</td>
+                                                <td>Description</td>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -685,6 +810,12 @@
                                             </td>
 
 
+                                            <td>
+                                                    <ul>
+<li>The callback function</li>
+</ul>
+
+                                            </td>
                                         </tr>
                                     </tbody>
                                 </table>
@@ -722,6 +853,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Registers a callback function that is called when the control is touched.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -732,6 +865,7 @@
                                             <td>Name</td>
                                                 <td>Type</td>
                                             <td>Optional</td>
+                                                <td>Description</td>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -746,6 +880,12 @@
                                             </td>
 
 
+                                            <td>
+                                                    <ul>
+<li>The callback function</li>
+</ul>
+
+                                            </td>
                                         </tr>
                                     </tbody>
                                 </table>
@@ -784,6 +924,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Sets the disabled state of the radio input.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -794,6 +936,7 @@
                                             <td>Name</td>
                                                 <td>Type</td>
                                             <td>Optional</td>
+                                                <td>Description</td>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -808,6 +951,12 @@
                                             </td>
 
 
+                                            <td>
+                                                    <ul>
+<li>Whether the radio input should be disabled</li>
+</ul>
+
+                                            </td>
                                         </tr>
                                     </tbody>
                                 </table>
@@ -845,6 +994,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Implements ControlValueAccessor.writeValue.
+Updates the checked state based on the form control value.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -855,6 +1007,7 @@
                                             <td>Name</td>
                                                 <td>Type</td>
                                             <td>Optional</td>
+                                                <td>Description</td>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -869,6 +1022,12 @@
                                             </td>
 
 
+                                            <td>
+                                                    <ul>
+<li>The value to write</li>
+</ul>
+
+                                            </td>
                                         </tr>
                                     </tbody>
                                 </table>
@@ -965,6 +1124,20 @@
                         <span class="accessor"><b>get</b><code>isInvalid()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Gets or sets whether the radio input is in an invalid state.
+This can be set manually or will be automatically set when used with form validation.</p>
+</div>
+
+                                <div>
+                                </div>
+                                <div class="io-description">
+                                    <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
+
+                                </div>
+                        </td>
+                    </tr>
 
                 <tr>
                     <td class="col-md-4">
@@ -1024,6 +1197,20 @@
                         <span class="accessor"><b>get</b><code>class()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Gets the CSS classes for the radio input component.
+Combines base classes with invalid state modifier if applicable.</p>
+</div>
+
+                                <div>
+                                </div>
+                                <div class="io-description">
+                                    <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>
@@ -1041,6 +1228,20 @@
                         <span class="accessor"><b>get</b><code>defaultChecked()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Gets or sets the default checked state of the radio input.
+This is different from the current checked state and represents the initial value.</p>
+</div>
+
+                                <div>
+                                </div>
+                                <div class="io-description">
+                                    <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
+
+                                </div>
+                        </td>
+                    </tr>
 
                 <tr>
                     <td class="col-md-4">
@@ -1100,6 +1301,19 @@
                         <span class="accessor"><b>get</b><code>selected()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Gets whether the radio input is currently selected.</p>
+</div>
+
+                                <div>
+                                </div>
+                                <div class="io-description">
+                                    <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>
@@ -1117,6 +1331,20 @@
                         <span class="accessor"><b>get</b><code>value()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Gets or sets the value of the radio input.
+The value can be of any type and will be used when the radio is selected in a form group.</p>
+</div>
+
+                                <div>
+                                </div>
+                                <div class="io-description">
+                                    <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
+
+                                </div>
+                        </td>
+                    </tr>
 
                 <tr>
                     <td class="col-md-4">

package/docs/components/EuiInputTextComponent.html

@@ -109,6 +109,18 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>A custom input text component that extends InputDirective and provides additional functionality
+such as validation states, clearable input, and loading states.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">```html
+&lt;input euiInputText
+       [isInvalid]=&quot;true&quot;
+       [euiClearable]=&quot;true&quot;
+       [euiLoading]=&quot;isLoading&quot;&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-none"></code></pre></div>
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -159,6 +171,10 @@
                 <td class="col-md-9"><code>input[euiInputText]</code></td>
             </tr>
 
+            <tr>
+                <td class="col-md-3">standalone</td>
+                <td class="col-md-9"><code>true</code></td>
+            </tr>
 
 
             <tr>
@@ -569,6 +585,19 @@
                         <span class="accessor"><b>get</b><code>class()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Gets the CSS classes for the component, including validation state classes</p>
+</div>
+
+                                <div>
+                                </div>
+                                <div class="io-description">
+                                    <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>
@@ -586,6 +615,20 @@
                         <span class="accessor"><b>get</b><code>isInvalid()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Gets or sets the invalid state of the input
+When used with NgControl, this state is automatically managed based on control state</p>
+</div>
+
+                                <div>
+                                </div>
+                                <div class="io-description">
+                                    <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
+
+                                </div>
+                        </td>
+                    </tr>
 
                 <tr>
                     <td class="col-md-4">
@@ -603,6 +646,7 @@
                                                     <td>Name</td>
                                                         <td>Type</td>
                                                     <td>Optional</td>
+                                                        <td>Description</td>
                                                 </tr>
                                             </thead>
                                             <tbody>
@@ -617,6 +661,12 @@
                                                                 No
                                                         </td>
                                                         
+                                                            <td>
+                                                                    <ul>
+<li>The invalid state to set</li>
+</ul>
+
+                                                            </td>
                                                     </tr>
                                             </tbody>
                                         </table>