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

package/docs/components/EuiDiscussionThreadComponent.html

@@ -109,6 +109,27 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component for displaying a discussion thread or conversation timeline.
+This component renders a list of discussion thread items in a structured format,
+with support for titles, subtitles, and tooltips for additional context.</p>
+<p>The component applies the ARIA role &#39;list&#39; to the host element to maintain proper
+accessibility for screen readers.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">// Basic usage with thread items:
+&lt;eui-discussion-thread
+  [items]=&quot;discussionItems&quot;
+  titleLabel=&quot;Discussion&quot;
+  subTitleLabel=&quot;Recent activity&quot;&gt;
+&lt;/eui-discussion-thread&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-html">// With tooltip:
+&lt;eui-discussion-thread
+  [items]=&quot;discussionItems&quot;
+  titleLabel=&quot;Comments&quot;
+  tooltip=&quot;Click on a comment to view details&quot;&gt;
+&lt;/eui-discussion-thread&gt;</code></pre></div>
+    </p>
 
 
 
@@ -261,6 +282,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Array of discussion thread items to be displayed.
+Each item should conform to the EuiDiscussionThreadItem interface.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -277,6 +305,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>The subtitle label for the discussion thread, typically used to provide
+additional context or categorization.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -293,6 +328,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>The main title label for the discussion thread.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -309,6 +350,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Tooltip text to display when hovering over the discussion thread.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -337,6 +384,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>ARIA role for the host element to ensure proper accessibility.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -372,6 +425,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Track by function for ngFor directive to improve rendering performance.
+Uses the id property of each discussion thread item.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -382,6 +438,7 @@
                                             <td>Name</td>
                                                 <td>Type</td>
                                             <td>Optional</td>
+                                                <td>Description</td>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -396,6 +453,12 @@
                                             </td>
 
 
+                                            <td>
+                                                    <ul>
+<li>The index of the current item in the array</li>
+</ul>
+
+                                            </td>
                                         </tr>
                                         <tr>
                                                 <td>item</td>
@@ -408,6 +471,12 @@
                                             </td>
 
 
+                                            <td>
+                                                    <ul>
+<li>The current discussion thread item</li>
+</ul>
+
+                                            </td>
                                         </tr>
                                     </tbody>
                                 </table>
@@ -417,7 +486,8 @@
 
                         </div>
                             <div class="io-description">
-                                
+                                <p>The unique identifier for the item</p>
+
                             </div>
                 </td>
             </tr>
@@ -462,6 +532,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>ARIA role for the host element to ensure proper accessibility.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>

package/docs/components/EuiDiscussionThreadItemComponent.html

@@ -109,6 +109,35 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component for displaying individual items within a discussion thread.
+This component represents a single entry in a conversation or thread timeline,
+displaying information such as the author, date, content body, and optional tooltip.</p>
+<p>The component applies the ARIA role &#39;listitem&#39; to maintain proper accessibility
+and includes support for styling variants through the typeClass property.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">// Basic usage within a discussion thread:
+&lt;eui-discussion-thread&gt;
+  &lt;eui-discussion-thread-item
+    id=&quot;msg-123&quot;
+    typeClass=&quot;info&quot;
+    date=&quot;2023-10-15T14:30:00&quot;
+    author=&quot;John Doe&quot;
+    body=&quot;This is a comment in the discussion.&quot;
+    tooltip=&quot;Posted yesterday&quot;&gt;
+  &lt;/eui-discussion-thread-item&gt;
+&lt;/eui-discussion-thread&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-html">// With different type classes for styling:
+&lt;eui-discussion-thread-item
+  id=&quot;msg-456&quot;
+  typeClass=&quot;warning&quot;
+  date=&quot;2023-10-16T09:15:00&quot;
+  author=&quot;Jane Smith&quot;
+  body=&quot;Important note about this topic.&quot;
+  [isOdd]=&quot;true&quot;&gt;
+&lt;/eui-discussion-thread-item&gt;</code></pre></div>
+    </p>
 
 
 
@@ -267,6 +296,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Name or identifier of the author who created the item.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -283,6 +318,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Content body of the discussion thread item.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -299,6 +340,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Date when the thread item was created or modified.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -315,6 +362,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Unique identifier for the discussion thread item.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -331,6 +384,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Indicates if this item is in an odd position in the list.
+Used for alternating styling patterns within the thread.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -347,6 +407,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Tooltip text to display additional information when hovering over the item.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -363,6 +429,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Type class defining the visual style of the item (e.g., &#39;info&#39;, &#39;warning&#39;, &#39;error&#39;).
+This affects the color scheme applied to the item.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -391,6 +464,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>ARIA role for the host element to ensure proper accessibility.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -412,6 +491,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Sets CSS classes on the host element based on the typeClass property.
+This helps maintain consistent styling with the parent theme variant.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -457,6 +543,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>ARIA role for the host element to ensure proper accessibility.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -480,6 +572,20 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Sets CSS classes on the host element based on the typeClass property.
+This helps maintain consistent styling with the parent theme variant.</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>
@@ -497,6 +603,18 @@
                         <span class="accessor"><b>get</b><code>isOdd()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Indicates if this item is in an odd position in the list.
+Used for alternating styling patterns within the thread.</p>
+</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/EuiIconToggleComponent.html

@@ -109,6 +109,22 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component that provides a toggleable icon button with accessibility support.
+Functions as a switch control that can be toggled between on/off states,
+displaying different icons based on the current state.</p>
+<p>This component handles keyboard navigation, focus management, and proper
+ARIA attributes for accessibility compliance.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-icon-toggle
+  [isChecked]=&quot;true&quot;
+  iconSvgNameOn=&quot;check&quot;
+  iconSvgNameOff=&quot;close&quot;
+  (toggle)=&quot;handleToggle($event)&quot;&gt;
+&lt;/eui-icon-toggle&gt;</code></pre></div>
+    </p>
 
 
     <p class="comment">
@@ -146,6 +162,12 @@
             </tr>
 
 
+            <tr>
+                <td class="col-md-3">imports</td>
+                <td class="col-md-9">
+                                <code><a href="../modules/EuiIconModule.html" target="_self" >EuiIconModule</a></code>
+                </td>
+            </tr>
 
             <tr>
                 <td class="col-md-3">styleUrls</td>
@@ -330,6 +352,12 @@
                         <i>Default value : </i><code>&#x27;Toggle icon&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Accessible label for screen readers.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -351,6 +379,12 @@
                         <i>Default value : </i><code>&#x27;eui-icon-toggle&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Data attribute for e2e testing.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -372,6 +406,12 @@
                         <i>Default value : </i><code>&#x27;neutral&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Color of the icon when toggle is in the OFF state.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -393,6 +433,12 @@
                         <i>Default value : </i><code>&#x27;accent&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Color of the icon when toggle is in the ON state.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -409,6 +455,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Icon to display when toggle is in the OFF state.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -425,6 +477,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Icon to display when toggle is in the ON state.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -446,6 +504,12 @@
                         <i>Default value : </i><code>&#x27;m&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Size of the icon (s, m, l, xl).</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -467,6 +531,12 @@
                         <i>Default value : </i><code>&#x60;eui-icon-toggle-${uniqueId()}&#x60;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Unique identifier for the component.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -488,6 +558,13 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Whether the toggle is in the checked/on state.
+Bound to aria-checked attribute for accessibility.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -504,6 +581,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Whether the toggle is read-only (cannot be interacted with).
+When true, tabindex is set to -1 and clicking will not change state.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -525,6 +609,12 @@
                         <i>Default value : </i><code>&#x27;i&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Keyboard shortcut key.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -546,6 +636,12 @@
                         <i>Default value : </i><code>&#x27;0&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Tab order value for keyboard navigation.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -565,6 +661,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Event emitted when the toggle state changes.
+Emits the new state (true = checked, false = unchecked).</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -639,6 +742,14 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                        <div class="io-description"><p>Host listener that handles click events on the component.
+Triggers the toggle action if the component is not read-only.</p>
+</div>
+
+                </td>
+            </tr>
         </tbody>
     </table>
     <table class="table table-sm table-bordered">
@@ -666,6 +777,44 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                        <div class="io-description"><p>Host listener that handles keyboard events.
+Triggers the toggle action on Enter or Space key press.</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>

package/docs/components/EuiLanguageSelectorComponent.html

@@ -118,6 +118,7 @@
                 <code>OnInit</code>
                 <code>AfterViewInit</code>
                 <code>OnDestroy</code>
+                <code>OnChanges</code>
     </p>
 
 
@@ -405,11 +406,6 @@
 
                     </td>
                 </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Default value : </i><code>&#x27;Change Language&#x27;</code>
-                    </td>
-                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">