@eui/components 19.0.3 → 19.0.4

package/directives/eui-has-permission.directive.d.ts

@@ -2,22 +2,90 @@ import { TemplateRef, ViewContainerRef } from '@angular/core';
 import { EuiPermissionService } from '@eui/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
+/**
+ * @description
+ * A structural directive that conditionally renders content based on user permissions.
+ * Similar to *ngIf, but checks against a permission service to determine visibility.
+ *
+ * @example
+ * ```html
+ * <!-- Single permission check -->
+ * <div *euiHasPermission="['READ_USERS']">
+ *   Content only visible to users with READ_USERS permission
+ * </div>
+ *
+ * <!-- Multiple permission check (AND operation) -->
+ * <div *euiHasPermission="['READ_USERS', 'WRITE_USERS']">
+ *   Content only visible to users with both permissions
+ * </div>
+ * ```
+ *
+ * @usageNotes
+ * The directive performs an AND operation when multiple permissions are provided,
+ * meaning all permissions must be granted for the content to be displayed.
+ */
 export declare class EuiHasPermissionDirective {
     private templateRef;
     private viewContainer;
     private permissionService;
+    /**
+     * @internal
+     * Array storing the current permission requirements
+     */
     private permissions;
+    /**
+     * @internal
+     * Flag tracking whether the content is currently hidden
+     */
     private isHidden;
     constructor(templateRef: TemplateRef<never>, viewContainer: ViewContainerRef, permissionService: EuiPermissionService);
+    /**
+     * @input
+     * @description
+     * Sets the permissions required to display the content. Can be a single permission
+     * string or an array of permission strings.
+     *
+     * @param val - Permission or array of permissions to check
+     */
     set euiHasPermission(val: any);
+    /**
+     * @internal
+     * @description
+     * Updates the view based on the current permission check results.
+     * If permissions are granted, displays the content.
+     * If permissions are not granted, hides the content.
+     */
     private updateView;
+    /**
+     * @internal
+     * @description
+     * Checks if all required permissions are granted.
+     * Uses AND logic - all permissions must be granted for the method to return true.
+     *
+     * @returns {boolean} True if all permissions are granted, false otherwise
+     */
     private checkPermission;
     static ɵfac: i0.ɵɵFactoryDeclaration<EuiHasPermissionDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<EuiHasPermissionDirective, "[euiHasPermission]", never, { "euiHasPermission": { "alias": "euiHasPermission"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<EuiHasPermissionDirective, "[euiHasPermission]", never, { "euiHasPermission": { "alias": "euiHasPermission"; "required": false; }; }, {}, never, never, true, never>;
 }
+/**
+ * @description
+ * Angular module that declares and exports the EuiHasPermissionDirective.
+ * Import this module to use the euiHasPermission directive in your components.
+ *
+ * @example
+ * ```typescript
+ * import { EuiHasPermissionDirectiveModule } from '@eui/components';
+ *
+ * @NgModule({
+ *    imports: [EuiHasPermissionDirectiveModule],
+ * })
+ * export class MyModule {}
+ * ```
+ */
 export declare class EuiHasPermissionDirectiveModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<EuiHasPermissionDirectiveModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<EuiHasPermissionDirectiveModule, [typeof EuiHasPermissionDirective], [typeof i1.CommonModule], [typeof EuiHasPermissionDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EuiHasPermissionDirectiveModule, never, [typeof i1.CommonModule, typeof EuiHasPermissionDirective], [typeof EuiHasPermissionDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<EuiHasPermissionDirectiveModule>;
 }
 //# sourceMappingURL=eui-has-permission.directive.d.ts.map

package/directives/eui-has-permission.directive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"eui-has-permission.directive.d.ts","sourceRoot":"","sources":["../../directives/eui-has-permission.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,WAAW,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE1F,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;;;AAGjD,qBAKa,yBAAyB;IAK9B,OAAO,CAAC,WAAW;IACnB,OAAO,CAAC,aAAa;IACrB,OAAO,CAAC,iBAAiB;IAN7B,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,QAAQ,CAAQ;gBAGZ,WAAW,EAAE,WAAW,CAAC,KAAK,CAAC,EAC/B,aAAa,EAAE,gBAAgB,EAC/B,iBAAiB,EAAE,oBAAoB;IAGnD,IACI,gBAAgB,CAAC,GAAG,KAAA,EAGvB;IAED,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,eAAe;yCA5Bd,yBAAyB;2CAAzB,yBAAyB;CAoCrC;AAED,qBAKa,+BAA+B;yCAA/B,+BAA+B;0CAA/B,+BAA+B,UA3C/B,yBAAyB,qCAAzB,yBAAyB;0CA2CzB,+BAA+B;CAAG"}
+{"version":3,"file":"eui-has-permission.directive.d.ts","sourceRoot":"","sources":["../../directives/eui-has-permission.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,WAAW,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE1F,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;;;AAEjD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAIa,yBAAyB;IAa9B,OAAO,CAAC,WAAW;IACnB,OAAO,CAAC,aAAa;IACrB,OAAO,CAAC,iBAAiB;IAd7B;;;OAGG;IACH,OAAO,CAAC,WAAW,CAAM;IACzB;;;OAGG;IACH,OAAO,CAAC,QAAQ,CAAQ;gBAGZ,WAAW,EAAE,WAAW,CAAC,KAAK,CAAC,EAC/B,aAAa,EAAE,gBAAgB,EAC/B,iBAAiB,EAAE,oBAAoB;IAGnD;;;;;;;OAOG;IACH,IACI,gBAAgB,CAAC,GAAG,KAAA,EAGvB;IAED;;;;;;OAMG;IACH,OAAO,CAAC,UAAU;IAYlB;;;;;;;OAOG;IACH,OAAO,CAAC,eAAe;yCA3Dd,yBAAyB;2CAAzB,yBAAyB;CAmErC;AAED;;;;;;;;;;;;;;GAcG;AACH,qBAIa,+BAA+B;yCAA/B,+BAA+B;0CAA/B,+BAA+B,yCAxF/B,yBAAyB,WAAzB,yBAAyB;0CAwFzB,+BAA+B;CAAG"}

package/directives/eui-maxlength.directive.d.ts

@@ -3,16 +3,53 @@ import { NgControl } from '@angular/forms';
 import { Subscription } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
+/**
+ * @description
+ * A directive that adds maxLength functionality to input and textarea elements with visual feedback.
+ * It shows the remaining characters count and provides visual indication when the limit is reached.
+ *
+ * @selector input[euiMaxlength], textarea[euiMaxlength], [ngModel][euiMaxlength], [formControlName][euiMaxlength]
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <input [euiMaxlength]="50">
+ *
+ * <!-- With form control -->
+ * <input [formControlName]="'name'" [euiMaxlength]="100">
+ *
+ * <!-- Hide maxlength indicator -->
+ * <textarea [euiMaxlength]="200" [isShowMaxlength]="false"></textarea>
+ * ```
+ *
+ * @publicApi
+ */
 export declare class EuiMaxLengthDirective implements AfterContentInit, OnDestroy, OnChanges {
     private el;
     private renderer;
     private control;
     /**
+     * @description
      * It accepts number values to indicate the maxLength of an input. To reset or disable it set the value to null.
      * NULL value will remove any MaxLength indicator even if another input like isShowMaxlength equals true.
      */
     maxLength: number;
+    /**
+     * @description
+     * Controls the visibility of the maxLength indicator.
+     * When true, shows a counter with remaining characters.
+     * When false, hides the counter but maintains the maxLength restriction.
+     *
+     * @default true
+     */
     isShowMaxlength: boolean;
+    /**
+     * @description
+     * Emits when the input value length reaches or exceeds the maxLength limit.
+     * Emits true when limit is reached, false when below limit.
+     *
+     * @emits {boolean} True when max length is reached, false otherwise
+     */
     maxLengthReached: EventEmitter<boolean>;
     valueChangesSubscription: Subscription;
     private maxLengthSpan;
@@ -25,40 +62,87 @@ export declare class EuiMaxLengthDirective implements AfterContentInit, OnDestro
     onChange(event: Event): void;
     onInput(event: KeyboardEvent): void;
     onPaste(event: ClipboardEvent): void;
+    /**
+     * Sets a custom function to calculate the length of the input value.
+     * Useful for implementing custom length calculation logic (e.g., counting characters differently).
+     *
+     * @param fn Function that takes a string input and returns its calculated length
+     *
+     * @example
+     * ```typescript
+     * // Custom length calculation excluding spaces
+     * directive.setLengthCalcFactory((value: string) => value.replace(/\s/g, '').length);
+     * ```
+     */
     setLengthCalcFactory(fn: (input: string) => number): void;
     /**
-     * calculates the maxLength of an input element. Calculation is made
-     * against the value of the Model or Input Element.
-     * @param value Optional the value to calculate max length against (override the Model one)
+     * Calculates the maximum length for the input element based on current value or provided value.
+     *
+     * @param value Optional value to calculate max length against (overrides the current input value)
+     * @returns {number} Calculated maximum length
      * @private
      */
     private calculateMaxLength;
+    /**
+     * @description
+     * Refreshes the visual state of the maxLength indicator and updates input restrictions.
+     * - Updates the remaining characters count
+     * - Applies/removes error styling
+     * - Emits maxLengthReached event
+     * - Truncates value if it exceeds maxLength
+     *
+     * @private
+     */
     private _refreshValue;
     /**
-     * creates the maxLength box by adding it to DOM and attaching correct Classes
-     * for Wrapper and Span (actual box holding max length)
+     * @description
+     * Creates the maxLength indicator box in the DOM.
+     * Wraps the input element and adds the counter span with appropriate styling.
+     *
      * @private
      */
     private createMaxLengthBox;
     /**
-     * destroys the maxLength box from DOM
+     * @description
+     * Removes the maxLength indicator box from the DOM.
+     * Restores the original DOM structure by unwrapping the input element.
+     *
      * @private
      */
     private destroyMaxLengthBox;
     /**
-     * returns the value based on whether control is present and control's
-     * updateOn strategy.
+     * @description
+     * Returns the current value of the input element.
+     * Handles different update strategies when used with forms.
+     *
+     * @returns {string} Current input value
      * @private
      */
     private getValue;
     static ɵfac: i0.ɵɵFactoryDeclaration<EuiMaxLengthDirective, [null, null, { optional: true; self: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<EuiMaxLengthDirective, "    input[euiMaxlength],    textarea[euiMaxlength],    [ngModel][euiMaxlength],    [formControlName][euiMaxlength]", never, { "maxLength": { "alias": "euiMaxlength"; "required": false; }; "isShowMaxlength": { "alias": "isShowMaxlength"; "required": false; }; }, { "maxLengthReached": "maxLengthReached"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<EuiMaxLengthDirective, "    input[euiMaxlength],    textarea[euiMaxlength],    [ngModel][euiMaxlength],    [formControlName][euiMaxlength]", never, { "maxLength": { "alias": "euiMaxlength"; "required": false; }; "isShowMaxlength": { "alias": "isShowMaxlength"; "required": false; }; }, { "maxLengthReached": "maxLengthReached"; }, never, never, true, never>;
     static ngAcceptInputType_maxLength: unknown;
     static ngAcceptInputType_isShowMaxlength: unknown;
 }
+/**
+ * @description
+ * Module that provides the EuiMaxLengthDirective.
+ * Import this module to use the directive in your application.
+ *
+ * @example
+ * ```typescript
+ * @NgModule({
+ *   imports: [EuiMaxLengthDirectiveModule]
+ * })
+ * export class MyModule { }
+ * ```
+ *
+ * @deprecated Use {@link `EuiMaxLengthDirective`} instead.
+ * @publicApi
+ */
 export declare class EuiMaxLengthDirectiveModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<EuiMaxLengthDirectiveModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<EuiMaxLengthDirectiveModule, [typeof EuiMaxLengthDirective], [typeof i1.CommonModule], [typeof EuiMaxLengthDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EuiMaxLengthDirectiveModule, never, [typeof i1.CommonModule, typeof EuiMaxLengthDirective], [typeof EuiMaxLengthDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<EuiMaxLengthDirectiveModule>;
 }
 //# sourceMappingURL=eui-maxlength.directive.d.ts.map

package/directives/eui-maxlength.directive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"eui-maxlength.directive.d.ts","sourceRoot":"","sources":["../../directives/eui-maxlength.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAEH,UAAU,EAGV,gBAAgB,EAEhB,YAAY,EACZ,SAAS,EAIT,SAAS,EACT,aAAa,EACb,SAAS,EAGZ,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;;;AAGpC,qBAQa,qBAAsB,YAAW,gBAAgB,EAAE,SAAS,EAAE,SAAS;IAepE,OAAO,CAAC,EAAE;IACV,OAAO,CAAC,QAAQ;IACI,OAAO,CAAC,OAAO;IAhB/C;;;OAGG;IAC0D,SAAS,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,OAAO,CAAQ;IACvF,gBAAgB,EAAE,YAAY,CAAC,OAAO,CAAC,CAA+B;IAEhF,wBAAwB,EAAE,YAAY,CAAC;IAEvC,OAAO,CAAC,aAAa,CAAkB;IACvC,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,YAAY,CAAe;gBAEf,EAAE,EAAE,UAAU,EACd,QAAQ,EAAE,SAAS,EACC,OAAO,EAAE,SAAS;IAK1D,WAAW;IAUX,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI;IA0BzC,kBAAkB;IAgBlB,QAAQ,CAAC,KAAK,EAAE,KAAK;IAOrB,OAAO,CAAC,KAAK,EAAE,aAAa;IAO5B,OAAO,CAAC,KAAK,EAAE,cAAc;IAUtB,oBAAoB,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI;IAOhE;;;;;OAKG;IACH,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,aAAa;IAkCrB;;;;OAIG;IACH,OAAO,CAAC,kBAAkB;IA2B1B;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IAoB3B;;;;OAIG;IACH,OAAO,CAAC,QAAQ;yCAnNP,qBAAqB;2CAArB,qBAAqB;wCAiOq5uQ,OAAQ;8CAAtqrO,OAAQ;CAVhyjC;AAED,qBAKa,2BAA2B;yCAA3B,2BAA2B;0CAA3B,2BAA2B,UA9N3B,qBAAqB,qCAArB,qBAAqB;0CA8NrB,2BAA2B;CACvC"}
+{"version":3,"file":"eui-maxlength.directive.d.ts","sourceRoot":"","sources":["../../directives/eui-maxlength.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAEH,UAAU,EAGV,gBAAgB,EAEhB,YAAY,EACZ,SAAS,EAIT,SAAS,EACT,aAAa,EACb,SAAS,EAGZ,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;;;AAEpC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAQa,qBAAsB,YAAW,gBAAgB,EAAE,SAAS,EAAE,SAAS;IA+BpE,OAAO,CAAC,EAAE;IACV,OAAO,CAAC,QAAQ;IACI,OAAO,CAAC,OAAO;IAhC/C;;;;OAIG;IAC0D,SAAS,EAAE,MAAM,CAAC;IAC/E;;;;;;;OAOG;IACqC,eAAe,UAAQ;IAC/D;;;;;;OAMG;IACO,gBAAgB,EAAE,YAAY,CAAC,OAAO,CAAC,CAA+B;IAEhF,wBAAwB,EAAE,YAAY,CAAC;IAEvC,OAAO,CAAC,aAAa,CAAkB;IACvC,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,YAAY,CAAe;gBAEf,EAAE,EAAE,UAAU,EACd,QAAQ,EAAE,SAAS,EACC,OAAO,EAAE,SAAS;IAK1D,WAAW,IAAI,IAAI;IAUnB,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI;IA0BzC,kBAAkB,IAAI,IAAI;IAgB1B,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAO5B,OAAO,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAOnC,OAAO,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IAUpC;;;;;;;;;;;OAWG;IACI,oBAAoB,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI;IAOhE;;;;;;OAMG;IACH,OAAO,CAAC,kBAAkB;IAK1B;;;;;;;;;OASG;IACH,OAAO,CAAC,aAAa;IAkCrB;;;;;;OAMG;IACH,OAAO,CAAC,kBAAkB;IA2B1B;;;;;;OAMG;IACH,OAAO,CAAC,mBAAmB;IAoB3B;;;;;;;OAOG;IACH,OAAO,CAAC,QAAQ;yCAlQP,qBAAqB;2CAArB,qBAAqB;wCA8R42pQ,OAAQ;8CAAtqrO,OAAQ;CAxBvv+B;AAED;;;;;;;;;;;;;;;GAeG;AACH,qBAIa,2BAA2B;yCAA3B,2BAA2B;0CAA3B,2BAA2B,yCA5R3B,qBAAqB,WAArB,qBAAqB;0CA4RrB,2BAA2B;CACvC"}

package/docs/components/EuiAlertComponent.html

@@ -109,6 +109,16 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Alert displays a short, important message to attract the user&#39;s attention without interrupting its task.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html"></code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-alert&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu.
+&lt;/eui-alert&gt;</code></pre></div><p>See <a href="https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-alert">https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-alert</a>.</p>
+
+    </p>
 
 
     <p class="comment">
@@ -380,6 +390,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Sets the <code>aria-describedby</code> attribute for the host element.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -401,6 +417,12 @@
                         <i>Default value : </i><code>&#x27;eui-alert&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Sets the <code>data-e2e</code> attribute for the host element. Default: <code>eui-alert</code>.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -422,6 +444,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Removes the left border and icon from the alert.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -443,6 +471,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Allows the alert to be closed by the user.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -464,6 +498,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Allows the alert to be focused by the user.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -485,6 +525,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Removes the left border and icon from the alert.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -506,6 +552,12 @@
                         <i>Default value : </i><code>true</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Controls the visibility of the alert. Default: true</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -525,6 +577,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Event emitted when the alert is closed.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -552,6 +610,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Sets the <code>role</code> attribute for the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -573,6 +637,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Sets the <code>tabindex</code> attribute for the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -594,6 +664,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Sets the <code>class</code> attribute for the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -627,6 +703,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Hide the alert and emits the <code>closeAlert</code> event when the close button is clicked.</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>
@@ -712,6 +790,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Content for the alert title given by <code>&lt;eui-alert-title&gt;</code>.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -770,6 +854,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Sets the <code>role</code> attribute for the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -793,6 +883,19 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Sets the <code>class</code> attribute for the host element.</p>
+</div>
+
+                                <div>
+                                </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>
@@ -810,6 +913,19 @@
                         <span class="accessor"><b>get</b><code>ariaDescribedBy()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Sets the <code>aria-describedby</code> attribute for the host element.</p>
+</div>
+
+                                <div>
+                                </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>
@@ -827,6 +943,19 @@
                         <span class="accessor"><b>get</b><code>tabindex()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Sets the <code>tabindex</code> attribute for the host element.</p>
+</div>
+
+                                <div>
+                                </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/EuiAlertTitleComponent.html

@@ -225,6 +225,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Sets the <code>class</code> attribute for the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -270,6 +276,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Sets the <code>class</code> attribute for the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>