@eui/ecl 22.0.0-alpha.39 → 22.0.0-alpha.40

package/docs/components/EclTabComponent.html

@@ -262,6 +262,7 @@ Manages its label, state (active, hidden), and interaction events like click or
                         <ul class="index-list">
                             <li>
                                 <span class="reference-badge reference-badge--property" aria-hidden="true">P</span>
+                                    <span class="modifier">Readonly</span>
                                 <a href="#_isActive" >_isActive</a>
                             </li>
                             <li>
@@ -269,27 +270,13 @@ Manages its label, state (active, hidden), and interaction events like click or
                                     <span class="modifier">Readonly</span>
                                 <a href="#contentTemplate" >contentTemplate</a>
                             </li>
-                            <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">P</span>
-                                <a href="#finalId" >finalId</a>
-                            </li>
-                            <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">P</span>
-                                <a href="#hrefTabindex" >hrefTabindex</a>
-                            </li>
                             <li>
                                 <span class="reference-badge reference-badge--property" aria-hidden="true">P</span>
                                     <span class="modifier">Readonly</span>
-                                <a href="#label" >label</a>
-                            </li>
-                            <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">P</span>
-                                    <span class="modifier">Readonly</span>
-                                <a href="#link" >link</a>
+                                <a href="#finalId" >finalId</a>
                             </li>
                             <li>
                                 <span class="reference-badge reference-badge--property" aria-hidden="true">P</span>
-                                    <span class="modifier">Public</span>
                                 <a href="#tabLabel" >tabLabel</a>
                             </li>
                         </ul>
@@ -312,7 +299,6 @@ Manages its label, state (active, hidden), and interaction events like click or
                             </li>
                             <li>
                                 <span class="reference-badge reference-badge--method" aria-hidden="true">M</span>
-                                    <span class="modifier">Public</span>
                                 <a href="#getWidth" >getWidth</a>
                             </li>
                             <li>
@@ -323,14 +309,6 @@ Manages its label, state (active, hidden), and interaction events like click or
                                 <span class="reference-badge reference-badge--method" aria-hidden="true">M</span>
                                 <a href="#onFocus" >onFocus</a>
                             </li>
-                            <li>
-                                <span class="reference-badge reference-badge--method" aria-hidden="true">M</span>
-                                <a href="#onKeydown" >onKeydown</a>
-                            </li>
-                            <li>
-                                <span class="reference-badge reference-badge--method" aria-hidden="true">M</span>
-                                <a href="#onTabClick" >onTabClick</a>
-                            </li>
                             <li>
                                 <span class="reference-badge reference-badge--method" aria-hidden="true">M</span>
                                 <a href="#getCssClasses" >getCssClasses</a>
@@ -384,6 +362,9 @@ Manages its label, state (active, hidden), and interaction events like click or
                     </td>
                     <td class="col-md-9">
                         <ul class="index-list">
+                            <li>
+                                <span class="reference-badge reference-badge--property" aria-hidden="true">O</span><a href="#isHidden" >isHidden</a>
+                            </li>
                             <li>
                                 <span class="reference-badge reference-badge--property" aria-hidden="true">O</span><a href="#keydownTab" >keydownTab</a>
                             </li>
@@ -391,7 +372,7 @@ Manages its label, state (active, hidden), and interaction events like click or
                                 <span class="reference-badge reference-badge--property" aria-hidden="true">O</span><a href="#selectTab" >selectTab</a>
                             </li>
                             <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">O</span><a href="#isHidden" >isHidden</a>
+                                <span class="reference-badge reference-badge--property" aria-hidden="true">O</span><a href="#class" >class</a>
                             </li>
                         </ul>
                     </td>
@@ -399,22 +380,6 @@ Manages its label, state (active, hidden), and interaction events like click or
             </tbody>
         </table>
 
-        <table class="table table-sm table-bordered index-table">
-            <tbody>
-                <tr>
-                    <td class="col-md-3">
-                        <h6><b>HostBindings</b></h6>
-                    </td>
-                    <td class="col-md-9">
-                        <ul class="index-list">
-                            <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">HB</span><a href="#class" >class</a>
-                            </li>
-                        </ul>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
 
 
         <table class="table table-sm table-bordered index-table">
@@ -433,10 +398,6 @@ Manages its label, state (active, hidden), and interaction events like click or
                                 <span class="reference-badge reference-badge--accessor" aria-hidden="true">A</span>
                                 <a href="#isUsingOldSelector" >isUsingOldSelector</a>
                             </li>
-                            <li>
-                                <span class="reference-badge reference-badge--accessor" aria-hidden="true">A</span>
-                                <a href="#cssClasses" >cssClasses</a>
-                            </li>
                         </ul>
                     </td>
                 </tr>
@@ -474,11 +435,6 @@ Manages its label, state (active, hidden), and interaction events like click or
 
                     </td>
                 </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Default value : </i><code>undefined</code>
-                    </td>
-                </tr>
                 <tr>
                     <td class="col-md-4">
                         <div class="io-description"><p>Extra classes to be added to the anchor tag.</p>
@@ -577,6 +533,11 @@ Manages its label, state (active, hidden), and interaction events like click or
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>&#x27;&#x27;</code>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -589,7 +550,7 @@ Manages its label, state (active, hidden), and interaction events like click or
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
 
                     </td>
                 </tr>
@@ -605,8 +566,7 @@ Manages its label, state (active, hidden), and interaction events like click or
                 </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/number" target="_blank" >number</a></code>
-
+                        <i>Default value : </i><code>undefined</code>
                     </td>
                 </tr>
             </tbody>
@@ -619,19 +579,19 @@ Manages its label, state (active, hidden), and interaction events like click or
             <tbody>
                 <tr>
                     <td class="col-md-4">
-                        <a name="keydownTab"></a>
-                        <b>keydownTab</b>
+                        <a name="isHidden"></a>
+                        <b>isHidden</b>
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://angular.dev/api/core/EventEmitter" target="_blank" >EventEmitter</a></code>
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <div class="io-description"><p>Emits when a keydown event occurs on the tab.</p>
+                        <div class="io-description"><p>Hides the tab when true by applying the <code>ecl-tabs__item--hidden</code> CSS class.</p>
 </div>
                     </td>
                 </tr>
@@ -641,19 +601,19 @@ Manages its label, state (active, hidden), and interaction events like click or
             <tbody>
                 <tr>
                     <td class="col-md-4">
-                        <a name="selectTab"></a>
-                        <b>selectTab</b>
+                        <a name="keydownTab"></a>
+                        <b>keydownTab</b>
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://angular.dev/api/core/EventEmitter" target="_blank" >EventEmitter</a></code>
+                        <i>Type : </i>        <code><a href="https://angular.dev/api/router/Event" target="_blank" >Event</a></code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <div class="io-description"><p>Emits when the tab is selected via click.</p>
+                        <div class="io-description"><p>Emits when a keydown event occurs on the tab.</p>
 </div>
                     </td>
                 </tr>
@@ -663,57 +623,44 @@ Manages its label, state (active, hidden), and interaction events like click or
             <tbody>
                 <tr>
                     <td class="col-md-4">
-                        <a name="isHidden"></a>
-                        <b>isHidden</b>
+                        <a name="selectTab"></a>
+                        <b>selectTab</b>
                     </td>
                 </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/boolean" target="_blank" >boolean</a></code>
+                        <i>Type : </i>        <code><a href="../classes/EclTabSelectEvent.html" target="_self" >EclTabSelectEvent</a></code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <div class="io-description"><p>Hides the tab when true by applying the <code>ecl-tabs__item--hidden</code> CSS class.</p>
+                        <div class="io-description"><p>Emits when the tab is selected via click.</p>
 </div>
                     </td>
                 </tr>
             </tbody>
         </table>
-</section>
-
-    <section data-compodoc="block-properties">
-    <h3>HostBindings</h3>    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="class"></a>
-                    <span class="name">
-                        <span ><b>class</b></span>
-                        <a href="#class"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
+        <table class="table table-sm table-bordered">
+            <tbody>
+                <tr>
+                    <td class="col-md-4">
+                        <a name="class"></a>
+                        <b>class</b>
+                    </td>
+                </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>
 
                     </td>
                 </tr>
-
-            <tr>
-                <td class="col-md-4">
-                    <div class="io-description"><p>Returns the CSS classes applied to the host element.</p>
-</div>
-                </td>
-            </tr>
-
-        </tbody>
-    </table>
+            </tbody>
+        </table>
 </section>
 
 
+
     <section data-compodoc="block-methods">
     
     <h3 id="methods">
@@ -758,7 +705,6 @@ Manages its label, state (active, hidden), and interaction events like click or
                 <td class="col-md-4">
                     <a name="getWidth"></a>
                     <span class="name">
-                            <span class="modifier">Public</span>
                         <span ><b>getWidth</b></span>
                         <a href="#getWidth"><span class="icon ion-ios-link"></span></a>
                     </span>
@@ -766,8 +712,7 @@ Manages its label, state (active, hidden), and interaction events like click or
             </tr>
             <tr>
                 <td class="col-md-4">
-                        <span class="modifier-icon icon ion-ios-reset"></span>
-                    <code>getWidth()</code>
+<code>getWidth()</code>
                 </td>
             </tr>
 
@@ -854,102 +799,6 @@ The measurement is cached after the first call.</p>
             </tr>
         </tbody>
     </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="onKeydown"></a>
-                    <span class="name">
-                        <span ><b>onKeydown</b></span>
-                        <a href="#onKeydown"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-            <tr>
-                <td class="col-md-4">
-<code>onKeydown(event: <a href="https://angular.dev/api/router/Event" target="_blank">Event</a>)</code>
-                </td>
-            </tr>
-
-
-
-
-            <tr>
-                <td class="col-md-4">
-                        <div class="io-description"><p>Handles a keydown event on the tab and emits the <code>keydownTab</code> event.</p>
-</div>
-
-                            <div class="io-description">
-                                <b>Parameters :</b>
-                                
-                                <table class="params">
-                                    <thead>
-                                        <tr>
-                                            <td>Name</td>
-                                                <td>Type</td>
-                                            <td>Optional</td>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        <tr>
-                                                <td>event</td>
-                                            <td>
-                                                            <code><a href="https://angular.dev/api/router/Event" target="_blank" >Event</a></code>
-                                            </td>
-
-                                            <td>
-                                                    No
-                                            </td>
-
-
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </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>
-
-                        </div>
-                            <div class="io-description">
-                                
-                            </div>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="onTabClick"></a>
-                    <span class="name">
-                        <span ><b>onTabClick</b></span>
-                        <a href="#onTabClick"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-            <tr>
-                <td class="col-md-4">
-<code>onTabClick()</code>
-                </td>
-            </tr>
-
-
-
-
-            <tr>
-                <td class="col-md-4">
-                        <div class="io-description"><p>Handles a click event on the tab and emits the <code>selectTab</code> event.</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>
-
-                        </div>
-                </td>
-            </tr>
-        </tbody>
-    </table>
     <table class="table table-sm table-bordered">
         <tbody>
             <tr>
@@ -1024,6 +873,7 @@ The measurement is cached after the first call.</p>
                 <td class="col-md-4">
                     <a name="_isActive"></a>
                     <span class="name">
+                            <span class="modifier">Readonly</span>
                         <span ><b>_isActive</b></span>
                         <a href="#_isActive"><span class="icon ion-ios-link"></span></a>
                     </span>
@@ -1083,6 +933,7 @@ The measurement is cached after the first call.</p>
                 <td class="col-md-4">
                     <a name="finalId"></a>
                     <span class="name">
+                            <span class="modifier">Readonly</span>
                         <span ><b>finalId</b></span>
                         <a href="#finalId"><span class="icon ion-ios-link"></span></a>
                     </span>
@@ -1100,101 +951,9 @@ The measurement is cached after the first call.</p>
                     </td>
                 </tr>
 
-
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="hrefTabindex"></a>
-                    <span class="name">
-                        <span ><b>hrefTabindex</b></span>
-                        <a href="#hrefTabindex"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>    <code>unknown</code>
-
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Default value : </i><code>computed(() &#x3D;&gt; this._isActive() ? 0 : -1)</code>
-                    </td>
-                </tr>
-
             <tr>
                 <td class="col-md-4">
-                    <div class="io-description"><p>The tab index value for the tab&#39;s link.</p>
-</div>
-                </td>
-            </tr>
-
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="label"></a>
-                    <span class="name">
-                            <span class="modifier">Readonly</span>
-                        <span ><b>label</b></span>
-                        <a href="#label"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>    <code>unknown</code>
-
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Default value : </i><code>contentChild(EclTabLabelComponent)</code>
-                    </td>
-                </tr>
-
-            <tr>
-                <td class="col-md-4">
-                    <div class="io-description"><p>Reference to the projected tab label component.</p>
-</div>
-                </td>
-            </tr>
-
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="link"></a>
-                    <span class="name">
-                            <span class="modifier">Readonly</span>
-                        <span ><b>link</b></span>
-                        <a href="#link"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>    <code>unknown</code>
-
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Default value : </i><code>viewChild(EclLinkDirective)</code>
-                    </td>
-                </tr>
-
-            <tr>
-                <td class="col-md-4">
-                    <div class="io-description"><p>Reference to the internal link directive used in the tab.</p>
+                    <div class="io-description"><p>The computed id used across the tab&#39;s DOM hooks.</p>
 </div>
                 </td>
             </tr>
@@ -1207,7 +966,6 @@ The measurement is cached after the first call.</p>
                 <td class="col-md-4">
                     <a name="tabLabel"></a>
                     <span class="name">
-                            <span class="modifier">Public</span>
                         <span ><b>tabLabel</b></span>
                         <a href="#tabLabel"><span class="icon ion-ios-link"></span></a>
                     </span>
@@ -1296,34 +1054,6 @@ The measurement is cached after the first call.</p>
 
             </tbody>
         </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="cssClasses"></a>
-                        <span class="name"><b>cssClasses</b><a href="#cssClasses"><span class="icon ion-ios-link"></span></a></span>
-                    </td>
-                </tr>
-
-                <tr>
-                    <td class="col-md-4">
-                        <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 applied 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>
 </section>
 </div>
 

package/docs/components/EclTabLabelComponent.html

@@ -288,6 +288,22 @@ Used as a container for the tab&#39;s visual label content.</p>
             </tbody>
         </table>
 
+        <table class="table table-sm table-bordered index-table">
+            <tbody>
+                <tr>
+                    <td class="col-md-3">
+                        <h6><b>Outputs</b></h6>
+                    </td>
+                    <td class="col-md-9">
+                        <ul class="index-list">
+                            <li>
+                                <span class="reference-badge reference-badge--property" aria-hidden="true">O</span><a href="#class" >class</a>
+                            </li>
+                        </ul>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
 
 
 
@@ -310,6 +326,11 @@ Used as a container for the tab&#39;s visual label content.</p>
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>&#x27;&#x27;</code>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -322,7 +343,7 @@ Used as a container for the tab&#39;s visual label content.</p>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
 
                     </td>
                 </tr>
@@ -338,14 +359,32 @@ Used as a container for the tab&#39;s visual label content.</p>
                 </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/number" target="_blank" >number</a></code>
-
+                        <i>Default value : </i><code>undefined</code>
                     </td>
                 </tr>
             </tbody>
         </table>
 </section>
 
+    <section data-compodoc="block-outputs">
+    <h3 id="outputs">Outputs</h3>
+        <table class="table table-sm table-bordered">
+            <tbody>
+                <tr>
+                    <td class="col-md-4">
+                        <a name="class"></a>
+                        <b>class</b>
+                    </td>
+                </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>
+
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+</section>