@eui/ecl 19.3.1-snapshot-1750853544438 → 19.3.1-snapshot-1750923072435

package/docs/components/EclMegaMenuComponent.html

@@ -109,6 +109,16 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>The &#39;eclMegaMenu&#39; is an advanced navigation component designed for complex sites with deep hierarchies.
+It can provide descriptive text for first level items, accommodate up to three levels of navigation,
+and additionally allows a featured column that can be used to either promote parent-page specific or site-wide pages,
+hidden deep into the lower levels of the hierarchy.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -546,6 +556,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>The event that is emitted, when a menu item is selected.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -599,6 +615,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>The &#39;role&#39; attribute of the component is set to &#39;navigation&#39;. should not be changed.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -646,6 +668,13 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                        <div class="io-description"><p>When clicking outside the menu - close any expanded item.</p>
+</div>
+
+                </td>
+            </tr>
         </tbody>
     </table>
 </section>
@@ -685,6 +714,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>When clicking outside the menu - close any expanded item.</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>
@@ -716,6 +747,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Used for mobile menu - when user clicks on &#39;Back&#39; button. Returns to the previous state.</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>
@@ -979,6 +1012,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>If the menu is in mobile mode.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -999,6 +1038,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>If the menu is expanded in mobile mode.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1019,6 +1064,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>When a menu item is expanded and has only one panel (one sub-level).</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1039,6 +1090,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>If the menu is open, when in mobile mode.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1059,6 +1116,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Used in mobile mode - when the start panel is open (i.e. the hamburger button is clicked).</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1079,6 +1142,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>If a menu item is expanded and has two panels/levels displayed.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1131,6 +1200,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Used to position the overlay, when a menu item is expanded.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1167,6 +1242,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>The &#39;role&#39; attribute of the component is set to &#39;navigation&#39;. should not be changed.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>

package/docs/components/EclMegaMenuFeaturedComponent.html

@@ -109,6 +109,13 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>This component represents the featured items panel.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -469,11 +476,17 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Calculates and returns the height of the component. The total height of all the list items.</p>
+</div>
 
                         <div class="io-description">
                             <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
 
                         </div>
+                            <div class="io-description">
+                                <p>the height of the component</p>
+
+                            </div>
                 </td>
             </tr>
         </tbody>

package/docs/components/EclMegaMenuInfoComponent.html

@@ -109,6 +109,13 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component for displaying some custom information for the current menu item.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -425,6 +432,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies custom styles for info component.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -451,6 +464,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Sets the height of the component.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -477,6 +496,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Sets the opacity of the component.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -510,11 +535,17 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Used to calculate the height of the parent element.</p>
+</div>
 
                         <div class="io-description">
                             <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
 
                         </div>
+                            <div class="io-description">
+                                <p>the height of the component.</p>
+
+                            </div>
                 </td>
             </tr>
         </tbody>
@@ -619,6 +650,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Sets the height of the component.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -655,6 +692,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Sets the opacity of the component.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -708,6 +751,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>When the info panel contains link.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -731,6 +780,17 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Applies custom styles for info component.</p>
+</div>
+
+                                <div class="io-description">
+                                    <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>

package/docs/components/EclMegaMenuItemComponent.html

@@ -109,6 +109,13 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>This component represents a mega menu item. Adds functionality and styling, according to ECL standards.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -555,6 +562,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Used in case user wants to set some custom attributes for the anchr tag.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -796,6 +809,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Returns current menu item classes, depending on item&#39;s state (it&#39;s properties&#39; values).</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -822,6 +841,13 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                        <div class="io-description"><p>On resize - calculate the size of the dropdown and wrapper (if item is expanded).</p>
+</div>
+
+                </td>
+            </tr>
         </tbody>
     </table>
 </section>
@@ -852,6 +878,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Set the focus on the sub element - link or button.</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>
@@ -944,6 +972,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Manage styling and functionality for children and siblings, when item is clicked.</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>
@@ -975,6 +1005,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Manage styling and functionality when item is collapsed.</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>
@@ -1015,6 +1047,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>On resize - calculate the size of the dropdown and wrapper (if item is expanded).</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>
@@ -1145,6 +1179,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Component, that consist of some custom info, text or whatever. When the menu item has no children, but still some
+ sub container is displayed.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1176,6 +1217,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Element, that would contain some info about the current item or it&#39;s children. First in the container.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1207,6 +1254,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>The wrapper around the subitems, if any.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1238,6 +1291,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Element, that holds the sub items of the current menu items.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1391,6 +1450,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>This elemend hold some extra content, different from subitems. For example just some text or some custom links, etc.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1474,6 +1539,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Element, tat is rendered if the menu item has children.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1505,6 +1576,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Actual link of the menu item. If the menu has no children, but redirects/loads another page.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1580,6 +1657,17 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Returns current menu item classes, depending on item&#39;s state (it&#39;s properties&#39; values).</p>
+</div>
+
+                                <div class="io-description">
+                                    <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>