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

package/docs/components/EclModalComponent.html

@@ -340,6 +340,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Controls whether the modal is open.</p>
+<p>Can be set to any truthy value to open the modal.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -361,6 +368,19 @@
                         <i>Default value : </i><code>&#x27;l&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Defines the size of the modal.</p>
+<p>Possible values:</p>
+<ul>
+<li>&#39;s&#39; – small</li>
+<li>&#39;m&#39; – medium</li>
+<li>&#39;l&#39; – large (default)</li>
+<li>&#39;full&#39; – full width</li>
+</ul>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -377,6 +397,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Defines the visual variant of the modal.</p>
+<p>Possible values: &#39;information&#39;, &#39;success&#39;, &#39;warning&#39;, &#39;error&#39;, or a custom string.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -444,6 +471,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Emits when the modal is closed.</p>
+<p>Carries an instance of <code>EclModalCloseEvent</code>.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -460,6 +494,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Emits when the modal is opened.</p>
+<p>Carries an instance of <code>EclModalOpenEvent</code>.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -482,6 +523,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Binds the <code>open</code> attribute to the modal element.</p>
+<p>Used by the native <code>&lt;dialog&gt;</code> element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -503,6 +551,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies base and variant CSS classes to the modal element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -529,6 +583,13 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                        <div class="io-description"><p>Handles ESC key press to close the modal with <code>cancel</code> role.</p>
+</div>
+
+                </td>
+            </tr>
         </tbody>
     </table>
 </section>
@@ -559,6 +620,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Closes the modal and emits a <code>modalClose</code> event with optional result data.</p>
+<p>If the event is not prevented, the modal will be hidden.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -629,6 +693,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Handles ESC key press to close the modal with <code>cancel</code> role.</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>
@@ -660,6 +726,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Opens the modal and emits a <code>modalOpen</code> event.</p>
+<p>If the event is not prevented, the modal will be displayed.</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>
@@ -764,6 +833,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>All close directives projected inside the modal.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -795,6 +870,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Header component projected into the modal.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -818,6 +899,17 @@
                         <span class="accessor"><b>get</b><code>isOpen()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Returns the open state of the modal.</p>
+</div>
+
+                                <div class="io-description">
+                                    <b>Returns : </b>    <code>boolean | null</code>
+
+                                </div>
+                        </td>
+                    </tr>
 
                 <tr>
                     <td class="col-md-4">
@@ -826,6 +918,9 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
+                                <div class="io-description"><p>Controls whether the modal is open.</p>
+<p>Can be set to any truthy value to open the modal.</p>
+</div>
 
                                 <div class="io-description">
                                         <b>Parameters :</b>
@@ -877,6 +972,18 @@
                         <span class="accessor"><b>get</b><code>isModalOpened()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Binds the <code>open</code> attribute to the modal element.</p>
+<p>Used by the native <code>&lt;dialog&gt;</code> 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/boolean" target="_blank" >boolean</a></code>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>
@@ -894,6 +1001,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 base and variant CSS classes to the modal 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/EclModalFooterComponent.html

@@ -109,6 +109,14 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Footer component used within the ECL Modal.</p>
+<p>Automatically applies styling to buttons projected into the footer.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -330,6 +338,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the ECL CSS class for modal footer container.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -436,6 +450,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Queries all button components projected into the footer.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -459,6 +479,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 CSS class for modal footer 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>

package/docs/components/EclModalHeaderComponent.html

@@ -109,6 +109,15 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Header component used within the ECL Modal.</p>
+<p>Displays an icon depending on the modal variant, user-defined content,
+and a close button that emits a close event.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -291,6 +300,8 @@
 
                 <tr>
                     <td class="col-md-4">
+                            <div class="io-description"><p>Constructs the modal header component with injected theme service.</p>
+</div>
                             <div>
                                     <b>Parameters :</b>
                                     <table class="params">
@@ -299,6 +310,7 @@
                                                 <td>Name</td>
                                                     <td>Type</td>
                                                 <td>Optional</td>
+                                                    <td>Description</td>
                                             </tr>
                                         </thead>
                                         <tbody>
@@ -313,6 +325,10 @@
                                                             No
                                                     </td>
                                                     
+                                                        <td>
+                                                                <p>The theme service used to determine current theme settings.</p>
+
+                                                        </td>
                                                 </tr>
                                         </tbody>
                                     </table>
@@ -339,6 +355,21 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Defines the visual variant of the modal.</p>
+<p>Determines which icon is shown in the header.</p>
+<p>Possible values:</p>
+<ul>
+<li><code>&#39;information&#39;</code></li>
+<li><code>&#39;success&#39;</code></li>
+<li><code>&#39;warning&#39;</code></li>
+<li><code>&#39;error&#39;</code></li>
+<li>any other custom string (no icon will be shown)</li>
+</ul>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -406,6 +437,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Event emitted when the close button is clicked.</p>
+<p>Emits an <code>EclModalCloseEvent</code> object.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -461,11 +499,17 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Returns the name of the icon associated with the current variant.</p>
+</div>
 
                         <div class="io-description">
                             <b>Returns : </b>    <code>&quot;information&quot; | &quot;check-filled&quot; | &quot;warning&quot; | &quot;error&quot; | null</code>
 
                         </div>
+                            <div class="io-description">
+                                <p>The icon name, or <code>null</code> if no matching variant exists.</p>
+
+                            </div>
                 </td>
             </tr>
         </tbody>
@@ -492,6 +536,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Handles the click event on the close button.</p>
+<p>Emits a <code>modalClose</code> event with no payload.</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>
@@ -596,6 +643,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the ECL CSS class for modal header container.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -618,6 +671,11 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description">The theme service used to determine current theme settings.</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>