@eui/components 18.0.0-next.29 → 18.0.0-next.30

package/docs/components/EuiDialogComponent.html

@@ -117,12 +117,6 @@
 
 
 
-    <p class="comment">
-        <h3>Extends</h3>
-    </p>
-    <p class="comment">
-                    <code><a href="../directives/BaseDirective.html" target="_self" >BaseDirective</a></code>
-    </p>
 
     <p class="comment">
         <h3>Implements</h3>
@@ -150,6 +144,14 @@
                 <td class="col-md-9"><code>ViewEncapsulation.None</code></td>
             </tr>
 
+                <tr>
+                    <td class="col-md-3">HostDirectives</td>
+                    <td class="col-md-9">
+                                    <code><a href="../directives/BaseStatesDirective.html" target="_self" >BaseStatesDirective</a></code>
+<br/>
+                                    <div><i>&nbsp;Inputs</i> : euiPrimary&nbsp;euiSecondary&nbsp;euiInfo&nbsp;euiSuccess&nbsp;euiWarning&nbsp;euiDanger&nbsp;euiAccent&nbsp;euiVariant&nbsp;</div>
+                    </td>
+                </tr>
 
 
 
@@ -207,6 +209,10 @@
                 <tr>
                     <td class="col-md-4">
                         <ul class="index-list">
+                            <li>
+                                    <span class="modifier">Public</span>
+                                <a href="#baseStatesDirective" >baseStatesDirective</a>
+                            </li>
                             <li>
                                     <span class="modifier">Public</span>
                                 <a href="#content" >content</a>
@@ -271,9 +277,6 @@
                                     <span class="modifier">Public</span>
                                 <a href="#openDialog" >openDialog</a>
                             </li>
-                            <li>
-                                <a href="#getCssClasses" >getCssClasses</a>
-                            </li>
                         </ul>
                     </td>
                 </tr>
@@ -356,7 +359,7 @@
                                 <a href="#title" >title</a>
                             </li>
                             <li>
-                                <a href="#typeClass" >typeClass</a>
+                                <a href="#typeClass" class="deprecated-name">typeClass</a>
                             </li>
                             <li>
                                 <a href="#verticalPosition" >verticalPosition</a>
@@ -364,90 +367,6 @@
                             <li>
                                 <a href="#width" >width</a>
                             </li>
-                            <li>
-                                <a href="#euiAccent" >euiAccent</a>
-                            </li>
-                            <li>
-                                <a href="#euiClearable" >euiClearable</a>
-                            </li>
-                            <li>
-                                <a href="#euiCompact" >euiCompact</a>
-                            </li>
-                            <li>
-                                <a href="#euiDanger" >euiDanger</a>
-                            </li>
-                            <li>
-                                <a href="#euiDisabled" >euiDisabled</a>
-                            </li>
-                            <li>
-                                <a href="#euiHighlighted" >euiHighlighted</a>
-                            </li>
-                            <li>
-                                <a href="#euiInfo" >euiInfo</a>
-                            </li>
-                            <li>
-                                <a href="#euiLoading" >euiLoading</a>
-                            </li>
-                            <li>
-                                <a href="#euiOutline" >euiOutline</a>
-                            </li>
-                            <li>
-                                <a href="#euiPrimary" >euiPrimary</a>
-                            </li>
-                            <li>
-                                <a href="#euiResponsive" >euiResponsive</a>
-                            </li>
-                            <li>
-                                <a href="#euiRounded" >euiRounded</a>
-                            </li>
-                            <li>
-                                <a href="#euiSecondary" >euiSecondary</a>
-                            </li>
-                            <li>
-                                <a href="#euiSize2XL" >euiSize2XL</a>
-                            </li>
-                            <li>
-                                <a href="#euiSize2XS" >euiSize2XS</a>
-                            </li>
-                            <li>
-                                <a href="#euiSize3XL" >euiSize3XL</a>
-                            </li>
-                            <li>
-                                <a href="#euiSize4XL" >euiSize4XL</a>
-                            </li>
-                            <li>
-                                <a href="#euiSize5XL" >euiSize5XL</a>
-                            </li>
-                            <li>
-                                <a href="#euiSizeL" >euiSizeL</a>
-                            </li>
-                            <li>
-                                <a href="#euiSizeM" >euiSizeM</a>
-                            </li>
-                            <li>
-                                <a href="#euiSizeS" >euiSizeS</a>
-                            </li>
-                            <li>
-                                <a href="#euiSizeVariant" >euiSizeVariant</a>
-                            </li>
-                            <li>
-                                <a href="#euiSizeXL" >euiSizeXL</a>
-                            </li>
-                            <li>
-                                <a href="#euiSizeXS" >euiSizeXS</a>
-                            </li>
-                            <li>
-                                <a href="#euiSuccess" >euiSuccess</a>
-                            </li>
-                            <li>
-                                <a href="#euiVariant" >euiVariant</a>
-                            </li>
-                            <li>
-                                <a href="#euiWarning" >euiWarning</a>
-                            </li>
-                            <li>
-                                <a href="#styleClass" >styleClass</a>
-                            </li>
                         </ul>
                     </td>
                 </tr>
@@ -482,20 +401,6 @@
                     </td>
                 </tr>
 
-                <tr>
-                    <td class="col-md-4">
-                        <h6><b>HostBindings</b></h6>
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <ul class="index-list">
-                            <li>
-                                <a href="#attr.aria-disabled" >attr.aria-disabled</a>
-                            </li>
-                        </ul>
-                    </td>
-                </tr>
 
 
                     <tr>
@@ -522,7 +427,7 @@
             <tbody>
                 <tr>
                     <td class="col-md-4">
-<code>constructor(viewContainerRef: ViewContainerRef, euiDialogService: <a href="../injectables/EuiDialogService.html" target="_self">EuiDialogService</a>)</code>
+<code>constructor(viewContainerRef: ViewContainerRef, euiDialogService: <a href="../injectables/EuiDialogService.html" target="_self">EuiDialogService</a>, baseStatesDirective: <a href="../directives/BaseStatesDirective.html" target="_self">BaseStatesDirective</a>)</code>
                     </td>
                 </tr>
 
@@ -563,6 +468,18 @@
                                                     </td>
                                                     
                                                 </tr>
+                                                <tr>
+                                                        <td>baseStatesDirective</td>
+                                                  
+                                                        <td>
+                                                                        <code><a href="../directives/BaseStatesDirective.html" target="_self" >BaseStatesDirective</a></code>
+                                                        </td>
+                                                  
+                                                    <td>
+                                                            No
+                                                    </td>
+                                                    
+                                                </tr>
                                         </tbody>
                                     </table>
                             </div>
@@ -1062,7 +979,7 @@
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>    <code>&quot;primary&quot; | &quot;secondary&quot; | &quot;info&quot; | &quot;success&quot; | &quot;warning&quot; | &quot;danger&quot; | &quot;accent&quot;</code>
+                        <i>Type : </i>    <code>&quot;primary&quot; | &quot;secondary&quot; | &quot;info&quot; | &quot;success&quot; | &quot;warning&quot; | &quot;danger&quot; | &quot;accent&quot; | string</code>
 
                     </td>
                 </tr>
@@ -1105,17 +1022,20 @@
                 </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="euiAccent"></a>
-                        <b>euiAccent</b>
+                        <a name="accept"></a>
+                        <b>accept</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>EventEmitter</code>
 
                     </td>
                 </tr>
@@ -1125,13 +1045,13 @@
             <tbody>
                 <tr>
                     <td class="col-md-4">
-                        <a name="euiClearable"></a>
-                        <b>euiClearable</b>
+                        <a name="clickOutside"></a>
+                        <b>clickOutside</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>EventEmitter</code>
 
                     </td>
                 </tr>
@@ -1141,13 +1061,13 @@
             <tbody>
                 <tr>
                     <td class="col-md-4">
-                        <a name="euiCompact"></a>
-                        <b>euiCompact</b>
+                        <a name="dialogClose"></a>
+                        <b>dialogClose</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>EventEmitter</code>
 
                     </td>
                 </tr>
@@ -1157,13 +1077,13 @@
             <tbody>
                 <tr>
                     <td class="col-md-4">
-                        <a name="euiDanger"></a>
-                        <b>euiDanger</b>
+                        <a name="dialogOpen"></a>
+                        <b>dialogOpen</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>EventEmitter</code>
 
                     </td>
                 </tr>
@@ -1173,13 +1093,13 @@
             <tbody>
                 <tr>
                     <td class="col-md-4">
-                        <a name="euiDisabled"></a>
-                        <b>euiDisabled</b>
+                        <a name="dismiss"></a>
+                        <b>dismiss</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>EventEmitter</code>
 
                     </td>
                 </tr>
@@ -1189,529 +1109,55 @@
             <tbody>
                 <tr>
                     <td class="col-md-4">
-                        <a name="euiHighlighted"></a>
-                        <b>euiHighlighted</b>
+                        <a name="escape"></a>
+                        <b>escape</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>EventEmitter</code>
 
                     </td>
                 </tr>
             </tbody>
         </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="euiInfo"></a>
-                        <b>euiInfo</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>
+</section>
 
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="euiLoading"></a>
-                        <b>euiLoading</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>
 
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="euiOutline"></a>
-                        <b>euiOutline</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>
+    <section data-compodoc="block-methods">
+    
+    <h3 id="methods">
+        Methods
+    </h3>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="closeDialog"></a>
+                    <span class="name">
+                            <span class="modifier">Public</span>
+                        <span ><b>closeDialog</b></span>
+                        <a href="#closeDialog"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+            <tr>
+                <td class="col-md-4">
+                        <span class="modifier-icon icon ion-ios-reset"></span>
+                    <code>closeDialog()</code>
+                </td>
+            </tr>
 
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="euiPrimary"></a>
-                        <b>euiPrimary</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>
 
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="euiResponsive"></a>
-                        <b>euiResponsive</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>
 
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="euiRounded"></a>
-                        <b>euiRounded</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>
 
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="euiSecondary"></a>
-                        <b>euiSecondary</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>
+            <tr>
+                <td class="col-md-4">
+                        <div class="io-description"><p>Close a Dialog</p>
+</div>
 
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="euiSize2XL"></a>
-                        <b>euiSize2XL</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>
-
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="euiSize2XS"></a>
-                        <b>euiSize2XS</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>
-
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="euiSize3XL"></a>
-                        <b>euiSize3XL</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>
-
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="euiSize4XL"></a>
-                        <b>euiSize4XL</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>
-
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="euiSize5XL"></a>
-                        <b>euiSize5XL</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>
-
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="euiSizeL"></a>
-                        <b>euiSizeL</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>
-
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="euiSizeM"></a>
-                        <b>euiSizeM</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>
-
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="euiSizeS"></a>
-                        <b>euiSizeS</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>
-
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="euiSizeVariant"></a>
-                        <b>euiSizeVariant</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>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="euiSizeXL"></a>
-                        <b>euiSizeXL</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>
-
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="euiSizeXS"></a>
-                        <b>euiSizeXS</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>
-
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="euiSuccess"></a>
-                        <b>euiSuccess</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>
-
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="euiVariant"></a>
-                        <b>euiVariant</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>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="euiWarning"></a>
-                        <b>euiWarning</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>
-
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="styleClass"></a>
-                        <b>styleClass</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>
-    <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="accept"></a>
-                        <b>accept</b>
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>    <code>EventEmitter</code>
-
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="clickOutside"></a>
-                        <b>clickOutside</b>
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>    <code>EventEmitter</code>
-
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="dialogClose"></a>
-                        <b>dialogClose</b>
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>    <code>EventEmitter</code>
-
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="dialogOpen"></a>
-                        <b>dialogOpen</b>
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>    <code>EventEmitter</code>
-
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="dismiss"></a>
-                        <b>dismiss</b>
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>    <code>EventEmitter</code>
-
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="escape"></a>
-                        <b>escape</b>
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>    <code>EventEmitter</code>
-
-                    </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="attr.aria-disabled"></a>
-                    <span class="name">
-                        <span ><b>attr.aria-disabled</b></span>
-                        <a href="#attr.aria-disabled"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </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>
-
-                    </td>
-                </tr>
-
-
-        </tbody>
-    </table>
-</section>
-
-
-    <section data-compodoc="block-methods">
-    
-    <h3 id="methods">
-        Methods
-    </h3>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="closeDialog"></a>
-                    <span class="name">
-                            <span class="modifier">Public</span>
-                        <span ><b>closeDialog</b></span>
-                        <a href="#closeDialog"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-            <tr>
-                <td class="col-md-4">
-                        <span class="modifier-icon icon ion-ios-reset"></span>
-                    <code>closeDialog()</code>
-                </td>
-            </tr>
-
-
-
-
-            <tr>
-                <td class="col-md-4">
-                        <div class="io-description"><p>Close a Dialog</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 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>
@@ -1910,73 +1356,34 @@
             </tr>
         </tbody>
     </table>
+</section>
+    <section data-compodoc="block-properties">
+    
+    <h3 id="inputs">
+        Properties
+    </h3>
     <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="getCssClasses"></a>
+                    <a name="baseStatesDirective"></a>
                     <span class="name">
-                        <span ><b>getCssClasses</b></span>
-                        <a href="#getCssClasses"><span class="icon ion-ios-link"></span></a>
+                            <span class="modifier">Public</span>
+                        <span ><b>baseStatesDirective</b></span>
+                        <a href="#baseStatesDirective"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
-            <tr>
-                <td class="col-md-4">
-<code>getCssClasses(rootClass: <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">
+                        <i>Type : </i>        <code><a href="../directives/BaseStatesDirective.html" target="_self" >BaseStatesDirective</a></code>
 
-            <tr>
-                <td class="col-md-4">
+                    </td>
+                </tr>
 
-                            <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>rootClass</td>
-                                            <td>
-                                                            <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
-                                            </td>
-
-                                            <td>
-                                                    No
-                                            </td>
-
-
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </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>
-                            <div class="io-description">
-                                
-                            </div>
-                </td>
-            </tr>
         </tbody>
     </table>
-</section>
-    <section data-compodoc="block-properties">
-    
-    <h3 id="inputs">
-        Properties
-    </h3>
     <table class="table table-sm table-bordered">
         <tbody>
             <tr>
@@ -2205,7 +1612,9 @@
                         <td class="col-md-4">
                                 <div class="io-description"><p>Whether the eui-dialog is open.</p>
 <b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-dialog #dialog&gt;
-     &lt;my-component *ngIf=&quot;dialog.isOpen&quot;&gt;&lt;/my-component&gt;
+     \&#64;if (dialog.isOpen) {
+         &lt;my-component&gt;&lt;/my-component&gt;
+     }
 &lt;/eui-dialog&gt;</code></pre></div></div>
 
                                 <div>