@eui/components 19.1.1-snapshot-1740477848147 → 19.1.1-snapshot-1741264224607

package/docs/components/EuiListComponent.html

@@ -109,6 +109,26 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component that provides a navigable list implementation with keyboard interaction support.
+Works with Angular CDK&#39;s FocusKeyManager to enable keyboard navigation between list items.</p>
+<p>The component automatically manages focus between nested lists and supports rich content
+navigation. It can contain multiple EuiListItemComponents as children.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-list&gt;
+  &lt;eui-list-item&gt;First item&lt;/eui-list-item&gt;
+  &lt;eui-list-item&gt;Second item&lt;/eui-list-item&gt;
+  &lt;eui-list-item&gt;
+    Item with nested list
+    &lt;eui-list&gt;
+      &lt;eui-list-item&gt;Nested item 1&lt;/eui-list-item&gt;
+      &lt;eui-list-item&gt;Nested item 2&lt;/eui-list-item&gt;
+    &lt;/eui-list&gt;
+  &lt;/eui-list-item&gt;
+&lt;/eui-list&gt;</code></pre></div>
+    </p>
 
 
     <p class="comment">
@@ -299,6 +319,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Binds the &#39;list&#39; ARIA role to the host element for accessibility.
+This informs screen readers that this component functions as a list.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -320,6 +347,14 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Binds the tabIndex attribute to the host element.
+Controls whether the list can receive keyboard focus.
+Set to &#39;0&#39; for top-level lists and &#39;-1&#39; for nested lists.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -341,6 +376,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>CSS class binding that applies the &#39;eui-list&#39; class to the host element.
+This class applies the basic styling for the list component.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -372,6 +414,44 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                        <div class="io-description"><p>Handles keyboard events for navigating the list.
+Supports Enter key for selection and arrow keys for navigation.</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 to handle</li>
+</ul>
+
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                </td>
+            </tr>
         </tbody>
     </table>
 </section>
@@ -402,6 +482,10 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Manages focus state of rich content navigation within list items.
+Handles the focus transition between list item elements and their navigable content.
+Called when right/left arrow keys are pressed on items with navigable content.</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>
@@ -442,6 +526,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Handles keyboard events for navigating the list.
+Supports Enter key for selection and arrow keys for navigation.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -452,6 +539,7 @@
                                             <td>Name</td>
                                                 <td>Type</td>
                                             <td>Optional</td>
+                                                <td>Description</td>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -466,6 +554,12 @@
                                             </td>
 
 
+                                            <td>
+                                                    <ul>
+<li>The keyboard event to handle</li>
+</ul>
+
+                                            </td>
                                         </tr>
                                     </tbody>
                                 </table>
@@ -515,6 +609,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Collection of all list item components that are children of this list.
+Includes items from nested lists due to the &#39;descendants: true&#39; option.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -551,6 +652,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Binds the &#39;list&#39; ARIA role to the host element for accessibility.
+This informs screen readers that this component functions as a list.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -582,6 +690,14 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Binds the tabIndex attribute to the host element.
+Controls whether the list can receive keyboard focus.
+Set to &#39;0&#39; for top-level lists and &#39;-1&#39; for nested lists.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -605,6 +721,20 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>CSS class binding that applies the &#39;eui-list&#39; class to the host element.
+This class applies the basic styling for the list component.</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/EuiListItemComponent.html

@@ -109,6 +109,21 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component that represents a single item within an EuiList.
+Implements FocusableOption and Highlightable for keyboard navigation and accessibility.</p>
+<p>This component is designed to work with the EuiListComponent as part of a navigable list.
+It supports various display states through the BaseStatesDirective, and can contain
+nested list components, icons, labels, and custom templates.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-list&gt;
+  &lt;eui-list-item&gt;Simple item&lt;/eui-list-item&gt;
+  &lt;eui-list-item [euiPrimary]=&quot;true&quot;&gt;Primary item&lt;/eui-list-item&gt;
+  &lt;eui-list-item [isActive]=&quot;true&quot;&gt;Active item&lt;/eui-list-item&gt;
+&lt;/eui-list&gt;</code></pre></div>
+    </p>
 
 
     <p class="comment">
@@ -517,6 +532,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Programmatically triggers a click event on the list item element.
+Typically, invoked when the user presses Enter while the item is focused.</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>
@@ -550,6 +568,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Sets focus on the list item element.
+Used by the FocusKeyManager to handle keyboard navigation within the list.</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>
@@ -583,6 +604,10 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Applies active styling to the list item.
+Called by the FocusKeyManager when this item becomes the active item in the list.
+Sets the isActive flag to true, which adds the &#39;eui-list-item--active&#39; CSS class.</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>
@@ -616,6 +641,10 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Removes active styling from the list item.
+Called by the FocusKeyManager when another item becomes the active item.
+Sets the isActive flag to false, removing the &#39;eui-list-item--active&#39; CSS class.</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>

package/docs/components/EuiMessageBoxComponent.html

@@ -109,6 +109,38 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component for displaying modal message boxes with structured content and customizable actions.
+This component provides a user-friendly interface for confirmation dialogs, alerts, and other
+types of modal messages.</p>
+<p>The component supports various styling variants through the BaseStatesDirective hostDirective,
+customizable buttons, and configurable behavior for dialog actions.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">// Basic usage with title and default buttons:
+&lt;eui-message-box
+  title=&quot;Confirmation Required&quot;
+  (accept)=&quot;onConfirm()&quot;
+  (dismiss)=&quot;onCancel()&quot;&gt;
+  Are you sure you want to proceed with this action?
+&lt;/eui-message-box&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-html">// Custom styled message box with modified button labels:
+&lt;eui-message-box
+  title=&quot;Warning&quot;
+  euiWarning
+  acceptLabel=&quot;Proceed Anyway&quot;
+  dismissLabel=&quot;Go Back&quot;
+  [isDraggable]=&quot;true&quot;&gt;
+  This action cannot be undone.
+&lt;/eui-message-box&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-html">// Message box with custom footer content:
+&lt;eui-message-box title=&quot;Custom Actions&quot;&gt;
+  Select an option below.
+  &lt;eui-message-box-footer&gt;
+    &lt;button eui-button (click)=&quot;optionOne()&quot;&gt;Option 1&lt;/button&gt;
+    &lt;button eui-button (click)=&quot;optionTwo()&quot;&gt;Option 2&lt;/button&gt;
+  &lt;/eui-message-box-footer&gt;
+&lt;/eui-message-box&gt;</code></pre></div>
+    </p>
 
 
     <p class="comment">
@@ -327,6 +359,8 @@
 
                 <tr>
                     <td class="col-md-4">
+                            <div class="io-description"><p>Creates an instance of EuiMessageBoxComponent.</p>
+</div>
                             <div>
                                     <b>Parameters :</b>
                                     <table class="params">
@@ -335,6 +369,7 @@
                                                 <td>Name</td>
                                                     <td>Type</td>
                                                 <td>Optional</td>
+                                                    <td>Description</td>
                                             </tr>
                                         </thead>
                                         <tbody>
@@ -349,6 +384,12 @@
                                                             No
                                                     </td>
                                                     
+                                                        <td>
+                                                                <ul>
+<li>Reference to the view container for creating portals</li>
+</ul>
+
+                                                        </td>
                                                 </tr>
                                                 <tr>
                                                         <td>euiMessageBoxService</td>
@@ -361,6 +402,12 @@
                                                             No
                                                     </td>
                                                     
+                                                        <td>
+                                                                <ul>
+<li>Service used to open and close message boxes</li>
+</ul>
+
+                                                        </td>
                                                 </tr>
                                                 <tr>
                                                         <td>baseStatesDirective</td>
@@ -373,6 +420,12 @@
                                                             No
                                                     </td>
                                                     
+                                                        <td>
+                                                                <ul>
+<li>Directive that provides styling state management for the component</li>
+</ul>
+
+                                                        </td>
                                                 </tr>
                                         </tbody>
                                     </table>
@@ -404,6 +457,12 @@
                         <i>Default value : </i><code>&#x27;eui.OK&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Label for the accept/confirm button. Can be a translation key.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -425,6 +484,12 @@
                         <i>Default value : </i><code>&#x27;eui.CANCEL&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Label for the dismiss/cancel button. Can be a translation key.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -446,6 +511,12 @@
                         <i>Default value : </i><code>&#x27;eui-dialog&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Data attribute for e2e testing purposes.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -467,6 +538,12 @@
                         <i>Default value : </i><code>true</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Whether to show the accept/confirm button.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -488,6 +565,12 @@
                         <i>Default value : </i><code>true</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Whether to show the dismiss/cancel button.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -509,6 +592,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Whether to remove padding from the message box body.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -530,6 +619,12 @@
                         <i>Default value : </i><code>&#x27;auto&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Height of the message box.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -551,6 +646,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Whether the message box can be dragged around the screen.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -572,6 +673,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Whether to manually handle closing the dialog on accept button click.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -593,6 +700,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Whether to manually handle closing the dialog on close button click.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -614,6 +727,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Whether to manually handle closing the dialog on dismiss button click.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -630,6 +749,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Title text displayed in the message box header.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -651,6 +776,12 @@
                         <i>Default value : </i><code>&#x27;33rem&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Width of the message box.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -670,6 +801,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Event emitted when the accept/confirm button is clicked.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -686,6 +823,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Event emitted when the dismiss/cancel button is clicked.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -702,6 +845,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Event emitted when the message box closes.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -718,6 +867,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Event emitted when the message box opens.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -752,7 +907,8 @@
 
             <tr>
                 <td class="col-md-4">
-                        <div class="io-description"><p>Close a Message Box.</p>
+                        <div class="io-description"><p>Closes the currently open message box.
+This method uses the EuiMessageBoxService to close the dialog.</p>
 </div>
 
                         <div class="io-description">
@@ -800,7 +956,8 @@
 
             <tr>
                 <td class="col-md-4">
-                        <div class="io-description"><p>Open a Message Box.</p>
+                        <div class="io-description"><p>Opens the message box with the current configuration.
+This method configures and displays the message box using the EuiMessageBoxService.</p>
 </div>
 
                         <div class="io-description">
@@ -836,6 +993,11 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description">- Directive that provides styling state management for the component</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -858,6 +1020,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Content that will be displayed in the message box body.
+Can be either a simple string message or a TemplatePortal for more complex content.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -889,6 +1058,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Reference to any custom footer content provided through the eui-message-box-footer directive.
+Forward reference is used to resolve the circular dependency between the component and directive.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -920,6 +1096,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Reference to the template containing the message box content.
+This will be used to create a portal for the content section.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -951,6 +1134,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Reference to the template containing the message box footer.
+This will be used to create a portal for the footer section.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>