@eui/components 19.0.3 → 19.0.4

package/docs/components/EuiChipComponent.html

@@ -109,6 +109,15 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Chips are compact elements that allow users to enter information, select a choice, filter content or trigger an action.
+The eui-chip component can also be displayed dynamically as a group of multiple interactive elements, see eui-chip-list.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html"></code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-chip&gt;Chip label&lt;/eui-chip&gt;</code></pre></div><p>See <a href="https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-chip">https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-chip</a>.</p>
+
+    </p>
 
 
     <p class="comment">
@@ -255,7 +264,7 @@
                                 <a href="#isFilled" >isFilled</a>
                             </li>
                             <li>
-                                <a href="#isSquared" >isSquared</a>
+                                <a href="#isSquared" class="deprecated-name">isSquared</a>
                             </li>
                             <li>
                                 <a href="#tooltipMessage" >tooltipMessage</a>
@@ -393,6 +402,12 @@
                         <i>Default value : </i><code>&#x27;Chip content&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Sets the <code>aria-label</code> attribute for the host element.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -421,6 +436,12 @@
     }</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Sets the data of the chip like tooltip configuration.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -442,6 +463,12 @@
                         <i>Default value : </i><code>&#x27;eui-chip&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Sets the <code>data-e2e</code> attribute for the host element.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -463,6 +490,12 @@
                         <i>Default value : </i><code>null</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Sets the euiInternalId of the chip.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -479,6 +512,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Sets the id of the chip.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -500,6 +539,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Wether the chip can be removed.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -521,6 +566,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Wether the chip is filled with color.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -558,6 +609,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Sets the label of the tooltip to diaply on hover.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -577,6 +634,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Event emitted when the chip is removed.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -604,6 +667,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Sets the <code>role</code> attribute for the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -625,6 +694,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Sets the <code>class</code> attribute for the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -660,6 +735,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Remove chip handler</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -670,6 +747,7 @@
                                             <td>Name</td>
                                                 <td>Type</td>
                                             <td>Optional</td>
+                                                <td>Description</td>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -684,6 +762,10 @@
                                             </td>
 
 
+                                            <td>
+                                                    <p>Click event</p>
+
+                                            </td>
                                         </tr>
                                     </tbody>
                                 </table>
@@ -786,6 +868,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Icon declares by user in the chip</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -822,6 +910,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Sets the <code>role</code> attribute for the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -845,6 +939,19 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Sets the <code>class</code> attribute for the host element.</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>

package/docs/components/EuiInputCheckboxComponent.html

@@ -109,6 +109,17 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Angular component that provides a custom checkbox input implementation.
+Extends <a href="../directives/InputDirective.html">InputDirective</a> and implements form control functionality.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;input euiInputCheckBox
+       [(ngModel)]=&quot;isChecked&quot;
+       [indeterminate]=&quot;isIndeterminate&quot;
+       [isInvalid]=&quot;hasError&quot;&gt;</code></pre></div>
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -149,6 +160,10 @@
                 <td class="col-md-9"><code>input[euiInputCheckBox]</code></td>
             </tr>
 
+            <tr>
+                <td class="col-md-3">standalone</td>
+                <td class="col-md-9"><code>true</code></td>
+            </tr>
 
 
             <tr>
@@ -413,6 +428,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Controls the checked state of the checkbox.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -431,10 +452,9 @@
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <div class="io-description"><p>Whether the checkbox is indeterminate. This is also known as &quot;mixed&quot; mode and can be used to
-represent a checkbox with three states, e.g. a checkbox that represents a nested list of
-checkable items. Note that whenever checkbox is manually clicked, indeterminate is immediately
-set to false.</p>
+                        <div class="io-description"><p>Controls the indeterminate (mixed) state of the checkbox.
+When true, the checkbox appears in an indeterminate state.
+This state is automatically cleared when the checkbox is clicked.</p>
 </div>
                     </td>
                 </tr>
@@ -454,6 +474,12 @@ set to false.</p>
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Controls the invalid state of the checkbox. Used for displaying validation errors.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -565,7 +591,7 @@ set to false.</p>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <div class="io-description"><p>Event emitted when the checkbox <code>indeterminate</code> value changes.</p>
+                        <div class="io-description"><p>Event emitter that fires when the indeterminate state changes.</p>
 </div>
                     </td>
                 </tr>
@@ -617,6 +643,13 @@ set to false.</p>
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Gets the CSS classes for the checkbox component.
+Combines base classes with validation state classes.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -641,13 +674,50 @@ set to false.</p>
             </tr>
             <tr>
                 <td class="col-md-4">
-<code>change(checked)</code>
+<code>change(checked: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank">boolean</a>)</code>
                 </td>
             </tr>
 
 
 
 
+            <tr>
+                <td class="col-md-4">
+                        <div class="io-description"><p>Event handler for checkbox change events.</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>checked</td>
+
+                                            <td>
+                                                    No
+                                            </td>
+
+
+                                            <td>
+                                                    <ul>
+<li>The new checked state</li>
+</ul>
+
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                </td>
+            </tr>
         </tbody>
     </table>
     <table class="table table-sm table-bordered">
@@ -675,6 +745,44 @@ set to false.</p>
 
 
 
+            <tr>
+                <td class="col-md-4">
+                        <div class="io-description"><p>Event handler for space key press.
+Prevents space key action when checkbox 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>
@@ -889,6 +997,9 @@ set to false.</p>
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Implements ControlValueAccessor writeValue method.
+Updates the checked state of the checkbox.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -899,6 +1010,7 @@ set to false.</p>
                                             <td>Name</td>
                                                 <td>Type</td>
                                             <td>Optional</td>
+                                                <td>Description</td>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -913,6 +1025,12 @@ set to false.</p>
                                             </td>
 
 
+                                            <td>
+                                                    <ul>
+<li>The value to write</li>
+</ul>
+
+                                            </td>
                                         </tr>
                                     </tbody>
                                 </table>
@@ -1009,6 +1127,20 @@ set to false.</p>
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Gets the CSS classes for the checkbox component.
+Combines base classes with 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>
@@ -1028,12 +1160,13 @@ set to false.</p>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-description"><p>Whether the checkbox is indeterminate. This is also known as &quot;mixed&quot; mode and can be used to
-represent a checkbox with three states, e.g. a checkbox that represents a nested list of
-checkable items. Note that whenever checkbox is manually clicked, indeterminate is immediately
-set to false.</p>
+                                <div class="io-description"><p>Controls the indeterminate (mixed) state of the checkbox.
+When true, the checkbox appears in an indeterminate state.
+This state is automatically cleared when the checkbox is clicked.</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>
 
@@ -1099,6 +1232,19 @@ set to false.</p>
                         <span class="accessor"><b>get</b><code>isInvalid()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Controls the invalid state of the checkbox. Used for displaying validation errors.</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">
@@ -1158,6 +1304,19 @@ set to false.</p>
                         <span class="accessor"><b>get</b><code>checked()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Controls the checked state of the checkbox.</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">

package/docs/components/EuiInputGroupAddOnComponent.html

@@ -109,6 +109,24 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>A component that serves as a container for input group add-on items.
+Can be used either as an attribute selector on a div or as a custom element.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">As an attribute
+```html
+&lt;div euiInputGroupAddOn&gt;
+  &lt;div euiInputGroupAddOnItem&gt;Item 1&lt;/div&gt;
+  &lt;div euiInputGroupAddOnItem&gt;Item 2&lt;/div&gt;
+&lt;/div&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-none">As an element
+```html
+&lt;eui-input-group-addon&gt;
+  &lt;eui-input-group-addon-item&gt;Item 1&lt;/eui-input-group-addon-item&gt;
+  &lt;eui-input-group-addon-item&gt;Item 2&lt;/eui-input-group-addon-item&gt;
+&lt;/eui-input-group-addon&gt;</code></pre></div>
+    </p>
 
 
 
@@ -134,6 +152,10 @@
                 <td class="col-md-9"><code>div[euiInputGroupAddOn], eui-input-group-addon</code></td>
             </tr>
 
+            <tr>
+                <td class="col-md-3">standalone</td>
+                <td class="col-md-9"><code>true</code></td>
+            </tr>
 
 
             <tr>

package/docs/components/EuiInputGroupAddOnItemComponent.html

@@ -109,6 +109,18 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>A component that represents an individual item within an input group add-on.
+Can be used either as an attribute selector on a div or as a custom element.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">As an attribute
+```html
+&lt;div euiInputGroupAddOnItem&gt;Content&lt;/div&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-none">As an element
+```html
+&lt;eui-input-group-addon-item&gt;Content&lt;/eui-input-group-addon-item&gt;</code></pre></div>
+    </p>
 
 
 
@@ -134,6 +146,10 @@
                 <td class="col-md-9"><code>div[euiInputGroupAddOnItem], eui-input-group-addon-item</code></td>
             </tr>
 
+            <tr>
+                <td class="col-md-3">standalone</td>
+                <td class="col-md-9"><code>true</code></td>
+            </tr>
 
 
             <tr>
@@ -286,6 +302,20 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Getter that returns the CSS class for the component.
+Bound to the host element&#39;s class attribute.</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>

package/docs/components/EuiInputGroupComponent.html

@@ -109,6 +109,23 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>A component that serves as the main container for input group elements.
+Can only be used as an attribute selector on a div element.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">```html
+&lt;div euiInputGroup&gt;
+  &lt;eui-input-group-addon&gt;
+    &lt;eui-input-group-addon-item&gt;Prefix&lt;/eui-input-group-addon-item&gt;
+  &lt;/eui-input-group-addon&gt;
+  &lt;input type=&quot;text&quot;&gt;
+  &lt;eui-input-group-addon&gt;
+    &lt;eui-input-group-addon-item&gt;Suffix&lt;/eui-input-group-addon-item&gt;
+  &lt;/eui-input-group-addon&gt;
+&lt;/div&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-none"></code></pre></div>
+    </p>
 
 
 
@@ -134,6 +151,10 @@
                 <td class="col-md-9"><code>div[euiInputGroup]</code></td>
             </tr>
 
+            <tr>
+                <td class="col-md-3">standalone</td>
+                <td class="col-md-9"><code>true</code></td>
+            </tr>
 
 
             <tr>
@@ -315,6 +336,20 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Getter that returns the CSS class for the component.
+Bound to the host element&#39;s class attribute.</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>