@eui/components 19.1.2 → 19.1.3-snapshot-1744273107050

package/docs/components/EuiCardHeaderComponent.html

@@ -109,6 +109,29 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>The eui-card-header component provides the header options of the eui-card.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">```html
+  &lt;eui-card euiCollapsible&gt;
+      &lt;eui-card-header&gt;
+          &lt;eui-card-header-left-content&gt;
+              &lt;eui-icon-svg icon=&quot;home:sharp&quot; fillColor=&quot;accent&quot;&gt;&lt;/eui-icon-svg&gt;
+          &lt;/eui-card-header-left-content&gt;
+          &lt;eui-card-header-title&gt;Title&lt;/eui-card-header-title&gt;
+          &lt;eui-card-header-right-content&gt;
+              &lt;button euiButton euiPrimary euiSizeS&gt;Action&lt;/button&gt;
+          &lt;/eui-card-header-right-content&gt;
+      &lt;/eui-card-header&gt;
+      &lt;eui-card-content&gt;
+          Card content...
+      &lt;/eui-card-content&gt;
+  &lt;/eui-card&gt;</code></pre></div><p>See <a href="https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-header">https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-header</a> for more details.
+```</p>
+
+    </p>
 
 
 
@@ -337,6 +360,12 @@
                         <i>Default value : </i><code>&#x27;collapse&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Sets the collapseLabel Input property.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -358,6 +387,12 @@
                         <i>Default value : </i><code>&#x27;expand&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Sets the expandLabel Input property.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -379,6 +414,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Input property to expand the bottom part of the card header.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -400,6 +441,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Input property to display the title within the full card container&#39;s width.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -421,6 +468,12 @@
                         <i>Default value : </i><code>true</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Input property to enable/disable the header click toggle.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -442,6 +495,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Input property to display the title &amp; subtitle content in multiple lines.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -461,6 +520,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Event emitted when the card header collapses.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -488,6 +553,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Binds the class to the component.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -523,6 +594,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Fires when the icon button expander is clicked/pressed to expand/collapse the bottom expander.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -533,6 +606,7 @@
                                             <td>Name</td>
                                                 <td>Type</td>
                                             <td>Optional</td>
+                                                <td>Description</td>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -547,6 +621,10 @@
                                             </td>
 
 
+                                            <td>
+                                                    <p>The event that fires the toggle.</p>
+
+                                            </td>
                                         </tr>
                                     </tbody>
                                 </table>
@@ -586,6 +664,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Toggles the header when the header is clicked and emits the isCollapsed state.</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>
@@ -634,6 +714,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Binds the class to the component.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>

package/docs/components/EuiCardHeaderLeftContentComponent.html

@@ -109,6 +109,26 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>The eui-card-header-left-content component projects the left content for eui-card-header.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">```html
+  &lt;eui-card euiCollapsible&gt;
+      &lt;eui-card-header&gt;
+          &lt;eui-card-header-left-content&gt;
+              &lt;eui-icon-svg icon=&quot;home:sharp&quot; fillColor=&quot;accent&quot;&gt;&lt;/eui-icon-svg&gt;
+          &lt;/eui-card-header-left-content&gt;
+          &lt;eui-card-header-title&gt;Title&lt;/eui-card-header-title&gt;
+      &lt;/eui-card-header&gt;
+      &lt;eui-card-content&gt;
+          Card content...
+      &lt;/eui-card-content&gt;
+  &lt;/eui-card&gt;</code></pre></div><p>See <a href="https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-header">https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-header</a> for more details.
+```</p>
+
+    </p>
 
 
 
@@ -229,6 +249,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Binds the class to the component.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -274,6 +300,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Binds the class to the component.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>

package/docs/components/EuiCardHeaderRightContentComponent.html

@@ -109,6 +109,29 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>The eui-card-header-right-content component projects the right content for eui-card-header.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">```html
+  &lt;eui-card euiCollapsible&gt;
+      &lt;eui-card-header&gt;
+          &lt;eui-card-header-left-content&gt;
+              &lt;eui-icon-svg icon=&quot;home:sharp&quot; fillColor=&quot;accent&quot;&gt;&lt;/eui-icon-svg&gt;
+          &lt;/eui-card-header-left-content&gt;
+          &lt;eui-card-header-title&gt;Title&lt;/eui-card-header-title&gt;
+          &lt;eui-card-header-right-content&gt;
+              &lt;button euiButton euiPrimary euiSizeS&gt;Action&lt;/button&gt;
+          &lt;/eui-card-header-right-content&gt;
+      &lt;/eui-card-header&gt;
+      &lt;eui-card-content&gt;
+          Card content...
+      &lt;/eui-card-content&gt;
+  &lt;/eui-card&gt;</code></pre></div><p>See <a href="https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-header">https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-header</a> for more details.
+```</p>
+
+    </p>
 
 
 
@@ -229,6 +252,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Binds the class to the component.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -274,6 +303,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Binds the class to the component.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>

package/docs/components/EuiCardHeaderSubtitleComponent.html

@@ -109,6 +109,28 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>The eui-card-header-subtitle component projects the subtitle for eui-card-header.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">```html
+  &lt;eui-card&gt;
+      &lt;eui-card-header&gt;
+          &lt;eui-card-header-title&gt;
+              {{ cardTitle }}
+          &lt;/eui-card-header-title&gt;
+          &lt;eui-card-header-subtitle&gt;
+              {{ cardSubtitle }}
+          &lt;/eui-card-header-subtitle&gt;
+      &lt;/eui-card-header&gt;
+      &lt;eui-card-content&gt;
+          I am the content of the card container...
+      &lt;/eui-card-content&gt;
+  &lt;/eui-card&gt;</code></pre></div><p>See <a href="https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card">https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card</a> for more details.
+```</p>
+
+    </p>
 
 
 
@@ -229,6 +251,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Binds the class to the component.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -274,6 +302,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Binds the class to the component.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>

package/docs/components/EuiCardHeaderTitleComponent.html

@@ -109,6 +109,29 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>The eui-card-header-title component projects the title for eui-card-header.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">```html
+  &lt;eui-card euiCollapsible&gt;
+      &lt;eui-card-header&gt;
+          &lt;eui-card-header-left-content&gt;
+              &lt;eui-icon-svg icon=&quot;home:sharp&quot; fillColor=&quot;accent&quot;&gt;&lt;/eui-icon-svg&gt;
+          &lt;/eui-card-header-left-content&gt;
+          &lt;eui-card-header-title&gt;Title&lt;/eui-card-header-title&gt;
+          &lt;eui-card-header-right-content&gt;
+              &lt;button euiButton euiPrimary euiSizeS&gt;Action&lt;/button&gt;
+          &lt;/eui-card-header-right-content&gt;
+      &lt;/eui-card-header&gt;
+      &lt;eui-card-content&gt;
+          Card content...
+      &lt;/eui-card-content&gt;
+  &lt;/eui-card&gt;</code></pre></div><p>See <a href="https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-header">https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-header</a> for more details.
+```</p>
+
+    </p>
 
 
 
@@ -229,6 +252,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Binds the class to the component.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -274,6 +303,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Binds the class to the component.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>

package/docs/components/EuiCardMediaComponent.html

@@ -109,6 +109,26 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>The eui-card-header-body component projects the body for eui-card-header.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">```html
+   &lt;eui-card euiNoShadow&gt;
+      &lt;eui-card-media
+          imageUrl=&quot;./assets/images/cards/home-card-eu-publications.jpg&quot;
+          imageLegend=&quot;EU Publications&quot;
+          imageClickUrl=&quot;/style-guide-next/components/eui-card&quot;
+          euiTooltip=&quot;Internal link Url defined pointing to this page&quot;&gt;
+      &lt;/eui-card-media&gt;
+      &lt;eui-card-content style=&quot;height: 8rem;&quot;&gt;
+          Reports, studies, information booklets, magazines and other publications from the EU institutions and other bodies
+      &lt;/eui-card-content&gt;
+  &lt;/eui-card&gt;</code></pre></div><p>See <a href="https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#media-cards">https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#media-cards</a> for more details.
+```</p>
+
+    </p>
 
 
 
@@ -252,6 +272,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Option to set an internal link Url (routerLink).</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -268,6 +294,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Option to set an external link Url (href).</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -289,6 +321,12 @@
                         <i>Default value : </i><code>&#x27;eUI Card Image&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Option to specify an image description.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -310,6 +348,12 @@
                         <i>Default value : </i><code>&#x27;auto&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Option to specify the image height.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -326,6 +370,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>The image legend to display in the card.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -342,6 +392,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>The image URL to display in the card.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -370,6 +426,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Binds the class to the component.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -415,6 +477,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Binds the class to the component.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>