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

package/docs/components/EclFeaturedComponent.html

@@ -109,6 +109,13 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Custom ECL component, that adds visual support to a piece of content. Uses <ecl-media-container>.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -289,6 +296,12 @@
                         <i>Default value : </i><code>&#x27;left&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>The position of the image in the component. Can be &#39;left&#39; or &#39;right&#39;. The default value is &#39;left&#39;.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -305,6 +318,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>&#39;highligh&#39; varian, applies class to make more stand out appearance of the component.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -402,6 +421,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Adds specific classes to the component.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -536,6 +561,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 to 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/components/EclFeaturedItemComponent.html

@@ -109,6 +109,13 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Container for the text part - title and description of the <ecl-featured> component.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>

package/docs/components/EclFeaturedItemDescriptionComponent.html

@@ -109,6 +109,14 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Applies specific additional class to style <ecl-featured-item-description> component, as a part of the
+ <ecl-featured> component.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>

package/docs/components/EclFeaturedItemFooterComponent.html

@@ -109,6 +109,13 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Applies specific additional class to style <ecl-featured-item-footer> component.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>

package/docs/components/EclGalleryComponent.html

@@ -109,6 +109,13 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>This component represents a collection of images or videos and allows a user to browse them.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -515,6 +522,13 @@
                         <i>Default value : </i><code>&#x27;0&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>This property can be used with &#39;isGrid&#39; property set to true. By default gridTemplate is 0 and all the thimbnails have same size.
+If another template value is set, some additional formatting is applied and the thumbnails will have different sizes.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -536,6 +550,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>If set to true, the gallery will have 100 view width.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -557,6 +577,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>If set to true, a specific class will be applied, so the gallery thumbnails are displayed as a grid, all with same size.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -578,6 +604,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>If set to true, no overlay will be displayed when user clicks on an image.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -620,6 +652,12 @@
                         <i>Default value : </i><code>true</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>If the items in the gallery can be shared. I.e. if the link for sharing will be present for each item.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -641,6 +679,12 @@
                         <i>Default value : </i><code>true</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>If set to false, no title will be displayed when user hover on a gallery item.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -657,6 +701,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Number of gallery items to be displayed by default. The rest can be displayed with the &#39;View all&#39; button.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -678,6 +728,12 @@
                         <i>Default value : </i><code>&#x27;3-2&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>The ratio that will be applied to the gallery thumbnails.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -745,6 +801,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Emits event when an expanded item is closed.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -761,6 +823,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Emits event when user is browsing items, opened in an overlay.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -777,6 +845,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Emits event when an item is opened in full screen.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -793,6 +867,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Emits event when an item is shared.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -809,6 +889,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Emits event when user clicks on an item to expand it.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -836,6 +922,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>The default role of the component is &#39;region&#39; and should not be changed.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -857,6 +949,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies specific clases to the component, related to the component properties values.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -888,6 +986,36 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                        <div class="io-description"><p>On pressing &#39;esc&#39; key - close the item dialog and emit &#39;hide&#39; event.</p>
+</div>
+
+                            <div class="io-description">
+                                <b>Parameters :</b>
+                                
+                                <table class="params">
+                                    <thead>
+                                        <tr>
+                                            <td>Name</td>
+                                            <td>Optional</td>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                                <td>event</td>
+
+                                            <td>
+                                                    No
+                                            </td>
+
+
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                </td>
+            </tr>
         </tbody>
     </table>
     <table class="table table-sm table-bordered">
@@ -1109,6 +1237,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Emit &#39;hide&#39; event, when closing item dialog.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -1179,6 +1309,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>On pressing &#39;esc&#39; key - close the item dialog and emit &#39;hide&#39; event.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -1301,6 +1433,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Emit &#39;itemSwitch&#39; event, when switching to the next item. Event contains the new current item.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -1362,6 +1496,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Emit &#39;itemSwitch&#39; event, when switching to the previous item. Event contains the new current item.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -1851,6 +1987,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>The default role of the component is &#39;region&#39; and should not be changed.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1874,6 +2016,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 specific clases to the component, related to the component properties 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>

package/docs/components/EclGalleryFooterComponent.html

@@ -109,6 +109,13 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Manages styling and functionality for gallery footer.</p>
+
+    </p>
 
 
     <p class="comment">
@@ -302,6 +309,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Event, that is emitted when items are expanded/collapsed.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>

package/docs/components/EclGalleryItemComponent.html

@@ -109,6 +109,13 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Wrapper component for gallery item&#39;s elements.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -488,6 +495,12 @@
                         <i>Default value : </i><code>true</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Can this item be shared, i.e. show/hide share button.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -557,6 +570,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>The source link to the image/video, that will be shown in the original size (when open image/video in overlay or in orginal size).</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -573,6 +592,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Embeded audio description.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -683,6 +708,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>The role attribute of the item is &#39;listitem&#39;, should not be changed.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -704,6 +735,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Binds specific classes for the item. Some depend on some of the properties of the component.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1099,6 +1136,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>The role attribute of the item is &#39;listitem&#39;, should not be changed.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1122,6 +1165,17 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Binds specific classes for the item. Some depend on some of the properties of 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>
@@ -1142,6 +1196,8 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
+                                <div class="io-description"><p>Set if the item should be shown in the gallery by default.</p>
+</div>
 
                                 <div class="io-description">
                                         <b>Parameters :</b>
@@ -1320,6 +1376,17 @@
                         <span class="accessor"><b>get</b><code>titleId()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Creates id for the title</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>
@@ -1337,6 +1404,17 @@
                         <span class="accessor"><b>get</b><code>hasGalleryThumbnail()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>If the thimbnail was added by user. If not -&gt; we are adding it in the view.</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>