@eui/ecl 19.3.1-snapshot-1749804823673 → 19.3.1-snapshot-1750681705601

package/docs/components/EclInpageNavigationComponent.html

@@ -109,6 +109,16 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>The in-page navigation is a vertical menu containing (anchored) links to H2-headings on long content pages.
+It gives the user an overview of the page contents and has a fixed position (does not move while scrolling) at either the left
+side of a page on desktop or top-bar on mobile. This component helps users scan of the page quickly contents and may potentially
+reduce vertical scrolling, allowing users to easily jump straight to the segment of the page.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -511,6 +521,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Used to calculate component&#39;s position.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -527,6 +543,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Sets the offset from the top of the page (for example if there is a toolbar or header). Used to calculate scrolling behaviour.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -594,6 +616,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>This event will be emitted, when onscroll a new section becomes active.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -626,6 +654,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>On mobile view - handle the dropdown toggle.</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>
@@ -657,6 +687,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Dropdown keyboard navigation on mobile view.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -885,6 +917,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Used for the mobile view, where user can select a section from the dropdown.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1114,6 +1152,17 @@
                         <span class="accessor"><b>get</b><code>sizeIcon()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>the size of the arrow-down icon, used in mobile view. There are different sizes for EC and EU themes.</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/EclInpageNavigationItemComponent.html

@@ -109,6 +109,13 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Represent a single navigation item. contains the link, that activates/scrolls to the new current paragraph of the page.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -400,6 +407,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>The label that is displayed in the items list.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -483,6 +496,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Emitted when on keyboard navigation, user clicks the arrow-down.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -499,6 +518,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Emitted when on keyboard navigation, user clicks the arrow-up.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -515,6 +540,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Emited when user clicks on the item.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -531,6 +562,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Emitted when on keyboard navigation, user clicks the ENTER.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -547,6 +584,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Emitted when on keyboard navigation, user clicks the TAB.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -574,6 +617,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>The role of the component is &#39;listitem&#39;, should not be changed.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1108,6 +1157,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>The role of the component is &#39;listitem&#39;, should not be changed.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1131,6 +1186,17 @@
                         <span class="accessor"><b>get</b><code>sectionElement()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Returns page element/paragraph, that is associated with this item from the navigation list.</p>
+</div>
+
+                                <div class="io-description">
+                                    <b>Returns : </b>    <code>HTMLElement</code>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>

package/docs/components/EclRatingFieldComponent.html

@@ -109,6 +109,14 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component representing rating field, displayed with stars.
+Typically used when the user needs to evaluate something.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -293,19 +301,6 @@
     </table>
 </section>
 
-    <section data-compodoc="block-constructor">
-    <h3 id="constructor">Constructor</h3>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-<code>constructor()</code>
-                    </td>
-                </tr>
-
-            </tbody>
-        </table>
-</section>
 
     <section data-compodoc="block-inputs">
     <h3 id="inputs">Inputs</h3>
@@ -323,6 +318,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Can be used to set disabled status.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -344,6 +345,12 @@
                         <i>Default value : </i><code>&#x27;rating&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Name of the radio group. Also used for creating id for each radio button.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -365,6 +372,12 @@
                         <i>Default value : </i><code>5</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>How many stars should the rating have.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -381,6 +394,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>The initial value, if any.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -448,6 +467,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>The event to be emitted when rating is changed.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -470,6 +495,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the base class <code>ecl-rating-field</code> to the host element. Applies &#39;ecl-rating-field--disabled&#39; class on condition.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -503,6 +534,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Method that sets the new rating and emit &#39;ratingChange&#39; event, that includes the new rating number.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -513,6 +546,7 @@
                                             <td>Name</td>
                                                 <td>Type</td>
                                             <td>Optional</td>
+                                                <td>Description</td>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -527,6 +561,12 @@
                                             </td>
 
 
+                                            <td>
+                                                    <ul>
+<li>the new rating</li>
+</ul>
+
+                                            </td>
                                         </tr>
                                     </tbody>
                                 </table>
@@ -686,6 +726,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Disable/enable component.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -747,6 +789,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Informs the component of any changes in the parent (ControlValueAccessor). Sets the new value for the &#39;rating&#39; property.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -867,6 +911,17 @@
                         <span class="accessor"><b>get</b><code>numbers()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Array of numbers, from 1 to &#39;numberOfStars&#39;</p>
+</div>
+
+                                <div class="io-description">
+                                    <b>Returns : </b>    <code>Array&lt;number&gt;</code>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>
@@ -884,6 +939,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 the base class <code>ecl-rating-field</code> to the host element. Applies &#39;ecl-rating-field--disabled&#39; class on condition.</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/EclSearchFormComponent.html

@@ -109,6 +109,13 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component representing search field - input and button, in a responsive, styled layout.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -487,6 +494,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>The current/default search text.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -554,6 +567,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>This event is emited, when user performs the search action. Includes the search text from the input field.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -602,6 +621,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the base class <code>ecl-search-form</code> to the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -633,6 +658,13 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                        <div class="io-description"><p>Perform search when user clicks Enter when on the input field. Emits the search event with the search text.</p>
+</div>
+
+                </td>
+            </tr>
         </tbody>
     </table>
 </section>
@@ -672,6 +704,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Perform search when user clicks Enter when on the input field. Emits the search event with the search text.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -733,6 +767,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Assigns the new input text value to the &#39;searchInputText&#39; property, each time the input is changed.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -794,6 +830,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Perform search when user clicks the search button. Emits the search event with the search text.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -1139,6 +1177,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 the base class <code>ecl-search-form</code> to the host 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/string" target="_blank" >string</a></code>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>

package/docs/components/EclSelectContainerComponent.html

@@ -109,6 +109,13 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Container component, which wraps the <select> component. Ataches custom select button with dropdown arrow.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -333,6 +340,13 @@
                         <i>Default value : </i><code>&#x27;m&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Size/length of the field and the dropdown, can be &#39;s&#39;, &#39;m&#39; or &#39;l&#39;. Default is &#39;m&#39;.
+Same as the size of the main host element.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -370,6 +384,12 @@
                         <i>Default value : </i><code>undefined</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Custom label for the arrow-down button. Set from the main host element.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -441,6 +461,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Adds specific classes for the container.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -533,6 +559,17 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Adds specific classes for the container.</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>
@@ -550,6 +587,17 @@
                         <span class="accessor"><b>get</b><code>iconSize()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Returns different icon sizes, depending if it&#39;s EU (s) or EC (xs) theme.</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>