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

package/docs/directives/EclFileUploadDirective.html

@@ -113,6 +113,14 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive that enhances a native input[type=file] with ECL-compliant styling and behavior.
+Supports multiple file selection, dynamic file list rendering, translations and validation state.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>
@@ -410,6 +418,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Whether the component is disabled.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -426,6 +440,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>ID attribute applied to the native file input.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -447,6 +467,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Marks the component as invalid (if not using Angular form validation).</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -463,6 +489,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Allows selecting multiple files.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -484,6 +516,12 @@
                         <i>Default value : </i><code>&#x27;default&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Variant of the component&#39;s appearance. Currently unused. Default: <code>&#39;default&#39;</code>.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -551,6 +589,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Event emitted when files are selected.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -578,6 +622,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Host binding to define input type as &#39;file&#39;.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -599,6 +649,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the base <code>ecl-file-upload</code> class to the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -620,6 +676,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Returns <code>true</code> if component should be displayed as invalid.
+Prioritizes Angular form control status over <code>isInvalid</code> input.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -648,6 +711,42 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Handles file selection and emits a structured file selection event.</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>evt</td>
+
+                                    <td>
+                                        No
+                                    </td>
+
+
+                                    <td>
+                                        <p>Change event from input.</p>
+
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div>
+                    </div>
+                </td>
+            </tr>
         </tbody>
     </table>
     <table class="table table-sm table-bordered">
@@ -672,6 +771,42 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Prevents file dialog from opening when component is disabled.</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>evt</td>
+
+                                    <td>
+                                        No
+                                    </td>
+
+
+                                    <td>
+                                        <p>Click event on the input element.</p>
+
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div>
+                    </div>
+                </td>
+            </tr>
         </tbody>
     </table>
 </section>
@@ -711,6 +846,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Prevents file dialog from opening when component is disabled.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -721,6 +858,7 @@
                                             <td>Name</td>
                                                 <td>Type</td>
                                             <td>Optional</td>
+                                                <td>Description</td>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -735,6 +873,10 @@
                                             </td>
 
 
+                                            <td>
+                                                    <p>Click event on the input element.</p>
+
+                                            </td>
                                         </tr>
                                     </tbody>
                                 </table>
@@ -781,6 +923,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Handles file selection and emits a structured file selection event.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -791,6 +935,7 @@
                                             <td>Name</td>
                                                 <td>Type</td>
                                             <td>Optional</td>
+                                                <td>Description</td>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -805,6 +950,10 @@
                                             </td>
 
 
+                                            <td>
+                                                    <p>Change event from input.</p>
+
+                                            </td>
                                         </tr>
                                     </tbody>
                                 </table>
@@ -920,6 +1069,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Host binding to define input type as &#39;file&#39;.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -943,6 +1098,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 <code>ecl-file-upload</code> class 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>
@@ -960,6 +1126,18 @@
                         <span class="accessor"><b>get</b><code>invalidState()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Returns <code>true</code> if component should be displayed as invalid.
+Prioritizes Angular form control status over <code>isInvalid</code> input.</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>
 
             </tbody>
         </table>

package/docs/directives/EclGalleryMediaDirective.html

@@ -113,6 +113,13 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Manages image/video for the thumbnail in the gallery. Adding some styling and functionality.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>
@@ -317,6 +324,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>When this is true, on mousehover the image will be zoomed.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -333,6 +346,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>To be used when there is no thimbnail added. Instead the &#39;poster&#39; attribute in the <video> element is used</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -404,6 +423,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the ECL classes for the component.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -610,6 +635,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 ECL classes for the 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/directives/EclGalleryPictureDirective.html

@@ -113,6 +113,13 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Adds styling and functionality for gallery picture component.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>

package/docs/directives/EclGalleryThumbnailDirective.html

@@ -113,6 +113,13 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Applies classes for the gallery thumbnail.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>

package/docs/directives/EclInpageNavigationListDirective.html

@@ -113,6 +113,13 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>The parent list component, that contains navigation items links.</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>If the dropdown is visible in mobile view.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -583,6 +596,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>If the dropdown is visible in mobile view.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>

package/docs/directives/EclSelectDirective.html

@@ -113,6 +113,13 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>The default HTML <select> component, with some added styling and formatting according to ECL standards.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>
@@ -361,7 +368,7 @@
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+                        <i>Type : </i>    <code>&quot;s&quot; | &quot;m&quot; | &quot;l&quot;</code>
 
                     </td>
                 </tr>
@@ -370,6 +377,12 @@
                         <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;.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -412,6 +425,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.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -504,6 +523,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the &#39;ecl-select&#39; class to the main <select> component</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -525,6 +550,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Adds &#39;ecl-select--invalid&#39; class to the host element, in case the component has invalid status.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -617,6 +648,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 &#39;ecl-select&#39; class to the main <select> 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>
@@ -651,6 +693,17 @@
                         <span class="accessor"><b>get</b><code>isInvalidState()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Adds &#39;ecl-select--invalid&#39; class to the host element, in case the component has invalid status.</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>
 
             </tbody>
         </table>

package/docs/directives/EclTagIconExternalDirective.html

@@ -113,6 +113,14 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive to apply external icon styling inside an ECL tag.
+Adds specific CSS classes to render an &quot;external&quot; icon next to the tag content.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>
@@ -288,6 +296,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>CSS classes applied to the host element.
+Adds <code>ecl-tag__icon ecl-tag__icon--external</code> to display the icon correctly.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -380,6 +395,18 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>CSS classes applied to the host element.
+Adds <code>ecl-tag__icon ecl-tag__icon--external</code> to display the icon correctly.</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/directives/EclTagSetDirective.html

@@ -113,6 +113,14 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive to style a container as a set of tags.
+Adds the <code>ecl-tag-set</code> class to the host element.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>
@@ -288,6 +296,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>CSS classes applied to the host element.
+Adds <code>ecl-tag-set</code> to define the layout for a group of tags.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -380,6 +395,18 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>CSS classes applied to the host element.
+Adds <code>ecl-tag-set</code> to define the layout for a group of tags.</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>