npm - @eui/components - Versions diffs - 18.0.0-next.29 → 18.0.0-next.30 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (178) hide show

package/fesm2022/eui-components-eui-dialog.mjs CHANGED Viewed

@@ -44,13 +44,13 @@ import { ComponentPortal, TemplatePortal } from "@angular/cdk/portal";
 import { BehaviorSubject, Subject } from "rxjs";
 import { takeUntil } from "rxjs/operators";
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "@eui/components/eui-button";
-import * as i3 from "@eui/components/eui-icon";
-import * as i4 from "@angular/cdk/portal";
-import * as i5 from "@angular/cdk/scrolling";
-import * as i6 from "@angular/cdk/a11y";
-import * as i7 from "@angular/cdk/drag-drop";
+import * as i1 from "@eui/components/eui-button";
+import * as i2 from "@eui/components/eui-icon";
+import * as i3 from "@angular/cdk/portal";
+import * as i4 from "@angular/cdk/scrolling";
+import * as i5 from "@angular/cdk/a11y";
+import * as i6 from "@angular/cdk/drag-drop";
+import * as i7 from "@angular/common";
 import * as i8 from "@ngx-translate/core";
 var EuiDialogContainerComponent = class _EuiDialogContainerComponent {
   constructor(dialogContainerConfig, injector, cd) {
@@ -198,7 +198,7 @@ var EuiDialogContainerComponent = class _EuiDialogContainerComponent {
     this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: _EuiDialogContainerComponent, deps: [{ token: DIALOG_CONTAINER_CONFIG }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EuiDialogContainerComponent, selector: "eui-dialog-container", host: { properties: { "class": "this.string", "attr.aria-modal": "this.ariaModal" } }, ngImport: i0, template: `<div
+    this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: _EuiDialogContainerComponent, selector: "eui-dialog-container", host: { properties: { "class": "this.string", "attr.aria-modal": "this.ariaModal" } }, ngImport: i0, template: `<div
     class="eui-dialog eui-dialog--{{ dialogContainerConfig.typeClass }}"
     [class.eui-dialog--draggable]="dialogContainerConfig.isDraggable"
     [class.eui-dialog--message-box]="dialogContainerConfig.isMessageBox"
@@ -216,27 +216,28 @@ var EuiDialogContainerComponent = class _EuiDialogContainerComponent {
     cdkTrapFocusAutoCapture>
     <div class="eui-dialog__content" role="document" id="dialogContent" aria-labelledby="headerTitle">
         <div class="eui-dialog__header" [class.eui-dialog__header--handle-disabled]="!dialogContainerConfig.isDraggable" cdkDragHandle>
-            <ng-container *ngIf="!isHeaderTemplatePortal && !isHeaderComponentPortal">
+            @if (!isHeaderTemplatePortal && !isHeaderComponentPortal) {
                 <h5 id="headerTitle" class="eui-dialog__header-title">{{ dialogContainerConfig.title | translate }}</h5>
-                <button
-                    *ngIf="dialogContainerConfig.hasCloseButton"
-                    class="dialog-close-button"
-                    (click)="closeDialog()"
-                    euiButton
-                    euiIconButton
-                    euiRounded
-                    euiBasicButton
-                    euiSizeS
-                    aria-label="Dialog close icon">
-                    <eui-icon-svg icon="eui-close"></eui-icon-svg>
-                </button>
-            </ng-container>
-            <ng-container *ngIf="isHeaderTemplatePortal">
+                @if (dialogContainerConfig.hasCloseButton) {
+                    <button
+                        class="dialog-close-button"
+                        (click)="closeDialog()"
+                        euiButton
+                        euiIconButton
+                        euiRounded
+                        euiBasicButton
+                        euiSizeS
+                        aria-label="Dialog close icon">
+                        <eui-icon-svg icon="eui-close"></eui-icon-svg>
+                    </button>
+                }
+            }
+            @if (isHeaderTemplatePortal) {
                 <ng-template [cdkPortalOutlet]="dialogContainerConfig.header"></ng-template>
-            </ng-container>
-            <ng-container *ngIf="isHeaderComponentPortal">
+            }
+            @if (isHeaderComponentPortal) {
                 <ng-template [cdkPortalOutlet]="headerComponentPortal" (attached)="portalAttached($event, 'headerComponent')"></ng-template>
-            </ng-container>
+            }
         </div>
         <div
             class="eui-dialog__body"
@@ -245,81 +246,94 @@ var EuiDialogContainerComponent = class _EuiDialogContainerComponent {
             [style.max-height]="dialogContainerConfig.height"
             (scroll)="onScroll()"
             tabindex="0">
-            <span *ngIf="dialogContainerConfig.isMessageBox" class="eui-dialog__body-content-icon-container">
-                <div class="eui-dialog__body-content-icon">
-                    <ng-container *ngIf="dialogContainerConfig.typeClass === 'primary'">
-                        <eui-icon-svg icon="eui-question" fillColor="{{ dialogContainerConfig.typeClass }}"></eui-icon-svg>
-                    </ng-container>
-                    <ng-container *ngIf="dialogContainerConfig.typeClass === 'secondary'">
-                        <eui-icon-svg icon="eui-ecl-warning" fillColor="{{ dialogContainerConfig.typeClass }}"></eui-icon-svg>
-                    </ng-container>
-                    <ng-container *ngIf="dialogContainerConfig.typeClass === 'info'">
-                        <eui-icon-svg icon="eui-info" fillColor="{{ dialogContainerConfig.typeClass }}"></eui-icon-svg>
-                    </ng-container>
-                    <ng-container *ngIf="dialogContainerConfig.typeClass === 'success'">
-                        <eui-icon-svg icon="eui-check" fillColor="{{ dialogContainerConfig.typeClass }}"></eui-icon-svg>
-                    </ng-container>
-                    <ng-container *ngIf="dialogContainerConfig.typeClass === 'warning'">
-                        <eui-icon-svg icon="eui-ecl-warning" fillColor="{{ dialogContainerConfig.typeClass }}"></eui-icon-svg>
-                    </ng-container>
-                    <ng-container *ngIf="dialogContainerConfig.typeClass === 'danger'">
-                        <eui-icon-svg icon="eui-ecl-error" fillColor="{{ dialogContainerConfig.typeClass }}"></eui-icon-svg>
-                    </ng-container>
+            @if (dialogContainerConfig.isMessageBox) {
+                <span class="eui-dialog__body-content-icon-container">
+                    <div class="eui-dialog__body-content-icon">
+                        @if (dialogContainerConfig.typeClass === 'primary' || dialogContainerConfig.typeClass === '') {
+                            <eui-icon-svg icon="eui-question" fillColor="{{ dialogContainerConfig.typeClass }}"></eui-icon-svg>
+                        }
+                        @if (dialogContainerConfig.typeClass === 'secondary') {
+                            <eui-icon-svg icon="eui-ecl-warning" fillColor="{{ dialogContainerConfig.typeClass }}"></eui-icon-svg>
+                        }
+                        @if (dialogContainerConfig.typeClass === 'info') {
+                            <eui-icon-svg icon="eui-info" fillColor="{{ dialogContainerConfig.typeClass }}"></eui-icon-svg>
+                        }
+                        @if (dialogContainerConfig.typeClass === 'success') {
+                            <eui-icon-svg icon="eui-check" fillColor="{{ dialogContainerConfig.typeClass }}"></eui-icon-svg>
+                        }
+                        @if (dialogContainerConfig.typeClass === 'warning') {
+                            <eui-icon-svg icon="eui-ecl-warning" fillColor="{{ dialogContainerConfig.typeClass }}"></eui-icon-svg>
+                        }
+                        @if (dialogContainerConfig.typeClass === 'danger') {
+                            <eui-icon-svg icon="eui-ecl-error" fillColor="{{ dialogContainerConfig.typeClass }}"></eui-icon-svg>
+                        }
+                    </div>
+                </span>
+            }
+            @if (!isBodyTemplatePortal && !isBodyComponentPortal) {
+                <div
+                    id="containerConfigId"
+                    class="eui-dialog__body-content not-isBodyTemplatePortal"
+                    [innerHTML]="dialogContainerConfig.content ? (dialogContainerConfigContent | translate) : null">
                 </div>
-            </span>
-            <div
-                *ngIf="!isBodyTemplatePortal && !isBodyComponentPortal"
-                id="containerConfigId"
-                class="eui-dialog__body-content not-isBodyTemplatePortal"
-                [innerHTML]="dialogContainerConfig.content ? (dialogContainerConfigContent | translate) : null"></div>
-            <div *ngIf="isBodyTemplatePortal && !isBodyComponentPortal" id="bodyTemplatePortalId" class="eui-dialog__body-content isBodyTemplatePortal">
-                <ng-template [cdkPortalOutlet]="getPortalOutlet"></ng-template>
-            </div>
-            <div *ngIf="isBodyComponentPortal" id="bodyComponentPortalId" class="eui-dialog__body-content isBodyComponentPortal">
-                <ng-template [cdkPortalOutlet]="bodyComponentPortal" (attached)="portalAttached($event, 'bodyComponent')"></ng-template>
-            </div>
+            }
+            @if (isBodyTemplatePortal && !isBodyComponentPortal) {
+                <div id="bodyTemplatePortalId" class="eui-dialog__body-content isBodyTemplatePortal">
+                    <ng-template [cdkPortalOutlet]="getPortalOutlet"></ng-template>
+                </div>
+            }
+            @if (isBodyComponentPortal) {
+                <div id="bodyComponentPortalId" class="eui-dialog__body-content isBodyComponentPortal">
+                    <ng-template [cdkPortalOutlet]="bodyComponentPortal" (attached)="portalAttached($event, 'bodyComponent')"></ng-template>
+                </div>
+            }
         </div>
-        <div class="eui-dialog__footer" *ngIf="dialogContainerConfig.hasFooter">
-            <ng-container *ngIf="!isFooterTemplatePortal && !isFooterComponentPortal">
-                <ng-container *ngIf="isFooterTemplatePortal">
+        @if (dialogContainerConfig.hasFooter) {
+            <div class="eui-dialog__footer">
+                @if (!isFooterTemplatePortal && !isFooterComponentPortal) {
+                    @if (isFooterTemplatePortal) {
+                        <ng-template [cdkPortalOutlet]="dialogContainerConfig.footer"></ng-template>
+                    }
+                    @if (!isFooterTemplatePortal) {
+                        <div class="eui-dialog__footer-content">
+                            @if (dialogContainerConfig.hasDismissButton) {
+                                <button
+                                    euiButton
+                                    type="button"
+                                    [euiDisabled]="dismissButtonDisabled$ | async"
+                                    class="eui-dialog__footer-dismiss-button"
+                                    [class.eui-dialog__footer-dismiss-button--with-accept-button]="dialogContainerConfig.hasAcceptButton"
+                                    (click)="onDismiss()">
+                                    {{ dialogContainerConfig.dismissLabel | translate }}
+                                </button>
+                            }
+                            @if (dialogContainerConfig.hasAcceptButton) {
+                                <button
+                                    euiButton
+                                    euiPrimary
+                                    type="button"
+                                    [euiDisabled]="acceptButtonDisabled$ | async"
+                                    class="eui-dialog__footer-accept-button"
+                                    (click)="onAccept()">
+                                    {{ dialogContainerConfig.acceptLabel | translate }}
+                                </button>
+                            }
+                        </div>
+                    }
+                }
+                @if (isFooterTemplatePortal) {
                     <ng-template [cdkPortalOutlet]="dialogContainerConfig.footer"></ng-template>
-                </ng-container>
-                <ng-container *ngIf="!isFooterTemplatePortal">
-                    <div class="eui-dialog__footer-content">
-                        <button
-                            euiButton
-                            type="button"
-                            *ngIf="dialogContainerConfig.hasDismissButton"
-                            [euiDisabled]="dismissButtonDisabled$ | async"
-                            class="eui-dialog__footer-dismiss-button"
-                            [class.eui-dialog__footer-dismiss-button--with-accept-button]="dialogContainerConfig.hasAcceptButton"
-                            (click)="onDismiss()">
-                            {{ dialogContainerConfig.dismissLabel | translate }}
-                        </button>
-                        <button
-                            euiButton
-                            euiPrimary
-                            type="button"
-                            *ngIf="dialogContainerConfig.hasAcceptButton"
-                            [euiDisabled]="acceptButtonDisabled$ | async"
-                            class="eui-dialog__footer-accept-button"
-                            (click)="onAccept()">
-                            {{ dialogContainerConfig.acceptLabel | translate }}
-                        </button>
-                    </div>
-                </ng-container>
-            </ng-container>
+                }
+                @if (isFooterComponentPortal) {
+                    <ng-template [cdkPortalOutlet]="footerComponentPortal" (attached)="portalAttached($event, 'footerComponent')"></ng-template>
+                }
-            <ng-container *ngIf="isFooterTemplatePortal">
-                <ng-template [cdkPortalOutlet]="dialogContainerConfig.footer"></ng-template>
-            </ng-container>
-            <ng-container *ngIf="isFooterComponentPortal">
-                <ng-template [cdkPortalOutlet]="footerComponentPortal" (attached)="portalAttached($event, 'footerComponent')"></ng-template>
-            </ng-container>
-        </div>
+            </div>
+        }
     </div>
 </div>
-`, styles: [".eui-dialog-container{display:flex;width:100%}.eui-dialog-container .eui-dialog{background-color:var(--eui-base-color-white);border:2px solid var(--eui-base-color-grey-10);border-radius:var(--eui-base-border-radius);box-shadow:var(--eui-base-shadow-12);display:flex;height:100%;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content{display:flex;flex-direction:column;position:relative;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);border-top-left-radius:var(--eui-base-border-radius-base);border-top-right-radius:var(--eui-base-border-radius-base);display:flex;flex:0 0 auto;justify-content:space-between;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m)}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header ng-component{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-dialog-header,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-message-box-header{align-items:center;display:flex;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-dialog-header>*,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-message-box-header>*{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header-title{color:var(--eui-base-font-color);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:normal normal 400 1.5rem/2.25rem var(--eui-base-font-family);font-weight:700}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header.eui-dialog__header--handle-disabled{cursor:default!important}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body{display:flex;overflow:auto;position:relative}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-base-color-grey-5)}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body ng-component{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body-content{height:auto;padding:var(--eui-base-spacing-m);width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer{align-items:center;background-color:var(--eui-base-color-grey-5);border-bottom-left-radius:var(--eui-base-border-radius-base);border-bottom-right-radius:var(--eui-base-border-radius-base);border-top:1px solid var(--eui-base-color-grey-10);display:flex;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer ng-component{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-dialog-footer,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-message-box-footer{align-items:center;display:flex;justify-content:center;text-align:center;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-dialog-footer>*,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-message-box-footer>*{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer .eui-dialog__footer-content{align-items:center;display:flex;justify-content:flex-end;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer .eui-dialog__footer-dismiss-button--with-accept-button{margin-right:var(--eui-base-spacing-s)}.eui-dialog-container .eui-dialog--no-padding .eui-dialog__content .eui-dialog__body-content{padding:0}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body{align-items:center;display:flex}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content{height:auto;padding:var(--eui-base-spacing-m);align-items:center;display:flex;width:100%}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content-icon-container{align-self:flex-start;padding:var(--eui-base-spacing-m)}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content-icon{background:var(--eui-base-color-grey-10);border-radius:50%;display:inline-flex;font-size:var(--eui-base-font-size-5xl);padding:var(--eui-base-spacing-s)}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content p{margin-top:0}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-icon{margin:0 var(--eui-base-spacing)}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-icon-content{background:var(--eui-base-color-grey-15);border-radius:50%;font-size:var(--eui-base-font-size-5xl);margin-right:var(--eui-base-spacing);overflow:auto;padding:var(--eui-base-spacing-s)}.eui-dialog__backdrop.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:var(--eui-base-color-grey-100);opacity:var(--eui-base-disabled-opacity)}@media screen and (max-width: 767px){.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size){left:0;position:fixed;top:0}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content{height:100vh;height:calc(var(--eui-app-vh, 1vh) * 100);width:100vw}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__header{border-top-left-radius:0;border-top-right-radius:0;flex:0 0 auto}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__body{flex:1 1 auto;height:100vh!important;max-height:100vh!important;max-width:100vw!important;overflow-x:hidden;overflow-y:auto;width:100vw!important}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__body-content{flex:1 1 auto}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__footer{border-bottom-left-radius:0;border-bottom-right-radius:0;flex:0 0 auto;width:100vw}}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--primary{border-color:var(--eui-base-color-primary-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--primary .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--primary .eui-dialog__body-content-icon{color:var(--eui-base-color-primary-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--secondary{border-color:var(--eui-base-color-secondary)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--secondary .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--secondary .eui-dialog__body-content-icon{color:var(--eui-base-color-secondary)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--info{border-color:var(--eui-base-color-info-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--info .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--info .eui-dialog__body-content-icon{color:var(--eui-base-color-info-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--success{border-color:var(--eui-base-color-success-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--success .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--success .eui-dialog__body-content-icon{color:var(--eui-base-color-success-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--warning{border-color:var(--eui-base-color-warning-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--warning .eui-dialog__header-title{color:var(--eui-base-color-warning-130)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--warning .eui-dialog__body-content-icon{color:var(--eui-base-color-warning-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--danger{border-color:var(--eui-base-color-danger-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--danger .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--danger .eui-dialog__body-content-icon{color:var(--eui-base-color-danger-100)}.eui-dialog-container .eui-dialog--draggable .eui-dialog__header{cursor:move}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "directive", type: i4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i5.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+`, styles: [".eui-dialog-container{display:flex;width:100%}.eui-dialog-container .eui-dialog{background-color:var(--eui-base-color-white);border:2px solid var(--eui-base-color-grey-10);border-radius:var(--eui-base-border-radius);box-shadow:var(--eui-base-shadow-12);display:flex;height:100%;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content{display:flex;flex-direction:column;position:relative;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);border-top-left-radius:var(--eui-base-border-radius-base);border-top-right-radius:var(--eui-base-border-radius-base);display:flex;flex:0 0 auto;justify-content:space-between;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m)}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header ng-component{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-dialog-header,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-message-box-header{align-items:center;display:flex;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-dialog-header>*,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-message-box-header>*{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header-title{color:var(--eui-base-font-color);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:normal normal 400 1.5rem/2.25rem var(--eui-base-font-family);font-weight:700}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header.eui-dialog__header--handle-disabled{cursor:default!important}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body{display:flex;overflow:auto;position:relative}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-base-color-grey-5)}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body ng-component{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body-content{height:auto;padding:var(--eui-base-spacing-m);width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer{align-items:center;background-color:var(--eui-base-color-grey-5);border-bottom-left-radius:var(--eui-base-border-radius-base);border-bottom-right-radius:var(--eui-base-border-radius-base);border-top:1px solid var(--eui-base-color-grey-10);display:flex;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer ng-component{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-dialog-footer,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-message-box-footer{align-items:center;display:flex;justify-content:center;text-align:center;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-dialog-footer>*,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-message-box-footer>*{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer .eui-dialog__footer-content{align-items:center;display:flex;justify-content:flex-end;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer .eui-dialog__footer-dismiss-button--with-accept-button{margin-right:var(--eui-base-spacing-s)}.eui-dialog-container .eui-dialog--no-padding .eui-dialog__content .eui-dialog__body-content{padding:0}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body{align-items:center;display:flex}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content{height:auto;padding:var(--eui-base-spacing-m);align-items:center;display:flex;width:100%}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content-icon-container{align-self:flex-start;padding:var(--eui-base-spacing-m)}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content-icon{background:var(--eui-base-color-grey-10);border-radius:50%;display:inline-flex;font-size:var(--eui-base-font-size-5xl);padding:var(--eui-base-spacing-s)}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content p{margin-top:0}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-icon{margin:0 var(--eui-base-spacing)}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-icon-content{background:var(--eui-base-color-grey-15);border-radius:50%;font-size:var(--eui-base-font-size-5xl);margin-right:var(--eui-base-spacing);overflow:auto;padding:var(--eui-base-spacing-s)}.eui-dialog__backdrop.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:var(--eui-base-color-grey-100);opacity:var(--eui-base-disabled-opacity)}@media screen and (max-width: 767px){.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size){left:0;position:fixed;top:0}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content{height:100vh;height:calc(var(--eui-app-vh, 1vh) * 100);width:100vw}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__header{border-top-left-radius:0;border-top-right-radius:0;flex:0 0 auto}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__body{flex:1 1 auto;height:100vh!important;max-height:100vh!important;max-width:100vw!important;overflow-x:hidden;overflow-y:auto;width:100vw!important}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__body-content{flex:1 1 auto}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__footer{border-bottom-left-radius:0;border-bottom-right-radius:0;flex:0 0 auto;width:100vw}}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--primary{border-color:var(--eui-base-color-primary-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--primary .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--primary .eui-dialog__body-content-icon{color:var(--eui-base-color-primary-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--secondary{border-color:var(--eui-base-color-secondary)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--secondary .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--secondary .eui-dialog__body-content-icon{color:var(--eui-base-color-secondary)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--info{border-color:var(--eui-base-color-info-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--info .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--info .eui-dialog__body-content-icon{color:var(--eui-base-color-info-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--success{border-color:var(--eui-base-color-success-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--success .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--success .eui-dialog__body-content-icon{color:var(--eui-base-color-success-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--warning{border-color:var(--eui-base-color-warning-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--warning .eui-dialog__header-title{color:var(--eui-base-color-warning-130)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--warning .eui-dialog__body-content-icon{color:var(--eui-base-color-warning-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--danger{border-color:var(--eui-base-color-danger-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--danger .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--danger .eui-dialog__body-content-icon{color:var(--eui-base-color-danger-100)}.eui-dialog-container .eui-dialog--draggable .eui-dialog__header{cursor:move}\n"], dependencies: [{ kind: "component", type: i1.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i4.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
   }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EuiDialogContainerComponent, decorators: [{
@@ -342,27 +356,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4",
     cdkTrapFocusAutoCapture>
     <div class="eui-dialog__content" role="document" id="dialogContent" aria-labelledby="headerTitle">
         <div class="eui-dialog__header" [class.eui-dialog__header--handle-disabled]="!dialogContainerConfig.isDraggable" cdkDragHandle>
-            <ng-container *ngIf="!isHeaderTemplatePortal && !isHeaderComponentPortal">
+            @if (!isHeaderTemplatePortal && !isHeaderComponentPortal) {
                 <h5 id="headerTitle" class="eui-dialog__header-title">{{ dialogContainerConfig.title | translate }}</h5>
-                <button
-                    *ngIf="dialogContainerConfig.hasCloseButton"
-                    class="dialog-close-button"
-                    (click)="closeDialog()"
-                    euiButton
-                    euiIconButton
-                    euiRounded
-                    euiBasicButton
-                    euiSizeS
-                    aria-label="Dialog close icon">
-                    <eui-icon-svg icon="eui-close"></eui-icon-svg>
-                </button>
-            </ng-container>
-            <ng-container *ngIf="isHeaderTemplatePortal">
+                @if (dialogContainerConfig.hasCloseButton) {
+                    <button
+                        class="dialog-close-button"
+                        (click)="closeDialog()"
+                        euiButton
+                        euiIconButton
+                        euiRounded
+                        euiBasicButton
+                        euiSizeS
+                        aria-label="Dialog close icon">
+                        <eui-icon-svg icon="eui-close"></eui-icon-svg>
+                    </button>
+                }
+            }
+            @if (isHeaderTemplatePortal) {
                 <ng-template [cdkPortalOutlet]="dialogContainerConfig.header"></ng-template>
-            </ng-container>
-            <ng-container *ngIf="isHeaderComponentPortal">
+            }
+            @if (isHeaderComponentPortal) {
                 <ng-template [cdkPortalOutlet]="headerComponentPortal" (attached)="portalAttached($event, 'headerComponent')"></ng-template>
-            </ng-container>
+            }
         </div>
         <div
             class="eui-dialog__body"
@@ -371,78 +386,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4",
             [style.max-height]="dialogContainerConfig.height"
             (scroll)="onScroll()"
             tabindex="0">
-            <span *ngIf="dialogContainerConfig.isMessageBox" class="eui-dialog__body-content-icon-container">
-                <div class="eui-dialog__body-content-icon">
-                    <ng-container *ngIf="dialogContainerConfig.typeClass === 'primary'">
-                        <eui-icon-svg icon="eui-question" fillColor="{{ dialogContainerConfig.typeClass }}"></eui-icon-svg>
-                    </ng-container>
-                    <ng-container *ngIf="dialogContainerConfig.typeClass === 'secondary'">
-                        <eui-icon-svg icon="eui-ecl-warning" fillColor="{{ dialogContainerConfig.typeClass }}"></eui-icon-svg>
-                    </ng-container>
-                    <ng-container *ngIf="dialogContainerConfig.typeClass === 'info'">
-                        <eui-icon-svg icon="eui-info" fillColor="{{ dialogContainerConfig.typeClass }}"></eui-icon-svg>
-                    </ng-container>
-                    <ng-container *ngIf="dialogContainerConfig.typeClass === 'success'">
-                        <eui-icon-svg icon="eui-check" fillColor="{{ dialogContainerConfig.typeClass }}"></eui-icon-svg>
-                    </ng-container>
-                    <ng-container *ngIf="dialogContainerConfig.typeClass === 'warning'">
-                        <eui-icon-svg icon="eui-ecl-warning" fillColor="{{ dialogContainerConfig.typeClass }}"></eui-icon-svg>
-                    </ng-container>
-                    <ng-container *ngIf="dialogContainerConfig.typeClass === 'danger'">
-                        <eui-icon-svg icon="eui-ecl-error" fillColor="{{ dialogContainerConfig.typeClass }}"></eui-icon-svg>
-                    </ng-container>
+            @if (dialogContainerConfig.isMessageBox) {
+                <span class="eui-dialog__body-content-icon-container">
+                    <div class="eui-dialog__body-content-icon">
+                        @if (dialogContainerConfig.typeClass === 'primary' || dialogContainerConfig.typeClass === '') {
+                            <eui-icon-svg icon="eui-question" fillColor="{{ dialogContainerConfig.typeClass }}"></eui-icon-svg>
+                        }
+                        @if (dialogContainerConfig.typeClass === 'secondary') {
+                            <eui-icon-svg icon="eui-ecl-warning" fillColor="{{ dialogContainerConfig.typeClass }}"></eui-icon-svg>
+                        }
+                        @if (dialogContainerConfig.typeClass === 'info') {
+                            <eui-icon-svg icon="eui-info" fillColor="{{ dialogContainerConfig.typeClass }}"></eui-icon-svg>
+                        }
+                        @if (dialogContainerConfig.typeClass === 'success') {
+                            <eui-icon-svg icon="eui-check" fillColor="{{ dialogContainerConfig.typeClass }}"></eui-icon-svg>
+                        }
+                        @if (dialogContainerConfig.typeClass === 'warning') {
+                            <eui-icon-svg icon="eui-ecl-warning" fillColor="{{ dialogContainerConfig.typeClass }}"></eui-icon-svg>
+                        }
+                        @if (dialogContainerConfig.typeClass === 'danger') {
+                            <eui-icon-svg icon="eui-ecl-error" fillColor="{{ dialogContainerConfig.typeClass }}"></eui-icon-svg>
+                        }
+                    </div>
+                </span>
+            }
+            @if (!isBodyTemplatePortal && !isBodyComponentPortal) {
+                <div
+                    id="containerConfigId"
+                    class="eui-dialog__body-content not-isBodyTemplatePortal"
+                    [innerHTML]="dialogContainerConfig.content ? (dialogContainerConfigContent | translate) : null">
                 </div>
-            </span>
-            <div
-                *ngIf="!isBodyTemplatePortal && !isBodyComponentPortal"
-                id="containerConfigId"
-                class="eui-dialog__body-content not-isBodyTemplatePortal"
-                [innerHTML]="dialogContainerConfig.content ? (dialogContainerConfigContent | translate) : null"></div>
-            <div *ngIf="isBodyTemplatePortal && !isBodyComponentPortal" id="bodyTemplatePortalId" class="eui-dialog__body-content isBodyTemplatePortal">
-                <ng-template [cdkPortalOutlet]="getPortalOutlet"></ng-template>
-            </div>
-            <div *ngIf="isBodyComponentPortal" id="bodyComponentPortalId" class="eui-dialog__body-content isBodyComponentPortal">
-                <ng-template [cdkPortalOutlet]="bodyComponentPortal" (attached)="portalAttached($event, 'bodyComponent')"></ng-template>
-            </div>
+            }
+            @if (isBodyTemplatePortal && !isBodyComponentPortal) {
+                <div id="bodyTemplatePortalId" class="eui-dialog__body-content isBodyTemplatePortal">
+                    <ng-template [cdkPortalOutlet]="getPortalOutlet"></ng-template>
+                </div>
+            }
+            @if (isBodyComponentPortal) {
+                <div id="bodyComponentPortalId" class="eui-dialog__body-content isBodyComponentPortal">
+                    <ng-template [cdkPortalOutlet]="bodyComponentPortal" (attached)="portalAttached($event, 'bodyComponent')"></ng-template>
+                </div>
+            }
         </div>
-        <div class="eui-dialog__footer" *ngIf="dialogContainerConfig.hasFooter">
-            <ng-container *ngIf="!isFooterTemplatePortal && !isFooterComponentPortal">
-                <ng-container *ngIf="isFooterTemplatePortal">
+        @if (dialogContainerConfig.hasFooter) {
+            <div class="eui-dialog__footer">
+                @if (!isFooterTemplatePortal && !isFooterComponentPortal) {
+                    @if (isFooterTemplatePortal) {
+                        <ng-template [cdkPortalOutlet]="dialogContainerConfig.footer"></ng-template>
+                    }
+                    @if (!isFooterTemplatePortal) {
+                        <div class="eui-dialog__footer-content">
+                            @if (dialogContainerConfig.hasDismissButton) {
+                                <button
+                                    euiButton
+                                    type="button"
+                                    [euiDisabled]="dismissButtonDisabled$ | async"
+                                    class="eui-dialog__footer-dismiss-button"
+                                    [class.eui-dialog__footer-dismiss-button--with-accept-button]="dialogContainerConfig.hasAcceptButton"
+                                    (click)="onDismiss()">
+                                    {{ dialogContainerConfig.dismissLabel | translate }}
+                                </button>
+                            }
+                            @if (dialogContainerConfig.hasAcceptButton) {
+                                <button
+                                    euiButton
+                                    euiPrimary
+                                    type="button"
+                                    [euiDisabled]="acceptButtonDisabled$ | async"
+                                    class="eui-dialog__footer-accept-button"
+                                    (click)="onAccept()">
+                                    {{ dialogContainerConfig.acceptLabel | translate }}
+                                </button>
+                            }
+                        </div>
+                    }
+                }
+                @if (isFooterTemplatePortal) {
                     <ng-template [cdkPortalOutlet]="dialogContainerConfig.footer"></ng-template>
-                </ng-container>
-                <ng-container *ngIf="!isFooterTemplatePortal">
-                    <div class="eui-dialog__footer-content">
-                        <button
-                            euiButton
-                            type="button"
-                            *ngIf="dialogContainerConfig.hasDismissButton"
-                            [euiDisabled]="dismissButtonDisabled$ | async"
-                            class="eui-dialog__footer-dismiss-button"
-                            [class.eui-dialog__footer-dismiss-button--with-accept-button]="dialogContainerConfig.hasAcceptButton"
-                            (click)="onDismiss()">
-                            {{ dialogContainerConfig.dismissLabel | translate }}
-                        </button>
-                        <button
-                            euiButton
-                            euiPrimary
-                            type="button"
-                            *ngIf="dialogContainerConfig.hasAcceptButton"
-                            [euiDisabled]="acceptButtonDisabled$ | async"
-                            class="eui-dialog__footer-accept-button"
-                            (click)="onAccept()">
-                            {{ dialogContainerConfig.acceptLabel | translate }}
-                        </button>
-                    </div>
-                </ng-container>
-            </ng-container>
+                }
+                @if (isFooterComponentPortal) {
+                    <ng-template [cdkPortalOutlet]="footerComponentPortal" (attached)="portalAttached($event, 'footerComponent')"></ng-template>
+                }
-            <ng-container *ngIf="isFooterTemplatePortal">
-                <ng-template [cdkPortalOutlet]="dialogContainerConfig.footer"></ng-template>
-            </ng-container>
-            <ng-container *ngIf="isFooterComponentPortal">
-                <ng-template [cdkPortalOutlet]="footerComponentPortal" (attached)="portalAttached($event, 'footerComponent')"></ng-template>
-            </ng-container>
-        </div>
+            </div>
+        }
     </div>
 </div>
 `, styles: [".eui-dialog-container{display:flex;width:100%}.eui-dialog-container .eui-dialog{background-color:var(--eui-base-color-white);border:2px solid var(--eui-base-color-grey-10);border-radius:var(--eui-base-border-radius);box-shadow:var(--eui-base-shadow-12);display:flex;height:100%;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content{display:flex;flex-direction:column;position:relative;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);border-top-left-radius:var(--eui-base-border-radius-base);border-top-right-radius:var(--eui-base-border-radius-base);display:flex;flex:0 0 auto;justify-content:space-between;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m)}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header ng-component{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-dialog-header,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-message-box-header{align-items:center;display:flex;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-dialog-header>*,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-message-box-header>*{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header-title{color:var(--eui-base-font-color);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:normal normal 400 1.5rem/2.25rem var(--eui-base-font-family);font-weight:700}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header.eui-dialog__header--handle-disabled{cursor:default!important}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body{display:flex;overflow:auto;position:relative}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-base-color-grey-5)}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body ng-component{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body-content{height:auto;padding:var(--eui-base-spacing-m);width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer{align-items:center;background-color:var(--eui-base-color-grey-5);border-bottom-left-radius:var(--eui-base-border-radius-base);border-bottom-right-radius:var(--eui-base-border-radius-base);border-top:1px solid var(--eui-base-color-grey-10);display:flex;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer ng-component{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-dialog-footer,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-message-box-footer{align-items:center;display:flex;justify-content:center;text-align:center;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-dialog-footer>*,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-message-box-footer>*{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer .eui-dialog__footer-content{align-items:center;display:flex;justify-content:flex-end;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer .eui-dialog__footer-dismiss-button--with-accept-button{margin-right:var(--eui-base-spacing-s)}.eui-dialog-container .eui-dialog--no-padding .eui-dialog__content .eui-dialog__body-content{padding:0}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body{align-items:center;display:flex}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content{height:auto;padding:var(--eui-base-spacing-m);align-items:center;display:flex;width:100%}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content-icon-container{align-self:flex-start;padding:var(--eui-base-spacing-m)}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content-icon{background:var(--eui-base-color-grey-10);border-radius:50%;display:inline-flex;font-size:var(--eui-base-font-size-5xl);padding:var(--eui-base-spacing-s)}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content p{margin-top:0}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-icon{margin:0 var(--eui-base-spacing)}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-icon-content{background:var(--eui-base-color-grey-15);border-radius:50%;font-size:var(--eui-base-font-size-5xl);margin-right:var(--eui-base-spacing);overflow:auto;padding:var(--eui-base-spacing-s)}.eui-dialog__backdrop.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:var(--eui-base-color-grey-100);opacity:var(--eui-base-disabled-opacity)}@media screen and (max-width: 767px){.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size){left:0;position:fixed;top:0}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content{height:100vh;height:calc(var(--eui-app-vh, 1vh) * 100);width:100vw}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__header{border-top-left-radius:0;border-top-right-radius:0;flex:0 0 auto}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__body{flex:1 1 auto;height:100vh!important;max-height:100vh!important;max-width:100vw!important;overflow-x:hidden;overflow-y:auto;width:100vw!important}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__body-content{flex:1 1 auto}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__footer{border-bottom-left-radius:0;border-bottom-right-radius:0;flex:0 0 auto;width:100vw}}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--primary{border-color:var(--eui-base-color-primary-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--primary .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--primary .eui-dialog__body-content-icon{color:var(--eui-base-color-primary-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--secondary{border-color:var(--eui-base-color-secondary)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--secondary .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--secondary .eui-dialog__body-content-icon{color:var(--eui-base-color-secondary)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--info{border-color:var(--eui-base-color-info-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--info .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--info .eui-dialog__body-content-icon{color:var(--eui-base-color-info-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--success{border-color:var(--eui-base-color-success-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--success .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--success .eui-dialog__body-content-icon{color:var(--eui-base-color-success-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--warning{border-color:var(--eui-base-color-warning-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--warning .eui-dialog__header-title{color:var(--eui-base-color-warning-130)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--warning .eui-dialog__body-content-icon{color:var(--eui-base-color-warning-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--danger{border-color:var(--eui-base-color-danger-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--danger .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--danger .eui-dialog__body-content-icon{color:var(--eui-base-color-danger-100)}.eui-dialog-container .eui-dialog--draggable .eui-dialog__header{cursor:move}\n"] }]
@@ -675,13 +703,14 @@ i02.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4",
 import { Component as Component2, ChangeDetectionStrategy as ChangeDetectionStrategy3, ViewEncapsulation as ViewEncapsulation3, Input, ViewChild, Output, EventEmitter, Directive, ContentChild, forwardRef, booleanAttribute } from "@angular/core";
 import { TemplatePortal as TemplatePortal2 } from "@angular/cdk/portal";
 import { BehaviorSubject as BehaviorSubject3, Subject as Subject3 } from "rxjs";
-import { BaseDirective } from "@eui/components/shared";
+import { BaseStatesDirective } from "@eui/components/shared";
 import * as i03 from "@angular/core";
-var EuiDialogComponent = class _EuiDialogComponent extends BaseDirective {
-  constructor(viewContainerRef, euiDialogService) {
-    super();
+import * as i22 from "@eui/components/shared";
+var EuiDialogComponent = class _EuiDialogComponent {
+  constructor(viewContainerRef, euiDialogService, baseStatesDirective) {
     this.viewContainerRef = viewContainerRef;
     this.euiDialogService = euiDialogService;
+    this.baseStatesDirective = baseStatesDirective;
     this.e2eAttr = "eui-dialog";
     this.acceptLabel = "eui.OK";
     this.dismissLabel = "eui.CANCEL";
@@ -732,27 +761,6 @@ var EuiDialogComponent = class _EuiDialogComponent extends BaseDirective {
       this.hasClosedOnEscape = false;
       this.hasCloseButton = false;
     }
-    if (this.euiPrimary) {
-      this.typeClass = "primary";
-    }
-    if (this.euiSecondary) {
-      this.typeClass = "secondary";
-    }
-    if (this.euiInfo) {
-      this.typeClass = "info";
-    }
-    if (this.euiSuccess) {
-      this.typeClass = "success";
-    }
-    if (this.euiWarning) {
-      this.typeClass = "warning";
-    }
-    if (this.euiDanger) {
-      this.typeClass = "danger";
-    }
-    if (this.euiAccent) {
-      this.typeClass = "accent";
-    }
   }
   ngAfterViewInit() {
     if (this.euiDialogHeaderDirective) {
@@ -773,7 +781,9 @@ var EuiDialogComponent = class _EuiDialogComponent extends BaseDirective {
    * @usageNotes
    * ```html
    * <eui-dialog #dialog>
-   *      <my-component *ngIf="dialog.isOpen"></my-component>
+   *      \@if (dialog.isOpen) {
+   *          <my-component></my-component>
+   *      }
    * </eui-dialog>
    * ```
    * @returns A boolean with value `true` when open, otherwise `false`.
@@ -793,7 +803,7 @@ var EuiDialogComponent = class _EuiDialogComponent extends BaseDirective {
       width: this.width,
       height: this.height,
       isFullScreen: this.isFullScreen,
-      typeClass: this.typeClass,
+      typeClass: this.baseStatesDirective.euiVariant,
       acceptLabel: this.acceptLabel,
       dismissLabel: this.dismissLabel,
       hasCloseButton: this.hasCloseButton,
@@ -885,16 +895,30 @@ var EuiDialogComponent = class _EuiDialogComponent extends BaseDirective {
     this.euiDialogService.getDialog(this.dialog.id).containerRef.instance.enableDismissButton();
   }
   static {
-    this.ɵfac = i03.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i03, type: _EuiDialogComponent, deps: [{ token: i03.ViewContainerRef }, { token: EuiDialogService }], target: i03.ɵɵFactoryTarget.Component });
+    this.ɵfac = i03.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i03, type: _EuiDialogComponent, deps: [{ token: i03.ViewContainerRef }, { token: EuiDialogService }, { token: i22.BaseStatesDirective }], target: i03.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i03.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.4", type: _EuiDialogComponent, selector: "eui-dialog", inputs: { e2eAttr: "e2eAttr", title: "title", acceptLabel: "acceptLabel", dismissLabel: "dismissLabel", typeClass: "typeClass", verticalPosition: "verticalPosition", width: "width", height: "height", isFullScreen: ["isFullScreen", "isFullScreen", booleanAttribute], hasCloseButton: ["hasCloseButton", "hasCloseButton", booleanAttribute], hasAcceptButton: ["hasAcceptButton", "hasAcceptButton", booleanAttribute], hasDismissButton: ["hasDismissButton", "hasDismissButton", booleanAttribute], hasMobileCustomSize: ["hasMobileCustomSize", "hasMobileCustomSize", booleanAttribute], isClosedOnClickOutside: ["isClosedOnClickOutside", "isClosedOnClickOutside", booleanAttribute], hasClosedOnClickOutside: ["hasClosedOnClickOutside", "hasClosedOnClickOutside", booleanAttribute], isClosedOnEscape: ["isClosedOnEscape", "isClosedOnEscape", booleanAttribute], hasClosedOnEscape: ["hasClosedOnEscape", "hasClosedOnEscape", booleanAttribute], isHandleCloseOnDismiss: ["isHandleCloseOnDismiss", "isHandleCloseOnDismiss", booleanAttribute], isHandleCloseOnClose: ["isHandleCloseOnClose", "isHandleCloseOnClose", booleanAttribute], isHandleCloseOnAccept: ["isHandleCloseOnAccept", "isHandleCloseOnAccept", booleanAttribute], isHandleCloseOnClickOutside: ["isHandleCloseOnClickOutside", "isHandleCloseOnClickOutside", booleanAttribute], isHandleCloseOnEscape: ["isHandleCloseOnEscape", "isHandleCloseOnEscape", booleanAttribute], isMessageBox: ["isMessageBox", "isMessageBox", booleanAttribute], isDraggable: ["isDraggable", "isDraggable", booleanAttribute], hasNoBodyPadding: ["hasNoBodyPadding", "hasNoBodyPadding", booleanAttribute], hasFooter: ["hasFooter", "hasFooter", booleanAttribute] }, outputs: { clickOutside: "clickOutside", escape: "escape", dialogOpen: "dialogOpen", dialogClose: "dialogClose", dismiss: "dismiss", accept: "accept" }, providers: [{ provide: DIALOG_COMPONENT_CONFIG, useValue: null }], queries: [{ propertyName: "euiDialogHeaderDirective", first: true, predicate: i03.forwardRef(() => EuiDialogHeaderDirective), descendants: true }, { propertyName: "euiDialogFooterDirective", first: true, predicate: i03.forwardRef(() => EuiDialogFooterDirective), descendants: true }], viewQueries: [{ propertyName: "templateRefHeader", first: true, predicate: ["templateRefHeader"], descendants: true }, { propertyName: "templateRefContent", first: true, predicate: ["templateRefContent"], descendants: true }, { propertyName: "templateRefFooter", first: true, predicate: ["templateRefFooter"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i03, template: '<ng-template #templateRefHeader>\n    <ng-content select="eui-dialog-header"></ng-content>\n</ng-template>\n<ng-template #templateRefContent>\n    <ng-content></ng-content>\n</ng-template>\n<ng-template #templateRefFooter>\n    <ng-content select="eui-dialog-footer"></ng-content>\n</ng-template>\n', styles: [".eui-dialog-container{display:flex;width:100%}.eui-dialog-container .eui-dialog{background-color:var(--eui-base-color-white);border:2px solid var(--eui-base-color-grey-10);border-radius:var(--eui-base-border-radius);box-shadow:var(--eui-base-shadow-12);display:flex;height:100%;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content{display:flex;flex-direction:column;position:relative;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);border-top-left-radius:var(--eui-base-border-radius-base);border-top-right-radius:var(--eui-base-border-radius-base);display:flex;flex:0 0 auto;justify-content:space-between;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m)}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header ng-component{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-dialog-header,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-message-box-header{align-items:center;display:flex;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-dialog-header>*,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-message-box-header>*{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header-title{color:var(--eui-base-font-color);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:normal normal 400 1.5rem/2.25rem var(--eui-base-font-family);font-weight:700}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header.eui-dialog__header--handle-disabled{cursor:default!important}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body{display:flex;overflow:auto;position:relative}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-base-color-grey-5)}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body ng-component{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body-content{height:auto;padding:var(--eui-base-spacing-m);width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer{align-items:center;background-color:var(--eui-base-color-grey-5);border-bottom-left-radius:var(--eui-base-border-radius-base);border-bottom-right-radius:var(--eui-base-border-radius-base);border-top:1px solid var(--eui-base-color-grey-10);display:flex;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer ng-component{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-dialog-footer,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-message-box-footer{align-items:center;display:flex;justify-content:center;text-align:center;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-dialog-footer>*,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-message-box-footer>*{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer .eui-dialog__footer-content{align-items:center;display:flex;justify-content:flex-end;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer .eui-dialog__footer-dismiss-button--with-accept-button{margin-right:var(--eui-base-spacing-s)}.eui-dialog-container .eui-dialog--no-padding .eui-dialog__content .eui-dialog__body-content{padding:0}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body{align-items:center;display:flex}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content{height:auto;padding:var(--eui-base-spacing-m);align-items:center;display:flex;width:100%}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content-icon-container{align-self:flex-start;padding:var(--eui-base-spacing-m)}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content-icon{background:var(--eui-base-color-grey-10);border-radius:50%;display:inline-flex;font-size:var(--eui-base-font-size-5xl);padding:var(--eui-base-spacing-s)}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content p{margin-top:0}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-icon{margin:0 var(--eui-base-spacing)}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-icon-content{background:var(--eui-base-color-grey-15);border-radius:50%;font-size:var(--eui-base-font-size-5xl);margin-right:var(--eui-base-spacing);overflow:auto;padding:var(--eui-base-spacing-s)}.eui-dialog__backdrop.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:var(--eui-base-color-grey-100);opacity:var(--eui-base-disabled-opacity)}@media screen and (max-width: 767px){.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size){left:0;position:fixed;top:0}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content{height:100vh;height:calc(var(--eui-app-vh, 1vh) * 100);width:100vw}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__header{border-top-left-radius:0;border-top-right-radius:0;flex:0 0 auto}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__body{flex:1 1 auto;height:100vh!important;max-height:100vh!important;max-width:100vw!important;overflow-x:hidden;overflow-y:auto;width:100vw!important}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__body-content{flex:1 1 auto}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__footer{border-bottom-left-radius:0;border-bottom-right-radius:0;flex:0 0 auto;width:100vw}}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--primary{border-color:var(--eui-base-color-primary-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--primary .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--primary .eui-dialog__body-content-icon{color:var(--eui-base-color-primary-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--secondary{border-color:var(--eui-base-color-secondary)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--secondary .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--secondary .eui-dialog__body-content-icon{color:var(--eui-base-color-secondary)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--info{border-color:var(--eui-base-color-info-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--info .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--info .eui-dialog__body-content-icon{color:var(--eui-base-color-info-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--success{border-color:var(--eui-base-color-success-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--success .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--success .eui-dialog__body-content-icon{color:var(--eui-base-color-success-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--warning{border-color:var(--eui-base-color-warning-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--warning .eui-dialog__header-title{color:var(--eui-base-color-warning-130)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--warning .eui-dialog__body-content-icon{color:var(--eui-base-color-warning-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--danger{border-color:var(--eui-base-color-danger-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--danger .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--danger .eui-dialog__body-content-icon{color:var(--eui-base-color-danger-100)}.eui-dialog-container .eui-dialog--draggable .eui-dialog__header{cursor:move}\n"], changeDetection: i03.ChangeDetectionStrategy.OnPush, encapsulation: i03.ViewEncapsulation.None });
+    this.ɵcmp = i03.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.4", type: _EuiDialogComponent, selector: "eui-dialog", inputs: { e2eAttr: "e2eAttr", title: "title", acceptLabel: "acceptLabel", dismissLabel: "dismissLabel", typeClass: "typeClass", verticalPosition: "verticalPosition", width: "width", height: "height", isFullScreen: ["isFullScreen", "isFullScreen", booleanAttribute], hasCloseButton: ["hasCloseButton", "hasCloseButton", booleanAttribute], hasAcceptButton: ["hasAcceptButton", "hasAcceptButton", booleanAttribute], hasDismissButton: ["hasDismissButton", "hasDismissButton", booleanAttribute], hasMobileCustomSize: ["hasMobileCustomSize", "hasMobileCustomSize", booleanAttribute], isClosedOnClickOutside: ["isClosedOnClickOutside", "isClosedOnClickOutside", booleanAttribute], hasClosedOnClickOutside: ["hasClosedOnClickOutside", "hasClosedOnClickOutside", booleanAttribute], isClosedOnEscape: ["isClosedOnEscape", "isClosedOnEscape", booleanAttribute], hasClosedOnEscape: ["hasClosedOnEscape", "hasClosedOnEscape", booleanAttribute], isHandleCloseOnDismiss: ["isHandleCloseOnDismiss", "isHandleCloseOnDismiss", booleanAttribute], isHandleCloseOnClose: ["isHandleCloseOnClose", "isHandleCloseOnClose", booleanAttribute], isHandleCloseOnAccept: ["isHandleCloseOnAccept", "isHandleCloseOnAccept", booleanAttribute], isHandleCloseOnClickOutside: ["isHandleCloseOnClickOutside", "isHandleCloseOnClickOutside", booleanAttribute], isHandleCloseOnEscape: ["isHandleCloseOnEscape", "isHandleCloseOnEscape", booleanAttribute], isMessageBox: ["isMessageBox", "isMessageBox", booleanAttribute], isDraggable: ["isDraggable", "isDraggable", booleanAttribute], hasNoBodyPadding: ["hasNoBodyPadding", "hasNoBodyPadding", booleanAttribute], hasFooter: ["hasFooter", "hasFooter", booleanAttribute] }, outputs: { clickOutside: "clickOutside", escape: "escape", dialogOpen: "dialogOpen", dialogClose: "dialogClose", dismiss: "dismiss", accept: "accept" }, providers: [{ provide: DIALOG_COMPONENT_CONFIG, useValue: null }], queries: [{ propertyName: "euiDialogHeaderDirective", first: true, predicate: i03.forwardRef(() => EuiDialogHeaderDirective), descendants: true }, { propertyName: "euiDialogFooterDirective", first: true, predicate: i03.forwardRef(() => EuiDialogFooterDirective), descendants: true }], viewQueries: [{ propertyName: "templateRefHeader", first: true, predicate: ["templateRefHeader"], descendants: true }, { propertyName: "templateRefContent", first: true, predicate: ["templateRefContent"], descendants: true }, { propertyName: "templateRefFooter", first: true, predicate: ["templateRefFooter"], descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i22.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiInfo", "euiInfo", "euiSuccess", "euiSuccess", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant"] }], ngImport: i03, template: '<ng-template #templateRefHeader>\n    <ng-content select="eui-dialog-header"></ng-content>\n</ng-template>\n<ng-template #templateRefContent>\n    <ng-content></ng-content>\n</ng-template>\n<ng-template #templateRefFooter>\n    <ng-content select="eui-dialog-footer"></ng-content>\n</ng-template>\n', styles: [".eui-dialog-container{display:flex;width:100%}.eui-dialog-container .eui-dialog{background-color:var(--eui-base-color-white);border:2px solid var(--eui-base-color-grey-10);border-radius:var(--eui-base-border-radius);box-shadow:var(--eui-base-shadow-12);display:flex;height:100%;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content{display:flex;flex-direction:column;position:relative;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);border-top-left-radius:var(--eui-base-border-radius-base);border-top-right-radius:var(--eui-base-border-radius-base);display:flex;flex:0 0 auto;justify-content:space-between;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m)}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header ng-component{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-dialog-header,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-message-box-header{align-items:center;display:flex;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-dialog-header>*,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-message-box-header>*{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header-title{color:var(--eui-base-font-color);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:normal normal 400 1.5rem/2.25rem var(--eui-base-font-family);font-weight:700}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header.eui-dialog__header--handle-disabled{cursor:default!important}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body{display:flex;overflow:auto;position:relative}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-base-color-grey-5)}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body ng-component{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body-content{height:auto;padding:var(--eui-base-spacing-m);width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer{align-items:center;background-color:var(--eui-base-color-grey-5);border-bottom-left-radius:var(--eui-base-border-radius-base);border-bottom-right-radius:var(--eui-base-border-radius-base);border-top:1px solid var(--eui-base-color-grey-10);display:flex;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer ng-component{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-dialog-footer,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-message-box-footer{align-items:center;display:flex;justify-content:center;text-align:center;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-dialog-footer>*,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-message-box-footer>*{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer .eui-dialog__footer-content{align-items:center;display:flex;justify-content:flex-end;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer .eui-dialog__footer-dismiss-button--with-accept-button{margin-right:var(--eui-base-spacing-s)}.eui-dialog-container .eui-dialog--no-padding .eui-dialog__content .eui-dialog__body-content{padding:0}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body{align-items:center;display:flex}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content{height:auto;padding:var(--eui-base-spacing-m);align-items:center;display:flex;width:100%}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content-icon-container{align-self:flex-start;padding:var(--eui-base-spacing-m)}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content-icon{background:var(--eui-base-color-grey-10);border-radius:50%;display:inline-flex;font-size:var(--eui-base-font-size-5xl);padding:var(--eui-base-spacing-s)}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content p{margin-top:0}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-icon{margin:0 var(--eui-base-spacing)}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-icon-content{background:var(--eui-base-color-grey-15);border-radius:50%;font-size:var(--eui-base-font-size-5xl);margin-right:var(--eui-base-spacing);overflow:auto;padding:var(--eui-base-spacing-s)}.eui-dialog__backdrop.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:var(--eui-base-color-grey-100);opacity:var(--eui-base-disabled-opacity)}@media screen and (max-width: 767px){.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size){left:0;position:fixed;top:0}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content{height:100vh;height:calc(var(--eui-app-vh, 1vh) * 100);width:100vw}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__header{border-top-left-radius:0;border-top-right-radius:0;flex:0 0 auto}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__body{flex:1 1 auto;height:100vh!important;max-height:100vh!important;max-width:100vw!important;overflow-x:hidden;overflow-y:auto;width:100vw!important}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__body-content{flex:1 1 auto}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__footer{border-bottom-left-radius:0;border-bottom-right-radius:0;flex:0 0 auto;width:100vw}}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--primary{border-color:var(--eui-base-color-primary-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--primary .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--primary .eui-dialog__body-content-icon{color:var(--eui-base-color-primary-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--secondary{border-color:var(--eui-base-color-secondary)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--secondary .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--secondary .eui-dialog__body-content-icon{color:var(--eui-base-color-secondary)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--info{border-color:var(--eui-base-color-info-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--info .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--info .eui-dialog__body-content-icon{color:var(--eui-base-color-info-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--success{border-color:var(--eui-base-color-success-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--success .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--success .eui-dialog__body-content-icon{color:var(--eui-base-color-success-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--warning{border-color:var(--eui-base-color-warning-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--warning .eui-dialog__header-title{color:var(--eui-base-color-warning-130)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--warning .eui-dialog__body-content-icon{color:var(--eui-base-color-warning-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--danger{border-color:var(--eui-base-color-danger-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--danger .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--danger .eui-dialog__body-content-icon{color:var(--eui-base-color-danger-100)}.eui-dialog-container .eui-dialog--draggable .eui-dialog__header{cursor:move}\n"], changeDetection: i03.ChangeDetectionStrategy.OnPush, encapsulation: i03.ViewEncapsulation.None });
   }
 };
 i03.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i03, type: EuiDialogComponent, decorators: [{
   type: Component2,
-  args: [{ selector: "eui-dialog", providers: [{ provide: DIALOG_COMPONENT_CONFIG, useValue: null }], changeDetection: ChangeDetectionStrategy3.OnPush, encapsulation: ViewEncapsulation3.None, template: '<ng-template #templateRefHeader>\n    <ng-content select="eui-dialog-header"></ng-content>\n</ng-template>\n<ng-template #templateRefContent>\n    <ng-content></ng-content>\n</ng-template>\n<ng-template #templateRefFooter>\n    <ng-content select="eui-dialog-footer"></ng-content>\n</ng-template>\n', styles: [".eui-dialog-container{display:flex;width:100%}.eui-dialog-container .eui-dialog{background-color:var(--eui-base-color-white);border:2px solid var(--eui-base-color-grey-10);border-radius:var(--eui-base-border-radius);box-shadow:var(--eui-base-shadow-12);display:flex;height:100%;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content{display:flex;flex-direction:column;position:relative;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);border-top-left-radius:var(--eui-base-border-radius-base);border-top-right-radius:var(--eui-base-border-radius-base);display:flex;flex:0 0 auto;justify-content:space-between;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m)}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header ng-component{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-dialog-header,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-message-box-header{align-items:center;display:flex;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-dialog-header>*,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-message-box-header>*{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header-title{color:var(--eui-base-font-color);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:normal normal 400 1.5rem/2.25rem var(--eui-base-font-family);font-weight:700}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header.eui-dialog__header--handle-disabled{cursor:default!important}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body{display:flex;overflow:auto;position:relative}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-base-color-grey-5)}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body ng-component{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body-content{height:auto;padding:var(--eui-base-spacing-m);width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer{align-items:center;background-color:var(--eui-base-color-grey-5);border-bottom-left-radius:var(--eui-base-border-radius-base);border-bottom-right-radius:var(--eui-base-border-radius-base);border-top:1px solid var(--eui-base-color-grey-10);display:flex;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer ng-component{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-dialog-footer,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-message-box-footer{align-items:center;display:flex;justify-content:center;text-align:center;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-dialog-footer>*,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-message-box-footer>*{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer .eui-dialog__footer-content{align-items:center;display:flex;justify-content:flex-end;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer .eui-dialog__footer-dismiss-button--with-accept-button{margin-right:var(--eui-base-spacing-s)}.eui-dialog-container .eui-dialog--no-padding .eui-dialog__content .eui-dialog__body-content{padding:0}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body{align-items:center;display:flex}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content{height:auto;padding:var(--eui-base-spacing-m);align-items:center;display:flex;width:100%}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content-icon-container{align-self:flex-start;padding:var(--eui-base-spacing-m)}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content-icon{background:var(--eui-base-color-grey-10);border-radius:50%;display:inline-flex;font-size:var(--eui-base-font-size-5xl);padding:var(--eui-base-spacing-s)}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content p{margin-top:0}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-icon{margin:0 var(--eui-base-spacing)}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-icon-content{background:var(--eui-base-color-grey-15);border-radius:50%;font-size:var(--eui-base-font-size-5xl);margin-right:var(--eui-base-spacing);overflow:auto;padding:var(--eui-base-spacing-s)}.eui-dialog__backdrop.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:var(--eui-base-color-grey-100);opacity:var(--eui-base-disabled-opacity)}@media screen and (max-width: 767px){.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size){left:0;position:fixed;top:0}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content{height:100vh;height:calc(var(--eui-app-vh, 1vh) * 100);width:100vw}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__header{border-top-left-radius:0;border-top-right-radius:0;flex:0 0 auto}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__body{flex:1 1 auto;height:100vh!important;max-height:100vh!important;max-width:100vw!important;overflow-x:hidden;overflow-y:auto;width:100vw!important}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__body-content{flex:1 1 auto}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__footer{border-bottom-left-radius:0;border-bottom-right-radius:0;flex:0 0 auto;width:100vw}}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--primary{border-color:var(--eui-base-color-primary-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--primary .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--primary .eui-dialog__body-content-icon{color:var(--eui-base-color-primary-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--secondary{border-color:var(--eui-base-color-secondary)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--secondary .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--secondary .eui-dialog__body-content-icon{color:var(--eui-base-color-secondary)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--info{border-color:var(--eui-base-color-info-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--info .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--info .eui-dialog__body-content-icon{color:var(--eui-base-color-info-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--success{border-color:var(--eui-base-color-success-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--success .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--success .eui-dialog__body-content-icon{color:var(--eui-base-color-success-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--warning{border-color:var(--eui-base-color-warning-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--warning .eui-dialog__header-title{color:var(--eui-base-color-warning-130)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--warning .eui-dialog__body-content-icon{color:var(--eui-base-color-warning-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--danger{border-color:var(--eui-base-color-danger-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--danger .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--danger .eui-dialog__body-content-icon{color:var(--eui-base-color-danger-100)}.eui-dialog-container .eui-dialog--draggable .eui-dialog__header{cursor:move}\n"] }]
-}], ctorParameters: () => [{ type: i03.ViewContainerRef }, { type: EuiDialogService }], propDecorators: { e2eAttr: [{
+  args: [{ selector: "eui-dialog", providers: [{ provide: DIALOG_COMPONENT_CONFIG, useValue: null }], changeDetection: ChangeDetectionStrategy3.OnPush, encapsulation: ViewEncapsulation3.None, hostDirectives: [
+    {
+      directive: BaseStatesDirective,
+      inputs: [
+        "euiPrimary",
+        "euiSecondary",
+        "euiInfo",
+        "euiSuccess",
+        "euiWarning",
+        "euiDanger",
+        "euiAccent",
+        "euiVariant"
+      ]
+    }
+  ], template: '<ng-template #templateRefHeader>\n    <ng-content select="eui-dialog-header"></ng-content>\n</ng-template>\n<ng-template #templateRefContent>\n    <ng-content></ng-content>\n</ng-template>\n<ng-template #templateRefFooter>\n    <ng-content select="eui-dialog-footer"></ng-content>\n</ng-template>\n', styles: [".eui-dialog-container{display:flex;width:100%}.eui-dialog-container .eui-dialog{background-color:var(--eui-base-color-white);border:2px solid var(--eui-base-color-grey-10);border-radius:var(--eui-base-border-radius);box-shadow:var(--eui-base-shadow-12);display:flex;height:100%;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content{display:flex;flex-direction:column;position:relative;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);border-top-left-radius:var(--eui-base-border-radius-base);border-top-right-radius:var(--eui-base-border-radius-base);display:flex;flex:0 0 auto;justify-content:space-between;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m)}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header ng-component{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-dialog-header,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-message-box-header{align-items:center;display:flex;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-dialog-header>*,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header eui-message-box-header>*{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header-title{color:var(--eui-base-font-color);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:normal normal 400 1.5rem/2.25rem var(--eui-base-font-family);font-weight:700}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__header.eui-dialog__header--handle-disabled{cursor:default!important}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body{display:flex;overflow:auto;position:relative}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-base-color-grey-5)}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body ng-component{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__body-content{height:auto;padding:var(--eui-base-spacing-m);width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer{align-items:center;background-color:var(--eui-base-color-grey-5);border-bottom-left-radius:var(--eui-base-border-radius-base);border-bottom-right-radius:var(--eui-base-border-radius-base);border-top:1px solid var(--eui-base-color-grey-10);display:flex;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer ng-component{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-dialog-footer,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-message-box-footer{align-items:center;display:flex;justify-content:center;text-align:center;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-dialog-footer>*,.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer eui-message-box-footer>*{width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer .eui-dialog__footer-content{align-items:center;display:flex;justify-content:flex-end;width:100%}.eui-dialog-container .eui-dialog .eui-dialog__content .eui-dialog__footer .eui-dialog__footer-dismiss-button--with-accept-button{margin-right:var(--eui-base-spacing-s)}.eui-dialog-container .eui-dialog--no-padding .eui-dialog__content .eui-dialog__body-content{padding:0}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body{align-items:center;display:flex}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content{height:auto;padding:var(--eui-base-spacing-m);align-items:center;display:flex;width:100%}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content-icon-container{align-self:flex-start;padding:var(--eui-base-spacing-m)}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content-icon{background:var(--eui-base-color-grey-10);border-radius:50%;display:inline-flex;font-size:var(--eui-base-font-size-5xl);padding:var(--eui-base-spacing-s)}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-content p{margin-top:0}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-icon{margin:0 var(--eui-base-spacing)}.eui-dialog-container .eui-dialog.eui-dialog--message-box .eui-dialog__content .eui-dialog__body-icon-content{background:var(--eui-base-color-grey-15);border-radius:50%;font-size:var(--eui-base-font-size-5xl);margin-right:var(--eui-base-spacing);overflow:auto;padding:var(--eui-base-spacing-s)}.eui-dialog__backdrop.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:var(--eui-base-color-grey-100);opacity:var(--eui-base-disabled-opacity)}@media screen and (max-width: 767px){.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size){left:0;position:fixed;top:0}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content{height:100vh;height:calc(var(--eui-app-vh, 1vh) * 100);width:100vw}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__header{border-top-left-radius:0;border-top-right-radius:0;flex:0 0 auto}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__body{flex:1 1 auto;height:100vh!important;max-height:100vh!important;max-width:100vw!important;overflow-x:hidden;overflow-y:auto;width:100vw!important}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__body-content{flex:1 1 auto}.eui-dialog-container .eui-dialog:not(.eui-dialog--custom-size) .eui-dialog__content .eui-dialog__footer{border-bottom-left-radius:0;border-bottom-right-radius:0;flex:0 0 auto;width:100vw}}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--primary{border-color:var(--eui-base-color-primary-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--primary .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--primary .eui-dialog__body-content-icon{color:var(--eui-base-color-primary-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--secondary{border-color:var(--eui-base-color-secondary)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--secondary .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--secondary .eui-dialog__body-content-icon{color:var(--eui-base-color-secondary)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--info{border-color:var(--eui-base-color-info-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--info .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--info .eui-dialog__body-content-icon{color:var(--eui-base-color-info-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--success{border-color:var(--eui-base-color-success-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--success .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--success .eui-dialog__body-content-icon{color:var(--eui-base-color-success-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--warning{border-color:var(--eui-base-color-warning-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--warning .eui-dialog__header-title{color:var(--eui-base-color-warning-130)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--warning .eui-dialog__body-content-icon{color:var(--eui-base-color-warning-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--danger{border-color:var(--eui-base-color-danger-100)}.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--danger .eui-dialog__header-title,.eui-dialog-container .eui-dialog.eui-dialog--message-box.eui-dialog--danger .eui-dialog__body-content-icon{color:var(--eui-base-color-danger-100)}.eui-dialog-container .eui-dialog--draggable .eui-dialog__header{cursor:move}\n"] }]
+}], ctorParameters: () => [{ type: i03.ViewContainerRef }, { type: EuiDialogService }, { type: i22.BaseStatesDirective }], propDecorators: { e2eAttr: [{
   type: Input
 }], title: [{
   type: Input