@eui/components 19.0.3 → 19.0.4-snapshot-1738753092246

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>

package/docs/components/EuiTextareaComponent.html

@@ -109,6 +109,19 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>A form control component that provides an enhanced textarea with additional features.
+Supports readonly state visualization, form control integration, and state management.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">```html
+&lt;textarea euiTextArea
+     [(ngModel)]=&quot;value&quot;
+     [readonly]=&quot;isReadonly&quot;
+     [disabled]=&quot;isDisabled&quot;
+     [isInvalid]=&quot;hasError&quot; /&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-none"></code></pre></div>
+    </p>
 
 
     <p class="comment">
@@ -162,6 +175,10 @@
                 <td class="col-md-9"><code>textarea[euiTextArea]</code></td>
             </tr>
 
+            <tr>
+                <td class="col-md-3">standalone</td>
+                <td class="col-md-9"><code>true</code></td>
+            </tr>
 
 
             <tr>
@@ -436,6 +453,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>The disabled state of the textarea
+This can be controlled either directly or through form control binding.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -478,6 +502,12 @@
                         <i>Default value : </i><code>&#x60;eui-textarea_${EuiTextareaComponent.idCounter++}&#x60;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Unique identifier for the textarea</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -494,6 +524,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Flag indicating if the textarea is in an invalid state
+This can be set manually or automatically through form validation.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -510,6 +547,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>The readonly state of the textarea
+with special styling.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -531,7 +575,7 @@
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <div class="io-description"><p>emits the number of rows of text in the textarea while input changes</p>
+                        <div class="io-description"><p>Event emitter that fires when the number of text rows in the textarea changes</p>
 </div>
                     </td>
                 </tr>
@@ -588,6 +632,43 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                        <div class="io-description"><p>Handles blur events on the textarea</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>value</td>
+
+                                            <td>
+                                                    No
+                                            </td>
+
+
+                                            <td>
+                                                    <ul>
+<li>The current value of the textarea</li>
+</ul>
+
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                </td>
+            </tr>
         </tbody>
     </table>
     <table class="table table-sm table-bordered">
@@ -615,6 +696,43 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                        <div class="io-description"><p>Handles input changes in the textarea</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>value</td>
+
+                                            <td>
+                                                    No
+                                            </td>
+
+
+                                            <td>
+                                                    <ul>
+<li>The new value of the textarea</li>
+</ul>
+
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                </td>
+            </tr>
         </tbody>
     </table>
 </section>
@@ -655,6 +773,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Handles blur events on the textarea</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -665,6 +785,7 @@
                                             <td>Name</td>
                                                 <td>Type</td>
                                             <td>Optional</td>
+                                                <td>Description</td>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -679,6 +800,12 @@
                                             </td>
 
 
+                                            <td>
+                                                    <ul>
+<li>The current value of the textarea</li>
+</ul>
+
+                                            </td>
                                         </tr>
                                     </tbody>
                                 </table>
@@ -726,6 +853,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Handles input changes in the textarea</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -736,6 +865,7 @@
                                             <td>Name</td>
                                                 <td>Type</td>
                                             <td>Optional</td>
+                                                <td>Description</td>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -750,6 +880,12 @@
                                             </td>
 
 
+                                            <td>
+                                                    <ul>
+<li>The new value of the textarea</li>
+</ul>
+
+                                            </td>
                                         </tr>
                                     </tbody>
                                 </table>
@@ -787,6 +923,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Registers the callback function for change events</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -797,6 +935,7 @@
                                             <td>Name</td>
                                                 <td>Type</td>
                                             <td>Optional</td>
+                                                <td>Description</td>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -811,6 +950,12 @@
                                             </td>
 
 
+                                            <td>
+                                                    <ul>
+<li>The callback function</li>
+</ul>
+
+                                            </td>
                                         </tr>
                                     </tbody>
                                 </table>
@@ -848,6 +993,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Registers the callback function for touched events</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -858,6 +1005,7 @@
                                             <td>Name</td>
                                                 <td>Type</td>
                                             <td>Optional</td>
+                                                <td>Description</td>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -872,6 +1020,12 @@
                                             </td>
 
 
+                                            <td>
+                                                    <ul>
+<li>The callback function</li>
+</ul>
+
+                                            </td>
                                         </tr>
                                     </tbody>
                                 </table>
@@ -909,6 +1063,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Sets the disabled state of the textarea</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -919,6 +1075,7 @@
                                             <td>Name</td>
                                                 <td>Type</td>
                                             <td>Optional</td>
+                                                <td>Description</td>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -933,6 +1090,12 @@
                                             </td>
 
 
+                                            <td>
+                                                    <ul>
+<li>The disabled state to set</li>
+</ul>
+
+                                            </td>
                                         </tr>
                                     </tbody>
                                 </table>
@@ -970,6 +1133,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>ControlValueAccessor implementation for writing values</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -979,6 +1144,7 @@
                                         <tr>
                                             <td>Name</td>
                                             <td>Optional</td>
+                                                <td>Description</td>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -990,6 +1156,12 @@
                                             </td>
 
 
+                                            <td>
+                                                    <ul>
+<li>The value to write to the textarea</li>
+</ul>
+
+                                            </td>
                                         </tr>
                                     </tbody>
                                 </table>
@@ -1035,6 +1207,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Static counter used to generate unique IDs for textarea instances</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1075,6 +1253,20 @@
                         <span class="accessor"><b>get</b><code>disabled()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>The disabled state of the textarea
+This can be controlled either directly or through form control binding.</p>
+</div>
+
+                                <div>
+                                </div>
+                                <div class="io-description">
+                                    <b>Returns : </b>    <code>boolean | null</code>
+
+                                </div>
+                        </td>
+                    </tr>
 
                 <tr>
                     <td class="col-md-4">
@@ -1134,6 +1326,20 @@
                         <span class="accessor"><b>get</b><code>readonly()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>The readonly state of the textarea
+with special styling.</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/dependencies.html

@@ -266,9 +266,9 @@
         <li>
             <b>@stackblitz/sdk</b> : 1.11.0</li>
         <li>
-            <b>@eui/styles</b> : 19.0.3-snapshot-1737728205029</li>
+            <b>@eui/styles</b> : 19.0.3</li>
         <li>
-            <b>@eui/ecl</b> : 19.0.3-snapshot-1737728205029</li>
+            <b>@eui/ecl</b> : 19.0.3</li>
         <li>
             <b>@eui/tools</b> : ^6.0.0</li>
     </ul>

package/docs/directives/AutoResizeDirective.html

@@ -113,6 +113,17 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>A directive that automatically adjusts the height of a textarea based on its content.</p>
+<p>The AutoResizeDirective automatically adjusts the height of a textarea element as the user types,
+ensuring that all content is visible without requiring manual resizing or scrolling.
+It supports minimum and maximum row constraints and can be enabled/disabled dynamically.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">```html
+&lt;textarea autoResize [minRows]=&quot;2&quot; [maxRows]=&quot;5&quot;&gt;&lt;/textarea&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-none"></code></pre></div>
+            </p>
 
 
             <p class="comment">
@@ -136,6 +147,10 @@
                         <td class="col-md-9"><code>textarea[autoResize]</code></td>
                     </tr>
 
+                    <tr>
+                        <td class="col-md-3">Standalone</td>
+                        <td class="col-md-9"><code>true</code></td>
+                    </tr>
 
 
 
@@ -378,6 +393,16 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Event handler for input events on the textarea.
+Triggers the resize calculation when the content changes.</p>
+</div>
+
+                    <div>
+                    </div>
+                </td>
+            </tr>
         </tbody>
     </table>
 </section>
@@ -417,6 +442,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Event handler for input events on the textarea.
+Triggers the resize calculation when the content changes.</p>
+</div>
 
                         <div class="io-description">
                             <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
@@ -450,7 +478,17 @@
 
             <tr>
                 <td class="col-md-4">
-                        <div class="io-description"><p>Calculates the height and set it, causing the textarea to resize.</p>
+                        <div class="io-description"><p>Calculates and sets the appropriate height for the textarea based on its content.
+This method creates a temporary clone of the textarea to measure the required height,
+taking into account minRows and maxRows constraints.</p>
+<p>The calculation process:</p>
+<ol>
+<li>Creates a hidden clone of the textarea</li>
+<li>Sets the clone&#39;s width to match the original</li>
+<li>Measures the required height based on content</li>
+<li>Applies maxRows constraint if specified</li>
+<li>Updates the original textarea&#39;s height</li>
+</ol>
 </div>
 
                         <div class="io-description">
@@ -484,6 +522,9 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
+                                <div class="io-description"><p>Sets the minimum number of rows for the textarea.
+This value determines the initial height of the textarea.</p>
+</div>
 
                                 <div class="io-description">
                                         <b>Parameters :</b>
@@ -493,6 +534,7 @@
                                                     <td>Name</td>
                                                         <td>Type</td>
                                                     <td>Optional</td>
+                                                        <td>Description</td>
                                                 </tr>
                                             </thead>
                                             <tbody>
@@ -507,6 +549,12 @@
                                                                 No
                                                         </td>
                                                         
+                                                            <td>
+                                                                    <ul>
+<li>The minimum number of rows to display</li>
+</ul>
+
+                                                            </td>
                                                     </tr>
                                             </tbody>
                                         </table>

package/docs/directives/EuiHasPermissionDirective.html

@@ -113,6 +113,26 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>A structural directive that conditionally renders content based on user permissions.
+Similar to *ngIf, but checks against a permission service to determine visibility.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">```html
+&lt;!-- Single permission check --&gt;
+&lt;div *euiHasPermission=&quot;[&#39;READ_USERS&#39;]&quot;&gt;
+  Content only visible to users with READ_USERS permission
+&lt;/div&gt;</code></pre></div><!-- Multiple permission check (AND operation) -->
+<div *euiHasPermission="['READ_USERS', 'WRITE_USERS']">
+  Content only visible to users with both permissions
+</div>
+```
+
+<p>The directive performs an AND operation when multiple permissions are provided,
+meaning all permissions must be granted for the content to be displayed.</p>
+
+            </p>
 
 
 
@@ -127,6 +147,10 @@
                         <td class="col-md-9"><code>[euiHasPermission]</code></td>
                     </tr>
 
+                    <tr>
+                        <td class="col-md-3">Standalone</td>
+                        <td class="col-md-9"><code>true</code></td>
+                    </tr>
 
 
 
@@ -289,6 +313,9 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
+                                <div class="io-description"><p>Sets the permissions required to display the content. Can be a single permission
+string or an array of permission strings.</p>
+</div>
 
                                 <div class="io-description">
                                         <b>Parameters :</b>
@@ -297,6 +324,7 @@
                                                 <tr>
                                                     <td>Name</td>
                                                     <td>Optional</td>
+                                                        <td>Description</td>
                                                 </tr>
                                             </thead>
                                             <tbody>
@@ -308,6 +336,12 @@
                                                                 No
                                                         </td>
                                                         
+                                                            <td>
+                                                                    <ul>
+<li>Permission or array of permissions to check</li>
+</ul>
+
+                                                            </td>
                                                     </tr>
                                             </tbody>
                                         </table>