@eui/ecl 19.3.0-snapshot-1749041696283 → 19.3.0-snapshot-1749064223062

package/docs/components/EclPopoverComponent.html

@@ -109,6 +109,14 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component representing an ECL Popover.</p>
+<p>It handles toggling visibility, positioning, and closing behavior of the popover.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -484,6 +492,13 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                        <div class="io-description"><p>Closes the popover when the Escape key is pressed.</p>
+</div>
+
+                </td>
+            </tr>
         </tbody>
     </table>
     <table class="table table-sm table-bordered">
@@ -511,6 +526,13 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                        <div class="io-description"><p>Recalculates popover position when the document is scrolled.</p>
+</div>
+
+                </td>
+            </tr>
         </tbody>
     </table>
     <table class="table table-sm table-bordered">
@@ -533,6 +555,14 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                        <div class="io-description"><p>Handler triggered when a click outside the popover is detected.
+Closes the popover if it is open.</p>
+</div>
+
+                </td>
+            </tr>
         </tbody>
     </table>
     <table class="table table-sm table-bordered">
@@ -560,6 +590,13 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                        <div class="io-description"><p>Recalculates popover position when the window is resized.</p>
+</div>
+
+                </td>
+            </tr>
         </tbody>
     </table>
 </section>
@@ -599,6 +636,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Handler triggered when a click outside the popover is detected.
+Closes the popover if it is open.</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>
@@ -630,6 +670,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Public method used to close the popover and reset related styles.</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>
@@ -670,6 +712,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Recalculates popover position when the document is scrolled.</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>
@@ -710,6 +754,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Closes the popover when the Escape key is pressed.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -780,6 +826,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Recalculates popover position when the window is resized.</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>
@@ -884,6 +932,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Reference to the popover container element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -915,6 +969,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Reference to the scrollable content element inside the popover.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -946,6 +1006,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Reference to the toggle element used to open/close the popover.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -966,6 +1032,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Controls visibility of the popover. <code>true</code> means hidden.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -987,6 +1059,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Current calculated position class of the popover.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1027,6 +1105,18 @@
                         <span class="accessor"><b>get</b><code>popoverToggleAriaControls()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Returns the value of the <code>aria-controls</code> attribute from the toggle element,
+if available. Used for accessibility linking.</p>
+</div>
+
+                                <div class="io-description">
+                                    <b>Returns : </b>    <code>string | null</code>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>

package/docs/dependencies.html

@@ -268,9 +268,9 @@
         <li>
             <b>@stackblitz/sdk</b> : 1.11.0</li>
         <li>
-            <b>@eui/styles</b> : 19.3.0-snapshot-1749035391405</li>
+            <b>@eui/styles</b> : 19.3.0-snapshot-1749050655692</li>
         <li>
-            <b>@eui/ecl</b> : 19.3.0-snapshot-1749035391405</li>
+            <b>@eui/ecl</b> : 19.3.0-snapshot-1749050655692</li>
         <li>
             <b>@eui/tools</b> : ^6.0.0</li>
     </ul>

package/docs/directives/EclBannerDescriptionDirective.html

@@ -113,6 +113,13 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive for the main banner description container.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>

package/docs/directives/EclBannerDescriptionLinkDirective.html

@@ -113,6 +113,13 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive for a link inside the banner description.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>

package/docs/directives/EclBannerDescriptionTextDirective.html

@@ -113,6 +113,13 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive for the textual content inside the banner description.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>

package/docs/directives/EclBannerImageDirective.html

@@ -113,6 +113,14 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive applied to the <img> element inside the banner.
+Enables class binding and exposes the element reference.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>
@@ -233,6 +241,8 @@
 
                 <tr>
                     <td class="col-md-4">
+                            <div class="io-description"><p>Reference to the host image element.</p>
+</div>
                             <div>
                                     <b>Parameters :</b>
                                     <table class="params">

package/docs/directives/EclBannerPictureDirective.html

@@ -113,6 +113,14 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive applied to the <picture> element within the banner.
+Adds the appropriate classes for styling the banner picture.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>

package/docs/directives/EclBannerTitleDirective.html

@@ -113,6 +113,14 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive applied to the banner title container element.
+Adds appropriate styling class to the host element.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>

package/docs/directives/EclBannerTitleLinkDirective.html

@@ -113,6 +113,14 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive applied to the link element within the banner title.
+Adds appropriate link styling classes to the host element.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>

package/docs/directives/EclBannerTitleTextDirective.html

@@ -113,6 +113,14 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive applied to the text element within the banner title.
+Adds appropriate styling class to the host element.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>

package/docs/directives/EclBannerVideoDirective.html

@@ -113,6 +113,14 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive applied to the video element used in the banner.
+Adds appropriate styling classes to the host element.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>
@@ -233,6 +241,8 @@
 
                 <tr>
                     <td class="col-md-4">
+                            <div class="io-description"><p>Reference to the native video element.</p>
+</div>
                             <div>
                                     <b>Parameters :</b>
                                     <table class="params">
@@ -341,6 +351,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>CSS classes applied to the host video element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -474,6 +490,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>CSS classes applied to the host video element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>

package/docs/directives/EclBlockquoteImageDirective.html

@@ -113,6 +113,14 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive for the image inside the ECL Blockquote.
+Automatically applies the <code>ecl-blockquote__image</code> CSS class.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>
@@ -288,6 +296,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Returns the CSS classes to apply for the blockquote image element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -380,6 +394,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 the CSS classes to apply for the blockquote image 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/directives/EclBlockquotePictureDirective.html

@@ -113,6 +113,14 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive for the picture element inside the ECL Blockquote.
+Automatically applies the <code>ecl-picture</code> and <code>ecl-blockquote__picture</code> CSS classes.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>
@@ -288,6 +296,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Returns the CSS classes to apply for the blockquote picture element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -380,6 +394,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 the CSS classes to apply for the blockquote picture 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/directives/EclButtonIconContainerDirective.html

@@ -113,6 +113,14 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive for the icon container inside the ECL Button.
+Automatically applies the <code>ecl-button__icon-container</code> CSS class.</p>
+
+            </p>
 
 
 
@@ -204,6 +212,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the <code>ecl-button__icon-container</code> CSS class.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -243,6 +257,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the <code>ecl-button__icon-container</code> CSS class.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>

package/docs/directives/EclButtonLabelDirective.html

@@ -113,6 +113,14 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive for labeling content inside the ECL Button.
+Automatically applies the <code>ecl-button__label</code> CSS class.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>
@@ -288,6 +296,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Returns the CSS classes to apply for the button label.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -380,6 +394,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 the CSS classes to apply for the button label.</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/EclCardImageDirective.html

@@ -113,6 +113,14 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive for the image element used in ECL Card.
+Applies the ECL-specific image class for card usage.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>
@@ -346,6 +354,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Returns the CSS classes to apply to the image element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -466,6 +480,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 the CSS classes to apply to the image 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/directives/EclCardPictureDirective.html

@@ -113,6 +113,14 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive for the picture element used in ECL Card.
+Applies required ECL CSS classes and optionally enables zoom effect.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>
@@ -241,6 +249,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>When true, adds the <code>ecl-picture--zoom</code> class to enable zoom styling.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -312,6 +326,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Returns the set of CSS classes to apply to the picture element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -404,6 +424,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 the set of CSS classes to apply to the picture 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>